:root{
  --bg:oklch(0.145 0.012 265); --panel:oklch(0.185 0.012 265);
  --panel2:oklch(0.215 0.012 265); --rule:oklch(0.265 0.012 265);
  --fg:oklch(0.97 0.003 265); --mut:oklch(0.63 0.010 265);
  --dim:oklch(0.605 0.010 265);
  --ac:#16e07a; --neg:oklch(0.68 0.19 25); --amb:#ffc44d;
  /* POSITION COLOURS BELONG TO WHOEVER'S BOARD YOU ARE READING. A drafter
     arrives having learned a palette somewhere else, and ours was its own
     invention — our WR was violet while both books he might come from use
     violet for QB, so every chip meant the wrong thing at a glance. These
     are FantasyPros' own tokens (--player-positions-*, read off their live
     stylesheet), which is what /rankings, /adp and a room drafting against
     ECR or the general ADP should wear. `.bk-sleeper` below swaps the whole
     set for Sleeper's. Every colour here clears 8:1 on --panel; the weakest
     across both palettes is Sleeper's DEF at 5.2:1, still past AA. */
  --qb:#c8a1ff; --rb:#83dcef; --wr:#85de9e; --te:#ff8aa2;
  --k:#fdb97c; --def:#bdc3cd;
  --anton:'Anton',Impact,sans-serif;
  --body:'Archivo',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);
  font-size:15px;line-height:1.55;font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
h1,h2,h3{margin:0}
.wrap{max-width:1320px;margin:0 auto;padding:0 30px}
.scroll{overflow-x:auto}
/* .rank2 opts out of table{min-width:900px}: five columns fit any width, and
   inside the 760px list the global floor pushed vs. ADP out of the box. */
.rank2{min-width:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* nav */
.nav{background:oklch(0.115 0.012 265);border-bottom:1px solid var(--rule);
  position:sticky;top:0;z-index:20}
.nav-in{max-width:1320px;margin:0 auto;padding:0 30px;height:60px;display:flex;
  align-items:center;justify-content:space-between;gap:20px}
.mark{font-family:var(--anton);font-size:19px;text-transform:uppercase;letter-spacing:.01em}
.mark em{color:var(--ac);font-style:normal}
.nav-links{display:flex;gap:20px;font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;color:var(--mut)}
.nav-links a:hover{color:var(--fg)}
.nav-links a.on{color:var(--fg);border-bottom:2px solid var(--ac);padding-bottom:3px}
.nav-right{display:flex;align-items:center;gap:13px}
.avatar{width:26px;height:26px;border-radius:50%;background:var(--panel2)}
.btn{background:var(--ac);color:var(--bg);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;padding:10px 17px;border-radius:4px}
.btn.ghost{background:transparent;border:2px solid var(--rule);color:var(--fg)}
.btn.lg{font-size:13.5px;padding:16px 30px;border-radius:0}
.btn.ghost.lg{padding:14px 30px}

/* strips */
.bar{background:var(--panel);border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:10px;letter-spacing:.07em;color:var(--amb)}
.bar-in{max-width:1320px;margin:0 auto;padding:7px 30px;display:flex;
  align-items:center;gap:10px;flex-wrap:wrap}
.dot{width:5px;height:5px;border-radius:50%;background:var(--amb);flex:0 0 auto}
.bar .q{color:var(--dim)}
.samp{border-bottom:1px dotted var(--dim);padding-bottom:1px}

/* section head */
.head{padding:34px 0 18px;display:flex;align-items:flex-end;
  justify-content:space-between;gap:30px;flex-wrap:wrap}
.kick{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ac);margin-bottom:8px}
.head h1,.head h2{font-family:var(--anton);font-size:34px;line-height:1.04;
  text-transform:uppercase;text-wrap:balance}
.head p{margin:0;font-size:13px;line-height:1.6;color:var(--mut);
  max-width:44ch;text-wrap:pretty}

/* chips + pills */
.pos{display:inline-block;font-family:var(--mono);font-size:9px;font-weight:700;
  letter-spacing:.04em;border:1px solid currentColor;border-radius:2px;
  padding:1px 4px;line-height:1.3}
