/* ---------------------------------------------------------------------------
   Every page of the site: the shell over them, the league's pages, a team's
   pages, the account pages and the landing page (docs/site.md).

   The palette is the draft screen's token block (app/draft/static/draft.html)
   with the two halves swapped round -- light is the default here, because
   these pages are the season report's house style and that is the skin they
   were approved in, and dark is the draft room's own palette behind the
   switch. The names are the draft screen's exactly, so the two products
   share one vocabulary and a value can be moved between them without
   translation. No colour is written outside this block.

   The rules of the house: rules, not boxes. No rounded corners, no chips, no
   shadows, one burnt-orange accent, tabular numerals everywhere a number is.
   --------------------------------------------------------------------------- */
:root{
  --ground:#E8E6DF; --surface:#F7F6F2; --sunk:#DEDBD2; --rule:#C6C2B6; --rule-strong:#16181A;
  --ink:#16181A; --muted:#5E6167; --faint:#8E9096;
  --accent:#C4551F; --accent-ink:#FFFFFF; --accent-soft:#F1DCCF;
  --good:#2F6F4E; --warn:#9A6A00; --stop:#B23A30;
  --good-soft:#DFEBE3; --warn-soft:#F3E7CA; --stop-soft:#F4DDDA;
  --shade-0:transparent; --shade-1:#E2E0D8; --shade-2:#D2CFC4; --shade-3:#C0BCAE;
  --shadow:none; --glow:none;
  --display:"Oswald","Arial Narrow",system-ui,sans-serif;
  --body:"Source Serif 4",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
:root[data-theme="dark"]{
  --ground:#121316; --surface:#191A1E; --sunk:#24262B; --rule:#33363D; --rule-strong:#E9E6DD;
  --ink:#ECE9E1; --muted:#A4A7AE; --faint:#6C7078;
  --accent:#F08A4B; --accent-ink:#121316; --accent-soft:#3B2A20;
  --good:#63B58E; --warn:#D9A43B; --stop:#E56B60;
  --good-soft:#1C3128; --warn-soft:#332714; --stop-soft:#37201E;
  --shade-0:transparent; --shade-1:#23262B; --shade-2:#2F343B; --shade-3:#3E454E;
}
:root[data-theme="light"]{ color-scheme:light }
:root[data-theme="dark"]{ color-scheme:dark }

*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
a{color:var(--accent);text-underline-offset:3px}
.page{max-width:1080px;margin:0 auto;padding:0 24px 96px}
.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
h1,h2,h3,.disp{font-family:var(--display);font-weight:600;margin:0;text-wrap:balance;
  letter-spacing:.01em}
.muted{color:var(--muted)} .faint{color:var(--faint)}
[hidden]{display:none !important}
.accent{color:var(--accent)}

/* ---- the shell: one bar over every page, a rule under it (shell.js) ------
   Links and menu buttons in the display face, the current one in the accent
   with a rule under it. A menu opens as a list on the surface with a rule
   round it: no radius, no shadow. At phone width the sections take a row of
   their own and wrap; nothing scrolls the page sideways. */
.shell{border-bottom:1px solid var(--rule-strong);background:var(--ground)}
.nav{max-width:1080px;margin:0 auto;padding:10px 24px 8px;display:flex;flex-wrap:wrap;
  align-items:center;gap:6px 22px}
.nav-main{display:contents}
.brand{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand:hover{color:var(--accent)}
/* At phone width the bar is two rows: the brand, the league and the account
   with the switch on one, the sections on the next. The switch keeps its
   words for a screen reader and shows a glyph. The name is short enough to
   fit at any width, so it is not abbreviated. */
@media (max-width:560px){
  /* A section's tag is pushed to the right of its heading, and it never
     wraps, so on a phone a long heading was squeezed to one word a line.
     Below this width the tag takes a line of its own instead. */
  .shead{flex-wrap:wrap;gap:2px 14px}
  .shead .tag{margin-left:0;flex-basis:100%;white-space:normal}
  .nav{gap:4px 12px}
  .nav .end{gap:10px}
  .league-name{max-width:22vw !important}
  .btn.theme{font-size:0;padding:4px 8px;line-height:1}
  .btn.theme::before{content:"◐";font-size:15px}
}
.sections{display:flex;flex-wrap:wrap;align-items:center;gap:2px 20px;list-style:none;
  margin:0;padding:0}
.navlink,.menu-btn{font-family:var(--display);text-transform:uppercase;letter-spacing:.07em;
  font-size:13px;font-weight:500;color:var(--muted);text-decoration:none;background:none;
  border:0;border-bottom:2px solid transparent;padding:6px 0 4px;cursor:pointer;
  white-space:nowrap;border-radius:0}
.navlink:hover,.menu-btn:hover{color:var(--ink)}
.navlink[aria-current="page"],.menu-btn.on{color:var(--accent);border-bottom-color:var(--accent)}
.menu-btn .caret{margin-left:5px;font-size:10px}
.menu-btn[aria-expanded="true"]{color:var(--ink)}
.league-name{display:inline-block;max-width:30ch;overflow:hidden;text-overflow:ellipsis;
  vertical-align:bottom;text-transform:none;letter-spacing:.02em;font-size:14px;color:var(--ink)}
.menu-btn .season{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted)}
.menu{position:relative}
.menu-list{position:absolute;z-index:20;top:100%;left:0;min-width:230px;
  max-width:calc(100vw - 32px);margin:6px 0 0;padding:6px 0;list-style:none;
  background:var(--surface);border:1px solid var(--rule);border-top:2px solid var(--rule-strong)}
.menu.right .menu-list{left:auto;right:0}
.menu-list a,.menu-list button{display:block;width:100%;text-align:left;padding:7px 14px;
  font-family:var(--body);font-size:15px;color:var(--ink);text-decoration:none;
  background:none;border:0;cursor:pointer;overflow-wrap:anywhere}
.menu-list a:hover,.menu-list a:focus-visible,.menu-list button:hover,
.menu-list button:focus-visible{background:var(--sunk);outline:none}
.menu-list a[aria-current]{color:var(--accent);font-weight:600}
.menu-list .group{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);padding:10px 14px 3px;overflow-wrap:anywhere}
.menu-list form{margin:0;border-top:1px solid var(--rule);margin-top:6px;padding-top:4px}
.nav .end{margin-left:auto;display:flex;align-items:center;gap:16px}
.btn.theme{white-space:nowrap}

