/* TELEMETRY — the design system.
   ==========================================================================
   Extracted from the player prototype before building anything else on it,
   because the alternative is ten screens that each drift a little further from
   the first one.

   TWO RULES CARRY THE WHOLE LOOK.

   1. Every color means exactly one thing. Cyan is ours -- the simulation, the
      projection, never a border or a heading. Green cleared the line, red
      missed it, amber IS the line. Everything else is grey. Nothing is
      colored to look nice, which is what separates an instrument from a
      dashboard.

   2. Type and space carry hierarchy, not boxes. Panels have one hairline and
      no fill of their own; the figures are large and tabular and the labels
      are small and quiet. When everything has a border, nothing has emphasis.

   RESPONSIVE BY CONTAINER, NOT BY VIEWPORT. `.wrap` is a container, so a
   screen laid out inside a 390px frame behaves exactly as it would on a phone
   -- which means the phone layout can be built and SEEN on a desktop instead
   of being written blind and hoped for. It also means a panel dropped into a
   narrow column adapts on its own.
   ========================================================================== */

:root{
  --bg:#05070A; --panel:#090D12; --panel2:#0A1117;
  --line:#141B23; --line2:#1D2733;
  /* MEASURED, NOT EYEBALLED. Contrast against the panel (#090D12):
       ink   16.7:1   the thing the row is about
       ink2   8.8:1   data you might actually read
       dim    4.6:1   labels and units, and only those
       faint  2.2:1   rules and separators, never text
     --dim was #5A6B7C at 3.55:1, under the 4.5:1 AA floor for normal text,
     and it was carrying DATA in eight screens rather than labels -- the same
     mistake as the My Model switcher, which Paul nearly missed entirely.
     The rule this encodes: dim is for the word next to a number, never for
     the number. */
  --ink:#E8EEF4; --ink2:#9FB0C0; --dim:#697D91; --faint:#3C4A58;

  --accent:#00E5FF;   /* ours */
  --over:#3DF5A0;     /* cleared it */
  --under:#FF4D6D;    /* missed it */
  --lineclr:#FFB020;  /* the number */
  --rival:#B98BFF;    /* the other man, when two are being compared */

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:22px; --s6:30px; --s7:44px;
  --r:3px;
  --fs-micro:9.5px; --fs-lab:10.5px; --fs-sm:12.5px; --fs-body:14px;
  --fs-lg:17px; --fs-fig:38px; --fs-h1:34px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);
  font:400 15px/1.5 ui-sans-serif,-apple-system,"SF Pro Text",Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;text-size-adjust:100%}
a{color:inherit}
.n{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* THE CONTAINER IS `body`, NOT `.wrap`. An element cannot query itself: if
   `.wrap` were the container then `@container screen { .wrap{...} }` would
   silently never apply, and the wrap kept its 22px desktop gutter at phone
   width while everything inside it went narrow. Putting the container one
   level up means the wrap's own padding responds like everything else. */
body{container-type:inline-size;container-name:screen}
.wrap{max-width:1180px;margin:0 auto;padding:var(--s5) var(--s5) 90px}

/* ---- chrome ------------------------------------------------------------- */
.topbar{display:flex;align-items:center;gap:var(--s3);padding-bottom:var(--s4);
  border-bottom:1px solid var(--line);margin-bottom:var(--s6)}
.mark{font-size:11px;letter-spacing:.22em;color:var(--dim);text-transform:uppercase}
.mark b{color:var(--accent);font-weight:600}
.spacer{flex:1}
.stamp{font-size:11px;letter-spacing:.08em;color:var(--dim)}

/* ---- panel: one hairline, no fill of its own ---------------------------- */
.panel{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  padding:var(--s4) var(--s4);margin-top:var(--s5)}
.panel > .t{font-size:var(--fs-lab);letter-spacing:.16em;color:var(--dim);
  text-transform:uppercase;margin-bottom:var(--s4)}
.panel > .t span{letter-spacing:.02em;text-transform:none;color:var(--dim)}

/* ---- a row of figures, hairline-separated ------------------------------- */
.figs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden}
.fig{background:var(--panel);padding:var(--s4)}
.fig .k{font-size:var(--fs-micro);letter-spacing:.16em;color:var(--dim);
  text-transform:uppercase}
.fig .v{font-size:var(--fs-fig);font-weight:600;line-height:1.05;margin-top:var(--s2);
  letter-spacing:-.02em}
.fig .s{font-size:11.5px;color:var(--dim);margin-top:var(--s1)}
.fig.ours{background:var(--panel2)}
.fig.ours .v{color:var(--accent)}

