/* Qrly slide decks (deck.html, pitchdeck.html) — slide layout only.
   Everything visual comes from css/site.css tokens and classes; this file adds the
   one-slide-per-viewport frame (bar, dot rail, footer) and the few deck-only layouts. */

:root { --bar-h:52px; --rail-w:44px; --slide-pad:clamp(20px,4vw,48px); }

/* ---------- Frame ---------- */
html { scroll-snap-type:y mandatory; }
body { counter-reset:slide; }

.deck-bar { position:fixed; inset:0 0 auto 0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:8px 16px; min-height:var(--bar-h); padding:0 clamp(16px,4vw,40px); background:var(--bg); border-bottom:1px solid var(--line); }
.deck-bar-tools { display:flex; align-items:center; gap:14px; }

.slide-nav { position:fixed; top:var(--bar-h); right:0; bottom:0; z-index:10; display:flex; flex-direction:column; align-items:center; justify-content:center; width:var(--rail-w); background:var(--bg); border-left:1px solid var(--line); }
.slide-nav a { display:grid; place-items:center; width:28px; height:24px; }
.slide-nav a::before { content:""; width:7px; height:7px; border:1px solid var(--muted); background:var(--bg); transition:background .15s, border-color .15s; }
.slide-nav a:hover::before { border-color:var(--ink); background:var(--line); }
.slide-nav a.active::before, .slide-nav a[aria-current]::before { width:9px; height:9px; border-color:var(--ink); background:var(--ink); }

section.slide { counter-increment:slide; scroll-snap-align:start; scroll-margin-top:0; display:flex; align-items:center; min-height:100vh; min-height:100svh; padding:calc(var(--bar-h) + 24px) calc(var(--rail-w) + var(--slide-pad)) 28px var(--slide-pad); border-bottom:1px solid var(--line); }
.slide-inner { width:100%; max-width:1200px; margin:0 auto; }
.slide .eyebrow { margin-bottom:14px; }
.slide .eyebrow::before { content:counter(slide, decimal-leading-zero) " / "; color:var(--muted); }
.slide h1 em, .slide h2 em { font-style:normal; color:var(--muted); }

.deck-footer { scroll-snap-align:end; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; padding:22px calc(var(--rail-w) + var(--slide-pad)) 22px var(--slide-pad); font-size:12px; color:var(--muted); }
.deck-footer .brand { color:var(--ink); }
.deck-footer-meta { font-family:var(--mono); text-align:right; line-height:1.7; }

/* ---------- Slide building blocks ---------- */
.slide-head { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px clamp(24px,4vw,64px); align-items:end; margin-bottom:clamp(18px,3vh,32px); }
.slide-head > :only-child { grid-column:1 / -1; }
.slide-head .body { font-size:15.5px; }
.slide-head.stack { grid-template-columns:minmax(0,1fr); }
.slide-head.stack .body { max-width:720px; font-size:17px; }

.deck-split { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,5vw,72px); align-items:center; }
.deck-split .h-big { margin-bottom:18px; }
.deck-split .body { font-size:15.5px; }
.deck-split .body + .body { margin-top:12px; }

/* Fixed column counts for the site.css grids (.why, .cells, .figs) */
.cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }

/* CSS-generated 01, 02 … on the children of a grid */
.numbered { counter-reset:item; }
.numbered > * { counter-increment:item; }
.numbered > *::before { content:counter(item, decimal-leading-zero); display:block; margin-bottom:10px; font-family:var(--mono); font-size:12px; color:var(--muted); }

