/* Portal skin — EverDriven (client skin, reference instance).
   Values extracted 1:1 from Corey's sp-program-portal v3.0 (2026-07-15).
   Per TOUCHPOINTS.md §1 this swaps tokens only — the structural component
   contract in portal.css is identical under both skins. */

@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@500;600;700;800&family=Hanken+Grotesk:wght@400;500;600;700&family=Azeret+Mono:wght@400;500;600&display=swap');

:root{

  /* type — craft pass 2026-07-16 (Stedmon): a real typographic voice.
     Schibsted Grotesk carries display (confident, operational, news-desk
     register that sits well next to EverDriven's blue); Hanken Grotesk
     carries body; Azeret Mono is the system-wide metadata grammar shared
     with the ORS skin so the identity rail reads as 14th & Co in both. */
  --font-body:'Hanken Grotesk',system-ui,sans-serif;
  --font-display:'Schibsted Grotesk','Hanken Grotesk',system-ui,sans-serif;
  --font-mono:'Azeret Mono',ui-monospace,monospace;

  /* neutrals */
  --field:#f7f8fa;        /* g50  — page background */
  --surface:#fdfdfe;      /* w, tinted toward the brand hue — never pure white */
  --fill:#eef0f4;         /* g100 — subtle fill */
  --line:#dde1e8;         /* bdr / g200 — borders */
  --line-soft:#dde1e8;    /* g200 */
  --meta:#68738a;         /* g400 darkened for AA at label size (was #8b95a5, 3.0:1) */
  --text-soft:#566276;    /* g600 */
  --text:#2d3645;         /* g800 — body copy */
  --ink:#1a1f2b;          /* g900 — headings */

  /* accent — EverDriven blue */
  --accent:#1B6EC8;       /* b  */
  --accent-deep:#00327c;  /* n  */
  --accent-deepest:#001f4d; /* dp */
  --accent-tint:#e8f2fb;  /* lt */
  --accent-wash:#f0f4ff;
  --on-accent:#f8fafd;

  /* status */
  --ok:#0d8c4c;           /* gn */
  --warn:#96500a;         /* am darkened for AA on warn-tint (was #c7670a, 3.6:1) */
  --risk:#c42e2e;         /* rd */
  --info:#0d708f;         /* te */
  --ok-tint:#e6f4ec;
  --ok-wash:#f6faf7;
  --warn-tint:#fef3e6;
  --warn-wash:#fef8f4;
  --risk-tint:#fde8e8;
  --info-tint:#e8f0f4;

  /* geometry — register, not app chrome: near-square, no shadows */
  --radius:2px;
  --radius-pill:2px;
  --shadow:none;
  --shadow-lift:none;
}
/* 14th & Co. — Portal / Operating Register component library  v2
   (canonical, per TOUCHPOINTS.md §2 — seventh artifact type; OS-001)

   v2 is the first-of-kind redesign (2026-07-16, Stedmon's UX/UI pass):
   claim-led spine navigation, glance/commit interaction grammar (hover =
   transient glance, click = pinned commit with visible affordance),
   walkthrough Present mode with an always-visible exit, register-grade
   craft (rules not shadows, mono metadata grammar, status color reserved
   for status, no accent stripes).

   STRUCTURE ONLY. Every color/radius/font reads var(--*); skins live in
   ../skins/. A client skin is a token swap, never a structural fork.
   Do not hand-edit a target's style.css — edit this file, run ./sync.sh. */

:root{
  /* structural type scale — 7 steps, ~1.15-1.3 between neighbors in role terms.
     label < caption < body-sm < body < section < value < title */
  --fs-label:0.64rem;--fs-caption:0.73rem;--fs-body-sm:0.82rem;--fs-body:0.88rem;
  --fs-section:0.96rem;--fs-lg:1.18rem;--fs-value:1.6rem;--fs-title:1.9rem;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font-body);background:var(--field);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}

