/* Vuli web UI - stylesheet (generic plan stage 7, DECISIONS #142 PROVISIONAL).
   What: the look of the owner-approved central mockup (docs/mockups/ui-mockup-central-real-data.html,
   revision 6: white page, light theme only, blue accent, red-yellow-green hexagon badges),
   re-written as one plain stylesheet for the real UI. The token block below is the mockup's,
   value for value; components keep the mockup's class names where they exist there.
   Rules: system fonts only (nothing is downloaded), no inline styles anywhere (the page's
   Content-Security-Policy forbids them, so every visual state is a class here), verdicts are
   always icon + word (colour only repeats them), and the layout works at 375, 1024 and 1280 px
   without a horizontal page scroll (wide tables become labelled cards on a phone). */

:root{
  --bg:#ffffff; --bg-2:#f5f8fe; --surface:#ffffff; --surface-2:#f3f6fd; --border:#d9e2f2; --border-hi:#b7c8e8;
  --text:#0f1b3d; --muted:#46557a; --faint:#56658a; --heading:#071233;
  --accent:#1d5fe0; --accent-2:#0b77c2; --accent-ink:#ffffff; --accent-soft:#e8f0ff;
  --grad:linear-gradient(135deg,#1d4ed8 0%,#0a6bbd 100%);
  --safe:#0b7a43; --safe-bg:#e8f7ef;
  --risky:#c21d38; --risky-bg:#fdecef;
  /* Needs a human = clear yellow (owner, 2026-10-25); yellow is never text on white. */
  --human:#4a3b00; --human-bg:#fff8c8; --human-fill:#ffe135; --human-bd:#e0b800;
  --gap:#6440cf; --gap-bg:#f2eeff; --gaps-bg:#f6f2ff;
  --run:#1d5fe0; --pending:#7b88a8;
  --crit-bg:#c21d38; --crit-fg:#ffffff; --crit-bd:#a0142c;
  --high-bg:#fff0e4; --high-fg:#943a00; --high-bd:#f08a3d;
  --med-bg:#fff8d8; --med-fg:#6f5200; --med-bd:#d9ad00;
  --low-bg:#eef2f8; --low-fg:#3a4860; --low-bd:#97a7bd;
  --focus:#1d5fe0; --hi:37,99,235; --hi2:37,99,235; --hi3:11,140,210;
  --shell-bg:#ffffff; --card-bg:#ffffff; --ctl-bg:#ffffff; --input-bg:#ffffff; --option-bg:#ffffff;
  --menu-bg:#ffffff; --drawer-bg:#ffffff; --modal-bg:#ffffff; --log-bg:#0b111a; --grid-line:#e2e8f4; --halo:#ffffff;
  --side-bg:#f6f8fe; --topbar-bg:rgba(255,255,255,.92); --tile-bg:#f7f9fe;
  --ctl-hover:#eef3fe; --placeholder:#66739a; --th-bg:#f3f6fc; --row-line:#e4eaf5;
  --inset-bg:#f4f7fd; --strip-bg:#fafcff; --bar-bg:#e5ebf6; --tick-empty:#d6dfee;
  --scrim:rgba(12,22,48,.42); --toast-bg:#0f1b3d; --toast-fg:#ffffff;
  --hex-fill:#ffffff; --hex-text:#0f1b3d; --hex-a:var(--risky); --hex-m:var(--human-fill); --hex-b:var(--safe); --hex-glow:rgba(16,32,72,.12);
  --app-node:#2563eb; --cve-node:#3d8fd6; --slice-node:#7c5ce0;
  --logo-disc:#ffe3dc; --logo-1:#e2563f; --logo-2:#b8173a; --logo-3:#c72a3f; --wordmark:#c0392b;
  --shadow:0 1px 2px rgba(16,32,72,.06),0 4px 14px rgba(16,32,72,.06);
  --glow:0 0 0 1px rgba(var(--hi),.06);
  --radius:14px;
  --mono:"Cascadia Mono","JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
  --sans:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg)}
body{color:var(--text);font:14.5px/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;box-shadow:0 0 0 5px rgba(var(--hi),.25)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--mono);font-size:.9em}
.muted{color:var(--muted)}
.small{font-size:13px}
.nowrap{white-space:nowrap}
.boot{padding:40px;color:var(--muted)}
svg.i{width:16px;height:16px;flex:none}
h1{font-size:26px;line-height:1.2;margin:6px 0;letter-spacing:-.01em;font-weight:750;color:var(--heading)}
h1:focus,h2:focus{outline:none;box-shadow:none}
h2{font-size:15.5px;margin:0 0 12px;font-weight:700;color:var(--heading)}
h3,th,.lbl-caps,.kv-caps dt{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--faint)}
h3{margin:0 0 8px}
.linkbtn{all:unset;cursor:pointer;color:var(--accent);font-weight:650;text-decoration:underline;text-underline-offset:2px}
.linkbtn:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.linkbtn.mono{font-family:var(--mono);font-size:12.5px}
.nm{color:var(--muted);font-style:italic;font-weight:500}

