/* playbyplay — dark broadcast scouting UI.
   Written for density: the page should read like a timing tower, not a
   dashboard template. Every rule here earns its place; see DESIGN_NOTES.md
   for what each pattern was stolen from and which mistake it avoids. */

/* ==================================================================
   1. Tokens
   ================================================================== */
:root {
  color-scheme: dark;

  /* Surfaces. Near-black, never #000 — saturated hues on true black halate. */
  --bg: #0b0d10;
  --panel: #12151a;
  --panel-2: #171b21;
  --raise: #1d222a;
  --hair: #252b33;
  --grid: #1c2128;

  /* Ink. Off-white body text; three muted steps below it. */
  --ink: #c9d1d9;
  --ink-2: #8b93a1;
  --ink-3: #6e7681;
  --ink-hi: #eef2f6;

  /* Categorical — fixed order, never cycled. First three are all-pairs safe. */
  --c1: #3987e5;
  --c2: #d95926;
  --c3: #199e70;
  --c4: #c98500;
  --c5: #d55181;
  --c6: #9085e9;

  /* Diverging: below ↔ above the field. Bright at the poles, dim in the
     middle, so deviation gets the luminance and average recedes. */
  --d-lo-3: #5aa2f0;
  --d-lo-2: #4a7fc0;
  --d-lo-1: #3f5f88;
  --d-mid:  #454a52;
  --d-hi-1: #8a5450;
  --d-hi-2: #c05a54;
  --d-hi-3: #f0655e;

  /* Semantics. Always paired with a glyph — never colour alone. */
  --win: #2fbf71;
  --loss: #e05252;
  --atk: #f2705f;   /* attacking side */
  --def: #23b5a3;   /* defending side */
  --warn: #e0a33a;

  /* Round endings — game elements get their own colours so the reader learns
     them once and they mean the same thing on every panel. */
  --end-elimination: #9aa4b2;
  --end-detonation: #f2705f;
  --end-defuse: #23b5a3;
  --end-time: #c98500;

  /* Agent classes. */
  --cls-duelist: #d95926;
  --cls-initiator: #3987e5;
  --cls-controller: #9085e9;
  --cls-sentinel: #199e70;
  --cls-unclassified: #6e7681;

  /* Team accent is set per page from the team's row; this is the fallback. */
  --accent: #ff4655;
  /* Oracle's own mark colour. Fixed, because a brand that recolours itself
     per team is not a brand — the team accent belongs to the team. */
  --oracle: #ff4655;

  --r: 4px;
  --row-h: 28px;

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

  --max: 1320px;
}

/* ==================================================================
   2. Base
   ================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
main { overflow-anchor: none; }

body {
  margin: 0;
  overscroll-behavior: none;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.45 var(--font);
  font-synthesis-weight: none;
}

h1, h2, h3, h4 { margin: 0; font-weight: 650; line-height: 1.2; }

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

table { border-collapse: collapse; width: 100%; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Numbers in columns align; hero numbers do not (tabular figures look gappy
   at 30px). */
.num, td.num, th.num, .tbl td, .tbl th { font-variant-numeric: tabular-nums lining-nums; }
.hero-num { font-variant-numeric: proportional-nums lining-nums; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ==================================================================
   3. Chrome
   ================================================================== */
.shell { max-width: var(--max); margin: 0 auto; padding: 0 20px; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hair);
}
.topbar .shell { display: flex; align-items: center; gap: 20px; height: 46px; }
.wordmark {
  font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-hi);
}
.wordmark i { font-style: normal; color: var(--accent); }
.topbar nav { display: flex; gap: 14px; margin-left: auto; font-size: 12px; color: var(--ink-2); }
.topbar nav a:hover { color: var(--ink-hi); }
.topbar nav a[aria-current] { color: var(--ink-hi); }

.corpus {
  font-size: 11px; color: var(--ink-3); letter-spacing: .02em;
  border-left: 1px solid var(--hair); padding-left: 14px;
}

footer.site {
  margin-top: 48px; border-top: 1px solid var(--hair);
  padding: 18px 0 40px; font-size: 11px; color: var(--ink-3);
}
footer.site .shell { display: flex; gap: 20px; flex-wrap: wrap; }

main { min-height: 70vh; padding-bottom: 20px; }

/* ==================================================================
   4. Section headers + panels
   ================================================================== */
.panel {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  padding: 12px 14px 14px;
}
.panel + .panel { margin-top: 10px; }

.sec { margin: 22px 0 8px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sec h2 {
  font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2);
  font-weight: 700;
}
.sec h2::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px;
  background: var(--accent); vertical-align: 1px;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.sec .why { font-size: 11px; color: var(--ink-3); }
.sec .right { margin-left: auto; font-size: 11px; color: var(--ink-3); }

h3.sub {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700; margin-bottom: 6px;
}

