/* ==========================================================================
   Opening Trainer — chess.com-flavoured theme
   Dark warm-grey chrome, green accents, green/bone board.
   The layout rules (fixed-height shell, container-query board sizing,
   capped right-hand panels, breakpoints) are unchanged — only the skin.
   ========================================================================== */

:root {
  /* brand + chrome */
  --green: #81b64c;
  --green-hi: #a3d160;
  --green-lo: #4e7837;
  --on-green: #ffffff;

  --bg: #302e2b;
  --bg-2: #262522;
  --bg-well: #21201d;
  --panel: #262522;
  --panel-2: #2b2926;
  --panel-hi: #3a3835;
  --line: #3d3b38;
  --line-soft: #35332f;

  --text: #ededed;
  --muted: #a5a29c;

  --good: #81b64c;
  --bad: #fa412d;
  --warn: #f7c631;

  /* per-opening identity colour; overwritten by app.js */
  --accent: #81b64c;

  /* board — chess.com green / bone */
  --sq-light: #ebecd0;
  --sq-dark: #739552;
  --sq-light-ink: #739552;
  --sq-dark-ink: #ebecd0;

  --radius: 8px;
  --radius-sm: 6px;
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.28), 0 10px 22px rgba(0, 0, 0, 0.24);

  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 var(--font);
  overflow: hidden;
}

button {
  font: inherit;
  color: inherit;
}

/* ───────────────────────────── shell ───────────────────────────── */

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  letter-spacing: 0.1px;
  white-space: nowrap;
}

.brand-glyph {
  color: var(--green);
  font-size: 23px;
  line-height: 1;
}

.brand-text {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.2px;
}

.modes {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-well);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
}

.mode-tab {
  border: 0;
  background: transparent;
  padding: 6px 17px;
  border-radius: 7px;
  cursor: pointer;
  color: var(--muted);
  font-weight: 700;
  font-size: 13.5px;
  transition: background 0.15s, color 0.15s;
}

.mode-tab:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

.mode-tab.active {
  background: var(--panel-hi);
  color: #fff;
}

.engine-status {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #6b6862;
  box-shadow: 0 0 0 3px rgba(107, 104, 98, 0.18);
}

.dot.ok {
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(129, 182, 76, 0.2);
}

.dot.off {
  background: var(--bad);
  box-shadow: 0 0 0 3px rgba(250, 65, 45, 0.18);
}

.workspace {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 268px minmax(320px, 1fr) 372px;
  gap: 14px;
  padding: 14px;
  overflow: hidden;
}

.col {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #4a4845 transparent;
}

.col-board {
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  padding: 0;
}

.col::-webkit-scrollbar {
  width: 9px;
}

.col::-webkit-scrollbar-thumb {
  background: #4a4845;
  border-radius: 6px;
}

/* ───────────────────────────── panels ───────────────────────────── */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 13px;
  box-shadow: var(--shadow);
  flex: 0 0 auto;
}

.panel-grow {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.panel-title {
  margin: 0 0 9px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: var(--text);
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 7px;
}

.muted {
  color: var(--muted);
}

.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
}

/* ───────────────────────────── buttons ───────────────────────────── */

.btn {
  appearance: none;
  border: 1px solid transparent;
  background: #3c3b39;
  color: #fff;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  transition: background 0.14s, box-shadow 0.08s, transform 0.05s, color 0.14s;
  white-space: nowrap;
}

.btn:hover:not(:disabled) {
  background: #4a4845;
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-accent {
  background: var(--green);
  border-color: transparent;
  color: var(--on-green);
  box-shadow: inset 0 -3px 0 0 var(--green-lo);
}

.btn-accent:hover:not(:disabled) {
  background: var(--green-hi);
}

.btn-accent:active:not(:disabled) {
  box-shadow: inset 0 -1px 0 0 var(--green-lo);
}

.btn-ghost {
  background: transparent;
  border-color: #4a4845;
  color: var(--text);
}

.btn-ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.07);
}

.btn-small {
  padding: 4px 9px;
  font-size: 12px;
  border-radius: var(--radius-sm);
}

/* ─────────────────────────── opening list ─────────────────────────── */

.opening-list,
.line-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.opening-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.opening-item {
  display: grid;
  grid-template-columns: 4px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  cursor: pointer;
  transition: border-color 0.14s, background 0.14s;
}

.opening-item:hover {
  background: var(--panel-hi);
}

.opening-item.active {
  border-color: var(--ochre, var(--green));
  background: var(--panel-hi);
}

