/* Gold & Silver — page-specific styles. Shared tokens and classes come from site.css. */

/* Local override: shared .controls/.verdict set display, which would defeat the hidden attribute */
.stage [hidden] { display: none !important; }

.gs-packet { --card-w: clamp(46px, 9vw, 74px); padding-top: 18px; }
.gs-packet .card.in-packet .card-tilt { transform: translateY(-14px); }
.try-ledger { margin-top: var(--s2); max-height: 7.5em; }
#try-stage > .pile { margin-top: var(--s2); }
#try-stage > .controls { margin-top: var(--s3); }

.places { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-top: var(--s3); align-items: flex-start; padding-bottom: 26px; }
.place { display: grid; justify-items: center; gap: 8px; min-width: 84px; }
.place-slot { --card-w: clamp(60px, 10vw, 80px); }
.place-slot .card-tag { font-size: 0.78rem; }

/* ---------- Rings of six ---------- */
.ring6 { position: relative; width: min(100%, 360px); aspect-ratio: 1; margin: 0 auto; --card-w: clamp(50px, 14vw, 66px); }
.ring6 .seat { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; }
.ring-centre { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; color: var(--secondary-on-stage); font-size: 0.85rem; pointer-events: none; }
.ring-arrow { font-size: 2rem; color: var(--structure); line-height: 1; }
.seat-note { position: absolute; top: calc(100% + 4px); white-space: nowrap; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--secondary-on-stage); }
.card.is-chosen .card-tilt { transform: translateY(-8px); }

/* ---------- Why ---------- */
.why-caption { margin-top: var(--s2); min-height: 4.4em; }
.why-grid { display: grid; gap: var(--s3); align-items: center; margin-top: var(--s2); }
@media (min-width: 820px) { .why-grid { grid-template-columns: minmax(300px, 380px) 1fr; } }
.why-side { display: grid; gap: var(--s3); align-content: start; }
.bars-box { display: grid; gap: 6px; }
.bars { display: flex; gap: 18px; align-items: flex-end; min-height: 120px; }
.bar-col { display: grid; justify-items: center; gap: 4px; }
.bar { width: 34px; border-radius: 4px 4px 0 0; background: color-mix(in oklch, var(--active) 26%, transparent); border: 2px solid var(--active); border-bottom: 0; }
.bar-role { font: 700 1.05rem/1 var(--font-ui); color: var(--active); }
.bar-val { font-family: var(--font-math); font-size: 1.15rem; color: var(--paper); }
.bars-cap { color: var(--secondary-on-stage); font-size: 0.95rem; }
.gs-table td.pattern { font-weight: 700; letter-spacing: 0.06em; white-space: nowrap; }
.gs-table tr.is-active td { color: var(--active); }
.gs-table tr.is-invariant td.pattern { color: var(--invariant); }
.gs-table tr.is-counter td { color: var(--counter); }
.gs-table td, .gs-table th { padding: 6px 10px; }
.why-controls { margin-top: var(--s3); }
.step-count { color: var(--secondary-on-stage); font-size: 0.95rem; margin-left: 4px; }
.why-ledger { margin-top: var(--s2); max-height: 8.5em; }

/* ---------- Challenge ---------- */
.challenge-panel { margin-top: var(--s3); }
.ref-row { padding-top: 22px; }
.note-on-stage { font-size: 0.88rem; color: var(--secondary-on-stage); }
.seed { font-size: 0.88rem; color: var(--secondary-on-stage); }
.challenge-panel > .controls, .challenge-panel > .verdict { margin-top: var(--s3); }
.challenge-panel > .stage-caption { margin-top: var(--s2); }
.pattern-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pattern-chips .chip { letter-spacing: 0.04em; }

/* ---------- Going deeper ---------- */
.mono, .mono-line { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.95em; letter-spacing: 0.04em; }
.mono-line { word-spacing: 0.2em; color: var(--text-2); }
.lookup-sheet td:last-child { white-space: nowrap; }
.locate-stage { max-width: none; }
.locate-grid { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); margin-top: var(--s2); align-items: flex-start; }
.patch { display: grid; grid-template-columns: repeat(2, 48px); gap: 4px; }
.ptile, .tile { border-radius: 6px; display: grid; place-items: center; font: 700 1.1rem/1 var(--font-math); }
.ptile { height: 48px; background: var(--paper); }
.tile-0, .tile.tile-0 { color: var(--black-ink); }
.tile-1, .tile.tile-1 { color: var(--red-ink); }
.legend .swatch.tile-0 { background: var(--black-ink); border: 1px solid var(--structure); }
.legend .swatch.tile-1 { background: var(--red-ink); }
.tile-map { display: grid; grid-template-columns: 20px repeat(4, 46px); gap: 4px; align-items: center; }
.map-head { text-align: center; font-size: 0.8rem; color: var(--secondary-on-stage); font-weight: 600; }
.tile { position: relative; width: 46px; height: 46px; padding: 0; border: 0; background: var(--paper); cursor: pointer; }
.tile.is-preview { outline: 2px dashed var(--active); outline-offset: 1px; }
.tile.is-sampled { outline: 2.5px solid var(--active); outline-offset: 1px; }
.tile.is-wrong { box-shadow: 0 0 0 3px var(--stage), 0 0 0 5.5px var(--counter); }
.tile.is-right { box-shadow: 0 0 0 3px var(--stage), 0 0 0 5.5px var(--invariant); }
.locate-preview { min-height: 3em; max-width: 26ch; font-size: 0.92rem; }
.tile-order { position: absolute; top: 2px; right: 4px; font: 700 0.62rem/1 var(--font-ui); color: var(--active-on-page); }
#locate-verdict { margin-top: var(--s3); }
.locate-stage > .controls { margin-top: var(--s2); }

#try-stage > .verdict { margin-top: var(--s3); }

/* Suit glyphs in running text keep their literal ink; on the dark stage (or a dark page) they sit on a small paper chip */
.suit-ink { display: inline-block; padding: 0 2px; border-radius: 3px; background: var(--paper); line-height: 1.25; }
.suit-ink.is-red { color: var(--red-ink); }
.suit-ink.is-black { color: var(--black-ink); }