— reset the button defaults .mode-popover-item otherwise doesn't need to worry about (a/div don't have them), then dim it the same way -disabled does, but with a pointer cursor instead of not-allowed: clicking it DOES do something (opens the info panel below), it just doesn't start a mode. */ button.mode-popover-item { width: 100%; background: none; font: inherit; text-align: left; cursor: pointer; } .mode-popover-item-locked { opacity: 0.7; } .mode-popover-item-locked:hover { opacity: 1; border-color: var(--pencil); background: var(--cream); } /* .mode-popover-item-paywalled removed — Drill/Puzzles/Time Trial are no longer gated behind an account (see js/mode-picker.js), so no tile uses this class anymore. Only Hustle still uses -locked, above, for its "not a mode yet, but not inert either" dashed/dimmed look. */ /* Hustle's info panel (js/mode-picker.js drawInfo()) — replaces the mode list inside the SAME popover element rather than opening a second overlay; .settings-popover (the shared shell) already supplies the border/background/radius/padding this sits inside. */ .mode-popover-info { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .mode-popover-info-back { background: none; border: none; padding: 0; margin-bottom: 4px; cursor: pointer; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .mode-popover-info-back:hover { color: var(--text-body); } .mode-popover-info-icon { font-size: 1.6rem; line-height: 1; } .mode-popover-info-title { margin: 0; font-size: 1rem; } .mode-popover-info-body { margin: 0; font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; } /* ---------------- PGN search results: card + matching variations ---------------- */ /* .pgn-match-group wraps a normal .opening-card with a small indented sub-list of that course's specific lines that matched the pasted PGN, each linking straight into the trainer at that exact line (train.html?course=...&line=...). The card itself is still a plain , so this list sits as a sibling underneath rather than nesting another link inside it. */ .pgn-match-group { display: flex; flex-direction: column; } .pgn-match-lines { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0 24px; padding-left: 14px; border-left: 2px solid var(--cream-line); } .pgn-match-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 12px; background: var(--cream); border-radius: 12px; text-decoration: none; color: var(--text-body); transition: background 0.12s var(--ease), color 0.12s var(--ease); } .pgn-match-line:hover { background: var(--paper); color: var(--pencil-dark); } .pgn-match-line-name { font-size: 0.86rem; font-weight: 600; } .pgn-match-line-len { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; } @media (max-width: 640px) { .pgn-match-lines { margin-left: 12px; padding-left: 10px; } .pgn-match-line { flex-direction: column; align-items: flex-start; gap: 2px; } } @media (max-width: 640px) { /* On narrow screens the hero title and subtitle no longer force a single line — they wrap naturally within the container instead of overflowing off the edge of the viewport. */ h1 { font-size: clamp(1.7rem, 8vw, 2.3rem); } .dashboard-top-centered .hero-sub { font-size: 0.88rem; white-space: normal; max-width: 34ch; } } /* ---------------- Opening list controls (search / sort / filter) ---------------- */ .opening-controls { position: relative; padding: 4px 0 6px; } .opening-toolbar { display: flex; align-items: center; gap: 10px; } .filter-btn { flex: none; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 14px; border: 1.5px solid var(--cream-line); background: var(--paper); color: var(--text-body); cursor: pointer; } .filter-btn svg { width: 18px; height: 18px; } .filter-btn:hover, .filter-btn[aria-expanded="true"] { border-color: var(--pencil); color: var(--pencil-dark); } .opening-search { flex: 1; min-width: 0; } .opening-search input { width: 100%; padding: 11px 14px; border-radius: 14px; border: 1.5px solid var(--cream-line); background: var(--paper); font-family: var(--font-body); font-size: 0.95rem; color: var(--text-body); } .opening-search input:focus { outline: 2px solid var(--pencil); outline-offset: 1px; border-color: var(--pencil); } .opening-count { flex: none; display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-muted); white-space: nowrap; padding: 0 4px; } .opening-count-icon { width: 18px; height: 18px; border-radius: 5px; overflow: hidden; } .filter-panel[hidden] { display: none; } .filter-panel { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; display: flex; flex-direction: column; gap: 16px; min-width: 240px; background: var(--paper); border: 1.5px solid var(--cream-line); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 16px 18px; } .filter-panel-block { display: flex; flex-direction: column; gap: 8px; } .filter-panel-label { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .filter-radio, .filter-check { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 0.9rem; color: var(--text-body); cursor: pointer; } .filter-radio input, .filter-check input { accent-color: var(--pencil); width: 15px; height: 15px; cursor: pointer; } /* ---------------- PGN search (paste a PGN, find the matching opening) ---------------- */ .pgn-btn { flex: none; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 14px; border: 1.5px solid var(--cream-line); background: var(--paper); color: var(--text-body); cursor: pointer; } .pgn-btn svg { width: 18px; height: 18px; } .pgn-btn:hover, .pgn-btn[aria-expanded="true"] { border-color: var(--pencil); color: var(--pencil-dark); } .pgn-panel[hidden] { display: none; } .pgn-panel { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; display: flex; flex-direction: column; gap: 10px; width: min(420px, 92vw); background: var(--paper); border: 1.5px solid var(--cream-line); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 16px 18px; } .pgn-panel-label { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .pgn-panel textarea { width: 100%; min-height: 76px; resize: vertical; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--cream-line); background: var(--cream); font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-body); line-height: 1.5; } .pgn-panel textarea:focus { outline: 2px solid var(--pencil); outline-offset: 1px; border-color: var(--pencil); } .pgn-panel-actions { display: flex; gap: 8px; } .pgn-panel-actions .btn { flex: none; } .pgn-status { font-family: var(--font-body); font-size: 0.85rem; color: var(--text-muted); min-height: 1.2em; } .pgn-status.pgn-status-active { color: var(--pencil-dark); font-weight: 600; } @media (max-width: 640px) { .pgn-panel { left: 0; right: 0; width: auto; } } @media (max-width: 640px) { .opening-card { grid-template-columns: 1fr; } .opening-card-board { max-width: 220px; margin: 0 auto; } .filter-panel { left: 0; right: 0; min-width: 0; } } /* ---------------- Board settings popover (color + piece style picker) ---------------- */ .setting-group { display: flex; flex-direction: column; gap: 8px; } .setting-group + .setting-group { margin-top: 16px; } .setting-label { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); } .swatch-row { display: flex; gap: 8px; } .swatch { width: 28px; height: 28px; border-radius: 10px; padding: 0; cursor: pointer; border: 2px solid transparent; overflow: hidden; position: relative; background: linear-gradient(135deg, var(--swatch-light) 50%, var(--swatch-dark) 50%); } .swatch:hover { transform: translateY(-1px); } .swatch-active { border-color: var(--navy-900); box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--navy-900); } .piece-set-row { display: flex; gap: 8px; flex-wrap: wrap; } .piece-set-btn { display: flex; align-items: center; gap: 7px; font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; padding: 5px 12px 5px 6px; border-radius: 999px; border: 1.5px solid var(--cream-line); background: var(--paper); cursor: pointer; color: var(--text-body); } .piece-set-thumb { width: 26px; height: 26px; display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2)); } .piece-set-active { border-color: var(--navy-900); background: var(--navy-900); color: var(--cream); } /* ---------------- Trainer ---------------- */ /* "Fit to screen," every screen size — not just mobile. The training screen should never need page-level scrolling: board, chat, and controls always fit in whatever height is actually available, whether that's a phone in portrait, a tablet, a short laptop lid, or a tall desktop monitor. This used to only be true below 640px (see the git history / PROGRESS.md — Sessions 19-22 built a genuinely good version of this, just scoped to one breakpoint); everything in this base rule is that same idea promoted to apply unconditionally, with the 860px/640px/560px tiers below now layering PURELY on top of it — simplifying what the layout looks like at each width (single column vs two, icon-only nav, hidden labels, etc.) rather than each one having to separately re-implement "and also don't scroll." .container becomes the outer flex column (viewport height, header's natural size on top); .trainer-shell fills whatever's left (flex: 1 1 auto + min-height: 0, the standard "let a flex child actually shrink below its content size" pairing); .trainer-layout fills what's left of THAT. The board's actual pixel size still isn't guessed here via vh/vw math — js/train.js's initBoardFit measures .t-board's real rendered box (whatever height the layout below computed it down to) and feeds that back as --board-size, for the same reason the old mobile-only version did: a fixed guess necessarily either underfills most screens or overflows short ones, and that's just as true on a laptop as it is on a phone. */ body.trainer-page .container { height: calc(100vh - var(--banner-height)); height: calc(100dvh - var(--banner-height)); display: flex; flex-direction: column; overflow: hidden; } /* flex: 0 0 auto (no grow, no shrink) so the header always keeps its natural height — .trainer-shell right below is the one flex child meant to absorb all the give (grow OR shrink); without this, the header would share equally in any shrinking too (flex's default flex-shrink is 1 on every item), which could squeeze it on a short/awkward viewport instead of leaving the header alone and letting the training screen's own internal layout (and, as a last resort, the chat log's internal scroll) absorb the difference. */ body.trainer-page .site-header { flex: 0 0 auto; } /* Third flex child of .trainer-page .container, alongside the header and .trainer-shell (see the big comment above this block) -- Phase 6 added this between them for train.html's guest banner. flex: 0 0 auto keeps it at its natural height same as the header, rather than competing for shrink space with .trainer-shell on a tight viewport. */ .guest-banner { flex: 0 0 auto; padding: 6px 12px; margin: 0 0 8px; border-radius: 12px; background: var(--cream); border: 1px dashed var(--pencil); font-size: 0.8rem; line-height: 1.3; color: var(--text-body); text-align: center; } .guest-banner a { color: var(--navy-900); font-weight: 600; } .guest-banner[hidden] { display: none; } body.trainer-page .trainer-shell { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 16px 0; } body.trainer-page .trainer-head, body.trainer-page .session-bar-track { flex: 0 0 auto; } body.trainer-page .trainer-layout { flex: 1 1 auto; min-height: 0; } /* Both the board and the chat panel should fill the full height of whatever cell/row the layout below gives them, rather than shrinking to their own natural content size — that's what lets the board's real measured box (see initBoardFit) and the chat log's flexible 1fr row (see the two-column rule below) mean anything. Everything else (.t-pill, .t-controls) keeps sizing to its own content, which is why .trainer-layout's own align-items:start below is left alone rather than changed wholesale. */ body.trainer-page .t-board, body.trainer-page .t-chat { align-self: stretch; min-height: 0; } .trainer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; flex-wrap: wrap; gap: 8px;} .trainer-head-left { display: flex; align-items: center; gap: 10px; min-width: 0; } .trainer-head h1 { font-size: 1.6rem; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; } /* Current variation's own name, next to the course title — smaller, monospace (vs. the h1's serif display font), and colored with this course's own accent (--course-accent, set per-course in js/train.js) rather than the navy used for headings everywhere else, so it reads as "which one, specifically" rather than a second title. Updated every time runQueue() loads a new line, including on segment-bar jumps (Session 31) and Prev/Next between lines. Horizontally scrollable rather than ellipsis-truncated: long names (e.g. "Classical Variation, Giuoco Pianissimo, Main Line") still get clipped to max-width so they don't blow out the header layout, but the trainee can scroll sideways within that fixed-width box to read the rest instead of it being cut off with "..." and unreadable. padding-bottom reserves real room below the text baseline for the scrollbar track (see ::-webkit-scrollbar below), well clear of the text descenders. That padding does grow this item's own box, though — and .trainer-head-left centers its items (align-items: center), so without correcting for it the extra height pushes the *text* upward as the taller box gets re-centered in the row (this was reported and is a real bug, not a rendering quirk to work around visually). The margin-bottom below is the fix: an equal-and-opposite negative value, which cancels padding-bottom's contribution to the box's margin-box size (what the flex row actually centers against) while leaving the padding itself — and the scrollbar track that lives in it — rendered exactly as before. Net effect: the row centers this item as if it were still its original, unpadded height, so the text stays glued to its original position, and only the scrollbar strip extends past the box's nominal edge underneath it. Keep these two values equal-and-opposite (currently 10px / -10px) if either one is ever changed — that's what keeps the text from drifting again. */ .line-name-badge { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 600; color: var(--course-accent, var(--pencil-dark)); overflow-x: auto; overflow-y: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: thin; flex: 0 1 auto; min-width: 0; max-width: 45%; padding-bottom: 10px; margin-bottom: -10px; } .line-name-badge::-webkit-scrollbar { height: 2.5px; } .line-name-badge::-webkit-scrollbar-track { background: transparent; } .line-name-badge::-webkit-scrollbar-thumb { background: var(--cream-line); border-radius: 4px; } /* Prev/next VARIATION (jumps a whole line in the queue) — distinct from .nav-arrow-btn below, which steps through MOVE history within the current line. Small and round like .back-arrow, just sized down to sit inline next to the variation-name badge rather than as its own full control row. */ .variation-nav { display: flex; gap: 4px; flex: 0 0 auto; } .variation-nav-btn { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; padding: 0; font-size: 1rem; line-height: 1; color: var(--navy-900); background: var(--paper); border: 1.5px solid var(--cream-line); cursor: pointer; transition: border-color 0.15s var(--ease), background 0.15s var(--ease); } .variation-nav-btn:hover:not(:disabled) { border-color: var(--pencil); background: var(--cream); } .variation-nav-btn:active:not(:disabled) { transform: scale(0.95); } .variation-nav-btn:disabled { opacity: 0.35; cursor: default; } .session-progress { font-family: var(--font-mono); color: var(--text-muted); font-size: 0.85rem; flex: 0 0 auto; } /* Back arrow: plain, unobtrusive, same row as the course title and "Line X of Y" — the trainer screen's only way back once the site header is hidden on phones (see the 640px block below), and just a quick shortcut everywhere else. */ .back-arrow { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; text-decoration: none; font-size: 1.2rem; color: var(--navy-900); background: var(--paper); border: 1.5px solid var(--cream-line); transition: border-color 0.15s var(--ease), background 0.15s var(--ease); } .back-arrow:hover { border-color: var(--pencil); background: var(--cream); } /* Per-line session bar (Session 31): one clickable segment per variation in this notebook, replacing the old single continuous fill. Colors mirror the exact vocabulary already used on the opening-list cards (js/opening-list.js): orange = practiced/ "learned", purple = mastered. The current segment overrides both with blue — it's meant to answer "where am I", not "have I learned this one", so it deliberately doesn't show learned/mastered status while it's the active one. For courses with a lot of lines (the Sicilian notebook has 250+), segments can get down to a few px wide each — `overflow-x: auto` lets the strip scroll horizontally rather than becoming unreadable or forcing the whole page to reflow. Segments are still individually clickable/hoverable at that width; there's no grouping/pagination, by design, per the original request ("divided to the number of variations that opening has"). */ .session-bar-track { display: flex; gap: 2px; height: 8px; margin-bottom: 14px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; /* the strip is a glanceable/clickable indicator, not a scroll area meant to show a visible scrollbar */ } .session-bar-track::-webkit-scrollbar { display: none; } .session-seg { flex: 1 1 4px; min-width: 3px; height: 100%; border-radius: 5px; border: none; padding: 0; margin: 0; cursor: pointer; background: var(--cream-line); transition: transform 0.1s var(--ease), background 0.15s var(--ease); } .session-seg:hover, .session-seg:focus-visible { transform: scaleY(1.5); outline: none; } .session-seg-learned { background: var(--pencil); } .session-seg-mastered { background: var(--violet); } .session-seg-current { background: var(--current-blue); cursor: default; } .session-seg-current:hover { transform: none; } /* Trainer layout, desktop: named grid areas so the board can stay a single tall block on the left while everything else — chat, the "discovered" pill, the controls cluster, and the settings popover — stacks in reading order on the right. See the mobile override below for how the SAME children get rearranged (chat above the board, controls collapsed into one row underneath it) purely via CSS, no DOM/JS changes needed. */ .trainer-layout { display: grid; grid-template-columns: minmax(260px, 560px) 1fr; /* The chat row is the one flexible track (1fr) — it absorbs whatever vertical space is left after the pill/controls rows take their own natural content height, so the whole right-hand column (and therefore the "board" cell, which spans all three of these rows) ends up matching whatever the actual viewport allows rather than growing past it. .chat-log then fills that row itself (see its own flex:1 1 auto; min-height:0 below) and only scrolls internally if a conversation genuinely doesn't fit, instead of ever pushing the page into needing to scroll. There used to be a 4th row here for the Settings/Mode popover (.t-settings) — removed: that popover is now `position: fixed` (see .settings-popover below), floating above whichever toolbar button opened it instead of occupying its own row and pushing the board/chat around every time it opened. */ grid-template-rows: 1fr auto auto; column-gap: 36px; row-gap: 14px; align-items: start; grid-template-areas: "board chat" "board pill" "board controls"; } .t-chat { grid-area: chat; } .t-board { grid-area: board; } .t-pill { grid-area: pill; } .t-controls { grid-area: controls; } /* Same `[hidden]` vs. bare-`display` gotcha as `.course-full-list` above, caught by auditing for the same pattern rather than a separate report — `.trainer-layout` sets `display: grid` (and, on narrower breakpoints below, `display: flex`) unconditionally at several different specificities, any of which would silently beat the browser's default `[hidden] { display: none }`. Only used by js/timetrial.js right now (`data-timetrial-play` starts `hidden` in timetrial.html and gets toggled with the preset picker) — `!important` here, unlike `.course-full-list[hidden]` above, because it needs to beat display rules at more than one specificity across the mobile/landscape breakpoints further down this file, not just the one unconditional rule right above it. */ .trainer-layout[hidden] { display: none !important; } /* Fluid sizing: the real, authoritative size comes from --board-size, set by js/train.js's initBoardFit to the actual measured leftover space in .t-board — same reasoning as the (formerly mobile-only) fallback below: a fixed vw/vh formula can't know how much room the header/chat/controls/current viewport HEIGHT actually left, so it either underfills or overflows depending on the screen. The min(560px, 92vw, 78vh) is only the same-paint fallback for the instant before that JS runs (or if it never runs at all). */ .board-wrap { width: 100%; max-width: var(--board-size, min(560px, 92vw, 78vh)); max-height: 100%; margin: 0 auto; } .board-grid { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); width: 100%; aspect-ratio: 1; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lift); border: 5px solid var(--navy-900); position: relative; /* anchors .board-arrow-overlay below */ } .board-square { display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; user-select: none; touch-action: none; /* let JS own the gesture entirely — stops mobile browsers from scrolling/zooming mid-drag */ } .board-square.light { background: var(--board-light); } .board-square.dark { background: var(--board-dark); } /* Selected square — outline plus a full-square tint (::before, so it paints under the piece and the piece art stays fully visible on top, same technique as .hint-square below). Previously outline only, which read as just an outline box rather than a highlighted square; this keeps the outline as a crisp edge and adds the fill on top of it, same accent tone the legal-target dot and drag-hover fill already use, so a selected square doesn't introduce a new color the board didn't already have elsewhere. */ .board-square.selected { outline: 3px solid var(--pencil); outline-offset: -3px; } .board-square.selected::before { content: ""; position: absolute; inset: 0; background: rgba(226, 145, 76, 0.35); pointer-events: none; } .board-square.legal-target::after { content: ""; position: absolute; width: 26%; height: 26%; border-radius: 50%; background: rgba(226, 145, 76, 0.55); } /* Hovering a legal square while carrying a piece (js/board.js onDragMove) — a stronger highlight than the resting legal-target dot so the drop target is obvious mid-drag. */ .board-square.drag-hover { outline: 3px solid var(--pencil); outline-offset: -3px; } .board-square.drag-hover::after { width: 100%; height: 100%; border-radius: 0; background: rgba(226, 145, 76, 0.28); } /* "Hint" toolbar button (js/train.js) highlights the square of the piece that needs to move next, rather than repeating the hint text in chat (which was already shown as the pre-move prompt, or reachable via the coach's explanation on a wrong guess — restating it in a fresh bubble on click added nothing). Set via boardController.showHint(square) / cleared via clearHint() (js/board.js) — persists across re-renders until the trainee's next move (board.update()) clears it, unlike the brief auto-expiring .flash-correct/.flash-wrong below. The tint is a ::before (painted before the piece in DOM order) so the piece art stays fully visible on top of it. */ .board-square.hint-square { outline: 3px solid var(--current-blue); outline-offset: -3px; } .board-square.hint-square::before { content: ""; position: absolute; inset: 0; background: rgba(63, 125, 201, 0.38); pointer-events: none; } /* "Solution" toolbar button (js/train.js) — shown after Hint's already been clicked once for the current move. One SVG, rebuilt on every board render() (js/board.js's renderArrowOverlay) and appended last so it paints above every square/piece. `pointer-events: none` so it never intercepts clicks meant for the square underneath — you can still click through the arrow to make the move it's pointing at. */ .board-arrow-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; } /* Pieces are real SVG artwork (assets/pieces//

.svg), sized as
   a percentage of the square so the whole board scales cleanly at any
   viewport width — no fixed px/rem sizing to fight with. */
