/* =====================================================================
   Chess Knight — "Park Day" design system
   Warm cream paper, meadow green, sky, sunshine, coral and berry.
   ===================================================================== */

@font-face {
  font-family: 'Fraunces';
  src: url('/static/vendor/fonts/fraunces-latin-full-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/static/vendor/fonts/fraunces-latin-full-italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/static/vendor/fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* "Garden Folio": ink lines on cream marble, sage leaves, terracotta tiles, mint sky */
  --ink: #2A251D;
  --ink-soft: #5A523F;
  --muted: #8A8169;
  --outline: #2A251D;
  --paper: #F6EDD7;
  --paper-2: #EDE0C1;
  --card: #FFFBF0;
  --card-2: #FBF2DE;
  --line: #E2D2B1;
  --line-strong: #CDB98F;

  --meadow: #5E7E4F;
  --meadow-deep: #3F5634;
  --meadow-soft: #DCE6CC;
  --sky: #8FBFA8;
  --sky-deep: #4F8A72;
  --sky-soft: #DCEDE2;
  --sun: #D9A443;
  --sun-deep: #A87A22;
  --sun-soft: #F5E3B6;
  --coral: #B5705C;
  --coral-deep: #8C4E3D;
  --coral-soft: #F1DACD;
  --berry: #8A6A8E;
  --berry-deep: #654A69;
  --berry-soft: #EADFE8;

  /* move classifications */
  --c-brilliant: #2E9C8A;
  --c-great: #4C6FB3;
  --c-best: #5E7E4F;
  --c-inaccuracy: #4E8FA8;
  --c-mistake: #D08A2C;
  --c-blunder: #C2483A;

  /* the board: the terracotta-and-cream plaza */
  --sq-light: #F3E6C8;
  --sq-dark: #BB8B75;

  --accent: var(--meadow);
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 3px 3px 0 var(--outline);
  --shadow-lift: 5px 6px 0 var(--outline);
  --soft-shadow: 0 18px 40px -22px rgba(42, 37, 29, .45);
  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* "Night garden": an optional evening theme (toggle in the top bar). */
:root[data-theme="night"] {
  --ink: #F4EAD2;
  --ink-soft: #DCCFAF;
  --muted: #A9A088;
  --outline: #0E120D;
  --paper: #1B221B;
  --paper-2: #232C22;
  --card: #273126;
  --card-2: #2D392C;
  --line: #3A4836;
  --line-strong: #4C5D47;
  --meadow-soft: #2E4229;
  --sky-soft: #22403A;
  --sun-soft: #4A3C1C;
  --coral-soft: #4A2C24;
  --berry-soft: #3A2D3D;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: 15.5px/1.55 var(--sans);
  color: var(--ink);
  background: var(--paper);
  min-height: 100vh;
  display: flow-root; /* stops the top bar's margin leaking out and making the page 12px too tall */
  -webkit-font-smoothing: antialiased;
}
/* soft sunny blobs behind everything */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .14 0 0 0 0 .11 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(40vw 40vw at 92% -8%, color-mix(in srgb, var(--sun-soft) 80%, transparent), transparent 70%),
    radial-gradient(38vw 38vw at -6% 18%, color-mix(in srgb, var(--meadow-soft) 80%, transparent), transparent 70%),
    radial-gradient(44vw 44vw at 70% 110%, color-mix(in srgb, var(--sky-soft) 85%, transparent), transparent 70%),
    var(--paper);
}

a { color: var(--meadow-deep); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
:root[data-theme="night"] a { color: #8EE0AE; }
a:hover { color: var(--meadow); }
h1, h2, h3 {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 100, 'WONK' 0;
  color: var(--ink);
  font-weight: 650;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
  line-height: 1.15;
}
h1 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
::selection { background: var(--sun); color: #1F2A44; }

/* -------------------------------------------------------------- controls */
button, select, input, textarea {
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--outline);
  border-radius: 999px;
  padding: .5em 1.05em;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
input[type=text], input[type=number], textarea { border-radius: var(--radius-sm); }
textarea { width: 100%; min-height: 8em; font-family: ui-monospace, monospace; font-size: .85rem; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--sky) 55%, transparent);
  outline-offset: 2px;
}
button { cursor: pointer; font-weight: 700; box-shadow: 2px 2px 0 var(--outline); }
button:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--outline); }
button:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--outline); }
button:disabled { opacity: .5; cursor: default; }
button.primary { background: var(--meadow); color: #FFFBF0; }
button.primary:hover:not(:disabled) { background: #6A8C5A; }
button.sunny { background: var(--sun); color: #2A251D; }
button.small { padding: .25em .75em; font-size: .85rem; box-shadow: 1.5px 1.5px 0 var(--outline); }
button.big { padding: .8em 1.6em; font-size: 1.05rem; }

.muted { color: var(--muted); }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.err { color: var(--c-blunder); }
.eyebrow {
  text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 700;
  color: var(--meadow-deep); margin-bottom: .35rem;
}
:root[data-theme="night"] .eyebrow { color: #8EE0AE; }

/* ----------------------------------------------------------------- brand */
.brand {
  display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink);
  font-family: var(--display); font-weight: 700; font-size: 1.15rem; white-space: nowrap;
}
.brand:hover { color: var(--ink); }
.brand .logo { height: 40px; width: auto; margin: -3px 0; flex: none; } /* the knight, no tile */
.logo-night { display: none !important; }
:root[data-theme="night"] .brand .logo:not(.logo-night), :root[data-theme="night"] .side-brand .logo:not(.logo-night) { display: none; }
:root[data-theme="night"] .logo-night { display: block !important; }

/* ------------------------------------------------------------- side menu */
/* The app's menu is a rail on the left with icons. It collapses to icons only
   (the choice is remembered); on phones it becomes a tab bar along the bottom. */
:root { --side-w: 244px; }
:root.side-collapsed { --side-w: 76px; }
body:has(> .sidenav) { padding-left: var(--side-w); transition: padding-left .25s ease; }
.sidenav {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 30; width: var(--side-w); overflow: hidden;
  display: flex; flex-direction: column; gap: .35rem; padding: 1rem 12px;
  background: var(--card); border-right: 2.5px solid var(--outline);
  transition: width .25s ease;
}
/* the brand with the collapse button beside it; collapsed, the button sits under the knight */
.side-head { display: flex; align-items: center; justify-content: space-between; gap: .3rem; padding-bottom: 1.1rem; }
:root.side-collapsed .side-head { flex-direction: column; gap: .6rem; }
.side-toggle {
  flex: none; width: 38px; height: 38px; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: 10px; background: transparent; box-shadow: none; color: var(--ink-soft);
}
.side-toggle:hover:not(:disabled) { background: var(--paper-2); color: var(--ink); transform: none; box-shadow: none; }
.side-brand {
  display: flex; align-items: center; gap: .65rem; min-width: 0; padding: .2rem 0 .2rem 11px; text-decoration: none; color: var(--ink);
  font-family: var(--display); font-weight: 700; font-size: 1.15rem; white-space: nowrap;
}
.side-brand:hover { color: var(--ink); }
:root[data-theme="night"] .side-brand, :root[data-theme="night"] .side-brand:hover { color: var(--ink); }
.side-brand .logo { height: 42px; width: auto; flex: none; }
.side-links, .side-foot { display: flex; flex-direction: column; gap: .2rem; }
.side-foot { margin-top: auto; }
.sidenav a[data-nav], .side-item {
  display: flex; align-items: center; gap: .9rem; width: 100%; padding: .62rem 15px; border: 0; border-radius: 12px;
  background: transparent; box-shadow: none; color: var(--ink-soft); font: 600 .95rem var(--sans); text-align: left;
  text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s;
}
.sidenav a[data-nav]:hover, .side-item:hover:not(:disabled) { background: var(--paper-2); color: var(--ink); transform: none; box-shadow: none; }
.sidenav a[data-nav].active { background: color-mix(in srgb, var(--meadow) 18%, transparent); color: var(--ink); font-weight: 700; }
.sidenav a[data-nav].active svg { color: var(--meadow-deep); stroke-width: 2.2; }
:root[data-theme="night"] .sidenav a[data-nav].active { background: color-mix(in srgb, var(--meadow) 30%, transparent); }
:root[data-theme="night"] .sidenav a[data-nav].active svg { color: #8EE0AE; }
.sidenav svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sidenav .label { transition: opacity .2s ease; }
:root.side-collapsed .sidenav .label { opacity: 0; pointer-events: none; }
:root.side-collapsed .side-brand { padding-left: 0; }
:root.side-collapsed .side-brand .label { display: none; }
#jobs { font-size: .78rem; color: var(--muted); padding: 0 15px .35rem; line-height: 1.3; }
.sidenav .side-more, .sidenav .side-foot .side-sheet-only { display: none; }
#jobs:empty, :root.side-collapsed #jobs { display: none; }

main { padding: 1.2rem 20px 3rem; max-width: 1440px; margin: 0 auto; }

/* ----------------------------------------------------------------- cards */
.panel {
  background: var(--card);
  border: 2px solid var(--outline);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow);
}
.panel + .panel { margin-top: 1rem; }
.grid { display: grid; gap: 1rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; }
.stat {
  background: var(--card); border: 2px solid var(--outline); border-radius: var(--radius);
  padding: 1rem 1.15rem; box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.stat::after {
  content: ''; position: absolute; right: -24px; top: -24px; width: 80px; height: 80px; border-radius: 50%;
  background: var(--sun-soft); opacity: .9;
}
.stat:nth-child(2)::after { background: var(--sky-soft); }
.stat:nth-child(3)::after { background: var(--meadow-soft); }
.stat:nth-child(4)::after { background: var(--coral-soft); }
.stat:nth-child(5)::after { background: var(--berry-soft); }
.stat .num { font-family: var(--display); font-size: 1.9rem; font-weight: 700; position: relative; z-index: 1; }
.stat .lbl { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; position: relative; z-index: 1; }

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .55em .65em; border-bottom: 1.5px solid var(--line); }
th { color: var(--muted); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
tr.click { cursor: pointer; }
tr.click:hover td { background: var(--paper); }
.num-cell { text-align: right; font-variant-numeric: tabular-nums; }
.games-table .g-open { width: 30%; max-width: 0 !important; }  /* truncates instead of widening the table */

/* ------------------------------------------------------- board + layout */
/* Board screens are a fixed workspace that fits the window. The coach and the moves
   sit on top of the board, one bar of buttons under it, and the details scroll in
   their own card: beside the board on wide screens, under it on narrow ones. The
   coach's bubble, the strip and the bar have fixed heights, so the board never moves. */
.study {
  --chrome: 36px;            /* page padding above and below */
  --head: 142px;             /* the coach (three lines of words) and the moves strip */
  --bar: 46px;               /* the buttons under the board */
  --gap: .6rem;
  display: grid;
  grid-template-columns: auto minmax(340px, 1fr);
  gap: 1.4rem;
  align-items: stretch;
  height: calc(100dvh - var(--chrome));
}
main:has(.study) { padding-bottom: 0; }
.board-col { display: flex; flex-direction: column; gap: var(--gap); min-height: 0; }
/* the coach and the bar take the board's width, never their own */
.board-col > :not(.board-wrap) { width: 0; min-width: 100%; }
.board-wrap { display: flex; gap: 10px; }
.board-box {
  width: min(calc(100dvh - var(--chrome) - var(--head) - var(--bar) - 2 * var(--gap)), calc((100vw - var(--side-w, 0px)) * .58), calc(100vw - var(--side-w, 0px) - 410px), 860px);
  aspect-ratio: 1; position: relative; flex: none;
  border-radius: 12px; border: 3px solid var(--outline);
}
.board-box .cg-wrap { width: 100%; height: 100%; border-radius: 9px; overflow: hidden; }
.evalbar {
  width: 16px; border-radius: 999px; overflow: hidden; position: relative;
  background: #3B3A2E; border: 2px solid var(--outline);
}
.evalbar .white { position: absolute; bottom: 0; left: 0; right: 0; background: #FBF3E1; transition: height .35s ease; }
.evalbar.flipped .white { bottom: auto; top: 0; }
/* a label for what the board shows when it isn't the game (a line, a point, the calculator) */
.board-note {
  position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 15;
  background: rgba(31, 42, 68, .82); color: #fff; padding: .25em .9em; border-radius: 999px; font-size: .84rem;
  pointer-events: none; white-space: nowrap; font-weight: 600; backdrop-filter: blur(6px);
}
/* the one thing to do next ("Next position →"), over the bottom of the board */
.board-pop {
  position: absolute; left: 50%; bottom: 3.5%; transform: translateX(-50%); z-index: 16;
  display: flex; gap: .5rem; pointer-events: none; animation: pop-in .28s ease-out;
}
.board-pop[hidden] { display: none; }
.board-pop > button { pointer-events: auto; white-space: nowrap; font-size: 1.02rem; padding: .62em 1.3em; box-shadow: var(--shadow); }
@keyframes pop-in { from { opacity: 0; translate: 0 10px; } }
/* one thing at a time: while the coach talks or plays out a line, the next step waits (util.js guiding) */
body.guiding .board-pop { visibility: hidden; }
/* the end of a game: a small card in the middle of the board, over the heap of pieces */
.board-pop.end { top: 50%; bottom: auto; transform: translate(-50%, -50%); }
.end-card {
  pointer-events: auto; display: flex; flex-direction: column; align-items: stretch; gap: .6rem;
  width: 14.5rem; padding: 1.15rem 1.1rem 1.1rem; text-align: center;
  background: var(--card); border: 2.5px solid var(--outline); border-radius: var(--radius); box-shadow: var(--shadow-lift);
}
.end-card > b { font-family: var(--display); font-size: 1.3rem; line-height: 1.2; margin-bottom: .2rem; }
.end-card > button { width: 100%; white-space: nowrap; padding: .6em .8em; }
/* pressing on the board lets you see the squares under it */
.board-box:active .board-pop:not(:active) { opacity: .12; transition: opacity .15s; }
/* the end of a game: a heap of pieces over the board (firehose.js), under its label and pop-up */
.board-box .fx-heap { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 12; will-change: transform; }
.board-box .fx-heap.fade { transition: opacity .4s ease; }

/* the coach, with the moves under it: one card on top of the board */
.board-head {
  position: relative; z-index: 20;   /* the coach's settings menu opens over the board */
  height: var(--head); display: flex; flex-direction: column;
  background: var(--card); border: 2.5px solid var(--outline); border-radius: 16px; box-shadow: var(--shadow);
}
.board-head > .tutor {
  flex: 1 1 auto; min-height: 0; margin: 0; padding: .4rem 2.8rem .4rem .6rem; gap: .6rem;
  border: 0; border-radius: 13.5px 13.5px 0 0; box-shadow: none; background: var(--card-2);
}
.board-head .tutor-face, .board-head .tutor.compact .tutor-face { width: 48px; align-self: center; }
@media (max-width: 760px) { .board-head .tutor-face, .board-head .tutor.compact .tutor-face { width: 40px; } }
.board-head .tutor-bubble { height: auto; align-self: stretch; font-size: .88rem; line-height: 1.38; }
.board-head > .strip { border-top: 2px solid var(--line); }

/* the moves strip: one row that scrolls sideways, the current move in the middle */
.strip { flex: none; height: 42px; display: flex; align-items: center; gap: .3rem; padding: 0 .3rem 0 .45rem; min-width: 0; }
.strip-moves {
  position: relative; flex: 1 1 auto; min-width: 0; height: 100%; display: flex; align-items: center; gap: 1px;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; font-size: .93rem;
}
.strip-moves::-webkit-scrollbar { display: none; }
.strip .n { flex: none; color: var(--muted); padding: 0 .1em 0 .45em; font-variant-numeric: tabular-nums; }
.strip .mv {
  flex: none; display: inline-flex; align-items: center; gap: .1em; padding: .28em .5em; white-space: nowrap;
  border: 0; border-radius: 8px; background: none; box-shadow: none; font-weight: 600; color: var(--ink);
}
.strip .mv:hover:not(:disabled) { background: var(--paper-2); transform: none; box-shadow: none; }
.strip .mv.cur { background: var(--ink); color: var(--paper); }
.strip .mv.cur .g { color: var(--sun); }
.strip .mv.theirs { font-weight: 500; color: var(--ink-soft); cursor: default; }
.strip .g { font-weight: 800; }
.strip-title { flex: none; font-weight: 700; padding: 0 .4rem 0 .2rem; white-space: nowrap; }
.strip-end { flex: none; display: flex; align-items: center; gap: .25rem; }
.strip-eval { color: var(--muted); font-size: .85rem; font-weight: 600; padding: 0 .3rem; font-variant-numeric: tabular-nums; }
.strip-end .step { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 10px; box-shadow: none; border-width: 1.5px; }
.strip-next { padding: .3em .85em; font-size: .86rem; white-space: nowrap; box-shadow: 1.5px 1.5px 0 var(--outline); }
/* today's positions as dots, with how much of the lesson you've learned */
.strip-dots { gap: .32rem; padding-left: .2rem; }
.strip .dot { flex: none; width: .8rem; height: .8rem; border-radius: 50%; background: var(--paper-2); border: 1.5px solid var(--line-strong); }
.strip .dot.cur { background: var(--sky); border-color: var(--sky-deep); box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--sky) 40%, transparent); }
.strip .dot.ok { background: var(--meadow); border-color: var(--meadow-deep); }
.strip .dot.no { background: var(--coral); border-color: var(--coral-deep); }
.strip-end.lesson-meter { flex: none; display: grid; gap: .25rem; min-width: 0; padding-right: .45rem; text-align: right; }
.strip-end.lesson-meter .lm-label { font-size: .8rem; white-space: nowrap; }
.strip-end.lesson-meter .lm-bar { height: 5px; }

/* the bar under the board: a few buttons for this step, and "⋯" */
.board-bar { position: relative; z-index: 20; flex: none; height: var(--bar); display: flex; align-items: center; gap: .4rem; }
.board-bar > button { display: inline-flex; align-items: center; justify-content: center; gap: .35em; white-space: nowrap; padding: .45em 1em; }
.board-bar > .step { width: 44px; padding: 0; height: 40px; }
.board-bar > .play { padding: .45em .95em; }
.board-bar > .play.on { background: var(--ink); color: var(--paper); }
.board-bar > .more { margin-left: auto; }
.ico { display: inline-flex; }
.ico svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.board-bar .ico svg { stroke-width: 2.5; }   /* as heavy as the bold labels beside them */

/* "⋯": the things you need now and then, in a menu over the page */
.more { position: relative; flex: none; }
.more-btn { width: 44px; height: 40px; padding: 0; display: grid; place-items: center; }
.more-menu {
  position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 40; min-width: 230px; padding: .4rem;
  display: flex; flex-direction: column; gap: .1rem;
  background: var(--card); border: 2.5px solid var(--outline); border-radius: 14px; box-shadow: var(--shadow-lift);
  animation: sheet-in .16s ease-out;
}
.more-menu[hidden] { display: none; }
.more-item {
  display: block; width: 100%; text-align: left; padding: .55rem .75rem; border: 0; border-radius: 9px; background: transparent;
  box-shadow: none; color: var(--ink); font: 600 .93rem var(--sans); text-decoration: none; white-space: nowrap;
}
.more-item:hover:not(:disabled), a.more-item:hover { background: var(--paper); color: var(--ink); transform: none; box-shadow: none; }
:root[data-theme="night"] a.more-item { color: var(--ink); }

/* the details: one card, panels separated by dividers, scrolling on its own */
.side-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.study > .side-col {
  gap: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  background: var(--card); border: 2.5px solid var(--outline); border-radius: 18px;
  box-shadow: var(--shadow-lift); margin: 0 8px 8px 0;
}
.study > .side-col > * { flex: none; }
.study > .side-col .panel { border: 0; border-radius: 0; box-shadow: none; border-bottom: 1.5px solid var(--line); }
.study > .side-col .panel + .panel { margin-top: 0; }
.study > .side-col .panel:last-child { border-bottom: 0; }
.study > .side-col .coach .verdict { background: transparent; }
.study > .side-col > .row, .study > .side-col > .result-banner, .study > .side-col > .grid { margin: .7rem 1rem; }
.study > .side-col > .graph-box { margin: .8rem 1rem 1rem; }

/* "Park" board: cream and sage instead of brown. */
cg-board {
  background-color: var(--sq-light) !important;
  background-image: repeating-conic-gradient(var(--sq-dark) 0 25%, var(--sq-light) 0 50%) !important;
  background-size: 25% 25% !important;
}
/* Coordinates inside the board (numbers top-left of the edge squares, letters
   bottom-right), one ink colour that reads on both square colours, sized to the board. */
.cg-wrap { container-type: size; }
.cg-wrap coords { opacity: 1; font-family: var(--sans); font-size: clamp(9px, 2.3cqw, 20px); font-weight: 800; color: #2A251D; }
.cg-wrap coords.ranks { left: 0; top: 0; width: auto; height: 100%; }
.cg-wrap coords.ranks coord { transform: none; padding: .3em 0 0 .35em; }
.cg-wrap coords.files { left: 0; bottom: 0; width: 100%; height: auto; }
.cg-wrap coords.files coord { text-align: right; padding: 0 .4em .2em 0; }
.cg-wrap coords coord, .cg-wrap coords coord:nth-child(n) { color: #2A251D !important; opacity: .72; }
cg-board square.last-move { background-color: rgba(217, 164, 67, .55) !important; }
cg-board square.selected { background-color: rgba(94, 126, 79, .6) !important; }
cg-board square.move-dest { background: radial-gradient(rgba(31, 42, 68, .28) 19%, transparent 21%) !important; }
cg-board square.move-dest:hover { background: rgba(63, 166, 107, .3) !important; }
cg-board square.check { background: radial-gradient(ellipse at center, rgba(239, 78, 61, .95) 0%, rgba(239, 78, 61, .6) 30%, rgba(239, 78, 61, 0) 75%) !important; }

/* the piece an arrow starts from: a soft tint, not a ring */
cg-board square.tint-green { background-color: rgba(21, 120, 27, .32); }
cg-board square.tint-red { background-color: rgba(198, 47, 47, .30); }
cg-board square.tint-blue { background-color: rgba(31, 111, 209, .30); }
cg-board square.tint-yellow { background-color: rgba(230, 161, 0, .34); }
cg-board square.tint-purple { background-color: rgba(123, 79, 224, .28); }
cg-board square.tint-grey { background-color: rgba(119, 119, 119, .28); }
/* right-click on a single square marks it */
cg-board square.mark-green { background-color: rgba(21, 120, 27, .55); }
cg-board square.mark-red { background-color: rgba(198, 47, 47, .55); }
cg-board square.mark-blue { background-color: rgba(31, 111, 209, .55); }
cg-board square.mark-yellow { background-color: rgba(230, 161, 0, .58); }
cg-board square.mark-purple { background-color: rgba(123, 79, 224, .5); }
cg-board square.mark-grey { background-color: rgba(119, 119, 119, .5); }
/* pieces you can capture: corner markers instead of a ring */
cg-board square.oc.move-dest {
  --cap: rgba(31, 42, 68, .45);
  background:
    linear-gradient(to bottom right, var(--cap) 0 17%, transparent 17%),
    linear-gradient(to bottom left, var(--cap) 0 17%, transparent 17%),
    linear-gradient(to top right, var(--cap) 0 17%, transparent 17%),
    linear-gradient(to top left, var(--cap) 0 17%, transparent 17%) !important;
}
cg-board square.oc.move-dest:hover { background: rgba(63, 166, 107, .3) !important; }
/* coach highlights */
cg-board square.hl-danger { background: radial-gradient(rgba(239, 78, 61, .7) 30%, rgba(239, 78, 61, .25) 75%); }
cg-board square.hl-target { background: radial-gradient(rgba(245, 158, 11, .6) 30%, rgba(245, 158, 11, .2) 75%); }
cg-board square.hl-pin { background: rgba(142, 92, 247, .42); }
cg-board square.hl-good { background: rgba(63, 166, 107, .45); }

/* ------------------------------------------------------------ coach card */
.coach { padding: 0; overflow: hidden; }
.coach .verdict {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .9rem 1.2rem; border-bottom: 1.5px solid var(--line); background: var(--card-2);
}
.coach .verdict .move { font-family: var(--display); font-weight: 700; font-size: 1.2rem; }
.coach .verdict .title {
  font-weight: 800; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em;
  padding: .25em .75em; border-radius: 999px; background: var(--paper-2);
}
.coach .verdict .wp { margin-left: auto; color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; font-weight: 600; }
.coach ul.points { list-style: none; margin: 0; padding: .45rem 0; }
.coach li.point {
  padding: .65rem 1.2rem .65rem 2.7rem; position: relative; cursor: pointer;
  border-radius: 10px; margin: 0 .4rem; transition: background .15s;
}
.coach li.point::before {
  content: '•'; position: absolute; left: .85rem; top: .66rem; width: 1.3rem; height: 1.3rem; border-radius: 50%;
  display: grid; place-items: center; font-size: .7rem; font-weight: 800; color: #fff; background: var(--muted);
}
.coach li.point:hover { background: var(--paper); }
.coach li.point.active { background: color-mix(in srgb, var(--sky-soft) 70%, transparent); }
.coach li.point.kind-why::before { content: '✕'; background: var(--c-blunder); }
.coach li.point.kind-threat::before { content: '!'; background: var(--c-mistake); }
.coach li.point.kind-better::before { content: '✓'; background: var(--c-best); }
.coach li.point.kind-praise::before { content: '★'; background: var(--c-best); }
.coach li.point.kind-context::before { content: 'i'; background: var(--c-inaccuracy); }
.coach li.point .where { font-size: .76rem; color: var(--muted); margin-left: .4em; }
.coach .actions { display: flex; gap: .5rem; flex-wrap: wrap; padding: .6rem 1.2rem 1rem; }
.coach .empty { padding: 1.1rem 1.2rem; }
.cls-brilliant { color: var(--c-brilliant); }
.cls-great { color: var(--c-great); }
.cls-best, .cls-good { color: var(--c-best); }
.cls-ok, .cls-forced, .cls-book { color: var(--muted); }
.cls-inaccuracy { color: var(--c-inaccuracy); }
.cls-mistake { color: var(--c-mistake); }
.cls-blunder { color: var(--c-blunder); }

details.scan { border-top: 1.5px solid var(--line); }
details.scan summary { padding: .7rem 1.2rem; cursor: pointer; color: var(--ink-soft); font-size: .9rem; font-weight: 600; }
details.scan .body { padding: 0 1.2rem .9rem; font-size: .9rem; }
details.scan .body div { margin: .3rem 0; }
.chip {
  display: inline-block; padding: .05em .6em; margin: .12em .15em; border-radius: 999px;
  background: var(--paper); border: 1.5px solid var(--line-strong); font-size: .84rem; cursor: pointer;
  font-weight: 600; text-decoration: none; color: var(--ink);
}
.chip:hover { border-color: var(--ink-soft); }
.chip.win { border-color: var(--c-best); background: var(--meadow-soft); }
.chip.lose { border-color: var(--c-blunder); background: var(--coral-soft); }

.graph { width: 100%; height: 90px; display: block; cursor: pointer; border-radius: 12px; background: #3B3A2E; border: 2px solid var(--outline); }
.graph .area { fill: #FBF3E1; opacity: .95; }
.graph .mid { stroke: #F08A24; stroke-width: 2; stroke-dasharray: 6 5; }
.graph .edge { fill: none; stroke: #D9A443; stroke-width: 1.5; }
.graph .cursor { stroke: var(--sun); stroke-width: 3; }

.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1.2rem; font-size: .93rem; }
.summary-grid .k { color: var(--muted); font-weight: 600; }
.critical a { display: block; margin: .2rem 0; }

/* ------------------------------------------------------------------ misc */
.import-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; }
.progress { height: 8px; background: var(--paper-2); border-radius: 999px; overflow: hidden; min-width: 80px; }
.progress div { height: 100%; background: linear-gradient(90deg, var(--meadow), var(--sky)); transition: width .3s; border-radius: 999px; }
.badge { display: inline-block; padding: .1em .65em; border-radius: 999px; font-size: .76rem; font-weight: 700; border: 1.5px solid var(--line-strong); }
.badge.win { color: var(--meadow-deep); border-color: var(--meadow); background: var(--meadow-soft); }
.badge.loss { color: var(--coral-deep); border-color: var(--coral); background: var(--coral-soft); }
.badge.draw { color: var(--ink-soft); background: var(--paper-2); }
.side-dot {
  display: inline-block; width: .75em; height: .75em; border-radius: 50%; margin-right: .5em;
  border: 1.5px solid var(--ink-soft); vertical-align: baseline;
}
.side-dot.white { background: #FFF8EC; }
.side-dot.black { background: #2E3A5C; }

.priority .examples { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }
.bar { height: 10px; background: var(--paper-2); border-radius: 999px; overflow: hidden; }
.bar div { height: 100%; background: linear-gradient(90deg, var(--meadow), var(--sun)); border-radius: 999px; }
.toast {
  position: fixed; bottom: 1.4rem; left: 50%; transform: translateX(-50%); z-index: 50;
  background: var(--ink); color: var(--paper); font-weight: 600;
  padding: .7em 1.3em; border-radius: 999px; box-shadow: var(--shadow-lift);
}
.promo {
  position: fixed; inset: 0; background: rgba(31, 42, 68, .45); z-index: 40;
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px);
}
.promo[hidden] { display: none; }
.promo .choices { display: flex; gap: .5rem; background: var(--card); padding: 1rem; border-radius: var(--radius); box-shadow: var(--shadow-lift); }
.promo button { width: 76px; height: 76px; font-size: 46px; line-height: 1; padding: 0; border-radius: 16px; }
.result-banner { padding: .85rem 1.1rem; border-radius: var(--radius-sm); font-weight: 700; }
.result-banner.no { background: var(--coral-soft); color: var(--coral-deep); }
:root[data-theme="night"] .result-banner.no { color: #FFB3A8; }

/* ------------------------------------------------------------ calculator */
.calc-table { margin-top: .5rem; }
.calc-table td { padding: .4em .5em; }
.calc-dot { display: inline-block; width: .65em; height: .65em; border-radius: 50%; margin-right: .5em; }
.calc-dot.mine { background: #15781B; }
.calc-dot.theirs { background: #c62f2f; }
td.pos, .calc-net.pos { color: var(--meadow-deep); }
td.neg, .calc-net.neg { color: var(--coral-deep); }
:root[data-theme="night"] td.pos, :root[data-theme="night"] .calc-net.pos { color: #8EE0AE; }
:root[data-theme="night"] td.neg, :root[data-theme="night"] .calc-net.neg { color: #FFB3A8; }
.calc-net { font-family: var(--display); font-size: 1.3rem; font-weight: 700; margin-top: .8rem; }
.calc-engine { margin-top: .9rem; padding: .7rem .9rem; background: var(--sky-soft); border-radius: var(--radius-sm); font-size: .92rem; }

/* -------------------------------------------------------------- coaching */
.focus { padding: 1.3rem 1.5rem; }
.checklist { padding: .3rem 0; }
.check-row { display: flex; align-items: center; gap: .9rem; padding: .8rem 1.2rem; border-bottom: 1.5px solid var(--line); }
.check-row:last-child { border-bottom: 0; }
.check-row .grow { flex: 1; min-width: 0; }
.tick {
  width: 2em; height: 2em; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper-2); color: var(--ink-soft); font-weight: 800; flex: none;
}
.trend { font-size: .76rem; padding: .1em .65em; border-radius: 999px; font-weight: 700; white-space: nowrap; }
.trend-good { color: var(--meadow-deep); background: var(--meadow-soft); }
.trend-bad { color: var(--coral-deep); background: var(--coral-soft); }
.trend-flat { color: var(--ink-soft); background: var(--paper-2); }
.lesson h1 { margin-bottom: .4rem; }
.lesson ul { padding-left: 1.2rem; }
.lesson li { margin: .35rem 0; }
.question {
  margin: 1rem 0; padding: .9rem 1.1rem; border-radius: var(--radius-sm);
  background: var(--sun-soft); border: 1.5px dashed var(--sun-deep);
}
.question div { font-family: var(--display); font-size: 1.15rem; font-weight: 650; margin-top: .2rem; }
.question.small { font-size: .98rem; margin: .7rem 0; font-weight: 600; }
/* a lesson's progress: positions learned out of all of them */
.lesson-meter { display: grid; gap: .35rem; flex: 1 1 14rem; min-width: 0; }
.lesson-meter .lm-label { font-size: .85rem; color: var(--ink-soft); }
.lesson-meter .lm-bar { height: 8px; border-radius: 999px; background: var(--paper-2); overflow: hidden; }
.lesson-meter .lm-bar i { display: block; height: 100%; border-radius: 999px; background: var(--meadow); transition: width .4s ease; }
.lesson-meter.big { margin: 1rem 0 .4rem; }
.lesson-meter.big .lm-label { font-size: .95rem; }
.lesson-meter.big .lm-bar { height: 12px; }
.today-body .lesson-meter { margin: -.4rem 0 1.1rem; }
.result-banner .next { font-weight: 600; opacity: .9; }
.context { padding: .8rem 1.1rem; }
ol.walk { list-style: none; padding: 0; margin: .6rem 0 0; }
.walk-item { display: flex; gap: .7rem; padding: .6rem .7rem; border-radius: var(--radius-sm); cursor: pointer; opacity: .45; transition: opacity .2s, background .2s; }
.walk-item.seen { opacity: .75; }
.walk-item.cur { opacity: 1; background: var(--sky-soft); }
.walk-item .k { flex: none; width: 1.2em; text-align: center; font-weight: 800; }
.walk-item button { white-space: nowrap; align-self: flex-start; flex: none; }
.takeaway { background: linear-gradient(135deg, var(--card), var(--sun-soft)); }
.takeaway .played { color: var(--c-blunder); }   /* the red arrow on the board */
.takeaway .better { color: var(--c-best); }       /* the green one */
:root[data-theme="night"] .takeaway .better { color: #8EE0AE; }
ol.steps li { margin: .55rem 0; }
.done-list { list-style: none; padding: 0; }
.done-list li { margin: .5rem 0; }

/* ---------------------------------------------------- coach home ("Let's review") */
.coach-hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: 2rem; align-items: center;
  padding: clamp(1.4rem, 2vw + .8rem, 2.6rem); border-radius: 28px;
  background:
    radial-gradient(60% 80% at 100% 0%, var(--sun-soft), transparent 70%),
    radial-gradient(60% 80% at 0% 100%, var(--meadow-soft), transparent 70%),
    var(--card);
  border: 2.5px solid var(--outline); box-shadow: var(--shadow-lift);
}
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.fx-on > .fx-canvas { opacity: 1; }
.coach-hero h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.3rem); font-weight: 700; margin-bottom: .3em; }
.coach-hero h1 em { font-style: italic; color: var(--meadow-deep); font-variation-settings: 'SOFT' 100, 'WONK' 1; }
:root[data-theme="night"] .coach-hero h1 em { color: #8EE0AE; }
.coach-hero .lede { font-size: 1.08rem; color: var(--ink-soft); max-width: 34em; }
.speech { position: relative; display: flex; gap: .9rem; align-items: flex-end; margin: 1.2rem 0 1.4rem; }
.speech .mascot { width: 104px; flex: none; }
.speech .mascot img { width: 100%; height: auto; display: block; }
.speech .bubble {
  position: relative; background: var(--card); border: 2px solid var(--outline); border-radius: 20px 20px 20px 6px;
  padding: .85rem 1.05rem; box-shadow: var(--shadow); font-weight: 600; max-width: 32em;
}
.preview-board { position: relative; }
.preview-board .frame {
  position: relative; border-radius: 18px; padding: 10px; background: var(--card); box-shadow: var(--shadow-lift);
  border: 2.5px solid var(--outline);
}
/* the tilt lives on a card behind the board: chessground measures its own box, so it must stay unrotated */
.preview-board::before {
  content: ''; position: absolute; inset: 4% -3% -4% 4%; border-radius: 24px; transform: rotate(4deg);
  background: linear-gradient(135deg, var(--sky-soft), var(--sun-soft)); border: 2px solid var(--outline);
}
.preview-board .mini { aspect-ratio: 1; width: 100%; border-radius: 12px; overflow: hidden; }
.preview-board .mini .cg-wrap { width: 100%; height: 100%; }
.preview-board .tag {
  position: absolute; left: -14px; bottom: 22px; z-index: 5; transform: rotate(-3deg);
  background: var(--coral); color: #FFFBF0; font-weight: 800; padding: .45em .9em; border-radius: 12px; box-shadow: var(--shadow);
  border: 2px solid var(--outline);
}
.lessons-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.lesson-card {
  position: relative; display: flex; flex-direction: column; gap: .4rem; cursor: pointer;
  background: var(--card); border: 2px solid var(--outline); border-radius: 24px; padding: 1rem 1.1rem 1.1rem;
  box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease;
}
.lesson-card:hover { transform: translate(-2px, -3px) rotate(-.4deg); box-shadow: var(--shadow-lift); }
.lesson-card .art {
  width: 100%; aspect-ratio: 1.35; border-radius: 16px; overflow: hidden; display: grid; place-items: center;
  border: 2px solid var(--outline); position: relative;
}
.lesson-card .art img { width: 100%; height: 100%; object-fit: cover; }
.lesson-card .art .q {
  font-family: var(--display); font-style: italic; font-weight: 650; font-size: 1.15rem; line-height: 1.25;
  padding: 1rem 1.2rem; text-align: center; color: var(--ink);
}
.lesson-card .art svg { width: 78%; height: auto; }
.lesson-card .rank {
  position: absolute; top: .8rem; left: .8rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--ink); color: var(--paper);
  display: grid; place-items: center; font-weight: 800; font-size: .9rem; z-index: 2;
}
.lesson-card h3 { margin: .3rem 0 0; font-size: 1.15rem; }
.lesson-card .meta { font-size: .85rem; color: var(--muted); font-weight: 600; }
.lesson-card.today { box-shadow: 0 0 0 4px var(--sun), var(--shadow-lift); }
.lesson-card.today::after {
  content: "Today's lesson"; position: absolute; top: .9rem; right: .9rem; background: var(--meadow); color: #fff;
  font-size: .72rem; font-weight: 800; padding: .25em .7em; border-radius: 999px; text-transform: uppercase; letter-spacing: .06em;
}
.section-head { display: flex; align-items: baseline; gap: 1rem; margin: 2.2rem 0 1rem; flex-wrap: wrap; }
.section-head h2 { margin: 0; font-size: 1.6rem; }
.empty-state { display: grid; grid-template-columns: 180px 1fr; gap: 1.5rem; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

:root[data-theme="night"] .brand, :root[data-theme="night"] .brand:hover { color: var(--ink); }

/* ------------------------------------------- coach home: today's lesson + diagnosis */
.coach-plan { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1.4rem; margin-top: 1.6rem; align-items: stretch; }
.today-card, .found-card { background: var(--card); border: 2.5px solid var(--outline); border-radius: 18px; box-shadow: var(--shadow-lift); overflow: hidden; }
.today-card { display: flex; flex-direction: column; }
.today-art { aspect-ratio: 16 / 7; display: grid; place-items: center; border-bottom: 2.5px solid var(--outline); position: relative; }
.today-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.today-art:has(img) { aspect-ratio: 16 / 9; }   /* the lesson's picture, uncropped */
.today-art .q { font-family: var(--display); font-style: italic; font-weight: 650; font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); padding: 1rem 1.6rem; text-align: center; }
.today-body { padding: 1.3rem 1.5rem 1.5rem; }
.today-body h2 { font-size: 1.7rem; margin: .1rem 0 .4rem; }
.today-body .why { color: var(--ink-soft); margin: 0 0 1.1rem; }
.today-body .why:has(+ .today-set) { margin-bottom: .45rem; }
.today-body .today-set { margin: 0 0 1.1rem; line-height: 1.45; }
.found-card { padding: 1.3rem 1.4rem .9rem; }
.found-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.found-head h2 { margin: 0; font-size: 1.3rem; }
.found-head .muted { font-size: .82rem; font-weight: 600; }
.found-rows { display: flex; flex-direction: column; }
button.found-row {
  display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) minmax(60px, 30%) 5rem 1rem; gap: .75rem; align-items: center;
  width: 100%; text-align: left; background: none; border: 0; border-top: 1.5px solid var(--line); border-radius: 0;
  box-shadow: none; padding: .7rem .3rem; font-weight: 600;
}
button.found-row:first-child { border-top: 0; }
button.found-row:hover:not(:disabled) { transform: none; box-shadow: none; background: var(--paper); }
.found-row .n { font-weight: 800; color: var(--muted); }
.found-row .t { font-weight: 700; display: flex; align-items: center; gap: .5rem; min-width: 0; }
.found-row .today-tag {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: #FFFBF0;
  background: var(--coral); padding: .15em .5em; border-radius: 999px;
}
.found-row .bar { height: 9px; border-radius: 999px; background: var(--paper-2); overflow: hidden; }
.found-row .bar i { display: block; height: 100%; border-radius: 999px; background: var(--sun-deep); }
.found-row.top .n { color: var(--coral-deep); }
.found-row.top .bar i { background: var(--coral); }
.found-row .v { text-align: right; white-space: nowrap; font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.found-row .tr { font-weight: 900; text-align: center; }
.found-row .tr.good { color: var(--meadow); }
.found-row .tr.bad { color: var(--c-blunder); }
.found-foot { font-size: .82rem; margin: .5rem .3rem 0; }
.quick-links { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin: 1.4rem .3rem 0; font-weight: 600; }
.quick-links a { text-decoration: none; color: var(--ink-soft); }
.quick-links a:hover { color: var(--meadow-deep); }
@media (max-width: 900px) { .coach-plan { grid-template-columns: 1fr; } }

/* small labels (the move on the coach page's preview board) */
.tag { display: inline-block; font-size: .72rem; font-weight: 700; padding: .12em .6em; border-radius: 999px;
  background: var(--paper-2); color: var(--ink-soft); white-space: nowrap; vertical-align: .1em; margin-left: .45rem; }

/* the answer card: "Why is it the move?" */
.why h3 { margin: 0 0 .8rem; font-size: 1.15rem; }
.why-options { display: grid; gap: .45rem; }
.why-option { text-align: left; border-radius: 12px; padding: .65em 1em; font-weight: 600; box-shadow: none; }
.why-option:hover:not(:disabled) { background: var(--paper); transform: none; box-shadow: none; }
button.link { margin-top: .7rem; padding: 0; border: 0; background: none; box-shadow: none; color: var(--ink-soft); font-weight: 600; font-size: .88rem; text-decoration: underline; text-underline-offset: .2em; }
button.link:hover:not(:disabled) { transform: none; box-shadow: none; color: var(--ink); }
.why-verdict { margin: 0 0 .6rem; font-weight: 700; }
.why-verdict.no { color: var(--coral-deep); }
:root[data-theme="night"] .why-verdict.no { color: #FFB3A8; }
.why-reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.why-reasons li { position: relative; padding-left: 1.35em; line-height: 1.45; }
.why-reasons li::before { content: '✓'; position: absolute; left: 0; font-weight: 800; color: var(--meadow-deep); }
:root[data-theme="night"] .why-reasons li::before { color: #8EE0AE; }
.why-game { margin: .7rem 0 0; padding-top: .6rem; border-top: 1.5px solid var(--line); color: var(--ink-soft); line-height: 1.45; }
/* "▶ Show me" at the end of a reason, in its line: a link, not a box */
button.show-me {
  display: inline-flex; align-items: center; gap: .2em; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  color: var(--meadow-deep); font-weight: 700; font-size: .88em; white-space: nowrap; vertical-align: baseline;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .2em;
}
button.show-me .ico svg { width: .95em; height: .95em; }
button.show-me:hover:not(:disabled) { transform: none; box-shadow: none; color: var(--meadow); }
:root[data-theme="night"] button.show-me { color: #8EE0AE; }

/* lessons: how you got here (a link to it in the sheet, only where it has no room of its own) */
.question .lead-link { display: none; }
.study > .side-col:not(.as-sheet):has(.lead-up.fit-dropped) .question .lead-link { display: inline-flex; }
.lead-up h3 { margin: 0; font-size: 1.05rem; }
.lead-story { margin: .5rem 0; line-height: 1.5; }
.lead-chart { display: block; width: 100%; height: 64px; margin: .6rem 0 .4rem; overflow: visible; }
.lead-chart .mid { stroke: var(--line-strong); stroke-dasharray: 3 4; }
.lead-chart .curve { fill: none; stroke: var(--meadow); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.lead-chart .dot { fill: var(--card); stroke: var(--outline); stroke-width: 1.5; cursor: pointer; }
.lead-chart .dot.mine { fill: var(--meadow); }
.lead-chart .dot.bad { fill: var(--c-blunder); }
.lead-chart .dot.cur { stroke: var(--ink); stroke-width: 3; }
.sheet { display: grid; grid-template-columns: 2.2rem 1fr 1fr; gap: 2px .4rem; font-variant-numeric: tabular-nums; }
.sheet-n { color: var(--muted); font-weight: 700; font-size: .85rem; align-self: center; }
.sheet-cell { text-align: left; padding: .3em .6em; border: 0; border-radius: 8px; background: none; box-shadow: none;
  font-weight: 500; color: var(--ink-soft); font-size: .92rem; }
.sheet-cell.mine { font-weight: 800; color: var(--ink); }
.sheet-cell:hover:not(:disabled) { background: var(--paper); transform: none; box-shadow: none; }
.sheet-cell.cur { background: var(--sky-soft); color: var(--ink); }
.sheet-cell .g { margin-left: .15em; font-weight: 800; }
.lead-legend { margin: .6rem 0 0; font-size: .78rem; color: var(--muted); }

/* ------------------------------------------------------------- the tutor */
.tutor {
  flex: none; position: relative; z-index: 6; display: flex; align-items: center; gap: .75rem; margin-right: 10px;
  padding: .55rem 2.7rem .55rem .75rem; background: var(--card); border: 2.5px solid var(--outline); border-radius: 16px;
  box-shadow: var(--shadow);
}
.tutor-face { position: relative; flex: none; width: 50px; }
.tutor.compact .tutor-face { width: 44px; }
.t-bust { position: relative; width: 100%; aspect-ratio: 456 / 692; --open: 0; transition: opacity .2s, filter .2s; }
.t-bust img { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; pointer-events: none; }
.t-bust .t-jaw { transform: translateY(calc(var(--open) * 1.5%)); }
.tutor[data-mode="off"] .t-bust { opacity: .45; filter: grayscale(1); }
/* the speaker sits on the bust's shoulder: mute or unmute the coach */
.t-mute {
  position: absolute; right: -9px; bottom: -3px; width: 26px; height: 26px; padding: 0; min-width: 0;
  display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--outline);
  background: var(--card); color: var(--ink); box-shadow: 1.5px 1.5px 0 var(--outline);
}
.t-mute svg { width: 15px; height: 15px; }
.tutor[data-mode="coach"] .t-mute { background: var(--ink); color: var(--paper); }
.tutor-bubble {
  flex: 1; min-width: 0; height: 3.9em; overflow-y: auto; padding: .45rem .7rem; border-radius: 12px 12px 12px 4px;
  background: var(--paper); border: 2px solid var(--outline); font-weight: 600; font-size: .9rem; line-height: 1.4;
  scrollbar-width: thin;
}
.tutor.brutal .tutor-bubble { background: var(--coral-soft); }
.tutor[data-mode="off"] .tutor-bubble { color: var(--muted); font-weight: 500; }
.t-status { font-size: .78rem; }
/* settings: a small gear that opens a menu over the panel (nothing moves) */
.t-gear {
  position: absolute; top: .4rem; right: .4rem; width: 30px; height: 30px; padding: 0; min-width: 0;
  display: grid; place-items: center; border-radius: 50%; border: 0; background: transparent; box-shadow: none; color: var(--muted);
}
.t-gear:hover:not(:disabled), .t-gear[aria-expanded="true"] { background: var(--paper-2); color: var(--ink); transform: none; box-shadow: none; }
.t-gear svg { width: 18px; height: 18px; }
.t-menu {
  position: absolute; top: calc(.4rem + 34px); right: .4rem; z-index: 40; width: 250px; padding: .45rem;
  display: flex; flex-direction: column; gap: .15rem;
  background: var(--card); border: 2.5px solid var(--outline); border-radius: 14px; box-shadow: var(--shadow-lift);
}
.t-menu[hidden] { display: none; }
.t-menu-h { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: .35rem .45rem .1rem; }
.t-mode {
  display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left;
  padding: .38rem .6rem; border: 0; border-radius: 9px; background: transparent; box-shadow: none;
}
.t-mode span { font-size: .78rem; color: var(--muted); font-weight: 500; }
.t-mode:hover:not(:disabled) { background: var(--paper); transform: none; box-shadow: none; }
.t-mode.on { background: var(--sky-soft); }
.t-persona { display: inline-flex; border-radius: 999px; margin: .1rem .45rem .3rem; }
.t-persona button { border-radius: 0; margin-left: -2px; }
.t-persona button:first-child { border-radius: 999px 0 0 999px; margin-left: 0; }
.t-persona button:last-child { border-radius: 0 999px 999px 0; }
.t-persona button.on { background: var(--ink); color: var(--paper); }
.tutor.brutal .t-persona button.on { background: var(--coral-deep); }
/* chessground shrinks the board to a multiple of 8 device pixels, which left a cream
   strip on the right and bottom inside the frame. Let it fill the frame exactly. */
.cg-wrap cg-container { width: 100% !important; height: 100% !important; }

/* coaching off: just the move, no notes */
.coach.bare .verdict { border-bottom: 0; }
/* ---------------------------------------------------------------- the tour */
/* A first-visit walk down the menu (tour.js): the page dims, the menu item is lit up and
   a small card explains it. It floats over everything; nothing underneath moves. */
.tour { position: fixed; inset: 0; z-index: 150; animation: tour-in .25s ease; }
.tour.closing { opacity: 0; transition: opacity .25s; }
@keyframes tour-in { from { opacity: 0; } }
.tour.centered { display: grid; place-items: center; background: rgba(20, 24, 18, .58); }
.tour-spot {
  position: fixed; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 200vmax rgba(20, 24, 18, .58), 0 0 0 3px var(--sun);
  transition: left .35s ease, top .35s ease, width .35s ease, height .35s ease;
}
.tour.centered .tour-spot { display: none; }
.tour-card {
  position: fixed; width: min(340px, calc(100vw - 24px)); padding: 1.1rem 1.2rem 1rem;
  background: var(--card); border: 2.5px solid var(--outline); border-radius: 16px; box-shadow: 6px 6px 0 var(--outline);
  transition: left .35s ease, top .35s ease;
}
.tour.centered .tour-card { position: relative; width: min(430px, calc(100vw - 32px)); text-align: center; padding: 1.3rem 1.5rem 1.2rem; }
.tour-face { display: block; width: 96px; margin: -.3rem auto .5rem; }
.tour-count { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tour-card h3 { margin: .15rem 0 .45rem; font-size: 1.25rem; }
.tour-card p { margin: 0 0 1.05rem; color: var(--ink-soft); line-height: 1.5; }
.tour-actions { display: flex; align-items: center; gap: .5rem; }
.tour.centered .tour-actions .spacer { flex: 0 0 .5rem; }
.tour.centered .tour-actions { justify-content: center; }
.tour-skip { padding: .3em 0; border: 0; background: none; box-shadow: none; color: var(--muted); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.tour-skip:hover:not(:disabled) { transform: none; box-shadow: none; color: var(--ink); }
.tour [hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .tour, .tour-spot, .tour-card { animation: none; transition: none; } }

/* Settings: delete account */
.danger-zone { margin-top: 2.2rem; padding-top: 1.2rem; border-top: 2px dashed var(--line-strong); }
.danger-zone h2 { color: var(--coral-deep); }
button.danger { color: var(--coral-deep); border-color: var(--coral-deep); }
button.danger.solid { background: var(--coral-deep); color: #FFFBF0; border-color: var(--outline); }

/* =====================================================================
   Tablets and phones
   Tablets get a narrow rail, icon over label. Phones get a tab bar with four pages and
   "More", which opens the rest of the menu in a small sheet over the page; so do short
   landscape screens, as a slim rail. Board screens stack on narrow screens: the coach,
   the board and its bar fill the top of the screen, and the details scroll in the
   card under them.
   ===================================================================== */
:root { --tabbar: 0px; }

/* touch keyboards zoom the page into any field set smaller than 16px */
@media (pointer: coarse) {
  input, select, textarea { font-size: max(16px, 1em); }
  button.small { min-height: 38px; }
  input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--meadow); }
  /* fingers: room around the small controls */
  .t-gear { width: 40px; height: 40px; top: .2rem; right: .2rem; }
  .t-menu { top: calc(.2rem + 42px); }
  .t-mute::after { content: ''; position: absolute; inset: -8px; }
  .sheet-cell { min-height: 40px; }
  .chip { padding: .3em .7em; }
  .strip .mv { min-height: 36px; }
  .board-bar > button { min-height: 42px; }
  .quick-links a { padding: .55rem 0; }
}
/* tablets and phones: no label under 12px */
@media (max-width: 1099px) {
  .eyebrow, .tag, .trend, .badge, .found-row .today-tag, .coach .verdict .title, .preview-board .tag { font-size: .75rem; }
}

@media (max-width: 900px) {
  main { padding: 1rem 16px 2rem; }
  .coach-hero, .empty-state { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ tablet rail */
/* also touch tablets held sideways (iPads up to 1366 wide): the board gets the room the full menu would take */
@media (min-width: 761px) and (max-width: 1099px) and (min-height: 521px), (pointer: coarse) and (min-width: 761px) and (max-width: 1366px) and (min-height: 521px) {
  :root, :root.side-collapsed { --side-w: 88px; }
  .sidenav { padding: .9rem 8px; gap: .2rem; overflow-y: auto; scrollbar-width: none; }
  .side-head, :root.side-collapsed .side-head { flex-direction: column; padding-bottom: .5rem; }
  .side-toggle, #jobs, :root.side-collapsed .side-brand .label, .side-brand .label { display: none; }
  .side-brand, :root.side-collapsed .side-brand { padding: 0; }
  .side-links, .side-foot { gap: .1rem; }
  .sidenav a[data-nav], .side-item {
    flex-direction: column; justify-content: center; gap: .3rem; padding: .55rem 2px;
    font-size: .75rem; line-height: 1.2; text-align: center; white-space: normal;
  }
  .sidenav .label, :root.side-collapsed .sidenav .label { opacity: 1; pointer-events: auto; }
  .sidenav a[data-nav].active, :root[data-theme="night"] .sidenav a[data-nav].active { background: none; }
  /* side by side (landscape tablets): the board leaves the details column its 340px */
  .board-box { width: min(calc(100dvh - var(--chrome) - var(--head) - var(--bar) - 2 * var(--gap)), calc(100vw - var(--side-w) - 450px), 860px); }
}

/* ------------------------------------------- the "More" sheet (phones, short screens) */
@media (max-width: 760px), (max-height: 520px) {
  .sidenav .side-more, .sidenav .side-foot .side-sheet-only { display: flex; }
  .sidenav .side-links a[data-nav="profile"] { display: none; }
  .side-foot {
    position: fixed; z-index: 1; display: none; flex-direction: column; gap: 0; margin: 0;
    width: min(270px, calc(100vw - 16px)); max-height: calc(100dvh - 24px); overflow-y: auto; padding: .4rem;
    background: var(--card); border: 2.5px solid var(--outline); border-radius: 16px; box-shadow: var(--shadow-lift);
  }
  .sidenav.more-open .side-foot { display: flex; animation: sheet-in .16s ease-out; }
  .sidenav.more-open::before { content: ''; position: fixed; background: rgba(20, 24, 18, .32); animation: tour-in .2s ease; }
  .side-foot a[data-nav], .side-foot .side-item {
    flex-direction: row; gap: .9rem; min-height: 48px; padding: .5rem .85rem; font-size: .98rem; text-align: left;
  }
  .side-foot .label, :root.side-collapsed .side-foot .label { opacity: 1; pointer-events: auto; }
  .side-foot #sign-out { order: 1; margin-top: .3rem; border-top: 1.5px solid var(--line); border-radius: 0 0 10px 10px; }
  #jobs:not(:empty), :root.side-collapsed #jobs:not(:empty) { display: block; padding: .55rem .85rem .35rem; }
  /* the open page shows in colour and bold; no tile behind the icon */
  .sidenav a[data-nav].active, :root[data-theme="night"] .sidenav a[data-nav].active { background: none; }
  .sidenav.more-open .side-more, .sidenav:has(.side-foot .active) .side-more { color: var(--ink); font-weight: 700; }
  .sidenav.more-open .side-more svg, .sidenav:has(.side-foot .active) .side-more svg { color: var(--meadow-deep); stroke-width: 2.4; }
  :root[data-theme="night"] .sidenav:has(.side-foot .active) .side-more svg { color: #8EE0AE; }
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(8px); } }

/* ----------------------------------------------------------- phone tab bar */
@media (max-width: 760px) and (min-height: 521px) {
  :root { --tabbar: 58px; }
  :root, :root.side-collapsed { --side-w: 0px; }
  body:has(> .sidenav) { padding-left: 0; padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom)); }
  .sidenav {
    top: auto; right: 0; width: auto; height: calc(var(--tabbar) + env(safe-area-inset-bottom)); overflow: visible;
    flex-direction: row; gap: 0; padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    border-right: 0; border-top: 2.5px solid var(--outline);
  }
  .side-head { display: none; }
  .side-links { flex: 1; flex-direction: row; gap: 0; }
  .side-links a[data-nav], .side-links .side-more {
    flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; gap: 4px; padding: 2px;
    border-radius: 0; font-size: .75rem; line-height: 1.1; text-align: center;
  }
  .side-links a[data-nav]:hover, .side-links .side-more:hover:not(:disabled) { background: none; }
  .side-links svg { width: 24px; height: 24px; }
  .side-links .label, :root.side-collapsed .side-links .label { opacity: 1; pointer-events: auto; }
  .side-links a[data-nav].active svg, .side-links .side-more svg { transition: color .15s; }
  .side-foot { right: max(8px, env(safe-area-inset-right)); bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 8px); }
  .sidenav.more-open::before { inset: 0 0 calc(var(--tabbar) + env(safe-area-inset-bottom)); }
}

/* ------------------------------------------- short landscape screens: slim rail */
@media (max-height: 520px) {
  :root, :root.side-collapsed { --side-w: calc(72px + env(safe-area-inset-left)); }
  body:has(> .sidenav) { padding-bottom: 0; }
  .sidenav {
    top: 0; bottom: 0; right: auto; height: auto; width: var(--side-w); overflow: visible;
    flex-direction: column; justify-content: center; gap: 0; padding: .4rem 6px .4rem max(6px, env(safe-area-inset-left));
    border-top: 0; border-right: 2.5px solid var(--outline);
  }
  .side-head { display: none; }
  .side-links { flex-direction: column; gap: .1rem; }
  .side-links a[data-nav], .side-links .side-more {
    flex-direction: column; justify-content: center; gap: 3px; padding: .35rem 2px; font-size: .75rem; text-align: center;
  }
  .side-links .label, :root.side-collapsed .side-links .label { opacity: 1; pointer-events: auto; }
  .side-foot { left: calc(var(--side-w) + 8px); bottom: 8px; }
  .sidenav.more-open::before { inset: 0 0 0 var(--side-w); }
  main { padding: .5rem max(12px, env(safe-area-inset-right)) .5rem 12px; }
}

/* --------------------------------------------- board screens, stacked */
/* The coach and the moves, the board and its bar fill the top of the screen; the details
   card takes what's left under them and never scrolls: each step is written to fit, and what
   doesn't opens in a sheet (fitDetails in util.js). The page itself never scrolls either. */
@media (max-width: 900px) and (min-height: 521px), (max-width: 1099px) and (orientation: portrait) {
  main:has(.study) { padding: max(8px, env(safe-area-inset-top)) 16px 0; }
  /* one column as wide as the board: phones give it the full width; tall tablets keep a third of the height for the details */
  .study {
    --chrome: calc(max(8px, env(safe-area-inset-top)) + 8px + var(--tabbar) + env(safe-area-inset-bottom));
    --details: clamp(96px, 100dvh - 700px, 32dvh);   /* the least the details card keeps under the bar */
    --col: min(100%, 100dvh - var(--chrome) - var(--head) - var(--bar) - var(--details) - 3 * var(--gap));
    display: flex; flex-direction: column; align-items: center; gap: var(--gap);
  }
  .study.review { --col: min(100%, 100dvh - var(--chrome) - var(--head) - var(--bar) - var(--details) - 3 * var(--gap) + 16px); }
  .board-col, .study > .side-col { flex: none; width: var(--col); }
  .board-col > :not(.board-wrap) { width: auto; min-width: 0; }
  .board-wrap { justify-content: center; gap: 6px; }
  .board-box { width: 100%; }
  .study.review .board-box { width: calc(100% - 16px); }
  .evalbar { width: 10px; }
  .board-note { white-space: normal; width: max-content; max-width: calc(100% - 24px); text-align: center; }
  .study > .side-col { flex: 1 1 0; margin: 0 4px 8px 0; box-shadow: var(--shadow); border-radius: 16px; }
  .study > .side-col { width: calc(var(--col) - 4px); }
  .graph { height: 56px; }
  .study { position: relative; }
  .study > .side-col { overflow: hidden; }
}

/* ------------------------------------------------- short screens, side by side */
/* the board fills the height on the left with its bar under it; the coach and the details on the right */
@media (max-height: 520px) {
  .study {
    --chrome: 16px; --head: 112px; --bar: 42px; gap: .5rem .9rem;
    grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "board head" "board side" "bar side";
  }
  .board-col { display: contents; }
  .board-col > :not(.board-wrap) { width: auto; min-width: 0; }
  .board-head { grid-area: head; }
  .board-wrap { grid-area: board; }
  .board-bar { grid-area: bar; }
  .study > .side-col { grid-area: side; }
  .board-box { width: min(calc(100dvh - var(--chrome) - var(--bar) - .5rem), calc((100vw - var(--side-w, 0px)) * .5)); }
  .board-bar > button { padding: .35em .8em; }
  .board-head .tutor-face, .board-head .tutor.compact .tutor-face { width: 36px; }
  .board-pop > button { font-size: .9rem; padding: .5em 1em; }
  .study { position: relative; }
  .study > .side-col { overflow: hidden; }
  /* the answer card takes the whole right-hand column, over the coach */
  .study.carded > .side-col { grid-area: 1 / 2 / 4 / 3; z-index: 22; }
  .study.card-away > .side-col { visibility: hidden; }
}

/* ----------------------------------------------------------------- phones */
@media (max-width: 760px) {
  main { padding: .9rem 12px 1.5rem; }
  main:has(.study) { padding-left: 12px; padding-right: 12px; }
  .panel { padding: 1rem 1.05rem; }
  h1 { font-size: 1.6rem; }

  /* floating layers clear the tab bar, the dock and the home indicator */
  .toast {
    bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 14px); width: max-content; max-width: calc(100vw - 32px);
    text-align: center; border-radius: 18px;
  }
  .promo .choices { gap: .4rem; padding: .8rem; }
  .promo button { width: 62px; height: 62px; font-size: 38px; }

  /* the tutor and the coaching: tighter, with taller buttons */
  .tutor { gap: .6rem; padding: .5rem 2.9rem .5rem .6rem; }
  .tutor-face { width: 44px; }
  .t-menu { width: min(250px, calc(100vw - 56px)); }
  .t-mode { min-height: 44px; }
  .coach li.point { padding-left: 2.5rem; }
  .coach .verdict { padding: .8rem 1rem; }
  .coach .actions { padding: .6rem 1rem 1rem; }
  .coach .actions button, .side-col .row > button, .why-option { min-height: 42px; }

  /* a step's text keeps the width; its button goes under it */
  .walk-item { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .7rem; row-gap: .45rem; align-items: baseline; }
  .walk-item > button { grid-column: 2; justify-self: start; margin-left: 0 !important; }

  /* coach home */
  .coach-hero { padding: 1.2rem 1.1rem 1.4rem; gap: 1.4rem; border-radius: 22px; }
  .coach-hero h1 { font-size: clamp(1.75rem, 1rem + 4vw, 2.2rem); }
  .speech { gap: .55rem; margin: .9rem 0 1.2rem; }
  .speech .mascot { width: 62px; }
  .speech .bubble { padding: .7rem .85rem; font-size: .93rem; line-height: 1.45; }
  .coach-hero .row > .big { flex: 1 1 100%; padding: .75em 1em; font-size: 1rem; }
  .coach-plan { margin-top: 1.2rem; gap: 1.1rem; }
  .today-body { padding: 1.1rem 1.15rem 1.25rem; }
  .today-body h2 { font-size: 1.45rem; }
  .today-body .row > .big { flex: 1 1 auto; }
  .found-card { padding: 1.1rem 1rem .8rem; }
  button.found-row {
    grid-template-columns: 1.3rem minmax(0, 1fr) auto 1rem; grid-template-areas: "n t v tr" ". bar bar bar";
    row-gap: .45rem; column-gap: .6rem; padding: .75rem .2rem;
  }
  .found-row .n { grid-area: n; } .found-row .t { grid-area: t; } .found-row .v { grid-area: v; }
  .found-row .tr { grid-area: tr; } .found-row .bar { grid-area: bar; }
  .quick-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; margin: 1rem .2rem 0; }
  .quick-links a { padding: .7rem 0; }

  /* the bar's buttons share its width */
  .board-bar > button { flex: 1 1 auto; min-width: 0; padding: .45em .7em; font-size: .92rem; }
  .board-bar > .step { flex: 1 1 0; width: auto; max-width: 56px; }
  .board-bar > .more { margin-left: 0; }
  .board-bar > .more:only-child { margin-left: auto; }
  .strip-dots { gap: .22rem; }
  .strip .dot { width: .68rem; height: .68rem; }

  /* spar: a shorter heading */
  .study .panel > h1 + p.muted { font-size: .9rem; }
  .study .panel > h1 { font-size: 1.35rem; margin-bottom: .3rem; }

  /* games: the import form, then the list as two-line rows */
  .games-head { row-gap: .4rem; margin-bottom: .6rem; }
  .games-head .spacer { display: none; }
  .games-head .sync-line { flex: 1 1 100%; justify-content: space-between; flex-wrap: nowrap; }
  .games-head .sync-line > button { flex: none; white-space: nowrap; }
  .import-grid { gap: .4rem; }
  .import-grid h3 { margin: .8rem 0 .45rem; }
  .import-row > input { flex: 1 1 100%; min-width: 0; }
  .import-row > .csel { flex: 1 1 0; }
  .review-row > .muted:empty, .review-row > .spacer { display: none; }
  .review-row > .muted { flex: 1 1 100%; }
  .review-row > button { flex: 1 1 100%; }

  /* settings: full-width fields */
  .settings label { display: block; }
  .settings input[type=text], .settings input[type=password] { width: 100%; margin-top: .3rem; }
  .danger-zone .row > input { flex: 1 1 100%; }
}

/* the games list as two-line rows wherever the table would be squeezed */
@media (max-width: 900px) {
  .games-table thead { display: none; }
  .games-table, .games-table tbody { display: block; }
  .games-table tr.click {
    display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "opp opp opp res" "date type open state";
    align-items: center; gap: .25rem .55rem; padding: .7rem .15rem; border-bottom: 1.5px solid var(--line);
  }
  .games-table tr.click:last-child { border-bottom: 0; }
  .games-table td { display: block; padding: 0; border: 0; min-width: 0; }
  .games-table tr.click:hover td { background: none; }
  .games-table .g-opp { grid-area: opp; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .games-table .g-res { grid-area: res; justify-self: end; }
  .games-table .g-date { grid-area: date; }
  .games-table .g-type { grid-area: type; }
  .games-table .g-open { grid-area: open; max-width: none !important; }
  .games-table .g-date, .games-table .g-type, .games-table .g-open { font-size: .82rem; color: var(--muted); }
  .games-table .g-state { grid-area: state; justify-self: end; font-size: .88rem; white-space: nowrap; }
  .games-table .g-state .progress { width: 70px; }
}

/* Games: the list's header, with the reviewed/waiting summary and filter */
.list-head { align-items: baseline; gap: .4rem 1rem; flex-wrap: wrap; }
.seg { display: inline-flex; }
.seg button { border-radius: 0; margin-left: -2px; box-shadow: none; }
.seg button:first-child { border-radius: 999px 0 0 999px; margin-left: 0; }
.seg button:last-child { border-radius: 0 999px 999px 0; }
.seg button.on { background: var(--ink); color: var(--paper); }

/* Review: "find a better move" */
.try-hint { margin: .7rem 0 0; padding: .55rem .8rem; border-radius: 10px; background: color-mix(in srgb, var(--sun) 22%, transparent); font-weight: 600; }

/* the coach's settings: the Auto-play switch (lines play out on the board as they're explained) */
.t-auto { flex-direction: row; align-items: center; gap: .6rem; }
.autoplay-toggle i { flex: none; width: 1.9em; height: 1.05em; border-radius: 999px; background: var(--paper-2); border: 1.5px solid var(--outline); position: relative; transition: background .2s; }
.autoplay-toggle i::after { content: ''; position: absolute; top: 50%; left: .12em; width: .7em; height: .7em; border-radius: 50%; background: var(--ink); translate: 0 -50%; transition: left .2s; }
.autoplay-toggle[aria-pressed="true"] i { background: var(--meadow); }
.autoplay-toggle[aria-pressed="true"] i::after { left: calc(100% - .82em); background: #FFFBF0; }
.t-auto > span { display: flex; flex-direction: column; font-size: inherit; color: inherit; font-weight: inherit; }

/* where a game came from: a small label next to the opponent */
.site { display: inline-block; margin-left: .5em; padding: .05em .55em; border-radius: 999px; font-size: .72rem; font-weight: 700;
  vertical-align: .1em; white-space: nowrap; background: var(--paper-2); color: var(--ink-soft); }
.site-chesscom { background: color-mix(in srgb, #81B64C 26%, transparent); color: #3B5A1E; }
.site-lichess { background: color-mix(in srgb, var(--ink) 12%, transparent); color: var(--ink); }
:root[data-theme="night"] .site-chesscom { color: #B9DE8F; }
.site-chessknight { background: var(--meadow-deep); color: #FFFBF0; }

/* ---------------------------------------------------------------- speed and walkthroughs */
/* the coach's settings: Speed (Steady / Normal / Quick / Engine), like the personality switch */
.t-speed { display: grid; grid-template-columns: repeat(4, 1fr); margin: .1rem .45rem 0; }
.t-speed button { border-radius: 0; margin-left: -2px; padding: .25em 0; font-size: .78rem; min-width: 0; }
.t-speed button:first-child { border-radius: 999px 0 0 999px; margin-left: 0; }
.t-speed button:last-child { border-radius: 0 999px 999px 0; }
.t-speed button.on { background: var(--ink); color: var(--paper); }
.t-speed-desc { font-size: .75rem; color: var(--muted); margin: .25rem .5rem .3rem; min-height: 1.2em; }
/* a step of a line: a short caption next to the square it's about (above it; below it on the top row) */
.board-cap {
  position: absolute; z-index: 14; transform: translate(-50%, calc(-100% - 4px)); pointer-events: none;
  background: rgba(31, 42, 68, .9); color: #fff; padding: .2em .7em; border-radius: 999px;
  font-size: .82rem; font-weight: 700; white-space: nowrap; animation: cap-in .2s ease-out;
}
.board-cap.below { transform: translate(-50%, 4px); }
.board-cap.edge-l { transform: translate(-18%, calc(-100% - 4px)); }
.board-cap.edge-r { transform: translate(-82%, calc(-100% - 4px)); }
.board-cap.below.edge-l { transform: translate(-18%, 4px); }
.board-cap.below.edge-r { transform: translate(-82%, 4px); }
@keyframes cap-in { from { opacity: 0; } }
/* the walkthrough's one button over the board ("Show me", "Show the rest"); the screen's own pop-up waits */
.walk-pop {
  position: absolute; left: 50%; bottom: 3.5%; transform: translateX(-50%); z-index: 17;
  display: flex; pointer-events: none; animation: pop-in .28s ease-out;
}
.walk-pop > button { pointer-events: auto; white-space: nowrap; font-size: 1rem; padding: .55em 1.2em; box-shadow: var(--shadow); }
.board-box.walking .board-pop { display: none; }
/* Steady: waiting for a tap before the next step */
.walk-tip {
  position: absolute; left: 50%; bottom: 3.5%; transform: translateX(-50%); z-index: 15; pointer-events: none;
  background: rgba(31, 42, 68, .78); color: #fff; padding: .25em .9em; border-radius: 999px; font-size: .8rem;
  font-weight: 600; white-space: nowrap; animation: pop-in .28s ease-out;
}
.why-engine { margin: .7rem 0 0; font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .board-cap { font-size: .74rem; padding: .15em .55em; }
  .walk-pop > button { font-size: .9rem; padding: .5em 1em; }
}

/* =====================================================================
   Board screens without a scrolling box (phones and tablets)
   The details card under the board never scrolls (fitDetails in util.js): each step is
   written short, a coach card shows one point at a time when it must, and what still
   doesn't fit opens in a sheet over the whole screen, with Close at the top.
   ===================================================================== */
.fit-dropped { display: none !important; }
.coach .pager { display: none; }
.coach.compacted li.point:not(.shown) { display: none; }
.coach.compacted .pager { display: flex; align-items: center; gap: .15rem; margin-right: auto; }
.pager .step { width: 36px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 10px; box-shadow: none; border-width: 1.5px; }
.pager-n { min-width: 3.2em; text-align: center; font-size: .82rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
button.fit-more {
  flex: none; align-self: flex-end; display: inline-flex; align-items: center; gap: .3em; margin: auto .7rem .6rem;
  padding: .3em .85em; font-size: .85rem; box-shadow: 1.5px 1.5px 0 var(--outline); white-space: nowrap;
}
button.fit-more .ico svg { width: 1em; height: 1em; stroke-width: 2.5; }

/* the sheet: the details card, full screen, with a bar to close it */
.study > .side-col.as-sheet {
  position: fixed; inset: 0; z-index: 80; width: auto; height: auto; max-height: none; margin: 0; transform: none;
  overflow-y: auto; overscroll-behavior: contain; scroll-padding-top: calc(3.6rem + env(safe-area-inset-top)); border: 0; border-radius: 0; box-shadow: none;
  padding: calc(3.4rem + env(safe-area-inset-top)) 0 calc(1.5rem + env(safe-area-inset-bottom)); visibility: visible;
  animation: sheet-in .18s ease-out;
}
.sheet-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 81; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  height: calc(3.2rem + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0 18px;
  background: var(--card); border-bottom: 2.5px solid var(--outline);
}
.sheet-bar[hidden] { display: none; }
.sheet-title { font-family: var(--display); font-size: 1.1rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-close { display: inline-flex; align-items: center; gap: .35em; padding: .4em .95em; font-size: .92rem; }
.sheet-close .ico svg { stroke-width: 2.5; }

/* ----------------------------------------------- the answer card (coach.js whyCard) */
.step-card .card-head { display: flex; align-items: baseline; gap: .55rem; margin: 0 0 .5rem; font-size: .8rem; color: var(--muted); }
.card-head .move { font-family: var(--display); font-weight: 700; font-size: 1.02rem; color: var(--ink); white-space: nowrap; }
.card-head .title { font-weight: 800; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.card-head .wp { margin-left: auto; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.step-card h3 { margin: 0 0 .65rem; font-size: 1.1rem; }
.step-card[data-step="explain"] h3, .step-card[data-step="numbers"] h3 { margin-bottom: .5rem; }
.step-card .why-verdict { margin: -.2rem 0 .5rem; font-size: .92rem; }
.step-card .why-wait { margin: .2rem 0; }
.step-card .why-skip { margin-top: .6rem; }
.step-card .why-engine { margin: 0; font-size: .92rem; color: var(--ink-soft); }
.card-foot { display: flex; align-items: center; gap: .5rem; margin-top: .85rem; }
.card-foot > .card-next { flex: 1 1 auto; min-width: 0; padding: .6em 1em; font-size: 1rem; box-shadow: var(--shadow); }
.card-foot > button.link { margin: 0 .2rem; flex: none; }
.card-foot > .more { display: none; }   /* the bar's "⋯" is in view on wide screens */
.card-foot > .more .more-menu { right: 0; }

@media (max-width: 900px) and (min-height: 521px), (max-width: 1099px) and (orientation: portrait), (max-height: 520px) {
  /* the details in smaller type, so a step fits */
  .study > .side-col { font-size: .92rem; line-height: 1.45; }
  .study > .side-col .panel { padding: .7rem .9rem; }
  .study > .side-col h2 { font-size: 1.12rem; margin-bottom: .35em; }
  .study > .side-col h3 { font-size: 1rem; margin-bottom: .4em; }
  .study > .side-col .result-banner { padding: .5rem .8rem; border-radius: 0; }
  .study > .side-col .coach .verdict { padding: .45rem .9rem; gap: .5rem; line-height: 1.3; }
  .study > .side-col .coach .verdict .move { font-size: 1.02rem; }
  .study > .side-col .coach .verdict .title { padding: .15em .6em; }
  .study > .side-col .coach .verdict .wp { font-size: .8rem; }
  .study > .side-col .coach ul.points { padding: .3rem 0; }
  .study > .side-col .coach li.point { padding: .35rem .8rem .35rem 2.3rem; margin: 0 .25rem; line-height: 1.42; }
  .study > .side-col .coach li.point::before { left: .6rem; top: .38rem; width: 1.2rem; height: 1.2rem; }
  .study > .side-col .coach .actions { padding: .1rem .9rem .55rem; gap: .4rem; align-items: center; }
  .study > .side-col .coach .actions button { min-height: 0; padding: .3em .8em; font-size: .86rem; }
  .study > .side-col details.scan summary { padding: .45rem .9rem; font-size: .85rem; }
  .study > .side-col .step-card { padding: .8rem .9rem .85rem; }
  .study > .side-col .why-option { min-height: 40px; padding: .45em .85em; font-size: .92rem; line-height: 1.3; }
  .study > .side-col .why-options { gap: .4rem; }
}

/* phones: after a right answer the card comes up over the bottom of the screen, over the bar
   and as far over the board as it needs (never scrolling); the board stays where it is */
@media (max-width: 760px) and (min-height: 521px) {
  .study.carded > .side-col {
    position: absolute; left: 50%; bottom: 8px; z-index: 22; transform: translateX(calc(-50% - 2px));
    height: auto; max-height: calc(100% - 8px); margin: 0; box-shadow: var(--shadow-lift);
  }
  .study.carded.card-top > .side-col { bottom: auto; top: 0; }
  .study.carded .board-bar { visibility: hidden; }
  .study.card-away > .side-col { visibility: hidden; }
  .study.carded .card-foot > .more { display: block; }
  .study.carded .card-foot > .more .more-btn { height: 44px; }
}
.summary .sum-part { margin-top: .85rem; }
.summary .sum-part > h3 { margin-bottom: .35rem; }
.summary .sum-help { font-size: .85rem; }
.summary .sum-side { margin-top: .45rem; line-height: 1.4; }
.sum-who { display: flex; align-items: baseline; gap: .6rem; }
.sum-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); font-weight: 600; }
.sum-acc { margin-left: auto; flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.sum-counts { font-size: .9em; }
/* a coach card's row: its buttons, the pager when it shows one point at a time, and "More" */
.coach .actions { align-items: center; }
.coach .fit-slot { display: contents; }
.coach .actions button.fit-more { margin: 0 0 0 auto; }
.coach .actions:not(:has(> button, .fit-more)) { display: none; }
.coach.compacted .actions:has(> .pager) { display: flex; }
.coach.compacted .actions:not(:has(> .pager, > button:not(.walk-all), .fit-more)) { display: none; }
.coach.compacted .walk-all { display: none; }
.calc-btns { margin-top: .7rem; }
@media (max-width: 900px) and (min-height: 521px), (max-width: 1099px) and (orientation: portrait), (max-height: 520px) {
  .study > .side-col .calc-wrap { gap: 0; }
  .study > .side-col .calc-head { flex-wrap: nowrap; gap: .45rem; }
  .study > .side-col .calc-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
  .study > .side-col .calc-how { margin: .4rem 0 0; font-size: .88rem; line-height: 1.4; }
  .study > .side-col .calc-net { margin-top: .35rem; font-size: 1.1rem; }
  .study > .side-col .calc-btns { margin-top: .5rem; gap: .4rem; }
  .study > .side-col .calc-btns > button { padding: .3em .75em; font-size: .86rem; min-height: 36px; }
  .study > .side-col .calc-engine { margin-top: .5rem; padding: .45rem .7rem; font-size: .88rem; }
  .study > .side-col .calc-table { font-size: .85rem; margin-top: .3rem; }
}
.clamped { display: -webkit-box !important; -webkit-box-orient: vertical; overflow: hidden; padding-bottom: 0 !important; border-bottom: .35rem solid transparent; }
.sum-head { display: flex; align-items: center; gap: .6rem; }
.sum-head h2 { margin: 0; }
.sum-head .fit-slot { display: contents; }
.sum-head button.fit-more { margin: 0 0 0 auto; }
.study > .side-col > .calc-wrap { margin: 0; gap: 0; }

/* small phones (an iPhone SE, a 360x740 Android): the coach's bubble a touch smaller, so the
   details keep room for a step */
@media (max-width: 760px) and (min-height: 521px) and (max-height: 780px) {
  .study { --head: 134px; --details: 150px; }
  .study.review { --details: 132px; }   /* a review's board is as wide as the screen allows anyway */
  .board-head .tutor-bubble { font-size: .84rem; line-height: 1.34; }
  .study > .side-col { font-size: .9rem; line-height: 1.4; }
}
@media (max-width: 900px) and (min-height: 521px), (max-width: 1099px) and (orientation: portrait), (max-height: 520px) {
  /* the verdict in one line: the outcome chip gives way first */
  .study > .side-col .coach .verdict { flex-wrap: nowrap; }
  .study > .side-col .coach .verdict > span { flex: none; white-space: nowrap; }
  .study > .side-col .coach .verdict .wp { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .study > .side-col .summary .sum-side { margin-top: .3rem; line-height: 1.32; }
  .study > .side-col .summary { padding-top: .6rem; padding-bottom: .6rem; }
}
button.fit-more { height: 32px; min-height: 0; padding: 0 .85em; }
@media (max-width: 900px) and (min-height: 521px), (max-width: 1099px) and (orientation: portrait), (max-height: 520px) {
  .study > .side-col .panel.coach { padding: 0; }
  .study > .side-col .coach .actions .pager .step { height: 32px; min-height: 0; }
}
.sum-head h2 { white-space: nowrap; flex: none; }
.sum-head button.fit-more { min-width: 0; }
button.fit-more .fit-more-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) and (min-height: 521px) and (max-height: 780px) {
  .study > .side-col .summary { padding-top: .5rem; padding-bottom: .45rem; }
  .study > .side-col .summary h2 { font-size: 1.02rem; }
  .study > .side-col .summary .sum-side { margin-top: .2rem; line-height: 1.27; }
}
@media (max-width: 900px) and (min-height: 521px), (max-width: 1099px) and (orientation: portrait), (max-height: 520px) {
  /* no divider under the last thing showing */
  .study > .side-col .panel:not(:has(~ :not(.fit-dropped, .fit-more))) { border-bottom: 0; }
  /* your critical moments as a row of moves to tap (the sheet says what each one cost) */
  .study > .side-col:not(.as-sheet) .summary .critical { display: flex; flex-wrap: wrap; gap: .25rem .9rem; }
  .study > .side-col:not(.as-sheet) .summary .critical a { margin: 0; font-weight: 700; }
  .study > .side-col:not(.as-sheet) .summary .critical .swing { display: none; }
  .study > .side-col .summary .sum-part { margin-top: .6rem; }
}
/* lessons: the walkthrough's count, and one point at a time where there's no room */
.walk-head .walk-n { margin-left: auto; font-size: .82rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.walk-panel.compacted .walk-item:not(.cur) { display: none; }
@media (max-width: 900px) and (min-height: 521px), (max-width: 1099px) and (orientation: portrait), (max-height: 520px) {
  .study > .side-col .lesson h1 { font-size: 1.3rem; margin-bottom: .25rem; }
  .study > .side-col .lesson .eyebrow { margin-bottom: .15rem; }
  .study > .side-col .lesson p { margin: .35rem 0; }
  .study > .side-col .lesson ul { margin: .3rem 0; }
  .study > .side-col .question { margin: .5rem 0; padding: .55rem .75rem; }
  .study > .side-col .question div { font-size: 1.02rem; }
  .study > .side-col .question.small { margin: 0; font-size: .92rem; }
  .study > .side-col ol.walk { margin-top: .35rem; }
  .study > .side-col .walk-item { padding: .4rem .55rem; line-height: 1.42; }
  .study > .side-col .context { padding: .55rem .9rem; }
  .study > .side-col .context .row { flex-wrap: nowrap; }
  .study > .side-col .context .row > .muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .study > .side-col .context .row > b, .study > .side-col .context .row > a { flex: none; white-space: nowrap; }
  .study > .side-col .lesson-meter.big { margin: .5rem 0 .3rem; }
}
@media (max-width: 760px) and (min-height: 521px) and (max-height: 780px) {
  /* small phones: a lesson's name and its question a touch tighter */
  .study > .side-col .lesson h1 { font-size: 1.15rem; }
  .study > .side-col .lesson .question { margin: .35rem 0 0; }
}
/* where a step keeps its "More": the right end of its top row */
.fit-slot { display: contents; }
.fit-slot > button.fit-more { flex: none; margin: 0 0 0 auto; }
.card-top { display: flex; align-items: center; gap: .6rem; min-height: 1.4rem; }
.card-top > .eyebrow { margin-bottom: 0; }
.result-banner.with-slot { display: flex; align-items: center; gap: .6rem; }
.result-banner.with-slot > span:first-child { flex: 1 1 auto; min-width: 0; }
.walk-head .fit-slot > button.fit-more { margin-left: .2rem; }
@media (max-width: 900px) and (min-height: 521px), (max-width: 1099px) and (orientation: portrait), (max-height: 520px) {
  .study > .side-col .card-top { margin-bottom: .15rem; }
  .study > .side-col:not(.as-sheet) .walk-what { display: none; }
  .study > .side-col .walk-head { flex-wrap: nowrap; gap: .45rem; }
  .study > .side-col .walk-head > * { flex: none; white-space: nowrap; }
}
@media (max-width: 900px) and (min-height: 521px), (max-width: 1099px) and (orientation: portrait), (max-height: 520px) {
  /* a step's verdict is the top strip of the card */
  .study > .side-col > .result-banner { margin: 0; border-radius: 0; padding: .55rem .9rem; }
}
/* openings: where you left the book, one place at a time where there's no room */
.op-spots-head { display: flex; align-items: center; gap: .5rem; }
.op-spots-head .op-h3 { margin: 0; flex: 1 1 auto; min-width: 0; }
.op-spots .pager { display: none; }
.op-spots.compacted .pager { display: flex; align-items: center; gap: .15rem; }
.op-spots.compacted .op-spot:not(.cur) { display: none; }
.op-spots-head .fit-slot > button.fit-more { margin-left: .2rem; }
@media (max-width: 900px) and (min-height: 521px), (max-width: 1099px) and (orientation: portrait), (max-height: 520px) {
  .study > .side-col .op-spots { gap: .3rem; }
  .study > .side-col button.op-spot { padding: .4rem .65rem; }
  /* spar: the side and level in one row */
  .study > .side-col .spar-settings .row { gap: .4rem; flex-wrap: nowrap; }
  .study > .side-col .spar-settings select { min-width: 0; flex: 1 1 0; padding: .4em .6em; font-size: .88rem; }
  .study > .side-col .spar-settings label.row { flex: none; font-size: .88rem; white-space: nowrap; }
  .study > .side-col .spar-coaching > .panel.muted { padding: .55rem .9rem; }
}
@media (pointer: coarse) and (max-width: 760px) {
  .study > .side-col .spar-settings select { font-size: 16px; }   /* no zoom on focus */
}
/* openings: the book moves in a row, with "More" (Stockfish, your games) at its end when there's no room */
.op-book-row { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.op-book-row > .op-next, .op-book-row > .op-none { flex: 1 1 auto; min-width: 0; }
@container op (max-width: 420px) {
  .op-book-row > .op-next { margin-right: 0; }
  .op-spots-head .op-h3 { display: none; }
  .op-spots-head .fit-slot > button.fit-more { margin-left: auto; }
}
@media (max-width: 760px) and (min-height: 521px) and (max-height: 780px) {
  .op-study .op-head { padding: .3rem .45rem; }
  .op-study .op-modes button { min-height: 32px; padding: .15em .5em; }
  .op-study .op-details .panel { padding: .4rem .7rem; }
}
@media (max-width: 900px) and (min-height: 521px), (max-width: 1099px) and (orientation: portrait), (max-height: 520px) {
  /* openings: one row of book moves you swipe through, wherever the details are fitted */
  .op-study > .side-col:not(.as-sheet) .op-next { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .op-study > .side-col:not(.as-sheet) .op-next::-webkit-scrollbar { display: none; }
  .op-study > .side-col:not(.as-sheet) button.op-chip { flex: none; }
}
@media (max-width: 760px) and (min-height: 521px) and (max-height: 780px) {
  .op-study button.op-spot { padding: .3rem .6rem; line-height: 1.3; }
}
@media (max-width: 900px) and (min-height: 521px), (max-width: 1099px) and (orientation: portrait), (max-height: 520px) {
  .study.op-study > .side-col .op-head { padding: .45rem .55rem; }
  .study.op-study > .side-col .op-details .panel { padding: .5rem .75rem; }
  .study > .side-col .pager .step { height: 32px; min-height: 0; }
}
@media (max-width: 760px) and (min-height: 521px) and (max-height: 780px) {
  .study.op-study > .side-col .op-head { padding: .3rem .45rem; }
  .study.op-study > .side-col .op-details .panel { padding: .4rem .7rem; }
}
@container op (max-width: 420px) {
  /* the tabs, the book moves and Stockfish in one phone-sized card */
  .op-study .op-modes button { min-height: 34px; }
  .op-study button.op-chip { min-height: 36px; }
  .op-study button.op-eng { min-height: 34px; }
  .op-study .op-next { padding-top: .05rem; padding-bottom: .15rem; }
}
/* a compacted coach card keeps its row of buttons on one line: "More" gives way first */
.coach.compacted .actions { flex-wrap: nowrap; }
.coach.compacted .actions > button, .coach.compacted .actions .pager { flex: none; }
.coach.compacted .actions button.fit-more { flex: 0 1 auto; min-width: 3.2rem; }