/* ---- the masthead: the season report's, a rule under it and nothing else -- */
.mast{padding:36px 0 22px;border-bottom:3px solid var(--rule-strong)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin:0}
.mast h1{font-size:clamp(34px,6.5vw,68px);line-height:.95;margin:12px 0 0;
  text-transform:uppercase;letter-spacing:-.005em}
.mast .sub{margin:12px 0 0;color:var(--muted);font-size:16px;max-width:66ch}
.mast .sub b{color:var(--ink);font-weight:600}
.mast .tools{display:flex;gap:10px;align-items:center;margin-top:14px;flex-wrap:wrap}
.btn{font-family:var(--display);text-transform:uppercase;letter-spacing:.07em;font-size:11px;
  padding:5px 11px;border:1px solid var(--rule);background:var(--surface);color:var(--muted);
  cursor:pointer}
.btn:hover{border-color:var(--rule-strong);color:var(--ink)}

/* ---- the sign-in form: one rule under the field, no box ------------------ */
.signin{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:end;margin-top:22px}
.signin label{flex-basis:100%}
.signin input{flex:1 1 260px;max-width:420px;font:inherit;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--rule-strong);
  padding:6px 0;border-radius:0}
.signin input:focus{outline:none;border-bottom-color:var(--accent)}

/* ---- the readout strip under the masthead ------------------------------- */
.line{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
  border-bottom:1px solid var(--rule)}
.line div{padding:16px 16px 14px;border-right:1px solid var(--rule)}
.line div:last-child{border-right:0}
.line dt{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);margin:0}
.line dd{font-family:var(--display);font-weight:600;font-size:27px;line-height:1.12;
  margin:4px 0 0;font-variant-numeric:tabular-nums;white-space:nowrap}
.line dd small{font-size:13px;color:var(--muted);font-weight:400;white-space:normal}
.line .hi dd{color:var(--accent)}
/* A hard stop -- no adds left, a pot our arithmetic ran past -- against a
   caveat worth the eye but not alarm, such as a wire rebuilt from box scores. */
.line .warn dd{color:var(--stop)}
.line .caution dd{color:var(--warn)}

/* ---- sections ----------------------------------------------------------- */
section{margin-top:56px}
.shead{display:flex;align-items:baseline;gap:14px;border-bottom:1px solid var(--rule-strong);
  padding-bottom:8px;margin-bottom:20px}