.board-square .piece {
  width: 82%; height: 82%; object-fit: contain; pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25));
}
/* The piece currently being carried (js/board.js `drag`) fades out on its
   origin square so the floating ghost reads as "picked up," not
   duplicated. The ghost itself (.piece-drag-ghost) is a separate 
   appended straight to  so it isn't clipped by the board and can
   freely follow the pointer past the board's own edges. */
.piece-lifted { opacity: 0.25; }
.piece-drag-ghost {
  position: fixed; z-index: 1000; pointer-events: none;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4));
  transform: scale(1.08);
}
.board-dragging, .board-dragging .board-square { cursor: grabbing; }
.flash-correct { background: #cbe8d7 !important; }
.flash-wrong { background: #f3c9c5 !important; }
/* Last-move highlight: both the from AND to squares of whichever move
   produced the position currently on screen — set via js/board.js's
   lastMoveFrom/lastMoveTo, fed by every boardController.update() call
   (js/trainer.js live play, js/train.js's Prev/Next history nav,
   js/puzzles.js's "correct" reveal). Deliberately background-image (not
   the ::before overlay .hint-square uses) layered on top of the plain
   .light/.dark background-color set above — so it can never fight the
   hint-square tint for the same ::before pseudo-element on the rare
   move where both would apply, and so it paints BELOW the piece 
   in stacking order without needing z-index (img is a later sibling in
   DOM order, not this element's own ::before/::after). Color comes from
   --last-move-tint (defined in :root above), not a literal rgba() here,
   because js/board-themes.js overrides that one variable to a warm
   amber when the "Forest Green" board theme is active — the default
   ink-green tint nearly disappears against that theme's own green
   squares. Every other board theme just uses the default green. */
.board-square.last-move { background-image: linear-gradient(var(--last-move-tint), var(--last-move-tint)); }

/* Underpromotion picker — a 2x2 grid of piece choices that replaces
   a promotion target square's normal contents while a choice is
   pending (js/board.js `pendingPromotion`). Clicking any other square
   cancels it; clicking a choice fires the move with that promotion. */
.promo-picker {
  position: absolute; inset: 6%; z-index: 5; display: grid;
  grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px;
  background: var(--paper); border: 2px solid var(--navy-900); border-radius: 10px;
  box-shadow: var(--shadow-card); overflow: hidden;
}
.promo-picker-btn {
  display: flex; align-items: center; justify-content: center; padding: 4%;
  border: none; background: transparent; cursor: pointer;
}
.promo-picker-btn:hover, .promo-picker-btn:focus-visible { background: var(--cream-line); outline: none; }
.promo-picker-btn img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }

/* Prev/Next move-history navigator — steps through positions already
   reached in the current line (js/trainer.js `history`). Next is only
   ever enabled up to the live position, so it can't be used to peek at
   a move the trainee hasn't made yet.
   Desktop: a prominent, labeled two-button bar (see .trainer-controls
   below for why it ends up sitting above the settings/hint toolbar).
   Mobile: collapses to compact icon-only buttons that share one row
   with the toolbar, underneath the board — see the 860px breakpoint. */
.board-nav { display: flex; flex-direction: column; gap: 8px; }
.nav-position { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); text-align: center; }
.nav-buttons { display: flex; gap: 10px; }
.nav-arrow-btn {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; border-radius: 16px; border: 2px solid var(--cream-line);
  background: var(--paper); color: var(--navy-900); font-family: var(--font-body);
  font-weight: 700; font-size: 0.95rem; cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease), transform 0.1s var(--ease);
}
.nav-arrow-btn:hover:not(:disabled) { border-color: var(--pencil); background: var(--cream); }
.nav-arrow-btn:active:not(:disabled) { transform: scale(0.97); }
.nav-arrow-btn:disabled { opacity: 0.35; cursor: default; }
.nav-arrow-icon { font-size: 1.05rem; line-height: 1; }
.nav-arrow-label { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }

/* Wraps the toolbar (settings/hint) and the board-nav (prev/next).
   Desktop: column-reverse puts board-nav (the 2nd DOM child) on top and
   the toolbar underneath it — i.e. prev/next bigger and above
   settings/hint, as asked for. Mobile flips to a single row instead
   (see 860px breakpoint) with normal DOM order, so toolbar lands on the
   left and board-nav on the right, matching a phone-style control bar
   directly under the board. */
.trainer-controls { display: flex; flex-direction: column-reverse; gap: 14px; }

/* File/rank coordinates, drawn inside the edge squares themselves —
   color flips to whatever contrasts with that square's own shade, the
   same convention most online boards use. */
.coord-label {
  position: absolute; font-family: var(--font-mono); font-weight: 700;
  font-size: clamp(0.55rem, 1.6vw, 0.72rem); line-height: 1; pointer-events: none; opacity: 0.75;
}
.coord-file { left: 3px; bottom: 2px; }
.coord-rank { left: 3px; top: 2px; }
.board-square.light .coord-label { color: var(--board-dark); }
.board-square.dark .coord-label { color: var(--board-light); }

/* ---------------- Trainer chat panel ---------------- */
.chat-panel {
  background: var(--cream); border: 1.5px solid var(--cream-line); border-radius: 18px;
  overflow: hidden; display: flex; flex-direction: column;
}
/* Speed control lives here, in its own strip BELOW .chat-log (see the
   markup order in train.html), with a hairline divider so it reads as
   a footer for the conversation rather than floating detached beneath
   it. Only rendered visible when ChatAnimationPref.isEnabled() is
   true — see js/chat-speed-pref.js's updateVisibility(). There's
   nothing to speed up when messages appear in full instantly, so a
   user with word-by-word animation turned off never sees this
   control at all. */