/* ── Register bar ─────────────────────────────────────────────────── */
.topbar{background:var(--surface);border-bottom:2px solid var(--ink);padding:0 20px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:100;height:54px;gap:14px}
.topbar .logo{font-family:var(--font-display);font-weight:800;font-size:0.95rem;color:var(--ink);display:flex;align-items:center;gap:9px;white-space:nowrap;letter-spacing:0.2px}
.topbar .ed-mark{width:24px;height:24px;background:var(--accent);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;color:var(--on-accent);font-weight:800;font-size:var(--fs-body-sm)}
.topbar .divider{width:1px;height:18px;background:var(--line);margin:0 2px}
.topbar .prog{color:var(--meta);font-weight:500;font-size:var(--fs-body-sm);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0.8px}
.topbar .search-wrap{flex:1;max-width:400px;position:relative}
.topbar .search-wrap input{width:100%;padding:7px 12px 7px 30px;border:1px solid var(--line);border-radius:var(--radius);font-size:var(--fs-body);color:var(--text);background:var(--field);outline:none;font-family:var(--font-body)}
.topbar .search-wrap input:focus{border-color:var(--accent);background:var(--surface)}
.topbar .search-wrap .search-icon{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--meta);font-size:var(--fs-body-sm);font-family:var(--font-mono)}
.topbar .search-results{display:none;position:absolute;top:100%;left:0;right:0;background:var(--surface);border:1px solid var(--ink);max-height:400px;overflow-y:auto;z-index:200;margin-top:4px}
.topbar .search-results.on{display:block}
.topbar .search-results .sr-item{padding:9px 13px;border-bottom:1px solid var(--fill);cursor:pointer;font-size:var(--fs-body-sm)}
.topbar .search-results .sr-item:hover{background:var(--accent-tint)}
.topbar .search-results .sr-item .sr-title{font-weight:600;color:var(--ink)}
.topbar .search-results .sr-item .sr-desc{font-size:var(--fs-caption);color:var(--meta);margin-top:2px}
.topbar .top-r{display:flex;align-items:center;gap:8px}
.topbar .top-r button{font-size:var(--fs-caption);color:var(--text-soft);cursor:pointer;padding:6px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);font-weight:600;white-space:nowrap;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0.6px}
.topbar .top-r button:hover{color:var(--accent);border-color:var(--accent)}

/* ── Layout + spine nav ───────────────────────────────────────────── */
.layout{display:grid;grid-template-columns:224px 1fr;min-height:calc(100vh - 54px)}
.sidebar{background:var(--surface);border-right:1px solid var(--line);padding:18px 0 12px;overflow-y:auto}
.sidebar .ns{padding:4px 18px;font-size:var(--fs-label);text-transform:uppercase;letter-spacing:1px;color:var(--meta);margin-top:20px;font-weight:700;font-family:var(--font-mono);display:flex;gap:8px;align-items:baseline}
.sidebar .ns:first-child{margin-top:0}
.sidebar .ns .ns-idx{color:var(--accent)}
.sidebar .ni{display:flex;align-items:center;gap:7px;padding:7px 18px 7px 34px;font-size:var(--fs-body);cursor:pointer;color:var(--text-soft);font-weight:450;text-decoration:none}
.sidebar .ni:hover{color:var(--ink);background:var(--fill)}
.sidebar .ni.act{color:var(--accent);background:var(--accent-tint);font-weight:600}
.sidebar .ref-drawer{margin-top:22px;border-top:1px solid var(--line);padding-top:6px}
.sidebar .ref-drawer summary{padding:7px 18px;font-size:var(--fs-label);text-transform:uppercase;letter-spacing:1px;color:var(--meta);font-weight:700;font-family:var(--font-mono);cursor:pointer;list-style:none}
.sidebar .ref-drawer summary::before{content:'▸ ';color:var(--accent)}
.sidebar .ref-drawer[open] summary::before{content:'▾ '}
.sidebar .side-note{margin:26px 18px 8px;padding-top:10px;border-top:1px solid var(--line);font-size:var(--fs-label);color:var(--meta);line-height:1.5;font-family:var(--font-mono)}
.main{padding:26px 36px 60px;overflow-y:auto;max-width:1460px}
.panel{display:none}.panel.on{display:block}

