:root{
  --bg:#0f1419; --panel:#171d26; --panel2:#1d2530; --line:#2a3543;
  --txt:#e6edf3; --muted:#8b98a8; --accent:#4f9cf9; --good:#3fb950; --bad:#f85149; --warn:#d29922;
}
*{box-sizing:border-box}
body{margin:0;font:13px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--txt)}
h1{font-size:18px;margin:0}
h2{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 10px;border-bottom:1px solid var(--line);padding-bottom:6px}
h3{font-size:12px;margin:0 0 6px;color:var(--accent)}
header{padding:14px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--panel);position:relative}
header .sub{color:var(--muted);font-size:12px}
.wrap{display:grid;grid-template-columns:380px 1fr;gap:0;align-items:start}
.config{padding:16px;border-right:1px solid var(--line);height:calc(100vh - 56px);overflow:auto;background:var(--panel)}
.results{padding:16px;height:calc(100vh - 56px);overflow:auto}
.sect{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:12px;margin-bottom:12px}
.row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:5px 0}
.row label{color:var(--muted);flex:1}
input[type=number],input[type=text]{background:#0c1117;border:1px solid var(--line);color:var(--txt);border-radius:5px;padding:5px 7px;width:110px;text-align:right;font:inherit}
input[type=text]{text-align:left;width:120px}
input.sm{width:78px}
select{background:#0c1117;border:1px solid var(--line);color:var(--txt);border-radius:5px;padding:4px;font:inherit}
input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}
button{background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:5px;padding:5px 10px;cursor:pointer;font:inherit}
button:hover{border-color:var(--accent)}
button.primary{background:var(--accent);border-color:var(--accent);color:#04101f;font-weight:600}
button.mini{padding:1px 7px;font-size:14px;line-height:1.2}
.person{border:1px solid var(--line);border-radius:6px;padding:8px;margin-bottom:8px;background:#0c1117;cursor:pointer}
.person.plotsel{border-color:var(--warn);box-shadow:0 0 0 1px var(--warn) inset}
.plotbadge{font-size:10px;color:var(--warn);white-space:nowrap}
.person .phead{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.person .phead input[type=text]{flex:1;width:auto}
.person .phead .enable{display:flex;align-items:center;cursor:pointer}
.person.disabled{opacity:.45}
.person.disabled .phead input[type=text]{text-decoration:line-through}
.step{display:flex;align-items:center;gap:4px;margin:3px 0;font-size:12px}
.step select{font-size:11px}
.chips{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-top:4px}
.chips label{display:flex;align-items:center;gap:4px;cursor:pointer}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.kpi{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:12px}
.kpi .v{font-size:22px;font-weight:700;margin-top:2px}
.kpi .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.kpi .note{font-size:11px;color:var(--muted);margin-top:3px}
.pos{color:var(--good)} .neg{color:var(--bad)} .warnc{color:var(--warn)}
table{border-collapse:collapse;width:100%;font-size:11.5px;font-variant-numeric:tabular-nums}
th,td{padding:4px 7px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--line)}
th{position:sticky;top:0;background:var(--panel);color:var(--muted);font-weight:600;text-transform:uppercase;font-size:10px;letter-spacing:.03em;z-index:1}
td.m,th.m{text-align:left;position:sticky;left:0;background:var(--bg);z-index:2}
th.m{z-index:3;background:var(--panel)}
tr:hover td{background:#1a2230}
tr:hover td.m{background:#1a2230}
.tablewrap{overflow:auto;max-height:46vh;border:1px solid var(--line);border-radius:8px}
.sep{border-left:2px solid var(--line)}
/* a projection month the hire schedule can't cover */
tr.warnrow td{background:#2a1c16}
tr.warnrow td.m{background:#2a1c16}
/* cells edited in place (the starting pie's raw-dollar columns) — tinted so it's obvious
   which half of the table is input and which half is derived */
td.ed{padding:2px 5px;background:#131b26}
tr:hover td.ed{background:#1e2836}
td.ed input[type=number]{width:92px;padding:3px 6px;font:inherit;font-variant-numeric:tabular-nums}
th.ed{color:var(--accent)}
.dot{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:7px;vertical-align:middle}
code{font-size:11px;background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:1px 4px}
.hint{font-size:11px;color:var(--muted);margin:4px 0 0;line-height:1.4}
.grp{margin:10px 0 4px;font-size:11px;color:var(--accent);text-transform:uppercase;letter-spacing:.05em}
svg text{fill:var(--muted);font-size:10px}
.barwrap{display:flex;height:22px;border-radius:4px;overflow:hidden;border:1px solid var(--line);margin-top:6px}
.barseg{display:flex;align-items:center;justify-content:center;font-size:10px;color:#04101f;font-weight:600;overflow:hidden}
.toolbar{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.tabs{display:flex;gap:4px}
.tab{padding:6px 14px;border:1px solid var(--line);border-radius:6px;background:var(--panel2);color:var(--muted);cursor:pointer;font:inherit}
.tab:hover{border-color:var(--accent)}
.tab.active{background:var(--accent);border-color:var(--accent);color:#04101f;font-weight:600}
.config{height:calc(100vh - 104px)}
.results{height:calc(100vh - 104px)}
/* ---------- simple participant view ---------- */
/* The simple view fills whatever the header leaves rather than subtracting a hardcoded header
   height — the header now carries the pickers and grows a row on narrow screens. Scoped to
   simple mode so the authoring grid's own height math is untouched. */
#app:has(.simple){display:flex;flex-direction:column;height:100vh}
.simple{flex:1;min-height:0;overflow:auto}
.simple-inner{max-width:920px;margin:0 auto;padding:28px 20px 80px}
.simple-h{font-size:24px;margin:0 0 6px}
/* The simple view's two pickers, hoisted into the header so they survive scrolling.
   Absolutely centered on the header's own midline rather than flex-centered between the
   title and the escape-hatch button, which would sit off-center by half their width difference. */
.nav-pick{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:8px;white-space:nowrap}
.nav-pick label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.nav-pick select{padding:5px 8px;font-size:13px;max-width:340px}
/* scenario names are long on purpose (pace + retainer size) — keep the closed picker wide enough to read them */
.nav-pick select.scen-pick{min-width:300px}
/* Too narrow to center between the flanks: drop onto a second header row instead of overlapping.
   The tighter row-gap is load-bearing — .simple's height subtracts a fixed 104px, and the
   header's default 16px gap would push the two-row header past that and overflow the viewport. */
@media (max-width:1180px){
  header{row-gap:8px}
  .nav-pick{position:static;transform:none;order:3;flex-basis:100%;justify-content:center}
}
.simple-prompt{font-size:16px;color:var(--muted);margin-top:24px}
.simple-sec{margin-top:36px;font-size:13px}
/* the shared-context intro (numbers-free, hardcoded in the component) */
.intro{font-size:14.5px;line-height:1.6;color:var(--txt);margin-top:10px}
.intro p{margin:0 0 10px}
.intro p:last-child{margin-bottom:0}
/* the authored scenario commentary */
.obs-stale{font-size:13px;color:var(--warn);border:1px solid var(--warn);border-radius:8px;
  padding:8px 12px;margin:10px 0 0;line-height:1.45}
.obs{margin:10px 0 0;padding:0;list-style:none;font-size:14.5px;line-height:1.5}
.obs li{margin:6px 0;padding-left:16px;position:relative}
.obs li::before{content:'•';position:absolute;left:2px;color:var(--accent)}
/* the scenario tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.tile{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:16px}
.tile .t-l{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.tile .t-big{font-size:21px;font-weight:800;margin:7px 0 5px}
.tile .t-sub{font-size:12.5px;color:var(--muted);line-height:1.45}
/* the road to breakeven */
.roadlegend{display:flex;gap:18px;font-size:12px;color:var(--muted);margin-bottom:8px}
.roadlegend .sw{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.roadlegend .sw.burn{background:rgba(248,81,73,.3);border:1px solid rgba(248,81,73,.55)}
.roadlegend .sw.prof{background:rgba(63,185,80,.28);border:1px solid rgba(63,185,80,.55)}
.roadlegend .callleg{color:var(--warn)}
.road{display:flex;gap:4px}
.road-col{flex:1;min-width:0}
.road-cell{position:relative;height:34px;border-radius:5px;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;color:var(--txt);background:rgba(248,81,73,.3);border:1px solid rgba(248,81,73,.55)}
.road-cell.prof{background:rgba(63,185,80,.28);border-color:rgba(63,185,80,.55)}
.road-dot{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:9px;height:9px;border-radius:50%;
  background:#fff;border:2px solid var(--bg)}
.road-pl{height:16px;margin-top:4px;font-size:11.5px;font-weight:600;text-align:center;white-space:nowrap}
.road-pl.neg{color:var(--bad)} .road-pl.pos{color:var(--good)}
.road-call{height:16px;font-size:11.5px;font-weight:700;color:var(--warn);text-align:center;white-space:nowrap}
.road-call.zero{color:var(--muted);font-weight:400;opacity:.6}
.road-bank{height:16px;font-size:11.5px;font-weight:600;color:var(--txt);text-align:center;white-space:nowrap}
.road-bank.neg{color:var(--bad)}
.road-clients{height:16px;font-size:11.5px;color:var(--muted);text-align:center;white-space:nowrap}
.road-arr{height:16px;font-size:11.5px;color:var(--muted);text-align:center;white-space:nowrap}
.road-ai{height:16px;font-size:11.5px;color:var(--muted);text-align:center;white-space:nowrap}
.road-perfcmo{height:16px;font-size:11.5px;color:var(--muted);text-align:center;white-space:nowrap}
.road-hire{height:16px;font-size:11.5px;font-weight:700;color:var(--accent);text-align:center;white-space:nowrap}
.road-comm{height:16px;font-size:11.5px;color:var(--muted);text-align:center;white-space:nowrap}
.road-comm.zero{opacity:.6}
.road-mkt{height:16px;font-size:11.5px;color:var(--muted);text-align:center;white-space:nowrap}
.road-pay{height:16px;font-size:11.5px;font-weight:600;color:var(--txt);text-align:center;white-space:nowrap}
.road-pay.zero{color:var(--muted);font-weight:400;opacity:.6}
.roadlegend .hireleg{color:var(--accent)}
/* left gutter naming the rows under the month cells */
.road-col.road-lbls{flex:0 0 auto;padding-right:4px}
.road-lbls .lbl{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  font-weight:600;text-align:right;white-space:nowrap}
.road-lbls .road-cell.lbl{background:none;border:none;justify-content:flex-end}
.road-tip{display:none;position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);z-index:10;
  background:#0c1117;border:1px solid var(--line);border-radius:6px;padding:8px 11px;box-shadow:0 4px 14px rgba(0,0,0,.45);
  font-size:12px;font-weight:400;line-height:1.5;text-align:left;white-space:nowrap}
.road-tip .mutedln{color:var(--muted)}
.road-cell:hover .road-tip{display:block}
.miles{margin:14px 0 0;padding:0;list-style:none;font-size:14.5px;line-height:1.5}
.miles li{margin:5px 0}
.road-cash{font-size:14.5px;color:var(--txt);margin:12px 0 0;padding-top:10px;border-top:1px solid var(--line)}
/* the comparison table */
.cmp{width:100%;border-collapse:collapse}
.cmp th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:right;padding:8px 12px;border-bottom:1px solid var(--line)}
.cmp td{font-size:15px;text-align:right;padding:11px 12px;border-bottom:1px solid var(--line)}
.cmp td.m{text-align:left;font-weight:600}
.cmp td.pct{font-size:18px;font-weight:800}
/* your row is the headline now (the hero card is gone) — make it unmissable */
.cmp tr.mine td{background:#10243d;color:var(--txt);border-top:1px solid var(--accent);border-bottom:1px solid var(--accent)}
.cmp tr.mine td:first-child{border-left:3px solid var(--accent)}
.cmp tr.mine td.pct{color:var(--accent);font-size:22px}
.youtag{display:inline-block;margin-left:8px;padding:1px 7px;border:1px solid var(--accent);border-radius:9px;
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);vertical-align:middle}
.cmp .dot{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:8px;vertical-align:middle}
/* the plain-words comp plan */
.offer{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:18px 22px;font-size:15px;line-height:1.6}
.offer p{margin:0 0 12px}
.offer p:last-child{margin-bottom:0}
.offer-final{border-top:1px solid var(--line);padding-top:14px;font-size:16px}
/* ---------- reusable modal ---------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:flex-start;justify-content:center;padding:60px 16px;z-index:100;overflow:auto}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:10px;width:100%;max-width:640px;box-shadow:0 20px 60px rgba(0,0,0,.5);display:flex;flex-direction:column;max-height:calc(100vh - 120px)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)}
.modal-head h2{border:0;margin:0;padding:0;font-size:15px;text-transform:none;letter-spacing:0;color:var(--txt)}
.modal-x{background:transparent;border:0;color:var(--muted);font-size:16px;cursor:pointer;padding:2px 8px}
.modal-x:hover{color:var(--txt)}
.modal-body{padding:16px 18px;overflow:auto}
.modal-foot{display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid var(--line)}
.modal-fade-enter-active,.modal-fade-leave-active{transition:opacity .15s}
.modal-fade-enter-from,.modal-fade-leave-to{opacity:0}
/* scenario manager (first use of the modal) */
.scenlist{display:flex;flex-direction:column;gap:10px}
.scenrow{border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--panel2)}
.scenrow.active{border-color:var(--accent)}
.scenrow-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.scenname{flex:1;width:auto}
.activebadge{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--accent);border:1px solid var(--accent);border-radius:4px;padding:3px 7px;white-space:nowrap}
.scendesc-edit{width:100%;background:#0c1117;border:1px solid var(--line);color:var(--txt);border-radius:5px;padding:6px 8px;font:inherit;line-height:1.4;resize:vertical}

/* collapsible accordion for the left config cards (one open at a time) */
.config .sect > h2{cursor:pointer;user-select:none}
.config .sect > h2::after{content:'▾';float:right;color:var(--muted);font-size:11px}
.config .sect.collapsed > h2{margin-bottom:0;border-bottom:0;padding-bottom:0}
.config .sect.collapsed > h2::after{content:'▸'}
.config .sect.collapsed > *:not(h2){display:none}

/* ===== TEMP: all-scenarios sweep table (DELETE ME with the sweep block in
   components/simple-tab.js). Tuning aid only, not part of the participant view. ===== */
.sweep-wrap{margin:14px 0 24px;border:1px solid var(--warn);border-radius:8px;overflow-x:auto}
.sweep-hd{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--warn);background:#241f10;padding:7px 12px;border-bottom:1px solid var(--line)}
table.sweep{font-size:12px;background:var(--panel);min-width:100%;width:auto}
table.sweep th{font-size:10px;padding:6px 6px;white-space:nowrap}
table.sweep td{font-size:12px;padding:6px 6px;white-space:nowrap}
table.sweep td.m{font-weight:500;font-size:12px}
table.sweep td.pct{font-size:14px;font-weight:700}
table.sweep tbody tr{cursor:pointer}
table.sweep tbody tr:hover td{background:var(--panel2)}
table.sweep tr.mine td{background:#10243d;border-top:1px solid var(--accent);border-bottom:1px solid var(--accent)}
table.sweep tr.mine td:first-child{border-left:3px solid var(--accent)}
table.sweep tr.mine td.pct{font-size:14px}
table.sweep .st-in{color:var(--good)}
table.sweep .st-below{color:var(--warn)}
table.sweep .st-above{color:var(--bad)}
.sweep-wrap .hint{padding:0 12px 10px}

/* ---- boot overlay (auth.js) --------------------------------------------
   Replaces the old PIN gate's #app{visibility:hidden} blackout. The shell
   paints first and this sits on top of it, so a Cloud Run cold start reads as
   "working on it" rather than "broken". Three failure modes share the box and
   differ only in copy and button, because the useful next action differs:
   wait, sign in, or ask for access. */
.boot{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:rgba(15,20,25,.94);backdrop-filter:blur(2px)}
.boot .boot-box{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:28px 32px;max-width:420px}
.boot h2{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  margin:0;border:0;padding:0}
.boot .boot-msg{color:var(--muted);font-size:12px;line-height:1.5;margin:0}
.boot .boot-msg:empty{display:none}
.boot .boot-act:empty{display:none}
.boot .boot-btn{background:var(--accent);border:1px solid var(--accent);color:#04101f;font-weight:600;
  border-radius:5px;padding:6px 14px;cursor:pointer;font:inherit;font-weight:600}
.boot .boot-spin{width:22px;height:22px;border:2px solid var(--line);border-top-color:var(--accent);
  border-radius:50%;animation:boot-spin .8s linear infinite}
@keyframes boot-spin{to{transform:rotate(360deg)}}
/* Respect a reduced-motion preference: keep the ring, drop the rotation. */
@media (prefers-reduced-motion:reduce){.boot .boot-spin{animation:none}}