/* PDT Dynasty League — 07/28/26 - 17:00 EDT
   Dark theme, locked. One accent (PDT azure #3987e5, which is also the validated
   categorical slot 1). Radius rule: containers 12px, chips full pill, data-ends 4px.
   All numbers tabular. No em-dashes anywhere in copy. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/assets/fonts/archivo-var.woff2') format('woff2');
}

:root {
  color-scheme: dark;

  --plane: #0b0b0c;
  --surface: #141416;
  --surface-2: #1b1b1f;
  --surface-3: #232328;

  --ink: #ffffff;
  --ink-2: #c3c2b7;
  --muted: #8b8a84;
  --rule: #26262a;
  --grid: #1f1f23;

  --accent: #3987e5;
  --accent-dim: #1c4d84;
  --accent-wash: rgba(57, 135, 229, 0.12);

  --s1: #3987e5;
  --s2: #d95926;
  --s3: #199e70;
  --s4: #c98500;
  --s5: #d55181;
  --s6: #008300;

  --good: #0ca30c;
  --bad: #e66767;
  --neutral: #383835;

  --r-lg: 12px;
  --r-sm: 6px;
  --r-end: 4px;

  --pad: clamp(16px, 4vw, 32px);
  --max: 1180px;

  --f-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--plane);
  color: var(--ink);
  font-family: var(--f-display);
  font-size: 15px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

/* ---------------------------------------------------------------- nav */
.nav {
  position: sticky; top: 0; z-index: 40;
  height: 60px;
  display: flex; align-items: center;
  background: rgba(11, 11, 12, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.nav-inner {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--pad);
  width: 100%; display: flex; align-items: center; gap: 6px;
}
.nav-mark {
  font-weight: 900; font-stretch: 118%; letter-spacing: -0.02em;
  font-size: 17px; text-decoration: none; margin-right: auto;
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.nav-mark span { color: var(--accent); }
.nav-links {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  /* Same rule as the wide tables: fade only the side that has more behind it, so
     the last item is never permanently half-hidden once you reach the end. */
  --fade-l: 0px; --fade-r: 22px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}
.nav-links:not([data-scrollable]) { -webkit-mask-image: none; mask-image: none; }
.nav-links::-webkit-scrollbar { display: none; }
.nav a.nl {
  text-decoration: none; color: var(--ink-2); font-size: 13px; font-weight: 600;
  padding: 7px 11px; border-radius: 999px; white-space: nowrap;
  transition: background .15s, color .15s;
}
.nav a.nl:hover { background: var(--surface-2); color: var(--ink); }
.nav a.nl[aria-current='page'] { background: var(--accent-wash); color: var(--accent); }
@media (max-width: 640px) {
  .nav-mark .full { display: none; }
  .nav-inner { gap: 4px; }
}

/* ------------------------------------------------------------ masthead */
.masthead { padding: clamp(28px, 6vw, 56px) 0 clamp(20px, 4vw, 32px); }
.kicker {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
}
h1 {
  margin: 10px 0 0;
  font-weight: 900; font-stretch: 122%; letter-spacing: -0.035em;
  font-size: clamp(38px, 11vw, 84px); line-height: 0.92;
}
h1 .ac { color: var(--accent); }
.lede { margin: 14px 0 0; color: var(--ink-2); max-width: 60ch; font-size: clamp(15px, 2vw, 17px); }

h2 {
  font-weight: 800; font-stretch: 112%; letter-spacing: -0.025em;
  font-size: clamp(22px, 4vw, 30px); line-height: 1.05; margin: 0;
}
h3 { font-weight: 800; font-stretch: 108%; letter-spacing: -0.02em; font-size: 17px; margin: 0; }

section { padding: clamp(26px, 5vw, 44px) 0; border-top: 1px solid var(--rule); }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.sec-note { color: var(--muted); font-size: 13px; }

/* ---------------------------------------------------------- hero figure */
.hero {
  display: grid; gap: 18px; align-items: center;
  grid-template-columns: 1fr;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: clamp(18px, 4vw, 30px);
}
@media (min-width: 720px) { .hero { grid-template-columns: auto 1fr; gap: 28px; } }
.hero { min-width: 0; }
.hero > * { min-width: 0; }
.hero-fig {
  font-size: clamp(32px, 8.4vw, 92px); font-weight: 900; font-stretch: 120%;
  letter-spacing: -0.045em; line-height: 0.88; font-variant-numeric: proportional-nums;
  color: var(--accent); overflow-wrap: anywhere;
}
.hero-label { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.hero-sub { color: var(--ink-2); margin-top: 6px; font-size: 15px; }

/* ------------------------------------------------------------ stat row */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 780px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--surface); padding: 16px 16px 15px; }
.stat .l { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.stat .v { font-size: clamp(24px, 5vw, 31px); font-weight: 900; font-stretch: 112%; letter-spacing: -0.03em; margin-top: 7px; line-height: 1; font-variant-numeric: proportional-nums; }
.stat .s { font-size: 12.5px; color: var(--ink-2); margin-top: 6px; }
.stat a { color: inherit; text-decoration: none; }
.stat a:hover .v { color: var(--accent); }

/* -------------------------------------------------------------- tables */
/* The mask is the affordance: a table wider than the screen fades at the edge
   it can still scroll toward, so nobody thinks the last column is missing. */
.tw {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  --fade-l: 0px; --fade-r: 26px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}
.tw:not([data-scrollable]) { -webkit-mask-image: none; mask-image: none; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  text-align: right; font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--muted); padding: 0 10px 9px;
  border-bottom: 1px solid var(--rule); white-space: nowrap;
}
thead th:first-child, td:first-child { text-align: left; padding-left: 0; }
thead th.l, td.l { text-align: left; }
thead th:last-child, td:last-child { padding-right: 0; }
@media (max-width: 640px) { .hide-sm { display: none; } }
@media (max-width: 900px) { .hide-md { display: none; } }
tbody td { text-align: right; padding: 11px 10px; border-bottom: 1px solid var(--grid); white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--surface); }
td.name { font-weight: 700; }
table a, .li a, .bl a, .stat a, .h2h a, .pl-b a { text-decoration: none; color: inherit; }
table a:hover, .li a:hover, .bl a:hover, .h2h a:hover { color: var(--accent); }
.rank { color: var(--muted); font-weight: 700; width: 1%; padding-right: 12px; }
.num { font-variant-numeric: tabular-nums; }
.dim { color: var(--muted); }
.pos { color: var(--good); }
.neg { color: var(--bad); }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--ink); }
th[aria-sort='descending']::after { content: ' \25BC'; font-size: 8px; color: var(--accent); }
th[aria-sort='ascending']::after { content: ' \25B2'; font-size: 8px; color: var(--accent); }

