/* Geist and Geist Mono, self-hosted. OFL, Vercel / basement.studio.
   Chosen from the type directions in the design doc: the neutral, tightly
   fitted register where the numbers do the talking and the type gets out of
   the way. Both ship as variable files with real tabular figures (tnum),
   which is the reason for the switch -- Space Grotesk had no tnum, so every
   column on the site was off by a fraction of a digit width per row.

   Not fetched from Google: a board people open every morning should not have
   a third party in its critical render path. Four subset files, 78 KB in
   total, which is 18 KB LESS than the six Space files they replace.
   Vietnamese is dropped; latin-ext stays because the site is bilingual and
   Spanish needs it. */
@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;
  font-display:swap;src:url(fonts/geist-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;
  font-display:swap;src:url(fonts/geist-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;
  font-display:swap;src:url(fonts/geist-mono-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;
  font-display:swap;src:url(fonts/geist-mono-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* Ported from the design canvas, then re-checked with scripts/palette.py
     rather than eyeballed. The canvas is darker than Graphite was at every
     level -- page, band, card -- which is what lets the green read as the
     one loud thing on the screen. */
  --bg:#08090B;
  --bg-2:#0A0B0E;
  /* The canvas draws its card at #0E1014, which is 1.046:1 against this
     ground -- effectively invisible by fill, separated only by its border
     and drop shadow. palette.py refuses that, and it is right to: on a phone
     in daylight the border is the first thing to disappear. #101318 is the
     nearest value that clears the 1.05 floor, and the design's lighter top
     edge and shadow still do the rest of the work. */
  --panel:#101318;
  --panel-2:#0B0C10;
  --line:#1C2029;
  --line-2:#3B434F;

  /* The type hierarchy, in the order a reader meets it. --dim is the only
     token below 5:1 and is valid only for a caption under a figure that
     already carries the meaning -- never for a name, a price or a percentage.
     See the --dim allowlist at the bottom of this file.

     --dim keeps its Graphite value: the canvas has no text that quiet, and
     inventing one to match a design that does not use it would be backwards. */
  --txt:#F5F6F8;      /* club names, primary numbers, best price */
  --sub:#C4CAD6;      /* records, starter, ERA, supporting stats */
  /* Raised from #8A909C, which was 5.80:1 on a card -- legal, and not
     comfortable at the 10px mono this token is mostly set in. 7.23:1 is
     inside AAA for normal text, which is the right target for a page whose
     whole content is small numbers. */
  --muted:#9AA2AF;    /* mono labels, card headers, units */
  --dim:#626D7A;      /* footnote captions only */

  --green:#5BE39C;
  --green-deep:#226E49;   /* hard button shadow, and the bar gradient's tail */
  --green-hover:#8CEFBA;
  --green-dim:#3F9E71;
  --red:#FF6B4D;
  --amber:#F2B23C;

  /* Two roles: mono labels the data, the sans carries everything else. */
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Geist","Helvetica Neue",Helvetica,Arial,sans-serif;
  /* The extrusion ramp under the stat row: six steps from the card grey down
     to the page. Named rather than inlined because palette.py can only judge
     what :root declares -- an unnamed hex in a shadow is exactly how the
     white translucent header survived the last theme swap untouched. */
  --ext-1:#262C36;
  --ext-2:#222831;
  --ext-3:#171B22;
  --ext-4:#12151B;
  --ext-5:#0E1014;

  --maxw:1240px;

  /* --dim allowlist: see DIM_ALLOWED in scripts/palette.py. Adding a selector
     there is the only way to use this token, and the test will tell you so. */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--txt);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;line-height:1.55;overflow-x:hidden;
  /* Geist Sans carries real tabular figures. Set once here so every column
     on the site -- tables, strips, card numbers -- lines up by default. */
  font-variant-numeric:tabular-nums;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--green);font-weight:400;
}
.eyebrow.muted{color:var(--muted)}
/* 700, not 800: Space Grotesk's bold is already heavier than Inter's was,
   and 800 on a variable face this wide turns a headline into a slab.
   Tracking goes to -.035em and the leading closes right up, which is what
   makes the canvas's headlines read as one object rather than as lines. */
h1,h2,h3,h4{font-weight:700;letter-spacing:-.035em;line-height:1}
h1{font-size:clamp(44px,6.4vw,80px);line-height:.92;letter-spacing:-.04em}
h2{font-size:clamp(30px,3.6vw,42px)}
h3{font-size:20px;letter-spacing:-.02em}
p{color:var(--muted);font-size:16px}
.lead{font-size:18px;max-width:56ch}
.mono{font-family:var(--mono)}
.up{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.g{color:var(--green)}
.r{color:var(--red)}

/* ---------- nav ---------- */
header.nav{
  position:sticky;top:0;z-index:50;background:rgba(8,9,11,.86);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:0 28px;height:68px;
  display:flex;align-items:center;gap:38px}
/* "Craftypicks." — mixed case with a full stop, not letterspaced caps. The
   period is the whole logo; it reads as a statement rather than a wordmark. */
.logo{font-family:var(--sans);font-weight:800;font-size:19px;letter-spacing:-.03em;
  text-transform:none;color:var(--txt)}
.logo em{font-style:normal;color:var(--green)}
.nav-links{display:flex;gap:28px;margin-right:auto;flex:1;min-width:0}
.nav-links a{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);transition:color .15s}
.nav-links a:hover,.nav-links a.on{color:var(--txt)}
/* Both rows scroll sideways rather than pushing the document wider. The old
   nav overflowed the page by 367px on a 390px phone; a scrollable row is the
   fix that does not require dropping items. */
.nav-links,.nav-views .nav-in{overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;white-space:nowrap}
.nav-links::-webkit-scrollbar,.nav-views .nav-in::-webkit-scrollbar{display:none}
.nav-views{border-bottom:1px solid var(--line);background:var(--panel)}
.nav-views.is-empty{display:none}
.nav-views .nav-in{display:flex;gap:20px;max-width:var(--maxw);
  margin:0 auto;padding:0 28px;height:auto}
.nav-views a{display:inline-block;padding:11px 0;font-size:13px;
  color:var(--muted);text-decoration:none;border-bottom:2px solid transparent}
.nav-views a:hover{color:var(--txt)}
.nav-views a.on{color:var(--txt);border-bottom-color:var(--green)}
.nav-cta{display:flex;align-items:center;gap:18px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-size:12px;letter-spacing:.01em;
  font-weight:500;padding:13px 22px;border:1px solid var(--green);color:var(--green);
  background:transparent;cursor:pointer;transition:.15s;white-space:nowrap;
}
.btn:hover{background:rgba(91,227,156,.09)}
/* A hard offset shadow, not a blur, and the button translates INTO it on
   hover so it reads as being pressed rather than as glowing. This is the
   one piece of the canvas's flavour that carries the whole brand. */
.btn.solid{background:var(--green);color:var(--bg);border-color:var(--green);
  font-weight:700;box-shadow:6px 6px 0 var(--green-deep);transition:.15s}
.btn.solid:hover{background:var(--green);transform:translate(2px,2px);
  box-shadow:4px 4px 0 var(--green-deep)}
.btn.solid.sm{box-shadow:4px 4px 0 var(--green-deep)}
.btn.solid.sm:hover{box-shadow:3px 3px 0 var(--green-deep);transform:translate(1px,1px)}
@media (prefers-reduced-motion:reduce){
  .btn.solid:hover,.btn.solid.sm:hover{transform:none}
}
.btn.ghost{border-color:var(--line-2);color:var(--txt)}
.btn.ghost:hover{border-color:var(--muted);background:rgba(245,246,248,.06)}
.btn.sm{padding:10px 16px;font-size:11px}
.link-quiet{font-size:14px;color:var(--muted)}
.link-quiet:hover{color:var(--txt)}
.burger{display:none;background:none;border:0;color:var(--txt);font-size:22px;cursor:pointer}

/* ---------- layout blocks ---------- */
section{border-bottom:1px solid var(--line)}
.pad{padding:96px 0}
.pad-sm{padding:64px 0}
.grid-2{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.sec-head{max-width:60ch;margin-bottom:44px}
.sec-head h2{margin:14px 0 14px}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:var(--bg-2);
}
.hero .wrap{padding-top:104px;padding-bottom:104px}
.hero h1{margin:22px 0 24px}
.hero-cta{display:flex;gap:14px;margin:36px 0 18px;flex-wrap:wrap}
.fineprint{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.gridlines{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(700px 500px at 70% 30%,#000,transparent 75%);
  mask-image:radial-gradient(700px 500px at 70% 30%,#000,transparent 75%);
}
.hero .wrap{position:relative;z-index:1}

/* ---------- play card ---------- */
.card{background:var(--panel);border:1px solid var(--line);}
.play{background:var(--panel);border:1px solid var(--line-2);position:relative}
.play::before{content:"";position:absolute;top:-1px;left:22%;right:22%;height:1px;
  background:linear-gradient(90deg,transparent,var(--green),transparent);opacity:.8}
.play-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 20px;border-bottom:1px solid var(--line);
}
.dot{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block;
  box-shadow:0 0 0 3px rgba(91,227,156,.16);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.stamp{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.stamp.on{color:var(--green)}
.play-body{padding:22px 20px 20px}
.pick{font-size:26px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
.meta{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.mock-banner{
  background:rgba(242,178,60,.12);border-bottom:1px solid rgba(242,178,60,.35);
  color:var(--amber);font-family:var(--sans);font-size:11.5px;letter-spacing:.01em;
  padding:11px 28px;text-align:center;
}
.mock-banner b{color:var(--amber)}
.matchup-line{font-size:13px;color:var(--muted);margin:-8px 0 16px}
.signup-embed{width:100%;max-width:440px;height:70px;margin:26px auto 10px;border:0;display:block}
.form-msg{font-size:13px;color:var(--green);min-height:20px;margin-top:6px}
.reasons{list-style:none;display:grid;gap:9px;margin-bottom:20px}
.reasons li{font-size:13.5px;color:var(--muted);padding-left:14px;border-left:2px solid var(--line-2);line-height:1.45}
.reasons li b{color:var(--txt);font-weight:600}
.stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);}
.stat{padding:14px 16px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat .k{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.stat .v{font-family:var(--sans);font-size:19px;font-weight:600;margin-top:6px}

/* ---------- feature tiles ---------- */
.tile{background:var(--panel);border:1px solid var(--line);padding:28px 24px;transition:.18s}
.tile:hover{border-color:var(--line-2);background:var(--panel-2)}
.tile .num{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--green);
  margin-bottom:18px;text-transform:uppercase}
[id]{scroll-margin-top:96px}
.tile h3{margin-bottom:10px}
.tile p{font-size:14.5px}

/* ---------- kpi strip ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:var(--panel)}
.kpi{padding:28px 24px;border-right:1px solid var(--line)}
.kpi:last-child{border-right:0}
.kpi .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* Extruded: six offset copies stepping down through the panel greys. It is
   the canvas's one purely decorative flourish, and it earns its place --
   it is what makes a season record read as a headline instead of a
   footnote. Sans, not mono, for the same reason the card's probability is. */
.kpi .v{font-size:clamp(34px,4.4vw,54px);font-weight:700;letter-spacing:-.035em;
  line-height:1;margin-top:10px;font-family:var(--sans);color:var(--txt);
  text-shadow:1px 1px 0 var(--ext-1),2px 2px 0 var(--ext-2),3px 3px 0 var(--line),
    4px 4px 0 var(--ext-3),5px 5px 0 var(--ext-4),6px 6px 0 var(--ext-5)}
.kpi .s{font-size:12.5px;color:var(--muted);margin-top:4px}

/* ---------- table ---------- */
.tbl{width:100%;border-collapse:collapse;border:1px solid var(--line);background:var(--panel)}
.tbl th{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);font-weight:500;
  background:var(--bg-2);white-space:nowrap;
}
.tbl td{padding:15px 18px;border-bottom:1px solid var(--line);font-size:14px;color:var(--muted)}
.tbl tr:last-child td{border-bottom:0}
.tbl td.strong{color:var(--txt);font-weight:600}
.tbl td.m{font-family:var(--sans);font-size:13px}
.tbl tbody tr:hover{background:var(--panel-2)}
.tag{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 8px;border:1px solid var(--line-2);color:var(--muted)}
.tag.win{color:var(--green);border-color:rgba(91,227,156,.4);background:rgba(91,227,156,.10)}
.tag.loss{color:var(--red);border-color:rgba(255,107,77,.35);background:rgba(255,107,77,.08)}
.tag.push{color:var(--amber);border-color:rgba(242,178,60,.35);background:rgba(242,178,60,.08)}
.scroll-x{overflow-x:auto}

/* ---------- rated board ---------- */
/* align-items:start so a card sizes to its own content. Stretching them
   to match the tallest sibling leaves dead space under the short ones,
   and a flagged card is always taller than a clean one. */
/* The canvas lays its slate out on a perspective and lifts a card toward
   the reader on hover. perspective belongs on the GRID, not the card: set
   per-card, every card gets its own vanishing point and the row shears. */
.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(358px,1fr));
  gap:20px;align-items:start;perspective:1600px}
/* The lighter top edge is the canvas's signature on every surface: a card is
   lit from above, so the edge facing the light is the one that catches it.
   It is also what keeps the card legible against a ground it is only 1.07:1
   away from. */
.gcard{background:var(--panel);border:1px solid var(--line);
  border-top-color:var(--line-2);box-shadow:0 10px 24px rgba(8,9,11,.4);
  transform-style:preserve-3d;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s}
@media (prefers-reduced-motion:no-preference){
  .gcard:hover{transform:translateZ(46px) rotateX(4deg);
    box-shadow:0 34px 60px rgba(8,9,11,.7);border-color:var(--line-2)}
}
@media (prefers-reduced-motion:reduce){
  .gcard:hover{border-color:var(--line-2);background:var(--panel-2)}
}
.gcard.flag{border-color:rgba(242,178,60,.42)}
.gcard-top{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 17px;border-bottom:1px solid var(--line);background:var(--bg-2);
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--sub);
}
.gcard-top .fin{color:var(--txt)}
.gcard-body{padding:20px 20px 22px}
/* The market block. A fixed label column keeps the three rows aligned; 62px
   is what "RUN LINE" needs without wrapping, which it did at 52. */
.mk{border-top:1px solid var(--line);margin-top:14px;padding-top:12px}
.mk-row{display:flex;align-items:baseline;gap:12px;padding:5px 0}
.mk-label{flex:0 0 62px;white-space:nowrap;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted)}
.mk-line{flex:1 1 auto;font-size:13.5px;color:var(--sub)}
.mk-line b{color:var(--txt);font-family:var(--sans)}
.mk-book{color:var(--muted);font-size:12.5px}
.mk-edge{flex:0 0 auto;font-family:var(--sans);font-size:13px;
  font-weight:700;color:var(--txt)}
.mk-edge.g{color:var(--green)}
.mk-edge.r{color:var(--red)}
.mk-note{flex:0 0 auto;font-size:12.5px;color:var(--muted)}

/* ---------- the canvas card ----------
   Five lines and nothing else: the matchup, the one probability we are
   claiming, the bar with the market ticked onto it, what the market says,
   and the size of the disagreement. Everything that used to live on the
   face of this card -- records, starters, head to head, the three price
   rows -- is behind the disclosure. A reader scanning fifteen games should
   be comparing fifteen of the same number, not reading fifteen paragraphs. */
.cv-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;margin-bottom:18px}
.cv-tm{font-size:20px;font-weight:700;letter-spacing:-.025em;color:var(--txt);
  line-height:1.15;margin:0}