.shead h2{font-size:24px;text-transform:uppercase;letter-spacing:.02em}
.shead .tag{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap}
.lede{margin:-8px 0 20px;color:var(--muted);font-size:15px;max-width:74ch}
.empty{color:var(--faint);padding:10px 0;font-style:italic}

/* ---- the tale of the tape: nine rows, both sides, the odds shaded ------- */
.tape{width:100%;border-collapse:collapse}
.tape th,.tape td{border-bottom:1px solid var(--rule);padding:9px 10px;text-align:right}
.tape th{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);font-weight:400;border-bottom:1px solid var(--rule-strong)}
.tape th:first-child,.tape td:first-child{text-align:left}
.tape td{font-family:var(--mono);font-size:15px;font-variant-numeric:tabular-nums}
.tape td.cat{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.04em}
.tape tr.ahead td.odds{color:var(--good)}
.tape tr.behind td.odds{color:var(--stop)}
.tape td.bar{width:38%;padding:0 10px}
.bar span{display:block;height:9px;background:var(--shade-2);position:relative}
.bar span i{position:absolute;inset:0 auto 0 0;background:var(--accent);display:block}
.bar span u{position:absolute;top:-3px;bottom:-3px;left:50%;width:1px;background:var(--ink);
  opacity:.45;text-decoration:none}
.tape tfoot td{font-family:var(--display);font-weight:600;border-bottom:0;padding-top:14px}

/* ---- the nine-category strip: the draft screen's component, unchanged --- */
.strip{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));
  border:1px solid var(--rule);border-width:1px 0 1px 1px;margin:10px 0 0}
.strip div{border-right:1px solid var(--rule);padding:6px 8px;text-align:right}
.strip .lab{display:block;text-align:right;margin-bottom:2px;font-family:var(--display);
  text-transform:uppercase;letter-spacing:.08em;font-size:10px;color:var(--muted)}
.strip b{font-family:var(--mono);font-weight:500;font-size:15px;font-variant-numeric:tabular-nums}
.strip .s1{background:var(--shade-1)} .strip .s2{background:var(--shade-2)}
.strip .s3{background:var(--shade-3)}
.strip .up b{color:var(--good)} .strip .down b{color:var(--stop)}

/* ---- the day's lineup: a place a line, on the plain listing table -------
   The house's `.grid` with four columns sized for a lineup rather than for
   numbers: the place in the display face and narrow, the name in the body
   face, the game and the flag small and left. A place nobody can fill is
   faint rather than blank -- a blank row reads as a rendering fault -- and a
   man on the bench who has a game carries a rule in the accent, because he
   is the whole point of the section. */
.grid.lineup td{text-align:left;font-family:var(--body);font-size:15px}
.grid.lineup td.slot{font-family:var(--display);font-weight:600;font-size:13px;
  letter-spacing:.08em;color:var(--muted);width:3.5em}
.grid.lineup td.name{font-size:16px;overflow-wrap:anywhere}
.grid.lineup td.name .pname{font:inherit;overflow-wrap:anywhere}
.grid.lineup td.small{font-family:var(--mono);font-size:12px;width:7em;white-space:nowrap}
.grid.lineup td.flags,.grid.lineup td.why{font-size:13px;color:var(--muted)}
/* The reason takes the slack, so the game a man has stays beside his name
   rather than drifting to the far edge of an otherwise empty row. */
.grid.lineup td.why{width:45%}
.grid.lineup tr.gone td.slot{color:var(--faint)}
.grid.lineup tr.has-game{box-shadow:inset 2px 0 0 var(--accent)}
.grid.lineup tr.has-game td.name{font-weight:600}
.flag{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--warn)}
#today-section .two{gap:0 32px}
#today-section .side h3{font-size:15px}
#today-section .shead{margin-top:28px}

/* ---- the schedule strip: the matchup period's days ---------------------- */
.days{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  border:1px solid var(--rule);border-width:1px 0 1px 1px;margin:0 0 6px}
.days div{border-right:1px solid var(--rule);padding:7px 8px}
.days .d{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);display:block}
.days .n{font-family:var(--display);font-weight:600;font-size:16px}
.days .past{color:var(--faint)} .days .past .n{font-weight:400}
.days .now{background:var(--accent-soft)} .days .now .n{color:var(--accent)}
.days .gap .n{color:var(--stop)}

