/* public/styles.css — §8.2 design tokens verbatim, then the components.
   Warm cream, light only. No dark mode: `color-scheme: light` prevents forced inversion. */

:root{
  color-scheme: light;
  --bg:        #f7f2e9;   --surface:   #fffdf8;   --surface-2: #fbf6ec;
  --line:      #e9ddca;   --line-soft: #f0e7d6;
  --ink:   #453f36;       --ink-2: #6b6156;       --ink-3: #8a7f70;
  --accent:     #c2603f;  --accent-bg:  #fbe8df;  --accent-line:#eec9b8;
  --sev-critical-fg:#a33322; --sev-critical-bg:#f8e3dd; --sev-critical-line:#eec6ba;
  --sev-high-fg:    #944318; --sev-high-bg:    #fae6d6; --sev-high-line:    #eecdb2;
  --sev-medium-fg:  #7d5a10; --sev-medium-bg:  #f8eed0; --sev-medium-line:  #ecdcac;
  --sev-low-fg:     #64694a; --sev-low-bg:     #eef0dd; --sev-low-line:     #dde0c2;
  --sev-info-fg:    #6f6557; --sev-info-bg:    #f1ece0; --sev-info-line:    #e2d9c6;
  --sev-ok-fg:      #3f6b52; --sev-ok-bg:      #e7f0e8; --sev-ok-line:      #ccdfd1;
  --sev-key-fg:     #3f5f7a; --sev-key-bg:     #e5eef4; --sev-key-line:     #c8dbe8;
  --r-card:14px; --r-chip:8px; --r-pill:5px;
  --shadow: 0 1px 2px rgba(69,63,54,.05), 0 8px 24px rgba(69,63,54,.06);
  --ui: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Noto Sans Mono CJK SC", monospace;
}

*,*::before,*::after{ box-sizing:border-box; }

/* Several components set display:flex/grid, which outranks the UA's [hidden] rule.
   Without this, a hidden banner or a hidden panel still occupies space. */
[hidden]{ display:none !important; }

html{ background:var(--bg); }
body{
  margin:0; padding:0 clamp(12px,3vw,32px) 64px;
  background:var(--bg); color:var(--ink);
  font:15px/1.7 var(--ui);
  -webkit-text-size-adjust:100%;
}

h1,h2,h3,h4{ font-weight:650; line-height:1.35; margin:0 0 .4em; color:var(--ink); }
h2{ font-size:1.15rem; } h3{ font-size:1rem; } h4{ font-size:.94rem; }
p{ margin:0 0 .6em; }
a{ color:var(--accent); text-underline-offset:2px; }
code,pre,.cx-mono{ font-family:var(--mono); }

/* ---------- header / modes ---------- */
.cx-header{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
  padding:18px 0 12px; border-bottom:1px solid var(--line-soft);
}
.cx-brand-name{ font:650 20px/1.2 var(--ui); color:var(--ink); text-decoration:none; letter-spacing:.01em; }
.cx-brand-tagline{ margin:.25em 0 0; color:var(--ink-2); font-size:.9rem; }
.cx-header-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.cx-badge{
  background:var(--sev-ok-bg); color:var(--sev-ok-fg); border:1px solid var(--sev-ok-line);
  border-radius:var(--r-chip); padding:4px 10px; font-size:.8rem;
}
.cx-modes{ display:inline-flex; gap:2px; margin:16px 0 12px; padding:3px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-chip); }
.cx-mode{
  appearance:none; border:0; background:transparent; color:var(--ink-2);
  font:inherit; padding:7px 16px; border-radius:6px; cursor:pointer;
}
.cx-mode.is-active{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow); }