/* avatar + name cell */
.who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.who a {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  /* the name component is a link everywhere it appears, so style it here once
     rather than naming every container it can sit in. 364 of them were underlined
     in the bracket and elsewhere while the same names in a table were not. */
  text-decoration: none; color: inherit;
}
.who span { overflow: hidden; text-overflow: ellipsis; }
.av { width: 26px; height: 26px; border-radius: 999px; background: var(--surface-3); flex: none; object-fit: cover; }
.av-lg { width: 60px; height: 60px; }

/* --------------------------------------------------------------- chips */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  padding: 3px 9px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--rule);
}
.chip.gold { background: var(--accent-wash); color: var(--accent); border-color: var(--accent-dim); }
.chip.low { background: rgba(57, 135, 229, 0.18); border-color: rgba(57, 135, 229, 0.45); color: var(--ink); }
.chip.high { background: rgba(232, 112, 60, 0.20); border-color: rgba(232, 112, 60, 0.45); color: var(--ink); }

/* ----------------------------------------------------------- bar rows */
.bars { display: grid; gap: 3px; }
.bar-row { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 12px; padding: 5px 0; }
.bar-row .bl { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row .bl a { text-decoration: none; }
.bar-row .bt { height: 18px; position: relative; }
.bar-row .bf {
  position: absolute; left: 0; top: 0; height: 100%;
  background: var(--accent);
  border-radius: 0 var(--r-end) var(--r-end) 0;
  min-width: 2px;
}
.bar-row .bv { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 62px; text-align: right; }
/* diverging: value can go either side of a centre baseline */
.bar-row.div .bt { display: flex; }
.bar-row.div .bf { position: absolute; top: 0; height: 100%; }
.bar-row .bf.neg { background: var(--bad); border-radius: var(--r-end) 0 0 var(--r-end); }
.bar-row .bf.pos { background: var(--accent); border-radius: 0 var(--r-end) var(--r-end) 0; }
.axis0 { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--rule); }
@media (max-width: 560px) { .bar-row { grid-template-columns: 88px 1fr auto; gap: 8px; } .bar-row .bl { font-size: 12px; } .bar-row .bv { min-width: 54px; font-size: 12px; } }

