* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: #2b2722; color: #ece7df;
}
header {
  display: flex; align-items: center; gap: 1.2rem;
  padding: .7rem 1.2rem; background: #1f1c18; border-bottom: 1px solid #3a352e;
}
header h1 { font-size: 1.2rem; margin: 0; }
nav { display: flex; gap: .4rem; }
nav button {
  background: #3a352e; color: #ece7df; border: none; padding: .5rem 1rem;
  border-radius: 6px; cursor: pointer; font-size: .95rem;
}
nav button.active { background: #7a9e5a; color: #1f1c18; font-weight: 600; }
.ratings { margin-left: auto; color: #b9b0a2; font-size: .9rem; }

main { padding: 1.2rem; }
.tab { display: none; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
.tab.active { display: flex; }
.board-wrap { width: 480px; max-width: 92vw; }
/* touch-action:none stops the page from scrolling while you drag a piece on a
   phone — without it, dragging fights the browser's scroll and moves misfire. */
.board { width: 480px; max-width: 92vw; touch-action: none; }
.board .square-55d63 { touch-action: none; }

.panel {
  flex: 1; min-width: 280px; background: #1f1c18; border: 1px solid #3a352e;
  border-radius: 10px; padding: 1rem 1.2rem;
}
.head { font-size: 1.05rem; line-height: 1.5; }
.verdict { margin-top: .8rem; line-height: 1.55; }
.verdict .ok { color: #9ccc6b; font-weight: 600; }
.verdict .bad { color: #e7866b; font-weight: 600; }
.muted { color: #b9b0a2; font-size: .9rem; }
button.primary {
  margin-top: 1rem; background: #7a9e5a; color: #1f1c18; border: none;
  padding: .6rem 1.2rem; border-radius: 7px; font-size: 1rem; font-weight: 600;
  cursor: pointer;
}
a { color: #9cc3e0; }
.login-wrap {
  max-width: 360px; margin: 12vh auto 0; padding: 2rem 1.5rem; text-align: center;
  background: #1f1c18; border: 1px solid #3a352e; border-radius: 12px;
}
.login-wrap h1 { margin: 0 0 .3rem; }
.login-wrap form { display: flex; flex-direction: column; gap: .8rem; margin-top: 1.2rem; }
.login-wrap input {
  padding: .7rem .9rem; border-radius: 8px; border: 1px solid #3a352e;
  background: #2b2722; color: #ece7df; font-size: 1rem;
}
.login-wrap button.primary { margin: 0; }

.clocks { display: flex; gap: .8rem; margin-bottom: 1rem; }
.clk {
  flex: 1; text-align: center; font-size: 1.8rem; font-variant-numeric: tabular-nums;
  background: #2b2722; border: 1px solid #3a352e; border-radius: 8px; padding: .5rem;
  display: flex; flex-direction: column; align-items: center; line-height: 1.1;
}
.clk small { font-size: .6rem; color: #b9b0a2; text-transform: uppercase; letter-spacing: .05em; }
.clk.active { border-color: #7a9e5a; color: #cfe9bb; }
.clk.low { color: #e7866b; }

.markdown { max-width: 900px; line-height: 1.55; }
.markdown h1 { font-size: 1.4rem; } .markdown h2 { font-size: 1.15rem; margin-top: 1.3rem; }
.markdown code { background: #2b2722; padding: .1rem .3rem; border-radius: 4px; }

.repsel {
  background: #3a352e; color: #ece7df; border: 1px solid #4a443c;
  border-radius: 6px; padding: .35rem .5rem; font-size: .9rem; cursor: pointer;
}
.levelrow { display: block; margin: .2rem 0 .7rem; color: #b9b0a2; font-size: .9rem; }
.levelrow .repsel { margin-left: .4rem; }

.egcontrols { display: flex; gap: .5rem; margin: .8rem 0 .2rem; }
.ghost {
  background: #2b2722; color: #ece7df; border: 1px solid #4a443c;
  border-radius: 7px; padding: .5rem .9rem; font-size: .92rem; cursor: pointer;
}
.ghost:hover { border-color: #7a9e5a; }
.explain {                     /* a move's note on Bridge: a quiet tint, never a coloured side stripe */
  background: #242019; border-radius: 6px;
  padding: .5rem .7rem; margin: .5rem 0; line-height: 1.5;
}
.hint { background: rgba(217, 194, 138, .09); border-radius: 6px; padding: .5rem .7rem; }
.phase { background: #243a2a; border-radius: 6px; padding: .55rem .7rem; font-weight: 600; margin: .5rem 0; }

.duecard {
  background: #1f1c18; border: 1px solid #3a352e; border-radius: 10px;
  padding: .8rem 1.1rem; margin-bottom: 1.2rem;
}
.duecard h2 { margin: 0 0 .5rem; font-size: 1.1rem; }
.duetable { width: 100%; border-collapse: collapse; }
.duetable td { padding: .25rem .4rem; border-bottom: 1px solid #2b2722; }
.duetable td:nth-child(2) { text-align: right; color: #9ccc6b; white-space: nowrap; }
.duetable td:nth-child(3) { text-align: right; }

/* ---- progress dashboard ---- */
.t-bad { color: #e7866b; }
#progressContent .quieter { margin: 1.4rem 0 .2rem; color: #cfc6b6; max-width: 65ch; }

/* ---- analysis board ---- */
.anwrap { display: flex; gap: .5rem; align-items: stretch; }
.evalbar { flex: 0 0 16px; width: 16px; background: #1f1c18; border: 1px solid #3a352e; border-radius: 4px; position: relative; overflow: hidden; }
.evalfill { position: absolute; left: 0; right: 0; bottom: 0; background: #ece7df; height: 50%; transition: height .25s; }
.evalbar.flipped .evalfill { bottom: auto; top: 0; }
.hl-from { box-shadow: inset 0 0 0 3px rgba(216,166,87,.85); }
.hl-to { box-shadow: inset 0 0 0 3px rgba(122,158,90,.95); }
.anctl { display: flex; gap: .4rem; margin-bottom: .6rem; }
.anctl .ghost:disabled { opacity: .4; cursor: default; }
.anlines { margin: .3rem 0; }
.anline { padding: .35rem .5rem; border-radius: 6px; background: #1f1c18; border: 1px solid #3a352e; margin: .3rem 0; font-size: .92rem; }
.anline .ev { display: inline-block; min-width: 3.4rem; font-weight: 700; }
.anline .ev.pos { color: #9ccc6b; } .anline .ev.neg { color: #e7866b; }
.anline .mv, .anmoves .mv { cursor: pointer; padding: .02rem .2rem; border-radius: 3px; }
.anline .mv:hover, .anmoves .mv:hover { background: #3a352e; }
.anmoves { margin: .6rem 0; line-height: 1.9; }
.anmoves .mvno { color: #b9b0a2; margin-right: .15rem; }
.anmoves .mv.cur { background: #7a9e5a; color: #1f1c18; font-weight: 700; }
.fenrow { display: flex; gap: .4rem; margin-top: .6rem; }
.fenrow input { flex: 1; background: #2b2722; color: #ece7df; border: 1px solid #3a352e; border-radius: 7px; padding: .5rem .7rem; font: inherit; }
.threatbox { margin: .3rem 0; }
.threat { background: #2c2818; border-radius: 6px; padding: .5rem .7rem; line-height: 1.5; }
.ghost.small { padding: .2rem .5rem; font-size: .8rem; margin-left: .3rem; }
.scansum { background: #242019; border: 1px solid #3a352e; border-radius: 7px; padding: .5rem .7rem; margin-bottom: .6rem; line-height: 1.5; }
.qg { font-weight: 800; margin-left: .1rem; }
.q-blunder { color: #e7866b; } .q-mistake { color: #d8a657; } .q-inacc { color: #d8c657; }
.anmoves .mv.q-blunder { background: rgba(231,134,107,.18); } .anmoves .mv.q-blunder.cur { background: #e7866b; color: #1f1c18; }
.anmoves .mv.q-mistake { background: rgba(216,166,87,.18); } .anmoves .mv.q-mistake.cur { background: #d8a657; color: #1f1c18; }
.anmoves .mv.q-inacc   { background: rgba(216,198,87,.15); } .anmoves .mv.q-inacc.cur   { background: #d8c657; color: #1f1c18; }

/* ---- phone / installed-PWA layout ---- */
body { padding-bottom: env(safe-area-inset-bottom); }
@media (max-width: 640px) {
  header {
    flex-wrap: wrap; gap: .45rem .8rem; padding: .55rem .8rem;
    padding-top: calc(.55rem + env(safe-area-inset-top));
  }
  header h1 { font-size: 1.05rem; width: 100%; }
  nav { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  nav button { padding: .5rem .75rem; font-size: .9rem; white-space: nowrap; }
  .ratings { margin-left: 0; width: 100%; font-size: .82rem; }
  .repsel { width: 100%; margin-top: .3rem; }
  main { padding: .6rem; }
  .tab { gap: .9rem; }
  .board-wrap, .board { width: 96vw; max-width: 96vw; }
  .panel { min-width: 0; width: 100%; padding: .85rem .9rem; }
  .clk { font-size: 1.5rem; }
  button.primary { width: 100%; padding: .75rem 1rem; }   /* easy thumb target */
}

/* ---- Games view (list of all your games; thumb-first on phones) ---- */
.games-panel { max-width: 760px; }
.games-head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.seg { display: inline-flex; border: 1px solid #4a443c; border-radius: 8px; overflow: hidden; }
.seg button { background: #2b2722; color: #ece7df; border: 0; padding: .55rem .85rem; font-size: .92rem; cursor: pointer; min-height: 40px; }
.seg button + button { border-left: 1px solid #4a443c; }
.seg button.on { background: #7a9e5a; color: #1f1c18; font-weight: 600; }
#gQ { flex: 1 1 11rem; min-width: 0; padding: .6rem .7rem; font-size: 16px; /* 16px avoids the iOS zoom-on-focus */
      background: #2b2722; color: #ece7df; border: 1px solid #4a443c; border-radius: 8px; }
.gnote { min-height: 1.2em; margin: .2rem 0 .4rem; }
.glist { list-style: none; margin: 0; padding: 0; }
.glist li { border-bottom: 1px solid #3a352e; }
.gsum { display: grid; grid-template-columns: 4.3rem 1.1rem 1fr auto; column-gap: .5rem; row-gap: .15rem;
        align-items: center; width: 100%; text-align: left; background: none; border: 0; color: inherit;
        padding: .65rem .2rem; min-height: 48px; cursor: pointer; font: inherit; }
.gsum:hover { background: #26221d; }
.gdate { color: #b9b0a2; font-size: .88rem; }
.gcol { font-size: 1rem; line-height: 1; }
.gopp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.gres { font-size: .9rem; font-weight: 600; }
.gres.win { color: #9ccc6b; } .gres.loss { color: #e7a08b; } .gres.draw { color: #cfc6b6; }
.gopen { grid-column: 3 / 5; color: #b9b0a2; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gact { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: 0 .2rem .8rem; }
.gact .ghost, .gact a.ghost { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.gmore { width: 100%; margin-top: .8rem; min-height: 44px; }
@media (max-width: 640px) {
  .gsum { grid-template-columns: 3.9rem 1rem 1fr auto; }
}

/* ---- App shell: bottom bar + sheets on phones; tap-to-move highlight everywhere ---- */
.board .tap-sel { box-shadow: inset 0 0 0 4px rgba(156, 204, 107, .95); }
.sectitle { display: none; }
.dock { display: none; }
button, a, select, input, textarea { touch-action: manipulation; }  /* no double-tap zoom delay */

.sheet { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .45);
         display: flex; align-items: flex-end; justify-content: center; }
.sheet[hidden] { display: none; }
.sheet-card { width: 100%; max-width: 560px; background: #1f1c18; border: 1px solid #3a352e; border-bottom: 0;
              border-radius: 16px 16px 0 0; padding: .6rem 1rem calc(1rem + env(safe-area-inset-bottom));
              transform: translateY(100%); transition: transform .18s ease-out; }
.sheet.open .sheet-card { transform: none; }
.sheet-grip { width: 38px; height: 4px; border-radius: 2px; background: #4a443c; margin: .1rem auto .7rem; }
.sheet-title { font-weight: 600; font-size: 1.05rem; margin: 0 0 .5rem .2rem; }
.sheet-item { display: block; width: 100%; text-align: left; background: #2b2722; color: #ece7df;
              border: 1px solid #3a352e; border-radius: 10px; padding: .8rem .9rem; margin: .45rem 0;
              font: inherit; cursor: pointer; min-height: 56px; }
.sheet-item b { display: block; font-size: 1rem; }
.sheet-item span { display: block; color: #b9b0a2; font-size: .86rem; margin-top: .15rem; }
.sheet-foot { margin: .7rem .2rem 0; }

@media (max-width: 640px) {
  html, body { overflow-x: clip; }            /* clip: keeps the sticky top bar working */
  header { position: sticky; top: 0; z-index: 20; flex-wrap: wrap; align-items: center;
           gap: .35rem .6rem; padding: .5rem .8rem; padding-top: calc(.5rem + env(safe-area-inset-top)); }
  header h1 { width: auto; font-size: .95rem; color: #b9b0a2; font-weight: 600; }
  .sectitle { display: inline; font-size: 1.1rem; font-weight: 600; }
  nav.tabs, .ratings { display: none; }
  .levelrow .repsel { display: block; width: 100%; margin: .1rem 0 0; }   /* the opponent choice on its own line */
  select, input, textarea { font-size: 16px; }             /* stop iOS zoom-on-focus */
  main { padding: .5rem .5rem calc(76px + env(safe-area-inset-bottom)); }
  .tab { gap: .7rem; }
  .board-wrap, .board { width: min(calc(100vw - 1rem), calc(100svh - 210px)); max-width: calc(100vw - 1rem);
                        margin: 0 auto; }
  .anwrap { width: 100%; justify-content: center; }
  .anwrap .board-wrap, .anwrap .board { width: min(calc(100vw - 1rem - 24px), calc(100svh - 210px)); }
  .anctl, .egcontrols { flex-wrap: wrap; }
  .anctl .ghost, .egcontrols .ghost, .panel .ghost { min-height: 44px; }
  .panel { border-radius: 12px; }

  .dock { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
          background: #1f1c18; border-top: 1px solid #3a352e; padding-bottom: env(safe-area-inset-bottom); }
  .dock button { flex: 1; background: none; border: 0; color: #b9b0a2; padding: .45rem 0 .5rem;
                 min-height: 60px; display: flex; flex-direction: column; align-items: center; gap: .2rem;
                 font: inherit; font-size: .72rem; cursor: pointer; }
  .dock svg { width: 24px; height: 24px; fill: currentColor; }
  .dock button.on { color: #9ccc6b; font-weight: 600; }
}
@media (display-mode: standalone) {
  html, body { overscroll-behavior-y: none; }             /* no accidental pull-to-refresh in the app */
}
.gact[hidden] { display: none; }              /* the attribute must win over display:flex */
.panel select { background: #2b2722; color: #ece7df; border: 1px solid #4a443c; border-radius: 8px; padding: .45rem .6rem; }

/* ---- player bars on the Analyse board ---- */
.pbar { display: flex; align-items: center; gap: .5rem; padding: .35rem .2rem; font-size: .95rem; min-height: 2rem; }
.pbar[hidden] { display: none; }
.pdot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #8a8272; flex: none; }
.pdot.white { background: #f2efe6; } .pdot.black { background: #1d1b16; }
.pname { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pelo { color: #b9b0a2; }
.pclock { margin-left: auto; font-variant-numeric: tabular-nums; background: #2b2722; border: 1px solid #3a352e;
          border-radius: 6px; padding: .1rem .5rem; }
.pclock.run { background: #7a9e5a; color: #1f1c18; border-color: #7a9e5a; font-weight: 600; }

/* ---- Analyse controls, Lichess-style ---- */
.anbar { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: .4rem; margin: 0 0 .6rem; }
.anbar .ghost { min-height: 48px; font-size: 1.2rem; padding: .3rem .6rem; }
.anbar .ghost:disabled { opacity: .35; cursor: default; }
.anbar .ghost.on { border-color: #7a9e5a; color: #9ccc6b; }
#anTools[hidden] { display: none; }
#anTools { margin-bottom: .6rem; }
.anmoves { position: relative; }
@media (max-width: 640px) {
  /* the move bar sits just above the bottom menu, where the thumb is - as on Lichess mobile */
  .anbar { position: fixed; left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom)); z-index: 25;
           margin: 0; padding: .4rem .5rem; background: #1f1c18; border-top: 1px solid #3a352e; }
  body[data-tab="analyse"] main { padding-bottom: calc(140px + env(safe-area-inset-bottom)); }
  .anmoves { max-height: 34vh; overflow-y: auto; }
}
.board .last-mv { background-image: linear-gradient(rgba(155, 199, 0, .35), rgba(155, 199, 0, .35)); }

/* ---- Promotion: one picker on every board (docs/DESIGN_MACRO_PLAN.md §2). As on Lichess, the four pieces stand in a
   column on the promotion square, the queen on the square itself; the board dims under it, and a tap there, Escape or
   the small cancel at the column's end puts the pawn back. It unrolls from the promotion square toward the centre. ---- */
.board { position: relative; }
.promo { position: absolute; z-index: 8; }
.promo-scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--res-black) 50%, transparent);
               animation: promo-dim .14s ease-out; }
.promo-col { position: absolute; display: flex; flex-direction: column; overflow: hidden; background: var(--surface);
             border-radius: var(--r-md); box-shadow: 0 10px 28px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35);
             animation: promo-open .22s cubic-bezier(.16, 1, .3, 1); }
.promo-col.up { flex-direction: column-reverse; animation-name: promo-open-up; }
.promo-pc { flex: none; display: block; width: var(--sq); height: var(--sq); margin: 0; padding: calc(var(--sq) * .07);
            border: 0; border-radius: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.promo-pc img { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--board-light);
                box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .16), 0 1px 2px rgba(0, 0, 0, .3);
                pointer-events: none; user-select: none; -webkit-user-drag: none;
                transition: transform .16s cubic-bezier(.16, 1, .3, 1), background-color .16s ease-out; }
.promo-pc:hover img { background: color-mix(in srgb, var(--board-light) 70%, white); transform: scale(1.06); }
.promo-pc:active img { transform: scale(.94); }
/* the queen takes the focus for the keyboard and a screen reader, but no piece looks chosen until he uses a key */
.promo-pc:focus-visible, .promo-x:focus-visible { outline: none; }
.promo.kb .promo-pc:focus-visible, .promo.kb .promo-x:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -3px; }
.promo.kb .promo-pc:focus-visible img { background: color-mix(in srgb, var(--board-light) 70%, white); }
.promo-x { flex: none; display: grid; place-items: center; width: 100%; height: var(--xh); margin: 0; padding: 0;
           border: 0; border-top: 1px solid var(--line); border-radius: 0; background: var(--surface-2); color: var(--text-3);
           cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .14s ease-out, background-color .14s ease-out; }
.promo-col.up .promo-x { border-top: 0; border-bottom: 1px solid var(--line); }
.promo-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.promo-x:hover { color: var(--text); background: var(--surface-3); }
@keyframes promo-dim { from { opacity: 0; } }
@keyframes promo-open { from { clip-path: inset(0 0 calc(100% - var(--sq)) 0 round var(--r-md)); }
                        to { clip-path: inset(0 0 0 0 round var(--r-md)); } }
@keyframes promo-open-up { from { clip-path: inset(calc(100% - var(--sq)) 0 0 0 round var(--r-md)); }
                           to { clip-path: inset(0 0 0 0 round var(--r-md)); } }
@media (prefers-reduced-motion: reduce) {
  .promo-scrim, .promo-col { animation: none; }
  .promo-pc img, .promo-x { transition: none; }
}

/* ---- computer analysis: verdict, graph, best-move arrow ---- */
.verdictbox { padding: 0 .15rem; margin: 0; line-height: 1.45; }   /* the verdict row's quiet second voice (no box, no stripe) */
.verdictbox[hidden] { display: none; }
.verdictbox .vwho { font-size: .8rem; margin-bottom: .1rem; }
.verdictbox .vk { font-weight: 700; margin-right: .2rem; }
.verdictbox .vk.ok { color: #9ccc6b; }
.angraph { margin: .4rem 0 .6rem; border-radius: 6px; overflow: hidden; cursor: pointer; }
.angraph[hidden] { display: none; }
.angraph svg { display: block; width: 100%; height: 64px; }
.arrowsvg { position: absolute; pointer-events: none; z-index: 5; }

/* ---- learned from Lichess first-hand: engine bar, one line, two-column moves ---- */
.enginebar { display: flex; align-items: center; gap: .6rem; background: #2b2722; border: 1px solid #3a352e;
             border-radius: 10px; padding: .35rem .6rem; margin: 0 0 .6rem; }
.enginebar.on { border-color: #5f7d45; }
.eswitch { position: relative; width: 46px; height: 26px; flex: none; cursor: pointer; }
.eswitch input { opacity: 0; width: 0; height: 0; position: absolute; }
.eswitch span { position: absolute; inset: 0; background: #4a443c; border-radius: 13px; transition: background .15s; }
.eswitch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%;
                       background: #ece7df; transition: transform .15s; }
.eswitch input:checked + span { background: #7a9e5a; }
.eswitch input:checked + span::after { transform: translateX(20px); }
.evalbig { font-size: 1.35rem; font-weight: 700; min-width: 3.2rem; font-variant-numeric: tabular-nums; }
.engineinfo { flex: 1; font-size: .8rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the board still looking (auto-deepening): a small dot breathes while the engine digs, and rests when it settles */
.engineinfo .ei-a, .engineinfo .ei-b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.engineinfo .ei-b { color: var(--text-2); }
.andot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin: 0 .45rem 0 .6rem; vertical-align: .08em;
         background: var(--text-4); }
@media (max-width: 640px) {                       /* a phone: who is speaking above, the state below, both whole */
  .engineinfo { font-size: .75rem; line-height: 1.35; }
  .engineinfo .ei-a, .engineinfo .ei-b { display: block; }
  .engineinfo .ei-b .andot { margin-left: 0; }
}
@media (max-width: 400px) { .enginebar { gap: .45rem; } }
.andot.live { background: var(--accent-2); animation: anbreathe 2.4s ease-in-out infinite; }
@keyframes anbreathe { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
/* a better move rose to the top: one soft wash that fades, never a flash */
.anline.risen { animation: anrisen 1.8s ease-out 1; }
@keyframes anrisen { from { background-color: var(--accent-wash-solid); } }
@media (prefers-reduced-motion: reduce) { .andot.live { animation: none; opacity: 1; } .anline.risen { animation: none; } }
.linestoggle { padding: .25rem .6rem; min-height: 36px; }
.anlines.collapsed .anline:nth-child(n+2) { display: none; }
.anlines.collapsed .anline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anmoves { display: grid; grid-template-columns: 2.4rem 1fr 1fr; align-items: center; row-gap: .1rem; }
.anmoves > .scansum, .anmoves > .muted { grid-column: 1 / -1; }
.anmoves .mvno { color: #8a8272; text-align: right; padding-right: .5rem; font-size: .9rem; }
.anmoves .mv { padding: .3rem .4rem; border-radius: 5px; cursor: pointer; }
.anmoves .mv.empty { color: #8a8272; cursor: default; }
.anbar { grid-template-columns: 1fr 1.6fr 1.6fr 1fr auto; }

/* ---- engine settings (Lichess-style gear) + back to the game ---- */
.ansettings { background: #2b2722; border: 1px solid #3a352e; border-radius: 10px; padding: .4rem .7rem; margin: -.3rem 0 .6rem; }
.ansettings[hidden] { display: none; }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .35rem 0; }
.setrow + .setrow { border-top: 1px solid #3a352e; }
.setrow .seg button { min-width: 2.4rem; }
.linestoggle.on { border-color: #7a9e5a; color: #9ccc6b; }

/* ---- wide-but-short screens: header wraps; landscape phones get the phone layout ---- */
header { flex-wrap: wrap; }
nav.tabs { overflow-x: auto; min-width: 0; max-width: 100%; }
@media (orientation: landscape) and (max-height: 500px) {
  .board-wrap, .board { width: min(calc(100vw - 1rem), calc(100svh - 90px)); }
  nav.tabs, .ratings { display: none; }
  .dock { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #1f1c18; border-top: 1px solid #3a352e; }
  .dock button { flex: 1; background: none; border: 0; color: #b9b0a2; min-height: 48px; display: flex; flex-direction: column; align-items: center; font-size: .7rem; }
  .dock svg { width: 20px; height: 20px; fill: currentColor; }
  .dock button.on { color: #9ccc6b; }
  main { padding-bottom: 64px; }
}

/* ---- opening strip, book verdicts, winning chances ---- */
.openingstrip { display: flex; flex-wrap: wrap; gap: .35rem .5rem; align-items: center; margin: 0 0 .5rem; font-size: .92rem; }
.openingstrip[hidden] { display: none; }
.openingstrip .opname { width: 100%; }
.chip { display: inline-block; border: 1px solid #4a443c; border-radius: 999px; padding: .1rem .55rem; font-size: .82rem; color: #cfc6b6; }
.chip.book { border-color: #6b5a3a; color: #e6c98f; }
.chip.rep { border-color: #5f7d45; color: #9ccc6b; }
.chip.left { border-color: #8a5a45; color: #e7a08b; border-radius: 10px; }
.verdictbox .vk.book { color: #e6c98f; }
.vchance { margin-top: .3rem; font-size: .9rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.vchance .cbar { flex: 1 1 80px; height: 6px; background: #3a352e; border-radius: 3px; overflow: hidden; min-width: 60px; }
.vchance .cbar span { display: block; height: 100%; background: #9ccc6b; }
.vdev { margin-top: .3rem; font-size: .9rem; color: #e6c98f; }
/* 'Learn 8.Nc3 here' under the verdict of his own move: one quiet text button */
.vlearn { margin-top: .15rem; }
.vlearn .vlearnbtn { margin: 0 0 0 -.5rem; min-height: 36px; border-color: transparent; background: none;
                     color: var(--accent-2); font-size: .9rem; }
.vlearn .vlearnbtn:hover, .vlearn .vlearnbtn:focus-visible { border-color: var(--line-2); }
@media (pointer: coarse) { .vlearn .vlearnbtn { min-height: 44px; } }

/* ---- the move's verdict always in view: coach strip above the controls + badge on the board ---- */
.ancoach { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
           column-gap: .5rem; row-gap: .1rem; padding: .05rem .15rem .35rem; margin-bottom: .1rem;
           border-bottom: 1px solid #3a352e; }
.ancoach[hidden] { display: none; }
.ancoach .c1 { font-size: .96rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.ancoach .c2 { grid-column: 1 / -1; font-size: .88rem; color: #cfc6b6; min-width: 0; overflow: hidden;
               text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.ancoach .cline { overflow-x: auto; text-overflow: clip; scrollbar-width: none; padding: .1rem 0; }
.ancoach .cline::-webkit-scrollbar { display: none; }
.ancoach .cmv { padding: .15rem .3rem; border-radius: 5px; cursor: pointer; }
.ancoach .cmv.cur { background: #7a9e5a; color: #1f1c18; font-weight: 700; }
.ancoach .cbtns { display: flex; gap: .35rem; }
.ancoach .cg { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.4rem;
               padding: 0 .25rem; border-radius: 999px; font-weight: 800; font-size: .78rem; margin-right: .4rem;
               vertical-align: 1px; letter-spacing: -.03em; }
.ancoach .ck { font-weight: 700; }
.ancoach .ck.best, .ancoach .ck.good { color: #9ccc6b; } .ancoach .ck.book { color: #e6c98f; }
.ancoach .bad { color: #e7a08b; } .ancoach .ok { color: #9ccc6b; }
.cbtn { background: #2b2722; color: #ece7df; border: 1px solid #5a5247; border-radius: 8px; padding: .3rem .5rem;
        min-height: 38px; font: inherit; font-size: .86rem; cursor: pointer; white-space: nowrap; }
.cbtn.back { border-color: #7a9e5a; color: #9ccc6b; font-weight: 600; }
.cg.q-blunder, .mvbadge.q-blunder { background: #d64f3e; color: #fff; }
.cg.q-mistake, .mvbadge.q-mistake { background: #e08a1e; color: #fff; }
.cg.q-inacc,   .mvbadge.q-inacc   { background: #d9c24a; color: #1f1c18; }
.cg.best,      .mvbadge.best      { background: #5f9e3a; color: #fff; }
.cg.book                          { background: #6b5a3a; color: #f3e6c8; }
.mvbadge { position: absolute; z-index: 6; border-radius: 50%; display: flex; align-items: center; justify-content: center;
           font-weight: 800; line-height: 1; letter-spacing: -.04em; box-shadow: 0 1px 3px rgba(0, 0, 0, .6);
           pointer-events: none; }
.mvbadge[hidden] { display: none; }
.seg-sm button { padding: .45rem .6rem; font-size: .88rem; }
@media (min-width: 641px) { .ancoach { min-height: 3.9rem; align-content: center; } }
@media (max-width: 640px) {
  /* Analyse on a phone: the board, the move's verdict and the controls fill the screen (no site header) */
  body[data-tab="analyse"] header { display: none; }
  .anwrap .board-wrap, .anwrap .board { width: min(calc(100vw - 1rem - 24px), calc(100svh - 295px)); }
  body[data-tab="analyse"] main { padding-bottom: calc(210px + env(safe-area-inset-bottom));
                                  padding-top: calc(.5rem + env(safe-area-inset-top)); }
  .games-head .seg { max-width: 100%; overflow-x: auto; }
}

/* ---- Games: one compact filter row, filter sheets, rich rows, full desktop width (2026-09-26) ---- */
.games-panel { max-width: 1200px; flex: 1 1 100%; }
.gbar { display: flex; align-items: center; gap: .4rem; min-height: 44px; margin-bottom: .35rem; }
.gchips-scroll { display: flex; gap: .4rem; overflow-x: auto; flex: 1 1 auto; min-width: 0; scrollbar-width: none; padding: 2px 0; }
.gchips-scroll::-webkit-scrollbar { display: none; }
.gchip { flex: none; display: inline-flex; align-items: center; gap: .3rem; min-height: 40px; padding: 0 .85rem; border-radius: 20px;
         border: 1px solid #4a443c; background: #2b2722; color: #ece7df; font: inherit; font-size: .92rem; cursor: pointer; white-space: nowrap; }
.gchip .gn { color: #9a917f; font-size: .82rem; }
.gchip.on { background: #7a9e5a; border-color: #7a9e5a; color: #1f1c18; font-weight: 600; }
.gchipset { display: inline-flex; align-items: center; flex: none; }
.gchipset .gchip { border-radius: 20px 0 0 20px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; display: inline-block;
                   line-height: 38px; cursor: default; }
.gx { min-height: 40px; min-width: 40px; border-radius: 0 20px 20px 0; border: 1px solid #7a9e5a; border-left: 1px solid #5f7d45;
      background: #6a8c4c; color: #1f1c18; font-weight: 700; cursor: pointer; }
.gicon { flex: none; width: 44px; height: 44px; border-radius: 22px; border: 1px solid #4a443c; background: #2b2722; color: #ece7df;
         font-size: 1.15rem; cursor: pointer; }
.gfilters { flex: none; }
.gfilters.on { background: #33402a; border-color: #7a9e5a; color: #cfe6b4; }
.gsearch { display: none; flex: 1 1 auto; align-items: center; gap: .3rem; min-width: 0; }
.gbar.searching .gsearch { display: flex; }
.gbar.searching .gchips-scroll, .gbar.searching #gSearchBtn { display: none; }
#gQ { flex: 1 1 auto; min-width: 0; padding: .55rem .8rem; font-size: 16px; background: #2b2722; color: #ece7df;
      border: 1px solid #4a443c; border-radius: 22px; min-height: 42px; }
.gsumline { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 32px; font-size: .88rem;
            color: #cfc6b6; margin: .1rem 0 .2rem; }
.gsumline[hidden] { display: none; }
.gsumtxt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.glink { background: none; border: 0; color: #9ccc6b; font: inherit; font-size: .9rem; cursor: pointer; padding: .55rem .4rem; min-height: 40px; }
.gnote:empty { display: none; }
.gfoot { display: flex; flex-direction: column; gap: .4rem; margin-top: .6rem; }
/* Check for new games: a quiet round control in the top bar; it turns while a check runs */
.gbar.searching #gRefresh { display: none; }
#gRefresh[disabled] { cursor: default; color: #b9b0a2; }
#gRefresh.busy svg { animation: gturn 1.1s linear infinite; }
@keyframes gturn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #gRefresh.busy svg { animation: none; } }
.gsum { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "pl out" "op wh"; column-gap: .6rem; row-gap: .2rem; padding: .6rem .2rem; }
.gboard { display: none; grid-area: bd; }
.gplayers { grid-area: pl; display: flex; flex-direction: column; min-width: 0; gap: .1rem; }
.gpl { display: flex; align-items: center; gap: .35rem; min-width: 0; font-size: .95rem; }
.gpl .gname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; min-width: 0; }
.gpl.you .gname { font-weight: 500; color: #cfc6b6; }
.gpl .pdot { flex: none; width: 10px; height: 10px; }
.gelo { color: #b9b0a2; font-size: .88rem; font-variant-numeric: tabular-nums; }
.gdiff { font-size: .78rem; font-variant-numeric: tabular-nums; }
.gdiff.up { color: #9ccc6b; } .gdiff.down { color: #e7a08b; }
.gout { grid-area: out; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.gend { color: #9a917f; font-size: .8rem; white-space: nowrap; }
.gsum .gopen { grid-area: op; grid-column: auto; }
.gwhen { grid-area: wh; color: #9a917f; font-size: .82rem; white-space: nowrap; text-align: right; }
@media (max-width: 640px) {
  .gchip .gn { display: none; }                       /* phones: names only, so all three of his openings fit */
  .gchip { padding: 0 .75rem; }
}
@media (min-width: 641px) {
  .gsearch { display: flex; flex: 0 1 18rem; }
  #gSearchBtn, #gSearchX { display: none; }
  .gbar.searching .gchips-scroll { display: flex; }
}
@media (min-width: 900px) {
  .glist li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: .6rem; }
  .gsum { grid-template-columns: 76px minmax(0, 1.25fr) minmax(0, 10rem) minmax(0, 1.5fr) minmax(0, 7rem);
          grid-template-areas: "bd pl out op wh"; column-gap: 1rem; padding: .5rem .3rem; }
  .gend, .gwhen { overflow: hidden; text-overflow: ellipsis; }
  .gboard { display: block; }
  .gmini { width: 72px; height: 72px; border-radius: 4px; display: block; }
  .gout { align-items: flex-start; text-align: left; }
  .gsum .gopen { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .glist .gact[hidden] { display: flex; }
  .gact { padding: 0 .3rem; flex-wrap: nowrap; }
  .gact .muted { display: none; }                   /* keep every row's buttons in one column */
}
.fopt { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; background: #2b2722; color: #ece7df;
        border: 1px solid #3a352e; border-radius: 10px; padding: .6rem .8rem; margin: 0 0 .35rem; min-height: 48px; font: inherit; cursor: pointer; }
.fopt b { font-size: .98rem; font-weight: 600; }
.fopt span { color: #b9b0a2; font-size: .84rem; margin-top: .1rem; }
.fopt.on { border-color: #7a9e5a; background: #2f3a25; }
.fopt.fdrill { position: relative; padding-right: 2rem; }
.fopt.fdrill::after { content: '›'; position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); color: #9a917f; font-size: 1.3rem; }
.fhead { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: #9a917f; margin: .8rem .2rem .35rem; }
.fnote { font-size: .85rem; margin: .3rem .2rem .5rem; }
.fdone { width: 100%; min-height: 44px; margin-top: .6rem; }
.sheet-card { max-height: 80svh; overflow-y: auto; overscroll-behavior: contain; }
@media (prefers-reduced-motion: reduce) { .sheet-card { transition: none !important; } }
.wdlrow { display: flex; align-items: center; gap: .5rem; width: 100%; margin-top: .3rem; font-size: .8rem; color: #b9b0a2; }
.wdl { display: flex; flex: 0 0 88px; height: 7px; border-radius: 4px; overflow: hidden; background: #3a352e; }
.wdl i { display: block; height: 100%; }
.wdl .w { background: #9ccc6b; } .wdl .d { background: #8a8272; } .wdl .l { background: #e7866b; }
.wdlrow.good .wdlt { color: #9ccc6b; } .wdlrow.bad .wdlt { color: #e7a08b; }
.wdlrow.few { opacity: .6; }

/* review fixes: phone row = his openings + search + a filter icon; the row fades where it scrolls */
.gchips-scroll.more { -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
                      mask-image: linear-gradient(to right, #000 85%, transparent); }
.gfilters svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.gbadge { min-width: 18px; height: 18px; border-radius: 9px; background: #7a9e5a; color: #1f1c18; font-size: .72rem;
          font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; }
.gbadge[hidden] { display: none; }
.gfilters .gbadge { display: none; }
@media (max-width: 640px) {
  .gchips-scroll .gmenu { display: none; }           /* phones: other openings live in the Filters sheet */
  .gfilters { width: 44px; height: 44px; padding: 0; justify-content: center; position: relative; border-radius: 22px; }
  .gfilters .gfl { display: none; }
  .gfilters .gbadge:not([hidden]) { display: inline-flex; position: absolute; top: -4px; right: -4px; }
}
@media (min-width: 641px) { .gfilters svg { display: none; } }
@media (min-width: 900px) and (max-width: 1199px) { .greplay .lg2 { display: none; } }
@media (min-width: 900px) { .glist .gsum { cursor: pointer; } }

@media (max-width: 640px) { .gchips-scroll .gchip { padding: 0 .6rem; font-size: .9rem; } .gchips-scroll { gap: .3rem; } }
@media (min-width: 900px) and (max-width: 1199px) {
  .gsum { grid-template-columns: 76px minmax(0, 1.7fr) minmax(0, 8.5rem) minmax(0, 1.2fr) minmax(0, 6.5rem); column-gap: .8rem; }
  .gact a.ghost .lg2 { display: none; }
}

/* ---- ranked suggestions + "show me this line" (DESIGN_SUGGESTION_HIERARCHY, DESIGN_SHOW_LINE) ---- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.antitle { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #b9b0a2; margin: .5rem .1rem .2rem; }
.anline { display: grid; grid-template-columns: 1.6rem minmax(4.6rem, max-content) minmax(0, 1fr) auto 40px; align-items: center;
          column-gap: .5rem; padding: .2rem .2rem .2rem .45rem; min-height: 44px; }
.anline .ev { min-width: 0; font-weight: 600; color: #b9b0a2; text-align: right; font-variant-numeric: tabular-nums; }
.anline .ev.pos, .anline .ev.neg { color: #b9b0a2; }
.anline .anmv { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #b9b0a2; }
.anline .mv.first { color: #ece7df; font-weight: 700; }
.anline.focus { background: #3a352e; box-shadow: inset 3px 0 0 #8a8272; }
.anline.r1.focus { box-shadow: inset 3px 0 0 #1256c4; }
.anchip { width: 22px; height: 22px; border-radius: 50%; border: 1px solid #b9b0a2; background: #2b2722; color: #ece7df;
          font: 700 .78rem/1 system-ui, sans-serif; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
          position: relative; }
.anchip::before { content: ""; position: absolute; inset: -11px -9px; }
.anchip.r1 { background: #1256c4; border-color: #1256c4; color: #fff; }
.anchip.off { border-style: dashed; }
.anchip:focus-visible, .lshow:focus-visible { outline: 2px solid #7a9e5a; outline-offset: 2px; }
.anword { white-space: nowrap; color: #ece7df; font-size: .9rem; }
.anword.r1 { font-weight: 700; } .anword.good { color: #b9b0a2; }
.anword .sm { display: none; }
.anloss { color: #b9b0a2; font-weight: 400; }
.lshow { width: 40px; height: 40px; border-radius: 8px; border: 1px solid #4a443c; background: #2b2722; color: #9ccc6b; cursor: pointer;
         display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.lshow svg { width: 16px; height: 16px; fill: currentColor; }
.lshow:hover { border-color: #7a9e5a; }
.arrowsvg g { transition: opacity .12s; }
.evalbar.resting, .evalbig.resting { opacity: .45; }
.evalbig.stale { opacity: .45; }                 /* a new position: the last one's number, dimmed until the new one */
.cmv.ahead { color: #9d9587; }
.cbtn.play { position: relative; min-width: 44px; }
.cbtn.play::before { content: ""; position: absolute; inset: -3px; }
@media (max-width: 640px) {
  .ancoach .lg { display: none; }
  .ancoach .cbtn.back .lg { display: inline; }   /* the way back from a line keeps its words on a phone */
}
@media (max-width: 400px) {
  .anline { grid-template-columns: 1.6rem minmax(2.4rem, max-content) minmax(0, 1fr) 40px; }
  .anline .ev { display: none; }
  .anword .lg { display: none; } .anword .sm { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .arrowsvg g { transition: none; } }
.ancoach .c3 { grid-column: 1 / -1; font-size: .88rem; color: #e6c98f; padding: .05rem .1rem 0; }

/* ---- three rooms: header rooms, sub-bar, account, Spar start page (DESIGN_MENU step 1) ---- */
.acct { margin-left: auto; width: 40px; height: 40px; border-radius: 20px; border: 1px solid #4a443c; background: #2b2722;
        color: #cfc6b6; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: none; }
.acct svg { width: 20px; height: 20px; fill: currentColor; }
.subbar { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin: 0 0 .7rem; }
.subbar[hidden] { display: none; }
.subtab { background: none; border: 0; border-bottom: 2px solid transparent; color: #b9b0a2; font: inherit; font-size: .98rem;
          padding: .45rem .5rem; min-height: 40px; cursor: pointer; }
.subtab.on { color: #ece7df; border-bottom-color: #7a9e5a; font-weight: 600; }
.subback { background: none; border: 0; color: #9ccc6b; font: inherit; font-size: .9rem; cursor: pointer; min-height: 40px; }
.ssfiles { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .9rem; }
.ssfiles .gchip { min-height: 40px; }
.ssfiles[hidden] { display: none; }
.sparstart { max-width: 760px; }
.sshead { margin: .2rem 0 .3rem; font-size: 1.2rem; }
.sslead { margin: 0 0 .8rem; }
.sscards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .6rem; }
.sscard { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; text-align: left; background: #2b2722;
          color: #ece7df; border: 1px solid #3a352e; border-radius: 12px; padding: .9rem 1rem; min-height: 88px; font: inherit; cursor: pointer; }
.sscard b { font-size: 1.02rem; } .sscard span { color: #b9b0a2; font-size: .9rem; }
.sscard:hover { border-color: #7a9e5a; }
.sslast { border-color: #7a9e5a; background: #2f3a25; margin-bottom: .6rem; width: 100%; }
body[data-room="notebook"] #report { margin-top: .4rem; }
@media (max-width: 640px) {
  header .acct { width: 36px; height: 36px; }
  body[data-tab="analyse"] .subbar { display: none; }
}
#rep { display: none !important; }                    /* the file is chosen with the chips on Train › Play */
html, body { overflow-anchor: none; }                 /* chips that load late must never scroll the page */
/* review fixes: aligned rows, grade colours on every width, nothing jumps, one-line closing sentence */
.anline { grid-template-columns: 1.6rem 9.5rem minmax(0, 1fr) auto 40px; }
.anword { overflow: hidden; text-overflow: ellipsis; }
.anword.q-inacc { color: #d8c657; } .anword.q-mistake { color: #d8a657; } .anword.q-blunder { color: #e7866b; }
@media (max-width: 480px) {
  .anline { grid-template-columns: 1.6rem 4.8rem minmax(0, 1fr) 40px; }
  .anline .ev { display: none; }
  .anword .lg { display: none; } .anword .sm { display: inline; }
}
.anlines.stale { opacity: .45; pointer-events: none; }
.ancoach .c3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* review fixes: the sub-bar stays one row on phones (scrolls sideways) */
@media (max-width: 640px) {
  .subbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .subbar::-webkit-scrollbar { display: none; }
  .subtab, .subback { white-space: nowrap; flex: none; }
}
/* ---- Analyse on a phone, app-style (A23): the board at the top, the move's comment right under it in
   full (it wraps, nothing cut off), the move bar alone at the bottom. The Games · Train · Notebook bar
   steps aside while you analyse; the list button on the move bar (or the phone's Back) returns. ---- */
.anhome { display: none; }
@media (max-width: 640px) {
  body[data-tab="analyse"] .dock { display: none; }
  body[data-tab="analyse"] main { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .anbar { bottom: 0; padding-bottom: calc(.4rem + env(safe-area-inset-bottom));
           grid-template-columns: 46px 1fr 1.5fr 1.5fr 1fr 46px; }
  .anhome { display: inline-flex; align-items: center; justify-content: center; padding: 0; }
  .anhome svg { width: 22px; height: 22px; fill: currentColor; }
  .anwrap .board-wrap, .anwrap .board { width: min(calc(100vw - 1rem - 24px), calc(100svh - 240px)); }
  #analyse > .panel { padding-top: .6rem; }
  .ancoach { min-height: 3.4rem; padding: 0 .1rem .55rem; margin-bottom: .6rem; align-content: start; }
  .ancoach .c1, .ancoach .c2, .ancoach .c3 { white-space: normal; overflow: visible; text-overflow: clip; }
  .ancoach .c2.cline { white-space: nowrap; overflow-x: auto; }     /* a line of moves scrolls sideways */
  .ancoach .c1 { font-size: 1.02rem; line-height: 1.35; }
  .ancoach .c2, .ancoach .c3 { font-size: .95rem; line-height: 1.4; }
}
/* review fixes: on short phones the board leaves room for a 3-line comment above the move bar;
   on wider screens the comment keeps its gap above the buttons */
@media (max-width: 640px) {
  .anwrap .board-wrap, .anwrap .board { width: min(calc(100vw - 1rem - 24px), calc(100svh - 285px)); }
}
@media (min-width: 641px) { .ancoach { margin-bottom: .45rem; } }
/* ---- Spar in play (A22): clocks on the player bars, status under the board, controls always in view ---- */
#spar .pclock { font-size: 1.15rem; min-width: 4.2rem; text-align: center; }
#spar .pclock.active { background: #7a9e5a; color: #1f1c18; border-color: #7a9e5a; font-weight: 700; }
#spar .pclock.low { color: #e7866b; }
#spar .pclock.active.low { background: #d64f3e; color: #fff; border-color: #d64f3e; }
.sparinfo { min-height: 2.6rem; margin: 0 0 .5rem; }
.sparinfo:empty { display: none; }                      /* before a game: no blank space above the choice */
.sparinfo p { margin: .15rem 0; }
.hintlist { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0; }
.hintmv { display: inline-flex; align-items: center; gap: .4rem; background: #2b2722; color: #ece7df; border: 1px solid #4a443c;
          border-radius: 10px; padding: .35rem .6rem; min-height: 44px; font: inherit; cursor: pointer; }
.hintmv.on { border-color: #7a9e5a; background: #2f3a25; }
.hintmv .hn { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; border-radius: 50%;
              background: #2b2722; border: 1px solid #b9b0a2; font-size: .8rem; font-weight: 700; }
.hintmv:first-child .hn { background: #1256c4; border-color: #1256c4; color: #fff; }
.hintmv .muted { font-size: .85rem; }
@media (max-width: 640px) {
  #spar .board-wrap, #spar .board { width: min(calc(100vw - 1rem), calc(100svh - 250px)); }
  body.sparlive .dock { display: none; }
  body.sparlive[data-tab="spar"] main { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  body.sparlive[data-tab="spar"] .levelrow, body.sparlive[data-tab="spar"] #sparStart { display: none; }
  body.sparlive[data-tab="spar"] .sparctl { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; margin: 0;
    padding: .4rem .5rem calc(.4rem + env(safe-area-inset-bottom)); background: #1f1c18; border-top: 1px solid #3a352e; flex-wrap: nowrap; }
  body.sparlive[data-tab="spar"] .sparctl .ghost { flex: 1; min-height: 48px; }
}
/* Spar live on a phone: the game has the whole screen, like Analyse */
#sparResign.arm { border-color: #d9c28a; color: #d9c28a; }
@media (max-width: 640px) {
  body.sparlive[data-tab="spar"] header, body.sparlive[data-tab="spar"] .subbar { display: none; }
  body.sparlive[data-tab="spar"] main { padding-top: calc(.5rem + env(safe-area-inset-top)); }
}
/* suggestion chips follow the grade (DESIGN_GAME_JOURNEY S6): dashed = ?!, hollow = ? / ?? (no arrow unless tapped) */
.anchip.g-weak { border-style: dashed; }
.anchip.g-bad { background: transparent; opacity: .55; }

/* ==== Design tokens (Impeccable polish, 2026-09-26) ====
   One palette, one type scale, one radius set for the warm-dark Luftchess world. New and polished rules
   use these; older rules migrate to them screen by screen (44 colours, 27 sizes, 16 radii before). */
:root {
  --bg: #2b2722; --surface: #1f1c18; --surface-2: #26221d; --surface-3: #332e27;
  --line: #3a352e; --line-2: #4a443c;
  --text: #ece7df; --text-2: #cfc6b6; --text-3: #b9b0a2; --text-4: #9a917f;
  --accent: #7a9e5a; --accent-2: #9ccc6b; --accent-ink: #1f1c18; --accent-wash: rgba(122, 158, 90, .18);
  --accent-wash-solid: #2f3324;   /* the wash laid on --surface, for things that fade into it */
  --win: #9ccc6b; --loss: #e7a08b; --draw: #cfc6b6;
  --amber: #d9c28a; --amber-wash: rgba(217, 194, 138, .09);
  /* Punish it's strong gold (the opponent's gift and the reply that let it go): never an alarm colour */
  --chance: #f0b93a; --chance-2: #f6cb66; --chance-ink: #1f1c18; --chance-wash: rgba(240, 185, 58, .22);
  --chance-line: rgba(240, 185, 58, .62);
  --board-light: #e2d3b8; --board-dark: #a98a66;
  /* his own drawing on a board (PGN's G R B Y): quiet inks, the warm one a muted coral, never an alarm tone */
  --ink-g: #2f8a3e; --ink-r: #c65a4b; --ink-b: #2f6fc0; --ink-y: #d9a21c;
  --res-draw: #847b6d; --res-black: #0e0c0a;   /* the masters' results bar: drawn, Black won (White won: --board-light) */
  --fs-xs: .78rem; --fs-sm: .875rem; --fs-md: 1rem; --fs-lg: 1.125rem;
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;
  color-scheme: dark;
}
/* the parts the browser draws carry the palette too */
::selection { background: rgba(156, 204, 107, .32); color: var(--text); }
html { scrollbar-color: var(--line-2) var(--bg); }
input, textarea { caret-color: var(--accent-2); }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* header rooms: a calm segmented control, not three filled blocks */
nav.tabs { gap: .25rem; }
nav.tabs button { background: transparent; color: var(--text-3); border-radius: var(--r-pill); padding: .5rem 1rem;
                  font-weight: 500; transition: background-color .15s ease-out, color .15s ease-out; }
nav.tabs button:hover { background: var(--surface-2); color: var(--text); }
nav.tabs button.active { background: var(--accent-wash); color: var(--accent-2); font-weight: 600; }

/* Games: chips and the filter button share one vocabulary (selected = a green wash, as the rooms) */
.gchip { border-radius: var(--r-pill); }
.gchip .gn { color: var(--text-4); font-size: var(--fs-xs); }
.gchip.on { background: var(--accent-wash); border-color: var(--accent); color: var(--accent-2); }
.gchip.on .gn { color: var(--accent-2); }

/* Games: rows */
.glist li { border-bottom-color: var(--line); }
.gsum { border-radius: var(--r-md); transition: background-color .15s ease-out; }
.gsum:hover { background: var(--surface-2); }
.gpl { font-size: var(--fs-md); }
.gpl.you .gname { color: var(--text-2); }
.gelo { color: var(--text-3); font-size: var(--fs-sm); }
.gdiff { font-size: var(--fs-xs); }
.gdiff.up { color: var(--win); } .gdiff.down { color: var(--loss); }
.gres { font-size: var(--fs-sm); }
.gres.win { color: var(--win); } .gres.loss { color: var(--loss); } .gres.draw { color: var(--draw); }
.gend, .gwhen { color: var(--text-4); font-size: var(--fs-xs); }
.gsum .gopen { color: var(--text-3); font-size: var(--fs-sm); }
.gmini .mb-l { fill: var(--board-light); } .gmini .mb-d { fill: var(--board-dark); }
.gact .ghost, .gact a.ghost { gap: .45rem; }             /* icon and words keep their space inside flex */
.gact .ic { width: 14px; height: 14px; fill: currentColor; flex: none; }
.gact .greplay { color: var(--accent-2); }
@media (min-width: 900px) {
  .gsum { grid-template-columns: 64px minmax(0, 1.25fr) minmax(0, 9rem) minmax(0, 1.6fr) minmax(0, 7.5rem);
          column-gap: 1.25rem; padding: .55rem .5rem; }
  .gmini { width: 64px; height: 64px; border-radius: var(--r-sm); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
  .gact { gap: .15rem; padding: 0 .2rem; }
  .gact .ghost, .gact a.ghost { background: transparent; border-color: transparent; color: var(--text-3);
                                min-height: 40px; padding: .4rem .75rem; border-radius: var(--r-pill);
                                transition: background-color .15s ease-out, color .15s ease-out; }
  .gact .greplay { color: var(--accent-2); }
  .gact .ghost:hover, .gact a.ghost:hover { background: var(--surface-3); color: var(--text); }
  .gact .lg2 { display: none; }                  /* wide rows open the game themselves: one verb, one icon */
  .gact .gext { padding: .4rem .6rem; }
}
.gicon svg { width: 20px; height: 20px; fill: currentColor; display: block; margin: 0 auto; }

/* ---- Opening quiz (C10): repeat the what, understand the why ---- */
.quiz { max-width: 980px; }
.qmotto { margin: 0 0 .35rem; } .qmotto i { color: var(--text-2); }
.qlead { margin: 0 0 .9rem; font-size: var(--fs-sm); }
.qnote { min-height: 1.2em; margin: .5rem 0 0; font-size: var(--fs-sm); }
.qmap { margin-top: 1rem; }
.qgroup { border-top: 1px solid var(--line); }
.qgroup summary { display: flex; align-items: center; gap: .8rem; padding: .8rem .2rem; cursor: pointer; list-style: none; min-height: 48px; }
.qgroup summary::-webkit-details-marker { display: none; }
.qgt { font-weight: 600; flex: 1 1 auto; }
.qgw { flex: none; color: var(--text-3); font-size: var(--fs-xs); }
.qgroup ul { list-style: none; margin: 0 0 .6rem; padding: 0; }
.qrow { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) auto; column-gap: .7rem; row-gap: .1rem; align-items: baseline;
        padding: .45rem .2rem; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.qmv { font-weight: 600; font-variant-numeric: tabular-nums; }
.qsys { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qstate { font-size: var(--fs-xs); border-radius: var(--r-pill); padding: .1rem .55rem; border: 1px solid var(--line-2); color: var(--text-3); justify-self: end; }
.qstate.s-learning { color: #d9c28a; border-color: #6b5a3a; }
.qstate.s-solid { color: var(--accent-2); border-color: var(--accent); }
.qstate.s-mastered { color: var(--accent-ink); background: var(--accent-2); border-color: var(--accent-2); }
.qlast { grid-column: 2 / 3; color: var(--text-4); font-size: var(--fs-xs); }
.qclock { grid-column: 2 / 4; color: #d9c28a; font-size: var(--fs-xs); }
.qplay { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-start; }
.qplay[hidden] { display: none; }
.qpanel { flex: 1 1 18rem; min-width: 0; }
.qprompt { font-size: var(--fs-lg); margin: .2rem 0 .8rem; min-height: 1.6em; }
.qfeed p { margin: .35rem 0; }
.qfeed[hidden] { display: none; }
.qwhy { margin: .7rem 0; padding: .7rem .85rem; background: var(--surface-2); border-radius: var(--r-md); }
.qwhy .qwt { font-weight: 600; color: var(--text); margin: 0 0 .3rem; }
.qwhy p { margin: 0; line-height: 1.5; color: var(--text-2); }
.qusual { font-size: var(--fs-sm); }
.qbtns { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.qbtns .ghost, .qbtns .primary { min-height: 44px; }
@media (max-width: 640px) {
  .qplay .board-wrap, .qplay .board { width: min(calc(100vw - 1rem), calc(100svh - 300px)); }
  .qrow { grid-template-columns: 4rem minmax(0, 1fr) auto; }
}
/* quiz polish: tinted notes without thick coloured borders, drawn icons, aligned actions, phone reach */
.qfeed .hint { border-left: 0; border-radius: var(--r-md); background: rgba(217, 194, 138, .09); padding: .6rem .8rem; }
.qright { display: flex; align-items: flex-start; gap: .45rem; }
.qic { width: 16px; height: 16px; flex: none; fill: currentColor; vertical-align: -2px; margin-right: .35rem; }
.qic-ok { color: var(--accent-2); } .qic-again { color: #d9c28a; }
.qright .qic { margin: .2rem 0 0; }
.qafter { color: var(--text-3); }
.qbtns { align-items: center; }
.qbtns > button { margin: 0; }
@media (max-width: 640px) {
  .qbtns { position: sticky; bottom: calc(62px + env(safe-area-inset-bottom)); z-index: 5; background: var(--surface);
           padding: .55rem 0 .45rem; margin-top: .6rem; border-top: 1px solid var(--line); }
  .qbtns .primary { width: auto; flex: 1 1 auto; }
}
/* ---- Line mode (docs/DESIGN_OPENING_REPS.md §2): his files from move one, on the quiz board ---- */
.rlhome { margin: .4rem 0 2rem; }
.rlfiles { margin-top: 1rem; }
.rlfile summary { justify-content: space-between; }
.rlchev { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--text-3); stroke-width: 1.6;
          stroke-linecap: round; stroke-linejoin: round; transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.rlfile[open] .rlchev { transform: rotate(90deg); }
.rlfile summary:hover .rlchev { stroke: var(--text); }
.rllist { list-style: none; margin: 0 0 .7rem; padding: 0; }
.rlrow { display: flex; align-items: center; gap: .8rem; width: 100%; min-height: 48px; margin: 0; padding: .55rem .6rem;
         background: transparent; border: 0; border-radius: var(--r-md); color: var(--text); font: inherit; text-align: left; cursor: pointer;
         transition: background-color .15s ease-out; }
.rlrow:hover { background: var(--surface-3); }
.rlrow:active { background: var(--accent-wash); }
.rlname { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.rlskel { height: 12px; width: 42%; margin: 1.1rem .2rem; border-radius: var(--r-pill); background: var(--surface-3); }
.rlskel:nth-child(2) { width: 36%; } .rlskel:nth-child(3) { width: 30%; }
.qzsurprise { border-top: 1px solid var(--line); padding-top: 1.4rem; }
.qzsurprise #qzStart { margin-top: .5rem; min-height: 44px; }
.rlcap { margin: .1rem 0 .5rem; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.45; }
.rlcap[hidden] { display: none; }
.rlcap span { display: block; color: var(--text-3); }
.qwhy p.rlthen { margin-top: .4rem; color: var(--text); }
.qprompt:focus:not(:focus-visible) { outline: none; }   /* focused for the screen reader; the keyboard ring stays */
.qprompt:focus-visible { border-radius: var(--r-md); }
.qprompt .qic { margin-right: .4rem; }
@media (prefers-reduced-motion: reduce) { .rlchev, .rlrow { transition: none; } }
/* line mode polish: one reading column, no empty gaps, the board inside its panel on a phone */
#qzHome { max-width: 44rem; }
.rlhome { margin-top: .2rem; }
.rlhome .qlead { max-width: 60ch; }
#qzHome .qnote:empty { min-height: 0; margin: 0; }
.qzsurprise .qlead { max-width: 60ch; }
#qzHome .qmotto { margin: 2rem 0 .2rem; font-size: var(--fs-sm); }
.qprompt:empty { min-height: 0; margin: 0; }
.rlcap b { font-weight: 600; color: var(--text); }
@media (max-width: 640px) {
  .qplay .board-wrap, .qplay .board { width: 100%; max-width: calc(100svh - 300px); margin: 0 auto; }
  .qfeed { scroll-margin-bottom: calc(62px + 72px + env(safe-area-inset-bottom)); }
}
/* See why, in words: the reason ends the line in the comment and stays with the move's comment. It wraps
   (never cut off); the fallback sentence is quiet, never an alert. */
.ancoach .c3.cwhy { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.45; max-width: 68ch; }

/* ---- See why as two futures (DESIGN_TWO_FUTURES §2): two quiet rows in the strip. The future on the board shows its
   moves; the other shows its title, its band and its one sentence. No colour says good or bad: the words carry it.
   The Missed chance is the opponent's gift given back: since Punish it (30 Sep 2026) the strong gold, a chance to take
   next time - never an alarm colour (see the Punish it block below). ---- */
:root { --q-missed: var(--chance); --q-missed-ink: var(--chance-ink); --q-missed-wash: var(--chance-wash); }
.q-missed { color: var(--q-missed); }
/* deeper moments (4 Oct 2026): calm marks, never an alarm colour */
.q-win { color: var(--accent-2); }
/* Leela on the Board (5 Oct 2026): its natural moves, green arrows (Stockfish's are blue) */
.arrowsvg.lz { color: var(--accent-2); }
.anline.lzline .lzmv b { font-weight: 700; }
.anline.lzline .lzp { color: var(--text-3); font-variant-numeric: tabular-nums; }
.anline.lzline { grid-template-columns: 1.6rem minmax(4.4rem, max-content) 2.8rem minmax(0, 1fr) 40px; }
.anline.lzline .lzsf { color: var(--text-3); font-size: .86rem; line-height: 1.25; min-width: 0; }
.anline.lzline .lzshow.busy { opacity: .5; }
.lzfeel { margin: .2rem 0 .35rem; color: var(--text); font-size: .9rem; }
.antitle.anthead { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.engswitch { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r-pill, 999px); overflow: hidden; }
.engswitch button { text-transform: none; letter-spacing: 0; font: 600 .8rem/1 system-ui, sans-serif; min-height: 36px;
  padding: 0 .8rem; background: transparent; color: var(--text-2); border: 0; cursor: pointer; }
.engswitch button.on { background: var(--accent); color: var(--accent-ink); }
@media (pointer: coarse) { .engswitch button { min-height: 44px; } }
/* Both engines (6 Oct 2026): one list, Stockfish's word and Leela's share side by side; Leela's first instinct green */
.bothhead { display: grid; grid-template-columns: 1.6rem minmax(4.4rem, max-content) 2.8rem minmax(0, 1fr) 40px; column-gap: .5rem;
  padding: 0 .2rem 0 .45rem; border: 1px solid transparent; color: var(--text-4); font-size: var(--fs-xs); font-weight: 600; }
.anline.bothline .anchip.none { visibility: hidden; }
.anline.bothline .lzp { white-space: nowrap; }
.anline.bothline .lzp.lzfirst { color: var(--accent-2); font-weight: 600; }
.bothsay { margin: .2rem 0 .45rem; color: var(--text); font-size: .92rem; line-height: 1.45; max-width: 62ch; text-wrap: pretty; }
.bothsay b { font-weight: 600; font-variant-numeric: tabular-nums; }
.anmoves .mv.q-better { text-decoration: underline dotted; text-underline-offset: 3px; }
.ancoach .c3.cwin { color: var(--accent-2); }
.ancoach .c3.cdef { color: var(--text); }
.ancoach .c3.cwin, .ancoach .c3.cdef { white-space: normal; overflow: visible; text-overflow: clip; }
.anmoves .mv.q-missed { background: var(--q-missed-wash); }
.anmoves .mv.q-missed.cur { background: var(--q-missed); color: var(--q-missed-ink); }
.cg.q-missed, .mvbadge.q-missed { background: var(--q-missed); color: var(--q-missed-ink); }
.ancoach .neutral, .vchance .neutral { color: var(--text-3); }
.ancoach .ck { white-space: nowrap; }     /* a two-word label ("Missed chance") wraps as one piece on a phone */
.ancoach .c1.two-head { white-space: normal; overflow: visible; text-overflow: clip; cursor: default; line-height: 1.35; }
.ancoach .c2.two { display: grid; gap: .3rem; white-space: normal; overflow: visible; text-overflow: clip; cursor: default;
                   padding-top: .1rem; }
.fut { min-width: 0; }
.fut + .fut { border-top: 1px solid var(--line); padding-top: .3rem; }
.fut-t { margin: 0; color: var(--text-2); line-height: 1.35; }
.fut-t b { font-weight: 600; color: var(--text); }
.fut-b { color: var(--text-3); }
button.fut-t { display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: .15rem .1rem; margin: -.15rem 0;
               background: none; border: 0; border-radius: var(--r-sm); font: inherit; text-align: left; cursor: pointer;
               transition: background-color .15s ease-out; }
button.fut-t:hover { background: var(--surface-2); }
button.fut-t svg { width: 14px; height: 14px; flex: none; fill: var(--accent-2); }
button.fut-t .fut-tx { min-width: 0; }     /* title and band: one run of text that wraps as words, not two columns */
.fut-m { white-space: nowrap; overflow-x: auto; }
.fut-s { margin: .1rem 0 0; color: #e6c98f; line-height: 1.45; max-width: 68ch; }
/* the first layer (DESIGN_WORDS_WITHOUT_AI change 1): the future's first moves told in words. Facts, not a verdict: the
   calm body ink, a reason (.fut-s) keeps the gold under it */
.fut-n { margin: .1rem 0 0; color: var(--text-2); line-height: 1.45; max-width: 68ch; text-wrap: pretty; }
/* the words at the end of a played line (its first moves, then what it wins): they wrap, never cut off */
.ancoach .c3.cend { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.45; max-width: 68ch;
                    text-wrap: pretty; }
.nobr { white-space: nowrap; }     /* "the d-pawn" stays whole at a line's end (anWordsHtml) */
.fut-s.muted { color: var(--text-3); }
@media (prefers-reduced-motion: reduce) { button.fut-t { transition: none; } }
@media (max-width: 400px) { .ancoach .two-mv { display: none; } }

/* ---- the game in a nutshell (DESIGN_GAME_SUMMARY §4): one quiet card under the comment strip. Words carry it:
   no colour for a result, no numbers but moves and clocks, one outlined action (Show the plan); "Go there" and
   "Fold" are quiet text buttons that sit beside the sentence they belong to. Folds to one line. ---- */
.nut { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg);
       padding: .75rem .9rem .85rem; margin: 0 0 .7rem; line-height: 1.5; color: var(--text-2); font-size: var(--fs-md); }
.nut[hidden] { display: none; }
.nut:has(> .nut-open) { padding: 0 .5rem 0 .9rem; }
.nut p { margin: 0; max-width: 68ch; }
.nut-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.nut-end { color: var(--text); font-weight: 600; }
/* sections (the game, the lesson, the notes) are divided by a hairline and space; the lesson's own parts sit close */
.nut-h { font-size: var(--fs-sm); font-weight: 600; color: var(--text-3); margin: .8rem 0 .4rem; padding-top: .8rem;
         border-top: 1px solid var(--line); }
.nut-k { font-size: var(--fs-sm); font-weight: 600; color: var(--text-3); margin: .75rem 0 .1rem; }
.nut .nut-title { color: var(--text); font-size: var(--fs-lg); font-weight: 600; line-height: 1.35; margin-bottom: .35rem;
             text-wrap: balance; }
.nut-game p + p, .nut-lesson > p + p { margin-top: .3rem; }
.nut-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
/* the move button follows its sentence (a steady column at the measure), never stranded at the card's far edge */
.nut-list li, .nut-row { display: flex; align-items: baseline; gap: .25rem .75rem; }
.nut-list li p, .nut-row p { flex: 0 1 60ch; min-width: 0; }
/* a key line leads with where it was decided, run in ("Where it went wrong:"); the move it names carries the move
   list's own verdict glyph (.qg in its calm text colour), so good and bad read at a glance without a colour block */
.nut-lead { color: var(--text); font-weight: 600; }
.nut-list .qg { margin-left: .05rem; white-space: nowrap; }
.nut-go, .nut-fold, .nut-act { flex: none; display: inline-flex; align-items: center; background: transparent;
  color: var(--accent-2); border: 1px solid transparent; border-radius: var(--r-pill); padding: .2rem .65rem; min-height: 36px;
  font: inherit; font-size: var(--fs-sm); line-height: 1.2; white-space: nowrap; cursor: pointer;
  transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out; }
.nut-go { margin-right: -.4rem; }
.nut-go:hover, .nut-fold:hover { background: var(--accent-wash); }
.nut-fold { color: var(--text-3); margin-right: -.4rem; }
.nut-fold:hover { color: var(--text); background: var(--surface-3); }
.nut-act { border-color: var(--line-2); margin-top: .55rem; padding: .3rem .95rem; }
.nut-act:hover { border-color: var(--accent); background: var(--accent-wash); }
.nut-go:active, .nut-act:active { background: var(--accent-wash); border-color: var(--accent-2); }
.nut-open { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem; background: transparent;
  border: 0; color: var(--text-2); font: inherit; font-size: var(--fs-sm); min-height: 44px; padding: 0; cursor: pointer; text-align: left;
  transition: color .15s ease-out; }
.nut-open:hover { color: var(--text); }
.nut-chev { width: 20px; height: 20px; fill: currentColor; flex: none; transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.nut-more { margin-top: .8rem; border-top: 1px solid var(--line); }
.nut-more summary { list-style: none; cursor: pointer; color: var(--text-3); font-size: var(--fs-sm); font-weight: 600;
  min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: .5rem; transition: color .15s ease-out; }
.nut-more summary::-webkit-details-marker { display: none; }
.nut-more summary:hover { color: var(--text); }
.nut-more[open] .nut-chev { transform: rotate(180deg); }
.nut-more .nut-list { margin: .1rem 0 .2rem; }
.nut .nut-label { margin-top: .9rem; font-size: var(--fs-xs); color: var(--text-4); line-height: 1.45; }
.nut .nut-wait { margin-top: .7rem; color: var(--text-3); }
/* ---- Find the better move (DESIGN_LEARN_FROM_MISTAKES step 1): the nutshell's own card, one moment at a time.
   The result is words in calm tones (found: the accent green; good: plain text; not this one: quieter text) - never
   an alarm colour, never a score. One filled button (the way on); the rest are the nutshell's outlined actions. ---- */
.bm .bm-h { margin: 0; font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.bm .bm-chev { transform: none; }
.bm .bm-ctx { margin-top: .35rem; color: var(--text); }
.bm .bm-say { margin-top: .5rem; min-height: 1.5em; color: var(--text-2); }
.bm .bm-say.t-found { color: var(--accent-2); font-weight: 600; }
.bm .bm-say.t-good { color: var(--text); font-weight: 600; }
.bm .bm-say.t-not, .bm .bm-say.t-played, .bm .bm-say.t-wait { color: var(--text-3); }
.bm .bm-say.t-shown { color: var(--text); }
.bm .bm-wait { display: flex; align-items: center; color: var(--text-3); }
.bm .bm-wait .andot { flex: none; margin: 0 .6rem 0 0; }
.bm .bm-hints { margin-top: .5rem; display: grid; gap: .3rem; }
.bm .bm-hint { padding: .45rem .75rem; border-radius: var(--r-md); background: var(--surface-3); color: var(--text); }
.bm .bm-end { margin-top: .35rem; color: var(--text); }
.bm .bm-btns { display: flex; flex-wrap: wrap; gap: 0 .5rem; }
.bm .bm-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.bm .bm-primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.bm .bm-primary:active { background: var(--accent-2); border-color: var(--accent-2); }
@media (pointer: coarse) { .nut-go, .nut-fold, .nut-act { min-height: 44px; } }
@media (max-width: 640px) {
  .nut { padding: .65rem .75rem .8rem; margin: 0 0 .6rem; }
  .nut:has(> .nut-open) { padding: 0 .4rem 0 .75rem; }
  .nut .nut-title { font-size: var(--fs-md); }
}
@media (prefers-reduced-motion: reduce) { .nut-go, .nut-fold, .nut-act, .nut-open, .nut-chev, .nut-more summary { transition: none; } }
/* ---- Find the better move, step 2 (memory): the card's small line of where he is (the game's day in a sitting,
   "Found on 29 Sep"), and Train's calm entry under the quiz. Quiet text only: no count, no alarm colour. ---- */
.bm .bm-meta { margin: .3rem 0 0; font-size: var(--fs-sm); color: var(--text-3); line-height: 1.45; }
.bm .bm-meta + .bm-ctx { margin-top: .2rem; }
.bm .nut-act:disabled { opacity: .55; cursor: default; pointer-events: none; }   /* the next game is opening */
.bmrecent #bmrStart:disabled { opacity: .55; cursor: default; }
.bmrecent { margin-top: 2rem; border-top: 1px solid var(--line); padding-top: 1.4rem; }
.bmrecent[hidden] { display: none; }
.bmrecent .qlead { max-width: 60ch; }
.bmrecent #bmrStart { margin-top: .5rem; min-height: 44px; }
.bmrecent.rest { padding-top: 1.1rem; }
.bmrecent .bmr-rest { margin: 0; font-size: var(--fs-sm); }

/* ---- Punish it (DESIGN_LEARN_FROM_MISTAKES, the addendum of 30 Sep 2026): the opponent's gift and his reply that let
   it go, one pair in the strong gold - bracketed in the move list, a larger badge on the board, the lead of the verdict
   row, the stop's card - never an alarm colour and never a charge: the chance is his to take next time. Tokens only
   (the --chance family sits with the design tokens). ---- */
.anmoves .mv.pun { background: var(--chance-wash); }
.anmoves .mv.pun-a { border-radius: 8px 2px 2px 8px;
  box-shadow: inset 1.5px 0 0 var(--chance-line), inset 0 1.5px 0 var(--chance-line), inset 0 -1.5px 0 var(--chance-line); }
.anmoves .mv.pun-b { border-radius: 2px 8px 8px 2px;
  box-shadow: inset -1.5px 0 0 var(--chance-line), inset 0 1.5px 0 var(--chance-line), inset 0 -1.5px 0 var(--chance-line); }
.anmoves .mv.pun.cur { background: var(--chance); color: var(--chance-ink); }
.anmoves .qg.q-pun { color: var(--chance); }
.anmoves .mv.pun.cur .qg.q-pun { color: var(--chance-ink); }
.mvbadge.pun-badge { background: var(--chance); color: var(--chance-ink); }
.ancoach .cg.pun-g { background: var(--chance); color: var(--chance-ink); }
.ancoach .c1.pun-c1 { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.4; cursor: default; }
.ancoach .pun-lead, .ancoach .ck.pun-k { color: var(--chance); }
.ancoach .pun-best { color: var(--text); white-space: nowrap; }
.ancoach .cbtn.pun-go { background: var(--chance); border-color: var(--chance); color: var(--chance-ink); font-weight: 600; }
.ancoach .cbtn.pun-go:hover { background: var(--chance-2); border-color: var(--chance-2); }
.bm .bm-h.pun-h { color: var(--chance); }
.bm .nut-act.bm-quiet { border-color: transparent; color: var(--text-3); }
.bm .nut-act.bm-quiet:hover { color: var(--text); background: var(--surface-3); }
.bmpunish { margin-top: 1.4rem; }
.bmpunish .pun-start { margin-top: .5rem; min-height: 44px; border-color: var(--chance-line); color: var(--chance); }
.bmpunish .pun-start:hover { border-color: var(--chance); }
.bmpunish .pun-start:disabled { opacity: .55; cursor: default; }

/* ---- Candidate moves (chesscoach/candidates.py, 5 Oct 2026): the moment card's third use. While he names them, his
   candidates sit as small chips (each can be taken off) and quiet arrows on the board; the answer is two short lists -
   his candidates, then the moves he did not name - each row a move to see on the board, Stockfish's word and Leela's
   share beside it. Calm words only: no score, and no colour for a weaker move. ---- */
.arrowsvg.cd { color: var(--ink-y); }   /* his candidates on the board: his own drawing ink (Stockfish blue, Leela green) */
.cdtrain { margin-top: 1.4rem; }
.cdtrain #cdStart { margin-top: .5rem; min-height: 44px; }
.cdtrain #cdStart:disabled { opacity: .55; cursor: default; }
.bm .cd-picks { list-style: none; margin: .55rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.bm .cd-chip { display: inline-flex; align-items: center; padding: 0 0 0 .75rem; border: 1px solid var(--line-2);
  border-radius: var(--r-pill); background: var(--surface-3); color: var(--text); font-size: var(--fs-sm); }
.bm .cd-chip b { font-weight: 600; font-variant-numeric: tabular-nums; }
.bm .cd-x { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0;
  background: transparent; border: 0; border-radius: var(--r-pill); color: var(--text-3); cursor: pointer;
  transition: background-color .15s ease-out, color .15s ease-out; }
.bm .cd-x svg { width: 14px; height: 14px; fill: currentColor; }
.bm .cd-x:hover { color: var(--text); background: var(--surface-2); }
.bm .cd-sum { margin-top: .4rem; }
.bm .cd-h { margin: .85rem 0 .2rem; font-size: var(--fs-sm); font-weight: 600; color: var(--text-3); }
.bm .cd-rows { list-style: none; margin: 0; padding: 0; display: grid; max-width: 34rem; }   /* Leela's share stays near its move */
.bm .cd-row { display: grid; grid-template-columns: minmax(6.4rem, max-content) minmax(0, 1fr) auto; align-items: center;
  gap: 0 .75rem; }
.bm .cd-mv { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; margin-left: -.45rem; padding: 0 .65rem 0 .45rem;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-pill); color: var(--text); font: inherit;
  font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer;
  transition: background-color .15s ease-out, border-color .15s ease-out; }
.bm .cd-mv b { font-weight: 600; }
.bm .cd-mv svg { width: 11px; height: 11px; flex: none; fill: var(--accent-2); }
.bm .cd-mv:hover { background: var(--accent-wash); }
.bm .cd-mv:active { background: var(--accent-wash); border-color: var(--accent); }
.bm .cd-word { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.35; }
.bm .cd-best .cd-word { color: var(--accent-2); font-weight: 600; }
.bm .cd-lz { color: var(--text-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bm .cd-meta { margin-top: .6rem; }
@media (pointer: coarse) { .bm .cd-mv { min-height: 44px; } .bm .cd-x { width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .bm .cd-mv, .bm .cd-x { transition: none; } }

/* ---- Endgame practice (docs/DESIGN_ENDGAME_SPARRING.md): Train › Endgames. One column, tokens only; the chances
   describe the position, never him (no red, no deltas); the switch hides the bar and its line together. ---- */
.egpanel { max-width: 980px; }
#egHome { max-width: 44rem; }
#egHome .qlead { max-width: 60ch; }
.eggroup { margin-top: 1.4rem; }
.eggh { margin: 0 0 .35rem; font-size: var(--fs-md); font-weight: 600; color: var(--text-2); }
.eglist { list-style: none; margin: 0; padding: 0; }
.eglist li + li { border-top: 1px solid var(--line); }
.egrow { display: flex; align-items: center; gap: .85rem; width: 100%; min-height: 64px; margin: 0; padding: .5rem .5rem;
         background: transparent; border: 0; border-radius: var(--r-md); color: var(--text); font: inherit; text-align: left;
         cursor: pointer; transition: background-color .15s ease-out; }
.egrow:hover { background: var(--surface-3); }
.egrow:active { background: var(--accent-wash); }
.egrow .gmini { width: 56px; height: 56px; flex: none; display: block; border-radius: var(--r-sm); }
.egrt { display: flex; flex-direction: column; gap: .1rem; flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.egvs { color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.eggl { color: var(--text-2); font-size: var(--fs-sm); }
.egst { color: var(--text-3); font-size: var(--fs-xs); }
.egempty { margin: 1.2rem 0 .2rem; color: var(--text-2); }
.egnote { margin: 1rem 0 0; }
.egscan { min-height: 44px; }
.egplay { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-start; }
.egplay[hidden] { display: none; }
.egboardcol { flex: 0 1 auto; min-width: 0; }
.egwrap { display: flex; gap: .5rem; align-items: stretch; }
.egbar[hidden] { display: none; }
.egbar .evalfill { transition: height .3s cubic-bezier(.2, .8, .2, 1); }
.egbw { position: relative; width: 480px; max-width: calc(100vw - 4rem); }
.egbw .board { width: 100%; max-width: 100%; }
.egchances { margin: .55rem 0 0 calc(16px + .5rem); min-height: 1.4em; color: var(--text-2); font-size: var(--fs-sm);
             font-variant-numeric: tabular-nums; }
.egchances[hidden] { display: none; }
.egside { flex: 1 1 18rem; min-width: 0; }
.eggoal { margin: .1rem 0 .7rem; font-size: var(--fs-lg); font-weight: 600; color: var(--text); }
.eggoal:focus:not(:focus-visible) { outline: none; }
.egsay p, .eghints p { margin: .35rem 0; line-height: 1.5; }
.eghints .hint { border-left: 0; border-radius: var(--r-md); background: var(--surface-2); color: var(--text); padding: .55rem .8rem; }
.eghints .glink { padding-left: 0; }
.egend { margin-top: .8rem; }
.egend[hidden] { display: none; }
.egendline { margin: .2rem 0 .4rem; font-size: var(--fs-lg); font-weight: 600; color: var(--accent-2); }
.egendline:focus:not(:focus-visible) { outline: none; }
.egbtns > button, .egend .qbtns > button { margin: 0; }
.egbtns > button[hidden] { display: none; }
.egbtns[hidden] { display: none; }
.egopts { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.2rem; margin-top: 1rem; padding-top: .7rem;
          border-top: 1px solid var(--line); }
.egopts .glink { padding-left: 0; }
.egopts .glink[hidden], .egopts .egswitch[hidden] { display: none; }
.egswitch { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; color: var(--text-2); font-size: var(--fs-sm); cursor: pointer; }
.egswitch .eswitch { display: inline-block; }
.egswitch .repsel { width: auto; margin: 0; }
.egarrow { color: var(--accent-2); opacity: .85; }
@media (max-width: 640px) {
  .egboardcol { width: 100%; }
  .egwrap { width: 100%; max-width: calc(100svh - 280px); margin: 0 auto; }
  .egbw { flex: 1 1 0; min-width: 0; width: auto; max-width: none; }
  .egopts { gap: .2rem 1rem; margin-top: .4rem; border-top: 0; }   /* the sticky action row above already draws the rule */
  .egend { scroll-margin-bottom: calc(72px + env(safe-area-inset-bottom)); }   /* clear of the bottom bar */
}
@media (prefers-reduced-motion: reduce) { .egbar .evalfill, .egrow { transition: none; } }

/* ---- The moves he is making his (docs/DESIGN_TABIYAS_AND_HABITS.md, slice 1b): the sheet, the shelf, the page.
   The truth first, his own sentence as the heart of it, words and dates only. A move that came back is told in
   amber words, never red and never a badge. */
.mkmv, .mkfeed b { white-space: nowrap; }        /* a move is one word: 6…Nf6 never breaks after its dots */
.sheet[data-m] .sheet-title { margin-left: 0; }   /* the title on the sheet's own left edge, with its words */
.mksheet p { margin: .45rem 0; line-height: 1.5; }
.mksheet .mkwait { margin: .8rem 0 1rem; }
.mkmove { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.mkmove b { font-weight: 600; color: var(--text); }
.mkmove .muted { font-size: var(--fs-sm); }
.mktruth { margin: .5rem 0 .2rem; }
.mktruth p { margin: .3rem 0; color: var(--text); line-height: 1.5; max-width: 62ch; }
.mkgames { color: var(--text-3); font-size: var(--fs-sm); max-width: 62ch; }
.mkstop { background: var(--surface-2); border-radius: var(--r-md); padding: .65rem .85rem; color: var(--text-2); }
.mknote { background: var(--surface-2); border-radius: var(--r-md); padding: .75rem .85rem; margin-top: .9rem; }
.mksheet .mkwhen { margin: 0; color: var(--text); line-height: 1.6; }
.mkwhen b { color: var(--accent-2); font-weight: 600; }
.mkchips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .55rem 0 0; }
.mknote textarea, .mkwordsedit textarea {
  display: block; width: 100%; margin-top: .55rem; min-height: 3.4rem; resize: vertical; padding: .55rem .7rem;
  background: var(--bg); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  font: inherit; line-height: 1.45; transition: border-color .15s ease-out; }
.mknote textarea::placeholder, .mkwordsedit textarea::placeholder { color: var(--text-4); }
.mknote textarea:focus, .mkwordsedit textarea:focus { border-color: var(--accent); }
.mkbtns { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .9rem; }
.mkbtns > button { margin: 0; min-height: 44px; }
.mkdone { display: flex; align-items: flex-start; gap: .45rem; color: var(--text); }
.mkdone .qic { margin: .2rem 0 0; }
.mkfoot:empty { display: none; }
/* the on-demand deep check: the Analyse board's breathing dot, then the truth */
.mksheet .mkchecking { display: flex; align-items: baseline; margin: .8rem 0 .3rem; color: var(--text); }
.mkchecking .andot { flex: none; margin: 0 .6rem 0 0; }

/* the Notebook shelf */
#marks.mknone { display: none; }                  /* no marks: no shelf at all - absence says nothing */
.mkshelf .mklist, .mkshelf .mklead { max-width: 44rem; }   /* the panel as wide as the Notebook's, the list at reading width */
.mkh { font-size: 1.1rem; font-weight: 600; margin: 0 0 .6rem; }
.mkh3 { font-size: var(--fs-md); font-weight: 600; margin: 1.5rem 0 .15rem; }
.mklead { margin: 0 0 .4rem; font-size: var(--fs-sm); }
.ghost.small.mkolder { margin: .7rem 0 0; min-height: 40px; }
.mklist { list-style: none; margin: 0; padding: 0; }
.mklist li + li { border-top: 1px solid var(--line); }
.mkrow { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 16px; column-gap: .85rem; align-items: center;
         width: 100%; min-height: 68px; margin: 0; padding: .55rem .45rem; background: transparent; border: 0;
         border-radius: var(--r-md); color: var(--text); font: inherit; text-align: left; cursor: pointer;
         transition: background-color .15s ease-out; }
.mkrow:hover { background: var(--surface-3); }
.mkrow:active { background: var(--accent-wash); }
.mkrow .rlchev { stroke: var(--text-4); }         /* the row opens the move's page */
.mkrow:hover .rlchev { stroke: var(--text-2); }
.mkmini .gmini { display: block; width: 56px; height: 56px; border-radius: var(--r-sm); box-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.mkbody { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.mklabel { font-weight: 600; font-variant-numeric: tabular-nums; }
.mknoteline { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2;
              -webkit-box-orient: vertical; overflow: hidden; }
.mknoteline { -webkit-line-clamp: 3; }            /* his reason comes last in the sentence: room for it */
.mkline { color: var(--text-4); font-size: var(--fs-xs); }
.mkstate { display: inline-block; font-size: var(--fs-xs); border-radius: var(--r-pill); padding: .12rem .6rem;
           border: 1px solid var(--line-2); color: var(--text-3); white-space: nowrap; justify-self: end; }
.mkstate.s-showing { color: var(--accent-2); border-color: var(--accent); }
.mkstate.s-yours { color: var(--accent-2); border-color: var(--accent); background: var(--accent-wash); }
.mkstate.s-yours_now { color: var(--accent-ink); border-color: var(--accent-2); background: var(--accent-2); }

/* a move's page */
#learn .board-wrap, #learn .board { width: 360px; }
.mkpage { max-width: 44rem; }
.mkback { display: inline-flex; align-items: center; padding: 0; margin: 0 0 .2rem; color: var(--text-3); }
.mkback:hover { color: var(--text); }
.mkpage .mkh { font-size: 1.25rem; margin: .1rem 0 .7rem; font-variant-numeric: tabular-nums; }
.mkpage .mkh .muted { font-size: var(--fs-md); font-weight: 400; }
.mkh:focus:not(:focus-visible) { outline: none; }
.mkwords { margin: 0 0 .35rem; padding: 0; font-size: var(--fs-lg); line-height: 1.5; color: var(--text); max-width: 60ch; }
.mkwords::before { content: "\201C"; color: var(--text-4); }
.mkwords::after { content: "\201D"; color: var(--text-4); }
.ghost.small.mkedit { margin: 0; min-height: 36px; }
.mkstatus { margin: .9rem 0 .3rem; }
.mkstatus .mkstate { font-size: var(--fs-sm); padding: .2rem .75rem; }
.mktransfer p { color: var(--text); }
.mkpage .mktruth { margin: .8rem 0; }
.mktime { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .6rem; }
.mktime p { margin: .5rem 0; line-height: 1.55; color: var(--text-2); max-width: 62ch; }
.mktime p b { color: var(--text); font-weight: 600; }
.mksince { list-style: none; margin: .1rem 0 .7rem; padding: 0; }
.mksince li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; padding: .3rem 0; color: var(--text-2);
              line-height: 1.45; font-variant-numeric: tabular-nums; }
.mksince li.t-amber span { color: var(--amber); }
.mkpagebtns { margin-top: 1.1rem; }               /* in the flow of the page: never pinned over his note */
.mkletgo { margin: 1.6rem 0 0; padding-top: .8rem; border-top: 1px solid var(--line); }
.mkletgo .ghost.small { margin: 0; min-height: 40px; color: var(--text-3); }
.mkletgo .ghost.small:hover { color: var(--text); }
.qic-none { display: inline-block; }              /* a quiet space where no mark belongs: as good, playable, practice */
@media (max-width: 640px) {
  #learn .board-wrap { width: 100%; max-width: none; }                     /* the board above, the words below */
  #learn .board { width: min(calc(100vw - 1rem), 20rem); margin: 0 auto; }
  #learn .mkpage { flex: 1 1 100%; }
  .mkrow { grid-template-columns: 48px minmax(0, 1fr) 16px; row-gap: .3rem; }
  .mkmini .gmini { width: 48px; height: 48px; }
  .mkrow .mkstate { grid-column: 2; justify-self: start; }
  .mkrow .rlchev { grid-column: 3; grid-row: 1 / span 2; }
  .mkwords { font-size: var(--fs-md); }
  .mkbtns > button { flex: 1 1 auto; }             /* side by side when they fit, else each a full-width row */
  .mkbtns .primary { width: auto; }
  .ghost.small.mkedit, .mkletgo .ghost.small, .ghost.small.mkolder { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .mkrow, .mknote textarea, .mkwordsedit textarea { transition: none; } }

/* ---- Studies (docs/DESIGN_STUDIES.md, step 1): the Notebook's list, a study's page, the study sheet.
   His words first and the cards second; tags are quiet chips (a teacher's in the accent); a link card is a row, not a
   box inside a box. No alarm colours, nothing counted as work, no side stripes. */
.stic { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round;
        stroke-linejoin: round; vertical-align: -.15em; }
.stic.stdots { fill: currentColor; stroke: none; width: 18px; height: 18px; }
.sheet[data-s] .sheet-title { margin-left: 0; }
.stshelf .sthead { display: flex; align-items: center; justify-content: space-between; gap: .8rem; max-width: 44rem; }
.stshelf .sthead .mkh { margin: 0; }
.stnewbtn, .stadd .ghost, .stlessonadd { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; }
.stlead { margin: .3rem 0; max-width: 60ch; line-height: 1.5; color: var(--text-2); }
.stlead.muted { color: var(--text-3); }
.stempty { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; max-width: 44rem; }
.stempty .stlead { flex: 1 1 18rem; margin: 0; }
.stempty .stlead b { color: var(--text); font-weight: 600; }
.stempty .stnewbtn { flex: none; margin: 0; }
.stnew { max-width: 30rem; margin: .8rem 0 .2rem; }
.stnew label, .stwlabel { display: block; margin: 0 0 .35rem; color: var(--text-2); font-size: var(--fs-sm); }
.stnew input, .stedbox input, .stedbox textarea, .sttools input, .stsheet textarea {
  display: block; width: 100%; min-height: 44px; padding: .55rem .75rem; background: var(--bg); color: var(--text);
  border: 1px solid var(--line-2); border-radius: var(--r-sm); font: inherit; line-height: 1.45;
  transition: border-color .15s ease-out; }
.stedbox textarea, .stsheet textarea { resize: vertical; min-height: 5rem; }
.stedbox input[type="file"] { display: none; }        /* opened by Choose a PGN file, never shown itself */
.stnew input::placeholder, .stedbox input::placeholder, .stedbox textarea::placeholder, .sttools input::placeholder,
.stsheet textarea::placeholder { color: var(--text-4); }
.stnew input:focus, .stedbox input:focus, .stedbox textarea:focus, .sttools input:focus, .stsheet textarea:focus { border-color: var(--accent); }
.stnew .mkbtns, .stedbox .mkbtns { margin-top: .6rem; }
.stnew .mkbtns > .primary, .stedbox .mkbtns > .primary { margin: 0; }

/* the list */
.sttools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; margin: .9rem 0 .2rem; max-width: 44rem; }
.sttools input[type=search] { flex: 1 1 14rem; width: auto; border-radius: var(--r-pill); padding: .45rem 1rem; min-height: 40px; }
.stsort { display: inline-flex; flex: none; padding: 2px; border: 1px solid var(--line-2); border-radius: var(--r-pill); }
.stsort button { min-height: 36px; padding: 0 .9rem; background: transparent; border: 0; border-radius: var(--r-pill);
                 color: var(--text-3); font: inherit; font-size: var(--fs-sm); cursor: pointer;
                 transition: background-color .15s ease-out, color .15s ease-out; }
.stsort button:hover { color: var(--text); }
.stsort button[aria-pressed="true"] { background: var(--accent-wash); color: var(--accent-2); font-weight: 600; }
.stchips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 .2rem; max-width: 44rem; }
.stchips .gchip { min-height: 36px; font-size: var(--fs-sm); }
.stfilter.t-teacher:not(.on) { color: var(--accent-2); }
.stlist { list-style: none; margin: .5rem 0 0; padding: 0; max-width: 44rem; }
.stlist li + li { border-top: 1px solid var(--line); }
.strow { display: grid; grid-template-columns: 56px minmax(0, 1fr) 16px; column-gap: .85rem; align-items: center;
         width: 100%; min-height: 68px; margin: 0; padding: .6rem .45rem; background: transparent; border: 0;
         border-radius: var(--r-md); color: var(--text); font: inherit; text-align: left; cursor: pointer;
         transition: background-color .15s ease-out; }
.strow:hover { background: var(--surface-3); }
.strow:active { background: var(--accent-wash); }
.strow .rlchev { stroke: var(--text-4); }
.strow:hover .rlchev { stroke: var(--text-2); }
.strow .mknoteline { -webkit-line-clamp: 2; }
.stmini0 { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-sm); background: var(--surface-3);
           color: var(--text-4); font-size: 1.4rem; }
.sthit { color: var(--text-3); font-size: var(--fs-sm); line-height: 1.4; }
.sttags { display: flex; flex-wrap: wrap; gap: .3rem; margin: .2rem 0 .1rem; }
.sttag { display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .6rem; border-radius: var(--r-pill);
         background: var(--surface-3); color: var(--text-2); font-size: var(--fs-xs); line-height: 1.5; }
.sttag.t-teacher { background: var(--accent-wash); color: var(--accent-2); }
.stnone { margin: .8rem 0; }

/* a study's page */
#study .stpage { max-width: 46rem; }
.stpage .sth { font-size: 1.4rem; font-weight: 600; line-height: 1.3; margin: .15rem 0 .5rem; text-wrap: balance; }
.sth:focus:not(:focus-visible) { outline: none; }
.stlesson { margin: 0 0 .9rem; padding: .8rem 1rem; background: var(--surface-2); border-radius: var(--r-md); max-width: 44rem; }
.stlesson.stlesson0 { padding: 0; background: none; }
.stlessontext { margin: 0 0 .35rem; font-size: var(--fs-lg); line-height: 1.5; color: var(--text); max-width: 60ch; }
.stlessontext::before { content: "\201C"; color: var(--text-4); }
.stlessontext::after { content: "\201D"; color: var(--text-4); }
.stlessonadd { color: var(--text-2); }
.ghost.small.stedit { margin: 0; min-height: 36px; }
.sttagrow { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .1rem 0 .4rem; }
button.sttag { min-height: 32px; font: inherit; font-size: var(--fs-sm); border: 1px solid transparent; cursor: pointer;
               transition: border-color .15s ease-out; }
button.sttag:hover { border-color: var(--line-2); }
.sttagedit { margin: .1rem 0 .8rem; padding: .8rem 1rem; background: var(--surface-2); border-radius: var(--r-md); max-width: 44rem; }
.sttagedit .sttag { font-size: var(--fs-sm); padding-right: .2rem; }
.stuntag { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; background: none; border: 0;
           border-radius: var(--r-pill); color: var(--text-3); cursor: pointer; }
.stuntag:hover { color: var(--text); background: var(--surface-3); }
.sttagedit .stnew { margin: .6rem 0 0; }
.stsuggest { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .2rem 0 .5rem; }
.stsuglead { color: var(--text-4); font-size: var(--fs-sm); margin-right: .15rem; }
.stsug { display: inline-flex; align-items: center; gap: .3rem; min-height: 32px; padding: 0 .7rem; background: transparent;
         border: 1px dashed var(--line-2); border-radius: var(--r-pill); color: var(--text-3); font: inherit;
         font-size: var(--fs-sm); cursor: pointer; transition: border-color .15s ease-out, color .15s ease-out; }
.stsug:hover { border-color: var(--accent); color: var(--text); }
.stsug.t-teacher { color: var(--accent-2); }
.stitems { list-style: none; margin: .6rem 0 0; padding: 0; max-width: 46rem; }
.stitem { padding: 1.1rem 0; border-top: 1px solid var(--line); }
.stpos { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: .9rem 1.3rem; align-items: start; }
.stboard .gmini { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--r-sm);
                  box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.stmove { margin: 0; font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.stmove b { font-weight: 600; }
.stmove .muted { font-size: var(--fs-sm); }
.stsource { margin: .15rem 0 0; color: var(--text-3); font-size: var(--fs-sm); }
.stmarkrow { margin: .5rem 0 0; }
button.stmark { font: inherit; font-size: var(--fs-xs); cursor: pointer; background: transparent; min-height: 28px; }
.stwords { margin-top: .6rem; }
.stcomment { margin: 0 0 .5rem; white-space: pre-line; line-height: 1.55; color: var(--text); max-width: 62ch; }
.stwbtns { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.stitembtns { margin-top: .7rem; }
.stitembtns > .primary { margin: 0; }
.ghost.stmore { display: inline-grid; place-items: center; width: 44px; min-height: 44px; padding: 0; color: var(--text-3); }
.ghost.stmore.on, .ghost.stmore:hover { color: var(--text); }
.stwbtns .ghost.stmore { width: 36px; min-height: 36px; }
.stmoremenu { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.stmoremenu[hidden] { display: none; }
.stmoremenu .ghost.small { margin: 0; min-height: 36px; }
.stitemfoot { margin: .4rem 0 0; }
.stcard { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 16px; align-items: center; gap: .9rem;
          padding: .45rem; margin: -.45rem; border-radius: var(--r-md); color: var(--text); text-decoration: none;
          transition: background-color .15s ease-out; }
.stcard:hover { background: var(--surface-3); }
.stcard:hover .stcardtitle { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--text-4); }
.stthumb { display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--r-sm); background: var(--surface-3); }
.stthumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.stthumb0 { display: grid; place-items: center; color: var(--text-3); font-size: 1.5rem; }
.stthumb0 .gmini { width: auto; height: 100%; aspect-ratio: 1; }
.stcardbody { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.stcardtitle { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2;
               -webkit-box-orient: vertical; overflow: hidden; }
.stcardmeta { color: var(--text-3); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.ststart { color: var(--accent-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stout { color: var(--text-4); }
.stnotetext { white-space: pre-line; line-height: 1.6; color: var(--text); max-width: 62ch; }
.stnote .stwords { margin-top: .4rem; }
.stedbox { flex: 1 1 100%; max-width: 44rem; margin: .5rem 0; }
.stadd { margin-top: 1.1rem; }
.stadd .ghost { margin: 0; }
.stend { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2rem 0 0; padding-top: .8rem; border-top: 1px solid var(--line); }
.stend .ghost.small { margin: 0; min-height: 40px; color: var(--text-3); }
.stend .ghost.small:hover { color: var(--text); }

/* the study sheet */
.stsheet .mkmove { margin: .2rem 0 .7rem; }
.stpick { display: flex; flex-direction: column; gap: .5rem; }
.stpick .sheet-item { min-height: 52px; margin: 0; cursor: pointer; transition: border-color .15s ease-out; }
.stpick .sheet-item:hover { border-color: var(--accent); }
.stpick .sheet-item:disabled { opacity: .6; cursor: default; }
.stpicknew b { display: inline-flex; align-items: center; gap: .4rem; color: var(--accent-2); }
.stpickmore b { color: var(--text-2); }
.stsheet .stnew { margin-top: .2rem; }
@media (max-width: 640px) {
  .strow { grid-template-columns: 48px minmax(0, 1fr) 16px; }
  .strow .mkmini .gmini, .stmini0 { width: 48px; height: 48px; }
  .stpos { grid-template-columns: minmax(0, 1fr); }
  .stboard { width: min(100%, 20rem); }
  .stcard { grid-template-columns: 6.5rem minmax(0, 1fr) 16px; gap: .75rem; }
  .stpage .sth { font-size: 1.25rem; }
  button.sttag, .stsug, .ghost.small.stedit, .stmoremenu .ghost.small, button.stmark { min-height: 40px; }
  .stwbtns .ghost.stmore { width: 40px; min-height: 40px; }
  .stitembtns > button { flex: 1 1 auto; }
  .stitembtns > .stmore { flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .strow, .stcard, .stsort button, .stsug, button.sttag, .stpick .sheet-item, .stnew input, .stedbox input,
  .stedbox textarea, .sttools input, .stsheet textarea { transition: none; }
}
/* ---- Studies, step 2 (docs/DESIGN_STUDIES.md): his drawing in quiet inks (the warm one a muted coral, never an
   alarm), the move symbol on its square, marks inside studies, and Quiz me on the quiz's own layout. The drawing tools
   open under a board only when he asks (Draw); nothing counts, nothing waits. ---- */
.sh { opacity: .82; }
.sh.shp { opacity: .5; }
.sh-g { color: var(--ink-g); } .sh-r { color: var(--ink-r); } .sh-b { color: var(--ink-b); } .sh-y { color: var(--ink-y); }
.shg circle { stroke: rgba(0, 0, 0, .35); stroke-width: .03; }
.shg-good circle { fill: var(--accent-2); } .shg-keen circle { fill: var(--ink-b); } .shg-doubt circle { fill: var(--amber); }
.shg text { fill: var(--accent-ink); font-family: system-ui, sans-serif; }
.shg-keen text { fill: var(--text); }
#stQzBoard .board-b72b1, #anBoard .board-b72b1 { position: relative; }
.stlayer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; overflow: visible; }
.stboardcol { min-width: 0; }
.stboard .gmini { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.stitem.drawing .stboard .gmini { cursor: crosshair; touch-action: none; box-shadow: 0 0 0 2px var(--accent), 0 1px 3px rgba(0, 0, 0, .4); }
.stdraw { margin-top: .45rem; }
.stdrawrow { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.ghost.small.stdrawbtn { display: inline-flex; align-items: center; gap: .35rem; margin: 0; min-height: 36px; color: var(--text-2); }
.ghost.small.stdrawbtn:hover { color: var(--text); }
.ghost.small.stdrawbtn[aria-pressed="true"] { color: var(--accent-2); border-color: var(--accent); }
.stinks { display: inline-flex; gap: .3rem; }
.stink { width: 28px; height: 28px; padding: 0; border: 2px solid transparent; border-radius: 50%; background: currentColor;
         box-shadow: inset 0 0 0 2px var(--surface); cursor: pointer; transition: border-color .15s ease-out; }
.stink[aria-pressed="true"] { border-color: var(--text); }
.stnags { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .45rem; }
.stnag { min-width: 32px; min-height: 32px; padding: 0 .35rem; background: transparent; border: 1px solid var(--line-2);
         border-radius: var(--r-pill); color: var(--text-2); font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
         transition: border-color .15s ease-out, color .15s ease-out; }
.stnag:hover { border-color: var(--accent); color: var(--text); }
.stnag[aria-pressed="true"] { background: var(--accent-wash); border-color: var(--accent); color: var(--accent-2); }
.stdrawfoot { display: flex; align-items: flex-start; gap: .5rem; margin-top: .45rem; }
.stdrawhint { flex: 1 1 auto; margin: 0; color: var(--text-3); font-size: var(--fs-xs); line-height: 1.4; max-width: 34ch; }
.ghost.small.stclear { flex: none; margin: 0; min-height: 32px; }
.stglyph { margin-left: .1rem; font-weight: 700; }
.stglyph.g-good { color: var(--accent-2); } .stglyph.g-keen { color: var(--text); } .stglyph.g-doubt { color: var(--amber); }
.stqzsay:empty { min-height: 0; margin: 0; }
.stsolid { display: inline-block; margin-left: .35rem; padding: 0 .5rem; border: 1px solid var(--accent); border-radius: var(--r-pill);
           color: var(--accent-2); font-size: var(--fs-xs); line-height: 1.5; vertical-align: 1px; }
button.stmark { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem; min-height: 36px; margin: 0 0 0 -.55rem;
                padding: .3rem .55rem; background: transparent; border: 0; border-radius: var(--r-md); color: var(--text-2); font: inherit;
                font-size: var(--fs-sm); text-align: left; cursor: pointer; transition: background-color .15s ease-out; }
button.stmark:hover { background: var(--surface-3); color: var(--text); }
button.stmark b { color: var(--text); font-weight: 600; }
.stquizbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: .6rem 0 .3rem; }
.stquizbar .primary.stquizbtn { margin: 0; min-height: 44px; }
.stquizlead { flex: 1 1 16rem; max-width: 46ch; margin: 0; color: var(--text-3); font-size: var(--fs-sm); line-height: 1.45; }
.stli { display: flex; align-items: center; gap: .25rem; }
.stli .strow { flex: 1 1 auto; min-width: 0; }
.ghost.small.stquizrow { flex: none; margin: 0 .15rem 0 0; min-height: 36px; white-space: nowrap; }
.stquiz { max-width: 64rem; }
.stquiz[hidden], #studyContent[hidden] { display: none; }
.stqzh { margin: .15rem 0 .3rem; font-size: 1.25rem; font-weight: 600; line-height: 1.3; text-wrap: balance; }
.stqzlesson { margin: 0 0 1rem; max-width: 60ch; }
.stqzlesson[hidden] { display: none; }
.stqzcard .qprompt { margin-bottom: .35rem; }
.stqzsay { min-height: 1.5em; margin: 0 0 .5rem; color: var(--text-2); line-height: 1.5; }
.stqzsay.t-found { color: var(--accent-2); font-weight: 600; }
.stqzsay.t-good, .stqzsay.t-shown, .stqzsay.t-kept { color: var(--text); font-weight: 600; }
.stqzsay.t-not, .stqzsay.t-wait { color: var(--text-3); }
.stqzhints { display: grid; gap: .3rem; margin: 0 0 .4rem; }
.stqzhint { margin: 0; padding: .45rem .75rem; border-radius: var(--r-md); background: var(--surface-3); color: var(--text); }
.stqzwords { margin: .6rem 0 0; }
.stqzlinks { display: grid; gap: .7rem; margin: .9rem 0 .2rem; padding: 0; list-style: none; }
.stqzfrom { margin: .6rem 0 0; color: var(--text-3); font-size: var(--fs-sm); line-height: 1.45; }
.stqzfrom b { color: var(--text-2); font-weight: 600; }
.stqzask2 { margin: 1rem 0 0; color: var(--text); }
@media (max-width: 640px) {
  .stli { flex-wrap: wrap; gap: 0; }
  .stli .strow { flex-basis: 100%; }
  .ghost.small.stquizrow { margin: -.4rem 0 .6rem calc(48px + .85rem + .45rem); }   /* under the title, not beside it */
  .stnags { gap: .35rem; }
  .stnag { min-width: 44px; min-height: 40px; }
  .stink { width: 34px; height: 34px; }
  .ghost.small.stdrawbtn, .ghost.small.stclear, button.stmark, .ghost.small.stquizrow { min-height: 40px; }
  .stqzlesson { font-size: var(--fs-md); }
}
@media (prefers-reduced-motion: reduce) { .stink, .stnag, button.stmark { transition: none; } }
/* ---- Studies, step 3 (docs/DESIGN_STUDIES.md): the study leaves as a PGN file; a Lichess chapter comes in. A
   chapter's words carry one quiet line saying whose they are; the new controls are the page's own quiet ones. ---- */
.stcfrom { margin: .15rem 0 .5rem; color: var(--text-3); font-size: var(--fs-xs); line-height: 1.4; }
.stcomment + .stcfrom { margin-top: -.35rem; }          /* close under the words it names */
.stqzwords + .stcfrom { margin-top: .2rem; }
.stedhint { margin: .45rem 0 0; max-width: 52ch; color: var(--text-3); font-size: var(--fs-sm); line-height: 1.45; }
#studyContent .stitem { scroll-margin-top: 1rem; }        /* a chapter's card, brought into view: its title shows */
@media (max-width: 640px) {
  #studyContent .stitem { scroll-margin-top: calc(4.5rem + env(safe-area-inset-top)); }   /* clear of the sticky bar */
}

/* ---- Game plans (docs/DESIGN_GAME_PLANS.md, step 1): his plan on a rapid game's page, and the Notebook's Plans.
   The card is the nutshell's sibling (same surface, same fold to one line); his words lead, the chips are the Games
   chips; a plan that worked wears the accent and nothing else is coloured. No counts, no side stripes, no alarm. ---- */
.plan .pl-title { margin: 0; font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.plan .pl-title:focus:not(:focus-visible) { outline: none; }
.plan .pl-q { display: block; margin: 1.1rem 0 .2rem; color: var(--text); font-size: var(--fs-sm); font-weight: 600; }
.plan .pl-q.pl-first { margin-top: .55rem; }
.plan .pl-sub { padding-top: 1rem; border-top: 1px solid var(--line); }
.plan .pl-hint { margin: 0 0 .5rem; color: var(--text-3); font-size: var(--fs-sm); line-height: 1.45; }
.plan .pl-mq { display: block; margin: .75rem 0 .3rem; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.4; }
.plan .pl-in { display: block; width: 100%; min-height: 44px; padding: .55rem .75rem; background: var(--bg); color: var(--text);
  border: 1px solid var(--line-2); border-radius: var(--r-sm); font: inherit; line-height: 1.45; resize: none;
  overflow: hidden; transition: border-color .15s ease-out; }
.plan .pl-in::placeholder { color: var(--text-4); }
.plan .pl-in:hover { border-color: var(--text-4); }
.plan .pl-in:focus { border-color: var(--accent); }
.plan .pl-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 0; }
.plan .pl-chips .gchip { min-height: 38px; padding: .3rem .85rem; font-size: var(--fs-sm); line-height: 1.3; white-space: normal;
  text-align: left; background: var(--surface-2); transition: border-color .15s ease-out, background-color .15s ease-out; }
.plan .pl-chips .gchip:hover { border-color: var(--accent); }
.plan .pl-chips .gchip.on { background: var(--accent-wash); border-color: var(--accent); color: var(--accent-2); }
.plan .pl-note { margin: .6rem 0 0; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.45; }
.plan .pl-note.pl-well { color: var(--accent-2); }
.plan .pl-said { margin: .65rem 0 0; min-height: 1.3em; color: var(--text-3); font-size: var(--fs-xs); }
/* folded: "Your plan: <his line> · Worked" on one line, his words cut with an ellipsis, never the verdict */
.plan .pl-sum { display: flex; align-items: baseline; gap: .4rem; min-width: 0; flex: 1 1 auto; }
.plan .pl-sumk { flex: none; color: var(--text-3); }
.plan .pl-summ { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.plan .pl-sumv { flex: none; color: var(--text-3); }
.plan .pl-sumv::before { content: "\00b7"; margin-right: .4rem; color: var(--text-4); }
.plan .pl-sumv.v-worked { color: var(--accent-2); }
/* step 2: the board's facts under his review, the nutshell's own list (sentence, then Go there at the measure) */
.plan .pl-facts { margin: .15rem 0 .1rem; }
.plan .pl-facts li p { line-height: 1.45; }

/* the Notebook's Plans */
.plshelf .mkh { margin: 0 0 .3rem; }
.plshelf .pl-empty { margin: 0; max-width: 44rem; color: var(--text-3); }
.plshelf .pl-empty b { color: var(--text); font-weight: 600; }
.plchips { margin: .5rem 0 .1rem; }
.plrow { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; column-gap: .85rem; align-items: center; width: 100%;
  min-height: 60px; margin: 0; padding: .6rem .45rem; background: transparent; border: 0; border-radius: var(--r-md);
  color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background-color .15s ease-out; }
.plrow:hover { background: var(--surface-3); }
.plrow:active { background: var(--accent-wash); }
.plrow:disabled { opacity: .6; cursor: default; }
.plrow .rlchev { stroke: var(--text-4); }
.plrow:hover .rlchev { stroke: var(--text-2); }
.plmacro { line-height: 1.4; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
.mkstate.plv.v-worked { color: var(--accent-2); border-color: var(--accent); background: var(--accent-wash); }
/* step 3: the library's plan under Micro plan (a quiet hint, never filled in for him), and the plan book */
.plan .pl-libchips + .pl-chips { margin-top: .4rem; }
.plan .pl-lib { margin: .1rem 0 .35rem; padding: .7rem .85rem .75rem; background: var(--bg); border-radius: var(--r-sm); }
.plan .pl-libline, .plan .pl-libwatch { margin: 0; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.5; max-width: 62ch; }
.plan .pl-libline b { color: var(--text); font-weight: 600; }
.plan .pl-libwatch { margin-top: .45rem; }
.pl-libk { color: var(--text); font-weight: 600; }
.pl-steps { margin: .45rem 0 0; padding-left: 1.35rem; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.5; max-width: 62ch; }
.pl-steps li + li { margin-top: .15rem; }
.pl-steps li::marker { color: var(--text-4); font-variant-numeric: tabular-nums; }
.plhead { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem .75rem; margin: 0 0 .4rem; }
.plhead .mkh { margin: 0; }
.plshelf .plbook-lead { margin: .1rem 0 .6rem; max-width: 62ch; color: var(--text-3); font-size: var(--fs-sm); line-height: 1.45; }
.plst { padding: 1.1rem 0 .9rem; border-top: 1px solid var(--line); }
/* one readable measure: the chevrons and the "As Black" line stay beside the words they belong to on a wide screen */
.plst-head, .plst-lib, .plst-mine, .plst-next { max-width: 46rem; }
.plst-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .15rem .75rem; }
.plst-name { margin: 0; color: var(--text); font-size: var(--fs-md); font-weight: 600; line-height: 1.3; }
.plst-meta { color: var(--text-3); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.plst-lib { list-style: none; margin: .45rem 0 0; padding: 0; }
.plst-plan summary { display: grid; grid-template-columns: minmax(0, 1fr) 16px; column-gap: .75rem; row-gap: .15rem; align-items: center;
  min-height: 44px; padding: .5rem .45rem; border-radius: var(--r-md); cursor: pointer; list-style: none;
  transition: background-color .15s ease-out; }
.plst-plan summary::-webkit-details-marker { display: none; }
.plst-plan summary:hover { background: var(--surface-3); }
.plst-plan summary .rlchev { grid-column: 2; grid-row: 1; transition: transform .15s ease-out; }
.plst-plan[open] summary .rlchev { transform: rotate(90deg); }
.plst-pname { grid-column: 1; color: var(--text); font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; }
.plst-pline { grid-column: 1; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.45; max-width: 62ch; }
.plst-body { padding: .1rem .45rem .55rem; }
.plst-body .pl-steps { margin-top: .2rem; }
.plst-body p { margin: .45rem 0 0; max-width: 62ch; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.5; }
.plst-body .plst-src { color: var(--text-4); font-size: var(--fs-xs); }
.plst-h { margin: .85rem 0 .2rem; padding: 0 .45rem; color: var(--text-3); font-size: var(--fs-sm); font-weight: 600; }
.plst-mine, .plst-next { list-style: none; margin: 0; padding: 0; }
.plst-mine li { padding: .15rem .45rem; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.5; }
.plst-mine li b { color: var(--text); font-weight: 600; }
.plst-mine li.v-worked b { color: var(--accent-2); }
.plgo { display: grid; gap: .1rem; width: 100%; min-height: 44px; padding: .45rem .45rem; background: transparent; border: 0;
  border-radius: var(--r-md); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background-color .15s ease-out; }
.plgo:hover { background: var(--surface-3); }
.plgo:disabled { opacity: .6; cursor: default; }
.plst-nt { line-height: 1.45; overflow-wrap: anywhere; }
.plst-foot { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .75rem; margin: .6rem .45rem 0; }
.plst-foot .ghost.small { margin: 0; min-height: 40px; padding: .3rem .9rem; border-radius: var(--r-pill); font-size: var(--fs-sm); }
.plst-say { color: var(--text-3); font-size: var(--fs-sm); }
.plshelf .plbook-more { margin: .6rem 0 0; font-size: var(--fs-sm); }
@media (max-width: 640px) {
  .plan .pl-chips .gchip { min-height: 44px; }
  .plst-foot .ghost.small { min-height: 44px; }
  /* each filter one row that scrolls sideways, so his plans stay near the top */
  .plchips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -.75rem; padding-right: .75rem; }
  .plchips::-webkit-scrollbar { display: none; }
  .plchips .gchip { flex: none; }
  .plrow { grid-template-columns: minmax(0, 1fr) 16px; row-gap: .3rem; }
  .plrow .plv { grid-column: 1; justify-self: start; }
  .plrow .rlchev { grid-column: 2; grid-row: 1 / span 2; }
}
@media (prefers-reduced-motion: reduce) {
  .plrow, .plan .pl-in, .plan .pl-chips .gchip, .plst-plan summary, .plst-plan summary .rlchev, .plgo { transition: none; }
}
/* ---- Masters (DESIGN_MASTER_GAMES §4): the masters' moves under the engine lines, a master game's card, Games › Masters.
   Quiet by default: one line until opened; results as a small three-part bar in the board's own light and dark
   (never a win or loss colour); counts in tabular figures; the credit line in the smallest calm type, always there. ---- */
.msp { margin: .35rem 0 .5rem; border-top: 1px solid var(--line); }
.msp[hidden] { display: none; }
.msp-head { width: 100%; display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: 0 .1rem; background: transparent;
  border: 0; color: var(--text-2); font: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer; transition: color .15s ease-out; }
.msp-head:hover { color: var(--text); }
.msp-t { font-weight: 600; }
.msp-sum { margin-left: auto; color: var(--text-3); font-variant-numeric: tabular-nums; }
.msp-head .nut-chev { margin-left: auto; }
.msp-sum + .nut-chev { margin-left: 0; }
.msp-head[aria-expanded="true"] .nut-chev { transform: rotate(180deg); }
.msp-body { padding: 0 0 .4rem; }
.msp-f { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .45rem; }
.msp-seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r-pill); overflow: hidden; }
.msp-c { background: transparent; border: 0; color: var(--text-2); font: inherit; font-size: var(--fs-sm); min-height: 36px; padding: 0 .85rem;
  cursor: pointer; transition: background-color .15s ease-out, color .15s ease-out; }
.msp-c + .msp-c { box-shadow: inset 1px 0 0 var(--line-2); }
.msp-c:hover { color: var(--text); background: var(--surface-3); }
.msp-c.on { background: var(--accent-wash); color: var(--accent-2); font-weight: 600; }
.msp-since { min-height: 36px; padding: 0 .7rem; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--line-2);
  border-radius: var(--r-pill); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.msp-data { transition: opacity .15s ease-out; }
.msp-data.stale { opacity: .45; pointer-events: none; }
.msp-note { margin: .3rem .1rem; color: var(--text-3); font-size: var(--fs-sm); line-height: 1.45; }
.msp-moves { display: grid; gap: 1px; }
.msmv { display: grid; grid-template-columns: 4.6rem 4.4rem minmax(3rem, 22rem) auto; align-items: center; column-gap: .7rem; width: 100%;
  min-height: 40px; padding: .15rem .45rem; background: transparent; border: 0; border-radius: var(--r-sm); color: var(--text);
  font: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer; transition: background-color .15s ease-out; }
.msmv:hover { background: var(--surface-3); }
.msmv:active { background: var(--accent-wash); }
.msmv-san { font-weight: 600; white-space: nowrap; }
.msmv-n { color: var(--text-3); text-align: right; font-variant-numeric: tabular-nums; }
.msbar { display: flex; height: 10px; min-width: 3rem; border: 1px solid var(--line-2); border-radius: var(--r-pill); overflow: hidden;
  background: var(--surface-3); }
.msbar i { flex: 0 1 0; min-width: 0; }
.msbar .w { background: var(--board-light); }
.msbar .d { background: var(--res-draw); }
.msbar .b { background: var(--res-black); }
.ms-file { color: var(--accent-2); font-size: var(--fs-xs); white-space: nowrap; }
.msp-all { padding-left: .45rem; }
.msp-h { margin: .75rem .1rem .2rem; font-size: var(--fs-sm); font-weight: 600; color: var(--text-3); }
.msp-games, .ms-games { list-style: none; margin: 0; padding: 0; }
.msgr { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; width: 100%; min-height: 48px; padding: .4rem .45rem;
  background: transparent; border: 0; border-radius: var(--r-md); color: var(--text); font: inherit; text-align: left; cursor: pointer;
  transition: background-color .15s ease-out; }
.msgr:hover { background: var(--surface-3); }
.msgr:active { background: var(--accent-wash); }
.msgr:disabled { opacity: .6; cursor: default; }
.msgr-p { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.msgr-m { color: var(--text-3); font-size: var(--fs-sm); line-height: 1.4; overflow-wrap: anywhere; }
.mscredit { margin: .65rem .1rem 0; color: var(--text-4); font-size: var(--fs-xs); line-height: 1.5; }
.mscredit a { color: var(--text-3); text-underline-offset: 2px; }
.mscredit a:hover { color: var(--text-2); }
/* a master game on the Board: the nutshell's card, marked in words */
.msgame .msg-res { margin-left: .3rem; color: var(--text-2); font-weight: 600; white-space: nowrap; }
.msgame .msg-ev { margin: 0 0 .35rem; color: var(--text-3); font-size: var(--fs-sm); }
.msgame .nut-act { margin-top: .45rem; }
.msgame .mscredit { margin: .6rem 0 0; }
/* Games › Masters */
.ms-panel { max-width: 760px; }
.ms-open + .ms-open { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.ms-h { margin: 0 0 .5rem; }
.ms-side { margin-left: .2rem; color: var(--text-3); font-size: var(--fs-sm); font-weight: 400; }
.ms-chips { margin: 0 0 .35rem; }
.ms-how { display: inline-flex; align-items: center; gap: .15rem; min-height: 44px; padding: 0 .3rem 0 .45rem; background: transparent;
  border: 0; border-radius: var(--r-pill); color: var(--accent-2); font: inherit; font-weight: 600; cursor: pointer;
  transition: background-color .15s ease-out; }
.ms-how:hover { background: var(--accent-wash); }
.ms-how .nut-chev { transform: rotate(-90deg); width: 18px; height: 18px; }
.ms-more { padding-left: .45rem; }
.ms-empty { margin: .4rem 0; color: var(--text-2); }
.ms-title { margin: .1rem 0 .35rem; font-size: 1.25rem; }
.ms-path { margin: 0 0 .5rem; color: var(--text-3); font-size: var(--fs-sm); line-height: 2; }
.ms-pm { background: transparent; border: 1px solid transparent; border-radius: var(--r-pill); color: var(--text-2); font: inherit;
  padding: .1rem .45rem; min-height: 32px; cursor: pointer; transition: background-color .15s ease-out; }
.ms-pm:hover { background: var(--surface-3); color: var(--text); }
.ms-pm.cur { color: var(--text); font-weight: 600; border-color: var(--line-2); }
.ms-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .5rem 0 .1rem; }
.ms-acts .nut-act { margin-top: 0; }
.ms-h3 { margin: 1.1rem 0 .25rem; font-size: var(--fs-md); font-weight: 600; color: var(--text); }
@media (max-width: 640px) {
  .msp-c, .msp-since { min-height: 44px; }
  .msmv { min-height: 44px; grid-template-columns: 4.3rem 3.9rem minmax(2.5rem, 1fr) auto; column-gap: .55rem; }
  .ms-pm { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .msp-head, .msp-c, .msp-data, .msmv, .msgr, .ms-how, .ms-pm { transition: none; }
}
/* ---- Move notes (Njeru, 29 Sep 2026): his own note on a move, big above the move's strip in the calm accent; the
   box he writes in; his notes from elsewhere, smaller; small marks on the move list and the graph; the Notebook's Notes.
   His words keep their own lines and are never cut short without a way to read them whole. ---- */
.mnote { grid-column: 1 / -1; margin: 0 0 .65rem; }
.mnote[hidden] { display: none; }
.mn-card { background: var(--accent-wash-solid); border: 1px solid rgba(156, 204, 107, .36); border-radius: var(--r-lg);
  padding: .55rem .6rem .85rem .95rem; }
.mn-head { display: flex; align-items: center; gap: .4rem; min-height: 40px; }
.mn-k { flex: 1; min-width: 0; margin: 0; color: var(--accent-2); font-size: var(--fs-sm); font-weight: 600; }
.mn-text { margin: .2rem .35rem 0 0; color: var(--text); font-size: 1.22rem; line-height: 1.45; white-space: pre-line;
  overflow-wrap: anywhere; max-width: 60ch; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical;
  overflow: hidden; }
.mn-text.all { display: block; overflow: visible; }
.mn-btn { flex: none; background: transparent; color: var(--text-2); border: 1px solid var(--line-2); border-radius: var(--r-pill);
  min-height: 36px; padding: 0 .95rem; font: inherit; font-size: var(--fs-sm); cursor: pointer;
  transition: border-color .15s ease-out, color .15s ease-out, background-color .15s ease-out; }
.mn-btn:hover { border-color: var(--accent); color: var(--text); }
.mn-btn.mn-done { border-color: var(--accent); color: var(--accent-2); font-weight: 600; }
.mn-btn.mn-done:hover { background: var(--accent-wash); }
.mn-fold { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0;
  background: transparent; border: 0; border-radius: var(--r-pill); color: var(--text-3); cursor: pointer; }
.mn-fold:hover { color: var(--text); background: var(--accent-wash); }
.mn-fold .nut-chev { transform: rotate(180deg); }
.mn-open { width: 100%; display: flex; align-items: center; gap: .65rem; min-height: 48px; margin: 0; padding: .45rem .6rem .45rem .95rem;
  background: var(--accent-wash-solid); border: 1px solid rgba(156, 204, 107, .36); border-radius: var(--r-lg); color: var(--text-2);
  font: inherit; text-align: left; cursor: pointer; }
.mn-open .mn-k { flex: none; }
.mn-first { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-open .nut-chev { color: var(--text-3); }
.mn-open:hover .nut-chev { color: var(--text); }
.mn-all { display: inline-flex; align-items: center; min-height: 36px; margin-top: .15rem; padding: 0; background: none; border: 0;
  color: var(--accent-2); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.mn-all[hidden] { display: none; }
/* the box he writes in */
.mn-in { display: block; width: 100%; min-height: 5.6rem; max-height: 45vh; margin: .4rem 0 0; padding: .6rem .75rem; resize: vertical;
  background: var(--surface); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r-md);
  font: inherit; font-size: 1.1rem; line-height: 1.45; transition: border-color .15s ease-out; }
.mn-in::placeholder { color: var(--text-4); opacity: 1; }
.mn-in:focus { border-color: var(--accent); }
.mn-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .2rem .9rem; margin-top: .45rem; }
.mn-follow { display: flex; align-items: center; gap: .6rem; min-height: 44px; color: var(--text-2); font-size: var(--fs-sm);
  line-height: 1.35; cursor: pointer; }
.mn-follow .eswitch { display: inline-block; }
.mn-said { margin: 0; color: var(--text-3); font-size: var(--fs-sm); }
.mn-acts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .3rem; }
.mn-acts[hidden] { display: none; }
.mn-acts .ghost.small { margin: 0; min-height: 40px; padding: .3rem .9rem; border-radius: var(--r-pill); font-size: var(--fs-sm); }
.mn-acts .mn-del { color: var(--text-3); }
/* his notes from elsewhere: the same accent, one step quieter */
.mn-at { margin-top: .5rem; padding: .5rem .85rem .6rem; background: var(--surface-2); border: 1px solid var(--line-2);
  border-radius: var(--r-md); }
#mnMine:empty + #mnAt > .mn-at:first-child { margin-top: 0; }
.mn-atk { margin: 0; color: var(--accent-2); font-size: var(--fs-xs); font-weight: 600; line-height: 1.4; }
.mn-att { margin: .2rem 0 0; color: var(--text-2); font-size: var(--fs-md); line-height: 1.45; white-space: pre-line;
  overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.mn-att.all { display: block; overflow: visible; }
.mn-link { display: inline-flex; align-items: center; min-height: 36px; padding: 0; background: none; border: 0; color: var(--accent-2);
  font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.mn-pen { width: 16px; height: 16px; fill: currentColor; flex: none; }
/* the small marks: a dot after the move in the list, one over the graph */
.mn-dot { display: inline-block; width: 7px; height: 7px; margin-left: .3rem; border-radius: 50%; background: var(--accent-2);
  vertical-align: .12em; }
.anmoves .mv.cur .mn-dot { background: var(--accent-ink); }
.angraph { position: relative; }
.mn-gm { position: absolute; top: 3px; left: calc(var(--x) * 100%); width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 2px var(--line); pointer-events: none; }
/* the Notebook's Notes */
.mnshelf .mkh { margin: 0 0 .3rem; }
.mnshelf .mn-empty { margin: 0; max-width: 44rem; color: var(--text-3); }
.mnshelf .mn-empty b { color: var(--text); font-weight: 600; }
.plrow.mnrow { grid-template-columns: minmax(0, 1fr) 16px; }
.mnrow .mnline { color: var(--text-2); font-size: var(--fs-md); -webkit-line-clamp: 2; overflow-wrap: anywhere; }
@media (pointer: coarse) {
  .mn-btn, .mn-link, .mn-all, .mn-acts .ghost.small { min-height: 44px; }
  .mn-fold { width: 44px; height: 44px; }
}
@media (max-width: 640px) { .mn-text { font-size: 1.16rem; } .mn-card { padding-left: .85rem; } }
@media (prefers-reduced-motion: reduce) { .mn-btn, .mn-in { transition: none; } }

/* ---- The Board, notes first (docs/DESIGN_ANALYSE_NOTES_FIRST.md, 30 Sep 2026): the note line under the board, the move
   bar with Play and its speed, the move's verdict as one compact row, then the engine lines, the nutshell, his plan,
   Masters and the moves. Calmer by style, not by hiding: one card style, sentence-case headings, fewer outlines, the
   one accent colour, one spacing rhythm. ---- */
/* the board column: the board, then his note line right under it (phone and laptop) */
.ancol { display: flex; flex-direction: column; gap: .6rem; flex: none; min-width: 0; }
@media (min-width: 641px) { .ancol { width: min-content; } }      /* the board sets the column's width; a long note wraps inside it */
.antop { display: flex; align-items: center; gap: .35rem; }
.antop .pbar { flex: 1; min-width: 0; }
.ancol > .mnote { margin: 0 0 0 calc(16px + .5rem); }            /* in line with the board (the eval bar sits left of it) */
.mn-line { width: 100%; display: flex; align-items: center; gap: .65rem; min-height: 48px; margin: 0; padding: .6rem .9rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--text-3);
  font: inherit; font-size: var(--fs-md); line-height: 1.35; text-align: left; cursor: text;
  transition: border-color .15s ease-out, color .15s ease-out; }
.mn-line:hover { border-color: var(--line-2); color: var(--text-2); }
.mn-line .mn-pen { width: 18px; height: 18px; color: var(--accent-2); }
.mn-linet { min-width: 0; overflow-wrap: anywhere; }
/* one spacing rhythm down the right column: groups sit apart by the same step, each keeps its own inner spacing */
#analyse > .panel { display: flex; flex-direction: column; gap: .75rem; }
#analyse > .panel > * { margin-top: 0; margin-bottom: 0; }
#analyse > .panel > .anlines:empty, #anEvalTxt:empty, #anThreatBox:empty { display: none; }
/* the move bar: first, last, back, forward, Play between them, the speed beside it, then ⋯ */
.anbar { grid-template-columns: 1fr 1.25fr 1.6fr 1.25fr 1fr auto auto; gap: .4rem; }
.anbar .ghost { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; background: var(--surface-2);
  border-color: var(--line); color: var(--text); }
.anbar .ghost:hover { border-color: var(--line-2); }
.anbar .ghost svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
.anbar .anplay { color: var(--accent-2); font-size: var(--fs-md); font-weight: 600; }
.anbar .anplay.on { background: var(--accent-wash); border-color: var(--accent); }
.anbar .anspeedbtn { font-size: var(--fs-sm); color: var(--text-2); padding: .3rem .55rem .3rem .75rem; gap: .15rem; }
.anbar .anspeedbtn .nut-chev { width: 18px; height: 18px; color: var(--text-3); }
.anbar .anspeedbtn[aria-expanded="true"] .nut-chev { transform: rotate(180deg); }
.anbar .ghost.on { border-color: var(--accent); color: var(--accent-2); }
.anbar .ghost:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
/* the speed (and ⋯) open right under the bar on a laptop */
.anpop { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: .6rem .7rem; }
.anpop[hidden] { display: none; }
.rp-h { margin: 0 0 .4rem; color: var(--text-3); font-size: var(--fs-sm); font-weight: 600; }
.rp-speeds { display: flex; flex-wrap: wrap; gap: .4rem; }
.rp-sp { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 48px;
  min-width: 5.4rem; padding: .3rem .8rem; background: transparent; color: var(--text-2); border: 1px solid var(--line-2);
  border-radius: var(--r-md); font: inherit; cursor: pointer; text-align: left;
  transition: border-color .15s ease-out, background-color .15s ease-out, color .15s ease-out; }
.rp-sp:hover { border-color: var(--accent); color: var(--text); }
.rp-sp[aria-pressed="true"] { background: var(--accent-wash); border-color: var(--accent); color: var(--text); }
.rp-w { font-size: var(--fs-sm); font-weight: 600; line-height: 1.25; }
.rp-t { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.3; font-variant-numeric: tabular-nums; }
.rp-sp[aria-pressed="true"] .rp-w { color: var(--accent-2); }
.rp-stop { display: flex; align-items: center; gap: .6rem; min-height: 44px; margin-top: .45rem; color: var(--text-2);
  font-size: var(--fs-sm); cursor: pointer; }
.rp-stop .eswitch { display: inline-block; }
/* the replay's one quiet line: why it paused, or the end of the game */
.anrpsay { margin: 0; padding: 0 .15rem; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.45; }
.anrpsay[hidden] { display: none; }
/* the move's verdict: one compact row, its actions quiet (text in the accent), the way back from a line outlined */
.ancoach { border-bottom: 0; padding-bottom: 0; }
.ancoach .c1, .ancoach .c2 { cursor: default; }
.ancoach .cbtn { background: transparent; border-color: transparent; color: var(--accent-2); border-radius: var(--r-pill);
  padding: .3rem .7rem; min-height: 40px; }
.ancoach .cbtn:hover { background: var(--accent-wash); }
.ancoach .cbtn.back { border-color: var(--accent); }
.ancoach .cbtns { gap: .15rem; margin-right: -.4rem; }
.ancoach .c2 .bad, .ancoach .c2 .ok, .ancoach .c2 .neutral { color: var(--text-3); }
@media (pointer: coarse) { .ancoach .cbtn { min-height: 44px; } }
/* ... and what only it knows, right under it: the gift in words, the file's move, Learn … here */
#analyse > .panel > .verdictbox { margin-top: -.45rem; }            /* one group with the row above it */
.verdictbox .vsay { margin: 0; color: var(--text-2); font-size: var(--fs-sm); max-width: 68ch; }
.verdictbox .vsay b { color: var(--text); }
.verdictbox .vlearn { margin-top: 0; }
/* the engine: no outline that changes colour; the lines as one list with hairlines, headed in sentence case */
.enginebar, .enginebar.on { background: var(--surface-2); border-color: var(--line); }
.antitle { text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); color: var(--text-3); margin: 0 .1rem .25rem; }
.anline { background: transparent; border-color: transparent; border-radius: var(--r-sm); margin: 0; }
.anline + .anline { box-shadow: 0 -1px 0 var(--line); }
.anlines { transition: opacity .2s ease-out; }
/* one card style: Masters wears the nutshell's card */
.msp { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0 .9rem; }
/* the opening, one line in words (the book and file chips joined it) */
.openingstrip { display: block; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.5; padding: 0 .15rem; }
.openingstrip .opname { width: auto; color: var(--text); }
.openingstrip .opdot { color: var(--text-4); }
.openingstrip .oprep { color: var(--accent-2); }
.threat { background: var(--amber-wash); border: 0; border-radius: var(--r-md); }
@media (max-width: 640px) {
  .ancol { width: 100%; }
  /* Back to your games: top left, where a phone keeps its way back */
  .antop .anhome { display: inline-flex; flex: none; width: 44px; height: 44px; min-height: 44px; padding: 0; margin-left: -.35rem;
    background: transparent; border-color: transparent; color: var(--text-3); }
  .antop .anhome svg { width: 22px; height: 22px; }
  /* the bar stays where the thumb is, above the phone's own edge: seven places, Play in the middle */
  .anbar { grid-template-columns: 1fr 1.15fr 1.35fr 1.15fr 1fr auto 44px; gap: .3rem; }
  .anbar .ghost { padding: .3rem .2rem; }
  .anbar .anplay .lg { display: none; }
  .anbar .anspeedbtn { padding: .3rem .35rem .3rem .5rem; font-size: var(--fs-xs); min-width: 0; }
  .anbar .anspeedbtn .nut-chev { width: 16px; height: 16px; }
  /* the speed and ⋯ open above the bar, where the thumb already is */
  .anpop { position: fixed; left: .5rem; right: .5rem; bottom: calc(70px + env(safe-area-inset-bottom)); z-index: 26;
    background: var(--surface); border-color: var(--line-2); border-radius: var(--r-lg); padding: .75rem;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4); max-height: 60vh; overflow-y: auto; }
  #anTools.anpop { flex-wrap: wrap; }
  .rp-speeds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-sp { min-width: 0; }
  /* a phone: the move and its word on one line, the chances under it, then See why · Best move together */
  .ancoach:not(:has(.back)) .c1 { grid-column: 1 / -1; }
  .ancoach .c2 { order: 2; }
  .ancoach .cbtns:not(:has(.back)) { order: 3; grid-column: 1 / -1; justify-self: start; margin: .1rem 0 0 -.7rem; }
  .ancoach .c3 { order: 4; }
  .ancol > .mnote { margin-left: calc(16px + .5rem); }
}
@media (prefers-reduced-motion: reduce) {
  .mn-line, .rp-sp, .anlines { transition: none; }
  .anbar .anspeedbtn .nut-chev { transition: none; }
}

/* ---- Goals (docs/DESIGN_GOALS_WALL.md): the Notebook opens with his goals. His words lead; under each, one quiet
   line of how far it has come and a thin bar; the actions are the nutshell's quiet buttons. A list with hairlines,
   never boxed cards; no alarm colour, no overdue, no count of what is left. A goal reached: one calm line. ---- */
.glshelf .sthead, .glshelf .stempty { max-width: 44rem; }
.gllist { list-style: none; margin: .35rem 0 0; padding: 0; max-width: 44rem; }
.gllist > li + li { border-top: 1px solid var(--line); }
.glgoal { padding: .85rem .45rem .8rem; }
.gltop { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.gltop .glfold { margin: -.5rem -.45rem -.5rem 0; }     /* beside the first line of his words, adding no height */
.gltext { margin: 0; color: var(--text); font-size: var(--fs-md); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere;
  text-wrap: pretty; }
.glwords { margin: .2rem 0 0; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.45; font-variant-numeric: tabular-nums; }
.glbar { display: block; height: 4px; max-width: 20rem; margin: .5rem 0 .1rem; border-radius: var(--r-pill); background: var(--surface-3);
  overflow: hidden; }
.glbar i { display: block; height: 100%; border-radius: inherit; background: var(--accent-2); transform-origin: left center; }
.glmeta { margin: .3rem 0 0; color: var(--text-4); font-size: var(--fs-xs); line-height: 1.45; font-variant-numeric: tabular-nums; }
.glacts { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin-top: .55rem; }
.glacts .nut-act { margin-top: 0; }
.glacts .nut-go { margin-right: 0; }
.glshow .nut-chev { width: 18px; height: 18px; margin-left: .15rem; transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.glshow[aria-expanded="true"] .nut-chev { transform: rotate(180deg); }
.glfold { color: var(--text-3); }
.glfold:hover { color: var(--text); background: var(--surface-3); }
.glacts .nut-act:disabled, .glacts .nut-go:disabled { opacity: .55; cursor: default; }
.glic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
  stroke-linejoin: round; margin-right: .35rem; }
.gltick .glic { color: var(--accent-2); }
.glsay { margin: .45rem 0 0; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.45; }
.glgames { margin: .45rem 0 0; }
.glcheer { display: flex; align-items: flex-start; gap: .5rem; margin: .75rem 0 .3rem; max-width: 44rem; color: var(--text);
  line-height: 1.5; }
.glcheer .glic { color: var(--accent-2); margin: .2rem 0 0; }
.glcheer .glundo { display: inline-flex; vertical-align: baseline; margin: -.5rem 0 -.5rem .1rem; }
/* Done: folded under the wall, his words and the day */
.gldone { max-width: 44rem; margin-top: .5rem; border-top: 1px solid var(--line); }
.gldone summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  min-height: 44px; padding: 0 .45rem; color: var(--text-3); font-size: var(--fs-sm); font-weight: 600; transition: color .15s ease-out; }
.gldone summary::-webkit-details-marker { display: none; }
.gldone summary:hover { color: var(--text); }
.gldone .nut-chev { transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.gldone[open] .nut-chev { transform: rotate(180deg); }
.gldonelist { list-style: none; margin: 0 0 .3rem; padding: 0; }
.gldonelist li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .1rem 1rem; padding: .5rem .45rem; }
.gldonelist li + li { border-top: 1px solid var(--line); }
.gldonelist .gltext { font-weight: 400; color: var(--text-2); font-size: var(--fs-sm); }
.gldonelist .glmeta { margin: 0; }
/* New goal: the ready starts as one quiet list; then his sentence, How many and a date */
.glform { max-width: 34rem; margin: .7rem 0 .4rem; }
.glask { margin: 0 0 .35rem; color: var(--text-2); font-size: var(--fs-sm); }
.glstarts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.glstarts li + li { border-top: 1px solid var(--line); }
.glstart { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; min-height: 48px;
  padding: .55rem .45rem; background: transparent; border: 0; border-radius: var(--r-md); color: var(--text); font: inherit;
  line-height: 1.35; text-align: left; cursor: pointer; transition: background-color .15s ease-out; }
.glstart:hover { background: var(--surface-3); }
.glstart:active { background: var(--accent-wash); }
.glstart .rlchev { stroke: var(--text-4); }
.glstart:hover .rlchev { stroke: var(--text-2); }
.glpick .mkbtns { margin-top: .6rem; }
.glback { margin: 0 0 .4rem; }
.glhow { margin: .45rem 0 0; color: var(--text-3); font-size: var(--fs-sm); line-height: 1.45; }
.glfields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem 1.4rem; margin-top: .9rem; }
.glfield { display: flex; flex-direction: column; gap: .35rem; }
.stnew .glflabel { display: block; margin: 0; }
.glopt { color: var(--text-4); }
.glnum { display: inline-flex; align-items: center; gap: .55rem; color: var(--text-3); font-size: var(--fs-sm); white-space: nowrap; }
.stnew .glnum input { width: 5.5rem; font-variant-numeric: tabular-nums; }
.stnew .glfield input[type=date] { width: auto; min-width: 11rem; }
.glremove { color: var(--text-3); }
.glconfirm { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin: .6rem 0 0; color: var(--text-2);
  font-size: var(--fs-sm); }
.glconfirm .ghost.small { margin: 0; min-height: 40px; }
.gledit { padding: .6rem .45rem .8rem; }
.gledit .glform { margin: 0; }
/* the master game's card: Studied, a check that stays; beside it the goal it counts for */
.msstudy { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; margin-top: .55rem; }
.msstudy-b { display: inline-flex; align-items: center; gap: .45rem; min-height: 36px; padding: .25rem .95rem .25rem .6rem;
  background: transparent; border: 1px solid var(--line-2); border-radius: var(--r-pill); color: var(--text); font: inherit;
  font-size: var(--fs-sm); cursor: pointer; transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out; }
.msstudy-b:hover { border-color: var(--accent); background: var(--accent-wash); }
.msstudy-b[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-wash); color: var(--accent-2); font-weight: 600; }
.glbox { width: 18px; height: 18px; flex: none; }
.glbox rect { fill: none; stroke: var(--text-3); stroke-width: 1.5; transition: fill .15s ease-out, stroke .15s ease-out; }
.glbox path { fill: none; stroke: var(--accent-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.msstudy-b[aria-pressed="true"] .glbox rect { fill: var(--accent-2); stroke: var(--accent-2); }
.msstudy-b[aria-pressed="true"] .glbox path { opacity: 1; }
.msstudy-g { color: var(--text-3); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.msgame .msstudy-say { display: flex; align-items: flex-start; gap: .4rem; margin-top: .45rem; color: var(--text-2); font-size: var(--fs-sm);
  line-height: 1.45; }
.msgame .msstudy-say.t-cheer { color: var(--text); }
.msstudy-say .glic { color: var(--accent-2); margin: .1rem 0 0; }
@media (pointer: coarse) { .msstudy-b { min-height: 44px; } }
@media (max-width: 640px) {
  .glgoal { padding: .8rem .2rem .75rem; }
  .glbar { max-width: none; }
  .glfields { gap: .8rem; }
  .glfield { flex: 1 1 9rem; }
  .glfield:has(.glnum) { flex: 0 1 auto; }
  .stnew .glfield input[type=date] { width: 100%; min-width: 0; }
  .glacts .nut-act, .glacts .nut-go { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .glshow .nut-chev, .glstart, .gldone summary, .gldone .nut-chev, .msstudy-b, .glbox rect { transition: none; } }

/* ---- Your opening system (docs/DESIGN_OPENING_SYSTEM.md): one page per opening, sections in the design's order ---- */
#opening .oppage { max-width: 46rem; }
.oph { font-size: 1.45rem; font-weight: 600; line-height: 1.25; margin: .1rem 0 .45rem; text-wrap: balance; }
.oph:focus:not(:focus-visible) { outline: none; }
.ophow { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; margin: 0 0 .2rem; color: var(--text-2);
  font-size: var(--fs-sm); line-height: 1.45; font-variant-numeric: tabular-nums; }
.opbar { display: flex; flex: none; width: 10rem; height: 8px; border-radius: var(--r-pill); overflow: hidden; background: var(--surface-3); }
.opbar i { flex: 0 1 0; min-width: 0; }
.opbar .w { background: var(--accent-2); }
.opbar .d { background: var(--draw); }
.opbar .l { background: var(--line-2); }
.opsec { margin-top: 1.5rem; padding-top: 1.15rem; border-top: 1px solid var(--line); }
.oph3 { margin: 0 0 .55rem; font-size: var(--fs-lg); font-weight: 600; line-height: 1.3; color: var(--text); }
.opempty { margin: 0 0 .5rem; color: var(--text-3); line-height: 1.5; max-width: 60ch; }
.opsay { margin: .4rem 0 0; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.45; }
.opsay:empty { display: none; }
.opk { margin: .6rem 0 .1rem; color: var(--text-3); font-size: var(--fs-sm); font-weight: 600; }
.opacts { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: .5rem; }
.opacts .nut-act { margin-top: 0; }
.opacts .nut-act:disabled { opacity: .55; cursor: default; }
.glink.opmore { padding-left: .45rem; }
/* his rules: his words, one per line, Edit beside each; a new one below */
.oprules { list-style: none; margin: 0; padding: 0; }
.oprule { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: .55rem .2rem .55rem .45rem; }
.oprule + .oprule { border-top: 1px solid var(--line); }
.oprule-t { margin: .35rem 0 0; color: var(--text); font-size: var(--fs-md); line-height: 1.5; max-width: 62ch; overflow-wrap: anywhere;
  text-wrap: pretty; }
.ghost.small.opedit { flex: none; margin: -.1rem -.2rem 0 0; min-height: 40px; padding: 0 .65rem; background: transparent;
  border-color: transparent; color: var(--text-3); font-size: var(--fs-sm); }
.ghost.small.opedit:hover { color: var(--text); background: var(--surface-3); }
.oprule-ed { display: block; padding: .6rem .45rem .7rem; }
.opform .oplabel { display: block; margin: 0 0 .35rem; color: var(--text-2); font-size: var(--fs-sm); }
.opin { display: block; width: 100%; min-height: 44px; padding: .55rem .75rem; background: var(--bg); color: var(--text);
  border: 1px solid var(--line-2); border-radius: var(--r-sm); font: inherit; line-height: 1.45; transition: border-color .15s ease-out; }
textarea.opin { resize: vertical; min-height: 4.5rem; }
.opin::placeholder { color: var(--text-4); }
.opin:focus { border-color: var(--accent); }
.opform .mkbtns { margin-top: .6rem; }
.opform .mkbtns > .primary { margin: 0; }
.opadd { display: flex; align-items: stretch; gap: .5rem; margin-top: .6rem; max-width: 40rem; }
.opadd .opin { flex: 1 1 auto; min-width: 0; }
.opadd .ghost { flex: none; min-height: 44px; margin: 0; padding: 0 1.1rem; }
/* against each defence: the opponent's choice, his moves, the structure and its plan, two ways to practise */
.oplist { list-style: none; margin: 0; padding: 0; }
.opdef { padding: .75rem .45rem .85rem; }
.opdef + .opdef { border-top: 1px solid var(--line); }
.opdef-n { margin: 0; color: var(--text); font-weight: 600; line-height: 1.35; }
.opdef-l { margin: .2rem 0 0; color: var(--text-2); line-height: 1.55; overflow-wrap: anywhere; }
.opdef-l b { color: var(--text); font-weight: 600; }
.opwho { color: var(--text-3); }
.opdef-p { margin: .3rem 0 0; color: var(--text-3); font-size: var(--fs-sm); line-height: 1.5; max-width: 62ch; }
.opdef-s { color: var(--text-2); font-weight: 600; }
.opdef-pl { color: var(--text-2); }
/* key positions and where it goes wrong: a small board beside its words */
.opkeys, .opwrong { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: .35rem .9rem; }
.opkey, .opw { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: .85rem; align-items: start; width: 100%;
  padding: .55rem .45rem; background: transparent; border: 0; border-radius: var(--r-md); color: var(--text); font: inherit;
  text-align: left; }
.opkey { cursor: pointer; transition: background-color .15s ease-out; }
.opkey:hover { background: var(--surface-3); }
.opkey:active { background: var(--accent-wash); }
.opkey-b .gmini { display: block; width: 88px; height: 88px; border-radius: var(--r-sm); box-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.opkey-x { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.opkey-n { font-weight: 600; line-height: 1.35; }
.opkey-at { color: var(--text-3); font-size: var(--fs-sm); }
.opkey-p { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 4;
  -webkit-box-orient: vertical; overflow: hidden; }
.opkey-g { color: var(--text-4); font-size: var(--fs-xs); line-height: 1.45; }
.opw .opacts { margin-top: .35rem; }
/* his games: the result in words beside the opponent */
.opres { margin-left: .5rem; font-weight: 400; font-size: var(--fs-sm); color: var(--text-3); }
.opres.r-win { color: var(--accent-2); }
.plrow.opgame, .oprows .plrow.mnrow { grid-template-columns: minmax(0, 1fr) 16px; }
.opgoal { display: flex; flex-direction: column; gap: .1rem; margin: 0 0 .3rem; }
.opgoal-t { color: var(--text); font-weight: 600; line-height: 1.4; }
.opgoal-l { color: var(--text-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
/* the ways in: Train › Openings, the Games summary line, the Board's opening line */
.opnav { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin: 0 0 -.4rem; }
.opnav-b { display: inline-flex; align-items: center; gap: .1rem; min-height: 40px; padding: 0 .45rem 0 .8rem; background: transparent;
  border: 1px solid var(--line-2); border-radius: var(--r-pill); color: var(--text); font: inherit; font-size: var(--fs-sm);
  font-weight: 600; cursor: pointer; transition: background-color .15s ease-out, border-color .15s ease-out; }
.opnav-b:hover { border-color: var(--accent); background: var(--accent-wash); }
.opnav-b .rlchev, .opkey .rlchev { width: 14px; height: 14px; fill: none; stroke: var(--text-3); stroke-width: 1.8; }
.openingstrip .oplink { display: inline; padding: 0; margin: 0; background: none; border: 0; color: var(--accent-2); font: inherit;
  cursor: pointer; text-decoration: underline; text-decoration-color: rgba(156, 204, 107, .4); text-underline-offset: 3px; }
.openingstrip .oplink:hover { text-decoration-color: var(--accent-2); }
.glink.gop { margin-left: auto; }
@media (max-width: 640px) {
  .oph { font-size: 1.3rem; }
  .opsec { margin-top: 1.25rem; padding-top: 1rem; }
  .opkeys, .opwrong { grid-template-columns: 1fr; }
  .opkey, .opw { grid-template-columns: 76px minmax(0, 1fr); padding: .5rem .2rem; }
  .opkey-b .gmini { width: 76px; height: 76px; }
  .opdef { padding: .7rem .2rem .8rem; }
  .oprule { padding-left: .2rem; }
  .opacts .nut-act, .opnav-b { min-height: 44px; }
  .opnav { gap: .4rem; }
  .opnav-b { padding: 0 .35rem 0 .7rem; }
}
@media (prefers-reduced-motion: reduce) { .opkey, .opnav-b, .opin { transition: none; } }

/* ---- Prepare for an opponent (docs/DESIGN_OPPONENT_PREP.md): the card atop Train › Openings, Your preps, the prep page ---- */
.prepcard { flex: 1 1 100%; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.05rem 1.2rem 1.15rem; }
.prephead { margin: 0; font-size: 1.2rem; font-weight: 600; line-height: 1.3; text-wrap: balance; }
.preplead { margin: .3rem 0 .95rem; color: var(--text-3); font-size: var(--fs-sm); line-height: 1.5; max-width: 60ch; text-wrap: pretty; }
.prepform { display: grid; gap: .85rem; max-width: 40rem; }
.prepchoice { margin: 0; padding: 0; border: 0; min-width: 0; }
.preplabel { display: block; margin: 0 0 .35rem; padding: 0; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.35; }
.prepopt { margin-left: .3rem; color: var(--text-4); font-size: var(--fs-xs); }
/* one choice of a few: the app's selected wash, the radio itself kept for the keyboard and screen readers */
.prepseg { display: inline-flex; flex-wrap: wrap; gap: .4rem; }
.prepseg label { position: relative; display: inline-flex; }
.prepseg input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.prepseg span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .95rem; border: 1px solid var(--line-2);
  border-radius: var(--r-pill); color: var(--text-2); font-size: var(--fs-sm); white-space: nowrap;
  transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out; }
.prepseg label:hover span { border-color: var(--accent); color: var(--text); }
.prepseg input:checked + span { background: var(--accent-wash); border-color: var(--accent); color: var(--accent-2); font-weight: 600; }
.prepseg input:focus-visible + span { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.prepfield { min-width: 0; }
.prepfield .opin { max-width: 26rem; }
.preppgn.opin { max-width: none; min-height: 7rem; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.prepmore { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .85rem 1.6rem; }
.prepwhen .opin { width: 12.5rem; }
.prepsend { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.prepsend > .primary { margin: 0; min-height: 44px; padding: 0 1.6rem; }
.prepsend > .primary:disabled { opacity: .7; cursor: default; }
.prepsay { flex: 1 1 14rem; margin: 0; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.5; max-width: 60ch; }
.prepsay:empty { display: none; }
.prepsay .glink { padding: .3rem .2rem; min-height: 0; font-size: inherit; text-decoration: underline;
  text-decoration-color: rgba(156, 204, 107, .4); text-underline-offset: 3px; }
/* while their games are read (up to a minute): one slow light along the foot of the form, the one moving thing here */
.prepform.reading .prepsend::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.55rem; height: 2px;
  border-radius: var(--r-pill); background: linear-gradient(90deg, transparent 0%, var(--accent) 45%, var(--accent-2) 55%, transparent 100%)
  var(--surface-3); background-size: 40% 100%; background-repeat: no-repeat; animation: prepread 1.6s cubic-bezier(.16, 1, .3, 1) infinite; }
@keyframes prepread { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.preplist:not(:empty) { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.prepsub { margin: 0 0 .2rem; font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.preprows { margin-top: .25rem; }
.plrow.preprow { grid-template-columns: minmax(0, 1fr) 16px; min-height: 56px; }
/* the prep page: the opening page's sections; each line read as a score sheet, their words under their moves */
#prep .oppage { max-width: 46rem; }
.prepmeta { margin: 0; color: var(--text-3); font-size: var(--fs-sm); line-height: 1.5; font-variant-numeric: tabular-nums; }
.prepwhat { margin: 0 0 .35rem; color: var(--text); font-size: var(--fs-md); line-height: 1.6; max-width: 62ch; text-wrap: pretty; }
.prepwhat .mkmv, .prepwhy .mkmv { font-weight: 600; }
.prepside + .prepside { margin-top: 1.35rem; }
.prepsideh { margin: 0; font-size: var(--fs-md); font-weight: 600; color: var(--text-2); }
.prepsmall { margin: .1rem 0 0; color: var(--text-4); font-size: var(--fs-xs); line-height: 1.45; font-variant-numeric: tabular-nums; }
.preplines { list-style: none; margin: .35rem 0 0; padding: 0; }
.prepline { padding: .8rem .45rem .9rem; }
.prepline + .prepline { border-top: 1px solid var(--line); }
.prepmoves { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem 1.25rem; margin: .5rem 0 0;
  font-variant-numeric: tabular-nums; }
.pmp { display: inline-flex; align-items: flex-start; column-gap: .4rem; }   /* a full move never breaks across rows */
.pmv { display: inline-flex; flex-direction: column; color: var(--text-3); line-height: 1.35; white-space: nowrap; }
.pmv.t b { color: var(--text); font-weight: 600; }
.pw { margin-top: .05rem; color: var(--text-3); font-size: var(--fs-xs); line-height: 1.3; }
.pn { color: var(--text-4); }
.prepend { margin: .7rem 0 0; padding: .6rem .8rem .65rem; background: var(--surface-3); border-radius: var(--r-md); max-width: 62ch; }
.prepwhy { margin: 0; color: var(--text); line-height: 1.5; }
.prepans { margin: .15rem 0 0; color: var(--text-2); line-height: 1.5; }
.prepans .mkmv { color: var(--accent-2); font-weight: 600; }
.prepans .pn { display: block; margin-top: .05rem; font-size: var(--fs-xs); color: var(--text-3); }   /* its own small line; on the
   inset --text-4 would fall under 4.5:1 */
.prepplan { margin-top: .5rem; }
.prepline .opacts { margin-top: .65rem; }
.prepvs { color: var(--text-3); font-weight: 400; }
.prepkept { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-top: 1.5rem;
  padding-top: 1rem; border-top: 1px solid var(--line); }
.prepkept .prepsmall { margin: 0; font-size: var(--fs-sm); color: var(--text-3); }
.ghost.small.prepdel { margin: 0; min-height: 40px; padding: 0 .95rem; }
/* the Board: his opponent's name, a quiet link to Prepare for <name> */
.pbar .pnamebtn { display: inline-block; max-width: 100%; margin: -.45rem -.25rem; padding: .45rem .25rem; background: none; border: 0;
  color: inherit; font: inherit; font-weight: 600; text-align: left; cursor: pointer; text-decoration: underline dotted;
  text-decoration-color: var(--text-4); text-underline-offset: 4px; transition: text-decoration-color .15s ease-out, color .15s ease-out; }
.pbar .pnamebtn:hover { color: var(--accent-2); text-decoration-color: var(--accent-2); }
.prepsheetsay { margin: .6rem .2rem 0; }
/* wide screens: the form on the left, Your preps beside it, both in view at once */
@media (min-width: 1000px) {
  .prepcard { display: grid; grid-template-columns: minmax(0, 36rem) minmax(0, 1fr); grid-template-rows: auto auto 1fr;
    column-gap: 3.5rem; align-items: start; }
  .prepcard > .prephead, .prepcard > .preplead, .prepcard > .prepform { grid-column: 1; }
  .prepcard > .preplist { grid-column: 2; grid-row: 1 / span 3; }
  .preplist:not(:empty) { margin-top: 0; padding-top: 0; border-top: 0; }
  .prepsub { margin-top: .1rem; }
}
@media (max-width: 640px) {
  .prepcard { padding: .95rem .9rem 1rem; border-radius: var(--r-md); }
  .prephead { font-size: 1.12rem; }
  .prepseg span { min-height: 44px; }
  .prepfield .opin, .prepwhen .opin { max-width: none; width: 100%; }
  .prepwhen { flex: 1 1 100%; }
  .prepsend > .primary { flex: 1 1 100%; }
  .prepline { padding: .75rem .2rem .85rem; }
  .prepmoves { gap: .3rem .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .prepseg span, .pbar .pnamebtn { transition: none; }
  .prepform.reading .prepsend::after { animation: none; background: var(--accent-wash); }
}

/* ---- the what-if explorer (docs/DESIGN_WHAT_IF_EXPLORER.md, phase 1): the roads he watched and where he branched ---- */
/* a ring on a circle whose line he already watched: the accent, cased in dark so it reads on light and dark squares */
.arrowsvg .ring { fill: none; stroke: var(--accent-2); }
.arrowsvg .ring-case { fill: none; stroke: rgba(0, 0, 0, .55); }
.board-wrap.on-disc .board-b72b1 { cursor: pointer; }     /* a laptop: the pointer over a numbered circle says it plays */
/* ↶ 41.: back to where he branched, beside ↩ Back */
.ancoach .cbtn.fork { display: inline-flex; align-items: center; gap: .3rem; font-variant-numeric: tabular-nums; }
.ancoach .cbtn.fork svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; }
/* at a crossroads: "Here you tried" and one chip a road, its ending beside it */
.ancoach .c2.tries { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .4rem; white-space: normal; overflow: visible;
  text-overflow: clip; padding: .15rem 0 .1rem; }
.trylead { color: var(--text-3); font-size: var(--fs-sm); margin-right: .1rem; }
.trychip { display: inline-flex; align-items: baseline; gap: .4rem; min-height: 36px; padding: .3rem .8rem; background: transparent;
  color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r-pill); font: inherit; font-size: var(--fs-sm);
  font-weight: 600; cursor: pointer; transition: border-color .15s ease-out, background-color .15s ease-out; }
.trychip:hover { border-color: var(--accent); background: var(--accent-wash); }
.trychip.on { border-color: var(--accent); }             /* the road the board would play from here */
.tryev { color: var(--text-3); font-weight: 400; font-variant-numeric: tabular-nums; }
@media (pointer: coarse) { .trychip { min-height: 44px; } }
.ancoach .c3.chint { color: var(--text-3); white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.45; }
/* the beat after his move in a line: a thin ring draws once around Play, then the reply plays (none with reduced motion) */
@property --anbeat { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.anbar .anplay { position: relative; }
.anbar .anplay.beat::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(var(--accent-2) var(--anbeat), transparent 0);
  -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0); mask-composite: exclude;   /* a ring: the rim only */
  animation: anbeat 1.2s linear forwards; }
@keyframes anbeat { to { --anbeat: 360deg; } }
@media (prefers-reduced-motion: reduce) { .anbar .anplay.beat::after { display: none; } .trychip { transition: none; } }

/* ---- My blunders (the addendum of 30 Sep 2026 to docs/DESIGN_LEARN_FROM_MISTAKES.md): one calm room of his costliest
   moves under his own name for it. What truly repeats sits on top as quiet blocks (a name, one coaching line to read,
   two ways in); then each move as a small board beside words - the move, what it cost, the phase and the clock, the day.
   Tokens only; no alarm colour, no side borders, no numbers styled as scores; a missed chance's kind wears Punish it's
   gold as a word. ---- */
#blunders .bkpage { max-width: 46rem; }
.bklead { margin: 0; color: var(--text-3); font-size: var(--fs-sm); line-height: 1.5; max-width: 60ch; }
.bkpats { margin-top: 1.5rem; padding-top: 1.15rem; border-top: 1px solid var(--line); }
.bkpat { padding: .85rem .95rem .9rem; background: var(--bg); border-radius: var(--r-md); }
.bkpat + .bkpat { margin-top: .55rem; }
.bkpat-n { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: 0; font-size: var(--fs-md); font-weight: 600;
  line-height: 1.35; }
.bklately { display: inline-flex; align-items: center; min-height: 22px; padding: 0 .55rem; border-radius: var(--r-pill);
  background: var(--surface-3); color: var(--text-2); font-size: var(--fs-xs); font-weight: 500; line-height: 1.2; }
.bkpat-l { margin: .3rem 0 0; color: var(--text); line-height: 1.55; max-width: 60ch; text-wrap: pretty; }
.bkgood { margin: 0 0 1rem; color: var(--accent-2); line-height: 1.55; max-width: 60ch; text-wrap: pretty; }
.bkpat .opacts { margin-top: .6rem; }
.nut-act.bk-go { border-color: var(--accent); color: var(--accent-2); font-weight: 600; }
.nut-act.bk-go:hover { background: var(--accent-wash); }
.nut-act:disabled { opacity: .55; cursor: default; }
.bkgroups .stlist { margin-top: 0; }
.plrow.bkgrow { grid-template-columns: minmax(0, 1fr) 16px; min-height: 56px; }
.bksec { margin-top: 1.5rem; padding-top: 1.15rem; border-top: 1px solid var(--line); }
.bkbar { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0 0 .35rem; }
.bkbar .gchip { min-height: 40px; font-size: var(--fs-sm); }
.bkfilters { gap: .4rem; }
.bkfilters .bkfic { width: 16px; height: 16px; fill: currentColor; flex: none; }
.bksum { display: flex; flex-wrap: wrap; align-items: center; column-gap: .5rem; margin: .1rem 0 .2rem; color: var(--text-3);
  font-size: var(--fs-sm); line-height: 1.4; }
.bksum .glink { min-height: 40px; }
.bklist { list-style: none; margin: .25rem 0 0; padding: 0; transition: opacity .15s ease-out; }
.bklist li + li { border-top: 1px solid var(--line); }
.bklist.busy { opacity: .55; }
.bkrow { display: grid; grid-template-columns: 64px minmax(0, 1fr) 16px; column-gap: .9rem; align-items: center; width: 100%;
  padding: .6rem .45rem; background: transparent; border: 0; border-radius: var(--r-md); color: var(--text); font: inherit;
  text-align: left; cursor: pointer; transition: background-color .15s ease-out; }
.bkrow:hover { background: var(--surface-3); }
.bkrow:active { background: var(--accent-wash); }
.bkrow:disabled { opacity: .6; cursor: default; }
.bkrow-b .gmini { display: block; width: 64px; height: 64px; border-radius: var(--r-sm); box-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.bkrow-x { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.bkrow-t { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .6rem; line-height: 1.35; }
.bk-mv { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bk-cost { color: var(--text-2); }
.bkrow-w { color: var(--text-3); font-size: var(--fs-sm); line-height: 1.4; font-variant-numeric: tabular-nums; }
.bkrow-c { color: var(--chance); font-size: var(--fs-sm); line-height: 1.4; }
.bkrow-n { color: var(--text-4); font-size: var(--fs-xs); line-height: 1.4; }
.bkrow .rlchev { width: 14px; height: 14px; stroke: var(--text-4); stroke-width: 1.8; }
.bkrow:hover .rlchev { stroke: var(--text-2); }
.bkempty { margin: .6rem 0 0; color: var(--text-3); line-height: 1.55; max-width: 60ch; }
.bkempty .glink { padding-left: .2rem; }
.bknote { margin: .7rem 0 0; color: var(--text-4); font-size: var(--fs-xs); line-height: 1.45; }
#bkContent .gmore { margin-top: .6rem; }
/* a pattern's own page: its one idea large enough to read at a glance, then its examples */
.bkpage-lately { margin: 0 0 .5rem; }
.bkline { margin: .2rem 0 0; color: var(--text); font-size: var(--fs-lg); line-height: 1.5; max-width: 52ch; text-wrap: pretty; }
.bkslip { margin: .55rem 0 0; color: var(--text-3); font-size: var(--fs-sm); line-height: 1.5; max-width: 60ch; }
#bkContent > .opacts { margin-top: .8rem; }
/* the room's name, in the avatar's sheet */
.bkown { margin-top: .9rem; }
.bkown .oplabel { display: block; margin: 0 0 .35rem .2rem; color: var(--text-2); font-size: var(--fs-sm); }
.bkown .opadd { margin-top: 0; }
.bknamesay { margin: .5rem .2rem 0; }
.sheet[data-b] .sheet-title { margin-left: 0; }
@media (max-width: 640px) {
  .bkrow { grid-template-columns: 56px minmax(0, 1fr) 14px; column-gap: .75rem; padding: .55rem .2rem; }
  .bkrow-b .gmini { width: 56px; height: 56px; }
  .bkpat { padding: .8rem .8rem .85rem; }
  .bkline { font-size: var(--fs-md); }
}
@media (pointer: coarse) { .bkbar .gchip, .bksum .glink { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .bkrow, .bklist { transition: none; } }

/* ---- Declutter, the rest (docs/PLAN_DECLUTTER.md D2-D9) ---- */
/* Train › Openings: while he practises a line or the quiz, the Prepare card and the opening pages step aside */
#train.qzon > .prepcard, #train.qzon > .opnav { display: none; }
.qzopenings { flex: 1 1 100%; max-width: none; }   /* as wide as the Prepare card above it */
/* Train › Quiz: the moments from his games and My blunders; the first one shown carries no rule above it */
.qzmoments { max-width: 44rem; }
.qzmoments .bmrecent { margin-top: 0; padding-top: 0; border-top: 0; }
.qzmoments .bmrecent:not([hidden]) ~ .bmrecent:not([hidden]) { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
/* the verdict's drawn marks: Book and Best, in the strip and on the board */
.cgi { width: .95em; height: .95em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mvbadge .cgi { width: 62%; height: 62%; stroke-width: 2.4; }
/* Resign's drawn flag */
.sparctl .ic { width: 16px; height: 16px; flex: none; }
.flagic { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-right: .35rem; }
#sparResign { display: inline-flex; align-items: center; justify-content: center; }
#sparResign[hidden] { display: none; }
.sparctl .primary, #brControls .primary { margin-top: 0; }
/* the Notebook's patterns part: the same names and lines as My blunders, and the way into the room */
.nbh { margin: 0 0 .8rem; font-size: 1.15rem; font-weight: 600; line-height: 1.3; }
.nbpats { list-style: none; margin: 0; padding: 0; max-width: 44rem; }
.nbnone { margin: 0 0 .6rem; max-width: 60ch; }
#progressContent .bkgood { margin: 1rem 0 0; }
.nbroom { margin-top: 1rem; }
/* review fixes (the 30 Sep screenshot round): a hidden control row stays hidden; the map's open group turns its
   chevron as Your lines' does; an empty note leaves no gap on Quiz; Analyse this game sits under the end of the game */
.egcontrols[hidden] { display: none; }
.qgroup[open] > summary .rlchev { transform: rotate(90deg); }
.qzmoments .qnote:empty { min-height: 0; margin: 0; }
.sparan { display: block; width: 100%; margin: .2rem 0 .9rem; min-height: 48px; }
.sparan[hidden] { display: none; }

/* ---- A slip of the thumb (Njeru, 6 Oct 2026): on a phone the move bar keeps only what the thumb needs - Play, ⋯ and two
   wide steps, Forward at the edge where the thumb rests, Play far from it with the harmless ⋯ between. The start, the end
   and the speed live in ⋯, in words. After a jump, "Back to 23…Ng4" waits a few seconds right above the bar. ---- */
.anphone { display: none; }
.anundo { display: flex; justify-content: flex-end; }
.anundo[hidden] { display: none; }
.anundo-b { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .35rem .95rem .35rem .75rem;
  background: var(--surface-3); border: 1px solid var(--line-2); border-radius: var(--r-pill); color: var(--text); font: inherit;
  font-size: var(--fs-sm); cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .3);
  animation: anundo-in .2s cubic-bezier(.2, .8, .2, 1); transition: border-color .15s ease-out, background-color .15s ease-out; }
.anundo-b svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--accent-2); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; }
.anundo-b b { font-weight: 600; font-variant-numeric: tabular-nums; }
.anundo-b:hover { border-color: var(--accent); }
.anundo-b:active { background: var(--accent-wash); border-color: var(--accent-2); }
@keyframes anundo-in { from { opacity: 0; transform: translateY(6px); } }
@media (max-width: 640px) {
  .anbar { grid-template-columns: 60px 52px minmax(0, 1fr) minmax(0, 1fr); gap: .5rem;
           padding: .45rem .6rem calc(.45rem + env(safe-area-inset-bottom)); }
  .anbar #anFirst, .anbar #anLast, .anbar #anSpeed { display: none; }
  .anbar #anPlay { order: 1; }
  .anbar #anMore { order: 2; }
  .anbar #anBack { order: 3; }
  .anbar #anFwd { order: 4; }
  .anbar .ghost { min-height: 56px; }
  .anbar #anBack svg, .anbar #anFwd svg { width: 30px; height: 30px; }
  #anTools .anphone { display: inline-flex; align-items: center; }
  .anundo { position: fixed; right: .6rem; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 26; }   /* as wide as the chip */
  .anundo-b { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) { .anundo-b { animation: none; transition: none; } }