/* ---------- buttons ---------- */
.cx-btn{
  appearance:none; font:inherit; cursor:pointer;
  background:var(--surface); color:var(--ink); border:1px solid var(--line);
  border-radius:var(--r-chip); padding:7px 13px; min-height:34px;
}
.cx-btn:hover{ border-color:var(--accent-line); }
.cx-btn:disabled{ opacity:.5; cursor:not-allowed; }
.cx-btn-primary{ background:var(--accent); border-color:var(--accent); color:#fffdf8; }
.cx-btn-quiet{ background:transparent; }
.cx-link{ appearance:none; border:0; background:none; color:var(--accent); font:inherit; padding:0; cursor:pointer; text-decoration:underline; }

/* ---------- verdict bar (§A) ---------- */
.cx-verdict{
  margin:8px 0 16px; padding:16px 18px; border-radius:var(--r-card);
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow);
}
.cx-verdict[data-code="CLEAN"]{ background:var(--sev-ok-bg); border-color:var(--sev-ok-line); }
.cx-verdict[data-code="MARKED_DECODED"]{ background:var(--sev-critical-bg); border-color:var(--sev-critical-line); }
.cx-verdict[data-code="MARKED_STRUCTURED"]{ background:var(--sev-high-bg); border-color:var(--sev-high-line); }
.cx-verdict[data-code="SUSPICIOUS"]{ background:var(--sev-medium-bg); border-color:var(--sev-medium-line); }
.cx-verdict[data-code="RESIDUE"],.cx-verdict[data-code="TRACE"]{ background:var(--sev-info-bg); border-color:var(--sev-info-line); }
.cx-verdict-title{ font-size:1.15rem; font-weight:650; margin:0 0 .3em; }
.cx-verdict-critical{
  margin:0 0 .5em; padding:8px 12px; border-radius:var(--r-chip);
  background:var(--sev-critical-bg); border:1px solid var(--sev-critical-line); color:var(--sev-critical-fg);
  font-weight:600;
}
.cx-verdict-meta{ display:flex; flex-wrap:wrap; gap:12px; color:var(--ink-2); font-size:.87rem; }
.cx-progress{ height:6px; background:var(--line-soft); border-radius:99px; overflow:hidden; margin-top:8px; }
.cx-progress i{ display:block; height:100%; background:var(--accent); }
.cx-expected{ background:var(--surface-2); border:1px dashed var(--line); border-radius:var(--r-chip); padding:3px 8px; font-size:.8rem; }

.cx-banner{
  margin:0 0 12px; padding:10px 14px; border-radius:var(--r-chip);
  background:var(--sev-medium-bg); border:1px solid var(--sev-medium-line); color:var(--sev-medium-fg);
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
}

/* ---------- workbench (§B) ---------- */
.cx-workbench{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:18px; align-items:start; }
.cx-left{ min-width:0; }
.cx-right{ display:grid; gap:12px; }
.cx-panel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:14px; box-shadow:var(--shadow);
}
.cx-textwrap{ position:relative; padding-right:26px; }
.cx-input{
  width:100%; min-height:280px; resize:vertical;
  background:transparent; color:var(--ink); border:0; outline:none;
  font:15px/1.9 var(--mono);
}
.cx-output{ min-height:160px; }
.cx-views{ display:flex; gap:6px; margin-bottom:8px; flex-wrap:wrap; }
.cx-view{ appearance:none; font:inherit; cursor:pointer; padding:5px 11px; border-radius:var(--r-chip);
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink-2); }
.cx-view[aria-selected="true"]{ background:var(--accent-bg); border-color:var(--accent-line); color:var(--ink); }
.cx-minimap{ position:absolute; top:14px; right:6px; width:14px; height:calc(100% - 28px); border-radius:3px; cursor:pointer; }
.cx-structure{ width:100%; height:24px; margin-top:8px; border-radius:4px; border:1px solid var(--line-soft); }
.cx-gaprow{ display:flex; gap:10px; align-items:center; margin-top:6px; color:var(--ink-2); font-size:.83rem; }
.cx-spark{ width:120px; height:24px; }
.cx-toolbar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:10px; }

/* ---------- annotated document (§8.4) ---------- */
.cx-doc{ max-height:60vh; overflow:auto; }
.cx-para{ font:15px/1.9 var(--mono); margin:0 0 .9em; white-space:pre-wrap; word-break:break-word; }
.cx-pill{ display:inline-block; min-width:.95em; height:1.2em; line-height:1.2em; padding:0 2px;
  margin:0 .5px; vertical-align:baseline; text-align:center;
  font:600 10px/1.2 var(--mono); border-radius:var(--r-pill);
  background:var(--sev-high-bg); color:var(--sev-high-fg); border:1px solid var(--sev-high-line);
  cursor:pointer; user-select:none; -webkit-user-select:none; }
.cx-pill::after{ content:attr(data-glyph); }          /* the glyph is generated content, not text */
.cx-pill:hover,.cx-pill:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.cx-pill.is-removed{ text-decoration:line-through; opacity:.75; }
.cx-pill.is-kept{ border-style:dashed; background:transparent; }
.cx-pill.sev-ok{ background:var(--sev-ok-bg); color:var(--sev-ok-fg);
                 border-color:var(--sev-ok-line); border-style:dotted; }
.cx-homo{ text-decoration: wavy underline var(--sev-high-fg); text-underline-offset:3px; }