.opening-bar {
  width: 4px;
  height: 30px;
  border-radius: 3px;
  background: var(--ochre, var(--green));
}

.opening-name {
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.25;
}

.opening-sub {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.3;
}

.side-badge {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 3px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.side-badge.white {
  background: #ebecd0;
  color: #4a6b33;
}

.side-badge.black {
  background: #2b2926;
  color: #d5d2cc;
  border: 1px solid #4a4845;
}

/* ─────────────────────────── line list ─────────────────────────── */

.line-list {
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: -4px;
  padding: 4px;
}

.line-item {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 12.5px;
}

.line-item:hover {
  background: var(--panel-hi);
}

.line-item.active {
  background: #38352f;
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

.line-eco {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  flex: 0 0 auto;
}

.line-name {
  line-height: 1.35;
}

.tag {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 1px 5px;
  border-radius: 4px;
  background: #3c3b39;
  color: #cfccc6;
}

.tag.core {
  background: color-mix(in srgb, var(--green) 30%, transparent);
  color: #dff0c7;
}

.tag.rare,
.tag.extra {
  background: #3f3a4b;
  color: #c9bce4;
}

.tag.trappy,
.tag.tricky,
.tag.sharp {
  background: #4a3a24;
  color: #f0c48a;
}

.tag.lesson {
  background: #2f3d26;
  color: #c4e39f;
}

/* ───────────────────────────── board ───────────────────────────── */

/* The board takes the whole column, and the things that used to be stacked
   above and below it — the two player plates, the buttons, the eval bar and the
   status line — move into a rail beside it.  A wide window leaves empty space
   either side of the square, and the rail lives there, which frees the full
   height of the column for the board.  When the column is too nearly square for
   that rail to pay for itself app.js flips to `.rail-below` and the rail becomes
   a band under the board instead.

   `.board-area` is a size container so the stage can cap its own width with
   100cqh (there is no point being wider than the square) — that is what keeps
   the board and its rail centred as a pair. */
.board-area {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: 10px;
  justify-content: center;
  container-type: size;
}

.rail-beside {
  flex-direction: row;
  align-items: stretch;
}

.rail-below {
  flex-direction: column;
}

/* the board sits in this stage and is sized to the largest square that fits it,
   while the page itself never scrolls */
.board-stage {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rail-beside .board-stage {
  flex: 1 1 auto;
  max-width: 100cqh; /* square: the stage never needs to be wider than it is tall */
}

.rail-below .board-stage {
  flex: 1 1 auto;
}

/* the rail: plates, buttons, eval bar, status line */
.board-rail {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

/* beside the board it is a narrow column, so the buttons stack */
.rail-beside .board-rail {
  flex: 0 0 160px;
  align-self: flex-start;
  max-height: 100%;
  overflow: auto;
  scrollbar-width: thin;
}

.rail-beside .board-rail .player-strip {
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.rail-beside .board-rail .controls {
  flex-direction: column;
  align-items: stretch;
}

.rail-beside .board-rail .status-line {
  width: auto;
  text-align: left;
}

/* under the board it is a band, so the same pieces lay out in rows */
.rail-below .board-rail {
  flex: 0 0 auto;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.rail-below .board-rail .player-strip {
  flex: 1 1 120px;
}

.rail-below .board-rail .controls {
  flex: 1 1 100%;
}

.rail-below .board-rail .eval,
.rail-below .board-rail .status-line {
  flex: 1 1 100%;
}

.player-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 11px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.player-strip.active-turn {
  border-color: var(--green);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 40%, transparent);
}

.player-name {
  font-weight: 700;
}

.player-strip .you {
  color: var(--green);
}

.player-meta {
  color: var(--muted);
  font-size: 12px;
  font-family: var(--mono);
}

.board-host {
  position: relative;
  width: var(--board-size, 100%);
  height: var(--board-size, auto);
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 14px 30px rgba(0, 0, 0, 0.34);
  overflow: hidden;
  touch-action: none;
  user-select: none;
}

/* The board is the largest square that fits the free space, worked out by the
   layout engine so the whole board always stays on screen without scrolling.
   Browsers without container query units fall back to the JS in app.js. */
@supports (container-type: size) and (width: 1cqw) {
  .board-stage {
    container-type: size;
  }
  .board-host {
    width: min(100cqw, 100cqh);
    height: min(100cqw, 100cqh);
  }
}

.board-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 100%;
  height: 100%;
  container-type: size;
}

.square {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8vmin;
  font-size: 9.4cqw;
  line-height: 1;
}

.square.light {
  background: var(--sq-light);
}

.square.dark {
  background: var(--sq-dark);
}

/* chess.com highlights: translucent yellow for the move, black dots for targets */

.square.last {
  box-shadow: inset 0 0 0 100px rgba(246, 246, 105, 0.5);
}

.square.selected {
  box-shadow: inset 0 0 0 100px rgba(246, 246, 105, 0.62);
}

.square.hint {
  box-shadow: inset 0 0 0 100px rgba(129, 182, 76, 0.45);
}

.square.check {
  background: radial-gradient(circle, #fa412d 12%, transparent 72%), var(--sq-dark);
}

.square.light.check {
  background: radial-gradient(circle, #fa412d 12%, transparent 72%), var(--sq-light);
}

.square.target::after {
  content: "";
  position: absolute;
  width: 32%;
  height: 32%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.16);
}

.square.target-capture::after {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  border: 0.55cqw solid rgba(0, 0, 0, 0.16);
}

.square.hover {
  outline: 0.75cqw solid rgba(255, 255, 255, 0.72);
  outline-offset: -0.75cqw;
}

.square.drag-source .piece-slot {
  opacity: 0.3;
}

/* the SVG that holds the piece gradients: present for reference, never drawn */
.piece-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ── pieces ──
   The artwork comes from public/js/pieces.js, where every shape is tagged with
   the light/dark role of the paint it was drawn with: `fw`/`fb` for its fill
   and `sw`/`sb` for its stroke.  A colour class on the piece maps those roles
   onto the palette, and a `.pieces-<id>` class on the board host picks the
   treatment — so one geometry serves every set.  `.piece` is shared by the
   pieces on the board, the drag ghost and the dialog previews.  The rules with
   no set ancestor are the Neo look, the default, so a board always has pieces
   even if the class is missing. */

.piece {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.piece-slot {
  width: 100%;
  height: 100%;
  cursor: grab;
}

.piece-svg {
  display: block;
  width: 100%;
  height: 100%;
  /* the artwork expects rounded line ends, as drawn */
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Neo: a slightly heavier rim than the artwork's own, plus a soft shadow
     that lifts the piece off the board */
  stroke-width: 1.8;
  filter: drop-shadow(0 0.6px 0.9px rgba(0, 0, 0, 0.42));
}

/* nothing is painted unless a role class says so (SVG would default to black) */
.piece-svg * {
  fill: none;
  stroke: none;
}

/* what the artwork's light or dark paint means for White and for Black.
   `--pc-fill`  the body of the piece
   `--pc-ink`   its engraved detail (a knight's eye, a king's cross)
   `--pc-wstroke`/`--pc-bstroke`  what its light/dark strokes become          */
.piece.white {
  --pc-fill: url(#pc-fill-light);
  --pc-ink: #3a3630;
  --pc-wstroke: #eceae2;
  --pc-bstroke: #55504a;
}

.piece.black {
  --pc-fill: url(#pc-fill-dark);
  --pc-ink: #f0ede5;
  --pc-wstroke: #f0ede5;
  --pc-bstroke: #6a645b;
}

.piece-svg .fw {
  fill: var(--pc-fill);
}

.piece-svg .fb {
  fill: var(--pc-ink);
}

.piece-svg .sw {
  stroke: var(--pc-wstroke);
}

.piece-svg .sb {
  stroke: var(--pc-bstroke);
}

/* Classic — the artwork as drawn: flat fills under dark engraved lines */
.pieces-classic .piece.white {
  --pc-fill: #fbfaf6;
  --pc-ink: #2b2927;
  --pc-wstroke: #fbfaf6;
  --pc-bstroke: #2b2927;
}

.pieces-classic .piece.black {
  --pc-fill: #31302d;
  --pc-ink: #f2f0e6;
  --pc-wstroke: #f2f0e6;
  --pc-bstroke: #31302d;
}

.pieces-classic .piece-svg {
  stroke-width: 1.5;
  filter: none;
}

/* Flat — plain silhouettes: the detail lines are painted in the body colour */
.pieces-flat .piece.white {
  --pc-fill: #ffffff;
  --pc-ink: #ffffff;
  --pc-wstroke: #ffffff;
  --pc-bstroke: rgba(0, 0, 0, 0.3);
}

.pieces-flat .piece.black {
  --pc-fill: #2b2b2b;
  --pc-ink: #2b2b2b;
  --pc-wstroke: #2b2b2b;
  --pc-bstroke: #2b2b2b;
}

.pieces-flat .piece-svg {
  stroke-width: 1.2;
  filter: none;
}

/* Glass — a translucent body under an opaque rim, so it reads on any square */
.pieces-glass .piece.white {
  --pc-fill: rgba(255, 255, 255, 0.5);
  --pc-ink: #4a453d;
  --pc-wstroke: rgba(255, 255, 255, 0.9);
  --pc-bstroke: #4a453d;
}

.pieces-glass .piece.black {
  --pc-fill: rgba(26, 24, 22, 0.5);
  --pc-ink: rgba(255, 255, 255, 0.92);
  --pc-wstroke: rgba(255, 255, 255, 0.92);
  --pc-bstroke: rgba(255, 255, 255, 0.7);
}

.pieces-glass .piece-svg {
  stroke-width: 2.1;
  filter: drop-shadow(0 1px 1.4px rgba(0, 0, 0, 0.5));
}

.piece-slot.dragging-hidden {
  visibility: hidden;
}

.coord {
  position: absolute;
  font-size: 1.5cqw;
  font-weight: 700;
  color: var(--sq-light-ink);
  pointer-events: none;
}

.coord-file {
  right: 4%;
  bottom: 1%;
}

.coord-rank {
  left: 4%;
  top: 1%;
}

.square.dark .coord {
  color: var(--sq-dark-ink);
  opacity: 0.9;
}

.drag-layer {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

.drag-piece {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  will-change: transform;
}

.board-host.dragging {
  cursor: grabbing;
}

/* ───────────────────────────── eval bar ───────────────────────────── */

.eval {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* `.eval` sets display, so the [hidden] attribute needs to win explicitly */
.eval[hidden] {
  display: none;
}

.eval-track {
  position: relative;
  flex: 1;
  height: 10px;
  border-radius: 5px;
  background: #403d39;
  overflow: hidden;
  border: 1px solid var(--line);
}

.eval-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 50%;
  background: linear-gradient(90deg, #ffffff, #e6e6e6);
  transition: width 0.4s ease;
}

.eval-text {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  min-width: 52px;
  text-align: right;
}

/* ───────────────────────────── controls ───────────────────────────── */

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  width: 100%;
}

.status-line {
  width: 100%;
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
  min-height: 18px;
}

.status-line.good {
  color: var(--green);
}

.status-line.bad {
  color: var(--bad);
}

.status-line.warn {
  color: var(--warn);
}

/* ───────────────────────────── coach ───────────────────────────── */

/* The right column is a fixed-height flex column.  Coach notes and the mode
   panel can grow very tall (long theory notes, trap briefings), so each is
   capped and scrolls internally — that keeps the tab bar and its pane on
   screen and the page itself scroll-free. */
.col-right > .coach {
  flex: 0 1 auto;
  min-height: 0;
  max-height: 44%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.col-right > .mode-panel {
  flex: 0 1 auto;
  min-height: 0;
  max-height: 22%;
  overflow: auto;
  scrollbar-width: thin;
}

/* Reps mode: the grading buttons are the primary action, so the panel keeps its
   full content height (which is bounded and small) and the coach panel — which
   scrolls internally — absorbs the squeeze on short windows. */
.col-right > .mode-panel.roomy {
  flex: 0 0 auto;
  max-height: none;
}

.col-right > .panel-grow {
  flex: 1 1 auto;
  min-height: 150px;
}

.coach-body {
  font-size: 13.5px;
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
}

.coach-body::-webkit-scrollbar {
  width: 9px;
}

.coach-body::-webkit-scrollbar-thumb {
  background: #4a4845;
  border-radius: 6px;
}

.coach-body p {
  margin: 0 0 9px;
}

.coach-body p:last-child {
  margin-bottom: 0;
}

.coach-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--accent);
  font-weight: 800;
  margin-bottom: 5px;
}

.coach-move {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.coach-ideas {
  margin: 9px 0 0;
  padding: 9px 11px;
  list-style: none;
  background: var(--bg-well);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}

.coach-ideas li {
  position: relative;
  padding-left: 15px;
  margin-bottom: 4px;
  color: #d6d3cd;
}

.coach-ideas li:last-child {
  margin-bottom: 0;
}

.coach-ideas li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--green);
}

.coach-warn {
  margin-top: 9px;
  padding: 8px 11px;
  border-left: 3px solid var(--bad);
  background: rgba(250, 65, 45, 0.1);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 12.5px;
  color: #ffd7d1;
}

.coach-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}

/* ───────────────────────────── tabs ───────────────────────────── */

.tabbar {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 4px;
  background: var(--bg-well);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  flex: 0 0 auto;
}

.tab {
  flex: 1 1 auto;
  min-width: 58px;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 6px 4px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

.tab:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

.tab.active {
  background: var(--panel-hi);
  color: #fff;
}

.tabbody {
  overflow: auto;
  min-height: 0;
  flex: 1 1 auto;
  font-size: 13px;
}

.tabbody::-webkit-scrollbar {
  width: 9px;
}

.tabbody::-webkit-scrollbar-thumb {
  background: #4a4845;
  border-radius: 6px;
}

/* move list — chess.com style: two plies per row, highlighted current move */

.movetable {
  display: grid;
  grid-template-columns: 30px 1fr 1fr;
  gap: 2px 6px;
  font-size: 13px;
}

.movetable .no {
  color: var(--muted);
  font-weight: 700;
}

.movenode {
  cursor: pointer;
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid transparent;
  font-weight: 700;
}

.movenode:hover {
  background: var(--panel-hi);
}

.movenode.current {
  background: var(--green);
  color: var(--on-green);
  font-weight: 800;
}

.movenode.you {
  border-color: color-mix(in srgb, var(--green) 55%, transparent);
}

.movenode.wrong {
  border-color: var(--bad);
  color: var(--bad);
}

/* theory */

.theory h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--green);
  margin: 14px 0 6px;
}

.theory h3:first-child {
  margin-top: 0;
}

.theory p {
  margin: 0 0 8px;
  color: #d6d3cd;
  font-size: 13px;
}

.theory ul {
  margin: 0 0 4px;
  padding-left: 18px;
  color: #d6d3cd;
  font-size: 12.8px;
}

.theory li {
  margin-bottom: 5px;
}

.theory .intro {
  color: #fff;
  font-size: 13.5px;
}

/* progress */

.prog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.stat {
  background: var(--bg-well);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}

.stat .k {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.stat .v {
  font-size: 19px;
  font-weight: 700;
  font-family: var(--mono);
  color: #fff;
}

.bar {
  height: 7px;
  border-radius: 4px;
  background: #403d39;
  overflow: hidden;
  margin: 5px 0 12px;
}

.bar > i {
  display: block;
  height: 100%;
  background: var(--green);
  border-radius: 4px;
  transition: width 0.35s ease;
}

.recall-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--mono);
  font-size: 12px;
}

.recall-list li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--bg-well);
}

/* ───────────────────────────── reps (spaced repetition) ───────────────────────────── */

/* The week strip — one cell per day, Monday first.  The same strip appears in
   the Reps panel and in the Progress tab. */
.rep-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin: 2px 0 7px;
}

.rep-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 21px;
  border-radius: 5px;
  background: var(--bg-well);
  border: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
}

