/* The 124-card finale: page-specific styles. Shared tokens and classes come from site.css. */

.why-hall { margin-top: var(--s5); }
.why-hall h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 2.8vw, 1.8rem); }
.why-hall + .stage { margin-top: var(--s3); }
.stage .verdict { margin-top: var(--s2); }
.seed { font-size: 0.85rem; color: var(--secondary-on-stage); font-variant-numeric: tabular-nums; }
.read-dir { font-size: 0.8rem; color: var(--secondary-on-stage); letter-spacing: 0.04em; }

/* ---- The deck as a grid of 124 numbers: picker (buttons) and number line (spans) ---- */
.deck-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
@media (min-width: 720px) { .deck-grid { grid-template-columns: repeat(20, minmax(0, 1fr)); } }
.num-cell {
  position: relative; display: grid; place-items: center; min-width: 0;
  min-height: 38px; border-radius: 6px; border: 1px solid rgba(244, 239, 228, 0.16);
  background: var(--stage-raised); color: var(--paper);
  font: 600 0.95rem/1 var(--font-ui); font-variant-numeric: tabular-nums; padding: 0;
}
button.num-cell { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 120ms var(--ease-press), border-color 120ms ease, background-color 120ms ease; }
button.num-cell:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { button.num-cell:hover { border-color: rgba(244, 239, 228, 0.5); } }
button.num-cell[aria-pressed="true"] { border-color: var(--active); box-shadow: inset 0 0 0 1.5px var(--active); background: color-mix(in oklch, var(--active) 22%, var(--stage-raised)); color: var(--paper); }
.pick-zone .type-form { margin-top: var(--s2); }
.pick-zone .field input { width: 7em; }

/* number line (non-interactive) */
span.num-cell { min-height: 36px; align-content: center; gap: 0; }
span.num-cell .n { font-size: 0.85rem; line-height: 1; }
span.num-cell .sub { font-size: 0.62rem; line-height: 1; color: var(--secondary-on-stage); min-height: 0.62rem; margin-top: 2px; font-weight: 700; }
span.num-cell.is-gone { background: transparent; border-style: dashed; border-color: var(--structure); color: var(--structure); }
span.num-cell.is-gone .n { text-decoration: line-through; text-decoration-thickness: 2px; }
span.num-cell.is-cand { border-color: var(--active); box-shadow: inset 0 0 0 1px var(--active); }
span.num-cell.is-cand .sub { color: var(--active); }
span.num-cell.is-hidden { border-color: var(--invariant); box-shadow: inset 0 0 0 2px var(--invariant); color: var(--invariant); }
span.num-cell.is-hidden .sub { color: var(--invariant); }
.numline-box { margin-top: var(--s3); display: grid; gap: var(--s2); }
.legend .sw-gone { border: 1.5px dashed var(--structure); }
.legend .sw-cand { border: 2px solid var(--active); }
.legend .sw-hidden { border: 2px solid var(--invariant); }

