/* Shared deck styles - used by deck-a.html and deck-b.html */

:root{
  --ground:#F4F6F5; --paper:#FFFFFF; --sunk:#EAEFEC; --sunk2:#DFE6E2;
  --ink:#131A16; --muted:#5B6862; --faint:#8B9791; --line:#DCE3DF;
  --accent:#1F5D45; --accent-soft:#E2EFE8;
  --ok:#1F7A4D; --ok-soft:#E1F3E8;
  --warn:#96620A; --warn-soft:#FAEFDC;
  --crit:#A73A2C; --crit-soft:#F9E6E3;
  --info:#1C5A8D; --info-soft:#E3EDF6;
  --chrome:#131A16; --chrome-ink:#F1F4F2; --chrome-dim:rgba(241,244,242,.55);
  --on-accent:#FFFFFF;
  --ui:"Archivo",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#0D1110; --paper:#222B27; --sunk:#111614; --sunk2:#1C2321;
  --ink:#E6EBE8; --muted:#96A29C; --faint:#6B7872; --line:#252D29;
  --accent:#57B187; --accent-soft:#152520;
  --ok:#4FB07C; --ok-soft:#11231A;
  --warn:#D2A053; --warn-soft:#231B0E;
  --crit:#DC7F72; --crit-soft:#250F0D;
  --info:#6EA7DB; --info-soft:#0E1C27;
  --chrome:#1C2321; --chrome-ink:#EAEFEC; --chrome-dim:rgba(234,239,236,.55);
  --on-accent:#0A0F0D;
}}
:root[data-theme="dark"]{
  --ground:#0D1110; --paper:#222B27; --sunk:#111614; --sunk2:#1C2321;
  --ink:#E6EBE8; --muted:#96A29C; --faint:#6B7872; --line:#252D29;
  --accent:#57B187; --accent-soft:#152520;
  --ok:#4FB07C; --ok-soft:#11231A;
  --warn:#D2A053; --warn-soft:#231B0E;
  --crit:#DC7F72; --crit-soft:#250F0D;
  --info:#6EA7DB; --info-soft:#0E1C27;
  --chrome:#1C2321; --chrome-ink:#EAEFEC; --chrome-dim:rgba(234,239,236,.55);
  --on-accent:#0A0F0D;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--ground);color:var(--ink);font-family:var(--ui);
  font-size:clamp(13.5px,1vw,16.5px);line-height:1.5;overflow:hidden
}

/* ---------- shell ---------- */
.deck{height:100%;display:flex;flex-direction:column}
.stage{flex:1;position:relative;overflow:hidden}
.slide{position:absolute;inset:0;padding:3.4vh 4.5vw 2.6vh;overflow-y:auto;display:none;flex-direction:column}
.slide.on{display:flex}
.slide > .num{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:.9rem;flex:none}
.slide h2{font-size:clamp(1.35rem,2.7vw,2.15rem);font-weight:700;letter-spacing:-.028em;line-height:1.07;margin:0 0 .55rem;max-width:26em;text-wrap:balance}
.slide .sub{font-size:clamp(.9rem,1.15vw,1.06rem);color:var(--muted);margin:0 0 1.4rem;max-width:46em}
.slide .body{flex:1;min-height:0}

/* ---------- bottom bar ---------- */
.bar{flex:none;background:var(--chrome);color:var(--chrome-ink);display:flex;align-items:center;gap:1rem;padding:.55rem 1.2rem}
.bar .brand{font-weight:700;font-size:.78rem;letter-spacing:-.01em;white-space:nowrap}
.bar .brand span{color:var(--chrome-dim);font-weight:400;margin-left:.5rem}
.bar .prog{flex:1;display:flex;gap:2px;align-items:center;margin:0 .5rem}
.bar .prog i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.16);cursor:pointer}
.bar .prog i.done{background:var(--chrome-dim)}
.bar .prog i.now{background:var(--accent)}
.bar .cnt{font-family:var(--mono);font-size:.7rem;color:var(--chrome-dim);white-space:nowrap}
.bar button{background:rgba(255,255,255,.1);border:0;color:var(--chrome-ink);font-family:var(--ui);font-size:.76rem;font-weight:600;width:1.8rem;height:1.8rem;border-radius:3px;cursor:pointer}
.bar button:hover{background:rgba(255,255,255,.2)}
.bar button:disabled{opacity:.3;cursor:default}
.bar button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* ---------- layout ---------- */
.cols{display:grid;gap:1rem;align-items:start}
.c2{grid-template-columns:1fr 1fr}
.c2w{grid-template-columns:1.35fr 1fr}
.c3{grid-template-columns:repeat(3,1fr)}
@media (max-width:920px){.c2,.c2w,.c3{grid-template-columns:1fr}}