.rep-cell.partial {
  background: color-mix(in srgb, var(--green) 24%, var(--bg-well));
  border-color: color-mix(in srgb, var(--green) 45%, transparent);
  color: #dff0c7;
}

.rep-cell.done {
  background: var(--green);
  border-color: var(--green-hi);
  color: var(--on-green);
}

.rep-cell.today {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 65%, transparent);
}

.rep-today {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
}

.rep-today b {
  font-size: 14px;
  color: #fff;
}

.rep-flame {
  color: var(--warn);
}

.rep-bar {
  height: 6px;
  border-radius: 4px;
  background: #403d39;
  overflow: hidden;
  margin: 6px 0 8px;
}

.rep-bar > i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* The four grading buttons: Again / Hard / Good / Easy, each with its wait. */
.rep-grades {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin: 8px 0;
}

.rep-grade {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 6px 2px;
  line-height: 1.15;
}

.rep-grade b {
  font-size: 11.5px;
}

.rep-grade span {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
}

.rep-grade.good,
.rep-grade.easy {
  border-color: color-mix(in srgb, var(--green) 42%, var(--line));
}

.rep-grade.again.suggested {
  border-color: color-mix(in srgb, var(--bad) 70%, var(--line));
  background: color-mix(in srgb, var(--bad) 14%, transparent);
}

