/* Five Colours, Five Cards — page styles. Shared tokens and classes come from site.css. */

/* The hidden attribute must win over display rules on .controls, .btn, etc. inside these stages */
#try-stage [hidden], #why-stage [hidden], #euler-stage [hidden], #challenge-stage [hidden] { display: none !important; }

.mono { font-family: var(--font-math); font-style: normal; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.bit-legend .bit { font-family: var(--font-math); color: var(--paper); margin-left: 2px; }
.note-on-stage { color: var(--secondary-on-stage); font-size: 0.9rem; }
.after-stage { margin-top: var(--s5); }
.after-stage h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.45rem; }

/* ---------- Try: the packet, the places, the report ---------- */
.try-stage { display: grid; gap: var(--s3); }
.try-stage > hr { margin: 0; }
.packet-pile { gap: 10px; justify-items: stretch; }
.packet-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); }
.packet-count { color: var(--secondary-on-stage); font-size: 0.85rem; }
.packet-foot { color: var(--secondary-on-stage); font-size: 0.85rem; }
.packet-grid {
  --card-w: 34px;
  display: grid; grid-template-columns: repeat(8, var(--card-w)); gap: 7px 6px;
  padding-top: 12px; min-height: calc(var(--card-w) * 1.4);
  justify-content: start;
}
@media (min-width: 720px) { .packet-grid { --card-w: 46px; grid-template-columns: repeat(16, var(--card-w)); gap: 12px 8px; } }
@media (min-width: 1100px) { .packet-grid { --card-w: 52px; } }
.packet-grid .card.is-lifted .card-tilt { transform: translateY(-9px); }

.cut-controls { align-items: flex-end; }
.cut-field { flex: 1 1 260px; max-width: 420px; }
.range-row { display: flex; align-items: center; gap: 8px; }
.range-row .btn { min-width: 44px; min-height: 44px; padding: 0; font-size: 1.2rem; }
.range { flex: 1; min-width: 120px; accent-color: var(--active); height: 44px; }

.mats {
  --card-w: clamp(52px, 13vw, 80px);
  padding-bottom: 22px;
  display: grid; grid-template-columns: repeat(var(--k), minmax(0, 1fr)); gap: 10px;
  max-width: 560px;
}
.mat { display: grid; justify-items: center; gap: 8px; align-content: start; }
.mat .slot { font-family: var(--font-math); font-size: 1.1rem; }
.mat .slot.has-card { border-color: transparent; }
.picker { display: grid; gap: 6px; width: 100%; }
.picker[hidden] { display: none; }
.picker .pick { width: 100%; padding: 0 4px; min-height: 40px; font-size: 0.9rem; }
.picker .pick[aria-pressed="true"] { --btn-bg: var(--paper); --btn-fg: var(--stage); --btn-border: var(--paper); }

.report-box { display: grid; gap: 8px; }
.report-box[hidden] { display: none; }
.word-strip { display: flex; gap: 10px; flex-wrap: wrap; }
.wbit { display: grid; justify-items: center; min-width: 48px; padding: 4px 6px; border-radius: 8px; border: 1px solid rgba(244,239,228,0.18); }
.wbit { min-width: 58px; }
.wbit b { font-size: 1rem; line-height: 1.3; font-weight: 650; color: var(--paper); }
.wbit small { font-size: 0.72rem; color: var(--secondary-on-stage); }
.wbit.is-empty b { color: var(--structure); }
.wbit.is-red, .wbit.is-black { border-color: var(--active); }
.ledger-box { display: grid; gap: 6px; }
.verdict[hidden], .verdict:empty { display: none; }

