/* Baseball IQ board. Daylight palette: chalk canvas, one clay accent, the field's own greens. */

@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-condensed-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-condensed-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-latin-700-normal.woff2") format("woff2"); }

:root {
  --sc-canvas: #f1f3ee;
  --sc-surface: #ffffff;
  --sc-ink: #111a14;
  --sc-ink-soft: #4b574f;
  --sc-accent: #d4581e;
  --sc-accent-ink: #ffffff;
  --sc-font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --sc-font-text: "Barlow", system-ui, sans-serif;
  --sc-shadow-color: 140 20% 12%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.12), 0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.10);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.12), 0 8px 18px -4px hsl(var(--sc-shadow-color) / 0.16);
  --sc-e3: 0 4px 8px hsl(var(--sc-shadow-color) / 0.10), 0 18px 40px -8px hsl(var(--sc-shadow-color) / 0.22);
  --sc-edge: inset 0 1px 0 rgba(255,255,255,0.9);

  /* the field's own colors: the diagram, not the page accent */
  --grass: #3d8a50;
  --grass-a: #3f8f54;
  --grass-b: #38834b;
  --grass-in: #3f8f54;
  --grass-foul: #34763f;
  --dirt: #c68b5c;
  --dirt-deep: #b3784b;
  --chalk: #f7f3e9;
  --ink-field: #14231a;

  --hair: color-mix(in oklab, var(--sc-ink) 12%, transparent);
  --hair-strong: color-mix(in oklab, var(--sc-ink) 22%, transparent);
  --ok: #1f7a3a;
  --bad: #b4321d;
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --chrome-h: 3.25rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--sc-canvas); color: var(--sc-ink);
  font-family: var(--sc-font-text); font-size: clamp(1rem, 0.96rem + 0.2vw, 1.08rem); line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: color-mix(in oklab, var(--sc-accent) 30%, white); }