.why .tags, .cells .tags { margin-top:12px; }
.why .incl { margin-top:12px; }
.why .incl li { font-size:13.5px; padding-bottom:6px; }
.why .kicker + .t, .why .tag + .t { margin-top:8px; }
.why > .now { border-top-width:3px; padding-top:14px; }
.d code { font-family:var(--mono); font-size:.92em; color:var(--ink); }
.d em.hl { font-style:normal; font-weight:600; color:var(--ink); }
.quote { margin-top:12px; padding-top:10px; border-top:1px solid var(--line); font-style:italic; }
.incl.x li::before { content:"×"; top:-1px; font-family:var(--mono); font-size:14px; }
.eur::before { content:"€"; }
.mark { padding:0 .3em; background:var(--btn); color:var(--btnFg); }
.cite { font-family:var(--mono); font-size:.72em; line-height:0; vertical-align:super; color:var(--muted); }
.cite.inline { vertical-align:baseline; }
.callout { padding:14px 16px; border-left:2px solid var(--ink); background:var(--tint); font-size:14.5px; color:var(--muted); text-wrap:pretty; }
.callout strong { color:var(--ink); }
.callout .t { margin-bottom:4px; color:var(--ink); }
.meta-row { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 24px; margin-top:12px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.legend { display:flex; flex-wrap:wrap; gap:4px 20px; margin-top:12px; font-size:12px; color:var(--muted); }
.legend .yes::before { content:"■ "; font-size:9px; }
.legend .part::before { content:"◧ "; font-size:9px; }
.legend .no::before { content:"□ "; font-size:9px; }

/* Big mono figure */
.fig { font-family:var(--mono); font-size:clamp(28px,3.2vw,44px); font-weight:500; letter-spacing:-.03em; line-height:1.1; }
.fig em { font-style:normal; color:var(--muted); }
.stat b small { font-size:.55em; color:var(--muted); }
.stat .kicker { margin:0 0 6px; }

/* Cover and closing slides */
.slide-cover .hero-sub { margin-bottom:26px; }
.cover-next { display:inline-block; margin-top:36px; }
.cover-next::before { content:"↓ "; }
.slide-cover .why { margin-top:8px; }
.slide-cta .lead { margin:22px 0 28px; max-width:720px; }
.slide-cta .kv { max-width:680px; margin-top:36px; border-bottom:1px solid var(--line); }
.kv a { text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }

/* Panels inside a .mock figure */
.code-lines { white-space:nowrap; }
.mock-foot { padding:12px 14px; border-top:1px solid var(--line); }
.ledger { padding:4px 16px 12px; font-family:var(--mono); font-size:13px; }
.ledger > div { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:9px 0; border-top:1px solid var(--line); }
.ledger > div:first-child { border-top:0; }
.ledger > div > :first-child { color:var(--muted); }
.ledger > div > :last-child { text-align:right; white-space:nowrap; }
.ledger .total, .ledger .group { border-top-color:var(--ink); }
.ledger .total { font-weight:500; }
.ledger .total > :first-child { color:var(--ink); }
.ledger .group { margin-top:14px; }
.ledger .us { margin:0 -16px; padding:12px 16px; border-top:0; background:var(--btn); color:var(--btnFg); font-weight:500; }
.ledger .us > :first-child, .ledger .us .cite { color:inherit; }
.ledger-note { padding-top:10px; font-size:11px; color:var(--muted); }

.bars { padding:4px 16px 8px; }
.bar { display:grid; grid-template-columns:minmax(0,1fr) minmax(70px,38%) 4ch; gap:14px; align-items:center; padding:9px 0; border-top:1px solid var(--line); font-size:13.5px; }
.bar:first-child { border-top:0; }
.bar small { display:block; font-size:11.5px; color:var(--muted); }
.bar progress { order:2; }
.bar-val { order:3; font-family:var(--mono); font-size:12px; text-align:right; }
.bar.weak .bar-val { background:var(--btn); color:var(--btnFg); text-align:center; }
progress { -webkit-appearance:none; appearance:none; display:block; width:100%; height:6px; border:0; background:var(--line); color:var(--ink); }
progress::-webkit-progress-bar { background:var(--line); }
progress::-webkit-progress-value { background:var(--ink); }
progress::-moz-progress-bar { background:var(--ink); }

.matrix li { display:flex; align-items:baseline; gap:10px; padding:9px 14px; border-top:1px solid var(--line); font-size:14px; }
.matrix li:first-child { border-top:0; }
.matrix li::before { content:"■"; font-size:9px; }
.matrix .tag { margin-left:auto; }

.team { display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; }
.team .kicker { margin:4px 0 8px; }
.avatar { display:grid; place-items:center; width:44px; height:44px; background:var(--btn); color:var(--btnFg); font-family:var(--mono); font-size:18px; font-weight:500; }

.bands { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); margin-top:14px; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.bands > * { padding:9px 12px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.bands .t { font-family:var(--mono); font-weight:500; margin-top:2px; }

.tiers.c3 th:nth-child(2), .tiers.c3 td:nth-child(2) { text-align:left; }
.tiers .num { margin-right:10px; }
.tiers td b { font-size:17px; font-weight:500; }
.tiers td .muted { font-size:12px; }

.sources { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 40px; }
.sources .kicker { margin-bottom:8px; }
.sources li { display:grid; grid-template-columns:3ch minmax(0,1fr); gap:10px; padding:5px 0; border-top:1px solid var(--line); font-size:11.5px; line-height:1.4; color:var(--muted); overflow-wrap:anywhere; text-wrap:pretty; }
.sources li strong { color:var(--ink); }
.sources li a { color:var(--ink); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
.sources + .callout { margin-top:14px; font-size:12px; line-height:1.45; padding:10px 14px; }

/* Denser type on the slides that carry the most content */
.slide-dense .cells > * { padding:12px 14px 14px; }
.slide-dense .cells > *::before { margin-bottom:6px; }
.slide-dense .cells .t { font-size:15px; }
.slide-dense .cells .d { font-size:13px; }
.slide-dense .tbl th, .slide-dense .tbl td { padding-top:9px; padding-bottom:9px; }
.slide-dense .calc > div { padding:16px 22px; }
.slide-dense .calc-figure { margin:6px 0 12px; }
.slide-dense .calc-fee { font-size:clamp(40px,4.4vw,60px); }
.slide-dense .calc-presets { margin-top:12px; }
.slide-dense .figs { margin-top:16px; }
.slide-dense .stat { padding:10px 0 0; }
.slide-dense .stat b { font-size:22px; }

/* ---------- Small viewports: slides flow, no snapping, no rail (screen only, so print keeps the slide layout) ---------- */
@media screen and (max-width:900px), screen and (max-height:840px) {
  html { scroll-snap-type:none; }
  body { padding-top:var(--bar-h); }
  section.slide { scroll-margin-top:var(--bar-h); min-height:0; padding-top:36px; padding-bottom:44px; }
  section.slide:first-of-type { min-height:calc(100vh - var(--bar-h)); min-height:calc(100svh - var(--bar-h)); }
}
@media screen and (max-width:900px) {
  .slide-nav { display:none; }
  section.slide { padding-inline:var(--slide-pad); }
  .deck-footer { padding-inline:var(--slide-pad); }
  .slide-head, .deck-split, .sources { grid-template-columns:minmax(0,1fr); }
  .cols-3, .cols-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bands { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media screen and (max-width:600px) {
  :root { --bar-h:84px; }
  .deck-bar { flex-wrap:wrap; align-content:center; }
  .deck-bar-label { order:3; flex-basis:100%; }
  .deck-bar .sc-label { display:none; }
  .deck-bar .sc-group button { min-width:36px; height:32px; }
  /* keep brand, theme, language and call to action on one row down to 360px */
  .deck-bar { column-gap:8px; }
  .deck-bar-tools { gap:8px; }
  .deck-bar .sc-group + .sc-group { padding-inline-start:0; border-inline-start:0; }
  .deck-bar .sc-group .lang-btn { min-width:0; padding:0 4px; }
  .cols-2, .cols-3, .cols-4 { grid-template-columns:minmax(0,1fr); }
  .figs.cols-3, .figs.cols-4, .bands { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bar { grid-template-columns:minmax(0,1fr) minmax(56px,30%) 4ch; }
  .deck-footer-meta { text-align:left; }
  .tiers td .muted { display:block; }
}

/* ---------- Print: one slide per page ----------
   The page box matches the 1440x900 slide the layout is designed for; printers scale it to the paper. */
@page { size:1440px 900px; margin:0; }
@media print {
  html { scroll-snap-type:none; }
  body { padding-top:0; }
  .deck-bar, .slide-nav, .cover-next { display:none; }
  .agent-mode-toggle { display:none !important; }
  section.slide { height:898px; min-height:0; padding:40px 72px; border:0; break-after:page; break-inside:avoid; }
  section.slide:last-of-type { height:auto; padding-bottom:24px; break-after:auto; }
  .deck-footer { padding:16px 72px; break-before:avoid; break-inside:avoid; }
  .mark, .avatar, .ledger .us, .bar.weak .bar-val, progress, .calc-preset, .btn, .brand-mark { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}