.grid { display: grid; gap: 10px; }
.grid > .panel { margin-top: 0; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
@media (max-width: 960px) { .g-2, .g-3, .g-hero { grid-template-columns: minmax(0, 1fr); } }

/* ==================================================================
   5. The accounting standard, rendered
   ================================================================== */

/* Sample size sits at the same visual weight as the number it qualifies. */
.n {
  font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* The sample prints its own noun ("30 maps"), so it needs no "n=" prefix.
   A bare n says there were thirty of something without saying of what. */
.n.raw::before { content: none; }

/* Explanatory prose under a panel. Same muted weight as .n but it wraps —
   .n is for a sample size beside a number, never for a sentence. */
.note {
  font-size: 11px; color: var(--ink-3); line-height: 1.5; margin: 8px 0 0;
  white-space: normal; max-width: 78ch;
}
.note b, .note i { color: var(--ink-2); font-style: normal; }

/* An under-powered rate renders as counts and desaturates the whole row. */
.thin { color: var(--ink-2); }
.thin .bar-fill, .thin .dot { opacity: .45; }

.flag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
  padding: 1px 5px; border-radius: 2px; white-space: nowrap;
  border: 1px solid currentColor; color: var(--warn);
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.flag.muted { color: var(--ink-3); }
.flag.ok { color: var(--win); }

/* Zero states are designed results, not apologies. */
.zero {
  border: 1px dashed var(--hair); border-radius: var(--r);
  padding: 14px 16px; color: var(--ink-2); font-size: 13px;
  background: repeating-linear-gradient(135deg, transparent 0 8px,
              rgba(255,255,255,.012) 8px 16px);
}
.zero b { color: var(--ink); font-weight: 600; }
.zero .n { display: block; margin-top: 4px; }

/* A gap is a gap: shown, not swallowed. */
.gapmark {
  display: inline-block; width: 100%; height: 100%;
  background: repeating-linear-gradient(135deg, var(--hair) 0 3px, transparent 3px 6px);
}

/* ==================================================================
   6. Team header
   ================================================================== */
.team-head {
  border-bottom: 1px solid var(--hair);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 140px),
    var(--bg);
}
.team-head .shell { display: flex; align-items: flex-end; gap: 24px; padding-top: 18px; padding-bottom: 0; flex-wrap: wrap; }
.team-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.team-id .rail { width: 4px; align-self: stretch; min-height: 44px; background: var(--accent); border-radius: 2px; }
.team-id h1 { font-size: 28px; letter-spacing: -.01em; color: var(--ink-hi); }
.team-id .meta { font-size: 11px; color: var(--ink-3); letter-spacing: .1em; text-transform: uppercase; margin-top: 3px; }
.team-id .meta b { color: var(--accent); font-weight: 700; }

.headline-stats { display: flex; gap: 22px; margin-left: auto; padding-bottom: 10px; flex-wrap: wrap; }
.hstat { min-width: 76px; }
.hstat .v { font-size: 21px; font-weight: 650; color: var(--ink-hi); line-height: 1.1; }
.hstat .l { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-top: 2px; }

/* Tabs */
.tabs { display: flex; gap: 2px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  padding: 8px 14px; font-size: 12px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current] { color: var(--ink-hi); border-bottom-color: var(--accent); }

/* ==================================================================
   7. Lanes — the radar replacement
   A dot-strip per dimension: the whole field as ticks, this team as a dot,
   its 95% interval as a whisker. Position only, one linear axis, no area.
   ================================================================== */
.lane-group { margin-bottom: 14px; }
.lane-group > h3 { margin-bottom: 4px; }

.lane {
  display: grid;
  grid-template-columns:
    minmax(72px, 1.05fr)
    minmax(0, 2.6fr)            /* the strip yields first, and only it */
    minmax(72px, 1.05fr)
    minmax(46px, max-content)   /* value  */
    minmax(52px, max-content)   /* field  */
    minmax(44px, max-content);  /* sample */
  align-items: center; gap: 10px;
  padding: 3px 0; min-height: 26px;
  min-width: 0;
  border-top: 1px solid var(--grid);
}
/* Nothing in the right cluster wraps: a number and its unit are one token. */
.lane .val, .lane .fld, .lane .n { white-space: nowrap; min-width: 0; }
.lane .strip { min-width: 0; }
.lane:first-of-type { border-top: 0; }
.lane .pole { font-size: 11px; color: var(--ink-3); line-height: 1.25; }
.lane .pole.hi { text-align: left; }
.lane .pole.lo { text-align: right; }
.lane .pole.on { color: var(--ink); }

.strip {
  position: relative; height: 16px; border-radius: 2px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--d-lo-3) 13%, transparent),
    transparent 46%, transparent 54%,
    color-mix(in srgb, var(--d-hi-3) 13%, transparent));
}
/* The centre line is the field mean — a position on the track, not a legend. */
.strip::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; z-index: 1;
  width: 1px; background: var(--ink-hi); opacity: .5;
}
/* ±1 sd hairlines give the reader a ruler without a numeric axis. */
.strip::after {
  content: ""; position: absolute; inset: 1px 0;
  background:
    linear-gradient(90deg, transparent calc(50% - 19.23% - .5px), var(--grid) calc(50% - 19.23% - .5px),
                    var(--grid) calc(50% - 19.23% + .5px), transparent calc(50% - 19.23% + .5px)),
    linear-gradient(90deg, transparent calc(50% + 19.23% - .5px), var(--grid) calc(50% + 19.23% - .5px),
                    var(--grid) calc(50% + 19.23% + .5px), transparent calc(50% + 19.23% + .5px));
}
.strip .tick {
  position: absolute; top: 3px; bottom: 3px; width: 2px; margin-left: -1px;
  background: var(--ink-3); opacity: .42; border-radius: 1px;
}
.strip .whisk {
  position: absolute; top: 7px; height: 2px; border-radius: 1px;
  background: color-mix(in srgb, var(--accent) 45%, transparent);
}
.strip .dot {
  position: absolute; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 2px var(--panel);
}
.strip .dot.none { background: var(--ink-3); }