.card{border:1px solid var(--line);border-radius:6px;background:var(--paper);padding:1rem 1.15rem}
.card h3{font-size:.94rem;font-weight:700;margin:0 0 .45rem;letter-spacing:-.01em;display:flex;gap:.5rem;align-items:baseline}
.card h3 .t{margin-left:auto;font-family:var(--mono);font-size:.62rem;font-weight:400;color:var(--faint)}
.card p{margin:0 0 .5rem;font-size:.89rem;color:var(--muted)}
.card p:last-child{margin:0}
.card ul{margin:.25rem 0 0;padding-left:1.05rem;font-size:.89rem;color:var(--muted)}
.card li{margin-bottom:.32rem}
.card li b{color:var(--ink);font-weight:600}
.card.hot{border-color:var(--crit);background:var(--crit-soft)}
.card.good{border-color:var(--ok);background:var(--ok-soft)}
.card.warn{border-color:var(--warn);background:var(--warn-soft)}
.card.acc{border-color:var(--accent);background:var(--accent-soft)}

.note{border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--paper);border-radius:0 5px 5px 0;padding:.8rem 1.05rem;font-size:.88rem;color:var(--muted);margin-top:1rem}
.note b{color:var(--ink);font-weight:600}
.note.hot{border-left-color:var(--crit);background:var(--crit-soft)}
.note.warn{border-left-color:var(--warn);background:var(--warn-soft)}
.note.good{border-left-color:var(--ok);background:var(--ok-soft)}
.note p{margin:0 0 .5rem}.note p:last-child{margin:0}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:.86rem}
th,td{text-align:left;padding:.44rem .6rem;border-bottom:1px solid var(--line)}
thead th{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);background:var(--sunk);font-weight:500;white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
td.n,th.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
td.loss{color:var(--crit);font-weight:700}
tr.hl td{background:var(--ok-soft)}
tr.bad td{background:var(--crit-soft)}
.tw{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--paper)}

/* ---------- chips & flow ---------- */
.chip{font-family:var(--mono);font-size:.58rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase;padding:.15rem .42rem;border-radius:2px;white-space:nowrap}
.chip.a{background:var(--info-soft);color:var(--info)}
.chip.b{background:var(--accent-soft);color:var(--accent)}
.chip.no{background:var(--crit-soft);color:var(--crit)}
.chip.yes{background:var(--ok-soft);color:var(--ok)}
.chip.man{background:var(--warn-soft);color:var(--warn)}

.lane{margin-bottom:.6rem}
.lane .lh{display:flex;align-items:center;gap:.45rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);margin-bottom:.3rem}
.lane .lh i{width:.5rem;height:.5rem;border-radius:2px;flex:none}
.flow{display:flex;gap:.35rem;flex-wrap:wrap}
.flow .s{flex:1 1 8rem;border:1px solid var(--line);border-radius:5px;background:var(--paper);padding:.5rem .6rem;display:grid;gap:.15rem;align-content:start;min-width:0}
.flow .s b{font-size:.81rem;font-weight:600;line-height:1.25}
.flow .s span{font-size:.73rem;color:var(--muted);line-height:1.35}
.flow .s.man{border-color:var(--warn);background:var(--warn-soft)}
.flow .s.gov{border-color:var(--crit);background:var(--crit-soft)}
.flow .s.auto{border-color:var(--accent);background:var(--accent-soft)}
.i-agent{background:var(--info)} .i-sys{background:var(--accent)}
.i-staff{background:var(--warn)} .i-gov{background:var(--crit)}

