/* ══ 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 ──────────────────────
   THIS FILE DECIDES THE LIGHT THEME. It is loaded after base.html and
   every token below carries !important, so the two light blocks in
   base.html are only ever a fallback - edit one of those alone and the
   theme does not move. If you change a value here, change it there too.

   The values are the code workspace's light set: a warm neutral sheet with
   lines from the same family. This used to be a warm-white sheet under cool
   blue-grey borders and muted text, and two grey families in one view is
   what made the platform's light mode read as assembled next to that page.

   The brand yellow comes down to a gold that can be a fill and still sit
   beside copy. It still cannot carry text, so copy that must read as the
   brand uses --acc-text. Every ink below was measured against all four
   surfaces, not just white: the lowest is 4.6:1.                        */
:root[data-theme="light"]{
  --bg:#f7f7f5 !important;   --bg2:#ffffff !important;
  --bg3:#f2f2ee !important;  --bg4:#e9e9e4 !important;
  --card-grad:#ffffff !important;
  --border:#e3e3dd !important;
  --border2:#d3d3cb !important;
  --text:#18181b !important;        /* 17.7:1 on the card */
  --white:#18181b !important;
  --muted:#55555e !important;       /* 7.4:1 */
  --faint:#636369;                  /* metadata only */

  /* Two siblings, because one value cannot do both jobs:
       --acc-text  the brand as INK on a light surface (dark gold, 6.4:1).
       --on-acc    ink ON the gold fill (#141410, 7.7:1). */
  --acc:#c9a400 !important;  --acc2:#b89400 !important;
  --acc-text:#7a5a00 !important;    /* 6.4:1 on the card */
  --on-acc:#141410 !important;
  --acc-ink:#18160a !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:#fff6cc !important; --p200:#ffd400 !important;
  --p400:#c9a400 !important; --p500:#b89400 !important; --p600:#8a6d00 !important;

  /* The workspace carries these on tinted chips; here the same tokens are
     also plain text, so each is a step darker than its value there. Checked
     against --bg, --bg2, --bg3 and --bg4: lowest 4.6:1. */
  --sev-crit:#c42b2b;  --sev-hi:#a44f00;  --sev-med:#8c6000;
  --sev-lo:#1f5fbf;    --sev-info:#5b4b9e; --sev-ok:#147135;
  --red:#c42b2b !important;   --red2:#a32222 !important;   /* 5.6:1 */
  --orange:#a44f00 !important;                             /* 5.7:1 */
  --yellow:#8c6000 !important;                             /* 5.5:1 */
  --green:#147135 !important; --green2:#105c2b !important; /* 6.1:1 */
  --blue:#1f5fbf !important;                               /* 6.1:1 */
  --purple:#5b4b9e !important;                             /* 7.1:1 */

  --shadow-3d:0 1px 2px rgba(24,24,27,.10), 0 6px 20px -8px rgba(24,24,27,.22) !important;
  --glow-acc:0 0 0 3px rgba(201,164,0,.32) !important;
  --glow-red:0 0 0 3px rgba(196,43,43,.22) !important;
  --glow-green:0 0 0 3px rgba(20,113,53,.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:201,164,0;
  --sel:rgba(201,164,0,.32);
}
:root[data-theme="light"] html,
:root[data-theme="light"] body{background:#f7f7f5 !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,#ffffff 0%,#fcfcfa 55%,#f4f4f1 100%);
  border-right:1px solid #e3e3dd;
  box-shadow:1px 0 0 rgba(201,164,0,.32), 4px 0 20px -16px rgba(24,24,27,.18);
  /* The chrome carries its own ink rather than borrowing the body's - but
     from the same family. These were the old cool blue-greys, which left
     the sidebar on a different grey to everything beside it once the body
     moved to the warm neutral set. */
  --muted:#55555e;--border2:#d3d3cb;--border:#e3e3dd;
}
: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-item.on .sb-ic{color:#7a5a00}
: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{color:var(--nc,var(--muted))}
:root[data-theme="light"] .tb-bell-menu .tb-note-i.tb-note-sig{color:var(--nc,var(--text))}
/* The panel sizes itself in base.html - an alert list carrying a severity
   rail, a chip, a sentence and a figure needs a fixed, roomy column, not a
   minimum a long label can stretch. */