/* Operator's Starter Kit — shared design system.
   Loaded by all five pages. Page-specific rules stay inline in each file. */
:root{
  /* Colour is authored in OKLCH: lightness is perceptually uniform, so nudging L
     by 5 shifts every hue by the same apparent amount. Each hex is the exact
     sRGB equivalent, kept as a fallback for browsers without OKLCH support
     (pre-2023 Chrome/Firefox). Edit the OKLCH value and update the hex beside it.
     Neutrals are tinted toward the navy ink; nothing here is pure white. */
  --bg:#F2F4F7;               --bg:oklch(96.65% 0.0045 258.3);
  --surface:#FBFCFE;          --surface:oklch(99.09% 0.0029 264.5);
  --surface-2:#E8ECF2;        --surface-2:oklch(94.18% 0.0092 258.3);
  --ink:#0B1220;              --ink:oklch(18.31% 0.0309 263.4);
  --ink-2:#2A3446;            --ink-2:oklch(32.39% 0.035 262);
  --muted:#5A6576;            --muted:oklch(50.37% 0.0303 259);
  --line:rgba(11,18,32,.11);  --line:oklch(18.31% 0.0309 263.4 / .11);
  --line-strong:rgba(11,18,32,.24); --line-strong:oklch(18.31% 0.0309 263.4 / .24);
  --band:#0B1220;             --band:oklch(18.31% 0.0309 263.4);
  --band-ink:#F4F7FA;         --band-ink:oklch(97.47% 0.0051 247.9);
  --band-muted:#8B95A1;       --band-muted:oklch(66.57% 0.0212 252.9);
  --band-line:rgba(139,149,161,.32); --band-line:oklch(66.57% 0.0212 252.9 / .32);
  /* --go is green INK (it has to clear 4.5:1 on --go-soft, not just on the surface);
     --go-fill is a green SURFACE that carries --on-fill text */
  --go:#13732F;               --go:oklch(48.74% 0.1334 147.8);
  --go-fill:#15803D;          --go-fill:oklch(52.73% 0.1371 150.1);
  --go-fill-hi:#11692F;       --go-fill-hi:oklch(45.78% 0.1204 149.2);
  --go-soft:rgba(22,163,74,.12); --go-soft:oklch(62.71% 0.1699 149.2 / .12);
  --stop:#C81E1E;             --stop:oklch(53.49% 0.2026 27.6);
  --stop-fill:#DC2626;        --stop-fill:oklch(57.71% 0.2152 27.3);
  --stop-soft:rgba(220,38,38,.10); --stop-soft:oklch(57.71% 0.2152 27.3 / .10);
  --warn:#A14A06;             --warn:oklch(51.21% 0.1338 49.4);
  --warn-soft:rgba(217,119,6,.13); --warn-soft:oklch(66.58% 0.1574 58.3 / .13);
  --on-fill:#FBFDFB;          --on-fill:oklch(99.2% 0.0034 145.6);
  /* on-band: surfaces that are dark in BOTH themes (the brand band, the signal
     housing, the scorebox). These never flip, so they sit outside the theme blocks. */
  --on-band-ink:#F4F7FA;      --on-band-ink:oklch(97.47% 0.0051 247.9);
  --on-band-go:#22C55E;       --on-band-go:oklch(72.27% 0.192 149.6);
  --on-band-stop:#F87171;     --on-band-stop:oklch(71.06% 0.1661 22.2);
  --on-band-warn:#F5A524;     --on-band-warn:oklch(78.19% 0.1585 72.3);
  --on-band-surface:#1C2638;  --on-band-surface:oklch(26.81% 0.0367 261.8);
  --on-band-line:#2A3650;     --on-band-line:oklch(33.45% 0.049 264.9);
  --shadow:0 1px 2px rgba(11,18,32,.05),0 10px 28px rgba(11,18,32,.07);
  --f-display:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Source Sans 3","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --tap:36px;        /* comfortable pointer target */
  --tap-touch:44px;  /* thumb target, used below 620px */
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0B1220;              --bg:oklch(18.31% 0.0309 263.4);
    --surface:#111B30;         --surface:oklch(22.45% 0.0437 263.9);
    --surface-2:#18233B;       --surface-2:oklch(25.89% 0.048 264.6);
    --ink:#F4F7FA;             --ink:oklch(97.47% 0.0051 247.9);
    --ink-2:#C9D1DC;           --ink-2:oklch(85.78% 0.0176 256.3);
    --muted:#8B95A1;           --muted:oklch(66.57% 0.0212 252.9);
    --line:rgba(139,149,161,.17); --line:oklch(66.57% 0.0212 252.9 / .17);
    --line-strong:rgba(139,149,161,.34); --line-strong:oklch(66.57% 0.0212 252.9 / .34);
    --band:#060B15;            --band:oklch(14.95% 0.0236 261.5);
    --band-line:rgba(139,149,161,.26); --band-line:oklch(66.57% 0.0212 252.9 / .26);
    --go:#22C55E;              --go:oklch(72.27% 0.192 149.6);
    --go-fill:#15803D;         --go-fill:oklch(52.73% 0.1371 150.1);
    --go-fill-hi:#11692F;      --go-fill-hi:oklch(45.78% 0.1204 149.2);
    --go-soft:rgba(34,197,94,.14); --go-soft:oklch(72.27% 0.192 149.6 / .14);
    --stop:#F87171;            --stop:oklch(71.06% 0.1661 22.2);
    --stop-fill:#DC2626;       --stop-fill:oklch(57.71% 0.2152 27.3);
    --stop-soft:rgba(248,113,113,.14); --stop-soft:oklch(71.06% 0.1661 22.2 / .14);
    --warn:#F5A524;            --warn:oklch(78.19% 0.1585 72.3);
    --warn-soft:rgba(245,165,36,.14); --warn-soft:oklch(78.19% 0.1585 72.3 / .14);
    --shadow:0 1px 0 rgba(255,255,255,.03),0 14px 34px rgba(0,0,0,.38);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0B1220;              --bg:oklch(18.31% 0.0309 263.4);
  --surface:#111B30;         --surface:oklch(22.45% 0.0437 263.9);
  --surface-2:#18233B;       --surface-2:oklch(25.89% 0.048 264.6);
  --ink:#F4F7FA;             --ink:oklch(97.47% 0.0051 247.9);
  --ink-2:#C9D1DC;           --ink-2:oklch(85.78% 0.0176 256.3);
  --muted:#8B95A1;           --muted:oklch(66.57% 0.0212 252.9);
  --line:rgba(139,149,161,.17); --line:oklch(66.57% 0.0212 252.9 / .17);
  --line-strong:rgba(139,149,161,.34); --line-strong:oklch(66.57% 0.0212 252.9 / .34);
  --band:#060B15;            --band:oklch(14.95% 0.0236 261.5);
  --band-line:rgba(139,149,161,.26); --band-line:oklch(66.57% 0.0212 252.9 / .26);
  --go:#22C55E;              --go:oklch(72.27% 0.192 149.6);
  --go-fill:#15803D;         --go-fill:oklch(52.73% 0.1371 150.1);
  --go-fill-hi:#11692F;      --go-fill-hi:oklch(45.78% 0.1204 149.2);
  --go-soft:rgba(34,197,94,.14); --go-soft:oklch(72.27% 0.192 149.6 / .14);
  --stop:#F87171;            --stop:oklch(71.06% 0.1661 22.2);
  --stop-fill:#DC2626;       --stop-fill:oklch(57.71% 0.2152 27.3);
  --stop-soft:rgba(248,113,113,.14); --stop-soft:oklch(71.06% 0.1661 22.2 / .14);
  --warn:#F5A524;            --warn:oklch(78.19% 0.1585 72.3);
  --warn-soft:rgba(245,165,36,.14); --warn-soft:oklch(78.19% 0.1585 72.3 / .14);
  --shadow:0 1px 0 rgba(255,255,255,.03),0 14px 34px rgba(0,0,0,.38);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--f-body);-webkit-font-smoothing:antialiased}