.pos.qb{color:var(--qb)} .pos.rb{color:var(--rb)}
.pos.wr{color:var(--wr)} .pos.te{color:var(--te)}
.pos.k{color:var(--k)} .pos.def{color:var(--def)} .pos.dst{color:var(--def)}
/* FLEX is not a position, so it does not get one colour — it gets the ones
   it accepts, in FantasyPros' own three-stop band (their
   `.mcu-positions--flex-flex`). Filled rather than outlined because the
   gradient has to be visible at 9px; the room's own background is the text,
   the way every filled chip on both books reads. */
.pos.flex{color:var(--bg);border-color:transparent;font-weight:700;
  background:linear-gradient(90deg,var(--wr) 0 33.34%,var(--rb) 33.34% 66.67%,
                             var(--te) 66.67% 100%)}
/* THE ROOM WEARS ITS BOOK'S PALETTE. Custom properties inherit, so one class
   on the room's wrapper re-points every chip inside it — board grid, table,
   rail, player layer — with no per-chip markup and no second stylesheet.
   Read off sleeper.com's rendered draft board (their cells paint these at
   0.8 alpha over white; here they are text on near-black, so they ship at
   full strength). Only the four Sleeper books select it: ECR and the general
   ADP keep FantasyPros above, which is where those numbers are read. */
.bk-sleeper{--qb:#ef74a1;--rb:#8ff2ca;--wr:#56c9f8;--te:#feae58;
  --k:#b6b9ff;--def:#bf755d}
.pill{font-family:var(--body);font-size:11.5px;font-weight:600;padding:7px 15px;
  border-radius:4px;background:var(--panel2);color:var(--mut);cursor:default}
.pill.on{background:var(--ac);color:var(--bg)}
.pill.mono{font-family:var(--mono);font-size:11px;font-weight:700;padding:7px 13px}
/* `.pill` above is the STATIC span: inert, so cursor:default is right for it
   (see vpills — a pill that looks clickable and does nothing reads as broken).
   Live pills are anchors on /draft, /rankings, /adp and /tape, and all four
   shipped a link with an arrow cursor and no hover response at all. */
a.pill{cursor:pointer}
a.pill:hover{color:var(--fg);background:var(--rule)}
a.pill.on:hover{color:var(--bg);background:var(--ac)}
.pills{display:flex;gap:6px;flex-wrap:wrap}
/* The setup screen's paired controls (YOUR BOARD / YOUR STRATEGY). One row
   on a laptop, stacked on a phone, where two selects side by side leave
   neither wide enough to read its own longest option. */
.setup2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(max-width:560px){.setup2{grid-template-columns:minmax(0,1fr)}}
.tag{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.08em;
  border:1px solid currentColor;border-radius:2px;padding:2px 7px;white-space:nowrap}
.tag.ac{color:var(--ac)} .tag.amb{color:var(--amb)}
.tag.neg{color:var(--neg)} .tag.dim{color:var(--dim)}

/* draft room: headshots, rail labels, the middle tab strip, and the three
   animations the room is allowed. No JavaScript on any page, so a pick
   arriving between loads has to announce itself in CSS or not at all. */
.ph{position:relative;border-radius:50%;background:oklch(0.24 0.012 265);
display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
font-family:var(--mono);font-weight:600;color:var(--dim);overflow:hidden}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.lbl{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--dim)}
/* A name that opens the player layer has to look like one: a{text-decoration:none}
   is global here, and linked and unlinked names sit in the same table. */
.plink{text-decoration:underline;text-decoration-color:var(--dim);text-underline-offset:3px}
.plink:hover{color:var(--ac);text-decoration-color:var(--ac)}
/* the room, Direction B: main table left, rail right; on a phone the RAIL
   renders first — the pick panel is the product (design review 2026-09-04).
   .board2 is the unpinned six-column board: it fits every width, so no
   sticky column and nothing clipped under it. */
.board2{width:100%;min-width:0;border-collapse:collapse}
.board2 th{font-family:var(--mono);font-size:10px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--dim);text-align:left;
  padding:9px 14px;border-bottom:1px solid var(--rule)}
.board2 th.num,.board2 td.num{text-align:right}
.board2 td{padding:7px 14px;font-size:13.5px;border-bottom:1px solid oklch(0.20 0.012 265)}
.board2 tbody tr:hover{background:oklch(0.21 0.014 265)}