.cx-pill.sev-critical{ background:var(--sev-critical-bg); color:var(--sev-critical-fg); border-color:var(--sev-critical-line); border-style:solid; }
.cx-pill.sev-medium{ background:var(--sev-medium-bg); color:var(--sev-medium-fg); border-color:var(--sev-medium-line); border-style:dashed; }
.cx-pill.sev-low{ background:var(--sev-low-bg); color:var(--sev-low-fg); border-color:var(--sev-low-line); border-style:dotted; }
.cx-pill.sev-info{ background:var(--sev-info-bg); color:var(--sev-info-fg); border-color:var(--sev-info-line); border-style:dotted; }
.cx-pill.sev-none{ background:var(--surface-2); color:var(--ink-3); border-color:var(--line); border-style:dotted; }
.cx-more{ font:inherit; font-size:.8rem; margin-left:6px; border:1px dashed var(--line); background:var(--surface-2);
  color:var(--ink-2); border-radius:var(--r-chip); padding:1px 8px; cursor:pointer; }

/* ---------- detail card (§8.6) ---------- */
.cx-card{
  position:absolute; z-index:20; max-width:min(420px,92vw);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  box-shadow:var(--shadow); padding:14px;
}
.cx-card-head{ display:flex; gap:8px; flex-wrap:wrap; align-items:baseline; margin-bottom:8px; }
.cx-card-name{ color:var(--ink-2); font-size:.86rem; }
.cx-card-name-zh{ color:var(--ink-3); font-size:.86rem; }
.cx-card-grid{ display:grid; grid-template-columns:auto 1fr; gap:2px 10px; margin:0 0 10px; font-size:.86rem; }
.cx-card-grid dt{ color:var(--ink-3); }
.cx-card-grid dd{ margin:0; }
.cx-card-foot{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.cx-card-why h4{ margin:0 0 .2em; color:var(--ink-3); font-size:.8rem; font-weight:600; }

/* ---------- tables ---------- */
.cx-scroll{ overflow-x:auto; }
.cx-table{ width:100%; border-collapse:collapse; font-size:.87rem; }
.cx-table caption{ text-align:left; color:var(--ink-3); font-size:.8rem; padding-bottom:6px; }
.cx-table th,.cx-table td{ text-align:left; padding:7px 9px; border-bottom:1px solid var(--line-soft); vertical-align:top; }
.cx-table thead th{ color:var(--ink-3); font-weight:600; cursor:pointer; white-space:nowrap; }
.cx-table tbody tr:hover{ background:var(--surface-2); }
.cx-num{ text-align:right; font-family:var(--mono); }
.cx-ctx{ font-family:var(--mono); color:var(--ink-2); max-width:22ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cx-cls{ display:block; color:var(--ink-3); font-size:.78rem; }
.cx-sev{ display:inline-block; padding:1px 8px; border-radius:var(--r-pill); font-size:.78rem;
  background:var(--sev-info-bg); color:var(--sev-info-fg); border:1px solid var(--sev-info-line); }
tr.sev-critical .cx-sev{ background:var(--sev-critical-bg); color:var(--sev-critical-fg); border-color:var(--sev-critical-line); }
tr.sev-high .cx-sev{ background:var(--sev-high-bg); color:var(--sev-high-fg); border-color:var(--sev-high-line); }
tr.sev-medium .cx-sev{ background:var(--sev-medium-bg); color:var(--sev-medium-fg); border-color:var(--sev-medium-line); }
tr.sev-low .cx-sev{ background:var(--sev-low-bg); color:var(--sev-low-fg); border-color:var(--sev-low-line); }
tr.sev-ok .cx-sev{ background:var(--sev-ok-bg); color:var(--sev-ok-fg); border-color:var(--sev-ok-line); }

/* ---------- findings / cleared ---------- */
.cx-findings,.cx-output,.cx-reference,.cx-embed{
  margin-top:20px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-card); padding:16px; box-shadow:var(--shadow);
}
.cx-cleared{ margin-top:14px; padding-top:12px; border-top:1px dashed var(--line); }
.cx-list{ margin:0; padding-left:1.1em; }
.cx-list li{ margin-bottom:.35em; }
.cx-keys li{ font-family:var(--mono); font-size:.85rem; }
.cx-filter,.cx-field{ font:inherit; padding:6px 9px; border:1px solid var(--line); border-radius:var(--r-chip);
  background:var(--surface); color:var(--ink); }
.cx-num-field{ width:8ch; }

/* ---------- counters / sidebar ---------- */
.cx-counters{ display:flex; flex-wrap:wrap; gap:6px; }
.cx-count{ display:inline-flex; gap:6px; align-items:baseline; padding:4px 9px; border-radius:var(--r-chip);
  background:var(--surface-2); border:1px solid var(--line-soft); font-size:.8rem; }
.cx-count-label{ color:var(--ink-3); }
.cx-count-n{ font-family:var(--mono); color:var(--ink); }
.cx-kv{ display:grid; grid-template-columns:auto 1fr; gap:2px 10px; margin:0 0 8px; font-size:.85rem; }
.cx-kv dt{ color:var(--ink-3); } .cx-kv dd{ margin:0; word-break:break-all; }
.cx-tabs{ display:flex; gap:4px; margin:6px 0; flex-wrap:wrap; }
.cx-tab{ font:inherit; font-size:.8rem; padding:3px 9px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink-2); cursor:pointer; }
.cx-tab[aria-pressed="true"]{ background:var(--accent-bg); border-color:var(--accent-line); color:var(--ink); }
.cx-payload-body{ margin:0; padding:8px 10px; background:var(--surface-2); border:1px solid var(--line-soft);
  border-radius:var(--r-chip); font-size:.82rem; white-space:pre-wrap; word-break:break-all; max-height:140px; overflow:auto; }
