:root {
  --surface: oklch(0.98 0.005 75); --surface-raised: oklch(0.995 0.004 75);
  --surface-sunken: oklch(0.95 0.008 75);
  --text-primary: oklch(0.22 0.014 60); --text-secondary: oklch(0.45 0.012 60);
  --text-muted: oklch(0.60 0.010 60); --text-on-accent: oklch(0.98 0.005 75);
  --rule: oklch(0.82 0.010 75); --rule-strong: oklch(0.70 0.012 75);
  --accent: oklch(0.35 0.12 250); --accent-soft: oklch(0.92 0.04 250);
  --accent-strong: oklch(0.28 0.14 250);
  --positive: oklch(0.50 0.16 145); --negative: oklch(0.50 0.20 25);
  --row-stripe: oklch(0.96 0.006 75);
  --font-display: 'Alfa Slab One', Georgia, serif;
  --font-body: 'Recursive', system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) { :root {
  --surface: oklch(0.22 0.05 250); --surface-raised: oklch(0.27 0.05 250);
  --surface-sunken: oklch(0.18 0.045 250);
  --text-primary: oklch(0.96 0.006 60); --text-secondary: oklch(0.74 0.008 60);
  --text-muted: oklch(0.58 0.010 60); --text-on-accent: oklch(0.18 0.045 250);
  --rule: oklch(0.32 0.05 250); --rule-strong: oklch(0.42 0.05 250);
  --accent: oklch(0.72 0.12 70); --accent-soft: oklch(0.30 0.06 70);
  --accent-strong: oklch(0.78 0.14 68);
  --positive: oklch(0.72 0.14 145); --negative: oklch(0.62 0.19 25);
  --row-stripe: oklch(0.24 0.05 250);
  color-scheme: dark;
}}
* { box-sizing: border-box; margin: 0; }
body { background: var(--surface); color: var(--text-primary);
  font-family: var(--font-body); line-height: 1.5; padding-bottom: 6rem; }
main { max-width: 860px; margin: 0 auto; padding: 1.5rem 1rem; }
h1 { font-size: 1.953rem; line-height: 1.2; }
h2 { font-size: 1.25rem; line-height: 1.2; }
a.cta { display: inline-block; background: var(--accent); color: var(--text-on-accent);
  padding: .7rem 1.25rem; border-radius: 4px; text-decoration: none; font-weight: 700; }
