/* Walkthrough deck. Tokens only (see ../styles.css). */
html, body.deck-body { height: 100%; }
body.deck-body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); overflow: hidden; }
.deck-bar { position: fixed; inset: 0 0 auto 0; height: 44px; display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-4); background: var(--surface); border-bottom: 1px solid var(--rule); z-index: 20; font-family: var(--font-ui); font-size: var(--fs-sm); }
.deck-brand { font-family: var(--font-display); font-weight: 700; color: var(--ink); text-decoration: none; }
.deck-link { color: var(--ink-2); }
.deck-count { font-family: var(--font-mono); color: var(--ink-3); margin-left: auto; }
.deck-ctrls { display: flex; gap: var(--sp-1); flex-wrap: nowrap; }
.deck-btn { font: inherit; font-size: var(--fs-sm); background: var(--surface-2); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--radius-sm);
  padding: 3px 9px; cursor: pointer; }
.deck-btn:hover { border-color: var(--rule-strong); }
.deck-btn[aria-pressed="true"] { background: var(--accent-wash); border-color: var(--accent); }
.deck-btn:focus-visible, .chip:focus-visible, .ov-card:focus-visible, .term:focus-visible, .gal-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.deck { position: fixed; inset: 44px 0 0 0; overflow: auto; outline: none; }
.dk-slide { min-height: 100%; box-sizing: border-box; padding: var(--sp-5) clamp(16px, 4vw, 56px) var(--sp-6); display: none; flex-direction: column; gap: var(--sp-3); }
.dk-slide.is-current { display: flex; }
.dk-slide-head { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.dk-slide-num { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink-3); }
.dk-slide h1 { font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 2.3rem); line-height: 1.1; margin: 0; letter-spacing: -0.01em; }
.dk-slide .sub { color: var(--ink-2); margin: 0; max-width: 70ch; font-size: var(--fs-base); }
.dk-slide-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.cap { font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--ink-3); margin: 0; }
.cap code, .mono { font-family: var(--font-mono); }

/* fragments */
[data-f] { transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
[data-f].frag-hidden { opacity: 0; transform: translateY(6px); pointer-events: none; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { [data-f] { transition: none; } [data-f].frag-hidden { transform: none; } }

/* terms */
.term { border-bottom: 1px dotted var(--ink-3); cursor: help; }

/* title slide */
.big-pair { display: flex; gap: clamp(16px, 5vw, 72px); align-items: flex-end; flex-wrap: wrap; margin-top: var(--sp-4); }
.big { display: flex; flex-direction: column; }
.big .v { font-family: var(--font-display); font-size: clamp(3rem, 9vw, 7rem); font-weight: 700; line-height: 1; }
.big .l { font-family: var(--font-ui); color: var(--ink-2); font-size: var(--fs-sm); }
.big.ours .v { color: var(--accent); }
.big .ci { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); }
.arrow-big { font-size: clamp(2rem, 5vw, 4rem); color: var(--ink-3); padding-bottom: 1.2rem; }
.formula { font-family: var(--font-mono); font-size: clamp(1rem, 2vw, 1.5rem); background: var(--surface-2); border: 1px solid var(--rule); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); align-self: flex-start; }
.delta-tag { font-family: var(--font-mono); background: var(--accent-wash); border-radius: var(--radius-sm); padding: 2px 8px; }

/* search space */
.space { display: grid; grid-template-columns: minmax(130px, 190px) 1fr; gap: 4px var(--sp-3); align-items: start; }
.space .g { grid-column: 1 / -1; font-family: var(--font-ui); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin-top: var(--sp-2); border-top: 1px solid var(--rule); padding-top: 4px; }
.space .ax { font-family: var(--font-ui); font-size: var(--fs-sm); color: var(--ink-2); padding-top: 3px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { font: inherit; font-family: var(--font-ui); font-size: var(--fs-xs); border-radius: 999px; padding: 2px 9px; cursor: pointer;
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--rule); transition: background 0.3s var(--ease), border-color 0.3s var(--ease); }
.chip .mk { font-family: var(--font-mono); margin-right: 4px; opacity: 0.85; }
.space[data-stage="0"] .chip .mk { visibility: hidden; }
.chip.on.s-worked { background: color-mix(in srgb, var(--ok) 22%, var(--surface)); border-color: var(--ok); color: var(--ink); }
.chip.on.s-failed { background: color-mix(in srgb, var(--bad) 18%, var(--surface)); border-color: var(--bad); color: var(--ink); }
.chip.on.s-running { background: var(--accent-2-wash); border-color: var(--accent-2); color: var(--ink); }
.chip.on.s-queued { background: color-mix(in srgb, var(--warn) 20%, var(--surface)); border-color: var(--warn); color: var(--ink); }
.chip.on.s-used { background: color-mix(in srgb, var(--series-5) 18%, var(--surface)); border-color: var(--series-5); color: var(--ink); }
.chip.on.s-untested { background: var(--surface); border: 1px dashed var(--rule-strong); color: var(--ink); }
.chip.on.s-rules { background: repeating-linear-gradient(135deg, var(--surface-2) 0 4px, var(--surface) 4px 8px); color: var(--ink-3); text-decoration: line-through; }
.chip.sel { outline: 2px solid var(--accent); }
.legend-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; font-family: var(--font-ui); font-size: var(--fs-xs); }
.count-big { font-family: var(--font-display); font-size: var(--fs-lg); }
.evidence { min-height: 2.6em; font-family: var(--font-ui); font-size: var(--fs-sm); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); }
.split { display: grid; grid-template-columns: 1fr 300px; gap: var(--sp-4); align-items: start; }
.split .side { position: sticky; top: 0; display: flex; flex-direction: column; gap: var(--sp-3); }

