/* ChessReviewMaxx — cool slate-blue dark theme.
   Note: --green/--green-hi/--green-dark are the historical names for the site's
   PRIMARY accent, kept as-is so every existing var(--green...) reference in this
   file and in js/*.js repaints automatically. The accent itself is blue now —
   a hue rotation of the original chess.com green (same saturation/lightness,
   hue moved to 210°), not a new colour picked by eye. */
:root {
  --bg: #282c33;
  --panel: #202328;
  --panel-2: #1b1e23;
  --panel-3: #30353e;
  --border: #333841;
  --text: #eeedec;
  --text-dim: #b6b2ac;
  --text-faint: #8b8781;
  --green: #4c81b6;
  --green-hi: #5a96d1;
  --green-dark: #345f8a;
  --board-light: #dce8f5;
  --board-dark: #3f78b0;
  --last-move: rgba(255, 235, 90, 0.42);
  --accent-blue: #5b8baf;
  --shadow: 0 8px 30px rgba(10, 16, 26, 0.4);
  --radius: 8px;
  /* The colour that subtle overlays are made of. Light over a dark ground,
     dark over a light one — named so every such rule flips with the theme
     instead of being written twice. */
  --tint: 255, 255, 255;
  --chart-grid: rgba(var(--tint), 0.08);
  --chart-axis: rgba(var(--tint), 0.16);
  --hover: #4a4744;      /* a surface one step brighter than --panel-3 */
  --on-accent: #1a2a3a;  /* text that sits on the accent colour */
  --sev-high-bg: #3f1c1a;   --sev-high-fg: #ff8f7a;
  --sev-medium-bg: #3c3216; --sev-medium-fg: #f0c15c;
  --sev-low-bg: #233016;    --sev-low-fg: #a9d178;
}

/* Light theme. The palette is the same set of roles in the other direction; the
   board keeps its own colours, as it does on every chess site. Dark stays the
   default — data-theme is stamped before first paint from the same key
   js/preferences.js writes, so switching never flashes the wrong ground. */
:root[data-theme="light"] {
  --bg: #eef1f6;
  --panel: #ffffff;
  --panel-2: #f4f6fa;
  --panel-3: #e4e9f0;
  --border: #d3dae4;
  --text: #161b22;
  --text-dim: #4a5461;
  --text-faint: #6f7985;
  --green: #2f6ca8;
  --green-hi: #1f5c97;
  --green-dark: #2b6098;
  --accent-blue: #2f6ca8;
  --shadow: 0 8px 26px rgba(23, 35, 54, 0.10);
  --tint: 22, 32, 48;
  --chart-grid: rgba(22, 32, 48, 0.10);
  --chart-axis: rgba(22, 32, 48, 0.24);
  --hover: #d7dee8;
  --on-accent: #ffffff;
  --sev-high-bg: #fdeceb;   --sev-high-fg: #a3251c;
  --sev-medium-bg: #fbf1da; --sev-medium-fg: #7f5c11;
  --sev-low-bg: #ecf6e4;    --sev-low-fg: #43711f;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
}
a { color: var(--green-hi); text-decoration: none; }
a:hover { text-decoration: underline; }
b { color: var(--text); }
code {
  background: var(--panel-2); padding: 1px 5px; border-radius: 4px;
  font-size: 0.85em; color: var(--green-hi);
}

/* ---------- Topbar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 22px; background: var(--panel-2);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-piece { width: 30px; height: 30px; }
.brand-name { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }
.brand-accent { color: var(--green); }

.site-footer {
  text-align: center; padding: 22px; color: var(--text-faint); font-size: 12.5px;
}
.tagline { color: var(--text-faint); font-size: 13px; }

/* ---------- Screens ---------- */
#app { max-width: 1180px; margin: 0 auto; padding: 24px 18px 60px; }
.screen { display: none; }
.screen.active { display: block; animation: fade 0.25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow);
}

/* ---------- Setup ---------- */
.setup-hero { text-align: center; margin: 18px 0 24px; }
.setup-hero h1 { font-size: 34px; margin: 0 0 8px; letter-spacing: -0.8px; }
.setup-hero .sub { color: var(--text-dim); max-width: 680px; margin: 0 auto; }

/* home screen: reports list */
.home-hero { text-align: center; margin: 18px 0 20px; }
.home-hero h1 { font-size: 30px; margin: 0 0 6px; letter-spacing: -0.6px; }
.home-hero .sub { color: var(--text-dim); }
.home-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.home-report-list { display: flex; flex-direction: column; gap: 8px; }
.home-report-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }
/* The name and its details take whatever width is left, so the controls sit at
   the right edge of every row at the same place — a row with a file name and a
   row without one must not put the bin button in different places. */
.home-report-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.home-report-meta { font-size: 12.5px; color: var(--text-dim); }
.home-report-actions { flex: none; margin-left: auto; display: flex; gap: 6px; }
.home-report-row .home-select { flex: none; }
.home-notify-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; background: rgba(224,160,0,.1); border: 1px solid rgba(224,160,0,.35); border-radius: var(--radius); flex-wrap: wrap; }
.home-notify-text { font-size: 14px; }

.hero-pillars {
  /* same total width as the setup card below; grid keeps the three columns
     exactly equal instead of letting a wrapped item stretch to fill its row */
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  max-width: 720px; margin: 20px auto 0;
}
@media (max-width: 720px) { .hero-pillars { grid-template-columns: 1fr; } }
.pillar {
  display: flex; align-items: flex-start; gap: 10px; text-align: left; min-width: 0;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 13px 15px;
}
.pillar-ico { font-size: 20px; line-height: 1.2; flex: none; }
.pillar b { display: block; font-size: 14px; margin-bottom: 2px; }
.pillar small { color: var(--text-faint); font-size: 12.5px; line-height: 1.45; }
.pillar em { color: var(--text-dim); font-style: italic; }
.setup-card { max-width: 720px; margin: 0 auto; }

.field { margin-bottom: 16px; }
.field > label { display: block; font-weight: 600; margin-bottom: 7px; font-size: 14px; }
.hint { color: var(--text-faint); font-size: 12.5px; margin-top: 4px; }
.hint.inline { font-weight: 400; color: var(--text-faint); margin-left: 6px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; }

input[type="text"], select {
  width: 100%; padding: 11px 12px; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 8px; color: var(--text);
  font-size: 15px; outline: none;
}
input[type="text"]:focus, select:focus { border-color: var(--green); }
.username-row { display: flex; gap: 8px; }
.username-row input { flex: 1; }
.username-row { flex-wrap: wrap; }
.analysis-expectation { margin: 9px 0 2px; color: var(--text-faint); font-size: 12.5px; text-align: center; }
.advanced-filters { grid-column: 1 / -1; margin-bottom: 16px; padding: 4px 14px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; }
.advanced-filters summary { cursor: pointer; padding: 8px 0; font-weight: 600; }
.advanced-filters[open] summary { border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.advanced-filters > .grid-2 > .field { margin-bottom: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--border);
  padding: 7px 12px; border-radius: 20px; font-size: 13.5px; user-select: none;
}
.chip:hover { border-color: var(--text-faint); }
.chip input { accent-color: var(--green); }

input[type="range"] { width: 100%; accent-color: var(--green); }

.engine-settings {
  margin: 8px 0 18px; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 8px; padding: 4px 14px;
}
.engine-settings summary { cursor: pointer; padding: 10px 0; font-weight: 600; }
.engine-settings[open] summary { border-bottom: 1px solid var(--border); margin-bottom: 12px; }

.btn {
  cursor: pointer; border: none; border-radius: 8px; font-weight: 700;
  padding: 11px 18px; font-size: 15px; color: #fff; transition: background 0.15s, transform 0.05s;
}
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--green); color: var(--on-accent); }
.btn.primary:hover { background: var(--green-hi); }
.btn.ghost { background: var(--panel-3); color: var(--text); }
.btn.ghost:hover { background: var(--hover); }
.btn.big { width: 100%; padding: 15px; font-size: 17px; margin-top: 6px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.error-msg { color: #ff8f7a; margin-top: 10px; font-size: 14px; min-height: 18px; }
.disclaimer { text-align: center; color: var(--text-faint); font-size: 12.5px; margin-top: 20px; }
.user-ok { color: var(--green-hi); }
.user-bad { color: #ff8f7a; }

/* ---------- Progress ---------- */
.progress-card { max-width: 560px; margin: 60px auto; text-align: center; }
.progress-card h2 { margin: 0 0 18px; }
.progress-bar {
  height: 14px; background: var(--panel-2); border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border);
}
.progress-fill {
  height: 100%; width: 0%; background: linear-gradient(90deg, var(--green-dark), var(--green-hi));
  transition: width 0.25s ease;
}
.progress-fill.indeterminate {
  width: 100% !important; transition: none;
  background: linear-gradient(90deg, transparent, var(--green-hi), transparent);
  background-size: 40% 100%; background-repeat: no-repeat;
  animation: indet 1.1s infinite linear;
}
@keyframes indet { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } }

.range-row input:disabled { opacity: 0.4; }
.games-count-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.all-matching-chip { margin: 0; }
.progress-detail { margin-top: 14px; font-size: 15px; color: var(--text); }
#cancel-btn { margin-top: 22px; }
.example-report-picker { margin-top: 14px; }
.example-report-picker label { display: block; margin-bottom: 6px; color: var(--text-dim); font-size: 13px; font-weight: 600; }

/* ---------- Results dashboard ---------- */
.results-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 18px;
}
.results-head h2 { margin: 0; font-size: 24px; }
.results-head .who { color: var(--text-dim); font-size: 14px; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 18px; }
.tile {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; text-align: center;
}
.tile .val { font-size: 30px; font-weight: 800; line-height: 1; }
.tile .lbl { color: var(--text-faint); font-size: 12.5px; margin-top: 7px; text-transform: uppercase; letter-spacing: 0.5px; }
.tile .sub { font-size: 12px; color: var(--text-dim); margin-top: 4px; }

