/* ================================================================
   COACH layout for the trainer pages (loaded after engine.css and
   app-shell.css). Board + eval bar on the left, coach card with tabs
   on the right, same tokens as the rest of the site.
   ================================================================ */

.coach-page { max-width: 1180px; margin: 0 auto; }
.coach-head { margin: -8px 0 18px; }
.coach-eyebrow {
  font: 600 13px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--brass);
}
.coach-title { font: 700 clamp(26px, 2.6vw, 34px)/1.1 var(--serif); color: var(--ivory); margin: 4px 0 6px; }
.coach-lede { font: 400 15px/1.5 var(--sans); color: var(--slate); margin: 0 0 6px; max-width: 80ch; }
.coach-guide-link { font: 500 15px var(--sans); color: var(--brass-bright); text-decoration: none; }
.coach-guide-link:hover { text-decoration: underline; }

/* ---------- Trainer layout: the board gets every pixel it can ----------
   Desktop: the board column spans the full height on the left; title,
   line counter, goal chips and the coach card stack on the right.
   .trainer-app and .app-wrapper become "display: contents" so their
   children join the .coach-page grid directly. */
.as-body .trainer-app { max-width: none; padding: 0; }
.as-main:has(.trainer-app) { padding: calc(var(--as-top-h) + 12px) 24px 0; min-height: 0; transition: margin-left .2s ease; }
.as-body {
  /* Board column = 70% of the content area (coach box 30%), capped so the
     whole Coach area fits on screen without scrolling: top bar 64 + padding
     16/16 + title 48 + board padding 20 + file letters 22 + move row 40
     + goal chips 34 + gaps 28 = ~268. The coach box (Next Line, Restart)
     matches the board column, so it fits too.
     --as-side-w shrinks when the sidebar is minimised, so the board grows. */
  --coach-content: min(calc(100vw - var(--as-side-w) - 48px), 1240px);   /* same max width as Game Review (.ap-page) */
  /* Desktop: the board is as tall as the window. Only the top bar and a thin
     frame are left: top bar + 12 padding + 8+8 frame + 2 border + 12 bottom.
     The coordinates sit inside the squares and the moves row lives in the
     coach column, so nothing else takes height from the board.
     Width is capped at 70% of the content area so the coach column keeps ~30%. */
  /* Same sizing as Game Review: room for the title above, at least 420px kept for the right column, max 760px. */
  --board-size: clamp(300px, min(calc(100svh - 150px), calc(var(--coach-content) - 420px - 24px - 30px)), 760px);
}
@media (min-width: 1051px) {
  /* Board on the left, full height. On the right: title, the coach box,
     goal chips and line buttons. The right column is exactly as tall as the board column. */
  .coach-page:has(.trainer-app) {
    max-width: 1240px; margin: 0 auto;
    display: grid; grid-template-columns: auto minmax(340px, 1fr);
    grid-template-areas: "head head" "board panel";          /* title across the top, like Game Review */
    grid-template-rows: auto auto; column-gap: 24px; align-items: start;
  }
  .coach-page:has(.trainer-app) .coach-head { margin: 0 0 12px; align-self: start; }
  .coach-page:has(.trainer-app) .trainer-app,
  .coach-page:has(.trainer-app) .app-wrapper { display: contents; }
  .coach-page:has(.trainer-app) .board-col { grid-area: board; }
  .coach-page:has(.trainer-app) .coach-head { grid-area: head; }
  .coach-page:has(.trainer-app) #coach-panel {
    grid-area: panel;
    display: flex; flex-direction: column; min-width: 0;
  }
  /* The Coach box never gets squeezed: it has a minimum height and grows to fit
     its text (no scrolling inside it). It fills any spare height next to the board;
     if the text is longer than the board, the page scrolls instead and the board
     stays in view (sticky). */
  .coach-page:has(.trainer-app) .board-col { align-self: start; position: sticky; top: calc(var(--as-top-h) + 12px); }
  .coach-page:has(.trainer-app) #coach-panel .cp-card { flex: 1 0 auto; min-height: 300px; display: flex; flex-direction: column; }
  .coach-page:has(.trainer-app) #coach-panel .cp-tabs { flex: none; }
  .coach-page:has(.trainer-app) #coach-panel .cp-panel { flex: 1 0 auto; overflow: visible; overflow-anchor: none; }
  .coach-page:has(.trainer-app) #coach-panel .speech-bubble { min-height: 0; }
  .coach-page:has(.trainer-app) #coach-panel #goal-chips { flex: none; margin: 10px 0 0; justify-content: flex-start; }
  .coach-page:has(.trainer-app) #content-warnings,
  .coach-page:has(.trainer-app) #account-nudge-banner { grid-column: 1 / -1; }
}
.as-body .board-col { max-width: none; padding: 0; gap: 8px; width: calc(var(--board-size) + 24px); background: none; border: 0; border-radius: 0; }
/* Board with the coordinates drawn inside the squares (no gutters), on every screen size */
.as-body #board-outer { display: block; position: relative; width: var(--board-size); height: var(--board-size); flex: none; }
.as-body #board-container { width: 100%; height: 100%; }
.as-body #rank-gutter, .as-body #file-gutter { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.as-body #rank-gutter .coord-label { width: auto; height: 12.5%; left: 5px; justify-content: flex-start; align-items: flex-start; padding-top: 3px; }
.as-body #file-gutter .coord-label { height: auto; width: 12.5%; top: auto; bottom: 3px; align-items: flex-end; justify-content: flex-end; padding-right: 5px; }
.as-body .coord-label {
  font: 700 clamp(11px, calc(var(--board-size) / 48), 15px)/1 var(--mono); color: #2a1c10;
  text-shadow: 0 0 2px rgba(240,235,225,.9), 0 0 2px rgba(240,235,225,.9);
}
.as-body #eval-bar { margin-bottom: 0; }
/* The moves row + line counter, when moved into the coach column (wide screens, coach-panel.js) */
#coach-panel > .nav-row { flex: none; margin: 0 0 10px; flex-wrap: wrap; }
#coach-panel > .nav-row .line-status { flex: 1 1 100%; grid-template-columns: auto 1fr; align-items: center; }
#coach-panel > #nav-hint { flex: none; }
.as-body #move-chips { min-width: 0; }
.as-body #nav-hint { min-height: 0; }
.as-body #nav-hint:empty { display: none; }
.as-body #coach-panel { min-width: 0; background: none; border: 0; border-radius: 0; padding: 0; }   /* the cards inside are the boxes */