.cv-tm span{color:var(--muted);font-weight:400}
.cv-time{font-family:var(--sans);font-size:10.5px;letter-spacing:.01em;
  color:var(--muted);white-space:nowrap}
.cv-row{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin-bottom:10px}
.cv-lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
/* The number the card exists to deliver. Sans, not mono -- display type. */
.cv-pct{font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1;
  color:var(--green)}
.cv-bar{position:relative;height:13px;background:var(--bg-2);overflow:hidden}
.cv-fill{position:absolute;left:0;top:0;bottom:0;
  background:linear-gradient(90deg,rgba(91,227,156,.30),var(--green))}
/* Ringed in the page ground so it reads over both halves of the bar. */
.cv-tick{position:absolute;top:0;bottom:0;width:2px;background:var(--txt);
  box-shadow:0 0 0 1px rgba(8,9,11,.85)}
.cv-foot{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase}
.cv-foot .gm{color:var(--muted)}
.ge{font-weight:700;white-space:nowrap}
.ge.up{color:var(--green)}
.ge.down{color:var(--amber)}
.ge.none{color:var(--muted);font-weight:400}
/* The prop card's second line: which club, which opponent, and whether the
   start has been graded. It replaces the old top strip, which on the canvas
   card has no place -- the canvas puts the matchup in the title. */