/* galleries */
.gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-3); }
.ex { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; font-family: var(--font-ui); font-size: var(--fs-xs); }
.ex .im { position: relative; background: var(--surface-2); aspect-ratio: 4 / 3; }
.ex .im img, .ex .im svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ex .bd { padding: var(--sp-2); display: flex; flex-direction: column; gap: 3px; }
.ex .q { color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ex .tag { color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
.ex .ans { font-family: var(--font-mono); }
.ok-t { color: var(--ok); } .bad-t { color: var(--bad); }
.box-gold { fill: none; stroke: var(--ok); stroke-width: 3; }
.box-pred { fill: none; stroke: var(--bad); stroke-width: 3; stroke-dasharray: 6 4; }
.gal-tabs { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.gal-btn { font: inherit; font-family: var(--font-ui); font-size: var(--fs-sm); padding: 3px 10px; border-radius: 999px; border: 1px solid var(--rule); background: var(--surface-2); color: var(--ink); cursor: pointer; }
.gal-btn[aria-pressed="true"] { background: var(--accent-wash); border-color: var(--accent); }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-3); }
.tile { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--sp-3); }
.tile .v { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; line-height: 1.1; }
.tile .l { font-family: var(--font-ui); font-size: var(--fs-sm); color: var(--ink-2); }
.tile .n { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); }

/* folds */
.fgrid { display: grid; gap: 3px; font-family: var(--font-ui); font-size: var(--fs-xs); overflow-x: auto; }
.fgrid .h { font-family: var(--font-mono); color: var(--ink-3); text-align: center; }
.fgrid .src { color: var(--ink-2); white-space: nowrap; padding-right: var(--sp-2); }
.fgrid .c { background: var(--surface-2); border-radius: 3px; min-height: 20px; }
.fgrid .c.out { background: var(--accent); }
.fgrid .c.outR { background: var(--accent-2); }

/* GRPO */
.grpo { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--sp-2); }
.roll { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-xs); text-align: center; display: flex; flex-direction: column; gap: 4px; }
.roll .r { font-size: var(--fs-md); }
.roll .bar { height: 40px; position: relative; border-top: 1px solid var(--rule); }
.roll .bar span { position: absolute; left: 25%; width: 50%; }
.pipe { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; font-family: var(--font-ui); }
.pipe .p { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); }
.pipe .p b { font-family: var(--font-display); }
.pipe .arr { color: var(--ink-3); }

/* explorer */
.xp { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.reply { font-family: var(--font-mono); font-size: var(--fs-xs); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: var(--sp-3); white-space: pre-wrap; max-height: 40vh; overflow: auto; }
.placeholder { border: 2px dashed var(--rule-strong); border-radius: var(--radius); padding: var(--sp-4); color: var(--ink-2); font-family: var(--font-ui); text-align: center; }
input[type="range"] { width: 100%; accent-color: var(--accent); }

/* questions */
.qs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-3); }
.qcard { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.qcard p { margin: 0; font-size: var(--fs-md); font-family: var(--font-display); line-height: 1.25; }
.qcard .deck-btn { align-self: flex-start; }

/* overview */
.deck-overview { position: fixed; inset: 44px 0 0 0; background: var(--bg); overflow: auto; z-index: 15; padding: var(--sp-5);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-3); align-content: start; }
.deck-overview[hidden] { display: none; }
.ov-card { font: inherit; text-align: left; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--sp-3); cursor: pointer; color: var(--ink); min-height: 96px; display: flex; flex-direction: column; gap: 4px; }
.ov-card .n { font-family: var(--font-mono); color: var(--ink-3); font-size: var(--fs-xs); }
.ov-card .t { font-family: var(--font-display); font-size: var(--fs-md); }
.ov-card.cur { border-color: var(--accent); }
.ov-card .fl { font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--accent); }

/* notes */
.deck-notes { position: fixed; right: 0; top: 44px; bottom: 0; width: min(380px, 100%); background: var(--surface); border-left: 1px solid var(--rule); z-index: 25;
  display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); box-shadow: var(--shadow); }
.deck-notes[hidden] { display: none; }
.notes-head { display: flex; gap: var(--sp-2); align-items: center; font-family: var(--font-ui); font-size: var(--fs-sm); }
.notes-head strong { flex: 1; }
.notes-saved { color: var(--ink-3); font-size: var(--fs-xs); }
.deck-notes textarea { flex: 1; resize: none; font-family: var(--font-body); font-size: var(--fs-base); background: var(--bg); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: var(--sp-2); }
.notes-foot { display: flex; gap: var(--sp-2); }

@media (max-width: 760px) {
  body.deck-body { overflow: auto; }
  .deck-link, .deck-brand { display: none; }
  .deck-bar { gap: var(--sp-2); padding: 0 var(--sp-2); }
  .deck-btn { padding: 3px 6px; }
  .split, .xp { grid-template-columns: 1fr; }
  .space { grid-template-columns: 1fr; }
  .space .ax { font-weight: 600; }
  .grpo { grid-template-columns: repeat(4, 1fr); }
  .dk-slide { padding: var(--sp-4) 16px var(--sp-6); }
}