/* Line counter + progress bar, under the move list in the board column */
.nav-row { display: flex; align-items: center; gap: 10px; width: 100%; }
.nav-row #move-nav { flex: 1 1 auto; min-width: 0; }
.line-status { flex: none; display: grid; gap: 5px; }
.line-status #line-counter-row { gap: 8px; }
.line-status #line-counter { padding: 5px 10px; }
.line-status #line-progress-track { margin-top: 0; height: 4px; }

/* Compact title block (trainer pages) */
.coach-head-compact { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0 0 12px; justify-self: start; }
.coach-head-compact .coach-title { font-size: clamp(22px, 2vw, 28px); margin: 0; }
.coach-head-compact .coach-head-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.coach-lede-panel { font-size: 14px; color: var(--slate-dim); margin: 4px 0 0; }

/* ---------- Goal chips ---------- */
.goal-chips { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.goal-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--ink-850);
  font: 500 14px var(--sans); color: var(--slate);
  transition: background .2s, border-color .2s, color .2s;
}
.goal-dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--slate-dim); flex: none; position: relative; }
.goal-chip.is-done { color: var(--ivory); border-color: var(--teal); background: rgba(75, 145, 135, .16); }
.goal-chip.is-done .goal-dot { background: var(--teal); border-color: var(--teal); }
.goal-chip.is-done .goal-dot::after {
  content: ''; position: absolute; left: 3px; top: 0px; width: 3px; height: 6px;
  border: solid var(--ink-950); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg);
}
@media (prefers-reduced-motion: no-preference) {
  .goal-chip.just-done { animation: goal-pop .6s ease; }
  @keyframes goal-pop { 40% { transform: scale(1.08); } }
}

