/* FBC — Light SaaS overlay (8 Jul 2026)
   Direction agreed with Joe: warm cream background, flat white rounded cards,
   hairline borders, single purple accent, light nav rail, steppers, KPI chips.
   Loaded AFTER fbc.css. Scoped to html:not([data-theme="dark"]) so the dark
   theme (old look) survives the toggle untouched. */

html:not([data-theme="dark"]){
  --bg:#F6F4EF;               /* warm cream page */
  --surface:#FFFFFF;
  --surface-2:#F4F2EC;
  --zebra:#FBFAF7;
  --track:#EFEDE6;
  --line:#E7E4DB;             /* hairline */
  --acc:#6D5AE6;              /* single purple accent */
  --acc-ink:#5646C9;          /* AA text-on-light purple */
  --acc-dim:rgba(109,90,230,0.08);
  --acc-line:rgba(109,90,230,0.28);
  /* remap the old electric-blue UI accent onto purple so every existing
     component (active nav, callouts, tags, links) picks it up */
  --blue:#6D5AE6;
  --blue-dim:rgba(109,90,230,0.08);
  --blue-line:rgba(109,90,230,0.26);
  --blue-ink:#5646C9;
  --blue-num:#221E36;         /* big numbers: near-black ink, not blue */
  --head-ink:#221E36;
  --text:#2A2735;
  --ink-2:#4A4757;
  --muted:#77748A;
}