.chat-panel-footer {
  display: none; align-items: center; gap: 16px;
  padding: 10px 14px; border-top: 1px solid var(--cream-line);
  font-family: var(--font-mono); font-size: clamp(0.62rem, 1.6vw, 0.72rem);
  color: var(--text-muted);
}
/* The footer is a shell around two independently-gated groups (Speed —
   animation-preference-gated, Auto-scroll — entitlement-gated, see
   train.html's comments on each). Neither is guaranteed visible at the
   same time as the other, so the footer bar itself only renders when at
   least one direct child isn't [hidden] — otherwise a signed-in Pro
   trainee with word-animation off would see an empty bordered strip
   with nothing in it. */
.chat-panel-footer:has(> .chat-footer-control:not([hidden])) { display: flex; }
.chat-footer-control { display: flex; align-items: center; gap: 8px; }
/* Same [hidden]-vs-bare-display gotcha as .course-full-list[hidden]/
   .filter-panel[hidden]/.pgn-panel[hidden] elsewhere in this file: the
   bare `.chat-footer-control { display: flex }` rule above has the same
   specificity as the browser's default `[hidden] { display: none }` and,
   being an author rule, always wins the tie — so setting `.hidden = true`
   in JS (see js/chat-auto-animate-pref.js's updateVisibility, which
   correctly sets this for every signed-in trainee) had no visual effect
   on its own. This is why the AUTO-ANIMATE checkbox kept rendering (and
   stayed clickable) for signed-in users even though `hidden` was already
   true — it only visually disappeared when the sibling Speed control was
   ALSO hidden, collapsing the whole .chat-panel-footer via the :has()
   rule above as a side effect, not because this control's own hidden
   state was ever actually honored. Needed explicitly, same as those
   other three selectors. */
