/* ============================================================================
   deck.css — the project presentation.
   ----------------------------------------------------------------------------
   Sits on top of clusterhack.css and guide.css (which carries the shared page
   frame and the illustration slots). The page is a deck that can be read as
   an article, presented from a projector (f), and printed (p). Everything
   here serves one sentence: the thesis is set at display size on the cover,
   its three clauses become the deck's structure, and every other surface
   stays quiet so that one sentence keeps the whole page's weight.

   Prefix: .deck-   Modes: html.deck-js (script ran), html.deck-present
   ========================================================================== */

.hk-deck{--deck-progress:0}
.deck{padding-bottom:20px}
.hk-deck .hk-footer{padding-bottom:84px} /* the statusline is fixed over it */

/* ---- one slide ---------------------------------------------------------- */
.deck-slide{padding:54px 0 10px;scroll-margin-top:72px}
.deck-slide .guide-sec-head{margin-bottom:24px}
.deck-n{font-family:var(--hk-mono);font-weight:400;color:var(--hk-faint);margin-right:6px;letter-spacing:.02em}

/* ---- cover -------------------------------------------------------------- */
.deck-cover{padding:60px 0 8px}
.deck-eyebrow{display:flex;gap:18px;flex-wrap:wrap;align-items:baseline}
.deck-meta{font-family:var(--hk-mono);font-size:12px;color:var(--hk-faint)}
.deck-meta kbd{font-family:inherit;color:var(--hk-dim)}
.deck-neg{font-family:var(--hk-mono);font-size:13.5px;color:var(--hk-dim);margin:18px 0 10px;letter-spacing:.01em}
.deck-thesis{font-family:var(--hk-sans);font-weight:700;letter-spacing:-.035em;line-height:1.04;
  font-size:clamp(30px,6.2vw,68px);color:var(--hk-ink);margin:0 0 20px;text-wrap:balance;max-width:16ch}
.deck-thesis .k{color:var(--hk-amber)}

/* The three clauses double as the deck's contents. */
.deck-clauses{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:32px 0 0;
  border:1px solid var(--hk-line);border-radius:var(--hk-radius);overflow:hidden;background:var(--hk-surface)}
.deck-clauses a{display:block;padding:14px 16px;border-right:1px solid var(--hk-line);
  transition:background .16s var(--hk-ease)}
.deck-clauses a:last-child{border-right:0}
.deck-clauses a:hover,.deck-clauses a:focus-visible{background:var(--hk-surface-2)}
.deck-clauses .t{display:block;font-family:var(--hk-mono);font-size:12px;color:var(--hk-dim)}
.deck-clauses .n{display:block;font-family:var(--hk-sans);font-size:15px;font-weight:600;
  color:var(--hk-ink);margin-top:4px}

/* One idea, stated once, at size. Used sparingly. */
.deck-big{font-family:var(--hk-sans);font-size:clamp(22px,3.4vw,34px);font-weight:700;
  letter-spacing:-.025em;line-height:1.2;color:var(--hk-ink);max-width:22ch;margin:0 0 24px;text-wrap:balance}
.deck-big .k{color:var(--hk-amber)}
#metric .deck-big{max-width:28ch}
#why-now .deck-big,#money .deck-big{max-width:26ch}

/* ---- why now: the subtraction ledger ------------------------------------ */
.deck-ledger{font-family:var(--hk-mono);font-size:13.5px;line-height:1.7;background:var(--hk-surface);
  border:1px solid var(--hk-line);border-radius:var(--hk-radius);padding:16px 22px;margin:22px 0 0;display:grid;gap:6px}
.deck-ledger .row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.35fr);gap:14px;align-items:baseline}
.deck-ledger .lhs{color:var(--hk-muted)} .deck-ledger .lhs em{font-style:normal;color:var(--hk-ink)}
.deck-ledger .op{color:var(--hk-faint)}
.deck-ledger .rhs{color:var(--hk-ink)}
.deck-ledger .row.sum{border-top:1px solid var(--hk-line);padding-top:10px;margin-top:4px}
.deck-ledger .row.sum .rhs{color:var(--hk-amber)}