.room2{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;
  grid-template-areas:"main rail"}
.rm-main{grid-area:main;min-width:0}
.rm-rail{grid-area:rail;min-width:0}
/* The player layer's close control. Its panel reserves the corner via a wider
   right padding, so this never overlaps the curve's label beside it. */
.lclose{position:absolute;top:8px;right:10px;width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;border-radius:4px;
  font-size:20px;line-height:1;color:var(--dim);cursor:pointer}
.lclose:hover{color:var(--fg);background:var(--rule)}
@keyframes fadeup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes slidein{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes clockpulse{0%,100%{box-shadow:0 0 0 0 rgba(22,224,122,.45)}55%{box-shadow:0 0 0 10px rgba(22,224,122,0)}}
.anim-newpick{animation:slidein .4s ease-out .15s backwards}
.anim-clock{animation:clockpulse 2s ease-out infinite}
.anim-layer{animation:fadeup .45s ease-out .2s backwards}
@media (prefers-reduced-motion: reduce){
  .anim-newpick,.anim-clock,.anim-layer{animation:none}
}

/* panels */
.panel{border:1px solid var(--rule);background:var(--panel)}
.panel.ac{border-color:var(--ac)}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 20px;border-bottom:1px solid var(--rule)}
.panel-h h2{font-family:var(--anton);font-size:16px;text-transform:uppercase}
.panel-h .meta{font-family:var(--mono);font-size:10px;letter-spacing:.07em;color:var(--dim)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width:980px){.grid2,.grid3,.grid4{grid-template-columns:1fr}}

/* tables */
table{border-collapse:collapse;width:100%;min-width:900px}
th{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;color:var(--dim);
  text-transform:uppercase;font-weight:400;text-align:left;padding:9px 10px;
  border-bottom:1px solid var(--rule);white-space:nowrap}
td{padding:10px;border-bottom:1px solid oklch(0.20 0.012 265);font-size:13px}
tbody tr:nth-child(odd){background:var(--panel)}
.num{font-family:var(--mono);text-align:right}
th.num{text-align:right}
.nm{font-weight:600}
.up{color:var(--ac);font-weight:600} .down{color:var(--neg);font-weight:600}
.meter{height:5px;background:oklch(0.24 0.012 265);border-radius:3px;overflow:hidden;min-width:60px}
.meter i{display:block;height:100%;background:var(--ac)}
.meter.neg i{background:var(--neg)}
.range{position:relative;height:6px;background:oklch(0.24 0.012 265);
  border-radius:3px;overflow:hidden;min-width:90px}
.range i{position:absolute;top:0;bottom:0;background:oklch(0.42 0.06 155)}
.range b{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--ac)}
/* A band the export does not back for THAT player. `.samp` supplies the dotted
   underline every other placeholder cell wears; these two rules take the green
   away, because green is the export's claim and a synthetic band must not make
   it. Without them the invented band and the real one are pixel-identical. */
.range.samp i{background:oklch(0.30 0.012 265)}
.range.samp b{background:var(--dim)}
/* The room's board table. It lives in a 636px grid column, so the global
   table{min-width:900px} above — written for the full-width /rankings and
   /tape — was inherited here, never chosen. At 900 the pinned action cell
   covers Avail's trailing "%" at rest; 860 clears it by 19px and costs 12px
   of the name column. Both measured in a browser at 1440px.
   border-collapse:separate lets the pinned cell carry its own bottom border:
   a COLLAPSED border is painted by the table, below positioned cells, so the
   row rule stops dead at the pin. Nothing in this file actually collapses
   anything — no cell anywhere sets a top/left/right border — so separate
   renders identically on every table it touches. */
.board{border-collapse:separate;border-spacing:0;min-width:860px}
/* The action column. Pinned so the row's primary action is reachable at every
   scroll offset instead of clipped at all of them. Opaque or the columns it
   passes over show through — and that colour must stay the same token as the
   zebra below, or a visible stripe turns this column into a checkerboard.
   z-index because .range's bars are absolutely positioned and would otherwise
   paint over it. The edge shadow is neutral black, never the accent: green is
   the export's claim, not decoration. */
