/* Dvoretsky Lab — dark terminal palette. Cyan is the interactive/accent
   colour, red is the trainer's pen and appears only where something went
   wrong, green marks the move that held, amber is caution. */
:root {
  --paper: #0A0E14;
  --card: #10151D;
  --card-sunk: #0D1117;
  --ink: #D7E0E8;
  --ink-soft: #8FA3B3;
  --ink-faint: #6B7F8F;
  --ink-ghost: #4A5A68;   /* non-text only: tick marks, rules, disabled glyphs */
  --rule: #263140;
  --rule-soft: #1A232E;
  --blue: #39D9FF;
  --blue-tint: #0D2830;
  --olive: #5EF2A0;
  --olive-tint: #0D2419;
  --red: #FF5C6A;
  --red-tint: #2A1216;
  --amber: #FFCF5C;
  --amber-tint: #2A2110;
  --sq-light: #1C2836;
  --sq-dark: #0A1420;
  --sq-from: #123A33;
  --sq-to: #16493F;
  --sq-hint: #39D9FF;

  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --r: 0px;
  --shadow: 0 0 0 1px var(--rule-soft);
  --glow: 0 0 0 1px var(--blue), 0 0 10px -3px var(--blue);

  /* One scale, set on <html>, so every rem in the sheet follows the reader's
     choice in the masthead. Nothing below is sized in px. */
  --ui-scale: 1;

  --fs-xs: .8125rem;   /* labels, tick marks — never prose */
  --fs-sm: .875rem;    /* secondary prose: captions, coach asides */
  --fs-md: .9375rem;   /* tables, notation, controls */
  --fs-lg: 1rem;       /* body */
}