.chat-footer-control[hidden] { display: none; }
.chat-speed-control-label { text-transform: uppercase; letter-spacing: 0.05em; }
.chat-speed-slider {
  width: clamp(72px, 22vw, 110px); accent-color: var(--navy-600); cursor: pointer;
  /* accent-color alone only reliably paints the THUMB + filled portion
     in every browser — the unfilled track falls back to the browser's
     own UA default, which is a dark gray/black groove. That default
     reads fine on the light theme's cream background but nearly
     disappears against dark mode's near-black background (a black
     track on a near-black panel) — this was the "line for the speed
     is not visible in dark mode" bug. Setting the track color
     explicitly for both engines fixes it in both themes rather than
     relying on the default matching whichever theme happens to be
     active. */
  height: 4px;
}
.chat-speed-slider::-webkit-slider-runnable-track {
  height: 4px; border-radius: 4px; background: var(--cream-line);
}
.chat-speed-slider::-moz-range-track {
  height: 4px; border-radius: 4px; background: var(--cream-line);
}
.chat-speed-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--navy-600); border: none; cursor: pointer;
  margin-top: -4.5px; /* centers the 13px thumb on the 4px track */
}
.chat-speed-slider::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--navy-600); border: none; cursor: pointer;
}
.chat-speed-value {
  min-width: 30px; text-align: left; font-weight: 600; color: var(--navy-900);
}
/* Auto-scroll/animate toggle checkbox — same accent-color treatment as
   the .settings-toggle-row checkboxes on profile.html, just smaller to
   fit this compact mono-font footer strip rather than that page's
   larger settings-card rows. */