/* ---- the thesis unpacked ----------------------------------------------- */
.deck-three{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.deck-card{background:var(--hk-surface);border:1px solid var(--hk-line);border-radius:var(--hk-radius);
  padding:20px;scroll-margin-top:76px}
.deck-card .tag{font-family:var(--hk-mono);font-size:11.5px;color:var(--hk-dim);display:block;margin-bottom:10px}
.deck-card h3{font-family:var(--hk-sans);font-size:19px;font-weight:700;letter-spacing:-.015em;
  color:var(--hk-ink);margin:0 0 10px}
.deck-card p{font-size:14.5px;color:var(--hk-muted);line-height:1.65;margin:0 0 12px}
.deck-card p.mono{font-family:var(--hk-mono);font-size:12px;color:var(--hk-cyan);margin:0;
  padding-top:12px;border-top:1px solid var(--hk-line)}

/* ---- screens of the real product ---------------------------------------- */
.deck-evening{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.deck-shot{margin:0;background:var(--hk-surface);border:1px solid var(--hk-line);border-radius:var(--hk-radius);
  overflow:hidden;box-shadow:var(--hk-shadow);display:flex;flex-direction:column;min-width:0}
.deck-shot-bar{display:flex;align-items:center;gap:7px;padding:9px 12px;border-bottom:1px solid var(--hk-line);
  background:var(--hk-surface-2);font-family:var(--hk-mono);font-size:11.5px;color:var(--hk-muted)}
.deck-shot-bar .hk-dot{width:9px;height:9px}
.deck-shot-bar .title{margin-left:4px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deck-shot-bar .hk-pill{margin-left:auto;flex:none}
.deck-shot picture{display:block;background:var(--hk-bg)}
.deck-shot img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top}
.deck-shot figcaption{padding:12px 14px 14px;font-size:13.5px;line-height:1.55;color:var(--hk-muted);
  border-top:1px solid var(--hk-line);margin-top:auto}
.deck-shot figcaption b{display:block;font-family:var(--hk-mono);font-weight:600;font-size:12px;
  color:var(--hk-ink);margin-bottom:5px;letter-spacing:.01em}
.deck-shot figcaption b .t{color:var(--hk-amber);margin-right:6px}

.deck-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,44%);gap:16px;overflow-x:auto;
  scroll-snap-type:x mandatory;padding:4px 2px 14px;margin-top:22px;scrollbar-width:thin;
  scrollbar-color:var(--hk-faint) transparent}
.deck-strip .deck-shot{scroll-snap-align:start}
.deck-strip-hint{font-family:var(--hk-mono);font-size:12px;color:var(--hk-faint);margin:0}

/* ---- who it is for ------------------------------------------------------ */
.deck-rows{display:grid;gap:0}
.deck-row{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;padding:22px 0;
  border-top:1px solid var(--hk-line)}
.deck-row:last-child{border-bottom:1px solid var(--hk-line)}
.deck-row-who .who{font-family:var(--hk-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--hk-amber);display:block;margin-bottom:8px}
.deck-row-who h3{font-family:var(--hk-sans);font-size:20px;font-weight:700;letter-spacing:-.015em;
  color:var(--hk-ink);margin:0}
.deck-row .guide-body p:last-child{margin-bottom:0}

/* ---- what exists -------------------------------------------------------- */
.deck-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.deck-stats .stat{background:var(--hk-surface);border:1px solid var(--hk-line);
  border-radius:var(--hk-radius);padding:18px 20px}
.deck-stats b{display:block;font-family:var(--hk-sans);font-size:clamp(28px,4vw,40px);font-weight:700;
  letter-spacing:-.03em;color:var(--hk-amber);line-height:1;margin-bottom:8px}
.deck-stats span{font-size:13.5px;color:var(--hk-muted);line-height:1.55}
.deck-stats small{display:block;font-family:var(--hk-mono);font-size:11px;color:var(--hk-faint);margin-top:8px}

/* ---- three columns (money, status) -------------------------------------- */
.deck-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.deck-col{background:var(--hk-surface);border:1px solid var(--hk-line);border-top:2px solid var(--accent,var(--hk-line));
  border-radius:var(--hk-radius);padding:18px 20px}