/* ---------- Ring (circle view of the packet) ---------- */
.ring { width: 100%; max-width: 560px; height: auto; margin: 0 auto; overflow: visible; }
.ring-card rect { fill: var(--paper); stroke: transparent; stroke-width: 3.5; transition: stroke 160ms ease; }
.ring-card text { text-anchor: middle; font-family: var(--font-ui); font-weight: 700; fill: var(--black-ink); }
.ring-card[data-color="red"] text { fill: var(--red-ink); }
.ring-card[data-mark="active"] rect { stroke: var(--active); }
.ring-card[data-mark="counter"] rect { stroke: var(--counter); }
.ring-bits { transition: opacity 300ms ease; }
.ring-bit { text-anchor: middle; font-family: var(--font-math); fill: var(--paper); }
.join-line { stroke: var(--structure); stroke-width: 2.5; stroke-dasharray: 5 5; transition: stroke 200ms ease; }
.join-line.is-on { stroke: var(--paper); stroke-width: 3.5; }
.ring-window { transition: transform 260ms cubic-bezier(0.645, 0.045, 0.355, 1); }
.ring-window path { fill: none; stroke: var(--active); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.ring-window[data-kind="counter"] path { stroke: var(--counter); }
.top-tri { fill: var(--paper); }
.top-label { text-anchor: middle; fill: var(--paper); font-family: var(--font-ui); font-weight: 700; letter-spacing: 0.1em; }
.dir-arc { fill: none; stroke: var(--secondary-on-stage); stroke-width: 2; stroke-linecap: round; }
.ring-center text { text-anchor: middle; }
.c-word { font-family: var(--font-math); letter-spacing: 0.08em; fill: var(--active); }
.c-word.is-invariant { fill: var(--invariant); }
.c-word.is-counter { fill: var(--counter); }
.c-chips rect { fill: var(--paper); }
.c-chips text { text-anchor: middle; font-family: var(--font-ui); font-weight: 700; }
.c-chips .is-red { fill: var(--red-ink); }
.c-chips .is-black { fill: var(--black-ink); }
.c-note { font-family: var(--font-ui); fill: var(--secondary-on-stage); }
@media (prefers-reduced-motion: reduce) { .ring-window, .ring-bits { transition: none; } }

.why-grid { display: grid; gap: var(--s2); align-items: start; grid-template-areas: "head" "ring" "step" "rest"; }
.why-head { grid-area: head; display: grid; gap: var(--s1); }
.ring-box { grid-area: ring; }
.why-step { grid-area: step; }
.why-side { grid-area: rest; }
@media (min-width: 900px) {
  .why-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s2) var(--s4); grid-template-areas: "ring head" "ring rest" "step rest"; }
}
.why-side { display: grid; gap: var(--s2); align-content: start; }
.why-side > [hidden] { display: none; }
.why-caption { min-height: 6.2em; }
.ring-readout { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; justify-content: center; margin: var(--s1) 0 0; min-height: 2.2em; color: var(--secondary-on-stage); font-size: 0.98rem; }
.ring-readout .rr-word { color: var(--active); font-size: 1.15rem; font-weight: 400; }
.ring-readout .rr-note { color: var(--paper); font-size: 0.9rem; }
.ring-box .readouts { justify-content: center; margin-top: var(--s1); }
.ring-box .readouts[hidden] { display: none; }
/* On phones the circle shrinks to ~60% scale: enlarge its type (SVG user units) and let it use the stage padding */
@media (max-width: 520px) {
  .ring-box .ring { width: calc(100% + 24px); max-width: none; margin: 0 -12px; }
  .ring-card .rk { font-size: 24px; }
  .ring-card .st { font-size: 20px; }
  .ring-bit { font-size: 24px; }
  .top-label { font-size: 21px; }
}
.explore .btn { min-height: 44px; }
.readouts { gap: var(--s4); }
.stepper { margin-top: var(--s1); }
.step-count { color: var(--secondary-on-stage); font-size: 0.9rem; margin-left: auto; }