.chat-auto-animate-toggle {
  width: 14px; height: 14px; accent-color: var(--navy-600); cursor: pointer; margin: 0;
}
.chat-log {
  display: flex; flex-direction: column; gap: 10px;
  /* Top padding is intentionally larger than the other three sides:
     for the very common case of a message landing as the FIRST (only)
     row in a freshly-cleared log — e.g. the opening explanation when a
     new line starts — js/train.js's scroll-based "start" offset
     (CHAT_ROW_SCROLL_START_EXTRA_PX) has nothing to scroll past and
     clamps back to 0, so it can't push that first row down at all.
     Real top padding is what actually creates breathing room above it
     in that specific (first-message) case, which is what several
     rounds of "still too high" feedback turned out to be about — the
     scroll offset above still matters for later messages once there's
     real scroll distance to work with, this is the piece that covers
     the first one. */
  padding: 40px 16px 16px;
  /* flex:1 1 auto + min-height:0 lets this fill whatever height its
     row/cell actually has (see .trainer-layout's grid-template-rows
     and .t-chat's align-self:stretch above) and shrink below its own
     content size when that's tight — the "fit to screen at every
     size" behavior. The max-height stays as an upper cap so it
     doesn't grow absurdly tall with nothing to balance it against on
     a very large monitor; min() keeps it from ever exceeding 46% of
     the viewport's height either, on the off chance the flex-computed
     row is even taller than that. Mobile tiers below override this
     down to a much tighter budget (13dvh) where every pixel counts. */
  flex: 1 1 auto; min-height: 0; max-height: min(420px, 46dvh);
  overflow-y: auto; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* momentum scroll on older iOS Safari */
  /* Stop a touch-scroll that reaches the top/bottom of this (small,
     often near-full) box from "chaining" into scrolling the page
     behind it — which on the no-scroll trainer (body itself is
     effectively locked, see body.trainer-page) can otherwise feel like a
     stuck/fighting scroll right at the edges instead of a clean stop. */
  overscroll-behavior: contain;
}
.chat-message { display: flex; align-items: flex-start; gap: 10px; }
/* Row entrance (avatar + bubble sliding/fading in together) — applied via
   JS only to messages that should animate at all (see addChatMessage's
   `animate` option in js/train.js). Messages that opt out (the
   already-learned "what's the best move?" challenge prompt, and the
   line-complete congratulation message) get .chat-message-static instead,
   which renders immediately with no motion at all. */