/* ---- Try it ---- */
.try-table { --card-w: clamp(52px, 12vw, 80px); margin-top: var(--s3); }
.try-table .pile[hidden] { display: none; }
.cover-stack .card.is-lean .card-tilt { transform: rotate(-3deg) translateY(-4px); }
.magician-says { margin-top: var(--s3); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.says-lead { color: var(--secondary-on-stage); font-size: 1.05rem; }
.says-number { font-family: var(--font-display); font-size: clamp(2.6rem, 6vw, 3.6rem); line-height: 1; color: var(--paper); font-variant-numeric: tabular-nums; }
.try-controls { margin-top: var(--s3); }

/* ---- You be the magician: worksheet ---- */
.mag-table { --card-w: clamp(52px, 12vw, 76px); margin-top: var(--s2); }
.mag-table .card-row { padding-bottom: 24px; }
.mag-meta { margin-top: var(--s1); }
.worksheet { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: 10px; }
.ws-line { border-left: 3px solid var(--structure); padding: 6px 0 8px 14px; }
.ws-line.is-active { border-color: var(--active); }
.ws-line.is-done { border-color: var(--invariant); }
.ws-head { display: flex; gap: 10px; align-items: baseline; }
.ws-num { font-family: var(--font-math); color: var(--secondary-on-stage); min-width: 1.2em; }
.ws-line.is-active .ws-num { color: var(--active); }
.ws-text { color: var(--paper); line-height: 1.45; }
.ws-line.is-done .ws-text { color: var(--secondary-on-stage); }
.ws-work { justify-items: start; margin-top: 10px; margin-left: calc(1.2em + 10px); display: grid; gap: 10px; }
.ws-work .field { flex-direction: row; align-items: center; gap: 8px; font-family: var(--font-math); font-size: 1.1rem; color: var(--paper); }
.ws-work .field input { width: 6em; }
.ws-result { margin-top: 4px; margin-left: calc(1.2em + 10px); font-family: var(--font-math); font-size: 1.2rem; color: var(--invariant); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ws-fb { margin-left: calc(1.2em + 10px); }
.ws-fb .controls { margin-top: 8px; }
.res-btn { min-width: 44px; min-height: 44px; font-family: var(--font-math); font-size: 1.1rem; }
.gap-trail { display: flex; flex-wrap: wrap; gap: 6px; }
.gap-trail:empty { display: none; }
.gap-q { color: var(--paper); }
.gap-q strong { color: var(--active); }
.ref-table { margin-top: var(--s3); }
.ref-table > summary { cursor: pointer; color: var(--secondary-on-stage); min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.ref-table > summary:hover { color: var(--paper); }
.ref-table[open] > summary { margin-bottom: var(--s1); }

/* ---- table of 24 orders ---- */
.perm-table { display: grid; grid-template-columns: repeat(4, minmax(0, max-content)); gap: 4px 20px; }
.perm-block { display: grid; gap: 2px; }
.perm-row { display: flex; gap: 8px; align-items: baseline; padding: 1px 8px; border-radius: 5px; border: 1.5px solid transparent; font-variant-numeric: tabular-nums; transition: opacity 160ms ease; }
.perm-no { font-size: 0.78rem; color: var(--secondary-on-stage); min-width: 2ch; text-align: right; }
.perm-pat { font-family: var(--font-math); font-size: 1.05rem; letter-spacing: 0.08em; color: var(--paper); }
.perm-row.is-skipped { opacity: 0.4; }
.perm-row.is-on { border-color: var(--active); }
.perm-row.is-on .perm-pat, .perm-row.is-on .perm-no { color: var(--active); }
@media (max-width: 420px) { .perm-table { gap: 4px 6px; } .perm-row { padding: 1px 4px; gap: 5px; } .perm-pat { letter-spacing: 0.03em; } }

/* ---- Why it works stepper ---- */
.why-top { justify-content: space-between; }
.why-instr { margin-top: var(--s2); min-height: 4.4em; }
.why-cards { --card-w: clamp(52px, 11vw, 76px); margin-top: var(--s2); }
.why-cards .card-row { padding-bottom: 24px; }
.why-readouts { margin-top: var(--s2); gap: var(--s2) var(--s3); }
.why-readouts .readout-value { font-size: 1.45rem; }
.why-table { margin-top: var(--s3); }
.why-table .stage-caption { margin-bottom: var(--s1); }
.why-sheet { margin-top: var(--s3); }
.why-sheet .ledger { margin-top: 6px; max-height: none; }
.stage .segmented { flex-wrap: wrap; }

/* ---- Hall's theorem ---- */
.hall-presets { margin: var(--s2) 0; }
.hall-grid { display: grid; gap: var(--s3); }
@media (min-width: 920px) { .hall-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.hall-grid .pile { justify-items: stretch; }
.hall-hands { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.hand-chip { min-height: 36px; min-width: 0; padding: 0 2px; border-radius: 6px; border: 1px solid rgba(244, 239, 228, 0.16); background: var(--stage-raised); color: var(--paper); font: 600 0.84rem/1 var(--font-ui); font-variant-numeric: tabular-nums; cursor: pointer; white-space: nowrap; }
.hand-chip[aria-pressed="true"] { border-color: var(--active); box-shadow: inset 0 0 0 1.5px var(--active); background: color-mix(in oklch, var(--active) 22%, var(--stage-raised)); }
.hand-chip:active { transform: scale(0.95); }
.msg-grid { display: grid; grid-template-columns: auto repeat(8, minmax(0, 1fr)); gap: 3px; }
.mg-head, .mg-corner { display: grid; place-items: center; font-size: 0.78rem; color: var(--secondary-on-stage); font-weight: 600; font-variant-numeric: tabular-nums; }
.mg-corner { font-size: 0.62rem; padding-right: 4px; }
.mg-cell { min-height: 32px; border-radius: 5px; border: 1px solid rgba(244, 239, 228, 0.12); display: grid; place-items: center; font: 700 0.85rem var(--font-ui); color: var(--active); font-variant-numeric: tabular-nums; position: relative; }
.mg-cell.is-void { border: 0; background: repeating-linear-gradient(45deg, transparent 0 4px, rgba(86, 104, 117, 0.35) 4px 5px); }
.mg-cell.is-nb { border-color: var(--active); background: color-mix(in oklch, var(--active) 16%, transparent); }
.mg-cell.is-match { box-shadow: inset 0 0 0 2px var(--invariant); }
.hall-cards .stage-row { margin-top: var(--s3); gap: var(--s2) var(--s3); }
.hall-cards .readout-value { font-size: 1.35rem; }
.scale-table { margin-top: var(--s1); }
.scale-table th[scope="row"] { color: var(--secondary-on-stage); font-weight: 600; letter-spacing: 0; font-size: 0.92rem; }
.lop-wrap { max-width: 420px; margin-top: var(--s2); }
.lop-svg { width: 100%; height: auto; overflow: visible; }
.lop-edge { stroke: var(--structure); stroke-width: 2; transition: stroke 160ms ease; }
.lop-edge.is-on { stroke: var(--active); stroke-width: 3; }
.lop-node circle { fill: var(--stage-raised); stroke: var(--structure); stroke-width: 2; transition: stroke 160ms ease, fill 160ms ease; }
.lop-node text { fill: var(--paper); font: 600 17px var(--font-ui); text-anchor: middle; pointer-events: none; }
.lop-node.is-left { cursor: pointer; outline: none; }
.lop-node.is-left:focus-visible circle { stroke: var(--paper); stroke-width: 3; }
.lop-node.is-on circle { stroke: var(--active); stroke-width: 3; fill: color-mix(in oklch, var(--active) 25%, var(--stage-raised)); }
.lop-node.is-nb circle { stroke: var(--active); stroke-width: 3; }
.lop-cap { fill: var(--secondary-on-stage); font: 600 12px var(--font-ui); text-anchor: middle; letter-spacing: 0.1em; text-transform: uppercase; }
.hall-lop .stage-row { margin-top: var(--s2); }
.readout-value.is-counter { color: var(--counter); }

/* ---- Challenge ---- */
.asst-table { --card-w: clamp(50px, 11vw, 72px); margin: var(--s3) 0 var(--s2); }
.asst-table .slot { flex: none; }
.asst-table .slot > .card { margin: -1.5px; }
.n-ctl { margin: var(--s2) 0; }
.n-ctl input[type="range"] { flex: 1 1 160px; min-width: 0; accent-color: var(--active); height: 44px; }
.n-out { min-width: 3ch; }
.break-q { margin-top: var(--s3); }
.q-opts { display: grid; gap: 8px; margin-top: var(--s2); }
.q-opt { white-space: normal; text-align: left; justify-content: flex-start; height: auto; padding: 10px 14px; line-height: 1.35; font-weight: 500; }
.q-opt.is-picked { --btn-border: var(--paper); }

@media (max-width: 560px) {
  .num-cell { min-height: 36px; font-size: 0.85rem; }
  span.num-cell { min-height: 32px; }
  span.num-cell .n { font-size: 0.74rem; }
  span.num-cell .sub { font-size: 0.56rem; }
  .ws-work, .ws-result, .ws-fb { margin-left: 0; }
  .hand-chip { font-size: 0.78rem; }
  .mg-cell { min-height: 28px; }
}

/* local guard: shared .btn/.pile display rules must not defeat the hidden attribute on this page */
#main [hidden] { display: none !important; }
.stage > .controls + .stage-instruction, .ch-view { margin-top: var(--s2); }
.why-controls { margin-top: var(--s3); }
.break-explore { margin-top: var(--s3); }
/* touch targets inside stages: 44px */
#main .stage .btn-sm, #main .stage .segmented button, .hand-chip { min-height: 44px; }
span.num-cell.is-closed .n { font-weight: 700; }