/* The chess primer's additions to the maths book's frame (base.css, book.css, copied unchanged).
   Notation is coloured the way the maths book colours symbols, with one meaning each across the page:
   blue = the piece, ochre = the square, green = numbers that say which one (move numbers, disambiguation),
   plum = the signs (x, +, #, castling). */

.c-piece { color: var(--s-model); }
.c-sq    { color: var(--s-her); }
.c-num   { color: var(--s-step); }
.c-sym   { color: var(--s-math); }
.lc { text-transform: none; }

/* a move written large, as an equation is in the maths book */
figure.san { margin: 32px 0 0; text-align: center; font: 400 30px/40px var(--serif); letter-spacing: 0.5px; }
figure.san span { padding: 0 1px; }
.key > .k-sym.san-sym { font-family: var(--serif); font-size: 17px; }

/* a short run of moves, set as in a book */
.sheet p.line {
  text-align: center; font-family: var(--serif); font-size: 15px; line-height: 26px; margin-top: 16px;
}
.sheet p.line b { font-weight: 400; color: var(--ink-muted); font-family: var(--mono); font-size: 11px; }

/* figure caption under a static diagram */
.sheet figure > figcaption {
  margin-top: 12px; font: 400 10px/16px var(--mono); text-transform: uppercase; color: var(--ink-muted); text-align: center;
}

/* ── Boards in the widgets ───────────────────────────────────────────── */
.widget svg.cboard { width: 100%; max-width: 380px; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.widget svg.cboard.clickable { cursor: pointer; }
.widget svg.cboard text { font: 400 10px var(--mono); }
.widget .controls .btns { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; }
.widget .controls + .controls { margin-top: 4px; }
.widget .readout { line-height: 20px; }
.sheet .widget p.wnote {
  margin: 8px auto 0; max-width: 520px; text-align: center; font-size: 13px; line-height: 21px; color: rgb(0 0 0 / 0.75);
}

/* the drill */
.drill-prompt {
  text-align: center; font: 400 18px/28px var(--serif); margin-bottom: 12px; min-height: 28px;
}
.drill-prompt b { font-weight: 600; color: var(--accent); }
.picker { margin-top: 10px; display: grid; gap: 6px; justify-content: center; }
.picker[hidden] { display: none; }
.pick-row { display: flex; gap: 6px; justify-content: center; }
.pick-row button {
  width: 32px; height: 32px; border: 1px solid var(--rule); background: #fff;
  font: 400 13px/30px var(--mono); color: #000;
}
.pick-row button:hover { border-color: var(--accent); color: var(--accent); }
.pick-row button.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* the game */
.game { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 24px; align-items: start; }
.game__board svg.cboard { max-width: 380px; }
.game__head .mono { font: 400 10px/16px var(--mono); text-transform: uppercase; color: var(--ink-muted); }
.game__san { margin-top: 4px; min-height: 40px; }
.san-big { font: 400 26px/36px var(--serif); }
.san-key {
  margin-top: 6px; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 2px 12px; align-items: baseline;
  font-size: 12px; line-height: 20px; color: rgb(0 0 0 / 0.75);
}
.san-key .k-sym { font: 400 15px var(--serif); text-align: right; }
.sheet p.game__note { margin: 12px 0 0; font-size: 14px; line-height: 23px; text-align: left; min-height: 69px; }
.sheet ol.movelist {
  margin: 14px 0 0; padding: 10px 0 0 26px; border-top: 1px solid var(--rule);
  columns: 3; column-gap: 12px; font: 400 12px/22px var(--mono); color: var(--ink-muted);
  list-style: decimal;
}
.sheet ol.movelist li { margin: 0; padding: 0 0 0 2px; break-inside: avoid; }
.sheet ol.movelist li:first-child { margin-top: 0; }
.movelist .mv { font: 400 12px/22px var(--mono); color: #000; padding: 0 3px; min-width: 44px; text-align: left; }
.movelist .mv:hover { color: var(--accent); }
.movelist .mv.on { background: var(--her); }
@media (max-width: 767px) {
  .game { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .game__side { width: 100%; max-width: 420px; }
}
@media (max-width: 420px) {
  .sheet ol.movelist { columns: 2; }
}

/* "For Yonah" under the chapter dots */
.ch-header .ch-for { margin: 4px 0 0; text-align: center; font-style: italic; font-size: 13px; color: var(--ink-sub); }

/* a checklist set in the book's numbered-table style */
table.nums td.l { text-align: left; font-family: var(--serif); font-size: 13px; }