/* /my-puzzles and /my-mistakes (was static/my_puzzles.css until 2026-10-17, when the
   second page arrived). Colours come from telemetry.css; the board's own squares and marks
   are tokens here, the way explorer.css keeps its board colours. No hex below :root. */
:root{
  --sq-light:#e3dfcf; --sq-dark:#718b88;
  --sq-coord-on-light:#1c3434; --sq-coord-on-dark:#eaf1ec;
  --mark-last:#cab653; --mark-good:#2dd4bf; --mark-bad:#f2665f;
  --shadow:#000000;
  /* The lobby's wordmark colours (pages/lobby.html: --gold and the .mast-word hover), so
     the logo here is the same logo. */
  --brand:#e64100; --brand-hover:#f3d8ad; --brand-ink:#eef3f9;
}

html{scrollbar-gutter:stable}
.mp-head{display:flex; justify-content:space-between; align-items:center;
  padding:14px clamp(16px, 4vw, 40px); border-bottom:1px solid var(--line)}
/* The lobby's wordmark (pages/lobby.html .mast-logo): an orange pawn, "Lobby" in orange,
   "Chess" in ink, the pawn lifting on hover. Libre Baskerville comes from Google Fonts on
   the lobby; these pages are cross-origin isolated and cannot load it, so Georgia, the
   lobby's own fallback, sets it here. */
.mp-logo{display:flex; align-items:baseline; gap:9px; text-decoration:none; white-space:nowrap}
.mp-logo .mark{font-size:clamp(15px, 0.5vw + 7px, 21px); line-height:1; color:var(--brand);
  display:inline-block; transition:transform .45s cubic-bezier(.16, 1, .3, 1)}
.mp-logo .word{font-family:'Libre Baskerville',Georgia,serif;
  font-size:clamp(19px, 0.75vw + 8px, 29px); font-weight:700; letter-spacing:.005em;
  line-height:1; color:var(--brand-ink); transition:color .3s ease}
.mp-logo .word b{color:var(--brand); font-weight:700}
.mp-logo:hover .mark{transform:translateY(-4px) rotate(-4deg)}
.mp-logo:hover .word{color:var(--brand-hover)}
.mp-logo:focus-visible{outline:2px solid var(--brand); outline-offset:4px; border-radius:4px}
@media (prefers-reduced-motion: reduce){ .mp-logo:hover .mark{transform:none} }
.mp-who{font-size:13px; color:var(--muted)}

/* Three columns (owner, 2026-10-17): the picker, the board, the words. The board is as large
   as fits: the viewport height left under the header and intro, or the width left beside
   the 240px picker and the 400px panel, whichever is smaller. --board is the whole board
   column, eval bar included; the board takes what the bar leaves, and --board-h is the
   board's own height, which the picker matches. The page is exactly as wide as the three
   columns, so the title and the picker share one left edge. */
.mp{--side-cols:696px;   /* 240 picker + 28 gap + 28 gap + 400 panel */
  --board:clamp(280px, min(calc(100svh - var(--board-off, 230px)), calc(100vw - 820px)), 1040px);
  max-width:calc(var(--board) + var(--side-cols) + 2 * clamp(16px, 4vw, 40px));
  margin:0 auto; padding:20px clamp(16px, 4vw, 40px) 40px}
.mp-intro h1{font-size:clamp(26px, 1.6vw + 12px, 36px); margin:4px 0 6px}
.mp-lede{margin:0 0 16px; color:var(--muted); max-width:90ch}
.mp-empty{margin:8px 0 28px; padding:18px 20px; background:var(--panel);
  border:1px solid var(--line); border-radius:12px; max-width:62ch}
.mp-empty[hidden]{display:none}

/* ---- the stage: picker, board, words ---- */
.mp-stage{display:grid; grid-template-columns:240px auto minmax(300px, 400px);
  gap:22px 28px; align-items:start; --board-h:var(--board)}
.mp-stage.has-evalbar{--board-h:calc(var(--board) - 18px)}   /* 10px bar + 8px gap */
.mp-stage[hidden]{display:none}
.mp-board-wrap{display:flex; gap:8px; width:var(--board); min-width:0}
.mp-board{display:grid; grid-template-columns:repeat(8, 1fr); flex:1 1 auto; min-width:0;
  aspect-ratio:1;
  border-radius:6px; overflow:hidden; user-select:none; -webkit-user-select:none;
  touch-action:manipulation}
