/* ============================================================================
   LobbyChess "Engine Telemetry" design system.

   Extracted from restyle_paper.py's new_css(), where it was trapped inside a
   post-hoc HTML transform and only the Weekly Column could use it. This is the
   shared version: pages link it and get the paper's look for free.

   First consumer: pages/miniatures.html.

   Rules:
     * Every colour comes from a token. Never hardcode a hex in a consuming page.
       The v1.0 pages accumulated 60+ improvised colours precisely because there
       was nowhere to put a shared one.
     * Three type roles, three jobs: Playfair display for headings, Merriweather
       for reading, IBM Plex Mono for anything numeric (with tabular figures so
       evaluations line up in a column).
   ============================================================================ */

:root{
  --bg:#0a0e13; --panel:#111823; --raised:#161f2c;
  --line:#25313f; --line-soft:#1b2531;
  --ink:#e8eef5; --muted:#93a4b6; --faint:#5f7183;
  --teal:#2dd4bf; --gold:#e6b845; --red:#f2665f; --blue:#6aa8ff;
  color-scheme: dark;
}

*{box-sizing:border-box}

body.telemetry{
  background:var(--bg); color:var(--ink); margin:0; padding:0;
  font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:16px; line-height:1.62; -webkit-font-smoothing:antialiased;
}
body.telemetry a{color:var(--teal)}
body.telemetry ::selection{background:var(--teal); color:#04231f}

/* ---- type roles ---- */
.tel-display{font-family:'Playfair Display',Georgia,serif; color:var(--ink);
  line-height:1.14; text-wrap:balance; margin:0}
.tel-eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--faint)}
.tel-mono{font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-variant-numeric:tabular-nums}
.tel-muted{color:var(--muted)}
.tel-faint{color:var(--faint)}

/* ---- surfaces ---- */
.tel-panel{background:var(--panel); border:1px solid var(--line); border-radius:12px;
  display:flex; flex-direction:column; min-height:0; overflow:hidden}
.tel-panel-head{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
  padding:11px 13px; border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; flex:none}
.tel-panel-body{overflow-y:auto; min-height:0; flex:1}

/* ---- controls ---- */
.tel-btn{background:var(--raised); border:1px solid var(--line); color:var(--ink);
  border-radius:8px; padding:7px 13px; cursor:pointer; font-size:13px;
  font-family:inherit}
.tel-btn:hover{border-color:var(--teal); color:var(--teal)}
.tel-btn:focus-visible{outline:none; box-shadow:0 0 0 2px rgba(45,212,191,.55)}
.tel-btn.on{background:var(--teal); border-color:var(--teal); color:#04231f; font-weight:600}

/* ---- badge legend + badge colours (the paper's public vocabulary) ---- */
.badge-legend{display:flex; flex-wrap:wrap; gap:9px; justify-content:center}
.badge-legend b{display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:9px; padding:7px 12px;
  background:var(--panel); font-weight:400; font-size:12.5px; color:var(--muted)}
.b-brilliant{color:var(--teal)} .b-great{color:var(--teal)}
.b-blunder{color:var(--red)}    .b-miss{color:var(--red)}
.b-mate{color:var(--gold)}      .b-mistake{color:var(--gold)}

/* ---- Brilliant glitter -----------------------------------------------------
   The rarest badge should look rare. A diamond sheen sweeps across the badge
   and two facets twinkle out of phase with it.

   Applied by adding .lc-glitter alongside whatever badge class a page already
   uses, so nothing about existing colour or layout changes. Everything is drawn
   in pseudo-elements: no extra markup, and a page that does not opt in is
   untouched.
   -------------------------------------------------------------------------- */
:root{
  --glitter:#bdf3ff;          /* the highlight running across the facet */
  --glitter-soft:rgba(189,243,255,.55);
}

.lc-glitter{position:relative; overflow:hidden; isolation:isolate}

/* the sweep */
.lc-glitter::before{
  content:''; position:absolute; inset:-1px; z-index:1; pointer-events:none;
  background:linear-gradient(115deg,
    transparent 38%, var(--glitter-soft) 47%,
    var(--glitter) 50%, var(--glitter-soft) 53%, transparent 62%);
  transform:translateX(-130%);
  animation:lc-glitter-sweep 3.4s cubic-bezier(.35,0,.2,1) infinite;
}

/* two facets, twinkling off the beat of the sweep */
.lc-glitter::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(circle at 22% 32%, var(--glitter) 0 1px, transparent 2.5px),
    radial-gradient(circle at 78% 70%, var(--glitter) 0 1px, transparent 2.5px);
  opacity:0;
  animation:lc-glitter-twinkle 3.4s ease-in-out infinite;
}

@keyframes lc-glitter-sweep{
  0%, 58%   {transform:translateX(-130%)}
  78%, 100% {transform:translateX(130%)}
}
@keyframes lc-glitter-twinkle{
  0%, 40%, 100% {opacity:0}
  52%           {opacity:1}
  64%           {opacity:.25}
  72%           {opacity:.9}
  84%           {opacity:0}
}

/* A badge that never stops moving is a badge nobody can read. */
@media (prefers-reduced-motion: reduce){
  .lc-glitter::before{animation:none; transform:translateX(130%)}
  .lc-glitter::after{animation:none; opacity:.7}
}

