/* ---- tokens -------------------------------------------------------- */
:root {
  color-scheme: light;
  --plane:        #f9f9f7;
  --surface:      #fcfcfb;
  --ink:          #0b0b0b;
  --ink-2:        #52514e;
  --ink-muted:    #73716c;   /* 4.62:1 on --plane; the old #898781 was 3.41:1 */
  --grid:         #e1e0d9;
  --rule:         #c3c2b7;
  --ring:         rgba(11, 11, 11, 0.10);
  --row-hover:    rgba(11, 11, 11, 0.045);
  /* The spotlight veil. A hovered row and column keep their true fill; the rest
     of the grid is veiled toward --surface so the colour recedes without the
     number fading with it. 0.65 is the lightest strength that holds 4.5:1 under
     --ink-2 in both themes: 4.67:1 at its worst bin here, 4.86:1 in dark. */
  --veil-dim:     rgba(252, 252, 251, 0.65);
  --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);
    --veil-dim:rgba(26,26,25,0.65);
    --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);
  --veil-dim:rgba(26,26,25,0.65);
  --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; }

header.masthead { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
/* headings in the logo's face (site.css loads it on every page) */
h1 {
  font-family: var(--sc-display, sans-serif); font-size: 34px; font-weight: 800;
  line-height: 1; letter-spacing: .005em; 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 dashboards' own tooltip, drawn by tip.js in place of the browser's.
   Mirrors .eb-tip. Here rather than in a page's sheet because every page
   that loads tip.js needs it. */
.ft-tip[hidden] { display: none; }
.ft-tip {
  position: fixed; z-index: 30; pointer-events: none; display: grid; gap: 2px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 8px;
  padding: 8px 11px; font: 13px/1.35 var(--sc-text); color: var(--ink-2);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .10); max-width: 320px;
}
.ft-tip b { color: var(--ink); font-family: var(--sc-display); font-size: 17px; font-weight: 800; }
.ft-tip span strong { color: var(--ink); font-weight: 700; }
/* Up, down and level, written [+n], [-n] and [=]. The glyph takes the ramp's
   hot and cold ends and the number stays in the tooltip's ink. As graphics
   they clear 3:1 on --surface: --b10 4.05 and --b0 5.26 in light, 7.29 and
   6.96 in dark. */
.ft-tip i { font-style: normal; font-size: .78em; margin: 0 2px 0 6px; vertical-align: .08em; }
.ft-tip .tip-up { color: var(--b10); }
.ft-tip .tip-dn { color: var(--b0); }
.ft-tip .tip-lv { color: var(--ink-muted); }

/* ---- the eleven-step ramp, as classes ----
   Paired with the --i inks that go on top of them. Lived in leaderboard.css
   until the favorite-team grid needed the same shading; they are the site's
   ramp rather than any one page's, so both read them from here. */
.p0{background:var(--b0);color:var(--i0)}   .p1{background:var(--b1);color:var(--i1)}
.p2{background:var(--b2);color:var(--i2)}   .p3{background:var(--b3);color:var(--i3)}
.p4{background:var(--b4);color:var(--i4)}   .p5{background:var(--b5);color:var(--i5)}
.p6{background:var(--b6);color:var(--i6)}   .p7{background:var(--b7);color:var(--i7)}
.p8{background:var(--b8);color:var(--i8)}   .p9{background:var(--b9);color:var(--i9)}
.p10{background:var(--b10);color:var(--i10)}