/* ---- a move: a rule above it, never a box ------------------------------- */
.move{border-top:1px solid var(--rule);padding:16px 0 6px}
.move:first-of-type{border-top:1px solid var(--rule-strong)}
.move .head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.move .rank{font-family:var(--display);font-weight:600;font-size:26px;color:var(--faint);
  min-width:1.2em}
.move .what{font-size:18px;font-weight:600;flex:1 1 20ch}
.move .what b{font-weight:600}
.move .net{font-family:var(--mono);font-size:19px;font-weight:600;font-variant-numeric:tabular-nums}
.move .net.up{color:var(--good)} .move .net.down{color:var(--stop)}
.move .why{margin:6px 0 0;color:var(--muted);font-size:15px}
.move .why b{color:var(--ink);font-weight:600}
.move .note{margin:4px 0 0;font-family:var(--mono);font-size:12px;color:var(--faint);
  letter-spacing:.02em}
.move.over{border-left:2px solid var(--accent);padding-left:14px}
.mark{font-family:var(--display);text-transform:uppercase;letter-spacing:.07em;font-size:10.5px;
  padding:2px 8px;border:1px solid var(--rule);color:var(--muted)}
.mark.clears{color:var(--accent);border-color:var(--accent)}

/* ---- plain listing tables ----------------------------------------------- */
.grid{width:100%;border-collapse:collapse}
.grid th,.grid td{border-bottom:1px solid var(--rule);padding:9px 10px;text-align:right}
.grid th{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);font-weight:400;border-bottom:1px solid var(--rule-strong)}
.grid th:first-child,.grid td:first-child{text-align:left}
.grid td{font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums}
.grid td.name{font-family:var(--body);font-size:16px}
.grid tr.ours td{background:var(--accent-soft)}
.grid tr.ours td.name{font-weight:600}
.grid td.links a{margin-left:14px;font-family:var(--display);text-transform:uppercase;
  letter-spacing:.06em;font-size:11px}

/* A wide table scrolls in its own frame, never the page. */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.scroll .grid{min-width:560px}
.scroll .grid td.name,.scroll .grid th.l{text-align:left}
.grid td.name a{color:var(--ink);text-decoration-color:var(--rule)}
.grid td.name a:hover{color:var(--accent)}
.grid td.rank{color:var(--faint);width:2.5em}
.grid td.small,.grid th.small{font-size:12px}
.grid tr.sub td{border-bottom-style:dotted}

.lede select{font:inherit;color:var(--ink);background:transparent;border:0;
  border-bottom:1px solid var(--rule-strong);border-radius:0;padding:2px 0;max-width:100%}

/* ---- where a season ends up: one bar a place ---------------------------
   The Week page's own picture of a finish distribution. A row a place, the
   bar as wide as the chance, the place and the figure either side of it, so
   it reads down the page the way a list does rather than across it the way
   the Standings page's little bars do. */
.places{list-style:none;margin:8px 0 12px;padding:0;display:grid;gap:3px}
.places li{display:grid;grid-template-columns:2.2em 1fr 3.4em;align-items:center;gap:10px}
.places .p{font-family:var(--display);font-weight:600;font-size:15px;color:var(--muted);
  text-align:right}
.places .b{display:block;height:11px;background:var(--sunk)}
.places .b i{display:block;height:100%;background:var(--accent)}
.places .v{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;
  color:var(--muted)}
#rest-grid td.small.up{color:var(--good)} #rest-grid td.small.down{color:var(--stop)}
#rest-grid td.name .faint{font-family:var(--body)}
#rest-finish .who{font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;
  font-size:10.5px;color:var(--faint);margin:18px 0 0}
#rest-finish .why{margin:6px 0 0;color:var(--muted);font-size:15px}
#rest-finish .why b{color:var(--ink);font-weight:600}
#rest-finish .note{margin:4px 0 0;font-family:var(--mono);font-size:12px;color:var(--faint)}

/* ---- two views of one table, and the odds of each place -----------------
   The toggle is the house's small display face, the chosen one in the accent
   with a rule under it -- the same language the section links in the shell
   use, so "which view am I in" reads the same way everywhere. A sortable
   heading is a button that looks exactly like the heading it replaces.

   The seed odds are a row of little bars under the team's own row rather
   than fourteen more columns: fourteen columns is not a table anybody reads
   on a phone, and the shape of a distribution is the thing worth seeing. */