.lane .val { font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.lane .val.hi { color: var(--d-hi-3); }
.lane .val.lo { color: var(--d-lo-3); }
.lane .val.flat { color: var(--ink-2); }
.lane .fld { font-size: 11px; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
.lane .fld::before { content: "fld "; opacity: .6; }

/* A dimension the stats lane measured as not separating teams. The row keeps
   its position — a flat dimension is a finding, and hiding it would be the
   same sin as padding a headline — but it loses the colour that means
   "this deviation is real". Same treatment as a thin sample, for the same
   reason: the number is there, the claim is not. */
.lane.flat .val, .lane.flat .val.hi, .lane.flat .val.lo { color: var(--ink-2); }
.lane.flat .strip .dot { background: var(--ink-3); }
.lane.flat .strip .whisk { background: color-mix(in srgb, var(--ink-3) 45%, transparent); }
.lane.flat .pole.on { color: var(--ink-2); }

/* Provenance: collapsed by default, marks never collapsed.
   The summary row carries the one verdict that changes how the number may be
   read; source, definition and stabilisation sit behind the disclosure. */
.prov { margin-top: 10px; border-top: 1px solid var(--grid); padding-top: 7px; }
.prov > summary {
  display: flex; align-items: center; gap: 8px;
  list-style: none; cursor: pointer; padding: 2px 0;
}
.prov > summary::-webkit-details-marker { display: none; }
.prov > summary::before {
  content: "▸"; color: var(--ink-3); font-size: 9px; line-height: 1;
  transition: transform .12s ease;
}
.prov[open] > summary::before { transform: rotate(90deg); }
.prov > summary:hover .prov-label,
.prov > summary:focus-visible .prov-label { color: var(--ink); }
.prov-label { font-size: 11px; color: var(--ink-2); }
.prov > summary .n { margin-left: auto; }

.prov-body { display: grid; gap: 5px; font-size: 11px; padding: 7px 0 2px 14px; }
.prov-row { display: grid; grid-template-columns: 116px auto; gap: 10px; align-items: baseline; }
.prov-row > span { color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; font-size: 10px; }
.prov-row > b { color: var(--ink); font-weight: 600; }
.prov-row > small { color: var(--ink-2); line-height: 1.45; }
.prov-row > b + small { grid-column: 2; }

@media (prefers-reduced-motion: reduce) {
  .prov > summary::before { transition: none; }
}

@media (max-width: 760px) {
  .lane { grid-template-columns: minmax(0, 1fr) max-content minmax(0, max-content); grid-template-areas: "lo lo hi" "strip strip strip" "fld v n"; gap: 6px 8px; padding-block: 8px; }
  .lane .pole.lo { grid-area: lo; text-align: left; }
  .lane .pole.hi { grid-area: hi; text-align: right; }
  .lane .strip { grid-area: strip; }
  .lane .val { grid-area: v; }
  .lane .fld { display: block; grid-area: fld; text-align: left; }
  .lane .n { grid-area: n; text-align: right; white-space: normal; }
}

/* Headline deviations */
.headlines { display: grid; gap: 8px; }
.headline {
  display: grid; grid-template-columns: 3px 1fr auto; gap: 12px; align-items: center;
  background: var(--panel-2); border-radius: var(--r); padding: 9px 12px 9px 0;
  border: 1px solid var(--hair);
}
.headline .edge { align-self: stretch; border-radius: 2px 0 0 2px; }
.headline.high .edge { background: var(--d-hi-3); }
.headline.low .edge { background: var(--d-lo-3); }
.headline .what { font-size: 14px; font-weight: 600; color: var(--ink-hi); }
.headline .why { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.headline .v { text-align: right; }
.headline .v b { font-size: 17px; font-weight: 650; }
.headline .v .n { display: block; }

/* ==================================================================
   8. Win conditions
   ================================================================== */
.wc { border-top: 1px solid var(--grid); padding: 9px 0; }
.wc:first-child { border-top: 0; }
.wc-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.wc-head b { font-size: 13px; color: var(--ink-hi); font-weight: 600; }
.wc-head .q { font-size: 11px; color: var(--ink-3); }
.wc-rows { display: grid; gap: 3px; }
.wc-row {
  display: grid; grid-template-columns: 92px minmax(0, 1fr) 46px 58px; gap: 8px;
  align-items: center; font-size: 12px;
}
.wc-row .k { color: var(--ink-2); font-size: 11px; }
.wc-row .track { position: relative; height: 12px; background: var(--grid); border-radius: 2px; overflow: hidden; }
.wc-row .fill { position: absolute; inset: 0 auto 0 0; border-radius: 2px; }
.wc-row.with .fill { background: var(--accent); }
.wc-row.without .fill { background: var(--ink-3); }
.wc-row .ci {
  position: absolute; top: 4px; height: 4px;
  background: color-mix(in srgb, var(--ink-hi) 28%, transparent);
}
.wc-row .v { text-align: right; font-variant-numeric: tabular-nums; }
.wc .fieldtick { position: absolute; top: -2px; bottom: -2px; width: 1px; background: var(--ink-hi); opacity: .55; }
.wc .exploit {
  margin-top: 6px; font-size: 12px; color: var(--ink);
  border-left: 2px solid var(--accent); padding-left: 9px;
}
/* A field-wide effect is still worth reading, but it is not a read on this
   team — so it loses the accent edge that means "act on this". */
.wc .exploit.league { border-left-color: var(--grid); color: var(--ink-2); }
.wc .exploit.league b { color: var(--ink-2); font-weight: 600; }
.wc .no-sep { margin-top: 5px; font-size: 11px; color: var(--ink-3); }
/* The lift stays on the surface: it is the number the card is about. */
.wc-lift {
  display: flex; align-items: baseline; gap: 9px;
  margin-top: 7px; font-size: 11px; color: var(--ink-3);
}
.wc-lift b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.wc-lift .raw { margin-left: auto; }

/* Its interpretation collapses. */
.wc-why { margin-top: 4px; }
.wc-why > summary {
  display: flex; align-items: center; gap: 7px;
  list-style: none; cursor: pointer; padding: 1px 0;
}
.wc-why > summary::-webkit-details-marker { display: none; }
.wc-why > summary::before {
  content: "▸"; color: var(--ink-3); font-size: 9px; line-height: 1;
  transition: transform .12s ease;
}
.wc-why[open] > summary::before { transform: rotate(90deg); }
.wc-why > summary:hover .prov-label,
.wc-why > summary:focus-visible .prov-label { color: var(--ink); }

.wc-foot { display: grid; gap: 3px; margin-top: 5px; padding-left: 13px; font-size: 11px; color: var(--ink-3); line-height: 1.45; }
.wc-foot b { color: var(--ink-2); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .wc-why > summary::before { transition: none; }
}

/* ==================================================================
   9. Collision card
   ================================================================== */
.collide-pick { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border: 1px solid var(--hair); border-radius: 12px;
  font-size: 11px; color: var(--ink-2); background: var(--panel-2);
  white-space: nowrap;
}
.chip:hover { color: var(--ink-hi); border-color: var(--ink-3); }
.chip[aria-pressed="true"], .chip.on {
  color: var(--ink-hi); border-color: color-mix(in srgb, var(--accent) 65%, var(--hair));
  background: color-mix(in srgb, var(--accent) 14%, var(--panel-2));
}
.chip .tier { font-size: 10px; color: var(--ink-3); }
.chip .swatch { width: 7px; height: 7px; border-radius: 2px; }

.pp { display: grid; gap: 8px; }
.pressure {
  border: 1px solid var(--hair); border-radius: var(--r); padding: 10px 12px;
  background: var(--panel-2);
}
.pressure .top { display: flex; align-items: baseline; gap: 8px; }
.pressure .top b { font-size: 13px; color: var(--ink-hi); }
.pressure .top .delta { margin-left: auto; font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.pressure.you .top .delta { color: var(--win); }
.pressure.them .top .delta { color: var(--loss); }
.ppbars {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) 54px 52px;
  gap: 4px 9px; align-items: center; margin-top: 8px;
}
.ppbars .who { font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.ppbars .t { position: relative; height: 13px; background: var(--grid); border-radius: 2px; overflow: hidden; }
.ppbars .t i { position: absolute; inset: 0 auto 0 0; border-radius: 2px; }
.ppbars .t .fm { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--ink-hi); opacity: .55; }
.ppbars .v { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-hi); }
.ppaxis {
  display: flex; justify-content: space-between; margin: 4px 106px 0 51px;
  font-size: 10px; color: var(--ink-3); letter-spacing: .04em;
}
.pressure .ci { font-size: 11px; color: var(--ink-3); margin-top: 6px; }
.pressure .def { font-size: 11px; color: var(--ink-3); margin-top: 3px; }

/* ==================================================================
   10. Veto rail (the Maps slicer)
   ================================================================== */
.rail { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 900px) { .rail { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 480px) { .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.mapchip {
  display: block; border: 1px solid var(--hair); border-radius: var(--r);
  background: var(--panel); padding: 8px 9px 9px; text-align: left;
  border-top: 2px solid var(--hair);
}
.mapchip:hover { background: var(--panel-2); border-color: var(--ink-3); }
.mapchip[aria-current] { border-top-color: var(--accent); background: var(--panel-2); }
.mapchip .nm { font-size: 12px; font-weight: 650; color: var(--ink-hi); letter-spacing: .02em; }
.mapchip .rec { font-size: 11px; color: var(--ink-2); font-variant-numeric: tabular-nums; float: right; }
.mapchip .rec.none { color: var(--ink-3); }
.mapchip .bars { display: grid; gap: 2px; margin-top: 7px; }
.mapchip .b { display: grid; grid-template-columns: 20px 1fr 22px; gap: 5px; align-items: center; font-size: 10px; color: var(--ink-3); }
.mapchip .b .t { position: relative; height: 5px; background: var(--grid); border-radius: 1px; }
.mapchip .b .f { position: absolute; inset: 0 auto 0 0; border-radius: 1px; }
.mapchip .b.ban .f { background: var(--c2); }
.mapchip .b.pick .f { background: var(--c1); }
.mapchip .b.dec .f { background: var(--ink-3); }
.mapchip .b .c { text-align: right; font-variant-numeric: tabular-nums; }

/* ==================================================================
   11. Gauges (side win rates with a field tick)
   ================================================================== */
.gauges { display: grid; gap: 10px; }
.gauge { display: grid; grid-template-columns: 74px 1fr 92px; gap: 10px; align-items: center; }
.gauge .lbl { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.gauge.atk .lbl { color: var(--atk); }
.gauge.def .lbl { color: var(--def); }
.gauge .track { position: relative; height: 18px; background: var(--grid); border-radius: 2px; overflow: hidden; }
.gauge .fill { position: absolute; inset: 0 auto 0 0; background: var(--ink-3); }
.gauge.atk .fill { background: color-mix(in srgb, var(--atk) 82%, transparent); }
.gauge.def .fill { background: color-mix(in srgb, var(--def) 82%, transparent); }
.gauge .ci { position: absolute; top: 7px; height: 4px; background: rgba(255,255,255,.3); }
.gauge .half { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.18); }
.gauge .fieldtick { position: absolute; top: -1px; bottom: -1px; width: 2px; margin-left: -1px; background: var(--ink-hi); }
.gauge .out { text-align: right; font-size: 14px; font-variant-numeric: tabular-nums; }
.gauge .out .n { display: block; }
.keyrow span.legend-tick { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-3); }
.keyrow span.legend-tick > i { display: inline-block; width: 2px; height: 11px; border-radius: 0; background: var(--ink-hi); }
.keyrow i.srcdot { width: 9px; height: 9px; border-radius: 50%; }

/* ==================================================================
   12. Comp lock-in strip
   ================================================================== */
.comp { display: flex; flex-wrap: wrap; gap: 5px; }
.agent {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--hair); border-radius: var(--r);
  padding: 4px 8px 4px 5px; background: var(--panel-2); font-size: 12px;
  border-left: 3px solid var(--cls-unclassified);
}
.agent[data-cls="duelist"] { border-left-color: var(--cls-duelist); }
.agent[data-cls="initiator"] { border-left-color: var(--cls-initiator); }
.agent[data-cls="controller"] { border-left-color: var(--cls-controller); }
.agent[data-cls="sentinel"] { border-left-color: var(--cls-sentinel); }
.agent .a { color: var(--ink-hi); text-transform: capitalize; font-weight: 600; }
.agent .who { color: var(--ink-3); font-size: 11px; }
.agent .k { color: var(--ink-2); font-size: 11px; font-variant-numeric: tabular-nums; }
.agent.flex { background: transparent; border-style: dashed; }

/* ==================================================================
   13. Pistol dot plot
   ================================================================== */
.dots { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.pd {
  width: 13px; height: 13px; border-radius: 3px; position: relative;
  border: 1px solid var(--hair); background: var(--panel-2);
}
.pd.w { background: color-mix(in srgb, var(--win) 78%, transparent); border-color: transparent; }
.pd.l { background: color-mix(in srgb, var(--loss) 30%, transparent); border-color: color-mix(in srgb, var(--loss) 45%, transparent); }
.pd::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 0 0 2px 2px;
}
.pd[data-side="t"]::after { background: var(--atk); }
.pd[data-side="ct"]::after { background: var(--def); }
.pd.conv { box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }

/* ==================================================================
   14. Stacked round-end bars
   ================================================================== */
.endbar { display: grid; grid-template-columns: 104px 1fr 44px; gap: 10px; align-items: center; margin-bottom: 5px; }
.endbar .lbl { font-size: 11px; color: var(--ink-2); }
.endbar .lbl small { display: block; color: var(--ink-3); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.endbar .stack { display: flex; height: 18px; border-radius: 2px; overflow: hidden; background: var(--grid); }
.endbar .seg { min-width: 1px; position: relative; }
.endbar .seg[data-r="elimination"] { background: var(--end-elimination); }
.endbar .seg[data-r="detonation"] { background: var(--end-detonation); }
.endbar .seg[data-r="defuse"] { background: var(--end-defuse); }
.endbar .seg[data-r="time"] { background: var(--end-time); }
.endbar .seg b {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 10px; font-weight: 700; color: #06090c; font-variant-numeric: tabular-nums;
}
.endbar .tot { text-align: right; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.keyrow { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--ink-3); margin-top: 6px; }
.keyrow span { display: inline-flex; align-items: center; gap: 5px; }
.keyrow i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

/* ==================================================================
   15. Dense tables
   ================================================================== */
.tbl { font-size: 12px; }
.tbl th {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
  font-weight: 700; text-align: right; padding: 0 8px 5px; border-bottom: 1px solid var(--hair);
  white-space: nowrap;
}
.tbl th:first-child, .tbl td:first-child { text-align: left; padding-left: 0; }
.tbl th.l, .tbl td.l { text-align: left; }
.tbl td {
  text-align: right; padding: 0 8px; height: var(--row-h); border-bottom: 1px solid var(--grid);
  white-space: nowrap;
}
.tbl tbody tr:hover td { background: rgba(255,255,255,.028); }
.tbl td.name { color: var(--ink-hi); font-weight: 600; }
.tbl td .sub { color: var(--ink-3); font-weight: 400; font-size: 11px; margin-left: 6px; }
.tbl td.dim { color: var(--ink-3); }
.tbl tfoot td {
  border: 0; color: var(--ink-3); font-size: 11px; padding-top: 6px; height: auto;
  white-space: normal; line-height: 1.5;
}
/* Dense tables get their own scroller so a wide row never pushes the page sideways. */
.scroll-x { position: relative; overflow-x: auto; }

/* Bar-in-cell: value as text, distribution as background. */
.cellbar {
  background-image: linear-gradient(90deg, var(--cb, var(--grid)) var(--p, 0%), transparent var(--p, 0%));
  background-repeat: no-repeat; background-size: 100% 60%; background-position: 0 50%;
  padding-right: 8px !important;
}

/* ==================================================================
   16. Entry plane
   ================================================================== */
.plane-wrap { position: relative; }
.plane { display: block; width: 100%; height: auto; overflow: visible; }
.plane .axisline { stroke: var(--hair); stroke-width: .4; }
.plane .midline { stroke: var(--ink-3); stroke-width: .5; stroke-dasharray: 2 2; opacity: .8; }
.plane .gridline { stroke: var(--grid); stroke-width: .3; }
.plane .ghost { fill: var(--ink-3); opacity: .3; }
.plane .ell { fill: color-mix(in srgb, var(--accent) 10%, transparent); stroke: color-mix(in srgb, var(--accent) 30%, transparent); stroke-width: .3; }
.plane .pt { fill: var(--accent); stroke: var(--panel); stroke-width: .7; }
.plane .qlab { fill: var(--ink-3); font-size: 2.9px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; opacity: .8; }
.plane .plab { fill: var(--ink-hi); font-size: 3.4px; font-weight: 600; }
.plane .tick { fill: var(--ink-3); font-size: 2.7px; }
.plane .axtitle { fill: var(--ink-2); font-size: 3px; letter-spacing: .1em; text-transform: uppercase; }

.quad-key { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.quad-key button {
  font: inherit; font-size: 11px; color: var(--ink-3); text-align: left;
  border: 0; border-left: 2px solid var(--hair); padding: 0 0 0 8px;
  background: none; cursor: pointer; display: block; width: 100%;
}
.quad-key b { display: block; color: var(--ink); font-size: 12px; }

/* Field strips (K/rd, D/rd) */
.pstrip { display: grid; grid-template-columns: 96px 1fr 50px 58px; gap: 10px; align-items: center; min-height: 24px; border-top: 1px solid var(--grid); }
.pstrip:first-of-type { border-top: 0; }
.pstrip .nm { font-size: 12px; color: var(--ink-hi); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.pstrip .t { position: relative; height: 14px; }
.pstrip .t::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--grid); border-radius: 1px; }
.pstrip .fk { position: absolute; top: 3px; bottom: 3px; width: 2px; margin-left: -1px; background: var(--ink-3); opacity: .4; }
.pstrip .mean { position: absolute; top: 1px; bottom: 1px; width: 1px; margin-left: -.5px; background: var(--ink-hi); opacity: .55; }
.pstrip .dot { position: absolute; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--panel); }
.pstrip .v { text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }

/* Class distribution bars */
.clsbar { display: flex; height: 10px; border-radius: 2px; overflow: hidden; background: var(--grid); }
.clsbar i { display: block; }
.clsbar i[data-cls="duelist"] { background: var(--cls-duelist); }
.clsbar i[data-cls="initiator"] { background: var(--cls-initiator); }
.clsbar i[data-cls="controller"] { background: var(--cls-controller); }
.clsbar i[data-cls="sentinel"] { background: var(--cls-sentinel); }
.clsbar i[data-cls="unclassified"] { background: var(--cls-unclassified); }

/* ==================================================================
   17. Matchup
   ================================================================== */
.ladder { display: grid; gap: 8px; }
.lrow { display: grid; grid-template-columns: 62px 1fr 62px; gap: 10px; align-items: center; }
.lrow .lbl { grid-column: 1 / -1; font-size: 11px; color: var(--ink-2); display: flex; gap: 8px; align-items: baseline; }
.lrow .pair { position: relative; height: 16px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px; }
.lrow .ba, .lrow .bb { position: relative; height: 16px; background: var(--grid); border-radius: 2px; overflow: hidden; }
.lrow .ba i { position: absolute; inset: 0 0 0 auto; background: var(--accent); }
.lrow .bb i { position: absolute; inset: 0 auto 0 0; background: var(--ink-3); }
.lrow .va { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-hi); }
.lrow .vb { text-align: left; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-2); }