/* ---- pills -------------------------------------------------------------- */
.pills{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
/* One filter group -- its label and the pills that label describes. See
   setPills in telemetry.js: without this the outer wrap could break between a
   label and its own first pill, which it did, leaving SEASON alone at the end
   of one row and its five year pills at the start of the next. It still wraps
   internally, so a long row of week pills stays usable on a phone. */
.pillgrp{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.pills .lab{font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin-right:var(--s1)}
.pill{background:var(--panel);border:1px solid var(--line2);border-radius:99px;
  color:var(--ink2);font:inherit;font-size:var(--fs-sm);padding:6px 13px;cursor:pointer;
  transition:border-color .12s,color .12s,background .12s;white-space:nowrap}
.pill:hover{color:var(--ink);border-color:#2B3945}
.pill.on{background:#0D1B22;border-color:var(--accent);color:var(--accent)}

/* ---- segmented switcher ------------------------------------------------- */
.seg{display:flex;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;flex-wrap:wrap}
.seg button{flex:1 1 auto;min-width:112px;background:var(--panel);border:0;
  color:var(--ink2);font:inherit;font-size:var(--fs-sm);padding:11px 12px;cursor:pointer;
  display:flex;flex-direction:column;gap:3px;align-items:flex-start;
  transition:background .12s,color .12s}
.seg button:hover{background:#0C1219;color:var(--ink)}
.seg button.on{background:var(--panel2);color:var(--ink)}
.seg button.on .ln{color:var(--lineclr)}
.seg .lb{font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
/* WHEN THE LABEL IS THE WHOLE BUTTON IT IS NOT A LABEL, IT IS THE CONTROL.
   .lb is drawn dim and tiny because on the player page it sits above a large
   number and is captioning it. My Model's switcher has no number underneath,
   so every option rendered as dim micro-type and the control read as greyed
   out -- Paul nearly missed it entirely. An only child gets the button's own
   size and weight instead. */
.seg button > .lb:only-child{font-size:var(--fs-sm);letter-spacing:.01em;
  text-transform:none;color:var(--ink2)}
.seg button:hover > .lb:only-child{color:var(--ink)}
.seg button.on > .lb:only-child{color:var(--accent);font-weight:600}
.seg .ln{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}

/* ---- rank bars ---------------------------------------------------------- */
.mrow{display:grid;grid-template-columns:1fr 62px 1fr;align-items:center;gap:10px;
  padding:7px 0;border-bottom:1px solid var(--line)}
.mrow:last-child{border-bottom:0}
.mk{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);text-align:center}
.mside{display:flex;align-items:center;gap:var(--s2);font-size:13px}
.mside.r{justify-content:flex-end}
.mrank{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.mbar{height:4px;border-radius:2px;background:var(--line2);flex:1;overflow:hidden;
  position:relative;min-width:24px}
.mbar i{position:absolute;top:0;bottom:0;border-radius:2px}
.mside.r .mbar i{right:0}

/* ---- grid of small cells ------------------------------------------------ */
.cells{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
.cell{background:var(--panel);padding:11px 12px}
.cell .k{font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.cell .v{font-size:22px;font-weight:600;margin-top:5px;font-variant-numeric:tabular-nums}
.cell .s{font-size:10.5px;color:var(--dim);margin-top:2px;line-height:1.35}

/* ---- history bars ------------------------------------------------------- */
.hist{display:flex;align-items:flex-end;gap:3px;height:172px;position:relative;
  padding-top:18px;overflow-x:auto}
.hcol{flex:1 1 0;min-width:9px;display:flex;flex-direction:column;justify-content:flex-end;
  height:100%;position:relative}
.hcol i{display:block;border-radius:1px 1px 0 0;
  background:linear-gradient(180deg,#2B3C4A,#16212B);
  transition:height .45s cubic-bezier(.2,.8,.2,1)}
.hcol.o i{background:linear-gradient(180deg,var(--over),#14513A)}
.hcol.u i{background:linear-gradient(180deg,#5A1B29,var(--under))}
.hcol .hv{font-size:11px;font-weight:600;text-align:center;color:var(--ink2);
  padding-bottom:var(--s1);font-variant-numeric:tabular-nums}
.hcol .hx{font-style:normal;font-size:10px;text-align:center;color:var(--dim);
  padding-top:5px;letter-spacing:.04em}
.hcol .hx.away::before{content:"@";color:#46586A;margin-right:1px}
.hcol .hx.home{color:var(--ink2)}
.hcol:hover::after{content:attr(data-tip);position:absolute;bottom:100%;left:50%;
  transform:translateX(-50%);background:#0C131A;border:1px solid var(--line2);
  border-radius:var(--r);padding:5px 8px;font-size:11px;white-space:nowrap;
  color:var(--ink);z-index:5;pointer-events:none}
.histline{position:absolute;left:0;right:0;border-top:1px dashed var(--lineclr);opacity:.7}
.histline span{position:absolute;right:0;top:-16px;font-size:10px;color:var(--lineclr);
  letter-spacing:.08em}

/* ---- the density plot --------------------------------------------------- */
.plot{position:relative;margin-top:var(--s5);border:1px solid var(--line);
  border-radius:var(--r);background:var(--panel);overflow:hidden}
/* pan-y, NOT none. These charts are 300-380px tall and sit in the middle of
   the page, so `touch-action:none` meant a finger landing on one could not
   scroll past it -- the page simply stopped moving. pan-y lets the scroll
   through while a horizontal drag still reaches the canvas, which is the only
   direction any of them scrub in. */
.plot canvas{display:block;width:100%;height:300px;cursor:crosshair;
  touch-action:pan-y}
.plothead{display:flex;align-items:baseline;gap:var(--s3);padding:14px var(--s4) 0}
.plothead .t{font-size:12px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
.plothead .h{font-size:12.5px;color:var(--dim);margin-left:auto}
.readout{display:flex;align-items:center;gap:var(--s5);padding:11px var(--s4);
  border-top:1px solid var(--line);background:#070B0F;font-size:12.5px;color:var(--ink2)}
.readout b{color:var(--accent);font-weight:600}
.readout .hint{margin-left:auto;color:var(--dim);font-size:11.5px}

.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.two > .panel{margin-top:0}
.empty{padding:40px 16px;text-align:center;color:var(--dim);font-size:13.5px}

/* ==========================================================================
   NARROW. Keyed to the CONTAINER, so this is what a phone gets AND what any
   panel dropped into a narrow column gets.
   ========================================================================== */
@container screen (max-width:760px){
  .two{grid-template-columns:1fr}
  .figs{grid-auto-flow:row}
  /* A figure on a phone reads better as a line than as a stacked block: the
     label on the left, the number on the right, three of them in the height
     one used to take. */
  .fig{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
    padding:var(--s3) var(--s4)}
  .fig .k{flex:0 0 auto}
  .fig .v{font-size:27px;margin-top:0;order:3}
  .fig .s{display:none}
  .seg button{min-width:0;flex:1 0 33%}
  .plot canvas{height:230px}
  .readout{gap:var(--s3);flex-wrap:wrap;font-size:12px}
  .readout .hint{display:none}
  .mrow{grid-template-columns:1fr 54px 1fr;gap:var(--s2)}
  .mk{font-size:9.5px}
  .mrank{font-size:13px}
  .hist{height:150px}
  .panel{padding:var(--s3) var(--s3)}
  .wrap{padding:var(--s4) var(--s4) 80px}
}
@container screen (max-width:560px){
  .seg button{flex:1 0 50%}
  /* Labels under every bar stop being readable long before the bars do. */
  .hcol .hx{display:none}
  .hcol .hv{font-size:9.5px}
}

/* ---- narrow: the header and plot caption ------------------------------
   Two items pushed to opposite ends is a desktop idiom. At phone width the
   gap closes and they collide, so the secondary one drops to its own line
   under the primary rather than fighting it for the same row. */
@container screen (max-width:560px){
  .plothead{display:block}
  .plothead .h{display:block;margin-left:0;margin-top:4px}
  .topbar{flex-wrap:wrap;row-gap:2px}
  .topbar .stamp{flex-basis:100%}
  /* The spacer exists to push the stamp right on a wide row. Once the stamp
     has its own line the spacer would add an empty one, so it goes. */
  .topbar .spacer{display:none}
}

/* ======================================================================
   THE SHELL. Sidebar on a desk, bottom bar on a phone -- the same nav
   data rendered into whichever the container can carry, rather than a
   sidebar that collapses into a hamburger nobody opens.
   ====================================================================== */
.shell{display:grid;grid-template-columns:var(--navw,196px) 1fr;min-height:100vh}
.side{border-right:1px solid var(--line);background:var(--bg2);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side .logo{padding:var(--s5) var(--s4) var(--s4);font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink)}
.side .logo b{color:var(--accent);font-weight:700}
.navlist{display:flex;flex-direction:column;gap:1px;padding:0 var(--s2)}
.navlist button{display:flex;align-items:center;gap:var(--s3);width:100%;
  background:none;border:0;color:var(--ink2);font:inherit;font-size:13.5px;
  padding:9px 11px;border-radius:7px;cursor:pointer;text-align:left;
  transition:background .12s,color .12s}
.navlist button:hover{background:var(--panel);color:var(--ink)}
.navlist button.on{background:#0D1B22;color:var(--accent)}
.navlist .grp{font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);padding:var(--s4) 11px 5px}
.side .foot{margin-top:auto;padding:var(--s4);font-size:11px;color:var(--dim);
  border-top:1px solid var(--line)}
.pane{min-width:0}
.phead{display:flex;align-items:flex-start;gap:var(--s4);flex-wrap:wrap;
  margin-bottom:var(--s5)}
.phead h1{margin:0;font-size:var(--fs-h1);font-weight:650;letter-spacing:-.02em}
.phead .sub{margin:5px 0 0;font-size:13.5px;color:var(--ink2);max-width:62ch;line-height:1.5}
.backbtn{background:var(--panel);border:1px solid var(--line2);color:var(--ink2);
  border-radius:7px;width:32px;height:32px;cursor:pointer;font-size:15px;flex-shrink:0}
.backbtn:hover{color:var(--ink);border-color:#2B3945}
/* THE FOCUS RING, IN THIS SITE'S OWN COLOR.
   Keyboard focus was visible -- the browser's default ring was doing its job
   -- but that ring is #005FCC, and on a #060A0D background it is nearly the
   same value as the panel behind it. The accent reads at a glance on every
   surface here, which is the entire requirement for a focus ring.

   :focus-visible, not :focus, so a mouse click does not leave a ring behind
   on a dense board of clickable rows. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;
  border-radius:3px}
.brow:focus-visible,.gcard:focus-visible{outline-offset:-2px}

/* ---- the landing page --------------------------------------------------
   A page, not a dialog. The old one was position:fixed and centered, which is
   why it would not scroll and why the simulation was trapped in a box behind
   a card that covered it.

   The canvas is fixed to the viewport and everything scrolls over it, so the
   simulation runs the full height of the page while the content moves. */
.lp{position:relative;min-height:100vh;color:var(--ink)}
.lp #mcbg{position:fixed;inset:0;width:100vw;height:100vh;display:block;
  z-index:0;pointer-events:none;opacity:.85}
.lp > *:not(#mcbg){position:relative;z-index:1}

/* A wash over the middle of the page so the type never has to compete with a
   bright part of the curve. */
.lp::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(5,7,10,.97) 0%, rgba(5,7,10,.93) 46%, rgba(5,7,10,.55) 62%,
    rgba(5,7,10,.38) 78%, rgba(5,7,10,.72) 100%)}

.lphead{display:flex;align-items:center;justify-content:space-between;
  padding:var(--s4) var(--s5);position:sticky;top:0;z-index:3;
  backdrop-filter:blur(10px);background:#05070AD9;
  border-bottom:1px solid var(--line)}
.lpbrand{font-size:14px;letter-spacing:.2em;font-weight:600;color:var(--ink2)}
.lpbrand b{color:var(--lineclr)}

.hero{max-width:1100px;margin:0 auto;padding:var(--s7) var(--s5) var(--s6)}
.eyebrow{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin-bottom:var(--s4)}
.hero h1{font-size:clamp(30px,5.4vw,58px);line-height:1.06;
  letter-spacing:-.025em;margin:0 0 var(--s5);font-weight:700;max-width:16ch}
.hero h1 .gold{color:var(--lineclr);
  text-shadow:0 0 34px rgba(255,176,32,.28)}
.lede{color:var(--ink2);font-size:clamp(14px,1.5vw,17px);line-height:1.6;
  max-width:60ch;margin:0 0 var(--s6)}
.lede.sm{font-size:14px;margin-bottom:var(--s5)}

.ctas{display:flex;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4)}
.lpcta{display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:#04252B;border:1px solid var(--accent);
  border-radius:8px;font:inherit;font-size:15px;font-weight:600;
  padding:13px 26px;cursor:pointer;text-decoration:none;
  transition:filter .12s,transform .06s}
.lpcta:hover{filter:brightness(1.1)}
.lpcta:active{transform:translateY(1px)}
/* In the header it must not stretch: the header is a flex row, and without
   this the button grew to fill it. */
.lpcta.sm{font-size:13px;padding:8px 18px;flex:0 0 auto;white-space:nowrap}
.lpcta.ghost{background:transparent;color:var(--ink);
  border-color:var(--line2)}
.lpcta.ghost:hover{border-color:var(--accent);color:var(--accent);filter:none}
.fineprint{font-size:12.5px;color:var(--dim);margin:0;line-height:1.6}
.fineprint a{color:var(--accent);text-decoration:none;font-weight:600}
.fineprint a:hover{text-decoration:underline}

#trialform{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;
  margin-top:var(--s5)}
#trialform[hidden]{display:none}
#trialform input{flex:1;min-width:220px;background:var(--panel);
  border:1px solid var(--line2);border-radius:8px;color:var(--ink);
  font:inherit;font-size:15px;padding:12px 14px}
#trialform input:focus-visible{border-color:var(--accent)}
#trialform .fineprint{flex-basis:100%}

.band{max-width:1100px;margin:0 auto;padding:var(--s6) var(--s5);
  border-top:1px solid var(--line)}
.bandhead{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);margin-bottom:var(--s5)}

.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.feat{min-width:0}
.feat .fic{color:var(--accent);font-size:14px;margin-right:8px}
.feat b{font-size:15px;font-weight:600}
.feat i{display:block;font-style:normal;font-size:13.5px;color:var(--ink2);
  line-height:1.55;margin-top:6px}

.proof{display:none}
.proof.on{display:block}

/* The preview card. Styled as the app styles a player, because the point is
   to show somebody what they are about to be looking at. */
.pvcard{border:1px solid var(--line2);border-radius:var(--r);
  background:#080C11E6;overflow:hidden;max-width:620px}
.pvhead{display:flex;align-items:center;gap:var(--s3);
  padding:var(--s4);border-bottom:1px solid var(--line)}
.pvhead img{width:38px;height:38px;border-radius:50%;object-fit:cover;
  background:#0F161D}
.pvhead b{display:block;font-size:15px;font-weight:600}
.pvhead i{display:block;font-style:normal;font-size:12px;color:var(--dim);
  margin-top:2px}
.pvtable{width:100%;border-collapse:collapse;font-size:13px;
  font-variant-numeric:tabular-nums}
.pvtable th{text-align:right;font-size:var(--fs-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);font-weight:500;
  padding:9px var(--s3);border-bottom:1px solid var(--line)}
.pvtable th:first-child,.pvtable td:first-child{text-align:left}
.pvtable td{text-align:right;padding:10px var(--s3);color:var(--ink2);
  border-bottom:1px solid var(--line)}
.pvtable tr:last-child td{border-bottom:0}
.pvtable td:first-child{color:var(--ink);white-space:nowrap}
.pvtable td span{color:var(--dim)}

.landmsg{border:1px solid var(--line2);border-left:2px solid var(--accent);
  border-radius:var(--r2);padding:12px var(--s4);margin:0 0 var(--s5);
  font-size:13.5px;color:var(--ink2);line-height:1.5;max-width:60ch}
.landmsg.warn{border-left-color:var(--under);color:var(--under)}

.lpfoot{max-width:1100px;margin:0 auto;padding:var(--s6) var(--s5) var(--s7);
  border-top:1px solid var(--line);display:flex;gap:var(--s4);
  align-items:center;justify-content:space-between;flex-wrap:wrap;
  font-size:12.5px;color:var(--dim)}
.lpfoot a{color:var(--accent);text-decoration:none}
.lpfoot a:hover{text-decoration:underline}

@container screen (max-width:900px){
  .feats{grid-template-columns:repeat(2,1fr)}
}
@container screen (max-width:620px){
  .lphead{padding:var(--s3) var(--s4)}
  .lpbrand{font-size:12px;letter-spacing:.16em}
  .hero{padding:var(--s6) var(--s4) var(--s5)}
  .hero h1{max-width:none}
  .band,.lpfoot{padding-left:var(--s4);padding-right:var(--s4)}
  .feats{grid-template-columns:1fr;gap:var(--s4)}
  .ctas{flex-direction:column;align-items:stretch}
  /* NOT the header one. `.lpcta{width:100%}` here was also sizing the button
     in the sticky header, which is a flex row -- so it grew to 574px in a
     606px viewport and pushed off the right edge. */
  .ctas .lpcta{width:100%}
  .proofrow{gap:var(--s5)}
  .lp #mcbg{opacity:.4}
}

/* Sign out. Quiet on the sidebar -- it is not something anyone is looking
   for until they need it -- and a full-width row in the phone sheet, where
   everything else is one. */
.signout{display:block;width:100%;background:none;border:1px solid var(--line2);
  border-radius:var(--r2);color:var(--dim);font:inherit;font-size:12px;
  padding:7px 10px;margin-bottom:var(--s3);cursor:pointer;
  transition:color .12s,border-color .12s}
.signout:hover{color:var(--under);border-color:var(--under)}
.signout.wide{margin:var(--s3) 0 0;padding:11px var(--s3);font-size:13.5px;
  text-align:left}

.botnav{display:none}
/* Above the breakpoint the sidebar holds everything, so the More sheet must
   never appear. Declared HERE and not after the container query: a container
   query adds no specificity, so a display:none written later would simply beat
   the display:flex inside it and the sheet would never open at all. */
.morewrap{display:none}
.loading{color:var(--dim);font-size:13px;padding:var(--s6) 0}

@container screen (max-width:860px){
  /* The sidebar becomes a bottom bar: a phone thumb reaches the bottom of
     the screen, never the top left. */
  .shell{grid-template-columns:1fr}
  .side{display:none}
  .botnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:#060A0DF2;backdrop-filter:blur(12px);border-top:1px solid var(--line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .botnav button{flex:1;background:none;border:0;color:var(--dim);font:inherit;
    font-size:10.5px;letter-spacing:.04em;padding:6px 2px;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
  .botnav button.on{color:var(--accent)}
  .botnav .ic{font-size:15px;line-height:1}
  .phead h1{font-size:26px}

  /* THE OTHER EIGHT SCREENS. The sidebar is display:none here, so without
     this sheet Identity, Kickers, Matchups, Getting the Ball, Line Moves,
     Smart Money, My Model and Admin have no route on a phone at all.

     A sheet rather than a drawer: it rises from the bar the thumb just
     touched, which is the bottom of the screen, and every row carries the
     one-line description the sidebar does not have room for -- on a phone
     that line is the difference between a name and a reason to tap it. */
  .morewrap{position:fixed;inset:0;z-index:50;display:flex;
    flex-direction:column;justify-content:flex-end}
  .morewrap[hidden]{display:none}
  .moreback{position:absolute;inset:0;background:#02060980;
    backdrop-filter:blur(2px)}
  .moresheet{position:relative;background:var(--panel);
    border-top:1px solid var(--line2);border-radius:14px 14px 0 0;
    padding:var(--s4) var(--s3) calc(var(--s4) + 58px + env(safe-area-inset-bottom));
    max-height:76vh;overflow-y:auto;
    box-shadow:0 -18px 40px #0206094D;
    animation:moreup .16s ease-out}
  .moregrp{font-size:10px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--dim);padding:0 var(--s3) var(--s2)}
  .moresheet button{display:flex;align-items:flex-start;gap:12px;width:100%;
    background:none;border:0;color:var(--ink);font:inherit;text-align:left;
    padding:11px var(--s3);border-radius:9px;cursor:pointer}
  .moresheet button:hover,.moresheet button:focus-visible{background:var(--panel2,#0D1319)}
  .moresheet button.on{color:var(--accent)}
  .moresheet .ic{font-size:15px;line-height:1.35;width:18px;flex-shrink:0}
  .moresheet b{display:block;font-weight:600;font-size:14px}
  .moresheet i{display:block;font-style:normal;font-size:12px;color:var(--ink2);
    line-height:1.45;margin-top:2px}
  @keyframes moreup{from{transform:translateY(14px);opacity:0}
                    to{transform:translateY(0);opacity:1}}
  @media (prefers-reduced-motion:reduce){.moresheet{animation:none}}
}


/* ======================================================================
   THE BOARD. A ranked list of players is the shape of half this site --
   projections, TD watch, getting the ball, a team's roster -- so the row
   lives here and each screen supplies its own columns via --bcols.
   ====================================================================== */
/* ---- the board ----------------------------------------------------------
   Every row carries its own shape. Two men projecting 19.0 are not the same
   player -- one a narrow hump, one a long right tail -- and a single number
   with a bar behind it has never been able to say so. */
.board{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  margin-top:var(--s4)}
.bhead,.brow{display:grid;
  grid-template-columns:var(--bcols,34px 38px minmax(120px,1fr) 136px 78px 68px 68px);
  align-items:center;gap:var(--s3);padding:0 var(--s4)}
.bhead{height:34px;background:#070B0F;border-bottom:1px solid var(--line);
  font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.brow{height:58px;background:var(--panel);border-bottom:1px solid var(--line);
  cursor:pointer;transition:background .12s;text-decoration:none;color:inherit}
.brow:last-child{border-bottom:0}
.brow:hover{background:var(--panel2)}
/* A board's numeric cell. It is DATA -- percentages, pace, error, points --
   so it reads at ink2. It was dim, which is a label color, in eight screens
   at once. */
.brk{font-size:13px;color:var(--ink2);text-align:right;font-variant-numeric:tabular-nums}
.brow.lead .brk{color:var(--accent);font-size:15px;font-weight:600}
.bface{width:30px;height:30px;border-radius:50%;background:#0F161D;object-fit:cover}
.bname{min-width:0}
.bname b{display:block;font-size:14px;font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.bname span{font-size:11.5px;color:var(--ink2);opacity:.82}
.spark{display:block;width:136px;height:30px}
.bnum{text-align:right;font-variant-numeric:tabular-nums}
.bnum .v{font-size:19px;font-weight:600;color:var(--accent)}
.bnum .k{font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.bpct{text-align:right;font-variant-numeric:tabular-nums;font-size:14px}
.bpct .k{font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);display:block;margin-top:2px}
.showmore{display:block;width:100%;padding:14px;background:var(--panel);border:0;
  border-top:1px solid var(--line);color:var(--ink2);font:inherit;font-size:13.5px;
  cursor:pointer}
.showmore:hover{background:var(--panel2);color:var(--ink)}

@container screen (max-width:760px){
  /* A seven-column table does not become a phone layout by shrinking. It
     becomes two lines: who and what, then the shape and the number.

     THE PLACEMENTS HAVE TO BE DECLARED, NOT ASSUMED. These rules used to
     hard-code `.bname{grid-column:3}` and `.bnum{grid-column:4}`, which is
     true of exactly two of the seven boards on the site. Everywhere else the
     name was dragged into a cell it does not occupy and the numbers flowed
     around it, so on a phone EVERY list rendered its columns out of order --
     measured: the visual order differed from the DOM order on all five boards
     checked, including the projections board, which is the front page.

     Worse where a board has more cells than the narrow template has columns:
     `.brk{grid-row:1}` forced them all onto one row, so grid invented implicit
     columns to fit them. The admin job board declared three columns and got
     five, 11px wide, with the last row clipped by the board's own overflow.

     So: each board says where its name sits and where its numbers go, and a
     board with a handful of numbers puts them on the second line instead of
     pretending they fit beside the name. */
  .bhead{display:none}
  .brow{grid-template-columns:var(--bcols-narrow,26px 34px 1fr auto);
    grid-template-rows:auto auto;
    height:auto;padding:var(--s3) var(--s3);gap:var(--s2) var(--s3);row-gap:var(--s2)}
  .brk{grid-row:var(--brk-row,1);align-self:center}
  .bface,.glogo{grid-row:1}
  .bname{grid-row:1;grid-column:var(--bname-col,3)/var(--bname-end,auto)}
  .bnum{grid-row:1;grid-column:var(--bnum-col,4)}
  /* STOP BEFORE THE NUMBER, do not run under it. These used to span 1/4,
     which is where the percentage sits; widening them to 1/-1 drew the curve
     straight through "75% 20+ PTS". The strip shares its row with that
     figure, so it ends where the figure begins.
     The identity bar is the exception: its figures are on the line below, so
     nothing shares row two with it. */
  .spark,.fstrip,.slope{grid-row:2;grid-column:1/var(--bnum-col,4);width:100%}
  .ibar{grid-row:2;grid-column:1/-1;width:100%}
  .brow{grid-template-rows:auto auto auto}
  .spark{height:26px}
  .bpct{grid-row:2;grid-column:var(--bnum-col,4);font-size:12.5px;align-self:center}
  .bpct.quiet{display:none}

  /* Name first, numbers on their own line. A row of five figures does not fit
     beside a name on a phone, and shrinking them to 11px is not fitting. */
  .board.job{--bcols-narrow:repeat(4,1fr);--bname-col:1;--bname-end:-1;--brk-row:2}
  .board.rec{--bcols-narrow:repeat(5,1fr);--bname-col:1;--bname-end:-1;--brk-row:2}
  .board.tr{--bcols-narrow:repeat(5,1fr);--bname-col:1;--bname-end:-1;--brk-row:2}
  /* ENOUGH COLUMNS FOR THE SECOND LINE, not just the first. Two declared
     columns and five figures on row two means grid invents three more, and
     they came out 28px, 16px and 28px wide -- present, and unreadable. The
     template has to fit the widest row, which is the figures, not the name. */
  .board.kick{--bcols-narrow:34px repeat(4,1fr);--bname-col:2;--bname-end:-1;
    --brk-row:2}
  /* Identity carries a bar as well, so it gets three lines: who, the bar,
     then the figures. */
  .board.ident{--bcols-narrow:30px repeat(4,1fr);--bname-col:2;--bname-end:-1;
    --brk-row:3}
  /* A board whose numbers DO fit beside the name keeps them there. */
  .board.thin,.board.lm,.board.bd{--bname-col:2;--bnum-col:3}

  /* Row two is a strip of figures, so space them out rather than leaving them
     right-aligned against columns they no longer have. */
  .board.job .brk,.board.rec .brk,.board.tr .brk,
  .board.kick .brk,.board.ident .brk{text-align:left}
}


/* ---- start / sit -------------------------------------------------------- */
.picker{display:flex;align-items:flex-end;gap:var(--s4);margin-bottom:var(--s5)}
.pslot{flex:1;min-width:0;position:relative}
.pslot .lab{display:block;font-size:var(--fs-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);margin-bottom:5px}
.psearch{width:100%;background:var(--panel);border:1px solid var(--line2);
  border-radius:var(--r2);color:var(--ink);font:inherit;font-size:14px;padding:9px 12px}
.psearch:focus{outline:none;border-color:var(--accent)}
.pvs{color:var(--dim);font-size:13px;padding-bottom:10px}
.presults{position:absolute;z-index:20;left:0;right:0;top:100%;margin-top:4px;
  background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r2);
  overflow:hidden;box-shadow:0 12px 30px #000A}
.presults button{display:flex;justify-content:space-between;gap:var(--s3);width:100%;
  background:none;border:0;color:var(--ink);font:inherit;font-size:13.5px;
  padding:9px 12px;cursor:pointer;text-align:left}
.presults button:hover{background:#16212B}
.presults span{color:var(--dim);font-size:12px;white-space:nowrap}

.verdict{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s5);margin-bottom:var(--s5)}
.vface{width:56px;height:56px;border-radius:50%;background:#0F161D;object-fit:cover;
  border:1px solid var(--line2);flex-shrink:0}
.vtext{flex:1;min-width:180px}
.vbig{font-size:21px;font-weight:600;letter-spacing:-.01em}
.vbig b{color:var(--accent);font-weight:700}
.vsub{font-size:13.5px;color:var(--ink2);margin-top:4px;line-height:1.5}
.vsub b{color:var(--ink);font-variant-numeric:tabular-nums}
.vbar{display:flex;width:100%;height:7px;border-radius:99px;overflow:hidden;
  background:var(--line)}
.vbar span{display:block;height:100%}
.sw{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px;
  vertical-align:baseline}

@container screen (max-width:760px){
  .picker{flex-direction:column;align-items:stretch;gap:var(--s3)}
  .pvs{display:none}
  .verdict{padding:var(--s4)}
  .vbig{font-size:18px}
}

/* A settled row: the game is over, so the row stops competing for attention
   without disappearing. Dimmed, not hidden -- what we said before kickoff is
   the record, and a record nobody can find is not a record. */
.brow.done{opacity:.5}
.brow.done .bnum .v{color:var(--ink2)}
.fin{font-style:normal;color:var(--lineclr);letter-spacing:.08em;
  text-transform:uppercase;font-size:9.5px}

/* ---- games -------------------------------------------------------------- */
.gsec{margin-bottom:var(--s6)}
.gsechead{font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin-bottom:var(--s3)}
/* A count in a heading needs to look like a count. It inherits the heading's
   own uppercase micro styling otherwise, so the number ran straight on from
   the words: "THEY RUN MORE THAN THE SITUATION ASKS 12". */
.gsechead .hint::before{content:"·";margin:0 6px 0 2px;opacity:.55}
.gsechead .hint{color:var(--ink2)}
.gcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:var(--s3)}
.gcard{display:block;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:var(--s4);text-decoration:none;color:inherit;
  transition:border-color .12s,background .12s}
.gcard:hover{background:var(--panel2);border-color:var(--line2)}
.gcard.done{opacity:.55}
.gtop{display:flex;justify-content:space-between;gap:var(--s3);
  font-size:11px;color:var(--dim);margin-bottom:var(--s3)}
.gwhen b{font-style:normal}
.gvenue{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:55%}
.gside{display:flex;align-items:center;gap:var(--s3);padding:5px 0}
.glogo{width:26px;height:26px;object-fit:contain;flex-shrink:0}
.glogo.sm{width:18px;height:18px;vertical-align:-3px;margin-right:4px}
.gteam{flex:1;min-width:0}
.gteam b{display:block;font-size:14.5px;font-weight:600}
.gteam i{display:block;font-style:normal;font-size:11.5px;color:var(--ink2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gimp{font-variant-numeric:tabular-nums;font-size:17px;color:var(--ink2)}
.gimp.fav{color:var(--accent);font-weight:600}
.gimp i{font-style:normal;font-size:10px;color:var(--dim);margin-left:2px}
.gscore{font-variant-numeric:tabular-nums;font-size:19px;font-weight:600}
.gnums{display:flex;gap:var(--s3);margin-top:var(--s3);padding-top:var(--s3);
  border-top:1px solid var(--line)}
.gnums span{flex:1;min-width:0}
.gnums b{display:block;font-size:12.5px;font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gnums i{font-style:normal;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim)}
.ok{color:var(--over)} .warn{color:var(--lineclr)} .bad{color:var(--under)}

.rrow{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:7px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.rrow:last-of-type{border-bottom:0}
.rrow:hover .rname{color:var(--accent)}
.rname{font-size:13.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.rname i{font-style:normal;color:var(--dim);font-size:11px;margin-left:6px}
.rnum{font-size:14.5px;font-weight:600}
.rinj{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s3);padding-top:var(--s3);
  border-top:1px solid var(--line)}
.rinj span{font-size:11.5px;background:var(--bg2);border:1px solid var(--line2);
  border-radius:99px;padding:3px 9px}
.rinj i{font-style:normal;color:var(--dim);margin-left:4px}

@container screen (max-width:560px){
  .gcards{grid-template-columns:1fr}
}

/* ---- players ------------------------------------------------------------ */
.psolo{position:relative;margin-bottom:var(--s5);max-width:420px}
.psolo .presults a{display:flex;justify-content:space-between;gap:var(--s3);
  padding:9px 12px;text-decoration:none;color:inherit;font-size:13.5px}
.psolo .presults a:hover{background:#16212B}
.psolo .presults span{color:var(--dim);font-size:12px;white-space:nowrap}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:var(--s2)}
/* The gap and the side padding were both --s3, which left 76px for a label
   needing 85 -- so the longest team name in the league came out as
   "Comman...". Nothing else on the card wanted that space. */
.tcard{display:flex;align-items:center;gap:var(--s2);padding:10px var(--s2);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);
  text-decoration:none;color:inherit;transition:border-color .12s,background .12s}
.tcard:hover{background:var(--panel2);border-color:var(--tc)}
.tcard img{width:24px;height:24px;object-fit:contain;flex-shrink:0}
.tcard span{font-size:13.5px;font-weight:500;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.board.thin{--bcols:38px minmax(120px,1fr) 92px}
.brow.thin{height:50px}
@container screen (max-width:760px){
  .board.thin{--bcols-narrow:34px 1fr auto}
  .brow.thin{grid-template-rows:auto}
  .brow.thin .bname{grid-column:2}
  .brow.thin .bnum{grid-column:3}
}

/* The page heading can carry a face when the screen is about one person. */
.phface{width:46px;height:46px;border-radius:50%;background:var(--panel);
  border:1px solid var(--line2);object-fit:cover;flex-shrink:0}
@container screen (max-width:760px){ .phface{width:38px;height:38px} }

/* ---- td watch: the field strip ----------------------------------------
   Nested, not stacked. Each segment is drawn over the one before it from the
   same left edge, because a goal-line touch IS a red-zone touch and putting
   them side by side would double-count the same carry. */
.board.td{--bcols:34px 38px minmax(120px,1fr) 150px 74px 76px 68px}
.fstrip{position:relative;display:block;height:26px}
.fstrip i{position:absolute;left:0;top:3px;height:12px;border-radius:2px}
.fstrip .rz{background:#1D3B4A}
.fstrip .gz{background:#1F6E7E}
.fstrip .gl{background:var(--over)}
.fstrip b{position:absolute;left:0;bottom:-2px;font-size:10.5px;font-weight:500;
  color:var(--ink2);font-variant-numeric:tabular-nums}
.fstrip em{font-style:normal;color:var(--dim);margin-left:3px;font-size:9.5px;
  letter-spacing:.08em;text-transform:uppercase}
.fin.scored{color:var(--over)}
@container screen (max-width:760px){
  .board.td{--bcols-narrow:26px 34px 1fr auto}
  .brow.td .fstrip{grid-row:2;grid-column:1/4;width:100%}
  .brow.td .bpct.quiet{display:none}
}

/* ---- matchups heat grid ------------------------------------------------- */
/* SIZED TO ITS CONTENT, not stretched to the page. The team column was 1fr,
   which is fine at four positions and absurd at two: rushing yards has only a
   QB and an RB column, and the name column swallowed nine hundred pixels so
   the numbers sat alone at the far right of the screen. */
/* CAPPED BY ITS COLUMN COUNT, not stretched to the page and not shrunk to its
   minimums. The team column is 1fr, which is right at four positions and
   absurd at two -- rushing yards has only a QB and an RB column, and 1fr
   swallowed nine hundred pixels so the numbers sat alone at the far right.
   `width:fit-content` fixed that and broke the other way, collapsing every
   track to its minimum. Capping the whole grid lets the name column take the
   slack inside a width that suits however many columns there are. */
.hgrid{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  max-width:calc(320px + var(--hcols,4) * 96px)}
.hhead,.hrow{display:grid;
  grid-template-columns:minmax(150px,1fr) repeat(var(--hcols,4),minmax(74px,96px));
  align-items:stretch}
.hhead{height:32px;background:#070B0F;border-bottom:1px solid var(--line);
  font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.hhead span{display:flex;align-items:center;justify-content:center}
.hhead span:first-child{justify-content:flex-start;padding-left:var(--s4)}
.hrow{border-bottom:1px solid var(--line);background:var(--panel)}
.hrow:last-child{border-bottom:0}
.hteam{display:flex;align-items:center;gap:8px;padding:0 var(--s4);font-size:13.5px;
  min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hteam img{width:19px;height:19px;object-fit:contain;flex-shrink:0}
.hteam b{font-weight:500}
/* The nickname on a desk, the abbreviation on a phone. Truncating "Buccaneers"
   to "Buccaneer" costs a character and gains nothing; "TB" is complete. */
.tabbr{display:none}
.hcell{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;padding:7px 2px;border-left:1px solid var(--line);
  font-variant-numeric:tabular-nums}
.hcell b{font-size:13px;font-weight:600}
.hcell i{font-style:normal;font-size:10px;color:var(--dim)}
.hcell.empty{color:var(--dim)}
.hkey{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:var(--s3);
  font-size:11.5px;color:var(--ink2)}
.hsw{display:inline-block;width:22px;height:11px;border-radius:2px;
  border:1px solid var(--line2)}
.hkey .hint{margin-left:auto}
@container screen (max-width:760px){
  .hgrid{max-width:100%}
  .hhead,.hrow{grid-template-columns:minmax(78px,1fr) repeat(var(--hcols,4),1fr)}
  .hteam{font-size:12.5px;padding:0 var(--s3)}
  .hteam img{width:16px;height:16px}
  .tnick{display:none} .tabbr{display:inline}
  .hcell i{display:none}
  .hkey .hint{margin-left:0;flex-basis:100%}
}

/* ---- TEAM LOGOS NEED A BACKING ON A DARK PANEL -------------------------
   Not a loading bug, which is what it looks like: every logo fetches fine and
   then disappears. Most NFL marks are dark on transparent -- Ravens, Raiders,
   Steelers, Saints, Jets -- so on a near-black panel there is nothing to see.
   Only the bright ones, Bengals orange and Jaguars gold, came through, which
   is exactly the "some of the logos don't show up" pattern.

   NO SINGLE PLATE COLOR WORKS, which is the part that makes this fiddly.
   ESPN ships some marks drawn for light backgrounds and some drawn for dark
   ones. On the near-black panel the Packers, Saints and Chargers vanished
   because those are black. Put a white plate behind them and those three
   appear -- and the Colts, Texans and Saints vanish instead, because THEIR
   marks are white.

   So: a light plate for the dark marks, plus a thin dark halo for the light
   ones. The halo is invisible against a dark mark and gives a white mark the
   edge it needs, so both kinds read on the same chip. */
.glogo,.hteam img,.tcard img{
  background:rgba(240,246,252,.93);
  border-radius:50%;
  padding:2px;
  filter:drop-shadow(0 0 .6px rgba(0,0,0,.75)) drop-shadow(0 0 .6px rgba(0,0,0,.55));
}

/* ---- line moves: the slope ---------------------------------------------- */
.board.lm{--bcols:38px minmax(130px,1fr) 190px 84px 92px}
.slope{position:relative;display:block;height:30px}
.slope .track{position:absolute;left:0;right:0;top:14px;height:1px;
  background:var(--line2)}
.slope .seg{position:absolute;top:12px;height:5px;border-radius:3px}
.slope .seg.up{background:var(--over)}
.slope .seg.dn{background:var(--under)}
.slope b{position:absolute;top:22px;font-size:10.5px;font-weight:500;
  color:var(--dim);font-variant-numeric:tabular-nums}
.slope .o{left:0}
.slope .c{right:0}
@container screen (max-width:760px){
  .board.lm{--bcols-narrow:34px 1fr auto}
  .brow.lm .slope{grid-row:2;grid-column:1/4;width:100%}
  .brow.lm .bpct{grid-row:2;grid-column:4}
}

/* ---- smart money -------------------------------------------------------- */
.mcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(282px,1fr));
  gap:var(--s3)}
.mcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s4)}
.mcard.hot{border-color:#2A4A3C;background:linear-gradient(180deg,#0C1A16,var(--panel))}
.mtop{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);
  margin-bottom:var(--s3)}
.mwho{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.mven{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
  border:1px solid var(--line2);border-radius:99px;padding:2px 7px;flex-shrink:0}
.mmult{font-size:30px;font-weight:650;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1}
.mmult.hot{color:var(--over)}
.mmult i{display:block;font-style:normal;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);margin-top:3px;font-weight:400}
.mpick{margin:var(--s3) 0;font-size:14px;line-height:1.35}
.mpick span{display:block;font-size:11.5px;color:var(--dim);margin-top:2px}
.mfacts{display:flex;gap:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}
.mfacts span{flex:1;min-width:0}
.mfacts b{display:block;font-size:13.5px;font-variant-numeric:tabular-nums}
.mfacts i{font-style:normal;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim)}
.mrec{margin-top:var(--s3);font-size:11.5px;color:var(--dim);line-height:1.45}
.board.tr{--bcols:minmax(130px,1fr) 78px 62px 72px 76px 56px}
.brow.tr{height:52px;cursor:default}
@container screen (max-width:760px){
  .mcards{grid-template-columns:1fr}
  /* Columns and rows are set centrally now -- see the narrow board block. */
}

/* ---- model builder ------------------------------------------------------ */
.two.build{grid-template-columns:320px 1fr;align-items:start}
.kgroup{margin-bottom:var(--s5)}
.kgroup:last-child{margin-bottom:0}
.kgroup .hint{margin:-2px 0 var(--s3);line-height:1.45}
.knob{display:block;margin-bottom:var(--s4)}
.kl{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);
  font-size:13px;margin-bottom:5px}
.kl b{color:var(--accent);font-weight:600}
.knob input[type=range]{width:100%;appearance:none;height:3px;border-radius:2px;
  background:var(--line2);outline:none}
.knob input[type=range]::-webkit-slider-thumb{appearance:none;width:15px;height:15px;
  border-radius:50%;background:var(--accent);cursor:pointer;
  box-shadow:0 0 0 4px rgba(0,229,255,.14)}
.knob input[type=range]::-moz-range-thumb{width:15px;height:15px;border:0;
  border-radius:50%;background:var(--accent);cursor:pointer}
.kh{display:block;font-size:11px;color:var(--dim);margin-top:5px;line-height:1.4}
.pill.wide{width:100%;margin-top:var(--s3)}
.board.bd{--bcols:38px minmax(110px,1fr) 72px 72px 74px}
.brow.bd{height:52px}
.brow.bd .ours{color:var(--ink2)}
.brow.bd .yours{color:var(--ink)}
.brow.bd .yours.moved{color:var(--accent);font-weight:600}
.brow.bd .up{color:var(--over)} .brow.bd .dn{color:var(--under)}
@container screen (max-width:860px){
  .two.build{grid-template-columns:1fr}
}
@container screen (max-width:760px){
  .board.bd{--bcols-narrow:34px 1fr auto}
  .brow.bd{grid-template-rows:auto}
  .brow.bd .ours{display:none}
}

/* ---- admin -------------------------------------------------------------- */
.panel.alarm{border-color:var(--under)}
.alarmline{margin-top:var(--s3);padding:9px 12px;border-radius:var(--r2);
  background:rgba(255,77,109,.10);border:1px solid rgba(255,77,109,.35);
  color:var(--under);font-size:13px;line-height:1.45}
.board.job{--bcols:minmax(150px,1fr) 88px 84px 74px 84px}
.brow.job{height:46px;cursor:default}
.board.rec{--bcols:minmax(110px,1fr) 78px 74px 92px 82px 94px}
.brow.rec{height:46px;cursor:default}
.brow.job .ok{color:var(--over)} .brow.job .bad{color:var(--under)}
@container screen (max-width:760px){
  /* Columns and rows are set centrally now -- see the narrow board block.
     The job row keeps its fixed height off, because the name and the figures
     are on two lines here rather than one. */
  .brow.job,.brow.rec{height:auto}
}

/* ---- lineups ------------------------------------------------------------ */
.two.slips{align-items:start}
.slips .rrow{gap:var(--s2)}
.xbtn{background:none;border:0;color:var(--dim);font:inherit;font-size:17px;
  line-height:1;cursor:pointer;padding:0 2px;flex-shrink:0}
.xbtn:hover{color:var(--under)}
.slips .pslot .presults button{width:100%}
.pill.tiny{padding:3px 9px;font-size:12px;flex-shrink:0}
#saves .rrow{gap:var(--s2)}
.board.kick{--bcols:38px minmax(130px,1fr) 66px 66px 74px 58px 70px}
.brow.kick{height:52px;cursor:default}
@container screen (max-width:760px){
  .brow.kick{height:auto}
}

/* ---- a played game: the box score, with every number graded ------------- */
.board.bx{--bcols:38px minmax(130px,1fr) minmax(180px,2fr) 64px 46px 64px}
.brow.bx{height:auto;min-height:54px;padding-top:8px;padding-bottom:8px;
  align-items:center}
.props{display:flex;flex-wrap:wrap;gap:4px}
.prop{font-style:normal;font-size:10.5px;border-radius:99px;padding:2px 8px;
  white-space:nowrap;border:1px solid transparent}
.prop.over{background:rgba(61,245,160,.12);border-color:rgba(61,245,160,.4);
  color:var(--over)}
.prop.under{background:rgba(255,77,109,.10);border-color:rgba(255,77,109,.35);
  color:var(--under)}
.prop.push{background:var(--panel2);border-color:var(--line2);color:var(--ink2)}
.prop.none{color:var(--dim)}
@container screen (max-width:760px){
  .board.bx{--bcols-narrow:34px 1fr auto;--bname-col:2;--bnum-col:3}
  .brow.bx .props{grid-row:2;grid-column:1/-1}
  .brow.bx .brk:nth-of-type(2){display:none}
}

/* ---- team identity -----------------------------------------------------
   A diverging bar with NO green and NO red. Running more is not worse than
   throwing more, and every color here means exactly one thing -- green is an
   outcome you wanted. Direction from the center carries the meaning instead,
   and the two sides differ only in weight so neither reads as the good one. */
/* Eight columns now: the goal-line run share was dropped from the row. It is
   a real number and it was answering a question nobody was asking here. */
.board.ident{--bcols:34px minmax(110px,1fr) minmax(120px,1.4fr) 82px 92px 58px 56px 76px}
.brow.ident{height:50px;cursor:default}
.ibar{position:relative;display:block;height:20px}
.ibar .mid{position:absolute;left:50%;top:1px;bottom:1px;width:1px;
  background:var(--line2)}
.ibar .fill{position:absolute;top:5px;height:10px;border-radius:2px}
.ibar .fill.pass{background:#2E5E73}
.ibar .fill.run{background:#5A4A6B}
@container screen (max-width:760px){
  .brow.ident{height:auto}
  /* These used to be hidden -- there was nowhere to put them beside the
     name. There is a second line now, so a team's identity can show all of
     it on a phone rather than the first two numbers of it. */
}

/* ---- identity strip on a game ------------------------------------------ */
.idhead{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;
  gap:var(--s3);padding-bottom:var(--s3);border-bottom:1px solid var(--line);
  margin-bottom:var(--s2)}
.idhead span:first-child{font-size:14.5px;font-weight:600}
.idhead span:last-child{font-size:14.5px;font-weight:600;text-align:right}
.idrow{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;
  gap:var(--s3);padding:5px 0}
.idrow .v{font-size:15px}
.idrow .v:last-child{text-align:right}
.idrow .k{font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);white-space:nowrap}
@container screen (max-width:560px){
  .idrow .k{font-size:9.5px;letter-spacing:.04em}
  .idhead .hint{display:none}
}

/* ---- smart money, rewritten to be read ---------------------------------- */
.lede{font-size:14.5px;line-height:1.6;color:var(--ink2);max-width:70ch;
  margin:0 0 var(--s6);padding-left:var(--s4);border-left:2px solid var(--line2)}
.lede b{color:var(--ink)}
.msay{margin:0 0 var(--s3);font-size:14.5px;line-height:1.5;color:var(--ink2)}
.msay b{color:var(--ink);font-weight:600}
.flowrow{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:var(--s4);margin-bottom:var(--s3)}
.fltop{display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--s3);margin-bottom:var(--s3);flex-wrap:wrap}
.flgame{font-size:14.5px;font-weight:600}
.flsum{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.flbar{display:flex;height:9px;border-radius:99px;overflow:hidden;
  background:var(--line);gap:1px}
.flbar span{display:block;height:100%}
.flbar .a{background:var(--accent)}
.flbar .b{background:var(--rival)}
.fllegend{display:flex;gap:var(--s4);margin-top:7px;font-size:11.5px;
  color:var(--ink2);flex-wrap:wrap;font-variant-numeric:tabular-nums}
.sw.a{background:var(--accent)} .sw.b{background:var(--rival)}
.mgame{font-size:12px;color:var(--ink2);margin:-4px 0 var(--s3);
  padding-bottom:var(--s3);border-bottom:1px solid var(--line)}

/* ---- availability override, on the admin screen ------------------------- */
/* A row of controls that has to stay usable on a phone, because the moment
   somebody needs to rule a player out is rarely the moment they are at a
   desk. Wraps rather than scrolls. */
.avrow{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.avrow input{
  flex:1 1 150px;min-width:0;height:34px;padding:0 10px;
  background:var(--panel2,#0D1319);color:var(--ink);
  border:1px solid var(--line,#1C2630);border-radius:var(--r2,6px);
  font:inherit;font-size:var(--fs-sm);
}
.avrow input[type=number]{flex:0 0 110px}
.avrow input:focus{outline:none;border-color:var(--accent)}
.avmatch{display:flex;gap:6px;flex-wrap:wrap;margin-top:var(--s2)}
/* The chosen match is the one thing on this panel that must be unmistakable:
   ruling out the wrong player is worse than not ruling anyone out. */
.avmatch .pick.on{border-color:var(--accent);color:var(--accent)}
.board.av{--bcols:minmax(150px,1fr) 70px 90px 1fr 70px}
.brow.av{height:46px;cursor:default}
@container screen (max-width:700px){
  .board.av{--bcols:minmax(120px,1fr) 58px 76px 64px}
  .board.av .bhead span:nth-child(4),
  .brow.av span:nth-child(4){display:none}   /* reason folds away first */
}

/* ---- kickers and identity: a claim per card, evidence underneath ---------
   Both screens used to be a wall of columns that neither of us could read. The
   card carries the sentence and the numbers sit under it, the same shape the
   Smart Money screen settled on for the same reason. */
.kcards,.icards{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:var(--s3);
}
.kcard,.icard{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:var(--s4);
}
/* The tint says which way to read it and nothing else: a hot kicker is not
   good news, he is a number that is about to come down. */
.kcard.fade{border-color:#4A2A33;background:linear-gradient(180deg,#1A0E12,var(--panel))}
.kcard.back{border-color:#2A4A3C;background:linear-gradient(180deg,#0C1A16,var(--panel))}
.kpill{
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;border:1px solid var(--line);
  color:var(--ink2);margin-left:var(--s2);vertical-align:2px;
}
.kpill.fade{color:var(--under);border-color:#4A2A33}
.kpill.back{color:var(--over);border-color:#2A4A3C}
.ihead{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s2)}
.ihead b{font-size:15px}
.ihead .glogo{width:22px;height:22px}
@container screen (max-width:560px){
  .kcards,.icards{grid-template-columns:1fr}
  /* Pace is the first thing to go on a phone -- it is context, not the point. */
  .board.ident{--bcols:30px minmax(100px,1fr) minmax(90px,1fr) 74px 66px}
  .board.ident .bhead span:nth-child(n+6),
  .brow.ident span:nth-child(n+6){display:none}
  .board.kick{--bcols:32px minmax(110px,1fr) 60px 62px 54px}
  .board.kick .bhead span:nth-child(n+6),
  .brow.kick span:nth-child(n+6){display:none}
}

/* ---- kicker history drawer ---------------------------------------------
   The board above answers "is he running hot". This answers the two things a
   reader asks next and every other player page already answers: from where,
   and lately. Opened in place rather than on its own page, because the whole
   value is comparing him to the row above him. */
.brow.kick[data-kick]{cursor:pointer}
.brow.kick[data-kick]:hover{background:var(--panel2,#0D1319)}
.kdrawer{
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--panel2,#0D1319),var(--panel));
}
.kdinner{
  display:grid;grid-template-columns:minmax(150px,1fr) minmax(150px,1fr) minmax(220px,2fr);
  gap:var(--s4);padding:var(--s4);
}
.kdcol .t{
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);margin-bottom:var(--s2);
}
.kbands{display:flex;flex-direction:column;gap:4px}
.kband{display:flex;align-items:baseline;gap:var(--s2);font-size:12px}
.kband .kb{color:var(--ink2);min-width:52px}
.kband .kv{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
.kband .kl{color:var(--dim);font-size:10.5px}
.kgames{display:flex;flex-direction:column;gap:3px}
.kgame{
  display:grid;grid-template-columns:44px 42px 44px 1fr 32px;
  gap:var(--s2);align-items:baseline;font-size:11.5px;
}
.kgame .kg{color:var(--dim)}
.kgame .ko{color:var(--ink2)}
.kgame .km{font-variant-numeric:tabular-nums;color:var(--ink2)}
/* A perfect day is the common case and should not shout; a miss is the thing
   worth seeing, so only the miss gets a color. */
.kgame .km.clean{color:var(--ink)}
.kgame .kd2 i{font-style:normal;color:var(--dim);margin-right:6px;font-size:10.5px}
.kgame .kd2 i.miss{color:var(--under)}
.kgame .kp{font-variant-numeric:tabular-nums;color:var(--ink2);text-align:right}
@container screen (max-width:700px){
  .kdinner{grid-template-columns:1fr;gap:var(--s3)}
  .kgame{grid-template-columns:38px 38px 42px 1fr}
  .kgame .kp{display:none}
}

/* The roster column header. A bare number beside a name is unreadable until
   something says what it counts. */
.panel .t .rhead{
  margin-left:auto;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);font-weight:400;
}
.panel .t{display:flex;align-items:center;gap:var(--s2)}

/* ---- the over/under band ------------------------------------------------
   The number people open the page for. It lived as six words under the median
   for months. Sized like an answer now, and sitting directly under the curve
   it is a share of, so the two read as one statement. */
.ouband{
  display:flex;gap:var(--s3);align-items:stretch;
  margin:var(--s3) 0 0;
}
/* `hidden` is display:none in the UA sheet, which a class selector in an author
   sheet beats. Without this the band ignored being hidden and sat there reading
   "— OVER —" on the fantasy-points view, which has no line to be over. */
.ouband[hidden]{display:none}
.ouband .ou{
  flex:1;padding:var(--s3) var(--s4);border-radius:var(--r2,6px);
  border:1px solid var(--line);background:var(--panel2,#0D1319);
  display:flex;align-items:baseline;gap:8px;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
}
.ouband .ou b{
  font-size:26px;letter-spacing:-.01em;text-transform:none;
  font-variant-numeric:tabular-nums;line-height:1;
}
.ouband .ou i{font-style:normal;color:var(--ink2);text-transform:none;letter-spacing:0}
/* The green follows whichever side the model actually leans. Painting it on
   "over" regardless showed the losing side in green on any 46/54 split, which
   points a reader at the wrong half of the bet. */
.ouband.lean-over  .side-over,
.ouband.lean-under .side-under{
  border-color:#2A4A3C;background:linear-gradient(180deg,#0C1A16,var(--panel2,#0D1319));
}
.ouband.lean-over  .side-over  b,
.ouband.lean-under .side-under b{color:var(--over)}
.ouband.lean-over  .side-under b,
.ouband.lean-under .side-over  b{color:var(--ink2)}
/* Near even, neither side is colored: at 51/49 the model is not leaning and
   a green box would read as a call it has not made. */
.ouband.lean-none .ou b{color:var(--ink2)}
.oulean{
  align-self:center;font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim);white-space:nowrap;padding-left:var(--s2);
}
@container screen (max-width:520px){
  .ouband{flex-direction:column;gap:var(--s2)}
  .ouband .ou b{font-size:22px}
}

/* Waiting on a simulation the cron has not already drawn. Dimmed rather than
   empty: ten seconds of blank space reads as a bug, and this is the one part
   of the page that genuinely has to be computed. */
.ouband.waiting .ou{opacity:.45}
.ouband.waiting .ou b{color:var(--dim)}
.ouband.waiting .oulean{color:var(--accent)}