.views{display:flex;gap:0;margin:0 0 16px;border-bottom:1px solid var(--rule)}
.views button{font-family:var(--display);text-transform:uppercase;letter-spacing:.07em;
  font-size:11px;padding:7px 14px;background:none;border:0;border-bottom:2px solid transparent;
  color:var(--muted);cursor:pointer}
.views button:hover{color:var(--ink)}
.views button[aria-pressed="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.grid th button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;
  background:none;border:0;padding:0;cursor:pointer}
.grid th button:hover{color:var(--ink)}
.grid td.odds button.seeds{font:inherit;color:inherit;background:none;border:0;padding:0;
  cursor:pointer;border-bottom:1px dotted var(--rule-strong)}
.grid td.odds button.seeds:hover{color:var(--accent)}
.seeds-bar{display:flex;align-items:flex-end;gap:3px;padding:8px 0 2px;min-height:46px}
.seeds-bar .seed{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1 1 0;
  min-width:0}
.seeds-bar .seed i{display:block;width:100%;background:var(--shade-2)}
.seeds-bar .seed.in i{background:var(--accent)}
.seeds-bar .seed em{font-family:var(--mono);font-style:normal;font-size:10px;color:var(--faint)}
.grid tr.seedrow td{border-bottom:1px solid var(--rule);padding-top:0}
.grid tr.seedrow .note{margin:0 0 6px;font-family:var(--body);font-size:13px;color:var(--muted);
  text-align:left}

/* ---- the seasons row under a league page's masthead --------------------- */
.years{display:flex;flex-wrap:wrap;gap:4px 14px;margin:14px 0 0;padding:0;list-style:none;
  font-family:var(--mono);font-size:12px}
.years a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
.years a:hover{color:var(--ink)}
.years a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)}