/* This line runs from three words on a prop card to a full sentence on a
   hits card. It is a sentence, not a label, and the design doc's rule is
   that mono in caps belongs to labels under 12px only -- so it is now
   sentence-case sans at 12.5px, the size the doc sets its meta line at. */
.cv-sub{font-family:var(--sans);font-size:12.5px;letter-spacing:0;
  color:var(--muted);margin:-12px 0 16px;line-height:1.6}
/* The unit after a projection. --dim is allowed here for the same reason it
   is on .pb-num .unit: the figure beside it already carries the meaning. */
.cv-u{font-size:15px;color:var(--dim);margin-left:4px;font-weight:500}
.cv-none{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);padding:6px 0 2px}

/* Disclosure, not a flip: the back of a card is the size of its front, and
   this content does not fit there. interpolate-size lets it animate to its
   natural height, and prefers-reduced-motion turns that off. */
/* The canvas makes this a full-width button rather than a text link, which
   on a phone is the difference between a target a thumb finds and one it
   hunts for. */
.gmore{margin-top:14px}
.gmore>summary{cursor:pointer;list-style:none;display:block;text-align:center;
  padding:11px 10px;border:1px solid var(--line);background:var(--bg-2);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);transition:.18s}
.gmore>summary::-webkit-details-marker{display:none}
.gmore>summary:hover{color:var(--txt);border-color:var(--line-2);background:var(--panel-2)}
.gmore-in{margin-top:14px;border-top:1px solid var(--line-2);padding-top:16px}
.gtbl{width:100%;border-collapse:collapse;font-size:12.5px}
.gtbl td{padding:5px 0;color:var(--sub);border-top:1px solid var(--line)}
.gtbl td.m{font-family:var(--sans);text-align:right;color:var(--txt)}
@media (prefers-reduced-motion:no-preference){
  @supports (interpolate-size:allow-keywords){
    :root{interpolate-size:allow-keywords}
    .gmore{transition:height .25s ease}
  }
}
.empty-board{color:var(--muted);padding:30px 0;text-align:center}
.gside{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
/* Both clubs are named at full strength. An earlier draft dimmed the side we
   did not favour, which made one of the two teams harder to read on every
   card; the green percentage already says which side we are on. */
.gside .tm{font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--txt);line-height:1.25}
/* The canvas sets its probability in the SANS at 25px, not the mono. The
   mono is for labels and prices; the number the whole card exists to deliver
   is display type, and setting it in a typewriter face shrinks it. */
.gside .pc{font-family:var(--sans);font-size:25px;font-weight:700;
  letter-spacing:-.02em;color:var(--txt);line-height:1}
.gside.lead .pc{color:var(--green)}
/* The close control the panel script appends at the foot of an open
   disclosure. Full width, so a thumb finds it without aiming. */
.d-close{display:block;width:100%;margin-top:12px;padding:9px 0;
  background:none;border:1px solid var(--line-2);border-radius:6px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);cursor:pointer}
.d-close:hover{color:var(--txt);border-color:var(--line-2)}

/* The "picks posted" date. The user kept this stamp when the rest of
   the status strip was cut, precisely because it is the thing that says
   the board is today's -- so it is read, and it gets --muted. */
.foot-stamp{font-family:var(--sans);font-size:11px;letter-spacing:.01em;
  color:var(--muted)}

.grec{font-family:var(--sans);font-size:12.5px;letter-spacing:0;
  color:var(--txt);margin-top:7px}
.gsp{font-family:var(--sans);font-size:11.5px;letter-spacing:.01em;color:var(--sub);margin-top:6px}
.gvs{font-family:var(--sans);font-size:12.5px;letter-spacing:0;
  color:var(--sub);margin-top:7px;padding-left:10px;border-left:2px solid var(--green-dim)}
.gvs.thin{color:var(--muted);border-left-color:var(--line-2)}
/* 12px, and the filled half is a gradient rather than a flat block: it
   makes the bar read left-to-right as an accumulation instead of as two
   coloured rectangles. The market tick sits flush inside it, ringed in the
   page ground so it stays visible over both halves. */
.gbar{position:relative;height:12px;background:var(--bg-2);margin:16px 0 0;overflow:hidden}
.gbar .seg{position:absolute;top:0;bottom:0;background:transparent}
.gbar .seg.on{background:linear-gradient(90deg,rgba(91,227,156,.28),var(--green))}
.gbar .tick{position:absolute;top:0;bottom:0;width:2px;background:var(--txt);
  box-shadow:0 0 0 1px rgba(8,9,11,.8);z-index:1}
.gfoot{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding-top:12px;margin-top:14px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
.gfoot b{color:var(--txt);font-weight:600}
.gfoot .lean{color:var(--txt)}
.gfoot .flagged{color:var(--amber)}
/* ---------- evidence: profit vs the closing line ---------- */
/* Two columns, deliberately unequal in emphasis. The closing-line side is the
   one carrying information on a young record, so it gets the accent and the
   left rule; the profit side is greyed to say "not yet" without hiding it. */
.ev{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:720px){ .ev{grid-template-columns:1fr} }
.ev-col{background:var(--panel);border:1px solid var(--line);padding:20px 22px 22px}
.ev-col.lead{border-left:3px solid var(--green)}
.ev-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px}
.ev-n{font-family:var(--sans);font-size:38px;font-weight:700;letter-spacing:-.02em;
  line-height:1;color:var(--sub);margin-bottom:12px}
.ev-n.g{color:var(--green)}
.ev-col p{font-size:14.5px;line-height:1.6;margin:0;color:var(--muted)}
.ev-col p b{color:var(--txt);font-weight:600}
.ev-note{margin-top:14px;padding:14px 18px;border:1px solid var(--line);
  background:var(--bg-2);font-size:13.5px;line-height:1.6;color:var(--muted)}

.empty-board{border:1px solid var(--line);background:var(--panel);padding:38px 24px;
  text-align:center;color:var(--muted);font-size:14.5px}

/* ---------- calibration dot-plot ---------- */
.calib{border:1px solid var(--line);background:var(--panel)}
.crow{display:grid;grid-template-columns:96px 84px 1fr 168px;gap:18px;align-items:center;
  padding:14px 18px;border-bottom:1px solid var(--line)}
.crow:last-child{border-bottom:0}
.crow .cl{font-family:var(--sans);font-size:13px;color:var(--txt);font-weight:600}
.crow .cn{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--sub)}
.ctrack{position:relative;height:24px;background:var(--bg-2);border:1px solid var(--line)}
.cband{position:absolute;top:0;bottom:0;background:rgba(91,227,156,.09);
  border-left:1px solid rgba(91,227,156,.18);border-right:1px solid rgba(91,227,156,.18)}
/* The glow round the "what we said" marker. .45 rather than .55 because
   the surface check reads anything at or above .5 as paint rather than a
   tint, and the canvas green is light enough to trip it where the old
   green was not. At 6px blur the two are indistinguishable. */
.csaid{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--green);box-shadow:0 0 6px rgba(91,227,156,.45)}
.cact{position:absolute;top:50%;width:9px;height:9px;margin:-5px 0 0 -5px;border-radius:50%;
  background:var(--txt);box-shadow:0 0 0 3px var(--panel)}
.cact.out{background:var(--amber)}
.cverdict{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sub);text-align:right}
.cverdict.out{color:var(--amber)}
.clegend{display:flex;flex-wrap:wrap;gap:22px;align-items:center;margin-top:18px;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--sub)}
.clegend span{display:flex;align-items:center;gap:8px}
.clegend i{display:inline-block}
.key-line{width:2px;height:13px;background:var(--green)}
.key-dot{width:9px;height:9px;border-radius:50%;background:var(--txt)}
.key-band{width:26px;height:13px;background:rgba(91,227,156,.09);
  border-left:1px solid rgba(91,227,156,.25);border-right:1px solid rgba(91,227,156,.25)}
@media(max-width:820px){
  .crow{grid-template-columns:1fr 1fr;gap:10px}
  .crow .ctrack{grid-column:1/-1}
  .cverdict{text-align:left}
}

/* ---------- pitchers prop ---------- */
/* The prop board is the same object as the slate board and gets the same
   frame: same perspective, same lit top edge, same lift. A reader moving
   between Games and Props should not feel they changed sites. */
.pb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(336px,1fr));
  gap:20px;perspective:1600px;align-items:start}
.pb-card{background:var(--panel);border:1px solid var(--line);
  border-top-color:var(--line-2);box-shadow:0 10px 24px rgba(8,9,11,.4);
  transform-style:preserve-3d;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s}