.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.dash-grid.thirds { grid-template-columns: 1fr 1fr; }
.panel-title { font-size: 15px; font-weight: 700; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.panel-title .icon { font-size: 17px; }

/* classification breakdown bars */
.class-row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; font-size: 13.5px; }
.class-dot { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.class-name { width: 92px; flex: none; color: var(--text-dim); }
.class-bar { flex: 1; height: 9px; background: var(--panel-2); border-radius: 5px; overflow: hidden; }
.class-bar > span { display: block; height: 100%; border-radius: 5px; }
.class-count { width: 72px; text-align: right; flex: none; font-variant-numeric: tabular-nums; display: flex; justify-content: flex-end; gap: 7px; }
.class-count b { font-weight: 700; }
.class-count small { width: 38px; color: var(--text-faint); }

/* phase / meter bars */
.meter { margin-bottom: 14px; }
.meter-head { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 5px; }
.meter-track { height: 10px; background: var(--panel-2); border-radius: 6px; overflow: hidden; }
.meter-fill { height: 100%; background: linear-gradient(90deg, var(--green-dark), var(--green-hi)); border-radius: 6px; }

/* recommendations */
.rec { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.rec:last-child { border-bottom: none; }
.rec-badge { flex: none; width: 8px; border-radius: 4px; }
.rec.high .rec-badge { background: #d0413b; }
.rec.medium .rec-badge { background: #f0c15c; }
.rec.low .rec-badge { background: var(--green); }
.rec-body h4 { margin: 0 0 3px; font-size: 14px; }
.rec-body p { margin: 0; color: var(--text-dim); font-size: 13.5px; }

/* tables */
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th { text-align: left; color: var(--text-faint); font-weight: 600; padding: 7px 8px; border-bottom: 1px solid var(--border); font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; }
table.data td { padding: 8px; border-bottom: 1px solid var(--border); }
table.data tr:last-child td { border-bottom: none; }
/* longitudinal improvement measurement */
.progress-periods { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 12px; }
.progress-periods > div { display: grid; gap: 3px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); }
.progress-periods span, .progress-highlights > div > span { color: var(--text-faint); font-size: 11px; font-weight: 750; letter-spacing: .4px; text-transform: uppercase; }
.progress-periods b { font-size: 14px; }
.progress-periods small { color: var(--text-dim); font-size: 12px; }
.progress-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 12px; }
.progress-highlights > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 9px 11px; border-radius: 8px; background: rgba(var(--tint), .025); }
.progress-highlights > div > span:first-child { width: 100%; }
.progress-chip { padding: 4px 7px; border-radius: 999px; font-size: 12px; }
.progress-chip.progress-up { color: #a9cdea; background: rgba(76,129,182,.18); }
.progress-chip.progress-down { color: #f0b0aa; background: rgba(208,65,59,.16); }
.progress-table { margin-top: 12px; font-variant-numeric: tabular-nums; }
.progress-table td:first-child { min-width: 155px; }
.progress-table td small { display: block; margin-top: 2px; color: var(--text-faint); font-size: 11px; }
.progress-status { display: block; font-size: 12px; font-weight: 750; }
.progress-up { color: var(--green-hi); }
.progress-down { color: #ed9189; }
.progress-steady { color: var(--text-dim); }
.progress-insufficient td { color: var(--text-faint); font-size: 12px; }
.progress-method { margin: 10px 0 0; line-height: 1.4; }
/* coaching: goals, repertoire and self-review notes */
.goal-list { display: grid; gap: 8px; margin: 12px 0; }
.goal-row { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(110px, 1.3fr) 92px; align-items: center; gap: 12px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); }
.goal-row small { display: block; margin-top: 3px; color: var(--text-faint); font-size: 11px; }
.goal-track { height: 9px; overflow: hidden; border-radius: 8px; background: rgba(var(--tint), .1); }
.goal-track span { display: block; height: 100%; border-radius: inherit; background: var(--green-hi); }
.goal-number { text-align: right; font-weight: 750; font-variant-numeric: tabular-nums; }
.coaching-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.coaching-subtitle { padding-top: 12px; border-top: 1px solid var(--border); color: var(--text-dim); font-weight: 750; font-size: 13px; }
.annotation-summary { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.annotation-summary span { padding: 4px 8px; border-radius: 999px; background: var(--panel-2); color: var(--text-dim); font-size: 12px; }
.annotation-summary b { color: var(--text); }
.repertoire-root { margin-bottom: 8px; color: var(--text-dim); font-size: 12px; }
.repertoire-tree { list-style: none; margin: 0; padding: 0 0 0 13px; border-left: 1px solid var(--border); }
.repertoire-tree li { margin: 6px 0; }
.repertoire-tree li > div { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.repertoire-tree li > div > b { color: var(--green-hi); min-width: 35px; }
.repertoire-tree li > div > span { color: var(--text-dim); font-size: 12px; }
.repertoire-tree.depth-2 { display: none; }
.opponent-style { margin-top: 18px; padding-top: 6px; border-top: 1px solid var(--border); }
.opponent-style h4 { margin: 10px 0 8px; }
.move-note { margin-top: 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; background: rgba(var(--tint), .025); }
.move-note summary { cursor: pointer; color: var(--text-dim); font-size: 12px; font-weight: 700; }
.move-note select, .move-note textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 8px; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 7px; font: inherit; font-size: 12px; }
.move-note textarea { min-height: 56px; resize: vertical; }
.move-note .btn { margin-top: 8px; }
.acc-pill { display: inline-block; padding: 2px 8px; border-radius: 12px; font-weight: 700; font-size: 12.5px; color: #0f1f2e; }

/* game list */
.game-list { margin-top: 6px; }
.game-row {
  display: grid; grid-template-columns: 26px 1fr auto auto; gap: 12px; align-items: center;
  padding: 11px 14px; border: 1px solid var(--border); border-radius: 9px;
  margin-bottom: 8px; cursor: pointer; background: var(--panel); transition: border-color .12s, background .12s;
}
.game-row:hover { border-color: var(--green); background: #2c2b28; }
.result-dot { width: 12px; height: 12px; border-radius: 50%; }
.result-win { background: var(--green); }
.result-loss { background: #d0413b; }
.result-draw { background: #9a9793; }
.game-info .opp { font-weight: 600; }
.game-info .meta { color: var(--text-faint); font-size: 12.5px; }
.game-acc { text-align: right; }
.game-acc .num { font-weight: 800; font-size: 17px; }
.game-acc .cap { color: var(--text-faint); font-size: 11px; text-transform: uppercase; }
.game-errs { display: flex; gap: 6px; font-size: 12px; }
.err-chip { padding: 2px 7px; border-radius: 6px; font-weight: 700; color: #1a1a1a; }

.section-title { font-size: 18px; font-weight: 700; margin: 26px 0 12px; }

/* ---------- Review screen ---------- */
.review-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }
.review-layout { display: grid; grid-template-columns: auto 340px; gap: 18px; align-items: start; }
.board-wrap { display: flex; gap: 10px; align-items: stretch; }

/* eval bar */
.eval-bar {
  width: 26px; border-radius: 6px; overflow: hidden; background: #403e3b;
  position: relative; flex: none; border: 1px solid var(--border);
}
.eval-bar-white { position: absolute; bottom: 0; left: 0; right: 0; background: #f2f2f2; transition: height 0.3s ease; }
.eval-bar-num { position: absolute; left: 0; right: 0; text-align: center; font-size: 10px; font-weight: 700; z-index: 2; color: #111; padding: 2px 0; }
.eval-bar-num.low { bottom: 3px; color: #eee; }

/* board */
.board { position: relative; width: min(70vw, 560px); aspect-ratio: 1 / 1; }
.board-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); border-radius: 6px; overflow: hidden; }
.board-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
.sq { position: relative; }
.sq.light { background: var(--board-light); }
.sq.dark { background: var(--board-dark); }
.sq.last-move.light { background: #f5f582; }
.sq.last-move.dark { background: #bbcb44; }
.piece { position: absolute; inset: 6%; width: 88%; height: 88%; z-index: 3; }
.coord { position: absolute; font-size: 10px; font-weight: 700; z-index: 3; }
.coord.rank { top: 2px; left: 3px; }
.coord.file { bottom: 1px; right: 3px; }
.sq.light .coord { color: #6d97c2; }
.sq.dark .coord { color: #eaf2fb; }

.move-badge {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff; z-index: 5;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}

/* review side panel */
.review-panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.players-bar { display: flex; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.player-acc { text-align: center; }
.player-acc .num { font-size: 20px; font-weight: 800; }
.player-acc .who { font-size: 12px; color: var(--text-faint); }

.feedback { padding: 14px; border-bottom: 1px solid var(--border); min-height: 92px; }
.feedback .fb-label { font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.feedback .fb-text { color: var(--text-dim); font-size: 13.5px; margin-top: 6px; }
.feedback .fb-best { margin-top: 8px; font-size: 13px; color: var(--text); }

.movelist { max-height: 320px; overflow-y: auto; padding: 8px 6px; }
.move-pair { display: grid; grid-template-columns: 34px 1fr 1fr; gap: 2px; align-items: center; }
.move-no { color: var(--text-faint); font-size: 12.5px; text-align: right; padding-right: 6px; }
.move-cell { padding: 4px 8px; border-radius: 5px; cursor: pointer; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.move-cell:hover { background: var(--panel-3); }
.move-cell.active { background: var(--green-dark); color: #fff; }
.move-cell .msym { font-size: 12px; font-weight: 800; }

.review-nav { display: flex; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--border); }
.review-nav .btn { flex: 1; padding: 9px; }

.eval-graph { margin-top: 16px; }
.eval-graph svg { width: 100%; height: 130px; display: block; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }

.back-link { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--text-dim); font-weight: 600; }
.back-link:hover { color: var(--text); }

/* worst moves grid */
.worst-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.worst-card { background: var(--panel); border: 1px solid var(--border); border-radius: 9px; padding: 12px; cursor: pointer; }
.worst-card:hover { border-color: var(--green); }
.worst-card .wm-head { display: flex; justify-content: space-between; font-size: 13px; }
.worst-card .wm-move { font-weight: 700; }
.worst-card .wm-meta { color: var(--text-faint); font-size: 12px; margin-top: 4px; }

@media (max-width: 900px) {
  .grid-2, .dash-grid, .dash-grid.thirds { grid-template-columns: 1fr; }
  .review-layout { grid-template-columns: 1fr; }
  .review-panel { max-width: 560px; }
}

/* ===================== v2 additions ===================== */

/* number inputs & ranges */
.num-input {
  width: 100%; padding: 9px 10px; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 14px; outline: none;
}
.num-input:focus { border-color: var(--green); }
.range-inputs { display: flex; align-items: center; gap: 8px; }
.range-inputs .num-input { text-align: center; }
.range-inputs .dash { color: var(--text-faint); }
.range-row { display: flex; align-items: center; gap: 14px; }
.range-row input[type="range"] { flex: 1; }
.games-num { width: 96px; flex: none; }
.games-num:disabled {
  background: var(--panel-2);
  border-color: var(--bg);
  color: var(--text-faint);
  opacity: 0.55;
  cursor: not-allowed;
}

/* Manual placements become real ads only when production configuration supplies IDs. */
.ad-slot { display: grid; place-items: center; overflow: hidden; color: var(--text-faint); border: 1px solid var(--border); background: var(--panel-2); border-radius: var(--radius); }
.ad-slot-label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.ad-slot-inline { min-height: 118px; margin: 18px 0; }
.ad-slot-rail { display: none; }
@media (min-width: 1580px) {
  .ad-slot-rail { display: grid; position: fixed; top: 118px; z-index: 12; width: 160px; min-height: 600px; border-radius: 8px; }
  .ad-slot-left { left: max(12px, calc(50% - 780px)); }
  .ad-slot-right { right: max(12px, calc(50% - 780px)); }
}

/* move-quality badges (SVG) */
.qbadge { display: inline-flex; vertical-align: middle; line-height: 0; }
.qbadge svg { display: block; }
.qbadge.on-board { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; z-index: 6;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.qbadge.on-board svg { width: 22px; height: 22px; }
.qbadge.inline { width: 15px; height: 15px; }
.qbadge.inline svg { width: 15px; height: 15px; }

/* board interactivity */
.board { cursor: default; user-select: none; }
.piece { cursor: grab; -webkit-user-drag: none; }
.piece.dragging { cursor: grabbing; pointer-events: none; transition: none; }
.sq.sel { box-shadow: inset 0 0 0 3px rgba(255, 235, 90, 0.65); }
/* user right-click square highlight (colour set inline via --user-hl) */
.sq.user-hl::before {
  content: ''; position: absolute; inset: 0; background: var(--user-hl);
  z-index: 1; pointer-events: none;
}
.user-arrow { pointer-events: none; }
.sq.target::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 32%; height: 32%;
  transform: translate(-50%, -50%); border-radius: 50%; background: rgba(20, 20, 20, 0.22); z-index: 2;
}
.sq.target-capture::after {
  content: ''; position: absolute; inset: 8%; border: 4px solid rgba(20, 20, 20, 0.22);
  border-radius: 50%; z-index: 2;
}

/* eval-bar number contrast (white-ahead sits over white fill) */
.eval-bar-num { color: #eee; }
.eval-bar-num.low { color: #141414; }

/* move list cells with badge + clock */
.move-cell { padding: 4px 7px; border-radius: 5px; cursor: pointer; font-size: 14px;
  display: flex; align-items: center; gap: 5px; }
.move-cell.active { background: var(--green-dark); color: #fff; }
.move-cell .msan { font-weight: 600; }
.mclock { margin-left: auto; font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.move-cell.active .mclock { color: #dfe8d4; }

/* clickable variations in feedback */
.varline { line-height: 1.9; }
.var-move { cursor: pointer; padding: 1px 4px; border-radius: 4px; color: var(--green-hi); font-weight: 600; white-space: nowrap; }
.var-move:hover { background: var(--green-dark); color: #fff; }

/* explore mode */
.explore-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.explore-tag { background: var(--accent-blue); color: #fff; font-size: 11px; font-weight: 700;
  padding: 2px 9px; border-radius: 10px; flex: none; }
.explore-line { flex: 1; min-width: 120px; color: var(--text); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }
.explore-actions { display: flex; gap: 6px; }
.btn.sm { padding: 6px 10px; font-size: 12px; }

/* live engine readout */
.engine-line { min-height: 22px; margin-top: 9px; font-size: 13.5px; color: var(--text-dim); }
.eng-tag { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; background: var(--panel-3);
  color: var(--text-faint); padding: 2px 7px; border-radius: 8px; margin-right: 7px; }
.eng-best { color: var(--green-hi); font-weight: 700; }
.eng-thinking { color: var(--text-faint); font-style: italic; }

/* charts */
.chart-box { width: 100%; }
.chart-svg { display: block; width: 100%; overflow: visible; }
.chart-axis-txt, .chart-axis-sub { fill: var(--text-faint); font-size: 10px; }
.chart-series-lbl { font-size: 11px; font-weight: 800; }
.chart-val-lbl { fill: var(--text-dim); font-size: 11px; font-weight: 700; }
.donut-center-top { fill: var(--text); font-size: 22px; font-weight: 800; }
.donut-center-bot { fill: var(--text-faint); font-size: 10px; text-transform: uppercase; letter-spacing: .5px; }
/* Counts written on the slices themselves; the ink colour is set per slice. */
.donut-slice-lbl { font-size: 12px; font-weight: 800; }
.donut-slice-sub { font-size: 10px; opacity: .82; }
.chart-legend { display: flex; gap: 16px; flex-wrap: wrap; margin: 4px 0 10px; font-size: 12.5px; color: var(--text-dim); }
.leg-item { display: inline-flex; align-items: center; }
.leg-sw, .tip-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.chart-tip {
  position: fixed; z-index: 200; pointer-events: none; background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 10px; font-size: 12.5px; color: var(--text);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); display: none; max-width: 240px;
}
.tip-head { font-weight: 700; margin-bottom: 3px; }

/* improvement plan */
.plan-list { display: flex; flex-direction: column; }
.plan-item { display: flex; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--border); }
.plan-item:last-child { border-bottom: none; }
.plan-num { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--panel-3);
  display: flex; align-items: center; justify-content: center; font-weight: 800; }
.plan-item.high .plan-num { background: var(--sev-high-bg); color: var(--sev-high-fg); }
.plan-item.medium .plan-num { background: var(--sev-medium-bg); color: var(--sev-medium-fg); }
.plan-body { flex: 1; }
.plan-head { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.plan-head h4 { margin: 0; font-size: 15px; }
.sev-tag { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; padding: 2px 8px; border-radius: 10px; font-weight: 700; flex: none; }
.sev-high { background: var(--sev-high-bg); color: var(--sev-high-fg); }
.sev-medium { background: var(--sev-medium-bg); color: var(--sev-medium-fg); }
.sev-low { background: var(--sev-low-bg); color: var(--sev-low-fg); }
.plan-problem { margin: 6px 0; color: var(--text-dim); font-size: 13.5px; }
.plan-actions { margin: 6px 0 10px; padding-left: 18px; font-size: 13.5px; }
.plan-actions li { margin-bottom: 4px; }
.plan-link { background: none; border: 1px solid var(--border); color: var(--green-hi); border-radius: 7px;
  padding: 6px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.plan-link:hover { border-color: var(--green); background: var(--panel-2); }

/* opening study cards */
.study-list { display: flex; flex-direction: column; gap: 12px; }
.study-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 9px; padding: 12px 14px; }
.study-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; }
.study-name { font-weight: 700; }
.chip-color { font-size: 11px; text-transform: capitalize; padding: 1px 9px; border-radius: 10px; background: var(--panel-3); color: var(--text-dim); }
.chip-color.white { background: #e9e6df; color: #2a2825; }
.chip-color.black { background: #45423e; color: #e9e6df; }
.study-stats { color: var(--text-faint); font-size: 12px; margin-left: auto; }
.study-line { font-size: 13px; margin-top: 4px; color: var(--text-dim); font-family: ui-monospace, Menlo, Consolas, monospace; }
.study-fix { font-size: 13.5px; margin-top: 6px; color: var(--text); }
.slbl { color: var(--text-faint); font-weight: 600; margin-right: 4px; }
.study-link { margin-top: 10px; }
.study-tips { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--text-dim); }
.study-tips li { margin-bottom: 3px; }

/* criteria summary */
.criteria-card { margin-bottom: 16px; }
.criteria-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 18px; }
.crit { display: flex; flex-direction: column; gap: 2px; }
.crit-k { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-faint); }
.crit-v { font-size: 13.5px; font-weight: 600; }

/* results toolbar */
.results-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.add-games { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.add-games .num-input { width: 80px; }
.load-row { display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: 12px; }

/* in-results filter panel */
.results-filter { margin-bottom: 18px; }
.results-filter > summary { cursor: pointer; font-weight: 700; padding: 4px 0; list-style: none; }
.results-filter > summary::-webkit-details-marker { display: none; }
.results-filter[open] > summary { border-bottom: 1px solid var(--border); margin-bottom: 14px; padding-bottom: 10px; }
.filter-on { color: var(--green-hi); font-weight: 700; }
.filter-actions { display: flex; gap: 10px; margin-top: 6px; }

.empty-note { text-align: center; padding: 24px; color: var(--text-dim); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.filter-hint { color: var(--text-faint); font-weight: 400; font-size: 12px; }
.date-filter-field .range-inputs { gap: 7px; }
.date-filter-field input[type="date"] { min-width: 0; flex: 1 1 0; width: 100%; box-sizing: border-box; padding: 9px 10px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font: inherit; font-size: 13px; outline: none; color-scheme: dark; }
.date-filter-field input[type="date"]:focus { border-color: var(--green); }
.date-filter-field .dash { flex: 0 0 auto; font-size: 16px; line-height: 1; }
.date-presets { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.date-presets button { border: 1px solid var(--border); color: var(--text-dim); background: var(--panel-2); border-radius: 999px; padding: 3px 7px; font: inherit; font-size: 11px; cursor: pointer; }
.date-presets button:hover { border-color: var(--green); color: var(--text); }
.brilliant-summary { color: var(--text-dim); margin-bottom: 12px; }
.brilliant-summary b { color: #8a63d1; font-size: 18px; }
.brilliant-list { display: grid; gap: 7px; }
.brilliant-row { width: 100%; display: grid; grid-template-columns: minmax(120px, .9fr) minmax(150px, 1.3fr) minmax(150px, 1.2fr) auto; gap: 10px; align-items: center; text-align: left; color: var(--text-dim); background: var(--panel-2); border: 1px solid var(--border); border-radius: 7px; padding: 9px 11px; font: inherit; font-size: 12.5px; cursor: pointer; }
.brilliant-row:hover { border-color: #8a63d1; background: var(--panel-3); color: var(--text); }
.brilliant-move { color: var(--text); font-weight: 700; }
.brilliant-move b { color: #8a63d1; }
@media (max-width: 720px) { .brilliant-row { grid-template-columns: 1fr; gap: 3px; } }

/* flowing move list with inline variations */
.ml-flow { line-height: 2.15; font-size: 14px; }
.mnum { color: var(--text-faint); font-weight: 600; margin: 0 1px 0 7px; font-variant-numeric: tabular-nums; }
.move-cell { display: inline-flex; align-items: center; gap: 4px; padding: 2px 5px; border-radius: 5px; cursor: pointer; font-weight: 600; }
.move-cell:hover { background: var(--panel-3); }
.move-cell.active { background: var(--green-dark); color: #fff; }
.msan { font-weight: 600; }
.mclock { font-size: 10.5px; color: var(--text-faint); margin-left: 1px; font-variant-numeric: tabular-nums; }
.move-cell.active .mclock { color: #dfe8d4; }
.varblock { color: var(--text-dim); }
.var-cell { cursor: pointer; padding: 1px 4px; border-radius: 4px; color: var(--accent-blue); font-weight: 600; }
.var-cell:hover { background: var(--panel-3); }
.var-cell.active { background: var(--accent-blue); color: #fff; }
.veval { font-size: 10.5px; color: var(--text-faint); margin-left: 3px; font-variant-numeric: tabular-nums; }
.var-cell.active .veval { color: #e2ecf5; }
.var-close { cursor: pointer; color: var(--text-faint); font-weight: 800; padding: 0 5px; border-radius: 4px; }
.var-close:hover { color: #ff8f7a; background: var(--panel-3); }

/* feedback facets */
.fb-name { font-size: 13px; color: var(--text-dim); display: inline-flex; align-items: center; gap: 8px; }
.fb-time { color: var(--text-faint); font-size: 12px; }
.fb-facet { margin-top: 7px; font-size: 13px; color: var(--text-dim); }
.fb-facet-k { display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: .4px; font-weight: 700;
  color: var(--text-faint); background: var(--panel-2); padding: 1px 7px; border-radius: 6px; margin-right: 5px; }

/* loading overlay (large saved analyses take a moment to read + parse) */
.loading-overlay {
  position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center;
  background: rgba(18, 17, 15, 0.72);
}
.loading-box {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 26px 36px; text-align: center; box-shadow: var(--shadow); min-width: 260px;
}
.loading-spinner {
  width: 34px; height: 34px; margin: 0 auto 14px; border-radius: 50%;
  border: 3px solid var(--panel-3); border-top-color: var(--green); animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-title { font-weight: 800; font-size: 16px; }
.loading-step { color: var(--text-dim); font-size: 13px; margin-top: 6px; }

/* capped, scrollable sections (opening study, endgame study, game list) */
.scroll-area { max-height: 440px; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; }
.scroll-area::-webkit-scrollbar { width: 10px; }
.scroll-area::-webkit-scrollbar-track { background: var(--panel-2); border-radius: 6px; }
.scroll-area::-webkit-scrollbar-thumb { background: var(--hover); border-radius: 6px; border: 2px solid var(--panel-2); }
.scroll-area::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
.scroll-area { scrollbar-width: thin; scrollbar-color: var(--hover) var(--panel-2); }

/* Keep the review layout a stable height as you step through moves: the
   explanation text varies a lot in length, and an unbounded panel changes the
   page height (and therefore the scroll offset) on every move. */
.feedback { max-height: 300px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #4a4744 var(--panel-2); }
.feedback::-webkit-scrollbar { width: 10px; }
.feedback::-webkit-scrollbar-track { background: var(--panel-2); border-radius: 6px; }
.feedback::-webkit-scrollbar-thumb { background: #4a4744; border-radius: 6px; border: 2px solid var(--panel-2); }
/* Reserve room for the engine line so the async best-line/explanation arriving
   does not push the eval graph down after the move has already been rendered. */
.engine-line { min-height: 76px; }

/* eval-graph move-quality dots */
.eval-graph svg { width: 100%; height: auto; display: block; }
.graph-move-dot { pointer-events: none; }

/* rating progression / correlation / projection */
.rating-tiles { margin-bottom: 14px; }
.track-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.track-chip { background: var(--panel-2); border: 1px solid var(--border); border-radius: 20px;
  padding: 5px 12px; font-size: 12.5px; color: var(--text-dim); }
.track-chip b.pos { color: #4c81b6; } .track-chip b.neg { color: #d0413b; }
.track-chip small { color: var(--text-faint); margin-left: 4px; }

.corr-list { display: flex; flex-direction: column; gap: 8px; }
.corr-row { display: grid; grid-template-columns: 1fr 120px 78px; gap: 10px; align-items: center; font-size: 13px; }
.corr-label { color: var(--text-dim); }
.corr-track { position: relative; height: 10px; background: var(--panel-2); border-radius: 5px; }
.corr-zero { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--border); }
.corr-fill { position: absolute; top: 0; bottom: 0; border-radius: 5px; }
.corr-fill.pos { background: #4c81b6; } .corr-fill.neg { background: #d0413b; }
.corr-val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.corr-val.pos { color: #4c81b6; } .corr-val.neg { color: #d0413b; }
.corr-val small { display: block; font-weight: 400; font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; }
.corr-note { margin-top: 6px; }

.projection-summary { margin-top: 10px; }
.proj-headline { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 22px; font-weight: 800; }
.proj-headline .proj-target { color: #4c81b6; }
.proj-headline small { font-size: 12.5px; font-weight: 600; color: var(--text-faint); }
.proj-items { list-style: none; padding: 0; margin: 12px 0; }
.proj-items li { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.proj-items li:last-child { border-bottom: none; }
.proj-items b { color: #4c81b6; min-width: 44px; }
.proj-items small { color: var(--text-faint); font-size: 12px; margin-left: auto; text-align: right; }

.run-title { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-faint);
  font-weight: 700; margin: 12px 0 6px; }
.run-card { border: 1px solid var(--border); border-left-width: 3px; border-radius: 8px; padding: 10px 12px; background: var(--panel-2); }
.run-card.good { border-left-color: #4c81b6; } .run-card.bad { border-left-color: #d0413b; }
.run-card.flat { border-left-color: #9a9793; }
.run-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.run-head span { color: var(--text-faint); font-size: 12px; }
.run-facts { margin-top: 5px; font-size: 12.5px; color: var(--text-dim); line-height: 1.6; }

/* line explanation blocks (solution + refutation) */
.line-lead { margin: 6px 0 8px; font-size: 13px; color: var(--text); }
.failed-line .line-lead { color: #ffb0a2; }
.line-plans { margin: 8px 0 0; font-size: 12.5px; color: var(--text-dim); }

/* sticky header for long tables inside a scroll area */
table.data.sticky-head thead th {
  position: sticky; top: 0; z-index: 1; background: var(--panel);
  box-shadow: inset 0 -1px 0 var(--border);
}
.table-total { margin-top: 8px; font-size: 12px; color: var(--text-faint); text-align: right; }

/* study extras */
.study-ideas { margin-top: 6px; }
.study-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 12px; }

/* puzzle explore mode */
.explore-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.explore-eval { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.ex-eval-bar { flex: 1; height: 12px; background: #403e3b; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); }
.ex-eval-bar > span { display: block; height: 100%; background: #f1f1f1; transition: width 0.25s ease; }
.ex-eval-txt { font-size: 13px; font-weight: 600; white-space: nowrap; }
.explore-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-faint); font-weight: 700; margin: 12px 0 6px; }
.explore-lines { display: flex; flex-direction: column; gap: 5px; }
.ex-line { display: flex; gap: 10px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 7px; cursor: pointer; font-size: 13px; align-items: baseline; }
.ex-line:hover { border-color: var(--green); background: var(--panel-2); }
.ex-line-eval { font-weight: 800; min-width: 46px; flex: none; font-variant-numeric: tabular-nums; }
.ex-line-pv { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.explore-moves { line-height: 2.1; font-size: 14px; overflow-wrap: anywhere; max-height: 200px; overflow-y: auto; }
.ex-num { color: var(--text-faint); font-weight: 600; margin: 0 1px 0 6px; }
.ex-move { cursor: pointer; padding: 2px 5px; border-radius: 5px; font-weight: 600; }
.ex-move:hover { background: var(--panel-3); }
.ex-move.active { background: var(--green-dark); color: #fff; }
/* The board's own settings live on the preferences page; this is the shortcut
   to them from the place where you notice you want them. */
.board-gear {
  position: absolute; top: 5px; right: 5px; z-index: 6;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--panel); color: var(--text-dim);
  font-size: 14px; line-height: 1; text-decoration: none; opacity: .55; transition: opacity .12s ease;
}
.board-gear:hover, .board-gear:focus-visible { opacity: 1; color: var(--text); border-color: var(--green); text-decoration: none; }

/* Paste-a-link dialog: two fields, the second only when Chess.com needs it. */
.link-game-dialog { width: min(94vw, 520px); }
.link-field { display: block; margin-top: 14px; }
.link-field span { display: block; margin-bottom: 5px; font-size: 12px; color: var(--text-dim); }
.link-field input {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 14px;
  color: var(--text); background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 8px;
}
.link-field input:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.link-error:not(:empty) { margin-top: 10px; color: #ff8f7a; }

/* ---------- Preferences ---------- */
.prefs-list { display: flex; flex-direction: column; gap: 14px; }
.pref-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 14px 16px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }
.pref-row h3 { margin: 0 0 3px; font-size: 15px; }
.pref-row p { margin: 0; font-size: 13px; color: var(--text-dim); }
.pref-control { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pref-choice { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: var(--panel-2); }
.pref-choice button { border: 0; background: transparent; color: var(--text-dim); font: inherit; font-size: 13px;
  padding: 7px 15px; cursor: pointer; }
.pref-choice button.is-on { background: var(--green-dark); color: #fff; font-weight: 700; }
.pref-volume { width: 150px; }
.sound-tests { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* One chart per unit, stacked, so each is full width and readable. */
.progress-charts { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 4px 0 18px; }
.progress-chart { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px 6px; }
.progress-chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.progress-chart-head b { font-size: 14px; }
.progress-chart-head span { font-size: 11px; color: var(--text-faint); }
/* Rating and accuracy lead the comparison table; the aspects follow. */
.progress-headline td { background: rgba(var(--tint), .035); }
.progress-headline td:first-child b { color: var(--green-hi); }

/* One chip per line: its colour, its name, and the range it actually spans in
   this report. Clicking takes the line off its chart. */
.series-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.series-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 4px 9px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--panel-2); color: var(--text); font: inherit; font-size: 12px; cursor: pointer;
}
.series-chip:hover:not(:disabled) { border-color: var(--series-color); }
.series-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--series-color); flex: none; align-self: center; }
.series-chip small { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.series-chip.is-off { opacity: .45; }
.series-chip.is-off i { background: transparent; border: 1px solid var(--series-color); }
.series-chip:disabled { cursor: default; opacity: .3; }

/* The game before the exercise reads as context, not as the line you built. */
.ex-move.is-game { color: var(--text-dim); font-weight: 500; }
.ex-move.is-anchor { border: 1px solid var(--border); color: var(--text-faint); font-weight: 600; font-size: 12px; }
.ex-move.is-anchor.active { border-color: transparent; color: #fff; }
.explore-actions { margin-top: 14px; flex-wrap: wrap; gap: 6px; }

/* Review board context */
.match-info { width: min(70vw, 596px); display: flex; gap: 8px 14px; align-items: center;
  flex-wrap: wrap; padding: 8px 10px; margin-bottom: 7px; border-radius: 7px;
  background: var(--panel-2); color: var(--text-dim); font-size: 12px; }
.match-info strong { color: var(--text); }
.board-player { width: min(70vw, 596px); display: flex; align-items: center; gap: 8px;
  min-height: 32px; padding: 5px 8px; font-size: 13px; }
.board-player-name { font-weight: 700; }
.board-player-acc { margin-left: auto; color: var(--text-faint); font-size: 11.5px; }
.piece-dot { font-size: 20px; line-height: 1; }
.engine-line { width: min(70vw, 596px); min-height: 50px; padding: 9px 10px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--panel); }
.eng-pv { margin-left: 8px; color: var(--green-hi); font-weight: 700; line-height: 1.8; }
.eng-explain { margin-top: 5px; color: var(--text-dim); font-size: 12.5px; }

/* Chess.com-style move table: one full move per row. */
.ml-rows { display: flex; flex-direction: column; font-size: 14px; }
.move-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch; min-height: 34px; border-bottom: 1px solid rgba(var(--tint), .045); }
.move-row:nth-child(odd):not(.variation-row) { background: rgba(var(--tint), .018); }
.move-row .mnum { display: flex; align-items: center; justify-content: flex-end; padding: 5px 8px 5px 3px; margin: 0;
  color: var(--text-faint); background: rgba(0,0,0,.09); }
.move-row .move-cell { display: flex; min-width: 0; align-items: center; padding: 5px 8px; border-radius: 0; }
.move-row .move-cell.empty { cursor: default; }
.move-row .mclock { margin-left: auto; }
.variation-row { grid-template-columns: 34px 1fr; background: rgba(74,144,217,.08); border-left: 3px solid var(--accent-blue); }
.variation-row .varblock { padding: 6px 8px; line-height: 1.8; }
.variation-row .var-cell { display: inline-flex; align-items: center; gap: 3px; margin: 1px 2px; }
.var-actions { margin-left: auto; }
.phase-rating-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--border); }
.phase-rating-strip > div { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; }
.phase-rating-strip > div + div { border-left: 1px solid var(--border); }
.phase-rating-strip span, .phase-rating-strip small { color: var(--text-faint); font-size: 10px; }
.phase-rating-strip strong { color: var(--green-hi); font-size: 15px; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .match-info, .board-player, .engine-line { width: min(90vw, 596px); }
}

/* Generated lesson and puzzle courses */
.study-course-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.study-course-head h2 { margin: 0 0 4px; }
.study-mode { display: flex; gap: 7px; }
/* One control bar above the board: the exercise picker, the course navigation
   and whatever the current exercise offers. Kept out of the panel below so that
   reading a long explanation never scrolls the buttons — or the board — away. */
.study-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.study-controls #study-jump { flex: 1 1 280px; min-width: 0; margin: 0; }
.study-actions { display: flex; }
.study-actions .puzzle-actions { margin-top: 0; }

/* stretch, not start: the panel matches the board's height, so the scroll area
   is as tall as the board rather than ending halfway up it. */
.study-layout { display: grid; grid-template-columns: auto minmax(300px, 1fr); gap: 18px; align-items: stretch; }
#study-board { width: min(66vw, 580px); }
/* The panel is reading material, and it scrolls inside its own box: the board
   beside it stays on screen however long the explanation runs. */
/* Exactly the expression the board is sized by, so the panel is the board's own
   height — no shorter, which was the complaint, and no taller, which would make
   the page grow past the board it is meant to sit beside. */
.study-panel { display: flex; flex-direction: column; height: min(66vw, 580px); }
/* What the exercise is stays put; only what you read about it scrolls. And what
   you can do about it sits beside the badge that names it, rather than in the
   navigation bar with the controls that move between exercises. */
/* Named apart from .study-head, which the opening-study cards already own —
   sharing it meant inheriting their flex-wrap. The buttons share a row with the
   badge and nothing else; where the exercise came from and what it is about run
   the full width underneath, where there is room to read them. */
.exercise-head { flex: none; margin-bottom: 6px; }
.exercise-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.exercise-head-row:not(:empty) { margin-bottom: 7px; }
.exercise-head-badge { flex: 0 1 auto; min-width: 0; }
.exercise-head-row .study-actions { flex: none; }
.exercise-head .puzzle-actions { margin-top: 0; flex-wrap: wrap; justify-content: flex-end; }
.explore-title { font-size: 14px; }
#study-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 10px; margin-right: -10px; }
.home-no-backup { color: #f0c15c; font-weight: 700; }
.study-position-meta { color: var(--text-faint); font-size: 12px; }
.puzzle-evaluation { margin: 10px 0 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); }
.puzzle-eval-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.puzzle-eval-head span { color: var(--text-faint); font-size: 11px; }
.puzzle-eval-head strong { color: var(--green-hi); font-size: 20px; font-variant-numeric: tabular-nums; }
.puzzle-eval-summary { margin: 2px 0 7px; color: var(--text-dim); font-size: 12px; }
.puzzle-eval-scale { position: relative; height: 7px; overflow: hidden; border-radius: 5px; background: rgba(var(--tint), .08); }
.puzzle-eval-scale b { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(var(--tint), .42); }
.puzzle-eval-scale i { position: absolute; top: 0; bottom: 0; transition: left .2s ease, width .2s ease; }
.puzzle-eval-scale i.positive { background: var(--green-hi); }
.puzzle-eval-scale i.negative { background: #d65b55; }
.study-panel h3 { margin: 10px 0; }
/* source chip: made-up library puzzle vs a position from the player's own game */
.study-source { display: inline-block; margin-bottom: 8px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.study-source.made-up { background: rgba(148, 103, 214, 0.16); color: #b28df0; border: 1px solid rgba(148, 103, 214, 0.4); }
.study-source.mine { background: rgba(45, 178, 158, 0.16); color: #4fc4ac; border: 1px solid rgba(45, 178, 158, 0.4); }
.study-source.played { background: rgba(74, 144, 217, 0.14); color: var(--accent-blue); border: 1px solid rgba(74, 144, 217, 0.35); }
.study-source.lichess { background: rgba(179,179,179,.12); color: #d0d0d0; border: 1px solid rgba(179,179,179,.35); }
.study-source.lichess a { color: var(--green-hi); }

/* hero entry + puzzle builder */
.hero-actions { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.hero-actions .hint { max-width: 360px; text-align: left; }
.builder-layout { display: grid; grid-template-columns: minmax(280px, 400px) 1fr; gap: 20px; align-items: start; }
@media (max-width: 780px) { .builder-layout { grid-template-columns: 1fr; } }
/* the builder board must fit its grid column, not the global 560px board width */
#pb-board { width: 100%; max-width: 380px; }
.builder-fen { margin-top: 12px; }
.builder-fen textarea { width: 100%; font-family: monospace; font-size: 12px; resize: vertical; }
.builder-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.builder-panel { padding: 16px; }
.builder-status { padding: 8px 10px; border-radius: 6px; font-weight: 600; font-size: 13px; background: var(--panel-2); }
.builder-status.good { background: rgba(76,129,182,.14); color: var(--green); }
.builder-status.warn { background: rgba(224,160,0,.14); color: #e0a000; }
.builder-status.bad { background: rgba(208,65,59,.12); color: #d0413b; }
.builder-status.busy { background: rgba(74,144,217,.12); color: var(--accent-blue); }
.builder-best { margin-top: 10px; font-size: 15px; }
.builder-eval { color: var(--text-dim); font-weight: 700; }
.builder-pv, .builder-quality { color: var(--text-dim); font-size: 12px; margin-top: 3px; }
.builder-tag { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.builder-tag label { font-size: 12px; color: var(--text-dim); display: flex; flex-direction: column; gap: 3px; }
.builder-tag select, .builder-tag input { font-size: 13px; }
.builder-pattern input { width: 100%; }
.builder-batch { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.builder-batch label { display: flex; flex-direction: column; gap: 3px; color: var(--text-dim); font-size: 12px; }
.builder-batch input, .builder-batch select { font-size: 13px; }
.builder-batch input[type="number"] { width: 86px; }
.builder-inline-inputs { display: flex; align-items: center; gap: 5px; }
.builder-motifs { display: flex; flex-wrap: wrap; gap: 7px 14px; margin: 12px 0 4px; padding: 10px; border: 1px solid var(--border); border-radius: 7px; }
.builder-motifs legend { padding: 0 5px; color: var(--text-dim); font-size: 12px; font-weight: 700; }
.builder-motifs label { flex-direction: row; align-items: center; }
.builder-batch-status { min-height: 22px; margin-top: 8px; color: var(--text-dim); font-size: 12px; }
.builder-batch-status.good { color: var(--green-hi); }
.builder-batch-status.warn { color: #e0a000; }
.builder-mine { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.builder-mine-head { justify-content: space-between; }
.builder-list { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; }
.builder-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; background: var(--panel-2); border-radius: 6px; font-size: 13px; }
.builder-item small { color: var(--text-dim); }

/* deeper insights */
.insight-block { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 18px; }
.mistake-list { list-style: none; margin: 0; padding: 0; counter-reset: mk; }
.mistake-row { padding: 8px 0; border-bottom: 1px solid var(--border); counter-increment: mk; }
.mistake-row:last-child { border-bottom: none; }
.mistake-row.has-example { cursor: pointer; }
.mistake-row.has-example:hover .mistake-head b { text-decoration: underline; }
.mistake-head { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.mistake-head b::before { content: counter(mk) ". "; color: var(--text-faint); }
.mistake-head span { color: var(--text-dim); font-size: 12.5px; white-space: nowrap; }
.mistake-bar { height: 6px; background: var(--panel-2); border-radius: 4px; margin-top: 6px; overflow: hidden; }
.mistake-bar span { display: block; height: 100%; background: #d0413b; border-radius: 4px; }
.psych-lead { font-size: 13.5px; margin-bottom: 8px; }
.psych-list { list-style: none; margin: 0; padding: 0; }
.psych-list li { display: grid; grid-template-columns: 1fr auto 90px; gap: 12px; align-items: center; padding: 5px 0; font-size: 13.5px; border-bottom: 1px solid var(--border); }
.psych-list li:last-child { border-bottom: none; }
.psych-lift { font-weight: 700; white-space: nowrap; text-align: right; }
.psych-n { color: var(--text-faint); font-size: 12px; text-align: right; }
.psych-list li.worse .psych-lift { color: #d0413b; }
.psych-list li.better .psych-lift { color: var(--green); }
.psych-list li.neutral .psych-lift { color: var(--text-dim); }
.style-row { display: grid; grid-template-columns: 130px 1fr 32px; gap: 8px; align-items: center; margin: 5px 0; font-size: 13px; }
.style-lbl { color: var(--text-dim); }
.style-track { height: 8px; background: var(--panel-2); border-radius: 4px; overflow: hidden; }
.style-track span { display: block; height: 100%; background: var(--accent-blue); border-radius: 4px; }
.style-val { text-align: right; font-weight: 700; }
.style-similar { margin-top: 10px; font-size: 12.5px; color: var(--text-dim); }
.strength-note { font-size: 12px; color: var(--text-faint); margin-bottom: 8px; }
.strength-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.strength-table th, .strength-table td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--border); }
.strength-table th:nth-child(n+2), .strength-table td:nth-child(n+2) { text-align: right; }
/* feature 6 — study priority */
.priority-list { list-style: none; margin: 0; padding: 0; }
.priority-list li { display: grid; grid-template-columns: 96px 1fr auto; gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); }
.priority-list li:last-child { border-bottom: none; }
.priority-star { color: #e0a000; letter-spacing: 1px; font-size: 13px; }
.priority-label { display: flex; flex-direction: column; }
.priority-label small { color: var(--text-dim); font-size: 12px; }
.priority-gain { font-weight: 800; color: var(--green); }
/* feature 10 — blind spots */
.blindspot-list { display: flex; flex-direction: column; gap: 7px; }
.blindspot-row { display: grid; grid-template-columns: 150px 1fr 34px; gap: 10px; align-items: center; font-size: 13px; }
.bs-bar { height: 10px; background: var(--panel-2); border-radius: 5px; overflow: hidden; }
.bs-bar span { display: block; height: 100%; background: #b06fd6; border-radius: 5px; }
.bs-count { text-align: right; font-weight: 700; }
/* feature 15 — review by theme */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.theme-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.theme-card:hover { border-color: var(--accent-blue); }
.theme-name { font-weight: 700; font-size: 14px; }
.theme-count { color: var(--text-dim); font-size: 12px; }

/* report tabs (Stats / Practice / Games) */
.report-tabs { position: sticky; top: 55px; z-index: 19; display: flex; gap: 6px; margin: 6px 0 16px; border-bottom: 1px solid var(--border); background: var(--bg); box-shadow: 0 7px 10px rgba(48,46,43,.92); }
.rtab { appearance: none; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-dim); font: inherit; font-weight: 700; font-size: 14px; padding: 10px 16px; cursor: pointer; }
.rtab:hover { color: var(--text); }
.rtab.active { color: var(--text); border-bottom-color: var(--accent-blue); }
.rtab-panel { display: none; }
.rtab-panel.active { display: block; }
.report-section-layout { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 18px; align-items: start; }
.report-section-content { min-width: 0; }
.section-menu { position: sticky; top: 108px; display: flex; flex-direction: column; gap: 3px; padding: 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel); max-height: calc(100vh - 126px); overflow-y: auto; }
.section-menu-title { padding: 5px 8px 8px; color: var(--text-faint); font-size: 11px; font-weight: 800; letter-spacing: .55px; text-transform: uppercase; }
.section-jump { appearance: none; border: 0; border-radius: 6px; padding: 8px; background: transparent; color: var(--text-dim); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.section-jump:hover, .section-jump:focus-visible { color: var(--text); background: var(--panel-2); outline: none; }
.report-anchor { scroll-margin-top: 108px; }
.report-to-top { position: fixed; right: 22px; bottom: 22px; z-index: 18; width: 44px; height: 44px; border: 1px solid rgba(var(--tint), .16); border-radius: 50%; background: var(--green-dark); color: white; box-shadow: 0 5px 18px rgba(0,0,0,.42); font: 800 24px/1 inherit; cursor: pointer; }
.report-to-top:hover { background: var(--green); transform: translateY(-1px); }
.report-to-top:focus-visible { outline: 3px solid rgba(159,209,90,.5); outline-offset: 2px; }
/* practice tab */
.practice-section { margin-bottom: 16px; }
.practice-section.adaptive { border: 1px solid rgba(224,160,0,.4); }
.practice-priority-badge { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--text-dim); background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; letter-spacing: .2px; }
.practice-priority-badge.is-top { color: #e0a000; background: rgba(224,160,0,.14); border-color: rgba(224,160,0,.4); }
.practice-priority-badge.is-low { color: var(--text-faint); font-weight: 600; }

/* puzzle vs. lesson: obvious on the board while solving/studying */
.study-kind-badge { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; margin-bottom: 10px; font-size: 13.5px; }
.study-kind-badge .kind-icon { font-size: 16px; }
.study-kind-badge .kind-sub { color: var(--text-dim); font-weight: 400; }
.study-kind-badge.kind-puzzle { background: rgba(76,129,182,.14); border: 1px solid rgba(76,129,182,.4); }
.study-kind-badge.kind-lesson { background: rgba(148,103,214,.14); border: 1px solid rgba(148,103,214,.4); }
.study-kind-badge.kind-adaptive { background: rgba(224,160,0,.14); border: 1px solid rgba(224,160,0,.4); }

/* same puzzle/lesson distinction, shown per section in the Practice tab */
.section-kind-tag { display: inline-block; margin: 2px 0 12px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.section-kind-tag.kind-puzzle { color: #6ba3d6; background: rgba(76,129,182,.14); }
.section-kind-tag.kind-lesson { color: #b28df0; background: rgba(148,103,214,.14); }

/* Stats: Main vs Advanced split */
.section-menu-divider { margin: 10px 0 4px; padding: 4px 10px 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint); border-top: 1px solid var(--border); }
.advanced-toggle { display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left; background: var(--panel-2); border: 1px dashed var(--border); border-radius: 8px; padding: 12px 16px; margin: 4px 0 16px; font: inherit; font-weight: 700; color: var(--text); cursor: pointer; }
.advanced-toggle:hover { border-color: var(--accent-blue); }
.advanced-toggle small { font-weight: 400; color: var(--text-dim); }
.advanced-toggle-chevron { transition: transform .15s; display: inline-block; }
.advanced-toggle[aria-expanded="true"] .advanced-toggle-chevron { transform: rotate(90deg); }
.stats-advanced.collapsed { display: none; }
.practice-decks .study-grid, .practice-decks { display: block; }
.practice-decks .study-card { margin-bottom: 10px; }
.practice-sub { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; }
.sub-title { font-weight: 700; font-size: 13px; color: var(--text-dim); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .4px; }
.priority-card { margin-bottom: 18px; }
.priority-proj { font-size: 15px; margin-bottom: 12px; }
.priority-proj .proj-target { color: var(--green); }
.priority-proj small { color: var(--text-dim); font-weight: 400; margin-left: 6px; }
@media (max-width: 820px) {
  .report-section-layout { display: block; }
  .section-menu { position: sticky; top: 100px; z-index: 8; flex-direction: row; margin-bottom: 12px; max-height: none; overflow-x: auto; white-space: nowrap; }
  .section-menu-title { display: none; }
  .section-jump { flex: 0 0 auto; }
  .report-to-top { right: 14px; bottom: 14px; }
}
.puzzle-prompt { padding: 14px; border-radius: 8px; background: var(--panel-2); font-weight: 700; }
.puzzle-message { margin-top: 10px; padding: 10px; border-left: 3px solid var(--green); background: rgba(76,129,182,.08); }
.puzzle-message.wrong { border-left-color: #d0413b; background: rgba(208,65,59,.09); }
.puzzle-message.retry, .puzzle-message.answer { border-left-color: var(--accent-blue); background: rgba(74,144,217,.09); }
.puzzle-actions { display: flex; gap: 8px; margin-top: 12px; }
.puzzle-plan-key { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 9px 0 2px; color: var(--text-faint); font-size: 12px; }
.puzzle-plan-key i { width: 16px; height: 4px; border-radius: 3px; display: inline-block; }
.puzzle-plan-key .plan-you { background: #ff9d4d; }
.puzzle-plan-key .plan-opponent { background: #d86b6b; margin-left: 7px; }
.lesson-answer { display: flex; flex-direction: column; gap: 9px; margin-top: 13px; color: var(--text-dim); }
.lesson-concept { margin-top: 3px; padding: 9px; border-radius: 7px; background: var(--panel-2); }
.best-answer { color: var(--green-hi); font-size: 16px; }
.study-nav { display: flex; gap: 7px; }
.study-nav .btn { white-space: nowrap; }
.study-nav-top { flex: 0 0 auto; }
.study-progress { color: var(--text-dim); font-weight: 700; }
.study-analytics { display: grid; grid-template-columns: repeat(3, minmax(110px, .55fr)) minmax(190px, 1fr) minmax(230px, 1.25fr); gap: 10px; margin: 0 0 16px; }
.training-stat, .training-chart-card { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.training-stat { display: flex; flex-direction: column; justify-content: center; }
.training-stat strong { font-size: 21px; color: var(--green-hi); font-variant-numeric: tabular-nums; }
.training-stat span, .training-chart-card small { color: var(--text-faint); font-size: 11px; }
.training-chart-title { color: var(--text-dim); font-size: 11px; font-weight: 700; margin-bottom: 7px; }
.training-completion-track { height: 9px; background: var(--panel-2); border-radius: 8px; overflow: hidden; margin-bottom: 5px; }
.training-completion-track span { display: block; height: 100%; background: var(--green-hi); border-radius: inherit; transition: width .25s ease; }
.training-activity { height: 57px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; align-items: end; }
.training-day { height: 57px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; }
.training-day i { width: 100%; max-width: 18px; min-height: 3px; background: var(--accent-blue); border-radius: 3px 3px 1px 1px; }
.training-day small, .training-day-count { font-size: 9px; color: var(--text-faint); line-height: 1; }
.puzzle-step-feedback { display: grid; gap: 8px; margin: 12px 0; }
.puzzle-step-card { padding: 10px; border: 1px solid var(--border); border-left: 3px solid var(--green-hi); border-radius: 7px; background: var(--panel-2); font-size: 12.5px; line-height: 1.45; }
.puzzle-step-card.assisted { border-left-color: var(--accent-blue); }
.puzzle-step-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
.puzzle-step-head span { color: var(--text-faint); font-size: 10px; text-transform: uppercase; letter-spacing: .35px; }
.puzzle-line-tabs { margin: 12px 0; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: rgba(var(--tint), .02); }
.puzzle-line-tablist { display: flex; gap: 2px; padding: 5px 5px 0; overflow-x: auto; border-bottom: 1px solid var(--border); background: var(--panel-2); scrollbar-width: thin; }
.puzzle-line-tab { appearance: none; display: inline-flex; align-items: center; gap: 6px; min-width: max-content; padding: 8px 11px; border: 1px solid transparent; border-bottom: 0; border-radius: 7px 7px 0 0; background: transparent; color: var(--text-dim); cursor: pointer; font: inherit; }
.puzzle-line-tab:hover { color: var(--text); background: rgba(var(--tint), .045); }
.puzzle-line-tab.active { color: var(--text); background: var(--panel); border-color: var(--border); box-shadow: 0 1px 0 var(--panel); }
.puzzle-line-tab small { color: var(--text-faint); font-size: 10px; font-variant-numeric: tabular-nums; }
.puzzle-line-tab i { color: var(--green-hi); font-style: normal; font-size: 10px; }
.puzzle-line-tab.current:not(.active) { color: var(--accent-blue); }
.puzzle-line-tab.failed { color: #d99588; }
.puzzle-line-tab:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -2px; }
.puzzle-line-tabpanel { padding: 12px; }
.puzzle-line-tabpanel[hidden] { display: none; }
.puzzle-line-summary { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--text); }
.puzzle-line-summary span { color: var(--text-faint); font-size: 11px; text-align: right; }
.puzzle-line-empty { margin-top: 10px; padding: 16px; border: 1px dashed var(--border); border-radius: 7px; color: var(--text-faint); text-align: center; }
.puzzle-line-tabpanel .puzzle-step-feedback { margin-bottom: 0; }
.puzzle-line-tabpanel .puzzle-line-explanation { margin-bottom: 0; }
.puzzle-message.hint { border-left-color: var(--accent-blue); background: rgba(74,144,217,.12); }
/* persistent hint block — stays visible through wrong answers until solved */
.puzzle-hint { margin-top: 10px; padding: 10px; border-left: 3px solid var(--accent-blue); background: rgba(74,144,217,.12); border-radius: 0 6px 6px 0; }
.study-launch { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin: -4px 0 14px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel); color: var(--text-dim); }
.adaptive-training-card { border-color: rgba(76, 129, 182, .45); }
.adaptive-training-card > p { color: var(--text-dim); margin: 0 0 14px; }
.adaptive-weaknesses { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 9px; margin-bottom: 16px; }
.adaptive-weakness { display: grid; gap: 3px; padding: 10px 12px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--border); }
.adaptive-weakness b { color: var(--text); }
.adaptive-weakness span { color: var(--green); font-size: 12px; font-weight: 750; }
.adaptive-weakness small { color: var(--text-dim); line-height: 1.35; }
.training-loop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 0 0 14px; }
.training-loop > div { display: grid; gap: 4px; padding: 10px 12px; border-radius: 8px; background: rgba(76, 129, 182, .08); border: 1px solid rgba(76, 129, 182, .24); }
.training-loop b { color: var(--green); font-size: 13px; }
.training-loop span { color: var(--text-dim); font-size: 12px; line-height: 1.4; }
.panel-intro { color: var(--text-dim); margin: -2px 0 14px; line-height: 1.45; }
.skill-profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.skill-profile-grid h4 { margin: 4px 0 9px; }
.skill-profile-grid small { color: var(--text-dim); }
.positive-edge { color: var(--green); font-weight: 750; }
.negative-edge { color: var(--red); font-weight: 750; }
.insight-tiles { margin-top: 18px; }
.save-report-dialog { width: min(92vw, 460px); color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 24px; box-shadow: 0 24px 80px rgba(0,0,0,.48); }
.save-report-dialog::backdrop { background: rgba(5,9,13,.7); backdrop-filter: blur(3px); }
.save-report-dialog h2 { margin: 0 0 8px; }
.save-report-dialog p { margin: 0; color: var(--text-dim); line-height: 1.5; }
.save-report-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }
.merge-dialog { width: min(92vw, 520px); }
.merge-picks { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.merge-picks .field { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.merge-picks .field > span:first-child { width: 90px; flex: none; font-weight: 600; font-size: 13px; color: var(--text-dim); }
.merge-pick-name { font-size: 12.5px; color: var(--text-faint); overflow-wrap: anywhere; }
#merge-status { min-height: 18px; margin-top: 10px; color: #ff8f7a; }
#compare-status { min-height: 18px; margin-top: 10px; color: #ff8f7a; }

/* compare-two-reports screen */
.compare-report-card { padding: 22px; overflow-x: auto; }
.compare-cols-head { display: grid; gap: 10px; margin-bottom: 6px; min-width: fit-content; }
.compare-table-scroll { overflow-x: auto; }
.compare-col-head { text-align: center; padding: 8px 10px 14px; border-bottom: 2px solid var(--border); }
.compare-col-user { font-weight: 800; font-size: 16px; }
.compare-col-meta { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.compare-metrics { width: 100%; border-collapse: collapse; }
.compare-metrics td { padding: 10px; text-align: center; border-bottom: 1px solid var(--border); font-size: 14.5px; }
.compare-metrics td:first-child { text-align: left; }
.compare-metric-label { color: var(--text-dim); font-weight: 600; }
.compare-metrics td.compare-better { color: var(--green); font-weight: 800; background: rgba(76,129,182,.1); border-radius: 6px; }
.compare-metrics td.compare-worse { color: var(--text-faint); }
.compare-hint { margin-top: 14px; }

/* Deeper opponent-level comparisons */
.compare-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.compare-tiles .tile { padding: 12px; }
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.compare-grid h4, .compare-table + h4 { margin: 8px 0; }
.compare-table { font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .study-layout, .compare-grid, .skill-profile-grid, .training-loop { grid-template-columns: 1fr; }
  #study-board { width: min(90vw, 580px); }
  .compare-tiles { grid-template-columns: repeat(2, 1fr); }
  .study-course-head, .study-launch { align-items: flex-start; flex-direction: column; }
  .study-panel { height: auto; }
  #study-content { overflow-y: visible; padding-right: 0; margin-right: 0; }
  .study-nav-top { width: 100%; }
  .study-nav-top .btn { flex: 1; padding-inline: 8px; }
  .study-analytics { grid-template-columns: repeat(3, 1fr); }
  .training-chart-card { grid-column: span 3; }
}
@media (max-width: 620px) {
  .progress-periods, .progress-highlights { grid-template-columns: 1fr; }
  .progress-table { font-size: 12px; }
  .progress-table th, .progress-table td { padding-inline: 5px; }
  .goal-row { grid-template-columns: 1fr; gap: 6px; }
  .goal-number { text-align: left; }
}
.puzzle-line-explanation {
  margin-top: 12px;
  padding: 12px 14px;
  border-left: 3px solid var(--green-hi);
  background: rgba(var(--tint), .035);
  border-radius: 0 7px 7px 0;
}
.puzzle-line-explanation.failed-line { border-left-color: #d66b5d; }
.puzzle-line-explanation ol { margin: 8px 0 0 20px; padding: 0; }
.puzzle-line-explanation li { margin: 0 0 9px; line-height: 1.45; }

/* Written opening theory quoted from Wikibooks. */
.fb-theory-extra .fb-facet-text p { margin: 0 0 6px; }
.theory-credit { font-size: 11.5px; color: var(--text-faint); margin-top: 4px; }
.theory-credit a { color: var(--text-dim); }

/* ---------- Practice progress ---------- */
.deck-progress { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.deck-progress-track {
  flex: 1; min-width: 90px; max-width: 220px; height: 6px; border-radius: 999px;
  background: var(--panel-2); overflow: hidden;
}
.deck-progress-track.big { max-width: none; height: 10px; }
.deck-progress-track span { display: block; height: 100%; background: var(--green); border-radius: inherit; }
.deck-progress.is-done .deck-progress-track span { background: var(--good, #4fbf70); }
.deck-progress.is-fresh .deck-progress-track span { background: var(--border); }
.deck-progress-label { font-size: 11.5px; color: var(--text-dim); white-space: nowrap; }
.practice-completion .completion-overall { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; }
.practice-completion .completion-overall b { font-size: 18px; }
.completion-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--text-dim); margin-top: 6px; }

/* ---------- Per-aspect progress charts ---------- */
.chart-grouping { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 6px; font-size: 12.5px; }
.chart-grouping-label { color: var(--text-dim); font-weight: 600; }
.chart-grouping .hint { margin: 0; flex: 1 1 220px; min-width: 0; }

/* A stepper built from the same panel/border tokens as the rest of the app,
   instead of the browser's default number input. */
.stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--panel-2); }
.stepper input {
  width: 56px; border: 0; background: transparent; color: var(--text);
  text-align: center; font: inherit; font-weight: 700; padding: 5px 2px; -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus { outline: none; }
.stepper-btn {
  border: 0; background: transparent; color: var(--text-dim); cursor: pointer;
  padding: 0 11px; font-size: 15px; line-height: 1;
}
.stepper-btn:hover { background: var(--panel); color: var(--text); }
.stepper:focus-within { border-color: var(--green); }

/* Two across, four down — big enough to read a line in. */
.coaching-merged { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }

/* ---------- When you play well / results detail ---------- */
.when-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 14px; }
.when-grid h4 { margin: 0 0 4px; font-size: 12.5px; color: var(--text-dim); font-weight: 600; }
.termination-breakdown { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
.termination-row { display: flex; gap: 8px; align-items: baseline; }
.termination-label { min-width: 52px; color: var(--text-dim); }
.termination-parts { display: flex; flex-wrap: wrap; gap: 10px; }
.termination-parts b { color: var(--text); }
.termination-row.is-win .termination-parts b { color: #4fbf70; }
.termination-row.is-loss .termination-parts b { color: #d0413b; }
.termination-note { margin-top: 10px; }
.termination-label small { display: block; color: var(--text-faint); font-size: 11px; }
.termination-sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: baseline; }
.termination-parts em { color: var(--text-faint); font-style: normal; }

/* ---------- Narrow screens ---------- */
@media (max-width: 720px) {
  .when-grid { grid-template-columns: 1fr; }

  /* The study screen's controls ran off the side of the viewport. */
  .study-nav, .puzzle-actions { flex-wrap: wrap; gap: 8px; }
  .study-nav .btn, .puzzle-actions .btn { flex: 1 1 auto; min-width: 0; white-space: normal; }
  .training-stat { flex: 1 1 30%; min-width: 0; }

  /* The jump menu was clipped rather than reachable. */
  .section-menu { position: static; width: auto; max-height: none; }
  .section-menu-list, .section-menu { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .section-jump { white-space: nowrap; }

  /* Section layouts stack instead of holding a sidebar column. */
  .report-section-layout { display: block; }
  .report-section-content { min-width: 0; }

  /* Report tabs and section menus scroll rather than overflow. */
  .report-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .report-tabs .rtab { white-space: nowrap; }

  .chart-grouping { gap: 8px; }
  .chart-grouping .hint { flex-basis: 100%; }
}

/* Charts must never push the page sideways, at any width. */
.chart-box { max-width: 100%; overflow-x: auto; }
.chart-svg { max-width: 100%; height: auto; }

/* A report box is the button. */
.home-report-row.is-clickable { cursor: pointer; }
.home-report-row.is-clickable:hover { border-color: var(--green); background: var(--panel-2); }
.home-report-row.is-clickable:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.home-report-row.is-opening { opacity: .6; pointer-events: none; }

/* Move-quality breakdown: the same badge the rest of the app uses. */
.class-badge { width: 18px; height: 18px; flex: none; }
.class-badge svg { width: 100%; height: 100%; display: block; }
.class-name small { margin-left: 6px; color: var(--text-faint); font-weight: 600; }