.rep-grade:hover {
  background: var(--panel-hi);
}

/* The per-line "new / due / 3d" chip in the line list (Reps mode only). */
.rep-chip {
  display: inline-block;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 10px;
  background: #3c3b39;
  color: #cfccc6;
  vertical-align: middle;
}

.rep-chip.new {
  background: color-mix(in srgb, var(--accent) 30%, var(--bg-well));
  color: #fff;
}

.rep-chip.due {
  background: var(--green);
  color: var(--on-green);
  font-weight: 700;
}

/* ───────────────────────────── mode panel ───────────────────────────── */

.mode-panel {
  border-color: color-mix(in srgb, var(--line) 70%, var(--green));
}

.field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
  font-size: 12.5px;
}

.field:last-child {
  margin-bottom: 0;
}

.field input[type="range"] {
  flex: 1;
  accent-color: var(--green);
}

.field select {
  background: var(--bg-well);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 4px 7px;
  font: inherit;
}

.field .val {
  font-family: var(--mono);
  color: var(--green);
  min-width: 42px;
  text-align: right;
  font-weight: 700;
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* difficulty levels (Play vs Stockfish) */

.levels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
  gap: 5px;
  width: 100%;
}

.level-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 5px 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
}

.level-chip:hover:not(:disabled) {
  background: var(--panel-hi);
  border-color: #4a4845;
}

