/* Outbreak Crisis Manager, demo edition.
   Visual system: near-black ground, cool grey type,
   Georgia for titles and quotations, system sans for the interface, a tracked monospace
   eyebrow, teal as the working accent, amber for money and warmth, red only for cases,
   losses and alerts. Illustrations run full-bleed under a scrim and are always desaturated. */

:root{
  --bg:#05080c; --bg2:#0a1118; --txt:#eef4fa; --dim:#bccbd8; --dim2:#8a9cad; --line:#2a3947; --line2:#1c2733;
  --card:rgba(13,22,31,.80); --card2:rgba(9,16,24,.86);
  --teal:#34d3c2; --teal-d:#0e7c74; --teal-g:rgba(52,211,194,.35);
  --amber:#f5b342; --amber-g:rgba(245,179,66,.35);
  --red:#ef5d5d; --red-g:rgba(239,93,93,.35);
  --green:#52e08a; --violet:#a78bfa; --blue:#5fa8ff;
  --health:#34d3c2; --economy:#f5b342; --trust:#5fa8ff; --resources:#a78bfa; --equity:#52e08a;
  --serif:Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,Menlo,"SF Mono","Courier New",monospace;
  --hud:60px; --ribbon:26px;
}
*{box-sizing:border-box}
html{font-size:16px;color-scheme:dark}
body{margin:0;padding-top:var(--ribbon);background:var(--bg);color:var(--txt);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:var(--teal)}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;margin:0;line-height:1.15}
p{margin:0 0 .75rem}
p:last-child{margin-bottom:0}
[hidden]{display:none!important}
::selection{background:var(--teal-d);color:#fff}

/* ---- backdrop: an illustration under a scrim, then a vignette ---- */
#backdrop{position:fixed;inset:0;z-index:0;background:var(--bg2) center/cover no-repeat;filter:saturate(.85) brightness(.82);transition:opacity 1.3s ease,background-image .6s ease}
#backdrop.plain{background-image:radial-gradient(120% 80% at 70% 20%,#14303a 0%,#0a1118 55%,#05080c 100%)}
#grade{position:fixed;inset:0;z-index:1;pointer-events:none;mix-blend-mode:soft-light;opacity:.75;transition:background 1.6s ease}
/* The scrim is lightest in the middle band so the illustration shows through between the
   cards; the cards themselves carry the contrast for text. */
#scrim{position:fixed;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(4,7,11,.78) 0%,rgba(4,7,11,.38) 30%,rgba(4,7,11,.38) 70%,rgba(4,7,11,.88) 100%)}
/* On the title screen the type sits at the lower left, so the scrim is heaviest there and
   the right of the picture stays open. */
#scrim.s-title{background:linear-gradient(90deg,rgba(4,7,11,.92) 0%,rgba(4,7,11,.78) 40%,rgba(4,7,11,.3) 75%,rgba(4,7,11,.15) 100%),linear-gradient(180deg,rgba(4,7,11,.35) 0%,transparent 35%,transparent 60%,rgba(4,7,11,.75) 100%)}
#vignette{position:fixed;inset:0;z-index:3;pointer-events:none;background:radial-gradient(120% 100% at 50% 45%,transparent 50%,rgba(3,6,10,.5) 100%)}
#app{position:relative;z-index:10}

/* ---- type ---- */
.eyebrow{font-family:var(--mono);font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;font-weight:700;color:var(--teal)}
.eyebrow.amber{color:var(--amber)}
.eyebrow.dim{color:var(--dim2)}
.eyebrow.red{color:var(--red)}
.title{font-size:clamp(2.4rem,6vw,4.4rem);line-height:1.02;letter-spacing:-.01em;background:linear-gradient(180deg,#fff 30%,#7fa6b8);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-family:var(--serif);font-size:1.15rem;color:var(--dim);max-width:60ch;line-height:1.55}
.h2{font-size:1.5rem;color:var(--txt)}
.h3{font-size:1.15rem;color:var(--txt)}
.muted{color:var(--dim2)}
.small{font-size:.85rem}
.num{font-variant-numeric:tabular-nums}
.serif{font-family:var(--serif)}

/* ---- layout ---- */
.wrap{max-width:1180px;margin:0 auto;padding:0 1.25rem}
.screen{min-height:calc(100vh - var(--ribbon));padding:2rem 0 4rem}
.stack{display:flex;flex-direction:column;gap:1rem}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
.five{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.6rem}
@media (max-width:860px){.two,.three{grid-template-columns:1fr}.five{grid-template-columns:repeat(2,1fr)}}

.card{background:var(--card);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:1.1rem 1.25rem;box-shadow:0 12px 30px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04);backdrop-filter:blur(12px) saturate(1.1)}
.card.deep{background:var(--card2)}
.card.thin{padding:.8rem 1rem}
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.6rem}
.rule{height:1px;background:var(--line);margin:.9rem 0}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01));color:var(--txt);border-radius:10px;padding:.6rem 1rem;font-weight:600;transition:border-color .2s,background .2s,transform .1s}
.btn:hover{border-color:var(--teal);background:rgba(52,211,194,.08)}
.btn:active{transform:translateY(1px)}
.sheet a.btn{text-decoration:none}
.btn.primary{border-color:var(--teal-d);background:linear-gradient(180deg,rgba(52,211,194,.22),rgba(52,211,194,.08));color:#dffbf6;font-family:var(--serif);font-size:1.05rem;padding:.75rem 1.4rem}
.btn.primary:hover{border-color:var(--teal)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--dim)}
.btn.ghost:hover{color:var(--txt);border-color:var(--line)}
.btn.danger{border-color:rgba(239,93,93,.4)}
.btn.danger:hover{border-color:var(--red);background:rgba(239,93,93,.08)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.btn.block{width:100%;justify-content:center}
.btnrow{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}

/* ---- chips and tags ---- */
.tag{display:inline-block;font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;padding:.2rem .5rem;border-radius:6px;border:1px solid var(--line);color:var(--dim)}
.tag.teal{color:var(--teal);border-color:rgba(52,211,194,.4)}
.tag.amber{color:var(--amber);border-color:rgba(245,179,66,.4)}
.tag.red{color:#ff9c9c;border-color:rgba(239,93,93,.45)}
.tag.green{color:var(--green);border-color:rgba(82,224,138,.4)}
.tag.violet{color:var(--violet);border-color:rgba(167,139,250,.4)}
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .65rem;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--line);font-size:.85rem;color:var(--dim)}
.chip b{color:var(--txt)}