/* ===== Shell: left navigation + main column ===== */
.shell{display:grid;grid-template-columns:224px minmax(0,1fr);margin:14px;min-height:calc(100vh - 28px);border:1px solid var(--border);border-radius:22px;background:var(--bg);box-shadow:0 1px 3px rgba(16,32,72,.06)}
.side{position:sticky;top:14px;height:calc(100vh - 28px);display:flex;flex-direction:column;gap:14px;padding:22px 12px;background:var(--side-bg);border-right:1px solid var(--border);border-radius:22px 0 0 22px}
.brand{display:flex;align-items:center;gap:10px;padding:0 8px;text-decoration:none}
.brand-mark{width:34px;height:34px;display:block}
.brand-mark .lg-disc{fill:var(--logo-disc)} .brand-mark .lg-1{fill:var(--logo-1)} .brand-mark .lg-2{fill:var(--logo-2)} .brand-mark .lg-3{fill:var(--logo-3)}
.brand-mark .lg-ln{fill:none;stroke:var(--logo-2);stroke-width:2}
.brand b{font-size:21px;font-weight:800;color:var(--wordmark)}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{position:relative;display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;color:var(--muted);font-weight:560;text-decoration:none}
.nav a svg{color:var(--faint)}
.nav a:hover{background:rgba(var(--hi),.08);color:var(--text)}
.nav a[aria-current="page"]{background:linear-gradient(90deg,rgba(var(--hi),.2),rgba(var(--hi),.03));color:var(--heading);font-weight:700;box-shadow:inset 0 0 0 1px rgba(var(--hi),.28)}
.nav a[aria-current="page"] svg{color:var(--accent)}
.nav a[aria-current="page"]::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:rgb(11,140,210)}
.nav .sep{height:1px;background:linear-gradient(90deg,transparent,var(--border-hi),transparent);margin:6px 4px}
main{padding:0 30px 60px;max-width:1240px;width:100%;min-width:0}
.topbar{position:sticky;top:0;z-index:25;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 -30px 16px;padding:12px 30px;background:var(--topbar-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);border-radius:0 22px 0 0}
.tb-left{display:flex;align-items:center;gap:12px;min-width:0}
.crumbs{min-width:0}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;align-items:center;flex-wrap:wrap;gap:2px;font-size:13.5px}
.crumbs li{display:flex;align-items:center;min-width:0;overflow-wrap:anywhere}
.crumbs li+li::before{content:"›";color:var(--faint);font-size:17px;margin:0 6px}
.crumbs [aria-current="page"]{font-weight:700;color:var(--heading)}
.who{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:10px;border:1px solid var(--border-hi);background:var(--bg);font-weight:700;max-width:260px;min-width:0}
.who .pl{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.who .pn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-size:13px}
.skip{position:absolute;left:-9999px;top:8px;z-index:90}
.skip:focus{left:12px}

/* ===== Buttons and forms ===== */
.btn{font:inherit;font-weight:620;cursor:pointer;border-radius:10px;padding:9px 16px;border:1px solid var(--border-hi);background:var(--bg);color:var(--text);display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.btn:hover{background:var(--ctl-hover);border-color:var(--accent)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-primary{background:var(--grad);border-color:transparent;color:var(--accent-ink);font-weight:750;box-shadow:0 2px 8px rgba(var(--hi),.25)}
.btn-primary:hover,.btn-primary:focus-visible{background:var(--grad);color:var(--accent-ink);border-color:transparent;box-shadow:0 0 0 2px rgba(var(--hi),.25),0 3px 10px rgba(var(--hi),.3)}
.btn-new{border-style:dashed}
.btn-sm{padding:5px 10px;font-size:13px;border-radius:8px}
.danger-btn{color:var(--risky);border-color:var(--risky);background:transparent}
.danger-btn:hover{background:var(--risky-bg);color:var(--risky);border-color:var(--risky)}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.field label,.legend{font-weight:650;font-size:14px}
.hint{font-size:13px;color:var(--muted);margin:0}
.req{color:var(--muted);font-weight:500}
input[type=text],input[type=password],input[type=search],select,textarea{font:inherit;padding:9px 12px;border-radius:9px;border:1px solid var(--border-hi);background:var(--bg);color:var(--text);max-width:100%;width:100%}
input::placeholder{color:var(--placeholder)}
input:focus-visible,select:focus-visible{outline:3px solid var(--focus);outline-offset:0}
input[aria-invalid="true"]{border-color:var(--risky)}
.row-2{display:grid;grid-template-columns:2fr 1fr;gap:14px}
.row-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
fieldset{border:0;padding:0;margin:0 0 18px;min-width:0}
.seg{display:flex;gap:10px;flex-wrap:wrap}
.seg label{display:flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--border-hi);border-radius:9px;cursor:pointer;font-weight:500;background:var(--tile-bg)}
.seg input{accent-color:var(--accent);width:16px;height:16px;margin:0}
.seg label:has(input:checked){border-color:var(--accent);background:var(--accent-soft);font-weight:650}
.section-title{display:flex;align-items:center;flex-wrap:wrap;font-weight:750;margin:4px 0 14px;font-size:16px}
.step-num{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--grad);color:var(--accent-ink);font-size:13px;font-weight:800;margin-right:10px;flex:none}
.opt{margin-left:10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border:1px solid var(--border);border-radius:99px;padding:1px 8px}
.divider{height:1px;background:var(--border);margin:22px 0}
.err-msg{color:var(--risky);font-size:13.5px;font-weight:650;margin:8px 0 0}
.err-msg:empty{display:none}

/* ===== Page parts ===== */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:10px 0 16px}
.page-head p{margin:0;max-width:70ch}
.card{position:relative;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;min-width:0}
.card::before{content:"";position:absolute;left:18px;right:18px;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--hi),.35),transparent);pointer-events:none}
.card.flush{padding:8px}
.card.flush > h2,.card.flush > .card-head{padding:10px 12px 0}
.card-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.card-head h2{margin:0}
.card-head p{margin:0;font-size:12.5px;color:var(--muted)}
.mb{margin-bottom:18px}
.grid-2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 18px;margin:0;font-size:14px}
.kv dt{color:var(--muted);font-weight:600}
.kv dd{margin:0;overflow-wrap:anywhere}
.empty-state{text-align:center;padding:40px 20px}
.empty-state h2{margin-bottom:6px}
.na{border:1px dashed var(--gap);background:var(--gaps-bg);border-radius:var(--radius);padding:16px 18px}
.na h2{color:var(--gap);display:flex;gap:8px;align-items:center}
.na p{margin:0}
.note{border-left:4px solid var(--accent);background:var(--inset-bg);border-radius:0 8px 8px 0;padding:10px 14px;font-size:14px;margin:0 0 14px}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 12px}

