/* ARQ IQ studio — the Signature look (Archivo, JetBrains Mono, cream page, dark field, lime accent), and Graphite in
   Day and Night (Sage chose Graphite on 2026-10-17, Round 3 boards). The look is a setting (js/theme.js); Signature
   stays the default. Every colour is a token: :root holds the Signature values, :root[data-theme=…] the Graphite ones,
   and the Graphite section at the end changes a few layouts (the floating tab bar, the inset field, grouped controls).
   Since Nov 3 2026 the app has one look, ARQ 360's paper and ink (css/paper.css), built on the Graphite layout here; the
   Signature values and the old look setting's styles stay in this file as history. */
@font-face { font-family: 'Archivo'; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url('../assets/fonts/archivo-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo'; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url('../assets/fonts/archivo-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400 800; font-display: swap; src: url('../assets/fonts/jetbrains-mono-latin.woff2') format('woff2'); }
:root {
  --bg: #f5f4f0; --ink: #161816; --ink2: #2b2e2b; --muted: #62625b; --hair: #dfe0da; --card: #fff;
  --field: #171d1a; --field2: #1f2622; --lime: #d5e8a3; --olive: #55672b; --cream: #f5f4f0; --warn: #d08f6a; --good: #9fc46a;
  --sans: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* roles: what each colour is for */
  --cream-rgb: 245, 244, 240;    /* light marks over the dark field, for alphas */
  --veil-rgb: 23, 29, 26;        /* panels over the field */
  --on-lime: #161816;            /* text and icons on lime */
  --on-dark2: #b9c0b3;           /* body text on dark cards */
  --on-dark3: #8f978a;           /* small labels on dark cards */
  --kick: var(--olive);          /* small mono labels on the page */
  --accent-text: var(--olive);   /* done marks and links on the page */
  --brand-iq: var(--olive);      /* "IQ" in the wordmark */
  --headline2: #7c7d76;          /* the second half of a headline */
  --focus: #7d9440;
  --danger: #a4532c; --miss: #9a5a36; --note-bg: #f0f3e6; --note-bd: #dfe6c8;
  --btn-dark-bg: var(--ink); --btn-dark-ink: var(--cream);
  --ready-bd: var(--ink);        /* a subject or the reps card that is ready */
  --pip-ok-bg: var(--lime); --pip-ok-bd: var(--olive); --pip-ok-ink: var(--ink); --pip-miss-bg: rgba(208, 143, 106, .14); --pip-miss-bd: var(--warn);
  --inspect-bg: var(--cream); --inspect-ink: var(--ink);
  --sheet-bg: var(--bg);
  /* the lesson player (dark in Signature) */
  --p-bg: var(--field); --p-ink: var(--cream); --p-sub: #a8b0a3; --p-body: #c7cdc1; --p-meta: #8f978a; --p-accent: var(--lime);
  --p-line: rgba(245, 244, 240, .22); --p-line2: rgba(245, 244, 240, .3); --p-dock-line: rgba(245, 244, 240, .08);
  --p-track: rgba(245, 244, 240, .14); --p-fill: var(--lime); --p-timer: rgba(245, 244, 240, .1); --p-timer-fill: rgba(213, 232, 163, .75);
  --p-choice: rgba(245, 244, 240, .07); --p-show-me: #c7cdc1;
  --p-main-bg: var(--lime); --p-main-ink: var(--ink); --p-btn-bg: var(--lime); --p-btn-ink: var(--ink); --p-pick-bg: var(--lime); --p-pick-ink: var(--ink);
  --right-bg: rgba(159, 196, 106, .22); --right-bd: var(--good); --right-ic: var(--good);
  --wrong-bg: rgba(208, 143, 106, .2); --wrong-bd: var(--warn); --wrong-ic: var(--warn);
  --mark-ok: var(--good); --mark-ok-ink: var(--ink); --mark-bad: var(--warn); --mark-bad-ink: var(--ink); --mark-info: rgba(245, 244, 240, .16); --mark-info-ink: var(--cream);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-text-size-adjust: 100%; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; }
button:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
a { color: inherit; }
[hidden] { display: none !important; }
.kick { font: 600 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--kick); }
.kick.light { color: var(--lime); }
h1, h2, h3 { margin: 0; letter-spacing: -.03em; }

/* ---------- shell ---------- */
.page { max-width: 1120px; margin: 0 auto; padding: 18px 18px calc(96px + var(--safe-b)); }
.page { padding-top: calc(18px + env(safe-area-inset-top, 0px)); }   /* opened from the home screen, the page clears the status bar */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 18px; }
.wordmark { font: 900 26px/1 var(--sans); letter-spacing: -.04em; }
.wordmark b { color: var(--brand-iq); font-weight: 900; }
.pill { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--hair); border-radius: 999px; padding: 9px 15px; font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; background: var(--card); }
.hero-title { font: 900 clamp(40px, 9vw, 78px)/.96 var(--sans); letter-spacing: -.05em; margin: 8px 0 18px; }
.hero-title span { color: var(--headline2); }

.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: center; background: rgba(245,244,240,.94); backdrop-filter: blur(10px); border-top: 1px solid var(--hair); padding: 6px 8px calc(6px + var(--safe-b)); }
.tabbar nav { display: flex; width: 100%; max-width: 560px; }
.tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 0; font: 600 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tabbar button i { width: 16px; height: 16px; border: 1.6px solid currentColor; border-radius: 4px; }
.tabbar button[aria-current="true"] { color: var(--olive); }
.tabbar button[aria-current="true"] i { background: var(--olive); }
.tabbar .tab-ico, .tabbar .tab-pill { display: none; }

/* ---------- cards ---------- */
.dark { background: var(--field); color: var(--cream); border-radius: 26px; overflow: hidden; position: relative; }
.hero-card { display: grid; gap: 0; }
.hero-card .txt { padding: 22px 22px 8px; }
.hero-card h2 { font: 800 clamp(26px, 5vw, 38px)/1.05 var(--sans); margin: 8px 0 8px; }
.hero-card p { margin: 0; color: var(--on-dark2); font-size: 15px; line-height: 1.45; max-width: 560px; }
.hero-card .mini { height: clamp(210px, 34vw, 330px); position: relative; }
.hero-card .row { display: flex; flex-wrap: wrap; gap: 10px; padding: 6px 22px 22px; align-items: center; }
/* a new player's first Today: one button per path (Nov 3 2026: players choose where to start) */
.hero-card.choose .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 16px; }
.hero-card.choose .path-pick { justify-content: space-between; min-width: 0; padding: 0 18px; }
.hero-card.choose .path-pick span { font-weight: 500; opacity: .72; }
@media (max-width: 420px) { .hero-card.choose .row { grid-template-columns: 1fr; } }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px; font: 800 17px/1 var(--sans); letter-spacing: -.01em; background: var(--lime); color: var(--on-lime); }
.btn.ghost { background: transparent; color: inherit; border: 1.5px solid rgba(var(--cream-rgb), .35); }
.btn.dark { background: var(--btn-dark-bg); color: var(--btn-dark-ink); border-radius: 999px; }
.btn.line { background: transparent; border: 1.5px solid var(--hair); color: var(--ink); }
.btn.small { min-height: 42px; padding: 0 18px; font-size: 15px; }
.section-h { display: flex; align-items: baseline; justify-content: space-between; margin: 34px 0 12px; }
.section-h h2 { font: 800 26px/1.1 var(--sans); }