.cx-honesty{ background:var(--surface-2); }
.cx-presets{ display:grid; gap:6px; }
.cx-preset{ display:grid; grid-template-columns:auto 1fr; gap:2px 8px; align-items:start;
  padding:8px 10px; border:1px solid var(--line-soft); border-radius:var(--r-chip); cursor:pointer; }
.cx-preset[data-active="1"]{ background:var(--accent-bg); border-color:var(--accent-line); }
.cx-preset-name{ font-weight:600; }
.cx-preset-desc{ grid-column:2; color:var(--ink-2); font-size:.8rem; }
.cx-note{ color:var(--ink-2); font-size:.83rem; }
.cx-muted{ color:var(--ink-3); font-size:.85rem; }
.cx-strong{ font-weight:650; }
.cx-ok{ color:var(--sev-ok-fg); }
.cx-hint{ display:block; color:var(--ink-3); font-size:.8rem; }
.cx-error{ margin-top:10px; padding:10px 12px; border-radius:var(--r-chip);
  background:var(--sev-critical-bg); border:1px solid var(--sev-critical-line); color:var(--sev-critical-fg); }

/* ---------- diff (§8.8) ---------- */
.cx-diff{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cx-diff-pane{ max-height:60vh; overflow:auto; background:var(--surface-2);
  border:1px solid var(--line-soft); border-radius:var(--r-chip); padding:8px; }
.cx-diff-line{ display:flex; gap:8px; font:13px/1.9 var(--mono); white-space:pre-wrap; word-break:break-word; }
.cx-gutter{ flex:0 0 4.5ch; color:var(--ink-3); text-align:right; user-select:none; }
.cx-diff-text{ flex:1 1 auto; min-width:0; }
.cx-chip{ display:inline-flex; align-items:center; gap:1px; padding:0 3px; border-radius:var(--r-pill);
  font:600 10px/1.2 var(--mono); border:1px solid var(--sev-medium-line); background:var(--sev-medium-bg); color:var(--sev-medium-fg); }
.cx-chip-arrow{ opacity:.6; }

/* ---------- embed mode (§8.11) ---------- */
.cx-formrow{ display:grid; gap:4px; margin-bottom:12px; }
.cx-label{ font-size:.85rem; color:var(--ink-2); }
.cx-check{ display:flex; gap:8px; align-items:center; margin-bottom:8px; font-size:.9rem; }
.cx-capacity{ font-family:var(--mono); font-size:.83rem; color:var(--ink-2);
  background:var(--surface-2); border:1px solid var(--line-soft); border-radius:var(--r-chip); padding:8px 10px; }
.cx-chips{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:8px 0; }
.cx-chips-label{ color:var(--ink-3); font-size:.8rem; }
.cx-chip-preset{ display:inline-flex; gap:5px; align-items:center; padding:3px 9px; border-radius:var(--r-chip);
  border:1px solid var(--line); background:var(--surface-2); font-size:.8rem; }
.cx-chip-preset[data-state="intact"]{ background:var(--sev-ok-bg); border-color:var(--sev-ok-line); color:var(--sev-ok-fg); }
.cx-chip-preset[data-state="partial"]{ background:var(--sev-medium-bg); border-color:var(--sev-medium-line); color:var(--sev-medium-fg); }
.cx-chip-preset[data-state="destroyed"]{ background:var(--sev-critical-bg); border-color:var(--sev-critical-line); color:var(--sev-critical-fg); }
.cx-grid .cx-cell{ font-size:1rem; text-align:center; }
.cx-grid tr[data-state="intact"] .cx-cell{ color:var(--sev-ok-fg); }
.cx-grid tr[data-state="partial"] .cx-cell{ color:var(--sev-medium-fg); }
.cx-grid tr[data-state="destroyed"] .cx-cell{ color:var(--sev-critical-fg); }
.cx-row-muted{ color:var(--ink-3); }
.cx-legend{ font-size:.85rem; color:var(--ink-2); }
.cx-summary{ font-weight:600; }
.cx-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.cx-code{ overflow-x:auto; background:var(--surface-2); border:1px solid var(--line-soft);
  border-radius:var(--r-chip); padding:10px; font-size:.8rem; }

/* ---------- reference ---------- */
.cx-ref-block{ margin-bottom:22px; padding-bottom:16px; border-bottom:1px solid var(--line-soft); }
.cx-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px; }
.cx-scheme-card{ background:var(--surface-2); border:1px solid var(--line-soft);
  border-radius:var(--r-card); padding:12px; font-size:.85rem; }