.level-chip .level-elo {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 400;
  color: var(--muted);
}

.level-chip.active {
  background: var(--green);
  border-color: transparent;
  color: var(--on-green);
  box-shadow: inset 0 -2px 0 0 var(--green-lo);
}

.level-chip.active .level-elo {
  color: rgba(255, 255, 255, 0.85);
}

.level-chip:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.level-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  font-size: 12.5px;
}

.level-head .level-name {
  font-weight: 700;
  color: var(--green);
}

/* quiz choices */

.choices {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.choice {
  text-align: left;
  border: 1px solid var(--line);
  background: var(--panel-2);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 13px;
}

.choice:hover:not(:disabled) {
  background: var(--panel-hi);
}

.choice.correct {
  border-color: var(--green);
  background: rgba(129, 182, 76, 0.16);
  color: #d8efbd;
}

.choice.wrong {
  border-color: var(--bad);
  background: rgba(250, 65, 45, 0.14);
  color: #ffd2cc;
}

/* ───────────────────────────── toast ───────────────────────────── */

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  background: #3c3b39;
  border: 1px solid var(--line);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: 13.5px;
  font-weight: 600;
  z-index: 60;
}

.toast.good {
  border-color: var(--green);
  background: #3f4d2e;
}

.toast.bad {
  border-color: var(--bad);
  background: #4a2823;
}