/* ===== Chips: verdict, state, severity, gaps ===== */
.verdict,.state-chip{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13px;padding:3px 10px 3px 7px;border-radius:99px;border:1px solid currentColor;white-space:nowrap;vertical-align:middle}
.verdict svg,.state-chip svg{width:15px;height:15px;flex:none}
.v-safe{color:var(--safe);background:var(--safe-bg);box-shadow:0 0 12px -4px var(--safe)}
.v-risky{color:var(--risky);background:var(--risky-bg);box-shadow:0 0 12px -4px var(--risky)}
.v-human{color:var(--human);background:var(--human-bg);border-color:var(--human-bd);box-shadow:0 0 12px -4px var(--human-fill)}
/* "Not judged": the engine computed no verdict (DECISIONS #137). Neutral, dashed, with a dash
   icon and the word - it is never drawn like a judged verdict. */
.v-nj{color:var(--muted);background:var(--surface-2);border-style:dashed}
/* "Not shipped" (VUL-108, DECISIONS #192): the library is not in the built application. Not a
   verdict about a fix: neutral and SOLID (the dashed look belongs to Not judged), never green,
   with an open-box icon and the word. */
.v-ns{color:var(--text);background:var(--bg-2);border-color:var(--border-hi)}
.ns-box{border:1px solid var(--border-hi);background:var(--bg-2);border-radius:10px;padding:10px 14px;margin:12px 0}
.ns-box h3{display:flex;align-items:center;gap:6px;margin-top:0} .ns-box h3 svg{width:18px;height:18px}
.v-other{color:var(--text);background:var(--surface-2)}
.st-done{color:var(--safe);background:var(--safe-bg)}
.st-run{color:var(--run);background:var(--accent-soft)}
.st-pending,.st-skip{color:var(--muted);background:var(--surface-2);border-style:dashed}
.st-warn{color:var(--gap);background:var(--gap-bg);border-style:dashed}
.st-fail{color:var(--risky);background:var(--risky-bg)}
.vsum{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
.vchip{display:inline-flex;align-items:center;gap:3px;font-weight:800;font-size:12.5px;padding:1px 8px;border-radius:6px;border:1px solid currentColor;white-space:nowrap}
.vchip svg{width:1.05em;height:1.05em;flex:none}
.vchip.s{color:var(--safe);background:var(--safe-bg)} .vchip.r{color:var(--risky);background:var(--risky-bg)}
.vchip.nh{color:var(--human);background:var(--human-bg);border-color:var(--human-bd)} .vchip.nj{color:var(--muted);background:var(--surface-2);border-style:dashed}
.vchip.ns{color:var(--text);background:var(--bg-2);border-color:var(--border-hi)} .vchip-nm .nm{font-weight:600;font-size:11px}
table .vsum{flex-wrap:nowrap}
.vlegend{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:-6px 0 14px;font-size:13px}
.sev{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;padding:2px 9px 2px 6px;border-radius:6px;border:1px solid;white-space:nowrap}
.sev svg{width:14px;height:14px}
.sev-critical{background:var(--crit-bg);color:var(--crit-fg);border-color:var(--crit-bd)}
.sev-high{background:var(--high-bg);color:var(--high-fg);border-color:var(--high-bd)}
.sev-medium{background:var(--med-bg);color:var(--med-fg);border-color:var(--med-bd)}
.sev-low{background:var(--low-bg);color:var(--low-fg);border-color:var(--low-bd)}
.sev-unknown{background:var(--surface-2);color:var(--muted);border-color:var(--border-hi);border-style:dashed}
.sevl{padding:0 6px;font-size:11.5px;font-weight:800}
/* CVSS version a severity rests on (DECISIONS #150): a small neutral tag after the chip;
   dashed when no version is stated, like every "not known" value on these screens. */
.sev-basis{display:inline-flex;flex-wrap:wrap;align-items:center;gap:5px}
.cvss-tag{display:inline-block;font-size:11px;font-weight:650;line-height:1.5;color:var(--muted);background:var(--surface-2);border:1px solid var(--border-hi);border-radius:5px;padding:0 6px;white-space:nowrap}
.cvss-tag.cvss-ns{border-style:dashed;font-weight:550}
.sevls{display:inline-flex;flex-wrap:wrap;gap:4px;vertical-align:middle}
.tag-gap{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--gap);background:var(--gap-bg);border:1px dashed var(--gap);padding:1px 8px;border-radius:6px;white-space:nowrap}
.tag-gap svg{width:13px;height:13px}
/* An imported experiment run (the lab customer, DECISIONS #185): neutral, never a verdict colour. */
.tag-lab{display:inline-flex;align-items:center;font-size:12px;font-weight:700;color:var(--muted);border:1px solid var(--border-hi);background:var(--surface-2);padding:1px 8px;border-radius:6px;white-space:nowrap;vertical-align:middle}
.run-badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--run);background:var(--accent-soft);border:1px solid rgba(var(--hi),.35);border-radius:99px;padding:1px 8px;white-space:nowrap}
.conn{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;padding:2px 9px;border-radius:99px;border:1px solid currentColor;white-space:nowrap}
.conn svg{width:12px;height:12px}
.conn.on{color:var(--safe);background:var(--safe-bg)} .conn.off{color:var(--muted);background:var(--surface-2);border-style:dashed}
.ev-count{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-family:var(--mono);font-size:13px}
.ev-count svg{width:14px;height:14px}
.spin{animation:spin 1.1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== Hexagon application badge (three verdict-coloured segments) ===== */
.hexg{width:26px;height:26px;flex:none;vertical-align:middle}
.hexg .hx{fill:var(--hex-fill);stroke:none}
.hexg .sg{fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.hexg .sa{stroke:var(--hex-a)} .hexg .sm{stroke:var(--hex-m)} .hexg .sb{stroke:var(--hex-b)}
.hexg text{fill:var(--hex-text);font:800 15px var(--sans)}
.hexg.lg{width:40px;height:40px}
h1 .hexg{margin-right:6px;vertical-align:-6px}
h1.mono{font-size:24px}
.app-ref{display:inline-flex;align-items:center;gap:8px;min-width:0}

/* ===== Tabs (route links) and segmented switch ===== */
.tabs{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--border);margin-bottom:18px;scrollbar-width:thin}
.tab{font-weight:620;color:var(--muted);text-decoration:none;border-bottom:3px solid transparent;padding:10px 14px 9px;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;border-radius:9px 9px 0 0}
.tab:hover{color:var(--text);background:rgba(var(--hi),.07)}
.tab[aria-current="page"]{color:var(--heading);font-weight:800;border-bottom-color:rgb(11,140,210);background:linear-gradient(180deg,rgba(var(--hi),0),rgba(var(--hi),.14))}
.tab .cnt{font-size:11.5px;font-weight:700;padding:0 6px;border-radius:99px;background:rgba(var(--hi),.12);color:var(--muted)}
.tab[aria-current="page"] .cnt{background:var(--accent);color:var(--accent-ink)}
.seg-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:10px;background:var(--strip-bg);border:1px solid var(--border);max-width:100%;overflow-x:auto}
.seg-tabs button{font:inherit;font-weight:650;border:0;background:none;color:var(--muted);padding:5px 12px;border-radius:8px;cursor:pointer;white-space:nowrap;font-size:13px}
.seg-tabs button[aria-pressed="true"]{background:var(--accent-soft);color:var(--heading);font-weight:800;box-shadow:inset 0 0 0 1px rgba(var(--hi),.5)}