a{color:var(--go)}
/* explicit weight so no heading falls back to the UA's bold and pulls in a
   Montserrat weight we don't load */
h1,h2,h3{font-family:var(--f-display);font-weight:800;text-wrap:balance;margin:0;color:var(--ink)}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--go);outline-offset:2px}

/* skip link: off-screen until focused, so keyboard users can pass the Loop rail */
.skip{position:absolute;top:0;left:12px;z-index:50;transform:translateY(-200%);
  background:var(--surface);color:var(--ink);border:1px solid var(--go);border-top:0;
  border-radius:0 0 8px 8px;padding:12px 16px;text-decoration:none;
  font:700 14px/1 var(--f-body);transition:transform .15s ease}
.skip:focus{transform:translateY(0)}
main:focus{outline:none}

/* brand band + Operator's Loop rail */
.band{background:var(--band);color:var(--band-ink);padding-block:12px}
.band-in{max-width:1120px;margin:0 auto;padding-inline:20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px}
.brand{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:5px 10px;text-decoration:none;color:var(--band-ink)}
/* the ES mark spans both lines of the wordmark */
.brand-mark{grid-row:1 / span 2;display:block;width:auto;height:30px}
.brand b{font:900 15px/1 var(--f-display);letter-spacing:.16em}
.brand span{font:500 11px/1 var(--f-mono);color:var(--band-muted);letter-spacing:.05em}
.brand b,.brand span{grid-column:2}
.brand span i{font-style:normal}
.loop{display:flex;flex-wrap:wrap;align-items:center;gap:5px;font:700 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.loop a{display:flex;align-items:center;justify-content:center;min-height:var(--tap);padding-inline:12px;border-radius:999px;border:1px solid var(--band-line);color:var(--band-muted);text-decoration:none;transition:color .15s,border-color .15s}
.loop a:hover{color:var(--band-ink);border-color:var(--band-muted)}
.loop a.on{background:var(--go-fill);border-color:var(--go-fill);color:var(--on-fill)}
.loop .ar{color:var(--band-muted);opacity:.6}
.themebtn{display:inline-flex;align-items:center;min-height:var(--tap);background:transparent;border:1px solid var(--band-line);color:var(--band-muted);border-radius:8px;padding-inline:12px;font:700 11px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.themebtn:hover{color:var(--band-ink)}

/* page frame */
.wrap{max-width:1120px;margin:0 auto;padding-inline:20px;padding-block:30px 40px}
.intro{display:grid;gap:10px;margin-bottom:26px}
.eyebrow{font:700 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--go)}
.intro h1{font-weight:800;font-size:clamp(30px,4.6vw,46px);line-height:1.05;letter-spacing:-.02em}
.lede{max-width:64ch;color:var(--ink-2);font-size:18px}
.grid2{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:22px;align-items:start}
@media (max-width:860px){.grid2{grid-template-columns:minmax(0,1fr)}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:var(--shadow)}
.panel h2{font-size:18px;font-weight:800;letter-spacing:-.01em}
.sticky{position:sticky;top:calc(env(safe-area-inset-top,0px) + 16px)}
@media (max-width:860px){.sticky{position:static}}
.stack{display:grid;gap:16px}

/* form atoms */
.field{display:grid;gap:6px}
.field>label,.lbl{font:600 15px/1.3 var(--f-body);color:var(--ink)}
.hint{font-size:14px;color:var(--muted);line-height:1.45}
.inp{display:flex;align-items:center;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);overflow:hidden}
.inp:focus-within{outline:2px solid var(--go);outline-offset:1px}
.inp>span{padding-inline:12px 0;color:var(--muted);font:500 16px/1 var(--f-mono)}
.inp>span.suf{padding-inline:0 12px}
.inp input{flex:1;min-width:0;border:0;background:transparent;padding:11px 12px;font:500 17px/1.2 var(--f-mono);font-variant-numeric:tabular-nums;outline:none}
input.txt,textarea.txt{width:100%;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);padding:10px 12px;font:400 16px/1.4 var(--f-body)}
textarea.txt{resize:vertical;min-height:64px}
input.txt:focus,textarea.txt:focus{outline:2px solid var(--go);outline-offset:1px;border-color:transparent}
input.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.seg{display:inline-flex;flex-wrap:wrap;width:max-content;max-width:100%;justify-self:start;border:1px solid var(--line-strong);border-radius:10px;overflow:hidden;background:var(--surface)}
.seg button{border:0;background:transparent;min-height:var(--tap);padding:9px 14px;font:600 15px/1.1 var(--f-body);cursor:pointer;color:var(--ink-2)}
.seg button+button{border-left:1px solid var(--line-strong)}
.seg button:hover{background:var(--surface-2)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.seg button.yes[aria-pressed="true"]{background:var(--go-fill);color:var(--on-fill)}
.seg button.no[aria-pressed="true"]{background:var(--stop-fill);color:var(--on-fill)}
/* body face, not the display face: these are controls, not headings */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);border-radius:10px;border:1px solid transparent;padding:11px 16px;font:700 15px/1.1 var(--f-body);letter-spacing:.01em;cursor:pointer;text-decoration:none}
.btn.primary{background:var(--go-fill);color:var(--on-fill)}
.btn.primary:hover{background:var(--go-fill-hi)}
.btn.primary:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:transparent;border-color:var(--line-strong);color:var(--ink)}
.btn.ghost:hover{background:var(--surface-2)}
.btn.small{padding:8px 12px;font-size:13px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* verdict + chips */
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 10px;font:700 12px/1.2 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.chip.ok{background:var(--go-soft);color:var(--go)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.bad{background:var(--stop-soft);color:var(--stop)}
.chip.idle{background:var(--surface-2);color:var(--muted)}
.callout{border-radius:10px;padding:14px 16px;background:var(--surface-2);display:grid;gap:4px}
.callout.ok{background:var(--go-soft)}
.callout.warn{background:var(--warn-soft)}
.callout.bad{background:var(--stop-soft)}
.callout strong{font:800 16px/1.3 var(--f-display)}
.callout.ok strong{color:var(--go)}.callout.warn strong{color:var(--warn)}.callout.bad strong{color:var(--stop)}
.example{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;border:1px dashed var(--line-strong);border-radius:10px;padding:10px 14px;margin-bottom:18px;font-size:15px;color:var(--ink-2)}
.example b{font:700 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--warn);margin-right:8px}

/* handoff strip: a value carried in from another tool in the Loop */
.handoff{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;border:1px solid var(--go);border-radius:10px;padding:11px 14px;margin-bottom:18px;background:var(--go-soft);font-size:15px;line-height:1.45;color:var(--ink)}
.handoff b{font:700 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--go);margin-right:8px}
.handoff .btn{flex:0 0 auto}
.handoff.done{border-color:var(--line-strong);background:var(--surface-2)}
.handoff.done b{color:var(--muted)}