/* ============================================================================
   The board studio: picker | board | notation.
   Consuming pages set --tel-board-size; the side columns are sized to the board
   and scroll internally, so the board governs the row rather than the lists.
   ============================================================================ */
.tel-studio{
  /* The board COLUMN fills ~90% of the viewport; the board itself is what remains
     after the header, the two player strips, the controls and the moment card.
     Sizing the board at a flat 90vh pushes all of those below the fold at 1080p. */
  --tel-chrome: 340px;
  --tel-board-size: min(calc(100vh - var(--tel-chrome)), calc(100vw - 660px));
  display:grid; grid-template-columns:260px minmax(0,1fr) 320px;
  gap:16px; align-items:start; padding:16px; max-width:1900px; margin:0 auto;
}
.tel-boardcol{display:flex; flex-direction:column; align-items:center; gap:10px;
  min-width:0}
.tel-board{width:var(--tel-board-size); max-width:100%; aspect-ratio:1/1}
/* chessboard.js rewraps the target at runtime, so this must not use a > selector */
.tel-boardcol [class*="board-b72b1"]{border:1px solid var(--line) !important;
  border-radius:10px; overflow:hidden}
.tel-side{height:var(--tel-board-size); max-height:var(--tel-board-size)}

/* ---- notation ---- */
.mv-body{overflow-y:auto; padding:6px 8px 10px; min-height:0; flex:1;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:13px}
.mv-row{display:grid; grid-template-columns:30px 1fr 1fr; gap:3px; align-items:center}
.mv-no{color:var(--faint); font-size:11.5px; text-align:right; padding-right:3px}
.mv-cell{padding:4px 7px; border-radius:6px; color:var(--ink); cursor:pointer;
  white-space:nowrap; overflow:hidden; display:flex; align-items:baseline; gap:5px;
  border-left:3px solid transparent}
.mv-cell:hover{background:var(--raised)}
.mv-cell.cur{background:var(--teal); color:#04231f; font-weight:600}
.mv-cell.cur i,.mv-cell.cur .mv-ev{color:#04231f !important; opacity:.75}
.mv-cell i{font-style:normal; font-weight:600}
.mv-ev{margin-left:auto; font-size:11px; color:var(--faint);
  font-variant-numeric:tabular-nums}
/* critical moments get a rail rather than a separate panel */
.mv-cell.is-decisive{border-left-color:var(--red)}
.mv-cell.is-turning{border-left-color:var(--gold)}
.mv-empty{color:var(--faint); padding:12px 13px; font-size:12.5px}

/* ---- "should have been played" ---- */
.mv-eng{margin-left:4px; padding:0 4px; font-size:10px; line-height:1.5;
  color:var(--teal); background:rgba(45,212,191,.12);
  border:1px solid rgba(45,212,191,.4); border-radius:4px; cursor:pointer}
.mv-eng:hover{background:rgba(45,212,191,.3); color:var(--ink)}
.mv-cell.cur .mv-eng{color:#04231f; background:rgba(4,35,31,.12);
  border-color:rgba(4,35,31,.35)}
.eng-bar{padding:9px 13px; background:var(--raised); border-bottom:1px solid var(--line)}
.eng-top{display:flex; justify-content:space-between; align-items:center; gap:8px;
  margin-bottom:6px}
.eng-label{font-size:12px; color:var(--ink); font-weight:600}
.eng-exit{font-size:10px; padding:2px 8px; color:var(--muted); background:transparent;
  border:1px solid var(--line); border-radius:4px; cursor:pointer; flex-shrink:0}
.eng-exit:hover{color:var(--ink)}
.eng-plies{display:flex; flex-wrap:wrap; gap:4px;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11.5px}
.eng-ply{padding:1px 6px; border-radius:4px; background:var(--panel);
  color:var(--muted); cursor:pointer}
.eng-ply:hover{color:var(--ink)}
.eng-ply.cur{background:var(--teal); color:#04231f; font-weight:600}
.eng-ctl{display:flex; align-items:center; gap:6px; margin-top:7px}
.eng-ctl button{min-width:24px; padding:1px 6px; font-size:11px; color:var(--teal);
  background:rgba(45,212,191,.12); border:1px solid rgba(45,212,191,.4);
  border-radius:4px; cursor:pointer}
.eng-ctl button:hover{background:rgba(45,212,191,.3)}
.eng-hint{margin-left:auto; font-size:9.5px; color:var(--faint)}

/* ============================================================================
   Responsive. The paper stacks its studio at 1400px; these breakpoints match so
   the two products behave the same way as a reader narrows the window.
   ============================================================================ */
@media(max-width:1400px){
  .tel-studio{grid-template-columns:220px minmax(0,1fr); }
  .tel-studio .tel-notation{grid-column:1 / -1; height:340px; max-height:340px}
  .tel-studio{--tel-board-size: min(calc(100vh - 240px), calc(100vw - 300px))}
}
@media(max-width:900px){
  .tel-studio{grid-template-columns:minmax(0,1fr); padding:10px;
    --tel-board-size: min(88vw, 60vh)}
  .tel-studio .tel-picker{order:2; height:240px; max-height:240px}
  .tel-studio .tel-boardcol{order:1}
  .tel-studio .tel-notation{order:3; height:300px; max-height:300px}
  .tel-side{height:auto}
}

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