/* ══ 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;
  /* Tint behind a pressed, selected or hovered thing. Yellow here, so
     dark mode renders exactly as before; light swaps the hue instead of
     the opacity, which keeps every state's weight identical. */
  --wash-rgb:255,212,0;
  --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 ──────────────────────
   Built on #DBDBDB, and there is no white anywhere in it: the canvas sits one
   step behind the cards rather than the cards sitting on white, so the
   lightest surface on screen is #E4E4E4 (inputs) and nothing reaches paper.

   A darker surface costs contrast, so every ink was re-derived against
   #DBDBDB rather than carried over: the old --border2, --red, --orange,
   --yellow and --green all measured below their thresholds here (2.4:1,
   4.50:1, 3.97:1, 4.00:1 and 3.92:1) and are darkened until they clear.
   Ratios in the comments are measured against --bg2.

   The ramp is a true neutral, like #DBDBDB itself, so nothing reads
   faintly blue against it the way the old #f5f7fa canvas did. Yellow
   still cannot carry text at this lightness, so the brand keeps the
   sidebar and the marks and the interactive accent becomes ink.        */
:root[data-theme="light"]{
  --bg:#cfcfcf !important;   --bg2:#dbdbdb !important;
  --bg3:#e4e4e4 !important;  --bg4:#c6c6c6 !important;
  --card-grad:#dbdbdb !important;
  --border:#bfbfbf !important;
  --border2:#727272 !important;     /* 3.09:1 on the canvas */
  --text:#14171a !important;        /* 13.0:1 */
  --white:#14171a !important;
  --muted:#565656 !important;       /* 5.30:1 */
  --faint:#595959;                  /* 4.50:1 on the canvas */

  /* Light mode's accent is moss, not the brand yellow. Yellow at this
     lightness can only be a fill, never ink, and it read as a highlighter
     pen over a grey page. #636B2F is dark enough to carry pale ink at
     5.12:1, so the same token works as a button fill, a bar and a badge.
     Two siblings, because one value cannot do both jobs:
       --acc-text  the accent as INK on a light surface. #636B2F itself is
                   4.13:1 there, fine for a heading and short of AA for a
                   link, so small text gets the darker step (5.64:1).
       --on-acc    ink ON the accent fill. #141410 lands at 3.23:1 on moss
                   and had to go, which is what the 73 tokenised inks were. */
  --acc:#636b2f !important;  --acc2:#515829 !important;
  --acc-text:#4f5626 !important;    /* 5.64:1 on the card */
  --on-acc:#f2f3ee;                 /* 5.12:1 on the accent */
  --acc-ink:#f2f3ee !important;     /* same job, older token name */
}
/* A label inside an accent button is usually its own <span>, and light
   mode's blanket span rule colours spans DIRECTLY - which beats the ink
   inherited from the button. The button was right and its label was dark
   on moss at 3.15:1. The children take the parent's ink back. */
:root[data-theme="light"] .corner-help-btn.is-accent *,
:root[data-theme="light"] .tb-btn.is-accent *,
:root[data-theme="light"] .rs-cta *,
:root[data-theme="light"] .vi-btn.pri *,
:root[data-theme="light"] .iv-btn.pri *,
:root[data-theme="light"] .fbtn.pri *,
:root[data-theme="light"] .cr-btn.pri *{color:inherit !important}
:root[data-theme="light"]{
  --p100:#dfe2d2 !important; --p200:#636b2f !important;
  --p400:#58602a !important; --p500:#4f5626 !important; --p600:#3e441e !important;

  --sev-crit:#a80f1a;  --sev-hi:#8f3800;  --sev-med:#735100;
  --sev-lo:#0f558f;    --sev-info:#4e35a0; --sev-ok:#0a5c2d;
  --red:#a80f1a !important;   --red2:#8a0c15 !important;   /* 5.52:1 */
  --orange:#8f3800 !important;                             /* 4.93:1 on the canvas */
  --yellow:#735100 !important;                             /* 5.22:1 */
  --green:#0a5c2d !important; --green2:#084a24 !important; /* 5.88:1 */
  --blue:#0f558f !important;                               /* 5.58:1 */
  --purple:#4e35a0 !important;                             /* 6.48:1 */

  --shadow-3d:0 1px 2px rgba(20,23,26,.10), 0 6px 20px -8px rgba(20,23,26,.22) !important;
  --glow-acc:0 0 0 3px rgba(131,143,155,.45) !important;
  --glow-red:0 0 0 3px rgba(168,15,26,.22) !important;
  --glow-green:0 0 0 3px rgba(10,92,45,.22) !important;
  --scanline:transparent !important;
  /* Blue-gray #838f9b, sampled from the supplied palette, replaces the
     soft-yellow tint on every pressed/selected/hover surface in light
     mode. Only the hue changes: each state keeps the alpha it already
     had, so nothing gets louder or quieter than it was. */
  --wash-rgb:131,143,155;
  --sel:rgba(131,143,155,.40);
}
:root[data-theme="light"] html,
:root[data-theme="light"] body{background:#cfcfcf !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,#c8c8c8 0%,#c4c4c4 42%,#bdbdbd 100%);
  border-right:1px solid #8e8e8e;
  box-shadow:1px 0 0 rgba(255,212,0,.45), 4px 0 20px -16px rgba(20,23,26,.40);
  /* #c4c4c4 is dark enough that the page-level --muted lands at 4.12:1, so
     the chrome carries its own ink rather than borrowing the body's. */
  --muted:#4e4e4e;--border2:#666666;--border:#a8a8a8;
}
:root[data-theme="light"] .sb-top{
  background:linear-gradient(180deg,rgba(var(--wash-rgb, 255,212,0), .16),transparent)}
:root[data-theme="light"] .sb-foot{
  background:linear-gradient(0deg,rgba(var(--wash-rgb, 255,212,0), .12),transparent)}
.sb-mark{box-shadow:0 0 14px rgba(255,212,0,.6)}
.sb-item.on{background:rgba(var(--wash-rgb, 255,212,0), 0.15);
  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:rgba(var(--wash-rgb, 255,212,0), 0.26);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:rgba(var(--wash-rgb, 255,212,0), 0.12)}
.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:rgba(var(--wash-rgb, 255,212,0), 0.1);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)}
/* every control in the bar at one radius, one height */
:root[data-theme="light"] .topbar .tb-btn,
:root[data-theme="light"] .topbar .sb-status-btn{border-radius:8px}

/* ── the signals in the bell ────────────────────────────────────────────
   The signal rows carry an icon beside the figure, and the figure keeps
   the severity colour. The house yellow is not used here: it says nothing
   about urgency, and as ink on the light surface it is close to
   unreadable. The light-mode rule repeats the icon colour with the same
   weight the rest of the popup uses, because light mode inks every body
   descendant with var(--text) and would otherwise flatten it.            */
.tb-note-i.tb-note-sig{min-width:18px}
.tb-note-i.tb-note-sig svg{width:15px;height:15px}
.tb-note-i.tb-note-sig{color:var(--nc,var(--muted))}
:root[data-theme="light"] .tb-bell-menu .tb-note-i.tb-note-sig{color:var(--nc,var(--text))}
/* An icon, a figure and a sentence need more room than the three rows the
   popup used to carry. */
.tb-bell-menu{min-width:320px}