/* ===== Filter strip ===== */
.fstrip{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));border:1px solid var(--border);border-radius:12px;background:var(--strip-bg);margin:0 0 18px;box-shadow:var(--shadow)}
.fstrip > *{position:relative;min-width:0;padding:11px 14px 9px;border-left:1px solid var(--border)}
.fstrip > :first-child{border-left:0}
.fstrip > *::before{content:"";position:absolute;left:14px;width:46%;top:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent),transparent);pointer-events:none}
.fstrip label{display:flex;flex-direction:column;gap:2px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--faint)}
.fstrip select,.fstrip input{border:0;border-radius:6px;background:transparent;padding:2px 0;font-size:14px;font-weight:650;letter-spacing:0;text-transform:none;color:var(--text);width:100%}
.fstrip.f4{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}

/* ===== Applications row list ===== */
/* Verdicts column: five chips (Safe, Risky, Needs a human, Not judged, Not shipped) need ~300px. */
.app-list{--al-cols:minmax(210px,2fr) minmax(120px,1fr) 52px 96px minmax(300px,1.5fr) minmax(110px,.9fr);border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);box-shadow:var(--shadow);overflow:hidden;margin-bottom:18px}
.al-head,.al-row{display:grid;grid-template-columns:var(--al-cols);column-gap:14px;align-items:center;padding:10px 16px}
.al-head{background:var(--th-bg);border-bottom:1px solid var(--border-hi);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--faint)}
.al-row{border-top:1px solid var(--row-line);cursor:pointer;min-height:58px}
.al-head + .al-row{border-top:0}
.al-row:hover{background:rgba(var(--hi),.05);box-shadow:inset 3px 0 0 var(--accent)}
.al-row > *{min-width:0}
.al-app{display:flex;align-items:center;gap:9px}
.al-app .hexg{width:32px;height:32px}
.al-id{display:flex;flex-direction:column;min-width:0}
.al-row .nm-btn{all:unset;cursor:pointer;font-family:var(--mono);font-weight:700;font-size:14.5px;color:var(--text);width:max-content;max-width:100%;overflow-wrap:anywhere}
.al-row .nm-btn:hover{text-decoration:underline}
.al-row .nm-btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.al-row .repo{font-family:var(--mono);font-size:11.5px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.al-st{font-size:13px;color:var(--muted)}
.al-head .al-st{font-size:inherit;color:inherit}
.al-st-in{display:none;font-size:12.5px;color:var(--muted)}
.al-num{font-variant-numeric:tabular-nums;font-weight:650;text-align:right}
.al-date{font-variant-numeric:tabular-nums;font-size:13.5px}
.al-row .vsum{flex-wrap:nowrap}
.al-find{display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-size:13.5px}

/* ===== Verdict posture panel (no trend card: owner, 2026-10-25) ===== */
.ss-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:22px;align-items:start}
.rp-sub{margin:0 0 14px;font-size:12.5px;color:var(--muted)}
.rp-score{display:flex;align-items:baseline;gap:8px;margin:0 0 6px;flex-wrap:wrap}
.rp-score .big{font-size:40px;line-height:1;font-weight:780;color:var(--heading);font-variant-numeric:tabular-nums}
.rp-score .of{font-size:13.5px;color:var(--muted)}
.rp-score .of b{color:var(--heading)}
.tickbar{display:flex;gap:2px;height:22px;align-items:flex-end;margin:4px 0 6px}
.tickbar i{flex:1 1 0;min-width:2px;height:64%;border-radius:1px}
.tickbar i:nth-child(4n+1){height:100%}
.tickbar .t-s{background:var(--safe)} .tickbar .t-r{background:var(--risky)} .tickbar .t-h{background:var(--human-fill)}
.tickbar .t-j{background:var(--pending)} .tickbar .t-n{background:var(--tick-empty)}
.tickbar .t-ns{background:var(--border-hi)}
.tick-scale{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--faint);margin-bottom:12px;gap:6px;flex-wrap:wrap}
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.kpi{display:flex;flex-direction:column;gap:2px;padding:9px 10px;border-radius:10px;border:1px solid var(--border);background:var(--tile-bg);min-width:0}
.kpi .kpi-top{display:flex;align-items:center;gap:6px}
.kpi svg{width:16px;height:16px;flex:none}
.kpi .kpi-n{font-size:22px;font-weight:780;line-height:1.1;font-variant-numeric:tabular-nums}
.kpi .kpi-l{font-size:11.5px;font-weight:700;line-height:1.25}
.kpi.k-safe{border-color:var(--safe);color:var(--safe);background:var(--safe-bg)}
.kpi.k-risky{border-color:var(--risky);color:var(--risky);background:var(--risky-bg)}
.kpi.k-human{border-color:var(--human-bd);color:var(--human);background:var(--human-bg)}
.kpi.k-nj{border-color:var(--border-hi);border-style:dashed;color:var(--muted);background:var(--surface-2)}
.kpi.k-ns{border-color:var(--border-hi);color:var(--text);background:var(--bg-2)}
.kpi .kpi-n .nm{font-size:12px;font-weight:600}
.kpi.k-plain{color:var(--text)} .kpi.k-plain .kpi-l{color:var(--faint);text-transform:uppercase;letter-spacing:.12em;font-size:10px}
.kpi-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:2px 0 14px}
.posture-note{font-size:13px;color:var(--muted);margin:10px 0 0}