.mapstrip { display: flex; flex-wrap: wrap; gap: 4px; }
.mres {
  display: inline-grid; grid-template-columns: auto auto; gap: 2px 7px; align-items: baseline;
  border: 1px solid var(--hair); border-left-width: 3px; border-radius: var(--r);
  padding: 5px 9px; background: var(--panel-2); font-size: 12px;
}
.mres.w { border-left-color: var(--win); }
.mres.l { border-left-color: var(--loss); }
.mres b { color: var(--ink-hi); font-weight: 600; }
.mres .sc { font-variant-numeric: tabular-nums; }
.mres small { grid-column: 1 / -1; font-size: 10px; color: var(--ink-3); }

.vetoline { font-size: 12px; color: var(--ink); border-left: 2px solid var(--c2); padding-left: 9px; margin-top: 5px; }

.onedim { display: grid; gap: 1px; }
.odrow { display: grid; grid-template-columns: 96px 1fr 56px 58px; gap: 10px; align-items: center; min-height: 26px; }
.odrow .nm { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink); }
.odrow .nm i { width: 3px; height: 13px; border-radius: 1px; }
.odrow.self .nm { color: var(--ink-hi); font-weight: 700; }
.odrow .t { position: relative; height: 12px; background: var(--grid); border-radius: 2px; }
.odrow .f { position: absolute; inset: 0 auto 0 0; background: var(--ink-3); border-radius: 2px; }
.odrow.self .f { background: var(--accent); }
.odrow .v { text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }

/* ==================================================================
   18. Archive
   ================================================================== */
.arch { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.series {
  min-width: 0;
  border: 1px solid var(--hair); border-radius: var(--r); background: var(--panel);
  border-left: 3px solid var(--hair);
}
.series.w { border-left-color: var(--win); }
.series.l { border-left-color: var(--loss); }
.series > summary {
  display: grid; grid-template-columns: 70px 26px 1fr auto auto; gap: 12px; align-items: center;
  padding: 7px 12px; cursor: pointer; list-style: none;
}
.series > summary::-webkit-details-marker { display: none; }
.series > summary:hover { background: var(--panel-2); }
.series .dt { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.series .res { font-size: 11px; font-weight: 800; text-align: center; }
.series.w .res { color: var(--win); }
.series.l .res { color: var(--loss); }
.series .opp { font-size: 13px; color: var(--ink-hi); font-weight: 600; }
.series .opp small { display: block; font-size: 10px; color: var(--ink-3); font-weight: 400; letter-spacing: .04em; }
.series .sc { font-size: 14px; font-variant-numeric: tabular-nums; font-weight: 650; }
.series .chips { display: flex; gap: 3px; }
.series .body { border-top: 1px solid var(--grid); padding: 10px 12px; }
.match-table-hint { display: none; margin: 0 0 7px; color: var(--ink-2); font-size: 11px; text-align: right; }
.match-table-scroll:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
@media (max-width: 860px) {
  .match-table-hint { display: block; }
  .match-table-scroll .tbl tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--panel); }
}
@media (max-width: 720px) {
  .series > summary { grid-template-columns: 68px 18px minmax(0, 1fr) auto; gap: 8px; }
  .series .dt { white-space: nowrap; }
  .series .opp { min-width: 0; overflow-wrap: anywhere; }
  .series .chips { grid-column: 3 / -1; flex-wrap: wrap; }
}

.cov {
  font-size: 9px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
  padding: 2px 5px; border-radius: 2px; border: 1px solid;
}
.cov[data-c="vlr"] { color: var(--ink-3); border-color: var(--hair); background: transparent; }
.cov[data-c="recreated"] { color: #06090c; border-color: transparent; background: var(--win); }
.cov[data-c="partial"] { color: var(--warn); border-color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }

/* Source dots: hollow = match records only, filled = our own tracking */
.srcdots { display: flex; gap: 3px; flex-wrap: wrap; }
.srcdot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--ink-3); }
.srcdot.vod { border-color: var(--c1); }
.srcdot.tracked { background: var(--c3); border-color: var(--c3); }

/* Round strip (placeholder shape for the recreations) */
.rstrip { display: flex; gap: 2px; flex-wrap: wrap; }
.round-strip-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.round-strip-head .n { white-space: normal; }
.match-round-detail { display: none; margin-top: 14px; }
.match-round-detail:has(.panel) { display: block; }
.round-detail-link { padding: 4px 8px; font-size: 11px; white-space: nowrap; }
.round-results { margin-top: 12px; }
.round-results > summary { cursor: pointer; color: var(--ink-2); font-size: 12px; padding: 5px 0; }
.round-results tr { scroll-margin-top: calc(var(--sticky-context-offset, 88px) + 12px); }
.round-results tr:target { outline: 1px solid var(--accent); outline-offset: -1px; }
.rnd {
  width: 26px; border: 1px solid var(--hair); border-radius: 2px;
  background: var(--panel-2); padding: 2px; position: relative;
}
.rnd .no { font-size: 9px; color: var(--ink-3); text-align: center; font-variant-numeric: tabular-nums; }
.rnd .axis { height: 34px; position: relative; margin: 2px 0; }
.rnd .axis::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--hair); }
.rnd .notch { position: absolute; height: 2px; width: 9px; border-radius: 1px; }
.rnd .notch.us { left: 2px; background: var(--win); }
.rnd .notch.them { right: 2px; background: var(--loss); }
.rnd .out { height: 3px; border-radius: 1px; }
.rnd[data-won="1"] .out { background: var(--win); }
.rnd[data-won="0"] .out { background: var(--loss); }
.rnd[data-untracked] .axis { background: repeating-linear-gradient(135deg, transparent 0 3px, var(--grid) 3px 6px); }