.muted { color: var(--text-muted); } .sec { color: var(--text-secondary); }
table { border-collapse: collapse; width: 100%; font-size: .875rem; }
th, td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--rule); }
th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
tbody tr:nth-child(even) td { background: var(--row-stripe); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tablewrap { overflow-x: auto; margin: 1rem 0; }
.pos { color: var(--positive); font-weight: 600; }
.sitehead { display: flex; justify-content: space-between; align-items: center;
  border-bottom: 2px solid var(--rule-strong); padding-bottom: .5rem; margin-bottom: 1.25rem; }
/* Mirrors the app's .navbar-brand + .brand-mark (frontend/src/styles.css) —
   same display face, same 30x22 accent mark — so the static pages read as the
   same product as the app rather than a lookalike. */
.sitehead .brand { font-family: var(--font-display); font-weight: 700; letter-spacing: 0;
  font-size: 1.125rem; text-decoration: none; color: var(--text-primary);
  display: inline-flex; align-items: center; gap: .375rem; }
.sitehead .brand-mark { width: 30px; height: 22px; flex-shrink: 0; color: var(--accent); }
.foot { margin-top: 2.5rem; border-top: 1px solid var(--rule); padding-top: .75rem;
  font-size: .8125rem; color: var(--text-muted); }
.foot a { color: var(--text-secondary); }
.prose { max-width: 62ch; } .prose p { margin: .6rem 0; }
.links { display: flex; gap: .5rem; flex-wrap: wrap; margin: .75rem 0; }
.links a { font-size: .8125rem; padding: .2rem .65rem; border: 1px solid var(--rule);
  border-radius: 999px; text-decoration: none; color: var(--text-secondary); }
.range { max-width: 560px; margin: 1.25rem 0 1.5rem; }
.range .rtitle { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: .6rem; }
.range .rlabels { position: relative; height: 3.4rem; font-size: .8125rem; }
.range .rlabels > div { position: absolute; line-height: 1.15; }
.range .rlabels b { font-size: .9375rem; font-variant-numeric: tabular-nums; display: block; }
.range .rlabels small { color: var(--text-muted); font-size: .72rem; }
.range .rbar { position: relative; height: 16px; background: var(--surface-sunken); border-radius: 8px; }
.range .riqr { position: absolute; top: 0; bottom: 0; background: var(--accent-soft); border-radius: 8px; }
.range .rest { position: absolute; top: -5px; width: 3px; height: 26px; background: var(--accent-strong); border-radius: 2px; }
.range .rmid { position: absolute; width: 100%; text-align: center; top: 0; line-height: 16px; font-size: .68rem; color: var(--text-secondary); letter-spacing: .03em; }
.range .rproj { position: relative; height: 2.2rem; font-size: .8125rem; }
.range .rproj > div { position: absolute; transform: translateX(-50%); text-align: center; line-height: 1.15; }
.range .rproj .caret { display: block; width: 0; height: 0; margin: 0 auto 2px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 6px solid var(--accent-strong); }
.adp { border: 1px solid var(--rule-strong); border-radius: 999px; padding: .05rem .55rem; white-space: nowrap; }
.market { display: flex; gap: .75rem; margin: 1rem 0 .4rem; flex-wrap: wrap; max-width: 560px; }
.market > div { flex: 1 1 45%; background: var(--surface-sunken); border-radius: 6px; padding: .6rem .75rem; }
.market small { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.market b { display: block; font-size: 1.25rem; line-height: 1.3; font-variant-numeric: tabular-nums; }
.market span { font-size: .75rem; }

.chips { display: flex; gap: .4rem; flex-wrap: wrap; margin: .6rem 0; align-items: center; }
.chips a, .chips span.here { font-size: .8125rem; padding: .2rem .65rem; border: 1px solid var(--rule);
  border-radius: 999px; text-decoration: none; color: var(--text-secondary); white-space: nowrap; }
.chips span.here { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); font-weight: 600; }
.chips .chiplabel { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); margin-right: .15rem; }
.tier { background: var(--surface-raised); border: 1px solid var(--rule); border-radius: 8px;
  padding: 1rem 1.1rem; margin: 1.25rem 0; }
.tier > h2 { font-size: 1.125rem; margin-bottom: .15rem; }
.tier .tfacts { font-size: .8125rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.tier .tread { margin: .7rem 0 .2rem; max-width: 62ch; }
.tier .tablewrap { margin-bottom: 0; }
/* The cliff below a tier is the whole reason a drafter cares where it ends —
   so it gets its own line under the tier, not a column inside it. */
.cliff { font-size: .8125rem; color: var(--text-muted); text-align: center; margin: -.6rem 0 .6rem;
  font-variant-numeric: tabular-nums; }

.timeline { list-style: none; padding: 0; margin: 1.5rem 0 0; border-left: 2px solid var(--rule-strong); }
.timelinenode { position: relative; padding: 0 0 1.5rem 1.25rem; margin-left: -1px; }
.timelinenode::before { content: ''; position: absolute; left: -6px; top: .3rem; width: 10px; height: 10px;
  border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); }
.timelinenode .tfacts { font-size: .8125rem; font-weight: 700; color: var(--text-secondary);
  font-variant-numeric: tabular-nums; text-transform: uppercase; letter-spacing: .03em; }
.timelinenode .tread { margin: .5rem 0; max-width: 62ch; }
.playerchips { display: flex; gap: .4rem; flex-wrap: wrap; margin: .5rem 0 0; }
.playerchips .chip { font-size: .8125rem; padding: .3rem .7rem; border: 1px solid var(--rule);
  border-radius: 8px; text-decoration: none; color: var(--text-primary); background: var(--surface-raised);
  display: inline-block; }
a.chip:hover { border-color: var(--rule-strong); }