/* Board colour presets — swap by setting data-board-theme on <html>. */
:root[data-board-theme="green"] { --sq-light: #16281c; --sq-dark: #081410; --sq-from: #163a1c; --sq-to: #1c4a22; --sq-hint: #5ef2a0; }
:root[data-board-theme="amber"] { --sq-light: #2a2013; --sq-dark: #140f08; --sq-from: #3a2c10; --sq-to: #4a3812; --sq-hint: #ffcf5c; }
:root[data-board-theme="mono"]  { --sq-light: #262b31; --sq-dark: #0e1114; --sq-from: #33383e; --sq-to: #3f454c; --sq-hint: #d7e0e8; }

/* The boards of the big sites: their square colours, their last-move highlight
   (blended onto each square the way they draw it), their move dots, and
   coordinates in the opposite square's colour. Colours only -- the pieces stay
   this app's own, drawn solid with an edge so they read on a light board. */
:root[data-board-theme="lichess-brown"] { --sq-light: #f0d9b5; --sq-dark: #b58863; --sq-from: #cdd26a; --sq-to: #aaa23a;
  --sq-hint: #14551e; --coord-on-light: #b58863; --coord-on-dark: #f0d9b5; }
:root[data-board-theme="lichess-blue"]  { --sq-light: #dee3e6; --sq-dark: #8ca2ad; --sq-from: #c3d887; --sq-to: #92b166;
  --sq-hint: #14551e; --coord-on-light: #8ca2ad; --coord-on-dark: #dee3e6; }
:root[data-board-theme="chesscom-green"] { --sq-light: #ebecd0; --sq-dark: #779556; --sq-from: #f5f682; --sq-to: #b9ca43;
  --sq-hint: #3c3c1e; --coord-on-light: #779556; --coord-on-dark: #ebecd0; }
:root[data-board-theme="chesscom-brown"] { --sq-light: #edd6b0; --sq-dark: #b88762; --sq-from: #f6eb72; --sq-to: #dcc34b;
  --sq-hint: #3c2e1e; --coord-on-light: #b88762; --coord-on-dark: #edd6b0; }
:root[data-board-theme="chesscom-blue"]  { --sq-light: #eae9d2; --sq-dark: #4b7399; --sq-from: #f5f482; --sq-to: #a5b966;
  --sq-hint: #1e2e3c; --coord-on-light: #4b7399; --coord-on-dark: #eae9d2; }
:root[data-board-theme^="lichess-"], :root[data-board-theme^="chesscom-"] {
  --piece-w: #ffffff; --piece-w-edge: 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 1px 1px rgba(0,0,0,.5);
  --piece-b: #111111; --piece-b-edge: 0 0 1px rgba(255,255,255,.55);
}

html { font-size: calc(17px * var(--ui-scale)); }

* { box-sizing: border-box; }



body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--fs-lg);
  line-height: 1.62;
  -webkit-text-size-adjust: 100%;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 { font-weight: 600; line-height: 1.2; margin: 0 0 .4em; letter-spacing: -0.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 {
  font-size: var(--fs-sm); margin-bottom: .6em; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-soft);
}
h3::before { content: '// '; color: var(--rule); }
h4 { font-size: 1rem; color: var(--ink); font-weight: 600; }
p { margin: 0 0 .75em; max-width: 66ch; }
p:last-child { margin-bottom: 0; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 2px; }
small { font-size: var(--fs-sm); color: var(--ink-soft); }

button, input, select, textarea { font: inherit; color: inherit; }

button {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: .42em 1em;
  cursor: pointer;
  font-size: var(--fs-md);
  min-height: 2.1em;
}
button:hover:not(:disabled) { background: var(--card-sunk); border-color: var(--blue); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { background: var(--blue); color: #04141A; border-color: var(--blue); font-weight: 600; }
button.primary:hover:not(:disabled) { background: #6BE5FF; border-color: #6BE5FF; box-shadow: var(--glow); }
button.quiet { background: transparent; border-color: transparent; color: var(--blue); padding: .3em .5em; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
button.quiet:hover { background: var(--blue-tint); border-color: transparent; text-decoration-color: var(--blue); }

input[type=text], input[type=password], select, textarea {
  background: var(--card-sunk);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: .45em .6em;
  font-size: var(--fs-md);
}
label { display: inline-flex; align-items: center; gap: .4em; }
input:focus-visible, button:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}
textarea { width: 100%; resize: vertical; font-family: var(--mono); line-height: 1.6; font-size: var(--fs-lg); }

/* ---------- masthead ---------- */
.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--card);
  padding: .75rem 1.25rem .35rem;
  position: sticky; top: 0; z-index: 40;
}
/* Once you scroll into the report the ruler has done its job, so it folds away
   and gives the reading area the height back. It returns at the top. */
.masthead .ruler {
  overflow: hidden;
  max-height: 7.5rem;
  transition: max-height .25s ease, opacity .2s ease;
}
.masthead.compact .ruler { max-height: 0; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .masthead .ruler { transition: none; } }
.masthead-row { display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap; }
.wordmark { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.015em; margin: 0; }
.wordmark::before { content: '> '; color: var(--olive); }
.wordmark span { color: var(--ink-soft); font-weight: 400; font-size: var(--fs-md); }
.masthead-tools { margin-left: auto; display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.masthead-tools input[type=text] { width: 15rem; }
.textsize { font-size: var(--fs-sm); color: var(--ink-soft); gap: .3em; }
.textsize select { padding: .25em .35em; font-size: var(--fs-sm); }

/* ---------- strength ruler (the hero) ---------- */
.ruler { padding: .55rem 0 .2rem; }
.ruler-track {
  position: relative; height: 46px;
  border-bottom: 1px solid var(--ink);
  margin: 0 .5rem;
}
.ruler-tick { position: absolute; bottom: 0; width: 1px; height: 7px; background: var(--ink-ghost); }
.ruler-tick.major { height: 13px; background: var(--ink-soft); }
.ruler-tick-label {
  position: absolute; bottom: -1.45rem; transform: translateX(-50%);
  font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-faint);
}
.ruler-band {
  position: absolute; bottom: 0; height: 22px;
  background: var(--blue-tint); border-left: 1px solid var(--rule); border-right: 1px solid var(--rule);
}
.ruler-pin { position: absolute; bottom: 0; transform: translateX(-50%); text-align: center; transition: left .7s cubic-bezier(.2,.7,.3,1); }
.ruler-pin .stem { width: 2px; height: 26px; margin: 0 auto; background: var(--ink); }
.ruler-pin .head {
  font-family: var(--mono); font-size: var(--fs-sm); white-space: nowrap;
  padding: .1em .45em; border: 1px solid var(--ink); background: var(--ink); color: var(--card);
  border-radius: var(--r);
}
.ruler-pin.hollow .head { background: var(--card); color: var(--ink-soft); border-color: var(--rule); }
.ruler-pin.hollow .stem { background: var(--rule); }
.ruler-pin.goal .head { background: var(--amber-tint); color: var(--amber); border-color: var(--amber); }
.ruler-pin.goal .stem { background: var(--amber); }
.ruler-caption { display: flex; gap: 1.25rem; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--ink-soft); margin-top: 1.6rem; padding: 0 .5rem; }
.ruler-caption b { font-family: var(--mono); font-weight: 600; color: var(--ink); }

@media (prefers-reduced-motion: reduce) { .ruler-pin { transition: none; } }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: .15rem; margin-top: .4rem; flex-wrap: wrap; }
.tab {
  border: 1px solid transparent; border-bottom: none;
  background: transparent; padding: .45em 1em; border-radius: var(--r) var(--r) 0 0;
  color: var(--ink-soft); font-size: var(--fs-lg); position: relative; top: 1px;
}
.tab:hover { color: var(--ink); background: var(--paper); }
.tab[aria-selected=true] {
  background: var(--paper); border-color: var(--rule); color: var(--blue); font-weight: 600;
  box-shadow: inset 0 2px 0 var(--blue);
}

/* ---------- layout ---------- */
main { padding: 1.3rem 1.25rem 4rem; max-width: 1400px; margin: 0 auto; }
.panel { display: none; }
.panel.active { display: block; }

.desk {
  display: grid; gap: 1.6rem; align-items: start;
  grid-template-columns: minmax(320px, min(640px, 46vw, calc(100vh - var(--mast-h, 8.5rem) - 5rem))) 1fr;
}
@media (max-width: 900px) {
  .desk { grid-template-columns: 1fr; }
  .desk .board-wrap { width: min(100%, calc(100vh - var(--mast-h, 8.5rem) - 7rem)); margin: 0 auto; }
}

.stack { display: flex; flex-direction: column; gap: 1.1rem; }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }

.sheet {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 1.05rem 1.15rem;
}
.sheet > h3:first-child, .sheet > h2:first-child { margin-top: 0; }

.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1.1rem; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.1rem; }

/* ---------- board ---------- */
.board-wrap { position: sticky; top: calc(var(--mast-h, 8.5rem) + .7rem); }
@media (max-width: 900px) { .board-wrap { position: static; } }

.board {
  display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr);
  border: 1px solid var(--ink); width: 100%; aspect-ratio: 1;
  user-select: none; touch-action: manipulation; position: relative;
  container-type: inline-size;   /* pieces size to the board, not the window */
}
.promo-pick {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
  display: flex; gap: .4rem; padding: .5rem; background: var(--card); border: 1px solid var(--ink);
  box-shadow: 0 6px 24px rgba(0,0,0,.5);
}
.promo-pick button {
  width: 3.2rem; height: 3.2rem; font-size: 2.1rem; line-height: 1; padding: 0;
  background: var(--card-sunk); border: 1px solid var(--rule); cursor: pointer;
}
.promo-pick button:hover, .promo-pick button:focus-visible { border-color: var(--blue); outline: none; }
.sq {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-width: 0; min-height: 0; overflow: hidden;   /* a glyph must never stretch its rank */
  font-size: min(7vw, 2.6rem); font-size: 9cqw; line-height: 1; cursor: default;
}
.sq.light { background: var(--sq-light); }
.sq.dark { background: var(--sq-dark); }
.sq.sel { box-shadow: inset 0 0 0 3px var(--blue); }
.sq.from { background: var(--sq-from); }
.sq.to { background: var(--sq-to); }
.sq.check { background: var(--red-tint); box-shadow: inset 0 0 0 3px var(--red); }
.sq.movable { cursor: pointer; }
.sq .dot {
  position: absolute; width: 26%; height: 26%; border-radius: 50%;
  background: var(--sq-hint); opacity: .55; pointer-events: none;
}
.sq.occupied .dot { width: 84%; height: 84%; border-radius: 50%; background: transparent; border: 3px solid var(--sq-hint); opacity: .6; }
.sq .coord { position: absolute; font-family: var(--mono); font-size: var(--fs-xs); font-weight: 600; }
.sq.light .coord { color: var(--coord-on-light, #4A5A68); }
.sq.dark .coord { color: var(--coord-on-dark, #2A3644); }
/* highlighted squares get a coordinate colour that still reads against the accent tint */
.sq.from .coord, .sq.to .coord, .sq.check .coord { color: rgba(255,255,255,.35); }
.sq .coord.f { bottom: 1px; right: 3px; }
.sq .coord.r { top: 1px; left: 3px; }
.piece { pointer-events: none; }
.piece.w { color: var(--piece-w, #F3F7FA); text-shadow: var(--piece-w-edge, 0 0 1px #04141A, 0 0 1px #04141A, 0 1px 2px rgba(0,0,0,.5)); }
.piece.b { color: var(--piece-b, #8FA3B3); text-shadow: var(--piece-b-edge, 0 0 1px #000, 0 0 4px rgba(0,0,0,.6)); }

.evalbar { display: flex; height: 8px; border: 1px solid var(--rule); margin-top: .5rem; background: var(--sq-dark); }
.evalbar i { display: block; background: #FBFCFA; height: 100%; transition: width .35s ease; }

.board-meta { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-md); color: var(--ink-soft); margin-top: .55rem; gap: .5rem; }

/* ---------- notation ---------- */
.moves { font-family: var(--mono); font-size: var(--fs-md); line-height: 1.9; }
.moves .num { color: var(--ink-faint); padding-right: .1em; }
.moves .mv { padding: .05em .3em; border-radius: var(--r); }   /* read, not pressed: no button look */
.moves .mv[aria-current=true] { background: var(--ink); color: var(--card); }
.moves .blunder { color: var(--red); font-weight: 700; }
.moves .mistake { color: var(--red); }
.moves .inacc { color: var(--amber); }

/* ---------- tables ---------- */
table { border-collapse: collapse; width: 100%; font-size: var(--fs-md); line-height: 1.45; }
th {
  text-align: left; font-weight: 600; color: var(--ink); background: var(--card-sunk);
  border-bottom: 1px solid var(--rule); padding: .45em .6em; font-size: var(--fs-sm);
}
th:first-child, td:first-child { padding-left: .5em; }
td { padding: .45em .6em; border-bottom: 1px solid var(--rule-soft); vertical-align: baseline; }
tbody tr:hover td { background: var(--paper); }
tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-family: var(--mono); }
/* Wide tables scroll rather than crushing their columns. */
.tablewrap { overflow-x: auto; margin: 0 -.35rem; padding: 0 .35rem; }
.bar { display: block; height: 8px; background: var(--blue); border-radius: 1px; min-width: 2px; }
.bar.red { background: var(--red); }
.bar.olive { background: var(--olive); }
.bar.amber { background: var(--amber); }

/* ---------- opening tree ---------- */
.opening-tree, .opening-tree ul { list-style: none; margin: 0; padding: 0; }
.opening-tree ul { margin-left: 1.1rem; padding-left: .8rem; border-left: 1px solid var(--rule-soft); }
.opening-tree li { margin: .15rem 0; }
.opening-tree .node { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; padding: .15rem .3rem; border-radius: var(--r); }
.opening-tree .node:hover { background: var(--paper); }
.opening-tree .san { font-family: var(--mono); font-weight: 600; }
.opening-tree .stat { font-size: var(--fs-sm); color: var(--ink-soft); }
.opening-tree .stat.bad { color: var(--red); font-weight: 600; }

/* ---------- candidate panels (dual sided) ---------- */
.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--rule); background: var(--card); }
@media (max-width: 620px) { .sides { grid-template-columns: 1fr; } }
.side { padding: .8rem .95rem; }
.side + .side { border-left: 1px solid var(--rule); }
@media (max-width: 620px) { .side + .side { border-left: none; border-top: 1px solid var(--rule); } }
.side-head { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .35rem; }
.side-head h4 { margin: 0; color: var(--ink); }
.side-head .tomove { font-size: var(--fs-xs); color: var(--blue); background: var(--blue-tint); border: 1px solid var(--blue); padding: .05em .4em; border-radius: var(--r); }
.cand { display: flex; align-items: baseline; gap: .6rem; font-family: var(--mono); font-size: var(--fs-md); padding: .22rem 0; border-bottom: 1px solid var(--rule-soft); }
.cand:last-child { border-bottom: none; }
.cand .mv { min-width: 4.4em; font-weight: 600; }
.cand .cp { color: var(--ink-soft); }
.cand .dl { color: var(--red); font-size: var(--fs-sm); }
.cand.top .mv { color: var(--olive); }

/* ---------- plan cards ---------- */
.calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; }
@media (max-width: 760px) { .calgrid { grid-template-columns: repeat(3, 1fr); } }
.day {
  border: 1px solid var(--rule); background: var(--card); border-radius: var(--r);
  padding: .5rem .55rem; min-height: 7rem; font-size: var(--fs-sm); cursor: pointer; text-align: left;
  line-height: 1.4;
}
.day:hover { background: var(--card-sunk); border-color: var(--blue); }
.day.today { border-color: var(--blue); border-width: 2px; }
.day.done { background: var(--olive-tint); }
.day .dnum { font-family: var(--mono); color: var(--ink-soft); font-weight: 600; display: block; margin-bottom: .15rem; }
.day ul { margin: .25rem 0 0; padding-left: .95rem; }
.day li { margin-bottom: .18rem; }
.day li.recall::marker { color: var(--blue); }
.day li.endgame::marker { color: var(--amber); }
.day li.sparring::marker { color: var(--olive); }

.block {
  border-left: 3px solid var(--rule); padding: .5rem 0 .5rem .8rem; margin-bottom: .7rem;
}
.block.recall { border-left-color: var(--blue); }
.block.motif { border-left-color: var(--red); }
.block.calculation { border-left-color: var(--ink); }
.block.endgame { border-left-color: var(--amber); }
.block.sparring { border-left-color: var(--olive); }
.block.review { border-left-color: var(--ink-faint); }
.block h4 { margin: 0; color: var(--ink); }
.block p { margin: .15rem 0 .35rem; font-size: var(--fs-md); color: var(--ink-soft); }

/* ---------- tags & status ---------- */
.tag {
  display: inline-block; font-size: var(--fs-xs); border: 1px solid var(--rule);
  border-radius: 999px; padding: .1em .6em; margin: 0 .25em .25em 0; color: var(--ink-soft);
  white-space: nowrap;
  background: var(--card);
}
.tag.red { border-color: var(--red); color: var(--red); background: var(--red-tint); }
.tag.olive { border-color: var(--olive); color: var(--olive); background: var(--olive-tint); }
.tag.amber { border-color: var(--amber); color: var(--amber); background: var(--amber-tint); }
.tag.blue { border-color: var(--blue); color: var(--blue); background: var(--blue-tint); }

.notice { border: 1px solid var(--rule); border-left: 4px solid var(--blue); background: var(--card); padding: .7rem .9rem; border-radius: var(--r); font-size: var(--fs-lg); margin-bottom: 1rem; }
.notice.warn { border-left-color: var(--amber); }
.notice.bad { border-left-color: var(--red); }

.empty { color: var(--ink-soft); font-size: var(--fs-lg); border: 1px dashed var(--rule); padding: 1.2rem 1.3rem; border-radius: var(--r); line-height: 1.6; }

.spin { display: inline-block; width: .8em; height: .8em; border: 2px solid var(--rule); border-top-color: var(--blue); border-radius: 50%; animation: sp .7s linear infinite; vertical-align: -1px; }
@keyframes sp { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2.5s; } }

.coach-note { border-left: 3px solid var(--red); padding: .35rem 0 .35rem .8rem; margin: .55rem 0; font-size: var(--fs-lg); line-height: 1.55; }
.coach-note.ok { border-left-color: var(--olive); }


.scroll { max-height: 26rem; overflow-y: auto; overscroll-behavior: contain; }
.scroll:focus-visible { outline: 2px solid var(--blue); }
.hidden { display: none !important; }
.ta-right { text-align: right; }
.mono { font-family: var(--mono); }
.soft { color: var(--ink-soft); }
/* Secondary, not small print. Most of the app's explanatory writing lands here,
   so it stays inside comfortable reading range and keeps its line height. */
.tiny { font-size: var(--fs-sm); line-height: 1.55; }
.tiny.mono { font-size: var(--fs-xs); }

/* trajectory chart — measured strength over successive syncs */
.traj { width: 100%; height: auto; display: block; margin: .2rem 0 .5rem; }
.traj-lab { font-family: var(--mono); font-size: 11px; fill: var(--ink-soft); }
.key { display: inline-block; width: 16px; height: 0; border-top-width: 3px; border-top-style: solid; vertical-align: middle; margin-right: .25rem; }
.key.olive { border-color: var(--olive); }
.key.faint { border-color: var(--ink-faint); border-top-style: dashed; }
.key.blue  { border-color: var(--blue); border-top-style: dashed; }

/* ---------- reading width ----------
   Long explanatory paragraphs inside wide sheets were running to 150 characters.
   Tables and charts still use the full width; only prose is measured. */
.sheet > p, .sheet > .tiny, .block p, .coach-note { max-width: 74ch; }

/* ---------- print ----------
   The strength report is the thing people take to a coach. */
@media print {
  .masthead, .tabs, button { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .panel { display: block !important; page-break-after: always; }
  .sheet { border-color: #999; break-inside: avoid; }
}

/* ---------- the analysis window ---------- */
.window-pick { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-bottom: 1rem; }
.window-pick label { font-family: var(--mono); color: var(--ink-soft); }
.window-pick input[type=range] { flex: 1 1 14rem; max-width: 26rem; accent-color: var(--blue); }
.window-pick #winLabel { min-width: 8.5rem; }

/* ---------- the Stockfish reader ---------- */
#sfPanel .row { gap: .6rem 1.4rem; }
.sf-now { display: flex; align-items: baseline; gap: .8rem; margin: .6rem 0 .2rem; }
.sf-eval { font: 600 1.7rem var(--mono); color: var(--ink); }
.sf-log { max-height: 16rem; overflow-y: auto; }
.sf-log td { padding-top: .2rem; padding-bottom: .2rem; }
.sf-log tr.sf-inaccuracy td:nth-child(n+4) { color: var(--amber); }
.sf-log tr.sf-mistake td:nth-child(n+4) { color: var(--red); }
.sf-log tr.sf-blunder td { color: var(--red); font-weight: 600; }

/* ---------- compared with titled players (Strength tab) ---------- */
.cmp-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: .6rem 0 .8rem; }
.cmp-picks { border: 1px solid var(--rule); padding: .5rem .8rem .7rem; margin: 0 0 1rem; }
.cmp-picks legend { padding: 0 .3rem; color: var(--ink-soft); }
.cmp-group { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; margin-top: .35rem; }
.cmp-group .tag { min-width: 2.4rem; text-align: center; }
.cmp-pick { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-sm); cursor: pointer; }
.cmp-chart { position: relative; }
.cmp-axis { position: relative; height: 2.2rem; margin-left: 13.5rem; margin-right: 6.5rem; border-bottom: 1px solid var(--rule); }
.cmp-tick { position: absolute; bottom: .2rem; transform: translateX(-50%); font: var(--fs-xs) var(--mono); color: var(--ink-soft); }
.cmp-floor { position: absolute; top: 0; height: 45%; border-left: 1px dashed var(--amber); }
.cmp-floor b { position: absolute; top: 0; left: .25rem; font: 600 var(--fs-xs) var(--mono); color: var(--amber); }
.cmp-rows { list-style: none; margin: 0; padding: 0; }
.cmp-row { display: grid; grid-template-columns: 13.5rem 1fr 6.5rem; align-items: center; min-height: 2.4rem; border-bottom: 1px solid var(--rule-soft); }
.cmp-who { display: flex; flex-direction: column; align-items: flex-start; font-size: var(--fs-sm); padding-right: .6rem; overflow-wrap: anywhere; }
.cmp-name .tag { margin-right: .3rem; }
.cmp-guide { position: absolute; top: 0; bottom: 0; border-left: 1px dashed rgba(255, 207, 92, .32); }
.cmp-track { position: relative; height: 1.6rem; }
.cmp-bar { position: absolute; top: .55rem; height: .5rem; background: var(--blue-tint); border: 1px solid var(--blue); }
.cmp-dot { position: absolute; top: .1rem; transform: translateX(-50%); min-width: 1.15rem; height: 1.15rem; line-height: 1.15rem;
  text-align: center; font: 600 .68rem var(--mono); color: var(--paper); background: var(--blue); border-radius: 50%; }
.cmp-dot.now { top: .45rem; min-width: .7rem; height: .7rem; }
.cmp-row.you .cmp-bar { background: var(--olive-tint); border-color: var(--olive); }
.cmp-row.you .cmp-dot { background: var(--olive); }
.cmp-row.measured .cmp-bar { background: transparent; border: 1px dashed var(--olive); }
.cmp-row.measured .cmp-dot { background: var(--olive); }
.cmp-val { text-align: right; font-size: var(--fs-sm); color: var(--ink-soft); }
@media (max-width: 720px) {
  .cmp-axis { margin-left: 0; margin-right: 0; }
  .cmp-row { grid-template-columns: 1fr auto; grid-template-areas: "who val" "track track"; padding: .35rem 0; }
  .cmp-who { grid-area: who; }
  .cmp-val { grid-area: val; }
  .cmp-track { grid-area: track; }
}