/* The Middle Card — page-specific styles. Shared classes come from site.css. */

/* Author display rules below would otherwise override the hidden attribute */
#try-stage [hidden], #why-stage [hidden], #challenge-stage [hidden] { display: none !important; }

/* ---- The card table: rows sized so a whole packet fits at any width ---- */
.coat-table { container-type: inline-size; --gap: 4px; --n: 13; display: grid; gap: var(--s3); }
.coat-table > * {
  --card-w: clamp(20px, calc((100cqw - (var(--n) - 1) * var(--gap)) / var(--n)), var(--card-max, 60px));
}
.coat-table .card[data-kind="label"] .pip { font-size: calc(var(--w) * 0.5); }

.zone[hidden], .piles[hidden] { display: none; }
.zone-head, .coat-box, .ruler { width: calc(var(--slots) * var(--card-w) + (var(--slots) - 1) * var(--gap)); max-width: 100%; }
.zone-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; min-width: 9.5rem; }
.zone-title { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--secondary-on-stage); white-space: nowrap; }
.zone-count { color: var(--paper); letter-spacing: 0.02em; text-transform: none; font-weight: 600; }

/* A pile's place on the table. Right-aligned, so the TOP end (left) is where cards
   are taken from and where new cards land, and untouched cards never shuffle sideways. */
.coat-box {
  display: flex; justify-content: flex-end; align-items: flex-end; gap: var(--gap);
  min-height: calc(var(--card-w) * var(--card-ratio)); position: relative;
}
.coat-box::before { content: ""; position: absolute; inset: -5px; border: 1.5px dashed rgba(244, 239, 228, 0.12); border-radius: 10px; pointer-events: none; }
.ruler { display: flex; justify-content: flex-end; gap: var(--gap); margin-top: 6px; }
.ruler span { width: var(--card-w); flex: none; text-align: center; font-size: 0.72rem; line-height: 1.2; color: var(--secondary-on-stage); font-variant-numeric: tabular-nums; opacity: 0.75; }
.ruler span.is-mark { color: var(--invariant); opacity: 1; font-weight: 700; }
.ruler-label { font-size: 0.72rem; color: var(--secondary-on-stage); margin-top: 2px; }

/* The counted cards, bracketed before a deal */
.count-bracket { position: absolute; left: 0; top: -12px; height: 8px; border: 2px solid var(--active); border-bottom: 0; border-radius: 4px 4px 0 0; pointer-events: none; }
.count-bracket span { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); font-size: 0.72rem; font-weight: 700; color: var(--active); white-space: nowrap; }
.zone.has-bracket .zone-head { margin-bottom: 26px; }

.piles { display: grid; gap: var(--s3); }
@container (min-width: 620px) { .piles { grid-template-columns: max-content max-content; column-gap: var(--s5); } }

.aside-row { --card-w: 22px; min-height: 31px; gap: 3px; flex-wrap: wrap; }
.aside-row .card { opacity: 0.6; }
.zone.aside .zone-head { min-width: 0; width: auto; }
.coat-table > * { min-width: 0; }

/* ---- Choosing a card ---- */
.spread { --card-w: clamp(44px, 5.4vw, 62px); display: flex; flex-wrap: wrap; gap: 5px; }
.spread[hidden] { display: none; }

/* ---- Spelling ---- */
.spell { display: flex; flex-wrap: wrap; gap: 4px; }
.spell .letter { width: 1.55em; height: 2em; display: grid; place-items: center; font: 650 1.1rem/1 var(--font-ui); color: var(--secondary-on-stage); border-bottom: 2px solid rgba(244, 239, 228, 0.2); }
.spell .letter.is-done { color: var(--paper); border-color: rgba(244, 239, 228, 0.45); }
.spell .letter.is-on { color: var(--active); border-color: var(--active); }
.menu { display: grid; gap: 12px; }
.menu-words { display: flex; flex-wrap: wrap; gap: 8px; }
.menu-words .btn[aria-pressed="true"] { --btn-border: var(--active); --btn-fg: var(--active); }
.menu-words .btn .len { color: var(--secondary-on-stage); font-weight: 500; font-variant-numeric: tabular-nums; }
.menu-type { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.menu-type .field input { width: 13em; max-width: 100%; text-transform: uppercase; }
.menu-msg { color: var(--counter); font-size: 0.98rem; min-height: 1.4em; }
.menu[hidden], .spell-wrap[hidden] { display: none; }

.stage-stack > .ledger, .stage-stack > .steps-list { margin-top: var(--s2); }
#try-stage .ledger, #why-stage .ledger { max-height: none; }

/* ---- Try footer ---- */
.try-foot { display: grid; gap: 10px; }
.seed-line { font-size: 0.85rem; color: var(--secondary-on-stage); }
.seed-line code { font-family: var(--font-ui); color: var(--paper); }
.stage .verdict { color: var(--paper); }
.stage .verdict:empty { display: none; }

/* ---- Inspect ---- */
.inspect-top { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: flex-end; }
.readout-value.is-counter { color: var(--counter); }
.chooser { display: grid; gap: 8px; }
.chooser[hidden] { display: none; }
.chooser-label { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--secondary-on-stage); font-weight: 600; }
.chooser .segmented { flex-wrap: wrap; }
.chooser .segmented button .len { opacity: 0.7; font-weight: 500; margin-left: 4px; }
.chooser .segmented button.is-short[aria-pressed="true"] { background: var(--counter); color: var(--stage); }

/* ---- Challenge ---- */
.tab-panel[hidden] { display: none; }
.steps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: st; }
.steps-list li { display: grid; grid-template-columns: 2ch 1fr; gap: 8px; align-items: start; }
.steps-list li::before { counter-increment: st; content: counter(st) "."; color: var(--structure); text-align: right; padding-top: 11px; font-variant-numeric: tabular-nums; }
.step-btn { width: 100%; justify-content: space-between; text-align: left; white-space: normal; line-height: 1.35; padding: 9px 12px; font-weight: 500; gap: 10px; flex-wrap: wrap; }
.step-btn[data-state="fine"] { --btn-border: var(--invariant); }
.step-btn[data-state="broken"] { --btn-border: var(--counter); }
.step-btn .chip { flex: none; }
.final-line { color: var(--secondary-on-stage); font-size: 1rem; }
.pool { display: flex; flex-wrap: wrap; gap: 8px; }
.pool .btn[aria-pressed="true"] { --btn-bg: var(--paper); --btn-fg: var(--stage); --btn-border: var(--paper); }
.pool .btn { min-height: 44px; }
.pool .btn .len { opacity: 0.7; font-weight: 500; }
.pool .btn[data-state="wrong"] { box-shadow: 0 0 0 2px var(--counter); }
.predict-rows { display: grid; gap: 8px; }
.predict-row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.predict-row .row-label { min-width: 6.5em; color: var(--secondary-on-stage); font-variant-numeric: tabular-nums; }
.feedback-list { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: 1rem; color: var(--paper); }
.feedback-list li.is-counter::marker { color: var(--counter); }
.sub-label { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--secondary-on-stage); font-weight: 600; margin-bottom: 8px; }

@media (max-width: 560px) {
  .menu-type .field input { width: 100%; }
  .menu-type .field { flex: 1 1 12em; }
}