/* ============================================================
   SOLAR VOICE — "THE EDITOR'S DESK" · THE PIONEER'S GOVERNANCE CONSOLE
   Re-skinned to the SPECTRUM design system (design-system-spectrum.md):
   warm porcelain canvas · A&H-Orange as the bridge accent · the
   five-axis programme spectrum (biz·health·family·career·genius + relief)
   · Cormorant Garamond (the A&H voice) / Gotham (UI) / Geist Mono (data)
   · the 5-orb bloom · gradient numbers · the "Impactful" watermark.

   The governance ROOM stays: compositors set the type & nominate proofs;
   the Pioneer judges them against readership response, runs a limited
   print run (A/B), and grants the IMPRIMATUR (locks the live edition).
   The IMPRIMATUR now reads in SOLAR — the North-Star clay — because
   go-live IS graduation-to-production.

   The 6-LENS validation key is mapped onto the programme spectrum:
     graph→biz blue · hybrid→genius purple · llm→deep career gold ·
     data→health green · fixed→neutral · care→family magenta.

   PIONEER ONLY — Antano & Harini. NOT a product surface.
   This is the SHARED design system: all 8 governance screens <link> it
   and compose the components below. Legacy Atelier tokens are kept as
   ALIASES so each screen's inline <style> re-skins for free.
   ============================================================ */

/* ---- Gotham (local woff2 — the everyday UI voice). Bundled alongside this CSS at
   frontend/governance/fonts/ so it resolves under firebase hosting (was project/fonts/). ---- */
