/* Chess Notebook — chess-only styling.
   Loaded only by pages under /chess/, on top of the shared assets/app.css.
   Nothing here can affect the academic side.

   The house rules still hold: Georgia serif, black body text, one accent per
   section. The chess accent is board green #4A6B33 (6.1:1 on white, so it can
   carry white text in table headers and step circles the way the academic
   accents do). Board squares, the brown frame and the classification badges
   are NOT accents — they are diagram colors that carry meaning. */

:root {
  --chess-accent: #4A6B33;
  --board-light: #EEEED2;
  --board-dark: #769656;
  --board-frame: #8A6A45;
  --chess-paper: #F5F3EC;
  --annot-rail: 15rem;        /* blank right margin for Samsung Notes markup */
}

@media (max-width: 1100px) { :root { --annot-rail: 7rem; } }
@media (max-width: 820px)  { :root { --annot-rail: 0rem; } }

body[data-branch="chess"] { background: var(--chess-paper); }

/* ---------------------------------------------------------- annotation rail */
/* The rail is real padding on the note card, so every child — prose, boards,
   move lists, tables — is laid out inside the content column and physically
   cannot spill into the margin. */

.note-body.hs-host.chess-host {
  --hs-accent: var(--chess-accent);
  padding: 2rem 2.4rem 2.6rem;
  padding-right: calc(2.4rem + var(--annot-rail));
}
@media (max-width: 820px) {
  .note-body.hs-host.chess-host { padding: 1.2rem 1rem 1.6rem; }
}

/* --------------------------------------------------------------- group nav */
/* Openings pages come in parallel three-page groups (main lines / traps /
   common responses). The eyebrow says which group you are in and where. */

/* ------------------------------------------------------------ label voice */
/* On a chess page monospace means exactly one thing: chess notation and engine
   output. Everything that is a heading or a piece of chrome uses the smoother
   sans below, a step larger than the shared house label so it reads as a
   heading rather than a caption.

   Scoped to the chess branch — the academic notes keep the original mono
   labels untouched. */

.chess-host .hs-label,
.chess-host .hs-eyebrow {
  font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.11em;
}

.grp-eyebrow {
  font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase; letter-spacing: 0.11em; font-size: 0.78rem;
  font-weight: bold; color: var(--chess-accent);
  display: block; margin-bottom: 0.3rem;
}
.grp-eyebrow .grp-sep { opacity: 0.5; margin: 0 0.5em; }
.grp-eyebrow .grp-pos { color: #111; }

/* Table of contents: a labelled rule wherever the group changes. */
.grp-divider {
  display: flex; align-items: center; gap: 0.8rem;
  margin: 1.5rem 0 0.5rem;
}
.grp-divider::after {
  content: ""; flex: 1 1 auto; height: 2px; background: var(--chess-accent); opacity: 0.35;
}
.grp-divider .grp-name {
  font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase; letter-spacing: 0.11em; font-size: 0.8rem;
  font-weight: bold; color: var(--chess-accent); white-space: nowrap;
}

/* Pager: crossing into a new group is announced, not silent. */
.pager-newgroup { border-color: var(--chess-accent); }
.pager-newgroup .pager-kicker {
  display: block; font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--chess-accent); font-weight: bold;
}

/* ------------------------------------------------------------ board diagram */

