/* chess.css - Brainlag's chess board (chessboard.js, also for the games) and the course's lesson figures (chess-learn.js). Light and dark follow
   the site theme. Legal moves and highlights are teal (--study), the last move and check amber (--gold); never red.
   The board is as wide as the content column (at 390 px: 358 px, squares of 44.75 px), never wider than 480 px. */
:root{
  --chb-l:#e4edf5; --chb-d:#587892; --chb-cl:#2c4a6b; --chb-cd:#ffffff;
  --chp-w:#ffffff; --chp-w-edge:#0b1320; --chp-b:#111a26; --chp-b-edge:#dde6ef; --chp-b-ln:#c6d4e1;
  --chb-teal:#0d9aa7; --chb-teal-a:rgba(13,154,167,.42); --chb-amber:#ffc23d; --chb-amber-a:rgba(255,194,61,.62); --chb-amber-ink:#a86a00;
  --chb-last:#ffd77a;   /* the last move, check and a wrong square: opaque, so a dark square never mixes it to olive (UI rule: no brown or olive) */
  --chb-focus:#15365a;
}
:root[data-theme="dark"]{
  --chb-l:#a9bdd1; --chb-d:#4e6680; --chb-cl:#0b1320; --chb-cd:#ffffff;   /* a clear two-tone (3.1:1; was 1.4, one grey-blue slab: coordinator, 21 Oct). As in the light theme, a piece reads by its fill on the far square and its edge on the near one: white 5.7 on dark, its dark edge 9.7 on light; black 9.7 on light, 3.2 on dark with its light edge 4.0 */
  --chp-w:#f8fafc; --chp-w-edge:#0b1320; --chp-b:#0b121c; --chp-b-edge:#c9d6e2; --chp-b-ln:#b9c9d7;
  --chb-teal:#3fc3cd; --chb-teal-a:rgba(63,195,205,.45); --chb-amber:#ffc23d; --chb-amber-a:rgba(255,194,61,.55); --chb-amber-ink:#ffd27a;
  --chb-last:#f2c55e;
  --chb-focus:#ffffff;
}

.chb{width:100%;max-width:480px;margin:12px auto 0;position:relative}
.chb-frame{position:relative;width:100%;aspect-ratio:1/1;border-radius:6px;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.chb-grid{display:grid;grid-template-rows:repeat(8,1fr);width:100%;height:100%}
.chb-row{display:grid;grid-template-columns:repeat(8,1fr)}
/* a board reads a to h left to right in every language: on a right-to-left page it mirrored, and a tap, worked out
   from the pointer as if left to right, landed on the wrong file */
.chb{direction:ltr}
.chb-sq{position:relative;min-width:0;min-height:0;outline:none;cursor:default}
.chb-sq.l{background:var(--chb-l)}
.chb-sq.d{background:var(--chb-d)}
.chb-move .chb-sq,.chb-explore .chb-sq,.chb-squares .chb-sq,.chb-names .chb-sq{cursor:pointer}
.chb-sq::before{content:"";position:absolute;inset:0;pointer-events:none}
.chb-sq.is-hl::before{background:var(--chb-teal-a)}
.chb-sq.is-last::before{background:var(--chb-last)}
.chb-sq.is-sel::before{background:var(--chb-teal-a);box-shadow:inset 0 0 0 4px var(--chb-teal)}
.chb-sq.is-mark::before,.chb-sq.is-named::before{background:var(--chb-teal-a);box-shadow:inset 0 0 0 4px var(--chb-teal)}
.chb-sq.is-check::before{background:radial-gradient(circle,var(--chb-amber) 0,var(--chb-last) 72%);box-shadow:inset 0 0 0 3px var(--chb-amber)}
.chb-sq.is-press::before{box-shadow:inset 0 0 0 4px var(--chb-focus)}
.chb-sq.is-cap::before{box-shadow:inset 0 0 0 5px var(--chb-teal);border-radius:50%}
.chb-sq.is-right::before{background:var(--chb-teal-a);box-shadow:inset 0 0 0 4px var(--chb-teal)}
.chb-sq.is-missed::before{box-shadow:inset 0 0 0 4px var(--chb-teal);background:repeating-linear-gradient(45deg,var(--chb-teal-a) 0 6px,transparent 6px 12px)}
.chb-sq.is-pre::before{background:repeating-linear-gradient(-45deg,var(--chb-teal-a) 0 5px,transparent 5px 10px)}
.chb-sq.is-wrong::before{background:var(--chb-last);box-shadow:inset 0 0 0 4px var(--chb-amber)}
.chb-sq:focus-visible{box-shadow:inset 0 0 0 3px var(--chb-focus),inset 0 0 0 6px var(--chb-l);z-index:2}
.chb-sq.d:focus-visible{box-shadow:inset 0 0 0 3px var(--chb-focus),inset 0 0 0 6px var(--chb-d)}
.chb-dot{position:absolute;left:50%;top:50%;width:30%;height:30%;margin:-15% 0 0 -15%;border-radius:50%;background:var(--chb-teal);opacity:.9;pointer-events:none}
/* the coordinates: small and faded in the square's corner (files bottom right, ranks top left), never under a piece's
   ink (owner, 13 Oct 2026; checked on the full first and last ranks, both colours, both themes) */
.chb-cf,.chb-cr{position:absolute;font:700 clamp(11px,3vw,13px)/1 var(--f-body);opacity:.75;pointer-events:none;z-index:1}   /* 11 px at least (mobile audit LRN-17: 7.4 px at 320) */
.chb-cf{right:2px;bottom:1px}
.chb-cr{left:2px;top:2px}
.chb-sq.l .chb-cf,.chb-sq.l .chb-cr{color:var(--chb-cl)}
.chb-sq.d .chb-cf,.chb-sq.d .chb-cr{color:var(--chb-cd)}

/* the pieces: flat shapes with a firm outline, so each reads on either square in either theme */
.chp{position:absolute;top:6%;left:9%;width:82%;height:82%;pointer-events:none;overflow:visible}   /* a little in from the corners, for the coordinates */
.chp *{stroke-linejoin:round;stroke-linecap:round}
/* the two sides tell apart at a glance at 45 px (owner, 13 Oct 2026): white a light fill with a firm dark outline, black a
   solid dark fill with a thin light edge, so it never reads as an outline; on both square colours, light and dark */
.chp-w *{fill:var(--chp-w);stroke:var(--chp-w-edge);stroke-width:3.8}
.chp-b *{fill:var(--chp-b);stroke:var(--chp-b-edge);stroke-width:2.6}
.chp .ln{fill:none}
.chp-w .ln{stroke:var(--chp-w-edge);stroke-width:2.6}
.chp-b .ln{stroke:var(--chp-b-ln);stroke-width:2.6}
.chp-w .eye{fill:var(--chp-w-edge);stroke:none}
.chp-b .eye{fill:var(--chp-b-ln);stroke:none}
.chb-sq.is-lifted .chp{opacity:.35}
.chp-in{animation:chp-in .18s var(--ease-out,ease-out)}
@keyframes chp-in{from{transform:scale(.86)}to{transform:none}}
.chb-ghost{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.28))}
.chb-ghost .chp{position:static;width:100%;height:100%;inset:auto}