/* ---------- Eval bar ---------- */
#eval-bar {
  position: relative; width: 22px; flex: none; align-self: stretch;
  margin-bottom: 22px; /* lines up with the board, not the file gutter */
  background: #2a2d33; border-radius: 4px; overflow: hidden;
  border: 1px solid var(--line);
}
#eval-fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 50%;
  background: var(--ivory); transition: height .35s ease;
}
#eval-bar.black-bottom { background: var(--ivory); }
#eval-bar.black-bottom #eval-fill { background: #2a2d33; }
#eval-label {
  position: absolute; left: 50%; top: 6px; transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl; font: 600 12.5px var(--mono); color: var(--ivory); mix-blend-mode: difference;
}

/* ---------- Coach card with tabs ---------- */
.cp-card {
  display: flex; flex-direction: column; flex: 1;
  background: var(--ink-850); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
}
.cp-tabs { display: flex; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.cp-tabs [role="tab"] {
  flex: 1 1 auto; position: relative;
  padding: 13px 8px 11px; border: 0; background: transparent; cursor: pointer;
  font: 500 15px var(--sans); color: var(--slate); white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.cp-tabs [role="tab"]:hover { color: var(--ivory); }
.cp-tabs [role="tab"][aria-selected="true"] { color: var(--brass-bright); border-bottom-color: var(--brass); font-weight: 600; }
.cp-tabs [role="tab"]:focus-visible { outline: 2px solid var(--brass); outline-offset: -4px; border-radius: 6px; }
.cp-tabs [role="tab"].has-new::after {
  content: ''; position: absolute; top: 10px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--teal-bright);
}
.cp-panel { padding: 16px; }
.cp-panel[hidden] { display: none !important; }
#bubble-col.cp-panel { gap: 10px; }

#theory-box { font: 400 15px/1.65 var(--sans); color: var(--ivory); }
#theory-text:empty::before { content: 'Play a move and the idea behind it appears here.'; color: var(--slate); }

/* Stuck button */
.stuck-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.stuck-btn {
  padding: 9px 14px; border-radius: 10px; border: 0; cursor: pointer;
  background: var(--brass); color: var(--ink-950); font: 600 15px var(--sans);
}
.stuck-btn:hover:not(:disabled) { background: var(--brass-bright); }
.stuck-btn:disabled { opacity: .4; cursor: default; }
.stuck-note { font: 500 15px var(--sans); color: var(--brass-bright); }

/* Real games */
.rg-intro { margin: 0 0 12px; font: 400 15px/1.5 var(--sans); color: var(--slate); }
.rg-title { margin: 0 0 10px; font: 600 15px var(--sans); color: var(--ivory); }
.rg-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.rg-row {
  display: grid; grid-template-columns: 76px 1fr 44px; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 8px; border: 1px solid transparent;
}
.rg-row.is-played { border-color: var(--brass-dim); background: rgba(201, 162, 75, .08); grid-template-columns: 76px 1fr 44px; }
.rg-move { font: 600 15px var(--mono); color: var(--ivory); }
.rg-bar { height: 8px; background: var(--ink-800); border-radius: 4px; overflow: hidden; }
.rg-bar span { display: block; height: 100%; background: var(--teal); border-radius: 4px; }
.rg-row.is-played .rg-bar span { background: var(--brass); }
.rg-pct { font: 600 14px var(--mono); color: var(--slate); text-align: right; }
.rg-tag { grid-column: 1 / -1; font: 600 12.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--brass-bright); }
.rg-note, .rg-take, .rg-empty { margin: 0 0 8px; font: 400 15px/1.55 var(--sans); color: var(--slate); }
.rg-take { color: var(--ivory); }

/* Moves scoresheet */
.ms-table { width: 100%; border-collapse: collapse; font: 500 15px var(--mono); margin-bottom: 10px; }
.ms-table th { color: var(--slate-dim); font-weight: 500; text-align: left; padding: 4px 6px; }
.ms-table td { padding: 2px; }
.ms-move {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px; width: 100%;
  padding: 5px 8px; border: 1px solid transparent; border-radius: 6px; background: transparent;
  font: 600 15px var(--mono); color: var(--slate); cursor: pointer; text-align: left;
}
.ms-move.is-you { color: var(--ivory); }
.ms-move:hover { background: var(--ink-800); }
.ms-move.is-current { border-color: var(--teal); background: rgba(75, 145, 135, .14); }
.ms-eval { font-size: 12.5px; color: var(--slate-dim); font-weight: 500; }