/* ---- a matchup: two sides and their nine, a rule above it -------------- */
.matchup{border-top:1px solid var(--rule);padding:18px 0 10px}
.matchup:first-of-type{border-top:1px solid var(--rule-strong)}
.matchup.ours{border-left:2px solid var(--accent);padding-left:14px}
.matchup .score{display:flex;align-items:baseline;gap:10px 14px;flex-wrap:wrap}
.matchup .side{font-size:18px;font-weight:600;flex:1 1 14ch;min-width:0;overflow-wrap:anywhere}
.matchup .side.right{text-align:right}
.matchup .side.lead{color:var(--ink)} .matchup .side.trail{color:var(--muted);font-weight:400}
.matchup .tally{font-family:var(--display);font-weight:600;font-size:26px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.matchup .state{margin:4px 0 0;font-family:var(--mono);font-size:12px;color:var(--muted);
  letter-spacing:.02em}
.matchup .who{font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;
  font-size:10.5px;color:var(--faint);margin:12px 0 0}
.matchup .who .faint{text-transform:none;letter-spacing:0;font-family:var(--body);font-size:12px}
.matchup .strip{margin-top:4px}
.matchup .expect{margin:6px 0 0;font-family:var(--body);font-size:14px;color:var(--muted)}
.matchup .expect b{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.pager{display:flex;gap:18px;margin:14px 0 0;font-family:var(--display);text-transform:uppercase;
  letter-spacing:.07em;font-size:12px;flex-wrap:wrap}
.pager a{text-decoration:none}

/* ---- what changed: a day at a time, a rule over every line -------------
   The house has no boxes, so a line is a rule and three columns: when, what
   happened in words, and the one word that says which kind it is. A line
   about the reader's own team takes the accent rule the matchup does; his
   opponent's takes a plain one, so the two are told apart by where the rule
   is and not only by its colour. */
.dayhead{font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;font-size:11px;
  color:var(--faint);margin:26px 0 6px}
.feed{list-style:none;margin:0;padding:0}
.feed li{border-top:1px solid var(--rule);padding:9px 0;display:flex;gap:4px 14px;
  align-items:baseline;flex-wrap:wrap}
.feed li:first-child{border-top:1px solid var(--rule-strong)}
.feed .when{font-family:var(--mono);font-size:11.5px;color:var(--faint);white-space:nowrap;
  font-variant-numeric:tabular-nums}
/* `break-word` and not `anywhere`: a name in a sentence is a button, and
   `anywhere` let a line break between the button and the comma after it, so
   a clause began with a comma of its own. This breaks a word only when the
   word itself will not fit. */
.feed .what{flex:1 1 26ch;min-width:0;overflow-wrap:break-word;font-size:16px}
.feed .kind{font-family:var(--display);text-transform:uppercase;letter-spacing:.07em;
  font-size:10.5px;color:var(--muted);white-space:nowrap;margin-left:auto}
.feed li.ours{border-left:2px solid var(--accent);padding-left:12px}
.feed li.theirs{border-left:2px solid var(--rule-strong);padding-left:12px}
.feed li.urgent .kind{color:var(--stop)}
/* A name inside a sentence: the card's trigger, set in the body face so it
   reads as part of the line rather than as a control in it. */
.feed .pname.inline{font-weight:600;display:inline}
.filter{display:flex;gap:8px 10px;align-items:baseline;flex-wrap:wrap;margin:-8px 0 18px;
  font-size:15px}
.filter label{cursor:pointer;margin-right:8px}
.filter input{accent-color:var(--accent);cursor:pointer}

/* ---- a team's strip with its name, one per line ------------------------ */
.profile{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:0 18px;
  align-items:end;border-bottom:1px solid var(--rule);padding:10px 0}
.profile .who{font-weight:600;overflow-wrap:anywhere;padding-bottom:6px}
.profile.ours .who{color:var(--accent)}
.profile .strip{margin:0}

/* ---- the free pages' look at the reader's own team --------------------- */
.yours{border-left:2px solid var(--accent);padding:4px 0 4px 14px;margin-top:28px}
.yours h2{font-size:18px;text-transform:uppercase;letter-spacing:.04em}
.yours p{margin:6px 0 0;color:var(--muted);max-width:74ch}
.yours p b{color:var(--ink)}
.yours .strip{margin-top:12px}
.more{font-family:var(--display);text-transform:uppercase;letter-spacing:.07em;font-size:12px}

/* ---- the trade page: two sides, and the builder that names the deal -----
   Two columns on a wide screen, stacked on a phone, ours always first. Rules
   between them and nothing else: the house has no boxes. A gain and a loss
   are told apart by a sign and an arrow before they are told apart by
   colour, because a colour alone is no answer to a reader who cannot see it
   (docs/trades.md, "The page"). */
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.two > .side{border-top:1px solid var(--rule-strong);padding-top:12px;min-width:0}
.side h3{font-family:var(--display);font-size:17px;text-transform:uppercase;
  letter-spacing:.04em;overflow-wrap:anywhere}
.side .whose{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);margin:2px 0 0}
.side .hint{color:var(--muted);font-size:14px;margin:6px 0 0}
.roster{list-style:none;margin:10px 0 0;padding:0}
.roster li{border-bottom:1px solid var(--rule);display:flex;align-items:stretch}
.pick{display:flex;flex:1 1 auto;min-width:0;align-items:baseline;gap:8px;text-align:left;
  background:none;border:0;border-radius:0;padding:7px 4px;cursor:pointer;font-size:15px}
.pick:hover{background:var(--sunk)}
.pick[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent)}
.pick[aria-pressed="true"] .who::before{content:"\2713\00a0"}
.pick .who{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;font-weight:600}
.pick .meta{font-family:var(--mono);font-size:11px;color:var(--faint);white-space:nowrap}
.pick .meta.out{color:var(--stop)}
.deal{border-top:1px solid var(--rule-strong);margin-top:24px;padding-top:12px}
.deal p{margin:4px 0 0;font-size:16px}
.deal .none{color:var(--faint);font-style:italic}
.room{margin:12px 0 0;font-size:15px;color:var(--muted)}
.room select{font:inherit;color:var(--ink);background:transparent;border:0;
  border-bottom:1px solid var(--rule-strong);border-radius:0;padding:2px 0;max-width:100%}
.doing{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:22px 0 0}
.doing button[disabled]{opacity:.45;cursor:progress}
.doing .working{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted)}
/* Nine rows of six narrow columns, twice over, inside half a page: the one
   table in the house that sets its own size rather than taking the grid's. */
.nine td,.nine th{padding:7px 4px;font-size:12.5px}
.nine td.cat{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.04em}
.nine td.d.up{color:var(--good)} .nine td.d.down{color:var(--stop)}
.nine td.d.flat{color:var(--faint)}
.grid td.flag{font-family:var(--mono);font-size:11px;color:var(--warn)}
@media (max-width:860px){
  .two{grid-template-columns:1fr;gap:0}
  .two > .side{margin-top:28px}
}