/* ── Claim-led page headers ───────────────────────────────────────── */
.pg-title{font-family:var(--font-display);font-size:var(--fs-title);font-weight:800;letter-spacing:-0.4px;margin-bottom:4px;color:var(--ink);line-height:1.1}
.pg-sub{color:var(--text-soft);font-size:var(--fs-section);margin-bottom:16px;max-width:72ch}
.osm{display:flex;gap:0;flex-wrap:wrap;margin-bottom:18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.osm span{display:inline-flex;align-items:center;gap:5px;padding:6px 14px 6px 0;margin-right:14px;font-size:var(--fs-caption);color:var(--text-soft);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0.5px}
.osm .own{color:var(--accent);font-weight:600}

/* ── RS-101 identity rail (survives Present mode) ─────────────────── */
.id-rail{background:var(--surface);border:1px solid var(--line);border-top:2px solid var(--ink);padding:13px 18px;margin-bottom:18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 18px;font-family:var(--font-mono)}
.id-rail .id-field .id-k{display:block;font-size:var(--fs-label);text-transform:uppercase;letter-spacing:0.9px;color:var(--meta);margin-bottom:2px;font-weight:700}
.id-rail .id-field .id-v{font-size:var(--fs-body-sm);color:var(--ink);font-weight:500}
body.present .id-rail{display:grid}

/* ── Depth layers (system-wide device) ────────────────────────────── */
.exp-layers{display:flex;gap:0;margin-bottom:14px;border:1px solid var(--line);width:max-content}
.exp-layers button{padding:6px 14px;border:none;border-right:1px solid var(--line);background:var(--surface);cursor:pointer;font-size:var(--fs-caption);color:var(--text-soft);font-weight:600;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0.6px}
.exp-layers button:last-child{border-right:none}
.exp-layers button:hover{color:var(--accent)}
.exp-layers button.act{background:var(--ink);color:var(--surface)}
.exp-content .exp-lvl{display:none}
.exp-content .exp-lvl.on{display:block}

/* ── The claim (executive brief) ──────────────────────────────────── */
.brf{background:var(--surface);border:1px solid var(--line);padding:22px 24px;margin-bottom:16px}
.brf h2{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:700;color:var(--ink);margin-bottom:10px}
.brf .blurb{font-size:var(--fs-section);color:var(--text);line-height:1.65;max-width:72ch}
.brf .blurb .up{color:var(--ok);font-weight:650}.brf .blurb .dn{color:var(--risk);font-weight:650}.brf .blurb .warn{color:var(--warn);font-weight:650}

/* ── Cards → register sections (rules, not shadows) ───────────────── */
.cd{background:var(--surface);border:1px solid var(--line);padding:18px 20px;margin-bottom:14px}
.cd h3{font-size:var(--fs-caption);font-weight:700;margin:-18px -20px 14px;padding:9px 20px;color:var(--ink);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid var(--line);background:var(--fill);display:flex;align-items:center;gap:8px}

/* ── Callouts (full-frame, no stripes) ────────────────────────────── */
.ec{padding:13px 16px;margin:12px 0;font-size:var(--fs-body);line-height:1.55;border:1px solid var(--line);background:var(--surface)}
.ec strong{display:block;font-size:var(--fs-label);text-transform:uppercase;letter-spacing:0.8px;margin-bottom:5px;font-family:var(--font-mono)}
.ec.why{background:var(--accent-wash)}.ec.why strong{color:var(--accent)}
.ec.risk{background:var(--warn-wash)}.ec.risk strong{color:var(--warn)}
.ec.act{background:var(--ok-wash)}.ec.act strong{color:var(--ok)}
.ec.dec{background:var(--warn-wash)}.ec.dec strong{color:var(--warn)}
.ec.ai{background:var(--accent-wash)}
.ec.ai .ai-badge{display:inline-block;padding:1px 7px;background:var(--ink);color:var(--surface);font-size:var(--fs-label);margin-left:6px;font-weight:700;font-family:var(--font-mono);letter-spacing:0.6px}

/* ── Decision queue (first-class) ─────────────────────────────────── */
.priority-list{list-style:none}
.priority-list li{padding:10px 4px;border-bottom:1px solid var(--fill);font-size:var(--fs-body);display:flex;align-items:baseline;gap:12px}
.priority-list li:last-child{border-bottom:none}
.priority-list .p-num{font-family:var(--font-mono);font-weight:700;font-size:var(--fs-body-sm);flex-shrink:0;width:24px}
.p-num.p0{color:var(--risk)}.p-num.p1{color:var(--warn)}.p-num.p2{color:var(--meta)}
.dq-item{display:flex;align-items:baseline;gap:12px;padding:10px 4px;border-bottom:1px solid var(--fill);font-size:var(--fs-body)}
.dq-item:last-child{border-bottom:none}
.dq-item .dq-owner{min-width:100px;font-weight:700;font-size:var(--fs-body-sm);font-family:var(--font-mono);color:var(--ink)}
.dq-status{padding:2px 8px;font-size:var(--fs-label);font-weight:700;font-family:var(--font-mono);letter-spacing:0.4px;white-space:nowrap;margin-left:auto}
.dq-status.waiting{background:var(--warn-tint);color:var(--warn)}.dq-status.overdue{background:var(--risk-tint);color:var(--risk)}.dq-status.done{background:var(--ok-tint);color:var(--ok)}

/* ── Simulators ───────────────────────────────────────────────────── */
.sim{background:var(--field);border:1px solid var(--line);padding:16px;margin:10px 0}
.sim .sim-title{font-weight:650;font-size:var(--fs-body);margin-bottom:8px;color:var(--ink)}
.sim .sim-slider{display:flex;align-items:center;gap:10px;margin:6px 0}
.sim input[type=range]{flex:1;accent-color:var(--accent)}
.sim .sim-val{min-width:58px;font-weight:700;font-size:var(--fs-section);color:var(--accent);text-align:right;font-family:var(--font-mono)}
.sim .sim-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px;margin-top:10px}
.sim .sim-res{background:var(--surface);padding:10px;text-align:center;border:1px solid var(--line)}
.sim .sim-res .rv{font-size:var(--fs-lg);font-weight:700;color:var(--ink);font-family:var(--font-mono)}
.sim .sim-res .rl{font-size:var(--fs-label);color:var(--meta);text-transform:uppercase;letter-spacing:0.6px;font-family:var(--font-mono)}