.as-body #line-counter { white-space: nowrap; }
.as-body #practice-streak { display: none; } /* the sidebar already shows the streak */

/* Footer inside the app column */
.coach-footer { max-width: 1180px; margin: 48px auto 0; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.coach-footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 8px; }
.coach-footer a { font: 500 15px var(--sans); color: var(--slate); text-decoration: none; }
.coach-footer a:hover { color: var(--ivory); }
.coach-footer p { font: 400 14px var(--sans); color: var(--slate-dim); margin: 0; }

/* Single column (the trainer's own mobile layout starts at 1050px):
   the board goes edge to edge, full screen width; the evaluation becomes a
   thin bar above it. Everything else keeps a 12px side margin. */
@media (max-width: 1050px) {
  .as-main:has(.trainer-app) { padding: calc(var(--as-top-h) + 8px) 0 32px; }
  .as-body .app-wrapper { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; }
  .as-body .board-col { width: auto; padding: 0; border: 0; border-radius: 0; background: none; gap: 10px; }
  .as-body .board-col > :not(.board-row) { margin-left: 12px !important; margin-right: 12px !important; width: auto !important; max-width: none; align-self: stretch; min-width: 0; }
  .as-body .board-col > .nav-row #move-nav { min-width: 0; }
  .as-body .board-col > .nav-row #move-chips { min-width: 0; overflow-x: auto; }
  .as-body .coach-head, .as-body #coach-panel, .as-body .coach-footer, .as-body #content-warnings { padding-inline: 12px; }
  .as-body .board-row { flex-direction: column; gap: 0; width: 100%; }
  .as-body #board-outer { width: min(100%, calc(100svh - var(--as-top-h) - 24px)); height: auto; aspect-ratio: 1 / 1; margin-inline: auto; }
  .as-body #eval-bar { width: min(100%, calc(100svh - var(--as-top-h) - 24px)); margin-inline: auto; }
  .as-body #board-container { border-width: 0; border-radius: 0; }
  #eval-bar { width: 100%; height: 6px; border: 0; border-radius: 0; align-self: auto; }
  #eval-fill { top: 0; bottom: 0; right: auto; height: auto !important; width: var(--eval, 50%); transition: width .35s ease; }
  #eval-label { display: none; }
  .cp-tabs [role="tab"] { padding: 12px 10px 10px; font-size: 15px; }
}

/* Embedded (?embed=1): trainer only, no shell */
.embed-mode .as-topbar, .embed-mode .as-sidebar, .embed-mode .coach-head, .embed-mode .coach-footer { display: none !important; }
.embed-mode .as-main { margin: 0; padding: 8px; }

/* ---------- Coach hub (app.html) ---------- */
.hub-head { margin-bottom: 24px; }
.hub-head .coach-title { font-size: clamp(28px, 3.2vw, 40px); }
.hub-head .coach-lede a { color: var(--brass-bright); }
.continue-card {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 22px 26px; margin-bottom: 24px;
  border: 1px solid var(--brass-dim); border-radius: 16px;
  background: linear-gradient(135deg, rgba(201, 162, 75, .12), rgba(201, 162, 75, .03)), var(--ink-900);
}
.continue-card[hidden] { display: none; }
.continue-copy { flex: 1 1 260px; }
.continue-eyebrow { font: 600 13px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--brass); }
.continue-title { font: 700 24px/1.2 var(--serif); color: var(--ivory); margin: 6px 0 4px; }
.continue-meta { font: 400 15px var(--sans); color: var(--slate); margin: 0; }
.continue-btn {
  padding: 13px 26px; border-radius: 12px; background: var(--brass); color: var(--ink-950);
  font: 600 16px var(--sans); text-decoration: none;
}
.continue-btn:hover { background: var(--brass-bright); }
.as-body .finder-box { margin-left: 0; margin-right: 0; max-width: none; }
.as-body .openings-grid { margin-left: 0; margin-right: 0; }
.as-body #status-banner:empty { display: none; }

