/* Three Scoop Miracle — page-specific layout. Tokens and shared classes come from site.css. */

.after-stage { margin-top: var(--s3); }

/* ---------- Try: status strip ---------- */
.try-status { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: flex-end; margin: var(--s2) 0 var(--s3); }
.try-yours { display: inline-flex; flex-direction: column; gap: 6px; }
.prediction {
  display: inline-flex; flex-direction: column; gap: 2px; max-width: 30ch;
  border: 1px dashed rgba(244, 239, 228, 0.3); border-radius: 8px; padding: 6px 12px 8px;
}
.prediction-text { font-family: var(--font-display); font-style: italic; color: var(--secondary-on-stage); font-size: 1.02rem; line-height: 1.3; }
.prediction[data-open="true"] { border-style: solid; border-color: var(--invariant); }
.prediction[data-open="true"] .prediction-text { color: var(--paper); font-style: normal; }

/* The flavour being spelled: one letter per dealt card */
.try-word { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 var(--s2); }
.try-word .letter {
  min-width: 1.5em; text-align: center; padding: 0 0 3px; font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em;
  color: var(--paper); border-bottom: 2px solid rgba(244, 239, 228, 0.2);
}
.try-word .letter.is-done { color: var(--secondary-on-stage); border-color: transparent; opacity: 0.6; }
.try-word .letter.is-next { color: var(--active); border-color: var(--active); }

/* Hand and table lanes. The fan spreads when there is room and overlaps when there is not,
   sized from the packet size --n (set on the stage) so a full packet always fits. */
.try-lanes { container-type: inline-size; display: grid; gap: var(--s2); }
.try-lane { display: grid; gap: 6px; }
.lane-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lane-count { font-size: 0.85rem; color: var(--secondary-on-stage); font-variant-numeric: tabular-nums; }
.fan {
  --card-w: clamp(36px, calc(100cqw / (1 + (var(--n) - 1) * 0.5)), 64px);
  --fan-step: min(calc(var(--card-w) + 8px), calc((100cqw - var(--card-w)) / max(var(--n) - 1, 1)));
  display: flex; flex-wrap: nowrap; align-items: flex-end;
  min-height: calc(var(--card-w) * var(--card-ratio) + 22px);
  padding-top: 22px; /* room for the letter tags */
}
.fan > .card + .card { margin-left: calc(var(--fan-step) - var(--card-w)); }
.fan:empty::before {
  content: ""; width: var(--card-w); height: calc(var(--card-w) * var(--card-ratio));
  border: 1.5px dashed rgba(244, 239, 228, 0.22); border-radius: calc(var(--card-w) * 0.09);
}
.try-status + .try-word { margin-top: calc(var(--s1) * -1); }
.menu { display: flex; flex-wrap: wrap; gap: 8px; flex-basis: 100%; }
.menu-count { color: var(--secondary-on-stage); font-weight: 500; font-variant-numeric: tabular-nums; }
#try-stage .controls { margin-top: var(--s3); }
.try-verdict:not(:empty) { margin-top: var(--s3); }
.try-foot { display: grid; gap: var(--s1); }
.try-foot .ledger { max-height: none; }