.chat-message-animated { animation: chat-in 0.18s ease-out; }
@keyframes chat-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* Word-cascade reveal: each word of an animated bubble's text fades and
   lifts in with a fixed, deliberately slow, consistent delay between
   words (js/train.js's WORD_REVEAL_STEP_MS) — more suitable than a
   literal character-by-character typewriter, and the pace stays the
   same "readable" speed regardless of message length rather than
   speeding up for longer messages. A message this makes feel too slow
   to wait out can be skipped: clicking/tapping anywhere on the row (see
   .chat-message-revealing below) jumps straight to the finished text. */
/* Transition-based (not @keyframes) on purpose: js/train.js needs to be
   able to change how fast a word fades in WHILE it's already fading —
   an animation-duration change on a running CSS animation restarts its
   timing in some browsers, but a transition-duration change just
   reprices the transition already in flight. `.chat-word-visible` is
   added by JS the instant a word should start revealing; its own
   `transitionDuration` is set inline per-word, read fresh off the
   speed slider at that exact moment (see runWordReveal). */
.chat-word {
  display: inline-block; opacity: 0; transform: translateY(3px);
  transition: opacity 0.32s ease-out, transform 0.32s ease-out;
}
.chat-word-visible { opacity: 1; transform: translateY(0); }

/* While a message's word-cascade is still in progress, js/train.js adds
   this class to the row so the whole row (not just the bubble) shows a
   pointer cursor, signaling it's clickable/tappable to skip ahead — and
   removes it once the cascade finishes on its own, so a fully-revealed
   message doesn't look perpetually clickable. */
.chat-message-revealing { cursor: pointer; }

/* Added to a bubble on click/tap to instantly complete its word-cascade:
   every .chat-word inside jumps straight to its finished state regardless
   of how far into its own delay/animation it currently was. */

/* Fixed avatar image next to every message (assets/coach-avatar.png) —
   replaces the old CSS-generated gradient-initial avatar now that
   there's no per-tab randomized persona to represent (coach-persona.js
   removed). */
.chat-avatar {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  object-fit: cover; background: var(--paper);
  box-shadow: 0 1px 3px rgba(10,23,48,0.25);
}

.chat-bubble {
  font-family: var(--font-body); font-size: 0.92rem; line-height: 1.5;
  background: var(--paper); border-radius: 6px 14px 14px 14px; padding: 10px 14px;
  box-shadow: var(--shadow-card); border-left: 3px solid var(--navy-600); max-width: 100%;
}
.chat-bubble-hint { border-left-color: var(--navy-900); }
.chat-bubble-correct { background: var(--success-bg); border-left-color: var(--ink-green); font-weight: 600; color: var(--success-text-strong); }
.chat-bubble-wrong { background: var(--error-bg); border-left-color: var(--ink-red); color: var(--error-text-strong); }
.chat-bubble-opponent { border-left-color: var(--pencil); color: var(--text-muted); }
.chat-bubble-complete { border-left-color: var(--navy-900); font-weight: 600; color: var(--navy-900); }

/* Manual-mode line-complete controls (js/train.js's
   renderLineCompleteActions) — appended into the chat log right after
   the "Perfect line!"/"Line complete." message, not a separate fixed
   panel, so it reads as the tail end of that same message rather than
   a whole new piece of UI. Left-indented past where the avatar column
   sits above it (34px avatar + 10px gap, matching .chat-message) so
   the buttons visually line up under the bubble text rather than the
   avatar. */
.line-complete-actions { display: flex; align-items: center; gap: 10px; padding-left: 44px; }
.line-complete-next-btn { padding: 8px 18px; font-size: 0.88rem; }
/* Small and deliberately unobtrusive — this is a shortcut for the
   minority who want to flip the setting mid-session, not something
   that should compete with the actual Next button for attention. */
.line-complete-auto-btn {
  background: transparent; border: 1.5px solid var(--cream-line); border-radius: 999px;
  padding: 6px 12px; font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-muted); cursor: pointer; transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.line-complete-auto-btn:hover { border-color: var(--pencil); color: var(--navy-900); }

.empty-state { font-family: var(--font-mono); color: var(--text-muted); padding: 40px 0; }
.session-complete { text-align: center; padding: 60px 0; }
.session-complete h2 { margin-bottom: 10px; }

/* "X/Y discovered" — how many lines in this notebook the trainee has
   trained at least once, computed from user_line_progress rows that
   already exist for this course (js/train.js). Purely a progress
   readout, distinct from the SM-2 mastery math that runs underneath. */
.discovered-pill {
  display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-card);
  background: var(--violet); color: var(--paper);
  border-radius: 999px; padding: 10px 16px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.85rem;
}
.discovered-icon { font-size: 1rem; line-height: 1; }

/* Task 3: wrapper so "discovered" and "practiced" can share the single
   .t-pill grid slot (.trainer-layout's "pill" area) as two rows/columns
   instead of two grid children stacking on top of each other. */
.pill-row { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; }

/* "X/Y practiced" (Task 3) — reuses .discovered-pill's inner structure
   (icon/bar-track/bar-fill/count share the same classes) with its own
   background so it reads as a distinct milestone at a glance: violet
   for "seen at least once", this blue for "2 clean reps in a row". */
.practiced-pill {
  display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-card);
  background: var(--current-blue); color: var(--paper);
  border-radius: 999px; padding: 10px 16px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.85rem;
}

/* Drill mode's live score pill (drill.html/js/drill.js) — same .t-pill
   grid slot the Learn-mode discovered pill occupies, different content
   (a running score instead of a progress bar) and color (pencil
   orange, echoing the 🔥 icon) so the two modes read as visually
   distinct at a glance. */
.drill-score-pill {
  display: flex; align-items: center; gap: 8px; box-shadow: var(--shadow-card);
  background: var(--pencil); color: var(--paper);
  border-radius: 999px; padding: 10px 16px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.85rem;
}
.drill-score-label { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.85; }
.drill-score-value { font-size: 1.05rem; font-weight: 700; }
.drill-best-value { margin-left: auto; font-family: var(--font-mono); font-size: 0.76rem; opacity: 0.9; }

/* Time Trial (Task 4) — same .drill-score-pill shape/classes (it
   literally reuses .drill-score-label/.drill-score-value/
   .drill-best-value, see timetrial.html), plus its own color and one
   extra element .drill-score-pill doesn't have: a running clock. Own
   color (current-blue, echoing the ⏱️ icon) so it reads as visually
   distinct from Drill's pencil-orange at a glance, same reasoning
   .practiced-pill picked a different color from .discovered-pill. */