/* footer */
.foot{max-width:1120px;margin:0 auto;padding-inline:20px;padding-block:8px 36px;display:grid;gap:10px;color:var(--muted);font-size:14px}
.foot .back{justify-self:start;display:inline-flex;align-items:center;min-height:var(--tap);font:700 13px/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.foot p{max-width:72ch}
.foot .savenote{color:var(--ink-2)}
/* backup panel: the warning, two buttons, and room for the confirm or undo */
.backup{display:grid;gap:10px}
/* the shared risk profile editor */
/* auto-fit, not a fixed 3-up: the same editor sits full-width on the hub and in Plan's narrow part 4 */
.prof{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px 18px}
/* disclosure toggles are tap targets too */
@media (max-width:620px){details > summary{min-height:var(--tap-touch);display:flex;align-items:center}}
.prof .hint{margin-top:6px}
/* fields in one row share a height; keep each input its natural size instead of stretching */
.prof .field{align-content:start;align-self:start}
.prof .hint.warnline{color:var(--stop)}
/* optional live prices: the customer's own paper key */
.live{display:grid;gap:12px;max-width:720px}
.live .hint.warnline{color:var(--stop)}
.live-on{display:grid;gap:2px;color:var(--ink-2)}
.live-on b{color:var(--go);font-weight:700}
.live-steps{margin:0;padding-left:20px;display:grid;gap:6px;color:var(--ink-2);font-size:15px;line-height:1.45}
.live-steps a{color:var(--go)}
.linkbtn{border:0;background:none;padding:0;min-height:24px;font:inherit;font-weight:600;color:var(--go);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.bk-msg:empty{display:none}
.bk-msg .row{margin-top:8px}

/* undo bar: shared by every reset that wipes the user's own work */
.undo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;
  border:1px solid var(--line-strong);border-radius:10px;background:var(--surface-2);
  padding:10px 14px;margin-bottom:14px;font-size:15px}
.undo b{font:700 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-right:8px}

/* dock: on phones the verdict and the next action ride at the bottom of the
   screen, so the answer is never a thousand pixels below the question */
.dock{display:none}
@media (max-width:860px){
  body.has-dock{padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}
  .dock{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
    background:var(--surface);border-top:1px solid var(--line-strong);box-shadow:0 -8px 24px rgba(11,18,32,.12)}
  .dock-state{display:flex;align-items:center;gap:10px;min-width:0}
  .dock-text{display:grid;gap:2px;min-width:0}
  .dock-text b{font:700 16px/1.15 var(--f-body);color:var(--ink);font-variant-numeric:tabular-nums}
  .dock-text b.ok{color:var(--go)}.dock-text b.bad{color:var(--stop)}.dock-text b.warn{color:var(--warn)}
  .dock-text span{font-size:13px;line-height:1.3;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dock .btn{flex:0 0 auto;min-height:var(--tap-touch)}
  .dock-lamps{display:flex;gap:4px;flex:0 0 auto}
  .dock-lamps i{width:14px;height:14px;border-radius:50%;background:var(--surface-2);border:2px solid var(--line-strong)}
  .dock-lamps i.g{background:var(--go);border-color:var(--go)}
  .dock-lamps i.r{background:var(--stop);border-color:var(--stop)}
  .dock-lamps i.a{background:var(--warn);border-color:var(--warn)}
}

/* lede: two lines on phones, the rest behind "More" */
.lede-more{display:none}
@media (max-width:620px){
  .intro h1{font-size:28px}
  .intro .lede:not(.open){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .lede-more{display:inline-flex;align-items:center;justify-self:start;min-height:var(--tap-touch);margin-top:-6px;padding:0;
    border:0;background:none;color:var(--go);font:700 15px/1 var(--f-body);cursor:pointer}
}

/* band on phones: brand + theme on one row, the Loop as a full-width 4-up */
@media (max-width:620px){
  .band-in{gap:10px 12px}
  .brand{order:1;flex:1 1 auto;min-width:0}
  .brand span i{display:none}
  .themebtn{order:2;flex:0 0 auto;min-height:var(--tap-touch)}
  .loop{order:3;flex:1 0 100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .loop .ar{display:none}
  .loop a{min-height:var(--tap-touch);padding-inline:4px;text-align:center}
}
/* every control a thumb hits, not just the band and dock: Yes/No is the core
   interaction of two of the four tools */
@media (max-width:620px){
  .seg button,.btn,.btn.small{min-height:var(--tap-touch)}
}
/* 11px still fits "SCORE IT" at 320px once the tracking tightens; 10px was never needed */
@media (max-width:400px){.loop a{letter-spacing:.04em;padding-inline:2px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* the price ladder: every price on one line, to scale, risk and reward shaded */
.ladder{padding:40px 10px 58px}
.lad-track{position:relative;height:6px;border-radius:99px;background:var(--line-strong)}
.lad-zone{position:absolute;top:0;bottom:0;border-radius:99px;opacity:.45}
.lad-zone.risk{background:var(--stop)}
.lad-zone.reward{background:var(--go)}
.lad-m{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid var(--surface);background:var(--ink-2)}
.lad-m.stop{background:var(--stop)}.lad-m.lvl{background:var(--warn)}.lad-m.t1,.lad-m.t2{background:var(--go)}
.lad-m.now{width:20px;height:20px;margin:-10px 0 0 -10px;background:var(--surface);border:3px solid var(--ink);box-shadow:0 0 0 4px var(--go-soft);z-index:1}
.lad-tag{position:absolute;transform:translateX(-50%);display:grid;justify-items:center;gap:1px;font:600 12px/1.2 var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink-2)}
.lad-tag b{font:700 10px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.lad-tag.l{transform:none;justify-items:start}.lad-tag.r{transform:translateX(-100%);justify-items:end}
.lad-tag.bot{top:14px}.lad-tag.bot.low{top:44px}
.lad-tag.top{bottom:16px}
.lad-tag.stop b{color:var(--stop)}.lad-tag.lvl b{color:var(--warn)}.lad-tag.t1 b,.lad-tag.t2 b{color:var(--go)}
.lad-tag.now{color:var(--ink);font-weight:700}
.lad-note{font-size:14px;line-height:1.45;color:var(--ink-2)}
.lad-note b.ok{color:var(--go)}.lad-note b.bad{color:var(--stop)}
@media (max-width:400px){.lad-tag{font-size:11px}.lad-tag b{font-size:9px}.ladder{padding-inline:4px}}