/* ---- icons ---- */
.ico{display:inline-block;width:1.1em;height:1.1em;vertical-align:-.18em}
.ico svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---- lead-in: centred screens ---- */
.wrap.narrow{max-width:880px}
.wrap.wide{max-width:1180px}
.screen.centre{display:flex;align-items:center;justify-content:center;padding:2rem 0 3rem}
.screen.centre > .wrap{width:100%}
.centre-text{text-align:center;margin-left:auto;margin-right:auto}
.centre-row{justify-content:center}
#scrim.s-centre{background:radial-gradient(90% 80% at 50% 45%,rgba(4,7,11,.55) 0%,rgba(4,7,11,.75) 55%,rgba(4,7,11,.92) 100%)}
.titlecard{text-align:center;padding:2rem 1rem}
.titlecard .eyebrow{display:block;margin-bottom:1.2rem}
.t-name{font-family:var(--serif);font-variant:small-caps;letter-spacing:.1em;font-size:clamp(2.2rem,5.2vw,3.8rem);line-height:1.05;color:#f1e7cf;text-shadow:0 2px 24px rgba(0,0,0,.7)}
.t-rule{width:220px;height:1px;background:rgba(241,231,207,.6);margin:1.3rem auto;position:relative}
.t-rule::after{content:"";position:absolute;left:50%;top:-4px;width:9px;height:9px;transform:translateX(-50%) rotate(45deg);background:var(--bg);border:1px solid rgba(241,231,207,.8)}
.titlecard .lede{font-size:1.2rem}
.titlecard .btnrow{margin-top:1.6rem}
.legal{font-size:.75rem;color:var(--dim2);margin-top:2rem;line-height:1.6}
.legal a{color:var(--dim)}
.introdots{display:flex;gap:.5rem;justify-content:center;margin-bottom:1rem}
.introdots i{display:block;width:34px;height:4px;border-radius:2px;background:var(--line)}
.introdots i.done{background:var(--teal-d)}
.introdots i.now{background:var(--teal);box-shadow:0 0 10px var(--teal-g)}
.card.intro p{color:var(--dim);font-size:1.02rem}
.introlist{padding-left:1.2rem;display:grid;gap:.5rem;color:var(--dim);margin:.4rem 0 1rem}
.introlist b{color:var(--txt)}
.measures-list{display:grid;gap:.6rem}
.measure-row{display:grid;grid-template-columns:44px 1fr;gap:.8rem;align-items:center;padding:.6rem .8rem;border-radius:10px;border:1px solid var(--line2);background:rgba(255,255,255,.02)}
.measure-row .mark{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.04);color:var(--c);font-size:1.4rem;border:1px solid var(--line2)}
.measure-row b{color:var(--txt)}
.nav{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:1.2rem 0 0}
.nav .btn.primary{margin-left:auto}