/* Guide / bot links under "Restart This Line" */
.coach-panel-links { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 2px 2px 0; }
/* Goal chips under the moves, in the board column */
.board-col .goal-chips { justify-content: flex-start; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.board-col .goal-chip { flex: none; padding: 5px 10px; font-size: 13.5px; }
@media (max-width: 700px) {
  .nav-row { flex-wrap: wrap; }
  .nav-row .line-status { flex: 1 1 100%; }
}


/* ================================================================
   COACH PAGE IN THE GAME REVIEW STYLE
   Same vocabulary as Game Review: the board with a thin eval bar and no
   frame (sticky while the page scrolls), and on the right a stack of
   cards (moves, Coach, goals, line controls) using the app's cards,
   gold primary button, outlined buttons and gold labels.
   ================================================================ */
.as-body .coach-page .coach-title { font: 700 26px/1.25 var(--sans); color: var(--ivory); letter-spacing: 0; }
.as-body .board-row { gap: 8px; }
@media (min-width: 1051px) {
  .as-body #eval-bar { width: 16px; border-radius: 6px; }
  .coach-page:has(.trainer-app) { column-gap: 24px; }
  .coach-page:has(.trainer-app) #coach-panel { gap: 16px; }
  .coach-page:has(.trainer-app) #coach-panel > * { margin-top: 0; margin-bottom: 0; }
  .as-body .coach-page .coach-head { margin-bottom: 14px; }
}
/* Cards */
.as-body .nav-row, .as-body .cp-card, .as-body #goal-chips, .as-body .cp-controls, .as-body .board-col > .coach-row {
  background: var(--ink-900); border: 1px solid var(--line); border-radius: 16px; box-sizing: border-box;
}
.as-body .nav-row { padding: 12px 14px; }
.as-body .cp-card { border-color: var(--brass-dim); }                 /* the main card, like Game Review's coach card */
.as-body .cp-panel { padding: 20px 22px; }
.as-body #goal-chips { padding: 14px 16px; gap: 8px; flex-wrap: wrap; }
.as-body #goal-chips::before {
  content: 'Goals for this line'; flex: 1 1 100%; margin-bottom: 2px;
  font: 600 13px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--slate);
}
.as-body .cp-controls { padding: 16px; display: grid; gap: 10px; }
/* Coach text: straight on the card, like Game Review (no cream bubble, no avatar) */
.as-body .coach-avatar { display: none; }
.as-body #coach-text {
  background: none; color: var(--ivory); border: 0; padding: 0; min-height: 0; margin: 0;
  font: 500 17px/1.6 var(--sans);
}
.as-body #coach-text::before { display: none; }
.as-body #coach-prompt-row { min-height: 0; margin: 4px 0 0; }
.as-body #coach-prompt {
  text-align: left; padding: 12px 14px; border-radius: 12px;
  background: rgba(201, 162, 75, .10); border: 1px solid var(--brass-dim); color: var(--brass-bright);
  font: 600 16px/1.45 var(--sans);
}
.as-body #theory-box, .as-body #theory-text { font: 400 16px/1.65 var(--sans); color: var(--slate); background: none; border: 0; padding: 0; }
/* Buttons: the app's gold primary and outlined buttons */
.as-body .line-nav-buttons { gap: 10px; }
.as-body .line-nav-buttons button, .as-body #reset-btn {
  border-radius: 12px; padding: 11px 16px; font: 600 15px var(--sans); margin: 0;
  background: transparent; border: 1px solid var(--line); color: var(--ivory);
}
.as-body .line-nav-buttons button:hover:not(:disabled), .as-body #reset-btn:hover { background: transparent; border-color: var(--brass-dim); color: var(--brass-bright); }
.as-body #next-line-btn { background: var(--brass); border-color: var(--brass); color: var(--ink-950); }
.as-body #next-line-btn:hover:not(:disabled) { background: var(--brass-bright); border-color: var(--brass-bright); color: var(--ink-950); }
.as-body #move-nav button.nav-arrow { border-radius: 9px; background: transparent; border: 1px solid var(--line); color: var(--ivory); font: 600 14px var(--sans); padding: 7px 12px; }
.as-body #move-nav button.nav-arrow:not(:disabled):hover { background: transparent; border-color: var(--brass-dim); color: var(--brass-bright); }
.as-body #move-chips { background: var(--ink-850); border-color: var(--line); border-radius: 10px; }
.as-body .move-chip { border-radius: 8px; }
.as-body .move-chip.active { background: rgba(201, 162, 75, .14); border-color: var(--brass-dim); color: var(--brass-bright); }
.as-body #line-progress-fill { background: var(--brass); }
.as-body .coach-panel-links { padding: 2px 0 0; }
/* Phones: the Coach text above the board sits in a card too */
@media (max-width: 1050px) {
  .as-body .board-col > .coach-row { padding: 14px 16px; }
  .as-body .board-col > #coach-prompt-row { margin-top: -2px !important; }
  /* The Coach text sits above the board on phones, so this card only needs "Why this move" */
  .as-body #tab-coach { display: none; }
  .as-body #tab-why { cursor: default; color: var(--brass-bright); border-bottom-color: transparent; font-weight: 600; text-align: left; padding-left: 18px; }
  .as-body #bubble-col { display: none !important; }
  .as-body #panel-why { display: block !important; }
}