.cb {
  margin: 1.6rem 0;
  max-width: 25rem;             /* never wider than the content column */
}
.cb.cb-small { max-width: 16rem; }
.cb svg {
  display: block; width: 100%; height: auto;
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.cb figcaption {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic; font-size: 0.88rem; color: #111;
  margin-top: 0.45rem;
}
.cb-error { font-size: 0.85rem; color: #991b1b; }

/* Board beside prose, still inside the content column. */
.cb-row { display: grid; grid-template-columns: 15rem 1fr; gap: 1.4rem; align-items: start; margin: 1.6rem 0; }
.cb-row .cb { margin: 0; max-width: none; }
@media (max-width: 700px) { .cb-row { grid-template-columns: 1fr; } }

/* --------------------------------------------------------- move notation */
/* Monospace, but restrained — same Consolas the house labels already use,
   at body size, in black. It should read as a notebook, not a terminal. */

.mv {
  font-family: Consolas, "Courier New", Courier, monospace;
  font-size: 0.94em; font-weight: 600; color: #111;
  white-space: nowrap;
}
.mv-line {
  font-family: Consolas, "Courier New", Courier, monospace;
  font-size: 0.95rem; line-height: 1.9; color: #111;
  margin: 0.7rem 0;
}
.mv-line .mv-no { color: #111; opacity: 0.55; margin-right: 0.15em; }

/* Full game move list: number, White, Black. Fixed columns so it stays a
   tidy block and cannot grow into the rail. */
.movelist {
  border-collapse: collapse;
  font-family: Consolas, "Courier New", Courier, monospace;
  font-size: 0.9rem;
  width: auto; max-width: 100%;
  margin: 1rem 0;
}
.movelist td {
  padding: 0.18rem 0.5rem;
  vertical-align: baseline;
  border: none;
}
.movelist tr + tr td { border-top: 1px solid #E6E3D8; }
.movelist .ml-no { color: #111; opacity: 0.5; text-align: right; width: 2.6rem; }
.movelist .ml-mv { width: 7.5rem; color: #111; }
.movelist .ml-mv b { font-weight: 600; }

/* Classification badge — the one non-accent color on a chess page. It is a
   marker, never text color; the move itself stays black, and the word beside
   it means the same thing in greyscale. */
.cls {
  display: inline-flex; align-items: center; gap: 0.32em;
  white-space: nowrap;
}
.cls svg {
  width: 0.95em; height: 0.95em; flex: 0 0 auto; vertical-align: -0.12em;
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.cls-word {
  font-family: Consolas, "Courier New", Courier, monospace;
  font-size: 0.72em; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: bold; color: #111; opacity: 0.72;
}

/* ------------------------------------------------- game analysis template */

.gm-head { border: 1.5px solid var(--chess-accent); padding: 0; margin: 0.4rem 0 0; }
.gm-head dl {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0; gap: 0;
}
.gm-head .gm-cell { padding: 0.7rem 1rem; border-top: 1px solid #DDD9CB; }
.gm-head .gm-cell:nth-child(-n+2) { border-top: none; }
.gm-head .gm-cell:nth-child(odd) { border-right: 1px solid #DDD9CB; }
.gm-head dt {
  font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase; letter-spacing: 0.11em; font-size: 0.74rem;
  font-weight: bold; color: var(--chess-accent); margin-bottom: 0.25rem;
}
.gm-head dd { margin: 0; font-size: 1rem; color: #111; }
@media (max-width: 620px) {
  .gm-head dl { grid-template-columns: 1fr; }
  .gm-head .gm-cell:nth-child(odd) { border-right: none; }
  .gm-head .gm-cell:nth-child(2) { border-top: 1px solid #DDD9CB; }
}

/* Result word carries no color — the house rule holds even here. */
.gm-result { font-weight: bold; }

/* An annotated moment: diagram left, coach comment right. */
.gm-moment { margin: 2.2rem 0; }
.gm-moment .gm-moment-head {
  display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.gm-moment .gm-ply {
  font-family: Consolas, "Courier New", Courier, monospace;
  font-size: 1.02rem; font-weight: bold; color: #111;
}
.gm-moment .gm-eval {
  font-family: Consolas, "Courier New", Courier, monospace;
  font-size: 0.78rem; color: #111; opacity: 0.6;
}
.gm-moment .gm-body { display: grid; grid-template-columns: 15rem 1fr; gap: 1.4rem; align-items: start; }
.gm-moment .gm-body .cb { margin: 0; max-width: none; }
.gm-moment .gm-comment { font-size: 1rem; }
.gm-moment .gm-better {
  margin-top: 0.7rem; font-size: 0.92rem;
  border-left: 3px solid var(--chess-accent); padding-left: 0.9rem;
}
@media (max-width: 700px) { .gm-moment .gm-body { grid-template-columns: 1fr; } }

/* Accuracy / counts strip. */
.gm-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--chess-accent); margin: 1.1rem 0;
}
.gm-stats div { padding: 0.7rem 0.9rem; }
.gm-stats div + div { border-left: 1px solid #DDD9CB; }
.gm-stats .gs-label {
  font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem;
  font-weight: bold; color: var(--chess-accent);
}
.gm-stats .gs-val { font-size: 1.25rem; }
.gm-stats .gs-sub { font-size: 0.8rem; opacity: 0.7; }

/* The four questions. Answered ones read as prose; unanswered ones leave
   open space to write, with no ruled lines — same as the house annotation gaps. */
.gm-questions { border: 1.5px solid var(--chess-accent); padding: 1.1rem 1.3rem 1.3rem; }
.gm-questions ol { list-style: none; margin: 0; padding: 0; counter-reset: gq; }
.gm-questions > ol > li { counter-increment: gq; position: relative; padding-left: 2.5rem; margin: 1.5rem 0 0; }
.gm-questions > ol > li:first-child { margin-top: 0.4rem; }
.gm-questions > ol > li::before {
  content: counter(gq);
  position: absolute; left: 0; top: 0.05rem;
  width: 1.65rem; height: 1.65rem; border-radius: 50%;
  background: var(--chess-accent); color: #fff;
  font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.92rem; font-weight: bold; text-align: center; line-height: 1.65rem;
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.gm-questions .gq-q { font-weight: bold; margin: 0 0 0.35rem; }
.gm-questions .gq-a { margin: 0; }
.gm-questions .gq-blank { height: 4.2rem; }
.gm-questions .gq-engine {
  font-family: Consolas, "Courier New", Courier, monospace;
  font-size: 0.76rem; letter-spacing: 0.04em; opacity: 0.7; margin-top: 0.3rem;
}

/* Link back to the Chess Review App for the full move-by-move review. */
.gm-applink {
  display: inline-block; margin-top: 0.4rem;
  font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.09em;
  font-weight: bold; color: var(--chess-accent);
  border: 1.5px solid var(--chess-accent); padding: 0.4rem 0.9rem;
  text-decoration: none;
}
.gm-applink:hover { background: var(--chess-accent); color: #fff; text-decoration: none; }