.mp-board .square{position:relative; background:var(--sq-light); border:0; padding:0;
  margin:0; aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  cursor:default}
.mp-board .square.dark{background:var(--sq-dark)}
.mp-board.armed .square{cursor:pointer}
.mp-board .square img{width:88%; height:88%; pointer-events:none}
.mp-board .square.last{outline:3px solid var(--mark-last); outline-offset:-3px}
.mp-board .square.chosen{box-shadow:inset 0 0 0 4px var(--mark-good)}
.mp-board .square.good{box-shadow:inset 0 0 0 4px var(--mark-good)}
.mp-board .square.bad{box-shadow:inset 0 0 0 4px var(--mark-bad)}
.mp-board .square.lift img{opacity:0}
.mp-board .coord{position:absolute; font:700 clamp(8px, .8vw, 11px)/1 system-ui;
  pointer-events:none; color:var(--sq-coord-on-light); opacity:.85}
.mp-board .square.dark .coord{color:var(--sq-coord-on-dark)}
.mp-board .coord.file{bottom:2px; left:3px}
.mp-board .coord.rank{top:2px; right:3px}
/* The dragged piece rides a fixed layer; it must not take pointer events or the drop's
   elementFromPoint would find it instead of the square. Same as explorer.css. */
.mp-drag{position:fixed; z-index:10000; pointer-events:none; display:flex;
  align-items:center; justify-content:center}
.mp-drag img{width:88%; height:88%;
  filter:drop-shadow(0 8px 16px color-mix(in srgb, var(--shadow) 60%, transparent))}

.mp-side{min-width:0}
.mp-ask{margin:0 0 8px; font-size:19px; font-weight:600; color:var(--ink)}
.mp-meta{margin:0 0 14px; color:var(--muted); font-size:14px}
.mp-status{margin:0 0 14px; min-height:1.5em; font-size:15px; color:var(--muted)}
.mp-status.good{color:var(--teal)}
.mp-status.bad{color:var(--red)}
.mp-tools{display:flex; flex-wrap:wrap; gap:9px}
.mp-tools [hidden]{display:none}
.mp-line{list-style:none; display:flex; flex-wrap:wrap; gap:6px 12px; margin:16px 0 0;
  padding:0; font:600 15px/1.5 "IBM Plex Mono",ui-monospace,monospace;
  font-variant-numeric:tabular-nums; color:var(--ink)}
.mp-line .them{color:var(--muted); font-weight:400}
.mp-engine{margin:18px 0 0; font-size:12.5px; color:var(--faint)}

/* ---- the picker: left of the board, as tall as it, scrolling when long ---- */
.mp-list-wrap{height:var(--board-h); display:flex; flex-direction:column; min-height:0;
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px}
.mp-list-wrap[hidden]{display:none}
.mp-list-head{margin:0 0 10px; flex:none}
/* /instant-replays: First Mistakes, then by phase (owner, 2026-11-02). One column beside the
   board; across the panel when the picker drops under the board. */
.replay-filter{flex:none; display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:4px; margin:0 0 12px; padding:0 0 12px; border-bottom:1px solid var(--line)}
.replay-filter-btn{display:flex; align-items:baseline; gap:10px; width:100%; text-align:left;
  background:transparent; border:1px solid transparent; border-radius:8px; color:var(--muted);
  padding:6px 10px; font:inherit; font-size:13.5px; cursor:pointer}
.replay-filter-btn:hover:not(:disabled){border-color:var(--teal)}
.replay-filter-btn:focus-visible{outline:2px solid var(--teal); outline-offset:2px}
.replay-filter-btn:disabled{color:var(--faint); cursor:default}
.replay-filter-btn[aria-pressed="true"]{background:var(--raised); border-color:var(--gold);
  color:var(--ink); font-weight:600}
.replay-filter-count{margin-left:auto; font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:12.5px; font-weight:400; font-variant-numeric:tabular-nums}
.mp-list{list-style:none; margin:0; padding:0 4px 0 0; display:grid; align-content:start;
  grid-template-columns:1fr; gap:6px; overflow-y:auto; flex:1; min-height:0;
  overscroll-behavior:contain}
.mp-list button{background:var(--raised)}
.mp-list button{width:100%; text-align:left; background:var(--panel);
  border:1px solid var(--line); border-radius:9px; color:var(--ink); padding:9px 12px;
  font:inherit; font-size:13.5px; cursor:pointer; display:flex; gap:10px;
  align-items:baseline}