/* arrows over the board: teal for the right move, amber for what a wrong move allows */
.chb-ar{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.chb-arw line{stroke-width:.17;stroke-linecap:round}
.chb-arw.a line{stroke:var(--chb-amber)} .chb-arw.a path{fill:var(--chb-amber)}
.chb-arw.t line{stroke:var(--chb-teal)} .chb-arw.t path{fill:var(--chb-teal)}
.chb-arw{opacity:.92}

/* promotion: four pieces in a column over the promotion file */
.chb-promo{position:absolute;top:0;left:calc(var(--px,0) * 12.5%);width:12.5%;display:flex;flex-direction:column;z-index:3;background:var(--surface);box-shadow:0 6px 18px rgba(0,0,0,.25);border-radius:4px}
.chb-promo[hidden]{display:none}
.chb-pb{position:relative;aspect-ratio:1/1;width:100%;min-height:44px;border:0;background:transparent;padding:0;cursor:pointer}
.chb-pb .chp{inset:8%;width:84%;height:84%}
.chb-pb:hover,.chb-pb:focus-visible{background:var(--chb-teal-a);outline:none}

.chb-clock{min-height:0}
.chb-clock:empty{display:none}
.chb-read.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;min-height:0}
.chb-read{margin:8px 0 0;min-height:1.4em;font-size:.95rem;color:var(--ink-2);text-align:center}
.chb-bar[hidden]{display:none}
.chb-bar{display:flex;justify-content:center;margin-top:6px}
.chb-reset{min-height:44px;min-width:44px;padding:0 16px;border:0;background:transparent;color:var(--study-ink);font:600 .95rem var(--f-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
:root[data-theme="dark"] .chb-reset{color:var(--chb-teal)}
.chb.is-locked .chb-sq{cursor:default}

/* a lesson figure and a question's static board */
.chb-fig{margin:14px 0 6px}
.chb-q{margin:10px 0 4px}
.chb-q .chb-read:not(.vh){display:none}

/* the piece values strip (lesson 6) */
.chb-values{display:flex;justify-content:center;gap:clamp(8px,3vw,22px);margin:14px 0 8px}
.chb-values span{display:flex;flex-direction:column;align-items:center;gap:4px}
.chb-values .chp{position:static;width:44px;height:44px;inset:auto}
.chb-values b{font:700 1.15rem var(--f-display);color:var(--ink)}

/* the lesson layout (the owner's rules, as the Grade 6 lessons): one idea a section, the board first, then its one-line
   rule (16.5 px semibold), captions under a board (15.5 px, left), a pair of boards side by side from 700 px with equal
   heights, stacked on a phone; long copy folded under "More on this" (no card, a 44 px row, a chevron that turns) */
.chb-rule{margin:10px 0 6px;font-size:16.5px;font-weight:600;line-height:1.4;color:var(--ink)}
.chb-cap{margin:6px 0 0;max-width:640px;font-size:15.5px;line-height:1.4;color:var(--ink-2);text-align:left}
.chb-fig .chb-cap{margin-top:12px}   /* the figure caption gap of the other courses; the lesson prose's p rule (.lp-prose p) beat the single class and set it to 0 */
/* two boards side by side only where each keeps 44 px squares (352 px: chess_shots, 22 Oct: 33.7 px at 1440 in a
   lesson's column); otherwise one under the other, each as wide as the column (a phone: the screen less its gutter) */
.chb-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(352px,100%),1fr));gap:18px;margin:14px 0 6px}
.chb-pair > .chb-fig{margin:0;display:flex;flex-direction:column}
.chb-pair .chb{margin-top:0}
.chb-pair{align-items:stretch}
/* a small phone: the board edge to edge, its squares 40 px at 320 rather than 36 (mobile audit LRN-17) */
@media (max-width:359px){.lq .chb,.la .chb{width:100vw;max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}.lq .chb-frame,.la .chb-frame{border-radius:0}}