.subjects { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.subject { background: var(--card); border: 1.5px solid var(--hair); border-radius: 20px; padding: 16px 16px 14px; text-align: left; display: flex; flex-direction: column; gap: 8px; min-height: 148px; position: relative; }
.subject h3 { font: 800 19px/1.15 var(--sans); }
.subject p { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.subject .state { margin-top: auto; font: 600 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.subject .prog { display: none; }
.subject.ready { border-color: var(--ready-bd); }
.subject.ready .state { color: var(--accent-text); }
.subject.soon { opacity: .62; }

/* ---------- subject page ---------- */
.crumb { font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: inline-flex; gap: 8px; align-items: center; }
/* phones first (Sage, 2026-10-18): every back link a thumb-sized target, without moving the layout */
.crumb { min-height: 44px; padding: 0 14px 0 0; margin: -16px -14px -16px 0; }
.subject-title { font: 900 clamp(34px, 7vw, 60px)/.98 var(--sans); letter-spacing: -.045em; margin: 14px 0 10px; }
.lead { font-size: 17px; line-height: 1.45; color: var(--ink2); max-width: 640px; margin: 0 0 20px; }
.lessons { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.lesson-card { text-align: left; border-radius: 22px; overflow: hidden; background: var(--field); color: var(--cream); display: flex; flex-direction: column; }
.lesson-card .thumb { height: 170px; position: relative; }
.lesson-card .body { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.lesson-card h3 { font: 800 21px/1.1 var(--sans); }
.lesson-card p { margin: 0; color: var(--on-dark2); font-size: 14px; line-height: 1.4; }
.lesson-card .meta { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font: 600 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark3); }
.lesson-card .meta .go { color: var(--lime); }
.lesson-card .n { font: 700 11px/1 var(--mono); color: var(--lime); letter-spacing: .12em; }
.tools { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.tool { background: var(--card); border: 1.5px solid var(--hair); border-radius: 20px; padding: 16px; text-align: left; }
.tool h3 { font: 800 19px/1.1 var(--sans); margin-bottom: 4px; }
.tool p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.4; }

/* ---------- the field ---------- */
.arq-field { position: absolute; inset: 0; overflow: hidden; background: var(--field); touch-action: manipulation; }
.arq-field svg { display: block; user-select: none; -webkit-user-select: none; }
.arq-field .tok { cursor: pointer; outline: none; transition: opacity .35s; }
.callouts { position: absolute; inset: 0; pointer-events: none; }
.callouts .leaders { position: absolute; inset: 0; overflow: visible; }
.co-box { position: absolute; border: 1.8px solid var(--lime); border-radius: 12px; opacity: 0; transition: opacity .3s; box-shadow: 0 0 0 4px rgba(213,232,163,.08); }
.co-box.tone-warn { border-color: var(--warn); box-shadow: 0 0 0 4px rgba(208,143,106,.1); }
.co-label { position: absolute; max-width: 210px; padding: 7px 11px; border-radius: 10px; background: rgba(var(--veil-rgb), .92); border: 1.5px solid var(--lime); color: var(--cream); font: 650 13px/1.25 var(--sans); letter-spacing: -.005em; opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; white-space: nowrap; }
.co-label.tone-warn { border-color: var(--warn); }
.co-box.in, .co-label.in { opacity: 1; transform: none; }
.co-line { fill: none; stroke: var(--lime); stroke-width: 1.6; stroke-dasharray: 2 4; stroke-linecap: round; opacity: 0; transition: opacity .3s; }
.co-line.tone-warn { stroke: var(--warn); }
.co-box.tone-ink { border-color: rgba(var(--cream-rgb), .62); box-shadow: none; }
.co-label.tone-ink { border-color: rgba(var(--cream-rgb), .45); }
.co-line.tone-ink { stroke: rgba(var(--cream-rgb), .7); }
.co-line.in { opacity: .95; }

/* ---------- lesson player ---------- */
.player { position: fixed; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; background: var(--p-bg); color: var(--p-ink); }
.player .bar { display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px; }
.iconbtn { width: 42px; height: 42px; border-radius: 50%; display: inline-grid; place-items: center; border: 1.5px solid var(--p-line); color: var(--p-ink); flex: 0 0 auto; }
.iconbtn svg { width: 18px; height: 18px; }
.player .ttl { min-width: 0; flex: 1; }
.player .ttl b { display: block; font: 800 16px/1.1 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player .ttl small { display: block; font: 600 10px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--p-meta); margin-top: 3px; }
.segs { display: flex; gap: 4px; padding: 0 14px 8px; }
.segs .seg { flex: 1; height: 4px; border-radius: 2px; background: var(--p-track); overflow: hidden; }
.segs .seg i { display: block; height: 100%; width: 0; background: var(--p-fill); transition: width .4s; }
.seg-name { display: none; }
.stage { position: relative; min-height: 0; }
.stage .field-host { position: absolute; inset: 0; }
.hud { position: absolute; top: 12px; left: 50%; transform: translateX(-50%) scale(var(--hud-k, 1)); transform-origin: 50% 0; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; transition: opacity .35s; z-index: 2; }
.hud .digits { display: flex; gap: 10px; }
.hud .d { width: 52px; height: 60px; border-radius: 12px; background: rgba(var(--veil-rgb), .9); border: 1.5px solid rgba(213,232,163,.5); display: grid; place-items: center; font: 800 36px/1 var(--sans); color: var(--lime); letter-spacing: -.03em; }
.hud .d.flip { animation: flip .42s ease; }
@keyframes flip { 0% { transform: scale(1) } 40% { transform: scale(1.18); background: rgba(213,232,163,.22) } 100% { transform: scale(1) } }
.hud .dw { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.hud .dw.empty { display: none; }
.hud .dw span { font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(var(--cream-rgb), .78); background: rgba(var(--veil-rgb), .7); padding: 3px 6px; border-radius: 5px; white-space: nowrap; }
.verdict.info .mark { background: var(--mark-info); color: var(--mark-info-ink); }
.choice.show-me { background: transparent; border-style: dashed; font-weight: 700; font-size: 15px; color: var(--p-show-me); }
.hud .d.word { width: auto; min-width: 52px; padding: 0 12px; font-size: 30px; white-space: nowrap; }
.hud .digits:has(.dw:nth-child(4)) .d { height: 50px; font-size: 26px; }
.hud .digits:has(.dw:nth-child(4)) .d.word { font-size: 22px; padding: 0 9px; }
.hud .digits:has(.dw:nth-child(4)) { gap: 7px; }
.tap-cue, .tap-said { margin: 2px 0 0; font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--p-accent); }
.hud .dw.tone-deep .d { color: var(--lime); border-color: rgba(213,232,163,.75); }
.hud .dw.tone-under .d { color: var(--cream); border-color: rgba(var(--cream-rgb), .6); }
.hud .dw.tone-man .d { color: var(--warn); border-color: rgba(208,143,106,.8); }
.hud .dw.tone-rush .d { color: rgba(var(--cream-rgb), .75); border-color: rgba(var(--cream-rgb), .25); }
.hud .cap { font: 700 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--cream-rgb), .8); background: rgba(var(--veil-rgb), .75); padding: 5px 9px; border-radius: 6px; }
.card-over { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 3; }
.card-over .sc { background: rgba(var(--veil-rgb), .88); border: 1.5px solid rgba(213,232,163,.45); border-radius: 20px; padding: 18px 26px; text-align: center; opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .35s, transform .35s; }
.card-over .sc.in { opacity: 1; transform: none; }
.card-over .sc h2 { font: 900 30px/1.05 var(--sans); margin-top: 8px; }
.card-over .sc p { margin: 8px 0 0; color: var(--on-dark2); font-size: 15px; }
.inspect { position: absolute; z-index: 4; max-width: 260px; background: var(--inspect-bg); color: var(--inspect-ink); border-radius: 14px; padding: 12px 14px; box-shadow: 0 12px 34px rgba(0,0,0,.35); font-size: 14px; line-height: 1.4; pointer-events: auto; }
.inspect b { display: block; font: 800 16px/1.2 var(--sans); margin-bottom: 3px; }
.inspect .x { position: absolute; top: 6px; right: 8px; font-size: 16px; color: var(--muted); padding: 4px; }

.dock { background: var(--p-bg); border-top: 1px solid var(--p-dock-line); padding: 14px 18px calc(16px + var(--safe-b)); display: flex; flex-direction: column; gap: 12px; }
.say { font: 750 21px/1.28 var(--sans); letter-spacing: -.015em; margin: 0; min-height: 2.6em; }
.say .w { opacity: 0; transition: opacity .28s; }
.say .w.in { opacity: 1; }
.sub { margin: -4px 0 0; color: var(--p-sub); font-size: 15px; line-height: 1.4; }
.timer { height: 3px; border-radius: 2px; background: var(--p-timer); overflow: hidden; }
.timer i { display: block; height: 100%; width: 0; background: var(--p-timer-fill); }
.controls { display: flex; align-items: center; justify-content: center; gap: 18px; }
.controls .main { width: 56px; height: 56px; border-radius: 50%; background: var(--p-main-bg); color: var(--p-main-ink); display: grid; place-items: center; }
.controls .main svg { width: 22px; height: 22px; }
/* the speed chip: at the dock's right edge, so back, pause and forward stay centred */
.controls { position: relative; }
.controls .speed { position: absolute; right: 0; top: 50%; transform: translateY(-50%); min-width: 48px; height: 34px; padding: 0 10px; border-radius: 17px; border: 1.5px solid var(--p-line, rgba(245,244,240,.22)); color: var(--p-ink, var(--cream)); font: 700 13px/1 var(--mono); letter-spacing: .02em; }
[data-theme^="graphite"] .controls .speed { position: static; transform: none; margin-left: 2px; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.choices.wide { grid-template-columns: 1fr; }
.choice { min-height: 54px; border-radius: 16px; background: var(--p-choice); border: 1.5px solid var(--p-line); font: 800 18px/1.2 var(--sans); color: var(--p-ink); padding: 10px 14px; transition: background .2s, border-color .2s, transform .1s; }
.choice:active { transform: scale(.98); }
.choice.right { background: var(--right-bg); border-color: var(--right-bd); }
.choice.wrong { background: var(--wrong-bg); border-color: var(--wrong-bd); }
.choice .ic { display: none; }
.prompt { font: 800 20px/1.25 var(--sans); margin: 0; }
.prompt small { display: block; font: 500 14px/1.4 var(--sans); color: var(--p-sub); margin-top: 4px; letter-spacing: 0; }
.verdict { display: flex; gap: 12px; align-items: flex-start; }
.verdict .mark { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 900 18px/1 var(--sans); color: var(--mark-ok-ink); background: var(--mark-ok); }
.verdict.bad .mark { background: var(--mark-bad); color: var(--mark-bad-ink); }
.verdict h3 { font: 800 20px/1.2 var(--sans); }
.verdict p { margin: 4px 0 0; color: var(--p-body); font-size: 15.5px; line-height: 1.45; }
.row-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.row-actions .btn { flex: 1 1 auto; }
.player .btn { background: var(--p-btn-bg); color: var(--p-btn-ink); }
.player .btn.line { background: transparent; color: var(--p-ink); border-color: var(--p-line2); }
.goahead h3 { font: 800 22px/1.2 var(--sans); }
.goahead p { margin: 4px 0 0; color: var(--p-sub); }
.done-card { text-align: left; }
.done-card h3 { font: 900 28px/1.05 var(--sans); }
.done-card p { color: var(--p-body); font-size: 16px; line-height: 1.45; }
.related { display: grid; gap: 8px; margin-top: 18px; }
.related .rel { display: grid; gap: 3px; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--p-line); color: var(--p-ink); }
.related .rel b { font: 800 16px/1.2 var(--sans); }
.related .rel small { font-size: 13.5px; line-height: 1.35; color: var(--p-body); }
.sheet-veil { position: fixed; inset: 0; background: rgba(10,12,11,.55); z-index: 50; display: grid; align-items: end; justify-items: center; }
.sheet { width: min(640px, 100%); max-height: 86vh; overflow: auto; background: var(--sheet-bg); color: var(--ink); border-radius: 22px 22px 0 0; padding: 22px 22px calc(26px + var(--safe-b)); }
.sheet h2 { font: 900 28px/1.05 var(--sans); }
.sheet h4 { font: 600 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--kick); margin: 20px 0 6px; }
.sheet p, .sheet li { font-size: 15px; line-height: 1.5; color: var(--ink2); }
.sheet ul { padding-left: 18px; margin: 4px 0; }
.menu-list button { display: block; width: 100%; text-align: left; padding: 14px 4px; border-bottom: 1px solid var(--hair); font: 700 17px/1.2 var(--sans); }

/* practice + explore */
.picker { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.picker::-webkit-scrollbar { display: none; }
.picker button { flex: 0 0 auto; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--p-line); font: 700 15px/1 var(--sans); color: var(--p-ink); }
.picker button[aria-pressed="true"] { background: var(--p-pick-bg); color: var(--p-pick-ink); border-color: var(--p-pick-bg); }
.picker-label { font: 600 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--p-meta); margin-bottom: 6px; }
.facts { display: grid; gap: 4px; }
.facts p { margin: 0; color: var(--p-body); font-size: 15px; line-height: 1.4; }
.facts b { color: var(--p-ink); }
.streak { font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--p-accent); }