@media (prefers-reduced-motion:no-preference){
  .pb-card:hover{transform:translateZ(46px) rotateX(4deg);
    box-shadow:0 34px 60px rgba(8,9,11,.7);border-color:var(--line-2)}
}
@media (prefers-reduced-motion:reduce){
  .pb-card:hover{border-color:var(--line-2);background:var(--panel-2)}
}
.pb-card.flag{border-color:rgba(242,178,60,.42)}
.pb-top{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 17px;border-bottom:1px solid var(--line);background:var(--bg-2);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--sub)}
.pb-top .fin{color:var(--txt);white-space:nowrap}
.pb-body{padding:20px 20px 22px}
.pb-name{font-size:20px;font-weight:700;letter-spacing:-.025em;color:var(--txt);margin-bottom:15px}
.pb-head{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);margin-bottom:18px}
.pb-num{padding:12px 14px;border-right:1px solid var(--line)}
.pb-num.alt{border-right:0;background:var(--bg-2)}
.pb-num .k{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* Sans, like the slate card's probability: the projection is the number the
   card exists to deliver, and the mono was shrinking it. */
.pb-num .v{font-family:var(--sans);font-size:29px;font-weight:700;
  letter-spacing:-.025em;line-height:1;color:var(--green);margin-top:7px}
.pb-num.alt .v{color:var(--txt)}
/* A unit or noun trailing a large figure — "risked", "K". The figure beside
   it already carries the meaning, which is the only thing that makes --dim
   valid anywhere. See DIM_ALLOWED in scripts/palette.py. */
.unit{color:var(--dim)}
.pb-num .unit{font-size:13px;color:var(--dim);margin-left:4px;font-weight:500}
.pb-striphead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sub);margin-bottom:9px}
.pb-rec b{color:var(--txt);font-weight:600}
.pb-strip{position:relative;display:flex;align-items:flex-end;gap:2px;height:92px;
  padding-right:28px;border-bottom:1px solid var(--line-2)}
.pb-bar{flex:1;background:var(--red);border-radius:3px 3px 0 0}
.pb-bar.hit{background:var(--green)}
.pb-line{position:absolute;left:0;right:0;height:0;border-top:2px dashed var(--txt);
  opacity:.9;pointer-events:none}
.pb-linelab{position:absolute;right:0;top:-9px;font-family:var(--sans);font-size:10.5px;
  font-weight:600;color:var(--txt);background:var(--panel);padding:0 4px}
.pb-ticks{display:flex;gap:2px;padding-right:28px;margin-top:5px;
  font-family:var(--sans);font-size:10px;color:var(--sub)}
.pb-ticks span{flex:1;text-align:center}
.pb-nostrip{font-family:var(--sans);font-size:11px;color:var(--muted);
  padding:24px 0;text-align:center;border-bottom:1px solid var(--line-2)}
.pb-rows{margin-top:16px;display:grid;gap:7px}
.pb-row{display:flex;justify-content:space-between;gap:12px;
  font-family:var(--sans);font-size:11px;letter-spacing:.01em;color:var(--sub)}
.pb-row b{color:var(--txt);font-weight:500;text-align:right}
.pb-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:13px;margin-top:15px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--sub)}
.pb-foot .lean{color:var(--txt)}
.pb-foot .flagged{color:var(--amber)}

/* ---------- filters ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chip{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:9px 15px;border:1px solid var(--line-2);color:var(--muted);background:transparent;
  cursor:pointer;transition:.15s;
}
.chip:hover{color:var(--txt);border-color:var(--muted)}
.chip.on{background:var(--green);border-color:var(--green);color:var(--bg);font-weight:700}

/* ---------- misc ---------- */
.split{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.bar{height:1px;background:var(--line);margin:0}
.quote{border-left:2px solid var(--green);padding:6px 0 6px 20px;font-size:17px;color:var(--txt);max-width:60ch}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:20px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:16.5px;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--green);font-family:var(--mono);font-size:18px}
.faq details[open] summary::after{content:"\2013"}
.faq p{margin-top:12px;max-width:75ch;font-size:15px}
.note{border:1px solid var(--line);background:var(--bg-2);padding:22px 24px}
.note p{font-size:13.5px}
.cta-band{
  background:var(--bg-2);
  text-align:center}
.cta-band .wrap{padding:88px 28px}
.cta-band h2{margin:16px auto 18px;max-width:20ch}
.cta-band p{margin:0 auto;max-width:52ch}
.cta-band .hero-cta{justify-content:center}
.form-row{display:flex;gap:10px;max-width:440px;margin:30px auto 14px;flex-wrap:wrap}
.form-row input{
  flex:1;min-width:220px;background:var(--panel);border:1px solid var(--line-2);color:var(--txt);
  padding:13px 16px;font-family:var(--sans);font-size:13px;outline:none;
}
.form-row input:focus{border-color:var(--green)}
.form-row input::placeholder{color:var(--muted)}

/* ---------- monthly units chart ---------- */
.chart{width:100%}
.bars{display:flex;align-items:stretch;gap:12px;position:relative}
.bars::after{content:"";position:absolute;left:0;right:0;top:180px;height:1px;background:var(--line-2)}
.col{flex:1;display:flex;flex-direction:column;min-width:0;cursor:default}
.pos{height:180px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:7px}
.neg{height:86px;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:7px}
.col i{display:block;width:100%;max-width:56px;margin:0 auto;background:var(--green);
  border-radius:4px 4px 0 0;transition:filter .15s}
.col i.down{background:var(--red);border-radius:0 0 4px 4px}
.col:hover i{filter:brightness(1.18)}
.col .val{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.01em}
.col .mlab{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);text-align:center;margin-top:10px}
@media(max-width:620px){
  .bars{gap:6px}
  .col .val{font-size:10px}
  .col .mlab{font-size:9px;letter-spacing:.06em}
}

/* ---------- footer ---------- */
footer{background:var(--bg-2);padding:56px 0 40px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;margin-bottom:44px}
.foot-grid h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:500;margin-bottom:16px}
.foot-grid a{display:block;font-size:14px;color:var(--muted);margin-bottom:10px}
.foot-grid a:hover{color:var(--txt)}
.foot-bot{border-top:1px solid var(--line);padding-top:26px;display:flex;justify-content:space-between;
  gap:20px;flex-wrap:wrap}
.foot-bot p,.foot-bot span{font-size:12px;color:var(--muted)}
.disclaimer{font-size:12px;color:var(--muted);line-height:1.7;max-width:70ch}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .grid-2{grid-template-columns:1fr;gap:44px}
  .grid-3,.grid-4{grid-template-columns:1fr 1fr}
  .kpis{grid-template-columns:1fr 1fr}
  .kpi:nth-child(2){border-right:0}
  .kpi:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .foot-grid{grid-template-columns:1fr 1fr}
  /* One nav row, not two. The sport tabs used to drop to a full-width row
     of their own under the logo, so a phone spent three rows -- logo,
     sports, sections -- and about 180px before any content. They are now
     small pills sharing the logo's row, which is what the design doc does
     and what buys back the first card. */
  .nav-in{height:auto;padding:10px 0;gap:10px;flex-wrap:nowrap}
  .nav-links{order:2;width:auto;margin-left:auto;margin-right:0;gap:6px;
    overflow-x:auto;border-top:0;padding:0;flex:0 1 auto}
  .nav-links a{font-size:10.5px;letter-spacing:.06em;white-space:nowrap;
    padding:5px 8px;background:var(--ext-4);color:var(--sub)}
  .nav-links a.on{color:var(--bg);background:var(--green);font-weight:700}
  .nav-cta{margin-left:0;flex:0 0 auto}
  .pad{padding:68px 0}
}
@media(max-width:620px){
  .wrap,.nav-in{padding-left:16px;padding-right:16px}
  .grid-3,.grid-4{grid-template-columns:1fr}
  .hero .wrap{padding-top:64px;padding-bottom:72px}
  .nav-cta .link-quiet{display:none}
  /* At this width the logo, four sport pills and a call to action do not
     fit on one row, and the row is worth more than the button: the same
     link sits in the section row's Board tab and in the footer. */
  .nav-cta{display:none}
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(2){border-right:0}
}

/* Phone board. 390px is the layout contract: zero document overflow,
   one card per row, nav rows scroll instead of wrapping the page. */
/* Every board's header, on the pitchers board's terms. The title used to
   run to 52px over a date set in wide-tracked uppercase mono -- most of a
   phone screen spent restating the tab above it. Title at 22px, date and
   counts as one sentence-case line under it, and the flex order puts them
   in that order without touching five body templates. */
.board-hero{background:var(--bg-2)}
.board-hero .wrap{padding:18px 28px 16px;display:flex;flex-direction:column;
  align-items:flex-start}
