/* ════════════════════════════════════════════════════════════════════════
   Public VOD library — deepreview.lol/vods
   Design: "VOD Library.dc.html" (project League of Legends VOD Reviews,
   design system lol-deepreview c7d9a32e) for the page shell; the LEDGER
   itself is the desktop app's, not the design's concept table.

   ── Where these rules come from ──────────────────────────────────────
   Everything under "LEDGER" is lifted from public/ledger.css so the web
   table is pixel-identical to the app's vods tab, keeping the app's class
   names (.archive/.toolbar/.scroll/table.pool/.mu/.pr) so the two can be
   diffed by eye. The app sheet is ~225KB of which the pool table uses a
   tenth, so it is extracted rather than shipped: a public page should not
   carry the whole desktop library's CSS. IF YOU RESTYLE THE APP'S POOL
   TABLE, MIRROR IT HERE — the source rules are named in each block.

   Tokens are the design system's, which are byte-identical to the app's
   ledger.css :root and to relay-server/lib/web.js — one palette, three
   consumers.
   ════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Spline+Sans+Mono:wght@400;500;600&display=swap');

:root {
  --indigo-200: #c7c7f5; --indigo-300: #a5a5f0;
  --indigo-400: #8080ea; --indigo-500: #5e5ee2; --indigo-600: #4444d4; --indigo-700: #3636b0;
  --slate-950: #0c0d13; --slate-900: #14151e; --slate-850: #1b1d29;
  --slate-border: #292c3c; --slate-border-strong: #363a4e; --slate-hover: #252839;
  --slate-400: #8b8fa6; --slate-100: #e7e9f2;
  --green: #4dd17a; --gold: #f0c244; --red: #ff5d5d;

  --bg: var(--slate-950); --surface: var(--slate-900); --surface-raised: var(--slate-850);
  --surface-hover: var(--slate-hover);
  --border: var(--slate-border); --border-strong: var(--slate-border-strong);
  --text: var(--slate-100); --text-muted: var(--slate-400); --text-faint: #5c6075;
  --brand: var(--indigo-600); --brand-hover: var(--indigo-500); --accent: var(--indigo-400);
  --accent-soft: rgba(68, 68, 212, 0.14); --accent-border: rgba(96, 96, 226, 0.45);

  --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Required by lib/chrome.js HEADER_CSS (see its TOKENS_NEEDED note). Same
     values as relay-server/lib/web.js — one palette, and the shared header
     must render identically wherever it is mounted. */
  --cyan: #00d4d4; --red-dim: rgba(255, 93, 93, .14); --danger: var(--red);
  --text-on-brand: #fff; --focus-ring: var(--indigo-500);
  --tele-line: rgba(128, 128, 234, .22);
  --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus-ring);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --tcolors: background-color .1s var(--ease), border-color .1s var(--ease), color .1s var(--ease);
}

* { box-sizing: border-box; }
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border); border: 2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* The whole point of this page: it fills the viewport and never scrolls —
   only the ledger's own .scroll pane does. dvh, not vh, so mobile browser
   chrome collapsing doesn't leave a gap under the table. */
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-sans); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.page { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
a { color: var(--accent); text-decoration: none; }

/* ── Site header ───────────────────────────────────────────────────────
   Owned by lib/chrome.js (HEADER_CSS), inlined by the page. This page used
   to carry its own `.site-hdr` — a second house style that would have
   drifted from the account console the first time either was touched. */

/* ── Hero (design: the headline block + the two support lines) ────────── */
.hero {
  flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 40px;
  padding: 16px 20px 12px; max-width: 1560px; width: 100%; margin: 0 auto;
}
.hero-l { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hero h1 {
  margin: 0; font: 700 21px/1.2 var(--font-sans); letter-spacing: -.015em;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.hero .tiers { display: inline-flex; align-items: center; gap: 4px; }
.hero .tiers img { width: 24px; height: 24px; display: block; }
.hero .tiers .sl { color: var(--text-faint); font-weight: 400; }
.hero p { margin: 0; font: 400 12.5px/1.5 var(--font-sans); color: var(--text-muted); text-wrap: pretty; }
.hero p .mono { font-family: var(--font-mono); font-size: 12px; color: var(--text); }
.hero .hero-r { flex: none; width: 44ch; text-align: right; }

/* ── Ledger frame ────────────────────────────────────────────────────── */
.ledger-wrap {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  padding: 0 20px 16px; max-width: 1560px; width: 100%; margin: 0 auto;
}

/* ════════════════════════════════════════════════════════════════════════
   LEDGER — extracted from public/ledger.css. Keep in step with the app.
   ════════════════════════════════════════════════════════════════════════ */

/* source: ledger.css .pool-archive .pool-head / .ph-a / .ph-line / .ph-b */
.pool-archive .pool-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 2px 9px; }
.pool-head .ph-a { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--text-muted); white-space: nowrap; }
.pool-head .ph-a i { font-style: normal; color: var(--text-faint); }
.pool-head .ph-line { flex: 1; min-width: 8px; height: 1px; background: var(--border); }
.pool-head .ph-b { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); white-space: nowrap; }