/* ---- who fills the place a deal opens -----------------------------------
   The wire as a list of choices, best for this roster first, with "leave it
   open" at the top because that is what the report does when nobody is
   named. One row is a man: his name and his status, what he is worth to us
   in the accent's own ink, what he is, and his week in the nine. The list
   scrolls in its own frame, never the page. */
.wire{list-style:none;margin:12px 0 0;padding:0;max-height:440px;overflow-y:auto;
  border-top:1px solid var(--rule-strong)}
.wire li{border-bottom:1px solid var(--rule);display:flex;align-items:stretch}
.fill{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:2px 12px;align-items:baseline;text-align:left;background:none;border:0;border-radius:0;
  padding:9px 4px;cursor:pointer;font-size:15px}
.fill:hover{background:var(--sunk)}
.fill[aria-pressed="true"]{background:var(--accent-soft)}
.fill[aria-pressed="true"] .who::before{content:"\2713\00a0"}
.fill .who{font-weight:600;overflow-wrap:anywhere}
.fill .worth{font-family:var(--mono);font-size:15px;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.fill .worth.up{color:var(--good)} .fill .worth.down{color:var(--stop)}
/* The "leave it open" row's figure is in the league's lens and not in this
   roster's, so it is drawn as a different kind of number and its own row
   says which (docs/trades.md, "Filling the opened place"). */
.fill .worth.faint{color:var(--faint)}
.fill .meta{grid-column:1/-1;font-family:var(--mono);font-size:11px;color:var(--faint)}
/* The strip stays nine across in a row of this list at every width: it is
   there to be glanced at beside the name, and three rows of three would make
   a list of forty men unreadable on a phone. */
.fill .strip{grid-column:1/-1;margin:6px 0 2px;grid-template-columns:repeat(9,minmax(0,1fr));
  border-width:1px 0 1px 1px}
.fill .strip div{padding:3px 5px;border-bottom:0}
.fill .strip .lab{font-size:8.5px} .fill .strip b{font-size:11.5px}
.badge{font-family:var(--display);text-transform:uppercase;letter-spacing:.07em;
  font-size:10px;margin-left:8px;color:var(--muted);white-space:nowrap}
.badge.hurt{color:var(--stop)} .badge.waivers{color:var(--warn)}
/* The card's own control on a row that is already a button: a word in the
   mono face at the end of the row, never an icon in a circle. */
.info{align-self:stretch;background:none;border:0;border-left:1px solid var(--rule);
  border-radius:0;padding:0 10px;cursor:pointer;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.info:hover{color:var(--accent)}

/* ---- a player's card: a popover on a desktop, a sheet on a phone --------
   Drawn by shell.js on any name (`.pname`) and on any `.info` beside one.
   The house's rules: a rule round it, no radius and no shadow, the nine in
   the same strip every other screen draws. */
.pname{background:none;border:0;border-radius:0;padding:0;font:inherit;text-align:left;
  cursor:pointer;border-bottom:1px dotted var(--rule)}
.pname:hover{color:var(--accent);border-bottom-color:var(--accent)}
.pcard{position:fixed;z-index:40;width:320px;max-width:calc(100vw - 24px);
  background:var(--surface);color:var(--ink);border:1px solid var(--rule-strong);
  padding:12px 14px 14px;opacity:0;pointer-events:none;transition:opacity .08s}
.pcard.on{opacity:1}
.pcard.pinned{pointer-events:auto}
.pcard .cx{position:absolute;top:0;right:0;width:44px;height:44px;display:none;
  align-items:center;justify-content:center;background:none;border:0;border-left:1px solid
  var(--rule);border-bottom:1px solid var(--rule);color:var(--ink);font-size:22px;
  line-height:1;cursor:pointer;padding:0}
.pcard.pinned .cx{display:flex}
.pcard.pinned .cn{padding-right:46px}
.pcard .cn{font-family:var(--display);font-weight:600;font-size:20px;line-height:1.05;
  text-transform:uppercase;letter-spacing:.01em}
.pcard .cm{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:4px 0 10px}
.pcard .strip{margin:0 0 10px;grid-template-columns:repeat(9,minmax(0,1fr));
  border-width:1px 0 1px 1px}
.pcard .strip div{padding:3px 4px;border-bottom:0}
.pcard .strip .lab{font-size:8.5px;letter-spacing:.04em} .pcard .strip b{font-size:11.5px}
.pcard .facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 12px;margin:0;
  font-size:13.5px}
.pcard .facts dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);padding-top:3px;white-space:nowrap}
.pcard .facts dd{margin:0;font-variant-numeric:tabular-nums}
.pcard .flag{margin:10px 0 0;padding-top:8px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:11px;color:var(--warn)}
@media (max-width:700px){
  /* A thumb cannot hover and cannot reach the top of a tall screen: the card
     comes up along the bottom instead, full width, and stays until it is
     dismissed. The inline position the popover set is overridden outright. */
  .pcard{left:0 !important;right:0;top:auto !important;bottom:0;width:auto;
    max-width:none;border-width:2px 0 0;padding:14px 16px 26px;pointer-events:auto}
  .pcard .strip{grid-template-columns:repeat(9,minmax(0,1fr));border-width:1px 0 1px 1px}
  .pcard .strip div{border-bottom:0}
}