.board-hero h1{font-size:22px;line-height:1.05;letter-spacing:-.03em;
  margin:0;order:1}
.board-hero .eyebrow{order:2;font-family:var(--sans);font-size:12.5px;
  letter-spacing:0;text-transform:none;color:var(--muted);margin-top:5px}
.board-hero .ecap{order:3;margin-top:8px;font-size:13px;max-width:62ch}
/* The other half of the boards head themselves with a kicker line instead
   of an eyebrow, inside a wrap that also holds the whole board -- so these
   cannot be reordered, only sized. */
.kicker{font-size:12.5px;color:var(--muted);margin-bottom:2px}
.kicker + h1{font-size:22px;line-height:1.05;letter-spacing:-.03em;
  margin:0 0 4px}
.board-page{padding:26px 28px 60px}
/* The list board sits straight under its header. .pad-sm's 64px was
   most of a screen of nothing between the title and the first chip. */
.bpage{padding:18px 0 56px}
@media(max-width:760px){
  .board{grid-template-columns:1fr;gap:12px}
  .board-hero .wrap{padding:16px 16px 14px}
  .board-page{padding:16px 16px 48px}
  .gcard-top{padding:10px 14px;font-size:10px;letter-spacing:.1em;gap:8px}
  .gcard-body{padding:14px}
  .gside .tm{font-size:15px;min-width:0}
  .gside .pc{font-size:16px}
  .mk-row{flex-wrap:wrap;gap:6px 10px;padding:6px 0}
  .mk-label{flex:0 0 auto;min-width:4.8em}
  .mk-line{flex:1 1 140px;min-width:0}
  .mk-book{display:inline-block}
  .gmore>summary{padding:12px 0 4px;min-height:44px}
  .nav-views .nav-in{padding:0 16px;gap:16px}
  .nav-views a{padding:12px 0;min-height:44px}
  
  
  
  .foot-grid{grid-template-columns:1fr 1fr;gap:22px}
}
@media(max-width:390px){
  html,body{overflow-x:hidden;max-width:100%}
  .wrap,.nav-in,.nav-views .nav-in{padding-left:14px;padding-right:14px}
  .board-hero .wrap,.board-page{padding-left:14px;padding-right:14px}
}

/* ============================================================ motion ======
   All of it is progressive enhancement and all of it is optional. Every rule
   below sits inside both a reduced-motion guard and an @supports test for
   scroll-driven animations, so a browser without the feature — or a visitor
   who has asked their OS for less movement — gets the finished page with no
   animation and nothing missing. Nothing here is load-bearing, and no
   JavaScript was added to the site to do it.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {

  /* Bars draw themselves once, on load. The win-probability split and the
     strikeout strip are the two things a reader is meant to look at, so they
     are the two things that move. */
  @keyframes cp-draw-x { from { transform: scaleX(0); } }
  @keyframes cp-draw-y { from { transform: scaleY(0); } }
  @keyframes cp-fade   { from { opacity: 0; } }

  .gbar .seg { transform-origin: left center;   animation: cp-draw-x .55s cubic-bezier(.22,.61,.36,1) backwards; }
  .pb-bar    { transform-origin: center bottom; animation: cp-draw-y .5s  cubic-bezier(.22,.61,.36,1) backwards; }
  .gbar .tick, .pb-line, .pb-ticks { animation: cp-fade .4s ease-out .45s backwards; }

  /* A short stagger across a row so a grid of cards doesn't snap as one
     block. Deliberately capped — past a few hundred milliseconds a stagger
     stops reading as polish and starts reading as a slow page. */
  .pb-bar:nth-child(2)  { animation-delay: .03s }
  .pb-bar:nth-child(3)  { animation-delay: .06s }
  .pb-bar:nth-child(4)  { animation-delay: .09s }
  .pb-bar:nth-child(5)  { animation-delay: .12s }
  .pb-bar:nth-child(6)  { animation-delay: .15s }
  .pb-bar:nth-child(7)  { animation-delay: .18s }
  .pb-bar:nth-child(8)  { animation-delay: .21s }
  .pb-bar:nth-child(9)  { animation-delay: .24s }
  .pb-bar:nth-child(10) { animation-delay: .27s }
  .pb-bar:nth-child(11) { animation-delay: .30s }

  /* Reveal on scroll. Entry only — animating things as they leave is a
     nuisance on a page people scan for numbers. */
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes cp-rise {
      from { opacity: 0; transform: translateY(14px); }
    }
    .gcard, .pb-card, .tile, .crow, .play, .kpi {
      animation: cp-rise auto linear backwards;
      animation-timeline: view();
      animation-range: entry 0% cover 22%;
    }
  }

  .gcard, .pb-card, .tile { transition: transform .18s ease, border-color .18s ease, background .18s ease; }
  .gcard:hover, .pb-card:hover, .tile:hover { transform: translateY(-2px); }
}

/* ==================================================== visual richness ===== */
/* A hairline of the home club's colour along the top of its card. Two pixels
   at low opacity: enough that a scanned page has landmarks, not enough to
   turn a results table into a kit catalogue. */
.gcard, .pb-card { position: relative; }
.gcard::before, .pb-card::before {
  content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 2px;
  background: linear-gradient(90deg, var(--accent, var(--line-2)), transparent 78%);
  opacity: .85; pointer-events: none;
}
.tdot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--tc, var(--dim)); margin-right: 8px; vertical-align: middle;
  position: relative; top: -1px; flex: none;
}
.gside .tm { display: flex; align-items: center; }

/* The current page gets a mark in the nav. */
.nav-links a { position: relative; padding-bottom: 3px; }
.nav-links a.on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--green); border-radius: 2px;
}

/* ====================================================== status strip =====
   A row of live facts directly under the nav. It exists to answer "is this
   thing actually running?" before a reader has to trust any of the numbers
   underneath it — which is the same argument the rest of the site makes. */

@media(max-width:900px){
  
  
  
}

/* ======================================================== game card =====
   Rebuilt around one number. The old card gave both teams a probability,
   which made a reader do the subtraction; this one names a single side and
   shows the market's disagreement as a distance along the bar. */

/* The nav outgrew the viewport once the labels went uppercase mono and a
   sixth item arrived: on a phone the last three links were being clipped by
   the body's overflow-x:hidden, which made them unreachable rather than just
   ugly. Let the strip scroll itself instead. */
.nav-links a{white-space:nowrap}
@media(max-width:860px){
  /* One row. This block used to give the sport links a full-width second
     row of their own, on the grounds that squeezing them beside the logo
     left about 70px of usable width. That was true of 13.5px links with
     .13em tracking; as 10.5px pills they fit, and the row they no longer
     take is roughly a card's worth of a phone screen. */
  .nav-in{flex-wrap:nowrap;height:auto;padding-top:10px;padding-bottom:10px;
    gap:10px}
  .logo{flex:0 0 auto}
  .nav-links{order:2;flex:0 1 auto;flex-basis:auto;margin-left:auto;
    margin-right:0;gap:6px;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding:0;border-top:0}
  .nav-links a{font-size:10.5px;letter-spacing:.06em;padding:5px 8px;
    background:var(--ext-4);color:var(--sub)}
  .nav-links a.on{color:var(--bg);background:var(--green);font-weight:700}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-cta .link-quiet{display:none}
}

/* ---------- language switch ---------- */

/* ============================================ board card detail panel ===== */
.pnl{display:grid;gap:16px}
.pk{margin:0}
/* Green, not muted. In the canvas the section label is the only coloured
   thing inside an open card, and it is what lets a reader scan straight to
   "Starting pitchers" without reading the two blocks above it. */
.pk h4{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--green);margin:0 0 9px;font-weight:400}
.pkt{width:100%;border-collapse:collapse;font-size:12.5px}
.pkt th{text-align:left;font-weight:400;color:var(--muted);
  padding:5px 10px 5px 0;white-space:nowrap;width:1%}
.pkt td{padding:5px 0 5px 10px;color:var(--txt);width:38%}
.pkt tr+tr th,.pkt tr+tr td{border-top:1px solid var(--line)}
.pkt tr.hd th,.pkt tr.hd td{font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  padding-bottom:2px}
.pkt.fm td b{font-family:var(--sans);font-size:13px}
.pkt.fm td b.good{color:var(--green)} .pkt.fm td b.bad{color:var(--red)}
.pkt.fm td i{display:block;font-style:normal;color:var(--muted);
  font-size:11px;margin-top:1px}