/* ==================================================================
   19. Team index
   ================================================================== */
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 8px; }
.tcard {
  display: block; border: 1px solid var(--hair); border-left: 3px solid var(--accent);
  border-radius: var(--r); background: var(--panel); padding: 10px 12px;
  position: relative; isolation: isolate;
  transition: border-color 160ms ease;
}
.tcard::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(125deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent) 5%, transparent) 65%, transparent);
  opacity: 0; transition: opacity 160ms ease; pointer-events: none; z-index: -1;
}
.tcard:hover, .tcard:focus-visible { border-color: var(--accent); }
.tcard:hover::before, .tcard:focus-visible::before { opacity: 1; }
.tcard .top { display: flex; align-items: baseline; gap: 8px; }
.tcard .nm { font-size: 15px; font-weight: 650; color: var(--ink-hi); }
.tcard .card-arrow { margin-left: auto; color: var(--ink-3); font-size: 16px; }
.tcard:hover .card-arrow, .tcard:focus-visible .card-arrow { color: var(--ink-hi); }
@media (prefers-reduced-motion: reduce) { .tcard, .tcard::before { transition: none; } }
.tcard .row { display: flex; gap: 14px; margin-top: 8px; }
.tcard .row div { font-size: 11px; color: var(--ink-3); }
.tcard .row b { display: block; font-size: 14px; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.tcard .mini { display: flex; gap: 8px; margin-top: 9px; align-items: center; }
.tcard .mini .t { flex: 1; height: 5px; background: var(--grid); border-radius: 1px; position: relative; }
.tcard .mini .t i { position: absolute; inset: 0 auto 0 0; border-radius: 1px; }
.tcard .mini .t.atk i { background: var(--atk); }
.tcard .mini .t.def i { background: var(--def); }
.tcard .mini span { font-size: 10px; color: var(--ink-3); letter-spacing: .06em; }
.tcard .card-side { display: grid; grid-template-columns: 48px minmax(18px, 1fr) auto; gap: 6px; }
.tcard .card-side .num { color: var(--ink); letter-spacing: 0; white-space: normal; text-align: right; }
.tcard .card-side .n { letter-spacing: 0; }
.tcard > .mini > .n { white-space: normal; letter-spacing: 0; }
.tcard .mini .t i, .gauge .fill, .mapchip .b .f { transform-origin: left center; }
.index-coverage-link { display: inline-block; margin-top: 12px; color: var(--ink-2); font-size: 12px; }
.index-coverage-link:hover { color: var(--ink-hi); }
.coverage-disclosure { margin-top: 26px; scroll-margin-top: calc(var(--topbar-height, 46px) + 12px); }
.coverage-disclosure > summary { cursor: pointer; color: var(--ink-hi); font-weight: 600; padding: 12px 0; border-top: 1px solid var(--hair); }
.coverage-disclosure > summary span { font-weight: 400; color: var(--ink-3); margin-left: 8px; font-size: 11px; }
.sort-control { font: inherit; text-align: inherit; letter-spacing: inherit; text-transform: inherit; padding: 4px 0; }
.sort-control::after { content: " ↕"; color: var(--ink-3); }
.tbl th.sortable-th::after { content: none; }
.tbl th[aria-sort="ascending"] .sort-control::after { content: " ↑"; }
.tbl th[aria-sort="descending"] .sort-control::after { content: " ↓"; }
@media (prefers-reduced-motion: reduce) {
  [data-plane-scope] [data-player], [data-plane-scope] .quad-key [data-quadrant],
  [data-plane-scope] .readout tr { transition: none; }
}

.regionhead { display: flex; align-items: baseline; gap: 10px; margin: 20px 0 8px; }
.regionhead h2 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.regionhead .n { margin-left: auto; }

/* ==================================================================
   20. Misc
   ================================================================== */
.lede { max-width: 62ch; color: var(--ink-2); font-size: 13px; }
.rulebar { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--ink-3); margin-top: 6px; }
.rulebar b { color: var(--ink-2); font-weight: 600; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--hair); border-radius: var(--r); padding: 5px 11px;
  font-size: 12px; color: var(--ink-2); background: var(--panel);
}
.btn:hover { color: var(--ink-hi); border-color: var(--ink-3); }
.btn.primary { border-color: color-mix(in srgb, var(--accent) 60%, var(--hair)); color: var(--ink-hi); }

.seg { display: inline-flex; border: 1px solid var(--hair); border-radius: var(--r); overflow: hidden; }
.seg > * { padding: 4px 10px; font-size: 11px; color: var(--ink-3); border-left: 1px solid var(--hair); }
.seg > *:first-child { border-left: 0; }
.seg > *[aria-pressed="true"], .seg > *[aria-current] {
  color: var(--ink-hi); background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.htmx-request .tab-body { opacity: .55; transition: opacity .12s; }

.boundary-zone {
  border: 1px solid color-mix(in srgb, var(--c3) 35%, var(--hair));
  border-radius: var(--r); padding: 12px 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c3) 5%, transparent), transparent 60px), var(--panel);
}
.boundary-zone > h3 { color: color-mix(in srgb, var(--c3) 80%, var(--ink)); }

/* ==================================================================
   21. Scout card (screen preview; print.css owns the printed form)
   ================================================================== */