/* source: ledger.css .archive / .toolbar / .scroll */
.archive { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--border); background: var(--bg); overflow: hidden; }
.toolbar { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px; border-bottom: 1px solid var(--border); background: var(--surface); flex-wrap: nowrap; }
.toolbar .spacer { flex: 1; }
.scroll { flex: 1; min-height: 0; overflow: auto; }
/* source: ledger.css .pool-archive .scroll — no reserved gutter: the pool is
   often short, and a permanently-empty 10px strip kept the header off the edge. */
.pool-archive .scroll { scrollbar-gutter: auto; }

/* source: ledger.css .f-search */
.f-search { display: flex; align-items: center; gap: 8px; background: var(--surface-raised); border: 1px solid var(--border); padding: 0 10px; height: 34px; width: 252px; }
.f-search::before { content: "\203A"; color: var(--accent); font-family: var(--font-mono); }
.f-search:focus-within { border-color: var(--accent-border); }
.f-search svg { width: 14px; height: 14px; color: var(--text-faint); flex: none; }
.f-search input { background: transparent; border: none; outline: none; color: var(--text); font-family: var(--font-sans); font-size: 13px; width: 100%; caret-color: var(--accent); }
.f-search input::placeholder { color: var(--text-faint); }

/* source: ledger.css .f-pick */
.f-pick { display: inline-flex; align-items: center; gap: 8px; height: 34px; max-width: 210px; padding: 0 10px 0 5px; background: var(--surface-raised); border: 1px solid var(--border); color: var(--text); font-family: var(--font-mono); font-size: 12px; cursor: pointer; white-space: nowrap; }
.f-pick:hover { border-color: var(--border-strong); }
.f-pick.on { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent); }
.f-pick i { width: 22px; height: 22px; flex: none; box-sizing: border-box; border: 1px solid var(--border); background-color: var(--bg); background-size: cover; background-position: center; background-repeat: no-repeat; }
.f-pick i.role { background-size: 64% auto; }
.f-pick i.any { background-size: 78% auto; filter: grayscale(1); opacity: .7; }
.f-pick span { overflow: hidden; text-overflow: ellipsis; }
.f-pick.pre { padding: 0 5px 0 10px; }
.f-pick.pre span { color: var(--text-muted); }
.f-pick.pre.on span { color: var(--accent); }

/* source: ledger.css .reset-filter / .count-line */
.reset-filter { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; padding: 0; line-height: 0; background: var(--surface-raised); border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; }
.reset-filter:hover { border-color: var(--border-strong); color: var(--text); }
.reset-filter svg { width: 15px; height: 15px; }
.count-line { color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; white-space: nowrap; }
.count-line b { color: var(--text); font-weight: 700; }

/* source: ledger.css table / thead / tbody / td. table-layout:fixed + the
   min-width floor are what stop columns shifting as filters change the rows. */
table { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 1180px; }
thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); text-align: left; font-family: var(--font-mono); font-size: 10px; letter-spacing: .01em; text-transform: lowercase; color: var(--text-muted); font-weight: 500; padding: 10px 12px; white-space: nowrap; border-bottom: 1px solid var(--border-strong); user-select: none; }
thead th.sortable { cursor: pointer; }
thead th.sortable:hover { color: var(--text); }
thead th .arrow { color: var(--accent); font-size: 9px; }
thead th.on { color: var(--accent); }
thead th.num, td.num { text-align: right; font-family: var(--font-mono); }
thead th.ctr, td.ctr { text-align: center; }
tbody tr { border-bottom: 1px solid var(--border); cursor: pointer; }
tbody tr:hover { background: var(--surface); box-shadow: inset 2px 0 0 var(--accent); }
td { padding: 8px 12px; font-size: 12px; vertical-align: middle; white-space: nowrap; }
td.result { position: relative; padding-left: 18px; font-weight: 700; font-size: 11px; }
td.result::before { content: ""; position: absolute; left: 6px; top: 7px; bottom: 7px; width: 3px; }
tr.win td.result::before { background: var(--green); }
tr.loss td.result::before { background: var(--red); }