.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}.three{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
@media(max-width:900px){
  .layout{display:block}
  .sidebar{display:flex;flex-direction:row;align-items:center;overflow-x:auto;border-right:none;border-bottom:1px solid var(--line);padding:0 10px;position:sticky;top:54px;z-index:90;gap:2px}
  .sidebar .ns{margin-top:0;padding:10px 8px;white-space:nowrap}
  .sidebar .ni{padding:10px 9px;white-space:nowrap}
  .sidebar .ref-drawer{display:flex;align-items:center;margin-top:0;border-top:none;padding-top:0}
  .sidebar .ref-drawer summary{white-space:nowrap;padding:10px 8px}
  .sidebar .ref-drawer[open]{background:var(--fill)}
  .sidebar .side-note{display:none}
  .two{grid-template-columns:1fr}.main{padding:18px}
}

/* ── Tables (set-in register) ─────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:var(--fs-body)}
th{text-align:left;padding:7px 10px;border-bottom:2px solid var(--ink);color:var(--meta);font-size:var(--fs-label);text-transform:uppercase;letter-spacing:0.7px;font-weight:700;font-family:var(--font-mono)}
td{padding:8px 10px;border-bottom:1px solid var(--fill)}
tr:hover td{background:var(--field)}
.badge{display:inline-block;padding:1px 7px;font-size:var(--fs-label);font-weight:700;letter-spacing:0.4px;font-family:var(--font-mono)}
.bg{background:var(--ok-tint);color:var(--ok)}.by{background:var(--warn-tint);color:var(--warn)}.br{background:var(--risk-tint);color:var(--risk)}.bb{background:var(--accent-tint);color:var(--accent)}.bn{background:var(--info-tint);color:var(--info)}

/* ── Flows (hover = glance; transient, never load-bearing) ────────── */
.flow{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:8px 0;justify-content:center;font-size:var(--fs-body-sm)}
.fn{background:var(--surface);border:1px solid var(--line);padding:8px 12px;text-align:center;font-weight:550;min-width:70px;color:var(--text);position:relative;cursor:help}
.fn:hover{border-color:var(--accent)}
.fn .ft{display:none;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--ink);color:var(--surface);padding:7px 10px;z-index:100;font-size:var(--fs-caption);white-space:nowrap;pointer-events:none;font-family:var(--font-mono)}
.fn:hover .ft,.fn:focus .ft{display:block}
.fa{color:var(--meta);font-weight:300;font-size:var(--fs-body)}

.rel-panel{border-top:1px solid var(--line);padding:14px 0 0;margin:16px 0 0}
.rel-panel h4{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:0.9px;color:var(--meta);margin-bottom:8px;font-family:var(--font-mono);font-weight:700}
.rel-panel .rel-links{display:flex;flex-wrap:wrap;gap:6px}
.rel-panel .rel-link{padding:5px 11px;background:var(--surface);border:1px solid var(--line);font-size:var(--fs-body-sm);color:var(--accent);cursor:pointer;font-weight:600}
.rel-panel .rel-link:hover{border-color:var(--accent);background:var(--accent-tint)}
.learn{font-size:var(--fs-body-sm);color:var(--accent);cursor:pointer;font-weight:600;display:inline-flex;align-items:center;gap:4px;margin-top:8px;user-select:none}
.learn:hover{color:var(--accent-deep)}.learn::after{content:'▸';font-size:var(--fs-label)}.learn.open::after{content:'▾'}
.lc{display:none;margin-top:8px;padding:12px;background:var(--field);border:1px solid var(--line);font-size:var(--fs-body-sm);color:var(--text-soft);line-height:1.55}.lc.open{display:block}

/* ── Region map ───────────────────────────────────────────────────── */
.region-map{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:6px;margin:8px 0}
.rb{background:var(--field);border:1px solid var(--fill);padding:9px 12px;display:flex;align-items:center;gap:8px}
.rb .rname{font-weight:650;font-size:var(--fs-body-sm);min-width:78px;color:var(--ink)}
.rb .rbar{flex:1;height:8px;background:var(--fill);overflow:hidden;display:flex}
.rb .rbar .grow{background:var(--ok)}.rb .rbar .retain{background:var(--accent)}.rb .rbar .watch{background:var(--warn)}.rb .rbar .exit{background:var(--risk)}
.rb .rrisk{font-size:var(--fs-caption);font-weight:700;min-width:48px;text-align:right;font-family:var(--font-mono)}

/* ── Checklists / footer ──────────────────────────────────────────── */
.chk-item{display:flex;align-items:flex-start;gap:8px;padding:6px 0;font-size:var(--fs-body);border-bottom:1px solid var(--fill);color:var(--text)}
.chk-item:last-child{border-bottom:none}.chk-item .chk{color:var(--accent);font-weight:700;min-width:18px;font-size:var(--fs-body-sm);font-family:var(--font-mono)}
.footer{text-align:center;padding:24px;color:var(--meta);font-size:var(--fs-caption);border-top:2px solid var(--ink);margin-top:40px;font-family:var(--font-mono);letter-spacing:0.4px}.footer strong{color:var(--text-soft)}

