/* Dark only, in Google's dark palette; the board (frontend-index.html)
   uses the same tokens so the two read as one product. */
:root {
  color-scheme: dark;
  --bg: #202124; --surface: #202124; --surface-2: #303134;
  --text: #e8eaed; --muted: #9aa0a6; --border: #3c4043;
  --accent: #8ab4f8; --accent-bg: #394457; --link: #8ab4f8;
  --trend-up: #81c995; --trend-down: #f28b82;
  --radius: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--link); }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; background: var(--surface); padding: 8px; }


main.wrap { padding-top: 20px; padding-bottom: 32px; }
h1 { font-size: 26px; line-height: 1.25; margin: 8px 0 12px; letter-spacing: -0.01em; }
h2 { font-size: 19px; margin: 28px 0 10px; }
h2 a { color: inherit; }
.lead { color: var(--muted); max-width: 72ch; }
.meta { color: var(--muted); font-size: 13px; }
.crumbs { font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--muted); }

.tbl { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--surface-2); }
tbody tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
th.fc { white-space: normal; }
.rk th:first-child, .rk td:first-child { width: 1%; white-space: nowrap; } /* rank: as narrow as its number */ /* "Floor / Ceiling" may wrap; its numbers never do */
td a { font-weight: 600; text-decoration: none; }
td a:hover { text-decoration: underline; }
.note { color: var(--muted); font-size: 13px; margin-top: 3px; max-width: 60ch; }

.tr { font-size: 12px; }
.tr.up { color: var(--trend-up); }
.tr.down { color: var(--trend-down); }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.m-only { display: none; } /* shown by the narrow-screen rule below */
@media (max-width: 720px) {
  .grid2 { grid-template-columns: 1fr; }
  /* Rankings tables on narrow screens: keep player, PPR and range. The
     opponent moves into the player's meta line (.m-only); the other formats
     are on the board. */
  .rk th:nth-child(3), .rk td:nth-child(3), .rk th:nth-child(6), .rk td:nth-child(6),
  .rk th:nth-child(7), .rk td:nth-child(7) { display: none; }
  .m-only { display: inline; }
  h1 { font-size: 22px; }
  th, td { padding: 8px 7px; }
}
@media (max-width: 400px) {
  /* Small phones (320px included): tighter cells, slightly smaller type. */
  th, td { padding: 8px 5px; }
  table { font-size: 13px; }
  .wrap { padding-left: 12px; padding-right: 12px; }
}
.movers { list-style: none; padding: 0; margin: 0; }
.movers li { padding: 8px 0; border-bottom: 1px solid var(--border); }
.movers li a { font-weight: 600; text-decoration: none; }
.links li { margin: 6px 0; }