/* ───────────────────────────── traps ───────────────────────────── */

.trap-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trap-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel-2);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}

.trap-card:hover {
  border-color: color-mix(in srgb, var(--green) 55%, transparent);
  transform: translateY(-1px);
}

.trap-card.active {
  border-color: var(--green);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 35%, transparent);
}

.trap-name {
  font-weight: 700;
  font-size: 13.5px;
  color: #fff;
}

.trap-theme {
  font-size: 11.5px;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
}

.trap-when {
  font-size: 12px;
  color: var(--muted);
}

.trap-badge {
  align-self: flex-start;
  margin-top: 3px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
}

.trap-badge.ok {
  color: var(--on-green);
  background: var(--green);
  border-color: transparent;
  font-weight: 800;
}

/* plies the trainee has to find */
.movenode.answer {
  border-color: color-mix(in srgb, var(--warn) 60%, transparent);
  color: var(--warn);
  font-weight: 700;
}

.movenode.answer.you {
  background: color-mix(in srgb, var(--good) 24%, transparent);
  border-color: var(--good);
  color: #d8efbd;
}

/* ───────────────────────────── grades + engine ───────────────────────────── */

/* chess.com move-classification colours */
:root {
  --brilliant: #26c2a3;
  --great: #749bbf;
  --excellent: #96bc4b;
  --goodmove: #95b776;
  --inaccuracy: #f7c631;
  --mistake: #ffa459;
  --blunder: #fa412d;
}

.grade {
  display: inline-block;
  margin-left: 3px;
  font-weight: 800;
  font-size: 11px;
  line-height: 1;
  vertical-align: 1px;
  font-family: var(--mono);
}

.grade-brilliant { color: var(--brilliant); }
.grade-great { color: var(--great); }
.grade-best { color: var(--green); }
.grade-excellent { color: var(--excellent); }
.grade-good { color: var(--goodmove); }
.grade-inaccuracy { color: var(--inaccuracy); }
.grade-mistake { color: var(--mistake); }
.grade-blunder { color: var(--blunder); }

