/* ---- tokens -------------------------------------------------------- */
:root {
  color-scheme: light;
  --plane:        #f9f9f7;
  --surface:      #fcfcfb;
  --ink:          #0b0b0b;
  --ink-2:        #52514e;
  --ink-muted:    #898781;
  --grid:         #e1e0d9;
  --rule:         #c3c2b7;
  --ring:         rgba(11, 11, 11, 0.10);
  --row-hover:    rgba(11, 11, 11, 0.045);
  --accent:       #256abf;
  /* diverging bins: 0 = worst, 5 = league median, 10 = best */
  --b0:#256abf; --b1:#3987e5; --b2:#6da7ec; --b3:#9ec5f4; --b4:#cde2fb;
  --b5:#f0efec;
  --b6:#fbd9d5; --b7:#f7b3ab; --b8:#f28b82; --b9:#e8635c; --b10:#d94b47;
  --i0:#ffffff; --i1:var(--ink); --i2:var(--ink); --i3:var(--ink); --i4:var(--ink);
  --i5:var(--ink);
  --i6:var(--ink); --i7:var(--ink); --i8:var(--ink); --i9:var(--ink); --i10:var(--ink);
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --plane:#0d0d0d; --surface:#1a1a19; --ink:#ffffff; --ink-2:#c3c2b7;
    --ink-muted:#898781; --grid:#2c2c2a; --rule:#383835;
    --ring:rgba(255,255,255,0.10); --row-hover:rgba(255,255,255,0.055);
    --accent:#3987e5;
    --b0:#6da7ec; --b1:#3987e5; --b2:#2a72bf; --b3:#265a8e; --b4:#24405e;
    --b5:#383835;
    --b6:#5e2a26; --b7:#8e3630; --b8:#bf443c; --b9:#e05f5a; --b10:#f28b82;
    --i0:#0b0b0b; --i1:#0b0b0b; --i2:#ffffff; --i3:#ffffff; --i4:#ffffff;
    --i5:#ffffff;
    --i6:#ffffff; --i7:#ffffff; --i8:#ffffff; --i9:#0b0b0b; --i10:#0b0b0b;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --plane:#0d0d0d; --surface:#1a1a19; --ink:#ffffff; --ink-2:#c3c2b7;
  --ink-muted:#898781; --grid:#2c2c2a; --rule:#383835;
  --ring:rgba(255,255,255,0.10); --row-hover:rgba(255,255,255,0.055);
  --accent:#3987e5;
  --b0:#6da7ec; --b1:#3987e5; --b2:#2a72bf; --b3:#265a8e; --b4:#24405e;
  --b5:#383835;
  --b6:#5e2a26; --b7:#8e3630; --b8:#bf443c; --b9:#e05f5a; --b10:#f28b82;
  --i0:#0b0b0b; --i1:#0b0b0b; --i2:#ffffff; --i3:#ffffff; --i4:#ffffff;
  --i5:#ffffff;
  --i6:#ffffff; --i7:#ffffff; --i8:#ffffff; --i9:#0b0b0b; --i10:#0b0b0b;
}

/* ---- shell --------------------------------------------------------- */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--plane);
  color: var(--ink);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1240px; margin: 0 auto; padding: 32px 24px 64px; }

.site-link {
  display: inline-block; margin-bottom: 14px;
  font-size: 12px; letter-spacing: 0.02em; color: var(--ink-muted);
  text-decoration: none; border-bottom: 1px solid transparent;
}
.site-link::before { content: "\2190\00a0"; }
.site-link:hover { color: var(--ink-2); border-bottom-color: var(--rule); }
.site-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

header.masthead { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
h1 { font-size: 22px; font-weight: 650; letter-spacing: -0.01em; margin: 0; }
.masthead .sub { color: var(--ink-2); font-size: 13px; }
.theme-btn {
  margin-left: auto; font: inherit; font-size: 12px; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--ring); border-radius: 6px;
  padding: 5px 10px; cursor: pointer;
}
.theme-btn:hover { color: var(--ink); }
.lede { color: var(--ink-2); font-size: 13px; max-width: 74ch; margin: 10px 0 22px; }

/* ---- the logo -------------------------------------------------------
   Two images, one per theme, because a <picture> keyed on
   prefers-color-scheme would ignore the theme toggle. Same three-state rule
   as the tokens above: light by default, dark when the system is dark unless
   the page is stamped light, and dark whenever it is stamped dark.
   The dark one also carries the hidden attribute, so a browser still holding
   a stylesheet from before these rules shows one logo rather than both; the
   display:block rules below outrank the browser's own [hidden] rule. */
.masthead-brand { align-items: center; }
h1.brand { line-height: 0; }
.logo { display: block; width: 250px; max-width: 64vw; height: auto; }
.logo-dark { display: none; }
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark  { display: block; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .logo-light { display: none; }
  :root:where(:not([data-theme="light"])) .logo-dark  { display: block; }
}

/* ---- site nav (shared across dashboards) ---------------------------- */
.crumbs { display: flex; align-items: center; gap: 7px; margin-bottom: 14px; font-size: 12px; }
.crumbs a {
  color: var(--ink-muted); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.crumbs a:hover { color: var(--ink-2); border-bottom-color: var(--rule); }
.crumbs a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.crumbs .sep { color: var(--rule); }
.crumbs .here { color: var(--ink-2); }