.cx-pill-status{ display:inline-block; margin-bottom:6px; padding:2px 9px; border-radius:var(--r-pill);
  background:var(--sev-key-bg); border:1px solid var(--sev-key-line); color:var(--sev-key-fg); font-size:.78rem; }

/* ---------- empty state / samples ---------- */
.cx-empty{ margin-top:12px; }
.cx-empty-title{ font-weight:650; margin-bottom:.2em; }
.cx-empty-sub,.cx-empty-privacy{ color:var(--ink-2); font-size:.87rem; margin:0 0 .3em; }
.cx-samples-label{ color:var(--ink-3); font-size:.83rem; margin:10px 0 6px; }
.cx-samples{ display:flex; flex-wrap:wrap; gap:8px; }
.cx-sample{ text-align:left; max-width:260px; }
.cx-sample small{ display:block; color:var(--ink-3); font-size:.76rem; margin-top:2px; }

/* ---------- footer / toast / overlay ---------- */
.cx-footer{ margin-top:36px; padding-top:14px; border-top:1px solid var(--line-soft);
  color:var(--ink-3); font-size:.82rem; }
.cx-footer p{ margin:0 0 .2em; }
.cx-toast{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  background:var(--ink); color:var(--surface); padding:9px 16px; border-radius:99px;
  font-size:.86rem; box-shadow:var(--shadow); z-index:40; }
.cx-overlay{ position:fixed; inset:0; background:rgba(69,63,54,.28); z-index:30;
  display:flex; align-items:center; justify-content:center; padding:20px; }
.cx-sheet{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  box-shadow:var(--shadow); padding:18px; max-width:min(560px,94vw); max-height:80vh; overflow:auto; }

/* ---------- accessibility & preferences ---------- */
@media (prefers-contrast: more){
  :root{ --ink-3:#5d5346; }
  .cx-panel,.cx-btn,.cx-table th,.cx-table td{ border-width:2px; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .cx-pill:hover{ transform:none; }
}

/* ---------- mobile (≤768px) ---------- */
@media (max-width:768px){
  .cx-workbench{ grid-template-columns:1fr; }
  .cx-diff{ grid-template-columns:1fr; }
  .cx-verdict{ position:sticky; top:0; z-index:10; }
  .cx-minimap{ position:static; width:100%; height:14px; margin-bottom:8px; }
  .cx-textwrap{ padding-right:14px; }
  .cx-input{ min-height:40vh; }
  .cx-pill{ padding:0 5px; }              /* 44px touch target without changing the visual size */
  .cx-card{ position:fixed; left:0; right:0; bottom:0; max-width:none; max-height:52vh; overflow:auto;
    border-radius:var(--r-card) var(--r-card) 0 0; }
  .cx-actionbar{ position:fixed; left:0; right:0; bottom:0; display:flex; gap:8px; padding:10px 12px;
    background:var(--surface); border-top:1px solid var(--line); z-index:20; }
}

/* the mobile tab bar is hidden on desktop; app.js also keeps it hidden until a scan exists */
.cx-tabs-mobile{ display:none; }
@media (max-width:768px){ .cx-tabs-mobile:not([hidden]){ display:flex; } }