/* ── Timeline / defs / health ─────────────────────────────────────── */
.timeline{display:flex;gap:0;align-items:flex-start;padding:6px 0;overflow-x:auto}
.tl-item{flex:1;min-width:118px;text-align:center;padding:6px}.tl-item .tl-dot{width:11px;height:11px;background:var(--line);margin:0 auto 6px}.tl-item .tl-dot.done{background:var(--ok)}.tl-item .tl-dot.current{background:var(--accent);outline:3px solid var(--accent-tint)}.tl-item .tl-dot.blocked{background:var(--risk)}
.tl-item .tl-label{font-size:var(--fs-caption);font-weight:700;color:var(--ink)}.tl-item .tl-date{font-size:var(--fs-label);color:var(--meta);font-family:var(--font-mono)}
.tl-connector{height:1px;background:var(--line);flex:0 0 16px;margin-top:5px}.tl-connector.done{background:var(--ok)}
.def-box{background:var(--accent-wash);border:1px solid var(--line);padding:14px;margin:10px 0;font-size:var(--fs-body);color:var(--text-soft);line-height:1.55}
.def-box strong{color:var(--accent);display:block;font-size:var(--fs-label);text-transform:uppercase;letter-spacing:0.8px;margin-bottom:4px;font-family:var(--font-mono)}
.health-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin:10px 0}
.health-card{background:var(--field);border:1px solid var(--fill);padding:14px;text-align:center}
.health-card .h-name{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:0.7px;color:var(--meta);margin-bottom:4px;font-weight:700;font-family:var(--font-mono)}
.health-card .h-score{font-size:var(--fs-title);font-weight:700;font-family:var(--font-mono)}
.health-card .h-bar{height:5px;background:var(--fill);margin-top:6px;overflow:hidden}
.health-card .h-bar .h-fill{height:100%}

/* ── Stat tiles (click = pin; affordance visible BEFORE interaction) ─ */
.sg{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:10px;margin:14px 0}
.st{background:var(--surface);border:1px solid var(--line);border-top:2px solid var(--ink);padding:14px 16px 30px;cursor:pointer;position:relative}
.st:hover{border-color:var(--accent);border-top-color:var(--accent)}
.st .lbl{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:0.8px;color:var(--meta);margin-bottom:5px;font-weight:700;font-family:var(--font-mono)}
.st .val{font-size:var(--fs-value);font-weight:700;color:var(--ink);font-family:var(--font-mono);letter-spacing:-0.5px}
.st .sub{font-size:var(--fs-body-sm);color:var(--text-soft);margin-top:4px;line-height:1.45;max-width:34ch}
.st .drill{display:none;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:var(--fs-caption);color:var(--text-soft);line-height:1.5}
.st.open .drill{display:block}
.st .drill strong{color:var(--ink);display:block;font-size:var(--fs-body-sm);margin-bottom:2px}
.st .drill .q{color:var(--accent);font-weight:700;font-size:var(--fs-label);margin-top:6px;display:block;text-transform:uppercase;letter-spacing:0.6px;font-family:var(--font-mono)}
.st .drill .a{font-size:var(--fs-caption);margin-top:1px}
.st .hint{font-size:var(--fs-label);color:var(--accent);position:absolute;bottom:8px;left:16px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0.6px;font-weight:700}
.st .hint::before{content:'▸ '}
.st.open .hint::before{content:'▾ '}

/* ── Present mode: paged walkthrough with visible exit ────────────── */
body.present .topbar,body.present .sidebar,body.present .footer{display:none}
body.present .layout{grid-template-columns:1fr}
body.present .main{max-width:1080px;margin:0 auto;padding:44px 48px 110px}
.present-bar{display:none}
body.present .present-bar{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:14px;background:var(--ink);color:var(--surface);padding:11px 20px;z-index:400;font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:0.5px}
.present-bar button{background:transparent;border:1px solid color-mix(in srgb, var(--surface) 35%, transparent);color:var(--surface);padding:5px 14px;cursor:pointer;font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:0.5px}
.present-bar button:hover{border-color:var(--surface)}
.present-bar .pres-count{min-width:130px;text-align:center;opacity:0.7}
.present-bar .pres-exit{margin-left:22px;background:var(--surface);color:var(--ink);border:none;font-weight:700}



:where(a,button,summary,input,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:2px}

@media (prefers-reduced-motion: no-preference){
  .panel.on{animation:panelIn 240ms cubic-bezier(0.25,0.1,0.25,1)}
  @keyframes panelIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
}

/* ── Initiative pages — narrative-driven, low-scroll (closeout) ────────
   One initiative per view: eyebrow + title + status, a three-beat arc
   (started / now / at risk), key takeaways, connected resources.
   Same content model powers the Executive Read-Out (tight single-screen). */