.card { background: var(--panel); border: 1px solid var(--hair); border-radius: var(--r); padding: 18px 20px 16px; margin: 10px 0 30px; }
.card-head { display: flex; gap: 24px; align-items: flex-start; border-bottom: 2px solid var(--hair); padding-bottom: 12px; margin-bottom: 14px; }
.card-eyebrow { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.card-head h1 { font-size: 26px; color: var(--ink-hi); margin: 4px 0 2px; }
.card-sub { font-size: 11px; color: var(--ink-3); }
.card-rec { display: flex; gap: 20px; margin-left: auto; text-align: right; }
.card-rec div b { display: block; font-size: 19px; font-weight: 650; color: var(--ink-hi); }
.card-rec div span { display: block; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.card-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 16px; }
.card-row:has(.wide) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
@media (max-width: 880px) { .card-row, .card-row:has(.wide) { grid-template-columns: 1fr; } }
.card-block { min-width: 0; }
.card-block h2 { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); border-bottom: 1px solid var(--hair); padding-bottom: 4px; margin: 0 0 8px; }
.card-block h2:not(:first-child) { margin-top: 16px; }
.card-list { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.card-list li { margin-bottom: 7px; }
.card-list li b { color: var(--ink-hi); }
.dimtext { color: var(--ink-3); font-size: 11px; }
.exploitline { font-size: 12px; margin: 6px 0 0; padding-left: 9px; border-left: 2px solid var(--accent); }
.cardtbl { width: 100%; border-collapse: collapse; font-size: 11px; font-variant-numeric: tabular-nums; }
.cardtbl th { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; text-align: right; border-bottom: 1px solid var(--hair); padding: 0 6px 4px; }
.cardtbl th:first-child, .cardtbl td:first-child, .cardtbl .l { text-align: left; padding-left: 0; }
.cardtbl td { text-align: right; padding: 3px 6px; border-bottom: 1px solid var(--grid); }
.cardtbl tfoot td { border: 0; font-size: 10px; color: var(--ink-3); text-align: left; padding-top: 6px; }
.cardtbl tr.dimrow td { color: var(--ink-3); }
.agents { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: 11px; }
.agents span { border: 1px solid var(--hair); border-left: 3px solid var(--accent); padding: 3px 7px; border-radius: 3px; background: var(--panel-2); }
.agents.flex span { border-left-style: dashed; border-left-color: var(--ink-3); }
.agents b { text-transform: capitalize; color: var(--ink-hi); }
.agents i { color: var(--ink-3); font-style: normal; margin-left: 4px; }
.card-foot { border-top: 1px solid var(--hair); padding-top: 10px; margin-top: 12px; display: grid; gap: 4px; font-size: 10px; color: var(--ink-3); line-height: 1.5; }
.card-foot b { color: var(--ink-2); }

/* ==================================================================
   22. Interaction states
   Every panel responds to something. Hover reveals the definition and the
   interval; click opens the evidence; the slicer and the opponent picker
   swap their own region so the page never jumps.
   ================================================================== */

/* -- lanes are buttons ------------------------------------------------ */
a.lane {
  cursor: pointer; position: relative; border-radius: 3px; padding: 3px 4px;
  transition: background .1s ease;
}
a.lane:hover { background: rgba(255, 255, 255, .035); }
a.lane:hover .dot { transform: scale(1.25); }
a.lane:hover .pole { color: var(--ink); }
a.lane .dot { transition: transform .12s ease; }
a.lane:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
a.lane.open { background: color-mix(in srgb, var(--accent) 10%, transparent); }
a.lane.open .pole { color: var(--ink); }

/* The hint is the hover reveal: definition + interval + what a click does. */
.lane-hint {
  display: none; position: absolute; left: 0; right: 0; top: calc(100% - 2px);
  z-index: 25; background: var(--raise); border: 1px solid var(--hair);
  border-radius: var(--r); padding: 7px 10px; font-size: 11px; color: var(--ink-3);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .55); line-height: 1.5; text-align: left;
  pointer-events: none;
}
.lane-hint b { display: block; color: var(--ink); font-weight: 500; margin-bottom: 2px; }
a.lane:hover .lane-hint, a.lane:focus-visible .lane-hint { display: block; }

/* -- evidence drawer -------------------------------------------------- */
.drawer {
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--hair));
  border-radius: var(--r); background: var(--panel-2);
  padding: 11px 13px 13px; margin: 10px 0 4px;
}
.drawer.just-swapped, #collision-card.just-swapped .pp,
#map-slice.just-swapped, #opponent-panel.just-swapped {
  animation: drawer-in .16s ease-out both;
}
@keyframes drawer-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .just-swapped { animation: none !important; } }
.drawer-head { display: flex; align-items: flex-start; gap: 14px; }
.drawer-head b { font-size: 13px; color: var(--ink-hi); }
.drawer-head small { display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px; max-width: 62ch; }
.drawer-val { margin-left: auto; text-align: right; font-size: 17px; font-weight: 650; color: var(--ink-hi); white-space: nowrap; }
.drawer-val .n { display: block; font-size: 11px; font-weight: 400; }
.drawer-close { color: var(--ink-3); font-size: 15px; line-height: 1; padding: 2px 4px; border-radius: 3px; }
.drawer-close:hover { color: var(--ink-hi); background: rgba(255,255,255,.06); }

/* Per-map column strip: the shape of the sample, oldest → newest. */
.ev-strip {
  display: flex; align-items: flex-end; gap: 2px; height: 46px;
  margin: 11px 0 3px; padding: 0 1px;
  border-bottom: 1px solid var(--hair);
}
.ev-bar { flex: 1 1 0; min-width: 3px; background: var(--ink-3); border-radius: 1px 1px 0 0; opacity: .55; }
.ev-bar.won { background: color-mix(in srgb, var(--accent) 80%, transparent); opacity: 1; }
.ev-bar.miss { background: repeating-linear-gradient(135deg, var(--hair) 0 2px, transparent 2px 4px); }
.ev-bar:hover { outline: 1px solid var(--ink-hi); }
.ev-axis { display: flex; justify-content: space-between; font-size: 10px; color: var(--ink-3); }
.ev-row-track { display: block; position: relative; height: 6px; background: var(--grid); border-radius: 1px; }
.ev-row-track i { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--accent) 70%, transparent); border-radius: 1px; }
/* A missing value is a hatch, not a full bar — .gapmark has to beat the
   sibling rule above or it inherits the accent fill and reads as 100%. */
.ev-row-track i.gapmark { inset: 0; width: 100%; background: repeating-linear-gradient(135deg, var(--hair) 0 3px, transparent 3px 6px); }

/* -- collision card --------------------------------------------------- */
.collide-head { display: flex; align-items: baseline; gap: 10px; margin: 2px 0 9px; font-size: 12px; color: var(--ink-3); }
.collide-head .tally b { color: var(--ink-hi); font-size: 14px; }
.alldims { margin-top: 12px; }
.alldims > summary { font-size: 11px; color: var(--ink-3); cursor: pointer; padding: 3px 0; }
.alldims > summary:hover { color: var(--ink); }


/* -- htmx request feedback -------------------------------------------- */
.htmx-request, .htmx-request .pp, .htmx-request .gauges { opacity: .45; }
#map-slice.htmx-swapping, #opponent-panel.htmx-swapping { opacity: .3; }
#map-slice, #opponent-panel, #dimension-panel { transition: opacity .12s ease; }
.htmx-indicator { opacity: 0; transition: opacity .15s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.mapchip, .chip { transition: background .1s ease, border-color .1s ease, color .1s ease; }

/* -- sortable tables --------------------------------------------------- */
.sortable-th { cursor: pointer; user-select: none; position: relative; padding-right: 15px !important; }
.sortable-th:hover { color: var(--ink); }
.sortable-th::after {
  content: "⇅"; position: absolute; right: 4px; top: 0; font-size: 9px; opacity: .3;
}
.sortable-th[aria-sort="ascending"]::after { content: "↑"; opacity: 1; color: var(--accent); }
.sortable-th[aria-sort="descending"]::after { content: "↓"; opacity: 1; color: var(--accent); }
.sortable-th:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* -- entry-plane brushing ---------------------------------------------- */
[data-plane-scope] [data-player], [data-plane-scope] .quad-key [data-quadrant] {
  transition: opacity .12s ease, background .12s ease;
}
[data-plane-scope] .cold { opacity: .18; }
[data-plane-scope] tr.cold td { opacity: .35; }
[data-plane-scope] .plane .pt.hot { stroke: var(--ink-hi); stroke-width: 1.1; }
[data-plane-scope] .plane text.hot { fill: var(--ink-hi); font-weight: 700; }
[data-plane-scope] tr.hot td { background: color-mix(in srgb, var(--accent) 14%, transparent); }
[data-plane-scope] .readout tr { transition: opacity .12s ease, background .12s ease; }

.quad-key button[data-quadrant] { cursor: pointer; border-left-width: 2px; }
.quad-key button[data-quadrant]:hover,
.quad-key button[data-quadrant]:focus-visible { border-left-color: var(--accent); color: var(--ink-2); }
.quad-key button[aria-pressed="true"] { border-left-color: var(--accent); opacity: 1; }
.quad-key button[aria-pressed="true"] b { color: var(--accent); }
.plane-hint { font-size: 11px; color: var(--ink-3); margin-top: 6px; }

/* -- generic hover reveal for any stat that has a definition ----------- */
.hasdef { position: relative; cursor: help; border-bottom: 1px dotted var(--ink-3); }
.hasdef > .def-pop {
  display: none; position: absolute; left: 0; top: calc(100% + 5px); z-index: 30;
  min-width: 220px; max-width: 340px; background: var(--raise);
  border: 1px solid var(--hair); border-radius: var(--r); padding: 8px 10px;
  font-size: 11px; color: var(--ink-2); line-height: 1.5;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .55); white-space: normal;
}
.hasdef:hover > .def-pop, .hasdef:focus-within > .def-pop { display: block; }

