/* Even Split: the trainer's own components. Studio chrome, fonts and base colours come from
   /_studio/gl.css; these map the trainer's names onto the studio tokens. Highlighter yellow and
   pink are this site's signature. */
:root {
  --paper: var(--bg); --sheet: var(--panel); --rule: var(--line); --rule-faint: var(--line-soft);
  --ink-soft: var(--muted); --given: #e3e9f2;
  --hi-why: #ffe66b; --hi-set: #ffb3cf; --band: #dce8ff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --given: #222a36; --hi-why: #8a7a1c; --hi-set: #8c3a5c; --band: #213659; }
}
:root[data-theme="dark"] { --given: #222a36; --hi-why: #8a7a1c; --hi-set: #8c3a5c; --band: #213659; }
.app { max-width: 760px; margin: 0 auto; display: grid; gap: 20px; }
.app-intro h1 { font-size: clamp(1.7rem, 5vw, 2.3rem); margin: 0; }
.app-intro p { margin: .3rem 0 0; color: var(--muted); }
button:focus-visible, .cell:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
section.view { display: grid; gap: 18px; }
.sheet { background: var(--sheet); border: 1px solid var(--rule); border-radius: 14px; padding: 18px; display: grid; gap: 14px; min-width: 0; }
h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
.muted { color: var(--ink-soft); }
.label { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); font-weight: 600; }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--rule); background: var(--sheet); color: var(--ink); border-radius: 999px; padding: 5px 12px; font: 500 .88rem var(--font-body); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--sheet); border-color: var(--ink); }
.chip .n { font-family: var(--font-mono); font-size: .75rem; opacity: .75; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.spacer { flex: 1; }
.toggle { display: inline-flex; gap: 8px; align-items: center; font-size: .9rem; color: var(--ink-soft); cursor: pointer; }

/* buttons */
button.btn { font: 600 .92rem var(--font-body); border-radius: 10px; padding: 9px 16px; cursor: pointer; border: 1px solid var(--rule); background: var(--sheet); color: var(--ink); }
button.btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
button.btn:disabled { opacity: .45; cursor: default; }

/* boards */
.board { position: relative; display: grid; border: 2px solid var(--ink); border-radius: 8px; background: var(--sheet); user-select: none; -webkit-user-select: none; margin: 0 auto; }
.board.line { grid-template-columns: repeat(6, minmax(0, 1fr)); width: min(100%, 444px); }
.board.grid { grid-template-columns: repeat(6, minmax(0, 1fr)); width: min(100%, 444px); }
.cell { aspect-ratio: 1; border: 0; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: transparent; padding: 0; display: grid; place-items: center; cursor: pointer; position: relative; color: var(--ink); }
.board.line .cell { border-bottom: 0; }
.cell:nth-child(6n) { border-right: 0; }
.board.grid .cell.last-row { border-bottom: 0; }
.cell.given { background: var(--given); cursor: default; }
.cell.band { background: var(--band); }
.cell.given.band { background: color-mix(in srgb, var(--band) 60%, var(--given)); }
.cell.why { background: var(--hi-why); }
.cell.set { background: var(--hi-set); }
.cell svg { width: 58%; height: 58%; }
.cell .ghost { opacity: .35; }
.cell.mark-right::after, .cell.mark-wrong::after, .cell.mark-missed::after, .cell.mark-guess::after {
  position: absolute; right: 4px; top: 2px; font: 700 .8rem var(--font-mono);
}
.cell.mark-right::after { content: "✓"; color: var(--good); }
.cell.mark-wrong::after { content: "✗"; color: var(--bad); }
.cell.mark-guess::after { content: "?"; color: var(--bad); }
.cell.mark-missed { box-shadow: inset 0 0 0 3px var(--bad); }
.cell.mark-wrong, .cell.mark-guess, .cell.conflict { background: var(--bad-bg); }
.sign { position: absolute; transform: translate(-50%, -50%); width: 20px; height: 20px; border-radius: 6px; background: var(--sheet); border: 1.5px solid var(--ink); display: grid; place-items: center; font: 700 13px/1 var(--font-mono); color: var(--ink); pointer-events: none; z-index: 2; }
.idx { display: grid; grid-template-columns: repeat(6, 1fr); width: min(100%, 444px); margin: 4px auto 0; text-align: center; font: 500 .75rem var(--font-mono); color: var(--ink-soft); }

/* explanations */
.result { border-radius: 12px; padding: 12px 14px; font-weight: 600; }
.result.ok { background: var(--good-bg); color: var(--good); }
.result.no { background: var(--bad-bg); color: var(--bad); }
ol.steps { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 8px; counter-reset: s; }
ol.steps > li { counter-increment: s; display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 10px; cursor: default; min-width: 0; }
ol.steps > li::before { content: counter(s); font: 600 .8rem var(--font-mono); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--given); }
ol.steps > li:hover, ol.steps > li:focus-within, ol.steps > li.active { border-color: var(--accent); }
.tag { display: inline-block; font: 600 .72rem var(--font-body); text-transform: uppercase; letter-spacing: .07em; color: var(--accent); margin-bottom: 2px; }
.trial { margin: 8px 0 0; padding: 8px 10px; border-left: 3px dashed var(--hi-set); background: color-mix(in srgb, var(--hi-set) 14%, transparent); border-radius: 0 8px 8px 0; font-size: .92rem; }
.trial ol { margin: 4px 0; padding-left: 20px; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: .82rem; color: var(--ink-soft); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }

/* puzzle */
.status { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; font-variant-numeric: tabular-nums; }
.clock { font: 600 1.3rem var(--font-mono); }
.hint-box { border: 1px solid var(--accent); border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px; }
.win { background: var(--good-bg); color: var(--good); border-radius: 12px; padding: 12px 14px; font-weight: 600; }

/* techniques */
.tech-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.tech-grid .sheet h2 { font-size: 1.08rem; }
.tech-grid .board.line { width: 100%; }
.rules { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .cell, .chip, nav.tabs a { transition: background-color .15s ease, color .15s ease; }
}