.engine-pane {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.engine-pane .k,
.engine-band .k,
.engine-summary .k,
.engine-legend .k,
.coach-engine .k,
.engine-progress .k {
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.engine-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  background: var(--bg-well);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.engine-eval-big {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
}

.engine-eval {
  font-family: var(--mono);
  color: var(--text);
}

.engine-line {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "move eval" "pv pv";
  gap: 2px 8px;
  align-items: baseline;
  width: 100%;
  text-align: left;
  padding: 6px 9px;
  background: var(--bg-well);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.engine-line:hover {
  border-color: var(--green);
}

.engine-line.best {
  border-color: var(--great);
}

.engine-line-move {
  grid-area: move;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 14px;
}

.engine-line-eval {
  grid-area: eval;
  font-family: var(--mono);
  color: var(--muted);
  justify-self: end;
  font-size: 12.5px;
}

.engine-line-pv {
  grid-area: pv;
  color: var(--muted);
  font-size: 11.5px;
  font-family: var(--mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.engine-book,
.engine-band {
  padding: 8px 10px;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}

.engine-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.engine-grade {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-well);
}

.engine-grade .grade {
  font-size: 15px;
  margin: 0;
}

.grade-bg-brilliant { border-color: var(--brilliant); }
.grade-bg-great { border-color: var(--great); }
.grade-bg-best { border-color: var(--green); }
.grade-bg-inaccuracy { border-color: var(--inaccuracy); }
.grade-bg-mistake { border-color: var(--mistake); }
.grade-bg-blunder { border-color: var(--blunder); }

.engine-progress .bar {
  margin-top: 4px;
}

.engine-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.engine-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.grade-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  font-size: 11.5px;
}

.grade-pill .grade {
  margin: 0;
}

.engine-notable {
  margin: 0;
  padding-left: 16px;
  font-size: 12.5px;
}

.engine-notable-btn {
  border: 0;
  background: transparent;
  padding: 0 2px;
  font-family: var(--mono);
  font-weight: 700;
  cursor: pointer;
  color: #fff;
}

.engine-notable-btn:hover {
  color: var(--green);
}

.engine-depth {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

.engine-depth input[type="range"] {
  flex: 1 1 auto;
  accent-color: var(--green);
}

.engine-depth .val {
  font-family: var(--mono);
  color: var(--text);
}

.engine-legend {
  border-top: 1px solid var(--line-soft);
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
}

.legend-row .grade {
  margin-right: 4px;
}

.link {
  border: 0;
  background: transparent;
  color: var(--green);
  cursor: pointer;
  padding: 0;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
}

.link:hover {
  color: var(--green-hi);
}

/* Stockfish block inside the coach panel */
.coach-engine {
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--bg-well);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--green);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.coach-engine-best {
  font-size: 12.5px;
}

.coach-engine-pv {
  font-family: var(--mono);
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.coach-engine-grade {
  font-size: 12.5px;
}

/* install button in the topbar */
.install-btn {
  margin-left: auto;
  margin-right: 14px;
  white-space: nowrap;
}

.install-btn:not([hidden]) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 1180px) {
  .install-btn {
    margin-right: 10px;
  }
}

/* ───────────────────────────── responsive ───────────────────────────── */

@media (max-width: 1240px) {
  .workspace {
    grid-template-columns: 236px minmax(0, 1fr) 330px;
    gap: 12px;
    padding: 12px;
  }
  .brand-text {
    display: none;
  }
}

@media (max-width: 1040px) {
  .workspace {
    grid-template-columns: 198px minmax(0, 1fr) 296px;
    gap: 10px;
    padding: 10px;
  }
  .player-strip {
    padding: 4px 9px;
    font-size: 12px;
  }
  .controls .btn {
    padding: 6px 10px;
    font-size: 12.5px;
  }
}

/* short windows: trim the chrome so the board keeps a useful size */
@media (max-height: 660px) {
  .topbar {
    padding: 6px 12px;
  }
  .workspace {
    gap: 10px;
    padding: 10px;
  }
  .player-strip {
    padding: 3px 9px;
    font-size: 12px;
  }
  .controls .btn {
    padding: 5px 9px;
    font-size: 12.5px;
  }
  .status-line {
    font-size: 12px;
    min-height: 0;
  }
}

/* narrow windows: a compact repertoire strip on top, then the board beside the
   coach & notes panel — nothing scrolls except the panels themselves */
@media (max-width: 780px) {
  /* the engine status may shrink (with an ellipsis) instead of widening the
     header past the edge of the window */
  .engine-status {
    min-width: 0;
  }
  #engine-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .workspace {
    grid-template-columns: minmax(0, 1fr) 288px;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }
  .col-left {
    grid-column: 1 / -1;
    grid-row: 1;
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .col-left .panel {
    padding: 6px 8px;
  }
  .col-left .panel-title,
  .col-left .panel-grow,
  .col-left .opening-sub,
  .col-left .side-badge {
    display: none;
  }
  .col-left .opening-list {
    flex-direction: row;
    gap: 6px;
  }
  .col-left .opening-item {
    grid-template-columns: 4px 1fr;
    padding: 4px 8px;
    min-width: 108px;
  }
  .col-left .opening-bar {
    height: 18px;
  }
  .col-board {
    grid-column: 1;
    grid-row: 2;
  }
  .col-right {
    grid-column: 2;
    grid-row: 2;
  }
  .col-right > .coach {
    max-height: 40%;
  }
  .col-right > .mode-panel {
    max-height: 24%;
  }
  .col-right > .panel-grow {
    min-height: 118px;
  }
}

/* phones: the repertoire strip on top, the board below it, then the panels.
   The board is still sized to the free space, so only the panels scroll. */
@media (max-width: 620px) {
  .workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 2fr) minmax(0, 1fr);
  }
  .col-left {
    grid-column: 1;
    grid-row: 1;
  }
  .col-board {
    grid-column: 1;
    grid-row: 2;
  }
  .col-right {
    grid-column: 1;
    grid-row: 3;
  }
  .col-right > .coach {
    max-height: 30%;
  }
  .col-right > .mode-panel {
    max-height: 18%;
  }
  .col-right > .panel-grow {
    min-height: 104px;
  }
  .player-strip {
    padding: 3px 9px;
    font-size: 11.5px;
  }
  .controls .btn {
    padding: 5px 8px;
    font-size: 12px;
  }
  .status-line {
    font-size: 11.5px;
  }
}

/* ─────────────────────── board & pieces dialog ─────────────────────── */

/* The only overlay in the app: board colours and piece set live here so the
   shell itself never has to scroll to make room for them. */

.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(12, 11, 10, 0.6);
  backdrop-filter: blur(2px);
}