.deck-col.free{--accent:var(--hk-live)} .deck-col.costume{--accent:var(--hk-amber)} .deck-col.never{--accent:var(--hk-red)}
.deck-col.live{--accent:var(--hk-live)} .deck-col.notyet{--accent:var(--hk-dim)} .deck-col.next{--accent:var(--hk-cyan)}
.deck-col h3{font-family:var(--hk-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--hk-muted);margin:0 0 12px;font-weight:600}
.deck-col ul{list-style:none;margin:0;padding:0}
.deck-col li{font-size:14px;color:var(--hk-muted);line-height:1.55;padding:7px 0;border-top:1px dashed var(--hk-line-2)}
.deck-col li:first-child{border-top:0;padding-top:0}
.deck-col li b{color:var(--hk-ink);font-weight:600}
.deck-col li code{font-family:var(--hk-mono);font-size:12.5px;color:var(--hk-cyan)}
.deck-env{margin-top:18px;font-family:var(--hk-mono);font-size:13px;display:flex;flex-wrap:wrap;gap:8px 28px;
  padding:13px 18px;background:var(--hk-surface);border:1px solid var(--hk-line);border-radius:var(--hk-radius-sm)}
.deck-env b{color:var(--hk-muted);font-weight:400} .deck-env .v{color:var(--hk-ink)} .deck-env .v.c{color:var(--hk-cyan)}

/* ---- the laws ----------------------------------------------------------- */
.deck-laws{list-style:none;counter-reset:law;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.deck-laws li{counter-increment:law;position:relative;padding:15px 17px 15px 46px;
  background:var(--hk-surface);border:1px solid var(--hk-line);border-radius:var(--hk-radius-sm);
  font-size:14.5px;color:var(--hk-muted);line-height:1.6}
.deck-laws li::before{content:counter(law,decimal-leading-zero);position:absolute;left:16px;top:15px;
  font-family:var(--hk-mono);font-size:12px;color:var(--hk-faint)}
.deck-laws b{color:var(--hk-ink);font-weight:600}

/* ---- close -------------------------------------------------------------- */
.deck-close .guide-end{margin-top:8px}
.deck-mcp{margin-top:20px;display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:center;
  background:linear-gradient(120deg,var(--hk-surface),var(--hk-bg-2));border:1px solid var(--hk-line);
  border-radius:var(--hk-radius-lg);padding:26px 28px}
.deck-mcp h3{font-family:var(--hk-sans);font-size:20px;font-weight:700;letter-spacing:-.015em;color:var(--hk-ink);margin:8px 0 8px}
.deck-mcp p{color:var(--hk-muted);margin:0;max-width:46ch;line-height:1.65}
.deck-mcp .hk-runbox pre{margin:0;white-space:pre-wrap;word-break:break-word}

/* ---- the statusline: vim at the bottom of the screen -------------------- */
.deck-status{position:fixed;left:0;right:0;bottom:0;z-index:35;height:36px;display:flex;align-items:center;gap:18px;
  padding:0 18px;font-family:var(--hk-mono);font-size:12px;color:var(--hk-muted);background:var(--hk-nav);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--hk-line)}
.deck-status::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:calc(var(--deck-progress,0)*100%);
  background:var(--hk-amber);transition:width .35s var(--hk-ease)}