/* wide screens: the words sit directly under the picture, like subtitles (Sage, 2026-10-16: text in a column beside
   the picture was hard to follow), in one centered column; answer choices sit in a row so the picture keeps its height */
@media (min-width: 900px) {
  .player { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto clamp(320px, 64vh, 780px) minmax(0, 1fr); }
  .player.is-done { grid-template-rows: auto auto clamp(260px, 46vh, 600px) minmax(0, 1fr); }
  .player.holding { grid-template-rows: auto auto clamp(280px, 54vh, 700px) minmax(0, 1fr); }   /* a question: room for its choices */
  .player .stage { grid-row: 3; grid-column: 1; margin: 0 18px; border-radius: 22px; overflow: hidden; }
  .player .dock { grid-row: 4; grid-column: 1; border-top: 0; padding: 14px 26px 22px; overflow-y: auto; }
  .player .dock > * { width: 100%; max-width: 880px; margin-left: auto; margin-right: auto; }
  .player .choices:not(.wide) { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
  .say { font-size: 24px; min-height: 0; }
}
@media (max-width: 899px) {
  .player { grid-template-rows: auto auto clamp(250px, 54vh, 620px) minmax(0, 1fr); }
  .player .ttl b { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  .player .dock { overflow-y: auto; }
  .player.is-done { grid-template-rows: auto auto clamp(200px, 38vh, 440px) minmax(0, 1fr); }
  .player.free { grid-template-rows: auto auto clamp(240px, 50vh, 600px) minmax(0, 1fr); }
  .player.holding { grid-template-rows: auto auto clamp(190px, 40vh, 520px) minmax(0, 1fr); }   /* a question: room for every choice */
}
/* short phone screens (a small phone, or a browser's toolbars showing): a little less picture, slightly smaller words,
   so a whole line and its buttons fit without scrolling */
@media (max-width: 899px) and (max-height: 760px) {
  .player { grid-template-rows: auto auto clamp(220px, 47vh, 620px) minmax(0, 1fr); }
  .player.is-done { grid-template-rows: auto auto clamp(180px, 34vh, 440px) minmax(0, 1fr); }
  .player.free { grid-template-rows: auto auto clamp(220px, 46vh, 600px) minmax(0, 1fr); }
  .player.holding { grid-template-rows: auto auto clamp(180px, 37vh, 520px) minmax(0, 1fr); }
  .say { font-size: 19px; }
  .choice { font-size: 16px; min-height: 48px; }
}
@media (max-width: 899px) and (max-height: 680px) {
  .player.holding { grid-template-rows: auto auto clamp(160px, 33vh, 520px) minmax(0, 1fr); }   /* the smallest phones: every choice in view */
}
/* a phone turned sideways: the picture on the left, the words and buttons beside it, clear of the notch */
@media (orientation: landscape) and (max-height: 520px) {
  .player, .player.is-done, .player.free, .player.holding { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr);
    padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
  .player .bar, .player .segs-wrap { grid-column: 1 / -1; }
  .player .stage { grid-row: 3; grid-column: 1; margin: 0; border-radius: 0; }
  .player .dock { grid-row: 3; grid-column: 2; overflow-y: auto; border-top: 0; border-left: 1px solid rgba(245,244,240,.08); padding: 12px 16px calc(12px + var(--safe-b)); }
  .player .dock > * { max-width: none; }
  .player .choices:not(.wide) { grid-template-columns: minmax(0, 1fr); }
  .say { font-size: 18px; }
}
.player.holding .say, .player.holding .sub { display: none; }
.axes { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.axis { display: flex; align-items: center; gap: 10px; min-width: 0; }
.actions > * { min-width: 0; max-width: 100%; }
.axis .picker-label { margin: 0; width: 96px; flex: 0 0 auto; line-height: 1.3; }
.axis .picker { min-width: 0; flex: 1 1 auto; }
.axis .picker button { min-height: 36px; font-size: 14px; }
.dock { overflow-x: hidden; }
/* phones (2026-10-18): the words never slide under the buttons; each item keeps its height and the dock scrolls instead,
   and the play buttons and Continue stay pinned at its foot, the words scrolling under a short fade */
.dock > * { flex-shrink: 0; }
.player .dock .controls, .player .dock .row-actions { position: sticky; bottom: 0; z-index: 1; background: var(--field);
  box-shadow: 0 -14px 12px -4px var(--field), 0 40px 0 24px var(--field); }   /* the fade above, and the dock's foot padding covered below */
.facts .hint { color: var(--p-meta); font-size: 13px; }
.player.free .say { min-height: 0; }
.stage-btn { position: absolute; right: 12px; bottom: 12px; z-index: 3; min-height: 36px; padding: 0 14px; border-radius: 999px; background: rgba(var(--veil-rgb), .86); border: 1.5px solid rgba(213,232,163,.55); color: var(--cream); font: 700 14px/1 var(--sans); }
.stage-btn[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .say .w, .co-label, .co-box, .card-over .sc { transition: none; } .hud .d.flip { animation: none; } }
/* levels and paths (2026-10-15): bars are an instrument for the level, one to three filled */
.bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; vertical-align: -1px; }
.bars i { width: 4px; border-radius: 1px; background: currentColor; opacity: .28; }
.bars i:nth-child(1) { height: 5px; } .bars i:nth-child(2) { height: 8px; } .bars i:nth-child(3) { height: 11px; }
.bars i.on { opacity: 1; }
.level-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 26px 0 12px; padding-top: 12px; border-top: 1.5px solid var(--ink); color: var(--kick); }
.level-h .lv-name { font: 800 21px/1 var(--sans); letter-spacing: -.03em; color: var(--ink); }
.level-h .lv-verb { font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--kick); }
.level-h p { flex-basis: 100%; margin: 4px 0 0; font-size: 14px; line-height: 1.4; color: var(--muted); }
/* a module told in chapters (coverages): the chapter's place, its title and what it is for */
.chapter-h { margin: 30px 0 12px; padding-top: 12px; border-top: 1.5px solid var(--ink); }
.chapter-h .ch-n { font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.chapter-h h2 { margin: 7px 0 0; font: 800 22px/1.1 var(--sans); letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.chapter-h p { margin: 5px 0 0; max-width: 62ch; font-size: 14px; line-height: 1.45; color: var(--muted); }
.path-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .path-cards { grid-template-columns: 1fr; } }
.path-card { position: relative; text-align: left; background: var(--field); color: var(--cream); border-radius: 22px; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 8px; min-height: 172px; min-width: 0; }
.path-card .bars { color: var(--lime); position: absolute; top: 18px; right: 18px; }
.path-card h3 { font: 900 32px/1 var(--sans); letter-spacing: -.045em; }
.path-card p { margin: 0; color: var(--on-dark2); font-size: 14px; line-height: 1.4; }
.path-card .state { margin-top: auto; font: 600 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }
.path-card.mine { box-shadow: 0 0 0 2px var(--lime) inset; }
.path-card.soon { opacity: .62; }
.path-card.soon .state { color: var(--on-dark3); }
.path-for { margin: -8px 0 18px; font-size: 14px; color: var(--muted); max-width: 640px; }
.path-go { margin: 0 0 8px; }
.path-go .btn { min-height: 48px; font-size: 16px; }
.path-list { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1.5px solid var(--ink); }
.path-list .path-group { padding: 18px 2px 8px; border-bottom: 1px solid var(--hair, rgba(0,0,0,.12)); font: 600 11px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.path-list .path-group:first-child { padding-top: 12px; }
.path-list li button { width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 2px; border-bottom: 1px solid var(--hair); text-align: left; }
.path-list .num { font: 800 20px/1 var(--sans); color: var(--kick); font-variant-numeric: tabular-nums; }
.path-list b { display: block; font: 800 17px/1.2 var(--sans); letter-spacing: -.02em; }
.path-list small { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }
.path-list .st { font: 600 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.path-list .st.done { color: var(--accent-text); }
.path-note { margin: 14px 0 0; font-size: 13.5px; color: var(--muted); }
/* a four-tile scoreboard on a phone: keep the row inside the field and let long labels take two lines */
.hud { max-width: calc(100% - 12px); }
.hud .digits:has(.dw:nth-child(4)) .dw span { white-space: normal; max-width: 80px; text-align: center; line-height: 1.2; }
/* Today's reps: the Today card, its marks (one per rep) and the day's list */
.reps-card { margin: 14px 0 0; background: var(--card); border: 1.5px solid var(--ready-bd); border-radius: 22px; padding: 18px 18px 18px; display: grid; gap: 8px; text-align: left; }
.reps-card .top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.reps-card h3 { font: 900 26px/1.05 var(--sans); letter-spacing: -.04em; margin: 0; }
.reps-card p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.45; max-width: 560px; }
.reps-card .row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.reps-card .row .btn { min-height: 46px; font-size: 16px; }
.reps-card.soon { border-color: var(--hair); }
.pips { display: inline-flex; gap: 5px; }
.pips i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 800 11px/1 var(--sans); font-style: normal; border: 1.5px solid var(--hair); color: var(--muted); }
.pips i.ok { background: var(--pip-ok-bg); border-color: var(--pip-ok-bd); color: var(--pip-ok-ink); }
.pips i.miss { border-color: var(--pip-miss-bd); color: var(--miss); background: var(--pip-miss-bg); }
.reps-list .st.miss { color: var(--miss); }
.reps-go { margin-top: 18px; }

/* ---------- account (js/account.js) ---------- */
.acct { max-width: 520px; }
.acct .wordmark { cursor: pointer; padding: 9px 0; margin: -9px 0; }
.acct-title { font: 900 clamp(34px, 8vw, 52px)/1 var(--sans); letter-spacing: -.045em; margin: 6px 0 10px; }
.acct-lede { color: var(--muted); font-size: 16px; line-height: 1.45; margin: 0 0 22px; }
.acct-h { font: 800 21px/1.15 var(--sans); margin: 30px 0 12px; }
.acct-h.danger { color: var(--danger); }
.acct-form { display: grid; gap: 14px; }
.acct-form label { display: grid; gap: 7px; font: 600 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--kick); }
.acct-form input { font: 500 17px/1.2 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); background: var(--card); border: 1.5px solid var(--hair); border-radius: 14px; padding: 14px 16px; min-height: 52px; width: 100%; }
.acct-form input:focus { outline: 3px solid var(--focus); outline-offset: 1px; }
.acct-form .hint { font: 500 13px/1.35 var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
.acct-form .btn { justify-self: start; }
.acct-form .btn:disabled { opacity: .55; cursor: default; }
.acct-msg { min-height: 1.3em; margin: 0; font-size: 15px; line-height: 1.4; color: var(--danger); }
.acct-msg.ok { color: var(--accent-text); }
.acct-form .acct-msg:empty { display: none; }
.acct-alt { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 18px; }
.linkbtn { font: 600 15px/1.3 var(--sans); color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; padding: 6px 0; }
.acct-card { background: var(--card); border: 1px solid var(--hair); border-radius: 20px; padding: 18px; display: grid; gap: 12px; margin: 6px 0 14px; }
.acct-card p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink2); }
.acct-card.note { background: var(--note-bg); border-color: var(--note-bd); }
.acct-card .linkbtn { justify-self: start; }
.acct-card .acct-msg:empty { display: none; }
.acct-who { display: flex; align-items: center; gap: 14px; }
.acct-who b { display: block; font: 800 18px/1.2 var(--sans); }
.acct-who span:not(.avatar) { display: block; color: var(--muted); font-size: 14px; margin-top: 2px; overflow-wrap: anywhere; }
.acct-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid var(--hair); padding-top: 12px; font-size: 15px; }
.avatar { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: var(--field); color: var(--lime); display: grid; place-items: center; font: 800 16px/1 var(--sans); letter-spacing: 0; }
.avatar.sm { width: 24px; height: 24px; font-size: 11px; margin: -4px 0; }
.acct-pill { cursor: pointer; text-transform: none; letter-spacing: .02em; }
.acct-out { margin-top: 26px; }
.btn.danger { background: #a4532c; color: #fff; }

/* ---------- the look setting (js/theme.js), on the account page and in a lesson's menu ---------- */
.looks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 560px) { .looks { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.look { display: grid; gap: 3px; text-align: left; padding: 10px 10px 12px; border-radius: 16px; background: var(--card); border: 1.5px solid var(--hair); color: var(--ink); }
.look[aria-checked="true"] { border-color: var(--choose, var(--ink)); box-shadow: 0 0 0 1px var(--choose, var(--ink)) inset; }
.look b { font: 800 15px/1.15 var(--sans); margin-top: 6px; }
.look small { font-size: 12.5px; line-height: 1.3; color: var(--muted); }
.look .sw { height: 40px; border-radius: 10px; position: relative; overflow: hidden; border: 1px solid rgba(0,0,0,.08); }
.look .sw i { position: absolute; left: 10px; right: 10px; bottom: 0; height: 22px; border-radius: 7px 7px 0 0; }
.look .sw i::after { content: ''; position: absolute; left: 50%; top: 7px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #d5e8a3; }
.look .sw[data-sw="signature"] { background: #f5f4f0; } .look .sw[data-sw="signature"] i { background: #171d1a; }
.look .sw[data-sw="graphite-day"] { background: #F1F2F3; } .look .sw[data-sw="graphite-day"] i { background: #16171A; }
.look .sw[data-sw="graphite-night"] { background: #0E0F11; } .look .sw[data-sw="graphite-night"] i { background: #16171A; box-shadow: 0 0 0 1px #2A2C31; }
.look .sw[data-sw="graphite-auto"] { background: linear-gradient(90deg, #F1F2F3 50%, #0E0F11 50%); } .look .sw[data-sw="graphite-auto"] i { background: #16171A; }
.sheet .looks { margin-top: 4px; }

/* ===================================================================================================================
   Graphite — Day and Night (Round 3 boards, 2026-10-17). Neutral grays, a charcoal field, lime kept for actions.
   Day: light page and cards, primary buttons ink. Night: dark page and surfaces, primary buttons lime.
   =================================================================================================================== */
:root[data-theme="graphite-day"] {
  --bg: #F1F2F3; --ink: #111214; --ink2: #3E4146; --muted: #5E6166; --dim: #7C8086; --hair: #DADCDF; --card: #FFFFFF;
  --field: #16171A; --field2: #1E1F23; --cream: #F1F2F3;
  --cream-rgb: 241, 242, 243; --veil-rgb: 22, 23, 26;
  --on-lime: #111214; --on-dark2: #B4B7BD; --on-dark3: #8C8F96;
  --kick: #5E6166; --accent-text: #55672B; --brand-iq: #8A8D93; --headline2: #9A9DA3; --focus: #111214;
  --danger: #A4532C; --miss: #A4532C; --note-bg: #EEF5DC; --note-bd: #CFDDA8;
  --btn-dark-bg: #16171A; --btn-dark-ink: #F1F2F3; --ready-bd: var(--hair);
  --pip-ok-bg: #EEF5DC; --pip-ok-bd: #8DAA45; --pip-ok-ink: #55672B; --pip-miss-bg: #FBEDE6; --pip-miss-bd: #D08F6A;
  --inspect-bg: #FFFFFF; --inspect-ink: #111214; --sheet-bg: #F1F2F3;
  --p-bg: var(--bg); --p-ink: #111214; --p-sub: #5E6166; --p-body: #5E6166; --p-meta: #5E6166; --p-accent: #55672B;
  --p-line: #DADCDF; --p-line2: #DADCDF; --p-dock-line: transparent;
  --p-track: #DADCDF; --p-fill: #111214; --p-timer: #DADCDF; --p-timer-fill: #111214;
  --p-choice: #FFFFFF; --p-show-me: #5E6166; --p-off: #8A8D93;
  --p-main-bg: #16171A; --p-main-ink: var(--lime); --p-btn-bg: #16171A; --p-btn-ink: #F1F2F3; --p-btn-icon: var(--lime); --p-pick-bg: #16171A; --p-pick-ink: #F1F2F3;
  --right-bg: #EEF5DC; --right-bd: #8DAA45; --right-ic: #55672B;
  --wrong-bg: #FBEDE6; --wrong-bd: #D08F6A; --wrong-ic: #A4532C;
  --mark-ok: #16171A; --mark-ok-ink: var(--lime); --mark-bad: #16171A; --mark-bad-ink: #D08F6A; --mark-info: #E3E5E8; --mark-info-ink: #111214;
  --headline-size: clamp(46px, 9vw, 78px);
  --tab-bg: rgba(255, 255, 255, .94); --tab-bd: #E2E4E7; --tab-shadow: 0 10px 30px rgba(17, 18, 20, .12); --tab-ink: #5E6166; --tab-on-bg: #16171A; --tab-on-ink: #F1F2F3; --tab-on-icon: var(--lime);
  --lift: 0 1px 2px rgba(17, 18, 20, .06); --card-lift: 0 1px 2px rgba(17, 18, 20, .05); --dark-lift: 0 12px 28px rgba(17, 18, 20, .14); --dark-edge: transparent;
  --ctl-shadow: 0 6px 18px rgba(17, 18, 20, .08); --choose: #111214;
}
:root[data-theme="graphite-night"] {
  --bg: #0E0F11; --ink: #F1F2F3; --ink2: #C9CBD0; --muted: #A3A6AD; --dim: #8C8F96; --hair: #2A2C31; --card: #18191C;
  --field: #16171A; --field2: #1E1F23; --cream: #F1F2F3;
  --cream-rgb: 241, 242, 243; --veil-rgb: 22, 23, 26;
  --on-lime: #111214; --on-dark2: #B4B7BD; --on-dark3: #8C8F96;
  --kick: #8C8F96; --accent-text: var(--lime); --brand-iq: #7C8086; --headline2: #6C7076; --focus: var(--lime);
  --danger: #D08F6A; --miss: #D08F6A; --note-bg: #1B2216; --note-bd: #33402A;
  --btn-dark-bg: var(--lime); --btn-dark-ink: #111214; --ready-bd: var(--hair);
  --pip-ok-bg: #1B2216; --pip-ok-bd: #9FC46A; --pip-ok-ink: #9FC46A; --pip-miss-bg: #2A1C16; --pip-miss-bd: #D08F6A;
  --inspect-bg: #18191C; --inspect-ink: #F1F2F3; --sheet-bg: #18191C;
  --p-bg: var(--bg); --p-ink: #F1F2F3; --p-sub: #A3A6AD; --p-body: #A3A6AD; --p-meta: #8C8F96; --p-accent: var(--lime);
  --p-line: #2A2C31; --p-line2: #2A2C31; --p-dock-line: transparent;
  --p-track: #2A2C31; --p-fill: var(--lime); --p-timer: #2A2C31; --p-timer-fill: rgba(213, 232, 163, .85);
  --p-choice: #18191C; --p-show-me: #A3A6AD; --p-off: #6C7076;
  --p-main-bg: var(--lime); --p-main-ink: #111214; --p-btn-bg: var(--lime); --p-btn-ink: #111214; --p-btn-icon: currentColor; --p-pick-bg: var(--lime); --p-pick-ink: #111214;
  --right-bg: #1B2216; --right-bd: #9FC46A; --right-ic: #9FC46A;
  --wrong-bg: #2A1C16; --wrong-bd: #D08F6A; --wrong-ic: #D08F6A;
  --mark-ok: #9FC46A; --mark-ok-ink: #111214; --mark-bad: #D08F6A; --mark-bad-ink: #111214; --mark-info: #2A2C31; --mark-info-ink: #F1F2F3;
  --tab-bg: rgba(24, 25, 28, .94); --tab-bd: #2A2C31; --tab-shadow: 0 10px 30px rgba(0, 0, 0, .45); --tab-ink: #8C8F96; --tab-on-bg: var(--lime); --tab-on-ink: #111214; --tab-on-icon: currentColor;
  --lift: none; --card-lift: none; --dark-lift: none; --dark-edge: #2A2C31;
  --ctl-shadow: 0 8px 22px rgba(0, 0, 0, .4); --choose: var(--lime);
}
[data-theme^="graphite"] .page { padding-bottom: calc(112px + var(--safe-b)); }
[data-theme^="graphite"] .pill { border-width: 1px; }
[data-theme^="graphite"] .hero-title { font-size: clamp(46px, 9vw, 78px); letter-spacing: -.045em; margin: 8px 0 16px; }
[data-theme^="graphite"] .hero-title span { display: block; }        /* "See it before / the snap.": a controlled break */
[data-theme^="graphite"] .subject-title, [data-theme^="graphite"] .acct-title { letter-spacing: -.045em; }
/* the account button: one round button, signed in or not */
.acct-btn { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--card); border: 1px solid var(--hair); color: var(--ink); box-shadow: var(--lift); font: 800 13px/1 var(--sans); letter-spacing: 0; transition: transform .15s; }
.acct-btn svg { width: 18px; height: 18px; }
.acct-btn:active { transform: scale(.94); }

/* the floating tab bar: a capsule; the selected tab is a pill that slides from the tab you came from */
[data-theme^="graphite"] .tabbar { left: 12px; right: 12px; bottom: calc(14px + var(--safe-b)); max-width: 440px; margin: 0 auto; height: 64px; display: block; padding: 6px; border-radius: 32px; background: var(--tab-bg); border: 1px solid var(--tab-bd); box-shadow: var(--tab-shadow); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
[data-theme^="graphite"] .tabbar nav { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; height: 100%; max-width: none; }
[data-theme^="graphite"] .tabbar .tab-pill { display: block; position: absolute; top: 0; bottom: 0; left: 0; width: calc((100% - 12px) / 4); border-radius: 26px; background: var(--tab-on-bg); transform: translateX(calc(var(--i, 0) * (100% + 4px))); transition: transform .32s cubic-bezier(.3, .7, .2, 1); }
[data-theme^="graphite"] .tabbar button { position: relative; z-index: 1; min-width: 0; height: 100%; padding: 0; border-radius: 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font: 600 11px/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--tab-ink); transition: color .25s, transform .15s; }
[data-theme^="graphite"] .tabbar button:active { transform: scale(.95); }
[data-theme^="graphite"] .tabbar button i { display: none; }
[data-theme^="graphite"] .tabbar .tab-ico { display: block; width: 22px; height: 22px; transition: color .25s; }
[data-theme^="graphite"] .tabbar button[aria-current="true"] { color: var(--tab-on-ink); font-weight: 700; }
[data-theme^="graphite"] .tabbar button[aria-current="true"] .tab-ico { color: var(--tab-on-icon); }
[data-theme="graphite-night"] .tabbar button[aria-current="true"] { font-weight: 800; }
[data-theme="graphite-night"] .tabbar button[aria-current="true"] .tab-ico { stroke-width: 1.9; }

/* Today: the picture on top of the hero card, one Start button, then a compact reps card */
[data-theme^="graphite"] .hero-card { border-radius: 24px; box-shadow: var(--dark-lift); border: 1px solid var(--dark-edge); }
[data-theme^="graphite"] .hero-card .mini { order: -1; height: clamp(196px, 34vw, 330px); }
[data-theme^="graphite"] .hero-card .txt { padding: 16px 18px 0; }
[data-theme^="graphite"] .hero-card .kick { font-size: 10.5px; }
[data-theme^="graphite"] .hero-card h2 { font-size: clamp(28px, 5vw, 38px); margin: 6px 0; }
[data-theme^="graphite"] .hero-card p { line-height: 1.4; }
[data-theme^="graphite"] .hero-card .row { padding: 16px 18px 18px; gap: 14px; }
[data-theme^="graphite"] .hero-card .row .btn { min-height: 48px; padding: 0 24px; font-size: 16px; gap: 8px; }
.btn .play { width: 13px; height: 13px; }
.hero-card .meta { font: 600 10.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark3); }
[data-theme^="graphite"] .reps-card { border-width: 1px; border-radius: 22px; padding: 16px 18px; gap: 6px; box-shadow: var(--card-lift); margin-top: 12px; }
[data-theme^="graphite"] .reps-card .kick { font-size: 10.5px; }
[data-theme^="graphite"] .reps-card h3 { font: 800 19px/1.15 var(--sans); letter-spacing: -.03em; }
[data-theme^="graphite"] .reps-card p { font-size: 13.5px; }
[data-theme^="graphite"] .reps-card .row { margin-top: 8px; }
[data-theme^="graphite"] .reps-card .row .btn { min-height: 42px; padding: 0 20px; font-size: 15px; }
[data-theme^="graphite"] .pips i { width: 18px; height: 18px; font-size: 9.5px; }

/* Learn: the paths scroll sideways on a phone; subjects are compact cards with a progress line */
[data-theme^="graphite"] .section-h h2 { font-size: 21px; }
[data-theme^="graphite"] .section-h { margin: 22px 0 12px; }
[data-theme^="graphite"] .path-card { border-radius: 22px; padding: 16px; gap: 6px; border: 1px solid var(--dark-edge); }   /* no shadow: the phone scroller would clip it */
[data-theme^="graphite"] .path-card h3 { font-size: 30px; }
[data-theme^="graphite"] .path-card p { font-size: 13.5px; }
[data-theme^="graphite"] .path-card .state { font-size: 10px; }
@media (max-width: 760px) {
  [data-theme^="graphite"] .path-cards { display: flex; gap: 10px; overflow-x: auto; margin: 0 -18px; padding: 0 18px 12px; scroll-snap-type: x mandatory; scroll-padding: 0 18px; scrollbar-width: none; }
  [data-theme^="graphite"] .path-cards::-webkit-scrollbar { display: none; }
  [data-theme^="graphite"] .path-card { flex: 0 0 250px; min-height: 190px; scroll-snap-align: start; }
}
[data-theme^="graphite"] .subject { border-width: 1px; border-radius: 18px; padding: 14px; gap: 5px; min-height: 116px; }
[data-theme^="graphite"] .subject .kick { font-size: 9px; letter-spacing: .12em; }
[data-theme^="graphite"] .subject h3 { font-size: 16px; letter-spacing: -.02em; }
[data-theme^="graphite"] .subject .state { display: none; }
[data-theme^="graphite"] .subject .prog { display: flex; align-items: center; gap: 8px; margin-top: auto; font: 600 9.5px/1 var(--mono); color: var(--dim); }
.subject .prog .track { flex: 1; height: 2px; border-radius: 1px; background: var(--hair); overflow: hidden; }
.subject .prog .track i { display: block; height: 100%; background: var(--ink); }
@media (max-width: 600px) {
  [data-theme^="graphite"] .subjects { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  [data-theme^="graphite"] .subject p { display: none; }
}
[data-theme^="graphite"] .lesson-card { border: 1px solid var(--dark-edge); box-shadow: var(--card-lift); }
[data-theme^="graphite"] .tool { border-width: 1px; box-shadow: var(--card-lift); }

/* the lesson player: the field is an inset rounded card; the words, the answers and one floating control below it */
[data-theme^="graphite"] .player .bar { padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 10px; }
[data-theme^="graphite"] .player .bar .iconbtn { width: 40px; height: 40px; border: 1px solid var(--hair); background: var(--card); color: var(--ink); box-shadow: var(--lift); }
[data-theme^="graphite"] .player .bar .iconbtn svg { width: 16px; height: 16px; }
[data-theme^="graphite"] .segs { padding: 0 14px; }
[data-theme^="graphite"] .seg-name { display: block; padding: 7px 14px 10px; font: 600 9.5px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--p-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-theme^="graphite"] .seg-name:empty { display: none; }
[data-theme^="graphite"] .player .stage { margin: 0 10px; border-radius: 22px; overflow: hidden; box-shadow: var(--dark-lift); }
[data-theme^="graphite"] .player .stage::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1px solid var(--dark-edge); pointer-events: none; z-index: 5; }
[data-theme^="graphite"] .dock { background: transparent; border-top: 0; padding: 18px 20px calc(18px + var(--safe-b)); gap: 14px; }
[data-theme^="graphite"] .say { font-size: 20px; line-height: 1.3; }
[data-theme^="graphite"] .player .actions { flex: 1 0 auto; display: flex; flex-direction: column; gap: 12px; }
[data-theme^="graphite"] .controls { margin: auto auto 4px; display: inline-flex; gap: 10px; padding: 4px 8px; border-radius: 32px; background: var(--card); border: 1px solid var(--hair); box-shadow: var(--ctl-shadow); }
[data-theme^="graphite"] .controls .iconbtn { width: 46px; height: 46px; border: 0; color: var(--ink); transition: transform .15s; }
[data-theme^="graphite"] .controls .main { width: 54px; height: 54px; transition: transform .15s; }
[data-theme^="graphite"] .controls .main svg { width: 18px; height: 18px; }
[data-theme^="graphite"] .controls button:active { transform: scale(.92); }
[data-theme^="graphite"] .prompt { font-size: 18px; letter-spacing: -.015em; }
[data-theme^="graphite"] .answered .prompt { font: 600 14px/1.35 var(--sans); color: var(--p-sub); padding-left: 2px; }
[data-theme^="graphite"] .answered .prompt small { display: none; }
[data-theme^="graphite"] .choice { min-height: 56px; font: 700 15px/1.2 var(--sans); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; }
[data-theme^="graphite"] .choice.right, [data-theme^="graphite"] .choice.wrong { color: var(--p-ink); }
[data-theme^="graphite"] .choice.right { font-weight: 800; }
[data-theme^="graphite"] .choice .ic { display: block; flex: 0 0 auto; width: 16px; height: 16px; }
[data-theme^="graphite"] .choice.right .ic { color: var(--right-ic); }
[data-theme^="graphite"] .choice.wrong .ic { color: var(--wrong-ic); width: 14px; height: 14px; }
[data-theme^="graphite"] .choice:disabled:not(.right):not(.wrong) { color: var(--p-off); cursor: default; }
[data-theme^="graphite"] .choice.show-me { border-style: solid; color: var(--p-show-me); }
[data-theme="graphite-night"] .choice.show-me { border-color: #3A3D43; }
[data-theme^="graphite"] .verdict { margin-top: 4px; }
[data-theme^="graphite"] .verdict .mark { width: 30px; height: 30px; }
[data-theme^="graphite"] .verdict .mark svg { width: 15px; height: 15px; }
[data-theme^="graphite"] .verdict h3 { font-size: 18px; letter-spacing: -.02em; }
[data-theme^="graphite"] .verdict p { font-size: 14px; }
[data-theme^="graphite"] .row-actions { margin-top: auto; }
[data-theme^="graphite"] .player .row-actions .btn { min-height: 52px; border-radius: 26px; font-size: 16px; }
[data-theme^="graphite"] .player .btn .go { width: 16px; height: 16px; color: var(--p-btn-icon); }
[data-theme^="graphite"] .player .btn.line, [data-theme^="graphite"] .player .row-actions .btn.line { background: var(--card) !important; color: var(--ink) !important; border: 1px solid var(--hair) !important; font-size: 15px; font-weight: 700; }
[data-theme^="graphite"] .player .btn { box-shadow: none; transition: transform .15s; }
[data-theme^="graphite"] .player .btn:active { transform: scale(.98); }
[data-theme="graphite-day"] .player .row-actions .btn:not(.line) { box-shadow: 0 8px 20px rgba(17, 18, 20, .16); }
[data-theme^="graphite"] .goahead h3 { font-size: 20px; }
[data-theme^="graphite"] .player .dock .kick.light, [data-theme^="graphite"] .related .kick.light { color: var(--p-accent); font-size: 10.5px; }
[data-theme^="graphite"] .related .rel { border-width: 1px; background: var(--card); }
[data-theme^="graphite"] .picker button { border-width: 1px; background: var(--card); }
[data-theme^="graphite"] .picker button[aria-pressed="true"] { background: var(--p-pick-bg); }
[data-theme^="graphite"] .inspect { border: 1px solid var(--hair); }
[data-theme^="graphite"] .sheet { border-top: 1px solid var(--hair); }
@media (min-width: 900px) {
  [data-theme^="graphite"] .player .stage { margin: 0 18px; }
  [data-theme^="graphite"] .player .dock { padding: 16px 26px 22px; }
  [data-theme^="graphite"] .say { font-size: 22px; }
  [data-theme^="graphite"] .player .choices:not(.wide) { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }   /* the answers stay above the verdict: one row */
  [data-theme^="graphite"] .player .row-actions { justify-content: center; }
  [data-theme^="graphite"] .player .row-actions .btn { flex: 0 1 360px; }
}
@media (max-width: 899px) {
  [data-theme^="graphite"] .player.holding { grid-template-rows: auto auto clamp(230px, 47vh, 560px) minmax(0, 1fr); }  /* a question: the field gives the answers room */
}
[data-theme^="graphite"] .player { transition: grid-template-rows .3s ease; }
@media (prefers-reduced-motion: reduce) { [data-theme^="graphite"] .tabbar .tab-pill, [data-theme^="graphite"] .player, [data-theme^="graphite"] .tabbar button { transition: none; } }

/* ---------- the words next to the play (Sage, Nov 3 2026: "keep everything in the same general space") ----------
   js/words.js puts the player in one of three layouts. The field lives in .pitch; the words (with the bar that fills
   until the play goes) sit in the field's own panel on a phone (strip), on the field beside the players they are about
   on a wide screen (card), or with the buttons on a phone turned sideways (side). The dock keeps the buttons and the
   questions. */
.stage .pitch { position: absolute; inset: 0; }
.words { display: flex; flex-direction: column; gap: 8px; }
.words .say { min-height: 0; }
.player.holding .words { display: none; }
/* strip: the words above the picture, inside the same dark panel; the panel keeps its height between beats */
.player.words-strip .stage { display: flex; flex-direction: column; }
.player.words-strip .stage .pitch { position: relative; inset: auto; flex: 1 1 auto; min-height: 0; }
.player.words-strip .words { flex: 0 0 auto; min-height: 120px; padding: 14px 16px 12px; background: var(--field); color: var(--cream); border-bottom: 1px solid rgba(var(--cream-rgb), .1); }
.player.words-strip .say { font-size: 17px; line-height: 1.32; color: var(--cream); }
.player.words-strip .sub { margin: 0; font-size: 14px; color: rgba(var(--cream-rgb), .72); }
.player.words-strip .timer { margin-top: auto; background: rgba(var(--cream-rgb), .14); }
.player.words-strip .timer i { background: rgba(var(--cream-rgb), .85); }
.player.words-strip .words.empty .timer { visibility: hidden; }
.player.words-strip, .player.words-strip.is-done, .player.words-strip.free, .player.words-strip.holding { grid-template-rows: auto auto minmax(170px, 1fr) auto; }
.player.words-strip .dock { max-height: 58vh; overflow-y: auto; }
/* card: a card on the field, placed by js/words.js; it fades while a play passes under it */
.player.words-card .words { position: absolute; z-index: 4; left: 12px; top: 12px; width: clamp(280px, 30%, 400px); padding: 15px 17px 13px; border-radius: 14px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .4); transition: opacity .3s; }
.player.words-card .words.empty { opacity: 0; pointer-events: none; }
.player.words-card .words.covered { opacity: .12; }
.player.words-card .say { font-size: 19px; line-height: 1.32; }
.player.words-card .sub { margin: 0; font-size: 14.5px; }
.player.words-card, .player.words-card.is-done, .player.words-card.free, .player.words-card.holding { grid-template-rows: auto auto minmax(260px, 1fr) auto; }
.player.words-card .dock { max-height: 46vh; overflow-y: auto; }
@media (prefers-reduced-motion: reduce) { .player.words-card .words { transition: none; } }