/* Veto chip hover card — what the bars mean and what a click will do. */
.mapchip { position: relative; }
.chip-pop {
  display: none; position: absolute; left: -1px; right: -1px; top: calc(100% + 4px); z-index: 28;
  background: var(--raise); border: 1px solid var(--hair); border-radius: var(--r);
  padding: 8px 10px; font-size: 11px; color: var(--ink-2); line-height: 1.55;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .55); min-width: 210px; white-space: normal;
}
.chip-pop b { display: block; color: var(--ink-hi); font-size: 12px; margin-bottom: 2px; }
.chip-pop i { color: var(--accent); font-style: normal; }
.mapchip:hover .chip-pop, .mapchip:focus-visible .chip-pop { display: block; }

/* Outbound links and their disabled twin. A row whose target failed the
   scheme/host check keeps the same shape in the table so the column does
   not reflow, but it is inert and says so. */
.btn-xs { padding: 2px 8px; font-size: 11px; }
.srclink { text-decoration: underline; }
.is-disabled {
  color: var(--ink-3); cursor: not-allowed; text-decoration: none;
  border-color: var(--grid); opacity: .75;
}

/* ==================================================================
   Narrow viewports: the page itself never scrolls sideways.
   Wide content (tables, rails, tab bars) scrolls inside its own box.
   ================================================================== */
html, body { max-width: 100%; }
.shell { min-width: 0; }
.grid > *, .tab-body > *, .lane, .headline, .wc { min-width: 0; }
.scroll-x { max-width: 100%; }
img, svg, table { max-width: 100%; }

@media (max-width: 420px) {
  .shell { padding: 0 12px; }
  .topbar .shell { gap: 10px; }
  /* The corpus line is the first thing to go: it is context, not data. */
  .topbar .corpus { display: none; }
  .team-head .shell { gap: 14px; }
  .headline-stats { gap: 12px; flex-wrap: wrap; }
  .sec .right { margin-left: 0; flex-basis: 100%; }
  .prov-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .prov-row > b + small { grid-column: 1; }
}

/* Built similarly: structure verdict line + inline team swatch. */
.shape-line { display: flex; align-items: baseline; gap: 9px; font-size: 12px; color: var(--ink-2); flex-wrap: wrap; }
.swatch-sm { display: inline-block; width: 3px; height: 11px; border-radius: 1px; margin-right: 7px; vertical-align: -1px; }

/* A map outside this team's pool: present in the rail so the reader can see
   it was considered and excluded, but carrying no bars, because there is no
   denominator to draw them against. */
.mapchip.nopool { opacity: .55; }
.mapchip.nopool .nm { color: var(--ink-3); }
.nopool-note { font-size: 10px; color: var(--ink-3); font-style: italic; }

/* Round recreation notches. A scored kill is solid; an event that changed
   the round without scoring is hollow; an expected event we could not
   verify is a gap mark. Order that is bracketed rather than proven loses
   the hard edge. */
.notch.k-nonscoring { opacity: .5; }
.notch.k-gap { background: repeating-linear-gradient(45deg, var(--warn) 0 2px, transparent 2px 4px) !important; }
.notch.unknown { background: var(--ink-3); }
.notch.unproven { outline: 1px solid color-mix(in srgb, var(--ink-hi) 30%, transparent); outline-offset: 1px; }

/* About this data: one methodology disclosure, in the footer, on every page. */
footer.site .prov.about { border-top: 0; padding-top: 0; flex-basis: 100%; }
footer.site .prov.about .prov-body { max-width: 92ch; }

/* Prose must never wear a class built for a short token. `.n` and `.flag`
   are nowrap on purpose (a sample and a badge should not break mid-phrase),
   so a sentence wearing either one runs off a narrow screen — caught at
   390 px, where `overflow-x: hidden` was hiding the clip rather than the
   layout being right. */
.hint { font-size: 11px; color: var(--ink-3); white-space: normal; line-height: 1.45; }
h3.sub .hint { letter-spacing: 0; text-transform: none; font-weight: 400; }

@media (max-width: 620px) {
  /* A badge carrying a whole readout has to be allowed to break. */
  .flag { white-space: normal; }
  .ladder .lbl { min-width: 0; }
}

/* A chip for a dimension measured as not separating teams. Same treatment as
   the dimmed fingerprint lane, for the same reason: it is offered, but it is
   not a standing. */
.chip.flat { opacity: .6; }
.chip.flat.on { opacity: 1; }

/* A side row's two values carry their own samples (disjoint denominators),
   so the number and its sample stack in the value column. */
.lrow .va .n, .lrow .vb .n { display: block; font-size: 10px; }

/* Class-mix counts, on the surface rather than in a title attribute. */
.clsnums { display: flex; flex-wrap: wrap; gap: 4px 9px; margin-top: 4px; font-size: 10px; color: var(--ink-3); }
.clsnums [data-cls="duelist"]    { color: var(--cls-duelist); }
.clsnums [data-cls="initiator"]  { color: var(--cls-initiator); }
.clsnums [data-cls="controller"] { color: var(--cls-controller); }
.clsnums [data-cls="sentinel"]   { color: var(--cls-sentinel); }

/* Outside-corpus context card: visibly set apart from anything that counts. */
.outside-corpus { border-style: dashed; }
.outside-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 5px 0; border-top: 1px solid var(--grid); font-size: 12px; }
.outside-row:first-of-type { border-top: 0; }
.outside-row .res { font-weight: 700; font-size: 11px; }
.outside-row .res.w { color: var(--win); }
.outside-row .res.l { color: var(--loss); }

/* An inline link in body prose has to look like one. */
.lede a { color: var(--ink-hi); text-decoration: underline; text-underline-offset: 2px; }
.lede a:hover, .lede a:focus-visible { color: var(--oracle); }

/* A gap we cannot place: a band over the window it must lie in, never a
   notch, because a notch asserts an instant. */
.notch-band {
  position: absolute; left: 0; right: 0;
  background: repeating-linear-gradient(45deg, var(--warn) 0 2px, transparent 2px 5px);
  border-top: 1px solid var(--warn); border-bottom: 1px solid var(--warn);
  opacity: .75;
}