:focus-visible { outline: 3px solid var(--sc-accent); outline-offset: 2px; border-radius: 4px; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--sc-font-display); font-weight: 600; line-height: 1.02; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
.num, .tab, .kicker { font-variant-numeric: tabular-nums; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------ field ---- */
.field { display: block; width: 100%; height: auto; background: var(--grass-foul); border-radius: var(--r-md); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.field .f-foul { fill: var(--grass-foul); }
.field .f-stripe-a { fill: var(--grass-a); }
.field .f-stripe-b { fill: var(--grass-b); }
.field .f-track { fill: var(--dirt-deep); }
.field .f-dirt { fill: var(--dirt); }
.field .f-dirt-grain { fill: #3a2410; pointer-events: none; }
.field .f-grass-in { fill: var(--grass-in); }
.field .f-mound { fill: var(--dirt-deep); }
.field .f-fence { fill: none; stroke: var(--chalk); stroke-width: 2; opacity: 0.95; stroke-linecap: round; }
.field .f-line { stroke: var(--chalk); stroke-width: 1.4; fill: none; opacity: 0.95; }
.field .f-line--thin { stroke-width: 0.7; opacity: 0.6; }
.field .f-path { fill: none; stroke: var(--chalk); stroke-width: 0.7; opacity: 0.35; }
.field .f-box { fill: none; stroke: var(--chalk); stroke-width: 0.6; opacity: 0.7; }
.field .f-base { fill: var(--chalk); stroke: #6b4a2a; stroke-width: 0.3; }
.field .f-marker { font: 700 9px var(--sc-font-display); fill: rgba(255,255,255,0.45); letter-spacing: 0.08em; }
.field .tok { cursor: default; }
.field[data-mode="select"] .tok { cursor: grab; }
.field .tok.is-dragging { cursor: grabbing; }
.field .tok__disc { stroke: #14231a; stroke-width: 0.6; }
.field .tok__ring { fill: none; stroke: var(--sc-accent); stroke-width: 1.8; opacity: 0; transition: opacity 180ms var(--ease); }
.field .tok.is-focus .tok__ring { opacity: 1; }
.field .tok__label { font: 700 8.6px var(--sc-font-display); fill: #14231a; letter-spacing: 0.02em; pointer-events: none; }
.field .tok--runner .tok__disc { stroke: #6b2609; }
.field .tok--runner .tok__label { fill: #fff; font-size: 7.6px; }
.field .tok--runner .tok__ring { stroke: #fff; }
.field .tok--ump .tok__disc { stroke: #14204a; }
.field .tok--ump .tok__label { fill: #fff; }
.field .tok--marker .tok__disc { stroke: #6b5a08; }
.field .tok.is-out { opacity: 0.45; }
.field .tok.is-gone { opacity: 0; pointer-events: none; }
.field .f-ball { fill: #fff; stroke: #14231a; stroke-width: 0.6; }
.field .f-ball-seam { fill: none; stroke: #c9341c; stroke-width: 0.55; opacity: 0.95; pointer-events: none; }
.field .f-ball-shadow { fill: #08200f; }
.field .trail { fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 3 2.8; opacity: 0.8; }
.field .trail--fielder { stroke: var(--chalk); }
.field .trail--runner { stroke: #ffb48f; stroke-dasharray: none; stroke-width: 1.7; opacity: 0.75; }
.field .draw-path { fill: none; stroke: #f4d53b; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.field[data-mode="draw"] { cursor: crosshair; }
.field[data-mode="erase"] .draw-path { cursor: pointer; }
.field .target { cursor: pointer; }
.field .target__hit { fill: transparent; }
.field .target__ring { fill: rgba(255,255,255,0.18); stroke: var(--chalk); stroke-width: 1.4; stroke-dasharray: 2.6 2; }
.field .target__label { font: 700 9px var(--sc-font-display); fill: #fff; pointer-events: none; }
.field .target:hover .target__ring, .field .target:focus-visible .target__ring { fill: rgba(255,255,255,0.32); }
.field .target.is-correct .target__ring { fill: color-mix(in oklab, var(--ok) 70%, white); stroke: #fff; stroke-dasharray: none; }
.field .target.is-wrong .target__ring { fill: color-mix(in oklab, var(--bad) 75%, white); stroke: #fff; stroke-dasharray: none; }
.field .target.is-dim { opacity: 0.35; }
@media (prefers-reduced-motion: reduce) { .field .tok__ring { transition: none; } }

/* ------------------------------------------------------------ chrome --- */
.chrome {
  position: sticky; top: 0; z-index: 60; display: flex; align-items: stretch; gap: 0.5rem;
  height: var(--chrome-h); padding: 0 clamp(0.75rem, 2vw, 1.5rem); background: var(--sc-surface);
  border-bottom: 1px solid var(--hair); box-shadow: var(--sc-e1);
}
.brand { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; padding-right: 0.5rem; margin-right: 0.25rem; border-right: 1px solid var(--hair); }
.brand__mark { width: 22px; height: 22px; border-radius: 50%; background: var(--chalk); border: 1.5px solid var(--sc-ink); position: relative; flex: none; }
.brand__mark::before, .brand__mark::after { content: ""; position: absolute; top: 3px; bottom: 3px; width: 6px; border: 1.5px solid var(--sc-accent); border-radius: 50%; }
.brand__mark::before { left: 1px; border-right-color: transparent; border-top-color: transparent; border-bottom-color: transparent; }
.brand__mark::after { right: 1px; border-left-color: transparent; border-top-color: transparent; border-bottom-color: transparent; }
.brand__name { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.01em; text-transform: uppercase; white-space: nowrap; }
.tabs { display: flex; gap: 0; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0 0.85rem; text-decoration: none; white-space: nowrap;
  font-family: var(--sc-font-display); font-weight: 600; font-size: 1.02rem; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--sc-ink-soft); border-bottom: 3px solid transparent; margin-bottom: -1px; transition: color 140ms var(--ease);
}
.tab:hover { color: var(--sc-ink); }
.tab[aria-current="page"] { color: var(--sc-ink); border-bottom-color: var(--sc-accent); }
.tab__count { font-size: 0.72rem; font-weight: 600; color: var(--sc-ink-soft); background: var(--sc-canvas); padding: 0.05rem 0.4rem; border-radius: 999px; border: 1px solid var(--hair); }
.chrome__right { display: flex; align-items: center; gap: 0.5rem; }
body.is-present .chrome { display: none; }

main { min-height: calc(100vh - var(--chrome-h)); }

/* ------------------------------------------------------------ atoms ----- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 2.6rem; padding: 0.45rem 1rem;
  border-radius: var(--r-sm); border: 1px solid var(--hair-strong); background: var(--sc-surface); color: var(--sc-ink);
  font-family: var(--sc-font-display); font-weight: 600; font-size: 1.02rem; letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; box-shadow: var(--sc-e1), var(--sc-edge); transition: transform 120ms var(--ease), background 140ms var(--ease), border-color 140ms var(--ease); white-space: nowrap;
}
.btn:hover { background: color-mix(in oklab, var(--sc-surface) 92%, var(--sc-ink)); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.btn--primary { background: var(--sc-accent); color: var(--sc-accent-ink); border-color: color-mix(in oklab, var(--sc-accent) 80%, black); }
.btn--primary:hover { background: color-mix(in oklab, var(--sc-accent) 88%, black); }
.btn--quiet { background: transparent; box-shadow: none; border-color: transparent; }
.btn--quiet:hover { background: color-mix(in oklab, var(--sc-ink) 6%, transparent); }
.btn--big { min-height: 3.4rem; font-size: 1.3rem; padding: 0.6rem 1.6rem; }
.btn--icon { padding: 0.45rem 0.6rem; }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.btn.is-on { background: var(--sc-ink); color: var(--sc-canvas); border-color: var(--sc-ink); }

.chip {
  display: inline-flex; align-items: center; min-height: 2rem; padding: 0.2rem 0.7rem; border-radius: 999px; border: 1px solid var(--hair-strong);
  background: var(--sc-surface); font-family: var(--sc-font-display); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer;
  transition: background 120ms var(--ease), color 120ms var(--ease);
}
.chip:hover { background: color-mix(in oklab, var(--sc-ink) 5%, var(--sc-surface)); }
.chip[aria-pressed="true"] { background: var(--sc-ink); color: var(--sc-canvas); border-color: var(--sc-ink); }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.field-input, select.field-input, textarea.field-input {
  width: 100%; min-height: 2.6rem; padding: 0.5rem 0.75rem; border-radius: var(--r-sm); border: 1px solid var(--hair-strong); background: var(--sc-surface);
  caret-color: var(--sc-accent);
}
.field-input:focus { border-color: var(--sc-accent); outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--sc-accent) 25%, transparent); }
label.lbl { display: block; font-family: var(--sc-font-display); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); margin-bottom: 0.3rem; }
.stack { display: grid; gap: 1rem; }
.row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.muted { color: var(--sc-ink-soft); }
.small { font-size: 0.9rem; }
.kicker { font-family: var(--sc-font-display); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.panel { background: var(--sc-surface); border: 1px solid var(--hair); border-radius: var(--r-md); box-shadow: var(--sc-e1); }
.panel__body { padding: 1rem 1.1rem; }
hr.rule { border: 0; border-top: 1px solid var(--hair); margin: 0.75rem 0; }

.toast { position: fixed; left: 50%; bottom: 1.25rem; transform: translate(-50%, 8px); opacity: 0; background: var(--sc-ink); color: var(--sc-canvas); padding: 0.6rem 1rem; border-radius: var(--r-sm); box-shadow: var(--sc-e3); z-index: 100; transition: opacity 180ms var(--ease), transform 180ms var(--ease); pointer-events: none; max-width: min(92vw, 40rem); text-align: center; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------ layouts -- */
.wrap { max-width: 88rem; margin: 0 auto; padding: clamp(0.75rem, 2vw, 1.5rem); }
.two { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.9fr); gap: clamp(0.75rem, 2vw, 1.5rem); align-items: start; }
.two > .col-field { position: sticky; top: calc(var(--chrome-h) + 0.75rem); }
@media (max-width: 900px) { .two { grid-template-columns: 1fr; } .two > .col-field { position: static; } }
.three { display: grid; grid-template-columns: 17rem minmax(0, 1.35fr) minmax(17rem, 0.85fr); gap: clamp(0.75rem, 2vw, 1.5rem); align-items: start; }
@media (max-width: 1180px) { .three { grid-template-columns: 16rem minmax(0, 1fr); } .three > .col-side { grid-column: 2; } }
@media (max-width: 900px) { .three { grid-template-columns: 1fr; } .three > .col-side { grid-column: auto; } .three > .col-list.is-collapsed { display: none; } }

/* ------------------------------------------------------------ viewer --- */
.viewer { display: grid; gap: 0.6rem; }
.viewer__field { position: relative; border-radius: var(--r-md); box-shadow: var(--sc-e2); overflow: hidden; }
.viewer__field .field { border-radius: 0; }
.viewer__svg { flex: 1 1 auto; width: 100%; min-width: 0; }
.setup-line { position: absolute; left: 0.6rem; top: 0.6rem; display: flex; gap: 0.35rem; align-items: center; pointer-events: none; }
.setup-line .pill { font-family: var(--sc-font-display); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-field); background: rgba(255,255,255,0.92); padding: 0.15rem 0.5rem; border-radius: 4px; box-shadow: var(--sc-e1); }
.setup-line .pill--outs { display: inline-flex; gap: 0.25rem; align-items: center; }
.setup-line .out-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; border: 1.5px solid var(--ink-field); background: transparent; }
.setup-line .out-dot.is-on { background: var(--sc-accent); border-color: var(--sc-accent); }
.caption { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: baseline; padding: 0.7rem 0.9rem; background: var(--sc-surface); border: 1px solid var(--hair); border-radius: var(--r-md); box-shadow: var(--sc-e1), var(--sc-edge); min-height: 4.2rem; }
.caption__label { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--sc-accent); white-space: nowrap; }
.caption__text { font-size: 1.05rem; line-height: 1.4; }
.transport { display: grid; grid-template-columns: auto auto auto 1fr auto; gap: 0.5rem; align-items: center; }
.transport input[type="range"] { width: 100%; accent-color: var(--sc-accent); }
.steps { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.step-chip { min-height: 2rem; padding: 0.15rem 0.65rem; border-radius: var(--r-sm); border: 1px solid var(--hair-strong); background: var(--sc-surface); font-family: var(--sc-font-display); font-weight: 600; font-size: 0.92rem; letter-spacing: 0.02em; text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; }
.step-chip .n { color: var(--sc-ink-soft); }
.step-chip[aria-current="step"] { background: var(--sc-ink); color: var(--sc-canvas); border-color: var(--sc-ink); }
.step-chip[aria-current="step"] .n { color: color-mix(in oklab, var(--sc-canvas) 70%, transparent); }

/* ------------------------------------------------------------ library -- */
.folder { border-top: 1px solid var(--hair); }
.folder:first-child { border-top: 0; }
.folder__head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.7rem 0.25rem; background: none; border: 0; text-align: left; cursor: pointer; font-family: var(--sc-font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.02em; text-transform: uppercase; }
.folder__head .count { color: var(--sc-ink-soft); font-size: 0.9rem; }
.folder__list { list-style: none; margin: 0; padding: 0 0 0.5rem; display: grid; gap: 2px; }
.folder[data-open="false"] .folder__list { display: none; }
.play-link { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; align-items: center; padding: 0.5rem 0.6rem; border-radius: var(--r-sm); text-decoration: none; }
.play-link:hover { background: color-mix(in oklab, var(--sc-ink) 5%, transparent); }
.play-link[aria-current="true"] { background: var(--sc-ink); color: var(--sc-canvas); }
.play-link .t { font-weight: 500; line-height: 1.25; }
.play-link .m { font-family: var(--sc-font-display); font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sc-ink-soft); }
.play-link[aria-current="true"] .m { color: color-mix(in oklab, var(--sc-canvas) 70%, transparent); }
.play-link .done { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ok); }
.filters { display: grid; gap: 0.6rem; margin-bottom: 0.75rem; }
.search { position: relative; }
.search input { padding-left: 2.2rem; }
.search svg { position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; color: var(--sc-ink-soft); }

.play-head { display: grid; gap: 0.3rem; margin-bottom: 0.6rem; }
.play-head h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
.play-head .note { color: var(--sc-ink-soft); }
.questions { display: grid; gap: 0.6rem; }
.qcard { padding: 0.8rem 0.95rem; border: 1px solid var(--hair); border-radius: var(--r-md); background: var(--sc-surface); }
.qcard summary { cursor: pointer; font-weight: 600; list-style: none; display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: baseline; }
.qcard summary::-webkit-details-marker { display: none; }
.qcard .pos { font-family: var(--sc-font-display); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sc-accent); font-size: 0.95rem; }
.qcard .why { margin-top: 0.5rem; color: var(--sc-ink-soft); }
.qcard ol { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.qcard li.is-answer { font-weight: 600; color: var(--ok); }

.empty { padding: 3rem 1rem; text-align: center; color: var(--sc-ink-soft); }
.empty h2 { color: var(--sc-ink); margin-bottom: 0.5rem; }

/* ------------------------------------------------------------ quiz ----- */
.quiz-setup { max-width: 44rem; margin: 0 auto; display: grid; gap: 1.25rem; }
.quiz-setup h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
.opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 0.4rem; }
.opt { min-height: 2.6rem; border: 1px solid var(--hair-strong); background: var(--sc-surface); border-radius: var(--r-sm); font-family: var(--sc-font-display); font-weight: 600; font-size: 1rem; letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer; display: grid; place-items: center; padding: 0.3rem 0.5rem; text-align: center; }
.opt[aria-pressed="true"] { background: var(--sc-ink); color: var(--sc-canvas); border-color: var(--sc-ink); }
.opt .sub { display: block; font-family: var(--sc-font-text); font-weight: 400; font-size: 0.78rem; text-transform: none; letter-spacing: 0; color: inherit; opacity: 0.75; }
.q-progress { display: flex; align-items: center; gap: 0.75rem; font-family: var(--sc-font-display); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sc-ink-soft); }
.q-progress .bar { flex: 1; height: 6px; background: var(--hair); border-radius: 999px; overflow: hidden; }
.q-progress .bar i { display: block; height: 100%; background: var(--sc-accent); width: 100%; transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 240ms var(--ease); }
.prompt { font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); line-height: 1.15; }
.prompt .pos { color: var(--sc-accent); }
.choices { display: grid; gap: 0.5rem; }
.choice { display: grid; grid-template-columns: 2.1rem 1fr; gap: 0.7rem; align-items: center; width: 100%; text-align: left; padding: 0.7rem 0.8rem; border: 1px solid var(--hair-strong); border-radius: var(--r-md); background: var(--sc-surface); cursor: pointer; font-size: 1.02rem; box-shadow: var(--sc-e1); transition: transform 120ms var(--ease), border-color 140ms var(--ease), background 140ms var(--ease); }
.choice:hover:not(:disabled) { border-color: var(--sc-ink); }
.choice:active:not(:disabled) { transform: translateY(1px); }
.choice .key { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1.5px solid var(--sc-ink); font-family: var(--sc-font-display); font-weight: 700; }
.choice[data-state="correct"] { border-color: var(--ok); background: color-mix(in oklab, var(--ok) 10%, white); }
.choice[data-state="correct"] .key { background: var(--ok); border-color: var(--ok); color: white; }
.choice[data-state="wrong"] { border-color: var(--bad); background: color-mix(in oklab, var(--bad) 8%, white); }
.choice[data-state="wrong"] .key { background: var(--bad); border-color: var(--bad); color: white; }
.choice[data-state="dim"] { opacity: 0.5; }
.verdict { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; padding: 0.9rem 1rem; border-radius: var(--r-md); background: var(--sc-surface); border: 1px solid var(--hair); }
.verdict .word { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.4rem; letter-spacing: 0.02em; text-transform: uppercase; }
.verdict.is-correct .word { color: var(--ok); }
.verdict.is-wrong .word { color: var(--bad); }
.score { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(3rem, 2rem + 5vw, 6rem); line-height: 1; letter-spacing: -0.02em; }
.score small { font-size: 0.4em; color: var(--sc-ink-soft); font-weight: 600; }
.mastery { display: grid; gap: 0.35rem; }
.mastery__row { display: grid; grid-template-columns: 3.2rem 1fr auto; gap: 0.6rem; align-items: center; font-family: var(--sc-font-display); font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }
.mastery__row .bar { height: 8px; background: var(--hair); border-radius: 999px; overflow: hidden; }
.mastery__row .bar i { display: block; height: 100%; background: var(--ok); }
.mastery__row .pct { color: var(--sc-ink-soft); font-size: 0.9rem; }

/* ------------------------------------------------------------ practice - */
.present { position: fixed; inset: 0; z-index: 70; background: var(--sc-canvas); display: grid; grid-template-rows: auto 1fr auto; }
.present__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 1rem; border-bottom: 1px solid var(--hair); background: var(--sc-surface); }
.present__title { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(1.2rem, 1rem + 1.2vw, 2rem); letter-spacing: 0.01em; text-transform: uppercase; }
.present__body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 0.8fr); gap: 1rem; padding: 1rem; min-height: 0; align-items: center; }
.present__body .viewer__field { display: flex; justify-content: center; }
.present__body .viewer__field .field { width: min(100%, calc((100vh - 18.5rem) * 1.297)); height: auto; margin: 0 auto; }
.present__side { display: grid; gap: 0.8rem; align-content: center; }
.present__ask { font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem); line-height: 1.15; }
.present__ask .pos { color: var(--sc-accent); }
.present__bottom { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1rem; border-top: 1px solid var(--hair); background: var(--sc-surface); }
.present .caption { min-height: 5rem; }
.present .caption__text { font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.4rem); }
@media (max-width: 900px) { .present__body { grid-template-columns: 1fr; align-content: start; overflow: auto; } .present__body .viewer__field .field { width: 100%; } }
@media (orientation: landscape) and (max-height: 500px) { .present__top { display: none; } .present__body { padding: 0.5rem; } }

/* ------------------------------------------------------------ board ---- */
.toolrail { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.board-side { display: grid; gap: 0.9rem; }
.steplist { display: grid; gap: 0.35rem; }
.steplist__item { display: grid; grid-template-columns: auto 1fr auto; gap: 0.5rem; align-items: center; padding: 0.4rem 0.5rem; border: 1px solid var(--hair); border-radius: var(--r-sm); background: var(--sc-surface); }
.steplist__item[aria-current="step"] { border-color: var(--sc-ink); box-shadow: 0 0 0 1px var(--sc-ink); }
.steplist__item .n { font-family: var(--sc-font-display); font-weight: 700; width: 1.6rem; text-align: center; color: var(--sc-ink-soft); }
.steplist__item input { border: 0; background: transparent; padding: 0.2rem 0.3rem; min-height: 1.8rem; width: 100%; }
.steplist__item input:focus { outline: 2px solid var(--sc-accent); border-radius: 4px; }
.hint { font-size: 0.9rem; color: var(--sc-ink-soft); }
kbd { font-family: var(--sc-font-display); font-weight: 600; font-size: 0.85em; padding: 0.05rem 0.35rem; border: 1px solid var(--hair-strong); border-bottom-width: 2px; border-radius: 4px; background: var(--sc-surface); }

/* ------------------------------------------------------------ my plays - */
.mylist { display: grid; gap: 0.5rem; }
.myrow { display: grid; grid-template-columns: 1fr auto; gap: 0.75rem; align-items: center; padding: 0.7rem 0.9rem; border: 1px solid var(--hair); border-radius: var(--r-md); background: var(--sc-surface); }
.myrow .t { font-weight: 600; }
.myrow .m { color: var(--sc-ink-soft); font-size: 0.9rem; }
.myrow .actions { display: flex; gap: 0.3rem; flex-wrap: wrap; justify-content: flex-end; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}


/* ------------------------------------------------------------ distill pass (2026-09-15) ---- */
/* Quieter type: only the tab strip and small labels stay uppercase. */
.btn, .chip, .step-chip, .opt, .folder__head, .caption__label, .brand__name { text-transform: none; letter-spacing: 0; }
.btn { font-family: var(--sc-font-text); font-weight: 600; font-size: 0.98rem; box-shadow: none; border-color: var(--hair-strong); }
.btn--primary { border-color: transparent; }
.btn--big { font-size: 1.1rem; }
.btn--quiet { border-color: transparent; color: var(--sc-ink-soft); }
.btn--quiet:hover { color: var(--sc-ink); }
.chip { font-family: var(--sc-font-text); font-weight: 500; font-size: 0.92rem; min-height: 1.9rem; }
.opt { font-family: var(--sc-font-text); font-weight: 600; }
.brand__name { font-family: var(--sc-font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.caption__label { font-family: var(--sc-font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.95rem; padding-top: 0.15rem; }
.folder__head { font-family: var(--sc-font-text); font-weight: 600; font-size: 1rem; }
.kicker { font-size: 0.8rem; }

/* Caption: plain text under the field, no card. */
.caption { background: transparent; border: 0; box-shadow: none; padding: 0.55rem 0.25rem 0.2rem; min-height: 3.4rem; grid-template-columns: auto 1fr; }
.caption__text { font-size: 1rem; line-height: 1.42; }

/* Lighter surfaces. */
.panel, .qcard, .myrow, .steplist__item, .choice { box-shadow: none; }
.viewer__field { box-shadow: var(--sc-e1); }
.setup-line .pill { box-shadow: none; }

/* Transport: a compact single row. */
.transport { grid-template-columns: auto auto 1fr auto; gap: 0.4rem; }
.transport .btn--icon { min-height: 2.4rem; padding: 0.3rem 0.55rem; }

/* Chrome that fits a phone. */
.tab { padding: 0 0.7rem; font-size: 0.95rem; }
@media (max-width: 640px) {
  .brand__name { display: none; }
  .brand { padding-right: 0.25rem; }
  .tab { padding: 0 0.55rem; font-size: 0.9rem; letter-spacing: 0.02em; }
  .tab__count { display: none; }
}
.chrome__link { display: inline-flex; align-items: center; font-size: 0.9rem; color: var(--sc-ink-soft); text-decoration: none; white-space: nowrap; }
.chrome__link:hover { color: var(--sc-ink); }
@media (max-width: 640px) { .chrome__link { display: none; } }

/* Library side column reads top-down: title, actions, then the questions. */
.play-head h2 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); }
.play-head .kicker { font-size: 0.78rem; }

/* Quiz setup: fewer, calmer controls. */
.quiz-setup { gap: 1.1rem; }
.quiz-setup h1 { font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.4rem); }
.opt-grid { grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); gap: 0.35rem; }
.opt { min-height: 2.3rem; font-size: 0.95rem; }
.opt .sub { display: none; }
details.more > summary { cursor: pointer; list-style: none; color: var(--sc-ink-soft); font-size: 0.92rem; display: inline-flex; gap: 0.4rem; align-items: center; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: ""; width: 0.45rem; height: 0.45rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform 140ms var(--ease); }
details.more[open] > summary::before { transform: rotate(45deg); }
details.more > .chips { margin-top: 0.6rem; }

/* Board: one row of tools, secondary actions as quiet text buttons. */
.toolrail { gap: 0.3rem; align-items: center; }
.toolrail .group { display: inline-flex; border: 1px solid var(--hair-strong); border-radius: var(--r-sm); overflow: hidden; }
.toolrail .group .btn { border: 0; border-radius: 0; box-shadow: none; min-height: 2.4rem; padding: 0.3rem 0.6rem; }
.toolrail .group .btn + .btn { border-left: 1px solid var(--hair); }
.toolrail select.field-input { width: auto; min-height: 2.4rem; padding: 0.3rem 1.8rem 0.3rem 0.6rem; font-weight: 600; font-size: 0.95rem; }
.actions-quiet { display: flex; flex-wrap: wrap; gap: 0.1rem 0.4rem; align-items: center; }
.actions-quiet .btn { min-height: 2.1rem; padding: 0.2rem 0.5rem; }
.steplist__item { padding: 0.25rem 0.5rem; }
.steplist__item .btn { min-height: 1.9rem; }
.btn[hidden], .chip[hidden] { display: none; }
.play-actions { display: grid; gap: 0.35rem; justify-items: start; margin-bottom: 1rem; }

/* ---- practice mode, second pass ---- */
.present__title { text-transform: none; letter-spacing: 0; font-size: clamp(1.1rem, 1rem + 0.8vw, 1.6rem); }
.present .viewer .caption, .present .viewer .transport { display: none; }
.present__body .viewer__field { width: fit-content; max-width: 100%; margin: 0 auto; background: transparent; box-shadow: none; }
.present__body .viewer__field .field { width: min(100%, calc((100vh - 11.5rem) * 1.297)); box-shadow: var(--sc-e2); }
.present__side { align-content: start; padding-top: 0.5rem; gap: 0.9rem; max-height: calc(100vh - 10rem); overflow: auto; }
.present__setup { font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.25rem, 1rem + 1vw, 1.8rem); line-height: 1.15; }
.present__ask { font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); line-height: 1.35; padding: 0.55rem 0; border-top: 1px solid var(--hair); }
.present__ask .pos, .present__answer .pos { display: block; font-family: var(--sc-font-display); font-weight: 700; font-size: 0.85em; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sc-accent); margin-bottom: 0.1rem; }
.present__answer { font-size: 1rem; line-height: 1.4; padding: 0.55rem 0; border-top: 1px solid var(--hair); }
.present__caption { display: grid; gap: 0.15rem; padding: 0.7rem 0.9rem; border-radius: var(--r-md); background: var(--sc-surface); border: 1px solid var(--hair); }
.present__caption .caption__label { font-family: var(--sc-font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sc-accent); font-size: 0.9rem; }
.present__caption .caption__text { font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem); line-height: 1.4; }
@media (max-width: 900px) { .present__body .viewer__field .field { width: 100%; } .present__side { max-height: none; overflow: visible; } }
.present__body .viewer__field { width: min(100%, calc((100vh - 11.5rem) * 1.297)); }
.present__body .viewer__field .field { width: 100%; }
.present__caption[hidden] { display: none; }
@media (max-width: 900px) { .present__body .viewer__field { width: 100%; } }