@font-face{font-family:'Gotham';src:url('fonts/gothamlight.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Gotham';src:url('fonts/gothambook.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Gotham';src:url('fonts/gothambookitalic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Gotham';src:url('fonts/gothammedium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Gotham';src:url('fonts/gothambold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Gotham';src:url('fonts/gothamblack.woff2') format('woff2');font-weight:800;font-display:swap}

:root{
  /* ---- warm porcelain foundation (Spectrum §1, verbatim) ---- */
  --canvas:#F4F0E8; --canvas-2:#ECE5D8; --surface:#FCFAF5; --surface-2:#F8F3EA;
  --ink:#221D17; --ink-soft:#574E42; --ink-faint:#918774; --ink-ghost:#B7AE9C;
  --line:#E6DECF; --line-2:#EFE9DC; --hair:rgba(34,29,23,.07);
  /* A&H ORANGE — the bridge / North Star / primary / go-live */
  --solar:#F26522; --solar-deep:#B44B14; --solar-bright:#FF7C40;
  --solar-wash:rgba(242,101,34,.10); --solar-wash2:rgba(242,101,34,.18);
  /* the named programme spectrum (bright / deep) — five axes + relief */
  --biz:#00AEEF;    --biz-d:#0076A3;     /* A&H Blue       · Business        */
  --health:#39B54A; --health-d:#14732C;  /* CTD Green      · Health          */
  --family:#EC008C; --family-d:#A70063;  /* Legacy Magenta · Family / care    */
  --career:#FFC20E; --career-d:#9A7406;  /* Chrome (gold)  · Career           */
  --genius:#9A258F; --genius-d:#62005A;  /* B!G Purple     · Personal Genius  */
  --relief:#00AAAD; --relief-d:#006D6F;  /* S!RT Teal      · relief / running */
  --shadow-sm:0 1px 2px rgba(34,29,23,.05), 0 2px 7px rgba(34,29,23,.05);
  --shadow-md:0 1px 2px rgba(34,29,23,.05), 0 12px 34px -8px rgba(34,29,23,.15);
  --shadow-lg:0 2px 4px rgba(34,29,23,.06), 0 34px 80px -24px rgba(34,29,23,.34);
  --sans:'Gotham',ui-sans-serif,-apple-system,system-ui,sans-serif;
  --serif:'Cormorant Garamond',Georgia,serif;
  --mono:'Geist Mono',ui-monospace,Menlo,monospace;
  --script:'Pinyon Script','Allura',cursive;
  --spectrum:linear-gradient(90deg,#00AEEF,#00AAAD,#39B54A,#FFC20E,#F26522,#EC008C,#9A258F);
  /* per-surface accent — solar by default (governance screens are static) */
  --accent:#F26522; --accent-d:#B44B14;

  /* ============================================================
     LEGACY ATELIER TOKEN ALIASES → SPECTRUM
     so each screen's inline <style> (which still references these)
     re-skins automatically. Do not remove.
     ============================================================ */
  --paper:var(--canvas);        --paper-2:var(--canvas-2);
  --paper-card:var(--surface);  --paper-deep:var(--surface-2);
  --rule:var(--line);           --rule-soft:var(--line-2);
  --terra:var(--solar);         --terra-deep:var(--solar-deep);
  --sage:#8C8366;               --sage-deep:#6B6448;   /* warm taupe — neutral secondary */
  --shadow:rgba(34,29,23,.13);  --shadow-deep:rgba(34,29,23,.26); /* legacy shadow COLOURS */
  /* the imprimatur authority now = the North-Star clay (solar) */
  --seal:var(--solar-deep);     --seal-deep:#7A3209;   --seal-gold:#E6B800;
  /* the 6-lens key, mapped onto the programme spectrum */
  --lens-graph:var(--biz);      /* 🟦 traces to a real node/edge      */
  --lens-hybrid:var(--genius);  /* 🟪 grounded + on-voice render      */
  --lens-llm:#B6830F;           /* 🟨 rendered language, no fabrication (deep gold) */
  --lens-data:var(--health);    /* 🟩 the user's own data, not inflated */
  --lens-fixed:var(--ink-ghost);/* ⬜ static UI / user input          */
  --lens-care:var(--family);    /* 🟥 two-tier care holds             */
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ---- the five-orb spectrum bloom + grain, fixed behind everything (Spectrum §4) ---- */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  animation:drift 28s ease-in-out infinite alternate;
  background:
    radial-gradient(ellipse 56% 46% at 10% 14%, rgba(154,37,143,.10), transparent 55%),
    radial-gradient(ellipse 50% 44% at 92% 8%,  rgba(236,0,140,.075), transparent 60%),
    radial-gradient(ellipse 66% 54% at 6% 96%,  rgba(0,174,239,.085), transparent 60%),
    radial-gradient(ellipse 54% 46% at 95% 98%, rgba(242,101,34,.125), transparent 55%),
    radial-gradient(ellipse 48% 44% at 54% 52%, rgba(0,170,173,.07), transparent 70%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.38; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-2%,1.5%,0) scale(1.05)}}

::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-track{background:var(--canvas-2);}
::-webkit-scrollbar-thumb{background:#d8ceba; border:3px solid var(--canvas-2); border-radius:20px;}
::-webkit-scrollbar-thumb:hover{background:var(--accent);}
*{scrollbar-width:thin; scrollbar-color:#d8ceba var(--canvas-2);}
::selection{background:var(--solar); color:#fff;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
button:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

.kicker{
  font-family:var(--mono); font-weight:500; text-transform:uppercase;
  letter-spacing:0.2em; font-size:10px; color:var(--ink-faint);
}

/* footnote anchor numerals — the signature device, now in clay */
.fn{
  font-family:var(--mono); font-size:0.64em; font-weight:500; color:var(--solar-deep);
  vertical-align:super; line-height:0; text-decoration:none; padding:0 0.5px 0 1px;
  cursor:help; transition:color .2s;
}
.fn:hover{color:var(--solar);}

/* =========================================================
   PAGE FRAME — + the spectrum-ribbon signature (top-left)
   + the gradient-clipped "Impactful" watermark (bottom-right)
   ========================================================= */
.sheet{ position:relative; z-index:1; max-width:1640px; margin:0 auto; padding:34px clamp(16px,3vw,52px) 26px;}
.sheet::before{ /* spectrum-ribbon */
  content:""; position:absolute; top:0; left:clamp(16px,3vw,52px); width:168px; height:5px;
  border-radius:0 0 5px 5px; background:var(--spectrum); z-index:3;
}
.sheet::after{ /* the "Impactful" watermark — behind the content, above the canvas */
  content:"Impactful"; position:fixed; right:36px; bottom:0; z-index:-1; pointer-events:none;
  font-family:var(--script); font-size:138px; line-height:1; color:transparent;
  background:var(--spectrum); -webkit-background-clip:text; background-clip:text; opacity:.07;
}
@media(max-width:820px){ .sheet::after{ display:none; } }

/* =========================================================
   STAGGERED PAGE-LOAD (one orchestrated rise)
   ========================================================= */
@keyframes rise{ to{opacity:1; transform:none;} }
.lift{ opacity:0; transform:translateY(16px); animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards;}
.d1{animation-delay:.16s;} .d2{animation-delay:.26s;} .d3{animation-delay:.36s;}
.d4{animation-delay:.46s;} .d5{animation-delay:.56s;} .d6{animation-delay:.66s;}

/* =========================================================
   MASTHEAD — warm Spectrum register: a Cormorant logotype with
   a clay italic, Geist-Mono kickers, the spectrum sweep beneath.
   3-col grid: issue · logotype · dateline + PIONEER badge.
   ========================================================= */
.masthead{
  padding:14px 0 13px; margin-bottom:0;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:flex-end; gap:18px;
  opacity:0; transform:translateY(-14px);
  animation:rise .9s .05s cubic-bezier(.2,.7,.2,1) forwards;
}
.masthead .issue{ font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-faint); line-height:1.8;}
.masthead .issue b{color:var(--solar-deep); font-weight:500;}
.masthead .issue .vol{ color:var(--solar-deep); font-weight:500; letter-spacing:0.1em;}
.logotype{ text-align:center; line-height:0.96; position:relative;}
.logotype .lt-1{ font-family:var(--serif); font-weight:600; font-size:clamp(32px,4.6vw,52px); letter-spacing:-0.015em;}
.logotype .lt-1 em{ font-style:italic; color:var(--solar); font-weight:600;}
.logotype .lt-sub{ font-family:var(--mono); font-size:9px; letter-spacing:0.32em; text-transform:uppercase; color:var(--ink-faint); margin-top:8px;}
/* the warm mark: clay dots flanking the logotype */
.logotype .lt-1::before, .logotype .lt-1::after{
  content:"·"; color:var(--solar); font-style:normal; font-weight:600;
  margin:0 .3em; vertical-align:0.04em; opacity:.85;
}
.masthead .dateline{ font-family:var(--mono); font-size:10px; color:var(--ink-faint); text-align:right; line-height:1.85;}
.masthead .dateline b{color:var(--ink-soft); font-weight:500;}
/* the PIONEER credential badge — solar clay, the authority mark */
.masthead .dateline .pio{
  display:inline-block; margin-top:6px; font-family:var(--sans); font-weight:700; font-size:8.5px;
  letter-spacing:0.14em; color:#fff; background:var(--solar); padding:4px 9px; border-radius:7px;
  box-shadow:0 4px 12px -4px var(--solar-wash2);
}
/* the spectrum sweep under the masthead (was the letterpress double-rule) */
.double-rule{ border:0; height:3px; margin:9px 0 0; border-radius:3px; background:var(--spectrum); opacity:.9;}

/* =========================================================
   GNAV — the shared 8-item governance navigation, as warm tabs.
   Each ROOM's active tab glows its OWN spectrum hue (nth-child)
   so the nav, across the set, IS the spectrum. Flip .on per screen.
   ========================================================= */
.gnav{
  margin-top:15px; display:flex; flex-wrap:wrap; align-items:stretch; gap:5px;
  border-bottom:1px solid var(--line); padding-bottom:0;
  opacity:0; transform:translateY(-8px); animation:rise .9s .12s cubic-bezier(.2,.7,.2,1) forwards;
}
.gnav a{
  font-family:var(--sans); font-weight:700; font-size:10px; letter-spacing:0.11em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none; padding:10px clamp(9px,1.05vw,16px);
  border-radius:11px 11px 0 0; position:relative; transition:all .16s;
  display:flex; align-items:center; gap:7px; line-height:1; border:1px solid transparent; border-bottom:0;
}
.gnav a .gn-no{ font-family:var(--mono); font-size:9px; font-weight:500; color:var(--ink-ghost); letter-spacing:0; }
.gnav a:hover{ background:var(--surface-2); color:var(--ink); }
.gnav a:hover .gn-no{ color:var(--accent); }
/* active = a solid pill in this room's spectrum hue */
.gnav a.on{ color:#fff; }
.gnav a.on .gn-no{ color:rgba(255,255,255,0.72); }
.gnav a:nth-child(1).on{ background:#F26522; box-shadow:0 7px 16px -7px rgba(242,101,34,.55); }   /* Desk        · solar  */
.gnav a:nth-child(2).on{ background:#9A258F; box-shadow:0 7px 16px -7px rgba(154,37,143,.5); }     /* Credentials · genius */
.gnav a:nth-child(3).on{ background:#0076A3; box-shadow:0 7px 16px -7px rgba(0,118,163,.5); }      /* Proof Spike · biz    */
.gnav a:nth-child(4).on{ background:#006D6F; box-shadow:0 7px 16px -7px rgba(0,109,111,.5); }      /* On the Stone· relief */
.gnav a:nth-child(5).on{ background:#14732C; box-shadow:0 7px 16px -7px rgba(20,115,44,.5); }      /* Readership  · health */
.gnav a:nth-child(6).on{ background:#9A7406; box-shadow:0 7px 16px -7px rgba(154,116,6,.5); }      /* Print Run   · career */
.gnav a:nth-child(8).on{ background:#A70063; box-shadow:0 7px 16px -7px rgba(167,0,99,.5); }       /* Stock&Plates· family */
/* the imprimatur item carries the solar clay even at rest — and wins when active */
.gnav a[data-seal]:not(.on){ color:var(--solar-deep); }
.gnav a[data-seal]:not(.on) .gn-no{ color:var(--solar); }
.gnav a[data-seal].on{ background:var(--solar-deep); box-shadow:0 7px 16px -7px rgba(180,75,20,.6); }
.gnav .gn-spacer{ flex:1; }
.gnav .gn-credo{
  align-self:center; color:var(--ink-faint); font-weight:600;
  font-size:8.5px; letter-spacing:0.16em; font-family:var(--sans); pointer-events:none; padding:0 4px;
}
@media(max-width:980px){ .gnav .gn-credo, .gnav .gn-spacer{ display:none; } }

/* =========================================================
   SECTION HEADING + the colophon corner label
   ========================================================= */
.sec-head{ display:flex; align-items:baseline; gap:9px; margin:0 0 12px;}
.sec-head .num{ font-family:var(--mono); font-weight:500; font-size:11px; color:var(--accent-d); letter-spacing:0.04em;}
.sec-head h3{ margin:0; font-family:var(--sans); font-weight:700; text-transform:uppercase; letter-spacing:0.13em; font-size:11px; color:var(--ink);}
.sec-head .sub{ font-family:var(--serif); font-style:italic; font-size:14px; color:var(--ink-faint);}
.sec-head .flag{ flex:1; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--line),transparent); transform:translateY(-2px);}

.tag-label{
  position:absolute; top:-8px; left:16px; background:var(--surface);
  padding:0 8px; font-family:var(--mono); font-weight:500; font-size:9px;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-faint); border-radius:6px;
}
/* tag-label.seal is a flat CAPTION, not a stamp — neutralize the round .seal disc
   geometry it otherwise inherits (same collision family as .advisory.seal). */
.tag-label.seal{ color:var(--solar-deep); position:absolute; display:inline-block; width:auto; height:auto;
  flex:initial; border-radius:6px; background:var(--surface); box-shadow:none; text-align:left; }
.tag-label.seal::before{ content:none; }

/* =========================================================
   PANEL — the workhorse card: warm surface, soft shadow,
   18px radius, a 3px spectrum top-accent (set --c per panel).
   ========================================================= */
.panel{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-sm); --c:var(--accent);}
.panel::before{ content:""; position:absolute; left:0; top:0; right:0; height:3px; background:var(--c); opacity:.9; border-radius:18px 18px 0 0;}
.panel.pad{ padding:21px 19px 18px; }
.panel.seal-edge{ --c:var(--solar); }
.panel.seal-edge::before{ background:var(--solar); }
.panel-h{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:13px; }
.panel-h .ph-t{ font-family:var(--serif); font-weight:600; font-size:26px; line-height:1.04; letter-spacing:-0.015em; }
.panel-h .ph-t em{ font-style:italic; color:var(--accent-d); }
.panel-h .ph-deck{ font-family:var(--serif); font-style:italic; font-size:14px; color:var(--ink-faint); max-width:54ch; }

/* =========================================================
   LENS LEGEND — the programme-spectrum key (the 6 lenses)
   ========================================================= */
.legend{
  margin-top:15px; display:flex; flex-wrap:wrap; align-items:center; gap:7px 16px;
  border-bottom:1px solid var(--line); padding-bottom:14px;
}
.legend .lg-h{ font-family:var(--mono); font-size:9px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-faint);}
.lens-chip{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10.5px; color:var(--ink-soft);}
.sw{ width:11px; height:11px; border-radius:4px; flex:0 0 auto; box-shadow:0 1px 3px -1px rgba(34,29,23,.3);}
.sw.graph{background:var(--lens-graph);} .sw.llm{background:var(--lens-llm);}
.sw.hybrid{background:var(--lens-hybrid);} .sw.data{background:var(--lens-data);}
.sw.fixed{background:var(--lens-fixed);} .sw.care{background:var(--lens-care);}
.lens-chip b{ color:var(--ink); font-weight:700; letter-spacing:0.02em;}
.legend .lg-note{ font-family:var(--serif); font-style:italic; font-size:13px; color:var(--ink-faint); margin-left:auto;}

/* =========================================================
   ADVISORY BANNER — the "score is a lens, humans pick" rule
   ========================================================= */
.advisory{
  margin-top:16px; display:flex; align-items:flex-start; gap:12px; border-radius:13px;
  background:var(--surface-2); border:1px solid var(--line); border-left:3px solid var(--accent);
  padding:12px 16px; font-family:var(--sans); font-size:12.5px; color:var(--ink-soft); line-height:1.5;
}
.advisory .ad-mark{ font-family:var(--sans); font-weight:700; font-size:8.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent-d); white-space:nowrap; padding-top:2px; }
.advisory b{ color:var(--ink); font-weight:700; }
.advisory em, .advisory i{ font-family:var(--serif); font-size:1.12em; color:var(--accent-d); font-style:italic; }
/* seal = clay TINT modifier — must neutralize the .seal STAMP geometry
   (round 108px wax disc w/ gradient + ::before ring + centred column) */
.advisory.seal{ border-left-color:var(--solar); width:auto; height:auto; flex:initial; position:static; border-radius:13px;
  background:var(--solar-wash); flex-direction:row; align-items:flex-start; justify-content:flex-start; text-align:left; }
.advisory.seal::before{ content:none; }
.advisory.seal .ad-mark{ color:var(--solar-deep); }

/* =========================================================
   VERSION CHIPS — promptVersionId / corpusVersionId + the PAIR
   ========================================================= */
.vchip{
  display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-weight:500;
  font-size:10.5px; letter-spacing:0.01em; padding:3px 9px; border:1px solid var(--line); border-radius:8px;
  background:var(--surface); color:var(--ink); white-space:nowrap; line-height:1.3;
}
.vchip .vk{ font-family:var(--sans); font-size:7.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); }
.vchip.prompt{ border-color:var(--genius); } .vchip.prompt .vk{ color:var(--genius); }
.vchip.corpus{ border-color:var(--biz-d); } .vchip.corpus .vk{ color:var(--biz-d); }
.vchip.live{ border-color:var(--solar); color:var(--solar-deep); background:var(--solar-wash); }
.vchip.live .vk{ color:var(--solar-deep); }
/* the pinned PAIR — prompt × corpus shipped together */
.pair{
  display:inline-flex; align-items:stretch; font-family:var(--mono); font-weight:500; font-size:10.5px;
  border:1px solid var(--ink-soft); border-radius:9px; overflow:hidden; background:var(--surface); line-height:1.3; white-space:nowrap;
}
.pair .pp{ padding:4px 9px; display:flex; align-items:center; gap:5px; }
.pair .pp.prompt{ color:var(--genius); }
.pair .pp.corpus{ color:var(--biz-d); }
.pair .px{ display:flex; align-items:center; padding:0 7px; background:var(--ink); color:#fff; font-family:var(--serif); font-style:italic; font-size:13px; }
.pair .vk{ font-family:var(--sans); font-size:7.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); }
.pair.live{ border-color:var(--solar); }
.pair.live .px{ background:var(--solar); }
.pair.live .pp{ color:var(--solar-deep); }

/* =========================================================
   STATUS PILLS — candidate / experiment / edition states
   live→solar · nominated→genius · running→relief(teal) ·
   ineligible→family · superseded→neutral · draft→career(gold)
   ========================================================= */
.pill{
  display:inline-flex; align-items:center; gap:5px; font-family:var(--sans); font-weight:700;
  font-size:8.5px; letter-spacing:0.12em; text-transform:uppercase; padding:3px 9px; border-radius:20px;
  border:1px solid; line-height:1.3; white-space:nowrap;
}
.pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 auto; }
.pill.live{ color:var(--solar-deep); border-color:var(--solar); background:var(--solar-wash); }
.pill.nominated{ color:var(--genius); border-color:var(--genius); background:rgba(154,37,143,0.08); }
.pill.running{ color:var(--relief-d); border-color:var(--relief); background:rgba(0,170,173,0.1); }
.pill.running::before{ animation:pulse 1.6s ease-in-out infinite; }
.pill.ineligible{ color:var(--family-d); border-color:var(--family); background:rgba(236,0,140,0.08); }
.pill.ineligible::before{ border-radius:0; transform:rotate(45deg); }
.pill.superseded{ color:var(--ink-faint); border-color:var(--line); background:transparent; }
.pill.superseded::before{ background:var(--ink-faint); }
.pill.draft{ color:var(--career-d); border-color:var(--career); background:rgba(255,194,14,0.12); }
.pill.draft::before{ background:none; border:1.5px solid var(--career-d); width:5px; height:5px; }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.3;} }

/* =========================================================
   THE 2-D CONTROL SPACE — prompt-setting (x) × corpus-stock (y).
   A candidate is a point; the live pair is a struck SOLAR seal.
   ========================================================= */
.grid2d{
  position:relative; background:var(--surface); border:1px solid var(--line); border-radius:14px;
  aspect-ratio:1 / 0.78; min-height:320px; box-shadow:inset 0 1px 4px rgba(34,29,23,.04);
  background-image:
    linear-gradient(var(--line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size: 11.111% 12.5%, 11.111% 12.5%;
  background-position:-1px -1px;
  margin:6px 0 4px; overflow:hidden;
}
.grid2d .ax-x, .grid2d .ax-y{ position:absolute; font-family:var(--mono); font-size:8.5px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-faint); }
.grid2d .ax-x{ left:50%; bottom:-22px; transform:translateX(-50%); }
.grid2d .ax-y{ left:-12px; top:50%; transform:rotate(-90deg) translateX(50%); transform-origin:left center; white-space:nowrap; }
.grid2d .ax-x b{ color:var(--genius); } .grid2d .ax-y b{ color:var(--biz-d); }
.grid2d .g2-note{ position:absolute; right:9px; top:9px; font-family:var(--mono); font-size:8.5px; color:var(--ink-faint); text-align:right; line-height:1.55; }
.pt{
  position:absolute; width:15px; height:15px; transform:translate(-50%,50%); border-radius:5px;
  border:1.5px solid var(--ink-soft); background:var(--surface); cursor:pointer; transition:all .16s;
  box-shadow:0 2px 6px -2px rgba(34,29,23,.4); z-index:2;
}
.pt::after{
  content:attr(data-label); position:absolute; left:50%; bottom:calc(100% + 6px); transform:translateX(-50%);
  font-family:var(--mono); font-size:8.5px; font-weight:500; color:var(--ink); white-space:nowrap;
  background:var(--surface); padding:2px 6px; border:1px solid var(--line); border-radius:6px; box-shadow:var(--shadow-sm); opacity:0; transition:opacity .16s; pointer-events:none;
}
.pt:hover{ transform:translate(-50%,50%) scale(1.25); border-color:var(--accent); z-index:5; }
.pt:hover::after{ opacity:1; }
.pt.nominated{ background:var(--genius); border-color:var(--genius); }
.pt.running{ background:var(--relief); border-color:var(--relief); border-radius:50%; }
.pt.ineligible{ background:var(--family); border-color:var(--family); transform:translate(-50%,50%) rotate(45deg); border-radius:2px; }
.pt.ineligible:hover{ transform:translate(-50%,50%) rotate(45deg) scale(1.25); }
.pt.superseded{ background:transparent; border-style:dashed; border-color:var(--ink-ghost); }
/* the live pair — a struck solar wax seal, always on top */
.pt-live{
  position:absolute; width:27px; height:27px; transform:translate(-50%,50%); z-index:6;
  border-radius:50%; background:radial-gradient(circle at 38% 30%, var(--solar-bright), var(--solar) 52%, var(--solar-deep));
  border:1.5px solid var(--solar-deep);
  box-shadow:0 4px 12px -2px rgba(242,101,34,0.6), inset 0 1px 2px rgba(255,255,255,0.3);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.pt-live::before{ content:"✦"; font-family:var(--serif); color:#fff; font-size:14px; line-height:1; }
.pt-live::after{
  content:attr(data-label); position:absolute; left:50%; top:calc(100% + 7px); transform:translateX(-50%);
  font-family:var(--sans); font-size:8px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--solar-deep); white-space:nowrap; background:var(--surface); padding:2px 7px; border:1px solid var(--solar); border-radius:6px;
}
.g2-link{ position:absolute; height:1.5px; background:repeating-linear-gradient(90deg,var(--ink-ghost) 0 4px,transparent 4px 8px); transform-origin:left center; opacity:.5; z-index:1; pointer-events:none; }

/* =========================================================
   CANDIDATE CARD — a nominated proof on the board
   ========================================================= */
.cand{
  position:relative; background:var(--surface); border:1px solid var(--line); border-radius:15px;
  padding:15px 16px 14px; transition:all .18s; box-shadow:var(--shadow-sm);
}
.cand:hover{ border-color:var(--ink-ghost); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.cand.ineligible{ border-color:var(--family); border-left-width:3px; }
.cand.live{ border-color:var(--solar); border-left-width:3px; background:var(--solar-wash); }
.cand-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:8px; }
.cand-title{ font-family:var(--serif); font-weight:600; font-size:19px; line-height:1.12; color:var(--ink); letter-spacing:-0.01em; }
.cand-title em{ font-style:italic; color:var(--accent-d); }
.cand-by{ font-family:var(--mono); font-size:9px; color:var(--ink-faint); margin-top:3px; }
.cand-by b{ color:var(--ink-soft); font-weight:500; }
.cand-pair{ margin:9px 0; }
.cand-metrics{ display:flex; gap:14px; flex-wrap:wrap; font-family:var(--mono); font-size:10px; color:var(--ink-soft); border-top:1px dotted var(--line); padding-top:10px; margin-top:10px; }
.cand-metrics .m b{ display:block; font-family:var(--serif); font-style:italic; font-size:20px; color:var(--ink); font-weight:600; line-height:1; margin-top:2px; }
.cand-metrics .m span{ font-size:8px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); font-family:var(--sans); font-weight:700; }
.cand-metrics .m.lead b{ color:var(--genius); }
.cand-metrics .m.lag b{ color:var(--health-d); }
.cand-foot{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:12px; }

/* =========================================================
   TELEMETRY PRIMITIVES — bars · sparks · scatter
   ========================================================= */
.bar{ display:flex; align-items:center; gap:9px; margin:7px 0; font-family:var(--mono); font-size:10px; }
.bar .bar-lbl{ flex:0 0 128px; color:var(--ink-soft); font-family:var(--sans); font-size:9.5px; font-weight:600; letter-spacing:0.01em; }
.bar .bar-track{ flex:1; height:13px; background:var(--surface-2); border:1px solid var(--line); border-radius:20px; position:relative; overflow:hidden; }
.bar .bar-fill{ position:absolute; left:0; top:0; bottom:0; border-radius:20px; background:var(--ink-ghost); transition:width .5s cubic-bezier(.2,.7,.2,1); }
.bar .bar-fill.lead{ background:linear-gradient(90deg,var(--genius),var(--genius-d)); }
.bar .bar-fill.lag{ background:linear-gradient(90deg,var(--health),var(--health-d)); }
.bar .bar-fill.warn{ background:linear-gradient(90deg,var(--family),var(--family-d)); }
.bar .bar-val{ flex:0 0 auto; color:var(--ink); font-weight:500; min-width:44px; text-align:right; }
.bar.paired .bar-track{ height:9px; }

.spark{ display:flex; align-items:flex-end; gap:4px; height:46px; }
.spark .sbar{ flex:1; background:var(--line); border-radius:3px 3px 0 0; position:relative; transition:background .2s; min-height:3px; }
.spark .sbar.lead{ background:var(--genius); }
.spark .sbar.lag{ background:var(--health); }
.spark .sbar:hover{ background:var(--accent); }
.spark .sbar.cur{ background:var(--accent); }
.spark-x{ display:flex; gap:4px; margin-top:5px; }
.spark-x span{ flex:1; text-align:center; font-family:var(--mono); font-size:7.5px; color:var(--ink-faint); }

/* the calibration scatter — fidelity (x, leading) vs outcome (y, lagging) */
.scatter{
  position:relative; background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  aspect-ratio:1 / 0.72; min-height:240px; box-shadow:inset 0 1px 4px rgba(34,29,23,.04);
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:10% 12.5%,10% 12.5%;
}
.scatter .diag{ position:absolute; inset:0; pointer-events:none; }
.scatter .diag::before{ content:""; position:absolute; left:0; bottom:0; width:141.4%; height:1.5px; background:repeating-linear-gradient(90deg,var(--ink-ghost) 0 5px,transparent 5px 10px); transform:rotate(-45deg); transform-origin:left bottom; opacity:.55; }
.scatter .sc-ax{ position:absolute; font-family:var(--mono); font-size:8px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-faint); }
.scatter .sc-ax.x{ left:50%; bottom:-20px; transform:translateX(-50%); }
.scatter .sc-ax.x b{ color:var(--genius); }
.scatter .sc-ax.y{ left:-10px; top:50%; transform:rotate(-90deg) translateX(50%); transform-origin:left center; white-space:nowrap; }
.scatter .sc-ax.y b{ color:var(--health-d); }
.scatter .sc-note{ position:absolute; right:9px; top:8px; font-family:var(--serif); font-style:italic; font-size:12px; color:var(--ink-faint); }
.scatter .dot{
  position:absolute; width:12px; height:12px; border-radius:50%; transform:translate(-50%,50%);
  background:var(--ink-soft); border:1.5px solid var(--surface); cursor:pointer; transition:transform .16s; z-index:2;
  box-shadow:0 2px 5px -1px rgba(34,29,23,.4);
}
.scatter .dot:hover{ transform:translate(-50%,50%) scale(1.4); z-index:5; }
.scatter .dot::after{ content:attr(data-label); position:absolute; left:50%; bottom:calc(100% + 4px); transform:translateX(-50%); font-family:var(--mono); font-size:8px; color:var(--ink); white-space:nowrap; opacity:0; transition:opacity .16s; }
.scatter .dot:hover::after{ opacity:1; }
.scatter .dot.live{ background:var(--solar); border-color:#fff; width:15px; height:15px; box-shadow:0 3px 9px -1px rgba(242,101,34,.6); }
.scatter .dot.diverge{ background:var(--family); }

/* =========================================================
   THE INVARIANT FLOOR FLAG — a FLAG, not a ranker.
   clear→health(green) · tripped→family(magenta), release-blocker
   ========================================================= */
.floor-flag{
  border:1px solid var(--line); border-radius:13px; background:var(--surface); padding:12px 14px; position:relative;
}
.floor-flag.tripped{ border-color:var(--family); border-left:3px solid var(--family); background:rgba(236,0,140,0.05); }
.floor-flag.clear{ border-left:3px solid var(--health); }
.floor-flag .ff-h{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:10px; }
.floor-flag .ff-h .ff-t{ font-family:var(--sans); font-size:9px; font-weight:700; letter-spacing:0.13em; text-transform:uppercase; color:var(--ink); }
.floor-flag .ff-h .ff-verdict{ font-family:var(--mono); font-size:10px; font-weight:500; }
.floor-flag.clear .ff-verdict{ color:var(--health-d); }
.floor-flag.tripped .ff-verdict{ color:var(--family-d); }
.ff-checks{ display:flex; flex-wrap:wrap; gap:6px; }
.ff-check{
  display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:9.5px; border-radius:8px;
  border:1px solid var(--line-2); padding:4px 8px; color:var(--ink-soft); background:var(--surface-2);
}
.ff-check .ic{ font-family:var(--serif); font-size:12px; line-height:1; }
.ff-check.ok{ border-color:var(--health); } .ff-check.ok .ic{ color:var(--health-d); }
.ff-check.fail{ border-color:var(--family); color:var(--family-d); background:rgba(236,0,140,0.06); } .ff-check.fail .ic{ color:var(--family-d); }
.ff-check b{ color:var(--ink); font-weight:700; }
.ff-note{ font-family:var(--serif); font-style:italic; font-size:13px; color:var(--ink-faint); margin-top:10px; line-height:1.45; }

/* =========================================================
   THE IMPRIMATUR SEAL / STAMP — go-live mark, in SOLAR wax
   ========================================================= */
.seal{
  position:relative; width:108px; height:108px; flex:0 0 auto; border-radius:50%;
  background:radial-gradient(circle at 38% 30%, var(--solar-bright) 0%, var(--solar) 46%, var(--solar-deep) 100%);
  box-shadow:0 10px 26px -8px rgba(242,101,34,0.6), inset 0 2px 6px rgba(255,255,255,0.28), inset 0 -5px 10px rgba(120,40,8,0.32);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#fff;
}
.seal::before{ content:""; position:absolute; inset:8px; border-radius:50%; border:1px dashed rgba(255,244,228,0.6); }
.seal .seal-top{ font-family:var(--sans); font-size:7px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,244,228,0.92); }
.seal .seal-word{ font-family:var(--serif); font-style:italic; font-weight:600; font-size:19px; line-height:1; margin:3px 0; color:#fff; }
.seal .seal-glyph{ font-family:var(--serif); font-size:21px; color:#fff; line-height:1; }
.seal .seal-sub{ font-family:var(--mono); font-size:7px; color:rgba(255,244,228,0.78); margin-top:3px; }
.seal-sm{
  display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, var(--solar-bright), var(--solar) 58%, var(--solar-deep));
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.35); flex:0 0 auto;
}
.seal-sm::before{ content:"✦"; font-family:var(--serif); font-size:9px; color:#fff; line-height:1; }
.live-mark{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--sans); font-weight:700; font-size:8.5px;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--solar-deep); border:1px solid var(--solar);
  padding:4px 9px; border-radius:20px; background:var(--solar-wash);
}

/* =========================================================
   AUDIT-LOG ROW — who · when · the sim + telemetry that justified
   ========================================================= */
.audit{ display:flex; flex-direction:column; gap:0; font-family:var(--mono); }
.audit .au{
  display:grid; grid-template-columns:18px 116px 1fr auto; gap:11px; align-items:baseline;
  padding:10px 6px; border-bottom:1px dotted var(--line); font-size:10.5px; color:var(--ink-soft);
}
.audit .au:last-child{ border-bottom:0; }
.audit .au .au-when{ color:var(--ink-faint); font-size:9.5px; }
.audit .au .au-what b{ color:var(--ink); font-weight:500; }
.audit .au .au-what .who{ color:var(--solar-deep); font-weight:700; }
.audit .au .au-just{ font-size:9px; color:var(--ink-faint); }
.audit .au .au-just b{ color:var(--ink-soft); font-weight:500; }
.audit .au.current{ background:var(--solar-wash); border-radius:8px; }

/* =========================================================
   COMPATIBILITY GUARD — prompt required fields ⊆ corpus interface
   ========================================================= */
.guard{
  position:relative; border:1px solid var(--line); border-radius:13px; background:var(--surface); padding:14px 16px;
}
.guard.guard-ok{ border-left:3px solid var(--health); }
.guard.guard-block{ border-left:3px solid var(--family); background:rgba(236,0,140,0.04); }
.guard-h{ display:flex; align-items:center; gap:10px; margin-bottom:11px; }
.guard-h .g-icon{ font-family:var(--serif); font-size:21px; line-height:1; }
.guard.guard-ok .g-icon{ color:var(--health-d); }
.guard.guard-block .g-icon{ color:var(--family-d); }
.guard-h .g-verdict{ font-family:var(--sans); font-weight:700; font-size:11px; letter-spacing:0.09em; text-transform:uppercase; }
.guard.guard-ok .g-verdict{ color:var(--health-d); }
.guard.guard-block .g-verdict{ color:var(--family-d); }
.guard-h .g-pair{ margin-left:auto; }
.guard-body{ font-family:var(--sans); font-size:12.5px; color:var(--ink-soft); line-height:1.5; }
.guard-fields{ list-style:none; margin:11px 0 0; padding:0; font-family:var(--mono); font-size:10px; }
.guard-fields li{ display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px dotted var(--line-2); }
.guard-fields li:last-child{ border-bottom:0; }
.guard-fields li .fld-ic{ font-family:var(--serif); font-size:12px; flex:0 0 auto; }
.guard-fields li.ok .fld-ic{ color:var(--health-d); }
.guard-fields li.miss .fld-ic{ color:var(--family-d); }
.guard-fields li.miss{ color:var(--family-d); }
.guard-fields li code{ font-family:var(--mono); color:var(--ink); font-weight:500; }
.guard-fields li.miss code{ color:var(--family-d); }
.guard-fields li .fld-src{ margin-left:auto; color:var(--ink-faint); font-size:9px; }

/* =========================================================
   DIFF — prompt-diff / corpus-diff (add→health · del→family)
   ========================================================= */
.diff{ font-family:var(--mono); font-size:10px; line-height:1.55; border:1px solid var(--line-2); border-radius:10px; overflow:hidden; background:var(--surface); }
.diff .dl{ padding:3px 10px; white-space:pre-wrap; }
.diff .diff-del{ background:rgba(236,0,140,0.09); color:var(--family-d); text-decoration:line-through; }
.diff .diff-add{ background:rgba(57,181,74,0.13); color:var(--health-d); }
.diff .ctx{ color:var(--ink-faint); }
.diff .delta{ margin:0; border-top:1px dotted var(--line); padding:7px 10px; color:var(--ink-soft); }
.diff .delta b.up{ color:var(--health-d); } .diff .delta b.dn{ color:var(--family-d); }

/* =========================================================
   TABLE — the cross-operator board / sortable registries
   ========================================================= */
.tbl{ width:100%; border-collapse:collapse; font-family:var(--mono); font-size:11px; }
.tbl thead th{
  font-family:var(--sans); font-size:8.5px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ink-faint); text-align:left; padding:10px 11px; border-bottom:2px solid var(--ink-soft); white-space:nowrap;
  cursor:pointer; user-select:none;
}
.tbl thead th.sortable:hover{ color:var(--accent); }
.tbl thead th .sort-ar{ font-family:var(--serif); opacity:.4; }
.tbl thead th.asc .sort-ar, .tbl thead th.desc .sort-ar{ opacity:1; color:var(--accent); }
.tbl thead th.num, .tbl tbody td.num{ text-align:right; }
.tbl tbody td{ padding:11px; border-bottom:1px solid var(--line-2); color:var(--ink-soft); vertical-align:middle; }
.tbl tbody tr{ transition:background .14s; }
.tbl tbody tr:hover{ background:var(--surface-2); }
.tbl tbody tr.ineligible-row td:first-child{ box-shadow:inset 3px 0 0 var(--family); }
.tbl tbody tr.live-row{ background:var(--solar-wash); }
.tbl tbody tr.live-row td:first-child{ box-shadow:inset 3px 0 0 var(--solar); }
.tbl tbody td b{ color:var(--ink); font-weight:500; }
.tbl tbody td .cell-sub{ display:block; font-family:var(--sans); font-size:8.5px; color:var(--ink-faint); letter-spacing:0.03em; margin-top:2px; }

/* =========================================================
   AT-A-GLANCE TILES — onward links on the Desk
   ========================================================= */
.tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; }
.tile{
  position:relative; display:block; text-decoration:none; background:var(--surface);
  border:1px solid var(--line); border-radius:16px; padding:17px 17px 15px; transition:all .18s; overflow:hidden; box-shadow:var(--shadow-sm);
}
.tile::after{ content:"→"; position:absolute; right:14px; bottom:12px; font-family:var(--serif); color:var(--accent); font-size:17px; transition:transform .2s; }
.tile:hover{ border-color:var(--ink-ghost); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.tile:hover::after{ transform:translateX(4px); }
.tile .tl-k{ font-family:var(--mono); font-size:8.5px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-faint); }
.tile .tl-n{ font-family:var(--serif); font-weight:600; font-size:42px; line-height:1; margin:8px 0 5px; color:var(--ink); letter-spacing:-0.02em; }
.tile .tl-n em{ font-style:italic; color:var(--accent-d); font-weight:600; font-size:28px; }
.tile .tl-d{ font-family:var(--serif); font-size:14px; color:var(--ink-soft); line-height:1.4; max-width:26ch; }
.tile.seal-tile{ border-left:3px solid var(--solar); }
.tile.seal-tile .tl-n{ color:var(--solar-deep); }
.tile.seal-tile::after{ color:var(--solar); }
.tile.alarm{ border-left:3px solid var(--family); }
.tile.alarm .tl-n{ color:var(--family-d); }

/* =========================================================
   FORMS — fields · ranges · toggles (warm Spectrum register)
   ========================================================= */
.field{ margin-bottom:14px; }
.field > label{ font-family:var(--sans); font-size:8.5px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-faint); display:block; margin-bottom:7px; }
.field > label .hint{ font-weight:400; text-transform:none; letter-spacing:0; color:var(--ink-faint); font-family:var(--serif); font-style:italic; font-size:13px; }
.field input[type=text], .field input[type=number], .field input:not([type]), .field select, .field textarea{
  width:100%; font-family:var(--mono); font-size:12px; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:10px; padding:10px 12px;
}
.field textarea{ resize:vertical; line-height:1.5; min-height:70px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.field-row{ display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.field-row .field{ flex:1; margin-bottom:0; min-width:120px; }

/* range */
.rng{ -webkit-appearance:none; appearance:none; width:100%; height:5px; border-radius:5px; background:var(--line); cursor:pointer; outline-offset:5px; }
.rng::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:17px; height:17px; border-radius:50%; background:var(--accent); border:2px solid var(--surface); box-shadow:0 2px 7px -1px var(--solar-wash2); cursor:grab; }
.rng::-webkit-slider-thumb:active{ cursor:grabbing; }
.rng::-moz-range-thumb{ width:17px; height:17px; border-radius:50%; background:var(--accent); border:2px solid var(--surface); cursor:grab; }
.rng-row{ display:flex; align-items:center; gap:12px; }
.rng-row .rng-val{ font-family:var(--serif); font-style:italic; font-weight:600; font-size:24px; color:var(--accent-d); flex:0 0 auto; min-width:54px; text-align:right; }
.rng-ticks{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:8px; color:var(--ink-faint); margin-top:5px; }

/* toggle */
.toggle{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; font-family:var(--mono); font-size:11px; color:var(--ink-soft); user-select:none; }
.toggle input{ position:absolute; opacity:0; pointer-events:none; }
.toggle .tg{ width:40px; height:21px; border-radius:21px; background:var(--canvas-2); border:1px solid var(--line); position:relative; transition:all .18s; flex:0 0 auto; }
.toggle .tg::after{ content:""; position:absolute; top:1px; left:1px; width:17px; height:17px; border-radius:50%; background:var(--ink-ghost); transition:all .18s; }
.toggle input:checked + .tg{ background:var(--relief); border-color:var(--relief-d); }
.toggle input:checked + .tg::after{ left:20px; background:#fff; }
.toggle input:focus-visible + .tg{ outline:2px solid var(--accent); outline-offset:2px; }
.toggle.seal input:checked + .tg{ background:var(--solar); border-color:var(--solar-deep); }

/* labelled percent dial (print-run / experiment) */
.pct-dial{ display:flex; align-items:baseline; gap:8px; }
.pct-dial .pct-n{ font-family:var(--serif); font-weight:600; font-size:46px; line-height:1; color:var(--accent-d); letter-spacing:-0.02em; }
.pct-dial .pct-u{ font-family:var(--mono); font-size:12px; color:var(--ink-faint); }

/* =========================================================
   BUTTONS — soft Spectrum: outline fills on hover; primary = solar
   ========================================================= */
.btn{
  font-family:var(--sans); font-weight:700; font-size:10.5px; letter-spacing:0.09em; text-transform:uppercase;
  background:var(--surface); border:1px solid var(--ink-soft); border-radius:10px; color:var(--ink); padding:10px 16px; cursor:pointer;
  transition:all .16s; display:inline-flex; align-items:center; gap:7px; line-height:1;
}
.btn:hover{ background:var(--ink); color:#fff; border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn:active{ transform:translateY(0); box-shadow:var(--shadow-sm); }
.btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }
.btn.sm{ font-size:9px; padding:7px 11px; }
/* the imprimatur button — grant / to press */
.btn-primary{
  font-family:var(--sans); font-weight:700; font-size:10.5px; letter-spacing:0.09em; text-transform:uppercase;
  background:linear-gradient(135deg,var(--solar),var(--solar-deep)); color:#fff; border:0; border-radius:10px; padding:12px 19px; cursor:pointer;
  box-shadow:0 8px 20px -6px var(--solar-wash2); transition:all .16s; display:inline-flex; align-items:center; gap:8px; line-height:1;
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(242,101,34,.5); }
.btn-primary:active{ transform:translateY(0); box-shadow:var(--shadow-sm); }
.btn-primary:disabled{ background:var(--ink-ghost); box-shadow:none; cursor:not-allowed; transform:none; }
.btn-primary .seal-sm{ width:15px; height:15px; }
/* danger — supersede / reject / block */
.btn-danger{
  font-family:var(--sans); font-weight:700; font-size:10.5px; letter-spacing:0.09em; text-transform:uppercase;
  background:var(--surface); border:1px solid var(--family); border-radius:10px; color:var(--family-d); padding:10px 16px; cursor:pointer;
  transition:all .16s; display:inline-flex; align-items:center; gap:7px; line-height:1;
}
.btn-danger:hover{ background:var(--family); color:#fff; border-color:var(--family); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn-danger:active{ transform:translateY(0); }

/* =========================================================
   MODAL — the imprimatur confirmation / candidate detail
   ========================================================= */
.modal-scrim{
  position:fixed; inset:0; z-index:60; background:rgba(34,29,23,0.42); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.modal-scrim.open{ opacity:1; pointer-events:auto; }
.modal{
  position:relative; background:var(--surface); border:1px solid var(--line); border-radius:20px; max-width:min(640px,94vw);
  width:100%; max-height:88vh; overflow:auto; box-shadow:var(--shadow-lg);
  transform:translateY(14px) scale(.98); transition:transform .25s;
}
.modal-scrim.open .modal{ transform:none; }
.modal-h{ position:relative; border-bottom:1px solid var(--line); padding:19px 23px 15px; display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.modal-h .mh-k{ font-family:var(--mono); font-size:8.5px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--solar-deep); }
.modal-h .mh-t{ font-family:var(--serif); font-weight:600; font-size:28px; line-height:1.08; margin-top:5px; letter-spacing:-0.015em; }
.modal-h .mh-t em{ font-style:italic; color:var(--accent-d); }
.modal-close{ font-family:var(--serif); font-size:26px; line-height:1; color:var(--ink-faint); background:transparent; border:0; cursor:pointer; padding:0 4px; transition:color .16s; }
.modal-close:hover{ color:var(--accent); }
.modal-body{ position:relative; padding:19px 23px; }
.modal-foot{ position:relative; border-top:1px solid var(--line); padding:16px 23px; display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; background:var(--surface-2); border-radius:0 0 20px 20px; }

/* =========================================================
   TOAST
   ========================================================= */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px);
  background:var(--ink); color:#fff; font-family:var(--mono); font-size:11px; letter-spacing:0.03em;
  padding:11px 18px; border-radius:11px; box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; z-index:80;
  transition:opacity .3s, transform .3s; max-width:min(540px,90vw);
}
.toast.show{ opacity:1; transform:translate(-50%,0); }
.toast b{ color:var(--solar-bright); }

/* =========================================================
   FOOTNOTE APPARATUS — operational anchors
   ========================================================= */
.apparatus{
  position:relative; z-index:1; max-width:1640px; margin:30px auto 0; padding:18px clamp(16px,3vw,52px) 0;
  border-top:1px solid var(--line);
}
.apparatus .ap-h{ font-family:var(--mono); font-size:9px; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:12px; }
.apparatus dl{ margin:0; columns:2; column-gap:48px; font-size:12.5px; }
@media(max-width:760px){ .apparatus dl{ columns:1; } }
.apparatus dt{ font-family:var(--mono); font-size:10px; font-weight:500; color:var(--solar-deep); float:left; width:20px; clear:left; }
.apparatus dd{ margin:0 0 11px 24px; font-family:var(--sans); line-height:1.5; color:var(--ink-soft); break-inside:avoid; }
.apparatus dd b{ color:var(--ink); font-weight:500; }
.apparatus dd:target, .ap-flash{ background:var(--solar-wash); box-shadow:-6px 0 0 var(--solar-wash); border-radius:2px; }

/* =========================================================
   FOOTER
   ========================================================= */
.foot{
  position:relative; z-index:1; max-width:1640px; margin:28px auto 34px; padding:18px clamp(16px,3vw,52px) 0;
  border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:10px;
}
.foot .brand{ font-family:var(--serif); font-style:italic; font-size:17px; color:var(--ink); }
.foot .brand b{ font-style:normal; color:var(--accent-d); font-weight:600; }
.foot .meta{ font-family:var(--mono); font-size:9.5px; color:var(--ink-faint); letter-spacing:0.03em; text-align:right; line-height:1.7; }
.glyph{ font-family:var(--serif); font-style:italic; color:var(--accent-d); font-weight:600; }

/* =========================================================
   SPECTRUM SIGNATURE CLASSES (available to all screens)
   gradient numbers · programme heroes · pending · status chips
   ========================================================= */
.spectrum-ribbon{ height:5px; width:180px; border-radius:0 0 5px 5px; background:var(--spectrum); }
.gnum{ font-family:var(--serif); font-weight:600; line-height:.9; letter-spacing:-0.02em; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.gnum.is-orange{ background-image:linear-gradient(118deg,#FF7C40,#B44B14); }
.gnum.is-teal{ background-image:linear-gradient(118deg,#19BCBF,#006D6F); }
.gnum.is-purple{ background-image:linear-gradient(118deg,#C45BB8,#62005A); }
.gnum.is-blue{ background-image:linear-gradient(118deg,#39C2F4,#0076A3); }
.gnum.is-green{ background-image:linear-gradient(118deg,#5FCE6F,#14732C); }
.gnum.is-magenta{ background-image:linear-gradient(118deg,#F5479F,#A70063); }
.gnum.is-chrome{ background-image:linear-gradient(118deg,#E0A800,#7A5C04); }
.u{ font-family:var(--sans); font-size:.32em; color:var(--ink-faint); -webkit-text-fill-color:var(--ink-faint); }
.prog{ color:#FCFAF5; border:none; box-shadow:var(--shadow-md); } .prog::before{ display:none; }
.prog.is-orange{ background:linear-gradient(158deg,#F26522,#B44B14); }
.prog.is-purple{ background:linear-gradient(158deg,#9A258F,#2B0B5F); }
.prog.is-teal{ background:linear-gradient(158deg,#00AAAD,#1B3A8C); }
.prog.is-blue{ background:linear-gradient(158deg,#00AEEF,#0076A3); }
.pending{ font-family:var(--mono); font-size:9px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-faint); border:1px dashed var(--ink-ghost); border-radius:6px; padding:2px 7px; }
.c-exist{ color:var(--relief-d); } .c-part{ color:var(--career-d); } .c-gap{ color:var(--ink-ghost); }

@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001s !important; transition-duration:.06s !important; } body::before{ animation:none !important; } }