.timetrial-score-pill {
  display: flex; align-items: center; gap: 8px; box-shadow: var(--shadow-card);
  background: var(--current-blue); color: var(--paper);
  border-radius: 999px; padding: 10px 16px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.85rem;
}
.timetrial-clock { font-family: var(--font-mono); font-size: 0.95rem; font-weight: 700; }

/* Time Trial's preset picker (js/timetrial.js renderPresetPicker) —
   shown in place of .trainer-layout before a run starts, so it's
   styled as its own small centered panel rather than trying to fit
   .trainer-layout's chat/board/pill grid shape it doesn't have. */
.timetrial-presets { max-width: 420px; margin: 40px auto; text-align: center; }
.timetrial-presets-intro { color: var(--text-muted); margin-bottom: 20px; }
.timetrial-preset-grid { display: flex; flex-direction: column; gap: 10px; }
.timetrial-preset-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-radius: 16px; border: 1.5px solid var(--cream-line);
  background: var(--paper); cursor: pointer; color: var(--text-body); box-shadow: var(--shadow-card);
  font-family: var(--font-body); transition: border-color 0.15s var(--ease), background 0.15s var(--ease), transform 0.15s var(--ease);
}
.timetrial-preset-btn:hover { border-color: var(--pencil); background: var(--cream); transform: translateY(-2px); }
.timetrial-preset-length { font-weight: 700; font-size: 1.05rem; }
.timetrial-preset-best { font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-muted); }
.discovered-bar-track {
  flex: 1 1 auto; height: 6px; border-radius: 999px;
  background: rgba(255,255,255,0.3); overflow: hidden; min-width: 40px;
}
.discovered-bar-fill { height: 100%; border-radius: 999px; background: var(--paper); transition: width 0.3s var(--ease); }
.discovered-count { font-family: var(--font-mono); font-size: 0.78rem; white-space: nowrap; }

/* Compact icon toolbar — replaces the old always-visible settings row.
   Settings opens a popover; Hint asks the trainer for the real
   book-fact explanation on demand (js/trainer.js revealHint()), which
   matters most once a line has graduated to "quiz" mode and the
   pre-move prompt stops teaching automatically (alreadyLearned). */
.trainer-toolbar { display: flex; gap: 10px; }
.toolbar-btn {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 8px; border-radius: 16px; border: 1.5px solid var(--cream-line);
  background: var(--paper); cursor: pointer; color: var(--text-body);
  font-family: var(--font-body); transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.toolbar-btn:hover { border-color: var(--pencil); }
.toolbar-btn[aria-expanded="true"] { border-color: var(--navy-900); background: var(--cream); }
.toolbar-btn.in-repertoire-toolbar { border-color: var(--pencil); color: var(--pencil-dark); background: var(--cream); }
.toolbar-icon { font-size: 1.15rem; line-height: 1; }
.toolbar-label { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }

/* Settings/Mode popover — floats above whichever toolbar button opened
   it (position set inline, per-open, by wireModeAndSettingsPopovers in
   js/mode-picker.js — see that function for why: it needs the real
   rendered size of whatever content is currently inside before it can
   sit flush above the button, and that size changes per tab/content
   swap). `position: fixed` deliberately, not `absolute` — this way it
   isn't clipped by `.container`'s `overflow: hidden` on trainer pages,
   and using the viewport as its containing block is exactly what
   getBoundingClientRect()-based positioning in JS assumes. z-index is
   set well above every other layered element on any page (drag ghost,
   profile-menu dropdown, etc. all sit at 1000 or below) — this should
   always render on top, per the original request. Deliberately no
   `display` property here (only `hidden` toggles that, via the
   attribute's own UA-stylesheet default) — an author rule like
   `display: flex` here would out-specificity that default and the
   popover would never actually hide. */
.settings-popover {
  position: fixed; z-index: 2000;
  background: var(--paper); border: 1px solid var(--cream-line); border-radius: var(--radius-lg);
  padding: 16px; box-shadow: var(--shadow-pop);
  width: min(320px, 92vw); max-height: min(420px, 70vh); overflow-y: auto;
}

/* ---------------- Profile ---------------- */
.profile-card {
  background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  border: 1px solid var(--cream-line);
  padding: 32px; margin-top: 24px;
}
.profile-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 24px 0; }
.stat-block { text-align: center; }
.stat-num { font-family: var(--font-display); font-size: 2rem; color: var(--navy-900); font-weight: 600; }
.stat-label { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }

/* ---------------- Billing card (Phase 7) ---------------- */
.billing-plan-line { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--navy-900); margin: 4px 0 2px; }
.billing-sub-line { margin: 0 0 16px; font-size: 0.92rem; line-height: 1.5; }
.billing-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.settings-toggle-row {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  font-size: 0.95rem; color: var(--navy-900);
}
.settings-toggle-row input[type="checkbox"] {
  margin-top: 3px; width: 18px; height: 18px; accent-color: var(--navy-900); cursor: pointer; flex-shrink: 0;
}
.settings-toggle-row small { font-weight: 400; font-size: 0.8rem; margin-top: 2px; }
/* Second (and any later) settings row in the same card needs its own
   breathing room — fine with just one row, but two flush against each
   other with no gap reads as a single confusing block. */
.settings-toggle-row + .settings-toggle-row { margin-top: 16px; }

/* A settings row driven by a

before Phase 5 (billing rollout) added the signed-out hero banner above it, which has its own, real

-- demoted to