/* Self-hosted so the first paint never waits on a third-party connection.
   Latin subset only, which is every glyph this site actually sets. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/Archivo-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/Archivo-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/Archivo-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/IBMPlexMono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/IBMPlexMono-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/IBMPlexMono-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* REDSEC design tokens. Exported from the brand direction so the build starts
   from the same values as the mockups. */
/* The tracker palette. Names are unchanged from the first system so every rule
   below inherits the retune, and the light theme redefines the same names. */
:root {
  --chrome: #171B20;
  /* The R mark, in whichever colour reads on this ground. */
  --mark: url("/static/logo.png");
  --row-hover: #1D2126;
  --ground: #0F1216;
  --panel:  #171B20;
  --panel2: #1C2127;
  --rule:   #252A31;
  --line:   #20252B;
  --bar:    #2E343C;
  --faint:  #626A73;
  --muted:  #889099;
  --text:   #E2E6EA;
  --bright: #FFFFFF;
  /* Reserved: live, losses, and the leading edge of a wipe. Nothing else. */
  --accent: #FF4438;
  --rise:   #5FD38A;
  --gold:   #E8B341;

  /* Squad monograms. Muted enough to sit behind a name without shouting. */
  --m0:#4A6FA5; --m1:#7A4A8C; --m2:#2F7D6B; --m3:#A05A2C;
  --m4:#7C5CBF; --m5:#3F7A3F; --m6:#A8484E; --m7:#3D6E8E;

  /* Placement bands: a value ramp, not a set of hues. The system spends its
     one colour on the thing worth marking — a win — and reads the rest as
     brightness, the way the rest of the site does. */
  --b-win:#FF4438; --b-podium:#CED4DA; --b-top:#848D96;
  --b-mid:#4C555E; --b-low:#2B3238;

  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r: 3px;
  --header-h: 50px;
  --strip-h: 40px;
  /* The chrome's side inset: whatever puts its edges on the content column's,
     which is 1100px wide with the gutter inside it. 100% rather than 100vw,
     so a scrollbar does not push the chrome out of line with the page. */
  --inset: max(var(--gutter), calc((100% - 1100px) / 2 + var(--gutter)));
  --rail-w: 296px;
  --gutter: 20px;
}

/* Light is a first-class theme, not an afterthought: the same names, different
   values. The attribute wins over the media query so a stated choice sticks. */
:root[data-theme="light"] {
  --chrome: #FFFFFF;
  --mark: url("/static/logo-dark.png");
  --row-hover: #F4F6F8;
  --ground: #F1F3F5;
  --panel:  #FFFFFF;
  --panel2: #F7F8FA;
  --rule:   #DFE3E8;
  --line:   #EAEDF0;
  --bar:    #C9D0D8;
  --faint:  #98A0A8;
  --muted:  #69717A;
  --text:   #1B1F24;
  --bright: #000000;
  --accent: #DC3A2E;
  --rise:   #2E9E5F;
  --gold:   #9A6B10;
  --b-win:#DC3A2E; --b-podium:#2B3238; --b-top:#6B747D;
  --b-mid:#AEB6BE; --b-low:#DDE2E6;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --chrome: #FFFFFF;
    --mark: url("/static/logo-dark.png");
    --row-hover: #F4F6F8;
    --ground: #F1F3F5;
    --panel:  #FFFFFF;
    --panel2: #F7F8FA;
    --rule:   #DFE3E8;
    --line:   #EAEDF0;
    --bar:    #C9D0D8;
    --faint:  #98A0A8;
    --muted:  #69717A;
    --text:   #1B1F24;
    --bright: #000000;
    --accent: #DC3A2E;
    --rise:   #2E9E5F;
    --gold:   #9A6B10;
    --b-win:#DC3A2E; --b-podium:#2B3238; --b-top:#6B747D;
    --b-mid:#AEB6BE; --b-low:#DDE2E6;
  }
}

*, *::before, *::after { box-sizing: border-box; }

/* The system used to forbid border radius outright, to read as documents rather
   than cards. The tracker layout is built on cards, so a small radius is the
   rule now — small enough that tables still read as tables. */
html, body { border-radius: 0; }
input, button, select, textarea { border-radius: var(--r); }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--bright); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

h1, h2, h3 { font-family: var(--sans); margin: 0; }
h1 { font-size: 27px; font-weight: 700; color: var(--bright); letter-spacing: -0.01em; }
h2 { font-size: 19px; font-weight: 700; color: var(--bright); }
h3 { font-size: 13px; font-weight: 600; color: var(--bright); }

.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.bright { color: var(--bright); }
/* Numbers and dates never wrap: a wrapped figure changes row height, which on
   a live table reads as the layout breaking. */
.num { font-variant-numeric: tabular-nums; font-family: var(--mono); text-align: right; white-space: nowrap; }

/* ---------- Header ---------- */
.header {
  height: var(--header-h);
  background: var(--chrome);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 var(--inset);
  position: sticky;
  top: 0;
  z-index: 40;
}

/* Logo only. Sized up from the lockup, since it is now carrying the header
   by itself, and given its own hit area rather than inheriting the text's. */
.wordmark { display: flex; align-items: center; padding: 4px; margin-left: -4px; }
/* The R, as a background so the theme can swap it: an <img> src cannot
   follow a stylesheet, and the toggle only ever changes the stylesheet. */
.mark { display: block; background: var(--mark) center / contain no-repeat; }
.wordmark .mark { width: 28px; height: 28px; }
.wordmark:hover { opacity: 0.85; }

/* The active tab is filled, not underlined: at this size a line under two
   words is easy to miss and the fill never is. */
.nav { display: flex; gap: 2px; flex: 1; }
/* Icon-only: a fixed square so the row reads as a set of controls, with the
   name carried by title and aria-label rather than by visible text. */
.nav a {
  display: grid; place-items: center;
  width: 36px; height: 32px;
  color: var(--muted);
  border-radius: var(--r);
}
.ico {
  width: 20px; height: 20px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: square; stroke-linejoin: miter;
}
.nav a:hover { background: var(--panel2); color: var(--text); }
.nav a[aria-current="page"] { background: var(--accent); color: #fff; }
.nav a[aria-current="page"] .ico { stroke-width: 2; }

.header-tools { display: flex; align-items: center; gap: 8px; }

.search input {
  background: var(--ground);
  border: 1px solid var(--rule);
  color: var(--text);
  font-family: var(--sans);
  font-size: 12.5px;
  padding: 6px 9px;
  width: 150px;
}
.search input::placeholder { color: var(--faint); }

/* Two square controls: the theme, and the global spoiler seal. */
.icon-btn {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--ground);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
}
.icon-btn:hover { color: var(--text); border-color: var(--faint); }

.spoiler-toggle {
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  background: var(--ground);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  color: var(--muted);
  font-family: var(--sans);
  padding: 0;
  cursor: pointer;
}
.spoiler-toggle [data-spoiler-label] { display: none; }
.spoiler-toggle:hover { border-color: var(--faint); color: var(--text); }
.spoiler-toggle .pip { width: 14px; height: 12px; background: var(--bar); display: block;
  border-radius: 1px; }
.spoiler-toggle[aria-pressed="false"] { color: var(--text); }
.spoiler-toggle[aria-pressed="false"] .pip { background: var(--rise); }

/* Phones: the nav takes whatever the logo and tools leave, its icons spread
   across it, so the row fits down to 360px without scrolling sideways. */
@media (max-width: 860px) {
  .header { gap: 8px; }
  .nav { gap: 0; justify-content: space-between; min-width: 0; }
  .nav a { width: 38px; height: 36px; }
  .header-tools { gap: 6px; }
  .icon-btn, .spoiler-toggle { width: 34px; height: 34px; }
}
@media (max-width: 400px) {
  .nav a { width: 32px; }
  .header-tools { gap: 4px; }
  .icon-btn, .spoiler-toggle { width: 32px; height: 32px; }
}