.pnl-note{font-size:13px;color:var(--muted);margin:0;line-height:1.55;
  border-left:2px solid var(--green-dim);padding-left:12px}
.pnl-note b{color:var(--txt);font-family:var(--sans)}
.h2g{display:grid;grid-template-columns:52px 1fr auto;gap:8px;
  font-size:12.5px;padding:4px 0;border-top:1px solid var(--line);
  align-items:baseline}
.h2d{font-family:var(--sans);font-size:11px;color:var(--muted)}
.h2s{color:var(--muted)} .h2s b{color:var(--txt);font-weight:500}
.h2w{color:var(--muted);font-size:11px}
.h2more{font-size:11px;color:var(--muted);padding:3px 0}
/* The starter comparison. Label down the middle, a club above each
   column, and the better number in each row lit. "Better" is per row --
   high is good for strikeouts, low for everything else here -- and W-L
   carries no mark at all, because a record is mostly a report on the
   lineup behind the man. */
/* The hitters table. Names left and every figure right, because a column
   of numbers is only scannable when its digits line up. A row with no
   history is dimmed rather than removed -- see _lineup_table for why. */
.lutbl{width:100%;border-collapse:collapse;font-size:13.5px}
.lutbl th{text-align:left;font-weight:500;color:var(--txt);
  padding:7px 10px 7px 0;white-space:nowrap}
.lutbl td{text-align:right;padding:8px 0 8px 10px;color:var(--sub);
  font-family:var(--sans);white-space:nowrap}
.lutbl tr+tr th,.lutbl tr+tr td{border-top:1px solid var(--line)}
.lutbl tr.hd th,.lutbl tr.hd td{font-family:var(--mono);font-size:9.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  font-weight:400;padding-bottom:3px}
.lutbl .lav{color:var(--txt)}
.lutbl .lz{color:var(--muted)}

.sptbl{width:100%;border-collapse:collapse;margin-bottom:14px}
.sptbl td,.sptbl th{padding:8px 6px;font-size:13.5px}
.sptbl th{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);font-weight:400;
  text-align:center;width:34%}
.sptbl .spv{font-family:var(--sans);color:var(--sub);width:33%}
/* The rule between the season block and tonight's numbers. Without it the
   table reads as one twelve-row list and the reader has no idea which half
   is a career and which is a prediction about tonight. */
.sptbl tr.sep>td{padding:13px 0 5px;text-align:center;font-family:var(--mono);
  font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--green);border-top:1px solid var(--line)}
.sptbl .spv.sm{font-size:11.5px;color:var(--muted)}
.sptbl .spv.good{color:var(--green)}
.sptbl .spv.bad{color:var(--amber)}
.sptbl tr td:first-child{text-align:left}
.sptbl tr td:last-child{text-align:right}
/* After the two alignment rules above, not before: the separator spans all
   three columns and belongs to neither side, and :last-child was winning on
   specificity and pushing it to the right edge. */
.sptbl tr.sep>td{text-align:center}
.sptbl .spv.on{color:var(--green);font-weight:700}
.sptbl tr.hd td{font-size:12px;font-weight:700;letter-spacing:.01em;
  color:var(--txt);font-family:var(--sans)}
.sptbl tr+tr td,.sptbl tr+tr th{border-top:1px solid var(--line)}

/* A starter is a card inside a card in the canvas -- inset one step darker
   than the panel it sits on, with its own border. It reads as an object
   rather than as another line of the paragraph above it. */
.pst{background:var(--panel-2);border:1px solid var(--line);
  padding:11px 12px;margin-top:8px}
.pst:first-of-type{margin-top:0}
.pst-n{font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--txt)}
.pst-v{font-family:var(--sans);font-size:12px;color:var(--sub);
  line-height:1.6;margin-top:6px}
.ppr{padding:7px 0;border-top:1px solid var(--line)}
.ppr:first-of-type{border-top:none}
.ppr-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.ppr-n{font-size:13px;color:var(--txt)}
.ppr-v{font-size:11px;letter-spacing:.03em;color:var(--muted);white-space:nowrap}
.ppr-v.good{color:var(--green)} .ppr-v.bad{color:var(--red)}
.ppr-line{font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:2px}
.ppr-line b{font-family:var(--sans);color:var(--txt);font-weight:500}
.ppr-line .good{color:var(--green)} .ppr-line .bad{color:var(--red)}
@media (max-width:560px){
  .pkt th{white-space:nowrap;width:1%}
  .h2g{grid-template-columns:46px 1fr auto}
}

/* ============================================= prop card matchup panel ==== */
.mx{border-top:1px solid var(--line)}
.mx summary{list-style:none;cursor:pointer;padding:10px 15px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);display:flex;
  align-items:center;justify-content:space-between;gap:8px}
.mx summary::-webkit-details-marker{display:none}
.mx summary::after{content:"";width:7px;height:7px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s ease}
.mx[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.mx summary:hover{color:var(--txt);background:var(--panel-2)}
.mx summary:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
.mxb{padding:2px 15px 14px}
/* Green, matching the slate card's detail labels. The two boards' open
   cards now use one vocabulary: a green mono label over each block. */
.mxh{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--green);margin:16px 0 9px}
.mxb>.mxh:first-child{margin-top:0}
.mxg{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line)}
.mxg>div{background:var(--panel);padding:7px 6px;display:flex;
  flex-direction:column;gap:3px;min-width:0}
.mxg span{font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted)}
.mxg b{font-family:var(--sans);font-size:15px;color:var(--txt);font-weight:600}
.mxg.four{grid-template-columns:repeat(4,1fr)}
/* A small sample is shown, not hidden -- but it is not shown at the same
   weight as a number with six hundred plate appearances behind it. */
.mxg.dim b{color:var(--sub)}
/* The xwOBA denominator, which is the one thing the grid above cannot say
   for itself: StatsAPI gives the career line and Savant gives the Statcast
   rows, and the two rarely cover the same plate appearances. A caption, not
   a sentence. */
.mxcap{font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-top:7px}
.mxn{font-size:13px;line-height:1.6;color:var(--sub);margin:8px 0 0}
.mxn.warn{font-style:italic}
.mxt{width:100%;border-collapse:collapse;font-size:13.5px}
.mxt th{text-align:left;font-weight:400;color:var(--muted);padding:6px 8px 6px 0}
.mxt td{padding:6px 0 6px 8px;text-align:right;font-family:var(--sans);
  color:var(--txt)}
.mxt td.r,.mxt td.p{color:var(--muted);font-size:11.5px;white-space:nowrap}
.mxt tr{border-bottom:1px solid var(--line)}
.mxt tr.on{background:var(--panel-2)}
.mxt tr.on th{color:var(--txt);box-shadow:inset 2px 0 0 var(--green);
  padding-left:8px}
.mxt tr.avg{border-bottom:none}
.mxt tr.avg th,.mxt tr.avg td{color:var(--muted);font-size:11.5px;padding-top:8px}
.verdict{display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;margin:0;padding:9px 15px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  border-top:1px solid var(--line);background:var(--panel-2)}
.verdict.good{color:var(--green)} .verdict.bad{color:var(--red)}
.verdict .vd{font-size:10px;letter-spacing:.06em;text-transform:none;
  color:var(--muted)}
.pb-card{display:flex;flex-direction:column}
.pb-card .verdict{margin-top:auto}
@media (max-width:520px){
  .mxg>div{padding:6px 4px}
  .mxg span{font-size:8.5px;letter-spacing:.02em}
  .mxg b{font-size:12.5px}
  .mxt{font-size:11.5px}
  .mxt td.r,.mxt td.p{font-size:10.5px}
}

/* A starter's win-loss, beside his name on both cards. Recessive on purpose:
   it is the number readers look for and the one that tells them least. */
.gwl{font-family:var(--sans);color:var(--muted)}
.pb-wl{font-family:var(--sans);font-size:12px;color:var(--muted);
  font-weight:400;margin-left:2px}

/* ==================================================================== +EV = */
/* The methodology page. Its tables are generated from config.py, so the
   styling has to survive a threshold changing length under it. */
.sp{max-width:78ch}
.sp h2{font-size:19px;margin:40px 0 6px;letter-spacing:-.01em}
.sp h2:first-child{margin-top:0}
.sp p{font-size:15px;line-height:1.66;color:var(--sub);margin:10px 0}
.sp b.shl{color:var(--txt);font-weight:600}
.sp .ek{font-family:var(--sans);color:var(--txt)}
.stbl{width:100%;border-collapse:collapse;margin:16px 0;font-size:13.5px}
.stbl th{text-align:left;font-weight:400;color:var(--txt);
  padding:11px 14px 11px 0;vertical-align:top;white-space:nowrap;width:1%;
  border-top:1px solid var(--line)}