/* ---- region choice ---- */
.region{border-radius:12px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02);overflow:hidden;transition:border-color .2s}
.region.on{border-color:var(--teal)}
.region-head{display:grid;grid-template-columns:150px 1fr auto;gap:.9rem;align-items:center;padding:.7rem;border:0;background:transparent;width:100%;text-align:left}
.region-head:hover{background:rgba(255,255,255,.03)}
.region .thumb{aspect-ratio:16/9;border-radius:8px;background:#122029 center/cover no-repeat;filter:saturate(.85);border:1px solid rgba(255,255,255,.06)}
.region .name{font-family:var(--serif);font-size:1.15rem}
.region .meta{font-size:.8rem;color:var(--dim2);margin-top:.15rem}
.region .desc{font-size:.85rem;color:var(--dim);margin-top:.35rem}
.region .pick{font-size:.8rem;font-weight:600;color:var(--teal);white-space:nowrap;padding:.4rem .7rem;border:1px solid rgba(52,211,194,.4);border-radius:8px}
.region.on .pick{background:rgba(52,211,194,.15)}
.region-body{padding:.2rem 1rem 1rem;border-top:1px solid var(--line2)}
.detail-list{display:grid;gap:.55rem;margin:.75rem 0}
.detail-list .row{display:grid;grid-template-columns:120px 1fr;gap:.6rem;font-size:.92rem}
.detail-list .row b{color:var(--dim2);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;padding-top:.15rem}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{border:0;background:transparent;padding:.5rem .9rem;color:var(--dim);font-weight:600}
.seg button.on{background:rgba(52,211,194,.15);color:var(--teal)}
@media (max-width:640px){.region-head{grid-template-columns:1fr}.region .pick{justify-self:start}}

/* ---- inside a round: one beat per screen ---- */
.roundwrap{padding-top:.6rem;padding-bottom:2rem}
.stepbar{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;margin:.6rem 0 1rem}
.step{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;padding:.35rem .7rem;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--dim2)}
button.step:hover{border-color:var(--line);color:var(--dim)}
.step.done{color:var(--teal-d);border-color:rgba(14,124,116,.5)}
.step.now{color:var(--teal);border-color:var(--teal);background:rgba(52,211,194,.1)}
.beat{padding:1.4rem 1.5rem}
.beat .brief-text{font-family:var(--serif);font-size:1.15rem;line-height:1.6;color:var(--txt)}
.interstitial{text-align:center;padding:3rem 1rem}
.big-n{font-family:var(--serif);font-size:clamp(3rem,9vw,5.5rem);line-height:1;color:#f1e7cf;margin:1rem 0 .4rem;text-shadow:0 2px 24px rgba(0,0,0,.7)}
.big-t{font-family:var(--serif);font-size:clamp(1.3rem,3vw,2rem);color:var(--dim);margin-bottom:1.2rem}
.coach{display:flex;gap:1rem;align-items:center;justify-content:space-between;margin:.9rem 0;padding:.7rem .9rem;border-radius:10px;border:1px dashed rgba(52,211,194,.6);background:rgba(52,211,194,.07);font-size:.9rem;color:#dffbf6}
.coach .btn{white-space:nowrap}
.sub{padding:.9rem 0;border-top:1px solid var(--line2)}
.sub:first-of-type{border-top:0;padding-top:0}
.sub.crisis{border-left:0}
.hudbtn{margin-left:.5rem;border:1px solid var(--line);background:transparent;color:var(--dim);border-radius:8px;padding:.35rem .7rem;font-size:.8rem;font-weight:600}
.hudbtn:hover{border-color:var(--teal);color:var(--txt)}
.sheet{position:fixed;inset:0;z-index:60;background:rgba(3,6,10,.7);display:grid;place-items:center;padding:1rem}
.sheet-in{width:min(420px,100%)}

/* reminders above the intervention cards */
.reminders{display:grid;gap:.5rem}
.rem{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;font-size:.9rem;color:var(--dim)}
.rem b{color:var(--txt)}
.rem b.warn{color:var(--amber)}
.rem .good{color:var(--green)}.rem .bad{color:#ff9c9c}
.linkbtn{border:0;background:transparent;color:var(--teal);text-decoration:underline;padding:0;font-size:.85rem}

/* effects in words */
.fxchips{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:auto}
.fxchip{display:inline-flex;align-items:center;font-size:.8rem;padding:.22rem .55rem;border-radius:6px;border:1px solid var(--line2);background:rgba(255,255,255,.03);color:var(--dim);white-space:nowrap}
.fxchip b{margin-left:.35rem;letter-spacing:-.08em;font-size:.72rem}
.fxchip.gain b{color:var(--teal)}
.fxchip.loss b{color:#ff8f8f}
.fxchip.minor b{opacity:.55}
.npi .pick{align-self:flex-end;margin-top:.3rem;font-size:.82rem;font-weight:700;color:var(--teal);padding:.35rem .8rem;border:1px solid rgba(52,211,194,.45);border-radius:8px}
.npi.on .pick{background:var(--teal);color:#062a26;border-color:var(--teal)}
.npi .pick .ico{margin-right:.2rem}
.npi .name{font-family:var(--serif);font-size:1.08rem}
.npi .cost{font-size:.95rem}

/* the dock: budget, count and commit, always in view on the intervention screen */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:30;background:linear-gradient(180deg,rgba(5,8,12,.92),rgba(5,8,12,.98));border-top:1px solid rgba(255,255,255,.08);backdrop-filter:blur(10px)}
.dock-in{max-width:1180px;margin:0 auto;padding:.7rem 1.25rem;display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap}
.dock-stat{display:flex;flex-direction:column;line-height:1.1}
.dock-stat .l{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim2)}
.dock-stat b{font-family:var(--serif);font-size:1.25rem;color:var(--amber)}
.dock-stat:nth-child(2) b,.dock-stat:nth-child(3) b{color:var(--txt)}
.dock-pending{flex:1;font-size:.85rem;color:var(--amber);text-align:right}
.dock-pending.ok{color:var(--teal)}
.dock .btn.primary{white-space:nowrap}
#npis{margin-bottom:96px}
@media (max-width:760px){.dock-in{gap:.8rem}.dock-pending{display:none}#npis{margin-bottom:130px}}

/* ---- HUD ---- */
#hud{position:sticky;top:var(--ribbon);z-index:20;height:var(--hud);display:flex;align-items:center;gap:1rem;padding:0 1.25rem;background:linear-gradient(180deg,rgba(5,8,12,.96),rgba(5,8,12,.86));border-bottom:1px solid rgba(255,255,255,.06);backdrop-filter:blur(8px)}
#hud .brand{font-family:var(--serif);font-size:1rem;color:var(--dim);white-space:nowrap}
#hud .brand b{color:var(--txt);font-weight:400}
.rail{display:flex;gap:.35rem;align-items:center;flex:1;justify-content:center}
.rail i{display:block;width:34px;height:4px;border-radius:2px;background:var(--line);position:relative}
.rail i.done{background:var(--teal-d)}
.rail i.now{background:var(--teal);box-shadow:0 0 10px var(--teal-g)}
.rail span{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;color:var(--dim2);margin-left:.4rem;white-space:nowrap}
.hudchip{font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;color:var(--dim);white-space:nowrap}
.hudchip b{color:var(--txt);font-weight:600}
.hudchip.warn b{color:var(--amber)}
.hudchip.late b{color:var(--red)}
@media (max-width:760px){.rail span{display:none}#hud .brand{display:none}}

/* ---- round layout ---- */
.round{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:1.1rem;align-items:start;padding-top:1.1rem}
@media (max-width:900px){.round{grid-template-columns:1fr}}
.side{position:sticky;top:calc(var(--hud) + 1rem);display:flex;flex-direction:column;gap:.8rem}
@media (max-width:900px){.side{position:static}}

.sitrep{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:1.1rem;align-items:start}
@media (max-width:760px){.sitrep{grid-template-columns:1fr}}
.panel-art{aspect-ratio:1;border-radius:10px;background:#0f1a22 center/cover no-repeat;border:1px solid rgba(255,255,255,.08);box-shadow:0 10px 26px rgba(0,0,0,.5);filter:saturate(.85)}
.sitrep .brief-text{font-family:var(--serif);font-size:1.12rem;line-height:1.55;color:var(--txt)}
details.more{margin-top:.6rem}
details.more summary{cursor:pointer;color:var(--teal);font-size:.85rem;font-weight:600;list-style:none;display:inline-flex;gap:.4rem;align-items:center}
details.more summary::-webkit-details-marker{display:none}
details.more summary::before{content:"+";font-family:var(--mono);width:1em}
details[open].more summary::before{content:"–"}
details.more .body{margin-top:.6rem}

/* crisis */
.crisis{border-left:3px solid var(--red)}
.crisis.positive{border-left-color:var(--green)}
.crisis .effect{margin-top:.6rem;padding:.6rem .8rem;border-radius:8px;background:rgba(239,93,93,.08);border:1px solid rgba(239,93,93,.25);font-size:.92rem}
.crisis.positive .effect{background:rgba(82,224,138,.08);border-color:rgba(82,224,138,.25)}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.8rem}
@media (max-width:640px){.choice{grid-template-columns:1fr}}
.opt{border:1px solid var(--line);border-radius:10px;padding:.7rem .85rem;background:rgba(255,255,255,.02);text-align:left;transition:border-color .2s,background .2s}
.opt:hover{border-color:var(--teal)}
.opt.on{border-color:var(--teal);background:rgba(52,211,194,.08)}
.opt .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim2);margin-bottom:.2rem}
.opt .t{font-weight:600}
.opt .c{font-size:.82rem;color:var(--amber);margin-top:.2rem}
.opt[disabled]{opacity:.5;cursor:not-allowed}
.note{font-size:.82rem;color:var(--dim2);margin-top:.5rem}

/* pressures and stakeholders */
.voices{display:grid;gap:.6rem}
.voice{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;padding:.55rem .7rem;border-radius:10px;background:rgba(255,255,255,.025);border:1px solid var(--line2)}
.voice .tag{margin-top:.15rem}
.voice .t{font-weight:600}
.voice .d{font-size:.88rem;color:var(--dim)}
.voice .e{font-size:.82rem;color:var(--dim2);margin-top:.15rem}
.stakes{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:.9rem}
@media (max-width:760px){.stakes{grid-template-columns:1fr}}
.stake{display:grid;grid-template-columns:44px 1fr;gap:.6rem;align-items:center;padding:.6rem;border-radius:10px;border:1px solid var(--line2);background:rgba(255,255,255,.02)}
.stake .face{width:44px;height:44px;border-radius:10px;overflow:hidden;background:linear-gradient(135deg,#1c3050,#142235);border:1px solid var(--line);display:grid;place-items:center;font-family:var(--serif);color:var(--dim)}
.stake .face img{width:100%;height:100%;object-fit:cover;object-position:center 16%}
.stake .n{font-size:.85rem;font-weight:600}
.stake .bar{height:5px;border-radius:3px;background:var(--line2);margin:.3rem 0 .2rem;overflow:hidden}
.stake .bar i{display:block;height:100%;background:var(--teal);border-radius:3px;transition:width .6s ease}
.stake .bar i.low{background:var(--amber)}
.stake .bar i.crit{background:var(--red)}
.stake .s{font-size:.75rem;color:var(--dim2)}
.stake .s.warn{color:var(--amber)}
.stake .s.crit{color:#ff9c9c}
.stake .s.ok{color:var(--teal)}

/* misinformation */
.misinfo{border-left:3px solid var(--amber)}
.misinfo .effect{margin-top:.6rem;padding:.6rem .8rem;border-radius:8px;background:rgba(245,179,66,.07);border:1px solid rgba(245,179,66,.25);font-size:.92rem}

/* preparedness */
.prep-list{display:grid;gap:.5rem}
.prep{display:grid;grid-template-columns:auto 1fr;gap:.6rem;padding:.5rem .7rem;border-radius:8px;border:1px solid var(--line2);font-size:.88rem}
.prep .mark{font-family:var(--mono);font-weight:700}
.prep.benefit{border-color:rgba(82,224,138,.3)}
.prep.benefit .mark{color:var(--green)}
.prep.neglect{border-color:rgba(239,93,93,.3)}
.prep.neglect .mark{color:var(--red)}
.prep .a{color:var(--dim2);font-size:.8rem}

/* interventions */
.npis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
@media (max-width:760px){.npis{grid-template-columns:1fr}}
.npi{position:relative;display:flex;flex-direction:column;gap:.45rem;border:1px solid var(--line2);border-radius:12px;padding:.75rem .85rem;background:rgba(255,255,255,.02);text-align:left;transition:border-color .2s,background .2s,opacity .2s;min-height:120px}
.npi:hover{border-color:var(--line);background:rgba(255,255,255,.035)}
.npi.on{border-color:var(--teal);background:rgba(52,211,194,.08);box-shadow:0 0 0 1px var(--teal-g)}
.npi.off{opacity:.45;cursor:not-allowed}
.npi.off:hover{border-color:var(--line2);background:rgba(255,255,255,.02)}
.npi .top{display:flex;justify-content:space-between;gap:.6rem;align-items:flex-start}
.npi .name{font-weight:600;line-height:1.25}
.npi .cost{font-family:var(--mono);font-size:.85rem;color:var(--amber);white-space:nowrap}
.npi .cost.free{color:var(--green)}
.npi .cost s{color:var(--dim2);margin-right:.3rem}
.npi .meta{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.npi .desc{font-size:.8rem;color:var(--dim2)}
.npi .state{font-size:.75rem;color:var(--dim2)}
.npi .state.warn{color:var(--amber)}
.npi .state.bad{color:#ff9c9c}
.npi .state.good{color:var(--green)}
.npi .check{position:absolute;top:.6rem;right:.7rem;width:18px;height:18px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:.7rem;color:var(--teal);opacity:0}
.npi.on .check{opacity:1;border-color:var(--teal);background:rgba(52,211,194,.15)}
.npi.on .cost{margin-right:1.3rem}

/* effect strip: five cells, bar up for gain, bar down for loss */
.fx{display:grid;grid-template-columns:repeat(5,1fr);gap:.35rem;margin-top:auto}
.fx-cell{display:grid;grid-template-rows:20px 8px 20px;justify-items:center;align-items:end;gap:1px}
.fx-cell .ico{width:.95em;height:.95em;color:var(--dim2);grid-row:2;align-self:center}
.fx-cell .up{grid-row:1;width:10px;height:100%;display:flex;flex-direction:column-reverse;gap:1px}
.fx-cell .dn{grid-row:3;width:10px;height:100%;display:flex;flex-direction:column;gap:1px;align-self:start}
.fx-cell b{display:block;height:4px;border-radius:1px;background:var(--line2)}
.fx-cell .up b.on{background:var(--c)}
.fx-cell .dn b.on{background:var(--red)}
.fx-cell b.half{opacity:.45}
.fx-legend{font-size:.72rem;color:var(--dim2);display:flex;gap:.9rem;flex-wrap:wrap;margin-top:.4rem}

.npi-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.npi-head .count{font-family:var(--mono);font-size:.8rem;color:var(--dim2)}
.npi-head .count b{color:var(--txt)}
.subhead{font-family:var(--serif);font-size:1.05rem;color:var(--dim);margin:1rem 0 .5rem;display:flex;gap:.6rem;align-items:baseline}
.subhead small{font-family:var(--sans);font-size:.78rem;color:var(--dim2)}
.banner{padding:.7rem .9rem;border-radius:10px;border:1px solid rgba(239,93,93,.4);background:rgba(239,93,93,.08);font-size:.9rem}
.banner.amber{border-color:rgba(245,179,66,.4);background:rgba(245,179,66,.07)}

/* sidebar meters */
.budget{display:flex;flex-direction:column;gap:.15rem}
.budget .v{font-family:var(--serif);font-size:2rem;color:var(--amber);line-height:1}
.budget .l{font-size:.78rem;color:var(--dim2)}
.meters{display:grid;gap:.55rem}
.meter{display:grid;grid-template-columns:1.2em 1fr auto;gap:.5rem;align-items:center}
.meter .ico{color:var(--c)}
.meter .n{font-size:.82rem;color:var(--dim)}
.meter .bar{grid-column:1/4;height:5px;border-radius:3px;background:var(--line2);overflow:hidden}
.meter .bar i{display:block;height:100%;background:var(--c);border-radius:3px;transition:width .8s cubic-bezier(.2,.7,.2,1)}
.meter .v{font-family:var(--mono);font-size:.82rem;color:var(--txt)}
.meter .d{font-family:var(--mono);font-size:.7rem;margin-left:.35rem}
.meter .d.up{color:var(--green)}
.meter .d.down{color:#ff9c9c}
.total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line2);padding-top:.6rem;margin-top:.2rem}
.total .v{font-family:var(--serif);font-size:1.4rem}
.pending{font-size:.8rem;color:var(--amber);display:grid;gap:.25rem}
.pending.ok{color:var(--teal)}

/* ---- report ---- */
.tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem}
@media (max-width:760px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile{padding:.7rem .8rem;border-radius:10px;border:1px solid var(--line2);background:rgba(255,255,255,.02)}
.tile .l{font-size:.75rem;color:var(--dim2);display:flex;gap:.4rem;align-items:center}
.tile .v{font-family:var(--serif);font-size:1.5rem;margin-top:.15rem}
.tile .d{font-family:var(--mono);font-size:.8rem}
.tile .d.up{color:var(--green)}.tile .d.down{color:#ff9c9c}.tile .d.flat{color:var(--dim2)}
table.tbl{width:100%;border-collapse:collapse;font-size:.88rem}
table.tbl th{text-align:left;font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim2);font-weight:700;padding:.4rem .5rem;border-bottom:1px solid var(--line)}
table.tbl td{padding:.5rem .5rem;border-bottom:1px solid var(--line2);vertical-align:top}
table.tbl td.num,table.tbl th.num{text-align:right;font-family:var(--mono);font-size:.82rem}
table.tbl .pos{color:var(--green)}table.tbl .neg{color:#ff9c9c}table.tbl .zero{color:var(--dim2)}
.scroll{overflow-x:auto}
.steps{font-size:.8rem;color:var(--dim2);margin:.3rem 0 0;padding-left:1rem}
.steps li{margin:.1rem 0}
.fit{display:grid;grid-template-columns:auto 1fr;gap:.6rem;padding:.55rem .7rem;border-radius:8px;border:1px solid var(--line2);font-size:.88rem}
.fit.mismatch{border-color:rgba(239,93,93,.35)}
.fit.good,.fit.excellent{border-color:rgba(82,224,138,.3)}
.fit .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;padding-top:.2rem}
.fit.mismatch .k{color:#ff9c9c}.fit.good .k,.fit.excellent .k{color:var(--green)}
.fit .r{color:var(--dim)}
.fit .adj{font-family:var(--mono);font-size:.75rem;color:var(--dim2);margin-top:.15rem}

/* ---- debrief ---- */
.band{display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:end}
@media (max-width:760px){.band{grid-template-columns:1fr}}
.band .name{font-family:var(--serif);font-size:2.2rem;line-height:1.05}
.band .text{font-family:var(--serif);color:var(--dim);font-size:1.05rem;margin-top:.4rem;max-width:56ch}
.band .score{text-align:right}
.band .score .v{font-family:var(--serif);font-size:3rem;line-height:1}
.band .score .l{font-size:.75rem;color:var(--dim2)}
.endcard{aspect-ratio:16/7;border-radius:12px;background:#0f1a22 center/cover no-repeat;border:1px solid rgba(255,255,255,.08);filter:saturate(.85);margin-bottom:1rem}
.chart{width:100%;height:auto;display:block}
.legend{display:flex;gap:1rem;flex-wrap:wrap;font-size:.78rem;color:var(--dim);margin-top:.4rem}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:.35rem;vertical-align:-1px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;font-size:.9rem}
.kv b{font-weight:600;color:var(--dim2)}
ol.q{padding-left:1.2rem;display:grid;gap:.5rem;font-family:var(--serif);color:var(--dim)}
ul.points{padding-left:1.1rem;display:grid;gap:.45rem;color:var(--dim)}
.log{display:grid;gap:.6rem}
.log .r{display:grid;grid-template-columns:70px 1fr;gap:.7rem;padding:.55rem .7rem;border-radius:10px;border:1px solid var(--line2);font-size:.88rem}
.log .r .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--dim2);padding-top:.2rem}
.log .r .t{font-weight:600}
.log .r .d{color:var(--dim)}
.log .r .m{font-family:var(--mono);font-size:.75rem;color:var(--dim2);margin-top:.2rem}

/* ---- about panel ---- */
.about{display:grid;gap:.8rem;max-width:72ch}
.about h3{margin-top:.4rem}
.about p,.about li{color:var(--dim)}

/* ---- overlay ---- */
#toast{position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%);z-index:50;background:rgba(9,16,24,.96);border:1px solid var(--line);border-radius:10px;padding:.6rem .9rem;font-size:.9rem;box-shadow:0 12px 30px rgba(0,0,0,.5);opacity:0;transition:opacity .25s;pointer-events:none;max-width:90vw}
#toast.on{opacity:1}
#toast.bad{border-color:rgba(239,93,93,.5)}

/* ---- motion ---- */
.fade{animation:fade .5s ease both}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- print: the debrief as a report ---- */
@media print{
  #backdrop,#grade,#scrim,#vignette,#hud,#toast,.noprint,#demo-ribbon{display:none!important}
  body{background:#fff;color:#111}
  .card{background:#fff;border:1px solid #ccc;box-shadow:none;backdrop-filter:none;break-inside:avoid;color:#111}
  .title,.band .name,.band .score .v{color:#111;background:none;-webkit-text-fill-color:#111}
  .muted,.dim,.eyebrow,.lede,.band .text,.kv b,ol.q,ul.points,.log .r .d,.fit .r{color:#333}
  table.tbl th{color:#333;border-color:#999}table.tbl td{border-color:#ddd}
  .endcard{display:none}
  .screen{padding:0}
}

/* ---- arcade layer ---- */
.statusrow{position:sticky;top:calc(var(--hud) + var(--ribbon));z-index:19;display:flex;gap:.4rem;flex-wrap:wrap;padding:.4rem 1.25rem;background:rgba(5,8,12,.85);border-bottom:1px solid rgba(255,255,255,.05);backdrop-filter:blur(8px)}
.status{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:.25rem .55rem;border-radius:6px;border:1px solid var(--line2);color:var(--dim)}
.status.good{color:var(--teal);border-color:rgba(52,211,194,.4)}
.status.bad{color:#ff9c9c;border-color:rgba(239,93,93,.45)}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.2rem;align-items:start}
@media (max-width:760px){.two-col{grid-template-columns:1fr}}
.curve{width:100%;height:auto;display:block}
.ob-stats{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.6rem}
.ob-stat{padding:.5rem .7rem;border-radius:8px;border:1px solid var(--line2);background:rgba(255,255,255,.02)}
.ob-stat .l{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim2)}
.ob-stat b{font-family:var(--serif);font-size:1.3rem}
.ob-stat .bar{height:5px;border-radius:3px;background:var(--line2);margin-top:.35rem;overflow:hidden}
.ob-stat .bar i{display:block;height:100%;background:var(--teal);border-radius:3px}
.ob-stat .bar i.low{background:var(--amber)}.ob-stat .bar i.crit{background:var(--red)}
.ob-note{font-family:var(--serif);color:var(--dim);margin-top:.6rem}
.verdict{font-family:var(--serif);font-size:1.05rem;margin-top:.6rem;padding:.5rem .7rem;border-radius:8px;border:1px solid var(--line2)}
.verdict.falling{color:#dffbf6;border-color:rgba(52,211,194,.4)}
.verdict.rising,.verdict.failed{color:#ffd0d0;border-color:rgba(239,93,93,.4)}
.board-tbl td,.board-tbl th{padding:.4rem .4rem}
.board-tbl tr.me td{background:rgba(52,211,194,.06)}
.sevbar{height:6px;border-radius:3px;background:var(--line2);min-width:70px;overflow:hidden}
.sevbar i{display:block;height:100%;background:var(--teal);border-radius:3px}
.sevbar i.low{background:var(--amber)}.sevbar i.crit{background:var(--red)}
.tiles-col{grid-template-columns:1fr 1fr}
.deputy{display:grid;grid-template-columns:44px 1fr;gap:.7rem;align-items:start;margin-top:1rem;padding:.7rem .8rem;border-radius:10px;border:1px solid var(--line2);background:rgba(255,255,255,.02);color:var(--dim)}
.deputy .face,.msg .face,.call-head .face{width:44px;height:44px;border-radius:10px;overflow:hidden;background:linear-gradient(135deg,#1c3050,#142235);border:1px solid var(--line);display:grid;place-items:center;font-family:var(--serif);color:var(--dim)}
.deputy .face img,.msg .face img,.call-head .face img{width:100%;height:100%;object-fit:cover;object-position:center 16%}
.deputy-line{max-width:56ch}
.forecast{margin-top:.4rem;color:var(--amber);font-size:.9rem}
.messages{display:grid;gap:.6rem}
.msg{display:grid;grid-template-columns:44px 1fr;gap:.7rem;align-items:start;padding:.7rem .8rem;border-radius:10px;border:1px solid var(--line2);background:rgba(255,255,255,.02)}
.msg.met{border-color:rgba(82,224,138,.35)}.msg.missed{border-color:rgba(239,93,93,.35)}
.msg-head{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.msg-title{font-family:var(--serif);font-size:1.05rem;margin-top:.2rem}
.msg-ask{color:var(--dim);margin-top:.2rem}
.pcrow{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:.8rem;color:var(--dim)}
.pcgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:.6rem}
@media (max-width:760px){.pcgrid{grid-template-columns:1fr}}
.pcaction{padding:.7rem .8rem;border-radius:10px;border:1px solid var(--line2);background:rgba(255,255,255,.02);display:flex;flex-direction:column;gap:.4rem}
.pcaction.used{border-color:rgba(52,211,194,.4)}
.pcaction .t{font-weight:600}
.pcaction .d{font-size:.85rem;color:var(--dim);flex:1}
.call{border-left:3px solid var(--amber);animation:ring 1.6s ease-in-out infinite}
@keyframes ring{0%,100%{box-shadow:0 12px 30px rgba(0,0,0,.45)}50%{box-shadow:0 12px 30px rgba(0,0,0,.45),0 0 0 3px rgba(245,179,66,.25)}}
.call-head{display:grid;grid-template-columns:44px 1fr;gap:.7rem;align-items:center}
.invs{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:.8rem}
@media (max-width:760px){.invs{grid-template-columns:1fr}}
.inv{display:flex;flex-direction:column;gap:.4rem;padding:.75rem .85rem;border-radius:12px;border:1px solid var(--line2);background:rgba(255,255,255,.02);cursor:pointer;transition:border-color .2s}
.inv:hover{border-color:var(--line)}
.inv.on{border-color:var(--violet);background:rgba(167,139,250,.08)}
.inv.arming{border-color:var(--amber)}
.inv .top{display:flex;justify-content:space-between;gap:.6rem}
.inv .name{font-family:var(--serif);font-size:1.02rem}
.inv .cost{font-family:var(--mono);font-size:.85rem;color:var(--amber)}
.inv .desc{font-size:.85rem;color:var(--dim);flex:1}
.inv .pick{align-self:flex-end;font-size:.8rem;font-weight:700;color:var(--violet);padding:.3rem .7rem;border:1px solid rgba(167,139,250,.45);border-radius:8px}
.inv.on .pick{background:var(--violet);color:#1c1233;border-color:var(--violet)}
.dial{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin:.1rem 0}
.dial button{border:0;background:transparent;padding:.3rem .55rem;color:var(--dim2);font-size:.75rem;font-weight:600;border-right:1px solid var(--line2)}
.dial button:last-child{border-right:0}
.dial button.on{background:rgba(52,211,194,.15);color:var(--teal)}
.npi .pick{cursor:pointer;background:transparent;font:inherit}
.npi{cursor:pointer}
.fitline{font-size:.82rem;color:var(--dim);padding:.4rem .6rem;border-radius:8px;border:1px dashed var(--line)}
.fitline.mismatch{border-color:rgba(239,93,93,.5)}.fitline.mismatch b{color:#ff9c9c}
.fitline.good b,.fitline.excellent b{color:var(--green)}.fitline.good,.fitline.excellent{border-color:rgba(82,224,138,.4)}
.fitline.neutral b{color:var(--amber)}
.sounding{font-size:.78rem;color:var(--violet)}
.brief-buy{align-self:flex-start;font-size:.78rem}
.statuschanges{display:grid;gap:.4rem;margin-top:.8rem}
.sc{padding:.5rem .7rem;border-radius:8px;border:1px solid var(--line2);font-size:.9rem;color:var(--dim)}
.sc.gained.bad{border-color:rgba(239,93,93,.4)}.sc.gained.good{border-color:rgba(52,211,194,.4)}
.sc.cleared{border-color:rgba(82,224,138,.35)}
.rivals{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin:.6rem 0}
@media (max-width:640px){.rivals{grid-template-columns:1fr}}
.rival{padding:.5rem .7rem;border-radius:8px;border:1px solid var(--line2);font-size:.9rem}
.card.fail{border-color:rgba(239,93,93,.5)}
.band .name.failed{color:#ff9c9c}.band .name.contained{color:#dffbf6}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.6rem;margin-top:.6rem}
.badge{padding:.6rem .7rem;border-radius:10px;border:1px solid var(--line2);opacity:.45}
.badge.on{opacity:1;border-color:rgba(245,179,66,.5)}
.badge b{font-family:var(--serif)}
.wi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.35rem .8rem;margin-top:.6rem}
@media (max-width:640px){.wi-grid{grid-template-columns:1fr}}
.wi-opt{display:flex;gap:.5rem;align-items:baseline;font-size:.9rem;color:var(--dim);cursor:pointer}
.wi-opt input{accent-color:var(--teal)}
.setup-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:.6rem}
@media (max-width:760px){.setup-grid{grid-template-columns:1fr}}
.setup-grid .seg{margin:.35rem 0}
.opt-note{min-height:2.4em}
.axes{display:grid;gap:.35rem;margin-top:.7rem}
.axis{font-size:.92rem;color:var(--dim)}
.axis b{color:var(--txt);font-weight:600}

/* ---- demo edition ---- */
html{overflow-x:clip}
#demo-ribbon{position:fixed;top:0;left:0;right:0;height:var(--ribbon);z-index:40;display:flex;align-items:center;justify-content:center;padding:0 1rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--teal);text-decoration:none;background:#05080c;border-bottom:1px solid rgba(52,211,194,.25);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#demo-ribbon:hover{color:#dffbf6}
.demo-end{margin-top:1.4rem}
.demo-end .h2{margin:.3rem 0 .8rem}
.demo-end .brief-text{font-family:var(--serif);font-size:1.12rem;line-height:1.6;color:var(--txt)}
.demo-end .btnrow{margin-top:1.2rem}
.demo-end .btn{text-decoration:none}
.demo-end .legal{margin-top:1.4rem}
.sheet a.btn{text-decoration:none}
.roundwrap.wide{padding-bottom:110px} /* room for the fixed dock under the actions list's Back button */
@media (max-width:760px){
  .roundwrap.wide{padding-bottom:150px}
  #hud{height:auto;min-height:var(--hud);flex-wrap:wrap;gap:0 .8rem;padding:.35rem 1rem}
  #hud>*{margin-top:.3rem;margin-bottom:.3rem}
  #hud::after{content:'';flex-basis:100%;height:0;order:8;margin:0}
  #hud .rail{flex:0 1 auto;order:9;justify-content:flex-start}
  #hud .hudbtn{order:10;margin-left:0}
  #hud #sound{margin-left:auto}
  .rail i{width:22px}
  .statusrow{position:static}
  .two-col{grid-template-columns:minmax(0,1fr)}
  .board-tbl td,.board-tbl th{padding:.4rem .3rem}
  table.board-tbl th.num{font-size:.62rem}
  .board-tbl .sevbar{min-width:0}
}