/* ---- the landing page ----------------------------------------------------
   The one page a stranger sees, in the same house style as everything behind
   the sign-in: rules, not boxes; one accent; the figures in the mono face
   with tabular numerals, because they are measurements and the reader should
   be able to line them up. Three claims side by side on a desk, stacked in
   order on a phone. */
.landing .mast h1{font-size:clamp(40px,8vw,88px)}
.landing .mast .sub.small{font-size:15px;margin-top:20px}
.landing section{margin-top:52px}
.landing .claims{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:8px 32px;margin-top:22px}
.landing .claims.two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.landing .claims > div{border-top:1px solid var(--rule-strong);padding:12px 0 0}
.landing .claims h3{font-family:var(--display);font-size:17px;text-transform:uppercase;
  letter-spacing:.04em;margin:0}
.landing .claims p{color:var(--muted);font-size:16px;margin:8px 0 0}
.landing .claims p b{color:var(--ink);font-weight:600}
/* The figure itself: the largest thing in its column, so the claim is read
   before the sentence explaining it. */
.landing .claims .fig{color:var(--accent);font-size:38px;line-height:1.1;font-weight:500;
  margin:10px 0 0;letter-spacing:-.01em}
.landing .claims .fig .against{color:var(--faint);font-size:20px;font-family:var(--body)}
.landing .claims .src{font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--faint);line-height:1.8;margin-top:12px}
/* The stance, which is a sentence and not a section: an accent rule down its
   left, like a reader's own matchup on the week page. */
.landing .stance{border-left:2px solid var(--accent);padding:6px 0 6px 16px;
  margin:44px 0 0;font-size:18px;max-width:72ch}
.landing .stance b{font-weight:600}
.cta{display:inline-block;margin-top:22px;font-family:var(--display);text-transform:uppercase;
  letter-spacing:.08em;font-size:14px;padding:10px 18px;background:var(--accent);
  color:var(--accent-ink);text-decoration:none;border:0}
.cta:hover{background:var(--ink);color:var(--ground)}

/* ---- the footnote ------------------------------------------------------- */
.foot{margin-top:64px;border-top:1px solid var(--rule);padding-top:14px;
  font-family:var(--mono);font-size:11px;color:var(--faint);line-height:1.9}
.foot b{color:var(--muted);font-weight:500}
.warnline{border-left:2px solid var(--stop);padding:8px 0 8px 12px;margin:14px 0;
  color:var(--stop);font-size:15px}

@media (max-width:860px){
  body{font-size:16px}
  .page{padding:0 16px 72px}
  .nav{padding:8px 16px 6px;gap:4px 16px}
  .brand{order:1} .nav-main > .menu{order:2} .nav .end{order:3;gap:12px}
  .sections{order:4;flex-basis:100%;gap:0 16px}
  .league-name{max-width:40vw}
  .profile{grid-template-columns:1fr}
  .profile .who{padding-bottom:4px}
  .matchup .side{font-size:16px}
  .mast{padding-top:26px}
  .strip{grid-template-columns:repeat(3,minmax(0,1fr));border-width:1px 0 0 1px}
  .strip div{border-bottom:1px solid var(--rule)}
  .days{grid-auto-flow:row;grid-auto-columns:auto;border-width:1px 0 0 1px}
  .days div{border-bottom:1px solid var(--rule)}
  .tape td.bar{display:none}
  .grid td.links a{display:block;margin:2px 0 0}
}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}