.init-eyebrow{font-family:var(--font-mono);font-size:var(--fs-label);text-transform:uppercase;letter-spacing:1px;color:var(--accent);font-weight:700;margin-bottom:8px}
.init-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.init-head .pg-title{margin-bottom:0}
.init-summary{font-size:var(--fs-section);color:var(--text-soft);max-width:66ch;margin-bottom:22px;line-height:1.55}
.arc{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:20px}
.arc .beat{background:var(--surface);padding:16px 18px}
.arc .beat .beat-k{font-family:var(--font-mono);font-size:var(--fs-label);text-transform:uppercase;letter-spacing:0.8px;color:var(--meta);font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:7px}
.arc .beat.started .beat-k::before{content:'';width:8px;height:8px;background:var(--meta)}
.arc .beat.now .beat-k::before{content:'';width:8px;height:8px;background:var(--accent)}
.arc .beat.risk .beat-k::before{content:'';width:8px;height:8px;background:var(--warn)}
.arc .beat p{font-size:var(--fs-body-sm);line-height:1.6;color:var(--text)}
.takeaways{background:var(--accent-wash);border:1px solid var(--line);padding:16px 20px;margin-bottom:20px}
.takeaways h4{font-family:var(--font-mono);font-size:var(--fs-label);text-transform:uppercase;letter-spacing:0.8px;color:var(--accent);font-weight:700;margin-bottom:10px}
.takeaways ul{list-style:none;display:grid;gap:8px}
.takeaways li{font-size:var(--fs-body);line-height:1.5;padding-left:20px;position:relative}
.takeaways li::before{content:'→';position:absolute;left:0;color:var(--accent);font-weight:700}
.resources{border-top:1px solid var(--line);padding-top:14px}
.resources h4{font-family:var(--font-mono);font-size:var(--fs-label);text-transform:uppercase;letter-spacing:0.8px;color:var(--meta);font-weight:700;margin-bottom:10px}
.resources .res-links{display:flex;flex-wrap:wrap;gap:7px}
.resources .res-link{padding:6px 12px;background:var(--surface);border:1px solid var(--line);font-size:var(--fs-body-sm);color:var(--accent);cursor:pointer;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.resources .res-link:hover{border-color:var(--accent);background:var(--accent-tint)}
.resources .res-link.ext::after{content:'↗';font-size:0.85em;opacity:0.7}
@media(max-width:820px){.arc{grid-template-columns:1fr}}

/* Read-out mode: initiatives render tighter, one screen, no page scroll fight */
body.present .init-summary{font-size:var(--fs-lg)}
body.present .arc .beat p{font-size:var(--fs-body)}

/* ── Initiative signature visuals + metrics (v3.4 — data-rich closeout) ── */
.init-metrics{display:flex;gap:0;border:1px solid var(--line);margin-bottom:20px;flex-wrap:wrap}
.init-metrics .m{flex:1;min-width:120px;padding:14px 18px;border-right:1px solid var(--line)}
.init-metrics .m:last-child{border-right:none}
.init-metrics .m .mnum{font-family:var(--font-mono);font-size:var(--fs-value);font-weight:700;color:var(--ink);letter-spacing:-0.5px;line-height:1}
.init-metrics .m .mlbl{font-family:var(--font-mono);font-size:var(--fs-label);text-transform:uppercase;letter-spacing:0.6px;color:var(--meta);margin-top:6px;font-weight:600}

.viz{border:1px solid var(--line);background:var(--surface);margin-bottom:20px}
.viz-cap{font-family:var(--font-mono);font-size:var(--fs-label);text-transform:uppercase;letter-spacing:0.8px;color:var(--meta);font-weight:700;padding:11px 16px;border-bottom:1px solid var(--line);background:var(--fill)}
.viz-body{padding:18px}

/* matrix (Target SP) */
.vz-matrix{width:100%;border-collapse:collapse;font-size:var(--fs-body-sm)}
.vz-matrix th{text-align:left;padding:8px 12px;font-family:var(--font-mono);font-size:var(--fs-label);text-transform:uppercase;letter-spacing:0.6px;color:var(--meta);border-bottom:2px solid var(--ink)}
.vz-matrix th.tier{color:var(--accent)}
.vz-matrix td{padding:9px 12px;border-bottom:1px solid var(--fill);vertical-align:top}
.vz-matrix td.rk{font-weight:700;color:var(--ink);white-space:nowrap}
.vz-matrix tr:hover td{background:var(--field)}

/* funnel (Recruiting) */
.vz-funnel{display:flex;flex-direction:column;gap:0}
.vz-stage{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--fill)}
.vz-stage:last-child{border-bottom:none}
.vz-bar{height:34px;background:var(--accent);display:flex;align-items:center;padding:0 14px;color:var(--on-accent);font-weight:650;font-size:var(--fs-body-sm);white-space:nowrap;min-width:90px}
.vz-stage:nth-child(1) .vz-bar{width:88%}.vz-stage:nth-child(2) .vz-bar{width:70%}
.vz-stage:nth-child(3) .vz-bar{width:46%}.vz-stage:nth-child(4) .vz-bar{width:30%}
.vz-stage.clog .vz-bar{background:var(--risk)}
.vz-stage .vz-note{font-size:var(--fs-body-sm);color:var(--text-soft)}
.vz-backlog{margin-top:14px;padding:12px 16px;background:var(--risk-tint);color:var(--risk);font-weight:650;font-size:var(--fs-body-sm);display:flex;align-items:center;gap:10px}
.vz-backlog::before{content:'▲';font-size:0.8em}