/* ------------------------------------------------------------ h2h grid */
.h2h { border-collapse: separate; border-spacing: 2px; font-size: 12px; }
.h2h th { padding: 4px; font-size: 10px; letter-spacing: 0.04em; border: none; text-align: center; }
.h2h th.rowh { text-align: right; padding-right: 8px; color: var(--ink-2); font-weight: 700; white-space: nowrap; }
.h2h td {
  padding: 0; text-align: center; border: none; width: 46px; height: 38px;
  border-radius: var(--r-sm); font-weight: 700; font-size: 12px;
  color: var(--ink); background: var(--surface-2);
}
.h2h td.self { background: transparent; color: var(--rule); }
.h2h td.empty { background: var(--surface); color: var(--muted); }
.h2h td span { display: block; font-size: 9.5px; font-weight: 600; color: var(--ink-2); margin-top: 1px; }

/* ---------------------------------------------------------------- misc */
.grid2 { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 780px) { .grid2 { grid-template-columns: 1fr 1fr; gap: 20px; } }
.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: clamp(16px, 3vw, 22px); }
.panel h3 { margin-bottom: 12px; }
.list { display: grid; gap: 0; }
.li { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--grid); font-size: 13.5px; }
.li:last-child { border-bottom: none; }
.li .i { color: var(--muted); font-weight: 700; min-width: 30px; font-size: 12px; text-align: right; flex: none; }
.li { min-width: 0; }
.li > * { min-width: 0; }
.li .m { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.li .sub { color: var(--muted); font-size: 12px; }

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--accent); color: #06121f; text-decoration: none;
  font-weight: 800; font-size: 14px; padding: 11px 18px; border-radius: 999px;
  transition: transform .12s, filter .12s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule); }
.btn.ghost:hover { background: var(--surface-2); }

.foot { border-top: 1px solid var(--rule); padding: 28px 0 44px; color: var(--muted); font-size: 12.5px; }
.foot a { color: var(--ink-2); }

.divs { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .divs { grid-template-columns: 1fr 1fr; } }

