/* ══ YellowShielder surface system ══════════════════════════════════════
   Two composed themes, not one inverted.

   The scene decides the palette, and this product has two. An analyst lives
   in this page for hours, often at night, reading dense tables - that wants a
   dark room with real elevation. The same report gets opened by a client on a
   laptop in an office, next to a browser tab of something else - that wants
   the bright, high-contrast sheet they expect from a security portal. So both
   exist, both are designed, and neither is the other with the lightness
   flipped.

   Two fixes are structural, not cosmetic:

   1. Black is not a surface. On #000 a panel has no edge, so every border had
      to carry the separation alone and the page read flat and dim. Dark now
      runs a four-step neutral elevation ramp from #13161b, slightly cool so
      the brand yellow reads warm against it instead of muddy.

   2. Brand and severity were the same colour. Yellow meant "this is
      Yellowsys" and "this finding is MEDIUM" at the same time, so neither
      meant anything. Severity gets its own ramp; the brand keeps the yellow.
      ───────────────────────────────────────────────────────────────────── */
:root:not([data-theme="light"]){
  /* elevation: canvas → surface → raised → overlay */
  --bg:#13161b !important;   --bg2:#1a1e25 !important;
  --bg3:#22272f !important;  --bg4:#2b313a !important;
  --card-grad:#1a1e25 !important;
  --border:#39404b !important;      /* separators */
  --border2:#646e7f !important;     /* control outlines - 3.25:1 on surface */
  --text:#f3f5f8 !important;        /* 15.3:1 */
  --white:#ffffff !important;
  --muted:#a9b2c0 !important;       /* 7.8:1 */
  --faint:#7e8899;                  /* 4.7:1 - metadata only */

  --acc:#ffd400 !important;  --acc2:#e6bf00 !important;
  --acc-text:#ffd400 !important;    /* 12.7:1 on canvas */
  --on-acc:#14161a;                 /* ink for a yellow fill */
  --p100:#fff0a3 !important; --p200:#ffd400 !important;
  --p400:#e6bf00 !important; --p500:#c9a600 !important; --p600:#a68900 !important;

  /* Severity, on its own ramp so MEDIUM is never the brand. */
  --sev-crit:#ff5b6b;  --sev-hi:#ff8f3f;  --sev-med:#f5c451;
  --sev-lo:#5bb5f5;    --sev-info:#b8a8f0; --sev-ok:#5fd08a;
  --red:#ff5b6b !important;   --red2:#e0455a !important;
  --orange:#ff8f3f !important;
  --yellow:#f5c451 !important;
  --green:#5fd08a !important; --green2:#3fae6d !important;
  --blue:#5bb5f5 !important;  --purple:#b8a8f0 !important;

  --shadow-3d:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -10px rgba(0,0,0,.7) !important;
  --glow-acc:0 0 0 3px rgba(255,212,0,.30) !important;
  --glow-red:0 0 0 3px rgba(255,91,107,.28) !important;
  --glow-green:0 0 0 3px rgba(95,208,138,.28) !important;
  --scanline:transparent !important;
  --sel:rgba(255,212,0,.24);
}
:root:not([data-theme="light"]) html,
:root:not([data-theme="light"]) body{background:#13161b !important}

/* ── light: the report as a client opens it ─────────────────────────────
   Grey canvas, white cards, one ink. Yellow cannot carry text here (2.1:1 on
   white), so on light the brand keeps the sidebar and the marks, and the
   interactive accent becomes ink - which is also what makes the accent
   readable as *action* instead of decoration.                            */
:root[data-theme="light"]{
  --bg:#f5f7fa !important;   --bg2:#ffffff !important;
  --bg3:#ffffff !important;  --bg4:#eef1f5 !important;
  --card-grad:#ffffff !important;
  --border:#dde2e9 !important;
  --border2:#848e9c !important;     /* 3.32:1 on white */
  --text:#0f1620 !important;        /* 18.2:1 */
  --white:#0f1620 !important;
  --muted:#55606f !important;       /* 6.4:1 */
  --faint:#6b7482;                  /* 4.4:1 */

  --acc:#ffd400 !important;  --acc2:#e6bf00 !important;
  --acc-text:#6b5500 !important;    /* 7.2:1 - yellow's ink form */
  --on-acc:#14161a;
  --p100:#fff0a3 !important; --p200:#ffd400 !important;
  --p400:#c9a600 !important; --p500:#a68900 !important; --p600:#6b5500 !important;

  --sev-crit:#c1121f;  --sev-hi:#b34700;  --sev-med:#8a6100;
  --sev-lo:#1462a8;    --sev-info:#5b3fb5; --sev-ok:#0f7a3d;
  --red:#c1121f !important;   --red2:#9a0e19 !important;
  --orange:#b34700 !important;
  --yellow:#8a6100 !important;
  --green:#0f7a3d !important; --green2:#0b5d2e !important;
  --blue:#1462a8 !important;  --purple:#5b3fb5 !important;

  --shadow-3d:0 1px 2px rgba(15,22,32,.06), 0 6px 20px -8px rgba(15,22,32,.14) !important;
  --glow-acc:0 0 0 3px rgba(107,85,0,.22) !important;
  --glow-red:0 0 0 3px rgba(193,18,31,.20) !important;
  --glow-green:0 0 0 3px rgba(15,122,61,.20) !important;
  --scanline:transparent !important;
  --sel:rgba(255,212,0,.40);
}
:root[data-theme="light"] html,
:root[data-theme="light"] body{background:#f5f7fa !important}

/* ── the surfaces the browser draws ────────────────────────────────────
   Selection, caret, scrollbar and focus ring ship with defaults that belong
   to no design system. They are the cheapest tell that a page was assembled
   rather than built.                                                      */
::selection{background:var(--sel);color:var(--text)}
html{caret-color:var(--acc2)}
*{scrollbar-width:thin;scrollbar-color:var(--border2) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:99px;
  border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--muted);background-clip:content-box}
:where(a,button,[tabindex],input,select,textarea,summary):focus-visible{
  outline:2px solid var(--acc2);outline-offset:2px;border-radius:4px}
/* Figures in a table are compared down the column, not read as words. */
.ftable td,.cr-tbl td,.vi-table td,.pm-drv,.ag-ms,.tm-note,
[class*="-num"],[class*="-val"]{font-variant-numeric:tabular-nums}

/* ── the sidebar keeps the brand ───────────────────────────────────────
   One block of tokens and every rule already reading var(--acc) inside the
   sidebar turns yellow again, without rewriting one of them.              */
:root:not([data-theme="light"]) .sb{
  --bg2:#16191f; --bg3:#1e222a; --bg4:#262c35;
  --border:#333a45; --border2:#5d6775;
  background:linear-gradient(180deg,#1b1d16 0%,#16181d 46%,#111318 100%);
  border-right:1px solid #333a45;
  box-shadow:1px 0 0 rgba(255,212,0,.10), 6px 0 28px -18px rgba(0,0,0,.9);
}
:root[data-theme="light"] .sb{
  background:linear-gradient(180deg,#fffdf0 0%,#ffffff 40%,#f7f9fb 100%);
  border-right:1px solid #e2e6ec;
  box-shadow:1px 0 0 rgba(255,212,0,.35), 4px 0 20px -16px rgba(15,22,32,.35);
}
.sb-mark{box-shadow:0 0 14px rgba(255,212,0,.6)}
.sb-item.on{background:color-mix(in srgb,var(--acc) 15%,transparent);
  color:var(--acc-text);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 34%,transparent)}
.sb-item.on::before{background:var(--acc)}
:root[data-theme="light"] .sb-item.on{
  background:color-mix(in srgb,var(--acc) 26%,transparent);color:#3d3100}
:root[data-theme="light"] .sb-logo{color:#0f1620}

/* ── severity reads as severity ────────────────────────────────────────
   These carried var(--acc) because yellow used to be the house colour. Here
   the colour is a fact about a finding, so it is pinned to the severity ramp
   and can no longer drift with the brand.                                 */
.sev-CRITICAL,.cr-score.sev-CRITICAL,.sa-risk.CRITICAL{color:var(--sev-crit)}
.sev-HIGH,.cr-score.sev-HIGH,.sa-risk.HIGH{color:var(--sev-hi)}
.sev-MEDIUM,.cr-score.sev-MEDIUM,.sa-risk.MEDIUM{
  color:var(--sev-med) !important;border-color:var(--sev-med) !important;
  background:color-mix(in srgb,var(--sev-med) 14%,transparent) !important}
.sev-LOW,.cr-score.sev-LOW,.sa-risk.LOW{
  color:var(--sev-lo) !important;border-color:var(--sev-lo) !important}
.cr-group.sev-LOW{border-left-color:var(--sev-lo)}
.sa-risk.NONE{color:var(--sev-ok)}

/* ── one primary action, and it is findable ────────────────────────────
   A page of grey with no filled control reads as disabled.                */
.cr-btn.pri,.vi-tab.on{background:var(--acc);color:var(--on-acc);
  border-color:var(--acc);font-weight:700}
.cr-btn.pri:hover,.vi-tab.on:hover{background:var(--acc2);border-color:var(--acc2)}
.sa-file-acts .sa-act.on{background:var(--acc);color:var(--on-acc);
  border-color:var(--acc);font-weight:700}
.sa-file-acts .sa-act.on:hover{background:var(--acc2);border-color:var(--acc2)}
.sa-file-acts .cr-mini,.sa-f-acts .cr-mini{
  height:30px;padding:0 13px;font-size:11.5px;line-height:1;
  letter-spacing:.04em;font-weight:600;border-radius:7px;
  border:1px solid var(--border2);color:var(--text);
  display:inline-flex;align-items:center;background:transparent;
  transition:background .14s,border-color .14s,color .14s}
.sa-file-acts .cr-mini:hover,.sa-f-acts .cr-mini:hover{
  border-color:var(--acc);color:var(--acc-text);
  background:color-mix(in srgb,var(--acc) 12%,transparent)}
.sa-file-acts .sa-act[data-act="review"],
.sa-file-acts .sa-act[data-act="deep"]{border-color:var(--acc2)}
.sa-file-acts .cr-mini.owned{border-color:var(--acc);color:var(--acc-text)}
.sa-f-acts .cr-mini.pri{border-color:var(--acc);color:var(--acc-text)}
.sa-f-acts .cr-mini.on{border-color:var(--sev-ok);color:var(--sev-ok)}

/* ── the terminal and run log inherit the ramp ─────────────────────────
   They were painted against the old green-black canvas with fixed hexes and
   floated on every other surface.                                          */
.tm{background:var(--bg2);border-color:var(--border)}
.tm-bar{background:var(--bg3);border-color:var(--border)}
.tm-title{color:var(--muted)}
.tm-body{background:transparent;color:var(--text);font-size:13.5px}
.tm-body::-webkit-scrollbar-track{background:transparent}
.tm-body::-webkit-scrollbar-thumb{background:var(--border2)}
.tm-chat{background:var(--bg);border-color:var(--border)}
.tm-chat-h{background:var(--bg3);border-color:var(--border)}
.tm-chat-t{color:var(--sev-ok)}
.tm-chat-a{color:var(--text)}
.tm-chat-who,.tm-chat-m,.tm-chat-f,.tm-note,.tm-lab{color:var(--muted)}
.tm-chat-foot{color:var(--faint)}
.tm-prompt{color:var(--muted)}
.tm-chat-q,.tm-chat-code,.tm-chat-ic{background:var(--bg);color:var(--text);
  border-color:var(--border)}
.tm-chat-q::placeholder{color:var(--faint);opacity:1}
.tm-chat-block,.tm-chat-blockh{background:var(--bg3);border-color:var(--border)}
.tm-copy,.tm-cmd{color:var(--muted);border-color:var(--border2);font-size:11px}
.tm-copy:hover,.tm-cmd:hover{color:var(--acc-text);border-color:var(--acc)}
.tm-cur{background:var(--acc2)}
.tm-scan{background:var(--bg3)}
.ag{--ag-bg:var(--bg);--ag-b:var(--border)}
.ag[open]{box-shadow:inset 2px 0 0 var(--acc)}
.ag-sum{color:var(--muted);font-size:11.5px}
.ag-sum-t{color:var(--text);letter-spacing:.1em}
.ag-sum-n,.ag-sum-ms,.ag-res,.ag-arg{color:var(--muted)}
.ag-body::before,.ag.live::before{background:var(--border)}
.ag-ic{background:var(--bg3);border-color:var(--border2);color:var(--muted)}
.ag-step.k-run .ag-ic,.ag-step.k-scan .ag-ic{color:var(--acc);
  border-color:color-mix(in srgb,var(--acc) 45%,var(--border2))}
.ag-step.k-done .ag-ic{color:var(--sev-ok);
  border-color:color-mix(in srgb,var(--sev-ok) 45%,var(--border2))}
.ag-step.note .ag-ic{color:var(--sev-medium,#c98a00)}
html[data-theme=light] .ag-res.note,.ag-res.note{color:var(--sev-medium,#c98a00)}
.ag-step.bad .ag-ic{color:var(--sev-crit);
  border-color:color-mix(in srgb,var(--sev-crit) 45%,var(--border2))}
.ag-verb{color:var(--text)}
.ag-target{color:var(--acc-text);border-color:var(--border);
  background:color-mix(in srgb,var(--acc) 10%,transparent);font-size:12px}
.ag-kind{color:var(--faint);border-color:var(--border)}
.ag-say{color:var(--text);font-size:12.5px}
.ag-say::before{background:var(--border2)}
.ag-chip{color:var(--muted);border-color:var(--border2)}
.ag-chip i{color:var(--acc)}
.ag-chip.bad{color:var(--sev-crit);border-color:var(--sev-crit)}
.ag-status,.ag-out{background:var(--bg);border-color:var(--border)}
.ag-out-h{background:var(--bg3);border-color:var(--border);color:var(--muted)}
.ag-out-b{color:var(--muted);font-size:12px}
.ag-out-b::after{background:var(--acc2)}
.ag-spin{border-color:var(--border2);border-top-color:var(--acc)}
.tm-live,.tm-live i{color:var(--sev-ok)}
.tm-live i{background:var(--sev-ok)}
.sa-out-h{color:var(--text)}
.sa-out-p{color:var(--muted)}
.cr-mini{font-size:11px;padding:4px 10px}
.cr-hint,.cr-sub{font-size:12.5px;color:var(--muted)}