/* ---------- shell ---------- */
html:not([data-theme="dark"]) body{background:var(--bg)}
html:not([data-theme="dark"]) .sidebar{
  background:var(--bg);color:#77748A;border-right:1px solid var(--line);width:240px;padding:18px 14px}
html:not([data-theme="dark"]) .sidebar .brand{
  background:var(--navy);border-radius:12px;padding:14px 14px 12px;margin-bottom:4px}
html:not([data-theme="dark"]) .sidebar .brand .brand-crm{color:rgba(255,255,255,0.6)}
html:not([data-theme="dark"]) .navgroup{margin-top:22px}
html:not([data-theme="dark"]) .navgroup .gl{color:#A3A0B0}
html:not([data-theme="dark"]) .sidebar a{color:#5C5970;border-radius:9px;padding:8.5px 12px}
html:not([data-theme="dark"]) .sidebar a:hover:not(.active){color:var(--head-ink);background:rgba(34,30,54,0.05)}
html:not([data-theme="dark"]) .sidebar a.active{color:var(--acc-ink);background:var(--acc-dim);font-weight:600}
html:not([data-theme="dark"]) .sidebar .who{border-top:1px solid var(--line)}
html:not([data-theme="dark"]) .sidebar .who .av{background:var(--acc-dim);color:var(--acc-ink)}
html:not([data-theme="dark"]) .sidebar .who .nm{color:var(--head-ink)}
html:not([data-theme="dark"]) .sidebar .who .rl{color:var(--muted)}

html:not([data-theme="dark"]) .topbar{background:var(--bg);border-bottom:1px solid var(--line);padding:14px 30px}
html:not([data-theme="dark"]) .search{background:var(--surface);border-radius:9px}
html:not([data-theme="dark"]) .iconbtn{background:var(--surface);border-radius:9px}

/* ---------- typography & cards ---------- */
html:not([data-theme="dark"]) .pagehead h1{font-size:30px;letter-spacing:-0.015em}
html:not([data-theme="dark"]) .eyebrow{color:var(--acc-ink)}
html:not([data-theme="dark"]) .panel{border-radius:14px;box-shadow:0 1px 2px rgba(28,22,54,0.04)}
html:not([data-theme="dark"]) .statstrip{border-radius:14px;border-color:var(--line);box-shadow:0 1px 2px rgba(28,22,54,0.04)}
html:not([data-theme="dark"]) .statstrip .n{font-size:28px}

/* buttons: purple primary, quiet ghosts */
html:not([data-theme="dark"]) .btn{border-radius:9px}
html:not([data-theme="dark"]) .btn-primary,
html:not([data-theme="dark"]) .btn-navy{background:var(--acc);color:#fff}
html:not([data-theme="dark"]) .btn-primary:hover,
html:not([data-theme="dark"]) .btn-navy:hover{background:#5F4CD9}
html:not([data-theme="dark"]) .btn-ghost{background:var(--surface)}
html:not([data-theme="dark"]) :is(a,button,[tabindex]):focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:9px}

/* tables: light heads instead of navy */
html:not([data-theme="dark"]) thead th{background:var(--surface-2);color:#6B6880}
html:not([data-theme="dark"]) tbody tr.click:hover td{background:var(--acc-dim)}
html:not([data-theme="dark"]) .tag-blue{background:var(--acc-dim);color:var(--acc-ink)}
html:not([data-theme="dark"]) .apprv .a{background:#3A3650}
html:not([data-theme="dark"]) .apprv .a.b{background:var(--acc);color:#fff}

/* ---------- KPI chips (dashboard / page summaries) ---------- */
html:not([data-theme="dark"]) .kchips{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:24px}
html:not([data-theme="dark"]) .kchip{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;display:flex;gap:12px;align-items:flex-start;box-shadow:0 1px 2px rgba(28,22,54,0.04);color:inherit}
html:not([data-theme="dark"]) a.kchip:hover{border-color:var(--acc-line)}
html:not([data-theme="dark"]) .kchip .ki{width:32px;height:32px;border-radius:9px;background:var(--acc-dim);color:var(--acc-ink);
  display:grid;place-items:center;flex-shrink:0}
html:not([data-theme="dark"]) .kchip .ki svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7}
html:not([data-theme="dark"]) .kchip .ki.amber{background:rgba(245,158,11,0.13);color:#92400e}
html:not([data-theme="dark"]) .kchip .ki.red{background:rgba(239,68,68,0.1);color:#b91c1c}
html:not([data-theme="dark"]) .kchip .ki.green{background:rgba(34,197,94,0.12);color:#15803d}
html:not([data-theme="dark"]) .kchip .kn{font-family:"Space Grotesk",sans-serif;font-size:22px;font-weight:600;color:var(--head-ink);line-height:1.05}
html:not([data-theme="dark"]) .kchip .kl{font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);margin-top:4px}
html:not([data-theme="dark"]) .kchip .kd{font-family:"JetBrains Mono",monospace;font-size:10.5px;margin-top:4px;color:var(--muted)}
html:not([data-theme="dark"]) .kchip .kd.up{color:#15803d}
html:not([data-theme="dark"]) .kchip .kd.warn{color:#92400e}
html:not([data-theme="dark"]) .kchip .kd.bad{color:#b91c1c}

/* ---------- horizontal stepper (onboarding sequences) ---------- */
html:not([data-theme="dark"]) .stepper{display:flex;align-items:flex-start;gap:0;margin:6px 0 2px}
html:not([data-theme="dark"]) .stepper .step{flex:1;min-width:0;position:relative;text-align:center;padding:0 4px}
html:not([data-theme="dark"]) .stepper .step::before{content:"";position:absolute;top:11px;left:-50%;width:100%;height:2px;background:var(--track)}
html:not([data-theme="dark"]) .stepper .step:first-child::before{display:none}
html:not([data-theme="dark"]) .stepper .step.done::before,
html:not([data-theme="dark"]) .stepper .step.now::before{background:var(--acc)}
html:not([data-theme="dark"]) .stepper .step .dot{position:relative;z-index:1;width:22px;height:22px;border-radius:50%;margin:0 auto;
  display:grid;place-items:center;background:var(--surface);border:2px solid var(--track);color:var(--muted);
  font-family:"JetBrains Mono",monospace;font-size:10px}
html:not([data-theme="dark"]) .stepper .step.done .dot{background:var(--acc);border-color:var(--acc);color:#fff}
html:not([data-theme="dark"]) .stepper .step.now .dot{border-color:var(--acc);color:var(--acc-ink);box-shadow:0 0 0 4px var(--acc-dim)}
html:not([data-theme="dark"]) .stepper .step.blocked .dot{border-color:var(--red);color:#b91c1c;background:rgba(239,68,68,0.07)}
html:not([data-theme="dark"]) .stepper .step .sl{font-size:10px;letter-spacing:0.04em;color:var(--muted);margin-top:6px;line-height:1.25}
html:not([data-theme="dark"]) .stepper .step.done .sl,html:not([data-theme="dark"]) .stepper .step.now .sl{color:var(--head-ink);font-weight:500}
html:not([data-theme="dark"]) .stepper .step.blocked .sl{color:#b91c1c;font-weight:500}
html:not([data-theme="dark"]) .stepper .step .dot svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.4}

/* ---------- queue rows (approvals) ---------- */
html:not([data-theme="dark"]) .qrow{display:flex;align-items:center;gap:14px;padding:13px 20px;border-bottom:1px solid var(--line)}
html:not([data-theme="dark"]) .qrow:last-child{border-bottom:none}
html:not([data-theme="dark"]) .qrow:hover{background:var(--zebra)}
html:not([data-theme="dark"]) .qrow .qmain{min-width:0;flex:1}
html:not([data-theme="dark"]) .qrow .qt{font-size:13px;font-weight:500;color:var(--head-ink)}
html:not([data-theme="dark"]) .qrow .qs{font-size:11.5px;color:var(--muted);margin-top:2px}
html:not([data-theme="dark"]) .qrow .qfig{font-family:"JetBrains Mono",monospace;font-size:12.5px;color:var(--head-ink);white-space:nowrap}
html:not([data-theme="dark"]) .qage{font-family:"JetBrains Mono",monospace;font-size:10.5px;padding:3px 8px;border-radius:999px;
  background:var(--surface-2);color:var(--muted);white-space:nowrap}
html:not([data-theme="dark"]) .qage.warn{background:rgba(245,158,11,0.12);color:#92400e}
html:not([data-theme="dark"]) .qage.bad{background:rgba(239,68,68,0.1);color:#b91c1c}

/* segmented filter */
html:not([data-theme="dark"]) .segf{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px}
html:not([data-theme="dark"]) .segf button{border:none;background:transparent;font-family:"Inter",sans-serif;font-size:12px;
  color:var(--muted);padding:6px 13px;border-radius:8px;cursor:pointer}
html:not([data-theme="dark"]) .segf button.on{background:var(--surface);color:var(--head-ink);font-weight:600;box-shadow:0 1px 2px rgba(28,22,54,0.08)}

/* exposure bars */
html:not([data-theme="dark"]) .xbar{height:8px;border-radius:999px;background:var(--track);overflow:hidden}
html:not([data-theme="dark"]) .xbar>span{display:block;height:100%;border-radius:999px;background:var(--acc)}
html:not([data-theme="dark"]) .xbar>span.warn{background:var(--amber)}
html:not([data-theme="dark"]) .xbar>span.bad{background:var(--red)}
html:not([data-theme="dark"]) .xrow{padding:11px 20px;border-bottom:1px solid var(--line)}
html:not([data-theme="dark"]) .xrow:last-child{border-bottom:none}
html:not([data-theme="dark"]) .xrow .xh{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;margin-bottom:7px}
html:not([data-theme="dark"]) .xrow .xh .nm{font-weight:500;color:var(--head-ink)}
html:not([data-theme="dark"]) .xrow .xh .fig{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--muted)}

/* drawer + assistant pick up light surfaces automatically via tokens;
   soften their radii to match */
html:not([data-theme="dark"]) .drawer{border-radius:14px 0 0 14px}

/* ---------- simplification pass (9 Jul 2026) ---------- */
/* headline stats — three plain numbers, no boxes */
html:not([data-theme="dark"]) .hrow{display:flex;gap:56px;flex-wrap:wrap;margin:10px 0 34px}
html:not([data-theme="dark"]) a.hstat{color:inherit;display:block}
html:not([data-theme="dark"]) a.hstat:hover .hn{color:var(--acc-ink)}
html:not([data-theme="dark"]) .hstat .hn{font-family:"Space Grotesk",sans-serif;font-size:38px;font-weight:600;
  color:var(--head-ink);line-height:1.05;letter-spacing:-0.01em}
html:not([data-theme="dark"]) .hstat .hn small{font-size:20px;font-weight:500;color:var(--muted)}
html:not([data-theme="dark"]) .hstat .hl{font-size:12.5px;color:var(--muted);margin-top:6px}

/* attention rows — whole row is the link; one figure, one age, a chevron */
html:not([data-theme="dark"]) a.qrow{color:inherit}
html:not([data-theme="dark"]) .qrow{padding:16px 22px}
html:not([data-theme="dark"]) .qrow .qt{font-size:13.5px}
html:not([data-theme="dark"]) .qrow .chev{color:var(--muted);font-size:18px;line-height:1;margin-left:2px}
html:not([data-theme="dark"]) a.qrow:hover .chev{color:var(--acc-ink)}

/* quiet footnote under a panel */
html:not([data-theme="dark"]) .footnote{font-size:12px;color:var(--muted);line-height:1.6;margin:14px 4px 0}

/* sidebar demo-data note */
html:not([data-theme="dark"]) .demo-note{margin-top:auto;font-family:"JetBrains Mono",monospace;font-size:10px;
  letter-spacing:0.08em;text-transform:uppercase;color:#A3A0B0;padding:0 12px 10px}
html:not([data-theme="dark"]) .demo-note + .who{margin-top:0}
/* generous page spacing */
html:not([data-theme="dark"]) .content{padding:36px 40px}
html:not([data-theme="dark"]) .pagehead{margin-bottom:8px}