/* gauge (Driver pipeline) */
.vz-gauge-wrap{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.vz-track{flex:1;min-width:220px;height:16px;background:var(--fill);position:relative;border:1px solid var(--line)}
.vz-fill-entry{position:absolute;left:0;top:0;bottom:0;background:var(--warn)}
.vz-fill-target{position:absolute;top:0;bottom:0;background:var(--ok);opacity:0.35}
.vz-mark{position:absolute;top:-6px;bottom:-6px;width:2px;background:var(--ink)}
.vz-mark .vl{position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-family:var(--font-mono);font-size:var(--fs-label);color:var(--ink);font-weight:700;white-space:nowrap}
.vz-gauge-legend{display:flex;gap:18px;font-size:var(--fs-label);font-family:var(--font-mono);color:var(--meta);text-transform:uppercase;letter-spacing:0.5px}

/* gate (Onboarding) */
.vz-gate{display:flex;align-items:stretch;gap:0}
.vz-gnode{flex:1;padding:16px;border:1px solid var(--line);text-align:center}
.vz-gnode .gk{font-weight:700;font-size:var(--fs-body);color:var(--ink);margin-bottom:5px}
.vz-gnode .gn{font-size:var(--fs-label);color:var(--text-soft);line-height:1.5}
.vz-gnode.done{background:var(--ok-tint)}.vz-gnode.done .gk{color:var(--ok)}
.vz-gnode.broken{background:var(--risk-tint)}.vz-gnode.broken .gk{color:var(--risk)}
.vz-gnode.pending{background:var(--fill)}
.vz-gconn{display:flex;align-items:center;padding:0 4px;color:var(--meta);font-weight:700}
.vz-gconn.cut{color:var(--risk)}

/* distribution (Eligibility) — the flagship */
.vz-dist-bar{display:flex;height:52px;border:1px solid var(--ink);overflow:hidden}
.vz-seg{display:flex;flex-direction:column;justify-content:center;padding:0 12px;color:var(--on-accent);min-width:60px}
.vz-seg .sn{font-family:var(--font-mono);font-weight:700;font-size:var(--fs-body)}
.vz-seg .sl{font-size:var(--fs-label);opacity:0.9;text-transform:uppercase;letter-spacing:0.5px}
.vz-seg.ok{background:var(--ok)}.vz-seg.accent{background:var(--accent)}
.vz-seg.warn{background:var(--warn)}.vz-seg.risk{background:var(--risk)}
.vz-dist-key{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:14px}
.vz-dk{border-left:0;padding:8px 0}
.vz-dk .dkh{display:flex;align-items:center;gap:7px;font-weight:700;font-size:var(--fs-body-sm);color:var(--ink)}
.vz-dk .dot{width:10px;height:10px;flex-shrink:0}
.vz-dk .dot.ok{background:var(--ok)}.vz-dk .dot.accent{background:var(--accent)}
.vz-dk .dot.warn{background:var(--warn)}.vz-dk .dot.risk{background:var(--risk)}
.vz-dk .dks{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--meta);margin-top:2px;margin-left:17px}
.vz-atrisk{margin-top:14px;padding:10px 14px;background:var(--risk-tint);color:var(--risk);font-weight:650;font-size:var(--fs-body-sm)}

/* spiff (Compensation) */
.vz-spiff-trend{display:flex;align-items:flex-end;gap:22px;height:150px;padding:0 8px 6px;border-bottom:1px solid var(--line);margin-bottom:14px}
.vz-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;flex:0 0 90px}
.vz-col .cbar{width:64px;background:var(--accent)}
.vz-col.prev .cbar{background:var(--marker-gray,var(--meta))}
.vz-col .cv{font-family:var(--font-mono);font-weight:700;font-size:var(--fs-body-sm);color:var(--ink)}
.vz-col .cl{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--meta);text-transform:uppercase;letter-spacing:0.5px}
.vz-yoy{align-self:center;font-family:var(--font-mono);font-weight:700;color:var(--risk);font-size:var(--fs-section)}
.vz-comp{display:flex;height:26px;border:1px solid var(--ink);margin-bottom:6px}
.vz-comp .cseg{display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:var(--fs-label);font-weight:700;color:var(--on-accent)}
.vz-comp .cseg.risk{background:var(--risk)}.vz-comp .cseg.warn{background:var(--warn)}.vz-comp .cseg.marker{background:var(--meta)}
.vz-comp-key{display:flex;flex-wrap:wrap;gap:16px;font-size:var(--fs-label);color:var(--text-soft)}
.vz-comp-key span b{color:var(--ink)}
.vz-addr{margin-top:14px;padding:12px 16px;background:var(--accent-wash);border:1px solid var(--line);font-size:var(--fs-body-sm);color:var(--text)}