/* ===== Tables ===== */
/* position:relative makes the wrapper the containing block of the absolutely positioned
   .sr-only labels inside its cells; without it they escape the sideways scroll and widen the
   whole page (found at 1024 px on the Stack tab by tests/test_scan_ui_browser.py). */
.table-wrap{overflow-x:auto;position:relative}
table{width:100%;border-collapse:collapse;font-size:13.8px}
th{text-align:left;padding:9px 12px;background:var(--th-bg);border-bottom:1px solid var(--border-hi);white-space:nowrap}
td{padding:11px 12px;border-bottom:1px solid var(--row-line);vertical-align:top}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
/* Long package names and versions may break anywhere, so a wide table fits its card. */
tbody th .mono,td.mono{overflow-wrap:anywhere}
/* A row header (the first cell of a row) reads like a normal cell, not like a column title. */
tbody th{background:none;border-bottom:1px solid var(--row-line);text-transform:none;letter-spacing:0;font-size:13.8px;font-weight:600;color:var(--text);white-space:normal;vertical-align:top;padding:11px 12px}
tbody tr.clickable{cursor:pointer}
tbody tr.clickable:hover{background:rgba(var(--hi),.07);box-shadow:inset 3px 0 0 var(--accent)}
tbody tr[aria-current="true"]{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
th .sort{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
th .sort:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
th .sort .ar{font-size:10px;color:var(--faint)}
th[aria-sort="ascending"] .ar,th[aria-sort="descending"] .ar{color:var(--accent)}
.cve-id{font-family:var(--mono);font-weight:700;font-size:13px;overflow-wrap:anywhere}
.cve-btn{all:unset;cursor:pointer;font-family:var(--mono);font-weight:700;font-size:13px;color:var(--accent);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.cve-btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.lib{font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.fix{font-family:var(--mono);font-size:12.5px}
.why-cell{max-width:320px;color:var(--muted);font-size:13px}
.why-cell .clip{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.count-line{font-size:13px;color:var(--muted);margin:0 0 10px}

/* ===== Scan page ===== */
.scan-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin:8px 0 10px}
.scan-head h1{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.scan-head h1 .app-ref{font-weight:500}
.scan-head h1 a{color:inherit;text-decoration:none}
.scan-head h1 a:hover{text-decoration:underline}
.run-meta{display:flex;gap:6px 16px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin:0 0 12px}
.run-meta b{color:var(--text);font-weight:600}
.reports-strip{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13.5px;margin:0 0 12px;color:var(--muted)}
.time-card{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:start;margin-bottom:18px}
.tc-l{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--faint)}
.tc-v{font-size:20px;font-weight:750;font-variant-numeric:tabular-nums;line-height:1.25;overflow-wrap:anywhere}
.tc-s{font-size:12.5px;color:var(--muted)}
/* ----- Pipeline card (Progress tab): six milestone tiles, arrows, legend, sub-step cards -----
   Ported from the central mockup (docs/mockups/ui-mockup-central-real-data.html, .pipe,
   .stage-btn, .arrow, .pipe-legend, .pipe-subs, .sub-card) with this file's tokens. The mockup sets
   bar widths with style attributes; the CSP forbids those, so the segmented bar under a tile is one
   .seg per real stage, coloured by class (.seg-done ...), never sized by a number. */
.pipe{display:flex;align-items:stretch}
.stage-btn{font:inherit;color:inherit;text-align:left;cursor:pointer;flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:3px;padding:10px 10px 9px;border-radius:11px;border:1.5px solid var(--border);background:var(--tile-bg)}
.stage-btn:hover,.sub-card:hover{box-shadow:0 0 18px rgba(var(--hi),.2)}
.stage-btn[aria-pressed="true"]{border-color:var(--accent);border-width:2.5px;padding:9px 9px 8px;background:var(--accent-soft)}
.sb-icon{width:24px;height:24px;border-radius:50%;display:grid;place-items:center}
.sb-icon svg{width:13px;height:13px}
.sb-name{font-weight:700;font-size:13px;line-height:1.25;overflow-wrap:anywhere}
.sb-status{font-size:12px;font-weight:700}
.sb-time{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.sb-bar{display:flex;gap:2px;height:5px;margin-top:3px}
.seg{flex:1 1 0;min-width:0;height:100%;border-radius:99px;background:var(--bar-bg)}
.seg-done{background:var(--safe)} .seg-warn{background:var(--gap)} .seg-fail{background:var(--risky)} .seg-run{background:var(--run)}
.seg-pending,.seg-skip{background:var(--bar-bg)}
.sb-sel{display:none;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--accent)}
.stage-btn[aria-pressed="true"] .sb-sel{display:block}
.stage-btn.st-done,.stage-btn.st-run,.stage-btn.st-pending,.stage-btn.st-skip,.stage-btn.st-warn,.stage-btn.st-fail{background:var(--tile-bg);color:var(--text)}
.stage-btn[aria-pressed="true"]{background:var(--accent-soft)}
.st-done .sb-icon{background:var(--safe-bg);color:var(--safe);border:1.5px solid var(--safe)} .st-done .sb-status{color:var(--safe)}
.st-run .sb-icon{background:var(--accent-soft);color:var(--run);border:1.5px solid var(--run)} .st-run .sb-status{color:var(--run)}
.st-pending .sb-icon,.st-skip .sb-icon{border:1.5px dashed var(--pending);color:var(--pending)} .st-pending .sb-status,.st-skip .sb-status{color:var(--faint)}
.st-warn .sb-icon{background:var(--gap-bg);color:var(--gap);border:1.5px dashed var(--gap)} .st-warn .sb-status{color:var(--gap)}
.st-fail .sb-icon{background:var(--risky-bg);color:var(--risky);border:1.5px solid var(--risky)} .st-fail .sb-status{color:var(--risky)}
.arrow{flex:0 0 26px;display:flex;align-items:center;justify-content:center}
.arrow svg{width:26px;height:14px;overflow:visible}
.ln{stroke:currentColor;stroke-width:2.6;stroke-linecap:round;fill:none}
.hd{fill:currentColor}
.a-done svg{color:var(--safe)}
.a-run svg{color:var(--run)} .a-run .ln{stroke-dasharray:4 3;animation:flow .7s linear infinite}
.a-wait svg{color:var(--pending)} .a-wait .ln{stroke-dasharray:2 4}
.a-gap svg{color:var(--gap)} .a-gap .ln{stroke-dasharray:5 3}
@keyframes flow{to{stroke-dashoffset:-14}}
.pipe-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:12px}
.pipe-legend span{display:inline-flex;align-items:center;gap:5px}
.pipe-legend svg{width:22px;height:12px}
.pipe-subs{margin-top:14px;border-top:1px solid var(--border);padding-top:12px}
.pipe-subs h3{margin:0 0 8px;font-size:15px}
.subs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sub-card{font:inherit;color:var(--text);text-align:left;cursor:pointer;min-width:0;display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:10px;row-gap:2px;align-items:start;background:var(--tile-bg);border:1.5px solid var(--border);border-radius:12px;padding:10px 14px}
.sub-card[aria-pressed="true"]{border-color:var(--accent);border-width:2.5px;padding:9px 13px;background:var(--accent-soft)}
.sub-card .sb-icon{grid-row:1/4}
.sub-card .sb-name{font-size:14px;grid-column:2}
.sc-line{grid-column:2;display:flex;gap:4px 10px;flex-wrap:wrap}
.sc-desc{grid-column:2;font-size:13px;color:var(--muted)}
.stage-panel{margin-top:14px;border-top:1px solid var(--border);padding-top:14px}
.stage-panel h3{margin-bottom:4px}
.stage-panel p{margin:0 0 8px;font-size:14px;overflow-wrap:anywhere}
.gaps-panel{border:1px dashed var(--gap);background:var(--gaps-bg);border-radius:var(--radius);padding:18px;min-width:0;align-self:start}
.gaps-panel h2{color:var(--gap);display:flex;align-items:center;gap:8px}
.gaps-panel h2 svg{width:20px;height:20px}
.gaps-panel ol{margin:0;padding-left:20px}
.gaps-panel li{margin-bottom:12px;font-size:14px;overflow-wrap:anywhere}
.gaps-panel li b{display:block}
.gaps-panel .why{display:block;color:var(--muted);font-size:13px}
.gaps-panel .stage-ref{font-size:12px;font-weight:700;color:var(--gap)}
.gaps-count{font-size:30px;font-weight:800;color:var(--gap);line-height:1;margin:0 0 6px}
.log{background:var(--log-bg);color:#d3dde8;font-family:var(--mono);font-size:12.5px;line-height:1.6;border-radius:10px;padding:12px 14px;max-height:340px;overflow:auto;margin:10px 0 0;white-space:pre-wrap;word-break:break-word;border:1px solid var(--border)}
.log:focus-visible{outline:3px solid var(--focus)}

/* ===== CVE to Fix ribbon (inline SVG, no library) ===== */
.rb-scroll{overflow-x:auto;border-radius:10px}
.rb{display:block;width:100%;height:auto;min-width:720px}
.rb .colh{fill:var(--faint);font:700 11px var(--sans);letter-spacing:.16em}
.rb .lk{opacity:.55}
.rb .lk.v-safe-f{fill:var(--safe)} .rb .lk.v-risky-f{fill:var(--risky)} .rb .lk.v-human-f{fill:var(--human-fill)} .rb .lk.v-nj-f{fill:var(--pending)} .rb .lk.v-other-f{fill:var(--border-hi)} .rb .lk.v-ns-f,.rb .nd-r.v-ns-f{fill:var(--border-hi)}
.rb .nd-l{fill:var(--accent)}
.rb .nd-r{fill:var(--pending)}
.rb .nd-r.v-safe-f{fill:var(--safe)} .rb .nd-r.v-risky-f{fill:var(--risky)} .rb .nd-r.v-human-f{fill:var(--human-fill)} .rb .nd-r.v-nj-f{fill:var(--pending)}
.rb .nd-gap{fill:var(--gap-bg);stroke:var(--gap);stroke-width:1.5;stroke-dasharray:4 3}
.rb .lbl{fill:var(--text);font:650 12px var(--mono)}
.rb .sub{fill:var(--muted);font:500 11px var(--sans)}
.rb-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--muted);margin-top:8px}
.rb-legend span{display:inline-flex;align-items:center;gap:5px;font-weight:650}
.rb-legend i{display:inline-block;width:10px;height:10px;border-radius:2px}
.rb-legend .s i{background:var(--safe)} .rb-legend .r i{background:var(--risky)} .rb-legend .h i{background:var(--human-fill)} .rb-legend .j i{background:var(--pending)} .rb-legend .g i{background:var(--gap-bg);border:1px dashed var(--gap)}

/* ===== Drawer (finding detail) and dialogs ===== */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:45}
.scrim[hidden]{display:none}
.drawer{position:fixed;top:0;right:0;height:100vh;width:min(660px,100vw);background:var(--bg);border-left:1px solid rgba(var(--hi),.45);box-shadow:0 12px 36px rgba(16,32,72,.16);display:flex;flex-direction:column;z-index:50}
.drawer[hidden]{display:none}
.drawer-head{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;gap:12px;align-items:flex-start}
.drawer-head h2{margin:0 0 6px;font-family:var(--mono);font-size:17px;overflow-wrap:anywhere}
.drawer-body{padding:20px 22px 40px;overflow:auto}
.drawer-body h3{margin:20px 0 8px}
.icon-btn{all:unset;cursor:pointer;margin-left:auto;width:34px;height:34px;display:grid;place-items:center;border-radius:8px;color:var(--muted);flex:none}
.icon-btn:hover{background:var(--surface-2)}
.icon-btn:focus-visible{outline:3px solid var(--focus)}
.verdict-box{border-radius:var(--radius);padding:14px 16px;margin-bottom:8px;border:1px solid var(--border-hi);background:var(--inset-bg)}
.verdict-box p{margin:8px 0 0}
.reason-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
/* Engine text (reasons, the stored summary): black on the inset tint (owner: text in the
   stored summary excerpt is black). */
.excerpt{background:var(--inset-bg);color:#000;font-family:var(--mono);font-size:12.5px;line-height:1.55;border-radius:10px;padding:10px 12px;white-space:pre-wrap;word-break:break-word;max-height:240px;overflow:auto;margin:0;border:1px solid var(--border)}
.code-list{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.code-list li{font-family:var(--mono);font-size:12px;padding:2px 7px;border-radius:5px;border:1px solid var(--border);background:var(--surface-2);overflow-wrap:anywhere}
.code-list.gaps li{border:1px dashed var(--gap);background:var(--gap-bg);color:var(--gap);font-weight:700}
.steps-tbl td,.steps-tbl th{padding:6px 10px;font-size:13px}
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px}
.modal[hidden]{display:none}
.modal .scrim2{position:absolute;inset:0;background:var(--scrim)}
.modal .dlg{position:relative;width:min(760px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--bg);border:1px solid rgba(var(--hi),.5);border-radius:16px;box-shadow:0 12px 36px rgba(16,32,72,.16);padding:22px}
.modal .dlg.narrow{width:min(460px,100%)}
.modal h2{margin:0 0 4px}
.preview{background:var(--inset-bg);border:1px solid var(--border);border-radius:10px;padding:12px 14px;font-family:var(--mono);font-size:12.5px;white-space:pre-wrap;word-break:break-word;max-height:60vh;overflow:auto;margin:10px 0 14px;color:#000}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);max-width:calc(100vw - 32px);background:var(--toast-bg);color:var(--toast-fg);padding:10px 16px;border-radius:10px;font-size:14px;font-weight:600;z-index:70;opacity:0;pointer-events:none;transition:opacity .2s}
.toast.show{opacity:1}

/* ===== Sign-in ===== */
.signin{min-height:100vh;display:grid;place-items:center;padding:16px}
.signin .card{width:min(520px,100%)}
.signin .brand{padding:0;margin-bottom:14px}

/* ===== Integrations and settings ===== */
.int-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin-bottom:22px}
.int-card{display:flex;flex-direction:column;gap:10px}
.int-card .top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.int-card h3{margin:0;font-size:16px;text-transform:none;letter-spacing:0;color:var(--text)}
.int-sec{margin:0 0 10px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--faint)}
.int-card p{margin:0;font-size:14px}
code.cmd{display:block;font-family:var(--mono);font-size:12.5px;background:var(--inset-bg);border:1px solid var(--border);border-radius:8px;padding:8px 10px;overflow-wrap:anywhere;white-space:pre-wrap;color:#000}
.promise ul{list-style:none;padding:0;margin:0 0 14px}
.promise li{display:flex;gap:10px;padding:6px 0;font-size:14px}
.promise li svg{width:18px;height:18px;flex:none;margin-top:2px}
.will svg{color:var(--safe)} .wont svg{color:var(--risky)}

@media (prefers-reduced-motion:reduce){.spin,.a-run .ln{animation:none}.toast{transition:none}}

/* ===== Responsive ===== */
/* Pipeline card below 1240 px (the mockup's rule): the tiles stack, each one a row, arrows point down. */
@media (max-width:1239px){
  .pipe{flex-direction:column}
  .stage-btn{flex:none;display:grid;grid-template-columns:24px minmax(0,1fr) auto;column-gap:10px;row-gap:2px;align-items:center}
  .sb-icon{grid-row:1/3}
  .sb-name,.sb-status{grid-column:2}
  .sb-time{grid-column:3;grid-row:1/3;text-align:right}
  .sb-bar,.sb-sel{grid-column:1/-1}
  .arrow{height:26px}
  .arrow svg{transform:rotate(90deg)}
}
@media (max-width:760px){.subs{grid-template-columns:minmax(0,1fr)}}
@media (max-width:1180px){
  .app-list{--al-cols:minmax(180px,2fr) 48px 96px minmax(244px,1.4fr) minmax(100px,.9fr)}
  .al-head .al-st,.al-row > .al-st{display:none}
  .al-st-in{display:block}
}
@media (max-width:1024px){
  .grid-2,.grid-3,.ss-grid{grid-template-columns:minmax(0,1fr)}
  .time-card{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi-row{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  /* One column: the navigation row keeps its own height, the page takes the rest. */
  .shell{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;margin:0;border-radius:0;border-width:0 0 1px;box-shadow:none}
  .side{position:sticky;top:0;z-index:30;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;padding:8px 12px;gap:8px;border-right:0;border-bottom:1px solid var(--border);border-radius:0}
  .brand b,.btn-new .lbl,.nav .sep{display:none}
  .btn-new{padding:7px 10px}
  .nav{flex-basis:100%;flex-direction:row;flex-wrap:wrap;gap:4px}
  .nav a{padding:6px 9px;font-size:13.5px}
  .nav a[aria-current="page"]::before{left:9px;right:9px;top:auto;bottom:2px;width:auto;height:2px;border-radius:2px}
  main{padding:0 16px 50px}
  .topbar{position:static;margin:0 -16px 12px;padding:10px 16px;border-radius:0;flex-wrap:wrap}
  h1{font-size:22px}
  .row-2,.row-3,.kv{grid-template-columns:minmax(0,1fr)}
  .kv dt{margin-top:6px}
  .fstrip,.fstrip.f4{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .fstrip > :first-child{grid-column:1/-1}
  .fstrip > :nth-child(n+2){border-top:1px solid var(--border)}
  .fstrip > :nth-child(2){border-left:0}
  .fstrip.f4 > :nth-child(4){border-left:0}
  .al-head{display:none}
  .al-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:8px;padding:12px 14px}
  .al-app{grid-column:1/-1}
  .al-row > [data-label]::before{content:attr(data-label);display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--faint);margin-bottom:2px}
  .al-num{text-align:left}
  .al-row .vsum{flex-wrap:wrap}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .time-card{gap:12px}
  .rp-score .big{font-size:34px}
  .int-grid{grid-template-columns:minmax(0,1fr)}
  /* Wide tables become one labelled card per row: no sideways scrolling on a phone. */
  .cards-sm thead{display:none}
  .cards-sm,.cards-sm tbody,.cards-sm tr,.cards-sm td,.cards-sm tbody th{display:block;width:100%}
  .cards-sm tr{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px;padding:6px 4px;background:var(--bg)}
  .cards-sm td,.cards-sm tbody th{border:0;padding:5px 12px;text-align:left;background:none}
  .cards-sm td[data-label]::before,.cards-sm tbody th[data-label]::before{content:attr(data-label);display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--faint)}
  .why-cell{max-width:none}
  .drawer-head,.drawer-body{padding-left:16px;padding-right:16px}
}

/* ===== Shell phase: Back button and "built in a later phase" screens ===== */
.tb-left{display:flex;align-items:center;gap:10px;min-width:0}
.back-btn{display:inline-flex;align-items:center;gap:6px;flex:none}
.back-btn[hidden]{display:none}
.later{border:1px dashed var(--gap);background:var(--gaps-bg);border-radius:var(--radius);padding:18px 20px;max-width:640px}
.later p{margin:0 0 8px}

/* ===== Group B screens: Slices, Evidence, Tests, Files, Graph (real UI phase 5) =====
   Planted tag (desaturated violet, flask icon, solid outline; the mockup's pair, 7.3:1 on white),
   shadow label (dashed, like the gap tag), the All / Real / Planted bar, completeness text, the
   entry point -> library picture. Everything is a class: the page's CSP forbids inline styles. */
:root{--plant:#674a83;--plant-bg:#f6f2fa;--plant-bd:#8a73a6}
.gb-planted{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;line-height:1.45;color:var(--plant);background:var(--plant-bg);border:1px solid currentColor;border-radius:6px;padding:0 7px 0 5px;white-space:nowrap;vertical-align:middle}
.gb-planted svg{width:13px;height:13px;flex:none}
tr.is-planted > :first-child{border-left:2px dashed var(--plant-bd)}
.gb-shadow-tag{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--gap);background:var(--gap-bg);border:1px dashed var(--gap);padding:1px 8px;border-radius:6px}
.gb-shadow-tag svg{width:13px;height:13px}
.gb-shadow{border:1px dashed var(--gap);background:var(--gaps-bg);border-radius:var(--radius);padding:14px 18px;margin:0 0 14px;min-width:0}
.gb-shadow h3{margin:0 0 6px}
.src-bar{display:inline-flex;gap:4px;padding:4px;border-radius:10px;background:var(--strip-bg);border:1px solid var(--border);margin:0 0 8px;max-width:100%;flex-wrap:wrap}
.src-bar button{font:inherit;font-weight:650;border:0;background:none;color:var(--muted);padding:5px 12px;border-radius:8px;cursor:pointer;font-size:13px}
.src-bar button[aria-pressed="true"]{background:var(--accent-soft);color:var(--heading);font-weight:800;box-shadow:inset 0 0 0 1px rgba(var(--hi),.5)}
.src-bar .cnt{font-size:11.5px;font-weight:700;padding:0 6px;border-radius:99px;background:rgba(var(--hi),.12);color:var(--muted)}
.gb-counts{margin:2px 0}
.gb-counts svg{width:14px;height:14px;color:var(--plant);vertical-align:-2px;margin-right:4px}
.gb-comp{display:inline-flex;flex-direction:column;gap:2px}
.gb-num{font-variant-numeric:tabular-nums}
.gb-ci,.gb-why{font-size:12.5px;color:var(--muted)}
.gb-live{font-size:12px;font-weight:700;color:var(--gap)}
.gb-cur{display:block;margin-top:6px;padding-top:6px;border-top:1px dashed var(--border-hi)}
.gb-stack{display:inline-flex;flex-direction:column;gap:4px;align-items:flex-start}
.gb-pager{display:flex;align-items:center;gap:12px;margin:12px 0 0}
.gb-list{margin:6px 0 12px;padding-left:20px}
.gb-check{border-top:1px solid var(--row-line);padding-top:10px;margin-top:12px}
.gb-dump{margin:0;padding-left:18px}
.gb-kv{font-size:13px}
.gb-text{overflow-wrap:anywhere}
.gb-svg{width:100%;max-width:640px;height:auto;display:block;margin:0 0 12px}
.gb-n{stroke:var(--border-hi);stroke-width:1}
.gb-n-e{fill:var(--accent-soft)}
.gb-n-l{fill:var(--gap-bg)}
.gb-t{font-family:var(--mono);font-size:11px;fill:var(--text)}
.gb-link{fill:none;stroke:var(--cve-node);stroke-width:1.4;opacity:.8}

/* Lists wave (plan W1): the sidebar "Live" badge beside Scans while a scan is queued or running. */
.nav .live-badge{margin-left:auto;font-size:11px;font-weight:700;line-height:18px;padding:0 7px;border-radius:99px;background:var(--accent);color:var(--accent-ink)}