/* `.modal` sets display, so [hidden] needs to win explicitly */
.modal[hidden] {
  display: none;
}

.modal-card {
  width: min(432px, 100%);
  max-height: min(92vh, 640px);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
}

.modal-head h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.modal-body {
  padding: 12px 14px 14px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #4a4845 transparent;
}

.modal-body::-webkit-scrollbar {
  width: 9px;
}

.modal-body::-webkit-scrollbar-thumb {
  background: #4a4845;
  border-radius: 6px;
}

.modal-label {
  margin: 4px 0 8px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--muted);
}

.modal-foot {
  display: flex;
  justify-content: flex-end;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
}

.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}

.swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 7px 6px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s;
}

.swatch:hover {
  background: var(--panel-hi);
}

.swatch.active {
  border-color: var(--green);
  box-shadow: inset 0 0 0 1px var(--green);
}

.swatch-name {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text);
}

.swatch.active .swatch-name {
  color: var(--green);
}

/* a 2×2 miniature of the board the swatch would apply */
.swatch-board {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  overflow: hidden;
}

.swatch-board i:nth-child(1),
.swatch-board i:nth-child(4) {
  background: var(--sw-light);
}

.swatch-board i:nth-child(2),
.swatch-board i:nth-child(3) {
  background: var(--sw-dark);
}

/* the same miniature, but showing the set's knight on the current board */
.set-preview {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  overflow: hidden;
}

.set-preview .set-sq {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sw-light);
}

.set-preview .set-sq.dark {
  background: var(--sw-dark);
}

.set-preview .piece-slot {
  cursor: default;
}

@media (max-width: 620px) {
  .modal {
    padding: 10px;
  }
  .swatches {
    grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  }
  /* the icon alone is enough once the topbar is this tight */
  .ap-label {
    display: none;
  }
  /* and the tabs themselves get tighter so the header still fits a phone */
  .topbar {
    gap: 8px;
    padding: 6px 8px;
  }
  .mode-tab {
    padding: 5px 9px;
    font-size: 12.5px;
  }
}