.note { color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.mono { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* long team names sit on one line and truncate rather than wrapping under a name */
.tname { font-weight: 600; display: inline-block; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
@media (min-width: 780px) { .tname { max-width: none; } }

/* the grid is a fixed-size matrix, not a full-width table: keep it left */
.h2h { width: auto; min-width: 100%; }
.h2h th.rowh { width: 1%; }
.h2h thead th { padding-bottom: 8px; }
.h2h thead th .av { display: block; margin: 0 auto; }

/* phone table density: tighter cells and smaller avatars so a wide row still fits */
@media (max-width: 640px) {
  table { font-size: 13px; }
  tbody td { padding: 9px 6px; }
  thead th { padding: 0 6px 8px; }
  .tw .av { width: 20px; height: 20px; }
  .tw .who, .tw .who a { gap: 6px; }
}

/* native disclosure for the long draft rounds: no JS, keyboard accessible */
details > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 13px; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--rule);
  padding: 9px 16px; border-radius: 999px;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: '+'; color: var(--accent); font-weight: 900; }
details[open] > summary::before { content: '\2013'; }
details > summary:hover { color: var(--ink); border-color: var(--accent-dim); }

/* compare widget */
.sel {
  width: 100%; appearance: none; -webkit-appearance: none;
  background-color: var(--surface-2); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 999px;
  font: inherit; font-weight: 800; font-size: 15px;
  padding: 11px 36px 11px 16px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.sel:hover { border-color: var(--accent-dim); }
.sel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cmp-row { display: grid; grid-template-columns: 1fr 132px 1fr; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--grid); }
.cmp-row:last-child { border-bottom: none; }
.cmp-row .lbl { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.cmp-row .a { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.cmp-row .b { text-align: left; font-weight: 800; font-variant-numeric: tabular-nums; }
.cmp-row .win { color: var(--accent); }
.cmp-row .sub2 { display: block; font-size: 11px; font-weight: 600; color: var(--muted); }
.cmp-head { display: grid; grid-template-columns: 1fr 132px 1fr; align-items: center; gap: 10px; padding: 18px 0 16px; }
.cmp-head .h2hline { text-align: center; font-weight: 900; font-size: clamp(19px, 4vw, 28px); font-stretch: 112%; letter-spacing: -.02em; line-height: 1.1; }
.cmp-head .side { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cmp-head .side.right { justify-content: flex-end; }
.cmp-head .side .nm { font-weight: 900; font-size: clamp(15px, 2.6vw, 20px); font-stretch: 110%; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) {
  .cmp-row, .cmp-head { grid-template-columns: 1fr 88px 1fr; gap: 6px; }
  .cmp-row .lbl { font-size: 9.5px; letter-spacing: .04em; }
  .cmp-row .a, .cmp-row .b { font-size: 13px; }
  .cmp-head .side .av { display: none; }
}

/* small multiples: one sparkline per manager, never ten lines on one chart */
.sparks { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.sparkcard {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: 12px 12px 10px; text-decoration: none; color: inherit; display: block;
  transition: border-color .15s;
}
a.sparkcard:hover { border-color: var(--accent-dim); }
.sparkhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 13px; font-weight: 700; }
.sparkhead .av { width: 22px; height: 22px; }
.spark { display: block; width: 100%; height: 54px; }
.sparkfoot { display: flex; justify-content: space-between; gap: 6px; margin-top: 6px; font-size: 10.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- accessibility */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
main:focus { outline: none; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #06121f; font-weight: 800;
  padding: 12px 18px; border-radius: 0 0 var(--r-lg) 0; text-decoration: none;
}
.skip:focus { left: 0; }
th.sortable:focus-visible { outline-offset: -2px; }

/* stacked position share: the 2px gap does the separating, never a border */
.posbar { display: flex; height: 34px; border-radius: var(--r-end); overflow: hidden; gap: 2px; }
.posbar .seg { display: flex; align-items: center; justify-content: center; min-width: 2px; }
.posbar .seg b { font-size: 11px; font-weight: 800; color: #06121f; letter-spacing: .04em; }
.poskey { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.poskey span { display: inline-flex; align-items: center; gap: 6px; }
.poskey i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* on a narrow screen the grid scrolls sideways, so the names have to stay put
   or you lose track of whose row you are reading */
.h2h th.rowh {
  position: sticky; left: 0; z-index: 2;
  background: var(--plane);
  padding-right: 10px;
  max-width: 108px; overflow: hidden; text-overflow: ellipsis;
}
@media (min-width: 780px) { .h2h th.rowh { max-width: none; } }
.h2h thead th.rowh { background: var(--plane); }

/* The value keeps its own line where it is short, but long text (a list of player
   names) must still be allowed to shrink, or a narrow phone scrolls sideways. */
.li .m { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.li .m.tight { flex: none; white-space: nowrap; }

/* current squad, grouped by position */
.squad { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.sq { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 12px 14px 10px; }
.sqh { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; display: flex; align-items: center; gap: 7px; }
.sqh i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex: none; }
.sqp { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--grid); font-size: 13px; }
.sq .sqp:last-child { border-bottom: none; }
.sqp .nm { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sqp .tm { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; }
.sqp .pt { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; font-size: 12.5px; }

/* playoff bracket */
.bracket { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .bracket { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); align-items: start; } }
.bcol { display: grid; gap: 10px; align-content: start; }
.bcolh { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.bcolh .dim { letter-spacing: .06em; }
.bgame { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 4px 12px; }
.bgame.bye { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; }
.blabel { font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); padding: 8px 0 2px; }
.bteam { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--grid); }
.bteam:last-child { border-bottom: none; }
.bteam .bseed { font-size: 10.5px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.bteam .bpts { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.bteam.won .bpts { color: var(--accent); }
.bteam.won .who { font-weight: 800; }
.bteam.empty { opacity: .5; }
.bteam .av { width: 22px; height: 22px; }
.bteam .who span { font-size: 13.5px; }

/* jump row for long pages */
.jump { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.jump a {
  font-size: 12px; font-weight: 700; text-decoration: none;
  color: var(--ink-2); background: var(--surface-2);
  border: 1px solid var(--rule); border-radius: 999px; padding: 6px 12px;
  transition: color .15s, border-color .15s;
}
.jump a:hover { color: var(--accent); border-color: var(--accent-dim); }
section[id] { scroll-margin-top: 72px; }

/* a whole week of results */
.wk { margin-bottom: 18px; }
.wkh { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wkg { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .wkg { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } }

/* A row whose right-hand side is long prose (a list of player names) must stack on
   a phone. Squeezing the left side down to "Kostan..." is worse than two lines. */
@media (max-width: 620px) {
  .li.stack { display: block; }
  .li.stack .m { display: block; margin-left: 0; margin-top: 4px; text-align: left; font-weight: 600; }
  .li.stack .who { margin-bottom: 2px; }
  /* a leading index sits inline with the name rather than on its own line */
  .li.stack .i { display: inline-block; min-width: 0; margin-right: 8px; }
  .li.stack .who { display: inline-flex; vertical-align: middle; }
}

/* every grid cell is a shortcut into the compare tool */
.h2h td a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; height: 100%; text-decoration: none; color: inherit; border-radius: var(--r-sm);
}
.h2h td a:hover { outline: 2px solid var(--accent); outline-offset: -2px; }

/* every meeting between the compared pair */
.cmp-games { margin-top: 20px; border-top: 1px solid var(--rule); padding-top: 14px; }
.cmp-gh { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; text-align: center; }
.cmp-g { display: grid; grid-template-columns: 1fr 132px 1fr; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--grid); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13.5px; }
.cmp-g:last-child { border-bottom: none; }
.cmp-g > :first-child { text-align: right; }
.cmp-g > :last-child { text-align: left; }
.cmp-g .lbl { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
@media (max-width: 560px) { .cmp-g { grid-template-columns: 1fr 88px 1fr; gap: 6px; font-size: 12.5px; } .cmp-g .lbl { font-size: 10px; } }

/* manager cards: compact enough that a phone shows several at once */
.mgrid { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .mgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .mgrid { grid-template-columns: 1fr 1fr 1fr; } }
.mcard {
  display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: 12px 14px; transition: border-color .15s;
}
.mcard:hover { border-color: var(--accent-dim); }
.mcard .av { width: 46px; height: 46px; flex: none; }
.mcard .mid { min-width: 0; flex: 1; }
.mcard .nm { font-weight: 900; font-stretch: 112%; letter-spacing: -.02em; font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcard .tm { font-size: 12px; color: var(--muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcard .mstats { display: flex; gap: 14px; flex: none; }
.mcard .mstats > div { display: flex; flex-direction: column; align-items: flex-end; }
.mcard .mstats .l { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); opacity: .75; }
.mcard .mstats .v { font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; margin-top: 1px; }
/* on a phone the stats drop under the name rather than fighting it for width */
@media (max-width: 460px) {
  .mcard { flex-wrap: wrap; }
  .mcard .mid { flex: 1 1 auto; }
  .mcard .mstats { flex: 1 0 100%; justify-content: flex-start; gap: 22px; margin-top: 2px; }
  .mcard .mstats > div { align-items: flex-start; }
}

/* --------------------------------------------------------- player lookup */
/* Twelve guys on phones want one thing here: type a name, see who has him.
   A wide sortable table would scroll sideways on a phone, so this is a list. */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.plq {
  width: 100%; box-sizing: border-box;
  background: var(--surface-2); border: 1px solid var(--rule); border-radius: 12px;
  color: var(--ink); font: inherit; font-size: 16px; font-weight: 600;
  padding: 12px 14px;
}
.plq::placeholder { color: var(--muted); font-weight: 500; }
.plq:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.plf { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pchip {
  background: var(--surface-2); border: 1px solid var(--rule); border-radius: 999px;
  color: var(--ink-2); font: inherit; font-size: 12.5px; font-weight: 700;
  padding: 6px 12px; cursor: pointer;
}
.pchip[aria-pressed='true'] { background: var(--accent-wash); border-color: transparent; color: var(--accent); }
.pchip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pl-count { color: var(--muted); font-size: 12.5px; font-weight: 700; margin: 14px 0 4px; }
.pl-list { list-style: none; margin: 0; padding: 0; }
/* [hidden] loses to display:grid, so the filter has to say it again or every
   row stays on screen while the count claims otherwise. */
.pl[hidden] { display: none; }
.pl {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px;
  padding: 12px 0; border-top: 1px solid var(--rule);
}
.pl-a { min-width: 0; }
.pl-b { text-align: right; min-width: 0; }
.pl-c { grid-column: 1 / -1; }
.pl-n { display: block; font-weight: 800; font-size: 15px; }
.pl-b a { font-weight: 700; font-size: 15px; }
.pl-m { display: block; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.pdot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: baseline; }
.pl-none { color: var(--muted); font-weight: 600; padding: 18px 0 4px; }

/* ------------------------------------------------------ rookie draft board */
.boards { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .boards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .boards { grid-template-columns: repeat(3, 1fr); } }
.picks { list-style: none; margin: 12px 0 0; padding: 0; }
.picks li {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; border-top: 1px solid var(--rule); min-width: 0;
}
.picks li:first-child { border-top: none; }
.pk { color: var(--muted); font-size: 12px; font-weight: 700; flex: none; width: 34px; }
.picks li.tr .pk { color: var(--accent); }
.pkw { min-width: 0; overflow: hidden; }
.pkf { color: var(--muted); font-size: 11.5px; font-weight: 600; margin-left: auto; white-space: nowrap; flex: none; }

/* A player's name that answers "who has him now". A hairline underneath is the
   affordance: it reads as tappable without shouting, and it is the only place on
   the site where a name is not a manager. */
a.pn { text-decoration: none; color: inherit; border-bottom: 1px solid var(--rule); }
a.pn:hover { border-bottom-color: var(--accent); color: var(--accent); }
a.pn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The record book runs 21 screens on a phone and a manager's page runs 30. The
   jump row at the top is the way around them, and once you are deep in a page
   there was no way back to it short of scrolling all the way up. This is that way
   back. It only exists on pages that HAVE a jump row, and only once you are far
   enough down to need it. */
.tosections {
  position: fixed; right: 16px; bottom: 16px; z-index: 45;
  display: none; align-items: center; gap: 7px;
  padding: 11px 15px; min-height: 44px;
  background: var(--surface-2); border: 1px solid var(--rule);
  border-radius: 999px; color: var(--ink); text-decoration: none;
  font-size: 13px; font-weight: 700;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}
.tosections[data-show] { display: inline-flex; }
.tosections:hover { border-color: var(--accent); color: var(--accent); }
.tosections:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tosections svg { flex: none; }