/* ---------- mini mockups ---------- */
.mock{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--paper)}
.mock .mb{background:var(--sunk);border-bottom:1px solid var(--line);padding:.35rem .6rem;display:flex;align-items:center;gap:.35rem;font-family:var(--mono);font-size:.6rem;color:var(--faint)}
.mock .mb i{width:6px;height:6px;border-radius:50%;background:var(--line);flex:none}
.mock .pg{padding:.75rem .9rem 1rem}
.mock .ph{display:flex;align-items:center;gap:.7rem;padding-bottom:.5rem;margin-bottom:.7rem;border-bottom:1px solid var(--line)}
.mock .ph b{font-size:.76rem;font-weight:700;letter-spacing:-.01em}
.mock .ph nav{margin-left:auto;display:flex;gap:.55rem;font-size:.66rem;color:var(--faint)}
.mock .ph nav .on{color:var(--accent);font-weight:600}
.mock h4{font-size:.94rem;font-weight:700;letter-spacing:-.015em;margin:0 0 .2rem}
.mock .ld{font-size:.72rem;color:var(--muted);margin:0 0 .7rem}

.fl{display:grid;gap:.5rem}
.fl .r2{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
.fl label{display:block;font-size:.66rem;font-weight:500;margin-bottom:.15rem}
.fl label i{color:var(--crit);font-style:normal}
.fl .in{border:1px solid var(--line);border-radius:3px;background:var(--paper);padding:.3rem .4rem;font-size:.7rem;font-family:var(--mono);color:var(--ink)}
.fl .in.sel::after{content:"⌄";float:right;color:var(--faint)}
.fl .in.ph{color:var(--faint)}
.fl .hint{font-size:.62rem;color:var(--faint);margin-top:.12rem}

.up{border:1.5px dashed var(--line);border-radius:4px;padding:.55rem;text-align:center;background:var(--sunk);font-size:.68rem;color:var(--muted)}
.up.done{border-style:solid;border-color:var(--ok);background:var(--ok-soft);text-align:left;display:flex;gap:.4rem;align-items:center}
.up.done b{color:var(--ok)}

.fee{border:1px solid var(--accent);border-radius:4px;background:var(--accent-soft);padding:.55rem .7rem}
.fee .fh{font-family:var(--mono);font-size:.56rem;letter-spacing:.11em;text-transform:uppercase;color:var(--accent);margin-bottom:.3rem}
.fee table{font-size:.7rem}
.fee td{padding:.13rem 0;border:0}
.fee td:last-child{text-align:right;font-family:var(--mono)}
.fee tr.t td{border-top:1.5px solid var(--accent);font-weight:700;padding-top:.25rem}
.fee .wk{font-size:.6rem;color:var(--muted);font-family:var(--mono)}

.bt{display:inline-block;background:var(--accent);color:var(--on-accent);font-size:.7rem;font-weight:600;padding:.3rem .7rem;border-radius:3px}
.bt.gh{background:transparent;border:1px solid var(--line);color:var(--muted);font-weight:500}

.st3{display:flex;gap:.25rem;margin-bottom:.7rem;font-size:.62rem}
.st3 span{flex:1;padding:.25rem;text-align:center;border-radius:3px;background:var(--sunk);color:var(--faint);border:1px solid var(--line)}
.st3 span.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.st3 span.dn{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}

/* admin mock */
.adm{display:grid;grid-template-columns:7.5rem 1fr;min-height:0}
.adm .sd{background:var(--sunk);border-right:1px solid var(--line);padding:.55rem .35rem;font-size:.65rem}
.adm .sd .bd{font-weight:700;font-size:.68rem;padding:0 .3rem .5rem;display:flex;gap:.3rem;align-items:center}
.adm .sd .bd em{width:.85rem;height:.85rem;border-radius:2px;background:var(--accent);color:var(--on-accent);font-style:normal;font-size:.46rem;display:grid;place-items:center}
.adm .sd a{display:flex;justify-content:space-between;padding:.25rem .3rem;border-radius:2px;color:var(--muted);text-decoration:none}
.adm .sd a.on{background:var(--accent);color:var(--on-accent);font-weight:600}
.adm .sd .g{font-family:var(--mono);font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:.45rem .3rem .15rem}
.adm .mn{padding:.7rem .8rem 1rem;min-width:0;overflow-x:auto}
.adm .mh{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.6rem}
.adm .mh b{font-size:.85rem;font-weight:700}
.adm .mh .r{margin-left:auto;display:flex;gap:.3rem}

.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(5.2rem,1fr));gap:.35rem;margin-bottom:.6rem}
.kpi div{border:1px solid var(--line);border-radius:4px;padding:.4rem .5rem;background:var(--paper)}
.kpi .k{font-family:var(--mono);font-size:.5rem;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.kpi .v{font-size:.98rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.2}
.kpi .hot{border-color:var(--crit);background:var(--crit-soft)}
.kpi .hot .v,.kpi .hot .k{color:var(--crit)}

table.mini{font-size:.68rem}
table.mini th{font-size:.5rem;padding:.28rem .4rem}
table.mini td{padding:.34rem .4rem}
.dotst{display:inline-flex;align-items:center;gap:.25rem;white-space:nowrap}
.dotst i{width:5px;height:5px;border-radius:50%;flex:none}
.dotst.p i{background:var(--accent)} .dotst.r i{background:var(--warn)}
.dotst.g i{background:var(--info)} .dotst.d i{background:var(--ok)}
.dotst.h i{background:var(--crit)}
.age{font-family:var(--mono);font-size:.64rem;display:inline-flex;gap:.25rem;align-items:center}
.age em{width:1.6rem;height:3px;background:var(--line);border-radius:2px;display:block;position:relative;overflow:hidden}
.age em s{position:absolute;left:0;top:0;bottom:0;text-decoration:none;display:block}
.age.ok{color:var(--muted)} .age.ok em s{background:var(--ok)}
.age.w{color:var(--warn);font-weight:600} .age.w em s{background:var(--warn)}
.age.c{color:var(--crit);font-weight:700} .age.c em s{background:var(--crit)}

/* need list beside a mockup */
.need{font-size:.87rem}
.need h3{font-size:.9rem;font-weight:700;margin:0 0 .5rem;letter-spacing:-.01em}
.need ul{margin:0 0 .9rem;padding-left:1.05rem;color:var(--muted)}
.need li{margin-bottom:.34rem}
.need li b{color:var(--ink);font-weight:600}
.need .lbl{font-family:var(--mono);font-size:.56rem;letter-spacing:.11em;text-transform:uppercase;color:var(--accent);margin:0 0 .35rem}

.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:.55rem}
.pgrid div{border:1px solid var(--line);border-radius:5px;background:var(--paper);padding:.7rem .8rem;display:grid;gap:.18rem;align-content:start}
.pgrid .n{font-family:var(--mono);font-size:.56rem;letter-spacing:.11em;text-transform:uppercase;color:var(--accent)}
.pgrid b{font-size:.88rem;font-weight:700;letter-spacing:-.01em}
.pgrid span{font-size:.76rem;color:var(--muted);line-height:1.4}
.pgrid .x{border-color:var(--warn);background:var(--warn-soft)}
.pgrid .x .n{color:var(--warn)}