/* ── Read-out mode: visual-first keynote, NOT the web page slid out ────── */
body.present .panel[id^="panel-"] .init-eyebrow{font-size:var(--fs-body-sm);margin-bottom:12px}
body.present .init-head .pg-title{font-size:2.4rem}
body.present .init-summary{font-size:1.3rem;line-height:1.5;max-width:60ch;margin-bottom:28px}
body.present .viz{margin-bottom:0}
body.present .init-metrics{margin-bottom:24px}
body.present .init-metrics .m .mnum{font-size:2rem}
body.present .arc,body.present .takeaways,body.present .resources{display:none}
body.present .viz-body{padding:26px}

/* ── Executive Read-Out — keynote slides (storytelling, present mode) ──
   Each slide: one message, vertically balanced, visually anchored.
   Reachable only via the read-out, so tuned for present/keynote. */
.ro{min-height:calc(100vh - 200px);display:flex;flex-direction:column;justify-content:center;gap:26px;padding:8px 0}
.ro-eyebrow{font-family:var(--font-mono);font-size:0.74rem;text-transform:uppercase;letter-spacing:2px;color:var(--accent);font-weight:700}
.ro-headline{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,3.8vw,3.2rem);line-height:1.05;letter-spacing:-0.5px;color:var(--ink);max-width:20ch}
.ro-headline em{font-style:normal;color:var(--accent)}
.ro-note{font-family:var(--font-mono);font-size:0.82rem;color:var(--meta);border-top:1px solid var(--line);padding-top:15px;max-width:78ch;line-height:1.55}
.ro-note b{color:var(--text-soft);font-weight:600}

/* before → after */
.ro-ba{display:grid;grid-template-columns:1fr auto 1fr;gap:0 30px;align-items:start}
.ro-col .ro-col-k{font-family:var(--font-mono);font-size:0.68rem;text-transform:uppercase;letter-spacing:1.2px;font-weight:700;margin-bottom:14px}
.ro-col.before .ro-col-k{color:var(--meta)}
.ro-col.after .ro-col-k{color:var(--accent)}
.ro-col ul{list-style:none;display:flex;flex-direction:column;gap:13px}
.ro-col li{font-size:1.05rem;line-height:1.35}
.ro-col.before li{color:var(--text-soft)}
.ro-col.after li{color:var(--ink);font-weight:550}
.ro-arrow{align-self:center;color:var(--accent);font-size:1.7rem;font-weight:300}
@media(max-width:760px){.ro-ba{grid-template-columns:1fr;gap:20px}.ro-arrow{display:none}}

/* delivered / open groups (SOW) */
.ro-groups{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:820px){.ro-groups{grid-template-columns:1fr}}
.ro-group .rg-k{font-family:var(--font-mono);font-size:0.68rem;text-transform:uppercase;letter-spacing:1px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.ro-group.delivered .rg-k{color:var(--ok)}
.ro-group.open .rg-k{color:var(--warn)}
.ro-group ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.ro-line{display:flex;gap:11px;align-items:baseline;font-size:1.02rem;line-height:1.35}
.ro-line .rl-mark{flex-shrink:0;font-family:var(--font-mono);font-weight:700}
.ro-group.delivered .rl-mark{color:var(--ok)}
.ro-line .rl-t{color:var(--ink);font-weight:600}
.ro-line .rl-s{display:block;color:var(--text-soft);font-size:0.86rem;font-weight:400;margin-top:2px}
.ro-line .badge{flex-shrink:0;align-self:center}

/* hero number (evidence) */
.ro-hero{display:flex;align-items:baseline;gap:24px;flex-wrap:wrap}
.ro-hero .rh-n{font-family:var(--font-display);font-weight:800;font-size:clamp(4rem,10vw,7rem);line-height:0.85;color:var(--ink);letter-spacing:-3px}
.ro-hero .rh-cap{font-family:var(--font-body);font-size:1.3rem;color:var(--text-soft);max-width:22ch;line-height:1.35}
.ro-facts{display:flex;gap:34px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:18px}
.ro-fact .rf-n{font-family:var(--font-mono);font-weight:700;font-size:1.35rem;color:var(--ink)}
.ro-fact .rf-l{font-family:var(--font-mono);font-size:0.66rem;text-transform:uppercase;letter-spacing:0.7px;color:var(--meta);margin-top:4px}

/* the ask */
.ro-offer{display:flex;gap:14px;flex-wrap:wrap}
.ro-offer .ro-card{flex:1;min-width:220px;border:1px solid var(--line);border-top:2px solid var(--accent);background:var(--surface);padding:20px}
.ro-offer .ro-card .oc-n{font-family:var(--font-display);font-weight:800;font-size:1.7rem;color:var(--ink);letter-spacing:-0.5px}
.ro-offer .ro-card .oc-l{font-size:0.94rem;color:var(--text-soft);margin-top:8px;line-height:1.45}
.ro-owners{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ro-owners .ow-k{font-family:var(--font-mono);font-size:0.66rem;text-transform:uppercase;letter-spacing:0.8px;color:var(--meta)}
.ro-owners span.ow{border:1px solid var(--line);padding:7px 13px;font-family:var(--font-mono);font-size:0.72rem;color:var(--ink);font-weight:600}