/* "More on this": the long explanation, folded */
/* "More on this": set apart from the words above it by space alone, never a rule line (no hairlines, coordinator 22 Oct) */
.chb-more{margin:22px 0 4px}
.chb-more summary{min-height:44px;display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:600;color:var(--study-ink);list-style:none}
.chb-more summary::-webkit-details-marker{display:none}
.chb-more summary::before{content:"";width:8px;height:8px;border-right:2.4px solid currentColor;border-bottom:2.4px solid currentColor;transform:rotate(-45deg);transition:transform .18s var(--ease-out,ease-out);flex:none}
.chb-more[open] summary::before{transform:rotate(45deg)}
:root[data-theme="dark"] .chb-more summary{color:var(--chb-teal)}
.chb-more p{margin:6px 0 10px}

@media (prefers-reduced-motion: reduce){.chp-in{animation:none}}

/* a practice puzzle's line on a phone (chess-learn.js adds html.chb-lines with the line): the board does not fit above
   the feedback panel, so the panel folds to one line, "Correct. Play the line on the board." and a Worked solution
   button (.chb-fold), nothing over the board. Opened (html.chb-open) the panel shows the mark and at least three lines
   of the worked solution (13em), never more than a third of the screen if that leaves more; the rest scrolls inside,
   with a thin scrollbar of its own and an inner shadow at the foot while there is more below (.chb-below; a shadow paints under
   the text, never over it). From 700 px the panel sits in the bar's flow and nothing changes. */
.chb-fold{display:none}
@media (max-width:699px){
  html.chb-lines .chb-fold{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0}
  html.chb-lines .chb-fold-t{margin:0;font-weight:700}
  html.chb-lines .chb-fold-x{min-height:44px;padding:0 16px;border-radius:12px;border:2px solid currentColor;background:transparent;color:inherit;font:inherit;font-weight:700;cursor:pointer}
  html.chb-lines:not(.chb-open) .lp-foot > .lp-sheet > :not(.chb-fold){display:none}
  html.chb-lines:not(.chb-open) .lp-foot > .lp-sheet{padding-top:6px;padding-bottom:6px}
  html.chb-lines.chb-open .lp-foot > .lp-sheet{max-height:max(13em, min(32dvh, calc(100dvh - var(--lp-act-h,96px) - 24px)));scrollbar-width:thin;scrollbar-color:rgba(var(--ink-rgb),.35) transparent}
  html.chb-lines.chb-open .lp-foot > .lp-sheet::-webkit-scrollbar{width:6px}
  html.chb-lines.chb-open .lp-foot > .lp-sheet::-webkit-scrollbar-thumb{background:rgba(var(--ink-rgb),.35);border-radius:3px}
  html.chb-lines.chb-open .lp-foot > .lp-sheet.chb-below{box-shadow:inset 0 -16px 14px -12px rgba(var(--ink-rgb),.28)}
}

/* a phone (360 to 520 px): the board takes the screen's width less a 16 px gutter each side, out of the column's own
   padding, so its squares are 41 px at 360 and 44 px at 390 (they were 39 px at 390: chess_shots, 22 Oct); the column
   is centred on the screen in the lesson player, so the board stays centred too */
@media (max-width:520px){
  .lp .chb{width:calc(100vw - 32px);max-width:none;margin-left:calc(50% - 50vw + 16px);margin-right:calc(50% - 50vw + 16px)}
}