.stbl td{padding:11px 0 11px 14px;vertical-align:top;
  border-top:1px solid var(--line)}
.stbl td.en{font-family:var(--sans);color:var(--txt);white-space:nowrap;
  width:1%;text-align:right}
.stbl td.en.hd{color:var(--muted);font-size:11px}
.gn{font-family:var(--sans);font-size:10px;color:var(--muted);margin-right:9px}
.sval{white-space:nowrap;width:1%}
.skey{display:block;font-family:var(--sans);font-size:10px;color:var(--muted);
  letter-spacing:.01em}
.snum{display:block;font-family:var(--sans);font-size:13px;color:var(--green);
  margin-top:2px;white-space:nowrap}
.stbl td.snum{width:1%;padding-top:11px}
.swhy{color:var(--sub);line-height:1.6;font-size:13.5px}
.sscroll{overflow-x:auto}
.sum{border:1px solid var(--line);background:var(--panel);margin:18px 0;
  font-size:14px}
.sum div{display:flex;justify-content:space-between;gap:16px;padding:10px 16px;
  align-items:baseline}
.sum div+div{border-top:1px solid var(--line)}
.sum div span:last-child{font-family:var(--sans);color:var(--txt);
  white-space:nowrap}
.sum div.tot{background:var(--panel-2)}
.sum div.tot span:last-child{color:var(--green);font-size:15px}
.swork{border:1px solid var(--line);background:var(--panel);margin:18px 0}
.swork-h{padding:11px 15px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.swork-r{display:flex;justify-content:space-between;gap:14px;padding:8px 15px;
  font-size:13.5px;align-items:baseline}
.swork-r+.swork-r{border-top:1px solid var(--line)}
.swork-r span:last-child{font-family:var(--sans);color:var(--green);
  white-space:nowrap}
.swork-r.fail{background:var(--panel-2)}
.swork-r.fail span:last-child{color:var(--red)}
.swork-r.fail span:first-child{color:var(--txt)}
.snote{border-left:2px solid var(--line-2);padding:2px 0 2px 16px;margin:18px 0}
.snote p{font-size:14px;margin:8px 0}
.sp p.sbig{font-family:var(--sans);font-size:34px;color:var(--txt);
  letter-spacing:-.02em;margin:14px 0 0}
.sp p.sbig small{display:block;font-family:var(--sans);font-size:13px;
  color:var(--muted);letter-spacing:0;margin-top:4px}
@media (max-width:560px){
  /* The prose tables stack -- a full sentence cannot share a row with a
     label at this width. The numeric one must NOT: four short columns fit,
     and stacking them makes the column of unlabelled figures this page
     exists to argue against. */
  .stbl:not(.num),.stbl:not(.num) tbody,.stbl:not(.num) tr,
  .stbl:not(.num) th,.stbl:not(.num) td{display:block;width:auto}
  .stbl:not(.num) th{border-top:1px solid var(--line);padding:12px 0 2px;
    white-space:normal}
  .stbl:not(.num) td{border-top:none;padding:2px 0}
  .stbl.num{font-size:12.5px}
  .stbl.num th{padding-right:0}
  .stbl.num td{padding-left:10px}
  .skey,.snum{display:inline-block;margin-right:10px}
}

/* ============================================== home runs and form ======== */
.hr-card .pb-name{margin-bottom:10px}
.hrl{display:grid;grid-template-columns:1fr auto;gap:2px 12px;
  padding:9px 0;border-top:1px solid var(--line)}
.hrl-k{font-size:12.5px;color:var(--muted)}
.hrl-v{font-family:var(--sans);font-size:14px;color:var(--txt);text-align:right;
  white-space:nowrap}
.hrl-v b{font-weight:600}
.hrl-r{font-family:var(--sans);font-size:10.5px;color:var(--muted)}
.hrl-m{font-size:10.5px;color:var(--muted);text-align:right;white-space:nowrap}
/* The verdict tints the number and adds a rule at the left edge, so the
   colour is never the only thing saying which way this one goes. */
.hrl.good{box-shadow:inset 3px 0 0 var(--green);padding-left:9px}
.hrl.good .hrl-v{color:var(--green)}
.hrl.bad{box-shadow:inset 3px 0 0 var(--red);padding-left:9px}
.hrl.bad .hrl-v{color:var(--red)}
.hr-thin{font-size:11.5px;color:var(--muted);font-style:italic;
  line-height:1.5;margin:10px 0 0}
.ftbl{width:100%;border-collapse:collapse;font-size:13.5px}
.ftbl th{text-align:left;font-weight:500;color:var(--txt);padding:9px 12px 9px 0;
  white-space:nowrap}
.ftbl td{padding:9px 0 9px 12px;text-align:right;font-family:var(--sans);
  color:var(--txt);white-space:nowrap}
.ftbl tr{border-top:1px solid var(--line)}
.ftbl tr.hd{border-top:none}
.ftbl tr.hd th,.ftbl tr.hd td{font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  font-weight:400;padding-bottom:6px}
.ftbl td.ft-n{text-align:left;color:var(--muted);font-size:11px;
  padding-left:0;padding-right:10px;width:1%}
.ftbl td.ft-p{color:var(--muted)}
.ftbl td.ft-s.good{color:var(--green)}
.ftbl td.ft-s.bad{color:var(--red)}

/* ============================== shared player-card boards (all sports) ==== */
/* ---------- the game picker on the NFL prop boards ----------
   A row of the week's fixtures that both jumps to a game and filters to
   it. Horizontally scrollable rather than wrapped: sixteen fixtures on a
   phone is four wrapped lines, and four lines of navigation is the thing
   the third nav row was going to be criticised for. */
.gsel{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding:0 0 14px;margin:0 0 4px}
.gsel::-webkit-scrollbar{display:none}
.gchip{flex:0 0 auto;font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);background:var(--panel-2);
  padding:9px 13px;white-space:nowrap;transition:.15s}
.gchip:hover{color:var(--txt);border-color:var(--line-2)}
.gchip.on{color:var(--bg);background:var(--green);border-color:var(--green);
  font-weight:700}
/* The fixture heading over each group. It is what the reader was missing:
   sixty-four player cards in one grid with the matchup in 10px mono under
   each name is not a board, it is a list. */
.gsec{margin:0 0 30px}
.gsec-h{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;padding:0 0 12px;margin-bottom:14px;
  border-bottom:1px solid var(--line-2)}
.gsec-h h3{font-size:19px;font-weight:700;letter-spacing:-.02em;
  color:var(--txt);margin:0}
.gsec-h h3 span{color:var(--muted);font-weight:400}
.gsec-h>span{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap}
.gsec[hidden]{display:none}

/* The list boards -- home runs, hits, and the four NFL boards. They share
   the canvas card's head, sub-line and rules; what they do not share is a
   single 30px figure, because their unit is several players under one
   pitcher or one defence. Each player row is the card's number in
   miniature: name left, chance right, in the green the rest of the site
   uses for "ours". */
.bat-park{font-family:var(--sans);font-size:10.5px;color:var(--muted);
  white-space:nowrap}
.bat-park.good{color:var(--green)} .bat-park.bad{color:var(--red)}
.bats{border-top:1px solid var(--line)}
.bat{display:grid;grid-template-columns:1fr auto;gap:2px 14px;
  padding:12px 0;border-bottom:1px solid var(--line)}
.bat:last-child{border-bottom:none;padding-bottom:2px}
.bat-n{font-size:15px;color:var(--txt);font-weight:700;letter-spacing:-.015em}
/* Sans, and bigger. Same reasoning as the slate card's probability: this is
   the number the row exists to deliver, and the mono was shrinking it. */
.bat-c{font-family:var(--sans);font-size:21px;font-weight:700;
  letter-spacing:-.025em;color:var(--green);
  text-align:right;white-space:nowrap;grid-row:span 2;line-height:1}
/* "144 hits in 618 PA (23.3%)" is a supporting STAT, not a label, and it
   was set at label size in the label colour. 12px in --sub is 11.31:1
   against 5.80:1, and the mono digits are actually readable at a glance. */
.bat-w{font-family:var(--sans);font-size:12px;color:var(--sub);
  letter-spacing:.01em;line-height:1.5}
/* The career line against tonight's starter. Almost always a handful of
   plate appearances, so it sits at label weight rather than competing with
   the projection above it, and nothing on the card is derived from it. */
.bvp{font-family:var(--sans);font-size:11.5px;color:var(--sub);
  letter-spacing:.01em;margin-top:4px;line-height:1.5}
