/*
 * My Chesslab — professional workspace, September 2026.
 * The original stylesheet still owns view visibility and chessboard geometry.
 * This file owns visual tokens and component presentation. It is loaded last.
 * A few documented !important declarations match existing legacy declarations;
 * never apply layout/visibility resets to the board or its draggable pieces.
 */

:root {
  color-scheme: dark;
  --bg: #171b19;
  --panel: #222824;
  --panel2: #2a312c;
  --text: #f1f2ed;
  --muted: #b3bcb4;
  --line: #3b453d;
  --accent: #83b36b;
  --green: #8ec67c;
  --orange: #edbb6d;
  --red: #ed8c83;
  --shadow: 0 4px 16px rgba(0, 0, 0, .14);
  --surface-inset: #1c211e;
  --surface-hover: #333d34;
  --accent-deep: #426e35;
  --accent-soft: #293e2c;
  --accent-text: #bbdba8;
  --warning-surface: #3c3223;
  --error-surface: #3c2927;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

html { background: var(--bg); scroll-padding-top: 80px; }
html body[class] {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
html body[class]::before { content: none; }
html :is(h1, h2, h3, .big) { letter-spacing: -.025em; line-height: 1.2; }
html h1 { font-weight: 750; }
html :is(button, input, select, textarea) { font-family: inherit; }
html button {
  border-radius: var(--radius-md);
  background: var(--panel2);
  color: var(--text);
  border-color: var(--line);
  box-shadow: none;
  font-weight: 650;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
html button:hover { transform: none; background: var(--surface-hover); border-color: #677a69; }
html button:active { transform: none; }
html button:disabled { cursor: not-allowed; opacity: .5; transform: none; box-shadow: none; }
html :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #bfdda6;
  outline-offset: 3px;
}
html :is(input, select, textarea) {
  background: var(--surface-inset);
  color: var(--text);
  border: 1px solid #6f7c6f;
  border-radius: var(--radius-md);
  box-shadow: none;
  accent-color: var(--accent);
}
html :is(input, textarea)::placeholder { color: #a4afa5; opacity: 1; }
html input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px #83b36b26; }
html select option { background: var(--panel); color: var(--text); }
html a { text-underline-offset: 3px; }
html ::selection { color: #fff; background: #507442; }
html .board-keyboard-active .square-55d63:focus {
  outline: 3px solid #172014;
  outline-offset: -3px;
  box-shadow: inset 0 0 0 6px #f9dc78;
  z-index: 2;
}
html .board-keyboard-help {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 150;
  width: max-content;
  max-width: calc(100vw - 24px);
  padding: 10px 14px;
  border: 1px solid #9ab180;
  border-radius: 6px;
  background: #263122;
  color: #e7f0df;
  box-shadow: 0 4px 16px #0005;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  pointer-events: none;
}

/* Permanent navigation: a compact, stable application rail. */
html body[class] .nav {
  background: #121713;
  border-color: #313a32;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 24px 12px 18px;
  gap: 24px;
}
html .brand-home { border-radius: 5px; padding: 8px 4px; }
html .brand-wordmark { filter: none; }
html .brand small { color: #aeb9ae; font-size: 11px; letter-spacing: .03em; }
html .nav nav { gap: 5px; }
html body[class] .nav nav button {
  min-height: 44px;
  border-radius: 5px;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: #bcc5bd;
  font-size: 13px;
  font-weight: 600;
  animation: none;
}
html body[class] .nav nav button:hover { background: #252d26; color: #fff; }
html body[class] .nav nav button.active[data-view] {
  background: #2b3e29;
  border-color: transparent;
  color: #edf5e7;
  box-shadow: inset 3px 0 #9ac27c;
}
html body[class] .nav nav button:before,
html body[class] .nav nav button.active:before {
  color: #a7baa0;
  opacity: 1;
  filter: none;
  animation: none;
}
html .nav-badge { background: #819d6d; color: #10190d; border-radius: 4px; box-shadow: none; font-size: 10px; }
html body[class] .nav-daily-status {
  margin-top: 0;
  padding: 13px 10px;
  border-radius: 8px;
  border: 1px solid #384437;
  background: #1d251d;
  box-shadow: none;
}
html .nav-daily-status:before { content: none; }
html .nav-daily-status > b { letter-spacing: .08em; font-size: 11px; color: #c4d0bf; }
html .nav-daily-row { color: #c5cec2; }
html .nav-daily-row span { font-size: 11px; }
html .nav-daily-actions { gap: 7px; margin-top: 12px; }
html .nav-daily-actions button { min-height: 36px; border-radius: 5px; font-size: 11px; box-shadow: none; }
html .nav-daily-actions button:first-child { color: #f2f8ee; background: #466937; border-color: #6c8e5b; }
html .nav-daily-actions button:last-child { color: #d5dfd0; background: #2a3528; border-color: #44523e; }
html .nav-daily-actions button.done { background: #243825; color: #b9d5ad; box-shadow: none; }
html .nav-daily-status .nav-track { background: #374235; border-radius: 2px; }
html .nav-daily-status .nav-track i { background: #94b974; box-shadow: none; border-radius: 2px; }
html .nav-daily-status i:after { content: none; }
html .nav-auth-state { color: #b3bdb0; }

html body[class] header {
  min-height: 64px;
  padding: 16px 28px;
  background: #1c221d;
  border-color: var(--line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html body[class].games-active header { padding: 14px 28px; }
html body[class] .top-brand h1 { font-size: 23px; }
html .active-player-card :is(img, i),
html .match-player :is(img, i) {
  border-radius: 6px;
  background: #354036;
  border-color: #53624f;
  box-shadow: none;
}
html .player-switcher-card > div > span { color: var(--accent-text); }
html .player-switcher-actions button { border-radius: 5px; min-height: 36px; font-size: 12px; }
html .player-switcher-actions .change-player { color: #d3dfcb; background: #2d3c2b; border-color: #4a6042; }
html .player-switcher-actions .refresh-player-games { background: #2b332c; border-color: var(--line); }

/* One surface language. Deliberately enumerated components preserve game state,
 * board geometry, [hidden], scrolling, SVG overlays, and draggable pieces. */
html body[class] :is(.card, .board-panel, .player-overview, .daily-training-card,
  .repertoire-home-card, .discovery-hero, .discovery-board-card, .discovery-tree-panel,
  .discovery-choice, .learning-center-card, .trainer-board-card) {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html body[class] :is(.summary-grid > div, .overview-trend, .overview-stats > div,
  .overview-compact > div, .overview-insights > div, .trend-summary > div,
  .daily-training-metrics > div, .daily-mission, .repertoire-summary-strip > div,
  .rep-extra-card, .discovery-stat-strip > div, .discovery-insight-card,
  .mistake-insight-stats > div, .practice-stat-grid > div, .trainer-stats > div,
  .repair-complete-summary > div, .profile-phases > div) {
  background: var(--surface-inset);
  border: 1px solid #374138;
  border-radius: var(--radius-md);
  box-shadow: none;
}
html body[class] :is(.hint, .learning-box, .variation-box, .line-builder-panel,
  .practice-card, .practice-control-strip, .practice-answer, .practice-idea,
  .color-rep-list, .color-rep-edit, .learning-note, .line-complete-reward,
  .blunder-profile, .repair-complete-next, .discovery-source, .opening-card) {
  background: var(--surface-inset);
  border-color: var(--line);
  border-radius: var(--radius-md);
  box-shadow: none;
}
html body[class] :is(.colorpill, .timepill, .metric-pill, .card-cta, .review-chip,
  .opening-chip, .opening-ideas span, .srs-badge, .status-badge, .practice-tag,
  .practice-task-head i, .trainer-line-move, .active-player-card strong,
  .active-player-card em, .practice-action-card small, .repair-complete-kicker,
  .practice-focus-chip, .mistake-preview-cta, .welcome-status .welcome-streak) {
  border-radius: 4px;
  box-shadow: none;
}
html body[class] :is(.small-action, .overview-toggle, .opening-cta, .card-cta,
  .opening-summary-toggle, .diagnosis-toggle, .candidate-toolbar summary,
  .practice-mini-actions button, .practice-mini-actions summary,
  .trainer-board-toolbar button, .line-builder-actions button,
  .trainer-actions button, .color-detail-actions button, .color-rep-list button,
  .flow-head button, .detail-action-list button, .rep-home-back,
  .library-actions button, .discovery-source-actions button, .games-pager button,
  .learning-more button, .learning-actions button, .learning-result-actions button) {
  border-radius: 6px;
  box-shadow: none;
}

/* Dashboard: rating and next session have a clear hierarchy. */
html .player-overview, html .daily-training-card { padding: 24px; margin-bottom: 20px; }
html .overview-title { margin-bottom: 20px; }
html .overview-title b { font-size: 20px; }
html .overview-grid { gap: 20px; }
html .overview-trend { padding: 20px; }
html .trend-head { gap: 12px; }
html .trend-head strong { font-size: 42px; font-weight: 750; }
html .overview-grid :is(span, small), html .overview-title span { font-size: 12px; }
html .trend-range-control, html .trend-pool-control { border-radius: 5px; background: #2d352d; }
html .trend-range-control button, html .trend-pool-control button { border-radius: 3px; min-height: 30px; font-size: 11px; }
html .trend-range-control button.active, html .trend-pool-control button.active { background: #49593d; color: #f1f6e9; }
html .rating-spark { height: 104px; }
html .rating-spark polyline { stroke: #a5c88b; filter: none; animation: none; }
html .spark-point { fill: #c0dea7; stroke: #273224; filter: none; }
html .overview-stats b { font-size: 30px; color: #f1f2ed; }
html .overview-stats small { line-height: 1.4; }
html .trend-summary div, html .overview-insights div { padding: 12px; }
html .trend-summary b, html .overview-insights b { font-size: 15px; }
html .overview-next-action:not(.complete) {
  margin-top: 16px;
  padding: 14px 16px;
  background: #2f462c;
  border: 1px solid #5c7850;
  border-radius: 6px;
  color: #f0f6e9;
  box-shadow: none;
}
html .overview-next-action:not(.complete):hover { background: #3b5535; box-shadow: none; transform: none; }
html .overview-next-action b { font-size: 14px; line-height: 1.4; }
html .daily-training-card:before,
html .daily-training-card:after,
html .daily-training-card.complete:before,
html .daily-training-card.complete:after,
html .rep-dashboard-card:before,
html .rep-dashboard-card.black:before,
html .rep-mastery-fill:before { content: none; }
html .daily-training-head b { font-size: 24px; }
html .daily-training-head p { font-size: 14px; }
html .daily-training-head span { font-size: 11px; color: #b3cea1; }
html .daily-mission { padding: 17px; }
html .daily-mission-copy span { font-size: 15px; }
html .daily-mission-copy small { font-size: 12px; }
html .daily-mission :is(button, button:hover),
html .daily-training-actions button:first-child,
html .learning-result-actions .primary-action,
html .repair-complete-next .primary-action {
  background: #54793f;
  border-color: #719359;
  color: #fff;
  border-radius: 6px;
  box-shadow: none;
  min-height: 42px;
}
html .daily-mission button:hover { background: #5b7f47; }
html .daily-mission.openings .daily-mission-progress i,
html .daily-mission.blunders .daily-mission-progress i,
html .practice-progress i, html .learning-progress i {
  background: #96be79;
  border-radius: 2px;
  box-shadow: none;
}
html .daily-training-metrics :is(span, small) { font-size: 11px; }
html .streak-flame { animation: none; filter: none; }
html .daily-training-card.complete .streak-flame { animation: none; filter: none; }
html .daily-head-check, html .daily-mission-copy .mission-check { background: #92b675; color: #1c2b16; box-shadow: none; }
html .elo-goal-row { border-radius: 6px; background: #322e21; border-color: #625c3b; color: #e3d79e; box-shadow: none; }
html .elo-goal-row [data-elo-goal-save] { color: #f7f4de; background: #575432; border-color: #89815a; }

/* Recent games are rows of comparable data, with a secondary analysis action. */
html body[class].games-active .gamepick.rich {
  border-radius: 0;
  border-top-color: #364038;
  background: transparent;
  box-shadow: none;
}
html body[class].games-active .gamepick.rich:hover { background: #293229; box-shadow: none; }
html body[class].games-active .gamepick.rich .card-cta {
  background: #2e412a;
  border: 1px solid #506747;
  color: #dfead5;
  border-radius: 5px;
  box-shadow: none;
}
html .gamepick.rich .players b { font-weight: 650; }
html .gamepick.rich .metric-pill { background: #29342b; border-color: #475c45; box-shadow: none; border-radius: 5px; }
html .metric-copy b { color: #e6efde; }
html .metric-bar:before { background: #a0bf85; }
html .metric-icon { box-shadow: none; filter: grayscale(.75); }
html .gamepick.rich .colorpill { background: #2b342c; border-color: #465247; color: #d7dfd3; }
html .gamepick.rich .timepill { background: #262e27; border-color: var(--line); }
html .games-usp { font-size: 14px; color: #bac4b6; }

/* Analysis: board first; tabs and move controls are quiet, predictable tools. */
html body.analysis-active .match-player.black { flex-direction: row-reverse; }
html body.analysis-active .match-copy {
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1fr);
}
html body.analysis-active .match-copy b,
html body.analysis-active .match-copy b > .player-profile-link { display: block; }
html body.analysis-active .match-copy small {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
html body.analysis-active .match-player .player-avatar-link > :is(img, i) {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface-hover);
  box-shadow: none;
  font-size: 11px;
  font-style: normal;
}
@media (min-width: 901px) {
  html body.analysis-active .app > header .top-title {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 780px;
  }
  html body.analysis-active .match-copy b,
  html body.analysis-active .match-copy b > .player-profile-link {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: normal;
  }
}
@media (max-width: 900px) {
  html body.analysis-active .matchup-header { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  html body.analysis-active .match-player .player-avatar-link > :is(img, i) { width: 28px; height: 28px; }
}
@media (max-width: 600px) {
  /* Give both identities the full phone width instead of squeezing them beside
   * the return button into several one-word fragments. */
  html body.analysis-active .app > header .top-title { grid-column: 1 / -1; }
  html body.analysis-active .app > header .back-btn { grid-column: 1 / -1; justify-self: end; min-height: 36px; }
}
html body[class].analysis-active .board-panel { padding: 14px; min-width: 0; }
html body.analysis-active .board-shell > .board-wrap { min-width: 0; flex: 1 1 0; }
html body.analysis-active .board-shell > .evalbar { flex: 0 0 10px; min-height: 0; }
html body.analysis-active :is(.mobile-board-controls, .mobile-move-nav, .mobile-review-controls, .mobile-review-strip, .summary-mobile-accordion) {
  background: var(--panel);
  border-color: var(--line);
  border-radius: 7px;
  box-shadow: none;
  backdrop-filter: none;
}
html body.analysis-active .back-btn { border-radius: 5px; }
@media (max-width: 1250px) {
  /* Legacy 1fr has an intrinsic minimum equal to the previous inline board
   * width. Allow the track to shrink so the board observer can resize it. */
  html body.analysis-active main { grid-template-columns: minmax(0, 1fr) !important; }
}
html body[class].analysis-active #board, html body[class] #trainerBoard,
html body[class] #colorDetailBoard, html body[class] #discoveryBoard {
  border-radius: 4px;
  box-shadow: 0 2px 10px #0003;
}
/* A rank always contains eight cells. During a container resize, retain their
 * current pixel geometry until the width observer recalculates the board;
 * floating cells must never wrap the h-file into a ninth rank. */
html :is(#board, #trainerBoard, #colorDetailBoard, #discoveryBoard) .row-5277c {
  display: flex;
  flex-wrap: nowrap;
}
html :is(#board, #trainerBoard, #colorDetailBoard, #discoveryBoard) .row-5277c > .square-55d63 {
  flex: 0 0 auto;
}
html body[class] .board-player { background: transparent; border-radius: 4px; box-shadow: none; }
html body[class] .analysis-tabs {
  gap: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #485346;
  border-radius: 0;
  background: transparent;
}
html body[class] .analysis-tabs button {
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  font-size: 13px;
  font-weight: 650;
  color: #b8c3b3;
  background: transparent;
}
html body[class] .analysis-tabs button.active {
  color: #ecf4e6;
  background: transparent;
  border-bottom-color: #9bc67b;
}
html body[class] .panel-controls button {
  border-radius: 5px;
  min-height: 38px;
  color: #d8e1d3;
  background: #2c372c;
  border-color: #4b5b46;
  box-shadow: none;
}
html body[class] .panel-controls button:hover { background: #3b4a36; }
html body[class].analysis-active .card { padding: 20px; border-radius: 10px; }
html .summary-card h2 { font-size: 19px; margin-bottom: 18px; }
html body[class].analysis-active .summary-grid > div { padding: 14px; border-radius: 7px; }
html .summary-grid span { font-size: 13px; }
html .summary-grid b { font-size: 21px; font-variant-numeric: tabular-nums; }
html .category-counts { gap: 6px; }
html .category-counts .cat {
  min-height: 44px;
  padding: 8px;
  border-radius: 5px;
  background: #2a332b;
  border-color: #414d40;
  box-shadow: none;
}
html .category-counts .cat b { border-radius: 4px; box-shadow: none; animation: none; }
html .category-counts .cat span { font-size: 12px; color: #d7dfd2; }
html .category-counts .cat.current,
html .review-chip.current { transform: none; background: #3a4633; border-color: #a5c48b; box-shadow: none; }
html .category-counts .cat.disabled { opacity: .5; }
html .eval-graph { background: #1c211e; border-color: var(--line); border-radius: 6px; }
html .evalbar, html .evalbar:before, html #evalFill { border-radius: 2px; box-shadow: none; }
html #evalNumber { border-radius: 3px; }
html #eval { border-radius: 4px; background: #2a332a; color: #c5d2bd; }
html .quality-mark { box-shadow: 0 1px 3px #0005; border-radius: 4px; animation: none; }
html body[class] .move { border-radius: 3px; }
html body[class] .move.active { background: #405737; color: #eef6e6; }
html .engine-panel, html .engine-line, html .engine-option,
html .loss-report, html .coach-game-briefing, html .coach-insight,
html .db-explorer, html .blunder-notes { border-radius: 7px; box-shadow: none; }
html .loss-report { background: #322623; border-color: #705044; border-left-color: #d88673; }
html .loss-report :is(p, span) { color: #d7c3ba; line-height: 1.5; }
html .opening-card h2, html .opening-card h2 span { color: #bbcfab; }
html .opening-card #openingSummary { color: #c7d1c0; font-size: 14px; line-height: 1.5; }
html body[class] :is(.coach-card, .coach-ask, .coach-chip, .coach-lead, .free-analysis-panel,
  .free-analysis-result, .engine-line, .engine-head > div, .daily-session-head,
  .daily-session-summary > div) {
  background: var(--surface-inset);
  border-color: var(--line);
  border-radius: 7px;
  box-shadow: none;
}
html .engine-line.best { background: #2c402a; border-color: #6c8c54; }
html .engine-line b { color: #c3dcb0; }
html .engine-line-pv, html .engine-line.best .engine-line-pv { color: #c9d6c0; font-size: 13px; line-height: 1.6; }
html .engine-head span { font-size: 11px; }
html .coach-card p, html .coach-chip p { color: #cbd6c3; line-height: 1.55; }
html .coach-line-move, html .coach-line-reset, html .coach-learn-current { border-radius: 5px; min-height: 36px; }
html .coach-line-move { background: #2e3c2a; border-color: #586f4a; color: #d7e7c9; }
html .coach-line-move.active { background: #4c6839; border-color: #a1be80; color: #fff; }
html .coach-learn-current { background: #3e5030; border-color: #768b59; color: #e4ecd4; }

/* Openings: study workspace with calm progress and meaningful feedback. */
html .opening-trainer-view, html .discovery-lab-view { padding: 28px; }
html .repertoire-home-card { padding: 24px; }
html .repertoire-home-head { gap: 14px; margin-bottom: 20px; }
html .repertoire-home-head span { color: #b6caa4; font-size: 11px; letter-spacing: .08em; }
html .repertoire-home-head b { font-size: 28px; }
html .repertoire-summary-strip { gap: 12px; }
html .repertoire-summary-strip div { padding: 14px; }
html .repertoire-summary-strip b { font-size: 24px; }
html .repertoire-summary-strip span { font-size: 12px; }
html .repertoire-summary-strip small { font-size: 11px; color: #a9b6a1; line-height: 1.4; }
html .rep-dashboard-grid { gap: 18px; }
html .rep-dashboard-card {
  min-height: 180px;
  padding: 22px;
  border-radius: 10px;
  border-color: #4c5c45;
  background: #293326;
  box-shadow: none;
}
html .rep-dashboard-card.black { background: #242a26; border-color: #455148; }
html .rep-dashboard-card:hover { background: #34422d; border-color: #95b776; transform: none; box-shadow: none; }
html .rep-card-badge,
html .rep-dashboard-card.black .rep-card-badge {
  border-radius: 6px;
  border-color: #7d8b6b;
  background: #c4c8b0;
  color: #242b21;
  text-shadow: none;
  box-shadow: none;
}
html .rep-dashboard-card.white .rep-card-badge { color: #f8f6df; background: #57664a; }
html .rep-mastery-fill { background: #7cab5918; box-shadow: none; filter: none; animation: none; }
html .rep-card-copy > b { font-size: 23px; }
html .rep-card-top, html .rep-dashboard-card.white .rep-card-top,
html .rep-dashboard-card.black .rep-card-top { color: #c9d6bd; }
html .rep-card-stats span { background: #151c154d; border: 0; border-radius: 4px; font-size: 12px; }
html .rep-card-stats strong { font-size: 17px; }
html .rep-extra-card { padding: 18px; }
html .rep-extra-card > span { color: #b8cea4; }
html .rep-extra-card small { font-size: 12px; }
html .trainer-board-card { padding: 20px; min-width: 0; grid-template-columns: minmax(0, 1fr); }
/* Fixed pixel squares must not become an implicit grid column's minimum width.
 * The card's content box, including its padding, owns the available board width. */
html .trainer-left-column { min-width: 0; grid-template-columns: minmax(0, 1fr); }
html :is(.trainer-builder-layout, .trainer-board-wrap, .line-builder-panel, .practice-card, .practice-control-strip) { min-width: 0; }
html .trainer-board-card .big { font-size: 22px; }
html .trainer-board-card .label { font-size: 11px; color: #bac8b1; }
html .line-builder-panel { padding: 18px; }
html .line-builder-head { padding-bottom: 12px; }
html .line-builder-panel h3 { font-size: 17px; }
html .line-builder-head span { font-size: 12px; line-height: 1.5; color: #b9c4b0; }
html .trainer-board-card.learn-mode .line-builder-panel { background: var(--panel); border: 0; padding: 4px 0 0; }
html .practice-card, html .practice-control-strip { gap: 16px; padding: 18px; }
html .practice-main-prompt { text-align: left; padding: 8px 0; }
html .practice-main-prompt .practice-eyebrow { justify-content: flex-start; font-size: 11px; color: #bccab3; }
html .practice-main-prompt b { display: block; margin-top: 6px; font-size: 23px; line-height: 1.2; }
html .practice-support { color: #b5c3ab; font-size: 13px; line-height: 1.5; }
html .practice-main-prompt small,
html .practice-main-prompt .practice-support {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}
/* The eyebrow already identifies the learning mode; this extra all-caps suffix
 * repeats it and caused the mobile instruction to wrap into an orphan line. */
html .practice-support em { display: none; }
html .practice-moment { border-radius: 6px; background: #28392a; border-color: #4c6a49; box-shadow: none; animation: none; }
html .practice-moment.correct { background: #29402b; border-color: #57804d; box-shadow: none; }
html .practice-moment.miss { background: var(--warning-surface); border-color: #7a623d; }
html .practice-moment em { font-size: 10px; color: #b6caab; }
html .practice-moment b { font-size: 15px; }
html .practice-moment small { font-size: 12px; color: #bbceb4; }
html .practice-idea { padding: 14px; border-left: 3px solid #91ad74; }
html .practice-idea p, html .practice-card p { font-size: 14px; line-height: 1.5; color: #cad5c2; }
html .practice-progress-count { font-size: 12px; color: #cdd9c3; }
html .practice-mini-actions button, html .practice-mini-actions summary { min-height: 42px; font-size: 12px; }
html #trainerLine, html #trainerFeedback { font-size: 13px; line-height: 1.5; color: #bdc9b4; }
html .candidate-moves button[data-uci] { min-height: 45px; border-radius: 5px; background: #293229; border-color: #414e3d; }
html .candidate-moves button[data-uci]:hover { background: #394b32; border-color: #859e71; }
html .color-rep-row > button:first-child { background: #293229; border-color: #46543f; }
html .color-rep-row.active > button:first-child { background: #36482f; border-color: #779a60; box-shadow: none; }
html #colorStartBuilder { color: #f1f7e9; background: #4c713a; border-color: #78965f; box-shadow: none; }
html .detail-line, html .line-group, html .rep-section { border-radius: 6px; }
html .learning-overview, html .queue-status-summary {
  border-radius: 7px;
  background: var(--surface-inset);
  border-color: #46523f;
  box-shadow: none;
}
html .learning-overview { padding: 18px; gap: 14px; }
html .learning-overview-head h3 { font-size: 17px; }
html .learning-overview-head :is(p, small) { font-size: 12px; line-height: 1.5; color: #b8c7ad; }
html .queue-status-labels span { border-radius: 4px; background: #2c3629; }
html .queue-segment-bar { border-radius: 2px; box-shadow: none; }
html .queue-segment-bar .new { background: #91a6bb; box-shadow: none; }
html .queue-segment-bar .learning { background: #c4ad68; box-shadow: none; }
html .queue-segment-bar .mastered { background: #94b977; box-shadow: none; }
html .practice-action-card,
html .practice-action-card.recommended {
  background: #2a3527;
  border-color: #495c3e;
  border-radius: 6px;
  box-shadow: none;
  padding: 13px;
}
html .practice-action-card.recommended { background: #34492c; border-color: #75945b; }
html .practice-action-card:hover:not(:disabled) { background: #405637; border-color: #94b775; box-shadow: none; transform: none; }
html .practice-action-card:before { content: none; }
html .practice-action-card b { font-size: 14px; }
html .practice-action-card em { font-size: 12px; line-height: 1.4; }
html .practice-action-card i { border-radius: 4px; background: #4d6041; box-shadow: none; }

/* Rendered review: remove empty chrome and the large empty practice column.
 * These headers contain no navigation in these states; Exit and the app rail
 * remain available. A study panel should size to its content, not to 520px. */
html body.opening-trainer-active .app > header,
html body.learning-choice .app > header { display: none; }
html .trainer-head { margin-bottom: 0; }
html #trainerTitle:empty { display: none; }
html #trainerFeedback:empty, html #trainerLine:empty { display: none; }
html .trainer-board-card.learn-mode .line-builder-panel { min-height: 0; align-self: start; }
html .trainer-board-card.learn-mode .line-builder-actions { display: none; }
html body.games-active .drawer-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
html body.games-active .active-player {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
html body.games-active:not(.mobile-search-open) .app > header:has(#activePlayer:empty) { display: none; }

/* Mistakes and discovery use the same typography and action language. */
html .blunder-choice-box .choice-head b, html .discovery-hero b { font-size: 28px; line-height: 1.2; }
html .blunder-choice-box .choice-head p, html .discovery-hero p { font-size: 14px; line-height: 1.5; }
html .blunder-choice-box .choice-eyebrow, html .discovery-hero span { color: #b6cca3; letter-spacing: .08em; }
html .blunder-choice-box .choice-head { margin-bottom: 16px; }
html .discovery-choice-card {
  min-height: 150px;
  padding: 20px;
  border-radius: 8px;
  background: #2a3528;
  border-color: #506247;
  color: #edf4e5;
}
html .discovery-choice-card:hover { background: #364731; border-color: #8eac76; }
html .discovery-choice-card span { color: #b9d1a6; }
html .discovery-choice-card b { font-size: 23px; }
html .discovery-choice-card small { font-size: 13px; color: #bdcbb3; }
html .discovery-insight-card.leak { background: #3a2c26; border-color: #775346; }
html button.mistake-preview { padding: 10px; border-radius: 7px; background: #2b342a; box-shadow: none; }
html .mistake-preview-cta { color: #d5e5c6; background: #3a5030; border-color: #658254; }
html .mini-board { border-radius: 3px; }
html .learning-head b { font-size: 26px; }
html .learning-head p { font-size: 14px; color: #c4d0bc; }
html .learning-result-card { background: #263429; border-color: #4f6950; }
html .learning-result-card.success { background: #263b28; border-color: #6b945c; }
html .learning-result-card.miss { background: #3a2b27; border-color: #926b55; }
html .repair-complete-card { background: #293b2a; border-color: #5f8253; border-radius: 10px; box-shadow: none; animation: none; }
html .repair-complete-card:before { content: none; }
html .repair-complete-badge { background: #426137; border-color: #92b976; box-shadow: none; animation: none; }
html .profile-row { border-radius: 5px; }

/* Solid settings/popovers; preserve their existing positioning and dismissal. */
html :is(.settings-panel, .board-settings, .analysis-settings, .settings-popover, .review-settings-panel,
  .candidate-toolbar details > div, .practice-details > div, .trend-tooltip,
  .rep-add-modal, .rep-add-dialog, .modal-content) {
  background: #252d26;
  border-color: #62715a;
  border-radius: 8px;
  box-shadow: 0 12px 36px #0007;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html .review-settings-panel { padding: 14px; }
html .review-settings-panel label { min-height: 36px; font-size: 13px; }
html .review-settings-panel span { color: #cfddc4; }
html .review-settings-panel .settings-action { background: #35482d; border-color: #6a8155; color: #e1edd5; border-radius: 5px; }
html .soundVolumeSlider { accent-color: #9abc7c; }
html .appearance-launcher { margin-top: auto; }
html .appearance-launcher-button { justify-content: flex-start; width: 100%; min-height: 40px; border-radius: 5px; background: transparent; color: #bccbb3; border-color: #3b4a36; box-shadow: none; }
/* Legacy app-header rules include display:none!important on mobile training.
 * A dialog's heading and close button must remain visible in every view. */
html .appearance-dialog > .appearance-header {
  display: flex !important;
  position: static;
  inset: auto;
  z-index: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
}

/* Entry screen: quiet, editorial welcome with a single obvious next action.
 * Do not keep the costly fog/video visible behind account forms. */
html .landing { background: #171d18; padding: 42px 24px; }
html .landing-bg { display: none; }
html .landing:before, html .landing:after,
html .landing-stage:before, html .landing-stage:after,
html .landing-card:before { content: none; }
html .landing-stage { width: min(760px, 100%); gap: 24px; }
html .landing-brand { gap: 8px; }
html .landing-brand small { color: #b5c6a9; letter-spacing: .06em; font-size: 12px; }
html .landing .landing-card {
  background: #252e25;
  border: 1px solid #4c5b44;
  border-radius: 12px;
  padding: 40px 44px;
  box-shadow: 0 12px 36px #0003;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html .landing h1 { font-size: clamp(34px, 4.5vw, 48px); line-height: 1.1; letter-spacing: -.04em; }
html .landing p { color: #bdcbb4; font-size: 17px; line-height: 1.6; }
html .landing-kicker { background: transparent; color: #c7dab5; border: 0; padding: 0; border-radius: 0; font-size: 11px; letter-spacing: .12em; }
html .landing-benefits { gap: 18px; margin: 24px auto; }
html .landing-benefits span { padding: 0; background: transparent; border: 0; border-radius: 0; color: #d6e2cb; font-size: 13px; }
html .landing-benefits span:before { content: "✓"; margin-right: 6px; color: #b1ce94; }
html .landing .auth-card { background: #1d251f; border-color: #485b40; border-radius: 8px; padding: 20px; gap: 14px; box-shadow: none; }
html .auth-head b { font-size: 20px; }
html .auth-head span { color: #b6cfa0; }
html .auth-card p { font-size: 14px; }
html .auth-card input { border-color: #617254; background: #151d16; border-radius: 6px; box-shadow: none; }
html .auth-row label { display: grid; gap: 6px; min-width: 0; color: #c9d8bf; font-size: 12px; font-weight: 650; text-align: left; }
html .auth-actions button { border-radius: 6px; min-height: 44px; }
html .auth-status { border-radius: 4px; background: #2b3828; border-color: #4f6444; color: #c9dbbb; }
html .landing-search { padding: 6px; background: #1b251d; border: 1px solid #586c4d; border-radius: 7px; box-shadow: none; }
html .landing-search input { background: transparent; border: 0; box-shadow: none; }
html .landing-search button,
html .auth-primary,
html .landing-card.logged-in-entry .enter-lab-cta,
html .enter-lab-cta {
  color: #fff;
  background: #5b7e42;
  border: 1px solid #839e64;
  border-radius: 6px;
  box-shadow: none;
  text-shadow: none;
  letter-spacing: 0;
}
html .landing-card.logged-in-entry .enter-lab-cta:hover,
html .landing-search button:hover { background: #5b7f47; box-shadow: none; transform: none; }
html .auth-secondary { background: #303d2b; color: #d6e4ca; border-color: #647852; }
html .landing-card.logged-in-entry .enter-lab-cta:after { content: none; }
html body[class].lab-welcome:not(.lab-managing) #toggleOtherPlayer { border-radius: 6px; background: #2d382a; border-color: #627154; color: #dae5ce; }
html body[class].lab-welcome .landing-brand .landing-wordmark { opacity: 1; }
html .linked-chess-profile { background: #263022; border-color: #506245; border-radius: 7px; box-shadow: none; }
html .landing-divider span { color: #c2d3b2; font-size: 11px; letter-spacing: .08em; }

/* These isolated legacy rules already use !important; match only presentation
 * properties. Visibility, pointer handling and view layout remain untouched. */
html .settingsGear { background: #2a3529 !important; border-color: #53654b !important; border-radius: 5px !important; color: #dce8d1 !important; box-shadow: none !important; }
html .practice-mini-actions .pa-hint { background: #496b38 !important; border-color: #75965c !important; color: #fff !important; }
html .practice-mini-actions .pa-hint:hover { background: #5b7f47 !important; }
html .blunder-choice-box { border-color: var(--line) !important; background: var(--panel) !important; }
html .blunder-choice-card {
  border-radius: 8px !important;
  padding: 20px !important;
  background: #293429 !important;
  border-color: #4b5b45 !important;
  box-shadow: none !important;
}
html .blunder-choice-card.daily { background: #2f432b !important; border-color: #789b5f !important; }
html .blunder-choice-card.free { background: #293329 !important; border-color: #4c5c46 !important; }
html .blunder-choice-card.rush { background: #393326 !important; border-color: #726647 !important; }
html .blunder-choice-card span { color: #c0d1ae !important; }
html .blunder-choice-card.rush span { color: #e2d1a4 !important; }
html .blunder-choice-card:hover { border-color: #a9c28f !important; }
html .streak-hero.lit { background: #343225 !important; border-color: #6d6748 !important; box-shadow: none; }
html .overview-balance { background: var(--surface-inset) !important; border-color: #374138 !important; }
html .overview-next-action span { color: #c6dcb5 !important; }
html .discovery-replies-toggle { background: #2b392b !important; border-color: #53694b !important; color: #dae6d1 !important; border-radius: 5px !important; }
html .daily-mission.done .daily-mission-progress i,
html .nav-daily-row.done u.nav-track i { background: #9dc783 !important; box-shadow: none !important; }

/* Match view-specific legacy selectors explicitly; leave their display, order,
 * min-height and board sizing properties in the original stylesheet. */
html body.learning-active.learning-ready:not(.blunder-rush-active) :is(.board-panel, .learning-center-card),
html body.blunder-rush-active.learning-ready :is(.board-panel, .learning-center-card) {
  background: var(--panel);
  border-color: var(--line);
  border-radius: 9px;
  box-shadow: none;
  backdrop-filter: none;
}
html body.learning-active.learning-ready:not(.blunder-rush-active) .learning-box {
  background: var(--surface-inset);
  border-color: var(--line);
  border-radius: 7px;
}

/* Desktop refinement without changing the board's sizing contract. */
@media (min-width: 1251px) {
  html body[class].analysis-active main { gap: 24px; padding: 24px; }
  html body[class].learning-ready .learning-center-card { padding: 24px; }
  html .trainer-builder-layout { gap: 28px; }
  html .opening-trainer-view { max-width: 1280px; }
  html .trainer-board-card.learn-mode .trainer-builder-layout { grid-template-columns: minmax(420px, 600px) minmax(320px, 1fr); }
  html .trainer-board-card.learn-mode .trainer-board-wrap,
  html .trainer-board-card.learn-mode #trainerBoard { max-width: 600px; }
  html #repDetailScreen { max-width: 960px; }
  html #repDetailScreen .detail-action-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html #repDetailScreen .detail-action-list p { grid-column: 1 / -1; }
  html body.games-active main { max-width: min(1280px, calc(100vw - 196px)); padding: 24px 32px; }
}

@media (min-width: 769px) {
  html body.opening-trainer-active .trainer-board-card.learn-mode {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 12px 0;
  }
  html .trainer-board-card.learn-mode .practice-card {
    background: var(--panel);
    border-color: #46543f;
  }
}

/* Compact app rail becomes a real tab strip on touch layouts. */
@media (max-width: 1050px) {
  html body[class] .nav { padding: 10px 12px; gap: 10px; }
  html body[class] .nav > nav:not(.mobile-app-nav) button.active[data-view] {
    background: #33472d !important;
    box-shadow: inset 0 -3px #b3d494 !important;
  }
  html body[class] .nav nav button { min-height: 44px; border-radius: 5px; }
  html .mobile-app-nav { background: #182019; border-color: #46523e; backdrop-filter: none; }
  html .mobile-app-nav { border-radius: 6px; box-shadow: none; }
  html .mobile-app-nav button { background: transparent; border-radius: 3px; color: #c9d5c0; box-shadow: none; min-height: 44px; }
  /* Desktop navigation reserves 36px for its leading icon. The phone strip
   * has text-only tabs, so return that space to the complete visible labels. */
  html body[class] .nav .mobile-app-nav button[data-mobile-view] {
    padding: 5px;
    gap: 0;
    justify-content: center;
  }
  html .nav .mobile-app-nav button[data-mobile-view] > small {
    min-width: 0;
    max-width: 100%;
    font-size: 11px;
    font-weight: 650;
  }
  html .nav .mobile-app-nav .nav-badge {
    position: absolute;
    top: 1px;
    right: 2px;
    min-width: 13px;
    height: 13px;
    padding: 0 3px;
    font-size: 8.5px;
  }
  html .mobile-app-nav button.active { background: #34462d; color: #edf5e5; }
  html .mobile-more-sheet { background: #242e25; border-color: #53654c; border-radius: 10px; backdrop-filter: none; }
  html .appearance-launcher { margin: 0; }
  html .appearance-launcher-button { min-height: 40px; font-size: 12px; }
  html .opening-trainer-view, html .discovery-lab-view { padding: 20px; }
}

@media (max-width: 700px) {
  html body[class] { font-size: 14px; }
  html body[class] header, html body[class].games-active header { padding: 12px; min-height: 56px; }
  html body[class] .nav { padding: 3px 8px 2px; gap: 2px; }
  html .nav .brand-home { padding: 0; min-height: 44px; width: calc(100% - 100px); }
  html .nav .nav-auth-state { margin-top: 0; }
  html body[class] .nav .nav-daily-status { padding: 6px; gap: 5px 8px; }
  /* Keep the two header actions in one coordinate system, above the tabs.
   * Compact the surrounding gaps so proper touch targets do not bloat the rail. */
  html .nav .mobile-app-nav { position: static; padding: 0; }
  html body[class] .nav .mobile-app-nav button[data-mobile-more] {
    top: 3px;
    right: 8px;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 5px;
    border: 1px solid #46563d;
    background: #202920;
  }
  html .nav .nav-daily-actions { margin-top: 0; }
  html body[class] .nav .appearance-launcher {
    position: absolute;
    right: 58px;
    top: 3px;
    margin: 0;
    padding: 0;
    border: 0;
  }
  html body[class] .nav .appearance-launcher-button {
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    gap: 0;
    justify-content: center;
    border: 1px solid #46563d;
    background: #202920;
  }
  html body[class] .nav .appearance-launcher-label { display: none; }
  html body[class] .nav nav button { min-height: 40px; font-size: 11px; }
  html :is(.player-overview, .daily-training-card) { padding: 16px; margin-bottom: 14px; }
  html .overview-title { margin-bottom: 16px; }
  html .overview-title b { font-size: 18px; }
  html .overview-trend { padding: 14px; }
  html .overview-grid { gap: 12px; }
  html .trend-head { gap: 8px; grid-template-columns: 1fr auto; }
  html .trend-head strong { font-size: 36px; }
  html .trend-range-control, html .trend-pool-control { justify-self: start; }
  html .trend-summary, html .overview-insights { gap: 6px; }
  html .trend-summary div, html .overview-insights div { padding: 9px 7px; }
  html .trend-summary :is(span, small), html .overview-insights :is(span, small) { font-size: 10px; }
  html .daily-training-head b { font-size: 22px; }
  html .daily-mission-grid { gap: 10px; }
  html .daily-mission { padding: 12px; gap: 10px; }
  html .daily-mission-copy { grid-template-columns: 1fr; }
  html .daily-mission-copy b { grid-row: auto; grid-column: auto; margin-top: 4px; }
  html .daily-mission-copy span { font-size: 14px; }
  html .daily-mission-copy small { font-size: 11px; }
  html body[class].games-active .gamepick.rich .card-cta { min-height: 36px; border-radius: 5px; }
  html body[class].games-active .game-row-block { background: #242d24; border-radius: 7px; }
  html body[class].games-active .gamepick.rich .players b { font-size: 13px; }
  html body[class].games-active .gamepick.rich .acc .metric-copy small { font-size: 9px; }
  html body[class].analysis-active main { padding: 10px; gap: 12px; }
  html body[class].analysis-active .board-panel { padding: 7px; border-radius: 7px; }
  html body[class].analysis-active .card { padding: 14px; border-radius: 8px; }
  html body[class] .analysis-tabs button { font-size: 12px; }
  html .summary-card h2 { font-size: 18px; }
  html body[class].analysis-active .summary-grid > div { padding: 10px; }
  html .summary-grid span { font-size: 12px; }
  html .category-counts .cat { padding: 6px; min-height: 42px; gap: 5px; }
  html .category-counts .cat span { font-size: 11px; }
  html .opening-trainer-view, html .discovery-lab-view { padding: 10px; }
  html .repertoire-home-card { padding: 16px; }
  html .repertoire-home-head b { font-size: 24px; }
  html .repertoire-summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  html .repertoire-summary-strip div { padding: 12px; }
  html .repertoire-summary-strip b { font-size: 22px; }
  html .rep-dashboard-card { padding: 16px; min-height: 0; }
  html .rep-card-copy > b { font-size: 21px; }
  html .rep-card-badge { border-radius: 5px; }
  html .rep-card-stats span { font-size: 11px; }
  html .rep-extra-card { padding: 14px; }
  html .trainer-board-card { padding: 8px; border-radius: 8px; }
  /* The legacy mobile block hides the entire trainer head with !important. */
  html body.opening-trainer-active .trainer-board-card .trainer-head {
    display: block !important;
    padding: 3px 4px 1px;
    margin: 0;
  }
  html .trainer-board-card #trainerMeta { font-size: 10px; line-height: 1.4; letter-spacing: .05em; }
  html .trainer-board-card #trainerTitle { font-size: 17px; line-height: 1.3; margin: 4px 0 0; overflow-wrap: anywhere; }
  html .line-builder-panel { padding: 12px; border-radius: 7px; }
  html .trainer-board-card.learn-mode .line-builder-panel { padding: 4px 0; }
  html .practice-card, html .practice-control-strip { padding: 12px; gap: 12px; }
  html .practice-main-prompt b { font-size: 21px; }
  html .practice-main-prompt { padding: 0; }
  html .practice-main-prompt .practice-eyebrow { font-size: 10px; }
  html .practice-support { font-size: 12px; }
  html .practice-moment { padding: 10px; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; }
  html .practice-moment em { grid-column: 2; white-space: normal; }
  html .practice-idea { padding: 12px; }
  html .practice-idea p, html .practice-card p { font-size: 13px; }
  html .practice-mini-actions :is(button, summary) { min-height: 44px; font-size: 12px; }
  /* Anchor the expanded menu to the complete action group. The Details button
   * can move between flex rows on narrow phones, so centering on that button
   * can put part of the menu outside the panel. */
  html .practice-mini-actions { position: relative; }
  html .practice-details { position: static; }
  html .practice-details > div {
    left: 0;
    right: 0;
    transform: none;
    min-width: 0;
    max-width: 100%;
  }
  html .candidate-moves :is(span, small) { font-size: 11px; }
  html .candidate-moves :is(strong, i, em) { font-size: 12px; }
  html .candidate-moves button[data-uci] { min-height: 44px; }
  html .blunder-choice-box .choice-head b, html .discovery-hero b { font-size: 25px; }
  html .blunder-choice-box .choice-head p, html .discovery-hero p { font-size: 13px; }
  html body.learning-choice main { padding-top: 12px; }
  html body.learning-choice .learning-center-card { margin-top: 0; }
  html .blunder-choice-card { padding: 14px !important; }
  html body.learning-choice .blunder-choice-grid.two-option .blunder-choice-card {
    border-radius: 6px !important;
    padding: 14px !important;
  }
  html .blunder-choice-card b { font-size: 20px; }
  html .discovery-choice-card { padding: 16px; min-height: 0; }
  html .profile-row { background: #2a3427; border-color: #4c5f42; }
  html .landing { padding: 24px 12px 48px; }
  html .landing-stage { gap: 20px; }
  html .landing .landing-card { padding: 26px 18px; border-radius: 10px; }
  html .landing h1 { font-size: 34px; line-height: 1.1; }
  html .landing p { font-size: 15px; line-height: 1.5; }
  html .landing-benefits { gap: 8px 14px; margin: 18px auto; }
  html .landing-benefits span { font-size: 11px; }
  html .landing .auth-card { padding: 16px; }
  html .auth-head b { font-size: 20px; }
  html .auth-card input { font-size: 16px; min-height: 46px; }
  html .landing-search input { font-size: 16px; }
}

@media (max-width: 380px) {
  html .daily-mission-grid { grid-template-columns: 1fr; }
  html .category-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html .landing .landing-card { padding: 22px 14px; }
  html .landing h1 { font-size: 30px; }
}

html .coach-v2 .coach-explanation-source {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

/* Full error context belongs beside the failed game, outside the compact CTA. */
html .analysis-request-error {
  display: block;
  grid-column: 1 / -1;
  min-width: 0;
  padding: 9px 0 0;
  color: var(--red);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  html *, html *:before, html *:after { scroll-behavior: auto; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Game review uses one clear reading order: board, evaluation, controls,
 * critical lesson, then optional statistics. The numeric evaluation owns space
 * below the board instead of floating outside the narrow evaluation bar. */
html body[class].analysis-active .board-panel { align-self: start; }
@media (min-width: 1251px) {
  html body[class].analysis-active[data-active-tab="coach"] .board-panel.coach-board-sticky {
    position: sticky;
    top: var(--coach-board-top);
  }
}
html .board-evaluation {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 30px;
  padding: 5px 0 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
html .board-evaluation #evalNumber {
  position: static;
  left: auto !important;
  top: auto !important;
  bottom: auto;
  transform: none !important;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
html body.analysis-active #eval { display: none; }
html .loss-report-jump {
  min-height: 44px;
  padding: 9px 12px;
  border-radius: 5px;
  font-size: 13px;
  background: #473933;
  border-color: #786052;
  box-shadow: none;
}
@media (max-width: 900px) {
  html body.analysis-active :is(.mobile-board-controls, .mobile-review-strip, .mobile-move-nav) {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  html body.analysis-active .mobile-board-controls { margin-top: 12px; }
  html body.analysis-active .mobile-review-strip { gap: 12px; margin-top: 0; }
  html body.analysis-active .mobile-move-nav { grid-template-columns: 1fr 1fr 44px 1fr 1fr; gap: 7px; margin-bottom: 0; }
  html body.analysis-active .mobile-move-nav button {
    min-width: 44px;
    min-height: 44px;
    padding: 6px;
    font-size: 24px;
    line-height: 1;
  }
  html body.analysis-active .mobile-move-nav .settingsGear { font-size: 18px; }
  /* A wider system font must not make the last tab exceed the phone width. */
  html body.analysis-active .mobile-tabs-card {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  html body.analysis-active .mobile-tabs-card button {
    min-width: 0;
    min-height: 44px;
    padding: 0 2px;
    font-size: 13px;
  }
  html body.analysis-active .mobile-review-strip .loss-report { margin: 0; padding: 12px; }
  html body.analysis-active .mobile-review-strip .loss-report b {
    font-size: 16px;
    line-height: 1.3;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  html body.analysis-active .mobile-review-strip .loss-report p { font-size: 14px; }
  html body.analysis-active .mobile-review-training {
    min-height: 44px;
    border-radius: 5px;
    border-color: #6d8854;
    background: #405d30;
    color: #f0f6e9;
    font-size: 14px;
    box-shadow: none;
  }
  html body.analysis-active .review-overview-stats { gap: 14px; padding-top: 4px; }
  html body.analysis-active .review-overview-stats div {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  html body.analysis-active .review-overview-stats span {
    font-size: 12px;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0;
  }
  html body.analysis-active .review-overview-stats b { margin-top: 2px; font-size: 22px; }
  html body.analysis-active .review-quality-details { border-top: 1px solid var(--line); }
  html body.analysis-active .review-quality-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    cursor: pointer;
    list-style: none;
    color: #cfdcc7;
    font-size: 13px;
    font-weight: 650;
  }
  html body.analysis-active .review-quality-details > summary::-webkit-details-marker { display: none; }
  html body.analysis-active .review-quality-details > summary::after { content: '+'; font-size: 20px; }
  html body.analysis-active .review-quality-details[open] > summary::after { content: '−'; }
  html body.analysis-active .review-quality-details .eval-graph { margin-bottom: 12px; border-radius: 5px; }
  html body.analysis-active .review-chip { min-height: 44px; border-radius: 4px; }
  html body.analysis-active .review-chip b { border-radius: 3px; }
  html body[class].analysis-active .summary-card {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  html body.analysis-active .summary-card > h2 { display: none; }
  html body.analysis-active .summary-mobile-accordion { gap: 0; background: transparent; }
  html body.analysis-active .summary-section {
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
  }
  html body.analysis-active .summary-section-toggle { min-height: 44px; padding: 10px 4px; }
  html body.analysis-active .summary-section-body { padding: 0 0 12px; }
  html body.analysis-active .summary-section .train-mistakes { margin: 0; padding: 10px; border-radius: 5px; }
  html body.correction-focus .mobile-board-controls { display: none !important; }
}

/* The board and game verdict can refer to different moves. Keep the selected
 * move beside its current evaluation, and identify the stored review chart. */
html .board-evaluation { justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
html .board-current-position { color: #e1eada; font-size: 13px; line-height: 1.4; }
html .board-evaluation-value { display: flex; align-items: baseline; gap: 8px; }
html body.analysis-active .eval-graph[data-plies] { margin-top: 30px; }
html body.analysis-active .eval-graph-heading {
  position: absolute;
  left: 0;
  top: -23px;
  display: block;
  height: 20px;
  color: #b9c6b1;
  font-size: 12px;
  line-height: 20px;
  text-transform: none;
  letter-spacing: 0;
}
html body.analysis-active .train-mistakes {
  background: var(--surface-inset);
  border-color: var(--line);
  border-radius: 7px;
  box-shadow: none;
}
html body.analysis-active .train-mistakes .training-controls button {
  min-height: 44px;
  padding: 9px 12px;
  border-radius: 5px;
  background: #2c372c;
  border-color: #53644a;
  color: #e2ecda;
  box-shadow: none !important;
}
html body.analysis-active .train-mistakes .training-controls .tryVariation {
  background: #405d30;
  border-color: #6d8854;
}
html body.analysis-active .train-mistakes .btn-icon { background: transparent; color: inherit; border-radius: 0; }
@media (max-width: 900px) {
  /* The original global settings rule fixes both dimensions with !important. */
  html body.analysis-active .mobile-move-nav .settingsGear {
    width: 44px !important;
    min-height: 44px !important;
    height: 44px;
    font-size: 18px !important;
  }
}

/* Feedback height changes must not toggle a classic scrollbar and resize the board. */
html:has(body.opening-trainer-active) { scrollbar-gutter: stable; }