/* Restart this line + Back to line 1, side by side in the controls card */
.as-body .cp-restart-row { display: flex; gap: 10px; }
.as-body .cp-restart-row > button { flex: 1 1 0; }
.as-body #jump-to-first-btn {
  border-radius: 12px; padding: 11px 16px; font: 600 15px var(--sans); margin: 0; text-decoration: none;
  background: transparent; border: 1px solid var(--line); color: var(--ivory); cursor: pointer;
}
.as-body #jump-to-first-btn:hover:not(:disabled) { border-color: var(--brass-dim); color: var(--brass-bright); }
.as-body #jump-to-first-btn:disabled { opacity: .4; cursor: default; }
@media (max-width: 420px) { .as-body .cp-restart-row { flex-direction: column; } }

/* Header like Game Review's game title: title + one info line, across both columns */
.as-body .coach-page .coach-meta { margin: 4px 0 0; font: 400 16px var(--sans); color: var(--slate); }
@media (min-width: 1051px) { .as-body .coach-page .coach-head { margin-bottom: 18px; } }

/* ================================================================
   COACH = GAME REVIEW (v26). Same pieces as review.html:
   board with Game Review's coordinates and plain eval bar, the moves
   row and a small goals card under the board, and on the right one
   coach card (heading + badge, what, why, tip, buttons) + a second card.
   ================================================================ */