/* Registry of all 2^k words */
.reg-box { display: grid; gap: 8px; }
.registry { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
@media (min-width: 560px) { .registry { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 900px) { .registry { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .registry { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.ticket {
  display: grid; justify-items: center; padding: 3px 2px; border-radius: 6px;
  border: 1px solid rgba(244,239,228,0.14); color: var(--structure); font-size: 0.8rem; line-height: 1.2;
}
.ticket .t-word { font-family: var(--font-math); font-size: 0.95rem; letter-spacing: 0.04em; }
.ticket .t-start { font-size: 0.7rem; min-height: 1.2em; color: var(--secondary-on-stage); }
.ticket[data-state="seen"] { border-color: rgba(244,239,228,0.55); color: var(--paper); }
.ticket[data-state="filled"] { border-color: var(--invariant); color: var(--paper); }
.ticket[data-state="counter"] { border-color: var(--counter); color: var(--counter); }
.ticket.is-current { box-shadow: 0 0 0 2px var(--active); border-color: var(--active); }

/* Window as an arrow between overlaps */
.chain-box { display: grid; gap: 8px; }
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; }
.chain .v { font-family: var(--font-math); font-size: 1.1rem; padding: 4px 9px; border-radius: 999px; border: 1.5px solid var(--structure); letter-spacing: 0.04em; }
.chain .v.is-active { border-color: var(--active); }
.chain .e { display: inline-grid; justify-items: center; line-height: 1; color: var(--secondary-on-stage); }
.chain .e .e-word { font-family: var(--font-math); font-size: 0.95rem; letter-spacing: 0.04em; }
.chain .e .e-arrow { display: block; width: 52px; height: 10px; position: relative; }
.chain .e .e-arrow::before { content: ""; position: absolute; left: 2px; right: 6px; top: 4px; border-top: 2px solid currentColor; }
.chain .e .e-arrow::after { content: ""; position: absolute; right: 1px; top: 0; border: 5px solid transparent; border-left: 7px solid currentColor; border-right: 0; }
.chain .e.is-active { color: var(--active); }
.chain-note { color: var(--secondary-on-stage); font-size: 0.95rem; max-width: 52ch; }
.chain-note b { color: var(--active); font-weight: 400; }

/* ---------- Euler tour builder ---------- */
.euler-grid { display: grid; gap: var(--s3); margin-top: var(--s2); }
@media (min-width: 900px) { .euler-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); align-items: start; } }
.graph { width: 100%; max-width: 560px; height: auto; display: block; margin: 0 auto; }
.edge-hit { fill: none; stroke: transparent; stroke-width: 22; cursor: pointer; }
.edge-line { fill: none; stroke: var(--structure); stroke-width: 2.5; }
.edge[data-state="legal"] .edge-line { stroke: var(--active); stroke-width: 3; stroke-dasharray: 7 5; }
.edge[data-state="used"] .edge-line { stroke: var(--invariant); stroke-width: 3.5; }
.edge-label-bg { fill: var(--stage); stroke: rgba(244,239,228,0.18); }
.edge[data-state="legal"] .edge-label-bg { stroke: var(--active); }
.edge[data-state="used"] .edge-label-bg { stroke: var(--invariant); }
.edge-label { text-anchor: middle; font-family: var(--font-math); font-size: 18px; fill: var(--secondary-on-stage); letter-spacing: 0.04em; }
.edge[data-state="legal"] .edge-label { fill: var(--active); }
.edge[data-state="used"] .edge-label { fill: var(--paper); }
.edge-ord { font-family: var(--font-ui); font-weight: 700; font-size: 15px; fill: var(--invariant); }
.ah-structure { fill: var(--structure); } .ah-active { fill: var(--active); } .ah-invariant { fill: var(--invariant); }
.node circle { fill: var(--stage-raised); stroke: var(--paper); stroke-width: 2; }
.node[data-state="at"] circle { stroke: var(--active); stroke-width: 4; }
.node text { text-anchor: middle; font-family: var(--font-math); font-size: 21px; fill: var(--paper); letter-spacing: 0.04em; }
.walker { fill: var(--active); }
.euler-side { display: grid; gap: var(--s2); align-content: start; }
.euler-side .readout-label { display: block; margin-bottom: 6px; }
.start-field[hidden] { display: none; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.tile {
  display: grid; justify-items: center; gap: 2px; min-height: 52px; padding: 6px 4px; border-radius: 8px;
  border: 1px solid rgba(244,239,228,0.25); background: none; color: var(--paper); cursor: pointer; font: inherit;
  transition: transform 150ms var(--ease-press), border-color 150ms ease, opacity 150ms ease;
}
.tile:active:not(:disabled) { transform: scale(0.97); }
.tile .tile-word { font-size: 1.15rem; }
.tile .tile-sub { font-size: 0.72rem; color: var(--secondary-on-stage); }
.tile[data-state="legal"] { border-color: var(--active); border-width: 2px; }
.tile[data-state="used"] { border-color: var(--invariant); opacity: 0.6; }
.spelling { font-size: 1.5rem; letter-spacing: 0.12em; min-height: 1.6em; word-break: break-all; }
.spelling .sp-start { color: var(--secondary-on-stage); text-decoration: underline; text-decoration-color: var(--structure); text-underline-offset: 6px; }
.spelling .sp-bit { color: var(--invariant); }
.spelling .sp-new { color: var(--active); }

/* ---------- Challenge ---------- */
.round-seg { flex-wrap: wrap; }
.round-seg button { min-height: 44px; }
#challenge-stage .stage-instruction { margin-top: var(--s2); }
.ch-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: var(--s2) 0 var(--s1); }
.ch-grid {
  --card-w: 36px;
  display: grid; grid-template-columns: repeat(8, var(--card-w)); gap: 4px 5px; justify-content: start;
}
@media (min-width: 720px) { .ch-grid { --card-w: 46px; grid-template-columns: repeat(16, var(--card-w)); gap: 6px 8px; } }
@media (min-width: 1100px) { .ch-grid { --card-w: 52px; } }
.ch-cell { display: grid; justify-items: center; gap: 2px; }
.ch-slot { width: var(--card-w); height: calc(var(--card-w) * 1.4); }
.ch-pos { font-size: 0.68rem; color: var(--secondary-on-stage); }
.ch-bit { font-size: 1rem; color: var(--paper); }
.ch-controls { margin-top: var(--s2); }
.checks { display: grid; gap: var(--s2); margin-top: var(--s3); }
@media (min-width: 900px) { .checks { grid-template-columns: 1fr 1fr; } }
.check { display: grid; gap: 6px; align-content: start; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(244,239,228,0.14); }
.check[data-ok="true"] { border-color: var(--invariant); }
.check[data-ok="false"] { border-color: var(--counter); }
.check-title { font-weight: 650; }
.check-val { font-family: var(--font-math); font-size: 1.35rem; }
.check-val.is-invariant { color: var(--invariant); } .check-val.is-counter { color: var(--counter); }
.check-note { color: var(--secondary-on-stage); font-size: 0.95rem; }
.nm, .sheet-card { display: inline-block; font-weight: 700; background: var(--paper); border-radius: 3px; padding: 0 5px; margin: 1px 2px; line-height: 1.45; font-size: 0.95em; box-shadow: 0 0 0 1px var(--rule); }
.nm.is-diff { box-shadow: 0 0 0 2px var(--counter); }
.nm.is-red, .sheet-card.is-red { color: var(--red-ink); } .nm.is-black, .sheet-card.is-black { color: var(--black-ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn { background: none; cursor: pointer; min-height: 36px; font-family: var(--font-ui); }
.chip-btn[aria-pressed="true"] { background: color-mix(in oklch, var(--counter) 18%, transparent); }
.ch-controls .seed { margin-left: 4px; }
.ch-controls [hidden] { display: none; }
#challenge-stage .verdict { margin-top: var(--s3); }
#challenge-stage .ledger-box { margin-top: var(--s2); }

/* ---------- Perform ---------- */
.stack-list {
  list-style: none; padding: 0 !important; margin: 10px 0 4px; display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; max-width: 30rem; counter-reset: st;
}
.stack-list li { margin: 0 !important; font-weight: 700; text-align: center; padding: 4px 0 2px; border-radius: 4px; background: var(--paper); border: 1px solid var(--rule); font-size: 1rem; }
.stack-list li::before { counter-increment: st; content: counter(st); display: block; font-size: 0.62rem; font-weight: 600; color: #6E7C87; }
.stack-list li.is-red { color: var(--red-ink); } .stack-list li.is-black { color: var(--black-ink); }
.sheet td:first-child { white-space: nowrap; }