.slide.title{justify-content:center}
.slide.title h1{font-size:clamp(1.9rem,4.6vw,3.5rem);font-weight:700;letter-spacing:-.035em;line-height:1.03;margin:0 0 .9rem;max-width:22em}
.slide.title .kick{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:1.2rem}
.slide.title .who{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.45rem 2.2rem;font-family:var(--mono);font-size:.72rem;color:var(--faint)}
.slide.title .who b{color:var(--muted);font-weight:500}
.slide.title .badge{display:inline-block;margin-bottom:1rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .7rem;border-radius:3px}

.tl{display:flex;margin:1rem 0}
.tl .seg{flex:1;padding:.75rem .85rem;background:var(--paper);border:1px solid var(--line);border-right:0}
.tl .seg:last-child{border-right:1px solid var(--line);border-radius:0 6px 6px 0}
.tl .seg:first-child{border-radius:6px 0 0 6px}
.tl .seg .w{font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:.25rem}
.tl .seg b{display:block;font-size:.88rem;margin-bottom:.15rem}
.tl .seg span{font-size:.75rem;color:var(--muted);line-height:1.35}
.tl .seg.mark{background:var(--accent-soft);border-color:var(--accent)}
@media (max-width:840px){.tl{flex-direction:column}.tl .seg{border-right:1px solid var(--line)}.tl .seg:first-child,.tl .seg:last-child{border-radius:0}}

ol.qq{margin:0;padding-left:1.3rem;font-size:.9rem;columns:2;column-gap:2.2rem}
@media (max-width:920px){ol.qq{columns:1}}
ol.qq li{margin-bottom:.55rem;break-inside:avoid;padding-left:.15rem}
ol.qq span{display:block;font-size:.8rem;color:var(--muted);margin-top:.08rem}

@media print{
  body{overflow:visible;height:auto}
  .bar{display:none}
  .slide{display:flex!important;position:static;page-break-after:always;min-height:96vh}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}