/* Board: Game Review coordinates (small, coloured like the opposite square) */
.as-body .coord-label { font: 700 clamp(9px, calc(var(--board-size) / 64), 12px)/1 var(--mono); text-shadow: none; }
.as-body #rank-gutter .coord-label { left: 4px; padding-top: 3px; }
.as-body #file-gutter .coord-label { bottom: 2px; padding-right: 4px; }
.as-body #board-container:not(.flipped) ~ #rank-gutter .coord-label:nth-child(odd),
.as-body #board-container.flipped ~ #rank-gutter .coord-label:nth-child(even),
.as-body #board-container:not(.flipped) ~ #file-gutter .coord-label:nth-child(even),
.as-body #board-container.flipped ~ #file-gutter .coord-label:nth-child(odd) { color: #b58863; }
.as-body #board-container:not(.flipped) ~ #rank-gutter .coord-label:nth-child(even),
.as-body #board-container.flipped ~ #rank-gutter .coord-label:nth-child(odd),
.as-body #board-container:not(.flipped) ~ #file-gutter .coord-label:nth-child(odd),
.as-body #board-container.flipped ~ #file-gutter .coord-label:nth-child(even) { color: #f0d9b5; }
@media (min-width: 1051px) { .as-body #board-container { border: 3px solid var(--line); border-radius: 6px; } }
/* Eval bar: Game Review's plain bar */
.as-body #eval-label { display: none; }
@media (min-width: 1051px) {
  .as-body #eval-bar { width: 16px; border-radius: 4px; border: 1px solid var(--line); }
  /* Board column: board, then the moves row, then the goals card */
  .coach-page:has(.trainer-app) .board-col { display: flex; flex-direction: column; gap: 10px; }
  .as-body .board-col > .nav-row { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; flex-wrap: wrap; justify-content: center; }
  .as-body .board-col > .nav-row .line-status { flex: 1 1 100%; grid-template-columns: auto 1fr; align-items: center; }
  .coach-page:has(.trainer-app) #coach-panel { display: grid; gap: 16px; align-content: start; }
}
.as-body .board-col > #goal-chips { padding: 10px 12px; border-radius: 12px; background: var(--ink-900); border: 1px solid var(--line); margin: 0; }
.as-body #goal-chips::before { font-size: 12.5px; }
/* The coach card: Game Review's .ap-card.rv-coach */
.as-body .cp-card, .coach-page:has(.trainer-app) #coach-panel .cp-card {
  display: block; min-height: 0; flex: none; padding: 24px; border-radius: 16px;
  background: var(--ink-900); border: 1px solid var(--line); overflow: visible;
}
.as-body .cp-card.grade-book { border-color: #D2B27A; }
.as-body .cp-card.grade-best { border-color: var(--teal-bright); }
.as-body .cp-card.grade-good { border-color: #A5BFB0; }
.as-body .cp-card .rv-coach-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.as-body .cp-card .rv-coach-move { font: 700 19px var(--sans); color: var(--ivory); }
.as-body .cp-tabs { display: none !important; }
.as-body .cp-card .cp-panel, .coach-page:has(.trainer-app) #coach-panel .cp-panel { padding: 0; display: block; overflow: visible; }
.as-body #panel-why { display: block !important; margin-top: 10px; }
.as-body #panel-why:has(#theory-text:empty) { display: none !important; }
.as-body #panel-why::before { content: 'Why this move'; display: block; margin-bottom: 4px; font: 600 12.5px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--slate-dim); }
.as-body #coach-text { font: 500 16px/1.55 var(--sans); color: var(--ivory); }
.as-body #theory-box, .as-body #theory-text { font: 400 15px/1.6 var(--sans); color: var(--slate); }
.as-body #coach-prompt-row { margin: 12px 0 0; }
.as-body #coach-prompt { padding: 10px 12px; border-radius: 10px; background: rgba(210, 178, 122, .08); border: 1px solid var(--brass-dim); color: #D2B27A; font: 600 15px/1.5 var(--sans); }
/* Buttons inside the card, like Game Review's Back / Next move */
.as-body .cp-card .cp-controls { background: none; border: 0; border-radius: 0; padding: 0; margin-top: 16px; display: grid; gap: 8px; }
.as-body .cp-card .line-nav-buttons button, .as-body .cp-card #reset-btn, .as-body .cp-card #jump-to-first-btn { padding: 9px 14px; font-size: 14.5px; border-radius: 10px; }
/* Second card, like Game Review's summary card */
.as-body .cp-more { padding: 20px 24px; border-radius: 16px; }
.as-body .cp-more-title { font: 700 18px var(--sans); color: var(--ivory); margin: 0 0 8px; }
.as-body .cp-more .coach-panel-links { display: grid; gap: 6px; padding: 0; }
/* Phones: the Coach text sits above the board; the card below keeps its heading, why and buttons */
@media (max-width: 1050px) {
  .as-body #bubble-col { display: none !important; }
  .as-body .board-col > .coach-row { padding: 14px 16px; background: var(--ink-900); border: 1px solid var(--line); border-radius: 16px; }
}

/* v27 BOARD SIZE = GAME REVIEW. The Coach board uses exactly the Game Review
   formula, measured as if the sidebar were open (240px). Minimising the
   sidebar on the Coach no longer makes its board bigger than Game Review's.
   Below 1321px every page minimises the sidebar, so both already match. */
@media (min-width: 1321px) {
  .as-body {
    --board-size: clamp(300px, min(calc(100svh - 150px), calc(100vw - 240px - 48px - 420px - 24px - 30px)), 760px);
  }
}

/* v28: no "Line 1 of 12" bar under the board; the goals box sits in the
   right column, between the coach card and "Keep going". */
.as-body .line-status[hidden] { display: none !important; }
.as-body #coach-panel > #goal-chips { margin: 0; padding: 18px 24px 20px; border-radius: 16px; background: var(--ink-900); border: 1px solid var(--line); flex-wrap: wrap; justify-content: flex-start; overflow: visible; }
/* Phones: piece glyphs are a few px wider than their squares; keep the h-file ones from pushing the page sideways. */
@media (max-width: 1050px) { .as-body #board-container { overflow: clip; } }