.mp-list button:hover{border-color:var(--teal)}
.mp-list button:focus-visible{outline:2px solid var(--teal); outline-offset:2px}
.mp-list button.here{border-color:var(--gold)}
.mp-list .mk{font-family:"IBM Plex Mono",ui-monospace,monospace; width:1.2em; flex:none;
  color:var(--faint)}
.mp-list .mk.solved{color:var(--teal)}
.mp-list .mk.missed{color:var(--red)}
.mp-list .sub{color:var(--muted); font-size:12.5px}

/* ---- /my-mistakes: the score panel ---- */
.mm-scores{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px;
  margin:0 0 14px}
.mm-scores[hidden]{display:none}
.mm-score{background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:10px 12px; min-width:0}
.mm-score .k{font:600 10.5px/1.2 "IBM Plex Mono",ui-monospace,monospace; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint)}
.mm-score .n{font:600 26px/1.15 "IBM Plex Mono",ui-monospace,monospace;
  font-variant-numeric:tabular-nums; color:var(--ink); margin-top:4px}
.mm-score .w{font-size:13px; color:var(--muted)}
/* Eval (White's side) under each number. Win/draw/loss is not shown. */
.mm-score .e{font:600 14px/1.3 "IBM Plex Mono",ui-monospace,monospace;
  font-variant-numeric:tabular-nums; color:var(--ink); margin-top:8px; min-height:1.3em}

/* The eval bar beside the board: White's share of the expected score. White's end sits
   at White's side of the board, so it flips with the board. */
.mp-evalbar{flex:none; width:10px; border-radius:5px; overflow:hidden; position:relative;
  background:var(--raised); border:1px solid var(--line)}
.mp-evalbar[hidden]{display:none}
.mp-evalbar i{position:absolute; left:0; right:0; bottom:0; height:50%;
  background:var(--ink); transition:height .35s ease}
.mp-evalbar.flip i{bottom:auto; top:0}
.mm-score.excellent .n, .mm-score.excellent .w{color:var(--teal)}
.mm-score.good .n{color:var(--ink)}
.mm-score.okay .n, .mm-score.okay .w{color:var(--gold)}
.mm-score.weak .n, .mm-score.weak .w{color:var(--red)}
.mm-score.pending .n{color:var(--faint)}
.mp-list .mk.open{color:var(--gold)}
.mp-list .best{font-family:"IBM Plex Mono",ui-monospace,monospace; margin-left:auto;
  color:var(--muted); font-size:12.5px; font-variant-numeric:tabular-nums}


/* ---- /my-mistakes layout (owner, 2026-10-17) ----
   Title and explanation on one line; boxes at the top of the panel, then the prompt on one
   line, then the game; whose move it is and the buttons, all one style, under the board.
   --board-off is the height reserved above and below the board: the one-line header and the
   button row under the board, so the board plus its buttons still fit on screen. */
.mp.mm{--board-off:200px}
.mm-intro{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 18px; margin:0 0 16px}
.mm-intro h1{margin:0}
.mm-intro .mp-lede{margin:0}
.mp-board-col{display:flex; flex-direction:column; gap:12px; width:var(--board); min-width:0}
.mp-board-col .mp-board-wrap{width:100%}
.mm-under{display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px}
.mm-turn{font-size:15px; font-weight:600; color:var(--ink); white-space:nowrap}
.mm-under .mp-tools{margin-left:auto}
.mm-ask{white-space:nowrap; font-size:clamp(15px, 0.55vw + 8px, 18px); margin:0 0 6px}

/* Too narrow for three columns: the picker drops under the board, full width. */
@media (max-width: 1240px){
  .mp{--side-cols:432px; --board:clamp(280px, min(calc(100svh - var(--board-off, 230px)), calc(100vw - 560px)), 1040px)}
  .mp-stage{grid-template-columns:auto minmax(300px, 400px)}
  .mp-list-wrap{grid-column:1 / -1; grid-row:2; height:auto; max-height:420px}
  .mp-list{grid-template-columns:repeat(auto-fill, minmax(220px, 1fr))}
}
@media (max-width: 900px){
  .mp{--board:min(calc(100vw - 2 * clamp(16px, 4vw, 40px)), calc(100svh - 120px)); max-width:none}
  .mp-stage{grid-template-columns:1fr}
  .mp-list-wrap{grid-row:auto; order:3; max-height:min(480px, 70svh)}
  .mp-board-wrap{justify-self:center}
  .mp-ask{font-size:17px}
}