/* ---------- Context strip ---------- */
.strip {
  height: var(--strip-h);
  background: var(--chrome);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 var(--inset);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.strip .sep { color: var(--rule); }
.strip .spacer { flex: 1; }

/* Status first, then the trail, then whatever the page keeps in view. Status
   is a badge rather than a crumb: "Live" is not a place you can go back to. */
.strip-status { display: inline-flex; align-items: center; gap: 7px; flex: none; }
.strip-status.is-live { color: var(--accent); }
.strip-meta { display: flex; align-items: center; gap: 14px; flex: none; margin-left: auto; }

.crumbs { flex: 1; min-width: 0; }
.crumbs ol { display: flex; align-items: center; gap: 10px; list-style: none;
  margin: 0; padding: 0; min-width: 0; }
.crumbs > ol > li { display: flex; align-items: center; gap: 10px; min-width: 0; white-space: nowrap; }
.crumbs > ol > li + li::before { content: "/"; color: var(--rule); }
.crumbs a { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.crumbs a:hover { color: var(--bright); }
.crumbs [aria-current="page"] { color: var(--text); }
.crumbs > ol > li > span[aria-current] { overflow: hidden; text-overflow: ellipsis; }

/* The last crumb, when it has siblings, opens into them. */
.crumb-switch { position: relative; }
.crumb-switch summary { cursor: pointer; list-style: none; color: var(--text); }
.crumb-switch summary::-webkit-details-marker { display: none; }
.crumb-switch summary::after { content: " ▾"; color: var(--faint); }
.crumb-switch[open] summary::after { content: " ▴"; }
.crumb-switch ul {
  position: absolute; top: calc(100% + 10px); left: -10px; z-index: 20;
  min-width: 150px; max-height: 60vh; overflow-y: auto;
  list-style: none; margin: 0; padding: 4px 0;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r);
}
.crumb-switch li { display: block; }
.crumb-switch a { display: block; padding: 7px 12px; color: var(--muted); }
.crumb-switch a:hover { color: var(--bright); background: var(--chrome); }
.crumb-switch a[aria-current="page"] { color: var(--bright); box-shadow: inset 2px 0 0 var(--accent); }

/* A phone has room for where you came from and where you are, not the whole
   way down. The parent turns into a back link; the rest of the trail and
   anything purely informational drop out. */
@media (max-width: 620px) {
  .crumbs > ol > li:not(:nth-last-child(-n+2)) { display: none; }
  .crumbs > ol > li:nth-last-child(2)::before { content: none; }
  .crumbs > ol > li:nth-last-child(2) > a::before { content: "‹ "; }
  /* Too narrow for a trail and extras side by side; what the extras link to
     is on the page below them anyway. */
  .strip-meta { display: none; }
}

.live-dot {
  width: 7px; height: 7px;
  background: var(--accent);
  display: inline-block;
  animation: pulse 1.6s ease-in-out infinite;
}
.live-label { color: var(--accent); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* A ranking being recomputed from results that just landed. */
.updating { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.spinner {
  width: 10px; height: 10px;
  border: 1.5px solid var(--bar); border-top-color: var(--accent); border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }

/* ---------- Layout ---------- */
.body { max-width: 1100px; margin: 0 auto; padding: 16px var(--gutter) 60px; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail-w); gap: 26px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 22px; }
/* The fixture feed spaces itself through its own cards. */
.feed { min-width: 0; }
/* A profile is a stack of separate sections, so the feed owns the rhythm:
   one gap between every box, whatever each box's own margin says. */
.feed.is-profile { display: flex; flex-direction: column; gap: 18px; }
.feed.is-profile > * { margin: 0; }

.page-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head .sub { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

.panel { background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--r); overflow: hidden; }
.panel-head {
  height: 34px;
  background: var(--chrome);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.panel-body { padding: 14px; }
.panel-body p { margin: 0 0 10px; }
.panel-body p:last-child { margin-bottom: 0; }

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 14px; }
thead th {
  height: 34px;
  background: var(--chrome);
  border-bottom: 1px solid var(--rule);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 0 12px;
  white-space: nowrap;
}
thead th.num { text-align: right; }
/* Numeric columns are fixed pixel widths, never percentages — values must not
   shift the layout as they update on a live table. */
th.w-pos { width: 52px; }
th.w-num { width: 72px; }
th.w-wide { width: 92px; }

tbody td {
  height: 45px;
  padding: 0 12px;
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
/* No zebra striping: the dividers are enough, and stripes fight the bars. */
tbody tr:hover td { background: var(--row-hover); }

td.pos { color: var(--muted); font-variant-numeric: tabular-nums; }
td.name { color: var(--bright); font-weight: 500; }
td.key { color: var(--bright); font-weight: 600; }

.team-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* Most squads have no logo, so the empty state is a plain square, not a glyph. */
.logo {
  width: 22px; height: 22px; flex: none;
  background: var(--ground); border: 1px solid var(--rule); border-radius: 2px;
  display: grid; place-items: center; overflow: hidden;
}
.logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Ours, standing in for theirs: dimmed and inset so it never reads as a claim
   about who the squad is. */
.logo .is-fallback { width: 14px; height: 14px; opacity: 0.38; }
/* A face fills its square; a logo is fitted inside it. */
.logo img.photo { object-fit: cover; }
.team-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag { color: var(--muted); font-size: 12px; }

.rise { color: var(--rise); }
.drop { color: var(--accent); }

/* ---------- The redaction device ---------- */
/* A bar always covers something real. The value stays in the DOM and stays
   readable by screen readers; the bar is a visual layer over it. */
.seal { position: relative; display: inline-block; vertical-align: middle; }
.seal > .seal-value {
  opacity: 0;
  user-select: none;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.seal > .seal-bar {
  position: absolute;
  inset: 0;
  min-width: 100%;
  background: var(--bar);
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: block;
  /* The bar tracks the width of what it covers, so a sealed table has rhythm
     instead of reading as a loading skeleton. */
  transform-origin: left center;
  transition: transform 220ms ease-out;
}
/* Touch target is padded, not the bar: the bar stays the height of its text. */
.seal > .seal-bar::before {
  content: "";
  position: absolute;
  inset: -14px -4px;
}
.seal > .seal-bar::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 5px;
  background: var(--accent);
  opacity: 0;
}

.seal.revealed > .seal-value { opacity: 1; }
.seal.revealed > .seal-bar { transform: scaleX(0); pointer-events: none; }
.seal.wiping > .seal-bar::after { opacity: 1; }

/* Loading and unknown states are the same bars, un-tappable — a sealed table
   and a loading table look related instead of unrelated. */
.seal.static > .seal-bar { cursor: default; pointer-events: none; }
.seal.pending > .seal-bar {
  background: repeating-linear-gradient(135deg, var(--bar) 0 6px, #262B32 6px 12px);
}

/* Only one animation exists in the system. Honour the preference to skip it. */
@media (prefers-reduced-motion: reduce) {
  .seal > .seal-bar { transition: none; }
  .live-dot { animation: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 11px 16px;
  min-height: 40px;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary { background: var(--accent); color: var(--chrome); font-weight: 600; }
.btn-secondary { background: transparent; border-color: var(--accent); color: var(--accent); }
.btn-tertiary { background: var(--panel); border-color: var(--rule); color: var(--text); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn[hidden] { display: none; }

/* ---------- Forms ---------- */
label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
input[type="text"], input[type="email"], input[type="password"], input[type="url"],
input[type="number"], select, textarea {
  width: 100%;
  background: var(--ground);
  border: 1px solid var(--rule);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  padding: 10px;
}
.field { margin-bottom: 14px; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }

/* ---------- Rail ---------- */
.rail { display: flex; flex-direction: column; gap: 18px; position: sticky; top: calc(var(--header-h) + 14px); }
.rail .rank-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: 13px; }
.rail .rank-row:last-child { border-bottom: none; }
.rail .rank-row .p { color: var(--muted); width: 22px; font-variant-numeric: tabular-nums; }
.rail .rank-row .n { color: var(--bright); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Empty and sparse states ---------- */
/* "Nobody has sourced this yet" is a primary state here, not an edge case. */
.empty { padding: 30px 14px; text-align: center; color: var(--muted); }
.empty .bars { display: flex; flex-direction: column; gap: 7px; align-items: center; margin-bottom: 14px; }
.empty .bars i { display: block; height: 10px; background: var(--bar); }
.empty p { margin: 0 0 4px; font-size: 13px; }

/* ---------- Footer ---------- */
/* Two bands: who we are and where to find us, then every page the header does
   not carry, grouped under a label so the row never reads as a pile. */
.footer {
  border-top: 1px solid var(--rule);
  background: var(--chrome);
  padding: 28px var(--inset) calc(36px + env(safe-area-inset-bottom, 0px));
  color: var(--muted);
  font-size: 12.5px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.footer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.footer-brand { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.footer-mark { flex: none; padding: 2px; }
.footer-mark .mark { width: 26px; height: 26px; }
.footer .disclaimer { margin: 0; max-width: 56ch; line-height: 1.55; }
.footer-social { display: flex; gap: 8px; flex: none; }
.footer-social .icon-btn { width: 36px; height: 36px; color: var(--text); }
.footer-social .ico-brand { width: 16px; height: 16px; fill: currentColor; }
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); gap: 20px 64px;
  padding-top: 20px; border-top: 1px solid var(--line); }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.footer-h { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.footer-col a { color: var(--muted); padding: 4px 0; }
.footer-col a:hover { color: var(--bright); }
.footer-credit { margin: 0; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--faint); }
.footer-credit a { color: var(--muted); }
.footer-credit a:hover { color: var(--bright); }
@media (max-width: 620px) {
  .footer { gap: 20px; }
  .footer-top { flex-direction: column; gap: 16px; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
  /* Thumb-sized rows: a 20px link is a mis-tap waiting to happen. */
  .footer-col a { padding: 7px 0; font-size: 13.5px; }
}

/* ---------- Prose ---------- */
.prose { max-width: 68ch; }
.prose p { margin: 0 0 12px; }
.prose h2 { margin: 24px 0 10px; }
.prose code { font-family: var(--mono); font-size: 12px; background: var(--chrome); padding: 2px 5px; }
.prose ul { margin: 0 0 12px; padding-left: 18px; }
.prose li { margin-bottom: 5px; }

/* ---------- Mobile ---------- */
/* A six-column standings table does not survive 390px. Secondary columns are
   dropped rather than scaled, leaving position, squad and the decisive figure. */
@media (max-width: 900px) {
  :root { --gutter: 16px; }
  .layout { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; }
  td.collapse, th.collapse { display: none; }
  thead th { padding: 0 8px; }
  tbody td { padding: 0 8px; }
}

/* ---------- Event pages: overview, then the funnel ---------- */
/* The round navigation is also the shape of the tournament: each segment is
   sized by the field that survived into it. */
.funnel { display: flex; gap: 2px; margin: 0 0 20px; }
.funnel .seg {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  padding: 13px 16px;
  color: var(--muted);
  font-family: var(--mono);
  min-width: 0;
  display: block;
}
.funnel .seg:hover { background: var(--row-hover); color: var(--text); }
.funnel .seg.is-current { border-bottom-color: var(--accent); color: var(--text); }
.funnel .seg .r { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.funnel .seg.is-current .r { color: var(--bright); }
.funnel .seg .n {
  display: block; font-size: 24px; font-weight: 600; color: var(--bright);
  font-variant-numeric: tabular-nums; line-height: 1.2; margin-top: 3px;
}
.funnel .seg .sub { display: block; font-size: 11px; white-space: nowrap; }
.funnel .seg .drop { color: var(--accent); }
.funnel .overview { flex: 0 0 auto; }
.funnel .overview .n { font-size: 15px; margin-top: 7px; letter-spacing: 0.06em; }

.section-head { margin: 26px 0 12px; }
.note { font-size: 12px; margin: 10px 0 0; }
a.quiet { color: inherit; }

/* The podium is the thing a visitor most wants and most fears seeing, so it
   is the most deliberate seal on the site. */
.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.place { background: var(--panel); border: 1px solid var(--rule); padding: 16px 14px; }
.place .p {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 9px;
}
.place .who { font-size: 19px; font-weight: 700; color: var(--bright); }
.place .stat { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 5px; }
.place.first { border-color: var(--bar); }
.place.first .who { font-size: 24px; }

.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
}
.facts.wide { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.fact { background: var(--panel); padding: 13px 14px; }
.fact dt {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 5px;
}
.fact dd {
  margin: 0; font-family: var(--mono); font-size: 18px; color: var(--bright);
  font-variant-numeric: tabular-nums;
}
.facts.wide .fact dd { font-size: 15px; }
.fact dd small { font-size: 12px; color: var(--muted); }
.unknown { color: var(--muted); }

/* A round: every lobby side by side, because a lobby is the only scope in
   which a standings table means anything. */
.sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.card { background: var(--panel); border: 1px solid var(--rule); align-self: start; }
.card-head {
  display: flex; align-items: center; gap: 10px;
  background: var(--chrome); border-bottom: 1px solid var(--rule);
  padding: 0 12px; height: 34px;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.card-head .n { margin-left: auto; }
.card table { font-size: 13px; }
.card tbody td { height: 38px; }
.card .more {
  display: block; width: 100%; background: none; border: 0;
  border-top: 1px solid var(--rule); color: var(--muted);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 11px; min-height: 40px; cursor: pointer;
}
.card .more:hover { color: var(--bright); }
/* A folded card is narrow, so it carries only the decisive figure. The rest of
   the columns appear when it expands to the full width of the sheet. */
.card:not(.expanded) .extra { display: none; }

/* Every row is in the DOM for search engines; the fold is presentational,
   and without JavaScript the whole table simply shows. */
.card.folded tbody tr:nth-child(n + 6) { display: none; }
.card .when-open { display: none; }
.card.folded .when-open { display: none; }
.card.folded .when-folded { display: inline; }
.card:not(.folded) .when-folded { display: none; }
.card:not(.folded) .when-open { display: inline; }
.card.expanded { grid-column: 1 / -1; }
tr.qualified td:first-child { box-shadow: inset 3px 0 0 var(--rise); }

.submit-strip { margin-top: 30px; }
.submit-strip .panel-body { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.submit-strip p { flex: 1; min-width: 280px; margin: 0; }

@media (max-width: 760px) {
  .funnel { overflow-x: auto; }
  .podium { grid-template-columns: 1fr; }
  .sheet { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Legacy tournaments ---------- */
/* A published leaderboard with no per-match record beneath it. Marked plainly
   rather than dressed up, so nobody mistakes it for the same kind of record as
   an event we hold every game for. */
.legacy-tag {
  color: var(--bright);
  background: var(--bar);
  padding: 3px 8px;
  letter-spacing: 0.14em;
}
.legacy-flag {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); border: 1px solid var(--rule);
  padding: 2px 6px; margin-left: 8px; white-space: nowrap;
}

/* ---------- Schedule ---------- */
/* Filter chips report their own effect, so nobody clicks into an empty list. */
.chips { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 20px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--rule); border-right: 0;
  color: var(--muted); font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 9px 14px; min-height: 38px;
}
.chip:last-child { border-right: 1px solid var(--rule); }
.chip:hover { color: var(--bright); }
.chip.is-current { color: var(--bright); background: var(--chrome); }
.chip .n { color: var(--muted); font-variant-numeric: tabular-nums; }
.chip.is-current .n { color: var(--text); }

td.countdown { font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.soon { color: var(--bright); }
.mono-sm { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.live-now { border-color: var(--bar); margin-bottom: 22px; }

/* ---------- Search ---------- */
.search-form { display: flex; gap: 0; margin: 0 0 22px; max-width: 560px; }
.search-form input { border-right: 0; }
.search-form .btn { flex: none; }
td.kind {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Home: the strip and the river ---------- */
.next-strip {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--chrome); border: 1px solid var(--rule);
  padding: 14px 18px; margin-bottom: 24px;
}
.next-strip.is-live { border-color: var(--bar); }
.next-strip .when {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; white-space: nowrap;
}
.next-strip .what { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 2px; }
.next-strip .what a { color: var(--bright); font-weight: 600; font-size: 15px; }
.next-strip .what .muted { font-family: var(--mono); font-size: 11px; }

/* One dated stream, so the page reads top to bottom rather than as three
   stacked lists. */
.river { list-style: none; margin: 0; padding: 0; }
.river-item {
  display: grid; grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 14px; align-items: baseline;
  padding: 12px 14px; border-bottom: 1px solid var(--rule);
}
.river-item:last-child { border-bottom: 0; }
.river-item .kind {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
}
.river-item .kind-amendment { color: var(--accent); }
.river-item .entry { min-width: 0; }
.river-item .entry a { color: var(--bright); font-weight: 500; }
.river-item .when {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.standout .who { font-size: 19px; font-weight: 700; color: var(--bright); margin-bottom: 4px; }
.standout .muted { font-family: var(--mono); font-size: 12px; }

@media (max-width: 620px) {
  .river-item { grid-template-columns: minmax(0, 1fr) auto; }
  .river-item .kind { grid-column: 1 / -1; }
}
/* The rail carries both ranking positions and countdowns; a countdown needs
   its own width rather than the 22px a position needs. */
.rail .rank-row .p { white-space: nowrap; }
.rail .rank-row .p:has(.soon), .rail .rank-row .p:has(.live-label),
.rail .rank-row .p .muted { width: auto; }
.rail .rank-row .p { width: auto; min-width: 22px; }

/* ---------- Score matrix ---------- */
/* The identity column stays put while the games scroll, which is the whole
   reason a twenty-squad, ten-game grid is readable at all. */
.matrix-scroll { overflow-x: auto; }
table.matrix { min-width: max-content; }
table.matrix th, table.matrix td { white-space: nowrap; }

.sticky-pos, .sticky-team { position: sticky; z-index: 2; }
.sticky-pos { left: 0; width: 46px; }
.sticky-team { left: 46px; min-width: 168px; }
thead .sticky-pos, thead .sticky-team { background: var(--chrome); z-index: 3; }
tbody .sticky-pos, tbody .sticky-team { background: var(--panel); }
tbody tr:hover .sticky-pos, tbody tr:hover .sticky-team { background: var(--row-hover); }
/* A rule on the sticky edge, so the frozen columns read as a held-back pane. */
.sticky-team { box-shadow: inset -1px 0 0 var(--rule); }

.game-head { text-align: center !important; border-left: 1px solid var(--rule); }
.game-head a { color: var(--muted); }
.game-head a:hover { color: var(--bright); }
.sub-head {
  text-align: center !important; padding: 0 0 6px !important;
  font-size: 9px !important; color: var(--muted); font-weight: 500 !important;
}
td.cell {
  text-align: center; font-family: var(--mono); font-size: 13px;
  font-variant-numeric: tabular-nums; padding: 0 9px; color: var(--text);
}
td.cell.k { color: var(--muted); border-right: 1px solid var(--rule); }
td.cell.none { color: var(--rule); }

/* Rank tinting: the grid should read as who-won-what before any number does.
   One hue, varying weight, so the single-accent rule holds.
   The tint is part of what the bar hides. Shown under a sealed cell it would
   give away every game's winner while the numbers were still covered, which
   defeats the point of sealing them. */
td.cell:has(.seal.revealed).r1 { background: rgba(255, 68, 56, 0.22); color: var(--bright); font-weight: 600; }
td.cell:has(.seal.revealed).r2 { background: rgba(255, 68, 56, 0.15); color: var(--bright); }
td.cell:has(.seal.revealed).r3 { background: rgba(255, 68, 56, 0.10); color: var(--bright); }
td.cell:has(.seal.revealed).r5 { background: rgba(255, 68, 56, 0.06); }
td.cell:has(.seal.revealed).r10 { background: rgba(255, 68, 56, 0.03); }

/* The cut line is a row, not a colour the reader has to decode. */
tr.cut-line td {
  height: 26px; padding: 0 12px; background: var(--chrome);
  border-top: 1px solid var(--rise); border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--rise);
}

/* ---------- Provenance ---------- */
.provenance { margin-top: 22px; }
.prov-block { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--rule); }
.prov-block:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.prov-block h3 {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 8px;
}
.prov-block p { max-width: 74ch; }
.curve { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px !important; }
.band {
  font-family: var(--mono); font-size: 11px; color: var(--text);
  background: var(--ground); border: 1px solid var(--rule); padding: 4px 8px;
}
.prov-list { list-style: none; margin: 0; padding: 0; }
.prov-list li {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 12px;
}
.prov-list li:last-child { border-bottom: 0; }
.prov-list .who { color: var(--bright); }
.card-foot { display: flex; border-top: 1px solid var(--rule); }
.card-foot .more { flex: 1; border-top: 0; text-align: center; text-decoration: none; }
.card-foot .more + .more { border-left: 1px solid var(--rule); }
.card-head a { color: var(--muted); }
.card-head a:hover { color: var(--bright); }

/* ---------- Two ways to read a round ---------- */
.view-tabs { display: flex; gap: 0; margin: 0 0 18px; }
.view-tab {
  background: var(--panel); border: 1px solid var(--rule); border-right: 0;
  color: var(--muted); font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 10px 16px; min-height: 40px; display: inline-flex; align-items: center;
}
.view-tab:last-child { border-right: 1px solid var(--rule); }
.view-tab:hover { color: var(--bright); }
.view-tab.is-current { color: var(--bright); background: var(--chrome); border-bottom-color: var(--accent); }

.lobby-bars { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--rule); }
.lobby-bar {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--panel); padding: 13px 14px;
  font-family: var(--mono); font-size: 11px; color: var(--muted);
}
.lobby-bar:hover { background: #1D2126; }
.lobby-bar .lab {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bright); margin-bottom: 3px;
}
.lobby-bar .stat b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
td.lobby-cell { font-family: var(--mono); font-size: 12px; }

/* A tournament is one row, however many regions it runs in. */
.next-strip .what .title { color: var(--bright); font-weight: 600; font-size: 15px; }
.next-strip .what a { color: var(--muted); }
.next-strip .what a:hover { color: var(--bright); }
.next-row {
  display: flex; gap: 12px; align-items: baseline;
  padding: 10px 12px; border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 13px;
}
.next-row:last-child { border-bottom: 0; }
.next-row .when { white-space: nowrap; color: var(--muted); }
.next-row .what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.next-row .title { color: var(--bright); }
.next-row .regions { font-size: 11px; color: var(--muted); }
.next-row .regions a { color: var(--muted); }
.next-row .regions a:hover { color: var(--bright); }
td.regions-cell { font-family: var(--mono); font-size: 12px; }

/* ---------- Headline figures with their standing ---------- */
.headline-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
  margin-bottom: 10px;
}
.headline-stat { background: var(--panel); padding: 14px 16px; }
.headline-stat .lab {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
  /* A definition is available on every label, so say so. */
  cursor: help; border-bottom: 1px dotted var(--rule); display: inline-block;
}
.headline-stat .val {
  font-family: var(--mono); font-size: 27px; font-weight: 600;
  color: var(--bright); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.headline-stat .bench {
  display: flex; align-items: baseline; gap: 8px; margin-top: 7px;
  font-family: var(--mono); font-size: 11px;
}

/* ---------- Superlatives ---------- */
/* A scoreboard is a list; these are the sentences inside it. */
.superlatives {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
  margin-bottom: 22px;
}
.superlative { background: var(--panel); padding: 13px 15px; }
.superlative .kind {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 7px;
}
.superlative .who { font-size: 16px; font-weight: 600; color: var(--bright); margin-bottom: 3px; }
.superlative .who a { color: inherit; }
.superlative .val {
  font-family: var(--mono); font-size: 12px; color: var(--text);
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
}
.superlative .val .muted { font-size: 11px; }

/* ---------- Leaderboard: sortable, shaded ---------- */
.scroll-x { overflow-x: auto; }
table.lb { min-width: 720px; }
.sort { color: var(--muted); display: inline-flex; gap: 5px; align-items: baseline; cursor: help; }
.sort:hover { color: var(--bright); }
.sort.is-sorted { color: var(--bright); }
.sort .arrow { color: var(--accent); font-size: 9px; }

/* One hue at varying strength, so a dense table becomes scannable without
   adding chrome and without spending a second colour. */
td.heat {
  background: rgba(255, 68, 56, calc(var(--heat, 0) * 0.0022));
  font-variant-numeric: tabular-nums;
}
td.heat:first-of-type { font-weight: 600; }

/* ---------- The funnel and the ratings ---------- */
.funnel-stats, .rating-pair {
  display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); margin-bottom: 18px;
}
.funnel-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.rating-pair { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.funnel-step, .rating { background: var(--panel); padding: 14px 16px; }
.funnel-step .lab, .rating .lab {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
  cursor: help; border-bottom: 1px dotted var(--rule); display: inline-block;
}
.funnel-step .val, .rating .val {
  font-family: var(--mono); font-size: 24px; font-weight: 600;
  color: var(--bright); font-variant-numeric: tabular-nums; line-height: 1.15;
}
.funnel-step .sub, .rating .sub { font-family: var(--mono); font-size: 11px; margin-top: 4px; }

/* ---------- Teams landing ---------- */
/* The leaders are a way in, not a second ranking table: one card each, with
   the record and roster a reader would otherwise open the profile for. */
.subnav a .n { color: var(--faint); font-family: var(--mono); font-size: 11px; font-weight: 400; margin-left: 3px; }
.leaders {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px;
  margin-bottom: 26px;
}
.leader {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  background: var(--panel); border: 1px solid var(--rule); padding: 14px;
  color: var(--text); text-decoration: none;
}
.leader:hover { background: var(--row-hover); }
.leader .lh { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.08em; }
.leader .lh .rk { color: var(--accent); font-weight: 600; font-size: 13px; }
.leader .lh .pts { margin-left: auto; letter-spacing: 0; }
.leader .lh .mv { letter-spacing: 0; }
th.w-rgn { width: 116px; }
td.rgncell { white-space: nowrap; }
td.rgncell .rp { margin-left: 6px; font-size: 12px; color: var(--faint); }
.method { margin-top: 26px; }
.leader .lh .pts b { color: var(--bright); font-size: 16px; font-weight: 600; }
.leader .nm { display: flex; align-items: center; gap: 10px; min-width: 0; }
.leader .nm .t { font-family: var(--mono); font-size: 18px; font-weight: 600; color: var(--bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leader .rec { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); margin-top: auto; }
.leader .rec b { font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--bright); }
.roster { display: block; font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir-search input { width: 220px; padding: 4px 8px; font-size: 12px; letter-spacing: 0; text-transform: none; }
table.directory tbody td { height: 52px; }
/* The squad column takes what the figures leave, so a long roster ellipsises
   instead of pushing Points out of the panel. */
table.directory td.name { width: 100%; max-width: 0; }
table.directory .who { display: block; min-width: 0; }
table.directory .who .team-name { display: inline; }
@media (max-width: 900px) {
  .dir-search input { width: 150px; }
}

/* ==========================================================================
   Fixture cards
   One card per fixture. Time on the left, the squads stacked inside with the
   figure they earned right-aligned, event and tags on the right. A finished
   card carries the podium; an upcoming one carries the seeds, so both read as
   the same object.
   ========================================================================== */

.daylab {
  display: flex; align-items: baseline; gap: 9px;
  margin: 0 0 7px; padding: 0 2px;
}
.daylab b { font-size: 13px; font-weight: 700; color: var(--text); }
.daylab .n { font-size: 11.5px; color: var(--faint); }
.daylab .r { margin-left: auto; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.daylab + .daylab, .mcard + .daylab, .mini + .daylab { margin-top: 20px; }

.mcard {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 200px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  margin-bottom: 6px;
  overflow: hidden;
}
.mcard:hover { background: var(--panel2); border-color: var(--faint); }
.mcard.is-next { box-shadow: inset 3px 0 0 var(--accent); }

.mcard .mtime { padding: 10px 0 10px 12px; border-right: 1px solid var(--line); }
.mcard .mtime .t {
  display: block;
  font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.mcard .mtime .d { display: block; font-size: 10.5px; color: var(--faint); margin-top: 2px; }
.mcard.is-next .mtime .d { color: var(--accent); font-weight: 600; }

.mcard .msquads { padding: 6px 0; min-width: 0; }
.srow {
  display: grid; grid-template-columns: 20px 22px minmax(0, 1fr) 54px;
  gap: 8px; align-items: center; padding: 1px 12px; height: 24px;
}
.srow .pl { font-family: var(--mono); font-size: 10.5px; color: var(--faint); text-align: right; }
.srow .nm {
  font-size: 13px; font-weight: 600; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.srow .pt {
  font-family: var(--mono); font-size: 12.5px; color: var(--muted);
  text-align: right; font-variant-numeric: tabular-nums;
}
/* A row of regions rather than squads: no crest column to leave room for, and
   the badge sets its own height, so the row is not clipped to the 22px slot the
   logo used to sit in. */
.srow.is-region { grid-template-columns: 20px minmax(0, 1fr) 54px; height: auto; padding: 2px 12px; }
.srow.is-region .nm { overflow: visible; }
.srow.is-first .nm, .srow.is-first .pt { color: var(--bright); font-weight: 700; }
.srow.is-first .pl { color: var(--gold); }
.mcard .mrest { padding: 2px 12px 0; font-size: 11px; color: var(--faint); }

.mcard .mevent {
  padding: 10px 12px; border-left: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 5px; min-width: 0;
  align-items: flex-start;
}
/* The podium column sets the card's height, so this cell has room to spare.
   The name holds the top left and the region pill the bottom right, which
   gives every card the same two anchors however tall it runs. */
.mcard .mevent .tags { margin-top: auto; align-self: flex-end; }
.mcard .mevent .n {
  font-size: 12.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mcard .mevent .n .sub { color: var(--faint); font-weight: 400; }

.tags { display: flex; gap: 4px; flex-wrap: wrap; }
.tg {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 5px; border-radius: 2px;
  background: var(--ground); color: var(--muted); border: 1px solid var(--rule);
}
.tg.rg { color: var(--text); }
.tg.hot { background: var(--accent); color: #fff; border-color: transparent; }

/* A cup three weeks out does not earn the same card as one on Saturday. */
.mini {
  display: grid;
  grid-template-columns: 84px 22px minmax(0, 1fr) auto;
  /* Two rows: the name line, then the regions under it. The date, mark and
     countdown span both so they stay centred against the pair. */
  grid-template-rows: auto auto;
  gap: 2px 10px; align-items: center;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r);
  margin-bottom: 4px; padding: 7px 12px;
}
.mini > .t, .mini > .lg, .mini > .tags { grid-row: 1 / span 2; }
.mini > .n { grid-column: 3; grid-row: 1; }
.mini > .rgns { grid-column: 3; grid-row: 2; }
.mini:hover { background: var(--panel2); border-color: var(--faint); }
.mini .t { font-family: var(--mono); font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.mini .n { font-size: 13px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.mini .n .sub { color: var(--faint); font-weight: 400; }

/* Squads have no logos. A monogram keyed off the name gives every row the
   texture a logo would, and stays the same wherever the squad appears. */
.lg {
  width: 22px; height: 22px; border-radius: 2px;
  display: grid; place-items: center;
  font-family: var(--sans); font-size: 9px; font-weight: 700;
  letter-spacing: -0.02em; color: #fff; text-transform: uppercase; flex: none;
}
.lg.h0 { background: var(--m0); } .lg.h1 { background: var(--m1); }
.lg.h2 { background: var(--m2); } .lg.h3 { background: var(--m3); }
.lg.h4 { background: var(--m4); } .lg.h5 { background: var(--m5); }
.lg.h6 { background: var(--m6); } .lg.h7 { background: var(--m7); }
.lg.sm { width: 18px; height: 18px; font-size: 8px; }

@media (max-width: 720px) {
  /* The event column has nowhere to go sideways, so it becomes a strip along
     the bottom. Hiding it would leave three cups on one day telling apart
     only by their squad lists. */
  .mcard { grid-template-columns: 62px minmax(0, 1fr); }
  .mcard .mevent {
    grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line);
    flex-direction: row; align-items: center; gap: 9px; padding: 7px 12px;
  }
  .mcard .mevent .n { flex: 1; min-width: 0; }
  .srow { grid-template-columns: 18px 22px minmax(0, 1fr) 46px; gap: 6px; padding: 1px 9px; }
  .mini { grid-template-columns: 56px 22px minmax(0, 1fr) auto; gap: 8px; }
}

/* The strip of filters under the header: plain links, the active one underlined
   in the accent, and a count on the right that says what the list will hold. */
.subnav {
  background: var(--chrome);
  border-bottom: 1px solid var(--rule);
}
.subnav .inner {
  max-width: 1100px; margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 15px;
  height: 34px; font-size: 12px;
  overflow-x: auto; white-space: nowrap;
}
.subnav a { color: var(--muted); font-weight: 600; padding: 2px 0;
  border-bottom: 2px solid transparent; }
.subnav a:hover { color: var(--text); }
.subnav a.is-current { color: var(--bright); border-bottom-color: var(--accent); }
.subnav .div { width: 1px; height: 13px; background: var(--rule); flex: none; }
.subnav .count { margin-left: auto; color: var(--faint); font-family: var(--mono);
  font-size: 11px; }

/* Rail boxes: a titled card with rows, and an optional row of scope tabs. */
.railbox { background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--r); margin-bottom: 14px; overflow: hidden; }
.railbox > .h {
  display: flex; align-items: center; padding: 8px 11px;
  border-bottom: 1px solid var(--rule);
  font-size: 12px; font-weight: 700; color: var(--text);
}
.railbox > .h a { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--muted); }
.railbox > .h a:hover { color: var(--accent); }
.railtabs { display: flex; gap: 2px; padding: 6px 7px; border-bottom: 1px solid var(--rule); }
.railtabs a, .railtabs button {
  flex: 1; text-align: center; background: var(--ground);
  border: 1px solid var(--rule); border-radius: 2px;
  color: var(--muted); font-family: var(--sans); font-size: 11px; font-weight: 600;
  padding: 4px 0; cursor: pointer;
}
.railtabs button:hover { color: var(--text); border-color: var(--faint); }
.railtabs a.is-current, .railtabs button.is-current {
  background: var(--accent); color: #fff; border-color: transparent;
}
/* Every scope ships with the page; all but one are folded away. */
.railpanel.is-hidden { display: none; }

.railrow {
  display: grid; grid-template-columns: 18px 22px minmax(0, 1fr) auto;
  gap: 8px; align-items: center; padding: 6px 11px;
  border-bottom: 1px solid var(--line);
}
.railrow:last-child { border-bottom: 0; }
.railrow:hover { background: var(--panel2); }
.railrow .p { font-family: var(--mono); font-size: 11px; color: var(--faint); text-align: right; }
.railrow .n { font-size: 12.5px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.railrow .n em { font-style: normal; font-family: var(--mono); font-size: 9.5px;
  color: var(--faint); margin-left: 6px; }
.railrow .v { font-family: var(--mono); font-size: 11.5px; color: var(--text);
  font-variant-numeric: tabular-nums; }
.railrow.is-top .p { color: var(--gold); font-weight: 700; }

.railevent {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 9px; align-items: center; padding: 8px 11px;
  border-bottom: 1px solid var(--line);
}
.railevent:last-child { border-bottom: 0; }
.railevent:hover { background: var(--panel2); }
.railevent .crest {
  width: 30px; height: 30px; border-radius: 2px;
  background: var(--ground); border: 1px solid var(--rule);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 9px; font-weight: 600; color: var(--muted);
  line-height: 1.05; text-align: center;
}
.railevent .n { font-size: 12.5px; font-weight: 600; }
.railevent .s { font-size: 10.5px; color: var(--faint); margin-top: 1px; }
.railevent .w { font-family: var(--mono); font-size: 11px; color: var(--muted);
  white-space: nowrap; }
.railevent.is-next .w { color: var(--accent); font-weight: 600; }
.railevent a.n { display: block; color: var(--text); }
.railevent a.n:hover { color: var(--accent); }
/* The same row at feed width: a larger mark and name, since it leads the page. */
.livebox .railevent { grid-template-columns: 40px minmax(0, 1fr) auto; padding: 11px 14px; }
.livebox .railevent .crest { width: 40px; height: 40px; }
.livebox .railevent .n { font-size: 14px; }
.livebox .railevent .s { margin-top: 4px; }

/* ==========================================================================
   News
   ========================================================================== */

.newslist { display: flex; flex-direction: column; gap: 6px; }
.newsrow {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 12px 14px;
}
.newsrow:hover { background: var(--panel2); border-color: var(--faint); }
.newsrow .d { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.newsrow .t { display: block; font-size: 15px; font-weight: 700; color: var(--text);
  letter-spacing: -0.01em; }
.newsrow:hover .t { color: var(--bright); }
.newsrow .x { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
@media (max-width: 620px) {
  .newsrow { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* The lead on the front page: the newest post, given the room to be read. */
.lead-post {
  display: block; background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--r); padding: 16px 18px; margin-bottom: 6px;
}
.lead-post:hover { border-color: var(--faint); background: var(--panel2); }
.lead-post .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent); }
.lead-post .t { display: block; font-size: 23px; font-weight: 700; color: var(--bright);
  letter-spacing: -0.02em; line-height: 1.15; margin: 6px 0 5px; }
.lead-post .x { display: block; font-size: 13.5px; color: var(--muted); }
.lead-post .d { font-family: var(--mono); font-size: 10.5px; color: var(--faint);
  margin-top: 8px; display: block; }

/* Body copy is the one place on the site with a reading measure. */
.post { max-width: 720px; }
.prose { font-size: 15px; line-height: 1.65; color: var(--text); }
.prose > *:first-child { margin-top: 0; }
.prose p { margin: 0 0 16px; }
.prose h2 { font-size: 19px; margin: 28px 0 10px; }
.prose h3 { font-size: 15px; margin: 22px 0 8px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--bright); border-bottom: 1px solid var(--bar); }
.prose a:hover { border-bottom-color: var(--accent); }

/* Stat embeds in news. A mention reads as an ordinary link with a dotted rule,
   so a reader who never hovers sees prose; the card is the squad's figures in
   a small panel. The accent stays reserved — none of this is live or a loss. */
.prose a.embed-link { border-bottom-style: dotted; }
.hovercard {
  position: absolute; z-index: 60; width: 280px;
  background: var(--panel); border: 1px solid var(--rule); border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35); padding: 14px 16px;
  font-size: 14px; color: var(--text);
}
.hovercard[hidden] { display: none; }
.hovercard .hc-head { display: flex; gap: 12px; align-items: center; }
.hovercard .hc-img {
  width: 28px; height: 28px; border-radius: 6px; object-fit: cover;
  background: var(--panel2); flex: none;
}
.hovercard .hc-img.blank { display: inline-block; }
.hovercard .hc-name { color: var(--bright); font-weight: 700; border: 0; }
.hovercard .hc-meta { color: var(--muted); font-size: 12px; margin-top: 2px; }
.hovercard .hc-figs { margin: 12px 0 0; display: grid; gap: 6px; }
.hovercard .hc-figs > div { display: flex; justify-content: space-between; gap: 12px; }
.hovercard dt {
  color: var(--faint); font-family: var(--mono);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
}
.hovercard dd { margin: 0; color: var(--bright); text-align: right; }
/* A mention in a post: the name in the sentence, a crest or face where there
   is one, and a quiet tag with where they stand. The card behind it carries
   the rest. Nothing here changes the height of the line it sits in. */
.prose a.xref { border-bottom: 0; white-space: nowrap; }
.prose .xref-img {
  width: 16px; height: 16px; max-width: none; margin-right: 5px; vertical-align: -2px;
  border-radius: 3px; object-fit: cover; background: var(--panel2);
}
.xref-name {
  color: var(--bright); font-weight: 600;
  border-bottom: 1px solid var(--bar); transition: border-color 120ms;
}
.prose a.xref:hover .xref-name { border-bottom-color: var(--accent); }
.xref-tag {
  margin-left: 6px; font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.06em; color: var(--faint); vertical-align: 1px;
}
.prose code {
  font-family: var(--mono); font-size: 0.9em;
  background: var(--panel2); border: 1px solid var(--rule); border-radius: 2px;
  padding: 1px 4px;
}
.prose pre {
  background: var(--panel2); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 12px 14px; overflow-x: auto;
}
.prose pre code { background: none; border: 0; padding: 0; }
.prose blockquote {
  margin: 0 0 16px; padding-left: 14px;
  border-left: 2px solid var(--bar); color: var(--muted);
}
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 16px; }
.prose th, .prose td { border-bottom: 1px solid var(--rule); padding: 7px 9px;
  text-align: left; }
.prose img { max-width: 100%; height: auto; }
.backlink { margin-top: 28px; font-size: 13px; }
.backlink a { color: var(--muted); }
.backlink a:hover { color: var(--bright); }

/* The news desk form. */
.newsform { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.newsform label { display: flex; flex-direction: column; gap: 5px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); }
.newsform input[type="text"], .newsform input:not([type]), .newsform textarea {
  background: var(--ground); border: 1px solid var(--rule); border-radius: var(--r);
  color: var(--text); font-family: var(--sans); font-size: 13.5px; padding: 8px 10px;
}
.newsform textarea { font-family: var(--mono); font-size: 13px; line-height: 1.55;
  resize: vertical; }
.newsform .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.newsform .inline { flex-direction: row; align-items: center; gap: 7px;
  text-transform: none; font-size: 13px; letter-spacing: 0; color: var(--text); }
.linkbtn { background: none; border: 0; color: var(--muted); cursor: pointer;
  font-family: var(--sans); font-size: 11px; font-weight: 600; padding: 0; }
.linkbtn:hover { color: var(--accent); }

/* Cover art. Fixed 1200×630 aspect so a post's space does not jump while the
   image loads, and so a missing file leaves a gap rather than a reflow. */
.post .cover {
  display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630;
  object-fit: cover; border: 1px solid var(--rule); border-radius: var(--r);
  margin-bottom: 22px; background: var(--panel2);
}
.lead-post { position: relative; overflow: hidden; }
.lead-post.has-cover { padding: 0; }
.lead-post.has-cover .cover {
  display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630;
  object-fit: cover; border-bottom: 1px solid var(--rule); background: var(--panel2);
}
.lead-post.has-cover .k,
.lead-post.has-cover .t,
.lead-post.has-cover .x,
.lead-post.has-cover .d { padding-left: 18px; padding-right: 18px; }
.lead-post.has-cover .k { display: block; padding-top: 14px; }
.lead-post.has-cover .d { padding-bottom: 16px; }

.newsrow.has-cover { grid-template-columns: 120px 92px minmax(0, 1fr); align-items: center; }
.newsrow .thumb {
  width: 120px; height: 63px; object-fit: cover;
  border: 1px solid var(--rule); border-radius: 2px; background: var(--panel2);
  display: block;
}
@media (max-width: 620px) {
  .newsrow.has-cover { grid-template-columns: minmax(0, 1fr); }
  .newsrow .thumb { width: 100%; height: auto; aspect-ratio: 1200 / 630; }
}

/* ==========================================================================
   Profiles — squads and players
   ========================================================================== */

.b-win { background: var(--b-win); }
.b-podium { background: var(--b-podium); }
.b-top { background: var(--b-top); }
.b-mid { background: var(--b-mid); }
.b-low { background: var(--b-low); }

/* The header: who this is, and the one number that places them. */
.profile-head {
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r);
  margin-bottom: 14px; overflow: hidden;
}
.profile-head .top {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 16px; align-items: center; padding: 16px 18px;
}
.profile-head .id { min-width: 0; }

/* The record as a line to read rather than a row of cells to scan: the figures
   carry the weight, the words between them carry the meaning. */
.statline {
  border-top: 1px solid var(--rule); background: var(--panel2);
  padding: 9px 18px; font-size: 13px; color: var(--muted); line-height: 1.7;
}
/* Each figure is one unit: glyph, number, word. They wrap together rather
   than the glyph stranding itself at the end of a line. */
.statline .stat { white-space: nowrap; margin-right: 16px; }
.ico-s {
  width: 13px; height: 13px; margin-right: 5px; vertical-align: -2px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: square; stroke-linejoin: miter;
  opacity: 0.65;
}
.statline b {
  font-family: var(--mono); font-size: 15px; font-weight: 600;
  color: var(--bright); font-variant-numeric: tabular-nums;
}
.statline b.is-key { color: var(--accent); }
.statline .at { color: var(--faint); font-size: 12px; }
@media (max-width: 620px) {
  .profile-head .top { grid-template-columns: 44px minmax(0, 1fr); }
  .statline { padding: 9px 14px; }
}
.profile-head .crest {
  width: 56px; height: 56px; border-radius: var(--r);
  background: var(--ground); border: 1px solid var(--rule);
  display: grid; place-items: center; overflow: hidden;
}
.profile-head .crest img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* The crest holds the same logo box a table row does; here it fills the frame. */
.profile-head .crest .logo { width: 100%; height: 100%; border: 0; border-radius: 0; background: none; }
.profile-head .crest .is-fallback { width: 30px; height: 30px; opacity: 0.38; }
.profile-head h1 { font-size: 26px; letter-spacing: -0.025em; line-height: 1.1; }
.profile-head .meta {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-top: 5px; font-size: 12.5px; color: var(--muted);
}
.profile-head .meta a { color: var(--text); font-weight: 600; }
.profile-head .rankblock { text-align: right; white-space: nowrap; }
.profile-head .rankblock .pos {
  font-family: var(--mono); font-size: 30px; font-weight: 600; color: var(--bright);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.profile-head .rankblock .of { font-size: 13px; color: var(--faint); }
.profile-head .rankblock .lab {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint); margin-top: 5px;
}
.profile-head .rankblock .mv { font-family: var(--mono); font-size: 11px; margin-left: 6px; }
.profile-head .rankblock .pos .q { vertical-align: 9px; }
.mv-up { color: var(--rise); }
.mv-down { color: var(--accent); }
@media (max-width: 620px) {
  .profile-head .crest { width: 44px; height: 44px; }
  .profile-head .rankblock { grid-column: 1 / -1; text-align: left; }
}

/* The pooled position under the regional one: smaller, because a squad's own
   region is the number it is ranked in and the world table is the context. */
.profile-head .rankblock .lab.world {
  text-transform: none; letter-spacing: 0; font-size: 11px;
  font-family: var(--mono); color: var(--muted); margin-top: 3px;
}
.profile-head .rankblock .lab.world .of { font-size: 11px; }

/* A squad that no longer exists. Stated in the header beside the name, in the
   one colour reserved for things that have stopped. */
.gone {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); border: 1px solid currentColor; border-radius: 2px;
  padding: 2px 6px; opacity: 0.85;
}

/* Form runs sit under the record as a second line, quieter than it. */
.statline.is-form { border-top: 1px dashed var(--rule); color: var(--faint); }
.statline.is-form b { font-size: 14px; color: var(--text); }

/* ---------- Trophies ---------- */
/* A strip of cups rather than a table: a trophy is a thing to be seen, and
   there are never enough of them to need columns. */
.trophies { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
.trophy {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  padding: 8px 12px; border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--ground); color: var(--text); text-decoration: none;
}
.trophy:hover { border-color: var(--gold); }
.trophy .cup .ico-s { width: 17px; height: 17px; color: var(--gold); opacity: 1; }
.trophy .tx { display: flex; flex-direction: column; min-width: 0; }
.trophy b { font-size: 13px; color: var(--bright); }
.trophy .when { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }

/* ---------- The results filter ---------- */
/* A plain form: a narrowed page is a link, and it works with scripting off. */
.filterbar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
  padding: 12px 14px;
}
.filterbar label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--faint);
}
.filterbar select, .filterbar input {
  background: var(--ground); border: 1px solid var(--rule); border-radius: 2px;
  color: var(--text); font: inherit; font-size: 12.5px; padding: 6px 8px;
  max-width: 100%;
}
.filterbar button {
  background: var(--panel2); border: 1px solid var(--rule); border-radius: 2px;
  color: var(--text); font-size: 12.5px; padding: 7px 14px; cursor: pointer;
}
.filterbar button:hover { border-color: var(--bar); color: var(--bright); }

/* ---------- Results, one row per tournament ---------- */
/* <details> rather than a scripted toggle: the lobbies underneath a cup open
   with the keyboard, print open, and need no JavaScript to exist. */
.runs { display: flex; flex-direction: column; }
.run { border-bottom: 1px solid var(--line); }
.run:last-child { border-bottom: 0; }
.run > summary {
  display: grid; align-items: center; gap: 12px; cursor: pointer;
  grid-template-columns: 92px minmax(0, 1fr) 84px 70px 84px;
  padding: 10px 14px; font-size: 13px; list-style: none;
}
.run > summary::-webkit-details-marker { display: none; }
.run > summary:hover { background: var(--row-hover); }
.run > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.run .when { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.run .what { display: flex; align-items: center; gap: 7px; min-width: 0; }
.run .what b { color: var(--bright); }
.run .what .muted { font-size: 12px; }
/* The marker is the row's own affordance, so it turns with the row. */
.run .what::before {
  content: "▸"; color: var(--faint); font-size: 10px; margin-right: 1px;
}
.run[open] .what::before { content: "▾"; }
.run .fin, .run .num { text-align: right; font-variant-numeric: tabular-nums; }
.run table { border-top: 1px solid var(--line); background: var(--panel2); }
@media (max-width: 760px) {
  .run > summary { grid-template-columns: 78px minmax(0, 1fr) 76px; }
}

/* A note under a chart that needs its axis explained once. */

/* Headline numbers, sized to be read across the room. */
.statgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  background: var(--rule); gap: 1px;
  border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden;
  margin-bottom: 14px;
}
.statcard { background: var(--panel); padding: 12px 14px; }
.statcard .lab {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--faint);
}
.statcard .val {
  font-family: var(--mono); font-size: 24px; font-weight: 600; color: var(--bright);
  line-height: 1.1; margin-top: 4px; font-variant-numeric: tabular-nums;
}
.statcard .val small { font-size: 13px; color: var(--muted); font-weight: 400; }
.statcard .sub { font-size: 11px; color: var(--faint); margin-top: 3px; }
.statcard.is-key .val { color: var(--b-win); }


/* Every game as a bar: height is where they finished in that field, colour is
   the band. Read left to right, oldest to newest. */
.gamechart {
  display: flex; align-items: flex-end; gap: 3px;
  height: 108px; padding: 14px 14px 0; overflow-x: auto;
}
.gamechart .g { flex: 1 0 14px; min-width: 9px; height: 100%;
  display: flex; align-items: flex-end; position: relative; }
.gamechart .g i { display: block; width: 100%; border-radius: 1px 1px 0 0; }
.gamechart .g:hover i { outline: 1px solid var(--bright); }
.chartfoot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 9px 14px 12px; font-size: 11px; color: var(--faint);
}
.chartfoot .key { display: flex; align-items: center; gap: 5px; }
.chartfoot .key i { width: 12px; height: 8px; border-radius: 1px; display: block; }
.chartfoot .axis { margin-left: auto; font-family: var(--mono); font-size: 10px; }

/* Distribution: where a squad's finishes actually land. */
.distrib { padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; }
.distrow { display: grid; grid-template-columns: 74px minmax(0, 1fr) 54px;
  gap: 10px; align-items: center; }
.distrow .lab { font-size: 12px; color: var(--muted); }
.distrow .track { height: 14px; background: var(--ground);
  border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; }
.distrow .track i { display: block; height: 100%; }
.distrow .v { font-family: var(--mono); font-size: 12px; color: var(--text);
  text-align: right; font-variant-numeric: tabular-nums; }
.distrow .v small { color: var(--faint); }

/* The conversion funnel, as three narrowing bars. Not `.funnel`: that is the
   round selector on every cup page, and sharing the name stacked it. */
.reachbars { padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; }
.funnelrow { display: grid; grid-template-columns: 104px minmax(0, 1fr) 52px;
  gap: 10px; align-items: center; }
.funnelrow .lab { font-size: 12px; color: var(--muted); }
.funnelrow .track { height: 16px; background: var(--ground);
  border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; }
.funnelrow .track i { display: block; height: 100%; background: var(--b-top); }
.funnelrow.is-last .track i { background: var(--b-win); }
.funnelrow .v { font-family: var(--mono); font-size: 13px; color: var(--bright);
  text-align: right; font-variant-numeric: tabular-nums; }

/* Recent finishes, newest first — the quick read before any chart. */
.formstrip { display: flex; gap: 4px; padding: 12px 14px; flex-wrap: wrap; }
.formstrip .f {
  min-width: 26px; height: 24px; padding: 0 6px; border-radius: 2px;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: #0B0E11;
}
.formstrip .f.b-mid, .formstrip .f.b-low { color: var(--text); }
:root[data-theme="light"] .formstrip .f.b-low,
:root[data-theme="light"] .formstrip .f.b-mid { color: #1B1F24; }

/* Placement chips inside tables. */
.pchip {
  display: inline-grid; place-items: center; min-width: 26px; height: 20px;
  padding: 0 5px; border-radius: 2px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: #0B0E11;
}
.pchip.b-mid, .pchip.b-low { color: var(--text); }
:root[data-theme="light"] .pchip.b-low, :root[data-theme="light"] .pchip.b-mid { color: #1B1F24; }

/* ---------- Brand assets page ---------- */
/* Transparent artwork is shown on the brand ground so it reads as shipped. */
.asset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 16px; }
.asset { margin: 0; border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--panel); padding: 14px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; }
.asset img { max-width: 100%; height: auto; border-radius: var(--r); }
.asset figcaption { font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.asset-wide { grid-column: 1 / -1; }
.asset-dark { background: #0F1216; }
.asset-dark figcaption { color: #889099; }
.asset-file { min-height: 120px; }
.asset-file-ext { font-family: var(--mono); font-size: 22px; font-weight: 600;
  letter-spacing: 0.12em; color: var(--muted); border: 1px solid var(--rule);
  border-radius: var(--r); padding: 14px 22px; }
@media (max-width: 620px) {
  .asset-grid { grid-template-columns: minmax(0, 1fr); }
}

.asset-light { background: #F1F3F5; border-color: #DFE3E8; }
.asset-light figcaption { color: #69717A; }

/* auto-fit leaves a half-empty final row on a phone, and the gap colour then
   reads as an empty panel. An even split fills the grid instead. */
@media (max-width: 620px) {
  .statgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   The performance chart
   One bright line on a hairline grid. The accent marks wins and nothing else.
   ========================================================================== */

.chartbox { background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--r); margin-bottom: 14px; overflow: hidden; }
.chartbox > .h {
  display: flex; align-items: baseline; gap: 10px; padding: 11px 14px;
  border-bottom: 1px solid var(--rule);
  font-size: 12.5px; font-weight: 700; color: var(--text);
}
.chartbox > .h .n { font-family: var(--mono); font-size: 10.5px; color: var(--faint);
  font-weight: 400; letter-spacing: 0.06em; }
.chartbox > .h .legend { margin-left: auto; display: flex; gap: 14px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
  color: var(--faint); font-weight: 400; }
.chartbox > .h .legend i { display: inline-block; width: 14px; height: 2px;
  vertical-align: 3px; margin-right: 5px; }
.chartbox > .h .legend i.p { background: var(--bright); }
.chartbox > .h .legend i.w { background: var(--bar); opacity: 0.75; height: 7px; }
.chartbox > .h .legend i.m { width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); vertical-align: 0; }

/* The chart's two scales, as a segmented control rather than a dropdown: two
   choices are worth showing both of. */
.chartbox > .h .scaletabs { display: flex; align-items: stretch;
  border: 1px solid var(--rule); border-radius: 999px; overflow: hidden;
  align-self: center; }
.chartbox > .h .scaletabs button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--faint); padding: 4px 10px;
  line-height: 1.6; }
.chartbox > .h .scaletabs button:hover { color: var(--text); }
.chartbox > .h .scaletabs button.is-on { background: var(--bright);
  color: var(--panel); font-weight: 700; }
.chartbox > .h .legend + .scaletabs { margin-left: 0; }

.chart-none { margin: 0; padding: 26px 16px; font-size: 12px; text-align: center; }
.chart { display: block; width: 100%; height: auto; }
.chart .grid { stroke: var(--rule); stroke-width: 1; }
.chart .axis { fill: var(--faint); font-family: var(--mono); font-size: 13px; }
.chart .wash { fill: var(--bright); opacity: 0.05; }
.chart .series { fill: none; stroke: var(--bright); stroke-width: 2.2;
  stroke-linejoin: round; stroke-linecap: round; }
.chart .wash2 { fill: var(--bar); opacity: 0.30; }
.chart .dot { fill: var(--panel); stroke: var(--bright); stroke-width: 2; }
.chart .dot.is-marked { fill: var(--accent); stroke: var(--accent); }
.chart .hit { fill: transparent; cursor: help; }
.chart .dot { pointer-events: none; }
.chart .node:hover .dot { stroke: var(--accent); r: 6; }
.chartaxis {
  display: flex; justify-content: space-between; padding: 0 14px 11px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
  color: var(--faint);
}

/* A run of results, newest first. Brightness carries the placement; the accent
   is a win and nothing else. */
.formstrip .f.b-win { color: #fff; }
.formstrip .f.b-podium, .pchip.b-podium { color: #0B0E11; }
:root[data-theme="light"] .formstrip .f.b-podium,
:root[data-theme="light"] .pchip.b-podium { color: #fff; }

/* The hint. One character, quiet until hovered, carrying the sentence that
   used to sit under every figure. */
.q {
  display: inline-grid; place-items: center;
  width: 14px; height: 14px; padding: 0; margin-left: 5px;
  border: 1px solid var(--rule); border-radius: 50%;
  background: transparent; color: var(--faint);
  font-family: var(--sans); font-size: 9px; font-weight: 700; line-height: 1;
  cursor: help; vertical-align: 2px;
}
.q:hover { border-color: var(--accent); color: var(--text); }

/* Figures read as one strip rather than a wall of equal cards: label above,
   number below, separated by rules and sized to their content. */
.specs {
  display: flex; flex-wrap: wrap; align-items: stretch;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r);
  margin-bottom: 14px; overflow: hidden;
}
/* Items stretch to fill whatever row they land on, so a wrap never leaves
   a ragged gap of bare panel at the end. */
.specs .s { flex: 1 1 auto; padding: 11px 16px 12px;
  border-right: 1px solid var(--rule); min-width: 0; }
.specs .s:last-child { border-right: 0; }
.specs .lab {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--faint); white-space: nowrap;
}
.specs .val {
  font-family: var(--mono); font-size: 22px; font-weight: 600; color: var(--bright);
  line-height: 1.15; margin-top: 3px; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.specs .val small { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 3px; }
.specs .s.is-key .val { color: var(--accent); }
/* One mark for the whole strip, parked at the end so it never interrupts the
   rhythm of the figures. */
.specs .hintcell {
  flex: 0 0 auto; margin-left: auto; display: grid; place-items: center;
  padding: 0 12px;
}
.specs .hintcell .q { margin-left: 0; }
@media (max-width: 620px) {
  .specs .s { flex: 1 0 44%; border-bottom: 1px solid var(--rule); padding: 10px 14px; }
}

/* A dateline sits above a headline, not under it. */
.dateline {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 7px;
}
.algostamp { font-family: var(--mono); font-size: 11px; color: var(--faint);
  margin: -8px 0 20px; }
/* Facts about a game — its date, its map — as chips beside the title. */
.headchips { display: inline-flex; gap: 5px; margin-left: 12px; vertical-align: 5px; }

/* ==========================================================================
   Live search
   ========================================================================== */

.search { position: relative; }
.suggest {
  position: absolute; top: calc(100% + 6px); right: 0;
  width: 360px; max-height: 60vh; overflow-y: auto; z-index: 60;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
:root[data-theme="light"] .suggest { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14); }

.suggest-row {
  display: grid; grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px; align-items: baseline;
  padding: 8px 11px; border-bottom: 1px solid var(--line);
  color: var(--text);
}
.suggest-row .b { min-width: 0; }
.suggest-row:last-child { border-bottom: 0; }
.suggest-row .k {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--faint);
}
.suggest-row .l {
  display: block; font-size: 13.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.suggest-row .s {
  display: block; font-family: var(--mono); font-size: 10px; color: var(--faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px;
}
/* Hover and keyboard selection are the same state, so the two never disagree
   about which row Enter will open. */
.suggest-row.is-active { background: var(--accent); color: #fff; }
.suggest-row.is-active .k, .suggest-row.is-active .s { color: rgba(255, 255, 255, 0.75); }
.suggest-empty { padding: 12px; font-size: 12.5px; color: var(--faint); }

@media (max-width: 860px) { .suggest { width: 100vw; right: -12px; } }

/* ---------- Mobile search ---------- */

/* The field is present at desktop widths, so the control that opens it is not. */
.search-toggle { display: none; }

@media (max-width: 860px) {
  .search-toggle { display: grid; }

  /* The form drops out of the header row and becomes a bar beneath it, full
     width, with the suggestion list flowing under the input rather than
     floating over a layout that has no room for it. */
  .search {
    display: none;
    position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 55;
    background: var(--chrome); border-bottom: 1px solid var(--rule);
    padding: 10px 14px;
  }
  .search.is-open { display: block; }
  .search input { width: 100%; font-size: 16px; padding: 9px 11px; }

  .suggest {
    position: static; width: auto; margin-top: 8px;
    max-height: 56vh; box-shadow: none;
  }
}

/* ---- region badges ------------------------------------------------------
   A region as a mark: globe glyph with the part of the world it covers filled,
   plus the two-letter code, because three globes are not distinguishable from
   one another at 16px without it. The hue separates them at a glance; the code
   and the title carry it for anyone the hue does not reach. */
.rgns { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; vertical-align: middle; }
.rgn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 6px 1px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel2);
  color: var(--muted);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 18px;
  white-space: nowrap;
}
.rgn .ico-s {
  width: 13px; height: 13px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.3;
}
.rgn .ico-s .fill { fill: currentColor; stroke: none; opacity: 1; }
/* The equator and the outline sit over the shaded half, so they need to read
   against it as well as against the chip behind it. */
.rgn .ico-s circle, .rgn .ico-s line { stroke: currentColor; }
.rgn-americas { color: #E0A33E; border-color: #E0A33E44; }
.rgn-emea     { color: #5FA8E8; border-color: #5FA8E844; }
.rgn-apac     { color: #6FC08A; border-color: #6FC08A44; }
.rgn-link { text-decoration: none; }
.rgn-link:hover .rgn { border-color: currentColor; background: var(--panel); }

/* ---- country flags ------------------------------------------------------
   Served from /static/flags, the same as the fonts: nothing is asked of a
   third party at page load. A code with no file falls back to the img's alt
   text, which is the two-letter code — readable, and obviously a gap rather
   than a broken layout. */
.flag {
  display: inline-block;
  width: 20px; height: 15px;
  vertical-align: -2px;
  margin-right: 6px;
  border-radius: 2px;
  object-fit: cover;
  background: var(--panel2);
  font-size: 9px; font-weight: 700; color: var(--muted);
}
.profile-head .flag { width: 24px; height: 18px; vertical-align: -3px; }

/* ---- the next cup -------------------------------------------------------
   Not a result, so not the results card: nothing here is a standing, and the
   three editions are the point. Each tile is a way into one region's event. */
.nextcard {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  box-shadow: inset 3px 0 0 var(--accent);
  padding: 12px 14px 14px 16px;
  margin-bottom: 6px;
  display: flex; flex-direction: column; gap: 4px;
}
.nexthead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.nexthead .n { font-size: 17px; font-weight: 700; color: var(--bright); }
.nexthead .tags { display: flex; gap: 6px; }
/* The date and countdown are on the day header directly above; the card does
   not repeat them. */

.edtiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.edtile {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel2);
  text-decoration: none;
  min-width: 0;
}
.edtile:hover { border-color: var(--faint); background: var(--panel); }
.edtop { display: flex; align-items: center; gap: 8px; }
.edway { display: flex; align-items: center; gap: 8px; text-decoration: none; min-width: 0; }
.edway:hover .edname { color: var(--bright); }
.edcrests { text-decoration: none; }
.edfacts {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--mono); font-size: 11px; color: var(--muted);
}
.edpot { color: var(--text); font-weight: 500; }
.edpot .unknown { color: var(--faint); font-weight: 400; }
.edin { color: var(--faint); }
/* Crests of the ranked squads that have entered: recognition at a glance, the
   name on the title for anyone who wants it. */
.edcrests { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.edcrest img, .edcrest svg { width: 18px; height: 18px; border-radius: 3px; display: block; }
.edmore { font-family: var(--mono); font-size: 10px; color: var(--faint); margin-left: 2px; }
/* The region is spelled out beside the badge here, so the badge drops its code
   and is left as the mark. */
.edtile .rgn { padding: 1px 4px; }
.edtile .rgn b { display: none; }
.edtile .edname {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Signup state sits at the end of the tile, and only when an organizer has
   actually said. */
.reg {
  margin-left: auto;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--faint);
}
/* The signup link is the one thing on the card that leaves the site, so it
   says so rather than looking like another internal link. */
a.reg { text-decoration: underline; text-underline-offset: 2px; }
a.reg::after { content: " \2197"; font-size: 9px; }
.reg-open { color: var(--ok, #6FC08A); }
.reg-closed { color: var(--faint); }
.reg-invite { color: var(--muted); }

@media (max-width: 560px) {
  .edtiles { grid-template-columns: 1fr; }
}

/* ---- a cup that has not happened yet ------------------------------------
   The page answers different questions before a cup than after it: what it
   pays, when it starts, whether signups are open, and who has entered. */
.upcoming-panel {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 14px 16px;
  margin-bottom: 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.up-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  align-items: start;
}
.up-top .k {
  display: block;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 4px;
}
.up-top b { font-size: 17px; font-weight: 700; color: var(--bright); }
.up-top .iso { display: block; font-family: var(--mono); font-size: 11px; color: var(--faint); margin-top: 2px; }
.up-top .unknown { font-size: 14px; font-weight: 400; color: var(--faint); }
.up-reg .btn { margin-top: 2px; }
/* The destination in plain sight: a button says what happens, the host says
   where it goes. */
.reglink {
  display: block; margin-top: 6px;
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.section-head .count { font-family: var(--mono); font-size: 12px; color: var(--faint); }
table.entrants .pos { font-family: var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---- whole-card links ---------------------------------------------------
   A card is one thing to click, but a card also holds links of its own — a
   squad, a region, an organizer's signup page. Nesting those inside one big
   anchor is invalid HTML and the browser tears the layout apart, so the card
   gets a stretched link underneath instead and the real links sit above it. */
.is-clickable { position: relative; }
.is-clickable .stretch {
  position: absolute; inset: 0;
  z-index: 0;
  border-radius: inherit;
}
.is-clickable > *:not(.stretch) { position: relative; z-index: 1; }
/* Anything the reader can click inside the card has to sit above the stretched
   link, or the card swallows it. */
.is-clickable a:not(.stretch),
.is-clickable button { position: relative; z-index: 2; }
.mini.is-clickable:hover, .nextcard.is-clickable:hover { background: var(--panel2); }
.is-clickable .stretch:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* A deadline is only worth the space while it is still a deadline. */
.edclose { color: var(--accent); font-weight: 600; }
.reg-soon { color: var(--muted); }
.regnote {
  display: block; margin-top: 6px;
  font-family: var(--mono); font-size: 11px; color: var(--muted);
}

/* ---- an upcoming cup's entry list ---------------------------------------
   The list is the page, so it gets the main column and the cup's own facts go
   in the rail. Ranked squads are the part a reader scans for, so they are
   tiles with a crest and a position; everyone else is a roll call. */
/* No rules between tiles: the position and crest already set the rhythm, and
   a short last row ends in the panel's own ground instead of a grey block. */
.entrgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.entrant {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px;
  background: var(--panel);
  text-decoration: none;
  min-width: 0;
}
.entrant:hover { background: var(--panel2); }
.entrant .pos {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--muted); min-width: 20px;
  font-variant-numeric: tabular-nums;
}
.entrant .logo img { width: 20px; height: 20px; border-radius: 3px; display: block; }
.entrant .nm {
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.entrant:hover .nm { color: var(--bright); }

.rollcall {
  padding: 10px 12px 12px;
  columns: 4 150px;
  column-gap: 18px;
}
.rollcall a {
  display: block; break-inside: avoid;
  padding: 3px 0;
  font-size: 12.5px; color: var(--muted); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rollcall a:hover { color: var(--text); }
.rollcall .flag { width: 15px; height: 11px; margin-right: 5px; }

/* How full the field is, against the cap the organizer published. */
.capbar { margin-top: 12px; display: grid; gap: 4px; }
.capbar .lab {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--faint);
}
.capbar .track {
  height: 8px; background: var(--ground);
  border: 1px solid var(--rule); border-radius: 2px; overflow: hidden;
}
.capbar .track i { display: block; height: 100%; background: var(--accent); }
.capbar .v { font-family: var(--mono); font-size: 12px; color: var(--text); }

/* Label and value down a rail panel, where a five-across fact grid would wrap
   into a column of half-empty cells. */
.deflist { margin: 0; display: grid; gap: 9px; }
.deflist > div { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.deflist dt {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--faint);
}
.deflist dd { margin: 0; font-size: 13px; color: var(--text); }
.deflist dd .muted { font-size: 11px; }

/* Stacked on a phone, what a cup pays and how to enter it come before the
   list of who already has. */
@media (max-width: 900px) {
  .layout.is-upcoming .rail { order: -1; }
}

/* ---------- Admin: logos and headshots ---------- */
.btn-sm { padding: 5px 10px; min-height: 28px; font-size: 11px; }
.imagelist .panel-head { gap: 16px; }
.imagefilter { flex: 1; max-width: 320px; background: var(--ground); color: var(--text);
  border: 1px solid var(--rule); border-radius: var(--r); padding: 6px 10px; font: inherit; }
.imagetoggle { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.imagelist .w-img { width: 56px; }
.imagepreview { width: 40px; height: 40px; }
.imagepreview .is-fallback { width: 24px; height: 24px; }
.imageactions { white-space: nowrap; }
.imageactions > * + * { margin-left: 8px; }
.capnote { font-family: var(--mono); font-size: 11px; margin: 6px 0 0; }

/* ---------- Submitting a logo or headshot ---------- */
.submitimg { max-width: 560px; }
.submitform .hint { font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.submitform input[type="file"] { font: inherit; color: var(--text); }
.submitpreview { width: 64px; height: 64px; margin-top: 10px; }
.consent { display: flex; gap: 8px; align-items: flex-start; text-transform: none;
  letter-spacing: 0; font-family: var(--sans); font-size: 13px; color: var(--text); margin: 6px 0 16px; }
.consent input { margin-top: 2px; }
.submitrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* The crest on a profile doubles as the way to send its image in. */
a.crest:hover { border-color: var(--faint); }
.imagequeue tr.is-decided { opacity: 0.45; }
.submitpreview[hidden] { display: none; }

/* An organizer's mark sits in the same tile as the monogram it replaces, so a
   row keeps its shape whether or not a logo has been supplied. */
.crest.orgmark { background: none; }
.crest.orgmark img { width: 100%; height: 100%; object-fit: contain; }
.lg.orgmark { display: inline-flex; align-items: center; justify-content: center; background: none; }
.lg.orgmark img { width: 100%; height: 100%; object-fit: contain; }
/* A vector mark is painted as a mask so it takes the text colour: near-white
   on the dark ground, near-black on the light one. */
.lg.orgmark.is-mask, .crest.orgmark.is-mask {
  background-color: currentColor;
  -webkit-mask-image: var(--mark); mask-image: var(--mark);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  color: var(--text);
}

/* ---- Player profile: streams, trophies, form ------------------------------
   A channel is a link, not an embed — the embeds belong to a match day. The
   LIVE pill is the one place the accent is spent on this page, because it is
   the only thing here that is true right now and false in an hour. */
.live-pill {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  border-radius: 3px; background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
}
.stream-link {
  display: inline-block; margin-left: 8px; padding: 1px 7px;
  border: 1px solid var(--rule); border-radius: 3px;
  font-size: 11px; color: var(--muted);
}
.stream-link:hover { color: var(--text); border-color: var(--faint); }
.stream-link b { color: var(--text); font-weight: 600; }
/* A cup win, marked rather than spelled out: the row already says which cup
   and with whom. Drawn from type so it follows the theme and prints. */
.trophy::before {
  content: "\25B2"; margin-right: 6px; font-size: 9px;
  color: var(--accent); vertical-align: 1px;
}
/* The recent-form box is a statline in a panel of its own, so it sits apart
   from the career figures it is deliberately not part of. */
.formbox .statline { border-top: none; background: none; }
/* Career facts: label over value, wrapping into as many columns as fit. A
   table would imply the rows compare with each other, and they do not. */
.facts { display: flex; flex-wrap: wrap; gap: 18px 32px; margin: 0; padding: 14px 18px; }
.facts dt { font-size: 11px; letter-spacing: 0.04em; color: var(--muted); text-transform: uppercase; }
.facts dd { margin: 2px 0 0; font-size: 14px; color: var(--text); }
@media (max-width: 720px) { .facts { padding: 12px 14px; gap: 14px 22px; } }
/* ==========================================================================
   Prize money and news mentions
   ========================================================================== */

/* Money reads as money: tabular, a shade brighter than the row around it, and
   never wrapped across a line. */
.money { font-family: var(--mono); white-space: nowrap; }
.earnings .money.key, .prizesplit .money.key { color: var(--bright); font-weight: 600; }
.earnings .panel-head .money { color: var(--bright); }
.earnings td.name .s { display: block; font-size: 10.5px; color: var(--faint); margin-top: 1px; }
.earnnote { font-size: 11px; padding: 0 14px 12px; margin: 0; }

/* A payout table on an event page carries the same position column as the
   standings above it, so the two line up. */
.prizesplit td.pos { color: var(--muted); }

/* "In the news": a short list of links, not cards — it sits beside the thing
   the post is about, and must not outweigh it. */
.mentionlist { display: flex; flex-direction: column; gap: 8px; }
.mention { display: block; }
.mention .t { display: block; font-size: 13px; font-weight: 600; }
.mention .s { display: block; font-family: var(--mono); font-size: 10.5px;
  color: var(--faint); margin-top: 1px; }
.mention:hover .t { color: var(--accent); }

/* ---------- Admin: entering a split, attaching mentions ---------- */
/* Both echo what the server read back at the person who typed it, because in
   both cases a line that did not parse is the failure mode that matters. */
.splitecho, .mentionecho { font-family: var(--mono); font-size: 11px; margin: 6px 0 0; }
.splitecho:empty, .mentionecho:empty { display: none; }
.splitecho.is-bad, .mentionecho.is-bad { color: var(--accent); }
.cupform textarea[data-f="split"] { font-family: var(--mono); }
.cupform.is-played .panel-head a { font-weight: 600; }
.mentionfields { border: 1px solid var(--rule); border-radius: var(--r);
  padding: 10px 12px 12px; margin: 0 0 14px; }
.mentionfields legend { font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 0 6px; }

/* A handle in another script keeps its Latin spelling beside it: smaller, in
   the mono face, never instead of the name itself. */
.latin { font-family: var(--mono); font-size: 0.86em; color: var(--muted); }
.profile-head .latin-sub { display: block; margin-top: 2px; font-family: var(--mono);
  font-size: 13px; letter-spacing: 0.04em; color: var(--muted); }

/* ---------- Stream widget builder ---------- */
/* The previews sit on a dark, striped ground that stands in for a stream, so
   the overlay's transparent edges read as they will in OBS. */
.widget-builder { display: flex; flex-direction: column; gap: 18px; }
.widget-layouts { display: flex; gap: 14px; }
.widget-layouts a { color: var(--muted); }
.widget-layouts a[aria-current] { color: var(--bright); }
.widget-stage { background: repeating-linear-gradient(135deg, #1A1E23 0 12px, #15181C 12px 24px);
  border: 1px solid var(--rule); border-radius: var(--r); padding: 16px;
  overflow-x: auto; margin-bottom: 14px; }
.widget-stage iframe { display: block; border: 0; background: transparent; }
.widget-stage.is-panel { background: #0E0E10; }
.widget-stage.is-panel img { display: block; max-width: 100%; height: auto; }
.widget-note { font-size: 13px; margin: 10px 0 0; }
.widget-note em { font-style: normal; color: var(--text); }
.copy-field { margin-top: 12px; }
.copy-row { display: flex; gap: 8px; }
.copy-row input { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12px; }
.copy-row .btn { flex: none; }
/* The name field carries the header's live suggestions, so it needs the same
   anchoring, and room between itself and the button. */
.widget-form { gap: 10px; }
.widget-form .widget-search { position: relative; flex: 1; min-width: 0; }
.widget-form .widget-search input { width: 100%; border-right: 1px solid var(--rule); }
.widget-form .suggest { left: 0; right: auto; width: 100%; }
.widget-for { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.widget-for .muted { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; }
.widget-for strong { font-size: 18px; color: var(--bright); }

/* ===================================================================   Redline: the methodology page and the per-squad breakdown
   ========================================================================== */
/* The breakdown is a working, so it is set dense: fourteen narrow numeric
   columns that a reader checks across, not a table to skim. */
.rl-table { font-size: 12px; }
.rl-table thead th, .rl-table tbody td { padding: 0 8px; }
.rl-table tbody td { height: 36px; white-space: nowrap; }
.rl-table tbody td.name { white-space: normal; min-width: 180px; }
.rl-table tfoot td {
  height: 36px; padding: 0 8px; border-top: 2px solid var(--rule);
  color: var(--bright); font-weight: 600;
}
.rl-sum { margin: 4px 0 14px; overflow-x: auto; }
.rl-sum code, .rl-explain code { font-family: var(--mono); font-size: 12px; color: var(--text); }
.rl-note { border-left: 2px solid var(--accent); padding: 8px 12px; background: var(--panel); margin: 0 0 14px; }
.rl-lineup { font-family: var(--mono); font-size: 12px; margin: -10px 0 14px; }
.rl-explain { margin-top: 22px; }
.rl-explain li { margin-bottom: 6px; }
.profile-head .rankblock .rl-link { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--rule); }
.profile-head .rankblock .rl-link:hover { color: var(--bright); }
.rl-toc { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.rl-method h3 { margin-top: 22px; }
.rl-method .rl-weights { font-size: 13px; margin-bottom: 18px; }
.rl-method .rl-weights tbody td { height: 34px; }
.rl-method .rl-weights .num { text-align: right; }
/* ---------- Leaderboard filters ---------- */
/* The filter form reuses .filterbar; these are only what a stats table adds:
   a column chooser, a narrow number field and the one-line empty state. The
   project's square corners hold here too. */
.board-form select, .board-form input, .board-form button { border-radius: 0; }
.board-form .board-min { width: 76px; }
/* Dates only matter for a custom range. Dimmed rather than hidden, so the
   no-script page can still type one in. */
.board-form .board-date.is-idle { opacity: 0.55; }
.board-cols { position: relative; align-self: flex-end; }
.board-cols > summary {
  list-style: none; cursor: pointer; border: 1px solid var(--rule);
  background: var(--panel2); color: var(--text); font-size: 12.5px;
  padding: 6px 12px;
}
.board-cols > summary::-webkit-details-marker { display: none; }
.board-cols > summary::after { content: " ▾"; color: var(--faint); }
.board-cols[open] > summary { border-color: var(--bar); color: var(--bright); }
.board-cols > summary .n { color: var(--faint); font-family: var(--mono); font-size: 11px; margin-left: 3px; }
.board-cols-list {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0;
  display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 2px 14px;
  background: var(--panel); border: 1px solid var(--rule); padding: 10px 12px;
  min-width: 290px;
}
.filterbar .board-cols-list label {
  flex-direction: row; align-items: center; gap: 7px; cursor: pointer;
  font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--text);
  padding: 3px 0;
}
.board-cols-list input { accent-color: var(--accent); }
.filterbar .board-cols-list label.is-empty { color: var(--faint); cursor: default; }
.board-cols-list .n { font-family: var(--mono); font-size: 10px; }
.board-empty { margin: 0; padding: 16px 14px; color: var(--muted); font-size: 13px; }
.board-empty a { color: var(--bright); margin-left: 6px; }
@media (max-width: 600px) {
  .board-cols { position: static; }
  .board-cols-list { position: static; margin-top: 4px; min-width: 0; }
}
/* ---------- /Leaderboard filters ---------- */
/* ---------- Transfers ---------- */
/* A move reads left to right, from → to, so the two squad columns share the
   width and the arrow between them stays narrow. A signup no result has borne
   out yet is dimmed: it is listed, not asserted. */
table.moves th.w-arrow, table.moves td.arrow { width: 22px; padding-left: 0; padding-right: 0;
  text-align: center; color: var(--faint); }
table.moves .team-cell { gap: 8px; }
table.moves td.src .tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; }
table.moves tr.is-reported td { color: var(--muted); }
table.moves tr.is-reported .team-name { color: var(--text); }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-top: 1px solid var(--rule); font-size: 12px; }
/* ---------- /Transfers ---------- */
/* ---------- RSR: ratings, methodology, event honours ---------- */
/* The hint beside an RSR figure is a link to the methodology, drawn the same
   as the button hint beside every other number. */
a.q { text-decoration: none; }
/* MVP and EVPs: the MVP leads at podium width, the EVPs sit in a strip under
   it. Same panel language as the podium, because both are results. */
.awards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.award { background: var(--panel); border: 1px solid var(--rule); padding: 12px 12px 13px; min-width: 0; }
.award .p { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.award .who { font-size: 15px; font-weight: 700; color: var(--bright); margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.award .who a { color: inherit; }
.award .stat { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 5px; }
.award.is-mvp { grid-column: 1 / -1; border-color: var(--bar); }
.award.is-mvp .p { color: var(--accent); }
.award.is-mvp .who { font-size: 24px; }
@media (max-width: 720px) { .awards { grid-template-columns: repeat(2, 1fr); } }
/* The methodology's tables read as figures in running text. */
.methodology table.weights { width: 100%; margin: 4px 0 14px; font-size: 13px; }
.methodology table.weights td, .methodology table.weights th { padding: 7px 10px; }
.methodology h3 { margin-top: 20px; }
/* ---------- Most met ---------- */
#opponents .filterbar { border-top: 1px solid var(--rule); }
/* ---------- Add to calendar ---------- */
/* A label and three plain links in the mono face, the way the rest of the
   site sets small utility text. No button chrome: this is a way out to
   another app, not an action on this page. */
.addcal { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
  font-family: var(--mono); font-size: 11px; }
.addcal .lab { color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.addcal a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--rule); }
.addcal a:hover { color: var(--accent); border-color: currentColor; }
.edtile .addcal { margin-top: 6px; }
.panel-body .addcal + .addcal { margin-top: 8px; }
.calstrip { margin-top: 14px; padding: 9px 12px; background: var(--panel);
  border: 1px solid var(--rule); }
.calstrip.is-inset { margin: 0; border-width: 0 0 1px; }
=======

/* ---------- Per-cup prize money ---------- */
/* A squad with any paid cup gets a sixth column on its tournament rows, so
   every row keeps the same grid whether or not that cup paid. Folded away on
   narrow screens with the other secondary columns. */
.runs.has-prize .run > summary { grid-template-columns: 92px minmax(0, 1fr) 84px 70px 84px 78px; }
.run .prize { color: var(--bright); font-weight: 600; }
@media (max-width: 760px) {
  .runs.has-prize .run > summary { grid-template-columns: 78px minmax(0, 1fr) 76px; }
}

/* ---------- Partners page ---------- */
.partners h1 { margin: 0 0 6px; }
.partners-lede { margin: 0 0 18px; }
/* As many across as fit at 320px each; the banners are cropped to one frame
   so a row lines up whatever shape each partner sent. */
.partner-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 12px; align-items: stretch; }
.partner { display: flex; flex-direction: column; background: var(--panel);
  border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.partner-banner { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10;
  object-fit: cover; }
.partner-body { min-width: 0; padding: 18px; display: flex; flex-direction: column;
  align-items: flex-start; flex: 1; }
.partner .ico-brand { width: 14px; height: 14px; fill: currentColor; flex: none; }
.partner-links { display: flex; flex-wrap: wrap; gap: 8px; }
.partner-kind { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); }
.partner h2 { margin: 4px 0 8px; font-size: 19px; color: var(--bright); }
.partner p { margin: 0 0 14px; line-height: 1.55; flex: 1; }
.partners-cta { margin-top: 18px; font-size: 13px; }
.partners-cta a { color: var(--bright); border-bottom: 1px solid var(--bar); }
.partners-cta a:hover { border-bottom-color: var(--accent); }

/* ---------- Not found ---------- */
/* The record under redaction, with the status code as the lifted line. */
.lost {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 48px;
  align-items: center; padding: 56px 0 72px;
}
.lost-bars { display: flex; flex-direction: column; gap: 14px; }
.lost-bars i { display: block; height: 22px; background: var(--bar); border-radius: 2px; }
.lost-code {
  font-family: var(--mono); font-weight: 600; font-size: 96px; line-height: 1;
  color: var(--accent); letter-spacing: -0.02em; margin: 6px 0;
}
.lost h1 { font-size: 34px; margin: 0 0 12px; }
.lost-copy > p { color: var(--muted); max-width: 46ch; margin: 0 0 22px; line-height: 1.55; }
.lost-copy code { font-family: var(--mono); font-size: 0.92em; color: var(--text); word-break: break-all; }
.lost-links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
@media (max-width: 760px) {
  .lost { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 32px 0 48px; }
  .lost-code { font-size: 72px; }
}

/* ---------- News preview ---------- */
/* Pinned under the header so a long draft never scrolls out of "this is not live". */
.preview-bar {
  position: sticky; top: var(--header-h); z-index: 5;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin: 0 0 18px; padding: 10px 14px; border-radius: var(--r);
  background: var(--accent); color: #fff; font-size: 13px;
}
.preview-bar .lab {
  font-family: var(--mono); font-weight: 600; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
}

/* ---------- Charts in news posts ---------- */
/* Drawn by web/news_charts.rs from the record, in the page's own colours.
   Four series at most; each colour is also named in the legend and the
   readout, so nothing rests on telling two hues apart. */
.nc { overflow: visible; --s0: var(--accent); --s1: #3987e5; --s2: #199e70; --s3: #c98500; margin: 22px 0; }
:root[data-theme="light"] .nc { --s1: #2a78d6; --s2: #1baf7a; --s3: #eda100; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .nc { --s1: #2a78d6; --s2: #1baf7a; --s3: #eda100; }
}
.prose .nc a { border-bottom: 0; }
.nc > .h { flex-wrap: wrap; }
.nc > .h .scaletabs { margin-left: auto; }
.nc-panel { padding: 10px 14px 12px; }
.nc-panel + .nc-panel { border-top: 1px solid var(--rule); }
.nc-region { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--faint); margin-bottom: 6px; }
.prose .nc-region a { color: var(--muted); border-bottom: 1px solid var(--bar); }
.nc-plot { position: relative; }
.nc-svg .axis { font-size: 11px; }
.nc-line polyline { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; transition: opacity 120ms; }
.nc-line circle { stroke: var(--panel); stroke-width: 2; transition: opacity 120ms; }
.nc-line.s0 polyline { stroke: var(--s0); stroke-width: 3; } .nc-line.s0 circle { fill: var(--s0); }
.nc-line.s1 polyline { stroke: var(--s1); } .nc-line.s1 circle { fill: var(--s1); }
.nc-line.s2 polyline { stroke: var(--s2); } .nc-line.s2 circle { fill: var(--s2); }
.nc-line.s3 polyline { stroke: var(--s3); } .nc-line.s3 circle { fill: var(--s3); }
.nc-panel[data-nc-focus] .nc-line { opacity: 0.18; }
.nc-panel[data-nc-focus="0"] .nc-line.s0, .nc-panel[data-nc-focus="1"] .nc-line.s1,
.nc-panel[data-nc-focus="2"] .nc-line.s2, .nc-panel[data-nc-focus="3"] .nc-line.s3 { opacity: 1; }
.nc-col { fill: transparent; cursor: crosshair; }
.nc-guide { stroke: var(--faint); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; pointer-events: none; }
.nc-guide.is-on { opacity: 1; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; vertical-align: -1px; flex: none; }
.sw.s0 { background: var(--s0); } .sw.s1 { background: var(--s1); }
.sw.s2 { background: var(--s2); } .sw.s3 { background: var(--s3); }
.nc-tip {
  position: absolute; top: 6px; z-index: 4;
  padding: 9px 11px; pointer-events: none;
  background: var(--chrome); border: 1px solid var(--rule); border-radius: var(--r);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28); font-size: 12px;
}
.nc-tip-h { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.nc-tip-rows { display: grid; grid-template-columns: auto auto auto; gap: 5px 12px; align-items: baseline; }
.nc-tip-row { display: contents; }
.nc-tip-rows span { white-space: nowrap; line-height: 1.3; }
.nc-tip-rows .nm { color: var(--text); font-weight: 600; }
.nc-tip-rows .m { color: var(--muted); font-family: var(--mono); font-size: 11px; }
.nc-tip-rows .t, .nc-legend .t { font-family: var(--mono); font-weight: 600; text-align: right; color: var(--bright); }
.nc-legend { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; }
.nc-legend li { display: flex; align-items: center; gap: 0; font-size: 13px; padding: 3px 0; margin: 0; }
.nc-legend a { color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-legend .t { font-size: 12px; }
.nc-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.nc-col-k { padding: 12px 14px 8px; }
.nc-col-k + .nc-col-k { border-left: 1px solid var(--rule); }
.nc-col-k ol { list-style: none; margin: 0; padding: 0; }
.nc-col-k li { position: relative; margin: 0 0 11px; outline: none; }
.nc-k-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; }
.nc-k-top a { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-k-n { font-family: var(--mono); font-weight: 600; color: var(--bright); }
.nc-bar { height: 6px; margin-top: 4px; background: var(--line); border-radius: 0 3px 3px 0; }
.nc-bar i { display: block; height: 100%; background: var(--bar); border-radius: 0 3px 3px 0; }
.nc-bar i.lead { background: var(--accent); }
.nc-col-k li:hover .nc-bar i:not(.lead), .nc-col-k li:focus-visible .nc-bar i:not(.lead) { background: var(--muted); }
.nc-k-tip {
  display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 4;
  padding: 7px 9px; background: var(--chrome); border: 1px solid var(--rule); border-radius: var(--r);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28); font-family: var(--mono); font-size: 10.5px; color: var(--muted); line-height: 1.5;
}
.nc-col-k li:hover .nc-k-tip, .nc-col-k li:focus-visible .nc-k-tip { display: block; }
@media (max-width: 620px) {
  .nc-cols { grid-template-columns: minmax(0, 1fr); }
  .nc-col-k + .nc-col-k { border-left: 0; border-top: 1px solid var(--rule); }
  .nc-legend { grid-template-columns: minmax(0, 1fr); }
  .nc-tip-rows { display: block; }
  .nc-tip-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; margin-bottom: 6px; }
  .nc-tip-row .m { grid-column: 1 / -1; grid-row: 2; padding-left: 18px; }
}