/* ssbz.css - the shared design system of the Supreme backend's web
 * pages (the leaderboard, the account page, the control panel).
 *
 * Every page links this file first, then its own sheet on top:
 *   leaderboard.html  assets/ssbz.css + assets/leaderboard.css
 *   auth.html         assets/ssbz.css + assets/auth.css
 *   admin.php         assets/ssbz.css + assets/admin.css
 *
 * Tokens, the reset, the panel/table/chip/form vocabulary live here;
 * anything only one page renders lives in that page's sheet. Both
 * entry paths serve these bytes: the file URL (a host that maps file
 * URLs directly) and the front controller's /index.php/assets/<file>
 * branch (a host that routes everything through index.php).
 */

:root {
  --bg: #eef1f4; --card: #ffffff; --text: #2c3e50; --muted: #7f8c9b;
  --accent: #3498db; --accent-ink: #ffffff; --line: #e4e9ef; --chip: #eaf3fb;
  --chip-ink: #2471a3; --ok: #2ecc71; --ok-ink: #ffffff; --zebra: #f7f9fb;
  --code: #f0f3f6; --err: #e74c3c;
  /* The translucent pill veil: the hero band's state badges sit on the
   * accent, so one scheme-independent value is the whole story. Table
   * cells wear the chip tint instead (see .badge below). */
  --badge-bg: rgba(255,255,255,.22);
  --error-bg: rgba(0,0,0,.25);
  /* Chart furniture + the activity heatmap's intensity ladder (the
   * page sheets consume them via var()). The chart SERIES colors are
   * deliberately NOT tokens: leaderboard.html's JS PALETTE draws them
   * as SVG presentation attributes, where var() cannot reach - its
   * first three entries mirror --accent/--err/--ok by convention. */
  --hm0: #e6ebf1; --hm1: #aed6f1; --hm2: #5dade2; --hm3: #2e86c1;
  --grid: #e3e8ee; --axis: #95a3b3;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b212b; --card: #242b37; --text: #dce3ec; --muted: #8b97a6;
    --accent: #2f81b8; --accent-ink: #f2f7fb; --line: #38414e; --chip: #2c3747;
    --chip-ink: #9ecfef; --ok: #2e9e5b; --ok-ink: #eafff2; --zebra: #28303d;
    --code: #1f2631; --err: #d05a52;
    --hm0: #262e3a; --hm1: #1f4f73; --hm2: #2f81b8; --hm3: #6fb7e8;
    --grid: #303a49; --axis: #7c8a9c;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}
.wrap { max-width: 1060px; margin: 0 auto; padding: 0 20px; }
code, pre {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
a { color: var(--chip-ink); text-underline-offset: 2px; }
a:hover { color: var(--accent); }

/* The hero band: the page-colored header the content pages share. The
 * per-page sheets tune the paddings and the wrap width. */
.hero { background: var(--accent); color: var(--accent-ink); }
.hero .kicker {
  margin: 0 0 4px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em; opacity: .85;
}
.hero h1 { margin: 0; font-size: 26px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
.hero .sub { margin: 6px 0 0; font-size: 14px; opacity: .92; }

/* The hero's crumb row: each page's way out (the leaderboard's room/
 * track/racer views back to the landing, the account page back to the
 * leaderboard). Links keep the band's ink instead of the page link
 * color, which would drown on the accent background. */
.hero-nav { margin: 0 0 8px; font-size: 12.5px; display: flex; gap: 16px; }
.hero-nav a { color: inherit; opacity: .92; }
.hero-nav a:hover { color: inherit; opacity: 1; }

/* Panels: the card sections that carry every page's content. */
.panel {
  background: var(--card); border: 1px solid var(--line); border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06); margin: 18px 0; overflow: hidden;
}
.panel h2 {
  margin: 0; padding: 12px 16px 11px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .13em; color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.panel .body { padding: 14px 16px 16px; }
.panel-sub { margin: 0; padding: 10px 16px; color: var(--muted); font-size: 13px; }

/* Tables: shared by the standings boards, the panel scans and the
 * account page's device list. Wide tables scroll sideways on narrow
 * screens instead of breaking the layout. */
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 9px 16px; border-bottom: 1px solid var(--line); }
thead th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); background: var(--zebra); border-bottom: 1px solid var(--line);
}
tbody tr:nth-child(even) { background: var(--zebra); }
tbody tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: right; }
td.empty { text-align: center; color: var(--muted); padding: 26px 16px; }
abbr[title] { text-decoration: underline dotted; cursor: help; }

/* Chips: compact state pills and the small actions styled as pills. */
.chip {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  background: var(--chip); color: var(--chip-ink); font-size: 11.5px; font-weight: 600;
  border: 0; font-family: inherit;
}
.chip-ok { background: var(--ok); color: var(--ok-ink); }
/* The cursor law: a pill points only when it actually opens something
 * (a link, a button); state pills keep the arrow. */
a.chip { text-decoration: none; cursor: pointer; }
button.chip { cursor: pointer; }
a.chip:hover, button.chip:hover { filter: brightness(1.08); }
.chip[disabled] { opacity: .55; cursor: default; }
.badge {
  display: inline-block; margin-right: 6px; padding: 3px 11px; border-radius: 999px;
  background: var(--badge-bg); font-size: 12px; font-weight: 600;
}
.badge-live { background: var(--ok); color: var(--ok-ink); }
/* The same badge inside a table cell: the translucent hero veil
 * vanishes on white, so there it wears the chip tint. */
tbody .badge { background: var(--chip); color: var(--chip-ink); }

/* Forms: the account page and the control panel share the input
 * vocabulary; the page sheets tune the widths and the button layout. */
label { display: block; font-size: 12.5px; font-weight: 600; margin: 10px 0 3px; }
label small { font-weight: 400; color: var(--muted); }
input, textarea, select {
  width: 100%; padding: 8px 10px; margin: 0; border-radius: 4px;
  border: 1px solid var(--line); background: var(--bg); color: inherit;
  font: inherit;
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent;
}
button {
  display: inline-block; padding: 9px 16px; margin: 12px 0 0;
  border: 0; border-radius: 4px; background: var(--accent); color: var(--accent-ink);
  font: inherit; font-weight: 700; cursor: pointer;
}
button.secondary { background: var(--chip); color: var(--chip-ink); }
button:hover { filter: brightness(1.06); }
.muted { color: var(--muted); font-size: 13px; }
.err { color: var(--err); font-size: 13px; min-height: 19px; margin: 10px 0 0; }
.ok { color: var(--ok); font-weight: 600; }
code { padding: 1px 5px; border-radius: 3px; background: var(--code); }
pre {
  padding: 10px 12px; overflow-x: auto; white-space: pre-wrap; word-break: break-all;
  margin: 0; background: var(--code); border-radius: 3px; font-size: 12.5px;
}
footer { padding: 10px 0 34px; color: var(--muted); font-size: 12.5px; }
footer p { margin: 0; }