.bvp.none{color:var(--muted)}
/* The strip spans both columns: the chance sits in column two across two
   rows, and a strip confined to column one would be half a card wide and
   read as belonging to the line above it rather than to the hitter. */
.bat .hrs{grid-column:1 / -1;margin-top:8px}
/* The position badge on the NFL yardage/touchdown cards. Named .ppos, not
   .pos -- the bare .pos rule above (monthly chart bars) would otherwise
   apply its height:180px flex-column layout to this inline badge. */
.ppos{font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-left:6px}


/* ================================================= the list board =========
   The pitchers prop board, rebuilt from the design doc's edge-sorted list.
   What it replaces: a grid of cards, two per phone screen, most of each
   card's height spent on a disclosure button and a projection set at 30px.
   The reader's question is which of tonight's numbers disagree with the
   market, and a card grid made that question cost one scroll per starter.

   The row IS the summary of a <details>, so the panel that used to sit
   behind a "Prop detail +" button is still one tap away and costs no
   height at all. */
.bhead{background:var(--bg-2)}
.bhead .wrap{padding:18px 28px 16px}
.bhead-in{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px}
.bhead-t{min-width:0}
/* 22px, not clamp(32px,4.2vw,50px). The tab above already says which board
   this is; at display size the title was buying nothing and costing a row. */
.bhead h1{font-size:22px;line-height:1.05;letter-spacing:-.03em;margin:0}
.bhead-meta{font-size:12.5px;color:var(--muted);margin-top:5px;
  letter-spacing:0}
.bhead-n{text-align:right;white-space:nowrap}
.bhead-n b{display:block;font-size:22px;font-weight:700;line-height:1;
  letter-spacing:-.02em;color:var(--green)}
.bhead-n span{display:block;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  margin-top:5px}

.pl-list{border-top:1px solid var(--line)}
.pl{border-bottom:1px solid var(--line);background:transparent}
.pl>summary{list-style:none;cursor:pointer;display:grid;
  grid-template-columns:minmax(0,1fr) 68px;gap:12px;align-items:center;
  padding:13px 2px}
.pl>summary::-webkit-details-marker{display:none}
.pl>summary:hover{background:var(--ext-5)}
.pl[open]>summary{background:var(--ext-5)}
.pl-main{min-width:0}
.pl-name{display:flex;align-items:baseline;gap:8px;min-width:0}
/* The name gets the room first and the badge shrinks, not the other way
   round. A board of "Cristi..." and "Jar..." is not a board. */
.pl-name>span{flex:0 1 auto;min-width:0;font-weight:600;font-size:16.5px;
  letter-spacing:-.015em;color:var(--txt);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.pl-badge{flex:0 0 auto;font-family:var(--mono);font-style:normal;
  font-size:9.5px;letter-spacing:.06em;padding:2px 5px;white-space:nowrap;
  color:var(--green);background:rgba(91,227,156,.13)}
.pl-badge.hit{color:var(--bg);background:var(--green)}
.pl-badge.miss{color:var(--sub);background:var(--ext-1)}
.pl-badge.flag{color:var(--amber);background:rgba(242,178,60,.14)}
/* A sentence, in the sans, at a size meant to be read. */
.pl-meta{display:flex;align-items:baseline;gap:7px;font-size:12.5px;
  color:var(--muted);margin-top:3px;min-width:0}
.pl-meta>span:first-child{white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.pl-bar{position:relative;height:6px;background:var(--ext-4);margin-top:9px}
.pl-fill{position:absolute;left:0;top:0;bottom:0;background:var(--line-2)}
.pl-tick{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--txt);
  box-shadow:0 0 0 1px rgba(8,9,11,.85)}
/* Both ends of the axis and the market's own number, printed. A fill with
   no scale under it is decoration; this is the difference between a bar
   the reader can measure and one they have to trust. */
.pl-scale{display:flex;justify-content:space-between;gap:8px;
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  color:var(--muted);margin-top:5px}
.pl-edge{text-align:right}
.pl-edge b{display:block;font-size:20px;font-weight:700;line-height:1;
  letter-spacing:-.02em;color:var(--muted)}
.pl-edge span{display:block;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  margin-top:5px;line-height:1.3}
/* Our own number, small, under the edge. The design doc drops it; it stays
   because this board's whole claim is a projection, and a page that never
   prints one is arguing from a difference alone. */
.pl-edge em{display:block;font-style:normal;font-size:12.5px;
  color:var(--sub);margin-top:6px;font-weight:600}
.pl-edge em i{font-style:normal;color:var(--dim);font-weight:400;
  margin-left:2px}
.pl-up .pl-fill{background:var(--green)}
.pl-up .pl-edge b{color:var(--green)}
.pl-down .pl-fill{background:var(--amber)}
.pl-down .pl-edge b{color:var(--amber)}
.pl-done .pl-fill{background:var(--ext-1)}
/* Settled rows sink and dim: they are a result, not a call. .66 puts the
   muted token at 4.8:1, inside the --dim allowance and above its floor --
   and nothing in a dimmed row is the only place a number appears. */
.pl-done{opacity:.66}
.pl-done:hover,.pl-done[open]{opacity:1}
.pl>.gmore-in{padding:0 2px 18px}
.pl[hidden]{display:none}

@media(max-width:390px){
  .pl>summary{grid-template-columns:minmax(0,1fr) 56px;gap:10px}
  .pl-name>span{font-size:15.5px}
  .pl-edge b{font-size:18px}
}


/* ---------- deferred rendering on the long boards ----------
   nfl/td.html is 295 KB of markup after the stylesheet came out of it: 128
   players, each with a card and a disclosure panel, and the browser lays out
   every one of them before it paints the first. content-visibility lets it
   skip the ones nobody has scrolled to yet.

   Only from the third fixture section and the sixth list row down. Applying
   it to what is already on screen makes the browser evaluate a visibility
   boundary before its first paint, which costs more than it saves.

   contain-intrinsic-size is not optional: without it a skipped element
   collapses to zero height and the scrollbar jumps as you scroll. The `auto`
   keyword lets the browser remember the real height once it has drawn the
   element once, and fall back to the estimate before that. */
.gsec:nth-of-type(n+3){
  content-visibility:auto;
  contain-intrinsic-size:auto none auto 720px;
}
.pl-list>.pl:nth-child(n+6){
  content-visibility:auto;
  contain-intrinsic-size:auto none auto 128px;
}

/* ---------- the hit strip on a prop row ----------
   How often this player cleared the number, in his last five and last ten,
   with the market's own implied probability beside it. The whole argument of
   the site in four cells, so the board can be read without opening a row.

   The tint is the seven-step scale from the design research, recoloured to
   this site's green and red. 50% is deliberately left uncoloured: a coin
   flip is not a signal, and a scale that tints the midpoint puts a colour on
   every row whether or not there is anything to see. */
.hrs{display:flex;gap:4px;margin-top:9px}
.hr{flex:1 1 0;min-width:0;text-align:center;padding:5px 2px 6px;
  font-size:12px;font-weight:600;color:var(--txt);background:var(--ext-4)}
.hr i{display:block;font-style:normal;font-family:var(--mono);font-size:9px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  font-weight:400;margin-bottom:2px}
/* The raw fraction, beside the percentage. Three-for-three and ten-for-ten
   are both "100%" and are not the same claim. */
.hr u{text-decoration:none;font-weight:400;color:var(--sub);font-size:10.5px}
.hr.h3{background:rgba(91,227,156,.34)}
.hr.h2{background:rgba(91,227,156,.22)}
.hr.h1{background:rgba(91,227,156,.12)}
.hr.mid{background:var(--panel-2)}
.hr.l1{background:rgba(255,107,77,.12)}
.hr.l2{background:rgba(255,107,77,.22)}
.hr.l3{background:rgba(255,107,77,.34)}
.hr.na{background:var(--ext-5);color:var(--muted)}
/* The market's cell is outlined rather than filled: it is the thing being
   compared against, not another measurement of ours. */
.hr.mkt{background:transparent;border:1px solid var(--line-2)}

/* The matchup verdict, on the row's face. */
.mxb{flex:0 0 auto;font-style:normal;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.06em;padding:2px 5px;white-space:nowrap;
  color:var(--sub);background:var(--ext-1)}
.mxb.good{color:var(--bg);background:var(--green)}
.mxb.bad{color:var(--amber);background:rgba(242,178,60,.15)}
@media(max-width:390px){
  .hrs{gap:3px}
  .hr{font-size:11.5px;padding:4px 1px 5px}
  .hr u{font-size:10px}
}