.deck-status .mode{color:var(--hk-ink);font-weight:600;letter-spacing:.06em;white-space:nowrap}
.deck-present .deck-status .mode{color:var(--hk-amber)}
.deck-status .where{color:var(--hk-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.deck-status .where b{color:var(--hk-ink);font-weight:600}
.deck-status .keys{margin-left:auto;color:var(--hk-dim);display:flex;gap:16px;white-space:nowrap}
.deck-status kbd{font-family:inherit;font-size:11px;color:var(--hk-muted);background:var(--hk-bg);
  border:1px solid var(--hk-line);border-radius:4px;padding:0 5px;margin-right:2px}
.deck-status .btns{display:flex;gap:6px;flex:none}
.deck-status button{appearance:none;background:transparent;border:1px solid var(--hk-line);border-radius:6px;
  color:var(--hk-muted);font:inherit;line-height:1;padding:4px 9px;cursor:pointer;transition:color .15s var(--hk-ease),border-color .15s var(--hk-ease)}
.deck-status button:hover,.deck-status button:focus-visible{color:var(--hk-ink);border-color:var(--hk-faint)}
.deck-present .deck-status [data-deck-present]{color:var(--hk-amber);border-color:rgba(255,138,61,.4)}

/* ---- keys overlay (?) --------------------------------------------------- */
.deck-keys{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;
  background:rgba(7,11,22,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.deck-keys.open{display:flex}
.deck-keys .box{background:var(--hk-surface);border:1px solid var(--hk-line);border-radius:var(--hk-radius);
  padding:22px 24px 20px;width:min(440px,calc(100vw - 32px));box-shadow:var(--hk-shadow-lg)}
.deck-keys h3{font-family:var(--hk-mono);font-size:13px;font-weight:600;margin:0 0 14px;color:var(--hk-ink)}
.deck-keys h3 .p{color:var(--hk-amber)}
.deck-keys dl{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;margin:0;font-family:var(--hk-mono);
  font-size:12.5px;color:var(--hk-muted);align-items:baseline}
.deck-keys dt{color:var(--hk-ink);white-space:nowrap}
.deck-keys dt kbd{font-family:inherit;background:var(--hk-bg);border:1px solid var(--hk-line);border-radius:4px;padding:1px 6px;margin-right:3px}
.deck-keys dd{margin:0}
.deck-keys .foot{margin:16px 0 0;font-family:var(--hk-mono);font-size:11.5px;color:var(--hk-faint)}

/* ---- reveal on scroll (only once the script is in, never without it) ---- */
@media(prefers-reduced-motion:no-preference){
  html.deck-js .deck-slide>*{opacity:0;transform:translateY(12px);
    transition:opacity .55s var(--hk-ease),transform .55s var(--hk-ease)}
  html.deck-js .deck-slide.is-in>*{opacity:1;transform:none}
  html.deck-js .deck-slide.is-in>:nth-child(2){transition-delay:.07s}
  html.deck-js .deck-slide.is-in>:nth-child(3){transition-delay:.14s}
  html.deck-js .deck-slide.is-in>:nth-child(4){transition-delay:.21s}
  html.deck-js .deck-slide.is-in>:nth-child(5){transition-delay:.28s}
  html.deck-js .deck-slide.is-in>:nth-child(n+6){transition-delay:.34s}
}

/* ---- present mode (f): one slide per screen, chrome gone ---------------- */
html.deck-present{scroll-snap-type:y proximity}
.deck-present .hk-bar,.deck-present .hk-footer,.deck-present .pwa-shell{display:none!important}
.deck-present .deck{padding-bottom:0}
.deck-present .deck-slide{min-height:100vh;min-height:100svh;box-sizing:border-box;display:flex;flex-direction:column;
  justify-content:center;padding:40px 0 58px;scroll-margin-top:0;scroll-snap-align:start}
.deck-present .deck-slide+.deck-slide{margin-top:0}
.deck-present .deck-cover{padding-top:40px}
.deck-present .deck-thesis{font-size:clamp(32px,5.6vw,76px);max-width:18ch}
.deck-present .deck-big{font-size:clamp(26px,4vw,44px)}
.deck-present .guide-body p,.deck-present .guide-lead{font-size:17px}
.deck-present .ill{text-align:center;margin-bottom:0}
.deck-present .ill-img{max-height:28vh;width:auto;max-width:100%;margin:0 auto;aspect-ratio:auto}
.deck-present .ill-empty{display:none}
/* The screens fit one row each on a projector; the wide diagram under
   ~/built yields its space to them. */
.deck-present .deck-evening{grid-template-columns:repeat(4,1fr);gap:12px}
.deck-present .deck-shot figcaption{font-size:12.5px;padding:10px 12px 12px}
.deck-present .deck-strip{grid-auto-flow:row;grid-template-columns:repeat(5,1fr);grid-auto-columns:auto;gap:12px;
  overflow:visible;padding-bottom:0;margin-top:16px}
.deck-present .deck-strip .deck-shot figcaption,.deck-present .deck-strip .deck-shot-bar,
.deck-present .deck-strip-hint,.deck-present #built .ill{display:none}
.deck-present #built .map-card{padding:13px 15px}
.deck-present #built .map-card p{font-size:13px;line-height:1.5}
.deck-present #built .deck-stats .stat{padding:13px 18px}
.deck-present #built .deck-stats b{font-size:clamp(24px,3vw,32px)}
.deck-present .deck-cover .ill-img{max-height:24vh}

/* ---- narrow screens ----------------------------------------------------- */
@media(max-width:900px){
  .deck-three,.deck-stats,.deck-cols,.deck-evening{grid-template-columns:1fr}
  .deck-clauses{grid-template-columns:1fr}
  .deck-clauses a{border-right:0;border-bottom:1px solid var(--hk-line)}
  .deck-clauses a:last-child{border-bottom:0}
  .deck-row{grid-template-columns:1fr;gap:10px}
  .deck-laws{grid-template-columns:1fr}
  .deck-mcp{grid-template-columns:1fr}
  .deck-strip{grid-auto-columns:minmax(260px,84%)}
}
@media(max-width:720px){
  .deck-status{gap:12px;padding:0 12px}
  .deck-status .keys,.deck-status .pfx{display:none}
  .deck-ledger .row{grid-template-columns:1fr;gap:2px}
  .deck-ledger .op{display:none}
  .deck-ledger .rhs::before{content:"= ";color:var(--hk-faint)}
}
@media(prefers-reduced-motion:reduce){
  html.deck-present{scroll-behavior:auto}
  .deck-status::before{transition:none}
}

/* ---- print (p): one slide per page, the dark room kept -----------------
   Last in the file on purpose: it has to win over the narrow-screen rules. */
@media print{
  @page{size:A4 landscape;margin:10mm}
  html,body{background:#0A0F1E!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .hk-bar,.hk-footer,.deck-status,.deck-keys,.hk-cmdk,.pwa-shell{display:none!important}
  /* A slide is laid out for a 1000px column; a landscape page holds ~1030px
     across and ~720px down, so the deck is scaled to fit one slide per page. */
  .deck{padding:0;zoom:.72}
  .deck-slide{break-after:page;page-break-after:always;break-inside:avoid;padding:14px 0;min-height:auto}
  .deck-slide:last-child{break-after:auto;page-break-after:auto}
  html.deck-js .deck-slide>*{opacity:1!important;transform:none!important}
  .ill{margin-bottom:0;text-align:center}
  .ill-img{max-height:34vh;width:auto;max-width:100%;margin:0 auto;aspect-ratio:auto}
  .ill-cap{display:none}
  /* Explicit columns: the paper's width must not fall into the narrow-screen rules. */
  .deck-clauses,.deck-three,.deck-stats,.deck-cols,#built .map-grid{grid-template-columns:repeat(3,1fr)}
  .deck-evening{grid-template-columns:repeat(4,1fr);gap:10px}
  .deck-laws,.dont{grid-template-columns:repeat(2,1fr)}
  .deck-row{grid-template-columns:.8fr 1.2fr}
  .deck-mcp{grid-template-columns:1.1fr .9fr}
  .deck-clauses a{border-right:1px solid var(--hk-line);border-bottom:0}
  .deck-clauses a:last-child{border-right:0}
  .deck-shot figcaption{font-size:11.5px;padding:8px 10px 10px}
  .deck-strip{overflow:visible;grid-auto-flow:row;grid-template-columns:repeat(5,1fr);grid-auto-columns:auto;gap:10px;padding:0;margin-top:12px}
  .deck-strip .deck-shot figcaption,.deck-strip .deck-shot-bar,.deck-strip-hint,#built .ill{display:none}
  #built .deck-stats .stat{padding:12px 16px}
  #built .map-card{padding:12px 14px}
  #built .map-card p{font-size:12.5px;line-height:1.45}
  .deck-shot{box-shadow:none;break-inside:avoid}
  a[href]::after{content:none!important}
}