.pin{position:sticky;right:0;background:var(--panel);z-index:1;
  box-shadow:-10px 0 10px -8px rgba(0,0,0,.55)}

/* responsive */
@media(max-width:900px){
  .nav-in{height:auto;padding:10px 16px;flex-wrap:wrap;gap:10px}
  .nav-links{order:3;width:100%;overflow-x:auto;gap:16px;padding-bottom:4px;
    -webkit-overflow-scrolling:touch}
  .nav-links a{white-space:nowrap}
  .nav-links a.on{padding-bottom:2px}
  .wrap{padding:0 16px}
  .bar-in{padding:7px 16px}
  .head{padding:24px 0 14px}
  .head h1{font-size:27px}
  .room2{grid-template-columns:minmax(0,1fr);grid-template-areas:"rail" "main"}
  .gridstrip{display:none}
}
@media(max-width:560px){
  /* phone board: Board, Player, ADP, @next, Draft — the rest yields
     (cols: 1 Board 2 Player 3 Bye 4 ADP 5 ± 6 vsADP 7 ECR 8 vsECR 9 Typ) */
  .board2 th:nth-child(3),.board2 td:nth-child(3),
  .board2 th:nth-child(5),.board2 td:nth-child(5),
  .board2 th:nth-child(6),.board2 td:nth-child(6),
  .board2 th:nth-child(7),.board2 td:nth-child(7),
  .board2 th:nth-child(8),.board2 td:nth-child(8),
  .board2 th:nth-child(9),.board2 td:nth-child(9){display:none}
  /* five columns still need the width: 14px of side padding each was
     pushing the table 70px past a 375 phone. */
  .board2 th,.board2 td{padding-left:4px;padding-right:4px;font-size:12.5px}
  /* the headshot is decoration; on a phone it costs the Draft button its
     last 17px, and the button is the whole point of the row. */
  .board2 td .ph{display:none}
}
@media(max-width:520px){
  .btn.lg{width:100%;text-align:center}
}

/* footer */
footer{border-top:1px solid var(--rule);margin-top:40px;background:oklch(0.115 0.012 265)}
.foot-in{max-width:1320px;margin:0 auto;padding:26px 30px 34px;display:flex;
  justify-content:space-between;gap:24px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--dim)}
.foot-in a:hover{color:var(--mut)}

/* The room's picks arrive between page loads. Staggered so the board fills in
   rather than teleporting — CSS only, because there is no JavaScript on any
   page and that is a decision, not an omission. */
@keyframes deal { from { opacity: 0; transform: translateY(-6px) scale(.97) }
                  to   { opacity: 1; transform: none } }
.deal { animation: deal .28s cubic-bezier(.2,.8,.3,1) backwards }
@media (prefers-reduced-motion: reduce) { .deal { animation: none } }

/* The pick panel's waiting state, stacked over the finished panel until the
   board has dealt every pick between your last turn and this one. Its delay
   is the board's own (build.deal_ms), so the green card and the last opponent
   land together instead of the card claiming your turn two seconds early. */
.wait{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  gap:11px;padding:18px 18px 16px;
  background:linear-gradient(135deg,oklch(0.20 0.03 160),var(--panel) 60%);
  animation:waitout .3s ease-in forwards}
@keyframes waitout { to { opacity: 0; visibility: hidden } }
.bone{border-radius:3px;background:oklch(0.29 0.014 265);
  animation:bone 1.15s ease-in-out infinite}
@keyframes bone { 0%,100% { opacity:.5 } 50% { opacity:.95 } }
/* NOT `animation:none` here, which is what .deal above wants: an overlay
   whose exit animation never runs would sit on the panel forever. No motion
   means no waiting state at all. */
@media (prefers-reduced-motion: reduce) { .wait { display: none } }
/* And no board to wait FOR means no wait either. `.gridstrip` hides the board
   grid below 900px — the phone leads with this panel instead — and the grid
   is the only thing on the page that deals. Left in, the overlay was up to
   four seconds of dead time in front of the Draft button with nothing moving
   anywhere on screen: the delay without the thing it was synchronising to.
   Same breakpoint as the hide it answers, deliberately. */
@media (max-width:900px) { .wait { display: none } }