/* source: ledger.css .pool column map (its own — 10 columns, not the archive's) */
.pool thead th[data-th="seen"] { width: 3.6%; }
.pool thead th[data-th="result"] { width: 5.3%; }
.pool th:nth-child(3) { width: 24%; }
.pool thead th[data-th="player"] { width: 15.5%; }
.pool thead th[data-th="opp"] { width: 15.5%; }
.pool thead th[data-th="kda"] { width: 9.1%; }
.pool thead th[data-th="cs"] { width: 8.4%; }
.pool thead th[data-th="length"] { width: 6.6%; }
.pool thead th[data-th="patch"] { width: 5.5%; }
.pool thead th[data-th="shared"] { width: 6.5%; }
.pool tbody td:nth-child(4), .pool tbody td:nth-child(5) { overflow: hidden; }

/* source: ledger.css .ci / .mu (matchup cell) */
.ci { display: block; object-fit: cover; background: var(--surface-raised); border: 1px solid var(--border); flex: none; }
.mu { display: flex; align-items: center; gap: 7px; }
.mu .ci { width: 30px; height: 30px; }
.mu .vs { color: var(--text-faint); font-size: 10px; font-family: var(--font-mono); }
.mu .ttl { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mu .ttl .a { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.mu .ttl .b { font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Multi-POV marker in the matchup cell: grey = other POVs of this game exist,
   accent = one of them is the lane opponent. */
.mu .ttl .b .pov-ico { display: inline-flex; width: 12px; height: 12px; vertical-align: -2px; margin-left: 6px; color: var(--text-faint); }
.mu .ttl .b .pov-ico svg { width: 100%; height: 100%; }
.mu .ttl .b .pov-ico.opp { color: var(--accent); }


/* source: ledger.css .pool .seen-chip / .pr / .kda / .cs-min / td.len|patch|shared */
.pool .seen-chip { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 18px; font-family: var(--font-mono); font-size: 10px; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-border); }
.pool .seen-dash { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
.pool .mu .ci.me { border: 1px solid var(--accent); }
.pool .mu .ttl .a.pm { font-family: var(--font-mono); font-weight: 400; color: var(--accent); }
.pool .pr { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pool .pr-crest { height: 24px; flex: none; }
.pool .pr-crest.dim { opacity: .8; }
.pool .pr-t { min-width: 0; }
.pool .pr-n { font-family: var(--font-mono); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pool .pr.opp .pr-n { color: var(--text-muted); }
.pool .pr-r { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pool .pr.opp .pr-r { color: var(--text-faint); }
.pool .kda-sep { color: var(--text-faint); }
.pool .kda-d { color: var(--red); }
.pool .kda-a { color: var(--text-muted); }
.pool .cs-min { color: var(--text-muted); font-size: 11px; }
.pool td.len, .pool td.patch { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pool td.shared { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }

/* source: ledger.css .empty + styles.css .load-block / .sp-arc */
.empty { padding: 70px; text-align: center; color: var(--text-faint); font-size: 13px; }
.empty .e-tag { display: block; font: 500 11px var(--font-mono); color: var(--text-faint); margin-bottom: 8px; }
.load-block { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 34px 20px; min-height: 120px; }
.load-block .load-status { font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; color: var(--text-muted); }
.load-block .load-status b { color: var(--text); font-weight: 400; }
.sp-arc { width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--brand); border-right-color: var(--indigo-500); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) { .sp-arc { animation: spin .8s linear infinite; } }

/* ── Filter menus (the app uses widgets.js openPickerMenu; this is that
   menu's look, reimplemented locally so a public page doesn't pull in the
   desktop widget module). ─────────────────────────────────────────────── */
.pick-menu {
  position: fixed; z-index: 40; min-width: 190px; max-height: 340px; overflow: auto;
  background: var(--surface-raised); border: 1px solid var(--border-strong);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .55); padding: 3px;
}
.pick-menu .pm-search { display: flex; align-items: center; padding: 4px 6px 6px; }
.pick-menu .pm-search input {
  width: 100%; height: 28px; padding: 0 8px; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); outline: none; font-family: var(--font-sans); font-size: 12px;
  caret-color: var(--accent);
}
.pick-menu .pm-search input:focus { border-color: var(--accent-border); }
.pick-menu button {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 9px;
  background: transparent; border: none; color: var(--text-muted);
  font-family: var(--font-mono); font-size: 12px; text-align: left; cursor: pointer;
}
.pick-menu button:hover { background: var(--surface-hover); color: var(--text); }
.pick-menu button.on { background: var(--accent-soft); color: var(--accent); }
.pick-menu button i { width: 20px; height: 20px; flex: none; border: 1px solid var(--border); background-color: var(--bg); background-size: cover; background-position: center; background-repeat: no-repeat; }
.pick-menu button i.role { background-size: 64% auto; }
.pick-menu button i.any { background-size: 78% auto; filter: grayscale(1); opacity: .7; }
.pick-menu button .pm-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pick-menu button .pm-n { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.pick-menu button.on .pm-n { color: var(--accent); }