/* ---------- Why: one row per state, labels = starting positions ---------- */
.why-setup { margin-bottom: var(--s1); }
.why-sizes { font-size: 0.95rem; margin-bottom: var(--s1); }
.why-wrap { container-type: inline-size; margin: var(--s3) 0 var(--s3); display: grid; gap: 10px; }
.why-rows { display: grid; gap: 10px; }
.why-row { display: grid; gap: 4px; }
.why-row-head { display: flex; gap: 12px; align-items: baseline; min-height: 1.5em; }
.why-row-name { font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.72rem; color: var(--secondary-on-stage); min-width: 7.5ch; }
.why-word { font-family: var(--font-math); font-size: 1.1rem; color: var(--paper); word-spacing: 0.2em; }
.why-word sup, .why-block sup { font-size: 0.68em; }
.why-grid {
  --gap: 3px;
  --card-w: min(46px, calc((100cqw - (var(--n) - 1) * var(--gap)) / var(--n)));
  display: grid; grid-template-columns: repeat(var(--n), var(--card-w)); column-gap: var(--gap);
}
.why-grid > .card { grid-row: 2; }
.why-grid .card[data-kind="label"] .pip,
.tile-row .card[data-kind="label"] .pip { font-size: max(11px, calc(var(--w) * 0.46)); }
.why-ruler > span { grid-row: 1; text-align: center; font-size: 0.7rem; color: var(--secondary-on-stage); font-variant-numeric: tabular-nums; }
.why-brace {
  grid-row: 1; height: 14px; margin: 10px 0 5px; border: 1.5px solid var(--structure); border-bottom: 0;
  border-radius: 4px 4px 0 0; display: flex; justify-content: center;
}
.why-brace span {
  position: relative; top: -0.8em; height: 1.3em; background: var(--stage); padding: 0 6px;
  font-size: 0.72rem; font-weight: 600; color: var(--secondary-on-stage); line-height: 1.3; white-space: nowrap;
}
.why-brace.is-current { border-color: var(--active); }
.why-brace.is-current span { color: var(--active); }
.why-block {
  grid-row: 3; margin-top: 6px; position: relative; border-top: 1.5px solid var(--structure);
  text-align: center; font-family: var(--font-math); font-size: 0.95rem; line-height: 1.35; color: var(--paper); white-space: nowrap;
}
.why-block::before, .why-block::after { content: ""; position: absolute; top: -5px; height: 9px; border-left: 1.5px solid var(--structure); }
.why-block::before { left: 0; }
.why-block::after { right: 0; }
.why-block.is-fwd span::after { content: " →"; color: var(--secondary-on-stage); }
.why-block.is-rev span::before { content: "← "; color: var(--secondary-on-stage); }
.why-row.is-new .why-row-head, .why-row.is-new .why-block { animation: why-fade 320ms 650ms var(--ease-out) both; }
@keyframes why-fade { from { opacity: 0; } }
.why-readouts { gap: var(--s2) var(--s4); }
.route-value { font-size: 1.45rem; }
.route-value .is-active { color: var(--active); }
.route-value .is-invariant { color: var(--invariant); }
.route-value .arrow { color: var(--structure); font-size: 0.8em; }
.why-verdict:not(:empty) { margin-top: var(--s3); }
#why-stage .ledger { margin-top: var(--s3); }
#why-stage .legend { margin-top: var(--s3); }
#why-stage .legend .math-up { font-weight: 700; color: var(--paper); }
@media (min-width: 720px) { .why-grid, .tile-row, .tile-ruler { --gap: 6px; } }

/* ---------- Challenge ---------- */
.ch-head { display: grid; gap: 6px; margin-bottom: var(--s2); }
.ch-setup { margin-bottom: var(--s3); }
.ch-packet { container-type: inline-size; margin-bottom: var(--s3); display: grid; gap: 4px; }
.tile-row, .tile-ruler {
  --gap: 3px;
  --card-w: min(46px, calc((100cqw - (var(--n) - 1) * var(--gap)) / var(--n)));
  display: flex; gap: var(--gap);
}
.tile-ruler > span { width: var(--card-w); flex: none; text-align: center; font-size: 0.7rem; color: var(--secondary-on-stage); font-variant-numeric: tabular-nums; }
.ch-q { display: grid; gap: 8px; margin-bottom: var(--s3); justify-items: start; }
.q-text { font-size: 1.05rem; line-height: 1.4; }
.ch-feedback { display: grid; gap: var(--s2); }
.ch-feedback:not(:empty) { margin-top: var(--s3); }
.ch-cycles { display: grid; gap: 8px; }
.cycle-list { display: flex; flex-wrap: wrap; gap: 6px; font-variant-numeric: tabular-nums; }
.ch-explore { margin-top: var(--s3); display: grid; gap: var(--s2); }
.ch-explore .stage-row { gap: var(--s2) var(--s4); }
@media (prefers-reduced-motion: reduce) {
  .why-row.is-new .why-row-head, .why-row.is-new .why-block { animation: none; }
}