/* ---------- Palette ----------
   Repainted Sept 9 in the colors of a ballpark, and then turned UP the same
   day, because the first repaint got the hues right and left the whole thing
   sitting in the dark. A night game is not a dark room. It is grass lit by a
   bank of lights bright enough to read a program under, clay that glows warm
   orange from forty rows up, and chalk lines so white they look drawn in
   paint. That is the target now: brighter under the lights, not daylight.

   Everything moved up together so the steps between surfaces survive. The
   ground is a real green rather than a green-black, each surface above it is
   a step you can actually see, and the four league colors are fully
   saturated: clay for the majors, gold for Little League, outfield green for
   travel ball, and the pale blue of a June sky in Nebraska for college.

   Dark is the default and light is the variant. */
:root{
  color-scheme: dark;

  /* The ground and the surfaces on it. Night grass under the lights. */
  --bg: #112318;
  --bg-2: #163020;
  --surface: #21402e;
  --surface-2: #2c543d;
  --surface-3: #396c4d;

  --line: #457755;
  --line-soft: #2e503c;

  --ink: #f7fdf5;
  --ink-soft: #e0eeda;
  --ink-faint: #bcd2b6;

  /* Infield clay in full light. This is the color doing most of the work on
     the page and it was the thing reading dullest, so it moved the furthest. */
  --accent: #ff8f4a;
  --accent-hot: #ffb375;
  --accent-ink: #2a1002;
  --accent-soft: rgba(255,143,74,.18);
  --accent-line: rgba(255,143,74,.48);

  /* Little League gold, and travel ball's watered outfield. */
  --accent-2: #ffd23f;
  --accent-2-soft: rgba(255,210,63,.17);
  --accent-3: #46e58a;
  --accent-3-soft: rgba(70,229,138,.16);

  /* College. A fourth league tab needs a fourth color that is not any of the
     three already in use and not the purple that Tools/Games took. The sky
     over Omaha in June, which is the only thing this section is about. */
  --college: #5ad8f2;
  --college-soft: rgba(90,216,242,.18);
  --college-deep: #22a6c2;

  --pos: #46e58a;
  --neg: #ff6f5f;

  /* ---- The ballpark kit ------------------------------------------------
     Named parts of a field, so the theming layer at the foot of this file
     draws the whole park from one place and a repaint stays a repaint. */
  --chalk: #f3f8f0;                       /* a freshly laid foul line */
  --chalk-soft: rgba(243,248,240,.20);
  --clay-deep: #b5602d;                   /* the shadow side of the infield */
  --clay-lit: #ff9f5e;
  --grass-lit: #3fa562;                   /* the light stripe of a mow */
  --grass-dark: #2c7546;                  /* the dark one */
  --seam: #ef4b41;                        /* the red stitching on a ball */
  --seam-soft: rgba(239,75,65,.42);
  --bulb: #ffe27a;                        /* a lit scoreboard bulb */
  --bulb-off: rgba(255,226,122,.16);
  --mow: rgba(255,255,255,.020);           /* how far a mow stripe lifts */
  --lights: rgba(255,232,180,.16);         /* the bloom off the light banks */
  --dugout: rgba(0,0,0,.30);

  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;

  --shadow: none;
  --shadow-lift: 0 1px 0 rgba(255,255,255,.05) inset, 0 10px 30px rgba(0,0,0,.44);
  --shadow-warm: 0 1px 0 rgba(255,255,255,.06) inset, 0 12px 34px rgba(0,0,0,.42), 0 0 0 1px rgba(255,143,74,.14);

  /* Typography, reset Sept 3. The old pairing was a trendy serif over IBM Plex,
     which is the default look of every AI-built page this year and reads as
     exactly that. Archivo is a grotesque with real weight to it, closer to the
     lettering on a scoreboard or a jersey number than to a design system, and
     Archivo Narrow gives stat tables the condensed column of figures that
     sports data actually uses. Both carry tabular numerals, which is the
     property that matters most here: a stat column has to line up. */
  /* Type scale, lifted Sept 3. Everything was set for a dense dashboard and
     read as small on a laptop: stat labels at 11px, table text at 13px. A
     sports app is read at arm's length and often on a phone, so the base moves
     up and the small labels move up more, since those were the worst of it. */
  /* Type scale, lifted again Sept 8. Connor's read was that text across the
     site was hard to see and that the lettering itself looked like the default
     of an AI-built page. Two separate problems, fixed separately: the SIZE
     floor moves up here, and the FACES change below. Nothing on this site is
     allowed under .78rem now, which is the line most of the small labels were
     sitting under. */
  --step-0: 1.12rem;
  --step-1: 1.28rem;
  --step-label: .96rem;
  --step-small: 1.04rem;

  /* Typography, reset Sept 10.
     The last set was Sora over Plus Jakarta Sans, and that pairing is the
     house style of every AI-built page on the internet this year: a geometric
     techno display over the same neutral grotesque everybody else is using.
     Connor read it exactly that way, which is the only test that matters.

     Three faces now, and all three come out of print rather than out of a
     design system:
       Bricolage Grotesque, on headings. A real drawn grotesque with visible
       hand in it - uneven apertures, a tight r, a g that nobody generated.
       It reads like a masthead, which is what a headline on a baseball site
       should read like.
       Libre Franklin, on body copy. It is Franklin Gothic, which is the face
       American newspapers set their sports pages in for eighty years. Tall
       x-height, so the same nominal size is simply bigger on the screen, and
       nobody has ever mistaken it for a default.
       Barlow Semi Condensed, on figures. A stat column has to be condensed
       and tabular. This one is also the lettering on a jersey number, which
       Archivo Narrow was not. */
  /* Typography, reset Sept 15. Bigger, and out of the newspaper.
     Big Shoulders Display on headings: a condensed athletic face cut for
     Chicago's sports and industrial signage, heavy shoulders, the letters a
     stadium scoreboard would use if it could pick. Barlow on body copy, a
     wide-set grotesque drawn off California highway lettering, big x-height,
     set a size up from where the site was. Barlow Condensed on figures so a
     stat column is a column. All three carry tabular numerals. */
  --display-big: "Big Shoulders Display", "Barlow Condensed", "Impact", ui-sans-serif, system-ui, sans-serif;
  /* Small display text (card names, club names, sub-heads) is Barlow Condensed:
     Big Shoulders is a poster face and turns to mush under about 28px. */
  --display: "Barlow", ui-sans-serif, system-ui, sans-serif;
  --body: "Barlow", "Libre Franklin", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "Barlow Semi Condensed", "Barlow", ui-sans-serif, system-ui, sans-serif;
}

/* The light variant is a one o'clock start: chalk and warm sand rather than
   paper white, with the same four league colors darkened only as far as they
   need to go to hold their contrast on a pale ground. */
@media (prefers-color-scheme: light){
  :root{
    color-scheme: light;

    --bg: #f4f8ef;
    --bg-2: #e9f0e2;
    --surface: #ffffff;
    --surface-2: #f2f7ec;
    --surface-3: #e3ecdb;

    --line: #cddcc3;
    --line-soft: #e2ebd9;

    --ink: #0b120a;
    --ink-soft: #33422f;
    --ink-faint: #4c5e48;

    --accent: #c2571a;
    --accent-hot: #9e4310;
    --accent-ink: #ffffff;
    --accent-soft: rgba(194,87,26,.12);
    --accent-line: rgba(194,87,26,.34);

    --accent-2: #a67a06;
    --accent-2-soft: rgba(166,122,6,.14);
    --accent-3: #14874a;
    --accent-3-soft: rgba(20,135,74,.13);

    --college: #0d8499;
    --college-soft: rgba(13,132,153,.14);
    --college-deep: #095e6e;

    --pos: #14874a;
    --neg: #c33529;

    --chalk: #ffffff;
    --chalk-soft: rgba(16,25,15,.14);
    --clay-deep: #9d4a1c;
    --clay-lit: #e0763a;
    --grass-lit: #6fbf88;
    --grass-dark: #3f9a5f;
    --seam: #d23c33;
    --seam-soft: rgba(210,60,51,.40);
    --bulb: #b8860b;
    --bulb-off: rgba(184,134,11,.18);
    --mow: rgba(20,90,45,.032);
    --lights: rgba(255,214,130,.16);
    --dugout: rgba(16,25,15,.06);

    --shadow-lift: 0 1px 2px rgba(15,32,18,.06), 0 10px 26px rgba(15,32,18,.08);
    --shadow-warm: 0 1px 2px rgba(15,32,18,.06), 0 12px 30px rgba(15,32,18,.09), 0 0 0 1px rgba(194,87,26,.10);
  }
}

*{ box-sizing: border-box; }
html,body{ height: 100%; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-variant-numeric: tabular-nums;
  font-size: 17.5px;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  /* NOT antialiased. -webkit-font-smoothing: antialiased shaves roughly a
     third of a pixel off every stroke, and light text on a dark ground is
     already optically thinner than the same weight the other way round. The
     two together are most of "thin and faded". Subpixel rendering is the
     default and it is what makes text on this site look like text. */
  -webkit-font-smoothing: auto;
  text-rendering: optimizeLegibility;
}

h1,h2{
  font-family: var(--display);
  letter-spacing: .005em;
  font-weight: 800;
  text-wrap: balance;
  margin: 0;
}

/* ---------- Entrance animations ---------- */
@keyframes riseIn{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes ballSpinIn{
  from{ opacity: 0; transform: rotate(-50deg) scale(.4); }
  to{ opacity: 1; transform: rotate(0) scale(1); }
}
@keyframes dotBounce{
  0%, 60%, 100%{ transform: translateY(0); opacity: .5; }
  30%{ transform: translateY(-4px); opacity: 1; }
}
/* A reply's own paragraphs, headings, and bullets slide in one at a
   time (see STAGGER_STEP_MS in app.js) instead of the whole answer
   snapping into view as one dense block — slower and gentler than the
   message bubble's own riseIn above so it reads as the answer unfolding,
   not just arriving. */
@keyframes blockIn{
  from{ opacity: 0; transform: translateY(9px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* ---------- Brand header ---------- */
header.brand{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px clamp(18px, 4vw, 40px);
  border-bottom: 1px dashed var(--line);
  flex: none;
  animation: riseIn .5s ease-out both;
}
.brand-mark{ display: flex; align-items: center; gap: 10px; }
.brand-mark .ball{
  font-size: 20px;
  display: inline-block;
  animation: ballSpinIn .6s cubic-bezier(.2,.9,.3,1.3) .15s both;
}
.brand-titles{
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.brand-mark .wordmark{
  font-family: var(--display);
  letter-spacing: -.02em;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.01em;
}
.brand-mission{
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: .84rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
/* One site, two tabs — MLB and Little League share this page rather than
   living on separate ports, switching which .panel below is visible. */
.league-tabs{
  display: flex;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 3px;
}
.league-tab{
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: .84rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: transparent;
  border: none;
  border-radius: 7px;
  padding: 7px 13px;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.league-tab:hover{ color: var(--ink); }
.league-tab.active{
  background: var(--surface);
  color: var(--accent);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

/* Each tab is a full panel (its own stage + composer, its own
   conversation) — only one is ever visible. [hidden] needs to be spelled
   out explicitly here because .panel's own `display: flex` below would
   otherwise outrank the browser's default [hidden]{display:none} rule at
   equal specificity and the "hidden" panel would still render. */
.panel{
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
}
.panel[hidden]{ display: none; }

/* The transition itself, when switching tabs — a real slide + fade
   rather than an instant cut, direction-aware so it reads as moving
   between two places rather than just refreshing content. */
@keyframes panelInRight{
  from{ opacity: 0; transform: translateX(18px); }
  to{ opacity: 1; transform: translateX(0); }
}
@keyframes panelInLeft{
  from{ opacity: 0; transform: translateX(-18px); }
  to{ opacity: 1; transform: translateX(0); }
}
.panel.panel-enter-right{ animation: panelInRight .4s cubic-bezier(.16,.8,.24,1); }
.panel.panel-enter-left{ animation: panelInLeft .4s cubic-bezier(.16,.8,.24,1); }

/* ---------- Stage ---------- */
.stage{
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 24px);
  min-height: 0;
}

.intro{
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 18px;
  padding: 40px 0;
}
.stage:not(.stage--empty) .intro{ display: none; }

/* Faint diamond watermark — the one big graphic gesture on an otherwise
   plain empty state, so the page reads as "baseball site" before anyone
   types a word, not a blank search box. */
.intro::before{
  content: "";
  position: absolute;
  top: 48%;
  left: 50%;
  width: min(58vw, 400px);
  height: min(58vw, 400px);
  transform: translate(-50%, -50%) rotate(45deg);
  border: 2px solid var(--ink);
  border-radius: 8px;
  opacity: .05;
  pointer-events: none;
  z-index: 0;
}
.intro > *{ position: relative; z-index: 1; }

.intro h1{
  font-size: clamp(1.8rem, 4.4vw, 2.5rem);
  max-width: 16ch;
  animation: riseIn .55s ease-out .1s both;
}
.intro .sub{
  color: var(--ink-soft);
  max-width: 44ch;
  font-size: 1.02rem;
  animation: riseIn .55s ease-out .2s both;
}

.prompts{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 560px;
  margin-top: 6px;
}
.prompt-chip{
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 13px;
  cursor: pointer;
  text-align: left;
  box-shadow: var(--shadow);
  transition: border-color .15s ease, color .15s ease, transform .1s ease, box-shadow .15s ease;
  animation: riseIn .5s ease-out both;
}
.prompt-chip:nth-child(1){ animation-delay: .28s; }
.prompt-chip:nth-child(2){ animation-delay: .34s; }
.prompt-chip:nth-child(3){ animation-delay: .40s; }
.prompt-chip:nth-child(4){ animation-delay: .46s; }
.prompt-chip:nth-child(5){ animation-delay: .52s; }
.prompt-chip:hover{ border-color: var(--accent-2); color: var(--ink); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(27,36,48,.1); }
.prompt-chip:active{ transform: translateY(1px); }

/* ---------- Thread ---------- */
.thread{
  flex: 1;
  display: none;
  flex-direction: column;
  gap: 18px;
  padding: 24px 0 32px;
  overflow-y: auto;
}
.stage:not(.stage--empty) .thread{ display: flex; }

.msg{
  display: flex;
  gap: 10px;
  max-width: 88%;
  animation: riseIn .35s ease-out both;
}
.msg.user{ align-self: flex-end; flex-direction: row-reverse; }
.msg.assistant{ align-self: flex-start; }

.msg .avatar{
  flex: none;
  width: 28px; height: 28px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  margin-top: 2px;
}
.msg.assistant .avatar{ background: var(--accent-soft); color: var(--accent); }
.msg.user .avatar{ background: var(--surface-2); color: var(--ink-soft); }

.msg .bubble{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.6;
  box-shadow: var(--shadow);
}
.msg.user .bubble{
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.msg.assistant .bubble{
  color: var(--ink);
  border-left: 3px solid var(--accent);
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.msg.pending .bubble{ padding: 13px 16px; }

.bubble p{ margin: 0 0 10px; }
.bubble p:last-child{ margin-bottom: 0; }

.bubble .block-in{
  opacity: 0;
  animation: blockIn .7s cubic-bezier(.16,.8,.24,1) both;
}

/* First sentence of an assistant reply reads as a headline, not just the
   start of a paragraph — this is the "headline stat line in plain English"
   idea from the brief, applied to every answer, not just player profiles. */
.bubble p.headline{
  font-family: var(--display);
  letter-spacing: -.02em;
  font-weight: 600;
  font-size: 1.1em;
  line-height: 1.38;
  color: var(--ink);
}
.msg.user .bubble p.headline{ color: var(--bg); }

/* When the model structures a multi-part answer (career breakdown, a
   comparison), it comes through as real headings and lists instead of
   raw markdown symbols or a wall of text — this is the "organized"
   rendering, built to look intentional rather than like leftover ** and
   - characters. */
.bubble p.section-head{
  margin: 16px 0 6px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: .84em;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent-2);
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.bubble p.section-head:first-child{ margin-top: 0; padding-top: 0; border-top: none; }
.msg.user .bubble p.section-head{ color: var(--bg); opacity: .8; border-top-color: rgba(255,255,255,.25); }

.bubble ul.rich-list{
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bubble ul.rich-list:last-child{ margin-bottom: 0; }
.bubble ul.rich-list li{
  position: relative;
  padding-left: 18px;
  line-height: 1.5;
}
.bubble ul.rich-list li::before{
  content: "◆";
  position: absolute;
  left: 0;
  top: .05em;
  font-size: .84em;
  color: var(--accent-2);
}
.msg.user .bubble ul.rich-list li::before{ color: rgba(255,255,255,.6); }

.bubble strong{ font-weight: 600; color: var(--ink); }
.msg.user .bubble strong{ color: var(--bg); }

/* Cited numbers get pulled out of the sentence visually — a real stat,
   not just another word. */
.bubble .stat{
  display: inline-block;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-variant-numeric: tabular-nums;
  font-size: .89em;
  font-weight: 500;
  color: var(--accent-2);
  background: var(--accent-2-soft);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}
.msg.user .bubble .stat{
  color: var(--bg);
  background: rgba(255,255,255,.14);
}

/* ---------- Player / team cards ---------- */
/* The actual graphic: a photo and a real stat grid, not more text. */
.cards{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 92%;
  align-self: flex-start;
  margin-left: 38px;
  animation: riseIn .4s ease-out both;
}
.cards--multi{
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  position: relative;
}
@media (min-width: 460px){
  .cards--multi{ max-width: 100%; }
}

.stat-card{
  display: flex;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent-2);
  border-radius: 12px;
  padding: 14px;
  box-shadow: var(--shadow);
}

.card-photo{
  flex: none;
  position: relative;
  width: 82px;
  height: 82px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-photo img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  background: var(--surface-2);
}
.card-photo-initials{
  font-family: var(--display);
  letter-spacing: -.02em;
  font-weight: 600;
  font-size: 20px;
  color: var(--accent);
  letter-spacing: .01em;
}
.card-photo--team{
  background: var(--accent-2-soft);
  font-size: 26px;
}
/* Rule/history topic cards (Little League) — same shell, a plain icon
   badge instead of a photo, so a rules answer gets a graphic too. */
.card-photo--info{
  background: var(--accent-soft);
  font-size: 24px;
}
.card-kind{
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: .84rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1px;
}

.card-body{ flex: 1; min-width: 0; }
.card-name{
  font-family: var(--display);
  letter-spacing: -.02em;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  line-height: 1.25;
}
.card-meta{
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: .84rem;
  letter-spacing: .02em;
  color: var(--ink-soft);
  margin-top: 2px;
}

/* League-wide stat total card — the number IS the answer, so it runs
   bigger than a normal card name instead of sharing the same size as a
   player/team headline. */
.card-name--big{
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
}

.card-stats{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 9px;
}
.card-stat{
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 38px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 6px;
}
.card-stat-value{
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  color: var(--ink);
}
.card-stat-label{
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: .84rem;
  letter-spacing: .04em;
  color: var(--accent-2);
  margin-top: 0;
}

.card-note{
  font-size: 13px;
  font-style: italic;
  color: var(--ink-soft);
  margin-top: 9px;
  line-height: 1.4;
}

/* "VS" divider between two cards in a head-to-head comparison. */
.cards--multi.cards-two::before{
  content: "VS";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--display);
  letter-spacing: -.02em;
  font-weight: 600;
  font-size: .84rem;
  color: var(--accent);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* ---------- Loading state ---------- */
.loading{
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.loading-ball{
  display: inline-block;
  font-size: 15px;
  line-height: 1;
  animation: ballSpin 900ms linear infinite;
}
@keyframes ballSpin{
  to{ transform: rotate(360deg); }
}
.loading-text{
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: .88rem;
  letter-spacing: .01em;
  color: var(--ink-soft);
}

.sources{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  padding-left: 38px;
  animation: riseIn .3s ease-out both;
}
.source-chip{
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: .84rem;
  letter-spacing: .03em;
  color: var(--accent-2);
  background: var(--accent-2-soft);
  border-radius: 4px;
  padding: 3px 8px;
}

.error-banner{
  align-self: flex-start;
  max-width: 88%;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--ink);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
}

/* ---------- Composer ---------- */
.composer{
  flex: none;
  display: flex;
  gap: 10px;
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
  padding: 14px clamp(16px, 4vw, 24px) 20px;
}
.composer input{
  flex: 1;
  font-family: inherit;
  font-size: 15.5px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px 16px;
  box-shadow: var(--shadow);
}
.composer input:focus{ outline: 2px solid var(--accent-2); outline-offset: 1px; }
.composer input::placeholder{ color: var(--ink-faint); }

.composer button{
  flex: none;
  width: 46px;
  border: none;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity .15s ease;
}
.composer button:disabled{ opacity: .5; cursor: default; }
.composer button:not(:disabled):hover{ opacity: .9; }

@media (max-width: 560px){
  .msg{ max-width: 96%; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- Query-result card ----------
   A table for answers that came back from a database query rather than a
   purpose-built lookup. Deliberately quieter than the stat cards: this is
   data the model asked for itself, so it reads as a result set, not as a
   headline. The collapsed query underneath is the provenance trail — see
   buildQueryResultCard() in app.js for why it's shown at all. */
.card-query{
  display: block;
  border-top-color: var(--accent);
}
.card-query-head{
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}
.card-query-label{
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: .84rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.card-query-more{
  font-size: .84rem;
  color: var(--ink-faint);
}
.card-query-scroll{
  overflow-x: auto;
  margin: 0 -4px;
  padding: 0 4px;
}
.card-query-table{
  border-collapse: collapse;
  width: 100%;
  font-size: .88rem;
}
.card-query-table th{
  text-align: left;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: .84rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
  padding: 0 12px 6px 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.card-query-table td{
  padding: 6px 12px 6px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: top;
}
.card-query-table tbody tr:last-child td{ border-bottom: none; }
.card-query-table td.num{
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.card-query-sql{
  margin-top: 10px;
  border-top: 1px dashed var(--line);
  padding-top: 8px;
}
.card-query-sql summary{
  cursor: pointer;
  font-size: .84rem;
  color: var(--ink-faint);
  list-style: none;
}
.card-query-sql summary::-webkit-details-marker{ display: none; }
.card-query-sql summary::before{
  content: "▸ ";
  color: var(--accent-2);
}
.card-query-sql[open] summary::before{ content: "▾ "; }
.card-query-sql summary:hover{ color: var(--ink-soft); }
.card-query-sql pre{
  margin: 8px 0 0;
  padding: 10px;
  background: var(--surface-2);
  border-radius: 8px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--ink-soft);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

/* ---------- Scoreboard card ----------
   Real games, read the way a scoreboard is read: teams stacked, scores
   right-aligned and tabular so they line up, winner in bold and loser
   dimmed so the result is legible without comparing two numbers. */
.card-scoreboard{
  display: block;
  border-top-color: var(--accent-2);
}
.scoreboard-list{
  display: grid;
  gap: 10px;
}
.scoreboard-game{
  padding: 8px 10px;
  background: var(--surface-2);
  border-radius: 8px;
}
.scoreboard-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
}
.scoreboard-team{
  font-size: 13.5px;
  color: var(--ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scoreboard-score{
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: var(--ink);
  flex: none;
}
.scoreboard-row.won .scoreboard-team,
.scoreboard-row.won .scoreboard-score{
  font-weight: 600;
  color: var(--ink);
}
.scoreboard-row.lost .scoreboard-team,
.scoreboard-row.lost .scoreboard-score{
  color: var(--ink-faint);
}
.scoreboard-note{
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed var(--line);
  font-size: .84rem;
  color: var(--ink-faint);
}

/* ---------- Team profile card ---------- */
.card-team-profile{ display:block; border-top-color: var(--accent-2); }
.tp-head{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.tp-title{ font-family: var(--display); font-size:18px; color:var(--ink); }
.tp-sub{ font-size: .84rem; color:var(--ink-faint); flex:1; min-width:120px; }
.tp-record{
  font-family:var(--mono); font-size:17px;
  font-variant-numeric:tabular-nums; color:var(--accent); flex:none;
}
.tp-coaches{ margin-top:6px; font-size: .84rem; color:var(--ink-soft); }
.tp-label{
  margin:14px 0 6px; font-family:var(--mono);
  font-size: .84rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint); border-bottom:1px solid var(--line); padding-bottom:4px;
}
.tp-games{ display:grid; gap:3px; }
.tp-game{ display:flex; align-items:baseline; gap:8px; font-size: .88rem; }
.tp-res{
  font-family:var(--mono); font-weight:600;
  width:1.2em; flex:none;
}
.tp-game.won .tp-res{ color:var(--accent-2); }
.tp-game.lost .tp-res{ color:var(--ink-faint); }
.tp-opp{ flex:1; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tp-score{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums; color:var(--ink-soft); flex:none;
}
.tp-roster{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:2px 14px; }
.tp-player{ display:flex; align-items:baseline; gap:7px; font-size:13px; }
.tp-num{
  font-family:var(--mono); font-size: .84rem;
  color:var(--ink-faint); width:1.7em; text-align:right; flex:none;
}
.tp-name{ color:var(--ink); }
.tp-pos{ font-size: .84rem; color:var(--ink-faint); margin-left:auto; }

/* ---------- League marks ----------
   Original artwork, deliberately NOT the official MLB or Little League
   logos: both are registered trademarks and reproducing them in a
   third-party app is a real legal exposure, not a technicality. A home
   plate with stitching reads as professional baseball; a diamond around a
   ball reads as the youth game. Both use currentColor so they inherit the
   theme and the tab's active state without a second asset. */
.league-tab{ display:inline-flex; align-items:center; gap:7px; }
.tab-mark{ width:16px; height:16px; flex:none; opacity:.65; transition:opacity .2s ease; }
.league-tab.active .tab-mark,
.league-tab:hover .tab-mark{ opacity:1; }

.league-crest{
  display:flex; justify-content:center; margin-bottom:14px;
  animation: riseIn .5s ease-out both;
}
.crest-mark{ width:52px; height:52px; }
.crest--mlb{ color: var(--accent); }
.crest--ll{ color: var(--accent-2); }
.crest--travel{ color: var(--accent-3); }
@media (prefers-reduced-motion: reduce){
  .league-crest{ animation:none; }
}

/* THE CREST COSTS ZERO LAYOUT HEIGHT, ON PURPOSE.
   Measured, not guessed: at 1000x780 the Little League intro had only 43px
   between its last prompt chip and the composer, and a block-level crest
   consumed 55px of it, pushing chips underneath the composer. Shrinking it
   only moved the failure to shorter viewports (-90px at 700px tall), because
   that tab's heading wraps to three lines where MLB's wraps to two and the
   intro was already tight before any crest existed. So it's taken out of
   flow entirely: absolutely positioned above the headline, adding nothing to
   the column height, which means it cannot reintroduce the overlap at ANY
   viewport size. */
.intro{ position: relative; }
.league-crest{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -46px;
  margin: 0;
  pointer-events: none;
}
.crest-mark{ width: 34px; height: 34px; }
@media (max-height: 760px){
  .league-crest{ display: none; }
}
/* A pre-existing overlap, not one the crest introduced: on a short laptop
   viewport the intro column is simply taller than the space above the
   composer, and the prompt chips ended up underneath it. Measured at
   1000x700 as -43px with the crest already hidden. Scale the intro down
   instead of letting it spill. */
@media (max-height: 760px){
  .intro h1{ font-size: clamp(22px, 4.2vh, 34px); }
  .intro .sub{ font-size: .88rem; margin-bottom: 12px; }
  .prompts{ gap: 5px; }
  .prompt-chip{ padding: 6px 12px; font-size: 13px; }
}
/* Safety net: the stage was overflow:visible with a fixed height, so future
   content growth spills silently over the composer rather than scrolling.
   This makes that failure recoverable instead of invisible. */
.stage{ overflow-y: auto; }


/* ---------- Travel baseball cards ----------
   Connor asked for answers that break down into readable pieces rather than
   one text box, so these carry the numeric half of a travel answer: rule
   text with its number, a division spec sheet, an age-division verdict, and
   the bat table. They share the rule-item row so a rule and a bat standard
   look like the same kind of object, because to a parent they are. */

.card-usssa-rules,
.card-bats{
  border-top: 3px solid var(--accent-3);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rule-item{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}
.rule-item:first-of-type{ border-top: none; padding-top: 0; }

.rule-number{
  flex: none;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--accent-3);
  background: var(--accent-3-soft);
  border-radius: 5px;
  padding: 3px 6px;
  /* Bat standards cite compound numbers ("7.01.C.2 and 7.01.D") that, left
     on one line, squeeze the rule text into a column three words wide. Cap
     the chip and let it wrap instead. */
  max-width: 84px;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}

.rule-body{ min-width: 0; }
.rule-topic{
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--accent-3);
  margin-bottom: 2px;
}
.rule-text{
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
  overflow-wrap: anywhere;
  /* A rule card is a reference, not the answer. Cap each rule at a readable
     excerpt so a six-rule search result doesn't push the actual answer a
     full screen down, which is exactly what it did before this. */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-flag{
  margin-top: 2px;
  font-size: .84rem;
  line-height: 1.45;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  border-left: 3px solid var(--accent);
}

/* .stat-card is a flex ROW by default (photo beside body). These four have
   no photo and stack, so every one of them has to say so - the division
   card without it laid its spec grid out beside its own subtitle. */
.card-division,
.card-age-division{
  border-top: 3px solid var(--accent-3);
  display: flex;
  flex-direction: column;
}

.division-head{
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.division-name{
  font-family: var(--display);
  letter-spacing: -.02em;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}
.division-format{
  font-size: .84rem;
  line-height: 1.35;
  color: var(--ink-soft);
}

.age-division-big{
  font-family: var(--display);
  letter-spacing: -.02em;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent-3);
  letter-spacing: -.01em;
}

/* auto-fit rather than a fixed column count: the same grid holds two cells
   on an age-division card and nine on a division spec sheet. */
.division-grid{
  display: grid;
  /* Was 88px, which squeezed a label and a figure into a column narrower than
     the label. Nothing on this site has to fit two cells beside a 220px card
     badly enough to be unreadable, so the cells get room and wrap instead. */
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.division-cell{
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--surface-2);
}
.division-key{
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.division-value{
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.24rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
}

/* ---------- The spec sheet ----------
   One age division's rules, and the pattern any page uses when it has to lay
   out facts that are not a table: a heading, then rows of what-it-is beside
   the-answer, with room for a sentence under the answer where the number
   needs one.

   The rule this replaced put nine facts through an 88 pixel grid with no
   units and no headings, and it read like a machine emptying a spreadsheet.
   The fix is not smaller type or tighter cells. It is fewer things per row,
   larger figures, and a heading over each group so the eye knows what it is
   looking at before it starts reading numbers. */
.spec{
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.spec:first-of-type{ border-top: 0; padding-top: 0; }
.spec__head{
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent);
}
.spec__row{
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(140px, 1.15fr);
  align-items: baseline;
  gap: 4px 16px;
  padding: 9px 0;
  border-top: 1px solid var(--line-soft);
}
.spec__row:first-of-type{ border-top: 0; }
.spec__key{
  font-size: .94rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.spec__value{
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.16rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}
.spec__note{
  grid-column: 2;
  font-size: .86rem;
  line-height: 1.45;
  color: var(--ink-faint);
}
.spec__foot{
  margin: 10px 0 0;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--ink-faint);
}
@media (max-width: 560px){
  .spec__row{ grid-template-columns: 1fr; gap: 2px; }
  .spec__note{ grid-column: 1; }
}

/* ---------- Hover to define ----------
   Every stat abbreviation in an answer becomes a quiet trigger: a dotted
   underline you only really notice once you go looking for it, and a small
   card with what it stands for and one sentence on what it tells you.

   The styling is deliberately restrained. A page where forty abbreviations
   all shout is worse for a new fan than one where none do, so the marker
   is a hairline under the text and nothing else until you point at it. */
.term{
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: help;
  border-bottom: 1px dotted color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 2px;
  transition: background-color .12s ease, border-color .12s ease;
}
.term:hover,
.term:focus-visible{
  background: var(--accent-soft);
  border-bottom-color: var(--accent);
  outline: none;
}
.term:focus-visible{
  box-shadow: 0 0 0 2px var(--accent-soft), 0 0 0 3px var(--accent);
}

/* Inside a card's stat grid the label is already a lone abbreviation in an
   unambiguous spot, so it keeps its own type and just gains the underline. */
.card-stat-label.term{
  border-bottom-style: dotted;
  cursor: help;
}

.term-tip{
  position: fixed;
  z-index: 60;
  max-width: min(320px, calc(100vw - 24px));
  padding: 10px 12px 11px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  font-size: .88rem;
  line-height: 1.45;
  pointer-events: none;
  animation: tipIn .13s ease both;
}
.term-tip[hidden]{ display: none; }

@keyframes tipIn{
  from{ opacity: 0; transform: translateY(3px); }
  to{ opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce){
  .term-tip{ animation: none; }
}

.term-tip-name{
  display: block;
  font-family: var(--display);
  letter-spacing: -.02em;
  font-weight: 600;
  font-size: 14px;
  color: var(--accent);
  margin-bottom: 3px;
}
.term-tip-line{
  display: block;
  color: var(--ink-soft);
}

/* The line that turns a dictionary entry into an explanation: what somebody
   who knows the game reads off this number. Set apart from the definition
   so the eye can take the short answer and stop, or carry on. */
.term-tip-read{
  display: block;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--line-soft);
  color: var(--ink);
}
.term-tip-read[hidden]{ display: none; }
.term-tip-more{
  display: block;
  margin-top: 7px;
  font-size: .84rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--accent);
}
.term-tip-more[hidden]{ display: none; }
.term-tip{ max-width: min(380px, calc(100vw - 24px)); }

/* ============================================================
   THE FULL EXPLAINER
   Opened by clicking any term. Five sections in a fixed order,
   because the order is the teaching: what it measures, what it
   tells you, the scale, where it lies, and what changes in
   youth ball.
   ============================================================ */
.term-panel{
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(8, 12, 20, .55);
  backdrop-filter: blur(2px);
  animation: tipIn .16s ease-out;
}
@media (min-width: 720px){
  .term-panel{ align-items: center; padding: 24px; }
}
.term-panel__card{
  width: min(680px, 100%);
  max-height: min(86vh, 900px);
  overflow-y: auto;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 18px 18px 0 0;
  box-shadow: var(--shadow);
  padding: 20px 22px 26px;
}
@media (min-width: 720px){
  .term-panel__card{ border-radius: 18px; padding: 26px 30px 30px; }
}
.term-panel__head{
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
}
.term-panel__abbr{
  font-family: var(--mono); font-weight: 800; font-size: 0.88rem;
  letter-spacing: .04em;
  padding: 4px 9px; border-radius: 7px;
  background: var(--accent-soft); color: var(--accent);
}
.term-panel__name{
  margin: 0; flex: 1 1 auto; min-width: 0;
  font-family: var(--display); font-size: 1.4rem; letter-spacing: -.02em;
}
.term-panel__close{
  flex: none; border: 1px solid var(--line); background: transparent;
  color: var(--ink-soft); border-radius: 999px; padding: 5px 13px;
  font-size: 0.86rem; font-weight: 700; cursor: pointer;
}
.term-panel__close:hover{ color: var(--ink); border-color: var(--ink-faint); }
.term-panel__lede{
  margin: 0 0 20px; font-size: 1.05rem; line-height: 1.5; color: var(--ink);
}
.term-panel__section{ margin-bottom: 18px; }
.term-panel__section:last-child{ margin-bottom: 0; }
.term-panel__label{
  margin: 0 0 5px; font-size: 0.84rem; text-transform: uppercase;
  letter-spacing: .1em; font-weight: 800; color: var(--accent);
}
.term-panel__section--watch .term-panel__label{ color: var(--ink-faint); }
.term-panel__text{
  margin: 0; line-height: 1.6; color: var(--ink-soft); font-size: .97rem;
}
.term-panel__section--read .term-panel__text{ color: var(--ink); }

/* A small pointer toward the term, flipping when the tip sits below. */
.term-tip::after{
  content: "";
  position: absolute;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  background: var(--surface);
  border: 1px solid var(--line);
  transform: rotate(45deg);
}
.term-tip[data-side="above"]::after{
  bottom: -5px;
  border-top: 0;
  border-left: 0;
}
.term-tip[data-side="below"]::after{
  top: -5px;
  border-bottom: 0;
  border-right: 0;
}

/* Ranked lists keep their numbers. The diamond markers below are for
   unordered lists only; a leaderboard renders as a real ordered list. */
.rich-list--ordered{
  list-style: decimal;
  padding-left: 1.5em;
}
.rich-list--ordered li::marker{
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: .82em;
  color: var(--accent-2);
}
.rich-list--ordered li::before{ content: none; }

/* ============================================================================
   DESIGN REFRESH (Sept 1)
   ----------------------------------------------------------------------------
   Everything above is the original layout, which is sound and stays. This
   section restyles it: surfaces separated by hairline borders instead of
   shadows, one blue accent, mono numerals, tighter display type, denser cards.
   Written as a trailing override layer on purpose, so the change is one block
   to read and one block to remove if any of it turns out to be wrong.
   ========================================================================== */

/* THE BODY FONT WAS THE DISPLAY FONT. For nine days.
   This block is from the Sept 1 refresh, when there were two faces and the
   heavier one was meant to be on headings. It set font-family on <body>, and
   because it sits a thousand lines below the real body rule at the same
   specificity, it won. Every paragraph, every table cell, every note on this
   site has been set in the DISPLAY face since - which is why the whole thing
   read as one undifferentiated slab, and a good part of why the lettering
   looked wrong no matter which face was in the variable.
   The background and the tracking here are still wanted. The font-family is
   not, and it is gone. */
body{
  background:
    radial-gradient(1100px 520px at 50% -12%, var(--bg-2) 0%, transparent 62%),
    var(--bg);
  color: var(--ink);
  font-family: var(--body);
  letter-spacing: -0.005em;
}

/* Display type is a tight, heavy grotesk now rather than a serif. Numbers set
   in mono everywhere, because a stat line should look like data. */
h1, h2, .wordmark, .headline, .card-name, .card-name--big, .tp-name, .term-tip-name{
  font-family: var(--display);
  font-weight: 650;
  letter-spacing: -0.025em;
}

/* ---------- Header ---------- */
header.brand{
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.brand-mark .ball{
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: none;
}
.brand-mark .wordmark{ font-size: 17px; color: var(--ink); }
.brand-mission{
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: .84rem;
  letter-spacing: .14em;
}

/* Tabs read as a segmented control sitting in a recessed track. */
.league-tabs{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.league-tab{
  border: 0;
  border-radius: 999px;
  color: var(--ink-faint);
  font-size: .84rem;
  font-weight: 550;
  letter-spacing: .05em;
  padding: 7px 13px;
  background: transparent;
  transition: background-color .15s ease, color .15s ease;
}
.league-tab:hover{ color: var(--ink-soft); background: var(--surface-2); }
.league-tab.active{
  background: var(--surface-3);
  color: var(--ink);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--line);
}
.panel[data-league="mlb"] ~ * .league-tab.active,
.league-tab.active .tab-mark{ color: var(--accent); }

/* ---------- Intro ---------- */
.intro h1{
  font-size: clamp(30px, 4.6vw, 46px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.intro .sub{
  color: var(--ink-soft);
  font-size: 14.5px;
  max-width: 56ch;
}
.intro::before{ opacity: .35; }

.prompt-chip{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 13px;
  padding: 8px 14px;
  box-shadow: none;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease, transform .15s ease;
}
.prompt-chip:hover{
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--ink);
  transform: none;
  box-shadow: none;
}

/* ---------- Messages ---------- */
.msg .avatar{
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-faint);
}
.msg.assistant .avatar{ background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }

.msg .bubble{
  border-radius: var(--radius);
  box-shadow: none;
}
.msg.assistant .bubble{
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 1px solid var(--line);
  color: var(--ink);
}
.msg.user .bubble{
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid transparent;
}
.msg.user .bubble p.headline,
.msg.user .bubble strong{ color: var(--accent-ink); }

.headline{
  font-size: 17.5px;
  line-height: 1.35;
  color: var(--ink);
}
.section-head{
  font-family: var(--mono);
  font-size: .84rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-top: 1px solid var(--line-soft);
}

/* A cited number is a mono chip, quiet rather than highlighted. */
.stat{
  font-family: var(--mono);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  padding: 1px 6px;
  font-size: .88em;
}
.msg.user .bubble .stat{
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.22);
  color: var(--accent-ink);
}

.rich-list--ordered li::marker{ color: var(--accent); }
ul.rich-list li::before{ color: var(--accent); }

/* ---------- Cards ----------
   The single biggest change. Cards were soft, shadowed, warm panels. They are
   now flat surfaces held by a hairline, with an accent hairline on top rather
   than a colored left edge, and everything numeric in mono. */
.stat-card,
.card-team-profile,
.card-scoreboard,
.card-usssa-rules,
.card-query{
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
  position: relative;
  overflow: hidden;
}
.stat-card::before,
.card-team-profile::before,
.card-scoreboard::before,
.card-query::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, var(--accent) 0%, transparent 55%);
  opacity: .8;
}

.card-photo{
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.card-photo-initials{ color: var(--ink-faint); font-family: var(--mono); }
.card-name{ font-size: 16px; color: var(--ink); }
.card-meta,
.card-kind,
.card-sub,
.tp-sub{
  font-family: var(--mono);
  font-size: .84rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.card-note{ color: var(--ink-soft); font-style: normal; font-size: .84rem; }

/* Stat tiles: recessed cells, value in mono, label small and quiet. */
.card-stat{
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 3px 7px;
}
.card-stat-value{
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.card-stat-label{ color: var(--ink-faint); letter-spacing: .06em; font-size: .84rem; }

/* ---------- Tables ---------- */
.card-query-label,
.card-query-more{
  font-family: var(--mono);
  font-size: .84rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.card-query-table th{
  font-family: var(--mono);
  font-size: .84rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line);
  font-weight: 500;
}
.card-query-table td{
  font-family: var(--mono);
  font-size: .84rem;
  color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
}
.card-query-sql{
  font-family: var(--mono);
  color: var(--ink-faint);
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}

/* ---------- Scoreboard and team profile ---------- */
.scoreboard-score, .tp-score, .tp-record, .tp-num{ font-family: var(--mono); }
.scoreboard-row.won .scoreboard-score, .tp-game.won .tp-score{ color: var(--pos); }
.scoreboard-row.lost, .tp-game.lost{ color: var(--ink-faint); }
.scoreboard-game, .tp-game{ border-bottom: 1px solid var(--line-soft); }

/* ---------- Composer ---------- */
.composer{
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-soft);
}
.composer input{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 14.5px;
  box-shadow: none;
}
.composer input::placeholder{ color: var(--ink-faint); }
.composer input:focus{
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}
.composer button[type="submit"]{
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: var(--radius);
  box-shadow: none;
}
.composer button[type="submit"]:hover{ background: var(--accent-hot); }

/* ---------- Chips, badges, tooltip ---------- */
.source-chip{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: .84rem;
  letter-spacing: .08em;
}
.term{ border-bottom-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.term:hover, .term:focus-visible{ background: var(--accent-soft); border-bottom-color: var(--accent); }
.term-tip{
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift);
}
.term-tip-name{ color: var(--accent); font-size: .88rem; }
.term-tip::after{ background: var(--surface-2); border-color: var(--line); }
.loading-ball{ border-color: var(--line); border-top-color: var(--accent); }
.loading-text{ color: var(--ink-faint); font-family: var(--mono); font-size: .84rem; letter-spacing: .08em; }
.error-banner{ background: var(--surface); border: 1px solid var(--neg); color: var(--ink); border-radius: var(--radius); }

/* ---------- Manager card ----------
   Built for the "who managed the 1979 Red Sox" question. The season asked
   about is the headline; the career underneath is what makes it an answer
   about a person rather than a row in a table. Life dates handled explicitly,
   because for someone who has died, "how old is he" has a different answer
   and the card should not imply otherwise. */
.card-manager .mgr-top{ display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.card-manager .mgr-name{ font-size: 17px; font-weight: 650; letter-spacing: -.025em; color: var(--ink); }
.card-manager .mgr-life{
  font-family: var(--mono);
  font-size: .84rem;
  color: var(--ink-faint);
  letter-spacing: .04em;
}
.card-manager .mgr-season{
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.card-manager .mgr-season-team{ font-size: 13.5px; color: var(--ink); font-weight: 550; }
.card-manager .mgr-season-rec{
  font-family: var(--mono);
  font-size: 15px;
  color: var(--accent);
}
.card-manager .mgr-season-note{
  font-family: var(--mono);
  font-size: .84rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.card-manager .mgr-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
  gap: 6px;
  margin-top: 10px;
}
.card-manager .mgr-stints{ margin-top: 11px; display: flex; flex-direction: column; gap: 3px; }
.card-manager .mgr-stint{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: .84rem;
  color: var(--ink-soft);
  padding: 3px 0;
  border-bottom: 1px solid var(--line-soft);
}
.card-manager .mgr-stint:last-child{ border-bottom: 0; }
.card-manager .mgr-stint span:last-child{ font-family: var(--mono); font-size: .84rem; color: var(--ink-faint); white-space: nowrap; }
.card-manager .mgr-honors{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.card-manager .mgr-honor{
  font-family: var(--mono);
  font-size: .84rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent-2-soft);
  border: 1px solid color-mix(in srgb, var(--accent-2) 40%, transparent);
  color: var(--accent-2);
}

/* ============================================================
   THE SEARCH FRONT DOOR
   Added Sept 3 with the answer engine. The chat page keeps its own
   layout at /chat.html; this is the page the site opens on, because
   the vision doc asks for search to be the main thing rather than a
   feature sitting beside a chat box.

   Everything here reuses the palette and type scale already defined
   above. The one new idea is that the CARD carries the numbers and the
   prose carries the meaning, so the card sits above the paragraph
   rather than beside it.
   ============================================================ */

.body--search{
  min-height: 100vh;
  background: radial-gradient(1200px 500px at 50% -10%, var(--bg-2), var(--bg) 60%);
}

/* The chat page paints a diamond watermark with .intro::before, and this page
   reuses the .intro class for its own empty state. Sized for a centered chat
   stage, that diamond landed across the middle of a left-aligned column and
   read as a rendering fault rather than as texture. The search page keeps the
   gradient above instead. */
.body--search .intro::before{ content: none !important; }

/* The chat page's .intro rule sets a display value, which beats the plain
   hidden attribute. The search page hides the empty state as soon as an answer
   arrives, so it needs to actually stay hidden. */
.body--search .intro[hidden]{ display: none !important; }

/* Everything on this page is left aligned. The intro inherited centering from
   the chat page's empty state, which left the lede floating in the middle of a
   left-aligned column. */
.search-page, .intro, .intro__lede, .intro__note{ text-align: left; }

.brand--search{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand--search .brand-mark{ text-decoration: none; color: inherit; }
.brand-link{
  font-size: 0.88rem;
  color: var(--ink-soft);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  transition: color .15s ease, border-color .15s ease;
}
.brand-link:hover{ color: var(--ink); border-color: var(--accent-line); }

.search-page{
  max-width: 780px;
  margin: 0 auto;
  padding: 28px 20px 80px;
}

/* ---------- the field ---------- */

.search{ position: relative; }
.search__label{
  display: block;
  font-family: var(--display);
  letter-spacing: -.02em;
  font-size: clamp(1.45rem, 4vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 10px 0 16px;
}
.search__field{
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 6px 6px 6px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.search__field:focus-within{
  border-color: var(--accent-line);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.search__icon{ width: 20px; height: 20px; color: var(--ink-faint); flex: none; }
.search__input{
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  padding: 12px 0;
  outline: none;
}
.search__input::placeholder{ color: var(--ink-faint); }
.search__input::-webkit-search-cancel-button{ filter: grayscale(1) opacity(.5); }
.search__go{
  flex: none;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 11px 18px;
  cursor: pointer;
  transition: background .15s ease;
}
.search__go:hover{ background: var(--accent-hot); }

/* ---------- suggestions ---------- */

.suggestions{
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  max-height: 340px;
  overflow-y: auto;
}
.suggestion{
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.suggestion.is-active,
.suggestion:hover{ background: var(--surface-2); }
.suggestion__label{ font-weight: 500; }
.suggestion__detail{ font-family: var(--mono); font-size: 0.84rem; color: var(--ink-faint); }
.suggestion__league{
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-faint);
}

/* ---------- league filter ---------- */

.filter{ display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.filter__chip{
  border: 1px solid var(--line);
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.88rem;
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transition: all .15s ease;
}
.filter__chip:hover{ color: var(--ink); border-color: var(--accent-line); }
.filter__chip.is-on{
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--ink);
}

.search__status{
  margin: 20px 0 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.search__status::after{
  content: "";
  display: inline-block;
  width: 3px; height: 3px;
  margin-left: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity: .25 } 50%{ opacity: 1 } }

/* ---------- the answer ---------- */

.answer{ margin-top: 26px; }
.answer__route{
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-faint);
  margin: 0 0 12px;
}
/* ============================================================
   THE ANSWER, LAID OUT TO FILL THE PAGE
   It used to be a narrow stack: cards, then a paragraph or two,
   down the middle of a 1180px page with the rest of the screen
   empty. An answer that has ranked a number against its season,
   against the whole history of the game, against the player's
   own career and against the era he played in has enough to say
   to earn the width.
   ============================================================ */
.answer__lede{
  margin: 0 0 20px;
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.6vw, 1.85rem);
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--ink);
}
.answer__lede p{ margin: 0; }

.answer__body{ display: grid; gap: 22px; }
.answer__cards{ display: grid; gap: 12px; align-content: start; min-width: 0; }
.answer__prose{ margin-top: 0; min-width: 0; }
.answer__prose p{ max-width: 66ch; }

@media (min-width: 1000px){
  .answer__body{
    grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
    gap: 34px;
    align-items: start;
  }
  /* Reading on the left, evidence on the right. Source order puts the cards
     first so a phone shows the picture before the paragraphs. */
  .answer__cards{ order: 2; }
  .answer__prose{ order: 1; }
}
.answer__miss{ color: var(--ink-soft); margin: 8px 0 0; }
.answer__alts{ list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.answer__alt{
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
}
.answer__alt:hover{ border-color: var(--accent-line); }
.answer__source{
  margin: 22px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.84rem;
  color: var(--ink-faint);
}

/* ---------- new card shapes ---------- */

.card--board .board{ width: 100%; border-collapse: collapse; margin-top: 10px; }
.board__row{ border-top: 1px solid var(--line-soft); }
.board__row--lead .board__value{ color: var(--accent); }
.board__rank{
  font-family: var(--mono);
  font-size: 0.86rem;
  color: var(--ink-faint);
  padding: 9px 12px 9px 0;
  width: 3.2em;
}
.board__who{ padding: 9px 0; }
.board__player{ font-weight: 500; }
.board__year{ font-family: var(--mono); font-size: 0.84rem; color: var(--ink-faint); margin-left: 8px; }
.board__value{
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding: 9px 0;
  font-weight: 500;
}

.card--statline{ text-align: left; }
.statline__who{ font-size: 0.88rem; color: var(--ink-soft); margin: 0; }
.statline__value{
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.4rem, 9vw, 3.4rem);
  line-height: 1;
  margin: 6px 0 4px;
  letter-spacing: -.02em;
}
.statline__label{ margin: 0; color: var(--ink-soft); font-size: .92rem; }

.card--matchup{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: start;
}
.matchup__side{ min-width: 0; }
.matchup__name{ font-family: var(--display);
  letter-spacing: -.02em; font-size: 1.05rem; margin: 0; }
.matchup__season{ font-family: var(--mono); font-size: 0.84rem; color: var(--ink-faint); margin: 2px 0 10px; }

/* The head-to-head card carries a face on each side now. `.matchup__side` is
   also a live-game class further down this sheet, so everything here is
   scoped to the card or the two would fight. */
.card--matchup .matchup__side{ display: block; }
.card--matchup .matchup__face{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  overflow: hidden;
}
.card--matchup .matchup__face img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
}
.card--matchup .matchup__face img.is-loaded{ opacity: 1; }
.card--matchup .matchup__face .card-photo-initials{
  font-family: var(--mono);
  font-size: 18px;
  color: var(--ink-faint);
}
.matchup__vs{
  align-self: center;
  font-family: var(--mono);
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-faint);
}

.card--school .school__head{ display: flex; align-items: baseline; gap: 10px; }
.school__abbr{
  font-family: var(--mono);
  font-size: 0.88rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
}
.school__name{ font-family: var(--display);
  letter-spacing: -.02em; font-size: 1.05rem; margin: 0; }
.school__line{ margin: 10px 0 0; }
.school__detail, .school__example{ margin: 8px 0 0; color: var(--ink-soft); font-size: .92rem; }

/* ============================================================
   ONE STAT, SEASON BY SEASON
   A counting stat is a magnitude, so it is drawn as bars from
   zero. One series, so there is no legend: the title names it
   and the only color carrying meaning is the highlight on the
   season that was asked about. The two direct labels sit in ink
   rather than in the bar color, so nothing here depends on
   telling two shades apart.
   ============================================================ */
.card--statarc .statarc__holder{ margin-top: 12px; }
.statarc__svg{ width: 100%; height: auto; display: block; overflow: visible; }
.statarc__bar rect{
  fill: var(--ink-faint);
  opacity: .55;
  transition: opacity .12s ease, fill .12s ease;
}
.statarc__bar:hover rect{ opacity: .9; }
.statarc__bar.is-on rect{ fill: var(--accent); opacity: 1; }
.statarc__base{ stroke: var(--line); stroke-width: 1; }
.statarc__label{
  fill: var(--ink);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 13px;
  font-weight: 700;
}
.statarc__axis{
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 6px 2px 0;
  font-size: 0.84rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700;
}
.statarc__key{ color: var(--accent); }

/* The row the question was about, inside a leaderboard of other people. */
.board__row--subject{ background: var(--accent-soft); }
.board__row--subject .board__player{ font-weight: 800; }

/* Stat School: the five written sections. */
.school__section{ margin-top: 16px; }
.school__label{
  margin: 0 0 4px; font-size: 0.84rem; text-transform: uppercase;
  letter-spacing: .1em; font-weight: 800; color: var(--accent);
}
.school__text{ margin: 0; line-height: 1.6; color: var(--ink-soft); font-size: .95rem; }
.school__section--example .school__label{ color: var(--ink-faint); }
.school__example-list{ margin: 6px 0 0; padding-left: 18px; }
.school__example-row{ display: flex; align-items: baseline; gap: 10px; padding: 2px 0; }
.school__example-value{
  font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700;
}
.school__example-span{ color: var(--ink-faint); font-size: 0.88rem; }
.school__tell{ margin: 14px 0 0; color: var(--ink-soft); font-size: .92rem; }

.card--arc .arc__holder{ margin-top: 10px; }
.arc__svg{ width: 100%; height: auto; display: block; overflow: visible; }
.arc__line{ fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.arc__dot{ fill: var(--accent); }
.arc__axis{
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.84rem;
  color: var(--ink-faint);
  margin: 6px 0 0;
}
.arc__metric{ letter-spacing: .08em; text-transform: uppercase; }

/* ---------- the empty state ---------- */

.intro{ margin-top: 34px; }
.intro__lede{ color: var(--ink-soft); margin: 0 0 16px; }
.intro__examples{ display: flex; flex-wrap: wrap; gap: 8px; }
.example{
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.9rem;
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  transition: all .15s ease;
}
.example:hover{ color: var(--ink); border-color: var(--accent-line); background: var(--surface-2); }
.intro__note{
  margin: 22px 0 0;
  font-size: 0.86rem;
  color: var(--ink-faint);
  line-height: 1.6;
}

@media (max-width: 620px){
  .search__go{ padding: 11px 14px; font-size: 0.88rem; }
  .card--matchup{ grid-template-columns: 1fr; }
  .matchup__vs{ justify-self: start; }
  .suggestion{ grid-template-columns: 1fr auto; }
  .suggestion__league{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .search__status::after{ animation: none; }
}

.card--llws .llws__champ{ display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.llws__crown{
  font-size: 0.84rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--accent-2); border: 1px solid var(--accent-2-soft);
  background: var(--accent-2-soft); border-radius: 999px; padding: 3px 9px;
}
.llws__team{ font-weight: 600; }
.llws__region{ font-family: var(--mono); font-size: 0.84rem; color: var(--ink-faint); }
.llws__game{ margin: 10px 0 0; color: var(--ink-soft); font-size: .92rem; }
.llws__field{ list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 4px; }
.llws__entry{
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 0.9rem; padding: 5px 0; border-top: 1px solid var(--line-soft);
}
.llws__entry.is-champ .llws__entryTeam{ color: var(--accent); font-weight: 600; }
.llws__entryPlace{ font-family: var(--mono); font-size: 0.84rem; color: var(--ink-faint); }

/* ============================================================
   THE PLAYER HUB
   A page you arrive at rather than an answer you read once, so it
   is laid out as a page: a face, then what he was known for, then
   the numbers, then the shape of the career, then where he played.

   The card carries the figures and the prose carries the meaning,
   the same rule the search page follows.
   ============================================================ */

.body--player{
  min-height: 100vh;
  background: radial-gradient(1100px 460px at 20% -10%, var(--bg-2), var(--bg) 62%);
}

.hub{
  max-width: 900px;
  margin: 0 auto;
  padding: 26px 20px 90px;
}
.hub__loading{ color: var(--ink-soft); }
.hub__source{
  margin-top: 34px; padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.84rem; color: var(--ink-faint);
}

/* ---------- header search ---------- */

.mini-search{ position: relative; flex: 0 1 300px; }
.mini-search__input{
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  padding: 9px 16px;
  outline: none;
}
.mini-search__input:focus{ border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.suggestions--mini{ top: calc(100% + 6px); }

/* ---------- hero ---------- */

.hero{
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 22px;
  align-items: center;
  padding: 6px 0 22px;
  border-bottom: 1px solid var(--line-soft);
}
.hero__shot{
  position: relative;
  width: 132px; height: 132px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
}
.hero__shot img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  z-index: 1;
  background: var(--surface-2);
  opacity: 0;
  transition: opacity .25s ease;
}
.hero__shot img.is-loaded{ opacity: 1; }
.hero__initials{
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.4rem;
  color: var(--ink-faint);
  letter-spacing: .02em;
}
.hero__name{
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.8rem, 5.4vw, 2.9rem);
  line-height: 1.03;
  letter-spacing: -.03em;
  margin: 0 0 8px;
}
.hero__facts{ margin: 0; color: var(--ink-soft); font-size: .92rem; }
.hero__birth{ margin: 4px 0 0; color: var(--ink-faint); font-size: 0.9rem; }
.hero__badge{
  display: inline-block;
  margin-top: 10px;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-2);
  background: var(--accent-2-soft);
  border: 1px solid var(--accent-2-soft);
  border-radius: 999px;
  padding: 5px 12px;
}

/* ---------- blocks ---------- */

.panel-block{ margin-top: 34px; }
.panel-block__head{ display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.panel-block__title{
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -.01em;
  margin: 0 0 14px;
}

/* ---------- known for ---------- */

.chips{ display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.chip{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.chip--gold{ border-color: var(--accent-2-soft); background: linear-gradient(180deg, var(--accent-2-soft), transparent 70%), var(--surface); }
.chip__big{ font-weight: 600; font-size: 1rem; line-height: 1.3; }
.chip__small{ font-family: var(--mono); font-size: 0.9rem; color: var(--ink-faint); }

/* ---------- career tiles ---------- */

.tiles{ display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.tile{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 8px 9px;
  text-align: center;
}
.tile__value{
  display: block;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -.01em;
}
.tile__label{
  display: block;
  margin-top: 3px;
  font-size: 0.84rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- the chart ---------- */

.picker{ display: inline-flex; align-items: center; gap: 8px; }
.picker__label{ font-size: 0.84rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); }
.picker__select{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  padding: 7px 10px;
}
.picker__select:focus{ outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }

.chart{ margin: 0; }
.chart__holder{
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 6px 4px;
}
.chart__svg{ width: 100%; height: auto; display: block; overflow: visible; }
.chart__grid{ stroke: var(--line-soft); stroke-width: 1; }
.chart__axis{ stroke: var(--line); stroke-width: 1; }
.chart__line{ fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart__dot{ fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.chart__hit{ fill: transparent; cursor: pointer; }
.chart__hit:focus{ outline: none; }
.chart__cross{ stroke: var(--accent-line); stroke-width: 1; stroke-dasharray: 3 3; transition: opacity .12s ease; }
.chart__tick{ fill: var(--ink-faint); font-size: 13px; font-family: var(--mono); }
.chart__tip{
  position: absolute;
  transform: translate(-50%, -100%);
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-size: 0.88rem;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow-lift);
}
.chart__tip span{ display: block; color: var(--ink-faint); font-size: 0.84rem; }
.chart__caption{ margin: 8px 2px 0; font-size: 0.84rem; color: var(--ink-faint); }

/* ---------- the path ---------- */

.path{
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 8px;
}
.path__stop{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  min-width: 116px;
}
.path__badge{
  position: relative;
  width: 40px; height: 40px;
  display: grid; place-items: center;
}
.path__badge img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; opacity: 0; transition: opacity .25s ease; }
.path__badge img.is-loaded{ opacity: 1; }
.path__initials{ font-family: var(--mono); font-weight: 700; font-size: 0.88rem; color: var(--ink-faint); }
.path__team{ font-size: 0.88rem; font-weight: 500; text-align: center; line-height: 1.25; }
.path__years{ font-family: var(--mono); font-size: 0.84rem; color: var(--ink-faint); }
.path__arrow{ display: grid; place-items: center; color: var(--ink-faint); }
.path__arrow svg{ width: 22px; height: 11px; }

/* ---------- the table ---------- */

.table-toggle summary{
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--ink-soft);
  padding: 10px 0;
}
.table-toggle summary::marker{ color: var(--ink-faint); }
.table-scroll{ overflow-x: auto; margin-top: 6px; }
.season-table{ width: 100%; border-collapse: collapse; font-size: .92rem; }
.season-table th{
  text-align: right;
  font-family: var(--mono);
  font-size: 0.84rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
  padding: 8px 10px 8px 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.season-table th:first-child, .season-table th:nth-child(2){ text-align: left; }
.season-table td{
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  padding: 7px 10px 7px 0;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
.season-table td:first-child{ text-align: left; }
.season-table__team{ text-align: left !important; font-family: var(--body) !important; color: var(--ink-soft); }

@media (max-width: 640px){
  .hero{ grid-template-columns: 88px 1fr; gap: 14px; }
  .hero__shot{ width: 88px; height: 88px; border-radius: 14px; }
  .hero__initials{ font-size: 1.6rem; }
  .path{ flex-direction: column; align-items: stretch; }
  .path__stop{ flex-direction: row; justify-content: flex-start; gap: 12px; }
  .path__arrow{ transform: rotate(90deg); height: 16px; }
  .mini-search{ flex-basis: 160px; }
}

.answer__hubLink{
  display: inline-block;
  margin: 0 0 14px;
  font-size: 0.9rem;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-line);
  padding-bottom: 2px;
}
.answer__hubLink:hover{ color: var(--accent-hot); }

/* The Little League placings. First through fourth, where a reader looks. */
.podium{ list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; }
.podium__row{
  display: grid;
  grid-template-columns: 108px 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.podium__row--1{ background: linear-gradient(90deg, var(--accent-2-soft), transparent 60%), var(--surface-2); }
.podium__place{
  font-size: 0.84rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.podium__row--1 .podium__place{ color: var(--accent-2); }
.podium__team{ font-weight: 600; font-size: .92rem; }
.podium__score{ font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-soft); }

.llws__why{ margin: 14px 0 0; padding-left: 18px; color: var(--ink-soft); font-size: 0.92rem; }
.llws__why li{ margin: 4px 0; }

.llws__columns{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 16px; }
.llws__columnTitle{
  margin: 0 0 6px;
  font-size: 0.84rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600;
}
.llws__entry.is-runner .llws__entryTeam{ color: var(--ink); font-weight: 500; }

@media (max-width: 560px){
  .podium__row{ grid-template-columns: 92px 1fr auto; gap: 8px; }
}

/* The season scrubber. Hover is a mouse affordance; this one works with a
   thumb, and it keeps the year and the number on screen while you move. */
.scrub{ margin-top: 12px; }
.scrub__readout{
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 30px;
  margin-bottom: 6px;
}
.scrub__year{
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}
.scrub__value{
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.scrub__stat{ font-size: 0.88rem; color: var(--ink-soft); }
.scrub__team{ font-size: 0.86rem; color: var(--ink-faint); margin-left: auto; }

.scrub__range{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: none;
  cursor: pointer;
}
.scrub__range::-webkit-slider-runnable-track{
  height: 4px;
  border-radius: 999px;
  background: var(--surface-3);
}
.scrub__range::-moz-range-track{
  height: 4px;
  border-radius: 999px;
  background: var(--surface-3);
}
.scrub__range::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--accent-line);
}
.scrub__range::-moz-range-thumb{
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
}
.scrub__range:focus{ outline: none; }
.scrub__range:focus::-webkit-slider-thumb{ box-shadow: 0 0 0 4px var(--accent-soft); }

.chart__dot.is-on{ r: 5.5; stroke-width: 2.5; }

/* The Little League year picker on the landing page. Asking anything is the
   front door, but a tournament is something you browse rather than a question
   you have to phrase. */
.lookup{
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}
.lookup__title{
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -.01em;
  margin: 0 0 6px;
}
.lookup__note{ margin: 0 0 14px; font-size: 0.9rem; color: var(--ink-faint); max-width: 62ch; line-height: 1.5; }
.lookup__row{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lookup__label{ font-size: 0.84rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); }
.lookup__select{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font: inherit;
  font-family: var(--mono);
  font-size: .9rem;
  padding: 9px 12px;
  min-width: 100px;
}
.lookup__select:focus{ outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.lookup__go{
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  cursor: pointer;
}
.lookup__go:hover{ border-color: var(--accent-line); background: var(--surface-2); }

/* Card headings, so a card always says what it is showing. */
.card__head{ margin-bottom: 4px; }
.card__subtitle{ margin: 2px 0 0; font-size: 0.86rem; color: var(--ink-faint); }
.card__meaning{
  margin: 8px 0 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 66ch;
}
.card__meaningTerm{ color: var(--ink); font-weight: 600; }
.card__through{
  display: inline-block;
  margin-top: 12px;
  font-size: 0.88rem;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-line);
  padding-bottom: 2px;
}
.card__through:hover{ color: var(--accent-hot); }
.board__player--link{ color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
.board__player--link:hover{ color: var(--accent); border-bottom-color: var(--accent-line); }

/* ============================================================
   SCORES AND STANDINGS
   Its own page, linked from every other one. The data is a local
   snapshot a separate process keeps current, so the page is
   instant and the timestamp says how fresh it is rather than
   implying it is live to the pitch.
   ============================================================ */

.body--scores{
  min-height: 100vh;
  background: radial-gradient(1100px 460px at 50% -10%, var(--bg-2), var(--bg) 62%);
}
.scores-page{ max-width: 900px; margin: 0 auto; padding: 24px 20px 90px; }
.scores__heading{
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.6rem, 4.6vw, 2.3rem);
  letter-spacing: -.025em;
  margin: 6px 0 4px;
}
.scores__updated{ margin: 0 0 6px; font-size: 0.86rem; color: var(--ink-faint); font-family: var(--mono); }
.scores__hint{ margin: -6px 0 14px; font-size: 0.88rem; color: var(--ink-faint); max-width: 62ch; line-height: 1.5; }
.scores__block{ margin-top: 30px; }
.scores__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 18px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
/* The day buttons used to sit on the same baseline as the heading with no
   room under them, so the moment they wrapped they landed on the first row
   of game boxes. They keep their own line now, pushed clear of the grid. */
.scores__head .daynav{ margin-left: auto; }
.scores__head + .scoreboard,
.scores__head + .standings,
.scores__head + .bracket-wrap{ margin-top: 4px; }

.topnav{ display: flex; gap: 6px; align-items: center; }
.topnav a{
  font-size: 0.88rem;
  color: var(--ink-soft);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 7px 14px;
}
.topnav a:hover{ color: var(--ink); border-color: var(--line); }
.topnav a.is-here{ color: var(--ink); border-color: var(--accent-line); background: var(--accent-soft); }

.daynav{ display: flex; gap: 6px; }
.daynav__btn{
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  font: inherit; font-size: 0.86rem;
  border-radius: 999px; padding: 6px 12px; cursor: pointer;
}
.daynav__btn:hover{ color: var(--ink); border-color: var(--accent-line); }

.scoreboard{ display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.score{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.score__side{ display: flex; align-items: center; gap: 9px; padding: 3px 0; }
.score__side.is-dim{ color: var(--ink-faint); }
.score__logo{ width: 22px; height: 22px; display: grid; place-items: center; flex: none; }
.score__logo img{ width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .2s ease; }
.score__logo img.is-loaded{ opacity: 1; }
.score__team{ flex: 1; font-size: 1rem; font-weight: 500; }
.score__runs{
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.3rem;
}
.score__status{
  margin: 8px 0 0;
  font-size: 0.84rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.score__status.is-live{ color: var(--accent-3); }

.division{ margin-bottom: 26px; }
.division__name{
  font-family: var(--display);
  font-weight: 700; font-size: .92rem;
  margin: 0 0 8px;
}
.division__table{ width: 100%; border-collapse: collapse; font-size: .95rem; }
.division__table th{
  text-align: right;
  font-family: var(--mono);
  font-size: 0.84rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600;
  padding: 6px 10px 6px 0;
  border-bottom: 1px solid var(--line);
}
.division__table th:first-child{ text-align: left; }
.division__table td{
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  padding: 8px 10px 8px 0;
  border-bottom: 1px solid var(--line-soft);
}
.division__table tr.is-leader td{ background: var(--accent-soft); }
.division__team{
  text-align: left !important;
  font-family: var(--body) !important;
  display: flex; align-items: center; gap: 9px;
}
.division__table .is-pos{ color: var(--pos); }
.division__table .is-neg{ color: var(--neg); }

/* The compact strip on the landing page. */
.today{ margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line-soft); }
.today__head{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.today__all{ font-size: 0.88rem; color: var(--accent); text-decoration: none; }
.today__all:hover{ color: var(--accent-hot); }
.today__row{ display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.today__game{
  flex: none;
  min-width: 132px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  text-decoration: none;
  color: inherit;
}
.today__game:hover{ border-color: var(--accent-line); }
.today__side{ display: flex; justify-content: space-between; gap: 8px; font-size: 0.88rem; padding: 1px 0; }
.today__side.is-dim{ color: var(--ink-faint); }
.today__runs{ font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; }
.today__state{
  display: block; margin-top: 5px;
  font-size: 0.84rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint);
}
.today__state.is-live{ color: var(--accent-3); }

@media (max-width: 640px){
  .scoreboard{ grid-template-columns: 1fr; }
  .division__table{ font-size: 0.86rem; }
}

/* ============================================================
   READABILITY PASS
   The whole app was set a size or two small for something people
   read at arm's length or on a phone. Headings, table text and
   the small uppercase labels all move up, and the labels move up
   most because they were the least readable part.
   ============================================================ */

body{ font-size: var(--step-0); }
.season-table th, .division__table th{ font-size: 0.84rem; letter-spacing: .07em; }
.board__rank{ font-size: 0.9rem; }
.board__player{ font-size: 1rem; }
.board__value{ font-size: 1.05rem; }
.board__year{ font-size: 0.88rem; }
.card__title{ font-size: 1.22rem; letter-spacing: -.015em; }
.card__subtitle{ font-size: 0.92rem; }
.card__meaning{ font-size: .92rem; }
.card__note{ font-size: 0.9rem; }
.answer__source{ font-size: 0.88rem; }
.hero__facts{ font-size: 1.02rem; }
.hero__birth{ font-size: .92rem; }
.hero__badge{ font-size: 0.86rem; }
.statline__label{ font-size: 1rem; }
.suggestion__label{ font-size: 1rem; }
.suggestion__detail{ font-size: 0.88rem; }
.path__team{ font-size: .9rem; }
.path__years{ font-size: 0.88rem; }
.chart__caption{ font-size: 0.9rem; }
.scrub__stat{ font-size: .9rem; }
.scrub__team{ font-size: 0.9rem; }
.empty-note{ color: var(--ink-soft); font-size: .95rem; margin: 4px 0; }

/* Club marks, used on scores, standings and the bracket. */
.crest{ display: grid; place-items: center; flex: none; }
.crest--sm{ width: 22px; height: 22px; }
.crest--lg{ width: 68px; height: 68px; }
.crest img{ width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .2s ease; }
.crest img.is-loaded{ opacity: 1; }

/* Probable pitchers. A name alone means nothing; the line is the point. */
.score__probables{
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 10px; padding-top: 9px;
  border-top: 1px solid var(--line-soft);
}
.score__probablesLabel{
  font-size: 0.84rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 3px;
}
.score__probable{ font-size: 0.9rem; color: var(--ink-soft); }
.today__probables{
  display: flex; flex-direction: column; gap: 1px;
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.84rem; color: var(--ink-faint);
}
.today__game{ min-width: 178px; }
.today__side{ align-items: center; gap: 7px; }
.today__team{ flex: 1; }

.division__trophy, .division__pennant{
  margin-left: 8px;
  font-size: 0.84rem; letter-spacing: .08em; text-transform: uppercase;
  border-radius: 999px; padding: 2px 8px;
}
.division__trophy{ color: var(--accent-2); background: var(--accent-2-soft); }
.division__pennant{ color: var(--ink-faint); border: 1px solid var(--line); }

/* ---------- the postseason bracket ---------- */

.bracket-wrap{ overflow-x: auto; padding-bottom: 6px; }
.bracket{ display: flex; gap: 14px; align-items: flex-start; min-width: min-content; }
.bracket__round{ display: flex; flex-direction: column; gap: 10px; min-width: 190px; }
.bracket__roundName{
  margin: 0 0 2px;
  font-size: 0.84rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600;
}
.bracket__series{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.bracket__team{ display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: .9rem; }
.bracket__team.is-winner{ font-weight: 600; }
.bracket__team.is-out{ color: var(--ink-faint); }
.bracket__teamName{ flex: 1; }
.bracket__result{
  margin: 7px 0 0; font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 0.88rem; color: var(--ink-faint);
}
.bracket__round--champ{ min-width: 210px; }
.champion{
  background: linear-gradient(180deg, var(--accent-2-soft), transparent 70%), var(--surface);
  border: 1px solid var(--accent-2-soft);
  border-radius: var(--radius);
  padding: 18px 16px;
  text-align: center;
}
.champion .crest{ margin: 0 auto 10px; }
.champion__name{
  margin: 0;
  font-family: var(--display); font-weight: 800;
  font-size: 1.15rem; letter-spacing: -.02em;
}
.champion__detail{ margin: 6px 0 0; font-size: 0.9rem; color: var(--ink-soft); }

/* ============================================================
   SCALE PASS, Sept 4
   Connor's note: "overall labels and fonts need to be bigger and
   more readable, design it like a modern sports app and what a
   user would consume."

   The previous pass moved the body text and left the furniture
   where it was, so headings, stat labels and the small uppercase
   text were still set for a dense analyst's dashboard. A sports
   app is read fast, at arm's length, often on a phone: the number
   is the loudest thing on screen, the label under it is legible
   without leaning in, and section headings are big enough to
   navigate by. Nothing here is decoration, it is all size and
   contrast.

   The uppercase micro-labels move the most, because they were the
   worst of it: eleven and twelve pixels of letterspaced gray is
   the single most common way an interface becomes unreadable, and
   this file had a lot of it. They also move off --ink-faint,
   which is a color for things you are meant to ignore.
   ============================================================ */

:root{
  --step-0: 1.09rem;
  --step-1: 1.18rem;
  --step-label: .9rem;
  --step-small: .99rem;
}

body{ font-size: var(--step-0); line-height: 1.55; }

/* Section headings you can navigate by. */
.panel-block{ margin-top: 44px; }
.panel-block__title{
  font-family: var(--display);
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -.022em;
  line-height: 1.15;
  margin: 0 0 4px;
}
.panel-block__aside{
  margin: 0; color: var(--ink-soft); font-size: .95rem;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.scores__heading{ font-size: clamp(2rem, 4.6vw, 2.9rem); letter-spacing: -.03em; font-weight: 800; }
.scores__hint{ font-size: .95rem; color: var(--ink-soft); max-width: 70ch; }
.scores__updated{ font-size: 0.92rem; }
.scores__block{ margin-top: 40px; }
.lookup__title{ font-size: 1.5rem; font-weight: 800; letter-spacing: -.022em; }
.lookup__note{ font-size: .98rem; color: var(--ink-soft); }
.hero__name{ letter-spacing: -.03em; }

/* Every small uppercase label in the app, in one place. */
.picker__label,
.lookup__label,
.score__probablesLabel,
.today__state,
.bracket__roundName,
.division__trophy,
.division__pennant,
.tile__label,
.hero__badge,
.score__kind{
  font-size: 0.88rem;
  letter-spacing: .075em;
  font-weight: 600;
  color: var(--ink-soft);
}

/* Stat tiles: the number is the point, the label has to be readable. */
.tiles{ grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.tile{ padding: 12px 10px; }
.tile__value{ font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.tile__label{ margin-top: 3px; }

/* "Known for" chips carry the sentences somebody actually reads. */
.chips{ grid-template-columns: repeat(auto-fill, minmax(264px, 1fr)); gap: 12px; }
.chip{ padding: 14px 16px; }
.chip__big{ font-size: 1.12rem; font-weight: 700; letter-spacing: -.012em; line-height: 1.28; }
.chip__small{ font-size: .95rem; color: var(--ink-soft); margin-top: 4px; display: block; }

/* Tables. A stat table that needs leaning in is a stat table nobody reads. */
.season-table, .division__table{ font-size: 1rem; }
.season-table th, .division__table th{ font-size: 0.88rem; letter-spacing: .06em; color: var(--ink-soft); font-weight: 600; }
.division__name{ font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em; }
.table-toggle summary{ font-size: 1rem; font-weight: 600; }

/* The scoreboard. */
.score__team{ font-size: 1.08rem; font-weight: 600; }
.score__runs{ font-size: 1.3rem; font-weight: 700; }
.score__status{ font-size: 0.9rem; letter-spacing: .06em; font-weight: 600; }
.score__probable{ font-size: .95rem; color: var(--ink-soft); }
.score__kind{
  display: inline-block; margin-top: 8px;
  text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 2px 9px; font-size: 0.84rem; color: var(--ink-faint);
}
.crest--sm{ width: 26px; height: 26px; }
.today__game{ min-width: 200px; padding: 12px 14px; }
.today__side{ font-size: .95rem; }
.today__team{ font-weight: 600; }
.today__runs{ font-size: 1.06rem; }
.today__probables{ font-size: 0.9rem; color: var(--ink-soft); }
.today__state{ text-transform: uppercase; }

/* The bracket, and the trophy at the end of it. */
.bracket__round{ min-width: 210px; }
.bracket__roundName{ text-transform: uppercase; margin-bottom: 4px; }
.bracket__team{ font-size: 1rem; }
.bracket__result{ font-size: .9rem; }
.bracket__round--champ{ min-width: 250px; }
.champion{
  padding: 22px 18px 20px;
  border: 1px solid var(--accent-2-soft);
  box-shadow: 0 0 0 1px rgba(232,177,60,.10), 0 18px 40px rgba(0,0,0,.28);
  position: relative;
}
.champion__trophy{ display: block; font-size: 1.6rem; line-height: 1; margin-bottom: 6px; }
.crest--lg{ width: 84px; height: 84px; }
.champion__year{
  margin: 0 0 2px; font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: .95rem; letter-spacing: .1em; color: var(--accent-2); font-weight: 700;
}
.champion__name{ font-size: 1.42rem; font-weight: 800; line-height: 1.15; }
.champion__detail{ font-size: .92rem; color: var(--ink-soft); margin-top: 8px; }

@media (max-width: 640px){
  .panel-block__title{ font-size: 1.36rem; }
  .chips{ grid-template-columns: 1fr; }
}

/* ============================================================
   THE LITTLE LEAGUE WORLD SERIES PAGE
   A tournament is a place, not an answer. The page opens on the
   champion and the town they came from, because that is what the
   event is about, and everything else hangs off it: the podium
   with the third-place game named, the champion's run, the whole
   field with records, then every game.
   ============================================================ */

.body--llws{
  min-height: 100vh;
  background: radial-gradient(1100px 520px at 22% -12%, var(--bg-2), var(--bg) 64%);
}
.llws{ max-width: 940px; margin: 0 auto; padding: 20px 20px 100px; }

/* Move between tournaments without going back to the front door. */
.yearbar{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0 18px; border-bottom: 1px solid var(--line-soft); margin-bottom: 26px;
}
.yearbar__link{
  color: var(--ink-soft); text-decoration: none; font-weight: 600;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px;
}
.yearbar__link:hover{ color: var(--ink); border-color: var(--accent-line); background: var(--accent-soft); }
.yearbar__gap{ width: 84px; }

.llws-hero{ margin-bottom: 8px; }
.llws-hero__eyebrow{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 6px; color: var(--ink-soft); font-size: .95rem;
}
.llws-hero__pill{
  text-transform: uppercase; letter-spacing: .1em; font-size: 0.84rem; font-weight: 700;
  color: var(--accent-2); background: var(--accent-2-soft);
  border-radius: 999px; padding: 5px 12px;
}
.llws-hero__year{
  margin: 0 0 18px;
  font-family: var(--display); font-weight: 900;
  font-size: clamp(3.4rem, 11vw, 6rem); line-height: .9; letter-spacing: -.045em;
}
.llws-hero__none{ color: var(--ink-soft); font-size: 1.05rem; max-width: 62ch; }

/* The champion, given the room the champion deserves. */
.llws-champ{
  background: linear-gradient(180deg, var(--accent-2-soft), transparent 72%), var(--surface);
  border: 1px solid var(--accent-2-soft);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  box-shadow: 0 0 0 1px rgba(232,177,60,.10), 0 22px 48px rgba(0,0,0,.30);
}
.llws-champ__crown{ display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.llws-champ__label{
  text-transform: uppercase; letter-spacing: .12em; font-size: 0.86rem;
  font-weight: 700; color: var(--accent-2);
}
.llws-champ__club{
  margin: 0; font-family: var(--display); font-weight: 800;
  font-size: clamp(1.6rem, 4.2vw, 2.3rem); line-height: 1.1; letter-spacing: -.028em;
}
.llws-champ__from{ margin: 4px 0 0; font-size: 1.1rem; color: var(--ink-soft); }
.llws-champ__line{ margin: 14px 0 0; font-size: .98rem; color: var(--ink-soft); }

/* A team's mark: a flag from abroad, the state's letters at home. */
.llws-mark{
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line);
}
.llws-mark--flag{ font-size: 1.35rem; line-height: 1; border: none; background: none; }
.llws-mark--abbr{
  font-family: var(--mono); font-weight: 700; font-size: .95rem;
  letter-spacing: .04em; color: var(--ink-soft);
}

/* First through fourth. */
.placings{ list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.placings__row{
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px;
}
.placings__row--1{
  background: linear-gradient(90deg, var(--accent-2-soft), transparent 62%), var(--surface);
  border-color: var(--accent-2-soft);
}
.placings__place{
  font-family: var(--display); font-weight: 900; font-size: 1.7rem;
  color: var(--ink-faint); text-align: center; letter-spacing: -.04em;
}
.placings__row--1 .placings__place{ color: var(--accent-2); }
.placings__row--2 .placings__place{ color: var(--ink-soft); }
.placings__who{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.placings__club{ font-size: 1.12rem; font-weight: 700; letter-spacing: -.012em; }
.placings__from{ font-size: .92rem; color: var(--ink-soft); }
.placings__tag{ text-align: right; display: flex; flex-direction: column; gap: 3px; }
.placings__label{
  text-transform: uppercase; letter-spacing: .08em; font-size: 0.84rem;
  font-weight: 700; color: var(--ink-soft);
}
.placings__row--1 .placings__label{ color: var(--accent-2); }
.placings__note{ font-size: 0.9rem; color: var(--ink-faint); }

/* Why the year is remembered. */
.why{ display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 14px; }
.why__card{
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px;
}
.why__card--note{ border-color: var(--accent-line); background: linear-gradient(180deg, var(--accent-soft), transparent 70%), var(--surface); }
.why__kind{
  display: block; text-transform: uppercase; letter-spacing: .1em;
  font-size: 0.84rem; font-weight: 700; color: var(--ink-faint); margin-bottom: 6px;
}
.why__card--note .why__kind{ color: var(--accent); }
.why__text{ margin: 0; font-size: 1.02rem; line-height: 1.5; }

/* The champion's run. */
.road{ list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.road__step{
  display: grid; grid-template-columns: 130px 34px 1fr; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); padding: 10px 14px;
}
.road__step.is-loss{ border-color: color-mix(in srgb, #c0392b 40%, var(--line-soft)); }
.road__round{
  text-transform: uppercase; letter-spacing: .07em; font-size: 0.84rem;
  font-weight: 700; color: var(--ink-faint);
}
.road__result{
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font-weight: 800; font-size: 0.95rem; color: #fff;
}
.road__result--w{ background: #1f8a4c; }
.road__result--l{ background: #c0392b; }
.road__match{ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; min-width: 0; }
.road__side{
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px;
  padding: 7px 10px; border-radius: var(--radius-sm); min-width: 0; position: relative;
}
.road__side--won{
  background: color-mix(in srgb, var(--ll) 16%, transparent);
  border-left: 4px solid var(--ll);
}
.road__side--lost{ opacity: .7; }
.road__names{ display: grid; min-width: 0; }
.road__club{ font-size: 1rem; line-height: 1.2; overflow-wrap: anywhere; }
.road__side--won .road__club{ font-weight: 800; }
.road__side--lost .road__club{ font-weight: 500; color: var(--ink-soft); }
.road__runs{
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 1.35rem; font-weight: 800;
}
.road__side--lost .road__runs{ color: var(--ink-faint); font-weight: 600; }
.road__tag{
  position: absolute; top: -8px; left: 10px; font-size: .84rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px;
  background: var(--ll); color: var(--ll-ink);
}
.road__vs{ font-size: 0.8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); }
.road__from{ font-size: 0.85rem; color: var(--ink-faint); }

/* The whole field, with records. */
.fieldgroup{ margin-top: 22px; }
.fieldgroup__name{
  margin: 0 0 10px; font-size: 0.88rem; text-transform: uppercase;
  letter-spacing: .1em; font-weight: 700; color: var(--ink-soft);
}
.fieldgroup__grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.teamcard{
  /* FOUR children, and this was three columns: badge, state mark, body, tail.
     The tail had nowhere to go and wrapped onto an implicit second row, so
     every card in the field printed its record underneath and on the wrong
     side of the card. It shows worst on the long names, which is most of them. */
  display: grid; grid-template-columns: 38px auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px;
}
.teamcard.is-champ{
  border-color: var(--accent-2-soft);
  background: linear-gradient(90deg, var(--accent-2-soft), transparent 70%), var(--surface);
}
.teamcard.is-second{ border-color: var(--line); background: var(--surface-2); }
.teamcard__body{ display: flex; flex-direction: column; min-width: 0; }
.teamcard__club{ font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
.teamcard__place{ font-size: 0.92rem; color: var(--ink-soft); }
.teamcard__tail{ text-align: right; display: flex; flex-direction: column; gap: 1px; white-space: nowrap; }
.teamcard__record{
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 1.2rem; font-weight: 700;
}
.teamcard__label{
  text-transform: uppercase; letter-spacing: .07em;
  font-size: 0.84rem; font-weight: 600; color: var(--ink-faint);
}
.teamcard.is-champ .teamcard__label{ color: var(--accent-2); }

/* Every game, by the day it was played. */
/* ============================================================
   THE GAME LOG, REBUILT
   The old row was a four column grid with five things in it, so
   every piece sat one column left of where it belonged and the
   losing club wrapped onto a line of its own. A result has a
   shape: winner, runs, runs, loser. The grid now says that
   outright, and each club carries its mark and the region it
   represented, because "Portsmouth" alone is a place and
   "Portsmouth, New England" is a team in a tournament.
   ============================================================ */
.gamelog{ margin-top: 14px; }

.gamelog__filter{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 4px 0 6px;
}
.gamelog__filter-label{
  font-size: 0.86rem; text-transform: uppercase; letter-spacing: .09em;
  font-weight: 700; color: var(--ink-faint);
}
.gamelog__day-group[hidden]{ display: none; }
.gamelog__day{
  margin: 20px 0 4px; font-size: 0.88rem; text-transform: uppercase;
  letter-spacing: .09em; font-weight: 700; color: var(--ink-faint);
}
.gamelog__row{
  padding: 9px 0 10px; border-bottom: 1px solid var(--line-soft);
}
.gamelog__row[hidden]{ display: none; }

.gamelog__round{
  display: inline-block; margin-bottom: 5px;
  font-size: 0.84rem; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 800; color: var(--accent);
}
.gamelog__round.is-title{
  color: var(--ink); background: var(--accent-soft, rgba(0,0,0,.05));
  padding: 2px 8px; border-radius: 999px;
}

/* winner | "beat" | loser. The middle column is fixed so every score
   in the log lines up vertically down the page. */
.gamelog__result{
  display: grid; grid-template-columns: 1fr 46px 1fr;
  align-items: center; gap: 10px;
}
.gamelog__side{
  display: grid; align-items: center; gap: 10px; min-width: 0;
}
.gamelog__side--won{ grid-template-columns: auto 1fr auto; }
.gamelog__side--lost{ grid-template-columns: auto 1fr auto; text-align: right; }
.gamelog__side--lost .gamelog__names{ justify-items: end; }

.gamelog__badge{ flex: none; }
.gamelog__names{ display: grid; gap: 1px; min-width: 0; }
.gamelog__club{
  font-weight: 700; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gamelog__side--lost .gamelog__club{ font-weight: 600; color: var(--ink-soft); }
.gamelog__from{
  font-size: 0.84rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gamelog__runs{
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 1.15rem; font-weight: 800; line-height: 1;
  min-width: 1.6ch; text-align: center;
}
.gamelog__side--won .gamelog__runs{ color: var(--ll, var(--ink)); }
.gamelog__side--lost .gamelog__runs{ color: var(--ink-faint); font-weight: 700; }
.gamelog__vs{
  text-align: center; font-size: 0.84rem; text-transform: uppercase;
  letter-spacing: .1em; font-weight: 700; color: var(--ink-faint);
}


@media (max-width: 700px){
  .placings__row{ grid-template-columns: 34px 1fr; }
  .placings__tag{ grid-column: 2; text-align: left; flex-direction: row; gap: 10px; align-items: baseline; }
  .road__step{ grid-template-columns: 34px 1fr; row-gap: 8px; }
  .road__round{ grid-column: 1 / -1; }
  .road__match{ grid-template-columns: 1fr; gap: 10px; }
  .road__vs{ display: none; }
  .gamelog__result{ grid-template-columns: 1fr 34px 1fr; gap: 6px; }
  .gamelog__side{ gap: 7px; }
  .gamelog__from{ display: none; }
  .gamelog__vs{ font-size: 0; }
  .yearbar__gap{ width: 0; }
}

/* ============================================================
   THE LANDING PAGE STRIP THAT ESCAPED ITS COLUMN
   .intro is a centered flex column inherited from the chat page's
   empty state. Centering makes every child size to its CONTENT,
   and "Around the League Today" is a horizontally scrolling row
   whose content is fifteen game cards wide. Measured at 1280:
   the row was 2072px wide starting at x -396, so it hung off both
   edges of the page and took its own heading off screen with it.
   The children stretch instead, and the row scrolls inside itself
   the way it was always meant to.
   ============================================================ */

.body--search .intro{ align-items: stretch; text-align: left; }
.body--search .intro > *{ max-width: 100%; }
.today, .lookup{ width: 100%; min-width: 0; }
.today__row{ max-width: 100%; scrollbar-width: thin; }
.today__head{ align-items: center; }
.today__all{ font-size: .9rem; font-weight: 600; white-space: nowrap; }

/* ============================================================
   SCORES AND STANDINGS, GIVEN THE ROOM IT NEEDS
   With the live strip moved off the landing page this is the only
   place live baseball lives, so it stops being a narrow column.
   Measured at 1280: three cards in a 900px page left "Arizona
   Diamondbacks" wrapping onto two lines with a club mark still to
   come, which is a card that changes height depending on the
   length of a city's name.
   ============================================================ */

.scores-page{ max-width: 1400px; }
.scoreboard{ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.score{ padding: 14px 16px; }
.score__side{ gap: 11px; padding: 4px 0; }
.score__team{ min-width: 0; }
.score__runs{ font-variant-numeric: tabular-nums; min-width: 1.5ch; text-align: right; }
.daynav__btn{ font-size: .9rem; font-weight: 600; padding: 7px 14px; }
.picker__select, .lookup__select{ font-size: 1rem; padding: 7px 12px; }

/* Club marks never share space with anything. A crest that can shrink is a
   crest that ends up underneath the club name on a narrow card. */
.crest{ flex: 0 0 auto; overflow: hidden; }
.crest img{ display: block; }

@media (max-width: 700px){
  .scoreboard{ grid-template-columns: 1fr; }
}

/* ============================================================
   THE POSTSEASON BRACKET
   The champion is a banner across the top rather than a sixth
   column off the right edge, and each column is a ROUND with the
   league marked on the series inside it.
   ============================================================ */

.champbanner{
  display: flex; align-items: center; gap: 20px;
  background: linear-gradient(100deg, var(--accent-2-soft), transparent 62%), var(--surface);
  border: 1px solid var(--accent-2-soft);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-bottom: 20px;
  box-shadow: 0 0 0 1px rgba(232,177,60,.10), 0 18px 40px rgba(0,0,0,.26);
}
.champbanner .crest{ width: 76px; height: 76px; }
.champbanner__body{ flex: 1; min-width: 0; }
.champbanner__label{
  margin: 0 0 2px; text-transform: uppercase; letter-spacing: .11em;
  font-size: 0.86rem; font-weight: 700; color: var(--accent-2);
}
.champbanner__name{
  margin: 0; font-family: var(--display); font-weight: 800;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem); letter-spacing: -.03em; line-height: 1.1;
}
.champbanner__detail{ margin: 6px 0 0; font-size: .96rem; color: var(--ink-soft); }
.champbanner__trophy{ font-size: 2.2rem; line-height: 1; flex: none; }

.bracket__round{ min-width: 232px; }
.bracket__series{ position: relative; padding: 12px 14px 10px; }
.bracket__series.is-final{
  border-color: var(--accent-line);
  background: linear-gradient(180deg, var(--accent-soft), transparent 70%), var(--surface);
}
.bracket__league{
  position: absolute; top: 10px; right: 12px;
  font-size: 0.84rem; letter-spacing: .1em; font-weight: 700;
  color: var(--ink-faint);
}
.bracket__league--al{ color: #e8735a; }
.bracket__league--nl{ color: var(--accent); }
.bracket__teamName{ min-width: 0; }

@media (max-width: 620px){
  .champbanner{ flex-wrap: wrap; gap: 14px; }
  .champbanner__trophy{ display: none; }
}

/* The league tag sits in the corner of a series card, so the winner's name
   needs to stop before it rather than run underneath it. */
.bracket__series .bracket__team:first-of-type{ padding-right: 26px; }

/* ============================================================
   REBUILT SEPT 4: THREE TABS, ONE FRONT DOOR
   ------------------------------------------------------------
   Everything below this line replaces the old four-link header
   and the plain search page. The shape of the site is now:

     /            the question box, over the field
     /mlb         Player Hub and Scores and Standings
     /team/<id>   one club, with its own park drawn behind it
     /littleleague  the tournament lookup
     /travel      the USSSA rulebook

   The rules the rest of this file already follows are kept:
   surfaces separated by hairlines rather than shadows, one
   accent doing the work, numbers in the condensed face.
   ============================================================ */

/* ---------- club marks, sized so the whole badge is visible ----------
   THE BUG THIS FIXES. Crests were being drawn into fixed squares with
   overflow hidden, and the fade-in only lifted when a load handler added a
   class. Any crest drawn by newer code therefore sat at opacity 0 and looked
   like a missing logo, and the ones that did appear were cropped: a club mark
   is almost never square, so a square box with a hidden overflow clips the
   sides of half the league. The box now has room to breathe, the image is
   contained inside it rather than filling it, and nothing is clipped. */
.crest{
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto; overflow: hidden;
}
/* THE ACTUAL FIX FOR CLIPPED AND OVERLAPPING CLUB MARKS.
   The box was a grid with centered items and the image was sized at width and
   height 100 percent. In that combination the percentage resolves against an
   indefinite track rather than against the box, so the mark was drawn at its
   own natural size and spilled over the club's name underneath; turning the
   overflow off had hidden it by cropping instead. Sizing by max-width and
   max-height against a box with a definite size is the shape that actually
   holds: every mark scales down to fit whole, keeps its own proportions, and
   none of the thirty is cropped or spills. Checked against all thirty. */
.crest img{
  width: auto; height: auto;
  max-width: 94%; max-height: 94%;
  object-fit: contain; opacity: 1;
}
.crest--sm{ width: 26px; height: 26px; }
.crest--md{ width: 38px; height: 38px; }
.crest--lg{ width: 62px; height: 62px; }
.crest--xl{ width: 108px; height: 108px; }

/* ---------- the header ---------- */

:root{
  --ball-face: #f4f6fa;
  --ball-edge: rgba(0,0,0,.18);
  --ball-seam: #d0433c;
}

.sitehead{
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: stretch; gap: 10px;
  padding: 0 clamp(14px, 3vw, 30px);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.sitehead__brand{
  display: flex; align-items: center; gap: 11px;
  padding: 12px 18px 12px 0;
  text-decoration: none; color: inherit; flex: none;
}
.ballmark{ width: 34px; height: 34px; flex: none; }
.sitehead__titles{ display: flex; flex-direction: column; line-height: 1.12; }
.sitehead__wordmark{
  font-family: var(--display); font-weight: 800; font-size: 1.16rem;
  letter-spacing: -.032em;
}
.sitehead__mission{
  font-size: 0.84rem; color: var(--ink-faint); letter-spacing: .01em;
}

/* THE HEADER HAS FIVE ENTRIES NOW. Four league tabs plus Tools/Games, and
   with the search box on the right that is more than a 13 inch laptop has room
   for. The strip used to be flex:1 with tabs that refused to shrink, so past a
   certain width the last tab simply ran underneath the search box.
   Three things fix it, in this order: the strip and the tabs may shrink, the
   blurbs go before anything else because they are the least useful pixels in
   the header, and the search goes last. Nothing is ever allowed to overlap. */
.sitehead__tabs{
  display: flex; align-items: stretch; gap: 2px;
  flex: 1 1 auto; min-width: 0; flex-wrap: nowrap;
}
.tab{ min-width: 0; }
.tab__link{ min-width: 0; }
.tab__label{ white-space: nowrap; }

.tab{ position: relative; display: flex; align-items: center; }
.sitehead__ask{ margin-left: auto; }
.tab__link{
  display: flex; flex-direction: column; justify-content: center;
  padding: 12px 12px 12px 16px; text-decoration: none; color: var(--ink-soft);
  border-bottom: 2px solid transparent; line-height: 1.18;
}
.tab__label{ font-weight: 700; font-size: .99rem; letter-spacing: -.012em; }
.tab__blurb{ font-size: 0.84rem; color: var(--ink-faint); white-space: nowrap; }
.tab:hover .tab__link,
.tab.is-open .tab__link{ color: var(--ink); }
.tab.is-here .tab__link{ color: var(--ink); border-bottom-color: var(--accent); }

/* THE CARET SITS HIGH, not centered on the line box. A chevron pointing
   down has all its weight along the bottom edge, so centering it by geometry
   drops it visually below the cap height of the label beside it and it reads
   as hanging off the word. Two pixels up puts it level with the middle of the
   letters and opens a little air between the two. */
.tab__caret{
  background: none; border: 0; cursor: pointer; color: var(--ink-faint);
  padding: 0 12px 0 10px; display: grid; place-items: center;
  /* Sept 15: pinned to the top of the tab and set level with the label line
     rather than centered on the two-line link, with more air to its left. */
  align-self: flex-start; margin-top: 13px; transform: none;
}
.tab__caret svg{ width: 11px; height: 8px; transition: transform .16s ease; }
.tab.is-open .tab__caret svg{ transform: rotate(180deg); }
.tab__caret:hover{ color: var(--ink); }
.tab__caret:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.tab__menu{
  position: absolute; top: 100%; left: 0; min-width: 306px; z-index: 70;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 7px;
  box-shadow: var(--shadow-lift);
  /* A menu has to show what is in it. Without a cap and a scrollbar, twelve
     entries ran past the bottom of a laptop screen and the last four features
     on the site were unreachable from the header. */
  max-height: calc(100vh - 5.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Past eight entries, one narrow column is the wrong shape: two columns fit
   on screen without scrolling and let every note stay visible. */
.tab__menu--wide{
  display: grid;
  grid-template-columns: repeat(2, minmax(15rem, 1fr));
  gap: 2px 4px;
  min-width: 34rem;
  right: 0; left: auto;
}
.tab__menu--wide .tab__soon{ grid-column: 1 / -1; }
.tab__item{
  display: block; padding: 9px 11px; border-radius: var(--radius-sm);
  text-decoration: none; color: inherit;
}
.tab__item:hover{ background: var(--surface-2); }
.tab__itemName{ display: block; font-weight: 650; font-size: .96rem; }
.tab__itemNote{ display: block; font-size: 0.88rem; color: var(--ink-faint); margin-top: 1px; line-height: 1.4; white-space: normal; }
.tab__soon{
  margin: 5px 11px 4px; font-size: 0.84rem; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: .1em;
}

.sitehead__ask{ display: flex; align-items: center; flex: none; padding: 10px 0; }
.sitehead__askInput{
  width: 190px; padding: 8px 13px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--ink); font: inherit; font-size: .9rem;
}
.sitehead__askInput:focus{
  outline: none; border-color: var(--accent-line); width: 250px;
  background: var(--surface);
}
.sitehead__askInput{ transition: width .18s ease; }

/* Step one: the blurbs. One line of gray text under each tab is the first
   thing that can go, and dropping five of them buys back most of a tab. */
@media (max-width: 1440px){
  .tab__blurb{ display: none; }
  .tab__link{ padding: 14px 9px 14px 12px; }
  .tab__caret{ padding: 0 8px 0 4px; }
}
/* Step two: the wordmark's tagline, then the search box. */
@media (max-width: 1180px){
  .sitehead__mission{ display: none; }
  .sitehead__askInput{ width: 150px; }
}
@media (max-width: 1060px){
  .sitehead__ask{ display: none; }
}
@media (max-width: 940px){
  .sitehead{ flex-wrap: wrap; }
  .sitehead__ask{ display: none; }
  .tab__blurb{ display: none; }
  /* Below this the five tabs get their own row and may scroll sideways, which
     is far better than five illegible ones crushed together. */
  .sitehead__tabs{ order: 3; width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
  .sitehead__tabs::-webkit-scrollbar{ height: 0; }
  .tab{ flex: none; }
}
@media (max-width: 900px){
  /* On a narrow screen two columns is worse than one, and the panel is
     already allowed to scroll. */
  .tab__menu--wide{ grid-template-columns: 1fr; min-width: 20rem; }
}
@media (max-width: 560px){
  .sitehead__mission{ display: none; }
  .sitehead__tabs{ width: 100%; overflow-x: auto; }
  .tab__menu{ left: auto; right: 0; min-width: min(92vw, 22rem); }
  .tab__menu--wide{ min-width: min(92vw, 22rem); }
}

/* ============================================================
   THE FRONT PAGE
   One box on a drawn field, with what is on tonight underneath.
   ============================================================ */

.home{ width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 clamp(14px, 3vw, 30px) 64px; }

.fronthero{
  position: relative; isolation: isolate;
  margin: 22px 0 0; padding: clamp(34px, 6vw, 70px) clamp(18px, 4vw, 56px) clamp(26px, 4vw, 44px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, var(--accent-soft), transparent 62%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
}

/* The field behind the box.
   Drawn in CSS rather than shipped as an image: it is three cones and two
   arcs, it costs nothing, it recolors itself in light mode, and there is no
   photograph of a ballpark this site has the right to publish. */
.fronthero__art{
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    /* the outfield */
    radial-gradient(120% 78% at 50% 118%, rgba(62,201,141,.16) 0 42%, rgba(62,201,141,.07) 42% 63%, transparent 64%),
    /* the infield dirt */
    radial-gradient(38% 34% at 50% 122%, rgba(232,177,60,.20) 0 58%, transparent 60%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 46%, #000 100%);
}
/* the foul lines */
.fronthero__art::before,
.fronthero__art::after{
  content: ""; position: absolute; bottom: -6%; left: 50%;
  width: 2px; height: 78%;
  background: linear-gradient(0deg, rgba(255,255,255,.22), transparent 78%);
  transform-origin: bottom center;
}
.fronthero__art::before{ transform: rotate(-45deg); }
.fronthero__art::after{ transform: rotate(45deg); }

.fronthero__inner{ position: relative; max-width: 820px; margin: 0 auto; text-align: center; }
.fronthero__eyebrow{
  margin: 0 0 12px; text-transform: uppercase; letter-spacing: .13em;
  font-size: 0.84rem; font-weight: 700; color: var(--accent);
}
.fronthero__headline{
  margin: 0; font-family: var(--display); font-weight: 900;
  font-size: clamp(2.1rem, 6.2vw, 4rem); letter-spacing: -.042em; line-height: 1.02;
}
.fronthero__sub{
  margin: 14px auto 0; max-width: 620px; color: var(--ink-soft);
  font-size: clamp(.98rem, 1.6vw, 1.1rem); line-height: 1.55;
}

.fronthero.is-tight{ padding-top: 26px; padding-bottom: 22px; }
.fronthero.is-tight .fronthero__headline{ font-size: clamp(1.4rem, 3vw, 1.9rem); }
.fronthero.is-tight .fronthero__sub,
.fronthero.is-tight .fronthero__examples,
.fronthero.is-tight .fronthero__eyebrow{ display: none; }

.ask{ margin: 26px auto 0; max-width: 720px; position: relative; }
.ask__field{
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 6px 6px 18px;
  box-shadow: 0 10px 34px rgba(0,0,0,.28);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.ask__field:focus-within{
  border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), 0 10px 34px rgba(0,0,0,.28);
}
.ask__icon{ width: 20px; height: 20px; color: var(--ink-faint); flex: none; }
.ask__input{
  flex: 1; min-width: 0; background: none; border: 0; color: var(--ink);
  font: inherit; font-size: clamp(1rem, 1.8vw, 1.12rem); padding: 13px 0;
}
.ask__input:focus{ outline: none; }
.ask__input::placeholder{ color: var(--ink-faint); }
.ask__go{
  flex: none; border: 0; cursor: pointer; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  font: inherit; font-weight: 750; font-size: 1rem; padding: 12px 26px;
}
.ask__go:hover{ background: var(--accent-hot); }

.ask__status{ text-align: center; color: var(--ink-soft); margin: 16px 0 0; }

.home .filter{ justify-content: center; margin-top: 18px; }
.fronthero__examples{
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  align-items: center; margin-top: 22px;
}
.fronthero__examplesLabel{
  font-size: 0.84rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-faint); margin-right: 2px;
}

.home__below{ margin-top: 34px; display: grid; gap: 26px; }
.home__rail{
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.railblock{
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 17px;
}
.railblock__head{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.railblock__title{
  margin: 0; font-family: var(--display); font-size: 1.02rem; font-weight: 750;
  letter-spacing: -.02em;
}
.railblock__more{ font-size: 0.88rem; color: var(--accent); text-decoration: none; }
.railblock__more:hover{ text-decoration: underline; }
.railblock__note{ margin: 8px 0 0; font-size: 0.88rem; color: var(--ink-faint); }

.minigames{ margin-top: 10px; display: grid; gap: 2px; }
.minigame{
  display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: var(--radius-sm);
  text-decoration: none; color: inherit;
}
.minigame:hover{ background: var(--surface-2); }
.minigame__side{ display: flex; align-items: center; gap: 7px; min-width: 0; }
.minigame__side.is-dim{ color: var(--ink-faint); }
.minigame__club{ font-size: 0.92rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.minigame__runs{ font-family: var(--mono); font-weight: 700; margin-left: auto; }
.minigame__state{ font-size: 0.84rem; color: var(--ink-faint); text-align: right; white-space: nowrap; }
.minigame__state.is-live{ color: var(--pos); font-weight: 700; }

.leaders{ margin-top: 10px; display: grid; gap: 3px; }
.leader{
  display: flex; align-items: center; gap: 9px; padding: 6px 9px;
  border-radius: var(--radius-sm); text-decoration: none; color: inherit;
  border-left: 3px solid var(--club, var(--accent));
}
.leader:hover{ background: var(--surface-2); }
.leader__club{ font-size: .9rem; font-weight: 600; }
.leader__record{ margin-left: auto; font-family: var(--mono); color: var(--ink-soft); }

.llwscard{
  display: block; margin-top: 12px; padding: 14px 16px;
  border-radius: var(--radius); text-decoration: none; color: inherit;
  background: linear-gradient(140deg, var(--accent-2-soft), transparent 70%), var(--surface-2);
  border: 1px solid var(--line);
}
.llwscard:hover{ border-color: var(--accent-2-soft); }
.llwscard__year{ font-family: var(--mono); font-size: 0.88rem; color: var(--accent-2); font-weight: 700; }
.llwscard__label{
  display: block; text-transform: uppercase; letter-spacing: .12em;
  font-size: 0.84rem; color: var(--ink-faint); margin-top: 3px;
}
.llwscard__club{ display: block; font-family: var(--display); font-weight: 800; font-size: 1.14rem; letter-spacing: -.025em; margin-top: 3px; }
.llwscard__from{ display: block; font-size: 0.9rem; color: var(--ink-soft); }
.llwscard__line{ display: block; font-size: 0.88rem; color: var(--ink-faint); margin-top: 7px; }

/* The college block on the landing rail. Same card as Williamsport, in the
   pale blue of a June sky in Nebraska, plus one line the other blocks do not
   need: a countdown, because for eight months of the year the honest thing
   this block can say is when the sport comes back. */
.cbfront{
  display: block; margin-top: 12px; padding: 14px 16px;
  border-radius: var(--radius); text-decoration: none; color: inherit;
  background: linear-gradient(140deg, var(--college-soft), transparent 70%), var(--surface-2);
  border: 1px solid var(--line);
}
.cbfront:hover{ border-color: var(--college); }
.cbfront__year{ font-family: var(--mono); font-size: 0.88rem; color: var(--college); font-weight: 700; }
.cbfront__label{
  display: block; text-transform: uppercase; letter-spacing: .12em;
  font-size: 0.84rem; color: var(--ink-faint); margin-top: 3px;
}
.cbfront__club{ display: block; font-family: var(--display); font-weight: 800; font-size: 1.14rem; letter-spacing: -.025em; margin-top: 3px; }
.cbfront__from{ display: block; font-size: 0.9rem; color: var(--ink-soft); }
.cbfront__line{ display: block; font-size: 0.88rem; color: var(--ink-faint); margin-top: 7px; }

.lanes{ display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.lane{
  position: relative; overflow: hidden;
  padding: 20px 20px 18px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface);
}
.lane::before{
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--lane, var(--accent));
}
.lane--mlb{ --lane: var(--accent); }
.lane--littleleague{ --lane: var(--accent-2); }
.lane--college{ --lane: var(--college); }
.lane--travel{ --lane: var(--accent-3); }
.lane--tools{ --lane: #9B7DF0; }  /* the same purple the Tools/Games hero uses */
.lane__title{
  font-family: var(--display); font-weight: 800; font-size: 1.32rem;
  letter-spacing: -.03em; text-decoration: none; color: inherit;
}
.lane__title:hover{ color: var(--lane); }
.lane__line{ margin: 7px 0 14px; color: var(--ink-soft); font-size: .92rem; line-height: 1.5; }
.lane__links{ display: flex; flex-wrap: wrap; gap: 7px; }
.lane__link{
  font-size: 0.9rem; padding: 6px 12px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  text-decoration: none; color: var(--ink-soft);
}
.lane__link:hover{ color: var(--ink); border-color: var(--lane); }

.answer__back{
  background: none; border: 0; cursor: pointer; color: var(--ink-faint);
  font: inherit; font-size: 0.9rem; padding: 0 0 12px;
}
.answer__back:hover{ color: var(--accent); }

/* ============================================================
   SECTION FRONTS
   ============================================================ */

.section-page{ width: 100%; max-width: 1400px; margin: 0 auto; padding: 24px clamp(14px, 3vw, 30px) 64px; }

/* Read the Play gets a wider column than the rest of the site, because the
   page is one big picture and 1180 was cropping the thing being looked at.
   The Nine is the same argument: nine cards have to be readable on it. */
.body--defense .section-page{ max-width: 1460px; }
.body--nine .section-page{ max-width: 1560px; }

.sechero{
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(26px, 4.4vw, 48px) clamp(20px, 4vw, 44px);
  background: linear-gradient(150deg, var(--tone-soft), transparent 58%), var(--surface);
}
.sechero--mlb{ --tone: var(--accent); --tone-soft: var(--accent-soft); }
.sechero--ll{ --tone: var(--accent-2); --tone-soft: var(--accent-2-soft); }
.sechero--travel{ --tone: var(--accent-3); --tone-soft: var(--accent-3-soft); }
.sechero--college{ --tone: var(--college); --tone-soft: var(--college-soft); }
.sechero__eyebrow{
  margin: 0 0 10px; text-transform: uppercase; letter-spacing: .13em;
  font-size: 0.84rem; font-weight: 700; color: var(--tone);
}
.sechero__title{
  margin: 0; font-family: var(--display); font-weight: 900;
  font-size: clamp(1.8rem, 4.4vw, 2.9rem); letter-spacing: -.038em; line-height: 1.05;
}
.sechero__blurb{ margin: 14px 0 0; max-width: 720px; color: var(--ink-soft); line-height: 1.6; }

.finder-wrap{ margin: 22px 0 6px; }
.finder{ position: relative; max-width: 640px; }
.finder__field{
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 5px 5px 16px;
}
.finder__field:focus-within{ border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.finder__icon{ width: 18px; height: 18px; color: var(--ink-faint); flex: none; }
.finder__input{ flex: 1; min-width: 0; background: none; border: 0; color: var(--ink); font: inherit; padding: 11px 0; }
.finder__input:focus{ outline: none; }
.finder__go{
  flex: none; border: 0; cursor: pointer; border-radius: 999px;
  background: var(--surface-3); color: var(--ink); font: inherit; font-weight: 650;
  padding: 10px 18px;
}
.finder__go:hover{ background: var(--accent); color: var(--accent-ink); }
.finder .suggestions{ left: 0; right: 0; }
.finder-wrap__hint{ margin: 9px 2px 0; font-size: 0.88rem; color: var(--ink-faint); }

.doors{ display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin: 22px 0 6px; }
.door{
  position: relative; display: block; padding: 22px 22px 20px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); text-decoration: none; color: inherit;
  transition: border-color .16s ease, transform .16s ease;
}
.door:hover{ border-color: var(--accent-line); transform: translateY(-2px); }
.door__name{ display: block; font-family: var(--display); font-weight: 800; font-size: 1.3rem; letter-spacing: -.03em; }
.door__note{ display: block; margin-top: 8px; color: var(--ink-soft); font-size: .92rem; line-height: 1.5; }
.door__tag{
  position: absolute; top: 16px; right: 18px;
  font-size: 0.84rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--accent); font-weight: 700;
}

.clubgroup{ margin-top: 20px; }
.clubgroup__name{
  margin: 0 0 10px; font-size: 0.86rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-faint); font-weight: 700;
}
.clubgroup__grid{ display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
.clubcard{
  display: grid; justify-items: center; gap: 6px; padding: 16px 10px 13px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); text-decoration: none; color: inherit;
  border-top: 3px solid var(--club, var(--accent));
}
.clubcard:hover{ background: var(--surface-2); }
.clubcard__name{ font-weight: 700; font-size: .92rem; text-align: center; }
.clubcard__record{ font-family: var(--mono); font-size: 0.9rem; color: var(--ink-soft); }

.pgrid{ display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.pcard{
  display: grid; justify-items: center; text-align: center; gap: 5px;
  padding: 18px 14px 15px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface);
  text-decoration: none; color: inherit;
}
.pcard:hover{ border-color: var(--accent-line); background: var(--surface-2); }
.pcard__face{
  width: 72px; height: 72px; border-radius: 50%; overflow: hidden;
  background: var(--surface-3); display: grid; place-items: center;
}
.pcard__face img{ width: 100%; height: 100%; object-fit: cover; }
.pcard__face.is-blank::after{ content: "⚾"; font-size: 1.5rem; opacity: .35; }
.pcard__name{ font-weight: 750; font-size: 1rem; letter-spacing: -.015em; }
.pcard__line{ font-size: 0.88rem; color: var(--ink-faint); line-height: 1.4; }

/* ---------- Little League front ---------- */

/* Solid rather than tinted. A club badge is the only mark these teams have,
   so it has to hold its own against a white card as well as a dark one. */
/* ============================================================
   REGION COLORS
   These used to be hashed from the club's name, which gave every
   club a stable distinct color and gave none of them the RIGHT
   one. A team at the World Series wears its region's colors, so
   that is what the badge is filled with now.
   Two consequences for the CSS. The ink can no longer be white:
   the palette runs from Great Lakes black to Mid-Atlantic white
   by way of the West's light blue, so the text color is computed
   per fill and arrives as --ll-ink. And every region has a second
   color, which is the trim it is actually recognized by, so the
   badge carries it as a ring rather than throwing it away.
   ============================================================ */
.llbadge{
  display: inline-grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--ll, var(--accent)); color: var(--ll-ink, #fff);
  font-family: var(--mono); font-weight: 700; font-size: 0.86rem; letter-spacing: .02em;
  box-shadow: 0 1px 3px rgba(0,0,0,.28);
  outline: 1.5px solid var(--ll-accent, transparent);
  outline-offset: -3px;
  overflow: hidden;
}
.llbadge[data-len="3"]{ font-size: 0.84rem; letter-spacing: 0; }

/* The region a club played out of, said outright beside the champion. */
.llws-champ__region{
  font-family: var(--mono); font-size: 0.84rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
  padding: 4px 9px; border-radius: 999px;
  background: var(--ll, var(--accent)); color: var(--ll-ink, #fff);
  box-shadow: inset 0 0 0 1.5px var(--ll-accent, transparent);
}

/* A year the archive cannot supply in full says so, above its games. */
.gamelog__caveat{
  margin: 0 0 14px; padding: 11px 13px;
  border-left: 3px solid var(--accent-2, #b8860b);
  background: var(--surface-2); border-radius: 0 8px 8px 0;
  font-size: .9rem; line-height: 1.5; color: var(--ink-soft);
}

/* The club's color, carried onto the cards it appears on. */
.teamcard{ border-left: 3px solid var(--ll, var(--line)); }
.placings__row{ border-left: 3px solid var(--ll, var(--line)); }
.teamcard__place{ letter-spacing: .005em; }

.champgrid{ display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); }
.champcard{
  display: block; padding: 15px 16px 14px; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(150deg, color-mix(in srgb, var(--ll) 13%, transparent), transparent 62%), var(--surface);
  border-left: 3px solid var(--ll, var(--accent));
}
.champcard:hover{ background: linear-gradient(150deg, color-mix(in srgb, var(--ll) 22%, transparent), transparent 66%), var(--surface-2); }
.champcard__year{ display: block; font-family: var(--mono); font-weight: 700; color: var(--ll); margin-top: 8px; }
.champcard__club{ display: block; font-family: var(--display); font-weight: 800; font-size: 1.06rem; letter-spacing: -.024em; line-height: 1.2; }
.champcard__from{ display: block; font-size: 0.88rem; color: var(--ink-soft); margin-top: 2px; }
.champcard__line{ display: block; font-size: 0.86rem; color: var(--ink-faint); margin-top: 8px; }

.decade{ display: flex; align-items: flex-start; gap: 14px; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.decade:first-of-type{ border-top: 0; }
.decade__label{
  flex: none; width: 62px; font-family: var(--mono); font-weight: 700;
  color: var(--ink-faint); padding-top: 5px;
}
.decade__years{ display: flex; flex-wrap: wrap; gap: 6px; }
.yearchip{
  font-family: var(--mono); font-size: .9rem; font-weight: 600;
  padding: 5px 11px; border-radius: 7px; text-decoration: none;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-soft);
}
.yearchip:hover{ background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ---------- travel front ---------- */

.agegrid{ display: flex; flex-wrap: wrap; gap: 8px; }
.agetile{
  font-family: var(--mono); font-weight: 700; font-size: 1.02rem;
  padding: 12px 20px; border-radius: var(--radius-sm); text-decoration: none;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink);
}
.agetile:hover{ background: var(--accent-3); color: var(--accent-ink); border-color: var(--accent-3); }

.topicgrid{ display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.topiccard{ padding: 16px 17px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.topiccard__name{ margin: 0; font-family: var(--display); font-weight: 750; font-size: 1.06rem; letter-spacing: -.022em; }
.topiccard__note{ margin: 5px 0 12px; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.45; }
.topiccard__ages{ display: flex; flex-wrap: wrap; gap: 6px; }
.topiccard__age{
  font-family: var(--mono); font-size: 0.88rem; padding: 4px 10px; border-radius: 6px;
  text-decoration: none; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-soft);
}
.topiccard__age:hover{ color: var(--accent-ink); background: var(--accent-3); border-color: var(--accent-3); }

/* ============================================================
   THE TEAM HUB
   ============================================================ */

/* WIDER THAN THE STANDARD PAGE, on purpose and with precedent: Read the Play
   already runs at 1460 because it is built around a drawing, and so is this.
   1180 is right for a column of prose and wrong for a ballpark with nine men
   standing on it and a lineup card beside them. */
.teamhub{ width: 100%; max-width: 1460px; margin: 0 auto; padding: 20px clamp(14px, 3vw, 30px) 64px; }

.teamhero{
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: clamp(16px, 3vw, 34px);
  padding: clamp(20px, 3.4vw, 34px) clamp(20px, 3.4vw, 36px);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--club) 34%, transparent) 0%, transparent 56%),
    linear-gradient(255deg, color-mix(in srgb, var(--club-2) 20%, transparent) 0%, transparent 46%),
    var(--surface);
}
.teamhero__mark{ flex: none; display: grid; place-items: center; }
.teamhero__body{ flex: 1; min-width: 0; }
.teamhero__eyebrow{
  margin: 0 0 6px; text-transform: uppercase; letter-spacing: .13em;
  font-size: 0.84rem; font-weight: 700; color: var(--ink-soft);
}
.teamhero__name{
  margin: 0; font-family: var(--display); font-weight: 900;
  font-size: clamp(1.8rem, 4.6vw, 3rem); letter-spacing: -.042em; line-height: 1;
}
.teamhero__meta{ display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0 0; font-size: 0.9rem; color: var(--ink-soft); }
.teamhero__meta span + span::before{ content: "·"; margin-right: 14px; color: var(--ink-faint); }
.teamhero__record{ display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 22px; margin-top: 18px; }
.teamhero__wl{ display: flex; flex-direction: column; }
.teamhero__wlNum{
  font-family: var(--display); font-weight: 850; font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  letter-spacing: -.04em; line-height: 1;
}
.teamhero__wlLabel{ font-size: 0.84rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); margin-top: 4px; }

.stat-tile{ display: flex; flex-direction: column; gap: 3px; min-width: 58px; }
.stat-tile__value{ font-family: var(--mono); font-weight: 700; font-size: 1.16rem; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-tile__label{ font-size: 0.84rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); }
.stat-tile__hint{ font-size: 0.84rem; color: var(--ink-faint); }
.stat-tile--big .stat-tile__value{ font-size: 1.6rem; }

.teamhub__grid{ display: grid; gap: 18px; margin-top: 18px; }
.teamhub__col{ display: grid; gap: 18px; align-content: start; }
@media (min-width: 1020px){
  .teamhub__grid{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

/* ---------- the field ---------- */

.field{
  position: relative; width: 100%; aspect-ratio: 400 / 345;
  border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--club) 18%, var(--surface-2)) 0%, var(--surface-2) 62%);
}
.field__art{ position: absolute; inset: 0; width: 100%; height: 100%; }
.field__grass{ fill: color-mix(in srgb, var(--accent-3) 20%, var(--surface-3)); }
.field__wall{
  fill: none; stroke: var(--club, var(--accent));
  stroke-width: 4; stroke-linecap: round;
}
.field__dirt{ fill: color-mix(in srgb, var(--accent-2) 26%, var(--surface-3)); }
.field__diamond{ fill: color-mix(in srgb, var(--accent-3) 26%, var(--surface-3)); }
.field__base{ fill: #f2f4f8; }
.field__mound{ fill: color-mix(in srgb, var(--accent-2) 32%, var(--surface-3)); }
.field__plate{ fill: #f2f4f8; }
.field__foul{ stroke: rgba(255,255,255,.5); stroke-width: 1.6; }
.field__dim{
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  fill: var(--ink-faint); text-anchor: middle;
}

.fielder{
  position: absolute; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 1px; width: 98px; text-align: center;
  pointer-events: auto;
}
.fielder__face{
  position: relative; width: 34px; height: 34px; border-radius: 50%;
  overflow: visible; display: grid; place-items: center;
  background: var(--surface); border: 2px solid var(--club, var(--accent));
  box-shadow: 0 3px 10px rgba(0,0,0,.35);
}
.fielder__face img{ width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.fielder__face.is-blank::after{ content: "⚾"; font-size: .9rem; opacity: .5; }
/* The batting order, as a pip on the shoulder of the marker. It used to be a
   third line of text under the name, which is what pushed every marker into
   its neighbour. */
.fielder__order{
  position: absolute; top: -5px; left: -7px;
  min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--surface); color: var(--ink-soft);
  border: 1px solid var(--line);
  font-family: var(--mono); font-size: 0.84rem; font-weight: 700;
}
.fielder__pos{
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 0.84rem; font-weight: 700; letter-spacing: .02em;
  padding: 1px 5px; border-radius: 5px; white-space: nowrap;
  background: var(--club, var(--accent)); color: #fff;
  border: 0;
}
/* A label on a drawing has to survive whatever color is behind it, and on
   this one that is grass, dirt, a white base and a club color within the
   space of one marker. A small opaque plate under the two lines is what makes
   every one of them readable without outlining the text. */
.fielder__name,
.fielder__line{
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  padding: 0 4px; border-radius: 4px; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fielder__name{ margin-top: 7px; font-size: 0.84rem; font-weight: 750; line-height: 1.3; }
.fielder__line{ font-family: var(--mono); font-size: 0.84rem; color: var(--ink-soft); line-height: 1.3; }

.field__legend{ margin: 10px 2px 0; font-size: 0.88rem; color: var(--ink-faint); }
.field__off{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.field__offLabel{ font-size: 0.84rem; text-transform: uppercase; letter-spacing: .11em; color: var(--ink-faint); }
.field__offChip{
  font-size: 0.88rem; padding: 4px 10px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
}
.field__offChip strong{ font-family: var(--mono); color: var(--club, var(--accent)); margin-right: 4px; }

/* ---------- splits, next three, rotation ---------- */

.splits{ display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
.split{
  padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2); display: grid; gap: 3px;
}
.split__label{ font-size: 0.84rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); }
.split__record{ font-family: var(--display); font-weight: 800; font-size: 1.5rem; letter-spacing: -.035em; line-height: 1; }
.split__pct{ font-family: var(--mono); font-size: 0.9rem; color: var(--ink-soft); }
.split__note{ font-size: 0.84rem; color: var(--ink-faint); line-height: 1.35; margin-top: 3px; }

.upnext{ display: grid; gap: 10px; }
.upnext__card{
  display: grid; grid-template-columns: 92px 1fr; gap: 8px 14px; align-items: center;
  padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2); text-decoration: none; color: inherit;
}
.upnext__card:hover{ border-color: var(--club, var(--accent)); }
.upnext__when{ display: grid; }
.upnext__day{ font-weight: 700; font-size: .92rem; }
.upnext__time{ font-family: var(--mono); font-size: 0.88rem; color: var(--ink-faint); }
.upnext__who{ display: flex; align-items: center; gap: 9px; min-width: 0; }
.upnext__vs{ font-size: 0.84rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); }
.upnext__opp{ font-weight: 700; font-size: 1rem; letter-spacing: -.015em; }
.upnext__arms{ grid-column: 1 / -1; display: grid; gap: 6px; grid-template-columns: 1fr 1fr; padding-top: 9px; border-top: 1px solid var(--line-soft); }
.armchip{ display: grid; gap: 1px; min-width: 0; }
.armchip__label{ font-size: 0.84rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); }
.armchip__name{ font-size: 0.9rem; font-weight: 600; }
.armchip__line{ font-family: var(--mono); font-size: 0.86rem; color: var(--ink-soft); }

.rotation{ display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
.rotcard{
  position: relative; padding: 15px 14px 13px; text-align: center;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2); display: grid; justify-items: center; gap: 6px;
  border-top: 3px solid var(--club, var(--accent));
}
.rotcard__slot{
  position: absolute; top: 9px; left: 11px;
  font-family: var(--mono); font-size: 0.84rem; font-weight: 700; color: var(--ink-faint);
}
.rotcard__face{
  width: 54px; height: 54px; border-radius: 50%; overflow: hidden;
  background: var(--surface-3); display: grid; place-items: center;
}
.rotcard__face img{ width: 100%; height: 100%; object-fit: cover; }
.rotcard__face.is-blank::after{ content: "⚾"; font-size: 1.15rem; opacity: .4; }
.rotcard__name{ font-weight: 750; font-size: .96rem; letter-spacing: -.02em; line-height: 1.15; }
.rotcard__stats{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 6px; width: 100%; }
.rotcard__stats .stat-tile{ min-width: 0; align-items: center; text-align: center; }
.rotcard__stats .stat-tile__value{ font-size: .92rem; }
.rotcard__stats .stat-tile__label{ font-size: 0.84rem; }
.rotcard__last{ font-size: 0.84rem; color: var(--ink-faint); }

.teamstats{ display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.teamstats__title{
  margin: 0 0 10px; font-size: 0.84rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-faint); font-weight: 700;
}
.teamstats__grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 12px 10px; }

.divrow{ display: grid; gap: 3px; }
.divrow__team{
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  border-radius: var(--radius-sm); text-decoration: none; color: inherit;
}
.divrow__team:hover{ background: var(--surface-2); }
.divrow__team.is-self{ background: color-mix(in srgb, var(--club) 16%, transparent); }
.divrow__name{ font-weight: 600; font-size: .94rem; }
.divrow__record{ margin-left: auto; font-family: var(--mono); color: var(--ink-soft); }

.formrail{ display: flex; flex-wrap: wrap; gap: 6px; }
.formpip{
  display: grid; justify-items: center; gap: 1px; padding: 8px 9px;
  border-radius: var(--radius-sm); min-width: 62px;
  border: 1px solid var(--line); background: var(--surface-2);
}
.formpip.is-win{ border-color: color-mix(in srgb, var(--pos) 46%, transparent); }
.formpip.is-loss{ border-color: color-mix(in srgb, var(--neg) 34%, transparent); }
.formpip__wl{ font-family: var(--display); font-weight: 800; font-size: .92rem; }
.formpip.is-win .formpip__wl{ color: var(--pos); }
.formpip.is-loss .formpip__wl{ color: var(--neg); }
.formpip__score{ font-family: var(--mono); font-size: 0.86rem; color: var(--ink-soft); }
.formpip__opp{ font-size: 0.84rem; color: var(--ink-faint); white-space: nowrap; }

/* ---------- scoreboard: records, and the whole row as a link ---------- */

.score__side{ text-decoration: none; color: inherit; border-radius: var(--radius-sm); }
a.score__side:hover{ background: var(--surface-2); }
.score__who{ display: flex; flex-direction: column; min-width: 0; flex: 1; }
.score__record{ font-family: var(--mono); font-size: 0.84rem; color: var(--ink-faint); }
.division__link{ display: flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; }
a.division__link:hover{ color: var(--accent); }
a.bracket__team{ text-decoration: none; color: inherit; }
a.bracket__team:hover .bracket__teamName{ color: var(--accent); }

@media (max-width: 700px){
  .teamhero{ flex-direction: column; text-align: center; }
  .teamhero__meta{ justify-content: center; }
  .teamhero__record{ justify-content: center; }
  .upnext__card{ grid-template-columns: 1fr; }
  .upnext__arms{ grid-template-columns: 1fr; }
}

/* The same auto-margin trap on the pages that predate this rebuild. */
.scores-page, .llws, .hub{ width: 100%; }

/* ---------- last fixes from looking at the built pages ---------- */

/* A grid or flex display beats the hidden attribute, so a section that sets
   one has to say what hidden means for itself. The rail under the question
   box was staying on screen behind every answer because of this. */
.home__below[hidden]{ display: none; }

/* The two links above an answer were running into each other. */
.answer__back{ display: block; }
.answer__hubLink{ display: inline-block; margin-bottom: 12px; }

/* "Search another player" used to live inside the old header. It now sits on
   its own under the site header, so it needs the page's width and padding
   rather than a header's. */
.mini-search{
  width: 100%; max-width: 1400px; margin: 18px auto -6px;
  padding: 0 clamp(14px, 3vw, 30px); position: relative;
}
.mini-search__input{
  width: 100%; max-width: 340px; padding: 9px 15px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); font: inherit; font-size: .92rem;
}
.mini-search__input:focus{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.suggestions--mini{ left: clamp(14px, 3vw, 30px); max-width: 340px; }

/* ---------- the field at every width ----------
   The markers used to be a fixed 98 pixels wide whatever the field was, which
   is fine in a 625 pixel column and unreadable in a 358 pixel one: at that
   size the shortstop and the second baseman are 53 pixels apart and their
   labels sit on top of each other. Marker size now follows the container, and
   below the width where a name can fit at all the names come off the markers
   entirely and the lineup card underneath does that job. */
.field{ container-type: inline-size; }
.fielder{ width: clamp(58px, 15.5cqw, 100px); }
.fielder__face{ width: clamp(26px, 5.4cqw, 36px); height: clamp(26px, 5.4cqw, 36px); }
.fielder__name{ font-size: clamp(.6rem, 1.85cqw, .76rem); }
.fielder__line{ font-size: clamp(.55rem, 1.7cqw, .68rem); }
.fielder__pos{ font-size: clamp(.5rem, 1.5cqw, .62rem); }

.lineupcard{
  display: none; list-style: none; margin: 12px 0 0; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.lineupcard__row{
  display: grid; grid-template-columns: 26px 34px minmax(0, 1fr) auto auto; gap: 10px;
  align-items: center; padding: 8px 12px;
  border-top: 1px solid var(--line-soft); background: var(--surface-2);
}
.lineupcard__row:first-child{ border-top: 0; }
.lineupcard__spot{ font-family: var(--mono); font-size: 0.86rem; color: var(--ink-faint); }
.lineupcard__pos{ font-family: var(--mono); font-size: 0.86rem; font-weight: 700; color: var(--club, var(--accent)); }
/* justify-self keeps a linked name the width of the name. Without it the
   anchor fills the whole column and its underline runs off across the row,
   which reads as a rule under every line rather than as a link. */
.lineupcard__name{
  justify-self: start; max-width: 100%;
  font-weight: 650; font-size: .92rem; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lineupcard__line{ font-family: var(--mono); font-size: 0.88rem; color: var(--ink-soft); white-space: nowrap; }
/* How often this man actually hits here. A spot he has held nine times out of
   the last fifteen and one he has held four times both come out as "most
   common", and the reader deserves to know which of the two he is looking at. */
.lineupcard__usage{
  font-family: var(--mono); font-size: 0.84rem; color: var(--ink-faint);
  white-space: nowrap; text-align: right; min-width: 58px;
}
/* On a phone the count is the first thing to go: a name that fits matters
   more than knowing it was thirteen of fifteen rather than twelve. */
@media (max-width: 520px){
  .lineupcard__row{ grid-template-columns: 22px 30px minmax(0, 1fr) auto; }
  .lineupcard__usage{ display: none; }
}

@media (max-width: 780px){
  .fielder__name, .fielder__line{ display: none; }
  .fielder__face{ width: 30px; height: 30px; }
  .lineupcard{ display: block; }
}

/* On a phone the three tabs get a row of their own rather than being pushed
   off the right edge by the wordmark. */
@media (max-width: 560px){
  .sitehead__tabs{ flex: 1 0 100%; padding-bottom: 2px; }
  .sitehead__brand{ padding-bottom: 8px; }
}

.field__wallEdge{
  fill: none; stroke: color-mix(in srgb, var(--ink) 34%, transparent);
  stroke-width: 7; stroke-linecap: round;
}

/* ---------- second pass on the field ---------- */

/* THE NAMES ARE ON THE MARKERS, and the markers are sized off the field
   rather than off a fixed number of pixels, so the whole drawing grows with
   the panel. The label is the surname, the way a jersey and a scoreboard do
   it, because nine full names on one diamond collide at any type size. The
   line he is hitting is on the hover card instead of printed nine times. */
.fielder{ width: clamp(70px, 17cqw, 150px); text-decoration: none; color: inherit; }
/* THE PORTRAIT IS THE MARKER, so it is sized to be looked at rather than to
   be found. Seven per cent of the field is as large as it goes before the two
   middle infielders start crowding each other: at a full-width panel that is a
   sixty-pixel face, and the gap between the shortstop's label and the second
   baseman's is still wider than either of them. */
.fielder__face{ width: clamp(36px, 7cqw, 68px); height: clamp(36px, 7cqw, 68px); }
.fielder__pos{ font-size: clamp(.56rem, 1.6cqw, .8rem); padding: 1px 7px; }
.fielder__order{
  top: -6px; left: -8px;
  min-width: clamp(16px, 2.2cqw, 23px); height: clamp(16px, 2.2cqw, 23px);
  font-size: clamp(.55rem, 1.35cqw, .76rem);
}
.fielder__name{ margin-top: 11px; font-size: clamp(.64rem, 1.8cqw, 1rem); font-weight: 750; }

/* A marker is a link, so it says so when you are on it. WHAT IT DOES NOT DO IS
   RECOLOR THE NAME: half the league's primary color is a very dark navy, so
   a name that takes the club color on hover looks like it has gone out rather
   than lit up. The name keeps its color and gains an underline, and the ring
   around the portrait does the rest of the work. */
.fielder--link{ cursor: pointer; }
/* The marker carries the hover card, so it carries the term class. It should
   not carry the term's dotted underline or its highlight block: a portrait
   standing on a field is not a word in a sentence. */
.fielder.term{ border-bottom: 0; border-radius: 0; cursor: pointer; }
.fielder.term:hover,
.fielder.term:focus-visible{ background: none; box-shadow: none; outline: none; }
.fielder:hover, .fielder:focus-within{ z-index: 6; }
.fielder--link:focus-visible{ outline: none; }
.fielder--link:hover .fielder__name,
.fielder--link:focus-visible .fielder__name{
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.fielder--link:hover .fielder__face,
.fielder--link:focus-visible .fielder__face{
  border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Below this the shortstop and the second baseman are close enough that two
   surnames would sit on top of each other, so the labels come off and the
   lineup card beside the map does the reading. */
@container (max-width: 470px){
  .fielder{ width: auto; }
  .fielder__name, .fielder__line{ display: none; }
}

/* THE MAP AND THE CARD SIDE BY SIDE. The panel runs the full width of the
   page, so the drawing gets about half as much again in every direction and
   the batting order stands beside it instead of under it. */
.fieldwrap{ display: grid; gap: 20px; align-items: start; margin-top: 14px; }
@media (min-width: 1080px){
  .fieldwrap{ grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 28px; }
}
.fieldside{ display: grid; gap: 12px; align-content: start; }
.fieldside__title{
  margin: 0; font-size: 0.84rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-faint); font-weight: 700;
}
.fieldside .lineupcard{ margin-top: 0; }
.fieldside .field__legend{ margin: 4px 2px 0; }

/* Every name on this page opens that player's page. The underline is the
   club's color at a whisper, so a lineup card reads as a lineup card rather
   than as a list of links. */
.plink{
  color: inherit; text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--club, var(--accent)) 45%, transparent);
}
/* The same rule as the field markers: no recoloring on hover, because half
   the league's color is a navy that reads as text going out rather than
   lighting up. The underline does the work. */
.plink:hover, .plink:focus-visible{
  border-bottom-width: 2px; border-bottom-color: var(--ink); outline: none;
}
.field__offName{ margin-left: 2px; }

/* The card is not a phone fallback any more. It is where the lineup is read. */
.lineupcard{ display: block; }
@media (max-width: 780px){
  .fielder__face{ width: 32px; height: 32px; }
}

/* A fielder's marker is a portrait, not a word with a dotted underline under
   it. It keeps the tooltip behavior and loses the text decoration. */
.fielder__face.term{
  border-bottom: 0; border-radius: 50%;
  border: 2px solid var(--club, var(--accent));
  background: var(--surface);
}
.fielder__face.term:hover,
.fielder__face.term:focus-visible{
  background: var(--surface);
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ============================================================
   READ THE PLAY
   The travel tab's defensive chart, as a field that moves.

   THE COLORS ARE THE TEACHING, so they were chosen rather than
   picked. Five roles, five hues, assigned in a fixed order and
   never reused for anything else on the page. Both sets were run
   through a color-vision check against the surface they sit on:
   the worst adjacent pair separates by a wide margin for every
   form of color blindness tested. The role color rides on a
   ring around each marker rather than as its fill, so the letters
   inside sit on one dark disc everywhere and are never asked to
   be legible on five different backgrounds.

   THE FIELD IS DRAWN DARK, because the rest of this site is. A
   bright green rectangle is what a coaching diagram looks like,
   and it sat on these pages like a photograph taped to a screen.
   ============================================================ */
:root{
  --dm-void-far: #080b11;
  --dm-void-near: #0d1119;
  --dm-vignette: rgba(0,0,0,.55);

  --dm-grass: #16281d;
  --dm-cut-a: #1c3526;
  --dm-cut-b: #172c20;
  --dm-track: #3a2b1f;
  --dm-dirt: #46331f;
  --dm-infield: #1b3123;
  --dm-line: rgba(255,255,255,.55);
  --dm-fence: rgba(255,255,255,.26);
  --dm-ring: rgba(255,255,255,.08);
  --dm-base: #eef2f7;
  --dm-disc: #0c1119;
  --dm-ghost: rgba(255,255,255,.22);
  --dm-ghost-ink: rgba(255,255,255,.28);

  --rtp-ball: #C97636;
  --rtp-cutoff: #4C93E8;
  --rtp-cover: #35A263;
  --rtp-backup: #9B7DF0;
  --rtp-talk: #E45C8D;
}
@media (prefers-color-scheme: light){
  :root{
    /* In light mode the ground outside the fence is the page, near enough,
       so the field sits on the page instead of inside a gray box. The
       vignette is barely there for the same reason. */
    --dm-void-far: #eceff4;
    --dm-void-near: #f7f8fa;
    --dm-vignette: rgba(30,45,35,.10);

    --dm-grass: #2c6440;
    --dm-cut-a: #38764c;
    --dm-cut-b: #2f6a43;
    --dm-track: #a97a52;
    --dm-dirt: #b98d63;
    --dm-infield: #33714a;
    --dm-line: rgba(255,255,255,.92);
    --dm-fence: rgba(255,255,255,.75);
    --dm-ring: rgba(255,255,255,.18);
    --dm-base: #ffffff;
    --dm-disc: #0e141d;
    --dm-ghost: rgba(12,20,16,.32);
    --dm-ghost-ink: rgba(12,20,16,.42);

    --rtp-ball: #E8833A;
    --rtp-cutoff: #2F7DE1;
    --rtp-cover: #2E9E5B;
    --rtp-backup: #8B5CF6;
    --rtp-talk: #D6457F;
  }
}

/* ---------- the creed ---------- */
.rtp-creed{
  margin: 6px 0 26px;
  padding: 22px clamp(18px, 4vw, 34px) 24px;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
}
.rtp-creed__big{
  margin: 0 0 8px;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--ink);
}
.rtp-creed__sub{
  margin: 0; max-width: 62ch;
  font-size: 1.02rem; line-height: 1.5; color: var(--ink-soft);
}

/* ---------- tabs ---------- */
.rtp-tabs{ display: flex; gap: 10px; margin: 22px 0 20px; flex-wrap: wrap; }
.rtp-tab{
  flex: 1 1 220px; text-align: left; cursor: pointer;
  padding: 12px 16px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  font: inherit;
}
.rtp-tab:hover{ border-color: var(--accent-line); }
.rtp-tab.is-on{ border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.rtp-tab__label{ display: block; font-weight: 800; font-size: 1.05rem; color: var(--ink); }
.rtp-tab__note{ display: block; font-size: 0.88rem; color: var(--ink-faint); margin-top: 2px; }
.rtp-panel[hidden]{ display: none; }

/* ---------- the builder ---------- */
.rtp-builder{ margin-bottom: 18px; }
.rtp-builder__title, .rtp-focus__title{
  margin: 0 0 10px; font-family: var(--display); font-size: 1.1rem; letter-spacing: -.02em;
}
.rtp-picker{ display: flex; gap: 12px; align-items: baseline; padding: 7px 0; flex-wrap: wrap; }
.rtp-picker__label{
  flex: 0 0 118px; font-size: 0.84rem; text-transform: uppercase;
  letter-spacing: .09em; font-weight: 700; color: var(--ink-faint);
}
.rtp-chiprow{ display: flex; gap: 7px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.rtp-chip{
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  border-radius: 999px; padding: 6px 13px; font: inherit; font-size: 0.9rem; cursor: pointer;
}
.rtp-chip:hover{ border-color: var(--accent-line); color: var(--ink); }
.rtp-chip.is-on{ background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }

/* ---------- the field ---------- */
.rtp-stage{ margin: 4px 0 24px; }
.rtp-field{
  /* The scale hook every line weight and type size inside the drawing hangs
     on. The whole field is always shown, so it is one, but leaving it here
     means the sizing is in one place if that ever changes. */
  --k: 1;
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--dm-void-near);
  box-shadow: var(--shadow-lift);
}
.rtp-svg{ display: block; width: 100%; height: auto; }
/* On a laptop the field alone filled the screen and pushed the words and the
   verdict below the fold, which on the quiz side means answering a question
   and seeing nothing happen. Capped against the viewport height, centered,
   and only where there is enough screen for it to matter. */
/* HOW BIG THE FIELD IS.
   The whole diamond is always in the picture, so screen size is not a
   framing question any more, only a legibility one: the markers are drawn
   small against the field to keep them from crowding each other, and the
   drawing has to be large enough that small still reads. Normal is as large
   as it can be with the diamond and its controls above the fold on a laptop,
   wide fills the column, and the setting is remembered. */
/* The ceiling is a HEIGHT, expressed as a width, because the diamond is
   drawn nearly square and the thing that must never happen is the whole
   field being visible while Run the play has scrolled off under it. Ninety
   six vh of width is about eighty eight vh of field, which leaves the
   transport row on screen with it on a laptop. Wide is the opt out. */
@media (min-width: 760px) and (min-height: 640px){
  .rtp-field{ max-width: min(100%, 99vh); margin-left: auto; margin-right: auto; }
  .rtp-field.is-wide{ max-width: 100%; }
}

.rtp-size{
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); background: transparent; color: var(--ink-soft);
  border-radius: 999px; padding: 9px 16px; font: inherit; font-size: 0.9rem; cursor: pointer;
}
.rtp-size:hover{ color: var(--ink); border-color: var(--accent-line); }
.rtp-size__icon{ width: 15px; height: 15px; flex: none; }

.dm-grass{ fill: var(--dm-grass); }
.dm-cut--a{ fill: var(--dm-cut-a); }
.dm-cut--b{ fill: var(--dm-cut-b); }
.dm-track{ fill: var(--dm-track); }
.dm-dirt{ fill: var(--dm-dirt); }
.dm-infield{ fill: var(--dm-infield); }
.dm-path{ stroke: var(--dm-dirt); stroke-width: 10; stroke-linejoin: round; stroke-linecap: round; }
.dm-moundring, .dm-plate-circle{ fill: var(--dm-dirt); }
.dm-foul{ stroke: var(--dm-line); stroke-width: 2; }
.dm-fence{ stroke: var(--dm-fence); stroke-width: 2.5; }
.dm-base{ fill: var(--dm-base); }
.dm-ring{ stroke: var(--dm-ring); stroke-width: 1; }
.dm-ringlabel{
  fill: var(--dm-ring); font-family: var(--mono); font-size: calc(11px * var(--k));
  font-weight: 700; letter-spacing: .06em;
}

/* The run each player makes, drawn in behind him rather than sitting there
   before he sets off. */
.rtp-path{
  fill: none; stroke-width: calc(2.2 * var(--k)); opacity: .85;
  stroke: var(--rtp-cover); stroke-linecap: round;
}
.rtp-path--ball{ stroke: var(--rtp-ball); }
.rtp-path--cutoff{ stroke: var(--rtp-cutoff); }
.rtp-path--cover{ stroke: var(--rtp-cover); }
.rtp-path--backup{ stroke: var(--rtp-backup); }
.rtp-path--talk{ stroke: var(--rtp-talk); }
.rtp-arrow--ball{ fill: var(--rtp-ball); }
.rtp-arrow--cutoff{ fill: var(--rtp-cutoff); }
.rtp-arrow--cover{ fill: var(--rtp-cover); }
.rtp-arrow--backup{ fill: var(--rtp-backup); }
.rtp-arrow--talk{ fill: var(--rtp-talk); }

/* Where everybody started, left behind as a small mark rather than as a
   second full sized disc with the position lettered inside it. That version
   doubled the circles and doubled the labels on a picture whose problem was
   that it had too many of both. */
.rtp-ghosts{ transition: opacity .35s ease; }
.rtp-field.is-start .rtp-ghosts{ opacity: 0; }
.rtp-ghost-disc{
  fill: none; stroke: var(--dm-ghost);
  stroke-width: calc(1.5 * var(--k));
  stroke-dasharray: calc(2.5 * var(--k)) calc(3.5 * var(--k));
}

.rtp-balltrail{
  fill: none; stroke: #fff; stroke-linecap: round; opacity: .75;
  stroke-width: calc(2.5 * var(--k));
  stroke-dasharray: calc(2 * var(--k)) calc(6 * var(--k));
}
.rtp-ball{ transform-box: view-box; }
.rtp-ball-dot{ fill: #fff; stroke: rgba(0,0,0,.4); stroke-width: calc(1 * var(--k)); }
.rtp-ball-glow{ fill: #fff; opacity: .26; }
/* A runner is the only mark on the field that is not a fielder, so it is the
   only one that is not a lettered disc: a small gold dot with a dark ring. */
.rtp-runner{ fill: #f5d76e; stroke: #10141c; stroke-width: calc(2 * var(--k)); }
.rtp-runnermark{ pointer-events: none; }

/* ---------- the nine ----------
   Bigger than they need to be to fit, on purpose. These are the only thing
   on the picture anybody is reading, they are dragged with a finger in the
   quiz, and at fifteen pixels they read as dots on a diagram rather than as
   players. The role color is the ring; the disc under the letters is always
   the same dark, so the lettering never has to be legible on five different
   backgrounds. */
.rtp-man{ cursor: pointer; }
/* The browser's own focus box is drawn round the marker's bounding square,
   which on a dragged disc reads as a rectangle stuck to the player. The ring
   turning white is the focus affordance here, so the box goes. */
.rtp-man:focus{ outline: none; }
.rtp-man:focus-visible{ outline: none; }
.rtp-man-disc{ fill: var(--dm-disc); }
.rtp-man-ring{
  fill: none; stroke: var(--rtp-cover); stroke-width: calc(2.9 * var(--k));
  transition: stroke-width .18s ease;
}
.rtp-man-halo{ fill: var(--rtp-cover); opacity: 0; transition: opacity .2s ease; }
.rtp-man--ball .rtp-man-ring{ stroke: var(--rtp-ball); }
.rtp-man--ball .rtp-man-halo{ fill: var(--rtp-ball); }
.rtp-man--cutoff .rtp-man-ring{ stroke: var(--rtp-cutoff); }
.rtp-man--cutoff .rtp-man-halo{ fill: var(--rtp-cutoff); }
.rtp-man--cover .rtp-man-ring{ stroke: var(--rtp-cover); }
.rtp-man--cover .rtp-man-halo{ fill: var(--rtp-cover); }
.rtp-man--backup .rtp-man-ring{ stroke: var(--rtp-backup); }
.rtp-man--backup .rtp-man-halo{ fill: var(--rtp-backup); }
.rtp-man--talk .rtp-man-ring{ stroke: var(--rtp-talk); }
.rtp-man--talk .rtp-man-halo{ fill: var(--rtp-talk); }
.rtp-man--idle .rtp-man-ring{ stroke: #7a8697; }
.rtp-man--idle .rtp-man-halo{ fill: #7a8697; }
.rtp-man--asked .rtp-man-ring{ stroke: var(--accent); stroke-width: calc(3.6 * var(--k)); }
.rtp-man--asked .rtp-man-halo{ fill: var(--accent); opacity: .32; }

/* Moving: a halo comes up under him, so the eye can follow who is running
   rather than trying to watch nine discs at once. */
.rtp-man.is-moving .rtp-man-halo{ opacity: .4; }
.rtp-man.is-moving .rtp-man-ring{ stroke-width: calc(3.2 * var(--k)); }
.rtp-man.is-there .rtp-man-halo{ opacity: .16; }

.rtp-man-label{
  fill: #fff; font-family: var(--mono); font-size: calc(13px * var(--k)); font-weight: 800;
  letter-spacing: .01em; pointer-events: none;
}
.rtp-man:hover .rtp-man-ring{ stroke-width: calc(3.6 * var(--k)); }
.rtp-man:focus-visible .rtp-man-ring{ stroke: #fff; stroke-width: calc(3.2 * var(--k)); }

/* ---------- controls ---------- */
.rtp-controls{ display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 14px 0 10px; }
.rtp-play{
  display: inline-flex; align-items: center; gap: 9px;
  border: 0; border-radius: 999px; padding: 12px 24px 12px 20px; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); font: inherit;
  font-weight: 800; font-size: 1rem;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent);
}
.rtp-play:hover{ background: var(--accent-hot); }
.rtp-play__icon{ width: 20px; height: 20px; flex: none; }

/* THE SCRUBBER. Playing it again is not the same as being able to stop it.
   The moment worth looking at is the instant the throw is released, and a
   three second animation never holds still on it. */
.rtp-scrub{ display: flex; align-items: center; gap: 12px; margin: 0 0 8px; }
.rtp-scrub__tick{
  font-size: 0.84rem; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 800; color: var(--ink-faint); flex: none;
}
.rtp-scrub__input{
  flex: 1 1 auto; min-width: 0; appearance: none; -webkit-appearance: none;
  height: 6px; border-radius: 999px; cursor: pointer; outline-offset: 4px;
  background: linear-gradient(90deg, var(--accent-line), var(--line));
}
.rtp-scrub__input::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px;
  border-radius: 50%; background: var(--accent); border: 3px solid var(--bg);
  box-shadow: 0 2px 8px rgba(0,0,0,.4); cursor: grab;
}
.rtp-scrub__input::-moz-range-thumb{
  width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--bg);
  background: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.4); cursor: grab;
}
.rtp-slow{ display: inline-flex; gap: 7px; align-items: center; color: var(--ink-soft); font-size: 0.92rem; }
.rtp-share{
  border: 1px solid var(--line); background: transparent; color: var(--ink-soft);
  border-radius: 999px; padding: 9px 16px; font: inherit; font-size: 0.9rem; cursor: pointer;
}
.rtp-share:hover{ color: var(--ink); border-color: var(--accent-line); }

/* ---------- legend ---------- */
.rtp-legend{ margin-top: 6px; }
.rtp-legend__count{ margin: 0 0 8px; color: var(--ink-soft); font-size: .95rem; }
.rtp-legend__count strong{ color: var(--ink); }
.rtp-legend__row{ display: flex; gap: 8px; flex-wrap: wrap; }
.rtp-legend__item{
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  border-radius: 999px; padding: 6px 13px; font: inherit; font-size: 0.9rem;
}
.rtp-legend__item.is-on{ border-color: var(--ink-faint); color: var(--ink); }
.rtp-legend__dot{ width: 11px; height: 11px; border-radius: 50%; background: var(--ink-faint); }
.rtp-legend__item--ball .rtp-legend__dot{ background: var(--rtp-ball); }
.rtp-legend__item--cutoff .rtp-legend__dot{ background: var(--rtp-cutoff); }
.rtp-legend__item--cover .rtp-legend__dot{ background: var(--rtp-cover); }
.rtp-legend__item--backup .rtp-legend__dot{ background: var(--rtp-backup); }
.rtp-legend__item--talk .rtp-legend__dot{ background: var(--rtp-talk); }
.rtp-legend__n{ font-family: var(--mono); font-weight: 800; color: var(--ink); }

/* ---------- the words ---------- */
.rtp-read__head{ display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rtp-read__title{ margin: 0; font-family: var(--display); font-size: 1.5rem; letter-spacing: -.02em; }
.rtp-read__bases{
  margin: 0; font-size: 0.86rem; text-transform: uppercase; letter-spacing: .09em;
  font-weight: 700; color: var(--accent);
}
.rtp-why{ margin: 10px 0 18px; max-width: 70ch; line-height: 1.6; color: var(--ink-soft); }

/* The pre-pitch alignment: a different kind of fact from the rest of the
   page, so it gets its own box rather than sitting in the run of notes. */
.rtp-read__align{
  margin: 0; font-size: 0.84rem; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 800; color: var(--accent-2);
  border: 1px solid var(--accent-2); border-radius: 999px; padding: 3px 10px;
}
.rtp-align{
  border: 1px solid var(--accent-2); background: var(--accent-2-soft);
  border-radius: var(--radius-sm); padding: 13px 15px;
}
.rtp-align__head{ display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.rtp-align__label{
  font-size: 0.84rem; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 800; color: var(--accent-2);
}
.rtp-align__name{ font-family: var(--display); font-size: 1.1rem; font-weight: 700; color: var(--ink); }
.rtp-align__why{ margin: 0; line-height: 1.55; color: var(--ink); font-size: .95rem; }
.rtp-align__cost{ margin: 8px 0 0; line-height: 1.55; color: var(--ink-soft); font-size: .92rem; }

.rtp-jobs{ list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 900px){ .rtp-jobs{ grid-template-columns: 1fr 1fr; } }
.rtp-job{
  border: 1px solid var(--line); border-left: 4px solid var(--ink-faint);
  border-radius: var(--radius-sm); padding: 10px 13px; background: var(--surface);
  cursor: pointer;
}
.rtp-job:hover{ border-color: var(--accent-line); }
.rtp-job.is-on{ background: var(--surface-2); border-color: var(--accent); }
.rtp-job--ball{ border-left-color: var(--rtp-ball); }
.rtp-job--cutoff{ border-left-color: var(--rtp-cutoff); }
.rtp-job--cover{ border-left-color: var(--rtp-cover); }
.rtp-job--backup{ border-left-color: var(--rtp-backup); }
.rtp-job--talk{ border-left-color: var(--rtp-talk); }
.rtp-job__head{ display: flex; align-items: baseline; gap: 9px; }
.rtp-job__pos{ font-family: var(--mono); font-weight: 800; color: var(--ink); }
.rtp-job__name{ font-weight: 700; font-size: .9rem; color: var(--ink); }
.rtp-job__role{
  margin-left: auto; font-size: 0.84rem; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 800; color: var(--ink-faint);
}
.rtp-job__text{ margin: 5px 0 0; font-size: .92rem; line-height: 1.5; color: var(--ink-soft); }

.rtp-notes{ margin-top: 18px; display: grid; gap: 10px; }
.rtp-note{
  border: 1px solid var(--accent-line); background: var(--accent-soft);
  border-radius: var(--radius-sm); padding: 12px 14px;
}
.rtp-note--source{ border-color: var(--line); background: var(--surface-2); }
.rtp-note__label{
  display: block; font-size: 0.84rem; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 800; color: var(--accent); margin-bottom: 4px;
}
.rtp-note--source .rtp-note__label{ color: var(--ink-faint); }
.rtp-note__text{ margin: 0; line-height: 1.55; color: var(--ink-soft); font-size: .93rem; }

/* ---------- position focus ---------- */
.rtp-focus{ margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line-soft); }
.rtp-focus__blurb{ margin: 0 0 12px; max-width: 68ch; color: var(--ink-soft); line-height: 1.55; }
.rtp-focus__summary{
  margin: 16px 0 10px; font-size: 1.02rem; color: var(--ink); font-weight: 600;
}
.rtp-focus__list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rtp-focus__row{ border-left: 4px solid var(--ink-faint); border-radius: var(--radius-sm); background: var(--surface); }
.rtp-focus__row--ball{ border-left-color: var(--rtp-ball); }
.rtp-focus__row--cutoff{ border-left-color: var(--rtp-cutoff); }
.rtp-focus__row--cover{ border-left-color: var(--rtp-cover); }
.rtp-focus__row--backup{ border-left-color: var(--rtp-backup); }
.rtp-focus__row--talk{ border-left-color: var(--rtp-talk); }
.rtp-focus__open{
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-left: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: transparent; color: inherit; font: inherit; padding: 9px 13px;
}
.rtp-focus__open:hover{ background: var(--surface-2); }
.rtp-focus__play{ display: block; font-weight: 700; font-size: .9rem; }
.rtp-focus__job{ display: block; font-size: 0.92rem; color: var(--ink-soft); margin-top: 2px; }

/* ---------- quiz ----------
   The header is two blocks, in the order the reader needs them. The
   situation first, as a card with the base state drawn rather than
   described, because "runners on first and third" is four words that have to
   be turned back into a diamond in your head on every single question. Then
   the question, with the position as the same badge that is lit on the
   field, so the reader knows which marker they are being asked about before
   they start hunting for it. It used to be a headline and one gray run-on
   sentence carrying everything. */

.rtp-ask{ display: grid; gap: 16px; margin-bottom: 18px; }

.rtp-sit{
  display: flex; align-items: center; gap: 18px;
  padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--accent-3-soft), transparent 58%), var(--surface);
}
.rtp-sit__bases{ flex: none; }
.rtp-bases{ display: block; width: 66px; height: 66px; }
.rtp-bases__infield{ fill: rgba(255,255,255,.05); stroke: var(--ink-faint); stroke-width: 1; }
.rtp-bases__bag{ fill: var(--surface-3); stroke: var(--ink-faint); stroke-width: 1; }
.rtp-bases__bag.is-on{ fill: var(--accent-2); stroke: var(--accent-2); }
.rtp-bases__plate{ fill: var(--ink-faint); }
@media (prefers-color-scheme: light){
  .rtp-bases__infield{ fill: rgba(20,32,54,.05); }
}

.rtp-sit__body{ min-width: 0; }
.rtp-sit__label{
  margin: 0 0 3px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .14em;
  font-size: 0.84rem; font-weight: 700; color: var(--ink-faint);
}
.rtp-sit__title{
  margin: 0; font-family: var(--display); font-weight: 750; letter-spacing: -.022em;
  font-size: clamp(1.04rem, 2.2vw, 1.24rem); line-height: 1.25;
}
.rtp-sit__chips{ display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
/* Named rtp-fact rather than rtp-chip: the Learn picker already owns
   .rtp-chip and these are not buttons, they are facts about the play. */
.rtp-fact{
  font-family: var(--mono); font-size: 0.86rem; font-weight: 650; letter-spacing: .02em;
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; color: var(--ink-soft);
  background: var(--surface-2);
}
.rtp-fact--hit{ color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.rtp-fact--bases{ color: var(--accent-2); border-color: rgba(232,177,60,.34); background: var(--accent-2-soft); }

.rtp-q{ display: flex; align-items: center; gap: 15px; }
.rtp-q__pos{
  flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--mono); font-weight: 800; font-size: 1.06rem; letter-spacing: .01em;
  color: var(--accent); border: 2.5px solid var(--accent); background: var(--accent-soft);
}
.rtp-q__body{ min-width: 0; }
.rtp-q__title{
  margin: 0; font-family: var(--display); font-weight: 850;
  font-size: clamp(1.3rem, 3.4vw, 1.9rem); letter-spacing: -.03em; line-height: 1.08; color: var(--ink);
}
.rtp-q__hint{ margin: 5px 0 0; font-size: var(--step-small); color: var(--ink-faint); }

@media (max-width: 560px){
  .rtp-sit{ align-items: flex-start; gap: 14px; padding: 14px; }
  .rtp-bases{ width: 54px; height: 54px; }
  .rtp-q__pos{ width: 46px; height: 46px; font-size: .95rem; }
}

.rtp-zone{ cursor: pointer; }
.rtp-zone-ring{
  fill: rgba(255,255,255,.07); stroke: #fff;
  stroke-width: calc(2.5 * var(--k));
  stroke-dasharray: calc(7 * var(--k)) calc(6 * var(--k));
  animation: rtpSpin 26s linear infinite; transform-box: fill-box; transform-origin: center;
}
@keyframes rtpSpin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .rtp-zone-ring{ animation: none; } }
.rtp-zone:hover .rtp-zone-ring{ fill: rgba(255,255,255,.2); }
.rtp-zone:focus-visible .rtp-zone-ring{ stroke-width: 4; }
/* The number has to be readable on top of whatever is behind it, and on
   several plays what is behind it is a fielder standing on that exact spot
   before the pitch. An outline drawn under the glyph rather than over it is
   what paint-order is for. */
.rtp-zone-num{
  fill: #fff; font-family: var(--mono); font-size: calc(14px * var(--k)); font-weight: 800;
  pointer-events: none;
  paint-order: stroke; stroke: rgba(6,10,16,.9); stroke-width: calc(5px * var(--k)); stroke-linejoin: round;
}
.rtp-zone.is-right .rtp-zone-ring{ fill: rgba(53,162,99,.45); stroke: var(--rtp-cover); stroke-dasharray: none; }
.rtp-zone.is-wrong .rtp-zone-ring{ fill: rgba(228,92,141,.4); stroke: var(--neg); stroke-dasharray: none; }
.rtp-zone.is-dim .rtp-zone-ring{ opacity: .25; }
.rtp-man--drag{ cursor: grab; }
.rtp-man--drag.is-dragging{ cursor: grabbing; }

/* Shown only when the quiz cannot build a question at all, which in practice
   means the browser has newer code than the server does. */
.rtp-broken{
  margin: 16px 0; padding: 14px 16px; border-radius: var(--radius);
  border: 1px solid var(--accent-2); background: var(--accent-2-soft);
}
.rtp-broken__text{ margin: 0; line-height: 1.55; color: var(--ink); }

.rtp-verdict{
  margin: 16px 0; padding: 16px 18px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface);
}
.rtp-verdict.is-right{ border-color: var(--rtp-cover); background: rgba(53,162,99,.10); }
.rtp-verdict.is-wrong{ border-color: var(--neg); background: rgba(242,97,90,.09); }
.rtp-verdict__call{
  margin: 0 0 8px; font-family: var(--display); font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em;
}
.rtp-verdict.is-right .rtp-verdict__call{ color: var(--rtp-cover); }
.rtp-verdict.is-wrong .rtp-verdict__call{ color: var(--neg); }
.rtp-verdict__text{ margin: 0 0 8px; line-height: 1.55; color: var(--ink); }
.rtp-verdict__other{ margin: 0 0 8px; line-height: 1.55; color: var(--ink-soft); }
.rtp-verdict__why{ margin: 0 0 12px; line-height: 1.55; color: var(--ink-soft); font-size: .93rem; }
.rtp-verdict__open{
  border: 1px solid var(--line); background: transparent; color: var(--ink-soft);
  border-radius: 999px; padding: 8px 15px; font: inherit; font-size: 0.9rem; cursor: pointer;
}
.rtp-verdict__open:hover{ color: var(--ink); border-color: var(--accent-line); }

.rtp-scorebar{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.rtp-score{ display: flex; gap: 18px; flex-wrap: wrap; flex: 1 1 auto; }
.rtp-score__box{ display: flex; flex-direction: column; }
.rtp-score__n{ font-family: var(--mono); font-size: 1.4rem; font-weight: 800; color: var(--ink); line-height: 1; }
.rtp-score__label{ font-size: 0.84rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-faint); font-weight: 700; margin-top: 3px; }
.rtp-next{
  border: 0; border-radius: 999px; padding: 11px 22px; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 800;
}
.rtp-next:hover{ background: var(--accent-hot); }

.rtp-accuracy{ margin-top: 22px; }
.rtp-accuracy__title{ margin: 0 0 8px; font-size: 0.86rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-faint); }
.rtp-accuracy__list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.rtp-accuracy__open{
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  border-radius: var(--radius-sm); padding: 8px 12px; font: inherit; font-size: 0.92rem;
  cursor: pointer; text-align: left; width: 100%;
}
.rtp-accuracy__open:hover{ color: var(--ink); border-color: var(--accent-line); }
.rtp-accuracy__note{ margin: 8px 0 0; font-size: 0.88rem; color: var(--ink-faint); }

@media (prefers-reduced-motion: reduce){
  .rtp-man, .rtp-ball{ transition: none !important; }
}

/* ===========================================================================
   THE LIVE SCOREBOARD

   A card for a game in progress has a different job from a card for a game
   that is over. The finished one is a result and wants to be read in a glance;
   the live one is a situation and has to carry the count, the outs, the bases
   and the two men in the middle of it without turning into a form. So the live
   card gets the one accent color on the page, a rail down its left edge, and
   room the others do not take.
   ========================================================================= */

/* EVERY BOX THE SAME SIZE, Sept 10.
   A live card carries a count, a base map and a pitching line that a
   scheduled one does not, so left to itself the board came out as a ragged
   wall of boxes at four different heights, and the reason a card was tall had
   nothing to do with how important the game was. Anchoring them to the top,
   which is what this rule used to do, only made the raggedness neater.
   grid-auto-rows: 1fr sizes EVERY row to the tallest card on the board, not
   just the tallest in its own row, so the whole scoreboard is one grid of
   identical boxes however the day's games happen to be split up. The card
   itself becomes a column with the door to the game pushed to the bottom, so
   the extra room lands in one place instead of stretching the score lines. */
.scoreboard{
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  align-items: stretch;
  grid-auto-rows: 1fr;
}
.score{ display: flex; flex-direction: column; }
.score > *{ flex: none; }
.score__into{ margin-top: auto; }

.score.is-live{
  border-color: var(--accent-3);
  box-shadow: inset 3px 0 0 var(--accent-3);
}
.score.is-live .score__status{
  display: flex; align-items: center; gap: 6px;
}
/* The pulse says "this is moving" without a word. It is the only animation on
   the page that runs continuously, and it stops entirely for a reader who has
   asked for less motion. */
.score__status.is-live::after{
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-3); animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse{ 0%, 100%{ opacity: 1; } 50%{ opacity: .25; } }

/* A run scoring. The one thing on this page worth an animation. */
.score__runs.is-bump{ animation: run-bump .7s ease-out; }
@keyframes run-bump{
  0%{ transform: scale(1); color: var(--accent-3); }
  30%{ transform: scale(1.35); color: var(--accent-3); }
  100%{ transform: scale(1); }
}

.live{
  margin-top: 9px; padding-top: 9px;
  border-top: 1px solid var(--line-soft);
  display: grid; gap: 8px;
}
.live__top{ display: flex; align-items: center; gap: 14px; }
.live__readings{ display: grid; gap: 4px; }

/* The bases, as bags in a diamond. */
.bases{ position: relative; width: 38px; height: 38px; flex: none; }
.bases__bag{
  position: absolute; width: 13px; height: 13px;
  transform: rotate(45deg); border-radius: 2px;
  border: 1px solid var(--line); background: transparent;
  transition: background .25s ease, border-color .25s ease;
}
.bases__bag--2{ top: 1px; left: 12px; }
.bases__bag--3{ top: 13px; left: 0; }
.bases__bag--1{ top: 13px; left: 24px; }
.bases__bag.is-on{ background: var(--accent-3); border-color: var(--accent-3); }

.live__count{ margin: 0; display: flex; align-items: baseline; gap: 6px; }
.live__countNum{
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 1.05rem; font-weight: 700; letter-spacing: .02em;
}
.live__countLabel, .live__outsLabel{
  font-size: 0.84rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint);
}
.live__outs{ margin: 0; display: flex; align-items: center; gap: 6px; }
.outs{ display: inline-flex; gap: 4px; }
.outs__dot{
  width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent;
  transition: background .25s ease, border-color .25s ease;
}
.outs__dot.is-out{ background: var(--neg); border-color: var(--neg); }

.live__who{ display: grid; gap: 2px; }
.live__whoLine{ margin: 0; display: flex; gap: 7px; align-items: baseline; font-size: .92rem; }
.live__whoLabel{
  font-size: 0.84rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-faint); min-width: 58px;
}
.live__whoName{ color: var(--ink-soft); text-decoration: none; }
a.live__whoName:hover{ color: var(--ink); text-decoration: underline; }

/* The line score. Folded away, and it scrolls sideways on its own rather than
   pushing the card wider, because extra innings are exactly when somebody
   wants to look at it. */
.linescore{ margin-top: 9px; }
.linescore__summary{
  cursor: pointer; list-style: none;
  font-size: 0.84rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint);
}
.linescore__summary::-webkit-details-marker{ display: none; }
.linescore__summary::before{ content: "▸ "; }
.linescore[open] .linescore__summary::before{ content: "▾ "; }
.linescore__summary:hover{ color: var(--ink-soft); }
.linescore__scroll{ overflow-x: auto; margin-top: 6px; }
.linescore__table{
  border-collapse: collapse; font-family: var(--mono);
  font-variant-numeric: tabular-nums; font-size: 0.86rem; width: 100%;
}
/* Nine innings plus R, H and E have to fit a card, or the three numbers
   somebody actually came for end up off the right edge behind a scrollbar. */
.linescore__tot{ padding-left: 4px !important; }
.linescore__table thead th:nth-child(2){ padding-left: 6px !important; }
.linescore__table th, .linescore__table td{
  padding: 2px 3px; text-align: center; color: var(--ink-soft); font-weight: 500;
}
.linescore__table thead th{ color: var(--ink-faint); font-size: 0.84rem; }
.linescore__team{
  text-align: left !important; white-space: nowrap;
  padding-right: 6px !important; font-weight: 600; color: var(--ink-soft);
  max-width: 78px; overflow: hidden; text-overflow: ellipsis;
}
.linescore__tot{ font-weight: 700; color: var(--ink) !important; }
.linescore__table thead .linescore__tot{ color: var(--ink-faint) !important; }
.linescore__blank{ color: var(--ink-faint); }
.linescore__note{ margin: 6px 0 0; font-size: 0.86rem; color: var(--ink-faint); }

/* When the snapshot goes cold with games on, the page says so where the
   timestamp was, rather than showing a frozen score as if it were current. */
.scores__updated.is-stale{
  color: var(--neg); font-family: inherit;
  border: 1px solid var(--neg); border-radius: var(--radius-sm);
  padding: 7px 11px; display: inline-block;
}

@media (prefers-reduced-motion: reduce){
  .score__status.is-live::after{ animation: none; }
  .score__runs.is-bump{ animation: none; }
}

/* ============================================================
   TOOLS AND GAMES, AND THE BASEBALL IQ MAP
   ------------------------------------------------------------
   The fourth entry in the header is not a fourth league and is not
   drawn like one: it gets a tinted pill rather than a tab, so the
   three leagues still read as three. Everything below it belongs to
   the IQ Map, which is built out of five drawn boards and a set of
   task cards, and every color in it comes from a variable so the
   whole thing follows the site into light mode.
   ============================================================ */

:root{
  --iq-hitting: #E8B13C;
  --iq-pitching: #4C93E8;
  --iq-defense: #35A263;
  --iq-strategy: #9B7DF0;

  --iq-map-bg: #0c1017;
  --iq-map-contour: rgba(255,255,255,.045);
  --iq-map-trail: rgba(255,255,255,.10);
  --iq-map-plate: rgba(255,255,255,.07);
  --iq-map-mow: rgba(255,255,255,.022);
  --iq-map-dirt: rgba(198,140,88,.10);
  --iq-map-turf: rgba(74,134,88,.10);
  --iq-label-plate: rgba(17,23,33,.90);
  --iq-label-line: rgba(255,255,255,.11);
  --iq-node-face: #141a25;
  --iq-node-locked: #10141c;

  --iq-good: #3ec98d;
  --iq-bad: #f2615a;
  --iq-flat: #8f9bb0;
}
@media (prefers-color-scheme: light){
  :root{
    --iq-map-bg: #eaeef4;
    --iq-map-contour: rgba(20,32,54,.06);
    --iq-map-trail: rgba(20,32,54,.13);
    --iq-map-plate: rgba(20,32,54,.07);
    --iq-map-mow: rgba(20,32,54,.024);
    --iq-map-dirt: rgba(178,118,66,.15);
    --iq-map-turf: rgba(70,140,90,.13);
    --iq-label-plate: rgba(255,255,255,.95);
    --iq-label-line: rgba(20,32,54,.13);
    --iq-node-face: #ffffff;
    --iq-node-locked: #dfe4ec;
    --iq-flat: #5d6a7e;
  }
}

/* ---------- the header pill ---------- */

/* TOOLS/GAMES IS A TAB, NOT A BUTTON.
   It used to be drawn as a rounded capsule with its own fill and, when you
   were on it, a ring around the outside. It read as a control that had been
   pinned to the end of the nav rather than as the fifth thing in a row of
   five. It is styled like every other tab now: the same underline, the same
   hover, and its own color coming through that underline. */
.tab--tools{ margin-left: 10px; align-items: center; }
.tab--tools .tab__label{ color: var(--ink); }
.tab--tools .tab__caret{ padding-right: 10px; }
@media (max-width: 900px){ .tab--tools{ margin-left: 4px; } }

.sechero--tools{ --tone: #9B7DF0; --tone-soft: rgba(155,125,240,.16); }
.sechero--iq{ --tone: #9B7DF0; --tone-soft: rgba(155,125,240,.16); }

/* ---------- the tools front ---------- */

.toolgrid{ display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 18px; }
.toolcard{
  display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px;
  background: linear-gradient(160deg, var(--tone-soft, transparent), transparent 60%), var(--surface);
  transition: border-color .16s ease, transform .16s ease;
}
.toolcard--iq{ --tone-soft: rgba(155,125,240,.15); }
.toolcard--rtp{ --tone-soft: rgba(62,201,141,.13); }
.toolcard:hover{ border-color: var(--accent-line); transform: translateY(-2px); }
.toolcard__head{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.toolcard__name{ margin: 0; font-family: var(--display); font-weight: 850; font-size: 1.4rem; letter-spacing: -.03em; }
.toolcard__tag{
  font-family: var(--mono); font-size: 0.86rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint);
}
.toolcard__line{ margin: 0; color: var(--ink-soft); line-height: 1.58; }
.toolcard__points{ margin: 2px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.toolcard__point{ position: relative; padding-left: 18px; font-size: var(--step-small); color: var(--ink-soft); }
.toolcard__point::before{ content: ""; position: absolute; left: 2px; top: .58em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .6; }
.toolcard__go{ margin-top: 6px; font-weight: 700; color: var(--accent); }

/* ---------- progress strip ---------- */

.iqprog{ margin: 22px 0 8px; }
.iqprog__bar{ height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.iqprog__fill{
  height: 100%; border-radius: 999px; transition: width .5s ease;
  background: linear-gradient(90deg, var(--iq-hitting), var(--iq-pitching), var(--iq-defense), var(--iq-strategy));
}
.iqprog__meta{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.iqprog__count{ font-family: var(--display); font-weight: 750; font-size: 1.1rem; }
.iqprog__tasks{ color: var(--ink-faint); font-size: 1rem; }
.iqprog__reset{
  margin-left: auto; background: none; border: 1px solid var(--line); color: var(--ink-faint);
  border-radius: 999px; padding: 5px 13px; font: inherit; font-size: 0.88rem; cursor: pointer;
}
.iqprog__reset:hover{ color: var(--ink); border-color: var(--ink-faint); }

/* ---------- the map ---------- */

/* The map page is not a page of prose and it does not want a reading measure.
   Sept 9: the type on this map was drawn at fourteen units inside a 1240-unit
   picture squeezed into a 900px column, which is ten pixels on the screen no
   matter what the font size says. The picture is bigger now, the type in it
   is nearly twice the size, and the column it lives in is wide enough that
   the browser is not shrinking it by a third on the way in. The blocks of
   prose on the same page keep their own measure below. */
.body--iq .section-page.is-map{ max-width: 1360px; }
.body--iq .section-page.is-map .sechero__blurb,
.body--iq .section-page.is-map .hub__source{ max-width: 78ch; }

.iqmap{ margin: 18px 0 0; }
.iqmap__head{ display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.iqmap__hint{ margin: 0; color: var(--ink-soft); font-size: 1rem; }
.iqmap__toggle{
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-soft);
  border-radius: 999px; padding: 7px 17px; font: inherit; font-size: 0.98rem; font-weight: 650; cursor: pointer;
}
.iqmap__toggle:hover{ color: var(--ink); border-color: var(--accent-line); }
.iqmap__canvas{ border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--iq-map-bg); }
.iqm{ display: block; width: 100%; height: auto; }

.iqm-ground{ fill: var(--iq-map-bg); }
.iqm-mow__wedge{ fill: var(--iq-map-mow); }
.iqm-contour{ fill: none; stroke: var(--iq-map-contour); stroke-width: 1.4; }
.iqm-dirt{ fill: var(--iq-map-dirt); }
.iqm-turf{ fill: var(--iq-map-turf); }
.iqm-plate{ fill: var(--iq-map-plate); stroke: var(--iq-label-line); stroke-width: 1.5; }

.iqm-hublabel{
  font-family: var(--mono); font-size: 19px; font-weight: 700; letter-spacing: .24em;
  fill: var(--ink-faint);
}

/* The compass rose, out on the left flank where nothing else goes. */
.iqm-compass circle{ fill: none; stroke: var(--iq-map-trail); stroke-width: 2; opacity: .75; }
.iqm-compass__needle{ fill: var(--iq-map-trail); opacity: .95; }
.iqm-compass__needle.is-soft{ opacity: .4; }
.iqm-compass__n{
  font-family: var(--mono); font-size: 19px; font-weight: 700; fill: var(--ink-faint);
}

/* The map's own name, and its key. Both are drawn on plates for the same
   reason the stop names are: mow stripes and a color wash under bare
   lettering is lettering you have to work at. */
.iqm-cartouche__plate,
.iqm-key__plate{ fill: var(--iq-label-plate); stroke: var(--iq-label-line); stroke-width: 1.5; }
.iqm-cartouche__title{
  font-family: var(--display); font-size: 34px; font-weight: 850; letter-spacing: -.02em; fill: var(--ink);
}
.iqm-cartouche__sub{
  font-family: var(--mono); font-size: 17px; letter-spacing: .12em; text-transform: uppercase;
  fill: var(--ink-faint);
}
.iqm-key__text{ font-family: var(--display); font-size: 19px; font-weight: 600; fill: var(--ink-soft); }
.iqm-key__disc{ fill: var(--iq-node-face); stroke: var(--iq-map-trail); stroke-width: 2; }
.iqm-key__tick{ stroke: var(--iq-map-trail); stroke-width: 4; stroke-linecap: round; }
.iqm-key__tick.is-done{ stroke: var(--ink-soft); }
.iqm-key__trail{ stroke: var(--iq-map-trail); stroke-width: 8; stroke-linecap: round; }
.iqm-key__trail.is-done{ stroke: var(--ink-soft); }
.iqm-key__glow{
  fill: var(--iq-node-face); stroke: var(--accent); stroke-width: 2.5;
  filter: drop-shadow(0 0 8px var(--accent));
}

.iqm-trail__casing{ stroke: var(--iq-map-bg); stroke-width: 22; stroke-linecap: round; opacity: .8; }
.iqm-trail{ stroke: var(--iq-map-trail); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 3 15; }
.iqm-trail__done{ stroke: var(--tone); stroke-width: 9; stroke-linecap: round; opacity: .9; }

/* The direction markers. Halfway along every stretch, pointing outward, which
   is the one thing a trail cannot say for itself. */
.iqm-chevron__mark{
  stroke: var(--iq-map-trail); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
}
.iqm-chevron.is-done .iqm-chevron__mark{ stroke: var(--tone); opacity: .85; }

.iqm-node-link{ cursor: pointer; }
.iqm-node__halo{ fill: var(--iq-map-bg); opacity: .9; }
.iqm-node__disc{ fill: var(--iq-node-face); stroke: var(--tone); stroke-width: 2.5; }
.iqm-node.is-locked .iqm-node__disc{ fill: var(--iq-node-locked); stroke: var(--iq-map-trail); }
.iqm-node.is-cleared .iqm-node__disc{ fill: var(--tone); stroke: var(--tone); }
.iqm-tick{ stroke: var(--iq-map-trail); stroke-width: 4.5; stroke-linecap: round; }
.iqm-tick.is-done{ stroke: var(--tone); }
.iqm-num{ font-family: var(--mono); font-size: 30px; font-weight: 700; fill: var(--ink); }
.iqm-node.is-locked .iqm-num{ fill: var(--ink-faint); }
.iqm-check{ stroke: var(--iq-node-face); stroke-width: 4.4; stroke-linecap: round; stroke-linejoin: round; }
.iqm-lockbody{ fill: var(--ink-faint); opacity: .55; }
.iqm-lockarc{ stroke: var(--ink-faint); stroke-width: 2.6; opacity: .55; }

/* The station sign. */
.iqm-label__stem{ stroke: var(--iq-map-trail); stroke-width: 2; }
.iqm-label__plate{ fill: var(--iq-label-plate); stroke: var(--iq-label-line); stroke-width: 1.5; }
.iqm-label__bar{ fill: var(--tone); }
.iqm-node__label{
  font-family: var(--display); font-size: 27px; font-weight: 700; letter-spacing: -.015em;
  fill: var(--ink);
}
.iqm-node.is-locked .iqm-label__plate{ opacity: .62; }
.iqm-node.is-locked .iqm-node__label{ fill: var(--ink-faint); }
.iqm-node.is-cleared .iqm-label__bar{ filter: drop-shadow(0 0 5px var(--tone)); }
.iqm-node.is-next .iqm-node__disc{ filter: drop-shadow(0 0 12px var(--tone)); }
.iqm-node.is-next .iqm-label__plate{ stroke: var(--tone); stroke-width: 2; }
.iqm-node-link:hover .iqm-node__disc{ stroke-width: 4.5; }
.iqm-node-link:hover .iqm-label__plate{ stroke: var(--tone); stroke-width: 2; }
.iqm-pulse{ fill: none; stroke: var(--tone); stroke-width: 2.5; opacity: .5; animation: iqpulse 2.4s ease-out infinite; }
@keyframes iqpulse{
  0%{ r: 30; opacity: .55; }
  70%{ r: 54; opacity: 0; }
  100%{ r: 54; opacity: 0; }
}
@media (prefers-reduced-motion: reduce){ .iqm-pulse{ animation: none; opacity: .35; } }

/* ---------- the list view, which is also the phone view ---------- */

/* A [hidden] element with a display of its own beats the browser's own
   [hidden] rule, which is how the list view and the cleared banner both ended
   up on screen at the same time as the things they were meant to replace. */
.iqlist[hidden], .iqcleared[hidden], .iqmap__canvas[hidden]{ display: none !important; }

.iqlist{ display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.iqlist__col{ border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; background: var(--surface); border-top: 3px solid var(--tone); }
.iqlist__name{ margin: 0 0 4px; font-family: var(--display); font-weight: 850; font-size: 1.32rem; color: var(--tone); }
.iqlist__line{ margin: 0 0 12px; font-size: 0.98rem; color: var(--ink-faint); }
.iqlist__row{
  display: flex; gap: 10px; align-items: flex-start; text-decoration: none; color: inherit;
  padding: 8px; border-radius: var(--radius-sm);
}
.iqlist__row:hover{ background: var(--surface-2); }
.iqlist__row.is-locked{ opacity: .48; }
.iqlist__step{
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--mono); font-size: 1rem; font-weight: 700;
  border: 1.5px solid var(--tone); color: var(--tone);
}
.iqlist__row.is-cleared .iqlist__step{ background: var(--tone); color: var(--accent-ink); }
.iqlist__row.is-locked .iqlist__step{ border-color: var(--line); color: var(--ink-faint); }
.iqlist__body{ display: grid; gap: 1px; }
.iqlist__title{ font-family: var(--display); font-weight: 700; font-size: 1.1rem; letter-spacing: -.01em; }
.iqlist__sub{ font-size: 0.96rem; color: var(--ink-faint); }

/* ---------- a stop: head, film, words ---------- */

.body--rulebooks .section-page{ max-width: 1460px; }

.body--iq .section-page{ max-width: 900px; }
.iqloading{ color: var(--ink-faint); padding: 40px 0; }

.iqcrumbs{ display: flex; gap: 8px; align-items: center; font-size: 0.9rem; color: var(--ink-faint); margin-bottom: 16px; flex-wrap: wrap; }
.iqcrumbs__back{ color: var(--accent); text-decoration: none; font-weight: 650; }
.iqcrumbs__back:hover{ text-decoration: underline; }
.iqcrumbs__branch{ color: var(--tone); font-weight: 650; }

.iqhead{ border-left: 3px solid var(--tone); padding-left: 18px; margin-bottom: 26px; }
.iqhead__branch{ margin: 0 0 6px; text-transform: uppercase; letter-spacing: .13em; font-size: 0.84rem; font-weight: 800; color: var(--tone); }
.iqhead__title{ margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(1.9rem, 5vw, 2.8rem); letter-spacing: -.04em; line-height: 1.03; }
.iqhead__sub{ margin: 8px 0 0; color: var(--ink-soft); font-size: 1.06rem; }
.iqhead__line{ margin: 16px 0 0; font-size: 1.12rem; line-height: 1.55; max-width: 66ch; }
.iqhead__meta{ display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.iqhead__pill{
  font-family: var(--mono); font-size: 0.86rem; font-weight: 700; letter-spacing: .04em;
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; color: var(--ink-faint);
}
.iqhead__pill.is-done{ border-color: var(--pos); color: var(--pos); }

.iqfilm{
  margin: 0 0 30px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface);
}
.iqfilm__head{ display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.iqfilm__caption{ font-family: var(--display); font-weight: 750; font-size: 1.02rem; letter-spacing: -.015em; }
.iqfilm__replay{
  flex: none; background: var(--surface-3); border: 0; color: var(--ink); font: inherit; font-weight: 650;
  border-radius: 999px; padding: 6px 16px; cursor: pointer;
}
.iqfilm__replay:hover{ background: var(--accent); color: var(--accent-ink); }
.iqfilm__stage{ border-radius: var(--radius); overflow: hidden; background: var(--bg-2); }
.iqfilm__stage svg{ display: block; width: 100%; height: auto; }
.iqfilm--field .iqfilm__stage{ max-width: 520px; margin: 0 auto; }
.iqfilm__legend{ list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.iqfilm__key{ position: relative; padding-left: 16px; font-size: var(--step-small); color: var(--ink-soft); }
.iqfilm__key::before{ content: ""; position: absolute; left: 0; top: .48em; width: 9px; height: 9px; border-radius: 50%; background: var(--iq-flat); }
.iqfilm__key.is-good::before{ background: var(--iq-good); }
.iqfilm__key.is-bad::before{ background: var(--iq-bad); }
.iqfilm__note{ margin: 12px 0 0; font-size: var(--step-small); color: var(--ink-faint); line-height: 1.55; }

/* the catcher's view */
.iqz{ max-width: 380px; margin: 0 auto; }
.iqz__bg{ fill: var(--bg-2); }
.iqz__zone{ fill: rgba(255,255,255,.03); stroke: rgba(255,255,255,.35); stroke-width: .7; }
.iqz__grid{ stroke: rgba(255,255,255,.13); stroke-width: .35; }
.iqz__plate{ fill: rgba(255,255,255,.14); }
.iqz__caption{ font-family: var(--mono); font-size: 13px; letter-spacing: .18em; fill: var(--ink-faint); text-transform: uppercase; }
.iqz__path{ stroke: var(--iq-flat); stroke-width: 1; opacity: .75; stroke-linecap: round; }
.iqz__path.is-good{ stroke: var(--iq-good); }
.iqz__path.is-bad{ stroke: var(--iq-bad); }
.iqz__ball{ fill: var(--iq-flat); }
.iqz__ball.is-good{ fill: var(--iq-good); }
.iqz__ball.is-bad{ fill: var(--iq-bad); }
.iqz__tunnel circle{ stroke: var(--accent-2); stroke-width: .7; stroke-dasharray: 2 2; }
.iqz__tunnel text{ font-family: var(--mono); font-size: 13px; fill: var(--accent-2); }
@media (prefers-color-scheme: light){
  .iqz__zone{ fill: rgba(20,32,54,.03); stroke: rgba(20,32,54,.4); }
  .iqz__grid{ stroke: rgba(20,32,54,.14); }
  .iqz__plate{ fill: rgba(20,32,54,.16); }
}

/* the side-on view */
.iqa__bg{ fill: var(--bg-2); }
.iqa__ground{ stroke: var(--ink-faint); stroke-width: 1; opacity: .5; }
.iqa__tick{ stroke: var(--ink-faint); stroke-width: 1; opacity: .5; }
.iqa__ticklabel{ font-family: var(--mono); font-size: 13px; fill: var(--ink-faint); }
.iqa__fence{ fill: var(--ink-faint); opacity: .55; }
.iqa__fencelabel{ font-family: var(--mono); font-size: 13px; fill: var(--ink-faint); }
.iqa__path{ stroke: var(--iq-flat); stroke-width: 1.8; opacity: .9; }
.iqa__path.is-good{ stroke: var(--iq-good); }
.iqa__path.is-bad{ stroke: var(--iq-bad); }
.iqa__ball{ fill: var(--iq-flat); }
.iqa__ball.is-good{ fill: var(--iq-good); }
.iqa__ball.is-bad{ fill: var(--iq-bad); }

/* the bars */
.iqb__zero{ stroke: var(--ink-faint); stroke-width: 1; opacity: .55; }
.iqb__label{ font-size: 13px; fill: var(--ink-soft); }
.iqb__value{ font-family: var(--mono); font-size: 13px; font-weight: 700; fill: var(--ink); }
.iqb__bar{ fill: var(--iq-flat); }
.iqb__bar.is-good{ fill: var(--iq-good); }
.iqb__bar.is-bad{ fill: var(--iq-bad); }

/* the diamond */
.iqf__disc{ fill: var(--dm-disc); stroke: rgba(255,255,255,.5); stroke-width: 1.5; }
.iqf__man.is-good .iqf__disc{ stroke: var(--iq-good); stroke-width: 2.5; }
.iqf__man.is-bad .iqf__disc{ stroke: var(--iq-bad); stroke-width: 2.5; }
.iqf__man.is-move .iqf__disc{ stroke: var(--accent-2); stroke-width: 2.5; }
.iqf__pos{ font-family: var(--mono); font-size: 16px; font-weight: 700; fill: #fff; }
.iqf__label{ font-family: var(--mono); font-size: 14px; fill: #fff; paint-order: stroke; stroke: rgba(0,0,0,.7); stroke-width: 3px; }
.iqf__ball{ fill: var(--rtp-ball, #C97636); stroke: #fff; stroke-width: 1; }
.iqf__throw{ stroke: var(--accent-2); stroke-width: 2; stroke-dasharray: 5 4; }

/* the base-out states */
.iqbases__strip{ display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; padding: 16px; }
.iqbases__frame{
  flex: 1 1 170px; max-width: 220px; text-align: center; padding: 12px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  opacity: .35; transition: opacity .3s ease, border-color .3s ease;
}
.iqbases__frame.is-lit{ opacity: 1; border-color: var(--tone, var(--accent-line)); }
.iqbases__dia{ width: 96px; height: 96px; margin: 0 auto; display: block; }
.iqbases__infield{ fill: rgba(255,255,255,.05); stroke: var(--ink-faint); stroke-width: 1; }
.iqbases__bag{ fill: var(--surface-3); stroke: var(--ink-faint); stroke-width: 1; }
.iqbases__bag.is-on{ fill: var(--accent-2); stroke: var(--accent-2); }
.iqbases__plate{ fill: var(--ink-faint); }
.iqbases__outs{ display: flex; gap: 5px; align-items: center; justify-content: center; margin: 8px 0 4px; }
.iqbases__out{ width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--ink-faint); }
.iqbases__out.is-on{ background: var(--ink-faint); }
.iqbases__outsLabel{ font-family: var(--mono); font-size: 0.84rem; color: var(--ink-faint); margin-left: 4px; }
.iqbases__re{ display: grid; gap: 0; margin-top: 6px; }
.iqbases__reNum{ font-family: var(--display); font-weight: 900; font-size: 1.8rem; letter-spacing: -.04em; }
.iqbases__reLabel{ font-size: 0.84rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); }
.iqbases__note{ margin: 8px 0 0; font-size: 0.88rem; color: var(--ink-soft); line-height: 1.45; }

/* ---------- the words ---------- */

.iqwords{ display: grid; gap: 22px; margin-bottom: 34px; }
.iqwords__title{
  margin: 0 0 6px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em;
  font-size: 0.84rem; font-weight: 700; color: var(--tone);
}
.iqwords__text{ margin: 0; line-height: 1.68; max-width: 70ch; }
.iqterms{ margin: 0 0 34px; font-size: var(--step-small); color: var(--ink-soft); }
.iqterms__label{
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; font-size: 0.84rem;
  font-weight: 700; color: var(--ink-faint); margin-right: 6px;
}

/* ---------- the tasks ---------- */

.iqtasks{ border-top: 1px solid var(--line); padding-top: 26px; }
.iqtasks__head{ margin-bottom: 18px; }
.iqtasks__title{ margin: 0; font-family: var(--display); font-weight: 850; font-size: 1.5rem; letter-spacing: -.03em; }
.iqtasks__aside{ margin: 6px 0 0; color: var(--ink-faint); font-size: var(--step-small); }

.iqtask{
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 14px;
  background: var(--surface); border-left: 3px solid var(--line);
}
.iqtask.is-done{ border-left-color: var(--pos); }
.iqtask__head{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.iqtask__n{ font-family: var(--mono); font-size: 0.84rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); }
.iqtask__state{ font-family: var(--mono); font-size: 0.84rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); }
.iqtask.is-done .iqtask__state{ color: var(--pos); }
.iqtask__ask{ margin: 0 0 14px; font-size: 1.06rem; font-weight: 700; line-height: 1.42; }
.iqtask__why{
  margin: 14px 0 0; padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--ink-soft); line-height: 1.6; font-size: var(--step-small);
}
.iqtask__check{
  margin-top: 12px; background: var(--surface-3); border: 0; color: var(--ink); font: inherit; font-weight: 650;
  border-radius: 999px; padding: 9px 22px; cursor: pointer;
}
.iqtask__check:hover:not(:disabled){ background: var(--accent); color: var(--accent-ink); }
.iqtask__check:disabled{ opacity: .4; cursor: default; }

.iqchoice{ display: grid; gap: 8px; }
.iqchoice__opt{
  text-align: left; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink);
  font: inherit; border-radius: var(--radius); padding: 12px 16px; cursor: pointer; line-height: 1.45;
}
.iqchoice__opt:hover:not(:disabled){ border-color: var(--accent-line); background: var(--surface-3); }
.iqchoice__opt.is-right{ border-color: var(--pos); background: var(--accent-3-soft); color: var(--ink); }
.iqchoice__opt.is-wrong{ border-color: var(--neg); opacity: .5; text-decoration: line-through; }
.iqchoice__opt:disabled{ cursor: default; }

.iqorder{ display: grid; gap: 12px; }
.iqorder.is-wrong{ animation: iqshake .4s ease; }
@keyframes iqshake{ 0%,100%{ transform: translateX(0); } 25%{ transform: translateX(-5px); } 75%{ transform: translateX(5px); } }
.iqorder__answer{
  display: flex; flex-direction: column; gap: 6px; min-height: 46px;
  border: 1px dashed var(--line); border-radius: var(--radius); padding: 8px;
}
.iqorder__pool{ display: flex; flex-wrap: wrap; gap: 8px; }
.iqorder__chip{
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); font: inherit;
  border-radius: 999px; padding: 8px 16px; cursor: pointer; text-align: left;
}
.iqorder__chip:hover:not(:disabled){ border-color: var(--accent-line); }
.iqorder__chip.is-placed{ background: var(--accent-soft); border-color: var(--accent-line); }
.iqorder__chip:disabled{ cursor: default; }

.iqslider{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.iqslider__input{ flex: 1; min-width: 220px; accent-color: var(--accent); }
.iqslider__value{
  font-family: var(--mono); font-weight: 700; font-size: 1.3rem; min-width: 130px;
  padding: 6px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); text-align: center;
}
.iqslider.is-right .iqslider__value{ border-color: var(--pos); color: var(--pos); }
.iqslider.is-wrong .iqslider__value{ border-color: var(--neg); color: var(--neg); }

.iqspot{ border-radius: var(--radius); overflow: hidden; background: var(--bg-2); cursor: crosshair; }
.iqspot svg{ display: block; width: 100%; height: auto; }
.iqspot--zone{ max-width: 380px; margin: 0 auto; }
.iqspot--field{ max-width: 480px; margin: 0 auto; }
.iqspot__pick{ fill: var(--neg); stroke: #fff; stroke-width: 1; }
.iqspot__pick.is-right{ fill: var(--pos); }
.iqspot__goal{ stroke: var(--pos); stroke-width: 1.5; stroke-dasharray: 4 3; opacity: 0; }
.iqspot--field .iqspot__goal{ stroke-width: 3; }
.iqspot__goal.is-shown{ opacity: .9; }
.iqspot__hint{ margin: 8px 0 0; font-size: var(--step-small); color: var(--ink-faint); }

.iqcleared{
  margin-top: 18px; padding: 20px; border-radius: var(--radius-lg);
  border: 1px solid var(--pos); background: var(--accent-3-soft);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.iqcleared__title{ margin: 0; font-family: var(--display); font-weight: 900; font-size: 1.3rem; letter-spacing: -.03em; }
.iqcleared__note{ margin: 0; color: var(--ink-soft); }
.iqcleared__next{
  margin-left: auto; text-decoration: none; font-weight: 700;
  background: var(--pos); color: var(--accent-ink); border-radius: 999px; padding: 10px 22px;
}

/* ---------- the foot of a stop ---------- */

.iqfoot{ margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 14px; }
.iqfoot__ask{
  display: inline-block; justify-self: start; text-decoration: none; font-weight: 650;
  border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--ink);
  border-radius: 999px; padding: 10px 20px;
}
.iqfoot__ask:hover{ background: var(--accent); color: var(--accent-ink); }
.iqfoot__watch{ margin: 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.iqfoot__label{
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; font-size: 0.84rem;
  font-weight: 700; color: var(--ink-faint);
}
.iqfoot__link{ color: var(--accent); text-decoration: none; font-weight: 650; font-size: var(--step-small); }
.iqfoot__link:hover{ text-decoration: underline; }
.iqfoot__note{ margin: 0; font-size: 0.88rem; color: var(--ink-faint); line-height: 1.55; max-width: 66ch; }
.iqfoot__also{
  display: grid; gap: 2px; text-decoration: none; color: inherit; justify-self: start;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; background: var(--surface);
}
.iqfoot__also:hover{ border-color: var(--accent-line); }
.iqfoot__alsoName{ font-weight: 700; color: var(--accent); }
.iqfoot__alsoNote{ font-size: var(--step-small); color: var(--ink-faint); }

.iqpager{ display: flex; justify-content: space-between; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.iqpager__prev, .iqpager__next{ text-decoration: none; color: var(--ink-soft); font-weight: 650; }
.iqpager__prev:hover, .iqpager__next:hover{ color: var(--ink); }
.iqpager__next{ margin-left: auto; }
.iqpager__locked{ margin-left: auto; color: var(--ink-faint); font-size: var(--step-small); }

@media (max-width: 620px){
  /* The map is 1600 units wide and a stop label is unreadable squeezed into
     a phone. The page opens in list view there instead, decided in script so
     the toggle still works if somebody turns their phone sideways. */
  .iqcleared__next{ margin-left: 0; }
  .iqhead{ padding-left: 14px; }
}

/* ---------- the route legend under the map ---------- */

.iqkeys{
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  padding: 16px; border-top: 1px solid var(--line);
}
.iqkey{
  display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit;
  padding: 10px 12px; border-radius: var(--radius); background: var(--surface);
  border: 1px solid var(--line);
}
a.iqkey:hover{ border-color: var(--tone); }
.iqkey__dot{ flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--tone); }
.iqkey__body{ display: grid; gap: 1px; min-width: 0; }
.iqkey__name{ font-family: var(--display); font-weight: 750; font-size: 1.08rem; letter-spacing: -.015em; }
.iqkey__note{ font-size: 0.95rem; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iqkey__count{ margin-left: auto; font-family: var(--mono); font-weight: 700; font-size: 1.06rem; color: var(--tone); }

.iqm-trail{ stroke-dasharray: 3 15; }

/* The header carries four entries now instead of three, so the small ask box
   and the tab blurbs give way earlier than they used to. Without this the
   Tools pill and the ask box sit on top of each other around 1100px. */
/* (The search box's breakpoint now lives with the rest of the header rules
   above, so the five-tab strip and the box are sized by one set of rules
   rather than two that disagreed.) */
@media (max-width: 1120px){ .tab__blurb{ display: none; } }

/* ============================================================
   THE CAREER: RANK, STREAK, DAILY QUESTION, BADGES
   ------------------------------------------------------------
   All of this lives on the Tools and Games front, which is the
   only page that has a reason to be opened on a day when nobody
   feels like reading anything. The daily question is at the top
   for that reason: it is the thing that regenerates, and the rank
   underneath it is only the record of what that adds up to.
   ============================================================ */

/* ---------- today's question ---------- */

.daily{
  margin: 22px 0 0; padding: 24px clamp(18px, 3vw, 28px);
  border: 1px solid var(--accent-line); border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--accent-soft), transparent 62%), var(--surface);
}
.daily__head{ margin-bottom: 14px; }
.daily__title{
  margin: 0; font-family: var(--display); font-weight: 850; font-size: 1.32rem; letter-spacing: -.03em;
}
.daily__meta{ margin: 4px 0 0; font-size: var(--step-small); color: var(--ink-faint); }
.daily__ask{ margin: 0 0 16px; font-size: 1.14rem; font-weight: 700; line-height: 1.45; max-width: 62ch; }
.daily__options{ display: grid; gap: 8px; max-width: 640px; }
.daily__opt{
  text-align: left; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink);
  font: inherit; border-radius: var(--radius); padding: 12px 16px; cursor: pointer; line-height: 1.45;
}
.daily__opt:hover:not(:disabled){ border-color: var(--accent-line); background: var(--surface-3); }
.daily__opt:disabled{ cursor: default; }
.daily__opt.is-right{ border-color: var(--pos); background: var(--accent-3-soft); }
.daily__opt.is-wrong{ border-color: var(--neg); color: var(--ink-soft); }
.daily__why{ margin-top: 16px; max-width: 68ch; }
.daily__verdict{ margin: 0 0 6px; font-family: var(--display); font-weight: 800; font-size: 1.06rem; }
.daily__whyText{ margin: 0; color: var(--ink-soft); line-height: 1.62; }
.daily__from{
  display: inline-block; margin-top: 10px; color: var(--accent); text-decoration: none;
  font-weight: 650; font-size: var(--step-small);
}
.daily__from:hover{ text-decoration: underline; }
.daily__done{ margin: 14px 0 0; font-size: var(--step-small); color: var(--ink-faint); }

/* ---------- the rank card ---------- */

.career{
  margin: 18px 0 0; padding: 24px clamp(18px, 3vw, 28px);
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
}
.career__head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.career__rank{ display: grid; gap: 2px; }
.career__rankLabel{
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .13em;
  font-size: 0.84rem; font-weight: 700; color: var(--ink-faint);
}
.career__rankName{
  font-family: var(--display); font-weight: 900; font-size: clamp(1.7rem, 4vw, 2.4rem);
  letter-spacing: -.04em; line-height: 1.04;
}
.career__rankNote{ font-size: var(--step-small); color: var(--ink-soft); }
.career__score{ display: flex; align-items: baseline; gap: 8px; }
.career__points{ font-family: var(--display); font-weight: 900; font-size: 2.1rem; letter-spacing: -.04em; }
.career__pointsLabel{ font-size: var(--step-small); color: var(--ink-faint); }
.career__bar{ margin-top: 18px; height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.career__fill{
  height: 100%; border-radius: 999px; transition: width .5s ease;
  background: linear-gradient(90deg, var(--iq-hitting), var(--iq-pitching), var(--iq-defense), var(--iq-strategy));
}
.career__next{ margin: 9px 0 0; font-size: var(--step-small); color: var(--ink-faint); }

.career__streak{ display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-top: 16px; }
.career__streakNum{ font-family: var(--display); font-weight: 900; font-size: 1.6rem; color: var(--accent-2); letter-spacing: -.03em; }
.career__streakWord{ color: var(--ink-soft); }
.career__streakBest{ font-size: var(--step-small); color: var(--ink-faint); }

.career__break{ margin-top: 18px; border-top: 1px solid var(--line-soft); padding-top: 14px; }
.career__break summary{ cursor: pointer; color: var(--ink-soft); font-size: var(--step-small); }
.career__break summary:hover{ color: var(--ink); }
.career__lines{ list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; }
.career__line{ display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: baseline; font-size: var(--step-small); }
.career__lineLabel{ color: var(--ink-soft); }
.career__lineDetail{ font-family: var(--mono); color: var(--ink-faint); }
.career__linePoints{ font-family: var(--mono); font-weight: 700; min-width: 74px; text-align: right; }
.career__breakNote{ margin: 12px 0 0; font-size: 0.88rem; color: var(--ink-faint); line-height: 1.55; max-width: 68ch; }
.career__actions{ margin-top: 18px; }
.career__share{
  background: var(--surface-3); border: 0; color: var(--ink); font: inherit; font-weight: 650;
  border-radius: 999px; padding: 10px 22px; cursor: pointer;
}
.career__share:hover{ background: var(--accent); color: var(--accent-ink); }

/* ---------- badges ---------- */

.badges{ display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-top: 16px; }
.badge{
  position: relative; display: grid; gap: 3px; padding: 15px 16px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  opacity: .48;
}
.badge.is-earned{ opacity: 1; border-color: var(--accent-2); background: linear-gradient(150deg, var(--accent-2-soft), transparent 70%), var(--surface); }
.badge__name{ font-family: var(--display); font-weight: 800; letter-spacing: -.02em; }
.badge__note{ font-size: 0.88rem; color: var(--ink-soft); line-height: 1.42; }
.badge__when{ font-family: var(--mono); font-size: 0.84rem; color: var(--ink-faint); margin-top: 3px; }
.badge__new{
  position: absolute; top: -8px; right: 12px; background: var(--pos); color: var(--accent-ink);
  font-family: var(--mono); font-size: 0.84rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
}

/* ---------- the shareable card ---------- */

.sharewrap{
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: rgba(0,0,0,.62); backdrop-filter: blur(4px); padding: 20px;
}
.sharebox{
  width: min(760px, 100%); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 22px;
}
.sharebox__title{ margin: 0 0 14px; font-family: var(--display); font-weight: 850; font-size: 1.3rem; letter-spacing: -.03em; }
.sharebox__stage{ border-radius: var(--radius); overflow: hidden; background: var(--bg-2); }
.sharebox__canvas{ display: block; width: 100%; height: auto; }
.sharebox__row{ display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.sharebox__save, .sharebox__copy, .sharebox__close{
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
  font: inherit; font-weight: 650; border-radius: 999px; padding: 10px 20px; cursor: pointer;
}
.sharebox__save{ background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.sharebox__close{ margin-left: auto; }
.sharebox__copy:hover, .sharebox__close:hover{ border-color: var(--accent-line); }

/* ---------- the ribbon on the map ---------- */

.iqribbon{
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  margin: 18px 0 0; padding: 12px 18px; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
}
.iqribbon:hover{ border-color: var(--accent-line); }
.iqribbon__rank{ font-family: var(--display); font-weight: 800; letter-spacing: -.02em; }
.iqribbon__points{ font-family: var(--mono); color: var(--ink-soft); font-size: var(--step-small); }
.iqribbon__streak{ font-family: var(--mono); color: var(--accent-2); font-size: var(--step-small); }
.iqribbon__go{ margin-left: auto; color: var(--accent); font-weight: 650; font-size: var(--step-small); }

/* ---------- the verdict, and the play that follows it ---------- */

.rtp-verdict__reason{
  margin: 10px 0 0; line-height: 1.62; color: var(--ink);
  border-left: 3px solid var(--accent); padding-left: 14px;
}
.rtp-verdict__context{
  margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line-soft);
}
.rtp-verdict__contextLabel{
  margin: 0 0 5px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .13em;
  font-size: 0.84rem; font-weight: 700; color: var(--ink-faint);
}
.rtp-verdict__row{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.rtp-verdict__replay{
  border: 0; background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 650;
  border-radius: 999px; padding: 9px 20px; cursor: pointer;
}
.rtp-verdict__replay:hover{ background: var(--accent-hot); }

/* The three rings have done their job once the answer is in, and nine men
   moving through them is a picture with two things in it. */
.rtp-field.is-playing .rtp-zones{ opacity: 0; transition: opacity .35s ease; pointer-events: none; }

/* The man who was asked about keeps a ring of his own on top of his role
   color, so he is still findable once all nine are moving. */
.rtp-man.is-asked .rtp-man-halo{ fill: var(--accent); opacity: .3; }
.rtp-man.is-asked .rtp-man-ring{ stroke: var(--accent); stroke-width: calc(3.6 * var(--k)); }

/* The reason a fielder goes where he goes, in Learn: folded away until the
   row is picked, so the list stays nine readable one-liners. */
.rtp-job__why{
  margin: 8px 0 0; font-size: 0.92rem; line-height: 1.55; color: var(--ink-soft);
  display: none;
}
.rtp-job.is-on .rtp-job__why{ display: block; }

/* ---------- The game page: one game, pitch by pitch (Sept 5) ----------
   A strike zone is a picture of a place, not a chart, so it is drawn like
   one: the plate at the bottom, the zone as a box with its thirds showing,
   and the pitches numbered in the order they were thrown so a sequence reads
   as a sequence. Color carries the pitch family and the ring carries the
   outcome, which are two different questions about the same dot and would
   fight if either tried to carry both.

   Every pitch carries its own color rather than a family color. The list is
   long, but no single game shows more than a handful of it: the legend is
   built from the pitches actually thrown, so what a reader has to hold is
   whatever this pitcher has, and the hues still run warm for the hard stuff,
   green to blue across the breaking balls, purple and pink for the ones that
   die. */
:root{
  --pitch-four:   #ff6b5e;
  --pitch-sink:   #ffa24a;
  --pitch-cut:    #ffd15c;
  --pitch-screw:  #d7dd52;
  --pitch-slider: #5fd39a;
  --pitch-sweeper:#2ec9b8;
  --pitch-slurve: #3fb6e0;
  --pitch-curve:  #4d8df7;
  --pitch-kcurve: #7d7bf5;
  --pitch-scurve: #9fb6e8;
  --pitch-change: #b47cf0;
  --pitch-split:  #e072cf;
  --pitch-fork:   #ff7fa8;
  --pitch-knuck:  #cbb27a;
  --pitch-eephus: #b08fa8;
  --pitch-other:  #8c97a8;
}
@media (prefers-color-scheme: light){
  :root{
    --pitch-four:   #d63b2e;
    --pitch-sink:   #c2701a;
    --pitch-cut:    #9a7415;
    --pitch-screw:  #7f8a12;
    --pitch-slider: #178a58;
    --pitch-sweeper:#0f8578;
    --pitch-slurve: #0f7ba3;
    --pitch-curve:  #2563eb;
    --pitch-kcurve: #4a45d6;
    --pitch-scurve: #5a76b8;
    --pitch-change: #7c3fc4;
    --pitch-split:  #a83b96;
    --pitch-fork:   #c73c6b;
    --pitch-knuck:  #856526;
    --pitch-eephus: #7a5a70;
    --pitch-other:  #5b6472;
  }
}

.game-page{ max-width:1460px; margin:0 auto; padding:1.6rem 1.2rem 5rem; }
.game__back{
  display:inline-block; margin-bottom:1rem; color:var(--ink-soft);
  font-size:var(--step-small); text-decoration:none; border-bottom:1px solid transparent;
}
.game__back:hover{ color:var(--ink); border-bottom-color:var(--accent-line); }
.game__hint{ color:var(--ink-soft); font-size:var(--step-small); margin:0; }

.gamehead{ display:grid; gap:1rem; margin-bottom:1.4rem; }
.gamehead__card{
  display:grid; grid-template-columns:1fr auto; gap:.4rem 1.6rem; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:1.1rem 1.3rem;
}
.gamehead__card.is-live{ border-color:var(--accent-line); box-shadow:inset 3px 0 0 var(--accent); }
.gamehead__side{ display:grid; grid-template-columns:28px 1fr auto auto; gap:.7rem; align-items:center; }
.gamehead__side.is-winner .gamehead__team,
.gamehead__side.is-winner .gamehead__runs{ color:var(--ink); font-weight:800; }
.gamehead__logo{ width:28px; height:28px; object-fit:contain; }
.gamehead__team{ color:var(--ink); text-decoration:none; font-weight:600; font-size:1.15rem; }
.gamehead__team:hover{ border-bottom:1px solid var(--accent-line); }
.gamehead__line{ font-family:var(--mono); color:var(--ink-faint); font-size:var(--step-small); letter-spacing:.02em; }
.gamehead__runs{ font-family:var(--mono); font-size:1.9rem; font-weight:700; min-width:2ch; text-align:right; font-variant-numeric:tabular-nums; }
.gamehead__meta{ grid-row:1 / span 2; grid-column:2; text-align:right; }
.gamehead__status{ margin:0; font-weight:700; font-size:1.05rem; }
.gamehead__status.is-live{ color:var(--accent); }
.gamehead__where,.gamehead__note{ margin:.25rem 0 0; color:var(--ink-soft); font-size:var(--step-small); }

.linescore-wrap{ overflow-x:auto; }
.linescore{ border-collapse:collapse; font-family:var(--mono); font-variant-numeric:tabular-nums; width:100%; }
.linescore th,.linescore td{ padding:.34rem .55rem; text-align:center; border-bottom:1px solid var(--line-soft); font-weight:500; }
.linescore th{ color:var(--ink-faint); font-size:var(--step-label); }
.linescore__club{ text-align:left !important; color:var(--ink) !important; font-size:var(--step-small) !important; white-space:nowrap; }
.linescore__tot{ font-weight:700; color:var(--ink); border-left:1px solid var(--line); }

/* ---------- The at-bat happening now ---------- */
.nowpanel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:1.2rem 1.3rem; margin-bottom:1.6rem;
}
.nowpanel.is-live{ border-color:var(--accent-line); }
.nowpanel__head{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; }
.nowpanel__title{ margin:0; font-size:1.1rem; }
.nowpanel__sit{ display:flex; align-items:center; gap:.9rem; }
.nowpanel__inning{ font-weight:600; }
.nowpanel__count{ font-family:var(--mono); font-size:1.5rem; font-weight:700; font-variant-numeric:tabular-nums; }
/* The bases and the outs are the scoreboard's own components, imported from
   liveFigures.js rather than redrawn here. Defining them twice is what made
   this page's three bags stack into one. */

.nowpanel__matchup{ display:flex; flex-wrap:wrap; gap:2rem; margin:.9rem 0 1rem; }
.matchup__side{ display:flex; align-items:baseline; gap:.5rem; }
.matchup__role{ color:var(--ink-faint); font-size:var(--step-label); text-transform:uppercase; letter-spacing:.06em; }
.matchup__hand{ color:var(--ink-soft); font-size:var(--step-small); font-family:var(--mono); }
.playerlink{ color:var(--ink); text-decoration:none; font-weight:600; border-bottom:1px solid var(--line); }
.playerlink:hover{ border-bottom-width:2px; border-bottom-color:var(--accent); }
.playerlink--plain{ border:0; font-weight:600; }

.nowpanel__body{ display:grid; grid-template-columns:auto 1fr; gap:1.6rem; align-items:start; }
.nowpanel__result{ margin:.7rem 0 0; color:var(--ink); font-size:var(--step-small); }
@media (max-width:760px){ .nowpanel__body{ grid-template-columns:1fr; } }

/* ---------- The strike zone ---------- */
.zone{ display:block; }
/* The zone picture is a canvas: it reads these colors off the page and
   draws them itself, so there are no elements here left to style. */
.zone__caption{ margin:.5rem 0 0; color:var(--ink-faint); font-size:var(--step-label); max-width:26ch; }
.pitchdot__n{
  font-family:var(--mono); font-size:.235px; font-weight:700; text-anchor:middle;
  fill:var(--accent-ink); paint-order:stroke;
  /* THE NUMBER SITS IN THE MIDDLE OF ITS DOT, AND THIS IS WHY IT DID NOT.
     The page sets a small negative letter-spacing in PIXELS. Text inherits
     it, and inside a picture 3.9 units wide a fraction of a pixel is a
     quarter of the dot. text-anchor:middle centers the advance including the
     trailing letter-space, so negative tracking pushed every digit right.
     Zero here, zero inline in the script, and the vertical centering done by
     the baseline instead of an offset that only suited one font. */
  letter-spacing:0; word-spacing:0; dominant-baseline:central;
}
/* The dot says what was thrown; the ring says what came of it. A taken ball
   is hollow, a strike is solid, a ball in play gets the one bright ring on
   the picture, because a ball in play is the only pitch that ended anything. */
/* A taken ball is hollow, a strike is solid, and a ball in play carries the
   one bright ring on the picture, because it is the only pitch that ended
   anything. All three are shapes rather than outlines now: the hollow one is
   a filled ring with a hole in it. Nothing in this picture is stroked. */
.pitchdot--ball .pitchdot__n{ fill:var(--ink-soft); }
.pitchdot--foul .pitchdot__disc{ fill-opacity:.35; }
.pitchdot--foul .pitchdot__n{ fill:var(--ink); }
.pitchdot__halo{ fill:var(--ink); }

[data-family="four"] .pitchdot__disc,[data-family="four"]{ --fam:var(--pitch-four); }
[data-family="sink"] .pitchdot__disc,[data-family="sink"]{ --fam:var(--pitch-sink); }
[data-family="cut"] .pitchdot__disc,[data-family="cut"]{ --fam:var(--pitch-cut); }
[data-family="screw"] .pitchdot__disc,[data-family="screw"]{ --fam:var(--pitch-screw); }
[data-family="slider"] .pitchdot__disc,[data-family="slider"]{ --fam:var(--pitch-slider); }
[data-family="sweeper"] .pitchdot__disc,[data-family="sweeper"]{ --fam:var(--pitch-sweeper); }
[data-family="slurve"] .pitchdot__disc,[data-family="slurve"]{ --fam:var(--pitch-slurve); }
[data-family="curve"] .pitchdot__disc,[data-family="curve"]{ --fam:var(--pitch-curve); }
[data-family="kcurve"] .pitchdot__disc,[data-family="kcurve"]{ --fam:var(--pitch-kcurve); }
[data-family="scurve"] .pitchdot__disc,[data-family="scurve"]{ --fam:var(--pitch-scurve); }
[data-family="change"] .pitchdot__disc,[data-family="change"]{ --fam:var(--pitch-change); }
[data-family="split"] .pitchdot__disc,[data-family="split"]{ --fam:var(--pitch-split); }
[data-family="fork"] .pitchdot__disc,[data-family="fork"]{ --fam:var(--pitch-fork); }
[data-family="knuck"] .pitchdot__disc,[data-family="knuck"]{ --fam:var(--pitch-knuck); }
[data-family="eephus"] .pitchdot__disc,[data-family="eephus"]{ --fam:var(--pitch-eephus); }
[data-family="other"] .pitchdot__disc,[data-family="other"]{ --fam:var(--pitch-other); }
.pitchdot__disc{ fill:var(--fam,var(--pitch-other)); }

.zonelegend{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1rem; }
.zonelegend__chip{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:var(--step-label); color:var(--ink-soft);
  border:1px solid var(--line); border-radius:999px; padding:.2rem .6rem;
}
.zonelegend__chip::before{
  content:""; width:9px; height:9px; border-radius:50%;
  background:var(--fam,var(--pitch-other));
}
/* How many of it he threw. Quiet, because the chip is there to name a color
   first and the count is the second thing anybody wants from it. */
.zonelegend__n{
  font-family:var(--mono); font-style:normal; font-variant-numeric:tabular-nums;
  font-size:.86em; color:var(--ink-faint); margin-left:.1rem;
}

/* ---------- The pitch list ---------- */
.pitchtable{ display:grid; gap:.18rem; }
.pitchrow{
  display:grid; grid-template-columns:1.5rem 3.7rem minmax(8rem,1fr) 3.4rem 7.5rem minmax(8rem,1.3fr);
  gap:.7rem; align-items:baseline; padding:.34rem .55rem; border-radius:var(--radius-sm);
  font-family:var(--mono); font-size:var(--step-small); font-variant-numeric:tabular-nums;
  border-left:3px solid var(--fam,var(--pitch-other));
  background:var(--surface-2); white-space:nowrap;
}
/* The header carries the units, so it is quiet: no fill, no colored rail,
   and set in the label size the rest of the site uses for column heads. */
.pitchrow--head{
  background:none; border-left-color:transparent; padding-bottom:.1rem;
  color:var(--ink-faint); font-size:var(--step-label); text-transform:uppercase; letter-spacing:.06em;
}
.pitchrow--head span{ color:inherit !important; font-weight:700 !important; font-family:var(--mono) !important; }
.pitchrow__n{ color:var(--ink-faint); }
.pitchrow__count{ color:var(--ink); font-weight:700; }
.pitchrow__type{ color:var(--ink); font-family:var(--body); }
.pitchrow__velo{ text-align:right; font-weight:700; }
.pitchrow__shape{ color:var(--ink-soft); }
.pitchrow__call{ color:var(--ink-soft); font-family:var(--body); }
.pitchrow--inplay{ background:var(--accent-soft); }
.pitchrow--inplay .pitchrow__call{ color:var(--ink); font-weight:600; }
@media (max-width:760px){
  .pitchrow{ grid-template-columns:1.4rem 2.6rem 1fr 3rem; }
  .pitchrow__shape,.pitchrow__call{ grid-column:1 / -1; padding-left:4rem; }
  .pitchrow--head .pitchrow__shape,.pitchrow--head .pitchrow__call{ display:none; }
}

/* On a phone the head card stacks. Squeezing the venue, the temperature and
   the wind into a column beside the score turned one line of prose into a
   seven-line ribbon. */
@media (max-width:760px){
  .gamehead__card{ grid-template-columns:1fr; }
  .gamehead__meta{ grid-row:auto; grid-column:auto; text-align:left; margin-top:.6rem;
    border-top:1px solid var(--line-soft); padding-top:.6rem; }
  .gamehead__runs{ font-size:1.6rem; }
}

/* ---------- Every plate appearance ---------- */
.playlog{ display:grid; gap:.3rem; }
.playlog__half{
  margin:1.2rem 0 .3rem; font-size:var(--step-label); text-transform:uppercase;
  letter-spacing:.07em; color:var(--ink-faint); font-weight:700;
}
.playrow{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); }
.playrow.is-scoring{ border-color:var(--accent-2); box-shadow:inset 3px 0 0 var(--accent-2); }
/* THE AT-BAT SOMEBODY WAS SENT HERE TO SEE. A link off the news desk names a
   plate appearance, and in a log of ninety of them the reader has to be able
   to see at a glance which one the page just took them to. Marked rather than
   only scrolled to, because a scroll finishes and leaves no trace. */
/* The strip that says the plate appearance somebody was sent to is not in the
   local snapshot. Named plainly, with the command that fixes it, because the
   alternative is a reader looking at the wrong pitch and not knowing. */
.playlog__missing{
  margin: 0 0 14px; padding: 14px 16px;
  border: 1px solid var(--accent-line); border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--accent-soft), transparent 70%), var(--surface);
}
.playlog__missingMark{
  display: inline-block; margin-bottom: 7px;
  font-size: .84rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent);
}
.playlog__missingText{ margin: 0; font-size: 1rem; line-height: 1.55; color: var(--ink-soft); max-width: 74ch; }
.playlog__missingHow{ margin: 9px 0 0; font-size: .94rem; color: var(--ink-faint); }
.playlog__missingHow code{
  font-family: var(--mono); font-weight: 700; font-size: 1rem;
  padding: 2px 7px; border-radius: 5px;
  background: var(--surface-3); color: var(--ink);
}

.playrow.is-asked{
  border-color: var(--accent);
  box-shadow: inset 4px 0 0 var(--accent), 0 0 0 1px var(--accent-line);
  background: linear-gradient(180deg, var(--accent-soft), transparent 60%), var(--surface);
}
.playrow.is-asked > .playrow__summary::after{
  content: "You were sent here";
  grid-column: 1 / -1;
  font-size: .84rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent);
}
.playrow__summary{
  display:grid; grid-template-columns:8.5rem 1fr auto; gap:.9rem; align-items:baseline;
  padding:.55rem .8rem; cursor:pointer; list-style:none;
}
.playrow__summary::-webkit-details-marker{ display:none; }
.playrow__summary:hover{ background:var(--surface-2); }
.playrow__event{ font-weight:700; font-size:var(--step-small); }
.playrow__desc{ color:var(--ink-soft); font-size:var(--step-small); }
.playrow__tail{ display:flex; gap:.7rem; align-items:baseline; font-family:var(--mono); font-size:var(--step-label); color:var(--ink-faint); }
.playrow__score{ color:var(--accent-2); font-weight:700; }
.playrow__body{ display:grid; grid-template-columns:auto 1fr; gap:1.2rem; padding:.3rem .8rem 1rem; align-items:start; }
.playrow__matchup{ margin:0 0 .6rem; font-size:var(--step-small); }
.playrow__state{ color:var(--ink-faint); font-family:var(--mono); }
@media (max-width:760px){
  .playrow__summary{ grid-template-columns:1fr; gap:.2rem; }
  .playrow__body{ grid-template-columns:1fr; }
}

.game-empty{ background:var(--surface); border:1px dashed var(--line); border-radius:var(--radius); padding:1.4rem; }
.game-empty__title{ margin:0 0 .4rem; font-weight:700; }
.game-empty__body{ margin:0; color:var(--ink-soft); font-size:var(--step-small); }

/* The door from a scoreboard card into the game itself. */
.score__into{
  display:block; margin-top:.6rem; padding-top:.55rem; border-top:1px solid var(--line-soft);
  color:var(--ink-soft); font-size:var(--step-label); text-decoration:none;
  text-transform:uppercase; letter-spacing:.06em; font-weight:700;
}
.score__into:hover{ color:var(--accent); }

/* ---------------------------------------------------------------------------
   Travel ball: three sanctioning bodies side by side.

   The card is a comparison, so the layout is a comparison. Three columns at
   full width, stacking to one on a phone, because the thing a parent needs to
   see at a glance is that the three columns do not say the same thing.
   --------------------------------------------------------------------------- */

.card-sanctions,
.card-bat-standards,
.card-bat-model,
.card-pitching-plan {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sanction-block { display: flex; flex-direction: column; gap: 12px; }
.sanction-block + .sanction-block {
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.sanction-headline {
  font-size: 0.95rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--ink);
}

.sanction-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 860px) {
  .sanction-cols { grid-template-columns: 1fr; }
}

.sanction-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
}
.sanction-col.org-usssa { border-left-color: #d64545; }
.sanction-col.org-pg { border-left-color: #2f7fd4; }
.sanction-col.org-aau { border-left-color: #d98a24; }

.sanction-org {
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
}
.sanction-summary { font-size: 0.9rem; line-height: 1.5; }
.sanction-detail {
  margin: 0;
  padding-left: 18px;
  font-size: 0.82rem;
  line-height: 1.5;
  opacity: 0.85;
}
.sanction-detail li { margin: 4px 0; }

.sanction-caveat {
  font-size: .84rem;
  line-height: 1.45;
  opacity: 0.65;
  font-style: italic;
}

.sanction-aside,
.sanction-varies,
.sanction-override {
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--surface-2);
}
.sanction-aside-title {
  font-weight: 700;
  font-size: .84rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.8;
  margin-bottom: 6px;
}
.sanction-aside-line {
  font-size: 0.85rem;
  line-height: 1.55;
  margin: 4px 0;
  opacity: 0.9;
}

/* The practical block. It is the thing that makes this more than a rulebook
   lookup, so it reads like a person talking rather than like a table. */
.coaches-read {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
}
.coaches-read-title {
  font-weight: 700;
  font-size: .84rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.8;
  margin-bottom: 8px;
}
.coaches-read-line {
  font-size: 0.88rem;
  line-height: 1.6;
  margin: 8px 0;
}

.standards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.standard-cell {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface-2);
}
.standard-name { font-weight: 700; margin-bottom: 8px; }
.standard-row { display: flex; gap: 8px; margin: 6px 0; font-size: 0.83rem; line-height: 1.45; }
.standard-key {
  flex: 0 0 96px;
  opacity: 0.65;
  text-transform: uppercase;
  font-size: .84rem;
  letter-spacing: 0.05em;
  padding-top: 2px;
}
.standard-val { flex: 1; }

.drop-table { display: flex; flex-direction: column; overflow-x: auto; }
.drop-row {
  display: grid;
  grid-template-columns: 90px repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.82rem;
  line-height: 1.45;
  min-width: 640px;
}
.drop-head {
  font-weight: 700;
  text-transform: uppercase;
  font-size: .84rem;
  letter-spacing: 0.05em;
  opacity: 0.7;
}

.bat-verdict {
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.92rem;
}
.bat-verdict-hit { background: rgba(214, 69, 69, 0.14); border-left: 3px solid #d64545; }
.bat-verdict-clear { background: rgba(74, 168, 108, 0.12); border-left: 3px solid #4aa86c; }

/* ---------- Last Pitch: the questions, picked rather than typed (Sept 5) ----------
   A chip row and an answer. The panel carries the accent because it is the
   part of the page you act on rather than read, and the subject strip sits
   above the chips so it is always obvious which pitch is being talked about:
   a question with an invisible subject is how somebody ends up reading a
   confident paragraph about the wrong pitch. */
.askpanel{
  background:var(--surface); border:1px solid var(--accent-line); border-radius:var(--radius-lg);
  padding:1.1rem 1.3rem 1.3rem; margin-bottom:1.6rem;
}
.askpanel__head{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; margin-bottom:.9rem; }
.askpanel__title{ margin:0; font-size:1.1rem; letter-spacing:-.01em; }
.askpanel__tabs{ display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.askpanel__tab{
  appearance:none; border:0; background:none; color:var(--ink-soft); cursor:pointer;
  font:inherit; font-size:var(--step-label); font-weight:700; padding:.34rem .85rem;
  text-transform:uppercase; letter-spacing:.05em;
}
.askpanel__tab.is-on{ background:var(--accent); color:var(--accent-ink); }
.askpanel__hint{ margin:.7rem 0 0; color:var(--ink-faint); font-size:var(--step-label); }
.askpanel__empty{ margin:0; color:var(--ink-soft); font-size:var(--step-small); }
.askpanel__waiting{ margin:1rem 0 0; color:var(--ink-faint); font-size:var(--step-small); }

.asksubject{
  display:grid; grid-template-columns:auto 1fr; gap:.2rem .7rem; align-items:baseline;
  background:var(--surface-2); border-radius:var(--radius-sm); padding:.6rem .8rem; margin-bottom:.9rem;
}
.asksubject__dot{
  width:13px; height:13px; border-radius:50%; align-self:center;
  background:var(--fam,var(--pitch-other)); border:2px solid var(--fam,var(--pitch-other));
}
.asksubject__dot.pitchdot--ball{ background:none; }
.asksubject__line{ margin:0; font-size:var(--step-small); }
.asksubject__who{ grid-column:2; margin:0; color:var(--ink-faint); font-size:var(--step-label); }
.asksubject__back{
  grid-column:2; justify-self:start; margin-top:.35rem; appearance:none; background:none;
  border:0; border-bottom:1px solid var(--accent-line); color:var(--accent); cursor:pointer;
  font:inherit; font-size:var(--step-label); padding:0 0 1px;
}

.askchips{ display:flex; flex-wrap:wrap; gap:.45rem; }
.askchip{
  appearance:none; cursor:pointer; font:inherit; font-size:var(--step-small);
  background:var(--surface-2); color:var(--ink); border:1px solid var(--line);
  border-radius:999px; padding:.4rem .85rem;
}
.askchip:hover{ border-color:var(--accent-line); }
.askchip.is-on{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:700; }

.countgrid{ display:grid; grid-template-columns:repeat(3, 3.4rem); gap:.35rem; margin:.9rem 0; }
.countgrid__cell{
  appearance:none; cursor:pointer; font:inherit; font-family:var(--mono); font-weight:700;
  background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:.4rem 0;
}
.countgrid__cell:hover{ border-color:var(--accent-line); color:var(--ink); }
.countgrid__cell.is-on{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.askpicker{ display:flex; gap:.6rem; align-items:center; }
.askpicker__label{ display:inline-flex; gap:.5rem; align-items:center; color:var(--ink-faint); font-size:var(--step-label); text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
.askpicker__select{
  font:inherit; font-size:var(--step-small); background:var(--surface-2); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:.35rem .6rem;
}

.askpanel__answer:not(:empty){ margin-top:1.1rem; border-top:1px solid var(--line-soft); padding-top:1rem; }
.askanswer__lede{ margin:0 0 .7rem; font-size:1.12rem; line-height:1.5; color:var(--ink); }
.askanswer__para{ margin:0 0 .6rem; color:var(--ink-soft); line-height:1.6; max-width:74ch; }
.askanswer__source{ margin:.6rem 0 0; color:var(--ink-faint); font-size:var(--step-label); }

/* A pitch row is a button now, so it has to stop looking like one. The border
   is the part that gives it away: .pitchrow only ever sets a left edge, so the
   other three sides were still the browser's own button outline. */
button.pitchrow{
  appearance:none; font:inherit; width:100%; text-align:left; cursor:pointer;
  font-family:var(--mono); font-size:var(--step-small);
  border:0; border-left:3px solid var(--fam,var(--pitch-other));
}
button.pitchrow:hover{ outline:1px solid var(--accent-line); }
.pitchdot[role="button"]{ cursor:pointer; }

/* ============================================================
   SEPT 5, LATE: THE FIXES ROUND
   ============================================================ */

/* ---------- The Tools/Games tab ----------
   It was a purple-to-blue gradient pill sitting next to three plain text
   tabs, which read as a badge somebody stuck on the header rather than as
   part of it, and the blurb underneath went unreadable against it. It is
   still drawn differently from the three league tabs, because it is a
   different kind of thing, but it is drawn differently the way the rest of
   this site draws things: a quiet surface, a hairline, and the accent
   reserved for the one that is actually current. */
.tab--tools .tab__label{ color: var(--ink); }
.tab--tools .tab__blurb{ color: var(--ink-faint); }

/* ---------- No browser-blue anywhere ----------
   A link that inherits the user agent's blue is the one thing that makes a
   dark, carefully colored page look like an unstyled document. Every link
   on this site is styled by its own component; this is the floor under all
   of them so a new one can never arrive underlined and blue. */
a{ color: inherit; text-decoration: none; }
a:hover{ color: inherit; }
a:visited{ color: inherit; }
.rich-text a,
.answer__prose a,
.answer__lede a{
  color: var(--ink);
  border-bottom: 1px solid var(--accent-line);
  padding-bottom: 1px;
}
.rich-text a:hover,
.answer__prose a:hover,
.answer__lede a:hover{ border-bottom-color: var(--accent); }

/* ---------- The answer, as a piece of this site ----------
   It was a headline at 2.6vw, which on a wide monitor is nearly fifty
   pixels, followed by naked paragraphs on the page background. At that size
   two sentences fill the screen and the result reads like a slide, not like
   an answer from a baseball site. The lede is now a card with a rule down
   its left edge, sized to be read rather than projected, and the prose sits
   in a card of its own so the whole answer is made of the same material as
   every other panel on the site. */
.answer__lede{
  margin: 0 0 18px;
  padding: 16px 20px 16px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.15vw, 1.28rem);
  line-height: 1.42;
  letter-spacing: -.008em;
  color: var(--ink);
  max-width: 92ch;
}
.answer__lede p{ margin: 0 0 .5em; }
.answer__lede p:last-child{ margin-bottom: 0; }
.answer__lede strong{ font-weight: 800; }

.answer__prose{
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.answer__prose > :first-child{ margin-top: 0; }
.answer__prose > :last-child{ margin-bottom: 0; }
.answer__prose p{
  max-width: 74ch;
  margin: 0 0 .85em;
  font-size: .955rem;
  line-height: 1.62;
  color: var(--ink-soft);
}
.answer__prose h3,
.answer__prose h4{
  margin: 1.3em 0 .45em; font-family: var(--display);
  font-size: 0.88rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-faint); font-weight: 700;
}
.answer__prose .rich-list{ margin: 0 0 .9em; padding-left: 1.15em; }
.answer__prose .rich-list li{ margin: 0 0 .35em; color: var(--ink-soft); line-height: 1.55; }

/* ---------- The travel front ---------- */

.orggrid{ display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.orgcard{
  padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); border-top: 3px solid var(--org, var(--accent));
}
.orgcard--usssa{ --org: #d8563f; }
.orgcard--pg{ --org: #3f7fd8; }
.orgcard__name{ margin: 0; font-family: var(--display); font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }
.orgcard__rank{ margin: 6px 0 0; font-size: 0.92rem; color: var(--ink-soft); line-height: 1.5; }
.orgcard__edition{ margin: 8px 0 0; font-size: 0.84rem; color: var(--ink-faint); font-family: var(--mono); }
.panel-block__foot{ margin: 14px 0 0; font-size: 0.88rem; color: var(--ink-faint); line-height: 1.55; max-width: 88ch; }

.agecards{ display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
.agecard{
  display: flex; flex-direction: column; gap: 7px;
  padding: 14px 15px 13px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface);
  transition: border-color .15s ease, transform .15s ease;
}
.agecard:hover{ border-color: var(--accent-line); transform: translateY(-1px); }
.agecard__head{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.agecard__age{ font-family: var(--display); font-size: 1.5rem; font-weight: 900; letter-spacing: -.03em; color: var(--ink); }
.agecard__field{ font-family: var(--mono); font-size: 0.84rem; color: var(--ink-faint); white-space: nowrap; }
.agecard__read{ margin: 0; font-size: 0.9rem; line-height: 1.48; color: var(--ink-soft); flex: 1; }
.agecard__go{ font-size: 0.84rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); font-weight: 700; }
.agecard:hover .agecard__go{ color: var(--accent); }

a.topiccard{ display: block; transition: border-color .15s ease, transform .15s ease; }
a.topiccard:hover{ border-color: var(--accent-line); transform: translateY(-1px); }
.topiccard--ask{ border-style: dashed; }

/* ---------- A travel age or topic page ---------- */

.crumb{ display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 0.88rem; color: var(--ink-faint); }
.crumb__back{ color: var(--ink-soft); border-bottom: 1px solid var(--line); padding-bottom: 1px; }
.crumb__back:hover{ color: var(--ink); border-bottom-color: var(--accent); }
.crumb__here{ color: var(--ink); font-weight: 600; }

.agerail{ display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 22px; }
.agerail__age{
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-soft);
  font-family: var(--mono); font-size: 0.88rem; font-weight: 700;
}
.agerail__age:hover{ color: var(--ink); border-color: var(--accent-line); }
.agerail__age.is-here{ background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.travelcards{ display: grid; gap: 14px; }

.eventoverride{
  margin: 22px 0 0; padding: 16px 18px;
  border: 1px solid var(--accent-line); border-radius: var(--radius);
  background: var(--accent-soft);
}
.eventoverride__head{ margin: 0; font-family: var(--display); font-size: 1.02rem; font-weight: 800; letter-spacing: -.015em; }
.eventoverride__list{ margin: 9px 0 0; padding-left: 1.1em; }
.eventoverride__list li{ margin: 0 0 .35em; font-size: 0.92rem; color: var(--ink-soft); line-height: 1.52; }
.eventoverride__so{ margin: 10px 0 0; font-size: 0.92rem; font-weight: 650; color: var(--ink); }

/* ---------- The game page, second pass ---------- */

/* The batter and the pitcher, with faces.
   Two names on a line was the least informative row on a page about a game
   that is on right now. */
.face{
  width: 62px; height: 62px; flex: none; border-radius: 50%;
  overflow: hidden; background: var(--surface-2);
  border: 1px solid var(--line); display: grid; place-items: center;
}
.face img{ width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.face--blank::after{
  content: ""; width: 26px; height: 26px; border-radius: 50%;
  background: var(--line);
}

.nowpanel__matchup{
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.1rem; margin: 1.1rem 0 1.2rem;
}
.matchup__side{ display: flex; align-items: center; gap: .8rem; min-width: 0; }
.matchup__text{ display: grid; gap: 1px; min-width: 0; }
.matchup__role{
  font-size: var(--step-label); text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-faint); font-weight: 700;
}
.matchup__name{ margin: 0; font-family: var(--display); font-size: 1.14rem; font-weight: 750; letter-spacing: -.02em; }
.matchup__hand{ font-size: 0.86rem; color: var(--ink-soft); font-weight: 600; }
.matchup__vs{
  font-family: var(--display); font-size: 0.86rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint);
}
@media (max-width: 620px){ .matchup__vs{ display: none; } }

/* The situation, at the size somebody glancing at the page needs it.
   The count is the biggest number on the panel and the bags are drawn to be
   read across a room, because those are the two things a person looking at a
   live game is actually looking for. */
.nowpanel__sit--big{
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.6rem;
}
.sitcell{ display: grid; justify-items: center; gap: 6px; }
.sitcell__label{
  font-size: 0.84rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-faint); font-weight: 700;
}
.sitcell__inning{ font-family: var(--display); font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.sitcell__count{
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 2.6rem; font-weight: 700; line-height: 1; letter-spacing: -.02em;
  color: var(--ink);
}
.nowpanel.is-live .sitcell__count{ color: var(--accent); }
/* Bigger bags and bigger dots, on this panel only: the scoreboard's small
   ones are right at scoreboard size and too small at the size a single game
   deserves. */
.nowpanel__sit--big .bases{ width: 56px; height: 56px; }
.nowpanel__sit--big .bases__bag{ width: 19px; height: 19px; border-width: 2px; }
.nowpanel__sit--big .bases__bag--2{ top: 1px; left: 18px; }
.nowpanel__sit--big .bases__bag--3{ top: 19px; left: 1px; }
.nowpanel__sit--big .bases__bag--1{ top: 19px; left: 35px; }
.nowpanel__sit--big .outs{ gap: 7px; }
.nowpanel__sit--big .outs__dot{ width: 13px; height: 13px; border-width: 2px; }

/* A substitution is not a plate appearance, so it is not drawn as one. */
.playaction{
  display: flex; align-items: baseline; gap: .7rem;
  padding: .45rem .2rem; margin: 0 0 2px;
  border-left: 2px solid var(--line); padding-left: .8rem;
  color: var(--ink-faint); font-size: 0.9rem;
}
.playaction__mark{
  font-size: 0.84rem; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 800; color: var(--ink-faint);
}
.playaction__text{ color: var(--ink-soft); }

.playrow.is-atplate{ border-color: var(--accent-line); }
.playrow__event.is-atplate{ color: var(--accent); }

/* The picked pitch. The dot itself is untouched: the ring around it is a
   separate shape the script draws at a size no stylesheet can reach. */
.pitchdot.is-picked .pitchdot__n{ font-weight: 800; }

/* The ask panel, which has to survive an answer of any length arriving in it
   without pushing anything sideways. */
.askpanel, .askpanel *{ min-width: 0; }
.askpanel{ overflow-wrap: anywhere; }
.askanswer{ display: grid; gap: .55rem; }
.askanswer__lede{
  margin: 0; font-size: 1.04rem; line-height: 1.5; color: var(--ink);
  font-weight: 650; max-width: 76ch;
}
.askanswer__para{ margin: 0; color: var(--ink-soft); line-height: 1.6; max-width: 76ch; font-size: .93rem; }
.askanswer__source{ margin: .3rem 0 0; color: var(--ink-faint); font-size: var(--step-label); }
.askchips{ row-gap: .5rem; }

/* Two organizations, two columns. The grid was cut for three and left a
   third of the card empty the moment one of them went away. */
.sanction-cols{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* An answer with no cards uses the whole width rather than leaving the
   evidence column standing empty beside it. */
@media (min-width: 1000px){
  .answer__body--prose{ grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   THE PITCH PICTURE, PINNED AND HOVERABLE
   ============================================================ */

/* THE GEOMETRY IS NAILED DOWN HERE AND NOWHERE ELSE.
   In SVG2 `r` and `stroke-width` are CSS properties, which means any rule
   anywhere in this stylesheet that sets either one and happens to match a
   dot will resize every dot on the picture. A circle of radius .19 carrying
   a stroke two units wide is a disc that swallows the entire strike zone,
   which is exactly what a plot looks like when that happens. These are the
   last word on both, the elements carry them as attributes as well, and the
   outcome and family rules below are allowed to change color and nothing
   else. */
/* THIS STYLESHEET NO LONGER SIZES A DOT. It used to restate `r` and
   `stroke-width` here to win the cascade, which meant the geometry lived in
   two files and a fourth rule could always be added that beat both. The
   script writes both inline and marked important on every circle it draws,
   and selecting a pitch no longer touches the dot at all: it draws its own
   ring, at its own radius, behind it. Nothing in here may set `r`,
   `stroke-width` or `font-size` on anything inside .zone. */
.zone{ max-width: 100%; height: auto; }
/* The selection ring. Present on every dot, visible on one. This stylesheet
   may change its color and its opacity; its size is stated in the script and
   is not expressible in CSS at all. */
.pitchdot__ring{ fill: var(--accent); opacity: 0; transition: opacity .12s ease; }
.pitchdot.is-picked .pitchdot__ring{ opacity: 1; }
.pitchdot[role="button"]:hover .pitchdot__ring,
.pitchdot[role="button"]:focus-visible .pitchdot__ring{ opacity: .45; }

/* The picked pitch, on the picture. A ring plus a slight lift, because a
   color change alone is invisible on a plot where every dot is a different
   color already. */
.pitchdot{ transition: opacity .15s ease; }
.zone:hover .pitchdot:not(:hover):not(.is-picked){ opacity: .55; }
.zone:hover .pitchdot.is-picked{ opacity: 1; }

/* ---------- the hover card ---------- */
.pitchtip{
  position: fixed; z-index: 90; pointer-events: none;
  min-width: 208px; max-width: 300px;
  padding: 11px 13px 10px;
  background: var(--surface); border: 1px solid var(--accent-line);
  border-radius: var(--radius); box-shadow: var(--shadow-lift);
}
.pitchtip[hidden]{ display: none !important; }
.pitchtip__head{ display: flex; align-items: center; gap: .5rem; }
.pitchtip__dot{
  width: 12px; height: 12px; border-radius: 50%; flex: none;
  background: var(--fam, var(--pitch-other)); border: 2px solid var(--fam, var(--pitch-other));
}
.pitchtip__dot.pitchdot--ball{ background: none; }
.pitchtip__name{ font-weight: 750; font-size: .93rem; letter-spacing: -.01em; }
.pitchtip__count{
  margin-left: auto; font-family: var(--mono); font-weight: 800;
  font-size: 1.05rem; font-variant-numeric: tabular-nums; color: var(--accent);
}
.pitchtip__grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(52px, 1fr));
  gap: 6px; margin: 9px 0 8px;
}
.pitchtip__cell{
  display: grid; gap: 1px; padding: 5px 6px;
  background: var(--surface-2); border-radius: var(--radius-sm);
}
.pitchtip__value{ font-family: var(--mono); font-weight: 700; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.pitchtip__label{ font-size: 0.84rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-faint); font-weight: 700; }
.pitchtip__call{ margin: 0; font-size: 0.9rem; font-weight: 650; color: var(--ink); }
.pitchtip__read{ margin: 5px 0 0; font-size: 0.88rem; line-height: 1.45; color: var(--ink-soft); }
.pitchtip__who{ margin: 7px 0 0; font-size: 0.84rem; color: var(--ink-faint); }
.pitchtip__more{
  margin: 6px 0 0; font-size: 0.84rem; text-transform: uppercase;
  letter-spacing: .09em; color: var(--accent); font-weight: 700;
}

/* ============================================================
   THE COUNT, EVERYWHERE, AT THE SIZE IT IS WORTH
   The count decides what every other number on the page means, and it was
   being set in body type in a row of body type on all three surfaces that
   carry it. Balls and strikes are drawn apart, in mono, with the dash
   dimmed, so the figure reads as a scoreboard rather than as text.
   ============================================================ */

.pitchrow__count{
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-weight: 800; font-size: 1rem; letter-spacing: -.02em; color: var(--ink);
  display: inline-flex; align-items: baseline; gap: .5px;
}
.pitchrow__count b{ font-weight: 800; font-style: normal; }
.pitchrow__count i{ font-style: normal; color: var(--ink-faint); padding: 0 .5px; }
.pitchrow--head .pitchrow__count{ font-size: var(--step-label); font-weight: 700; }
.pitchrow__shapeSep{ color: var(--ink-faint); }

/* A picked row in the pitch list, so clicking a dot lights its row too. */
.pitchrow.is-picked{
  background: var(--accent-soft);
  outline: 1px solid var(--accent-line);
}
.pitchrow.is-picked .pitchrow__count{ color: var(--accent); }

/* The count an at-bat ended on, on every row of the log. */
.playrow__count{
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-weight: 800; font-size: .95rem; color: var(--ink-soft);
  display: inline-flex; align-items: baseline;
}
.playrow__count i{ font-style: normal; color: var(--ink-faint); padding: 0 1px; }
.playrow.is-atplate .playrow__count{ color: var(--accent); }

/* On a scoreboard card. */
.live__countNum{ display: inline-flex; align-items: baseline; font-size: 1.45rem; }
.live__countNum b{ font-weight: 800; font-style: normal; }
.live__countDash{ font-style: normal; color: var(--ink-faint); padding: 0 1px; }

/* On the Last Pitch subject line, where it was buried mid-sentence. */
.asksubject{ grid-template-columns: auto auto 1fr; }
.asksubject.is-picked{ outline: 1px solid var(--accent-line); }
.asksubject__count{
  grid-column: 2; grid-row: 1 / -1; align-self: center;
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding-right: .2rem;
}
.asksubject__countFig{
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-weight: 800; font-size: 1.7rem; line-height: 1; letter-spacing: -.03em;
  color: var(--accent); display: inline-flex; align-items: baseline;
}
.asksubject__count i{ font-style: normal; color: var(--ink-faint); padding: 0 1px; }
/* Says whose count it is. Without it the figure reads as the live count on
   the scoreboard beside it, which is a different number the moment an at-bat
   ends. */
.asksubject__countCap{
  max-width: 6.5rem; text-align: center; color: var(--ink-faint);
  font-size: 0.84rem; line-height: 1.15; text-transform: uppercase; letter-spacing: .05em;
}
.asksubject__who, .asksubject__back,
.asksubject__result, .asksubject__next{ grid-column: 3; }

/* What the pitch did, given its own line. */
.asksubject__result{
  margin: .15rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  font-size: .95rem; font-weight: 700; color: var(--ink);
}
.asksubject__result.is-ended .asksubject__call{ color: var(--ink-soft); font-weight: 600; }
.asksubject__ended{
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--surface); border: 1px solid var(--accent-line); border-radius: 999px;
  padding: .12rem .6rem; font-size: 0.9rem; font-weight: 800; letter-spacing: -.01em;
}
.asksubject__ended::before{
  content: "Ended the at-bat";
  font-size: 0.84rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- The Last Pitch subject, as four readable rows ----------
   It used to be four sentences stacked in almost the same type: the pitch,
   the matchup, the result, and a note about who is up now. Between pitches
   nobody reads four sentences. Each row is now shaped so the thing it
   carries can be picked off it without reading the rest. */
.asksubject__line{
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
}
.asksubject__name{
  font-weight: 800; letter-spacing: -.015em; font-size: 1.25rem; line-height: 1.1;
}
/* The velocity is a figure with its unit under it, not two words in a row. */
.asksubject__velo{
  display: inline-flex; align-items: baseline; gap: .18rem;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: .1rem .55rem;
}
.asksubject__veloNum{ font-weight: 800; font-size: 1.02rem; line-height: 1.2; color: var(--ink); }
.asksubject__veloUnit{
  font-style: normal; font-size: 0.8rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint);
}
/* Where it fell in the at-bat, quietly. */
.asksubject__seq{
  font-size: 0.8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-faint);
}

/* Pitcher, batter, inning: three named things rather than one string. */
.asksubject__who{
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin: .2rem 0 0;
}
.asksubject__whoName{ color: var(--ink); font-weight: 700; font-size: .92rem; }
.asksubject__whoJoin{ color: var(--ink-faint); font-size: 0.88rem; }
.asksubject__whoWhen{
  margin-left: .1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: .08rem .5rem;
  font-size: 0.8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-soft);
}

/* The result, labeled, so the line is not mistaken for more of the matchup. */
.asksubject__resultCap{
  font-size: 0.8rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-faint);
}

/* Who is up NOW, set apart by a rule so it reads as a note about the panel
   rather than as another fact about the pitch. */
.asksubject__next{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .5rem;
  margin: .5rem 0 0; padding-top: .45rem;
  border-top: 1px dashed var(--line);
  color: var(--ink-soft); font-size: 0.88rem;
}
.asksubject__nextCap{
  font-size: 0.8rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-faint);
}
.asksubject__nextName{ color: var(--ink); font-weight: 700; font-size: .92rem; }
.asksubject__nextNote{ flex: 1 1 12rem; color: var(--ink-faint); }

/* ---------- Last Pitch, at a readable size ----------
   The whole panel was set a step below the page around it: a subject line in
   small type, chips in small type, and the answer itself, which is the thing
   the panel exists to deliver, in a size that made it look like a caption
   under the strike zone rather than the point of the section. */
.askpanel{ padding: 1.3rem 1.5rem 1.5rem; }
.askpanel__title{ font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.askpanel__tab{ font-size: 0.84rem; padding: .42rem 1rem; }

.asksubject{ padding: .85rem 1rem; gap: .25rem .9rem; }
.asksubject__dot{ width: 16px; height: 16px; }
.asksubject__line{ font-size: 1.05rem; }
.asksubject__line strong{ font-weight: 800; letter-spacing: -.015em; }
.asksubject__who{ font-size: 0.88rem; text-transform: none; letter-spacing: 0; }
.asksubject__back{ font-size: 0.88rem; }

.askchip{ font-size: .92rem; padding: .5rem 1rem; }
.askpanel__hint{ font-size: 0.88rem; }

.askanswer__lede{ font-size: 1.2rem; line-height: 1.45; font-weight: 700; }
.askanswer__para{ font-size: 1.02rem; line-height: 1.62; }
.askanswer__source{ font-size: 0.86rem; }
.askpanel__waiting{ font-size: 1rem; }

/* The count picker on the Any Count side, sized to match. */
.countgrid{ grid-template-columns: repeat(3, 4rem); gap: .45rem; }
.countgrid__cell{ font-size: 1.05rem; padding: .55rem 0; }
.askpicker__select{ font-size: .95rem; padding: .45rem .7rem; }

/* Text that acts as a link is ink with an accent underline, never accent
   colored text. Colored text on its own reads as the browser's own blue
   whatever hue it actually is, which is the thing that had to go. */
.asksubject__back,
.answer__hubLink{
  color: var(--ink);
  border-bottom: 1px solid var(--accent-line);
}
.asksubject__back:hover,
.answer__hubLink:hover{ color: var(--ink); border-bottom-color: var(--accent); }

/* The picked row in a pitch list, at the weight a selection needs. */
.pitchrow.is-picked{
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}
.pitchrow.is-picked .pitchrow__type{ font-weight: 700; }

/* ---------- The figure strip on a pitch answer ----------
   The measurements used to be welded into the opening sentence, which is
   both the least readable arrangement of them and the least useful: nobody
   scans a sentence for a velocity. They are tiles now, drawn the way this
   site draws numbers everywhere else, and the prose underneath is free to
   say what they mean rather than what they are. */
.figstrip{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 8px; margin: 0 0 1.1rem;
}
.figstrip__cell{
  padding: 11px 13px 10px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius); border-top: 2px solid var(--accent-line);
}
.figstrip__value{
  margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 1.5rem; font-weight: 700; line-height: 1.05; letter-spacing: -.03em;
  color: var(--ink);
}
.figstrip__unit{
  font-size: 0.84rem; font-weight: 600; letter-spacing: 0;
  color: var(--ink-faint); margin-left: 3px;
}
.figstrip__label{
  display: block; margin-top: 5px;
  font-size: 0.84rem; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 800; color: var(--ink-soft);
}
.figstrip__note{
  display: block; margin-top: 2px;
  font-size: 0.84rem; color: var(--ink-faint); line-height: 1.3;
}

/* ---------- The answer, as a component ----------
   A block of prose under a row of tiles is what every chat box on the
   internet looks like, and it is the one shape that makes a reader assume a
   machine wrote it before reading a word. So the answer is built the way the
   rest of this site is built: a verdict at headline weight with the tone in
   color, chips saying what is true of this particular pitch, the moment set
   in mono like a scoreboard, and then the reading on the left with the
   measurements and the comparisons down the right. */

.askanswer{ gap: 0; }
.askanswer__prose{ display: grid; gap: .6rem; }
.askrail{ display: grid; gap: 10px; align-content: start; }

/* The verdict. The bar down the left is the tone, which is the fastest thing
   on the panel to read and the only thing on it that is visible from across
   a room. */
.askverdict{
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1rem;
  justify-content: space-between;
  padding: 0 0 .7rem .85rem; margin: 0 0 .7rem;
  border-left: 3px solid var(--accent);
  border-bottom: 1px solid var(--line-soft);
}
.askverdict__label{
  margin: 0; font-size: 1.22rem; font-weight: 800; letter-spacing: -.02em;
  line-height: 1.2; color: var(--ink);
}
.askverdict--good{ border-left-color: var(--pos); }
.askverdict--bad{ border-left-color: var(--neg); }
.askverdict--good .askverdict__label{ color: var(--pos); }
.askverdict--bad .askverdict__label{ color: var(--neg); }

.asktags{ display: flex; flex-wrap: wrap; gap: 5px; }
.asktag{
  display: inline-block; padding: 3px 8px 2px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-2);
  font-size: 0.84rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft); white-space: nowrap;
}

/* The moment, set the way a scoreboard sets it: mono, tabular, small, and
   read as a strip rather than as a sentence. */
.askmoment{
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 .5rem;
  margin: 0 0 1rem;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 0.84rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint);
}
.askmoment__cell + .askmoment__cell::before{
  content: "·"; margin-right: .5rem; color: var(--line);
}

/* A comparison, drawn. The pale band is the middle four fifths of the league
   on that pitch, the tick is the league's own average, and the dot is this
   pitch. Two numbers on a track are understood before a sentence about them
   is finished, which is the whole reason the prose no longer spends a clause
   on each one. */
.askmeter{
  padding: 10px 12px 9px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.askmeter__top{
  display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
  margin-bottom: 7px;
}
.askmeter__label{
  font-size: 0.84rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-soft); line-height: 1.25;
}
.askmeter__value{
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: .95rem; font-weight: 700; color: var(--ink); white-space: nowrap;
}
.askmeter__track{
  position: relative; height: 8px; border-radius: 999px;
  background: var(--surface-3); border: 1px solid var(--line-soft);
}
.askmeter__band{
  position: absolute; top: 0; bottom: 0;
  background: var(--accent-soft); border-radius: 999px;
}
.askmeter__mark{
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  background: var(--ink-faint); border-radius: 2px; transform: translateX(-1px);
}
.askmeter__mark--his{
  background: var(--accent-2);
}
.askmeter__dot{
  position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface-2);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px var(--accent-line);
}
.askmeter__foot{
  margin: 6px 0 0; font-size: 0.84rem; color: var(--ink-faint); line-height: 1.35;
}

/* The rail goes beside the reading on a screen wide enough for both, and
   under it on one that is not. A column of paragraphs with half the panel
   empty beside it is the layout that makes any answer look like a transcript,
   and this panel is a page component. */
@media (min-width: 1000px){
  .askanswer--split{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(215px, 285px);
    gap: 1.6rem;
    align-items: start;
  }
  .askanswer--split .askverdict,
  .askanswer--split .askmoment{ grid-column: 1 / -1; }
  .askanswer--split .askanswer__prose{ order: 1; }
  .askanswer--split .askrail{ order: 2; position: sticky; top: 14px; }
  .askanswer--split .figstrip{ grid-template-columns: 1fr; gap: 7px; margin: 0; }
  /* Stacked in a rail the tiles want to be wider than tall, so the value and
     the unit share a line with the label rather than sitting above it. */
  .askanswer--split .figstrip__cell{
    display: grid; grid-template-columns: auto 1fr; align-items: baseline;
    column-gap: 10px; padding: 9px 12px;
  }
  .askanswer--split .figstrip__value{ font-size: 1.35rem; }
  .askanswer--split .figstrip__label{ margin: 0; text-align: right; }
  .askanswer--split .figstrip__note{ grid-column: 1 / -1; margin-top: 1px; }
  /* The source line belongs at the bottom of the split, not at the top of it:
     a grid item spanning both columns lands in the first free row unless it
     is told otherwise. */
  .askanswer--split .askanswer__source{ order: 3; grid-column: 1 / -1; margin: .9rem 0 0; }
}

@media (max-width: 999px){
  .askrail{ margin-top: 1rem; }
  .figstrip{ margin: 0; }
}

/* A hoverable label in the tile rail underlines the word, not the whole cell. */
.figstrip__label.term{ display: inline-block; justify-self: end; width: auto; }

/* The card on a player's own page sits beside what it is for, rather than
   alone in the middle of a column, because a card with nothing next to it
   reads as decoration. */
.hub__cardHolder{ display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 26px; align-items: start; margin-top: 14px; }
.hub__cardSay p{ margin: 0 0 12px; max-width: 62ch; color: var(--ink-soft); line-height: 1.65; }
.hub__cardSay p:last-child{ margin-bottom: 0; }
@media (max-width: 720px){
  .hub__cardHolder{ grid-template-columns: 1fr; gap: 16px; }
  .sc--large .sc__turnable{ max-width: none; }
}

/* =======================================================================
   MLB The Show 26 cards
   -----------------------------------------------------------------------
   A card is a fixed rectangle that turns over. Everything below serves two
   rules: the card must not change size when it turns, because a wall of them
   would jump every time somebody clicked one; and the back must be readable at
   the size of the front, which means the back scrolls inside the card rather
   than growing past it.
   ======================================================================= */

.sc{ perspective: 1400px; }
.sc__turnable{
  display: block; width: 100%; aspect-ratio: 336 / 468;
  padding: 0; margin: 0; border: 0; background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
  border-radius: var(--radius);
}
.sc__turnable:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
.sc__inner{
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.2,.75,.2,1);
}
.sc.is-flipped .sc__inner{ transform: rotateY(180deg); }
.sc__face{
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: var(--radius); overflow: hidden;
}

/* -- the front ------------------------------------------------------- */
.sc__front{
  background: linear-gradient(160deg, var(--sc-tint, #2a3040), var(--surface) 70%);
  border: 1px solid var(--sc-edge, var(--line));
  box-shadow: var(--shadow-lift);
}
.sc__front.is-bronze  { --sc-tint: #4a3320; --sc-edge: #a9743f; }
.sc__front.is-silver  { --sc-tint: #2f3742; --sc-edge: #b9c2cd; }
.sc__front.is-gold    { --sc-tint: #4a3c14; --sc-edge: #e0b53c; }
.sc__front.is-diamond { --sc-tint: #143b4a; --sc-edge: #7fd8f7; }
/* One card in the whole file is Red Diamond, and it is the best player in
   baseball, so it gets a color rather than falling back to gray. */
.sc__front.is-reddiamond { --sc-tint: #4a1420; --sc-edge: #f77f9c; }
.sc__art{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .25s ease;
}
.sc__art.is-loaded{ opacity: 1; }
/* The drawn plate underneath is the fallback, so it is always painted and the
   artwork simply covers it when it arrives. */
.sc-plate{
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; padding: 16px; text-align: center;
}
.sc-plate__ovr{
  font-family: var(--display); font-weight: 800; font-size: 3rem;
  line-height: 1; color: var(--sc-edge, var(--ink)); letter-spacing: -.03em;
}
.sc-plate__name{ font-weight: 750; font-size: 1rem; line-height: 1.2; }
.sc-plate__pos{ font-size: 0.88rem; color: var(--ink-faint); letter-spacing: .04em; text-transform: uppercase; }
.sc__turn{
  position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 8px;
  font-size: 0.84rem; letter-spacing: .09em; text-transform: uppercase; text-align: center;
  color: #fff; background: linear-gradient(to top, rgba(0,0,0,.78), transparent);
  opacity: 0; transition: opacity .18s ease;
}
.sc__turnable:hover .sc__turn,
.sc__turnable:focus-visible .sc__turn{ opacity: 1; }

/* -- the back -------------------------------------------------------- */
.sc__back{
  transform: rotateY(180deg);
  background: var(--surface); border: 1px solid var(--line);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 12px 13px 14px;
  scrollbar-width: thin;
}
.sc-head{ display: flex; gap: 10px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.sc-head__ovr{
  flex: none; width: 46px; height: 46px; border-radius: 10px;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 1.35rem; letter-spacing: -.03em;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line);
}
.sc-head__ovr.is-bronze { color: #c79055; border-color: #a9743f; }
.sc-head__ovr.is-silver { color: #cfd6df; border-color: #b9c2cd; }
.sc-head__ovr.is-gold { color: #e6c05a; border-color: #e0b53c; }
.sc-head__ovr.is-diamond { color: #8fdcf7; border-color: #7fd8f7; }
.sc-head__ovr.is-reddiamond { color: #f79cb2; border-color: #f77f9c; }
.sc-head__who{ display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sc-head__name{ font-weight: 750; font-size: 1rem; line-height: 1.15; }
.sc-head__meta{ font-size: 0.84rem; color: var(--ink-soft); }
.sc-head__body{ font-size: 0.84rem; color: var(--ink-faint); }

.sc-headline{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin: 10px 0 4px; }
.sc-tile{ display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; background: var(--surface-2); border-radius: var(--radius-sm); }
.sc-tile__value{ font-family: var(--mono); font-weight: 700; font-size: 1.02rem; }
.sc-tile__label{ font-size: .84rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }

.sc-block{ margin-top: 13px; }
.sc-block__title{ margin: 0 0 2px; font-size: 0.9rem; font-weight: 700; letter-spacing: .01em; }
.sc-block__note{ margin: 0 0 7px; font-size: 0.84rem; line-height: 1.45; color: var(--ink-faint); }
.sc-rows{ display: flex; flex-direction: column; gap: 3px; }
.sc-row{ display: grid; grid-template-columns: 6.2em 1fr 2em; align-items: center; gap: 6px; }
.sc-row__label{ font-size: 0.8rem; color: var(--ink-soft); }
.sc-row__track{ height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.sc-row__fill{ display: block; height: 100%; border-radius: 3px; }
.sc-row__value{ font-family: var(--mono); font-size: 0.86rem; text-align: right; font-variant-numeric: tabular-nums; }
.sc-row__pct{ font-size: .84rem; color: var(--ink-faint); text-align: right; }

/* The five bands are the game's own, near enough: somebody who has seen a card
   before reads blue as elite without being told what the colors mean. They
   are scoped to the bar and the number, because "is-good" is far too common a
   word to let loose on a stylesheet this size. */
.sc-row__fill.is-weak  { background: #b34b45; }
.sc-row__fill.is-fair  { background: #b8823a; }
.sc-row__fill.is-good  { background: #b3ab3c; }
.sc-row__fill.is-great { background: #3ea36f; }
.sc-row__fill.is-elite { background: #3f8fd0; }
.sc-tile__value.is-weak{ color: #e08a84; }
.sc-tile__value.is-fair{ color: #e0b06a; }
.sc-tile__value.is-good{ color: #d8d06a; }
.sc-tile__value.is-great{ color: #56c691; }
.sc-tile__value.is-elite{ color: #62aef0; }

.sc-pitches{ display: flex; flex-direction: column; gap: 2px; font-family: var(--mono); }
.sc-pitches__row{ display: grid; grid-template-columns: 1fr 2.2em 2.2em 2.2em 2.6em 2.6em; gap: 4px; align-items: center; padding: 3px 5px; background: var(--surface-2); border-radius: 5px; }
.sc-pitches__row.is-head{ background: none; padding-bottom: 0; }
.sc-pitches__cell{ font-size: 0.8rem; text-align: right; font-variant-numeric: tabular-nums; }
.sc-pitches__row.is-head .sc-pitches__cell{ font-size: .84rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }
.sc-pitches__cell.is-name{ text-align: left; font-family: var(--body); font-size: 0.84rem; font-weight: 600; }
.sc-pitches__cell.is-grade{ font-weight: 700; }
.sc-pitches__cell.is-grade.is-weak{ color: #e08a84; }
.sc-pitches__cell.is-grade.is-fair{ color: #e0b06a; }
.sc-pitches__cell.is-grade.is-good{ color: #d8d06a; }
.sc-pitches__cell.is-grade.is-great{ color: #56c691; }
.sc-pitches__cell.is-grade.is-elite{ color: #62aef0; }

.sc-quirks{ display: flex; flex-direction: column; gap: 4px; }
.sc-quirk{ display: flex; flex-direction: column; padding: 5px 7px; background: var(--surface-2); border-radius: var(--radius-sm); border-left: 2px solid var(--accent-2); }
.sc-quirk__name{ font-size: 0.84rem; font-weight: 700; }
.sc-quirk__what{ font-size: 0.8rem; color: var(--ink-faint); line-height: 1.4; }

/* -- the read -------------------------------------------------------- */
.sc-block--read{ border-top: 1px solid var(--line); padding-top: 11px; }
.sc-read__row{ margin-bottom: 10px; }
.sc-read__head{ display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sc-read__label{ font-size: 0.84rem; font-weight: 700; }
.sc-read__verdict{ font-size: 0.84rem; letter-spacing: .04em; text-transform: uppercase; text-align: right; }
.sc-read__verdict.is-agrees{ color: var(--pos); }
.sc-read__verdict.is-leans{ color: var(--accent-2); }
.sc-read__verdict.is-disagrees{ color: var(--neg); }
.sc-read__verdict.is-unknown{ color: var(--ink-faint); }
.sc-read__scale{ position: relative; height: 7px; margin: 6px 0 5px; border-radius: 4px; background: var(--surface-3); }
.sc-read__mark{ position: absolute; top: -2px; width: 3px; height: 11px; border-radius: 2px; transform: translateX(-1.5px); }
.sc-read__mark.is-card{ background: var(--accent); }
.sc-read__mark.is-real{ background: var(--accent-2); }
.sc-read__words{ margin: 0; font-size: 0.84rem; line-height: 1.5; color: var(--ink-soft); }

.sc-link{
  display: inline-block; margin-top: 12px; font-size: 0.84rem; font-weight: 650;
  border-bottom: 1px solid var(--accent-line); padding-bottom: 1px;
}
.sc-fine{ margin: 10px 0 0; font-size: .84rem; line-height: 1.45; color: var(--ink-faint); }

/* -- the wall -------------------------------------------------------- */
.cardwall{ display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.cardcell{ display: flex; flex-direction: column; gap: 5px; }
.cardcell__name{ font-size: 0.9rem; font-weight: 650; line-height: 1.2; }
.cardcell__line{ font-size: 0.84rem; color: var(--ink-faint); }
.sc--large .sc__turnable{ max-width: 340px; }

.cardbar{ display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 16px 0 10px; }
.cardbar__group{ display: flex; gap: 7px; align-items: center; }
.cardbar__label{ font-size: 0.84rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.cardbar select, .cardbar input{
  font: inherit; font-size: 0.9rem; padding: 7px 10px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.cardbar input{ min-width: 200px; }
.cardbar select:focus-visible, .cardbar input:focus-visible{ outline: 2px solid var(--accent); outline-offset: 1px; }
.cardwall__count{ margin: 0 0 12px; font-size: 0.86rem; color: var(--ink-faint); }
.cardwall__more{
  display: block; margin: 22px auto 0; padding: 10px 22px; font: inherit; font-weight: 650;
  color: var(--ink); background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); cursor: pointer;
}
.cardwall__more:hover{ border-color: var(--accent-line); }

@media (prefers-reduced-motion: reduce){
  .sc__inner{ transition: none; }
  .sc__art{ transition: none; }
}
@media (prefers-color-scheme: light){
  .sc__front{ background: linear-gradient(160deg, var(--sc-tint, #dfe4ee), var(--surface) 70%); }
  .sc__front.is-bronze  { --sc-tint: #efdcc6; --sc-edge: #9a6533; }
  .sc__front.is-silver  { --sc-tint: #e4e8ee; --sc-edge: #8d97a5; }
  .sc__front.is-gold    { --sc-tint: #f4e6bd; --sc-edge: #b08e21; }
  .sc__front.is-diamond { --sc-tint: #d3ecf7; --sc-edge: #2f92b8; }
  .sc__front.is-reddiamond { --sc-tint: #f7d3dd; --sc-edge: #c04e70; }
  .sc-tile__value.is-weak{ color: #a5352f; }
  .sc-tile__value.is-fair{ color: #8a6113; }
  .sc-tile__value.is-good{ color: #776f10; }
  .sc-tile__value.is-great{ color: #1c7d4f; }
  .sc-tile__value.is-elite{ color: #1f6bb0; }
  .sc-pitches__cell.is-grade.is-weak{ color: #a5352f; }
  .sc-pitches__cell.is-grade.is-fair{ color: #8a6113; }
  .sc-pitches__cell.is-grade.is-good{ color: #776f10; }
  .sc-pitches__cell.is-grade.is-great{ color: #1c7d4f; }
  .sc-pitches__cell.is-grade.is-elite{ color: #1f6bb0; }
  .sc-head__ovr.is-bronze { color: #8a5a26; }
  .sc-head__ovr.is-silver { color: #5d6673; }
  .sc-head__ovr.is-gold { color: #8f7013; }
  .sc-head__ovr.is-diamond { color: #216e8c; }
  .sc-head__ovr.is-reddiamond { color: #a63a5a; }
}

/* Five tiles across a card two hundred pixels wide leaves forty pixels each,
   which is why the labels are short words and the tiles are allowed to shrink
   rather than push each other off the edge. */
.sc-tile{ min-width: 0; }
.sc-tile__label{ font-size: .84rem; letter-spacing: .02em; white-space: nowrap; }
.sc-tile__value{ font-size: .96rem; }
.sc-headline{ gap: 4px; }
.sc-head{ align-items: flex-start; }
.sc-link{ font-size: 0.84rem; font-weight: 600; color: var(--accent); }
.sc-read__verdict{ white-space: nowrap; }

/* No blue linked text anywhere on this site. A link is drawn with an accent
   rule under it and takes the color of the text around it, which is the floor
   rule the rest of the site already follows. */
.sc-link{ color: inherit; border-bottom: 1px solid var(--accent-line); }
.sc-link:hover{ border-bottom-color: var(--accent); }
/* "CONTACT" beside "POWER" in a fifth of a two hundred pixel card needs the
   letter spacing back off it. */
.sc-tile__label{ font-size: .84rem; letter-spacing: 0; }
.sc-loading{ margin: 14px 0 0; font-size: 0.84rem; color: var(--ink-faint); }
/* The read comes first on the back, so it needs the rule above it rather than
   the one the old position gave it. */
.sc-block--first{ border-top: 0; padding-top: 0; margin-top: 14px; }

/* ------------------------------------------------------------------
   THE BACK IS A SUMMARY NOW, AND THE REST IS A SHEET.

   The back used to hold every block on the card: 2,900 pixels of bars,
   pitch tables and quirks inside a window 210 wide and 293 tall on the
   wall. What that looked like was a bug, and it was the right call to
   name it one. The back keeps what fits on a playing card and the button
   at the bottom opens everything else over the page, where a bar has the
   width to be a bar.
   ------------------------------------------------------------------ */
/* On the wall every line has to earn its pixels: the summary is built to fit
   the card rather than to scroll inside it. */
.sc:not(.sc--large) .sc-head{ gap: 8px; }
.sc:not(.sc--large) .sc-head__ovr{ font-size: 1.15rem; }
.sc:not(.sc--large) .sc-head__name{ font-size: .98rem; line-height: 1.2; }
.sc:not(.sc--large) .sc-head__meta{ font-size: .84rem; }
.sc:not(.sc--large) .sc-tile__label{ font-size: .84rem; }
.sc:not(.sc--large) .sc-tile__value{ font-size: .92rem; }
.sc:not(.sc--large) .sc__back{ padding: 10px 10px 11px; }
.sc:not(.sc--large) .sc-head__ovr{ width: 38px; height: 38px; }
.sc:not(.sc--large) .sc-headline__cap{ font-size: .84rem; margin: 6px 0 3px; letter-spacing: .08em; }
.sc:not(.sc--large) .sc-block{ padding: 6px 0 0; margin-top: 6px; }
.sc:not(.sc--large) .sc-tile{ padding: 4px 2px; }
.sc:not(.sc--large) .sc-ends{ gap: 4px; }
.sc:not(.sc--large) .sc-block__note{ font-size: .82rem; line-height: 1.4; }
.sc:not(.sc--large) .sc-end{ padding: 3px 6px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.sc:not(.sc--large) .sc-end__pct{ display: none; }
.sc:not(.sc--large) .sc-end__word{ font-size: .84rem; }
.sc:not(.sc--large) .sc-end__label{ font-size: .84rem; }
.sc:not(.sc--large) .sc-end__value{ font-size: .92rem; }
.sc:not(.sc--large) .sc-back__foot{ margin-top: 8px; padding-top: 7px; }
.sc:not(.sc--large) .sc-more{ font-size: .84rem; padding: 6px 12px; }

.sc-back__foot{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}
.sc-more{
  font: inherit;
  font-weight: 700;
  font-size: .92rem;
  color: var(--ink);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
}
.sc-more:hover{ border-color: var(--accent); }

.sc-ends{ display: grid; gap: 6px; }
.sc-end{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 8px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
}
.sc-end__word{
  font-size: .84rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint);
}
.sc-end.is-best .sc-end__word{ color: var(--accent-3); }
.sc-end.is-worst .sc-end__word{ color: var(--accent-2); }
/* THE LABEL IS THE WHOLE POINT OF THE ROW. It was being clipped to "Con..."
   and "M..." on the wall, which tells a reader he has a best and a worst and
   not what either of them is. It wraps now instead of truncating, and the
   percentile chip comes off the small card to give it the room. */
.sc-end__label{ font-size: .95rem; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; }
.sc-end__value{ font-family: var(--mono); font-size: 1.02rem; }
.sc-end__pct{ font-family: var(--mono); font-size: .82rem; color: var(--ink-faint); }

/* The sheet. Every rating, over the whole screen. */
.sc-sheet{
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(12px, 4vh, 48px) clamp(12px, 4vw, 40px);
  background: color-mix(in srgb, var(--bg) 82%, black);
  backdrop-filter: blur(3px);
  overflow: auto;
}
.sc-sheet__box{
  width: min(1400px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
  padding: clamp(18px, 2.6vw, 30px);
}
.sc-sheet__head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.sc-sheet__who{ display: flex; align-items: center; gap: 14px; min-width: 0; }
.sc-sheet__ovr{
  font-family: var(--mono); font-size: 1.5rem; font-weight: 700;
  display: grid; place-items: center;
  width: 56px; height: 56px; flex: none;
  border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line);
}
.sc-sheet__name{ margin: 0; font-family: var(--display); font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -.02em; }
.sc-sheet__meta{ margin: 2px 0 0; font-family: var(--mono); font-size: .92rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; }
.sc-sheet__close{
  font: inherit; font-weight: 700; cursor: pointer;
  color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 18px;
}
.sc-sheet__close:hover{ border-color: var(--accent); }
/* Columns as wide as the screen allows, which is the entire reason this is
   not on the card. */
.sc-sheet__body{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 8px 28px;
  align-items: start;
}
.sc-sheet__body .sc-block{ border-top: 0; margin-top: 0; padding: 14px 0; }
.sc-sheet__body .sc-block__title{ font-size: 1.1rem; }
.sc-sheet__body .sc-block__note{ font-size: 1rem; line-height: 1.55; }
.sc-sheet__body .sc-row__label{ font-size: .98rem; }
.sc-sheet__body .sc-row__value, .sc-sheet__body .sc-row__pct{ font-size: .95rem; }
.sc-sheet__body .sc-block--quirks{ grid-column: 1 / -1; }
.sc-sheet .sc-link{ display: inline-block; margin-top: 14px; }

/* ==================================================================
   HISTORY CARDS
   Championships, awards, the Hall and the game log. Written against the
   same tokens as everything else so a history answer does not look like a
   different site, and drawn rather than tabulated wherever the shape of the
   number is the point.
   ================================================================== */

/* ---- one series ---- */
.card--series .series{ display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.series__row{
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line-soft);
}
.series__row--win{ background: var(--accent-soft); border-color: var(--accent-line); }
.series__club{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.series__name{ font-weight: 600; font-size: .95rem; }
.series__row--win .series__name{ color: var(--accent-hot); }
.series__record{ font-size: 0.84rem; color: var(--ink-faint); }
.series__games{
  font-size: 1.9rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--ink-soft);
}
.series__row--win .series__games{ color: var(--accent-hot); }
.series__ties{ font-size: 0.84rem; color: var(--ink-faint); text-align: center; }
.series__foot{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; font-size: 0.84rem; color: var(--ink-faint); }
.series__mvp{ color: var(--accent-2); }

/* ---- ranked bars ---- */
.bars{ list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bars__row{
  display: grid; grid-template-columns: minmax(90px, 1.4fr) minmax(60px, 3fr) auto;
  align-items: center; gap: 10px; font-size: 0.88rem;
}
.bars__name{ color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars__row--lead .bars__name{ color: var(--ink); font-weight: 600; }
.bars__track{ height: 9px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.bars__fill{ display: block; height: 100%; border-radius: 999px; background: var(--accent); opacity: .55; }
.bars__row--lead .bars__fill{ opacity: 1; background: var(--accent-hot); }
.bars__value{ font-variant-numeric: tabular-nums; font-weight: 600; min-width: 2.5ch; text-align: right; }
.bars__span{ display: none; }

/* ---- one club's championship history ---- */
.titles__tally{ display: flex; gap: 22px; margin: 2px 0 12px; }
.titles__stat{ display: flex; align-items: baseline; gap: 6px; }
.titles__num{ font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.titles__stat--won .titles__num{ color: var(--accent-2); }
.titles__label{ font-size: 0.84rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.titles__strip{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.titles__year{
  font-size: 0.84rem; font-variant-numeric: tabular-nums;
  padding: 3px 6px; border-radius: 5px;
  background: var(--surface-2); border: 1px solid var(--line-soft); color: var(--ink-faint);
}
.titles__year--won{ background: var(--accent-2-soft); border-color: rgba(232,177,60,.4); color: var(--accent-2); font-weight: 600; }
.titles__key{ display: flex; gap: 12px; margin: 10px 0 0; font-size: 0.84rem; color: var(--ink-faint); }
.titles__keyItem::before{
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px;
  margin-right: 5px; background: var(--surface-3);
}
.titles__keyItem--won::before{ background: var(--accent-2); }

/* ---- award winners ---- */
.award{ list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.award__row{
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line-soft);
}
.award__name{ font-weight: 600; font-size: .9rem; }
.award__league{ font-size: 0.84rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); margin-left: auto; }
.award__tie{ font-size: 0.84rem; color: var(--accent-2); }

/* ---- the Hall ---- */
.hof__verdict{ display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; }
.hof__badge{
  font-size: 0.86rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
}
.hof__verdict--in .hof__badge{ background: var(--accent-3-soft); color: var(--pos); border: 1px solid rgba(71,201,126,.4); }
.hof__verdict--out .hof__badge{ background: var(--surface-3); color: var(--ink-soft); border: 1px solid var(--line); }
.hof__year{ font-size: 0.86rem; color: var(--ink-faint); }
.hof__by{ margin: 0 0 8px; font-size: 0.86rem; color: var(--ink-soft); }
.hof__track{ position: relative; height: 12px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.hof__fill{ height: 100%; background: var(--accent); opacity: .8; }
.hof__threshold{ position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--accent-2); }
.hof__labels{ display: flex; justify-content: space-between; margin-top: 6px; font-size: 0.84rem; color: var(--ink-faint); }
.hof__need{ color: var(--accent-2); }

/* ---- a day's scoreboard ---- */
.gameday{ display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-top: 4px; }
.gameday__game{
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line-soft);
}
.gameday__line{ display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 0.88rem; color: var(--ink-faint); }
.gameday__line--win{ color: var(--ink); font-weight: 600; }
.gameday__club{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gameday__score{ font-variant-numeric: tabular-nums; font-size: 1rem; }
.gameday__meta{ margin-top: 6px; font-size: 0.84rem; color: var(--ink-faint); }

/* ---- two clubs, all time ---- */
.h2h__bar{ display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--surface-3); margin-top: 4px; }
.h2h__side--a{ background: var(--accent); }
.h2h__side--b{ background: var(--accent-2); opacity: .8; }
.h2h__labels{ display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.86rem; color: var(--ink-soft); }
.h2h__label strong{ color: var(--accent); font-variant-numeric: tabular-nums; }
.h2h__label--b strong{ color: var(--accent-2); }

/* ---------------------------------------------------------------------------
   SHARED CONTROLS

   The primary and secondary buttons and the small explainer box, used by every
   feature in the Tools/Games tab and by a few pages outside it. They keep the
   cz- prefix they were born with under Call the Zone, which is gone as of
   Sept 11: renaming them would mean touching forty call sites in a dozen files
   to change nothing anybody can see.
   ------------------------------------------------------------------------ */

.cz-start, .cz-share{
  justify-self: start;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 800;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .14s ease, filter .14s ease;
}
.cz-start:hover, .cz-share:hover{ transform: translateY(-1px); filter: brightness(1.07); }
.cz-share{ background: transparent; color: var(--ink); border-color: var(--line); }

.cz-how{ display: grid; gap: 8px; padding: 16px 18px; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--radius); }
.cz-how__title{ font-size: 1.05rem; }
.cz-how__text{ margin: 0; color: var(--ink-soft); }
/* ---------------------------------------------------------------------------
   ONE PLAY, FOUR RULEBOOKS (Sept 7)

   Three columns that have to stay comparable, so they share every dimension
   and differ only in the accent along the top. On a phone they stack, and the
   book name has to stay obvious when they do, which is why it is a bar rather
   than a color wash.
   ------------------------------------------------------------------------ */

.rb-tabs{ display: flex; gap: 10px; margin: 20px 0 4px; flex-wrap: wrap; }
.rb-tab{
  display: grid;
  gap: 2px;
  text-align: left;
  padding: 10px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.rb-tab.is-on{ border-color: var(--accent); background: var(--accent-soft); }
.rb-tab__label{ font-weight: 700; }
.rb-tab__note{ font-size: var(--step-label); color: var(--ink-soft); }

/* THE COMPARISON NEEDS THE ROOM, because four books side by side is the
   whole feature and at 1180 the four columns came out under 190px each,
   which is three words to a line. The page runs wider here, the play list
   gives back forty pixels, and the books never go below a column you can
   read a sentence in. */
.rb-grid{ display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 18px; }
@media (max-width: 980px){ .rb-grid{ grid-template-columns: 1fr; } }

.rb-chips{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.rb-chip{
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  font: inherit;
  font-size: var(--step-label);
  cursor: pointer;
}
.rb-chip.is-on{ border-color: var(--accent); color: var(--ink); background: var(--accent-soft); }

.rb-items{ display: grid; gap: 6px; }
.rb-item{
  display: grid;
  gap: 1px;
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--surface);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color .14s ease, transform .14s ease;
}
.rb-item:hover{ transform: translateX(2px); border-color: var(--line); }
.rb-item.is-on{ border-color: var(--accent); background: var(--accent-soft); }
.rb-item__name{ font-weight: 600; }
.rb-item__cat{ font-size: var(--step-label); color: var(--ink-faint); }
.rb-item__agree{ font-size: var(--step-label); color: var(--accent-3); }

.rb-play{ display: grid; gap: 16px; }
.rb-play__head{ display: grid; gap: 4px; }
.rb-play__cat{ margin: 0; font-size: var(--step-label); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); }
.rb-play__name{ font-size: 1.7rem; }
.rb-play__sit{ margin: 0; font-size: 1.05rem; color: var(--ink-soft); max-width: 62ch; }

.rb-field{ max-width: 460px; }
.rb-field__svg{ width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); }
.rb-man__disc{ fill: var(--surface-3); stroke: var(--line); stroke-width: 1; }
.rb-man__label{ fill: var(--ink-soft); font-family: var(--mono); font-size: 13px; font-weight: 700; }
.rb-man.is-focus .rb-man__disc{ fill: var(--accent); stroke: var(--accent-hot); }
.rb-man.is-focus .rb-man__label{ fill: var(--accent-ink); }
.rb-runner__disc{ fill: var(--accent-2); stroke: var(--bg); stroke-width: 2; }
.rb-arrow{ stroke: var(--accent-2); stroke-width: 2; fill: none; stroke-dasharray: 5 4; }
.rb-ball{ fill: var(--ink); stroke: var(--bg); stroke-width: 2; }

.rb-spec{ display: grid; gap: 10px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.rb-spec__label{ margin: 0; font-size: var(--step-label); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.rb-spec__row{ display: grid; grid-template-columns: 130px 1fr 150px; gap: 12px; align-items: center; }
@media (max-width: 760px){ .rb-spec__row{ grid-template-columns: 1fr; } }
.rb-spec__book{ font-weight: 700; }
.rb-spec__bars{ display: grid; gap: 6px; }
.rb-spec__bar{ display: grid; grid-template-columns: 1fr 70px; gap: 8px; align-items: center; }
.rb-spec__fill{ height: 22px; border-radius: 4px; background: var(--accent-soft); border: 1px solid var(--accent-line); display: flex; align-items: center; padding-left: 8px; min-width: 60px; }
.rb-spec__value{ font-family: var(--mono); font-weight: 700; font-size: var(--step-small); white-space: nowrap; }
.rb-spec__at{ font-size: var(--step-label); color: var(--ink-faint); }
.rb-spec__none{ font-size: var(--step-small); color: var(--ink-faint); }
.rb-spec__note{ font-size: var(--step-label); color: var(--ink-faint); }

/* Four books now, so the grid is told how many rather than being told three.
   At laptop widths four columns of prose get too narrow to read, so it drops
   to two before it drops to one. */
.rb-books{ display: grid; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); gap: 14px; }
.rb-book{
  display: grid;
  gap: 9px;
  align-content: start;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--line);
  border-radius: var(--radius);
}
.rb-book--mlb{ border-top-color: var(--accent); }
.rb-book--ll{ border-top-color: var(--accent-2); }
.rb-book--usssa{ border-top-color: var(--accent-3); }
.rb-book--ncaa{ border-top-color: var(--college); }
.rb-book__head{ display: grid; }
.rb-book__name{ font-family: var(--display); font-weight: 800; font-size: 1.18rem; }
.rb-book__full{ font-size: var(--step-label); color: var(--ink-faint); }
.rb-book__call{ margin: 0; font-weight: 700; font-size: 1.12rem; line-height: 1.35; }
.rb-book__detail{ margin: 0; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.55; }
.rb-book__rule{ margin: 0; font-family: var(--mono); font-size: var(--step-label); color: var(--ink-faint); letter-spacing: .02em; }
.rb-book__local{
  margin: 0;
  font-size: var(--step-label);
  color: var(--accent-2);
  border-left: 2px solid var(--accent-2);
  padding-left: 8px;
}

.rb-agree{ margin: 0; font-size: var(--step-small); color: var(--accent-3); }

.rb-coach{
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--accent-2);
  border-radius: var(--radius);
}
.rb-coach__label{ font-size: var(--step-label); text-transform: uppercase; letter-spacing: .07em; color: var(--accent-2); font-weight: 700; }
.rb-coach__text{ margin: 0; }

.rb-tryit{
  justify-self: start;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.rb-tryit:hover{ border-color: var(--accent); }

/* ---------- make the call ---------- */

.rb-quizstart{ display: grid; gap: 14px; max-width: 640px; margin-top: 20px; }
.rb-quizstart__text{ margin: 0; color: var(--ink-soft); }

.rb-quiz{ display: grid; gap: 14px; margin-top: 18px; max-width: 760px; }
.rb-banner{
  display: grid;
  gap: 2px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
}
.rb-banner--mlb{ border-left-color: var(--accent); }
.rb-banner--ll{ border-left-color: var(--accent-2); }
.rb-banner--usssa{ border-left-color: var(--accent-3); }
.rb-banner--ncaa{ border-left-color: var(--college); }
.rb-banner__label{ font-size: var(--step-label); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); }
.rb-banner__book{ font-family: var(--display); font-weight: 800; font-size: 1.25rem; }

.rb-score{ display: flex; gap: 16px; font-size: var(--step-label); color: var(--ink-faint); font-family: var(--mono); }
.rb-quiz__name{ font-size: 1.4rem; }
.rb-quiz__sit{ margin: 0; font-size: 1.05rem; }

.rb-options{ display: grid; gap: 8px; }
.rb-option{
  text-align: left;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color .14s ease, transform .14s ease;
}
.rb-option:hover:not(:disabled){ border-color: var(--accent); transform: translateX(2px); }
.rb-option.is-right{ border-color: var(--pos); background: rgba(62,201,141,.10); }
.rb-option.is-wrong{ border-color: var(--neg); background: rgba(242,97,90,.10); }
.rb-option:disabled{ cursor: default; opacity: .85; }

.rb-feedback{
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  animation: riseIn .2s ease-out both;
}
.rb-feedback.is-right{ border-color: rgba(62,201,141,.5); }
.rb-feedback.is-wrong{ border-color: rgba(242,97,90,.5); }
.rb-feedback__verdict{ margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.2rem; }
.rb-feedback.is-right .rb-feedback__verdict{ color: var(--pos); }
.rb-feedback.is-wrong .rb-feedback__verdict{ color: var(--neg); }
.rb-feedback__rule{ margin: 0; font-family: var(--mono); font-size: var(--step-label); color: var(--ink-faint); }
.rb-feedback__why{ margin: 0; color: var(--ink-soft); }
.rb-feedback__rest{ display: grid; gap: 4px; padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius-sm); }
.rb-feedback__restlabel{ margin: 0; font-size: var(--step-label); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.rb-feedback__other{ margin: 0; display: grid; grid-template-columns: 130px 1fr; gap: 10px; font-size: var(--step-small); }
.rb-feedback__otherbook{ font-weight: 700; }
.rb-feedback__othercall{ color: var(--ink-soft); }
.rb-feedback__coach{ margin: 0; font-size: var(--step-small); border-left: 2px solid var(--accent-2); padding-left: 10px; color: var(--ink-soft); }
.rb-feedback__actions{ display: flex; gap: 10px; flex-wrap: wrap; }
/* The bar now carries where that rating ranks among current cards, which is the
   whole point of printing it: 85 arm strength means nothing until you know it
   beats four throwers in five. */
.sc-row{ grid-template-columns: 5.6em 1fr 1.9em 2.3em; }
.sc-row__pct{ font-family: var(--mono); font-size: .84rem; }

/* ---------------------------------------------------------------------------
   KEEP THE BOOK (Sept 7)

   A scorecard on a screen has one hard problem: it is wide. Nine innings of
   boxes will not fit on a phone and squeezing them makes the diamonds
   meaningless, so the grid scrolls sideways inside its own frame and the
   batting order column is sticky, which is exactly how a paper book is read
   when you fold it.

   The backwards K is drawn rather than typed: scaleX(-1) on a normal K, so it
   works in any font on any machine.
   ------------------------------------------------------------------------ */

.sbk-learn{ display: grid; gap: 26px; margin-top: 20px; }
.sbk-learn__block{ display: grid; gap: 12px; }
.sbk-learn__title{ font-size: 1.35rem; }
.sbk-learn__text{ margin: 0; color: var(--ink-soft); max-width: 70ch; }
.sbk-learn__actions{ display: flex; gap: 10px; flex-wrap: wrap; }

.sbk-numbers{ display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.sbk-num{
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto auto;
  gap: 2px 10px;
  text-align: left;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: inherit;
  font: inherit;
  cursor: default;
}
.sbk-num__n{
  grid-row: 1 / span 2;
  font-family: var(--mono);
  font-size: 2rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  align-self: center;
  text-align: center;
}
.sbk-num__pos{ font-family: var(--mono); font-weight: 700; color: var(--ink-soft); }
.sbk-num__name{ font-weight: 700; }
.sbk-num__note{ grid-column: 1 / -1; font-size: var(--step-label); color: var(--ink-faint); }

.sbk-symbols{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px; }
.sbk-symbol{ display: grid; grid-template-columns: 74px 1fr; gap: 12px; align-items: center; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.sbk-symbol__code{ font-family: var(--mono); font-weight: 800; font-size: 1.1rem; text-align: center; color: var(--accent-2); }
.sbk-symbol__code.is-mirror{ display: inline-block; transform: scaleX(-1); }
.sbk-symbol__words{ display: grid; }
.sbk-symbol__label{ font-weight: 600; }
.sbk-symbol__note{ font-size: var(--step-label); color: var(--ink-faint); }

.sbk-demo{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.sbk-demo__item{ display: grid; gap: 8px; justify-items: center; text-align: center; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.sbk-demo__note{ font-size: var(--step-small); color: var(--ink-soft); }

/* ---------- one box ---------- */

.sbk-box{ position: relative; display: inline-grid; place-items: center; }
.sbk-box.is-empty{ min-width: 40px; min-height: 40px; }
.sbk-diamond{ display: block; }
.sbk-leg{ stroke: var(--line); stroke-width: 5; fill: none; }
.sbk-leg.is-on{ stroke: var(--accent); }
.sbk-scored{ fill: var(--accent-2); opacity: .30; }
.sbk-box__code{
  position: absolute;
  font-family: var(--mono);
  font-weight: 800;
  font-size: 0.86rem;
  letter-spacing: -.02em;
  color: var(--ink);
  text-align: center;
  max-width: 90%;
  line-height: 1;
}
.sbk-box__code.is-mirror{ transform: scaleX(-1); }
.sbk-box__out{
  position: absolute;
  top: 0; right: 0;
  font-family: var(--mono);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--neg);
}
.sbk-box__rbi{ position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); color: var(--accent-2); font-size: 0.84rem; letter-spacing: 1px; }

/* ---------- picking a game ---------- */

.sbk-picker{ display: grid; gap: 12px; margin-top: 20px; }
.sbk-games{ display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 8px; }
.sbk-game{
  display: grid;
  gap: 2px;
  text-align: left;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color .14s ease, transform .14s ease;
}
.sbk-game:hover{ border-color: var(--accent); transform: translateY(-1px); }
.sbk-game__date{ font-size: var(--step-label); color: var(--ink-faint); font-family: var(--mono); }
.sbk-game__teams{ font-weight: 600; }
.sbk-game__score{ font-family: var(--mono); color: var(--ink-soft); font-size: var(--step-small); }

/* ---------- watching ---------- */

.sbk-watch, .sbk-score{ display: grid; gap: 16px; margin-top: 18px; }
.sbk-gamehead{ display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.sbk-gamehead__date{ font-size: var(--step-label); color: var(--ink-faint); font-family: var(--mono); }
.sbk-gamehead__teams{ font-size: 1.4rem; }
.sbk-gamehead__change{ background: none; border: none; border-bottom: 1px solid var(--accent-line); color: var(--ink-soft); font: inherit; font-size: var(--step-small); cursor: pointer; padding: 0; }

.sbk-sides{ display: flex; gap: 8px; }
.sbk-side{ padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); font: inherit; font-weight: 600; cursor: pointer; }
.sbk-side.is-on{ border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }

.sbk-controls{ display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sbk-ctl{ padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.sbk-ctl:hover{ border-color: var(--accent); }
.sbk-speeds{ display: flex; gap: 4px; margin-left: 6px; }
.sbk-speed{ padding: 6px 12px; border-radius: 999px; border: 1px solid transparent; background: none; color: var(--ink-faint); font: inherit; font-size: var(--step-label); cursor: pointer; }
.sbk-speed.is-on{ border-color: var(--accent-line); color: var(--ink); }
.sbk-controls__count{ margin-left: auto; font-size: var(--step-label); color: var(--ink-faint); font-family: var(--mono); }

.sbk-now{ display: grid; gap: 10px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.sbk-now__label{ font-size: var(--step-label); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); }
.sbk-now__desc{ margin: 0; font-size: 1.05rem; }
.sbk-now__entry{ display: flex; gap: 16px; align-items: flex-start; }
.sbk-now__words{ display: grid; gap: 4px; }
.sbk-now__code{ font-family: var(--mono); font-weight: 800; font-size: 1.4rem; color: var(--accent-2); }
.sbk-now__teach{ margin: 0; color: var(--ink-soft); max-width: 66ch; }
.sbk-now__later{ margin: 0; font-size: var(--step-small); color: var(--accent-2); border-left: 2px solid var(--accent-2); padding-left: 10px; }

/* ---------- the grid ---------- */

.sbk-gridwrap{ overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.sbk-grid{ display: grid; min-width: max-content; }
.sbk-grid__row{ display: grid; grid-template-columns: 190px repeat(var(--sbk-cols, 9), 66px); align-items: stretch; }
.sbk-grid__row--head{ position: sticky; top: 0; background: var(--surface-2); z-index: 2; }
.sbk-grid__slot{
  position: sticky;
  left: 0;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 6px;
  align-items: center;
  padding: 6px 10px;
  background: var(--surface-2);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line-soft);
  z-index: 1;
  font-size: var(--step-label);
}
.sbk-grid__spot{ font-family: var(--mono); font-weight: 800; color: var(--ink-faint); }
.sbk-grid__names{ display: grid; }
.sbk-grid__name{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.sbk-grid__name + .sbk-grid__name{ color: var(--ink-faint); font-size: 0.84rem; }
.sbk-grid__pos{ display: none; }
.sbk-grid__inn{ padding: 6px 0; text-align: center; font-family: var(--mono); font-weight: 700; color: var(--ink-faint); border-bottom: 1px solid var(--line); }
.sbk-grid__cell{
  display: flex;
  gap: 1px;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  border-left: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

/* ---------- scoring it yourself ---------- */

.sbk-scorebar{ display: flex; gap: 18px; font-family: var(--mono); font-size: var(--step-label); color: var(--ink-faint); }
.sbk-q{ display: grid; gap: 12px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); max-width: 760px; }
.sbk-q__where{ font-size: var(--step-label); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); }
.sbk-q__desc{ margin: 0; font-size: 1.15rem; }
.sbk-q__ask{ margin: 0; color: var(--ink-soft); }
.sbk-options{ display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.sbk-option{
  display: grid;
  gap: 2px;
  justify-items: center;
  padding: 16px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease;
}
.sbk-option:hover:not(:disabled){ transform: translateY(-2px); border-color: var(--accent); }
.sbk-option__code{ font-family: var(--mono); font-weight: 800; font-size: 1.5rem; }
.sbk-option__code.is-mirror{ display: inline-block; transform: scaleX(-1); }
.sbk-option__hint{ font-size: var(--step-label); color: var(--ink-faint); }
.sbk-option.is-right{ border-color: var(--pos); background: rgba(62,201,141,.10); }
.sbk-option.is-wrong{ border-color: var(--neg); background: rgba(242,97,90,.10); }
.sbk-option:disabled{ cursor: default; }

.sbk-feedback{ display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line); }
.sbk-feedback.is-right{ border-color: rgba(62,201,141,.45); }
.sbk-feedback.is-wrong{ border-color: rgba(242,97,90,.45); }
.sbk-feedback__verdict{ margin: 0; font-weight: 800; font-family: var(--display); }
.sbk-feedback__teach{ margin: 0; color: var(--ink-soft); }
.sbk-done{ display: grid; gap: 12px; justify-items: start; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }


/* ============================================================
   SEPT 9: LIVE AGAINST ARCHIVED, WHICH IS THE ONLY SPLIT LEFT

   The tab used to be divided by whether the entries were showing. It is
   divided by which game you are keeping now: one being played, or one already
   finished. So a live game needs the pulse, the situation between entries, and
   a visible difference between the entries that were in the book before you
   sat down and the ones you wrote.
   ============================================================ */

.sbk-dot{
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent-3);
  display: inline-block; flex: none;
  animation: live-pulse 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){ .sbk-dot{ animation: none; } }

.sbk-game.is-live{ border-color: var(--accent-line); }
.sbk-game.is-live .sbk-game__date{ display: flex; align-items: center; gap: 6px; }
.sbk-game__when{ text-transform: uppercase; letter-spacing: .06em; color: var(--accent-3); }

.sbk-live{ display: grid; gap: 16px; margin-top: 18px; }
.sbk-archived{ display: grid; gap: 4px; }

.sbk-tag{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2);
  font-size: var(--step-label); font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
}
.sbk-tag.is-live{ border-color: var(--accent-line); color: var(--accent-3); }
.sbk-tag.is-final{ color: var(--ink-faint); }

.sbk-scorebar__bit.is-behind{ color: var(--accent-3); }

/* ---------- between entries ---------- */

.sbk-wait{
  display: grid; gap: 12px; justify-items: start;
  padding: 18px 20px; max-width: 760px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.sbk-wait__title{ margin: 0; font-family: var(--display); font-size: 1.15rem; }
.sbk-wait__text{ margin: 0; color: var(--ink-soft); max-width: 66ch; }
.sbk-wait__note{
  margin: 0; font-size: var(--step-small); color: var(--ink-faint);
  border-left: 2px solid var(--accent-line); padding-left: 10px;
}
.sbk-wait__state{ display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.sbk-wait__readings{ display: flex; gap: 18px; align-items: center; }

/* ---------- the question, when the game hands you one ---------- */

.sbk-q__where{ display: flex; align-items: center; gap: 7px; }
.sbk-q__wherewords{ text-transform: uppercase; letter-spacing: .07em; }

/* ---------- whose entry is whose ---------- */

.sbk-box.is-given{ opacity: .42; }
.sbk-legend{ margin: 0; font-size: var(--step-label); color: var(--ink-faint); }

/* ---------- watch or score, inside one archived game ---------- */

.sbk-sub{ display: flex; gap: 8px; margin: 18px 0 2px; flex-wrap: wrap; }
.sbk-subtab{
  display: grid; gap: 1px; text-align: left;
  padding: 8px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-soft); font: inherit; cursor: pointer;
}
.sbk-subtab.is-on{ border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.sbk-subtab__label{ font-weight: 700; }
.sbk-subtab__note{ font-size: var(--step-label); color: var(--ink-faint); }

.rb-tab__label{ display: inline-flex; align-items: center; gap: 6px; }
.rb-tab__count{ font-family: var(--mono); font-size: var(--step-label); color: var(--accent-3); }

/* ============================================================
   SEPT 7: THE LIVE GAME PANEL, READ AT THE SPEED OF A GAME

   Everything in this block answers one complaint, which is the right one:
   a live game moves, and a panel about it has about two seconds of somebody's
   attention between pitches. So the answer has to be gettable at a glance and
   it has to look like this site rather than like a chat reply, and the two
   pictures beside it have to say what they are without a caption.
   ============================================================ */

/* ---------- the headline ----------
   Two lines now, because "what was that pitch" has two halves: what it was,
   and what came of it. The type leads at headline weight and the call sits
   under it in the tone's own color, which is the pair a fan looking up from
   the television actually wants. */
.askverdict{ padding-bottom: .8rem; margin-bottom: .8rem; }
.askverdict__head{ display: grid; gap: 2px; min-width: 0; }
.askverdict__label{ font-size: 1.42rem; line-height: 1.15; }
.askverdict__call{
  margin: 0; font-family: var(--mono);
  font-size: 0.84rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft);
}
.askverdict--good .askverdict__call{ color: var(--pos); }
.askverdict--bad .askverdict__call{ color: var(--neg); }
/* The type is the answer, so it stays in the reading color even when the
   outcome was bad. The color belongs on the call underneath it. */
.askverdict--good .askverdict__label,
.askverdict--bad .askverdict__label{ color: var(--ink); }
.asktag{ font-size: 0.84rem; padding: 4px 9px 3px; }

/* ---------- the reading ----------
   It was a paragraph in the body font on the page background, which is the
   exact shape of every chat answer on the internet. It is a panel now, the
   way every other considered block on this site is a panel: a surface, a
   hairline, an accent edge and a micro-label saying what it is. */
.askanswer__prose{
  position: relative;
  gap: .55rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 2.05rem 1.1rem 1rem;
}
.askanswer__prose::before{
  content: "The read";
  position: absolute; top: .72rem; left: 1.1rem;
  font-size: 0.84rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint);
}
.askanswer__lede{
  font-size: 1.12rem; font-weight: 700; line-height: 1.42;
  letter-spacing: -.015em; color: var(--ink); max-width: 62ch;
}
.askanswer__para{
  font-size: .96rem; line-height: 1.62; color: var(--ink-soft); max-width: 66ch;
}
/* A figure inside the reading is set the way this site sets figures
   everywhere else, so the eye can find it without reading the sentence. */
.askanswer__para .term, .askanswer__lede .term{ font-weight: 700; }

/* ---------- the cards down the side ----------
   Bigger, and with more air. These are the numbers somebody checks in the
   gap between pitches, and they were set at label size. */
@media (min-width: 1000px){
  .askanswer--split{ grid-template-columns: minmax(0, 1fr) minmax(268px, 340px); gap: 1.4rem; }
  .askanswer--split .figstrip__cell{ padding: 11px 14px; }
  .askanswer--split .figstrip__value{ font-size: 1.55rem; }
}
.figstrip{ gap: 9px; }
.figstrip__cell{ border-top-width: 3px; }
.figstrip__value{ font-size: 1.7rem; }
.figstrip__unit{ font-size: 0.86rem; }
.figstrip__label{ font-size: 0.84rem; letter-spacing: .09em; color: var(--ink); }
.figstrip__note{ font-size: 0.88rem; line-height: 1.35; }

/* ---------- the comparison bars, with a key ----------
   The track carries three marks and nothing on it said which was which. Each
   one is now named beside a copy of the shape it actually is: a filled dot
   for this pitch, a tick for the league, a second tick in the other accent
   for the man who threw it. */
.askmeter{ padding: 12px 14px 11px; }
.askmeter__label{ font-size: 0.84rem; letter-spacing: .06em; color: var(--ink); }
.askmeter__value{ font-size: 1.08rem; }
.askmeter__track{ height: 10px; }
.askmeter__mark{ width: 3px; top: -4px; bottom: -4px; transform: translateX(-1.5px); background: var(--ink-soft); }
.askmeter__dot{ width: 14px; height: 14px; }

.askmeter__key{
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  margin-top: 9px;
}
.askkey{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.84rem; color: var(--ink-soft); line-height: 1.3;
}
.askkey__mark{ display: block; flex: none; }
.askkey--dot .askkey__mark{
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface-2);
  box-shadow: 0 0 0 1px var(--accent-line);
}
.askkey--dot .askkey__text{ color: var(--ink); font-weight: 700; }
.askkey--line .askkey__mark{ width: 3px; height: 13px; border-radius: 2px; background: var(--ink-soft); }
.askkey--line2 .askkey__mark{ width: 3px; height: 13px; border-radius: 2px; background: var(--accent-2); }
.askmeter__foot{ margin-top: 7px; font-size: 0.84rem; }

/* ---------- the result column in the pitch table ----------
   "In play, out(s)" is gone. What is there instead is the play and the
   fielders who handled it, with the contact underneath it rather than
   crammed onto the same line behind a middot. */
.pitchrow__result{ display: block; font-weight: 700; color: var(--ink); }
.pitchrow__hit{
  display: block; margin-top: 1px;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 0.86rem; color: var(--ink-faint);
}
.pitchtip__play{
  margin: 4px 0 0; font-size: 0.88rem; line-height: 1.4; color: var(--ink-soft);
}

/* THE BAR HAD COLLAPSED TO NOTHING. A plain `1fr` track is `minmax(auto, 1fr)`,
   so once the percentile column was added the four columns wanted more than a
   card two hundred pixels wide had, and the one column that could give way did:
   the bar went to zero and every row was label, number, number. The track now
   has a floor, and the label a ceiling it can shrink under. */
.sc-row{ grid-template-columns: minmax(0, 5.4em) minmax(26px, 1fr) 1.9em 2.2em; gap: 5px; }
.sc-row__label{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------------------
   THE WEEKEND PITCH PLANNER (Sept 7)

   This one is used standing up, on a phone, between games, so the touch
   targets are large, the availability board reads in one glance by color,
   and the numbers are the biggest thing on the screen.
   ------------------------------------------------------------------------ */

.pl-setup{ display: grid; gap: 14px; margin-top: 20px; }
.pl-books{ display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.pl-book{
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  text-align: left;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.pl-book.is-on{ border-color: var(--accent); background: var(--accent-soft); }
.pl-book__name{ font-weight: 800; font-family: var(--display); }
.pl-book__unit{ font-size: var(--step-label); color: var(--ink-faint); }

.pl-row{ display: flex; gap: 14px; flex-wrap: wrap; }
.pl-field{ display: grid; gap: 4px; }
.pl-field__label{ font-size: var(--step-label); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.pl-select{
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  min-width: 120px;
}

.pl-rulenote{ display: grid; gap: 10px; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--radius); }
.pl-rulenote__text{ margin: 0; color: var(--ink-soft); max-width: 78ch; }
.pl-rulenote__source{ margin: 0; font-family: var(--mono); font-size: var(--step-label); color: var(--ink-faint); }
.pl-rulefacts{ display: flex; gap: 24px; flex-wrap: wrap; }
.pl-fact{ display: grid; }
.pl-fact__value{ font-family: var(--mono); font-size: 1.8rem; font-weight: 800; line-height: 1; color: var(--accent); }
.pl-fact__label{ font-size: var(--step-label); color: var(--ink-faint); }

.pl-ladder{ display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pl-ladder__label{ font-size: var(--step-label); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.pl-ladder__step{ display: grid; padding: 6px 12px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); }
.pl-ladder__range{ font-family: var(--mono); font-weight: 700; }
.pl-ladder__rest{ font-size: var(--step-label); color: var(--ink-faint); }

/* ---------- the roster ---------- */

.pl-roster{ display: grid; gap: 12px; margin-top: 24px; }
.pl-roster__head{ display: grid; gap: 4px; }
.pl-roster__note{ margin: 0; color: var(--ink-soft); font-size: var(--step-small); max-width: 70ch; }
/* THE COLUMN COUNT IS THE NUMBER OF DAYS, not however many happen to fit.
   auto-fit made six tracks for a seven day week and squeezed Sunday's input
   out of existence while leaving its plus and minus buttons behind, which is
   the same trap the scorecard grid fell into. --days is set in script. */
.pl-table{ display: grid; gap: 6px; overflow-x: auto; }
.pl-table__row{
  display: grid;
  grid-template-columns: 130px repeat(var(--days, 3), minmax(96px, 1fr)) 76px;
  gap: 8px; align-items: center;
  min-width: max-content;
}
@media (max-width: 760px){
  .pl-table__row{ grid-template-columns: 1fr; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); }
  .pl-table__row--head{ display: none; }
}
.pl-table__row--head{ font-size: var(--step-label); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.pl-table__day{ display: grid; gap: 4px; }
.pl-name{
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
}
.pl-counter{ display: grid; grid-template-columns: 34px 1fr 34px; gap: 4px; align-items: center; }
.pl-counter__label{ grid-column: 1 / -1; font-size: var(--step-label); color: var(--ink-faint); text-align: center; }
.pl-counter__step{
  height: 34px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-soft);
  font: inherit;
  font-size: 1.1rem;
  cursor: pointer;
}
.pl-counter__step:hover{ border-color: var(--accent); color: var(--ink); }
.pl-counter__input{
  height: 34px;
  text-align: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1rem;
  min-width: 0;
}
.pl-remove{ background: none; border: none; color: var(--ink-faint); font: inherit; font-size: var(--step-label); cursor: pointer; text-align: left; padding: 0; }
.pl-remove:hover{ color: var(--neg); }
.pl-add{
  justify-self: start;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px dashed var(--line);
  background: none;
  color: var(--ink-soft);
  font: inherit;
  cursor: pointer;
}
.pl-add:hover{ border-color: var(--accent); color: var(--ink); }

/* ---------- the board ---------- */

.pl-board{ display: grid; gap: 12px; margin-top: 26px; }
.pl-grid{ display: grid; gap: 6px; overflow-x: auto; }
.pl-grid__row{
  display: grid;
  grid-template-columns: 130px repeat(var(--days, 3), minmax(104px, 1fr));
  gap: 8px;
  min-width: max-content;
}
@media (max-width: 760px){ .pl-grid__row{ grid-template-columns: 96px repeat(var(--days, 3), minmax(88px, 1fr)); } }
.pl-grid__row--head{ font-size: var(--step-label); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.pl-grid__name{ display: flex; align-items: center; font-weight: 600; }
.pl-grid__day{ text-align: center; }
.pl-cell{
  display: grid;
  gap: 2px;
  padding: 12px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  text-align: center;
}
.pl-cell.is-available{ border-color: rgba(62,201,141,.45); background: rgba(62,201,141,.07); }
.pl-cell.is-rest{ border-color: rgba(242,97,90,.4); background: rgba(242,97,90,.06); }
.pl-cell.is-done{ border-color: var(--accent-line); background: var(--accent-soft); }
.pl-cell__word{ font-weight: 800; font-family: var(--display); }
.pl-cell.is-available .pl-cell__word{ color: var(--pos); }
.pl-cell.is-rest .pl-cell__word{ color: var(--neg); }
.pl-cell__num{ font-family: var(--mono); font-weight: 700; }
.pl-cell__why{ font-size: var(--step-label); color: var(--ink-faint); line-height: 1.3; }

.pl-warnings{ display: grid; gap: 6px; }
.pl-warning{
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border-left: 3px solid var(--accent-2);
  font-size: var(--step-small);
}
.pl-warning--thin{ border-left-color: var(--neg); }
.pl-warning--source{ border-left-color: var(--ink-faint); color: var(--ink-soft); }

.pl-extra{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; }
.pl-extra summary{ cursor: pointer; font-weight: 600; }
.pl-extra__list{ margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.pl-extra__item{ color: var(--ink-soft); font-size: var(--step-small); }

/* ---------- the four books compared ---------- */

.pl-compare{ display: grid; gap: 12px; margin-top: 30px; }
.pl-comparecontrols{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.pl-slider{ display: grid; gap: 6px; }
.pl-slider__top{ display: flex; justify-content: space-between; align-items: baseline; }
.pl-slider__label{ font-size: var(--step-label); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.pl-slider__value{ font-family: var(--mono); font-weight: 800; font-size: 1.3rem; color: var(--accent); }
.pl-range{ width: 100%; accent-color: var(--accent); }
.pl-compareout{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.pl-comparecard{ display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.pl-comparecard.is-ok{ border-color: rgba(71,201,126,.4); }
.pl-comparecard.is-rest{ border-color: rgba(242,97,90,.4); }
.pl-comparecard__name{ font-weight: 800; font-family: var(--display); }
.pl-comparecard__rest{ font-family: var(--mono); font-weight: 700; }
.pl-comparecard.is-ok .pl-comparecard__rest{ color: var(--pos); }
.pl-comparecard.is-rest .pl-comparecard__rest{ color: var(--neg); }
.pl-comparecard__why{ font-size: var(--step-label); color: var(--ink-soft); }

/* A wall card is two hundred pixels wide and four columns will not fit in it,
   so the printed rank is the thing that goes: the bar already carries it as a
   length, and the whole row carries it as a tooltip. The card on a player's own
   page has the room, so there it is printed as well. */
.sc-row{ grid-template-columns: minmax(0, 5.8em) minmax(34px, 1fr) 1.9em; }
.sc-row__pct{ display: none; }
.sc--large .sc-row{ grid-template-columns: minmax(0, 5.8em) minmax(34px, 1fr) 1.9em 2.2em; }
.sc--large .sc-row__pct{ display: block; }

/* Over and under are two different things and get two different colors; the
   old single "disagrees" red said there was an argument without saying which
   side the game was on. */
.sc-read__verdict.is-over{ color: var(--accent-2); }
.sc-read__verdict.is-under{ color: var(--accent); }

/* The verdict says which side the game is on, which takes more words than
   "disagrees" did, so it wraps on a narrow card rather than being clipped at
   the edge by a nowrap it never needed. */
.sc-read__verdict{ white-space: normal; flex: 0 1 auto; min-width: 0; }
.sc-read__label{ flex: 1 1 auto; min-width: 0; }

/* ---------------------------------------------------------------------------
   LINEUP LAB (Sept 7)

   A draggable list beside a number that moves. The list is the interface and
   the number is the answer, so the number is the largest thing on the screen
   and it is sticky on a desktop: dragging a hitter into the leadoff spot is
   pointless if you have to scroll up to see what it did.
   ------------------------------------------------------------------------ */

.lu-picker{ display: flex; gap: 14px; flex-wrap: wrap; margin-top: 20px; }

.lu-stage{ display: grid; grid-template-columns: 1fr 320px; gap: 22px; align-items: start; margin-top: 18px; }
@media (max-width: 940px){ .lu-stage{ grid-template-columns: 1fr; } }
.lu-side{ display: grid; gap: 14px; position: sticky; top: 14px; }
@media (max-width: 940px){ .lu-side{ position: static; } }

.lu-order{ list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lu-card{
  display: grid;
  grid-template-columns: 34px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: grab;
  transition: border-color .14s ease, transform .14s ease, opacity .14s ease;
}
.lu-card:hover{ border-color: var(--accent-line); }
.lu-card.is-dragging{ opacity: .45; }
.lu-card.is-over{ border-color: var(--accent); transform: translateY(2px); }
.lu-card__spot{ font-family: var(--mono); font-size: 1.5rem; font-weight: 800; color: var(--ink-faint); text-align: center; }
.lu-card__who{ display: grid; min-width: 0; }
.lu-card__name{ font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lu-card__line{ font-family: var(--mono); font-size: var(--step-label); color: var(--ink-faint); }
.lu-card__stats{ display: flex; gap: 14px; }
@media (max-width: 640px){ .lu-card{ grid-template-columns: 28px 1fr auto; } .lu-card__stats{ display: none; } }
.lu-mini{ display: grid; text-align: right; }
.lu-mini__value{ font-family: var(--mono); font-weight: 700; font-size: var(--step-small); }
.lu-mini__label{ font-size: 0.84rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .05em; }
.lu-card__moves{ display: grid; gap: 3px; }
.lu-move{
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.84rem;
  cursor: pointer;
}
.lu-move:disabled{ opacity: .35; cursor: default; }
.lu-move:hover:not(:disabled){ border-color: var(--accent); color: var(--ink); }

.lu-score{ display: grid; gap: 12px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.lu-score__big{ display: grid; }
.lu-score__runs{ font-family: var(--mono); font-size: 3rem; font-weight: 800; line-height: 1; color: var(--accent); }
.lu-score__label{ font-size: var(--step-label); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.lu-score__row{ display: grid; gap: 8px; }
.lu-tile{ display: grid; }
.lu-tile__value{ font-family: var(--mono); font-weight: 700; font-size: 1.2rem; }
.lu-tile.is-up .lu-tile__value{ color: var(--pos); }
.lu-tile.is-down .lu-tile__value{ color: var(--neg); }
.lu-tile__label{ font-size: var(--step-label); color: var(--ink-faint); }

.lu-controls{ display: grid; gap: 8px; }
.lu-controls .cz-start, .lu-controls .cz-share{ justify-self: stretch; text-align: center; }

.lu-bench{ display: grid; gap: 8px; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--radius); }
.lu-bench__list{ display: grid; gap: 4px; }
.lu-benchman{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--surface);
  color: inherit;
  font: inherit;
  font-size: var(--step-small);
  cursor: pointer;
}
.lu-benchman:hover{ border-color: var(--accent); }
.lu-benchman__ops{ font-family: var(--mono); color: var(--ink-soft); }

.lu-advice{ display: grid; gap: 10px; margin-top: 24px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.lu-advice__title{ margin: 0; font-size: 1.1rem; }
.lu-advice__rows{ display: grid; gap: 4px; }
.lu-advice__row{ display: grid; grid-template-columns: 200px 1fr; gap: 12px; padding: 5px 0; border-top: 1px solid var(--line-soft); font-size: var(--step-small); }
@media (max-width: 640px){ .lu-advice__row{ grid-template-columns: 1fr; gap: 2px; } }
.lu-advice__name{ font-weight: 600; }
.lu-advice__verdict{ color: var(--accent-2); }
.lu-advice__verdict.is-fine{ color: var(--ink-faint); }
.lu-advice__note{ margin: 0; font-size: var(--step-label); color: var(--ink-faint); }

.lu-honest{ display: grid; gap: 8px; margin-top: 22px; padding: 16px 18px; background: var(--surface-2); border: 1px solid var(--line-soft); border-left: 3px solid var(--accent-2); border-radius: var(--radius); }
.lu-honest__text{ margin: 0; color: var(--ink-soft); max-width: 80ch; }

/* ---------------------------------------------------------------------------
   YOUR LINE, AND THE CLINIC (Sept 7)

   Two halves of one page. The top is a form and a set of readouts, the bottom
   is a catalog that expands in place. The interval bar is the one piece of
   custom drawing: a range on a scale, with the point estimate marked, because
   the whole message is that the range is wide.
   ------------------------------------------------------------------------ */

.yl-form{ display: grid; gap: 14px; margin-top: 20px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.yl-form__top{ display: flex; gap: 16px; flex-wrap: wrap; }
.yl-form__note{ margin: 0; color: var(--ink-soft); font-size: var(--step-small); }
.yl-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; }
.yl-cell{ display: grid; gap: 3px; }
.yl-cell__label{ font-size: var(--step-label); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }
.yl-cell__hint{ font-size: 0.84rem; color: var(--ink-faint); }
.yl-input{
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.05rem;
  text-align: center;
  width: 100%;
}
.yl-input:focus{ outline: 2px solid var(--accent-line); outline-offset: 1px; }

.yl-results{ display: grid; gap: 20px; margin-top: 24px; }
.yl-results__title{ font-size: 1.4rem; }
.yl-sub{ margin: 0 0 8px; font-size: 1.05rem; }

/* EVERY TILE THE SAME BOX. The notes under these numbers run from three
   words to seven, so a row whose longest note wrapped to two lines came out
   twenty pixels taller than the row above it, and twelve tiles over two rows
   read as two different sets of boxes. The rows are told to share a height
   and the contents sit at the top of the box, so the only thing that changes
   from one tile to the next is what it says. */
.yl-tiles{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  grid-auto-rows: 1fr;
  gap: 8px;
}
.yl-tile{
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.yl-tile__label{ font-size: var(--step-label); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.yl-tile__value{ font-family: var(--mono); font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.yl-tile__note{ font-size: 0.84rem; color: var(--ink-faint); }

.yl-interval, .yl-signal, .yl-standing, .yl-read, .yl-compare{
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
/* One heading treatment for all five, so the boxes read as one set. */
.yl-interval > .yl-sub,
.yl-signal > .yl-sub,
.yl-standing > .yl-sub,
.yl-read > .yl-sub,
.yl-compare > .yl-sub{
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: -.01em;
}
.yl-intervalbar{ position: relative; height: 40px; margin: 18px 0 26px; background: var(--surface-3); border-radius: 6px; }
.yl-intervalspan{ position: absolute; top: 0; height: 100%; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 6px; }
.yl-intervalpoint{ position: absolute; top: -6px; width: 3px; height: 52px; background: var(--accent-2); }
.yl-intervaltick{ position: absolute; top: 44px; transform: translateX(-50%); font-family: var(--mono); font-size: 0.84rem; color: var(--ink-faint); }
.yl-interval__text{ margin: 0; color: var(--ink-soft); }

.yl-signalrow, .yl-standrow{ display: grid; grid-template-columns: 150px 1fr 170px; gap: 12px; align-items: center; padding: 4px 0; }
@media (max-width: 700px){ .yl-signalrow, .yl-standrow{ grid-template-columns: 110px 1fr; } .yl-signal__note, .yl-stand__word{ grid-column: 1 / -1; } }
.yl-signal__label, .yl-stand__label{ font-size: var(--step-small); }
.yl-signal__track{ height: 8px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.yl-signal__fill{ height: 100%; background: var(--ink-faint); }
.yl-signal__fill.is-ready{ background: var(--pos); }
.yl-signal__note{ font-size: var(--step-label); color: var(--ink-faint); text-align: right; }
.yl-signal__foot{ margin: 10px 0 0; font-size: var(--step-label); color: var(--ink-faint); }

.yl-stand__track{ position: relative; height: 14px; background: var(--surface-3); border-radius: 4px; }
.yl-stand__zero{ position: absolute; left: 50%; top: -3px; width: 1px; height: 20px; background: var(--line); }
.yl-stand__bar{ position: absolute; top: 0; height: 100%; border-radius: 3px; }
.yl-stand__bar.is-up{ background: var(--pos); }
.yl-stand__bar.is-down{ background: var(--neg); }
.yl-stand__word{ font-size: var(--step-small); color: var(--ink-soft); text-align: right; }

/* The Read used to wear a three pixel accent stripe down its left edge while
   the four boxes around it had a hairline, which is the one panel on the page
   that did not match the others. The heading carries the emphasis instead. */
.yl-read{ display: grid; gap: 8px; }
.yl-read__line{ margin: 0; color: var(--ink-soft); max-width: 82ch; }

.yl-compare{ display: grid; gap: 12px; }
.yl-compare__hint{ margin: 0; font-size: var(--step-small); color: var(--ink-faint); max-width: 80ch; }
.yl-compare__why{ margin: 0; color: var(--ink-soft); }
.yl-matches{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.yl-match{ display: grid; gap: 4px; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); }
.yl-match.is-best{ border-color: var(--accent); }
.yl-match__badge{ font-size: var(--step-label); text-transform: uppercase; letter-spacing: .07em; color: var(--accent); font-weight: 700; }
.yl-match__name{ margin: 0; font-size: 1.2rem; }
.yl-match__season{ font-family: var(--mono); font-size: var(--step-label); color: var(--ink-faint); }
.yl-match__stats{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.yl-match__stat{ display: grid; }
.yl-match__statvalue{ font-family: var(--mono); font-weight: 700; }
.yl-match__statlabel{ font-size: 0.84rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .05em; }
.yl-match__link{ justify-self: start; margin-top: 6px; color: inherit; text-decoration: none; font-size: var(--step-small); border-bottom: 1px solid var(--accent-line); }
.yl-match__link:hover{ border-bottom-color: var(--accent); }

/* ---------- the clinic ---------- */

.yl-clinic{ display: grid; gap: 12px; margin-top: 34px; }
.yl-clinic__title{ font-size: 1.6rem; }
.yl-clinic__blurb{ margin: 0; color: var(--ink-soft); max-width: 82ch; }
.yl-search{ display: grid; }
.yl-searchinput{
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 1.02rem;
}
.yl-searchinput:focus{ outline: 2px solid var(--accent-line); outline-offset: 1px; }

.yl-strugglelist{ display: grid; gap: 6px; }
.yl-struggle{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.yl-struggle.is-open{ border-color: var(--accent-line); }
.yl-struggle__head{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 14px 16px;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.yl-struggle__head:hover{ background: var(--surface-2); }
.yl-struggle__name{ font-weight: 600; }
.yl-struggle__area{ font-size: var(--step-label); color: var(--ink-faint); white-space: nowrap; }
.yl-struggle__body{ display: grid; gap: 14px; padding: 4px 16px 18px; }
.yl-struggle__sub{ margin: 0 0 4px; font-size: var(--step-small); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.yl-block__list{ margin: 0; padding-left: 18px; display: grid; gap: 5px; }
.yl-block__item{ color: var(--ink-soft); }

.yl-drills{ display: grid; gap: 8px; }
.yl-drill{ display: grid; gap: 3px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.yl-drill__head{ display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.yl-drill__name{ font-weight: 700; }
.yl-drill__reps{ font-family: var(--mono); font-size: var(--step-label); color: var(--accent-2); }
.yl-drill__how{ margin: 0; color: var(--ink-soft); font-size: var(--step-small); }
.yl-drill__fixes{ margin: 0; font-size: var(--step-label); color: var(--ink-faint); }

.yl-avoid{ display: grid; gap: 3px; padding: 12px 14px; border-left: 3px solid var(--neg); background: rgba(242,97,90,.06); border-radius: var(--radius-sm); }
.yl-avoid__label{ font-size: var(--step-label); text-transform: uppercase; letter-spacing: .06em; color: var(--neg); font-weight: 700; }
.yl-avoid__text{ margin: 0; color: var(--ink-soft); }
.yl-struggle__medical{ margin: 0; padding: 12px 14px; border-left: 3px solid var(--accent-2); background: var(--accent-2-soft); border-radius: var(--radius-sm); color: var(--ink-soft); }

.yl-watch, .yl-related{ display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.yl-watch__label{ font-size: var(--step-label); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.yl-watch__link, .yl-related__link{
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: var(--step-small);
  text-decoration: none;
  cursor: pointer;
}
.yl-watch__link:hover, .yl-related__link:hover{ border-color: var(--accent); }

/* ---------------------------------------------------------------------------
   YOUR CARD (Sept 7)

   The page that ties the tab together. Two rules run through it. The card at
   the top is the only thing with weight, because everything below it is a list
   and a page of equal-weight lists is a page nobody reads. And a challenge row
   is a link, all of it, so the thing to do next is never more than one click
   from the thing that told you to do it.
   ------------------------------------------------------------------------ */

.pf-card{
  display: grid;
  gap: 12px;
  margin-top: 22px;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}
.pf-card__head{ display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.pf-card__who{ display: grid; gap: 4px; min-width: 240px; flex: 1; }
.pf-name{
  width: 100%;
  max-width: 420px;
  padding: 4px 0;
  border: none;
  border-bottom: 1px dashed var(--line);
  background: none;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.pf-name:focus{ outline: none; border-bottom-color: var(--accent); }
.pf-name::placeholder{ color: var(--ink-faint); font-weight: 600; }
.pf-card__since{ font-size: var(--step-label); color: var(--ink-faint); font-family: var(--mono); }
.pf-card__rank{ display: grid; justify-items: end; text-align: right; }
.pf-card__rankLabel{ font-size: var(--step-label); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); }
.pf-card__rankName{ font-family: var(--display); font-size: 2rem; font-weight: 900; line-height: 1.05; color: var(--accent); }
.pf-card__rankNote{ font-size: var(--step-small); color: var(--ink-soft); max-width: 34ch; }
.pf-card__next{ margin: 0; color: var(--ink-soft); }
.pf-tiles{ display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.pf-tile{ display: grid; gap: 1px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--radius); }
.pf-tile__value{ font-family: var(--mono); font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.pf-tile__label{ font-size: var(--step-label); color: var(--ink-soft); }
.pf-tile__note{ font-size: 0.84rem; color: var(--ink-faint); }
.pf-card__actions{ display: flex; gap: 10px; flex-wrap: wrap; }

.pf-flash{
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--accent-3-soft);
  border: 1px solid rgba(62,201,141,.45);
  animation: riseIn .25s ease-out both;
}
.pf-flash__label{ font-weight: 800; color: var(--pos); font-family: var(--display); }
.pf-flash__name{ font-size: var(--step-small); color: var(--ink-soft); }

.pf-block{ display: grid; gap: 12px; margin-top: 28px; }
.pf-block__head{ display: grid; gap: 2px; }
.pf-block__title{ font-size: 1.3rem; }
.pf-block__note{ margin: 0; font-size: var(--step-small); color: var(--ink-faint); }

/* ---------- challenges ---------- */

.pf-chlist{ display: grid; gap: 6px; }
.pf-ch{
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) 1fr 130px;
  gap: 16px;
  align-items: center;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  transition: border-color .14s ease, transform .14s ease;
}
.pf-ch:hover{ border-color: var(--accent); transform: translateX(2px); }
.pf-ch.is-done{ border-color: rgba(62,201,141,.5); background: rgba(62,201,141,.06); }
@media (max-width: 700px){
  .pf-ch{ grid-template-columns: 1fr auto; }
  .pf-ch__track{ grid-column: 1 / -1; }
}
.pf-ch__words{ display: grid; }
.pf-ch__name{ font-weight: 700; }
.pf-ch__note{ font-size: var(--step-label); color: var(--ink-faint); }
.pf-ch__track{ height: 8px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.pf-ch__fill{ height: 100%; background: var(--accent); transition: width .4s ease; }
.pf-ch.is-done .pf-ch__fill{ background: var(--pos); }
.pf-ch__tail{ display: grid; justify-items: end; }
.pf-ch__count{ font-family: var(--mono); font-weight: 700; }
.pf-ch.is-done .pf-ch__count{ color: var(--pos); }
.pf-ch__points{ font-size: var(--step-label); color: var(--ink-faint); }

/* ---------- what next ---------- */

.pf-next{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.pf-nextitem{
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-2);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
}
.pf-nextitem:hover{ border-color: var(--accent); border-left-color: var(--accent); }
.pf-nextitem__label{ font-weight: 700; }
.pf-nextitem__why{ font-size: var(--step-small); color: var(--ink-soft); }

/* ---------- the ladder ---------- */

.pf-ladder{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.pf-rung{
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  opacity: .55;
}
.pf-rung.is-passed{ opacity: 1; }
.pf-rung.is-here{ border-color: var(--accent); background: var(--accent-soft); }
.pf-rung__name{ font-family: var(--display); font-weight: 800; }
.pf-rung__at{ font-family: var(--mono); font-size: var(--step-label); color: var(--ink-faint); }
.pf-rung__note{ font-size: var(--step-label); color: var(--ink-soft); }
.pf-rung.is-here .pf-rung__note{ color: var(--accent); font-weight: 700; }

/* ---------- the record ---------- */

.pf-record{ display: grid; gap: 2px; }
.pf-record__row{
  display: grid;
  grid-template-columns: 210px 1fr 70px 70px;
  gap: 12px;
  align-items: baseline;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
  border: 1px solid transparent;
}
.pf-record__row:hover{ background: var(--surface); border-color: var(--line); }
.pf-record__row--head{ font-size: var(--step-label); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.pf-record__row--head:hover{ background: none; border-color: transparent; }
@media (max-width: 760px){
  .pf-record__row{ grid-template-columns: 1fr 60px 60px; }
  .pf-record__detail{ grid-column: 1 / -1; }
}
.pf-record__what{ font-weight: 600; }
.pf-record__detail{ font-size: var(--step-small); color: var(--ink-soft); }
.pf-record__n{ font-family: var(--mono); text-align: right; color: var(--ink-soft); }

/* ---------- the transfer code ---------- */

.pf-transfer{ display: grid; gap: 12px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.pf-transfer__text, .pf-transfer__note{ margin: 0; color: var(--ink-soft); max-width: 84ch; }
.pf-transfer__note{ font-size: var(--step-label); color: var(--ink-faint); }
.pf-transfer__row{ display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: start; }
@media (max-width: 640px){ .pf-transfer__row{ grid-template-columns: 1fr; } }
.pf-code{
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.86rem;
  resize: vertical;
  word-break: break-all;
}
.pf-transfer__result{ margin: 0; font-weight: 600; }
.pf-transfer__result.is-ok{ color: var(--pos); }
.pf-transfer__result.is-bad{ color: var(--neg); }

/* ---------- the strip on the tab front ---------- */

.tstrip{ display: grid; grid-template-columns: minmax(260px, 1fr) 1.2fr; gap: 14px; margin-top: 20px; }
@media (max-width: 820px){ .tstrip{ grid-template-columns: 1fr; } }
.tstrip__card, .tstrip__tasks{
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
}
.tstrip__card:hover{ border-color: var(--accent); }
.tstrip__label{ font-size: var(--step-label); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); }
.tstrip__rank{ font-family: var(--display); font-size: 1.8rem; font-weight: 900; line-height: 1; color: var(--accent); }
.tstrip__points{ font-size: var(--step-small); color: var(--ink-soft); }
.tstrip__tasks{ gap: 4px; }
.tstrip__task{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: inherit;
  text-decoration: none;
  font-size: var(--step-small);
}
.tstrip__task:hover{ background: var(--surface-3); }
.tstrip__task.is-done{ color: var(--ink-faint); }
.tstrip__task.is-done .tstrip__taskCount{ color: var(--pos); }
.tstrip__taskCount{ font-family: var(--mono); font-weight: 700; }
.tstrip__more{ margin-top: 4px; font-size: var(--step-label); color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--accent-line); justify-self: start; }
.tstrip__more:hover{ border-bottom-color: var(--accent); }

/* The badge tiles are links on the profile, so they need the link reset the
   rest of the site uses: color inherited, no underline, no browser blue. */
a.badge{ color: inherit; text-decoration: none; }
a.badge:hover{ border-color: var(--accent-line); }

/* =======================================================================
   SEPT 8 — round six. Connor's list, in the order he wrote it.
   Everything below is a correction to something above it, so it is kept
   together at the bottom of the file where the cascade puts it last, and
   each block says which complaint it answers.
   ======================================================================= */

/* -----------------------------------------------------------------------
   1. THE INITIALS SHOWING THROUGH THE LOGOS.

   Every logo on this site is drawn over a fallback: two or three letters in
   plain type, sitting underneath, so a club with no published mark still has
   something in the box. That was written for a photograph, which is opaque.
   A club logo is an SVG with a transparent background, so the letters were
   showing THROUGH the mark that had loaded on top of them, which is exactly
   the mess Connor is describing.

   The fallback is not removed, because a club really can have no logo. It is
   hidden the moment a real image has actually arrived, which every one of
   these images already announces by adding .is-loaded to itself.
   ----------------------------------------------------------------------- */
.hero__shot:has(> img.is-loaded) .hero__initials,
.path__badge:has(> img.is-loaded) .path__initials,
.card-photo:has(> img.is-loaded) .card-photo-initials,
.sc__front:has(> img.sc__art.is-loaded) .sc-plate{
  opacity: 0;
  visibility: hidden;
}
/* Belt and braces for anything that cannot do :has(): the fallback is painted
   on its own opaque ground rather than floating on the card, so even where it
   is still visible it reads as a placeholder tile and not as ghost lettering
   behind a badge. */
.path__badge, .hero__shot, .card-photo{ background-color: var(--surface-2); }
.path__badge{ border-radius: 8px; overflow: hidden; }

/* -----------------------------------------------------------------------
   2. TEXT VISIBILITY.

   The size floor is lifted in the rules above. What is left is the two
   things a floor cannot fix: weight and color. Secondary text across this
   site was set at 400 in --ink-faint, which is a gray on a near-black
   ground, and at nine tenths of a rem that is genuinely hard to read.
   ----------------------------------------------------------------------- */
body{ font-size: var(--step-0); line-height: 1.6; letter-spacing: -.005em; }
h1, h2, h3, h4, h5{ font-family: var(--display); letter-spacing: -.025em; }
h1, h2{ font-weight: 800; }
h3, h4{ font-weight: 700; }

/* Small print carries weight instead of relying on size alone. */
.hub__source, .empty-note, .finder-wrap__hint,
.toolcard__point, .tab__itemNote, .tab__blurb,
.sc-block__note, .sc-fine, .pl-slider__note, .pl-tile__note{
  font-weight: 500;
}
/* Uppercase micro-labels need tracking or they turn into a smear at any size. */
.tstrip__label, .sc-tile__label, .score__probablesLabel, .tab__soon{
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--ink-soft);
}

/* -----------------------------------------------------------------------
   3. THE SHOW CARD: TELLING THE GAME'S RATING APART FROM THE PLAYER.

   The old row was one track with a blue tick and a gold tick on it, and a
   sentence at the top of the block saying which was which. Connor read it and
   could not tell which number was the video game and which was the man, which
   means the drawing was doing the explaining and the drawing was not enough.

   The rebuild puts the WORDS first: two boxes, each headed by a sentence
   fragment that names what it is, and only then the numbers. The bar
   underneath is now a second view of the same two facts, with each mark
   carrying its own word, the gap between them shaded, and the two ends of the
   scale labeled so a percentile reads as a position rather than as a number.

   The two are also separated by SHAPE, not just color: the game's mark sits
   above the track, the player's below it. That survives a color-blind reader
   and a black and white screenshot, which a blue tick and a gold tick do not.
   ----------------------------------------------------------------------- */
.sc-headline__cap{
  margin: 12px 0 3px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.sc-headline{ margin-top: 0; }

.sc-read__key{
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  margin: 0 0 10px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.sc-read__keyItem{ display: flex; align-items: center; gap: 5px; font-size: 0.8rem; line-height: 1.3; }
.sc-read__keySwatch{ width: 10px; height: 10px; border-radius: 3px; flex: none; }
.sc-read__keyItem.is-card .sc-read__keySwatch{ background: var(--accent); }
.sc-read__keyItem.is-real .sc-read__keySwatch{ background: var(--accent-2); }
.sc-read__keyWord{ font-family: var(--mono); font-weight: 800; letter-spacing: .07em; font-style: normal; }
.sc-read__keyItem.is-card .sc-read__keyWord{ color: var(--accent); }
.sc-read__keyItem.is-real .sc-read__keyWord{ color: var(--accent-2); }
.sc-read__keyWhat{ color: var(--ink-soft); font-weight: 500; }

.sc-read__row{
  margin-bottom: 14px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line-soft);
}
.sc-read__row:last-child{ border-bottom: 0; padding-bottom: 0; }
.sc-read__label{ font-size: 0.92rem; font-weight: 800; font-family: var(--display); letter-spacing: -.02em; }
.sc-read__verdict{ font-size: 0.8rem; font-weight: 800; letter-spacing: .04em; }

/* The two named boxes. */
/* auto-fit rather than a viewport media query: this back is a fixed-size card
   inside a wall, so what matters is how wide the CARD is, not the window. */
.sc-read__pair{ display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 6px; margin: 7px 0 4px; }
.sc-read__side{
  display: flex; flex-direction: column; gap: 1px;
  padding: 7px 8px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  border-top-width: 3px;
  background: var(--surface-2);
  min-width: 0;
}
.sc-read__side.is-card{ border-top-color: var(--accent); background: var(--accent-soft); }
.sc-read__side.is-real{ border-top-color: var(--accent-2); background: var(--accent-2-soft); }
.sc-read__sideTag{
  font-size: .84rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  line-height: 1.25;
}
.sc-read__side.is-card .sc-read__sideTag{ color: var(--accent); }
.sc-read__side.is-real .sc-read__sideTag{ color: var(--accent-2); }
.sc-read__sideNum{
  font-family: var(--mono); font-weight: 700; font-size: 1.5rem; line-height: 1.05;
  color: var(--ink); margin-top: 2px;
}
/* The unit rides on the number itself, so "62nd" can never be read as a place
   in a list of big leaguers. It sits under the figure in ordinary type. */
.sc-read__sideUnit{
  display: block; margin-top: 2px;
  font-family: var(--sans, inherit); font-weight: 700; font-size: .84rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint);
}
.sc-read__sideSub{ font-size: .84rem; line-height: 1.35; color: var(--ink-soft); font-weight: 500; margin-top: 3px; }

/* The bar, with room above and below it for the two labeled marks, and the
   two end words beside it rather than over it. */
.sc-read__scale{
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 7px;
  margin: 28px 0 36px;
}
.sc-read__track{
  position: relative; display: block; height: 6px;
  border-radius: 3px;
  background: var(--surface-3);
  border: 1px solid var(--line);
}
.sc-read__band{
  position: absolute; top: 0; bottom: 0;
  background: repeating-linear-gradient(115deg,
    var(--ink-faint) 0 2px, transparent 2px 6px);
  opacity: .5;
}
.sc-read__scaleEnd{
  font-size: .84rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700; white-space: nowrap;
}
.sc-read__mark{
  position: absolute; width: 3px; height: 16px; border-radius: 2px;
  transform: translateX(-1.5px);
}
.sc-read__mark.is-card{ top: -11px; background: var(--accent); }
.sc-read__mark.is-real{ top: 1px; background: var(--accent-2); }
.sc-read__markTag{
  position: absolute; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: .84rem; font-weight: 800; letter-spacing: .09em;
  padding: 1px 4px; border-radius: 3px; white-space: nowrap;
}
.sc-read__mark.is-card .sc-read__markTag{
  bottom: 17px; color: var(--accent-ink); background: var(--accent);
}
.sc-read__mark.is-real .sc-read__markTag{
  top: 17px; color: #12100a; background: var(--accent-2);
}
.sc-read__words{ margin: 0; font-size: 0.84rem; line-height: 1.55; color: var(--ink-soft); font-weight: 500; }
.sc-read__saidGame{ color: var(--accent); font-weight: 800; }
.sc-read__saidReal{ color: var(--accent-2); font-weight: 800; }

/* On the wall the card is narrow, so the two boxes stack rather than shrink
   the numbers to the point where they are back to being unreadable. */


/* =====================================================================
   THE FRONT DOOR, AND EVERY TOPIC PAGE BEHIND IT       (Sept 8)
   =====================================================================

   Two surfaces, built together because they are two halves of one idea: a
   search that finds any thing in baseball, and one page shape that draws
   whichever thing it found.

   NO BLUE LINK TEXT ANYWHERE IN HERE, at Connor's request and for a good
   reason: on a page where most of the words are links, blue text stops being
   a signal and becomes the background. A link is marked by its surface, its
   border and how it behaves under the cursor, and its words stay ink.
   ===================================================================== */

/* ---------- matches as you type ---------- */

.livehits{
  position: absolute;
  z-index: 40;
  left: 0; right: 0;
  margin-top: .5rem;
  max-height: min(60vh, 30rem);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: .4rem;
  text-align: left;
}
.livehits__group + .livehits__group{ border-top: 1px solid var(--line-soft); margin-top: .35rem; padding-top: .35rem; }
.livehits__kind{
  margin: .3rem .55rem .3rem;
  font-family: var(--mono);
  font-size: 0.84rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.livehit{
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: .6rem;
  width: 100%;
  padding: .48rem .55rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.livehit:hover,
.livehit.is-active{ background: var(--surface-2); }
.livehit__label{ font-weight: 600; }
.livehit__detail{ color: var(--ink-soft); font-size: var(--step-small); }
.livehit__league{
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- the six areas ---------- */

.areas{ margin: 3rem 0 0; }
.areas__title{ margin: 0 0 .3rem; font-size: 1.5rem; letter-spacing: -.01em; }
.areas__sub{ margin: 0 0 1.1rem; color: var(--ink-soft); max-width: 62ch; }
.areas__grid{
  display: grid;
  /* Six cards. auto-fit gave four and then two, which reads as a row that
     ran out rather than as a set. Three and three is the shape of the thing. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
}
@media (max-width: 1080px){ .areas__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px){ .areas__grid{ grid-template-columns: 1fr; } }
.areacard{
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1.05rem 1.1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.areacard:hover{ background: var(--surface-2); transform: translateY(-1px); }
.areacard--pitching{ border-left-color: var(--accent-2); }
.areacard--defense{ border-left-color: var(--accent-3); }
.areacard--baserunning{ border-left-color: var(--accent-hot); }
.areacard--strategy{ border-left-color: var(--ink-soft); }
.areacard--rules{ border-left-color: var(--neg); }
.areacard__name{ font-size: 1.22rem; font-weight: 800; letter-spacing: -.01em; }
.areacard__tagline{ font-family: var(--mono); font-size: 0.88rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.areacard__line{ color: var(--ink-soft); font-size: var(--step-small); line-height: 1.5; margin-top: .2rem; }
.areacard__counts{ margin-top: .45rem; font-family: var(--mono); font-size: 0.86rem; color: var(--ink-faint); }

/* ---------- the wall ---------- */

.wall{ margin: 3rem 0 0; }
.wall__title{ margin: 0 0 .3rem; font-size: 1.5rem; letter-spacing: -.01em; }
.wall__sub{ margin: 0 0 1.1rem; color: var(--ink-soft); max-width: 62ch; }
.wall__grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: .8rem;
}
.walltile{
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .95rem 1rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  transition: background .12s ease, transform .12s ease;
}
.walltile:hover{ background: var(--surface-2); transform: translateY(-1px); }
.walltile__top{ display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.walltile__why{
  font-family: var(--mono);
  font-size: 0.84rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.walltile__badge{
  font-family: var(--mono);
  font-size: 0.86rem;
  font-weight: 700;
  padding: .1rem .4rem;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent-hot);
}
.walltile__label{ font-size: 1.06rem; font-weight: 700; }
.walltile__note{ color: var(--ink-soft); font-size: var(--step-small); line-height: 1.5; }

/* ---------- a topic page ---------- */

.topic{ max-width: 74rem; margin: 0 auto; padding: 0 1.1rem 4rem; }

.thero{
  margin: 0 -1.1rem 2rem;
  padding: 2.6rem 1.1rem 2.2rem;
  background: linear-gradient(180deg, var(--surface-2), var(--bg));
  border-bottom: 1px solid var(--line);
}
.thero__inner{ max-width: 74rem; margin: 0 auto; }
.thero__eyebrow{ display: flex; align-items: center; gap: .55rem; margin: 0 0 .5rem; }
.thero__kind{
  font-family: var(--mono);
  font-size: 0.86rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.thero__badge{
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.88rem;
  padding: .12rem .45rem;
  border-radius: 5px;
  background: var(--accent-soft);
  color: var(--accent-hot);
  border: 1px solid var(--accent-line);
}
.thero__title{ margin: 0; font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; letter-spacing: -.025em; line-height: 1.05; }
.thero__headline{ margin: .8rem 0 0; max-width: 60ch; font-size: 1.2rem; line-height: 1.55; color: var(--ink-soft); }
.thero--travel{ background: linear-gradient(180deg, var(--accent-2-soft), var(--bg)); }
.thero--ll{ background: linear-gradient(180deg, var(--accent-3-soft), var(--bg)); }
.thero--college{ background: linear-gradient(180deg, var(--college-soft), var(--bg)); }

.tbody{ display: grid; gap: 1.6rem; }

/* the written half */
.twritten{ display: grid; gap: 1.35rem; max-width: 68ch; }
.twritten[data-mode="simple"] .tsection--deep{ display: none; }

.tdepth{ display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.tdepth__label{ font-family: var(--mono); font-size: 0.84rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.tdepth__group{ display: inline-flex; padding: .18rem; gap: .18rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; }
.tdepth__btn{
  padding: .3rem .8rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: var(--step-small);
  cursor: pointer;
}
.tdepth__btn.is-on{ background: var(--surface); color: var(--ink); font-weight: 600; }

.tsection__label{
  margin: 0 0 .35rem;
  font-family: var(--mono);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent-hot);
}
.tsection__text{ margin: 0; font-size: 1.06rem; line-height: 1.68; }

/* the computed half */
.tcomputed__stamp{
  margin: 0;
  padding: .7rem .9rem;
  border-left: 3px solid var(--accent-3);
  background: var(--accent-3-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--step-small);
  color: var(--ink-soft);
  max-width: 68ch;
}
.tcomputed{ display: grid; gap: 1.5rem; }

.tpanel{
  padding: 1.15rem 1.2rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.tpanel__head{ margin-bottom: .9rem; }
.tpanel__title{ margin: 0 0 .3rem; font-size: 1.14rem; font-weight: 700; letter-spacing: -.01em; }
.tpanel__note{ margin: 0; color: var(--ink-soft); font-size: var(--step-small); line-height: 1.6; max-width: 74ch; }
.tpanel__footer{ margin: .9rem 0 0; padding-top: .8rem; border-top: 1px solid var(--line-soft); color: var(--ink-soft); font-size: var(--step-small); line-height: 1.6; }
.tpanel__standalone{ margin: 0; color: var(--ink-soft); line-height: 1.65; }
.tpanel__empty{ margin: 0; color: var(--ink-faint); }

/* wide content scrolls inside its own box, never the page */
.tpanel__scroll{ overflow-x: auto; }
.tpanel__table{ width: 100%; border-collapse: collapse; font-size: var(--step-small); }
.tpanel__table th{
  text-align: left;
  padding: .45rem .6rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.84rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.tpanel__table td{ padding: .5rem .6rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; line-height: 1.5; }
.tpanel__table td.is-figure{ font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tpanel__table tr.is-lit td{ background: var(--accent-soft); font-weight: 600; }
.tpanel__subrow td{ padding-top: 0; color: var(--ink-faint); font-size: 0.9rem; }
.tpanel__link{ color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
.tpanel__link:hover{ border-bottom-color: var(--accent); }

/* bars */
.tbars{ list-style: none; margin: 0; padding: 0; display: grid; gap: .38rem; }
.tbar{ display: grid; grid-template-columns: 1.6rem 1fr auto; align-items: center; gap: .7rem; }
.tbar__rank{ font-family: var(--mono); font-size: 0.88rem; color: var(--ink-faint); text-align: right; }
.tbar__body{ display: grid; gap: .22rem; min-width: 0; }
.tbar__names{ display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
.tbar__name{ font-weight: 600; color: inherit; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.tbar__name:hover{ text-decoration: underline; text-underline-offset: 3px; }
.tbar__sub{ font-family: var(--mono); font-size: 0.88rem; color: var(--ink-faint); }
.tbar__track{ height: 6px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.tbar__fill{ display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.tbar__value{ font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; }

/* trend */
.ttrend__wrap{ display: grid; gap: .7rem; }
.ttrend{ width: 100%; height: auto; display: block; }
.ttrend__grid{ stroke: var(--line-soft); stroke-width: 1; }
.ttrend__gridlabel{ fill: var(--ink-faint); font-family: var(--mono); font-size: 13px; }
.ttrend__line{ stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ttrend__mark{ fill: var(--accent-2); stroke: var(--bg); stroke-width: 1.5; }
.ttrend__marks{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.ttrend__markItem{
  font-family: var(--mono);
  font-size: 0.88rem;
  color: var(--ink-soft);
  padding-left: .7rem;
  border-left: 3px solid var(--accent-2);
}

/* link rows inside a panel */
.tlinks{ display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .55rem; }
.tlink{
  display: grid;
  gap: .18rem;
  padding: .7rem .8rem;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
}
.tlink:hover{ background: var(--surface-3); border-color: var(--line); }
.tlink__top{ display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; }
.tlink__label{ font-weight: 700; }
.tlink__name{ font-size: 0.9rem; color: var(--ink-faint); }
.tlink__note{ color: var(--ink-soft); font-size: 0.9rem; line-height: 1.5; }

/* the graph out */
.tnext{ margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.tnext__title{ margin: 0 0 1rem; font-size: 1.3rem; letter-spacing: -.01em; }
.tnext__grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .7rem; }
.tnextcard{
  display: grid;
  gap: .28rem;
  padding: .9rem 1rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  transition: background .12s ease, transform .12s ease;
}
.tnextcard:hover{ background: var(--surface-2); transform: translateY(-1px); }
.tnextcard__why{ color: var(--ink-soft); font-size: 0.92rem; line-height: 1.5; }
.tnextcard__label{ font-size: 1.08rem; font-weight: 700; letter-spacing: -.005em; }
.tnextcard__note{ color: var(--ink-soft); font-size: 0.9rem; line-height: 1.5; }

.tloading{ padding: 3rem 0; color: var(--ink-faint); font-family: var(--mono); }

@media (max-width: 640px){
  .tbar{ grid-template-columns: 1.3rem 1fr auto; gap: .5rem; }
  .thero{ padding-top: 1.8rem; }
  .tpanel{ padding: 1rem .9rem 1.1rem; }
}

/* -----------------------------------------------------------------------
   5. THE NAV MENUS SCROLL, VISIBLY.

   The cap is set in script from the real distance to the bottom of the
   window (see nav.js), because the stylesheet's calc() assumed a header
   height that is not fixed. What is left here is making the scroll OBVIOUS:
   a menu that scrolls with an invisible scrollbar looks exactly like a menu
   that is cut off, which is what it was reported as.
   ----------------------------------------------------------------------- */
.tab__menu{
  scrollbar-width: thin;
  scrollbar-color: var(--ink-faint) transparent;
  scrollbar-gutter: stable;
}
/* A soft fade at the bottom edge, but ONLY on a panel that really does have
   more below the fold. A fade on a panel that fits is just a panel that looks
   cut off, which is the complaint this is fixing.

   IT IS AN OVERLAY, NOT A MASK. The first version faded the panel with
   `mask-image`, and a mask does not know the difference between the text in a
   menu and the menu itself: it took the BACKGROUND and the border away with
   the words, so the bottom of an open dropdown went see-through and the page
   underneath read straight through it. The fade is a gradient painted on top
   of the last rows now, in the panel's own surface color, so the menu stays
   solid and only the words fade under it. */
.tab__menu.is-scrolly::after{
  content: "";
  display: block;
  position: sticky;
  bottom: 0;                    /* pinned to the bottom of the scrolling area */
  height: 26px;
  margin: -26px -7px 0;         /* sit over the last rows, edge to edge */
  background: linear-gradient(to bottom, transparent, var(--surface) 82%);
  pointer-events: none;
}
/* The wide panel is a grid, so its fade has to span both columns rather than
   becoming a third cell in the last row. */
.tab__menu--wide.is-scrolly::after{ grid-column: 1 / -1; }

/* A NATIVE DROPDOWN LIST IS NOT STYLED BY THE RULE ABOVE IT.
   Every <select> on the site is painted in the site's colors, but the list
   that opens when you click one is drawn by the browser, and it takes its
   colors from the page's own defaults rather than from the control. On a dark
   page that is how you get a list you cannot read: pale text on a pale popup,
   or the option text sitting on whatever is behind it. Naming both colors on
   the option itself is the only thing that reaches that list. */
select option,
select optgroup{
  background-color: var(--surface);
  color: var(--ink);
}
select option:checked{ background-color: var(--surface-2); color: var(--ink); }
.tab__menu::-webkit-scrollbar{ width: 9px; }
.tab__menu::-webkit-scrollbar-thumb{ background: var(--ink-faint); border-radius: 5px; }
.tab__menu::-webkit-scrollbar-track{ background: transparent; }
/* The count line is the last thing in the panel, so it gets clearance from
   the fade rather than sitting inside it. */
.tab__soon{ padding-bottom: 16px; }

/* -----------------------------------------------------------------------
   6. THE TWO COACHING TOOLS ON THE TRAVEL TAB, AND THE GAMECHANGER LAB.
   ----------------------------------------------------------------------- */
.teamtools{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.teamtool{
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 18px 15px;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--accent-2);
  border-radius: var(--radius);
  color: inherit; text-decoration: none;
}
.teamtool:hover{ border-color: var(--accent-2); background: var(--surface-2); }
.teamtool__head{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.teamtool__name{ margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.14rem; letter-spacing: -.025em; }
.teamtool__tag{
  font-size: 0.8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-2); white-space: nowrap;
}
.teamtool__line{ margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.55; }
.teamtool__points{ margin: 2px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.teamtool__point{ font-size: 0.9rem; color: var(--ink-faint); font-weight: 500; line-height: 1.45; }
.teamtool__go{
  margin-top: auto; padding-top: 6px;
  font-weight: 700; font-size: 0.9rem; color: var(--accent-2);
}

.gc-drop{
  display: grid; gap: 10px; justify-items: start;
  margin-top: 20px; padding: 26px 24px 24px;
  border: 2px dashed var(--line); border-radius: var(--radius-lg);
  background: var(--surface);
}
.gc-drop.is-over{ border-color: var(--accent); background: var(--accent-soft); }
.gc-drop__title{ margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.3rem; letter-spacing: -.03em; }
.gc-drop__note{ margin: 0; max-width: 68ch; color: var(--ink-soft); line-height: 1.6; }
.gc-drop__input{ position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.gc-drop__error{
  margin: 4px 0 0; padding: 9px 12px; border-radius: var(--radius-sm);
  background: rgba(242,97,90,.1); border-left: 3px solid var(--neg);
  color: var(--ink); font-weight: 500;
}
.gc-paste{ width: 100%; margin-top: 6px; }
.gc-paste summary{ cursor: pointer; font-weight: 600; color: var(--ink-soft); }
.gc-paste__area{
  display: block; width: 100%; margin: 9px 0; padding: 10px 12px;
  font: inherit; font-family: var(--mono); font-size: 0.92rem;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  resize: vertical;
}

.gc-how{ margin: 0; padding-left: 20px; display: grid; gap: 7px; }
.gc-how__item{ color: var(--ink-soft); line-height: 1.6; }

.gc-map{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.gc-map__note{ margin: 0; color: var(--ink-soft); max-width: 78ch; line-height: 1.6; }
.gc-map__field{ display: grid; gap: 3px; }
.gc-map__label{ font-size: 0.84rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); }
.gc-map__field.is-missing .gc-map__label{ color: var(--neg); }
.gc-map__field.is-missing .pl-select{ border-color: var(--neg); }

.gc-settings{ display: flex; gap: 16px; flex-wrap: wrap; margin: 18px 0 4px; }

/* -----------------------------------------------------------------------
   7. THE TOOLS MENU WAS NEVER CLOSING.

   Found while testing the scroll fix, and it is the real cause of what Connor
   saw. `panel.hidden = true` is how nav.js closes a menu, and `hidden` works
   by setting display:none from the user-agent stylesheet, which is the
   weakest declaration there is. `.tab__menu--wide{ display: grid; }` — added
   when Tools/Games went past eight entries — outranks it. So the two-column
   menu was NEVER hidden: it was painted over the top of every page from the
   moment the header mounted, and what looked like a dropdown cut off at the
   bottom was a permanently open panel running off the screen.

   Every menu in the header closes properly again with this one line, and it is
   written to cover the whole class rather than only the wide variant, so the
   next display rule added to a menu cannot bring the bug back.
   ----------------------------------------------------------------------- */
.tab__menu[hidden]{ display: none !important; }

/* -----------------------------------------------------------------------
   8. THE LITTLE LEAGUE PAGES, IN LITTLE LEAGUE'S COLORS.

   The three tabs were three colors of the same dark blue-gray page, which is
   why Connor said the Little League side did not look like anything in
   particular. It now looks like Williamsport: the navy and red of the Little
   League keystone, on a slightly warmer ground, with the keystone itself drawn
   into the top of the section header.

   HOW IT IS DONE, AND WHY THIS WAY. Not by writing a second set of components.
   The palette is a handful of custom properties, so overriding them on the
   BODY re-themes every component the page already uses: the hero, the panels,
   the links, the cards, the search box, the chips. One block of variables, no
   duplicated rules, and a Little League page cannot drift away from the rest
   of the site's layout because it is the same layout.

   The region colors in llColor.js are untouched. Those are the colors the
   clubs actually wear in Williamsport, they are information rather than
   decoration, and they sit ON this palette rather than being replaced by it.
   ----------------------------------------------------------------------- */
.body--ll{
  --accent: #3f7ae0;            /* the navy, lifted enough to read on dark */
  --accent-hot: #6a9cf0;
  --accent-ink: #ffffff;
  --accent-soft: rgba(63,122,224,.16);
  --accent-line: rgba(63,122,224,.38);
  --accent-2: #ef4b52;          /* the keystone red */
  --accent-2-soft: rgba(239,75,82,.14);
  --ll-navy: #14225c;
  --ll-red: #e8232a;
  --bg: #090c16;
  --bg-2: #0c1122;
  --surface: #111629;
  --surface-2: #161c33;
  --surface-3: #1d2540;
  --line: #263054;
  --line-soft: #1b2340;
}
@media (prefers-color-scheme: light){
  .body--ll{
    --accent: #1b3a8f;
    --accent-hot: #14295f;
    --accent-ink: #ffffff;
    --accent-soft: rgba(27,58,143,.09);
    --accent-line: rgba(27,58,143,.3);
    --accent-2: #c8102e;
    --accent-2-soft: rgba(200,16,46,.09);
    --ll-navy: #14225c;
    --ll-red: #c8102e;
    --bg: #f4f6fb;
    --bg-2: #e9edf7;
    --surface: #ffffff;
    --surface-2: #f1f4fb;
    --surface-3: #e4eaf6;
    --line: #d8e0f0;
    --line-soft: #e6ebf6;
  }
}
/* The keystone, drawn as the band across the top of the section header. It is
   the shape on every Little League sleeve and it is the cheapest possible way
   to say which tab you are on without adding an image to the page. */
.body--ll .sechero{
  position: relative;
  border-top: 4px solid var(--ll-navy);
  background: linear-gradient(180deg, var(--accent-soft), transparent 68%);
}
.body--ll .sechero::before{
  content: "";
  position: absolute; top: -4px; left: clamp(18px, 4vw, 44px);
  width: 46px; height: 40px;
  background: var(--ll-navy);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
  border-bottom: 3px solid var(--ll-red);
}
.body--ll .sechero__inner{ padding-top: 16px; }
.body--ll .sechero--ll{ --tone: var(--ll-red); --tone-soft: var(--accent-2-soft); }
/* Three letters never fitted a 32 pixel badge at the two-letter size, and the
   readability sweep above pushed them out of it again. */
.body--ll .llbadge[data-len="3"]{ font-size: .84rem; letter-spacing: -.01em; }

/* -----------------------------------------------------------------------
   9. THE RECORD BOOK AND THE TOP PERFORMANCES.
   ----------------------------------------------------------------------- */
.llrecgrid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 11px; }
.llrec{
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 2px;
  padding: 15px 15px 13px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--ll, var(--accent));
}
.llrec::after{
  content: ""; position: absolute; right: -26px; top: -26px;
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--ll, var(--accent)); opacity: .09;
}
.llrec__value{
  font-family: var(--mono); font-weight: 700; font-size: 2.9rem; line-height: .95;
  /* THE CLUB COLOR, LIFTED OFF THE GROUND IT IS PRINTED ON.
     The region colors are the ones the clubs wear in Williamsport and several
     of them are nearly black: Great Lakes is black and red, Mid-Atlantic is
     navy. Printed raw on a dark card the number disappeared. The hue is kept,
     which is the informative part, and only the lightness is moved. */
  color: color-mix(in oklab, var(--ll, var(--accent)) 55%, #ffffff);
  letter-spacing: -.02em;
}
@media (prefers-color-scheme: light){
  .llrec__value{ color: color-mix(in oklab, var(--ll, var(--accent)) 68%, #000000); }
}
.llrec__what{
  font-size: 0.88rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 7px;
}
.llrec__who{ display: grid; gap: 1px; }
.llrec__name{ font-family: var(--display); font-weight: 800; font-size: 1.02rem; letter-spacing: -.02em; }
.llrec__from{ font-size: 0.88rem; color: var(--ink-soft); font-weight: 500; line-height: 1.35; }
.llrec__foot{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.llrec__year, .llrec__vs, .llrec__shared{
  font-family: var(--mono); font-size: 0.8rem; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--line);
}
.llrec__year{ background: var(--ll, var(--accent)); color: var(--ll-ink, #fff); border-color: transparent; }
.llrec__source{
  margin: 9px 0 0; padding-top: 8px; border-top: 1px solid var(--line-soft);
  font-size: 0.8rem; line-height: 1.45; color: var(--ink-faint); font-weight: 500;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.llfilter{ display: grid; gap: 9px; margin-bottom: 14px; }
.llfilter__input{
  width: 100%; max-width: 460px; padding: 10px 14px;
  font: inherit; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink);
}
.llfilter__input:focus{ outline: none; border-color: var(--accent); background: var(--surface); }
.llchips{ display: flex; flex-wrap: wrap; gap: 5px; }
.llchip{
  font: inherit; font-size: 0.86rem; font-weight: 600;
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--line);
}
.llchip:hover{ border-color: var(--accent-line); color: var(--ink); }
.llchip.is-on{ background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.llbook{ display: grid; gap: 20px; }
.llsection__name{
  margin: 0 0 8px; font-family: var(--display); font-weight: 800; font-size: 1.06rem;
  letter-spacing: -.02em; color: var(--ink);
  padding-bottom: 5px; border-bottom: 2px solid var(--accent-line);
}
.llcat{
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); margin-bottom: 5px;
}
.llcat__head{
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 12px; cursor: pointer; list-style: none;
}
.llcat__head::-webkit-details-marker{ display: none; }
.llcat__head::before{
  content: "▸"; color: var(--ink-faint); font-size: 0.88rem; transition: transform .15s ease;
}
.llcat[open] .llcat__head::before{ transform: rotate(90deg); }
.llcat__name{ font-weight: 700; flex: 1; }
.llcat__value{ font-family: var(--mono); font-weight: 700; font-size: 1.16rem; color: var(--accent); }
.llcat__count{ font-size: 0.84rem; color: var(--ink-faint); font-weight: 600; white-space: nowrap; }
.llcat__rows{ padding: 0 12px 10px; display: grid; gap: 6px; }

.llrow{
  display: grid; grid-template-columns: 54px minmax(0, 1fr) 52px; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.llrow.is-holder{ background: var(--accent-soft); border-left: 3px solid var(--accent); }
.llrow__value{ font-family: var(--mono); font-weight: 700; font-size: 1.05rem; }
.llrow.is-holder .llrow__value{ color: var(--accent); }
.llrow__body{ min-width: 0; }
.llrow__names{ margin: 0; font-size: 0.92rem; line-height: 1.45; }
.llrow__person{ display: inline; }
.llrow__name{ font-weight: 700; }
.llrow__place{ color: var(--ink-soft); font-weight: 500; }
.llrow__place::before{ content: ", "; }
.llrow__sep{ color: var(--ink-faint); }
.llrow__entry{ margin: 3px 0 0; font-size: 0.8rem; line-height: 1.45; color: var(--ink-faint); font-weight: 500; }
.llrow__year{ font-family: var(--mono); font-size: 0.88rem; font-weight: 700; color: var(--ink-faint); text-align: right; }

.llrecsplash{
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr);
  gap: 18px; align-items: center;
  padding: 20px 22px; border-radius: var(--radius);
  background: linear-gradient(120deg, var(--accent-soft), transparent 62%), var(--surface);
  border: 1px solid var(--line); border-left: 4px solid var(--ll-red, var(--accent-2));
  color: inherit; text-decoration: none;
}
.llrecsplash:hover{ border-color: var(--accent-line); border-left-color: var(--ll-red, var(--accent-2)); }
.llrecsplash__title{ margin: 0 0 6px; font-family: var(--display); font-weight: 800; font-size: 1.32rem; letter-spacing: -.03em; }
.llrecsplash__line{ margin: 0 0 10px; color: var(--ink-soft); line-height: 1.6; max-width: 62ch; }
.llrecsplash__go{ font-weight: 700; color: var(--accent); font-size: .9rem; }
.llrecsplash__marks{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.llrecsplash__mark{
  display: grid; gap: 1px; padding: 9px 11px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.llrecsplash__value{ font-family: var(--mono); font-weight: 700; font-size: 1.7rem; line-height: 1; color: var(--accent-2); }
.llrecsplash__what{ font-size: 0.8rem; color: var(--ink-faint); font-weight: 600; line-height: 1.3; }
@media (max-width: 760px){
  .llrecsplash{ grid-template-columns: 1fr; }
}

/* ======================================================================
   THE MOMENT
   ----------------------------------------------------------------------
   One plate appearance, stopped a pitch from the end. The page is three
   stacked beats and they are styled to read in that order: the situation
   you are standing in, the call you are being asked to make, and then
   everything the record knows about what actually happened.

   THE STAGE IS TWO COLUMNS AND THE PICTURE IS THE WIDER ONE. Somebody
   who already knows the game reads the diamond and the zone plot and
   never reads the sentence beside them. Somebody learning reads the
   sentence first. Both are on screen at once at full width and the
   sentence goes on top when the column is too narrow to hold both,
   because on a phone the words are the half that survives shrinking.
   ====================================================================== */

.mstage{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 1.25rem;
  align-items: start;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}
.mstage__context{ display: grid; gap: .75rem; align-content: start; }
.mstage__where{
  margin: 0;
  font-family: var(--mono);
  font-size: 0.88rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent-hot);
}
/* The situation said out loud. This is the line that has to land first. */
.mstage__said{
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  line-height: 1.25;
  letter-spacing: -.02em;
}
.mstage__who{ display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.mstage__board{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .9rem; align-items: start; }

/* who is standing in it */
.mwho{
  display: grid;
  gap: .15rem;
  padding: .7rem .8rem;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  min-width: 0;
}
.mwho:last-child{ border-left-color: var(--accent-3); }
.mwho__label{
  font-family: var(--mono);
  font-size: .84rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.mwho__name{ font-weight: 700; font-size: 1.06rem; line-height: 1.25; }
.mwho__hand{ font-family: var(--mono); font-size: 0.85rem; color: var(--ink-soft); }

/* ---------- the diamond, the outs, the count ---------- */

.msit{
  display: grid;
  gap: .8rem;
  padding: .9rem;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.msit__field{ width: 100%; height: auto; max-width: 190px; margin: 0 auto; display: block; overflow: visible; }
/* Bases are rects on a rotated group, never circles: an extension injecting
   at user origin was overriding r on every circle on this site. */
.msit__base{ fill: var(--surface-3); stroke: var(--line); stroke-width: 1.5; }
.msit__base.is-on{ fill: var(--bulb); stroke: var(--accent-2); stroke-width: 2; }
.msit__readout{ display: grid; gap: .3rem; }
.msit__row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .32rem .5rem;
  border-radius: 6px;
  background: var(--surface);
}
.msit__label{
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.msit__value{ font-family: var(--mono); font-weight: 700; font-size: 1.02rem; }
.msit__dots{ display: inline-flex; gap: .3rem; }
.msit__dot{
  width: 12px; height: 12px;
  border-radius: 3px;
  background: var(--bulb-off);
  border: 1px solid var(--line);
}
.msit__dot.is-on{ background: var(--seam); border-color: var(--seam); }

/* ---------- the zone plot ---------- */

.mzone__wrap{
  display: grid;
  gap: .55rem;
  padding: .9rem;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.mzone{ width: 100%; height: auto; max-width: 230px; margin: 0 auto; display: block; }
.mzone__box{ fill: none; stroke: var(--chalk); stroke-width: 2; }
.mzone__grid{ stroke: var(--chalk-soft); stroke-width: 1; }
.mzone__plate{ fill: var(--chalk); opacity: .85; }
.mzone__leader{ stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 2 2; }
.mzone__prior{ stroke-width: 1.5; }
.mzone__num{
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  fill: var(--ink);
  paint-order: stroke;
  stroke: rgba(0,0,0,.55);
  stroke-width: 2.4;
}
/* the pitch itself, once it is allowed to be seen */
.mzone__final{ fill: var(--accent); stroke: var(--chalk); stroke-width: 2.5; }
.mzone__note{ margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--ink-soft); }

/* ---------- the call ---------- */

.mcall{
  margin-top: 1.1rem;
  padding: 1.3rem;
  background: linear-gradient(180deg, var(--accent-soft), var(--surface));
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
}
.mcall__prompt{
  margin: 0 0 .35rem;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  letter-spacing: -.025em;
  line-height: 1.15;
}
.mcall__why{ margin: 0 0 1rem; max-width: 62ch; color: var(--ink-soft); line-height: 1.6; }
.mcall__options{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .7rem;
}

.mopt{
  display: grid;
  gap: .22rem;
  text-align: left;
  padding: .85rem .95rem;
  font: inherit;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.mopt:hover:not(:disabled){ background: var(--surface-3); border-color: var(--accent-line); transform: translateY(-1px); }
.mopt:disabled{ cursor: default; opacity: .78; }
/* Right and wrong are said in color AND in weight, because color alone is
   not a message on a page somebody might be reading in sunlight. */
.mopt.is-right{
  background: var(--accent-3-soft);
  border-color: var(--pos);
  border-left: 4px solid var(--pos);
  opacity: 1;
}
.mopt.is-wrong{
  background: rgba(255,111,95,.14);
  border-color: var(--neg);
  border-left: 4px solid var(--neg);
  opacity: 1;
}
.mopt__label{ font-weight: 700; font-size: 1.06rem; }
.mopt__note{ font-size: 0.88rem; line-height: 1.45; color: var(--ink-soft); }

/* The skip is deliberately quiet and deliberately not hidden: somebody who
   just watched the play on television wants the explanation, not a quiz. */
.mskip{
  margin-top: .9rem;
  padding: .5rem .9rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.mskip:hover{ color: var(--ink); border-color: var(--accent-line); border-style: solid; }

.mverdict{
  margin: 1rem 0 0;
  padding: .7rem .9rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.12rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border-left: 4px solid var(--ink-faint);
}
.mverdict.is-right{ border-left-color: var(--pos); color: var(--pos); }
.mverdict.is-wrong{ border-left-color: var(--neg); color: var(--neg); }
.mverdict.is-skip{ border-left-color: var(--accent); color: var(--accent-hot); }

/* ---------- the reveal ---------- */

.mreveal{ display: grid; gap: 1.5rem; margin-top: 1.6rem; }
.mreveal__head{
  display: grid;
  gap: .5rem;
  padding: 1.3rem;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius-lg);
}
.mreveal__eyebrow{
  margin: 0;
  font-family: var(--mono);
  font-size: 0.84rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.mreveal__outcome{
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--accent-hot);
}
.mreveal__narration{ margin: 0; max-width: 66ch; font-size: 1.12rem; line-height: 1.65; }
/* The official line, in the feed's own words, set apart so it is clearly a
   quotation of the scorer rather than something this page wrote. */
.mreveal__official{
  margin: 0;
  padding-left: .8rem;
  border-left: 2px solid var(--line);
  font-family: var(--mono);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.mreveal__split{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 1.1rem;
  align-items: start;
}

.mpitch{
  padding: 1.05rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.mpitch__kind{
  margin: 0 0 .7rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: -.02em;
  color: var(--accent-hot);
}
.mpitch__facts{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .3rem .9rem;
  margin: 0;
  align-items: baseline;
}
.mpitch__facts dt{
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.mpitch__facts dd{
  margin: 0;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1rem;
  text-align: right;
}

/* ---------- the library ---------- */

.mlib{ margin-top: 2.2rem; }
.mlib__title{
  margin: 1.4rem 0 .3rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -.025em;
}
.mlib__note{ margin: 0 0 .9rem; max-width: 70ch; color: var(--ink-soft); line-height: 1.6; }
.mlib__grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: .8rem;
}
.mlibcard{
  display: grid;
  gap: .3rem;
  padding: .9rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.mlibcard:hover{ background: var(--surface-2); border-color: var(--accent-line); transform: translateY(-1px); }
.mlibcard__top{ display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.mlibcard__date{ font-family: var(--mono); font-size: 0.84rem; letter-spacing: .04em; color: var(--ink-faint); }
.mlibcard__swing{
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.82rem;
  padding: .1rem .45rem;
  border-radius: 5px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent-hot);
}
.mlibcard__match{ font-weight: 700; font-size: 1.05rem; letter-spacing: -.005em; }
.mlibcard__head{ font-size: 0.92rem; line-height: 1.5; color: var(--ink-soft); }

@media (max-width: 900px){
  .mstage{ grid-template-columns: 1fr; }
  .mreveal__split{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .mstage__board{ grid-template-columns: 1fr; }
  .mstage__who{ grid-template-columns: 1fr; }
  .mpitch__facts{ grid-template-columns: 1fr auto; }
}

/* ---------- the pitches already thrown ---------- */

.mseq{
  margin-top: 1.1rem;
  padding: 1.05rem 1.15rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.mseq__title{ margin: 0 0 .7rem; font-size: 1.05rem; font-weight: 700; }
.mseq__empty{ margin: 0; color: var(--ink-soft); line-height: 1.55; }
.mseq__list{ list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.mseq__row{
  display: grid;
  grid-template-columns: 1.7rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .8rem;
  padding: .55rem .7rem;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--ink-faint);
  border-radius: var(--radius-sm);
}
.mseq__row.is-strike{ border-left-color: var(--neg); }
.mseq__row.is-ball{ border-left-color: var(--accent-3); }
.mseq__row.is-foul{ border-left-color: var(--accent-2); }
.mseq__row.is-inplay{ border-left-color: var(--accent); }
.mseq__n{
  font-family: var(--mono); font-weight: 700; font-size: .95rem;
  text-align: center; color: var(--ink-faint);
}
.mseq__body{ display: grid; gap: .1rem; min-width: 0; }
.mseq__top{ display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.mseq__name{ font-weight: 700; }
.mseq__velo{ font-family: var(--mono); font-size: 0.9rem; color: var(--ink-soft); }
.mseq__where{ font-size: 0.92rem; color: var(--ink-soft); }
.mseq__tail{ display: grid; justify-items: end; gap: .1rem; }
.mseq__call{ font-weight: 600; font-size: .9rem; }
.mseq__count{ font-family: var(--mono); font-size: 0.86rem; color: var(--ink-faint); }

/* the same four colors on the plot, so the two read as one thing */
.mzone__prior.is-strike{ fill: var(--neg); stroke: var(--bg); }
.mzone__prior.is-ball{ fill: var(--surface-3); stroke: var(--accent-3); }
.mzone__prior.is-foul{ fill: var(--accent-2-soft); stroke: var(--accent-2); }
.mzone__prior.is-inplay{ fill: var(--accent-soft); stroke: var(--accent); }

/* a library card that has not been played gives nothing away */
.mlibcard__setup{ font-family: var(--mono); font-size: 0.88rem; color: var(--ink-soft); line-height: 1.45; }
.mlibcard__who{ font-size: 0.92rem; font-weight: 600; }
.mlibcard__score{ font-family: var(--mono); font-size: 0.88rem; color: var(--ink-faint); }
.mlibcard.is-played{ border-color: var(--accent-line); }
.mlibcard.is-played .mlibcard__head{ padding-top: .3rem; border-top: 1px solid var(--line-soft); }

@media (max-width: 560px){
  .mseq__row{ grid-template-columns: 1.5rem minmax(0, 1fr); }
  .mseq__tail{ grid-column: 2; justify-items: start; }
}

/* ======================================================================
   COLLEGE BASEBALL
   ----------------------------------------------------------------------
   The fourth league tab. Amber throughout, because it is the one accent
   not already spoken for and because it reads as Omaha in June, which is
   the only thing this section is really about.

   The single most important rule in this block is the offseason card. For
   eight months of the year the college section has no live data, and an
   empty table is indistinguishable from a broken one. So the card is
   large, it is at the top, and the date is drawn as a date rather than
   buried in a sentence. Nothing here is ever allowed to render an empty
   shell in its place.
   ====================================================================== */

/* ---------------------------------------------------- offseason card --- */

.cb-offseason{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px; align-items: center;
  margin: 0 0 26px;
  padding: 20px 22px;
  border: 1px solid color-mix(in srgb, var(--college) 42%, var(--line));
  border-left: 4px solid var(--college);
  border-radius: var(--radius);
  background: linear-gradient(100deg, var(--college-soft), transparent 62%), var(--surface);
}
.cb-offseason__mark{ color: var(--college); flex: none; }
.cb-offseason__mark svg{ width: 34px; height: 34px; display: block; }
.cb-offseason__body{ min-width: 0; }
.cb-offseason__eyebrow{
  margin: 0 0 3px; font-size: 0.8rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .14em; color: var(--college);
}
.cb-offseason__headline{
  margin: 0 0 6px; font-family: var(--display); font-weight: 800;
  font-size: 1.22rem; letter-spacing: -.02em; color: var(--ink);
}
.cb-offseason__text{ margin: 0; color: var(--ink-soft); font-size: .94rem; line-height: 1.55; }
.cb-offseason__instead{
  margin: 8px 0 0; color: var(--ink-faint); font-size: 0.92rem; line-height: 1.5;
}
/* The date, as a date. A visitor who stops on this card stops for exactly
   one piece of information, so it gets its own column and its own type. */
.cb-offseason__when{
  flex: none; text-align: center; padding: 10px 16px;
  border-left: 1px solid var(--line);
}
.cb-offseason__whenLabel{
  display: block; font-size: 0.8rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-faint); margin-bottom: 3px;
}
.cb-offseason__whenDate{
  display: block; font-family: var(--display); font-weight: 850;
  font-size: 1.42rem; line-height: 1.05; color: var(--college); white-space: nowrap;
}
.cb-offseason__whenYear{
  display: block; font-family: var(--mono); font-size: .9rem;
  color: var(--ink-soft); margin-top: 2px;
}
@media (max-width: 760px){
  .cb-offseason{ grid-template-columns: auto 1fr; }
  .cb-offseason__when{
    grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line);
    text-align: left; padding: 12px 0 0;
  }
  .cb-offseason__whenDate{ display: inline; margin-right: 7px; }
  .cb-offseason__whenYear{ display: inline; }
}

.cb-waiting{
  margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--college-soft); color: var(--ink-soft); font-size: .9rem;
  border-left: 3px solid var(--college);
}
.cb-waiting strong{ color: var(--ink); }

/* --------------------------------------------------------- furniture --- */

.cb-error{
  padding: 18px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink-soft);
}
.cb-lead{ font-size: 1.04rem; color: var(--ink); }
.cb-aside{
  margin: 14px 0 0; padding-left: 14px; border-left: 2px solid var(--college);
  color: var(--ink-faint); font-size: .9rem; line-height: 1.6;
}
.cb-round{
  margin: 26px 0 12px; font-family: var(--display); font-weight: 800;
  font-size: 1.04rem; letter-spacing: -.014em; color: var(--ink);
}
.cb-link, .cb-more{
  color: var(--ink); text-decoration: none;
  border-bottom: 1.5px solid color-mix(in srgb, var(--college) 55%, transparent);
}
.cb-link:hover, .cb-more:hover{ border-bottom-color: var(--college); color: var(--college); }
.cb-more{
  display: inline-block; margin-top: 16px; font-weight: 650; font-size: .92rem;
}
.cb-teamnav{ display: flex; flex-wrap: wrap; gap: 20px; margin-top: 8px; }

.door--college{ --door-tone: var(--college); }
.door--college:hover{ border-color: var(--college); }
.door--college .door__tag{ background: var(--college-soft); color: var(--college); }

/* ------------------------------------------------------------- tiles --- */

.cb-tiles{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; margin: 16px 0;
}
.cb-tile{
  padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); border-top: 3px solid var(--college);
}
.cb-tile__value{
  display: block; font-family: var(--display); font-weight: 850;
  font-size: 1.6rem; line-height: 1.1; letter-spacing: -.03em; color: var(--ink);
}
.cb-tile__label{
  display: block; margin-top: 4px; font-size: 0.9rem; font-weight: 650; color: var(--ink-soft);
}
.cb-tile__note{ display: block; margin-top: 6px; font-size: 0.88rem; color: var(--ink-faint); line-height: 1.45; }

/* ------------------------------------------------------------ tables --- */

.cb-tablewrap{ overflow-x: auto; margin: 14px 0; border-radius: var(--radius); }
.cb-table{ width: 100%; border-collapse: collapse; font-size: .92rem; }
.cb-table th{
  text-align: left; padding: 9px 12px; font-size: 0.84rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.cb-table td{
  padding: 9px 12px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  color: var(--ink-soft); vertical-align: top;
}
.cb-table tbody tr:hover td{ background: var(--surface-2); }
.cb-table td:first-child{ color: var(--ink); font-weight: 600; }
.cb-table--kv td:first-child{ width: 34%; white-space: normal; }
.cb-table--poll td:first-child, .cb-table--regionals td:first-child{
  font-family: var(--mono); color: var(--college); width: 3.2rem;
}
.cb-table tr.is-upset td{ background: color-mix(in srgb, var(--college) 9%, transparent); }
.cb-table tr.is-upset td:first-child::after{
  content: "upset"; margin-left: 7px; font-size: .84rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .09em; color: var(--college);
}
.cb-table tr.is-canceled td{ color: var(--ink-faint); font-style: italic; }
.cb-table--champs td:first-child{ font-family: var(--mono); width: 4rem; }
.cb-table--format td:first-child{ font-family: var(--mono); white-space: nowrap; }

/* ----------------------------------------------------------- stories --- */

.cb-stories{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.cb-story{
  padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}
.cb-story__head{
  margin: 0 0 7px; font-family: var(--display); font-weight: 800; font-size: 1rem;
  letter-spacing: -.014em; color: var(--college);
}
.cb-story__text{ margin: 0; font-size: .9rem; line-height: 1.6; color: var(--ink-soft); }

/* --------------------------------------------------- championship UI --- */

.cb-series{
  margin-top: 16px; padding: 16px 18px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface);
}
.cb-series__label{
  margin: 0 0 10px; font-size: 0.8rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-faint);
}
.cb-series__game{
  display: grid; grid-template-columns: 4.6rem 1fr; gap: 4px 14px;
  padding: 9px 0; border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.cb-series__game:first-of-type{ border-top: 0; }
.cb-series__num{ font-family: var(--mono); font-size: 0.88rem; color: var(--ink-faint); }
.cb-series__line{ font-weight: 700; color: var(--ink); }
.cb-series__detail{ grid-column: 2; font-size: 0.9rem; color: var(--ink-faint); }

/* ------------------------------------------------------- RPI formula --- */

.cb-formula{ margin: 18px 0; display: grid; gap: 14px; }
.cb-formula__row{ display: grid; grid-template-columns: 3.4rem minmax(90px, 1fr) 2fr; gap: 14px; align-items: center; }
.cb-formula__pct{
  font-family: var(--display); font-weight: 850; font-size: 1.28rem;
  color: var(--college); text-align: right;
}
.cb-formula__track{ height: 26px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.cb-formula__fill{
  height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, var(--college), color-mix(in srgb, var(--college) 62%, transparent));
}
.cb-formula__text{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cb-formula__label{ font-weight: 650; color: var(--ink); font-size: .93rem; }
.cb-formula__note{ font-size: 0.88rem; color: var(--ink-faint); line-height: 1.45; }
@media (max-width: 700px){
  .cb-formula__row{ grid-template-columns: 3rem 1fr; }
  .cb-formula__text{ grid-column: 1 / -1; }
}

.cb-loc{
  margin-top: 22px; padding: 18px 20px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface);
}
.cb-loc__head{ margin: 0 0 7px; font-family: var(--display); font-weight: 800; font-size: 1.05rem; color: var(--ink); }
.cb-loc__text{ margin: 0 0 14px; color: var(--ink-soft); font-size: .93rem; line-height: 1.6; }
.cb-loc__grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.cb-loc__cell{
  padding: 13px; border-radius: var(--radius-sm); text-align: center;
  border: 1px solid var(--line); background: var(--surface-2);
}
.cb-loc__cell.is-good{ border-color: color-mix(in srgb, var(--pos) 45%, var(--line)); }
.cb-loc__cell.is-bad{ border-color: color-mix(in srgb, var(--neg) 45%, var(--line)); }
.cb-loc__weight{ display: block; font-family: var(--display); font-weight: 850; font-size: 1.6rem; color: var(--ink); }
.cb-loc__cell.is-good .cb-loc__weight{ color: var(--pos); }
.cb-loc__cell.is-bad .cb-loc__weight{ color: var(--neg); }
.cb-loc__k{ display: block; margin-top: 3px; font-size: 0.88rem; color: var(--ink-soft); }
.cb-loc__kicker{ margin: 14px 0 0; font-weight: 650; color: var(--ink); font-size: .93rem; }

/* --------------------------------------------------------- truth box --- */

.cb-truth{
  margin: 18px 0 0; padding: 16px 18px; border-radius: var(--radius);
  background: var(--surface-2); border-left: 3px solid var(--college);
}
.cb-truth__head{ margin: 0 0 6px; font-family: var(--display); font-weight: 800; font-size: .99rem; color: var(--ink); }
.cb-truth__text{ margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.6; }
.cb-truth__list{ margin: 6px 0 0; padding-left: 20px; color: var(--ink-soft); font-size: .92rem; line-height: 1.65; }
.cb-truth__list li{ margin-bottom: 6px; }
.cb-truth__flag{
  margin: 12px 0 0; padding-top: 11px; border-top: 1px solid var(--line);
  color: var(--ink-faint); font-size: 0.92rem; line-height: 1.55;
}

.cb-correct{
  margin: 16px 0; padding: 14px 16px; border: 1px dashed color-mix(in srgb, var(--neg) 45%, var(--line));
  border-radius: var(--radius); background: var(--surface);
}
.cb-correct__label{
  font-size: 0.8rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; color: var(--neg);
}
.cb-correct__claim{ margin: 6px 0 8px; color: var(--ink-faint); text-decoration: line-through; }
.cb-correct__truth{ margin: 0; color: var(--ink); font-weight: 600; line-height: 1.55; }

/* ------------------------------------------------------- resume card --- */

.cb-resume{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px 22px; margin: 18px 0;
  padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}
.cb-resume__row{ display: block; }
.cb-resume__head{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.cb-resume__label{ font-size: 0.9rem; font-weight: 650; color: var(--ink-soft); }
.cb-resume__value{ font-family: var(--mono); font-weight: 700; color: var(--college); }
.cb-resume__range{ width: 100%; accent-color: var(--college); }
.cb-resume__check{ display: flex; align-items: center; gap: 8px; font-size: 0.92rem; color: var(--ink-soft); }
.cb-resume__check input{ accent-color: var(--college); width: 16px; height: 16px; }

.cb-verdict{
  padding: 20px 22px; border-radius: var(--radius); border: 1px solid var(--line);
  border-left: 4px solid var(--ink-faint); background: var(--surface);
}
.cb-verdict--lock{ border-left-color: var(--pos); background: linear-gradient(100deg, color-mix(in srgb, var(--pos) 9%, transparent), transparent 60%), var(--surface); }
.cb-verdict--warm{ border-left-color: var(--college); background: linear-gradient(100deg, var(--college-soft), transparent 60%), var(--surface); }
.cb-verdict--cool{ border-left-color: #d8a13a; }
.cb-verdict--cold{ border-left-color: var(--neg); background: linear-gradient(100deg, color-mix(in srgb, var(--neg) 8%, transparent), transparent 60%), var(--surface); }
.cb-verdict__eyebrow{
  margin: 0 0 3px; font-size: 0.8rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .13em; color: var(--ink-faint);
}
.cb-verdict__label{ margin: 0 0 7px; font-family: var(--display); font-weight: 850; font-size: 1.4rem; letter-spacing: -.026em; color: var(--ink); }
.cb-verdict__line{ margin: 0; color: var(--ink-soft); line-height: 1.6; }
.cb-verdict__reasons{ margin: 12px 0 0; padding-left: 20px; color: var(--ink-faint); font-size: 0.92rem; line-height: 1.6; }
.cb-verdict__reasons li{ margin-bottom: 5px; }

.cb-presets{ display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.cb-presets__label{ font-size: 0.84rem; font-weight: 800; text-transform: uppercase; letter-spacing: .11em; color: var(--ink-faint); }
.cb-preset{
  display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer;
  padding: 9px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: inherit;
}
.cb-preset:hover{ border-color: var(--college); }
.cb-preset__name{ font-weight: 700; font-size: 0.92rem; }
.cb-preset__note{ font-size: 0.86rem; color: var(--ink-faint); }

/* ----------------------------------------------------------- bracket --- */

.cb-seeds{ margin: 16px 0; }
.cb-seeds__label{ margin: 0 0 10px; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); }
.cb-seeds__row{ display: flex; flex-wrap: wrap; gap: 7px; }
.cb-seed{
  display: flex; align-items: center; gap: 7px; text-decoration: none;
  padding: 6px 12px 6px 7px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
}
.cb-seed:hover{ border-color: var(--college); color: var(--ink); }
.cb-seed__num{
  display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%;
  background: var(--surface-2); color: var(--ink-faint);
  font-family: var(--mono); font-size: 0.84rem; font-weight: 700;
}
.cb-seed__team{ font-size: 0.92rem; font-weight: 600; }
.cb-seed.is-omaha{ border-color: var(--college); background: var(--college-soft); color: var(--ink); }
.cb-seed.is-omaha .cb-seed__num{ background: var(--college); color: #14100a; }
.cb-seeds__note{ margin: 10px 0 0; font-size: 0.9rem; color: var(--ink-faint); }

.cb-omaha{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.cb-omaha__col{ padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.cb-omaha__head{ margin: 0 0 12px; font-family: var(--display); font-weight: 800; font-size: 1rem; color: var(--college); }
.cb-omaha__field{ display: grid; gap: 7px; margin-bottom: 14px; }
.cb-omahateam{
  display: flex; flex-direction: column; gap: 2px; text-decoration: none;
  padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid transparent;
}
.cb-omahateam:hover{ border-color: var(--college); }
.cb-omahateam__name{ font-weight: 700; color: var(--ink); }
.cb-omahateam__meta{ font-size: 0.86rem; color: var(--ink-faint); font-family: var(--mono); }
.cb-omahateam__flag{
  margin-top: 3px; align-self: flex-start; padding: 2px 8px; border-radius: 999px;
  background: var(--college-soft); color: var(--college);
  font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
}
.cb-omaha__games{ margin: 0; padding-left: 20px; color: var(--ink-faint); font-size: 0.9rem; line-height: 1.7; }

.cb-final{
  margin-top: 18px; padding: 20px 22px; border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--college) 40%, var(--line));
  background: linear-gradient(120deg, var(--college-soft), transparent 65%), var(--surface);
}
.cb-final__label{ margin: 0 0 4px; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; color: var(--college); }
.cb-final__teams{ margin: 0 0 10px; font-family: var(--display); font-weight: 850; font-size: 1.3rem; letter-spacing: -.024em; color: var(--ink); }
.cb-final__game{ margin: 0 0 4px; font-size: .9rem; color: var(--ink-soft); font-family: var(--mono); }

.cb-steps{ margin: 0; padding-left: 22px; display: grid; gap: 10px; }
.cb-step{ color: var(--ink-soft); line-height: 1.6; }
.cb-step__name{ display: block; font-weight: 700; color: var(--ink); }
.cb-step__detail{ display: block; font-size: .91rem; }

/* -------------------------------------------------- archive furniture --- */

.cb-two{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }

.cb-cinders, .cb-games, .cb-paths{ display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.cb-cinder, .cb-game, .cb-path{
  padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.cb-cinder__year, .cb-game__year{
  font-family: var(--mono); font-weight: 700; font-size: 0.88rem; color: var(--college);
}
.cb-cinder__team, .cb-game__title{
  margin: 4px 0 4px; font-family: var(--display); font-weight: 800; font-size: 1.06rem;
  letter-spacing: -.018em; color: var(--ink);
}
.cb-cinder__seed{ display: block; font-size: 0.88rem; color: var(--ink-faint); font-family: var(--mono); margin-bottom: 8px; }
.cb-cinder__note, .cb-game__text, .cb-path__note{ margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--ink-soft); }
.cb-path__player{ display: block; font-family: var(--display); font-weight: 800; font-size: 1.04rem; color: var(--ink); }
.cb-path__college{ display: block; font-size: 0.9rem; color: var(--college); font-weight: 650; margin: 2px 0 8px; }

.cb-venues{ display: grid; gap: 8px; margin: 14px 0; }
.cb-venue{
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 14px; align-items: start;
  padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2);
}
.cb-venue__years{ font-family: var(--mono); font-size: 0.9rem; color: var(--college); font-weight: 700; }
.cb-venue__body{ display: flex; flex-direction: column; gap: 3px; }
.cb-venue__name{ font-weight: 700; color: var(--ink); }
.cb-venue__note{ font-size: 0.9rem; color: var(--ink-faint); line-height: 1.5; }
@media (max-width: 640px){ .cb-venue{ grid-template-columns: 1fr; gap: 4px; } }

/* =============================================================== BATS === */

.batart{ display: block; width: 100%; height: auto; }

/* The print on the barrel. A real bat has three levels of it: the model name
   large, the variant under it, the brand back on the taper, and the
   certification stamp small enough that you have to look for it. Sizes are
   set on the elements themselves, because they are fitted to the space each
   bat's own geometry leaves. */
.batart__model{ font-family: var(--display); font-weight: 900; }
.batart__sub{ font-family: var(--display); font-weight: 700; }
.batart__brand{ font-family: var(--display); font-weight: 800; }
.batart__stamp{ font-family: var(--mono); font-weight: 700; }
.batart__wordmark{
  font-family: var(--display); font-size: .88rem; font-weight: 800;
  letter-spacing: .16em; opacity: .92;
}

.cb-bigtruth{
  margin: 0 0 30px; padding: 26px 28px; border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--college) 38%, var(--line));
  background: linear-gradient(135deg, var(--college-soft), transparent 60%), var(--surface);
}
.cb-bigtruth__eyebrow{
  margin: 0 0 6px; font-size: 0.8rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .14em; color: var(--college);
}
.cb-bigtruth__head{
  margin: 0 0 18px; font-family: var(--display); font-weight: 850;
  font-size: clamp(1.4rem, 3.2vw, 2rem); line-height: 1.14; letter-spacing: -.032em; color: var(--ink);
}
.cb-bigtruth__grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 24px; }
.cb-bigtruth__lead{ margin: 0 0 12px; color: var(--ink); font-size: 1rem; line-height: 1.6; }
.cb-bigtruth__list{ margin: 0; padding-left: 20px; color: var(--ink-soft); font-size: .91rem; line-height: 1.65; }
.cb-bigtruth__list li{ margin-bottom: 7px; }
.cb-bigtruth__study{
  padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); margin-bottom: 14px;
}
.cb-bigtruth__studyLabel{ font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); }
.cb-bigtruth__studyText{ margin: 4px 0 0; font-family: var(--mono); font-size: 0.92rem; color: var(--ink); }
.cb-bigtruth__physics, .cb-bigtruth__twist{ margin: 0 0 12px; color: var(--ink-soft); font-size: .91rem; line-height: 1.6; }
.cb-bigtruth__flag{ margin: 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink-faint); font-size: 0.9rem; line-height: 1.55; }
.cb-bigtruth__kicker{
  margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line);
  font-weight: 650; color: var(--ink); font-size: .98rem; line-height: 1.6;
}

.batbar{ display: grid; gap: 12px; margin-bottom: 18px; }
.batbar__group{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.batbar__label{
  flex: none; font-size: 0.8rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-faint); width: 4.4rem;
}
.batbar__chips{ display: flex; flex-wrap: wrap; gap: 6px; }
.batchip{
  padding: 6px 13px; border-radius: 999px; cursor: pointer; font: inherit;
  font-size: 0.9rem; font-weight: 600;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
}
.batchip:hover{ border-color: var(--college); color: var(--ink); }
.batchip.is-on{ background: var(--college); border-color: var(--college); color: #14100a; font-weight: 700; }

.batgrid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }

/* The flip. Same mechanic as the Show cards, for the same reason: the front
   is the bat and the back is the argument, and those are two different
   visits. A fixed height keeps the grid from reflowing on every flip.
   ON THE HEIGHT, AND THE DEAD SPACE THAT WAS IN IT. A bat drawn flat across a
   300 pixel column is 45 pixels tall, which left a well of empty card between
   the tags and the price, and a grid of mostly-empty cards reads as unfinished
   even when every card is complete. The bat is angled and scaled up instead,
   the way a bat is actually photographed, which fills the space with the thing
   the visitor came to look at rather than with padding. */
.batcard{ perspective: 1400px; cursor: pointer; height: 362px; }
.batcard:focus-visible{ outline: 2px solid var(--college); outline-offset: 3px; border-radius: var(--radius); }
.batcard__inner{
  position: relative; width: 100%; height: 100%;
  transition: transform .55s cubic-bezier(.32,.72,.3,1); transform-style: preserve-3d;
}
.batcard.is-flipped .batcard__inner{ transform: rotateY(180deg); }
.batcard__face{
  position: absolute; inset: 0; backface-visibility: hidden;
  display: flex; flex-direction: column;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
}
.batcard__face--back{ transform: rotateY(180deg); overflow-y: auto; padding-bottom: 12px; }
.batcard__face--back::-webkit-scrollbar{ width: 5px; }
.batcard__face--back::-webkit-scrollbar-thumb{ background: var(--line); border-radius: 3px; }
.batcard:hover .batcard__face{ border-color: color-mix(in srgb, var(--college) 55%, var(--line)); }

.batcard__head{ display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.batcard__names{ display: flex; flex-direction: column; min-width: 0; }
.batcard__brand{ font-size: 0.84rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--college); }
.batcard__model{ font-family: var(--display); font-weight: 800; font-size: 1.1rem; letter-spacing: -.02em; color: var(--ink); line-height: 1.16; }
.batcard__year{ flex: none; font-family: var(--mono); font-size: 0.88rem; color: var(--ink-faint); }
.batcard__art{
  margin: 10px -10px 12px; height: 128px;
  display: grid; place-items: center; overflow: hidden;
}
.batcard__art .batart{
  width: 128%; transform: rotate(-13deg);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.22));
}
.batcard__tags{ display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.battag{
  padding: 3px 9px; border-radius: 999px; font-size: 0.8rem; font-weight: 650;
  background: var(--surface-2); color: var(--ink-faint); white-space: nowrap;
}
.battag--endloaded{ background: color-mix(in srgb, var(--neg) 16%, transparent); color: var(--neg); }
.battag--balanced{ background: var(--college-soft); color: var(--college); }
.battag--light{ background: color-mix(in srgb, var(--pos) 16%, transparent); color: var(--pos); }
.battag--good{ background: color-mix(in srgb, var(--pos) 16%, transparent); color: var(--pos); }
.battag--warn{ background: color-mix(in srgb, var(--neg) 14%, transparent); color: var(--neg); }
.battag--pick{ background: var(--college); color: #14100a; font-weight: 800; }
.batcard__price{ display: flex; align-items: baseline; gap: 9px; margin-top: auto; }
.batcard__priceNow{ font-family: var(--display); font-weight: 850; font-size: 1.24rem; color: var(--ink); }
.batcard__priceWas{ font-size: 0.88rem; color: var(--ink-faint); text-decoration: line-through; }
.batcard__college{ margin: 8px 0 0; font-size: 0.86rem; color: var(--college); font-weight: 600; }
.batcard__flip{
  margin: 10px 0 0; font-size: 0.8rem; text-transform: uppercase; letter-spacing: .11em;
  font-weight: 700; color: var(--ink-faint);
}
/* The link out to the real bat, sitting under the drawing on the front of the
   card next to the flip hint. A button rather than a line of link text,
   because it is an action and because linked text on this site is never
   blue. */
.batcard__foot{
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 10px;
}
.batcard__foot .batcard__flip{ margin: 0; }
.batcard__link{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--college) 55%, var(--line));
  background: var(--college-soft); color: var(--ink);
  font-size: .84rem; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.batcard__link::after{ content: "\2197"; font-weight: 800; color: var(--college); }
.batcard__link:hover{ background: var(--college); color: #14100a; border-color: var(--college); }
.batcard__link:hover::after{ color: #14100a; }
.batcard__link:focus-visible{ outline: 2px solid var(--college); outline-offset: 2px; }

.batcard__backhead{ font-family: var(--display); font-weight: 800; font-size: .98rem; color: var(--ink); margin-bottom: 12px; }
.batcard__scores{ display: grid; gap: 6px; margin-bottom: 12px; }
.batcard__specs{ margin: 0 0 12px; display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 0.88rem; }
.batcard__specs dt{ color: var(--ink-faint); white-space: nowrap; }
.batcard__specs dd{ margin: 0; color: var(--ink-soft); }
.batcard__notes{ margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--ink-soft); }

.batscore{ display: grid; grid-template-columns: 5.4rem 1fr 2rem; gap: 9px; align-items: center; }
.batscore__label{ font-size: 0.86rem; color: var(--ink-faint); }
.batscore__track{ height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.batscore__fill{ height: 100%; border-radius: 4px; background: var(--ink-faint); }
.batscore__fill[data-band="high"]{ background: var(--college); }
.batscore__fill[data-band="mid"]{ background: color-mix(in srgb, var(--college) 62%, var(--ink-faint)); }
.batscore__fill[data-band="low"]{ background: color-mix(in srgb, var(--ink-faint) 80%, transparent); }
.batscore__value{ font-family: var(--mono); font-size: 0.88rem; font-weight: 700; color: var(--ink); text-align: right; }

.cb-bands{ display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 16px 0; }
.cb-band{ padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.cb-band__name{ display: block; font-family: var(--display); font-weight: 800; font-size: 1.02rem; color: var(--college); }
.cb-band__range{ display: block; font-family: var(--mono); font-size: 0.88rem; color: var(--ink-faint); margin: 2px 0 7px; }
.cb-band__note{ margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--ink-soft); }

.cb-pair{ margin-top: 24px; }
.cb-pair__grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.cb-pair__col{ padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.cb-pair__name{ display: block; font-family: var(--display); font-weight: 800; font-size: 1rem; color: var(--ink); }
.cb-pair__art{ margin: 12px 0 14px; }

.cb-fits{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.cb-fit{ padding: 15px 17px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.cb-fit__profile{ display: block; font-weight: 700; color: var(--ink); line-height: 1.4; }
.cb-fit__want{
  display: inline-block; margin: 8px 0; padding: 3px 10px; border-radius: 999px;
  background: var(--college-soft); color: var(--college); font-size: 0.88rem; font-weight: 700;
}
.cb-fit__why{ margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--ink-soft); }

/* =========================================================== PIPELINE === */

.cb-levels{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.cb-level{ padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); border-top: 3px solid var(--college); }
.cb-level__short{ font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--college); }
.cb-level__name{ margin: 4px 0 3px; font-family: var(--display); font-weight: 800; font-size: 1.08rem; letter-spacing: -.02em; color: var(--ink); }
.cb-level__schools{ display: block; font-size: 0.88rem; color: var(--ink-faint); font-family: var(--mono); margin-bottom: 10px; }
.cb-level__reality{ margin: 0 0 10px; font-size: 0.92rem; line-height: 1.6; color: var(--ink-soft); }
.cb-level__money{ margin: 0 0 10px; font-size: 0.92rem; line-height: 1.55; color: var(--ink-soft); }
.cb-level__truth{
  margin: 0; padding-left: 12px; border-left: 2px solid var(--college);
  font-size: 0.92rem; line-height: 1.55; color: var(--ink);
}

.cb-assess{ padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin: 18px 0; }
.cb-assess__grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 20px; }
.cb-assess__row{ display: flex; flex-direction: column; gap: 5px; }
.cb-assess__label{ font-size: 0.9rem; font-weight: 650; color: var(--ink-soft); }
.cb-assess__field{ display: flex; align-items: center; gap: 8px; }
.cb-assess__input{
  flex: 1; min-width: 0; padding: 9px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font: inherit;
}
.cb-assess__input:focus{ outline: none; border-color: var(--college); background: var(--surface); }
.cb-assess__unit{ font-family: var(--mono); font-size: 0.88rem; color: var(--ink-faint); width: 2.4rem; }
.cb-assess__go{
  margin-top: 18px; padding: 11px 22px; border-radius: 999px; cursor: pointer; font: inherit;
  font-weight: 700; background: var(--college); border: 0; color: #14100a;
}
.cb-assess__go:hover{ filter: brightness(1.06); }
.cb-assess__out{ display: grid; gap: 10px; }
.cb-assess__verdict{
  padding: 18px 20px; border-radius: var(--radius); background: var(--surface-2);
  border-left: 4px solid var(--ink-faint);
}
.cb-assess__verdict.is-level{ border-left-color: var(--college); background: linear-gradient(100deg, var(--college-soft), transparent 60%), var(--surface); }
.cb-assess__verdictEyebrow{ margin: 0 0 3px; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; color: var(--ink-faint); }
.cb-assess__verdictName{ margin: 0 0 6px; font-family: var(--display); font-weight: 850; font-size: 1.28rem; letter-spacing: -.024em; color: var(--ink); }
.cb-assess__verdictLine{ margin: 0; color: var(--ink-soft); line-height: 1.6; }
.cb-assess__caveat{
  margin: 6px 0 0; padding: 13px 15px; border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--ink-faint); font-size: 0.92rem; line-height: 1.6;
}
.cb-tool{ padding: 12px 15px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.cb-tool__head{ display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cb-tool__label{ font-weight: 650; color: var(--ink); }
.cb-tool__value{ font-family: var(--mono); font-weight: 700; color: var(--college); }
.cb-tool__chips{ display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.cb-tool__chip{ padding: 3px 10px; border-radius: 999px; background: var(--college-soft); color: var(--college); font-size: 0.84rem; font-weight: 650; }
.cb-tool__short{ margin: 8px 0 0; font-size: 0.9rem; color: var(--ink-faint); }
.cb-tool__note{ margin: 8px 0 0; font-size: 0.88rem; color: var(--ink-faint); line-height: 1.5; }

.cb-bench{ margin-bottom: 22px; }
.cb-bench__name{ margin: 0 0 4px; font-family: var(--display); font-weight: 800; font-size: 1rem; color: var(--ink); }
.cb-bench__note{ margin: 0; font-size: 0.9rem; color: var(--ink-faint); line-height: 1.55; }

.cb-timeline{ margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.cb-timeline__row{
  display: grid; grid-template-columns: 15rem 1fr; gap: 16px;
  padding: 13px 0; border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.cb-timeline__row:first-child{ border-top: 0; }
.cb-timeline__when{ font-weight: 700; color: var(--college); font-size: .9rem; }
.cb-timeline__what{ color: var(--ink-soft); font-size: .91rem; line-height: 1.6; }
@media (max-width: 700px){ .cb-timeline__row{ grid-template-columns: 1fr; gap: 4px; } }

/* ======================================================= CONFERENCES === */

.cb-confs{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.cb-conf{
  padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
  border-top: 3px solid var(--conf-a, var(--college));
}
.cb-conf__head{ display: flex; flex-direction: column; text-decoration: none; }
.cb-conf__abbr{ font-family: var(--display); font-weight: 850; font-size: 1.16rem; letter-spacing: -.022em; color: var(--ink); }
.cb-conf__head:hover .cb-conf__abbr{ color: var(--college); }
.cb-conf__name{ font-size: 0.88rem; color: var(--ink-faint); }
.cb-conf__meta{ display: flex; gap: 12px; margin: 9px 0; font-family: var(--mono); font-size: 0.86rem; color: var(--ink-faint); }
.cb-conf__bids{ color: var(--college); font-weight: 700; }
.cb-conf__blurb{ margin: 0 0 10px; font-size: 0.92rem; line-height: 1.55; color: var(--ink-soft); }
.cb-conf__flag{
  margin: 0 0 10px; padding: 6px 10px; border-radius: var(--radius-sm);
  background: var(--college-soft); color: var(--college); font-size: 0.86rem; font-weight: 650;
}
.cb-conf__members{ display: flex; flex-wrap: wrap; gap: 4px; }
.cb-member{
  display: inline-flex; align-items: center; gap: 5px; text-decoration: none;
  padding: 3px 9px; border-radius: 999px; background: var(--surface-2);
  font-size: 0.86rem; color: var(--ink-soft);
}
.cb-member:hover{ background: var(--college-soft); color: var(--ink); }
.cb-member__moved{ font-size: .84rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--college); }

.cb-membergrid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.cb-membercard{
  display: flex; flex-direction: column; gap: 2px; text-decoration: none;
  padding: 11px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface);
}
.cb-membercard:hover{ border-color: var(--college); }
.cb-membercard__school{ font-weight: 700; color: var(--ink); }
.cb-membercard__nick{ font-size: 0.88rem; color: var(--ink-faint); }
.cb-membercard__moved{ margin-top: 4px; font-size: 0.8rem; color: var(--college); font-weight: 650; }

/* ============================================================ SCORES === */

.cb-seriesdemo{ margin-top: 18px; }
.cb-seriesdemo__label{ margin: 0 0 10px; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); }
.cb-seriescard{
  max-width: 460px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
}
.cb-seriescard__head{
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 13px 16px; background: var(--surface-2);
}
.cb-seriescard__teams{ font-weight: 750; color: var(--ink); }
.cb-seriescard__result{ font-size: 0.88rem; font-weight: 700; color: var(--college); }
.cb-seriescard__games{ display: grid; }
.cb-seriescard__game{
  display: grid; grid-template-columns: 4.6rem 1fr; gap: 12px;
  padding: 10px 16px; border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
.cb-seriescard__game.is-won{ background: color-mix(in srgb, var(--college) 7%, transparent); }
.cb-seriescard__num{ font-family: var(--mono); font-size: 0.86rem; color: var(--ink-faint); }
.cb-seriescard__line{ font-size: .9rem; color: var(--ink-soft); }
.cb-seriescard__game.is-won .cb-seriescard__line{ color: var(--ink); font-weight: 650; }

/* =====================================================================
   HOT SEAT
   ---------------------------------------------------------------------
   A manager's season: the strip that says how hot the seat is, the night
   itself, the options before they are priced, and the reveal that prices
   them all at once. Two colors do the work throughout and they never swap
   meaning: the accent is win probability, and green against red is won
   against lost. The book is drawn in the amber that the rest of the site
   uses for "this is the measured answer".
   ===================================================================== */

.hshead{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px 22px;
  align-items: center;
  padding: 16px 18px;
  margin: 18px 0 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.hshead__id, .hshead__seat{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hshead__label{
  font: 600 11px/1.2 var(--display);
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint);
}
.hshead__record{ font: 800 34px/1 var(--mono); color: var(--ink); }
.hshead__note{ font-size: 13px; color: var(--ink-soft); }

.hsmeter{ height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.hsmeter__fill{ height: 100%; width: 0; background: var(--accent-3); transition: width .35s ease; }
.hsmeter__fill.is-warm{ background: var(--accent-2); }
.hsmeter__fill.is-hot{ background: var(--neg); }

.hsledger{ grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; }
.hsledger__dot{
  width: 13px; height: 13px; border-radius: 4px;
  background: var(--surface-3); border: 1px solid var(--line);
}
.hsledger__dot.is-w{ background: var(--pos); border-color: var(--pos); }
.hsledger__dot.is-l{ background: var(--neg); border-color: var(--neg); }
.hsledger__dot.is-now{ outline: 2px solid var(--accent); outline-offset: 2px; }
.hsledger--big .hsledger__dot{ width: 18px; height: 18px; border-radius: 5px; }
.hsledger--big .hsledger__dot.is-book{ box-shadow: 0 0 0 2px var(--accent-2) inset; }

/* THE WAY OUT OF A SEASON. Deliberately quiet until it is clicked: it sits
   under the ledger as one small link, and only when somebody actually wants
   out does it open into the question and the three answers. A wipe-your-run
   button styled like a wipe-your-run button is a thing people press by
   accident on a phone. */
.hsquit{
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}
.hsquit__ask{
  margin-right: auto;
  font: 600 13px/1.4 var(--display);
  color: var(--ink-soft);
}
.hsquit__btn{
  padding: 6px 12px;
  font: 600 13px/1 var(--display);
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.hsquit__btn:hover{ border-color: var(--accent-line); background: var(--surface-3); }
.hsquit__btn.is-go{ background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.hsquit__btn.is-go:hover{ background: var(--accent-hot); }
.hsquit__btn.is-quiet{ background: transparent; color: var(--ink-faint); border-style: dashed; }
.hsquit__btn.is-quiet:hover{ color: var(--ink); border-style: solid; }

/* ---------- the night ---------- */

.hsnight{ margin: 16px 0 26px; }

.hssit{
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
}
.hssit__top{
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 12px 18px; background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.hssit__game{ font: 700 13px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.hssit__date{ font-size: 13px; color: var(--ink-faint); }
.hssit__body{ display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; padding: 18px; align-items: center; }
.hssit__read{ display: grid; gap: 6px; }
.hssit__row{ display: flex; justify-content: space-between; gap: 14px; padding-bottom: 5px; border-bottom: 1px solid var(--line-soft); }
.hssit__row:last-child{ border-bottom: 0; }
.hssit__label{ font-size: .84rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; }
.hssit__value{ font: 600 14.5px/1.2 var(--mono); color: var(--ink); text-align: right; }
.hssit__row.is-you .hssit__value{ color: var(--accent-hot); }

.hssit__match{ display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.hssit__man{ display: grid; gap: 2px; padding: 12px 18px; background: var(--surface); }
.hssit__manLabel{ font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.hssit__manName{ font: 700 17px/1.2 var(--display); }
.hssit__manNote{ font-size: 13px; color: var(--ink-soft); }

.hsdia{ display: grid; justify-items: center; gap: 8px; }
.hsdia__field{ width: 128px; height: 128px; }
.hsdia__base{ fill: var(--surface-3); stroke: var(--line); stroke-width: 1.5; }
.hsdia__base.is-on{ fill: var(--accent-2); stroke: var(--accent-2); }
.hsdia__outs{ display: flex; align-items: center; gap: 6px; }
.hsdia__out{ width: 10px; height: 10px; border-radius: 3px; background: var(--surface-3); border: 1px solid var(--line); }
.hsdia__out.is-on{ background: var(--neg); border-color: var(--neg); }
.hsdia__outsLabel{ font-size: 13px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .07em; }

.hsask{ margin: 18px 0 12px; }
.hsask__prompt{ font: 700 clamp(19px, 2.4vw, 25px)/1.25 var(--display); margin: 0 0 6px; }
.hsask__why{ font-size: 14.5px; color: var(--ink-soft); max-width: 68ch; margin: 0; }

.hspen{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.hspen__label{ font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-right: 4px; }
.hschip{
  display: grid; gap: 1px; padding: 7px 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
}
.hschip__name{ font: 700 12.5px/1.2 var(--display); }
.hschip__note{ font-size: 13px; color: var(--ink-faint); }
.hschip.is-out{ opacity: .5; }

.hsopts{ display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.hsopt{
  display: grid; gap: 6px; text-align: left; padding: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  color: inherit; cursor: pointer; transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.hsopt:hover:not(:disabled){ border-color: var(--accent-line); background: var(--surface-2); transform: translateY(-1px); }
.hsopt:disabled{ cursor: default; }
.hsopt.is-done{ opacity: .5; }
.hsopt.is-picked{ opacity: 1; border-color: var(--accent); background: var(--accent-soft); }
.hsopt.is-out{ opacity: .4; }
.hsopt__label{ font: 700 16px/1.25 var(--display); }
.hsopt__note{ font-size: .88rem; color: var(--ink-soft); }
.hsopt__blocked{ font-size: .84rem; color: var(--neg); }
.hsopt__rest{ font-size: .84rem; color: var(--accent-2); }

/* ---------- the reveal ---------- */

.hsreveal{
  margin-top: 16px; padding: 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.hsreveal__head{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hsreveal__verdict{ font: 800 clamp(20px, 2.6vw, 26px)/1.1 var(--display); }
.hsreveal__head.is-w .hsreveal__verdict{ color: var(--pos); }
.hsreveal__head.is-l .hsreveal__verdict{ color: var(--neg); }
.hsreveal__odds{ font: 600 13px/1 var(--mono); color: var(--ink-faint); }
.hsreveal__said{ font-size: 16px; line-height: 1.5; margin: 10px 0 14px; }
.hsreveal__swing{ font-size: .88rem; color: var(--ink-soft); margin: 8px 0 0; }

.hswe__track{ position: relative; height: 14px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.hswe__start{ position: absolute; inset: 0 auto 0 0; background: var(--accent-soft); border-right: 2px solid var(--accent); }
.hswe__end{ position: absolute; top: 0; bottom: 0; }
.hswe__end.is-up{ background: var(--pos); }
.hswe__end.is-down{ background: var(--neg); }
.hswe__marks{ display: flex; justify-content: space-between; margin-top: 6px; }
.hswe__mark{ font: 600 12px/1 var(--mono); color: var(--ink-faint); }
.hswe__mark.is-up{ color: var(--pos); }
.hswe__mark.is-down{ color: var(--neg); }

.hsbook{ margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.hsbook__title, .hsreal__title{
  font: 700 12px/1 var(--display); letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 10px;
}
.hsbook__row{ display: grid; grid-template-columns: minmax(120px, 1.2fr) minmax(80px, 2fr) 48px auto; gap: 10px; align-items: center; padding: 5px 0; }
.hsbook__name{ font-size: 13.5px; }
.hsbook__row.is-mine .hsbook__name{ font-weight: 700; }
.hsbook__bar{ height: 9px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.hsbook__fill{ height: 100%; background: var(--ink-faint); }
.hsbook__row.is-best .hsbook__fill{ background: var(--accent-2); }
.hsbook__row.is-mine .hsbook__fill{ background: var(--accent); }
.hsbook__row.is-mine.is-best .hsbook__fill{ background: var(--accent-3); }
.hsbook__we{ font: 700 13px/1 var(--mono); text-align: right; }
.hsbook__tags{ display: flex; gap: 5px; }
.hsbook__tag{ font-size: 13px; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; }
.hsbook__tag.is-mine{ background: var(--accent-soft); color: var(--accent-hot); }
.hsbook__tag.is-best{ background: var(--accent-2-soft); color: var(--accent-2); }
.hsbook__verdict{ font-size: 13.5px; color: var(--ink-soft); margin: 10px 0 0; }

.hsreal{ margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.hsreal__said{ font-size: 14px; line-height: 1.5; margin: 0; }
.hsreal__note{ font-size: 13px; color: var(--ink-faint); margin: 6px 0 0; }

.hsnext{
  margin-top: 18px; padding: 12px 22px; width: 100%;
  font: 700 15px/1 var(--display); color: var(--accent-ink); background: var(--accent);
  border: 0; border-radius: var(--radius); cursor: pointer;
}
.hsnext:hover{ background: var(--accent-hot); }

/* ---------- the end of it ---------- */

.hsend{
  margin: 16px 0 26px; padding: 22px;
  background: var(--surface); border: 1px solid var(--line);
  border-top: 3px solid var(--pos); border-radius: var(--radius-lg);
}
.hsend.is-fired{ border-top-color: var(--neg); }
.hsend__eyebrow{ font: 600 11px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 6px; }
.hsend__title{ font: 800 clamp(22px, 3vw, 30px)/1.15 var(--display); margin: 0 0 10px; }
.hsend__verdict{ font-size: 15px; line-height: 1.55; color: var(--ink-soft); max-width: 70ch; margin: 0 0 18px; }
.hsend__grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; }
.hsend__stat{ display: grid; gap: 2px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); }
.hsend__statValue{ font: 800 22px/1.1 var(--mono); }
.hsend__statLabel{ font-size: .84rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.hsend__statNote{ font-size: .84rem; color: var(--ink-soft); }
.hsend__key{ font-size: .84rem; color: var(--ink-faint); margin: 8px 0 0; }
.hsend__actions{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.hsbtn{
  padding: 11px 18px; font: 700 14px/1 var(--display); cursor: pointer;
  background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius);
}
.hsbtn:hover{ border-color: var(--accent-line); }
.hsbtn--go{ background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.hsbtn--go:hover{ background: var(--accent-hot); }

.hshow{ margin: 26px 0 40px; padding-top: 18px; border-top: 1px solid var(--line); }
.hshow__title{ font: 700 12px/1 var(--display); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 14px; }
.hshow__row{ margin-bottom: 14px; }
.hshow__name{ font: 700 14.5px/1.3 var(--display); margin: 0 0 3px; }
.hshow__note{ font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); max-width: 76ch; margin: 0; }
.hsempty{ padding: 22px; color: var(--ink-soft); }

.toolcard--hs{ border-top: 3px solid var(--neg); }

@media (max-width: 720px){
  .hshead{ grid-template-columns: 1fr; }
  .hssit__body{ grid-template-columns: 1fr; justify-items: center; }
  .hssit__read{ width: 100%; }
  .hssit__match{ grid-template-columns: 1fr; }
  .hsbook__row{ grid-template-columns: minmax(90px, 1fr) 44px auto; }
  .hsbook__bar{ display: none; }
}

/* ---------- The College Rulebook ----------
   A page for one book, which is a different shape from the four-book
   comparison and has to look it. The comparison is four columns and the
   reader's eye moves sideways. This one is a book: a numbered list of what it
   does differently, the four things people say about it that are wrong, and
   then eighteen rulings that open one at a time.

   The color is the college tone rather than the site accent, because a page
   that belongs to one tab should say so without a label. */

.crb-compare{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 24px;
  margin: 22px 0;
  padding: 20px 22px;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  border-left: 4px solid var(--college);
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--college-soft), transparent 62%), var(--surface);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.crb-compare:hover{ background: linear-gradient(120deg, var(--college-soft), transparent 48%), var(--surface-2); transform: translateY(-1px); }
.crb-compare__words{ min-width: 0; }
.crb-compare__label{
  display: block;
  font-family: var(--display);
  font-size: 1.24rem;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--ink);
}
.crb-compare__text{ margin: 5px 0 0; font-size: .96rem; line-height: 1.5; color: var(--ink-soft); max-width: 62ch; }
.crb-compare__books{ display: flex; flex-wrap: wrap; gap: 6px; }
.crb-book-chip{
  font-family: var(--mono);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-faint);
  background: var(--surface-2);
  white-space: nowrap;
}
.crb-book-chip.is-here{ color: var(--college); border-color: var(--college); background: var(--college-soft); }
.crb-compare__go{
  grid-column: 1 / -1;
  font-size: .92rem;
  font-weight: 700;
  color: var(--college);
}
.crb-compare__go::after{ content: " \2192"; }
@media (max-width: 700px){
  .crb-compare{ grid-template-columns: 1fr; }
}

/* The six differences. Numbered, because they are a list somebody could
   repeat back, and a numbered list is remembered where a grid of equal cards
   is scrolled past. */
.crb-diffs{ display: grid; gap: 2px; background: var(--line-soft); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.crb-diff{
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 18px;
  padding: 18px 20px;
  background: var(--surface);
}
.crb-diff__num{
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--college);
  opacity: .55;
}
.crb-diff__head{ margin: 0 0 6px; font-family: var(--display); font-size: 1.16rem; font-weight: 700; letter-spacing: -.015em; color: var(--ink); }
.crb-diff__text{ margin: 0; font-size: 1rem; line-height: 1.62; color: var(--ink-soft); max-width: 76ch; }
@media (max-width: 600px){
  .crb-diff{ grid-template-columns: 1fr; gap: 4px; }
  .crb-diff__num{ font-size: 1.2rem; }
}

/* Said, then actually. Two lines, and the second one is the one that stays. */
.crb-myths{ display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.crb-myth{ padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.crb-myth__said, .crb-myth__true{ display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; margin: 0; align-items: baseline; }
.crb-myth__true{ margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.crb-myth__tag{
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.crb-myth__said .crb-myth__tag{ color: var(--neg); }
.crb-myth__true .crb-myth__tag{ color: var(--pos); }
.crb-myth__said .crb-myth__text{ font-size: 1rem; line-height: 1.55; color: var(--ink-faint); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--neg) 55%, transparent); }
.crb-myth__true .crb-myth__text{ font-size: 1rem; line-height: 1.6; color: var(--ink); }

/* The rulings. */
.crb-chips{ display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 14px; }
.crb-chip{
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
}
.crb-chip:hover{ border-color: var(--college); color: var(--ink); }
.crb-chip.is-on{ background: var(--college); border-color: var(--college); color: var(--accent-ink); }

.crb-rules{ display: grid; gap: 2px; background: var(--line-soft); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.crb-rule{ background: var(--surface); }
.crb-rule.is-open{ background: var(--surface-2); }
.crb-rule.is-headline .crb-rule__name::before{
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--college);
  vertical-align: middle;
}
.crb-rule__head{
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 20px;
  padding: 16px 20px;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.crb-rule__head:hover{ background: var(--surface-2); }
.crb-rule__top{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.crb-rule__name{ font-family: var(--display); font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.crb-rule__same, .crb-rule__flag{
  font-family: var(--mono);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
}
.crb-rule__same{ color: var(--ink-faint); background: var(--surface-3); }
.crb-rule__flag{ color: var(--college); background: var(--college-soft); }
.crb-rule__call{ margin: 6px 0 0; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); max-width: 74ch; }
.crb-rule__meta{ display: grid; gap: 3px; justify-items: end; text-align: right; }
.crb-rule__rule{ font-family: var(--mono); font-size: .92rem; font-weight: 700; color: var(--college); white-space: nowrap; }
.crb-rule__cat{ font-size: .82rem; color: var(--ink-faint); white-space: nowrap; }
@media (max-width: 640px){
  .crb-rule__head{ grid-template-columns: 1fr; }
  .crb-rule__meta{ justify-items: start; text-align: left; }
}

.crb-rule__body{ padding: 0 20px 20px; display: grid; gap: 14px; }
.crb-rule__situation{
  margin: 0;
  padding: 12px 16px;
  border-left: 3px solid var(--college);
  background: var(--surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
}
.crb-rule__detail{ margin: 0; font-size: 1rem; line-height: 1.66; color: var(--ink-soft); max-width: 80ch; }
.crb-rule__quirk{ padding: 14px 16px; border: 1px dashed var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.crb-rule__quirkLabel{
  display: block;
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.crb-rule__quirkText{ margin: 0; font-size: .98rem; line-height: 1.62; color: var(--ink-soft); }

.crb-others{ display: grid; gap: 2px; background: var(--line-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.crb-others__label{
  margin: 0;
  padding: 9px 14px;
  background: var(--surface);
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.crb-other{
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 14px;
  padding: 11px 14px;
  background: var(--surface);
  align-items: baseline;
}
.crb-other__book{ font-family: var(--mono); font-size: .88rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.crb-other--mlb .crb-other__book{ color: var(--accent); }
.crb-other--ll .crb-other__book{ color: var(--accent-2); }
.crb-other--usssa .crb-other__book{ color: var(--accent-3); }
.crb-other__call{ font-size: .98rem; line-height: 1.5; color: var(--ink-soft); }
@media (max-width: 560px){
  .crb-other{ grid-template-columns: 1fr; gap: 2px; }
}

.crb-rule__go{
  justify-self: start;
  font-size: .94rem;
  font-weight: 700;
  color: var(--college);
  text-decoration: none;
  padding: 10px 16px;
  border: 1px solid var(--college);
  border-radius: 999px;
}
.crb-rule__go:hover{ background: var(--college-soft); }
.crb-rule__go::after{ content: " \2192"; }

/* The comparison's own way back out, now that the college column has a
   page behind it. */
.rb-play__actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.rb-outlink{
  font-size: .94rem;
  font-weight: 700;
  color: var(--college);
  text-decoration: none;
  padding: 10px 16px;
  border: 1px solid var(--college);
  border-radius: 999px;
}
.rb-outlink:hover{ background: var(--college-soft); }
.rb-outlink::after{ content: " \2192"; }

/* ---------------------------------------------------------------------------
   LINEUP LAB: THE COACHING LAYER (Sept 9)

   The page used to end at a number. It now ends at a decision, and the panels
   below are that decision in four parts: the card, the read on the offense,
   what would actually help, and the things no export contains. They are shared
   between the big league page and the GameChanger one, so everything here is
   written against classes rather than against either page.
   ------------------------------------------------------------------------ */

.lu-panel__sub{ margin: 0; font-size: var(--step-label); color: var(--ink-faint); max-width: 80ch; }

.lu-toggle{ display: flex; align-items: center; gap: 8px; font-size: var(--step-small); color: var(--ink-soft); cursor: pointer; padding-top: 4px; }
.lu-toggle input{ accent-color: var(--accent); width: 15px; height: 15px; }

.lu-coach{ display: grid; gap: 22px; margin-top: 26px; }

.lu-stale{
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  padding: 10px 14px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--line-soft); border-left: 3px solid var(--accent);
}
.lu-stale__text{ font-size: var(--step-small); color: var(--ink-soft); flex: 1 1 260px; }

/* -------------------------------------------------------------- the card */

.lu-rec{
  display: grid; gap: 14px; padding: 20px 22px;
  background: var(--surface); border: 1px solid var(--line);
  border-top: 3px solid var(--accent); border-radius: var(--radius);
}
.lu-rec__top{ display: flex; gap: 26px; align-items: flex-end; flex-wrap: wrap; }
.lu-rec__num{ display: grid; }
.lu-rec__delta{ display: grid; padding-bottom: 4px; }
.lu-rec__delta.is-up .lu-tile__value{ color: var(--pos); }
.lu-rec__delta .lu-tile__value{ font-size: 1.6rem; }
.lu-rec__delta .lu-tile__label{ max-width: 34ch; }

.lu-rec__list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lu-rec__row{
  display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start;
  padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line-soft);
}
.lu-rec__spot{ font-family: var(--mono); font-size: 1.35rem; font-weight: 800; color: var(--accent); text-align: center; line-height: 1.3; }
.lu-rec__who{ display: grid; gap: 3px; min-width: 0; }
.lu-rec__nameline{ display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.lu-rec__name{ font-weight: 700; }
.lu-rec__line{ font-family: var(--mono); font-size: var(--step-label); color: var(--ink-faint); }
.lu-rec__why{ margin: 0; font-size: var(--step-label); color: var(--ink-soft); max-width: 82ch; }
.lu-rec__buttons{ display: flex; gap: 10px; flex-wrap: wrap; }

.lu-tag{
  font-size: .84rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700;
  padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line);
}
.lu-tag.is-in{ color: var(--pos); border-color: var(--pos); }
.lu-tag.is-out{ color: var(--neg); border-color: var(--neg); }
.lu-tag.is-move{ color: var(--accent-2); border-color: var(--accent-2); }

.lu-changes{ display: grid; gap: 6px; padding-top: 6px; border-top: 1px solid var(--line-soft); }
.lu-changes__title{ margin: 6px 0 0; font-size: 1rem; }
.lu-changes__row{ display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.lu-changes__text{ font-size: var(--step-small); color: var(--ink-soft); }

/* ------------------------------------------------------------- the report */

.lu-report{ display: grid; gap: 16px; padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }

.lu-verdict{ display: grid; gap: 6px; padding: 12px 16px; background: var(--surface-2); border-left: 3px solid var(--accent-2); border-radius: var(--radius-sm); }
.lu-verdict__label{ font-family: var(--mono); font-size: 1.25rem; font-weight: 800; color: var(--accent-2); }
.lu-verdict__text{ margin: 0; color: var(--ink-soft); max-width: 82ch; }

.lu-rates{ display: grid; gap: 6px; }
.lu-rate{ display: grid; grid-template-columns: 150px 74px 1fr 120px; gap: 12px; align-items: center; font-size: var(--step-small); }
@media (max-width: 720px){ .lu-rate{ grid-template-columns: 120px 66px 1fr; } .lu-rate__vs{ display: none; } }
.lu-rate__label{ color: var(--ink-soft); }
.lu-rate__value{ font-family: var(--mono); font-weight: 700; text-align: right; }
.lu-rate__bar{ position: relative; height: 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-soft); overflow: hidden; }
.lu-rate__fill{ position: absolute; inset: 0 auto 0 0; background: var(--ink-faint); border-radius: 999px; }
.lu-rate__fill.is-up{ background: var(--pos); }
.lu-rate__fill.is-down{ background: var(--neg); }
.lu-rate__mark{ position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink); opacity: .55; z-index: 2; }
.lu-rate__vs{ font-family: var(--mono); font-size: var(--step-label); color: var(--ink-faint); }

.lu-carry{ display: grid; gap: 5px; }
.lu-carry__row{ display: grid; grid-template-columns: 160px 1fr 62px; gap: 12px; align-items: center; font-size: var(--step-small); }
@media (max-width: 720px){ .lu-carry__row{ grid-template-columns: 110px 1fr 52px; } }
.lu-carry__name{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lu-carry__track{ position: relative; height: 12px; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.lu-carry__fill{ position: absolute; top: 1px; bottom: 1px; border-radius: 2px; }
.lu-carry__fill.is-up{ background: var(--pos); }
.lu-carry__fill.is-down{ background: var(--neg); }
.lu-carry__zero{ position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--ink-faint); opacity: .7; }
.lu-carry__value{ font-family: var(--mono); font-weight: 700; text-align: right; }

.lu-running, .lu-risk{ display: grid; gap: 6px; padding: 12px 16px; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }

/* ------------------------------------------------------------- the levers */

.lu-levers{ display: grid; gap: 18px; padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.lu-levers__group{ display: grid; gap: 8px; }
.lu-lever{ display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.lu-lever__value{ display: grid; text-align: right; }
.lu-lever__runs{ font-family: var(--mono); font-size: 1.5rem; font-weight: 800; color: var(--accent); line-height: 1.1; }
.lu-lever__unit{ font-size: 0.84rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }
.lu-lever__body{ display: grid; gap: 5px; min-width: 0; }
.lu-lever__title{ font-weight: 700; }
.lu-lever__detail{ margin: 0; font-size: var(--step-label); color: var(--ink-soft); max-width: 84ch; }
.lu-lever__bar{ height: 5px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-soft); overflow: hidden; }
.lu-lever__fill{ display: block; height: 100%; background: var(--accent); }
.lu-lever__fill.is-down{ background: var(--neg); }

/* ----------------------------------------------------------- the judgment */

.lu-judge{
  display: grid; gap: 18px; padding: 22px;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-left: 3px solid var(--accent-2); border-radius: var(--radius);
}
.lu-judge__group{ display: grid; gap: 10px; }
.lu-judge__heading{ margin: 0; font-size: 1.05rem; color: var(--accent-2); }
.lu-judge__items{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.lu-judge__item{ display: grid; gap: 4px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.lu-judge__title{ font-weight: 700; font-size: var(--step-small); }
.lu-judge__text{ margin: 0; font-size: var(--step-label); color: var(--ink-soft); }

/* -----------------------------------------------------------------------
   THE BALLPARK, ON THE TEAM PAGE (Sept 9)

   This replaced Same Ball, Thirty Parks. That feature drew thirty small
   outlines next to each other; this one draws a single park large, and puts
   the answer beside it rather than under thirty of them. Two rules carried
   over from it and are worth keeping written down:

   1. The wall is drawn as thick as it is tall. A plan view normally cannot
      show wall height at all, which is why Fenway and Houston look like the
      same park on paper and play nothing alike.
   2. Color is never the whole answer. Every pin is also a labelled button in
      the row under the readout, so the picture is a shortcut rather than the
      only way in.

   The pins are HTML buttons laid over the SVG rather than shapes inside it.
   A button is focusable, reachable by keyboard and announced properly for
   free; an SVG circle pretending to be one is none of those things.
   ----------------------------------------------------------------------- */

.panel-block--stadium{ display: grid; gap: 16px; }

.sd-facts{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
  gap: 10px;
}
.sd-fact{
  display: grid; gap: 2px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
  border-left: 3px solid color-mix(in srgb, var(--club, var(--accent)) 70%, transparent);
}
.sd-fact__value{ font-family: var(--display); font-weight: 800; font-size: 1.22rem; line-height: 1.1; letter-spacing: -.02em; }
.sd-fact__label{ font-size: var(--step-label); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.sd-fact__hint{ font-size: .84rem; color: var(--ink-faint); }

.sd-stage{ display: grid; gap: 18px; align-items: start; }
@media (min-width: 940px){
  .sd-stage{ grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); }
}

/* ---------- the plan ---------- */

.sd-plan{ display: grid; gap: 8px; }
.sd-planbox{ position: relative; }
.sd-plan > .sd-art,
.sd-plan > .sd-pins{ grid-area: 1 / 1; }
.sd-plan{ grid-template-rows: auto auto; }

.sd-art{
  width: 100%; height: auto; display: block;
  aspect-ratio: 432 / 323;
  border-radius: var(--radius);
  background: linear-gradient(180deg, color-mix(in srgb, var(--club, var(--accent)) 20%, var(--surface-2)) 0%, var(--surface-2) 64%);
}
.sd-grass{ fill: color-mix(in srgb, var(--accent-3) 20%, var(--surface-3)); }
.sd-dirt{ fill: color-mix(in srgb, var(--accent-2) 26%, var(--surface-3)); }
.sd-diamond{ fill: color-mix(in srgb, var(--accent-3) 26%, var(--surface-3)); }
.sd-base{ fill: #f2f4f8; }
.sd-mound{ fill: color-mix(in srgb, var(--accent-2) 32%, var(--surface-3)); }
.sd-foul{ stroke: rgba(255,255,255,.55); stroke-width: 1.5; }
.sd-plate{ fill: #f2f4f8; }
.sd-wall{
  fill: none; stroke: var(--club, var(--accent));
  stroke-linecap: round;
  paint-order: stroke;
}

/* The pins sit in the same grid cell as the drawing, so they scale with it. */
.sd-pins{ position: relative; pointer-events: none; }
.sd-pin{
  position: absolute; transform: translate(-50%, -50%);
  pointer-events: auto; cursor: pointer;
  background: none; border: none; padding: 0; font: inherit;
}
.sd-pin__dot{
  display: grid; place-items: center;
  min-width: 30px; height: 22px; padding: 0 7px;
  border-radius: 999px;
  font-family: var(--mono); font-weight: 700; font-size: 0.82rem; line-height: 1;
  background: var(--surface); color: var(--ink);
  border: 1.5px solid color-mix(in srgb, var(--ink) 40%, transparent);
  box-shadow: 0 1px 4px rgba(0,0,0,.28);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
/* THE LANDMARK PIN IS A NUMBER, AND A NUMBER HAS TO BE READABLE. Half the
   league's secondary color is a very dark navy or black, so a pin filled with
   it and lettered dark is a blob. The fill is the page's own surface in every
   park and the club color is on the ring, which reads in all thirty. */
.sd-pin--mark .sd-pin__dot{
  min-width: 24px; width: 24px; padding: 0;
  background: var(--surface); color: var(--ink);
  border: 2px solid var(--club-2, var(--accent-2));
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ink) 26%, transparent), 0 1px 4px rgba(0,0,0,.3);
}
.sd-pin--mark.is-on .sd-pin__dot{
  background: var(--club, var(--accent)); color: #fff;
  border-color: #fff;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ink) 30%, transparent), 0 1px 5px rgba(0,0,0,.35);
}
.sd-pin:hover .sd-pin__dot{ transform: scale(1.12); border-color: var(--club, var(--accent)); }
.sd-pin:focus-visible{ outline: none; }
.sd-pin:focus-visible .sd-pin__dot{ outline: 2px solid var(--accent); outline-offset: 2px; }
.sd-pin.is-on .sd-pin__dot{
  background: var(--club, var(--accent)); color: #fff;
  border-color: #fff; transform: scale(1.14);
}

.sd-legend{ margin: 0; font-size: 0.82rem; line-height: 1.5; color: var(--ink-faint); }

/* ---------- the readout ---------- */

.sd-read{
  display: grid; gap: 10px; align-content: start;
  padding: 18px 20px 16px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
  border-top: 3px solid var(--club, var(--accent));
}
.sd-read__kind{
  font-size: var(--step-label); text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-faint); font-weight: 700;
}
.sd-read__title{
  margin: 0; font-family: var(--display); font-weight: 800;
  font-size: clamp(1.3rem, 2.4vw, 1.72rem); letter-spacing: -.03em; line-height: 1.1;
}
.sd-read__stats{ display: flex; gap: 18px; flex-wrap: wrap; }
.sd-stat{ display: grid; gap: 1px; }
/* THE FIGURES ARE INK, NOT CLUB COLOR. Half the league's secondary is a pale
   silver or a light blue, and a number in it on a light page is a number
   nobody can read. The club is carried by the rule above the panel and by the
   chips, both of which are decoration; the numbers are the content. */
.sd-stat__value{ font-family: var(--mono); font-weight: 800; font-size: 1.42rem; line-height: 1; color: var(--ink); }
.sd-stat__label{ font-size: var(--step-label); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.sd-read__body{ margin: 0; line-height: 1.62; max-width: 62ch; }
.sd-read__footer{
  margin: 0; padding-top: 10px; border-top: 1px solid var(--line-soft, var(--line));
  font-size: 0.9rem; line-height: 1.6; color: var(--ink-soft);
}

.sd-chips{ display: flex; gap: 6px; flex-wrap: wrap; padding-top: 4px; }
.sd-chip{
  font: inherit; font-size: 0.82rem; font-weight: 600;
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  background: var(--surface-2); color: var(--ink-soft);
  border: 1px solid var(--line);
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.sd-chip:hover{ border-color: var(--club, var(--accent)); color: var(--ink); }
.sd-chip.is-on{
  background: color-mix(in srgb, var(--club, var(--accent)) 24%, var(--surface));
  border-color: var(--club, var(--accent)); color: var(--ink);
}

@media (max-width: 620px){
  .sd-pin__dot{ min-width: 26px; height: 19px; font-size: .84rem; }
  .sd-pin--mark .sd-pin__dot{ width: 19px; min-width: 19px; }
  .sd-read{ padding: 15px 16px 14px; }
}


/* ===========================================================================
   THE BALLPARK LAYER                                              (Sept 9)
   ===========================================================================

   Everything above this line builds the pages. This builds the park they are
   played in, and it is deliberately the last thing in the file so that one
   block owns the whole look and a repaint never has to be chased through
   eleven thousand lines again.

   The rule it follows: every ornament here is a real part of a ballpark drawn
   at the right scale, not a sticker. Mow stripes in the outfield, clay at the
   top of a card the way dirt meets grass, chalk on a line that separates
   things, red stitching on the pieces that are the ball, bulbs on anything
   that behaves like a scoreboard, and slats on anything that behaves like a
   dugout. Nothing is an emoji and nothing is a photograph.

   The second rule: it never costs a reader anything. Texture drops to almost
   nothing behind dense figures, motion switches off for anyone who asks for
   that, and no ornament sits where a number has to be read fast.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1. THE FIELD UNDER EVERY PAGE

   A groundskeeper mows the outfield in stripes, and the stripes are not paint:
   they are the same grass bent two directions, so one catches the light and
   one does not. That is why it works here at three percent. It reads as a
   surface with a texture rather than as a pattern printed on a page, and at
   that strength it survives behind a stat table.

   The wash across the top is the bloom off the light banks, which is the thing
   that actually makes a night game look bright. It is warm, it is strongest at
   the top of the screen where the lights would be, and it is what stops the
   green from going flat.
   --------------------------------------------------------------------------- */

body{
  background-color: var(--bg);
  background-image:
    radial-gradient(150% 78% at 50% -12%, var(--lights), transparent 66%),
    repeating-linear-gradient(112deg,
      var(--mow) 0 72px,
      transparent 72px 144px);
  background-attachment: fixed, fixed;
  background-repeat: no-repeat, repeat;
}

/* Pages that are read fast rather than looked at get the stripes turned down
   until they are barely there. A live game moves; a bracket is a grid of
   figures; Read the Play is one big picture that supplies its own field. */
.body--scores,
.body--llws,
.body--defense{
  --mow: rgba(255,255,255,.014);
}


/* ---------------------------------------------------------------------------
   2. THE HEADER, AND THE FOUR-LEAGUE RAIL UNDER IT

   The strip along the bottom of the header is the site's own color key, in
   the order the tabs run: clay, gold, grass, sky. It costs three pixels and it
   is the one thing on every page that says these four sections belong to one
   place. It also gives the header a bottom edge that is not another gray line.
   --------------------------------------------------------------------------- */

.sitehead{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface) 78%, transparent),
      color-mix(in srgb, var(--bg) 88%, transparent));
  backdrop-filter: blur(16px) saturate(1.15);
  border-bottom-color: var(--line-soft);
}
.sitehead::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: linear-gradient(90deg,
    var(--accent)   0 25%,
    var(--accent-2) 25% 50%,
    var(--accent-3) 50% 75%,
    var(--college)  75% 100%);
  opacity: .9;
  pointer-events: none;
}

/* The tab you are on lights its own underline the way a bulb lights, rather
   than sitting there as a flat two-pixel bar. */
.tab.is-here .tab__link{
  border-bottom-width: 3px;
  box-shadow: 0 6px 18px -10px var(--accent);
}
.tab__link{ transition: color .14s ease, background .14s ease; border-radius: 8px 8px 0 0; }
.tab:hover .tab__link{ background: color-mix(in srgb, var(--surface-2) 70%, transparent); }

/* THE DROPDOWNS ARE A DUGOUT, AND A DUGOUT IS NOT SEE-THROUGH.
   Connor's note was that the menus blended with the page behind them. They are
   opaque now, on their own painted ground, with the slat lines of a dugout
   wall behind the entries and a real shadow underneath so the panel sits in
   front of the page instead of on it. */
.tab__menu{
  background-color: var(--surface) !important;
  background-image:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--dugout) 55%, transparent) 0 1px, transparent 1px 17px),
    linear-gradient(180deg, var(--surface-2), var(--surface) 42%) !important;
  border-color: var(--line);
  border-top: 3px solid var(--accent);
  box-shadow: 0 22px 52px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.04) inset;
}
@media (prefers-color-scheme: light){
  .tab__menu{ box-shadow: 0 22px 48px rgba(15,32,18,.18), 0 1px 0 #fff inset; }
}
.tab__item{ transition: background .12s ease, transform .12s ease; }
.tab__item:hover{ background: var(--accent-soft); transform: translateX(2px); }
.tab__item:hover .tab__itemName{ color: var(--accent-hot); }

/* Each tab's menu takes that tab's color along its top edge, so the panel
   tells you which section it belongs to before you read a word of it. */
.tab[data-section="littleleague"] .tab__menu,
.tab[data-league="littleleague"] .tab__menu{ border-top-color: var(--accent-2); }
.tab[data-section="travel"] .tab__menu,
.tab[data-league="travel"] .tab__menu{ border-top-color: var(--accent-3); }
.tab[data-section="college"] .tab__menu,
.tab[data-league="college"] .tab__menu{ border-top-color: var(--college); }
.tab[data-section="tools"] .tab__menu,
.tab[data-league="tools"] .tab__menu{ border-top-color: #a98cf7; }

/* The mark in the corner spins up on load like a ball leaving a hand, and
   keeps a warm halo so the wordmark has something to sit against. */
.ballmark{ filter: drop-shadow(0 3px 10px rgba(255,143,74,.35)); }
.sitehead__brand:hover .ballmark{ animation: parkBallRoll .8s cubic-bezier(.2,.8,.3,1); }
@keyframes parkBallRoll{ from{ transform: rotate(0); } to{ transform: rotate(360deg); } }

.sitehead__askInput{
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border-color: var(--line);
}
.sitehead__askInput:focus{ box-shadow: 0 0 0 4px var(--accent-soft); }


/* ---------------------------------------------------------------------------
   3. SEAMS

   The two rows of red stitching on a baseball are the most recognisable curve
   in the sport, and they are two arcs of a circle much larger than the thing
   you are looking at. That is exactly how they are drawn here: an enormous
   dashed circle parked mostly outside the card, so only the arc crosses the
   corner. Two of them, offset, gives the double row.

   It goes on the pieces that are the front of something. Never on a table.
   --------------------------------------------------------------------------- */

.parkseam{ position: relative; isolation: isolate; }
.parkseam::before,
.parkseam::after{
  content: "";
  position: absolute;
  z-index: 0;
  width: 108%; aspect-ratio: 1;
  right: -34%; top: -46%;
  border-radius: 50%;
  border: 2px dashed var(--seam-soft);
  pointer-events: none;
  opacity: .55;
}
.parkseam::after{
  width: 118%;
  right: -40%; top: -53%;
  opacity: .3;
}
.parkseam > *{ position: relative; z-index: 1; }

.fronthero,
.sechero{ position: relative; isolation: isolate; }
.fronthero::before,
.sechero::before{
  content: "";
  position: absolute; z-index: 0; pointer-events: none;
  width: 78%; aspect-ratio: 1;
  right: -30%; top: -44%;
  border-radius: 50%;
  border: 2px dashed var(--seam-soft);
  opacity: .5;
}
.fronthero::after,
.sechero::after{
  content: "";
  position: absolute; z-index: 0; pointer-events: none;
  width: 86%; aspect-ratio: 1;
  right: -35%; top: -51%;
  border-radius: 50%;
  border: 2px dashed var(--seam-soft);
  opacity: .26;
}
.fronthero__inner,
.sechero__inner,
.sechero > *{ position: relative; z-index: 1; }
@media (max-width: 720px){
  .fronthero::before, .fronthero::after,
  .sechero::before, .sechero::after{ display: none; }
}


/* ---------------------------------------------------------------------------
   4. THE FRONT DOOR

   The hero was already a drawn field. It is now a LIT one: the grass reads,
   the infield reads as clay rather than as a yellow smudge, the foul lines are
   chalk instead of gray, and a ball leaves the plate and carries out over the
   fence every eight seconds. The arc is the shape of a home run rather than a
   decoration that happens to move, which is the difference between this and a
   loading spinner.
   --------------------------------------------------------------------------- */

.fronthero{
  border-color: var(--line);
  background:
    radial-gradient(120% 90% at 50% -10%, var(--accent-soft), transparent 62%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  box-shadow: var(--shadow-warm);
}

.fronthero__art{
  background:
    /* the light banks, above and behind everything */
    radial-gradient(60% 40% at 18% -6%, var(--lights), transparent 70%),
    radial-gradient(60% 40% at 82% -6%, var(--lights), transparent 70%),
    /* the outfield, mown in from the warning track */
    repeating-linear-gradient(96deg,
      rgba(70,229,138,.055) 0 54px,
      rgba(70,229,138,.015) 54px 108px),
    /* the grass itself */
    radial-gradient(120% 78% at 50% 118%,
      rgba(70,229,138,.20) 0 42%,
      rgba(70,229,138,.09) 42% 63%,
      transparent 64%),
    /* the infield dirt */
    radial-gradient(38% 34% at 50% 122%,
      rgba(255,159,94,.30) 0 58%,
      transparent 60%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 46%, #000 100%);
}
/* the foul lines, in chalk */
.fronthero__art::before,
.fronthero__art::after{
  width: 3px;
  background: linear-gradient(0deg, var(--chalk-soft), transparent 76%);
}

/* the ball, and the arc it takes */
.fronthero__inner::before{
  content: "";
  position: absolute;
  left: 50%; bottom: -14px;
  width: 9px; height: 9px; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, #fff 0 46%, #dfe6dc 47% 100%);
  box-shadow: 0 0 12px 2px rgba(255,255,255,.5);
  opacity: 0;
  z-index: 0;
  animation: parkHomer 8s cubic-bezier(.28,.55,.42,1) 2.2s infinite;
  pointer-events: none;
}
@keyframes parkHomer{
  0%   { transform: translate(0,0) scale(.7); opacity: 0; }
  4%   { opacity: 1; }
  14%  { transform: translate(-90px,-130px) scale(1); }
  26%  { transform: translate(-210px,-186px) scale(.9); }
  38%  { transform: translate(-340px,-150px) scale(.7); opacity: .85; }
  48%  { transform: translate(-440px,-58px) scale(.55); opacity: 0; }
  100% { transform: translate(-440px,-58px) scale(.55); opacity: 0; }
}

.fronthero__eyebrow{
  color: var(--accent-hot);
  text-shadow: 0 0 22px rgba(255,143,74,.35);
}
.fronthero__headline{
  text-shadow: 0 2px 30px rgba(0,0,0,.35);
}

/* The search box is the one control the whole front page is about, so it is
   lit rather than outlined. */
.ask__field{ transition: box-shadow .18s ease, border-color .18s ease; }
.ask__field:focus-within{
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft), 0 18px 40px -22px var(--accent);
}
.ask__go{
  background: linear-gradient(180deg, var(--accent-hot), var(--accent));
  color: var(--accent-ink);
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: 0 6px 18px -8px var(--accent), 0 1px 0 rgba(255,255,255,.28) inset;
}
.ask__go:hover{ filter: brightness(1.07); }
.ask__go:active{ transform: translateY(1px); }

/* The league chips are the four colors again, so picking one is picking a
   part of the park rather than toggling a filter. */
.filter__chip{ transition: background .14s ease, color .14s ease, border-color .14s ease, transform .12s ease; }
.filter__chip:hover{ transform: translateY(-1px); }
.filter__chip.is-on{
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  box-shadow: 0 8px 22px -12px var(--accent);
}
.filter__chip[data-league="littleleague"].is-on{
  background: var(--accent-2); border-color: var(--accent-2); color: #1b1503;
  box-shadow: 0 8px 22px -12px var(--accent-2);
}
.filter__chip[data-league="travel"].is-on{
  background: var(--accent-3); border-color: var(--accent-3); color: #04180d;
  box-shadow: 0 8px 22px -12px var(--accent-3);
}

/* The examples read as ticket stubs: a torn left edge and a perforation. */
.example{
  position: relative;
  border-left: 3px dotted var(--accent-line);
  transition: background .14s ease, transform .12s ease, border-color .14s ease;
}
.example:hover{
  background: var(--accent-soft);
  border-left-color: var(--accent);
  transform: translateY(-1px);
}


/* ---------------------------------------------------------------------------
   5. WHERE THE DIRT MEETS THE GRASS

   Every card on this site is a rectangle on a green ground, and the one edge
   in a ballpark that looks exactly like that is the arc where the infield dirt
   meets the outfield grass. So a card gets clay along its top edge, fading
   down into the surface. It is four pixels of warm color and it is what makes
   a wall of cards read as a field rather than as a spreadsheet.

   Hovering scuffs it: the clay brightens, the card lifts, and the shadow warms
   the way dirt does when it is turned over.
   --------------------------------------------------------------------------- */

.door,
.areacard,
.walltile,
.pcard,
.clubcard,
.toolcard,
.stat-card,
.card-team-profile,
.card-scoreboard,
.card-query{
  position: relative;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, transparent 1px),
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 7%, transparent) 0,
      transparent 54px);
  transition:
    transform .16s cubic-bezier(.2,.8,.3,1),
    box-shadow .16s ease,
    border-color .16s ease,
    background-color .16s ease;
}
.door:hover,
.areacard:hover,
.walltile:hover,
.pcard:hover,
.clubcard:hover,
.toolcard:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-warm);
  border-color: var(--accent-line);
}

/* The six areas of the game each keep their own color, so the clay wash
   follows the card rather than painting all six orange. */
.areacard--pitching{ background-image: linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, transparent 1px), linear-gradient(180deg, var(--accent-2-soft) 0, transparent 54px); }
.areacard--defense{ background-image: linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, transparent 1px), linear-gradient(180deg, var(--accent-3-soft) 0, transparent 54px); }
.areacard--baserunning{ background-image: linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, transparent 1px), linear-gradient(180deg, rgba(255,179,117,.14) 0, transparent 54px); }
.areacard--strategy{ background-image: linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, transparent 1px), linear-gradient(180deg, var(--college-soft) 0, transparent 54px); }
.areacard--rules{ background-image: linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, transparent 1px), linear-gradient(180deg, rgba(255,111,95,.13) 0, transparent 54px); }

/* The wall is a rack of tickets. A perforation down the left edge and a
   notch at each end of it, which is the shape everyone recognizes without
   being told what it is. */
.walltile{ padding-left: 1.35rem; }
.walltile::before{
  content: "";
  position: absolute; left: .72rem; top: .8rem; bottom: .8rem;
  width: 0;
  border-left: 2px dotted color-mix(in srgb, var(--ink-faint) 55%, transparent);
  pointer-events: none;
}
.walltile:hover::before{ border-left-color: var(--accent); }
.walltile__badge{
  white-space: nowrap;
  background: var(--accent-soft);
  color: var(--accent-hot);
  border: 1px solid var(--accent-line);
}

/* A club card wears its club color as a cap brim rather than a hairline. */
.clubcard{ border-top-width: 4px; }
.clubcard:hover{ background: var(--surface-2); }


/* ---------------------------------------------------------------------------
   6. SCOREBOARDS

   Anything that announces a section behaves like the board in center field: a
   lit bulb, then condensed uppercase lettering, then the thing itself. The
   bulb is the tell. One small circle with a glow is enough to make a heading
   read as posted rather than typed, and it costs nothing.
   --------------------------------------------------------------------------- */

.panel-block__title,
.areas__title,
.wall__title{
  display: flex;
  align-items: center;
  gap: .6rem;
}
.panel-block__title::before,
.areas__title::before,
.wall__title::before{
  content: "";
  flex: none;
  width: 9px; height: 9px;
  border-radius: 50%;
  /* The bulb is lit in whichever room it is standing in. It was a fixed
     scoreboard gold, which on the college pages was the only warm thing on a
     cold blue screen and read as a leftover. */
  background: var(--accent);
  box-shadow: 0 0 10px 1px var(--accent-line), 0 0 0 3px var(--accent-soft);
}

/* The eyebrow over a section hero is the row of bulbs above the board. */
.sechero__eyebrow,
.fronthero__eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.sechero__eyebrow::before{
  content: "";
  width: 24px; height: 6px;
  border-radius: 3px;
  background: repeating-linear-gradient(90deg,
    var(--tone, var(--accent)) 0 6px, transparent 6px 9px);
  box-shadow: 0 0 12px -1px var(--tone, var(--accent));
}

/* The section hero itself takes a real wash of its own league color, a lit
   edge along the top, and the mow stripes carried through so the four fronts
   look like four parts of one park. */
.sechero{
  background:
    linear-gradient(150deg, var(--tone-soft), transparent 58%),
    repeating-linear-gradient(112deg, var(--mow) 0 44px, transparent 44px 88px),
    linear-gradient(180deg, var(--surface), var(--bg-2));
  border-top: 3px solid var(--tone, var(--accent));
  box-shadow: var(--shadow-lift);
}
.sechero__title{
  text-shadow: 0 2px 26px rgba(0,0,0,.32);
}
.sechero--tools{ --tone: #a98cf7; --tone-soft: rgba(169,140,247,.18); }
.sechero--iq{ --tone: #a98cf7; --tone-soft: rgba(169,140,247,.18); }


/* ---------------------------------------------------------------------------
   7. CHALK

   Chalk is what a ballpark uses to say "this side, not that side", so it is
   what this site uses to separate things. A rule between blocks is a foul
   line: bright, slightly irregular, and drawn rather than printed.
   --------------------------------------------------------------------------- */

hr{
  border: 0;
  height: 2px;
  margin: 26px 0;
  background: repeating-linear-gradient(90deg,
    var(--chalk-soft) 0 26px,
    transparent 26px 34px);
}

.panel-block{ position: relative; }
.panel-block__head{
  border-bottom: 2px dashed var(--line);
  padding-bottom: .55rem;
}

/* Prose bullets are bases. A small rotated square is a base seen from above,
   which is a nicer mark than a dot and is instantly baseball without a word
   of explanation. */
.body--prose li::marker,
.topic__body li::marker,
.answer__body li::marker{ content: ""; }
.body--prose ul li,
.topic__body ul li,
.answer__body ul li{
  list-style: none;
  position: relative;
  padding-left: 1.4rem;
}
.body--prose ul li::before,
.topic__body ul li::before,
.answer__body ul li::before{
  content: "";
  position: absolute;
  left: .28rem; top: .62em;
  width: 7px; height: 7px;
  background: var(--accent);
  transform: rotate(45deg);
  border-radius: 1px;
}


/* ---------------------------------------------------------------------------
   8. FIGURES

   A stat column is the one place on this site that has to be read and not
   looked at, so it gets no ornament at all. What it gets instead is what a
   scoreboard gives a number: more contrast, a warmer ground under the row
   your cursor is on, and a header that reads as a header.
   --------------------------------------------------------------------------- */

table{ border-color: var(--line-soft); }
thead th{
  font-family: var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--line);
}
tbody tr{ transition: background .1s ease; }
tbody tr:hover{ background: var(--accent-soft); }

/* Anything set in the condensed face is a figure, and figures sit at full
   ink rather than at the soft gray the rest of the body copy uses. */
.stat__value,
.tile__value,
.tstrip__value{ color: var(--ink); }


/* ---------------------------------------------------------------------------
   9. THE BALL, WHEREVER IT SPINS

   The loading mark was a glyph. It is still a glyph, because the markup that
   emits it lives in a dozen files, but it now spins inside a lit halo so a
   wait looks like a pitch on the way rather than a page that has stopped.
   --------------------------------------------------------------------------- */

.loading-ball{
  filter: drop-shadow(0 0 8px rgba(255,255,255,.45));
  animation: ballSpin 900ms linear infinite, parkBallBob 1.8s ease-in-out infinite;
}
@keyframes parkBallBob{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-3px); }
}
.loading-text{ color: var(--ink-soft); letter-spacing: .06em; text-transform: uppercase; }


/* ---------------------------------------------------------------------------
   10. LIGHT, WHEREVER SOMETHING IS FOCUSED OR LIVE

   A focus ring on a sports site should look like a light coming on. Same for
   anything the site is calling live: it pulses the way a red dot on a
   broadcast does, slowly, once every couple of seconds.
   --------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
  box-shadow: 0 0 0 6px var(--accent-soft);
}

.is-live,
.live-dot,
.score__live{
  animation: parkLive 2.4s ease-in-out infinite;
}
@keyframes parkLive{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(255,111,95,.42); }
  50%{ box-shadow: 0 0 0 7px rgba(255,111,95,0); }
}


/* ---------------------------------------------------------------------------
   11. LINKS, STILL NOT BLUE

   Standing rule on this site: no browser-blue link text anywhere. A link is
   marked by an underline in clay that draws itself under the cursor, which is
   a stronger signal than color and does not turn a page of links into a page
   of blue.
   --------------------------------------------------------------------------- */

a{ color: inherit; }
:where(.topic__body, .answer__body, .body--prose) a{
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .2s ease, color .2s ease;
  padding-bottom: 1px;
}
:where(.topic__body, .answer__body, .body--prose) a:hover{
  background-size: 100% 2px;
  color: var(--accent-hot);
}


/* ---------------------------------------------------------------------------
   12. MOTION, FOR ANYONE WHO WANTS NONE OF IT

   Everything above that moves is decoration. If the machine says the reader
   does not want motion, all of it stops and none of the information goes with
   it, which is the test.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .fronthero__inner::before{ display: none; }
}

@media (max-width: 720px){
  .fronthero__inner::before{ display: none; }
}


/* ---------------------------------------------------------------------------
   13. WILLIAMSPORT, WITH THE LIGHTS ON

   Little League keeps its own colors, because navy and keystone red are what
   those clubs actually wear and that is information, not decoration. What it
   does not keep is a ground so dark the pages read as a different site. The
   navy is lifted the same way the green was: every surface is a step you can
   see, and Lamade Stadium at night is a bright blue place, not a black one.
   --------------------------------------------------------------------------- */

.body--ll{
  --accent: #5b93f5;
  --accent-hot: #86b2ff;
  --accent-ink: #ffffff;
  --accent-soft: rgba(91,147,245,.20);
  --accent-line: rgba(91,147,245,.46);
  --accent-2: #ff5f66;
  --accent-2-soft: rgba(255,95,102,.18);
  --ll-navy: #1e3288;
  --ll-red: #ff3b43;
  --bg: #0c142e;
  --bg-2: #101a3c;
  --surface: #16224b;
  --surface-2: #1d2c5d;
  --surface-3: #263874;
  --line: #35498c;
  --line-soft: #243468;
  --ink: #f2f5ff;
  --ink-soft: #c6d2f2;
  --ink-faint: #9aa9d4;
  --mow: rgba(255,255,255,.026);
  --lights: rgba(190,215,255,.11);
  --chalk-soft: rgba(240,246,255,.22);
  --bulb: #ffd7a0;
  --bulb-off: rgba(255,215,160,.16);
}
@media (prefers-color-scheme: light){
  .body--ll{
    --accent: #1b3a8f;
    --accent-hot: #14295f;
    --accent-ink: #ffffff;
    --accent-soft: rgba(27,58,143,.11);
    --accent-line: rgba(27,58,143,.32);
    --accent-2: #c8102e;
    --accent-2-soft: rgba(200,16,46,.11);
    --ll-navy: #14225c;
    --ll-red: #c8102e;
    --bg: #f2f5fd;
    --bg-2: #e7edfa;
    --surface: #ffffff;
    --surface-2: #eff3fc;
    --surface-3: #e0e8f8;
    --line: #cfdcf2;
    --line-soft: #e3eaf8;
    --ink: #0d1430;
    --ink-soft: #3d4a72;
    --ink-faint: #5d6b96;
    --mow: rgba(27,58,143,.04);
  }
}
/* The keystone gets a red glow under it so the badge on the section header
   reads as a patch on a sleeve rather than as a shape cut out of the page. */
.body--ll .sechero::before{
  box-shadow: 0 8px 22px -10px var(--ll-red);
}


/* ---------------------------------------------------------------------------
   14. EACH LEAGUE'S PAGES STAND ON THEIR OWN GROUND

   MLB, travel ball and college have no body class of their own, so the tint
   is taken from the hero the page is already drawing: :has() looks at which
   section header is on the page and warms the ground behind it to match. One
   soft wash, nothing else, so a page still belongs to the site while telling
   you at a glance which part of it you are standing in.
   --------------------------------------------------------------------------- */

body:has(.sechero--mlb){
  background-image:
    radial-gradient(150% 78% at 50% -12%, rgba(255,143,74,.10), transparent 62%),
    repeating-linear-gradient(112deg, var(--mow) 0 72px, transparent 72px 144px);
}
body:has(.sechero--travel){
  background-image:
    radial-gradient(150% 78% at 50% -12%, rgba(70,229,138,.13), transparent 62%),
    repeating-linear-gradient(112deg, var(--mow) 0 72px, transparent 72px 144px);
}
body:has(.sechero--college){
  background-image:
    radial-gradient(150% 78% at 50% -12%, rgba(90,216,242,.14), transparent 62%),
    repeating-linear-gradient(112deg, var(--mow) 0 72px, transparent 72px 144px);
}
body:has(.sechero--tools),
body:has(.sechero--iq){
  background-image:
    radial-gradient(150% 78% at 50% -12%, rgba(169,140,247,.15), transparent 62%),
    repeating-linear-gradient(112deg, var(--mow) 0 72px, transparent 72px 144px);
}


/* ---------------------------------------------------------------------------
   15. THE TARP

   A feature with no data yet is a field with the tarp on, and that is a
   friendlier thing to look at than an empty page. The card that says a season
   starts in February gets the diagonal weave of a rolled tarp behind it and a
   lit edge, so it reads as deliberate rather than as something that failed to
   load, which is the whole point of putting it there.
   --------------------------------------------------------------------------- */

.cb-offseason,
.cb-waiting{
  position: relative;
  overflow: hidden;
  background-image:
    repeating-linear-gradient(45deg,
      color-mix(in srgb, var(--college) 7%, transparent) 0 9px,
      transparent 9px 18px),
    linear-gradient(100deg, var(--college-soft), transparent 62%);
  box-shadow: var(--shadow-lift);
}
.cb-offseason__mark svg{ filter: drop-shadow(0 0 10px color-mix(in srgb, var(--college) 45%, transparent)); }
.cb-offseason__whenDate{ text-shadow: 0 0 22px color-mix(in srgb, var(--college) 40%, transparent); }

.tab__soon{
  color: var(--ink-soft);
  border-top: 1px dashed var(--line);
  padding-top: 6px;
}


/* ---------------------------------------------------------------------------
   16. THE DEFINITION CARD, WRITTEN ON THE LINEUP CARD

   A stat abbreviation is a term a manager would have written on a card in the
   dugout, so the panel that explains one looks like that card: warm paper
   ground, a clay rule down the left, and a shadow deep enough that it is
   clearly sitting in front of the page. It is also the fix for the thing that
   made these hard to read, which was a panel the same color as the page.
   --------------------------------------------------------------------------- */

.term-tip{
  background:
    repeating-linear-gradient(0deg,
      color-mix(in srgb, var(--ink) 3%, transparent) 0 1px,
      transparent 1px 22px),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  border-color: var(--line);
  border-left: 3px solid var(--accent);
  box-shadow: 0 20px 44px rgba(0,0,0,.5);
}
@media (prefers-color-scheme: light){
  .term-tip{ box-shadow: 0 18px 40px rgba(15,32,18,.16); }
}
.term{
  border-bottom-style: dashed;
  border-bottom-color: var(--accent-line);
}
.term:hover,
.term:focus-visible{ border-radius: 3px; }


/* ---------------------------------------------------------------------------
   17. CONTROLS

   Every button, chip and pill on the site is one family now: a warm gradient
   with a hairline of light along the top edge, which is how a lit surface
   looks and is the reason a flat fill reads as a wireframe. Pressed states
   move a pixel, because a control that does not move does not feel pressed.
   --------------------------------------------------------------------------- */

.finder__go,
.btn,
.button,
.pill--go{
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  box-shadow: 0 1px 0 rgba(255,255,255,.07) inset;
  transition: filter .14s ease, transform .1s ease, background .14s ease, color .14s ease;
}
.finder__go:hover,
.btn:hover,
.button:hover{
  background: linear-gradient(180deg, var(--accent-hot), var(--accent));
  color: var(--accent-ink);
}
.finder__go:active,
.btn:active,
.button:active{ transform: translateY(1px); }

.finder__field:focus-within{
  box-shadow: 0 0 0 4px var(--accent-soft), 0 16px 36px -22px var(--accent);
}

/* The door tag in the corner of a section card is a placard bolted to a wall
   rather than three floating words. */
.door__tag{
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}
.door::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  border-radius: 0 0 var(--radius) var(--radius);
  background: linear-gradient(90deg, var(--accent), transparent 70%);
  opacity: 0;
  transition: opacity .16s ease;
}
.door:hover::after{ opacity: .9; }


/* ---------------------------------------------------------------------------
   18. THE PARK'S OWN FURNITURE

   The last few things a browser draws for itself, drawn in the site's colors
   instead: the scrollbar is a warning track, a selection is chalk dust, and a
   page ends on dirt rather than on nothing.
   --------------------------------------------------------------------------- */

::selection{ background: var(--accent-soft); color: var(--ink); }

*{ scrollbar-color: var(--surface-3) transparent; scrollbar-width: thin; }
::-webkit-scrollbar{ width: 11px; height: 11px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, var(--accent), var(--clay-deep));
  background-clip: padding-box;
}

/* The warning track: a strip of clay across the very bottom of every page, so
   the page has a bottom edge that belongs to a ballpark. */
.section-page::after,
.home::after{
  content: "";
  display: block;
  /* Bled to the edges of the page column rather than to 100vw, because 100vw
     counts the scrollbar and buys a horizontal scroll on every page that has
     one. The column is wide enough for the band to read as a track. */
  margin: 58px calc(-1 * clamp(14px, 3vw, 30px)) -64px;
  height: 40px;
  background:
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 9%, transparent)),
    repeating-linear-gradient(96deg,
      rgba(0,0,0,.035) 0 9px, transparent 9px 18px);
  border-top: 1px dashed color-mix(in srgb, var(--chalk-soft) 70%, transparent);
  pointer-events: none;
}

/* ---------- Hot Seat, the season version ----------
   Rebuilt Sept 9: the feature stopped being twenty-six nights out of this
   season and became any club from any year since 1901, managed across twenty
   decisions. The page has four states and they are four different shapes, so
   they get four blocks here rather than one set of rules bent to cover them:
   picking a club out of three thousand, reading the club you picked, the
   season itself, and the reckoning at the end.

   THE CLUB'S OWN COLOURS RUN THROUGH ALL FOUR. --club and --club2 are set on
   the wrapper in JavaScript from the franchise code, so the 1927 Yankees are
   navy wherever they appear and a defunct club still gets a colour of its own
   rather than the same grey as every other defunct club. Everything below
   reads those two variables and nothing below knows which team it is. */

.hshero{
  margin: 6px 0 20px; padding: 26px 24px;
  background:
    radial-gradient(120% 140% at 12% 0%, var(--lights), transparent 60%),
    linear-gradient(160deg, var(--surface-2), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.hshero__inner{ display: grid; gap: 8px; max-width: 74ch; }
.hshero__eyebrow{
  margin: 0; font: 600 11.5px/1 var(--display);
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}
.hshero__title{ margin: 0; font: 800 clamp(30px, 5vw, 48px)/1 var(--display); letter-spacing: -.015em; }
.hshero__blurb{ margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }

/* ---------- picking a club ---------- */

.hspick{ display: grid; gap: 14px; }
.hspick__search{ display: flex; }
.hspick__input{
  width: 100%; padding: 14px 18px;
  font: 500 16px/1.2 var(--body, inherit);
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px;
}
.hspick__input:focus{ outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

/* The year rail. A hundred and twenty-five seasons is too many for a dropdown
   and exactly right for something you can push sideways, with the decades
   marked so it can be aimed at rather than scrolled through. */
.hspick__rail{
  display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 10px;
  scrollbar-width: thin;
}
.hspick__year{
  flex: 0 0 auto; padding: 7px 11px;
  font: 600 13px/1 var(--mono); color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 999px;
  cursor: pointer; transition: border-color .12s ease, color .12s ease;
}
.hspick__year:hover{ border-color: var(--accent-line); color: var(--ink); }
.hspick__year.is-decade{ color: var(--ink); border-color: var(--line); }
.hspick__year.is-on{ background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.hspick__status{ margin: 0; font-size: 13px; color: var(--ink-faint); }
.hspick__none{ margin: 0; color: var(--ink-soft); }
.hspick__foot{ margin: 6px 0 0; font-size: 13px; color: var(--ink-faint); max-width: 70ch; }

.hspick__grid{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px;
}
.hsclub{
  display: grid; gap: 4px; text-align: left; padding: 14px 15px;
  color: inherit; cursor: pointer;
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--club) 42%, var(--surface)), var(--surface) 72%);
  border: 1px solid var(--line); border-left: 4px solid var(--club2);
  border-radius: var(--radius);
  transition: transform .14s ease, border-color .14s ease;
}
.hsclub:hover{ transform: translateY(-2px); border-color: var(--accent-line); border-left-color: var(--club2); }
.hsclub__top{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hsclub__year{ font: 700 13px/1 var(--mono); color: var(--ink-faint); letter-spacing: .04em; }
.hsclub__title{
  font: 700 10px/1 var(--display); letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent-2);
  padding: 4px 7px; border-radius: 999px;
}
.hsclub__name{ margin: 0; font: 700 16.5px/1.2 var(--display); }
.hsclub__line{ display: flex; align-items: baseline; gap: 8px; }
.hsclub__record{ font: 800 21px/1 var(--mono); }
.hsclub__pct{ font: 600 13px/1 var(--mono); color: var(--ink-faint); }
.hsclub__runs{ margin: 2px 0 0; font-size: 13px; color: var(--ink-faint); }

/* ---------- the clubhouse ---------- */

.hsclubhouse{ display: grid; gap: 18px; }
.hsclubhouse__head{
  padding: 24px; border-radius: var(--radius-lg);
  background:
    radial-gradient(110% 150% at 0% 0%, color-mix(in srgb, var(--club2) 26%, transparent), transparent 62%),
    linear-gradient(155deg, color-mix(in srgb, var(--club) 68%, var(--surface)), var(--surface-2));
  border: 1px solid var(--line);
}
.hsclubhouse__eyebrow{
  margin: 0 0 4px; font: 600 11.5px/1 var(--display);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
}
.hsclubhouse__name{ margin: 0; font: 800 clamp(26px, 4.4vw, 42px)/1.05 var(--display); letter-spacing: -.015em; }
.hsclubhouse__manager{ margin: 8px 0 0; font-size: 14.5px; color: var(--ink-soft); }
.hsclubhouse__stats{ display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.hsstat{
  display: grid; gap: 3px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.hsstat__label{ font: 600 10.5px/1 var(--display); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); }
.hsstat__value{ font: 800 25px/1 var(--mono); }
.hsstat__note{ font-size: 13px; color: var(--ink-soft); }
.hsclubhouse__read{
  margin: 0; padding: 13px 16px; max-width: 78ch;
  font-size: 13.5px; line-height: 1.55; color: var(--ink-soft);
  background: var(--accent-2-soft); border-left: 3px solid var(--accent-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.hsclubhouse__go{ display: flex; flex-wrap: wrap; gap: 10px; }
.hsclubhouse__foot{ margin: 0; font-size: 13px; color: var(--ink-faint); max-width: 78ch; }

.hsroster{ display: grid; gap: 10px; }
.hsroster__title{ margin: 0; font: 700 13px/1 var(--display); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); }
.hsroster__list{ display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 8px; }
.hspc{
  display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
}
.hspc__face{
  width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  background: var(--surface-3); border: 1px solid var(--line);
}
.hspc__body{ display: grid; gap: 1px; min-width: 0; }
.hspc__top{ display: flex; align-items: baseline; gap: 7px; }
.hspc__name{ font: 700 14px/1.2 var(--display); }
.hspc__pos{
  font: 700 10px/1 var(--mono); letter-spacing: .05em;
  color: var(--club2); background: color-mix(in srgb, var(--club2) 18%, transparent);
  padding: 3px 6px; border-radius: 999px;
}
.hspc__line{ margin: 0; font-size: 13px; color: var(--ink-faint); }

/* ---------- the season ---------- */

.hsseason{ display: grid; gap: 0; }
.hsround{
  margin: 16px 0 24px; padding: 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  border-top: 3px solid var(--club2);
}
.hsround__top{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.hsround__n{ font: 700 11px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.hsround__part{
  font: 600 11px/1 var(--display); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); padding: 5px 9px;
  background: var(--surface-2); border-radius: 999px;
}
.hsround__flag{
  font: 700 11px/1 var(--display); letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent-2); padding: 5px 9px; border-radius: 999px;
}
.hsround__title{ margin: 0 0 8px; font: 800 clamp(21px, 3vw, 30px)/1.15 var(--display); letter-spacing: -.01em; }
.hsround__prompt{ margin: 0 0 12px; font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); max-width: 74ch; }
.hsround__why{ margin: 0 0 16px; max-width: 74ch; }
.hsround__why summary{
  cursor: pointer; font: 600 12.5px/1 var(--display);
  letter-spacing: .04em; color: var(--accent); padding: 6px 0;
}
.hsround__why p{ margin: 6px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }

.hsopt__cast{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.hscast{
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 3px;
  background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 999px;
}
.hscast__face{ width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: var(--surface-3); }
.hscast__name{ font: 600 11.5px/1 var(--display); color: var(--ink-soft); }

/* ---------- what the call did ---------- */

.hsreveal__title{ margin: 4px 0 0; font: 800 clamp(19px, 2.6vw, 27px)/1.15 var(--display); }
.hsreveal__said{ margin: 10px 0 16px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); max-width: 74ch; }
.hsreveal__go{ margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }

.hsgame{
  display: grid; gap: 3px; padding: 13px 16px; margin: 0 0 14px;
  border-radius: var(--radius); border-left: 4px solid var(--line);
  background: var(--surface-2);
}
.hsgame.is-w{ border-left-color: var(--pos); }
.hsgame.is-l{ border-left-color: var(--neg); }
.hsgame__label{ font: 600 10.5px/1 var(--display); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); }
.hsgame__result{ font: 800 22px/1 var(--display); }
.hsgame.is-w .hsgame__result{ color: var(--pos); }
.hsgame.is-l .hsgame__result{ color: var(--neg); }
.hsgame__note{ font-size: 13px; color: var(--ink-soft); }

/* The stretch of games the call ran through, one square each. This is the bit
   people watch rather than read, so it is squares rather than a sentence. */
.hsstretch{
  display: grid; gap: 7px; padding: 15px 16px;
  background: var(--surface-2); border-radius: var(--radius);
}
.hsstretch__label{ font: 600 10.5px/1 var(--display); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); }
.hsstretch__line{ display: flex; flex-wrap: wrap; gap: 4px; }
.hsstretch__g{
  width: 20px; height: 20px; border-radius: 4px;
  display: grid; place-items: center;
  font: 700 10px/1 var(--mono); color: var(--accent-ink);
}
.hsstretch__g.is-w{ background: var(--pos); }
.hsstretch__g.is-l{ background: var(--neg); }
.hsstretch__score{ font: 800 26px/1 var(--mono); }
.hsstretch__now{ font-size: 13px; color: var(--ink-soft); }

.hsbook__row.is-right .hsbook__tag{ color: var(--pos); }

/* ---------- the reckoning ---------- */

.hsend__verdict{ display: grid; gap: 10px; margin: 18px 0; max-width: 76ch; }
.hsend__verdict p{ margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.hsend__verdict p:first-child{ font-size: 17px; color: var(--ink); }

.hstable{ margin: 18px 0; display: grid; gap: 8px; }
.hstable__title{ margin: 0; font: 700 13px/1 var(--display); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); }
.hstable__note{ margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-faint); max-width: 76ch; }
.hstable__rows{ display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; }
.hstable__row{
  display: grid; grid-template-columns: minmax(0, 1fr) 72px 62px; gap: 10px;
  align-items: center; padding: 9px 14px; background: var(--surface);
}
.hstable__row.is-you{ background: color-mix(in srgb, var(--club) 40%, var(--surface)); }
.hstable__name{ font: 600 14px/1.2 var(--display); min-width: 0; }
.hstable__rec, .hstable__pct{ font: 600 13.5px/1 var(--mono); text-align: right; }
.hstable__pct{ color: var(--ink-faint); }

.hsoct{ margin: 18px 0; display: grid; gap: 8px; }
.hsoct__rounds{ display: grid; gap: 6px; }
.hsoct__row{
  display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr) 56px; gap: 12px;
  align-items: center; padding: 11px 14px;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-left: 4px solid var(--line); border-radius: var(--radius-sm);
}
.hsoct__row.is-w{ border-left-color: var(--pos); }
.hsoct__row.is-l{ border-left-color: var(--neg); }
.hsoct__stage{ font: 700 12.5px/1.2 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }
.hsoct__vs{ font-size: 14px; }
.hsoct__score{ font: 700 14px/1 var(--mono); text-align: right; }
.hsoct__miss{ margin: 0; font-size: 14px; color: var(--ink-soft); }
.hsoct__title{
  margin: 4px 0 0; padding: 14px 18px;
  font: 800 clamp(22px, 3.4vw, 34px)/1 var(--display); letter-spacing: -.01em;
  color: var(--accent-ink); background: var(--accent-2); border-radius: var(--radius);
}

@media (max-width: 640px){
  .hspick__grid{ grid-template-columns: 1fr 1fr; }
  .hsclub__name{ font-size: 15px; }
  .hstable__row{ grid-template-columns: minmax(0, 1fr) 62px 52px; }
  .hsoct__row{ grid-template-columns: 1fr; gap: 4px; }
  .hsoct__score{ text-align: left; }
  .hsroster__list{ grid-template-columns: 1fr; }
}

/* ---------- Hot Seat, second pass (Sept 9) ----------
   Four things the first browser run showed up, in the order they mattered.

   THE CLUB HEADER WAS GREY. Mixing the club colour into the surface reads as
   navy in a dark theme and as a wash of nothing in a light one, and the header
   is the one place on the page that has to say WHICH TEAM THIS IS before you
   have read a word. So it is the club's own colour at full strength with the
   ink forced light over it, which works for every club because every primary
   in the league and every generated one for a defunct club is dark.

   THE REVEAL HEADING SAT ON THE RIGHT, because it shared a rule with a layout
   that puts two things at opposite ends of a bar. It is a heading and it goes
   where headings go.

   A BLOCK THAT PLAYED NO GAMES IS NOT A WIN, and spring training plays none.

   AND THE TWENTY needed real columns rather than three things bumping into
   each other. */

.hsclubhouse__head{
  color: #fff;
  background:
    radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--club2) 34%, transparent), transparent 58%),
    linear-gradient(150deg, var(--club), color-mix(in srgb, var(--club) 58%, #060d09));
  border-color: color-mix(in srgb, var(--club) 60%, var(--line));
}
.hsclubhouse__name{ color: #fff; }
.hsclubhouse__eyebrow{ color: color-mix(in srgb, var(--club2) 70%, #ffffff); }
.hsclubhouse__manager{ color: rgba(255, 255, 255, .84); }

.hsreveal__head--stack{ display: grid; gap: 6px; justify-items: start; }

.hsledger__dot.is-done{ background: var(--surface-3); border-color: var(--line); opacity: .55; }

.hstable__row.is-you{
  background: color-mix(in srgb, var(--club) 55%, var(--surface));
  box-shadow: inset 3px 0 0 var(--club2);
}

/* The twenty, at the end. Name, what the stretch produced, what the book made
   of it: three columns that stay three columns. */
.hsbook .hsbook__row{
  display: grid; grid-template-columns: minmax(0, 1fr) 62px 104px;
  gap: 12px; align-items: baseline;
  padding: 9px 4px; border-bottom: 1px solid var(--line-soft);
}
.hsbook .hsbook__row:last-child{ border-bottom: 0; }
.hsbook .hsbook__name{ font-size: 14px; min-width: 0; }
.hsbook .hsbook__we{ font: 700 13.5px/1 var(--mono); text-align: right; }
.hsbook .hsbook__verdict{ font-size: 13px; color: var(--ink-faint); text-align: right; }
.hsbook .hsbook__row.is-right .hsbook__verdict{ color: var(--pos); }

/* And the reveal's own book line, which is one row rather than a list. */
.hsreveal .hsbook__row{
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px;
  align-items: baseline; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.hsreveal .hsbook__tag{
  font: 700 10.5px/1 var(--display); letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-faint);
}
.hsreveal .hsbook__verdict{ font-size: 13.5px; color: var(--ink-soft); }


/* ===========================================================================
   SEPT 10. FOUR FIXES, IN ONE PLACE.

   1. The box inside the search box.
   2. Every tab looking like every other tab.
   3. Rulebooks set too small to read and laid out like a spec sheet.
   4. The last of the sub-13px type.

   This sits at the foot of the file on purpose. Everything above it is the
   site as built; this is what changed after Connor read it back.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1. THE BOX INSIDE THE BOX

   Click the search bar and a second, squarer, smaller outline appeared inside
   the round one. It was the global focus ring: the pill is a WRAPPER with the
   border on it, the <input> inside is bare, and the site-wide
   :focus-visible rule was drawing a 6px-radius rectangle around that bare
   input in the middle of a 999px pill.

   The wrapper already lights up on :focus-within, which is the correct signal
   and the one that follows the shape of the control. So the input inside a
   composed field draws nothing of its own. Bare inputs everywhere else keep
   the ring; they need it.
   --------------------------------------------------------------------------- */

.ask__field :where(input, .ask__input):focus,
.ask__field :where(input, .ask__input):focus-visible,
.finder__field :where(input, .finder__input):focus,
.finder__field :where(input, .finder__input):focus-visible,
.search__field :where(input):focus,
.search__field :where(input):focus-visible,
.mini-search :where(input):focus-visible{
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0;
}

/* The header's small search IS its own field, so it keeps a ring - but one
   ring, the pill-shaped one it already had, not a rectangle on top of it. */
.sitehead__askInput:focus,
.sitehead__askInput:focus-visible{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Search inputs on WebKit carry a clear button and a decoration box that draw
   their own frame in some Chrome builds. Off. */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button{
  -webkit-appearance: none;
  appearance: none;
}


/* ---------------------------------------------------------------------------
   2. FIVE TABS, FIVE ROOMS IN THE SAME BUILDING

   The complaint: every tab looks like every other tab. It was true. The colour
   for each league existed and it was spent in exactly two places - the hero
   wash and the top edge of a dropdown - so once you were three inches down a
   page there was nothing to tell you which league you were in. On a phone the
   header scrolls away and there was nothing at all.

   The fix is one attribute on <body> and a retune of the accent family off it.
   Every button, chip, rule, bar and border on this site is drawn in --accent,
   so moving --accent moves the whole room at once and nothing has to be
   restyled per section. That is what keeps it cohesive: the bones do not
   change. Same grid, same cards, same type, same spacing.

   Then each section gets ONE piece of furniture that is only its own, drawn
   from the part of a ballpark that section actually is:

     MLB            infield clay, and the arc of the cutout behind the hero
     Little League  Williamsport gold, and the bunting over the outfield fence
     College        Omaha sky, and chalk
     Travel/Youth   outfield grass, and the mow stripes across it
     Tools/Games    scoreboard purple, and the bulb grid of a board

   Five rooms. One building.
   --------------------------------------------------------------------------- */

/* LITTLE LEAGUE IS NOT LISTED HERE ON PURPOSE.
   It is the one tab that already had a full identity of its own: .body--ll
   paints Williamsport navy and keystone red over its own ground, which is the
   theming Connor asked for on Sept 8. Setting a gold accent at higher
   specificity quietly took that away on all three Little League pages. The
   fix is to stop: Little League keeps its navy and its red, and this file
   gives it furniture rather than a colour. */
body[data-section="travel"]{
  --accent: #46e58a; --accent-hot: #86f5b6; --accent-ink: #04281c;
  --accent-soft: rgba(70,229,138,.17); --accent-line: rgba(70,229,138,.48);
}
body[data-section="college"]{
  --accent: #5ad8f2; --accent-hot: #a2ebfb; --accent-ink: #042831;
  --accent-soft: rgba(90,216,242,.18); --accent-line: rgba(90,216,242,.50);
}
body[data-section="tools"]{
  --accent: #b494ff; --accent-hot: #d3c0ff; --accent-ink: #1b1039;
  --accent-soft: rgba(180,148,255,.19); --accent-line: rgba(180,148,255,.50);
}
/* MLB keeps the clay it already had; naming it here so the set reads as five
   rather than four and a default. */
body[data-section="mlb"]{
  --accent: #ff8f4a; --accent-hot: #ffb375; --accent-ink: #2a1002;
  --accent-soft: rgba(255,143,74,.18); --accent-line: rgba(255,143,74,.48);
}

@media (prefers-color-scheme: light){
  body[data-section="travel"]{
    --accent: #14874a; --accent-hot: #0c6034; --accent-ink: #ffffff;
    --accent-soft: rgba(20,135,74,.13); --accent-line: rgba(20,135,74,.34);
  }
  body[data-section="college"]{
    --accent: #0d8499; --accent-hot: #095e6e; --accent-ink: #ffffff;
    --accent-soft: rgba(13,132,153,.14); --accent-line: rgba(13,132,153,.34);
  }
  body[data-section="tools"]{
    --accent: #6a44c4; --accent-hot: #4f3096; --accent-ink: #ffffff;
    --accent-soft: rgba(106,68,196,.13); --accent-line: rgba(106,68,196,.34);
  }
  body[data-section="mlb"]{
    --accent: #c2571a; --accent-hot: #9e4310; --accent-ink: #ffffff;
    --accent-soft: rgba(194,87,26,.12); --accent-line: rgba(194,87,26,.34);
  }
}

/* The header wears the room's colour, so the tab you are in is obvious before
   you have read a tab. */
body[data-section] .sitehead{ border-bottom: 2px solid var(--accent-line); }
body[data-section] .tab.is-here .tab__label{ color: var(--accent); }

/* A hero with no tone class set still picks up the room. */
body[data-section] .sechero{ --tone: var(--accent); --tone-soft: var(--accent-soft); }

/* --- the one piece of furniture per room ---------------------------------- */

/* THE TEXTURE GOES ON THE HERO, NOT ON ITS ::after.
   ::after was already spoken for: it is the outer of the two dashed seam arcs
   the ballpark layer parks off the corner of every hero, and it is a circle
   86% of the hero wide sitting mostly outside the box. Painting a texture into
   that gave a curved band of bunting hanging in mid air and quietly took the
   seam away. So each room's texture is an extra background LAYER on .sechero
   itself, in front of the tone wash, and both seams survive. */

body[data-section="mlb"] .sechero{
  background-image:
    radial-gradient(circle at 112% 128%, transparent 0 40%,
      color-mix(in srgb, var(--accent) 17%, transparent) 40% 40.9%, transparent 40.9%),
    radial-gradient(circle at 112% 128%, transparent 0 47%,
      color-mix(in srgb, var(--accent) 9%, transparent) 47% 47.6%, transparent 47.6%),
    linear-gradient(150deg, var(--tone-soft), transparent 58%);
  background-color: var(--surface);
}

/* The bunting that hangs off the fence at Lamade every August. Scalloped,
   because the real thing is scalloped, and an explicit radius, because a
   circle with no radius is sized against the tile's far corner and swells
   into one dome across the whole hero. */
body[data-section="littleleague"] .sechero{
  background-image:
    radial-gradient(circle 20px at 50% 0,
      color-mix(in srgb, var(--ll-red, var(--accent-2)) 55%, transparent) 0 19px, transparent 19.5px),
    linear-gradient(150deg, var(--tone-soft), transparent 58%);
  background-size: 44px 26px, auto;
  background-repeat: repeat-x, no-repeat;
  background-position: 0 0, 0 0;
  background-color: var(--surface);
}

/* Chalk. Two lines out of the corner, the way a box is laid before a game,
   and nothing else on a field is that white. */
body[data-section="college"] .sechero{
  background-image:
    linear-gradient(74deg, transparent 0 6%, color-mix(in srgb, var(--chalk) 32%, transparent) 6% 6.5%, transparent 6.5%),
    linear-gradient(74deg, transparent 0 11%, color-mix(in srgb, var(--chalk) 17%, transparent) 11% 11.4%, transparent 11.4%),
    linear-gradient(150deg, var(--tone-soft), transparent 58%);
  background-color: var(--surface);
}

/* Mow stripes. Outfield grass is the surface these kids stand on all weekend. */
body[data-section="travel"] .sechero{
  background-image:
    repeating-linear-gradient(102deg,
      color-mix(in srgb, var(--accent) 7%, transparent) 0 38px,
      transparent 38px 76px),
    linear-gradient(150deg, var(--tone-soft), transparent 58%);
  background-color: var(--surface);
}

/* The bulb grid of a scoreboard, most of them dark. */
body[data-section="tools"] .sechero{
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--accent) 17%, transparent) 0 1.3px, transparent 1.5px),
    linear-gradient(150deg, var(--tone-soft), transparent 58%);
  background-size: 24px 24px, auto;
  background-repeat: repeat, no-repeat;
  background-color: var(--surface);
}

/* --- and one heading rule per room ---------------------------------------- */

body[data-section] .panel-block__title,
body[data-section] .sechero__title{ position: relative; }

/* MLB underlines like a chalk foul line: solid, one weight. */
body[data-section="mlb"] .panel-block__title{ box-shadow: 0 6px 0 -4px var(--accent-line); }
/* Little League: a dashed stitch, the way a ball is sewn. */
body[data-section="littleleague"] .panel-block__title{
  padding-bottom: 6px;
  border-bottom: 2px dashed color-mix(in srgb, var(--accent) 60%, transparent);
}
/* College: double rule, which is how a program's record book is set. */
body[data-section="college"] .panel-block__title{
  padding-bottom: 6px; border-bottom: 3px double var(--accent-line);
}
/* Travel: a short bat-length tick under the first inch of the heading. */
body[data-section="travel"] .panel-block__title::after{
  content: ""; position: absolute; left: 0; bottom: -7px;
  width: 42px; height: 3px; border-radius: 2px; background: var(--accent);
}
/* Tools: the heading is lit rather than ruled. Every section heading on the
   site already carries a bulb in front of it, so a second bulb after it is
   two bulbs on one line; what Tools gets instead is the glow off the one it
   has, run under the words. */
body[data-section="tools"] .panel-block__title{
  padding-bottom: 6px;
  border-bottom: 2px solid var(--accent-line);
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 45%, transparent);
}


/* ---------------------------------------------------------------------------
   3. THE RULEBOOKS, SET TO BE READ

   Connor's read: "a lot of pages need bigger fonts and better user friendly
   presentation especially rulebooks. its small and overcomplicated."

   Both halves of that are fair and they are separate problems.

   SMALL. The rulebook pages were built off --step-label (.9rem) and
   --step-small (.98rem) for almost everything that was not a heading, and
   then several of them went under that again with hard 0.82rem and 0.86rem
   values. A rule is a paragraph somebody has to hold in their head while they
   read the next one. It cannot be set in caption type.

   OVERCOMPLICATED. Four rulings side by side in four columns on a 1180px page
   gives each ruling about 240 pixels, which is roughly nine characters a line,
   which is a column of confetti. The four books are not a table. They are four
   short readings of one play, and they read far better stacked wide enough to
   hold a sentence, with the book's name doing the sorting.

   So: the type comes up, the columns come down, and the parts that were doing
   two jobs at once get pulled apart.
   --------------------------------------------------------------------------- */

/* The floor, everywhere. Nothing on the site under .88rem now. */
:root{
  --step-label: .95rem;
  --step-small: 1.04rem;
}

/* --- One Play, Four Rulebooks --------------------------------------------- */

/* FOUR COLUMNS BECAME AS MANY AS FIT. Below about 1100px of usable width four
   rulings cannot each hold a line of text, so they go two-up and then one-up
   rather than getting narrower forever. */
/* FOUR BOOKS WANT FOUR COLUMNS OR TWO, NEVER THREE. auto-fit was landing on
   three across and leaving NCAA sitting alone on a second row, which reads as
   an afterthought rather than as the fourth book. The count is fixed at four,
   so the breakpoints are written rather than guessed: four wide, two in the
   middle, one on a phone. */
/* AND THE BREAKPOINT WAS IN THE WRONG PLACE. Four columns were kept down to
   a 1240px WINDOW, but the play list takes 320 of that and the page its
   padding, so four books were sharing 860 pixels: 204 each, which is what
   "very narrow" was. Four only happens when there is room for four columns a
   sentence fits in; everything below that is two-up, which is a square of
   four books rather than a strip of confetti. */
.rb-books{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 1500px){ .rb-books{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 620px){ .rb-books{ grid-template-columns: minmax(0, 1fr); } }

.rb-book{ padding: 18px 20px 20px; border-top-width: 4px; }
.rb-book__name{ font-size: 1.3rem; letter-spacing: -.01em; }
.rb-book__full{ font-size: .95rem; }
.rb-book__call{ font-size: 1.18rem; line-height: 1.35; margin-top: 8px; }
.rb-book__detail{ font-size: 1.05rem; line-height: 1.6; }
.rb-book__rule{ font-size: .95rem; letter-spacing: .02em; }

/* The play itself is the thing the whole page hangs on, so it is set like a
   headline and given room to be one. */
.rb-play__name{ font-size: clamp(1.85rem, 3.4vw, 2.35rem); line-height: 1.1; letter-spacing: -.025em; }
.rb-play__sit{ font-size: 1.2rem; line-height: 1.6; max-width: 58ch; color: var(--ink); }
.rb-play__cat{ font-size: .92rem; }

/* THE LIST BESIDE IT WAS A SIDEBAR OF 280 PIXELS holding play names that are
   mostly six or seven words. It gets a real column. */
.rb-grid{ grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 30px; }
.rb-item{ padding: 12px 14px; }
.rb-item__name{ font-size: 1.06rem; line-height: 1.35; }
.rb-item__cat, .rb-item__agree{ font-size: .9rem; }
.rb-chip{ font-size: .95rem; padding: 7px 13px; }
.rb-tab__label{ font-size: 1.08rem; }
.rb-tab__note{ font-size: .95rem; }

.rb-coach__text{ font-size: 1.08rem; line-height: 1.65; }
.rb-coach__label{ font-size: .92rem; }
.rb-agree{ font-size: 1.02rem; }
.rb-spec__label{ font-size: .92rem; }
.rb-spec__value{ font-size: 1.1rem; }
.rb-spec__at, .rb-spec__note{ font-size: .92rem; }

.rb-quiz__name{ font-size: clamp(1.5rem, 3vw, 1.95rem); line-height: 1.15; }
.rb-quiz__sit{ font-size: 1.18rem; line-height: 1.6; }
.rb-feedback__verdict{ font-size: 1.4rem; }
.rb-feedback__other{ font-size: 1.04rem; }
.rb-feedback__coach{ font-size: 1.05rem; line-height: 1.62; }
.rb-feedback__rule, .rb-feedback__restlabel{ font-size: .92rem; }
.rb-score{ font-size: .98rem; }
.rb-man__label{ font-size: 13px; }

@media (max-width: 900px){
  .rb-grid{ grid-template-columns: minmax(0, 1fr); }
}

/* --- The College Rulebook ------------------------------------------------- */

.crb-rule__name{ font-size: 1.28rem; }
.crb-rule__call{ font-size: 1.12rem; line-height: 1.55; max-width: 68ch; }
.crb-rule__detail{ font-size: 1.1rem; line-height: 1.7; max-width: 72ch; }
.crb-rule__quirkText{ font-size: 1.06rem; line-height: 1.68; }
.crb-rule__quirkLabel{ font-size: .92rem; }
.crb-rule__rule{ font-size: 1rem; }
.crb-rule__cat{ font-size: .92rem; }
.crb-rule__head{ padding: 18px 20px; }
.crb-rule__body{ padding: 0 20px 22px; gap: 16px; }

.crb-diff__head{ font-size: 1.32rem; }
.crb-diff__text{ font-size: 1.1rem; line-height: 1.72; max-width: 70ch; }
.crb-diff__num{ font-size: 1.05rem; }

.crb-myth__said .crb-myth__text,
.crb-myth__true .crb-myth__text{ font-size: 1.1rem; line-height: 1.65; }
.crb-myth__tag{ font-size: .9rem; }
.crb-myth{ padding: 18px 20px; }

.crb-other__book{ font-size: .95rem; }
.crb-other__call{ font-size: 1.08rem; line-height: 1.55; }
.crb-others__label{ font-size: .92rem; }
.crb-chip{ font-size: .98rem; padding: 8px 14px; }
.crb-compare__text{ font-size: 1.06rem; line-height: 1.6; }
.crb-compare__label{ font-size: 1.1rem; }
.crb-book-chip{ font-size: .95rem; }

/* --- The travel spec sheets ----------------------------------------------- */

/* THE 14U CARD WAS THE EXAMPLE HE GAVE of a page that reads like a machine
   emptying a spreadsheet. The layout was already fixed once; what was left
   was the size of it. A coach checks a drop weight on a phone in a dugout. */
.division-name{ font-size: 26px; }
.division-format{ font-size: 1.02rem; line-height: 1.45; }
.division-key{ font-size: .92rem; letter-spacing: .04em; }
.division-value{ font-size: 1.38rem; }
.division-cell{ padding: 9px 11px; }
.spec__head{ font-size: .95rem; letter-spacing: .07em; }
.spec__key{ font-size: 1.06rem; }
.spec__value{ font-size: 1.28rem; }
.spec__note{ font-size: 1rem; line-height: 1.55; color: var(--ink-soft); }
.spec__foot{ font-size: 1rem; line-height: 1.6; }
.spec__row{ padding: 12px 0; }

.topiccard__name{ font-size: 1.16rem; }
.topiccard__note{ font-size: 1.02rem; line-height: 1.5; }


/* ---------------------------------------------------------------------------
   4. THE LAST OF THE SMALL TYPE

   Hot Seat and the profile card were built in hard pixels rather than off the
   scale, and several of them landed at 10, 11 and 12px. That is legend type.
   None of it is legends.
   --------------------------------------------------------------------------- */

.hshead__label,
.hsend__eyebrow,
.hshow__title,
.hsreveal .hsbook__tag,
.hsclub__tag{ font-size: 13px !important; letter-spacing: .08em; }

.hschip__name{ font-size: 14px; }
.hsbook .hsbook__name{ font-size: 15.5px; }
.hsbook .hsbook__we{ font-size: 14.5px; }
.hsbook .hsbook__verdict{ font-size: 13.5px; }
.hsreveal .hsbook__verdict{ font-size: 14.5px; }
.hswe__mark{ font-size: 13px; }
.hsreveal__odds{ font-size: 14px; }
.hsclub__year, .hsclub__record{ font-size: 14.5px; }
.hshow__name{ font-size: 15.5px; }
.sc-row__pct{ font-size: .86rem; }


/* ===========================================================================
   SEPT 10, SECOND PASS. WEIGHT, AND FIVE ROOMS THAT LOOK LIKE FIVE ROOMS.

   Connor: "fix thin and faded fonts present it nicer and differentiate the
   colors and designs of each tab more."

   Two problems again, and again they are separate.

   THIN AND FADED is a weight and a contrast problem, not a size problem. The
   size floor was already lifted twice. What was left: everything secondary on
   this site was set at 400 in a desaturated grey-green, rendered with
   antialiasing that shaves a stroke off every glyph, as light text on a dark
   ground, which is optically thinner again. Four things stacking in the same
   direction. All four move here.

   THE TABS ALL LOOKED ALIKE because colour was the only thing separating them
   and it was spent on the accent. Little League already had a real identity -
   Williamsport navy and keystone red, its own ground - and the four other tabs
   had one green room between them. So the other four get grounds of their own,
   and every tab gets its own card edge, eyebrow and hero shape on top.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1. WEIGHT

   Libre Franklin is a variable face from 400 to 800, so this costs nothing:
   no extra file, no faux bold. 460 is the new floor for body copy, which is
   about half a step up and is the difference between text that sits on the
   page and text that hovers over it.
   --------------------------------------------------------------------------- */

body{ font-weight: 460; }

/* Secondary text carries weight rather than relying on colour to stay legible.
   This is the class of text the complaint is actually about: notes, captions,
   sub-labels, the line under a heading. */
.hub__source, .empty-note, .finder-wrap__hint, .sechero__blurb,
.toolcard__point, .tab__itemNote, .tab__blurb, .fronthero__sub,
.sc-block__note, .sc-fine, .pl-slider__note, .pl-tile__note,
.panel-block__aside, .door__note, .topiccard__note, .suggestion__detail,
.spec__note, .spec__foot, .crb-rule__detail, .crb-diff__text,
.rb-book__detail, .rb-play__sit, .division-format{
  font-weight: 500;
}

/* Anything set in the faintest ink is the most likely thing on the page to
   disappear, so nothing is allowed to be faint AND light. */
:where(p, span, div, li, td, dd, small){
  font-synthesis-weight: none;
}

/* Headings. A display face at 600 is a display face being used as body copy.
   Bricolage carries a real 800 and this is where it earns its place. */
h1, h2{ font-weight: 800; }
h3, h4, h5{ font-weight: 700; }
.sechero__title, .fronthero__headline{ font-weight: 800; }
.panel-block__title{ font-weight: 800; }
.door__name, .topiccard__name, .rb-book__name, .crb-rule__name,
.crb-diff__head, .rb-play__name, .rb-quiz__name{ font-weight: 700; }

/* Uppercase micro-labels: tracking plus real weight, or they smear. */
.sechero__eyebrow, .fronthero__eyebrow, .spec__head, .division-key,
.rb-play__cat, .crb-rule__cat, .rb-coach__label, .crb-rule__quirkLabel,
.crb-myth__tag, .crb-others__label, .rb-spec__label{
  font-weight: 800;
  letter-spacing: .1em;
}

/* Figures. Barlow Semi Condensed is narrow, and narrow at 600 on a dark ground
   is the thinnest thing on any page here. */
.division-value, .spec__value, .rb-spec__value, .crb-rule__rule,
.rb-book__rule, .sc-row__pct, .rb-score{
  font-weight: 700;
}

/* The tabs in the header are the first type anybody reads. */
.tab__label{ font-weight: 700; }
.sitehead__wordmark{ font-weight: 800; }

/* Links inside prose were the same colour and weight as the prose around them,
   which is faded in a second sense: you cannot see that they are links. */
.crb-rule__go, .rb-tryit, .crb-compare__go{ font-weight: 700; }


/* ---------------------------------------------------------------------------
   2. A GROUND PER TAB, NOT JUST AN ACCENT

   The accent retune was the cheap half of this and it was not enough: four of
   the five tabs still stood on the same green floor, so the only thing telling
   you which one you were in was the colour of the buttons.

   Little League proved what the answer looks like. It has had its own ground
   since Sept 8 - Williamsport navy under keystone red - and nobody has ever
   confused a Little League page for anything else. So the other tabs get the
   same treatment: their own surfaces, their own hairlines, their own light.

   They stay one family because they are all the same PLACE at the same hour.
   A ballpark at night, from five different seats:

     MLB            the night grass the whole site was built on. The default.
     Little League  Williamsport navy, keystone red. Already there, untouched.
     College        June in Omaha. Cooler, bluer, the sky doing the lighting.
     Travel/Youth   a Saturday field, brighter, because youth ball is a day game
     Tools/Games    behind the scoreboard. Indigo, and the bulbs are the light.

   The steps between surfaces are preserved in every set, so a card still sits
   one step off the page and a raised card one step off that.
   --------------------------------------------------------------------------- */

body[data-section="college"]{
  --bg: #0d1e26;
  --bg-2: #112a34;
  --surface: #163945;
  --surface-2: #1e4b59;
  --surface-3: #276070;
  --line: #35849a;
  --line-soft: #1e4956;
  --lights: rgba(176,226,246,.17);
  --mow: rgba(255,255,255,.016);
  --grass-lit: #2f7f95;
  --grass-dark: #1f5b6c;
  /* The inks pick up the room too, or a green-tinted grey sits on a blue
     ground looking like it was pasted in from another page. */
  --ink: #f4fbfd;
  --ink-soft: #d7ecf2;
  --ink-faint: #a8ccd7;
}

body[data-section="travel"]{
  /* Brighter than the MLB night, because youth ball is a day game, but the
     whole set is pulled back a notch from the first try: the raised surface
     was light enough that the faintest ink on it fell under 4:1, which is
     precisely the "faded" complaint arriving by a different door. */
  --bg: #14301f;
  --bg-2: #1b3d28;
  --surface: #244d33;
  --surface-2: #2e6042;
  --surface-3: #3a7350;
  --line: #4f8c63;
  --line-soft: #346043;
  --lights: rgba(214,255,206,.16);
  /* A brighter ground shows a mow stripe far more than a dark one does, so the
     same alpha that was a hint on the MLB pages was banding across this one. */
  --mow: rgba(255,255,255,.011);
  --ink: #f7fdf4;
  --ink-soft: #e3f3dc;
  --ink-faint: #c2dcb9;
}

body[data-section="tools"]{
  --bg: #141329;
  --bg-2: #1a1938;
  --surface: #23214c;
  --surface-2: #2e2b61;
  --surface-3: #3b377c;
  --line: #524ba8;
  --line-soft: #2c2a5f;
  --lights: rgba(206,192,255,.15);
  --mow: rgba(255,255,255,.016);
  --grass-lit: #4a3f92;
  --grass-dark: #332c6b;
  --ink: #f8f6ff;
  --ink-soft: #e3ddf7;
  --ink-faint: #bfb6e2;
}

/* THE INKS HAVE TO BE RESTATED HERE OR THEY DO NOT COME BACK.
   The dark sets above are on body[data-section], which outranks :root, so the
   light theme's own --ink never wins on these three tabs. Leaving them out put
   near-white type on a near-white page: College, Travel and Tools were blank
   sheets in light mode. Anything tinted for a room in the dark block has to be
   tinted for the same room here. */
@media (prefers-color-scheme: light){
  body[data-section="college"]{
    --bg: #eef6f8; --bg-2: #e0eef2; --surface: #ffffff;
    --surface-2: #edf6f8; --surface-3: #dceaee;
    --line: #bcd6dd; --line-soft: #dceaee;
    --ink: #07171c; --ink-soft: #2b464f; --ink-faint: #42606a;
    --lights: rgba(120,190,215,.16);
    --grass-lit: #7fc3d4; --grass-dark: #4f9fb3;
  }
  body[data-section="travel"]{
    --bg: #f1f8ec; --bg-2: #e5f1dd; --surface: #ffffff;
    --surface-2: #f0f7ea; --surface-3: #e0ecd8;
    --line: #c6dcba; --line-soft: #e0ecd8;
    --ink: #091709; --ink-soft: #2e452c; --ink-faint: #465f43;
    --lights: rgba(190,235,170,.18);
  }
  body[data-section="tools"]{
    --bg: #f4f2fb; --bg-2: #eae7f7; --surface: #ffffff;
    --surface-2: #f3f1fb; --surface-3: #e7e3f5;
    --line: #cec7ea; --line-soft: #e7e3f5;
    --ink: #100c22; --ink-soft: #383053; --ink-faint: #524974;
    --lights: rgba(200,185,245,.18);
    --grass-lit: #b3a5e6; --grass-dark: #8d7cd0;
  }
}


/* ---------------------------------------------------------------------------
   3. AND A DESIGN PER TAB, SO IT SURVIVES A BLACK AND WHITE SCREENSHOT

   Colour alone is a weak difference: it disappears for a colour-blind reader,
   it disappears in a screenshot, and it disappears the moment somebody is
   looking at content rather than at chrome. Each tab gets a SHAPE as well, and
   the shape is the same idea carried across the eyebrow, the cards and the
   corners so it reads as one design rather than five decorations.

     MLB            square. Bases are square, a scoreboard is square, and the
                    oldest league gets the least rounded room in the building.
     Little League  rounded and outlined twice, the way a patch is stitched.
     College        squared with a double rule, which is how a program's record
                    book is set and how a nameplate on a bracket is drawn.
     Travel/Youth   soft, with a bat-length bar down the left of every card.
     Tools/Games    a lit edge. Everything in here glows a little, because
                    everything in here is a board with bulbs behind it.
   --------------------------------------------------------------------------- */

/* --- MLB: square --------------------------------------------------------- */
body[data-section="mlb"]{ --radius: 5px; --radius-sm: 3px; --radius-lg: 7px; }
body[data-section="mlb"] .door,
body[data-section="mlb"] .topiccard,
body[data-section="mlb"] .toolcard{ border-top: 3px solid var(--accent); }
/* Three bases and a plate, in clay. */
body[data-section="mlb"] .sechero__eyebrow::before{
  width: 26px; height: 7px; border-radius: 1px;
  background: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 10px);
}

/* --- Little League: stitched --------------------------------------------- */
body[data-section="littleleague"]{ --radius: 16px; --radius-sm: 11px; --radius-lg: 22px; }
body[data-section="littleleague"] .door,
body[data-section="littleleague"] .topiccard,
body[data-section="littleleague"] .toolcard{
  box-shadow: 0 0 0 1px var(--bg) inset, 0 0 0 2px color-mix(in srgb, var(--ll-red, var(--accent-2)) 45%, transparent) inset;
}
body[data-section="littleleague"] .sechero__eyebrow::before{
  width: 22px; height: 14px; border-radius: 2px 2px 0 0;
  background: var(--ll-red, var(--accent-2));
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
  box-shadow: none;
}

/* --- College: the record book -------------------------------------------- */
body[data-section="college"]{ --radius: 4px; --radius-sm: 2px; --radius-lg: 6px; }
body[data-section="college"] .door,
body[data-section="college"] .topiccard,
body[data-section="college"] .toolcard{
  /* 4px, not 3. A 3px double border renders 1-1-1 and the gap disappears at
     any zoom, which just looks like a thin solid rule with a bad colour. */
  border-top: 4px double var(--accent);
  padding-top: 20px;
}
body[data-section="college"] .sechero__eyebrow::before{
  width: 28px; height: 7px; border-radius: 0;
  background: none;
  border-top: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  box-shadow: none;
}

/* --- Travel and youth: the bat down the left ------------------------------ */
body[data-section="travel"]{ --radius: 18px; --radius-sm: 12px; --radius-lg: 24px; }
body[data-section="travel"] .door,
body[data-section="travel"] .topiccard,
body[data-section="travel"] .toolcard{
  border-left: 5px solid var(--accent);
  padding-left: 20px;
}
body[data-section="travel"] .sechero__eyebrow::before{
  width: 30px; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 25%, transparent));
}

/* --- Tools and games: lit ------------------------------------------------- */
body[data-section="tools"]{ --radius: 12px; --radius-sm: 8px; --radius-lg: 16px; }
body[data-section="tools"] .door,
body[data-section="tools"] .topiccard,
body[data-section="tools"] .toolcard{
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  box-shadow: 0 0 24px -8px color-mix(in srgb, var(--accent) 70%, transparent), 0 1px 0 rgba(255,255,255,.07) inset;
}
body[data-section="tools"] .door:hover,
body[data-section="tools"] .topiccard:hover,
body[data-section="tools"] .toolcard:hover{ box-shadow: 0 0 26px -8px var(--accent); }
body[data-section="tools"] .sechero__eyebrow::before{
  width: 26px; height: 6px; border-radius: 3px;
  background: radial-gradient(circle 3px at 4px 3px, var(--accent) 0 2.6px, transparent 2.8px) 0 0 / 9px 6px repeat-x;
  box-shadow: 0 0 14px -2px var(--accent);
}

/* --- the header says which room too --------------------------------------- */
/* The lit tab was a colour swap on the label. It is now the same shape
   language as the room behind it, so the tab and the page agree. */
body[data-section] .tab.is-here .tab__link{
  box-shadow: inset 0 -3px 0 var(--accent);
}
body[data-section="college"] .tab.is-here .tab__link{
  box-shadow: inset 0 -3px 0 var(--accent), inset 0 -6px 0 -1px var(--bg);
}
body[data-section="tools"] .tab.is-here .tab__link{
  box-shadow: inset 0 -3px 0 var(--accent);
  text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* ============================================================
   SEPT 10: THE LIVE BOOK, TYPED

   Three things changed and they all needed drawing. The plate appearance is
   shared as an outcome card rather than as the league's own sentence, the
   entry is typed into an empty box instead of picked from four, and the whole
   thing is a chase for a clean book that can be marked as you go or at the
   end and then sent to somebody.
   ============================================================ */

/* ---------- the two decisions before it opens ---------- */

.sbk-setup{ display: grid; gap: 18px; margin-top: 18px; }
.sbk-choice{ display: grid; gap: 8px; }
.sbk-choice__title{ margin: 0; font-family: var(--display); font-size: 1.12rem; }
.sbk-choice__note{ margin: 0; color: var(--ink-soft); max-width: 74ch; }
.sbk-choice__row{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.sbk-pick{
  display: grid; gap: 6px; text-align: left;
  padding: 14px 16px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface);
  color: inherit; font: inherit; cursor: pointer;
  transition: border-color .14s ease, transform .14s ease;
}
.sbk-pick:hover{ border-color: var(--accent); transform: translateY(-1px); }
.sbk-pick.is-on{ border-color: var(--accent); background: var(--accent-soft); }
.sbk-pick__label{ font-weight: 800; font-family: var(--display); }
.sbk-pick__note{ font-size: var(--step-small); color: var(--ink-soft); line-height: 1.5; }

/* ---------- the score, which is the thing being chased ---------- */

.sbk-perfect{
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 12px 18px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface);
}
.sbk-perfect__score{ display: flex; align-items: baseline; gap: 8px; }
.sbk-perfect__num{ font-family: var(--display); font-weight: 850; font-size: 2.1rem; line-height: 1; }
.sbk-perfect__of{ font-size: var(--step-small); color: var(--ink-faint); }
.sbk-perfect__score.is-perfect .sbk-perfect__num{ color: var(--pos); }
.sbk-perfect__bits{ display: flex; gap: 20px; flex-wrap: wrap; margin-left: auto; }
.sbk-perfect__bit{ display: grid; gap: 1px; }
.sbk-perfect__bitvalue{ font-family: var(--mono); font-weight: 700; }
.sbk-perfect__bitlabel{ font-size: var(--step-label); color: var(--ink-faint); }
.sbk-perfect__bit.is-good .sbk-perfect__bitvalue{ color: var(--pos); }
.sbk-perfect__bit.is-behind .sbk-perfect__bitvalue{ color: var(--accent-3); }
.sbk-perfect__bit.is-wait .sbk-perfect__bitvalue{ color: var(--accent); }
.sbk-gradebtn{
  padding: 9px 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--accent-line); background: var(--accent-soft);
  color: var(--ink); font: inherit; font-weight: 700;
}
.sbk-gradebtn:hover{ border-color: var(--accent); }
.sbk-gamehead__mode{ font-size: var(--step-label); color: var(--ink-faint); font-family: var(--mono); }

/* ---------- what just happened ---------- */

.sbk-outcome{
  display: grid; gap: 8px; padding: 16px 18px;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--accent-soft), transparent 62%), var(--surface-2);
}
.sbk-outcome__top{ display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.sbk-outcome__where{
  font-family: var(--mono); font-size: var(--step-label); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--accent-3);
}
.sbk-outcome__batter{ font-weight: 700; }
.sbk-outcome__head{ margin: 0; font-family: var(--display); font-size: 1.55rem; letter-spacing: -.02em; line-height: 1.1; }
.sbk-outcome__batterline{ margin: 0; color: var(--ink-soft); font-size: 1.02rem; }
.sbk-outcome__moves{ margin: 2px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.sbk-outcome__move{ position: relative; padding-left: 16px; font-size: var(--step-small); color: var(--ink-soft); }
.sbk-outcome__move::before{
  content: ""; position: absolute; left: 2px; top: .55em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint);
}
.sbk-outcome__move.is-run::before{ background: var(--pos); }
.sbk-outcome__move.is-out::before{ background: var(--neg); }
.sbk-outcome__chips{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.sbk-chip{
  padding: 3px 10px; border-radius: 999px; font-size: var(--step-label); font-weight: 700;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
}
.sbk-chip.is-out{ border-color: rgba(242,97,90,.45); color: var(--neg); }
.sbk-chip.is-run{ border-color: rgba(62,201,141,.45); color: var(--pos); }
.sbk-outcome__src{ margin-top: 2px; font-size: var(--step-label); color: var(--ink-faint); }
.sbk-outcome__src summary{ cursor: pointer; }
.sbk-outcome__srctext{ margin: 6px 0 0; color: var(--ink-faint); line-height: 1.5; }

/* ---------- writing it in ---------- */

.sbk-write{ display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.sbk-write__box{
  position: relative; width: 128px; height: 78px;
  border: 2px solid var(--line); border-radius: 10px;
  background: var(--surface-2);
  display: grid; place-items: center;
  transition: border-color .14s ease;
}
.sbk-write__box:focus-within{ border-color: var(--accent); }
.sbk-write__box.is-right{ border-color: var(--pos); }
.sbk-write__box.is-wrong{ border-color: var(--neg); }
.sbk-write__box.is-written{ border-color: var(--accent); border-style: dashed; }
.sbk-write__input{
  width: 100%; height: 100%; border: 0; background: none; text-align: center;
  color: var(--ink); font-family: var(--mono); font-weight: 800; font-size: 1.7rem;
  letter-spacing: .04em;
}
.sbk-write__input:focus{ outline: none; }
.sbk-write__go{
  padding: 12px 22px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--accent-line); background: var(--accent-soft);
  color: var(--ink); font: inherit; font-weight: 800;
}
.sbk-write__go:disabled{ opacity: .5; cursor: default; }
.sbk-write__hint{ margin: 0; font-size: var(--step-label); color: var(--ink-faint); max-width: 72ch; }
.sbk-write__said{ margin: 0; color: var(--ink-soft); font-family: var(--mono); font-size: var(--step-small); }

.sbk-pad{ display: grid; gap: 6px; }
.sbk-pad__row{ display: flex; gap: 6px; flex-wrap: wrap; }
.sbk-key{
  min-width: 42px; padding: 9px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); font-family: var(--mono); font-weight: 700; font-size: 1rem;
  cursor: pointer;
}
.sbk-key:hover{ border-color: var(--accent); }
.sbk-key.is-wide{ min-width: 54px; }
.sbk-feedback__why{ margin: 0; color: var(--ink); }

/* ---------- your entries in the card ---------- */

.sbk-box.is-pending .sbk-box__code{ color: var(--accent); }
.sbk-box.is-pending .sbk-leg{ stroke-dasharray: 5 4; }
.sbk-box.is-missed::after{
  content: ""; position: absolute; top: 0; right: 0;
  border-top: 12px solid var(--neg); border-left: 12px solid transparent;
  opacity: .75;
}
.sbk-box.is-mine .sbk-box__code{ color: var(--pos); }

/* ---------- marking it afterwards ---------- */

.sbk-review{ display: grid; gap: 14px; }
.sbk-review__head{ display: grid; gap: 4px; }
.sbk-review__title{ margin: 0; font-family: var(--display); font-size: 1.4rem; }
.sbk-review__line{ margin: 0; color: var(--ink-soft); max-width: 72ch; }
.sbk-review__list{ display: grid; gap: 8px; }
.sbk-review__row{
  display: grid; gap: 6px; padding: 12px 14px;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface); border-left-width: 3px;
}
.sbk-review__row.is-right{ border-left-color: var(--pos); }
.sbk-review__row.is-wrong{ border-left-color: var(--neg); }
.sbk-review__where{ display: flex; gap: 10px; align-items: baseline; }
.sbk-review__inn{ font-family: var(--mono); font-weight: 800; color: var(--ink-faint); font-size: var(--step-label); }
.sbk-review__batter{ font-weight: 700; font-size: var(--step-small); }
.sbk-review__what{ margin: 0; color: var(--ink-soft); font-size: var(--step-small); }
.sbk-review__marks{ display: flex; gap: 16px; align-items: center; }
.sbk-review__mark{ display: flex; gap: 8px; align-items: baseline; }
.sbk-review__code{ font-family: var(--mono); font-weight: 800; font-size: 1.2rem; }
.sbk-review__code.is-mirror{ display: inline-block; transform: scaleX(-1); }
.sbk-review__mark.is-right .sbk-review__code{ color: var(--pos); }
.sbk-review__mark.is-wrong .sbk-review__code{ color: var(--neg); }
.sbk-review__marklabel{ font-size: var(--step-label); color: var(--ink-faint); }
.sbk-review__why{ margin: 0; color: var(--ink); font-size: var(--step-small); }
.sbk-review__teach{ margin: 0; color: var(--ink-soft); font-size: var(--step-small); line-height: 1.55; }
.sbk-review__actions{ display: flex; gap: 10px; flex-wrap: wrap; }
.sbk-wait__row{ display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- the card you send somebody ---------- */

.sbk-share{ display: grid; gap: 14px; justify-items: start; }
.sbk-sharecard{
  display: grid; gap: 4px; width: min(100%, 460px);
  padding: 26px 28px; border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 26px, transparent 26px 52px),
    linear-gradient(160deg, var(--accent-soft), transparent 60%), var(--surface);
}
.sbk-sharecard.is-perfect{ border-color: var(--pos); }
.sbk-sharecard__eyebrow{
  font-family: var(--mono); font-size: var(--step-label); font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; color: var(--accent);
}
.sbk-sharecard__score{ font-family: var(--display); font-weight: 850; font-size: 2.6rem; line-height: 1.05; letter-spacing: -.03em; }
.sbk-sharecard__game{ font-weight: 700; }
.sbk-sharecard__when{ font-size: var(--step-small); color: var(--ink-faint); font-family: var(--mono); }
.sbk-sharecard__note{ margin: 10px 0 0; color: var(--ink-soft); line-height: 1.55; }
.sbk-sharecard__mark{
  margin-top: 14px; font-family: var(--mono); font-size: var(--step-label);
  text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint);
}
.sbk-share__actions{ display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 620px){
  .sbk-perfect__bits{ margin-left: 0; gap: 14px; }
  .sbk-write__box{ width: 108px; height: 66px; }
  .sbk-key{ min-width: 34px; padding: 8px; }
}

/* A mow stripe reads far harder on a white ground than on a dark one, so the
   travel hero's stripes come down in the light theme rather than shouting. */
@media (prefers-color-scheme: light){
  body[data-section="travel"] .sechero{
    background-image:
      repeating-linear-gradient(102deg,
        color-mix(in srgb, var(--accent) 4%, transparent) 0 44px,
        transparent 44px 88px),
      linear-gradient(150deg, var(--tone-soft), transparent 58%);
  }
}

/* Your Line: the pitching half sits in the same furniture as the hitting half,
   and needs one thing of its own, which is the line that owns up to batters
   faced having been estimated rather than counted. */
.yl-results__note{
  margin: -4px 0 0; font-size: var(--step-label); color: var(--ink-faint); max-width: 74ch;
}

/* ===========================================================================
   CALLED SHOT (Sept 10)

   Nine calls on tonight's games. The block is built around one idea: a call
   is a card, and the state of the call is written on the card rather than
   collected in a score somewhere else. Open, locked in, shut, right, wrong.

   Three rules.

   The state colour is on the card's own border and nowhere else, so a column
   of nine reads at a glance from three feet away: green won the call, red
   lost it, and a shut call nobody made goes grey and stays out of the way.

   The numbers are the point, so the facts under each call are set in the
   figure face at a size you can actually read, not as a footnote. This is the
   part that makes the feature worth using and it is not going to be styled
   like fine print.

   Nothing counts down. There is no timer, no "hurry", no pulsing anything.
   A call is open until its game starts and then it is not.
   ======================================================================== */

.csloading{ margin: 24px 0; font-size: var(--step-1); color: var(--ink-faint); }

.csempty{
  display: grid; gap: 12px; justify-items: start; padding: 26px; margin: 20px 0;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
}
.csempty__title{ margin: 0; font-family: var(--display); font-size: 1.5rem; }
.csempty__text{ margin: 0; color: var(--ink-soft); max-width: 78ch; }

.csbtn{
  appearance: none; cursor: pointer; font: inherit; font-weight: 650;
  padding: 11px 18px; border-radius: 999px; border: 1px solid var(--accent-line);
  background: linear-gradient(180deg, var(--accent-hot), var(--accent));
  color: var(--accent-ink); transition: filter .12s ease, transform .08s ease;
}
.csbtn:hover{ filter: brightness(1.06); }
.csbtn:active{ transform: translateY(1px); }
.csbtn:disabled{ cursor: default; filter: none; opacity: .55; }
.csbtn--ghost{ background: var(--surface-2); color: var(--ink); border-color: var(--line); }

/* ---------- the day ---------- */

.csstrip{
  display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center;
  padding: 14px 18px; margin: 20px 0 14px;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  border-left: 3px solid var(--accent);
}
.csstrip__day{ display: grid; gap: 2px; }
.csstrip__stat{ display: grid; gap: 2px; }
.csstrip__label{
  font-family: var(--mono); font-size: var(--step-label); text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-faint);
}
.csstrip__date{ font-family: var(--display); font-size: 1.25rem; font-weight: 700; }
.csstrip__value{ font-family: var(--mono); font-size: 1.2rem; font-weight: 700; }
.csstrip__note{ font-size: var(--step-label); color: var(--ink-soft); }
.csstrip__nav{ display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }

.csrewind{
  display: grid; gap: 10px; justify-items: start; padding: 18px 20px; margin-bottom: 16px;
  background: var(--surface-2); border: 1px solid var(--accent-line); border-radius: var(--radius);
}
.csrewind__title{ margin: 0; font-family: var(--display); font-size: 1.25rem; }
.csrewind__text{ margin: 0; color: var(--ink-soft); max-width: 86ch; }

/* ---------- the score so far ---------- */

.cssum{
  display: grid; gap: 10px; justify-items: start; padding: 18px 20px; margin-bottom: 16px;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
}
.cssum__title{ margin: 0; font-family: var(--display); font-size: clamp(1.4rem, 3.4vw, 2rem); }
.cssum__line{ margin: 0; font-size: var(--step-1); color: var(--ink-soft); }
.cssum__dots{ display: flex; flex-wrap: wrap; gap: 6px; }
.cssum__dot{
  width: 22px; height: 22px; border-radius: 5px;
  background: var(--surface-3); border: 1px solid var(--line);
}
.cssum__dot.is-right{ background: var(--pos); border-color: var(--pos); }
.cssum__dot.is-wrong{ background: var(--neg); border-color: var(--neg); }
.cssum__dot.is-open{ background: var(--accent-soft); border-color: var(--accent-line); }
.cssum__dot.is-void{ background: var(--surface-2); }

/* ---------- one call ---------- */

.cslist{ display: grid; gap: 14px; }

.cscall{
  display: grid; gap: 12px; padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  border-left: 4px solid var(--line);
}
.cscall.is-right{ border-left-color: var(--pos); }
.cscall.is-wrong{ border-left-color: var(--neg); }
.cscall.is-missed{ opacity: .68; }

.cscall__head{ display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.cscall__type{
  font-family: var(--mono); font-size: var(--step-label); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--accent);
}
.cscall__state{
  padding: 3px 10px; border-radius: 999px; font-family: var(--mono);
  font-size: var(--step-label); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  background: var(--surface-2); border: 1px solid var(--line-soft); color: var(--ink-soft);
}
.cscall__state.is-open{ color: var(--accent); border-color: var(--accent-line); }
.cscall__state.is-right{ color: var(--pos); border-color: color-mix(in srgb, var(--pos) 55%, transparent); }
.cscall__state.is-wrong{ color: var(--neg); border-color: color-mix(in srgb, var(--neg) 55%, transparent); }
.cscall__state.is-shut{ color: var(--ink-faint); }

.csgame{ display: grid; gap: 2px; }
.csgame__teams{ font-family: var(--display); font-size: 1.1rem; font-weight: 700; }
.csgame__meta{ font-family: var(--mono); font-size: var(--step-small); color: var(--ink-faint); }

.cscall__ask{
  margin: 0; font-family: var(--display); font-size: clamp(1.25rem, 2.8vw, 1.6rem);
  line-height: 1.2; letter-spacing: -.01em;
}

.cscall__options{ display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cscall__options--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 620px){
  .cscall__options,
  .cscall__options--3{ grid-template-columns: 1fr; }
}
.csopt{
  appearance: none; cursor: pointer; font: inherit; display: grid; gap: 3px; text-align: left;
  padding: 14px 16px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink);
  transition: border-color .12s ease, background .12s ease;
}
.csopt:hover:not(:disabled){ border-color: var(--accent-line); background: var(--accent-soft); }
.csopt:disabled{ cursor: default; }
.csopt__label{ font-family: var(--display); font-size: 1.1rem; font-weight: 700; }
.csopt__note{ font-size: var(--step-label); color: var(--ink-faint); }
.csopt__flag{
  font-family: var(--mono); font-size: var(--step-label); text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-faint);
}
.csopt.is-pick{ border-color: var(--accent); background: var(--accent-soft); }
.csopt.is-pick .csopt__flag{ color: var(--accent); }
.csopt.is-answer{
  border-color: var(--pos); background: color-mix(in srgb, var(--pos) 12%, var(--surface-2));
}
.csopt.is-answer .csopt__flag{ color: var(--pos); }
.csopt.is-pick.is-answer{ border-color: var(--pos); }

.csresult{
  display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
  padding: 10px 14px; background: var(--surface-2);
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
}
.csresult__label{
  font-family: var(--mono); font-size: var(--step-label); text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-faint);
}
.csresult__text{ font-family: var(--mono); font-size: 1.05rem; font-weight: 700; }

/* The numbers behind the call. Set in the figure face, at a size that can be
   read rather than squinted at: this is the reason the feature exists. */
.csfacts{ display: grid; gap: 6px; }
.csfact{
  display: grid; gap: 8px; align-items: baseline;
  grid-template-columns: minmax(120px, 210px) minmax(0, 1fr);
  padding: 8px 12px; background: var(--surface-2);
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
}
@media (max-width: 620px){ .csfact{ grid-template-columns: 1fr; gap: 2px; } }
.csfact__label{
  font-family: var(--mono); font-size: var(--step-label); text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-faint);
}
.csfact__value{ font-family: var(--mono); font-size: 1.05rem; font-weight: 700; }
.csfact__note{ grid-column: 2; font-size: var(--step-small); color: var(--ink-soft); }
@media (max-width: 620px){ .csfact__note{ grid-column: 1; } }

.csread{
  margin: 0; padding-left: 14px; color: var(--ink-soft); max-width: 90ch;
  border-left: 2px solid var(--accent-line);
}

/* ---------- how it works ---------- */

.cshow{ display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 14px; }
.cshow__step{
  display: grid; gap: 6px; align-content: start; padding: 16px;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  border-top: 3px solid var(--accent-line);
}
.cshow__title{ margin: 0; font-family: var(--display); font-size: 1.1rem; }
.cshow__text{ margin: 0; font-size: var(--step-small); color: var(--ink-soft); }
.csnote{ margin: 14px 0 0; font-size: var(--step-small); color: var(--ink-faint); max-width: 88ch; }

.toolcard--cs{ border-top: 3px solid var(--accent-2); }

/* ===================================================================
   THE GAME BEFORE IT IS PLAYED

   Every game on today's card sits in this state until somebody throws,
   and clicking one used to open a page that said there were no pitches
   yet. The preview lives in the same slot the live panel does, so the
   page becomes the live one the moment the game starts without anything
   moving on screen.
   =================================================================== */
.gp{ display: grid; gap: 26px; }
.gp__loading{ color: var(--ink-faint); font-family: var(--mono); }
.gp__head{ display: grid; gap: 4px; }
.gp__title{ margin: 0; font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.02em; }
.gp__when{ margin: 0; font-family: var(--mono); font-size: .95rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; }
.gp__h{ margin: 0 0 10px; font-family: var(--display); font-size: 1.25rem; letter-spacing: -.01em; }

.gp-clubs{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.gp-club{
  display: grid; gap: 12px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
}
.gp-club__head{ display: flex; align-items: center; gap: 12px; }
.gp-club__logo{ width: 40px; height: 40px; object-fit: contain; flex: none; }
.gp-club__who{ display: grid; min-width: 0; }
.gp-club__name{ font-family: var(--display); font-size: 1.2rem; font-weight: 750; color: var(--ink); text-decoration: none; }
.gp-club__name:hover{ color: var(--accent); }
.gp-club__where{ font-family: var(--mono); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.gp-club__facts{ display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
.gp-club__fact{
  display: grid; gap: 1px; padding: 7px 9px;
  background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
}
.gp-club__factValue{ font-family: var(--mono); font-size: 1.05rem; }
.gp-club__factLabel{ font-size: .84rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.gp-form{ display: flex; gap: 5px; }
.gp-form__pip{
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 6px;
  font-family: var(--mono); font-size: .82rem; font-weight: 700;
  border: 1px solid var(--line);
}
.gp-form__pip.is-won{ background: color-mix(in srgb, var(--pos) 22%, transparent); color: var(--ink); border-color: color-mix(in srgb, var(--pos) 45%, transparent); }
.gp-form__pip.is-lost{ background: var(--surface-2); color: var(--ink-faint); }

.gp-arms__row{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.gp-arm{
  display: grid; gap: 6px; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--accent-2); border-radius: var(--radius);
}
.gp-arm__club{ font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.gp-arm__name{ font-family: var(--display); font-size: 1.35rem; font-weight: 750; color: var(--ink); text-decoration: none; }
a.gp-arm__name:hover{ color: var(--accent); }
.gp-arm__line{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; }
.gp-arm__cell{ display: grid; gap: 1px; }
.gp-arm__value{ font-family: var(--mono); font-size: 1.1rem; }
.gp-arm__label{ font-size: .84rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.gp-arm__none{ margin: 0; color: var(--ink-faint); font-size: .95rem; }

.gp-watch{ display: grid; }
.gp-watch__item{
  display: grid; gap: 4px; padding: 14px 16px;
  border-left: 3px solid var(--accent-3);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}
.gp-watch__label{ font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-3); font-weight: 700; }
.gp-watch__text{ margin: 0; font-size: 1.04rem; line-height: 1.6; }

.gp-h2h__count{ margin: 0 0 10px; font-family: var(--mono); font-size: 1rem; }
.gp-h2h__list{ display: grid; gap: 6px; }
.gp-h2h__row{
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 9px 12px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); text-decoration: none;
}
.gp-h2h__row:hover{ border-color: var(--accent-line); }
.gp-h2h__date{ font-family: var(--mono); font-size: .88rem; color: var(--ink-faint); }
.gp-h2h__line{ font-size: 1rem; }

.gp-lineups__row{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.gp-lineup{ padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.gp-lineup__title{ margin: 0 0 8px; font-size: 1rem; }
.gp-lineup__list{ margin: 0; padding-left: 20px; display: grid; gap: 5px; }
.gp-lineup__row{ display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; }
.gp-lineup__pos{ font-family: var(--mono); font-size: .82rem; color: var(--accent-2); }
.gp-lineup__name{ font-size: 1rem; }
.gp-lineup__stat{ font-family: var(--mono); font-size: .84rem; color: var(--ink-faint); white-space: nowrap; }

/* ===================================================================
   COLLEGE: A CREST, AND THE FORMAT EXPLAINED BEFORE THE DATA

   Two complaints, one root. Every college page is names in a column,
   which is the hardest kind of page to scan, and the postseason format
   is the least self-explanatory in American sport, so a table of
   sixteen seeds and sixteen regionals reads as noise until somebody
   says what a seed buys and what a regional is.
   =================================================================== */
.cb-crest{
  display: inline-grid;
  place-items: center;
  flex: none;
  vertical-align: middle;
  line-height: 0;
}
.cb-crest svg{ width: 100%; height: 100%; display: block; }
.cb-crest__sr{
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.cb-how{
  margin: 22px 0 8px;
  padding: clamp(18px, 2.4vw, 26px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--college, var(--accent-2));
  border-radius: var(--radius-lg);
}
.cb-how__title{ margin: 0 0 4px; font-family: var(--display); font-size: clamp(1.4rem, 2.6vw, 1.9rem); letter-spacing: -.02em; }
.cb-how__lead{ margin: 0 0 18px; font-size: 1.08rem; color: var(--ink-soft); max-width: 70ch; }
.cb-how__flow{ list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cb-how__step{
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.cb-how__num{
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  font-family: var(--mono); font-weight: 700; font-size: 1.05rem;
  background: var(--college-soft, var(--accent-soft));
  color: var(--ink);
  border: 1px solid var(--line);
}
.cb-how__body{ display: grid; gap: 4px; min-width: 0; }
.cb-how__head{ display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cb-how__round{ margin: 0; font-family: var(--display); font-size: 1.2rem; letter-spacing: -.01em; }
.cb-how__count{ font-family: var(--mono); font-size: .92rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; }
.cb-how__format{ margin: 0; font-weight: 650; color: var(--college, var(--accent-2)); font-size: 1rem; }
.cb-how__text{ margin: 2px 0 0; font-size: 1.04rem; line-height: 1.6; max-width: 78ch; }

/* The seed row: a crest, the number, the name, and a tag when it got there. */
.cb-seeds__what{ margin: 2px 0 12px; font-size: 1.02rem; line-height: 1.6; color: var(--ink-soft); max-width: 76ch; }
.cb-seed{ display: inline-flex; align-items: center; gap: 8px; }
.cb-seed__tag{
  font-family: var(--mono); font-size: .84rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 999px;
  background: var(--accent-soft); color: var(--ink);
}
.cb-member{ font-size: .95rem; padding: 4px 10px; color: var(--ink); }

/* The school's own mark, laid over the drawn crest. The crest is what shows
   until the image arrives and what stays if it never does. */
.cb-crest{ position: relative; }
.cb-crest__logo{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
}
.cb-crest.has-logo .cb-crest__logo{ opacity: 1; }
.cb-crest.has-logo svg{ visibility: hidden; }

/* The school's mark on its own page. The hero lays its own children out in a
   column, so the crest is taken out of that flow and set in the corner rather
   than turned into a fourth line of it. */
.sechero--withcrest{ padding-right: clamp(20px, 12vw, 150px); }
.cb-teamcrest{
  position: absolute;
  top: clamp(18px, 3vw, 34px);
  right: clamp(18px, 3vw, 34px);
  z-index: 1;
}
@media (max-width: 620px){
  .sechero--withcrest{ padding-right: clamp(20px, 4vw, 44px); }
  /* Relative, not static: the logo inside is laid over the crest, and a
     static crest sends it out to fill the whole header. */
  .cb-teamcrest{ position: relative; top: auto; right: auto; margin-bottom: 12px; justify-self: start; }
}

/* Which model in the line it actually is, and when the price was read. */
.batcard__edition{ font-size: .86rem; color: var(--ink-faint); font-family: var(--mono); letter-spacing: .02em; }
.batcard__checked{ margin: 4px 0 0; font-size: .8rem; color: var(--ink-faint); line-height: 1.35; }

/* The league's badge, or its wordmark drawn in its own colors. Both are the
   same shape and the same height, so a page of them reads as one set. */
.cb-confbadge{
  position: relative;
  display: inline-grid;
  place-items: center;
  padding: 0 12px;
  min-width: 62px;
  border-radius: 8px;
  background: var(--conf-a);
  border: 1px solid color-mix(in srgb, var(--conf-b) 60%, transparent);
  overflow: hidden;
  vertical-align: middle;
}
.cb-confbadge__word{
  font-family: var(--display);
  font-weight: 800;
  font-size: .92rem;
  letter-spacing: -.01em;
  line-height: 1;
  white-space: nowrap;
  /* The league's second color is usually white or a light metallic, which is
     what its own wordmark is set in. Where it is not light enough to read,
     the mix lifts it rather than leaving a badge nobody can make out. */
  color: color-mix(in srgb, var(--conf-b) 78%, #ffffff);
}
.cb-confbadge__logo{
  position: absolute;
  inset: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  object-fit: contain;
  opacity: 0;
}
/* With the real mark the badge is the mark: a light plate just big enough to
   hold it, because a league logo drawn for white paper disappears on this
   site's ground. */
.cb-confbadge.has-logo{
  background: #f6f8f5;
  border-color: var(--line);
  padding: 4px 10px;
  min-width: 0;
  aspect-ratio: 1.9 / 1;
}
.cb-confbadge.has-logo .cb-confbadge__logo{ opacity: 1; }
.cb-confbadge.has-logo .cb-confbadge__word{ visibility: hidden; }

/* A LIGHT PLATE UNDER THE MARK. College marks are drawn for white paper: a
   navy longhorn or a black interlocking logo on this site's dark ground is a
   shape nobody can make out. The plate is what every scoreboard does, and it
   makes all three hundred of them read the same way. */
.cb-crest.has-logo{
  background: #f6f8f5;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px;
}
.cb-crest.has-logo .cb-crest__logo{ inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
.cb-teamconf{ position: absolute; right: clamp(18px, 3vw, 34px); bottom: clamp(18px, 3vw, 30px); z-index: 1; }
@media (max-width: 620px){ .cb-teamconf{ position: relative; right: auto; bottom: auto; top: auto; margin-top: 10px; justify-self: start; } }
/* The badge sits above the league's name on a conference card. The head is a
   flex COLUMN, so without this the badge stretches the width of the card and
   reads as a colored banner across the top rather than as a mark. */
.cb-conf__head .cb-confbadge{ margin-bottom: 8px; align-self: flex-start; }
.cb-teamconf--hero{ top: clamp(18px, 3vw, 34px); bottom: auto; }

/* Everybody who shares a record, by name, in place of the run-on line Little
   League publishes. Names wrap; nothing is clipped, because the whole point
   is that all of them can be seen. */
.llrec__shared-names{
  margin: 9px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-soft);
  font-weight: 600;
}
/* The member card is a column, so the mark sits above the name rather than
   stretching itself across the card. */
.cb-membercard .cb-crest{ margin-bottom: 6px; }

/* The 2026 breakdown: the same season read four ways, in boxes the same size
   as every other box on the page. */
.cb-split{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-auto-rows: 1fr;
  gap: 10px;
  margin: 14px 0 4px;
}
.cb-split__cell{
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.cb-split__label{
  font-family: var(--mono);
  font-size: .84rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cb-split__value{ font-family: var(--mono); font-size: 1.45rem; line-height: 1.15; }
.cb-split__note{ font-size: .82rem; color: var(--ink-faint); line-height: 1.35; }

/* ======================================================================
   THE DEFENSIVE CARD
   Your Team's Lineup Lab, second half. It sits under the batting order and
   it is built out of the same parts the rest of the travel section is: the
   panel, the pl-select, the cz buttons. What is new here is the card grid
   and the field, and both of them have to be readable at arm's length in a
   dugout, which is the only sizing rule that matters on this block.
   ================================================================== */

.gc-defense{ display: block; margin-top: 28px; }

.dp{ display: grid; gap: 20px; }

.dp-head{ display: grid; gap: 8px; }
.dp-head__title{
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  letter-spacing: -.015em;
  margin: 0;
}
.dp-head__blurb{ margin: 0; color: var(--ink-soft); max-width: 74ch; font-size: var(--step-0); }

.dp-note{ margin: 0; color: var(--ink-faint); font-size: var(--step-small); max-width: 80ch; line-height: 1.55; }
.dp-empty{
  margin: 0; padding: 18px 20px; text-align: center;
  color: var(--ink-soft); font-size: var(--step-0);
  background: var(--surface-2); border: 1px dashed var(--line); border-radius: var(--radius);
}

.dp-actions{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

/* ---- the roster ---------------------------------------------------- */

.dp-roster{ display: grid; gap: 8px; margin: 12px 0; }
.dp-roster__row{
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.1fr) auto;
  gap: 10px; align-items: center;
}
.dp-roster__num, .dp-roster__name{
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--step-0);
  min-width: 0;
}
.dp-roster__num{ font-family: var(--mono); font-weight: 700; text-align: center; }
.dp-roster__name:focus, .dp-roster__num:focus{ outline: 2px solid var(--accent-line); outline-offset: 1px; }
.dp-roster__where{
  font-family: var(--mono); font-size: var(--step-label);
  color: var(--ink-faint); letter-spacing: .02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dp-roster__drop{
  background: none; border: 1px solid var(--line-soft); color: var(--ink-faint);
  border-radius: var(--radius-sm); padding: 8px 12px; font: inherit;
  font-size: var(--step-label); cursor: pointer;
}
.dp-roster__drop:hover{ color: var(--neg); border-color: var(--neg); }

@media (max-width: 620px){
  .dp-roster__row{ grid-template-columns: 52px minmax(0, 1fr) auto; }
  .dp-roster__where{ grid-column: 2 / -1; }
}

/* ---- the depth chart ----------------------------------------------- */

.dp-chart{
  display: grid; gap: 12px; margin: 14px 0 4px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.dp-pos{
  display: grid; gap: 10px;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.dp-pos__head{ display: flex; align-items: center; gap: 11px; }
.dp-pos__badge{
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent-hot);
  font-family: var(--mono); font-weight: 700; font-size: 1.1rem;
}
.dp-pos__titles{ display: grid; min-width: 0; }
.dp-pos__name{ font-family: var(--display); font-weight: 700; font-size: 1.05rem; }
.dp-pos__slots{ display: grid; gap: 6px; }
.dp-pos__hint{ margin: 0; font-size: var(--step-label); color: var(--ink-faint); }

.dp-slot{ display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 8px; align-items: center; }
.dp-slot__rank{ font-family: var(--mono); font-size: var(--step-label); color: var(--ink-faint); }
.dp-slot__sel{ min-width: 0; width: 100%; padding: 7px 10px; }

/* ---- the pitching plan --------------------------------------------- */

/* An outing, not an inning. "Jack goes three" is one row, which is how it is
   said out loud and the only shape that cannot produce a pitcher leaving the
   mound and coming back. */
.dp-plan{ display: grid; gap: 8px; margin: 14px 0 4px; }
.dp-stint{
  display: grid;
  grid-template-columns: minmax(120px, 1.1fr) auto minmax(74px, .5fr) auto minmax(104px, .7fr) minmax(0, 1.8fr) auto;
  gap: 9px; align-items: center;
  padding: 9px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}
.dp-stint__verb{ font-size: var(--step-small); color: var(--ink-faint); white-space: nowrap; }
.dp-stint__who, .dp-stint__n, .dp-stint__at{ min-width: 0; width: 100%; padding: 7px 10px; }
.dp-stint__when{ font-size: var(--step-small); color: var(--ink-faint); }
.dp-plan__short{
  margin: 10px 0 0; font-size: var(--step-small); color: var(--accent-2);
}
@media (max-width: 860px){
  .dp-stint{ grid-template-columns: minmax(0, 1fr) auto minmax(0, .7fr) auto minmax(0, .9fr); }
  .dp-stint__when{ grid-column: 1 / -1; }
  .dp-stint .dp-roster__drop{ grid-column: 1 / -1; justify-self: start; }
}

/* The innings across the top of the game, so a hole in the plan is something
   you see rather than something you work out. */
.dp-cover{ display: grid; gap: 8px; margin-top: 12px; }
.dp-cover__strip{ display: flex; flex-wrap: wrap; gap: 6px; }
.dp-cover__cell{
  display: grid; gap: 1px; flex: 1 1 86px;
  padding: 7px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}
.dp-cover__cell.is-empty{ background: none; border-style: dashed; border-color: var(--accent-2); }
.dp-cover__inn{ font-family: var(--mono); font-size: var(--step-label); color: var(--accent-hot); }
.dp-cover__who{ font-size: var(--step-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-cover__cell.is-empty .dp-cover__who{ color: var(--ink-faint); }

/* ---- the Pitch Planner tie-in --------------------------------------- */

.dp-planner{
  display: grid; gap: 12px;
  padding: 14px 16px; margin: 12px 0 16px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-left: 4px solid var(--accent-2);
  border-radius: var(--radius);
}
.dp-planner__head{ display: flex; flex-wrap: wrap; gap: 14px; align-items: end; justify-content: space-between; }
.dp-planner__title{ font-family: var(--display); font-weight: 700; font-size: 1.02rem; }
.dp-planner__sent{ margin: 0; font-size: var(--step-small); color: var(--accent-3); }

.dp-arms{ display: flex; flex-wrap: wrap; gap: 8px; }
.dp-arm{
  display: grid; gap: 1px;
  padding: 7px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}
.dp-arm__name{ font-size: var(--step-small); font-weight: 600; }
.dp-arm__state{ font-family: var(--mono); font-size: var(--step-label); color: var(--ink-faint); }
.dp-arm.is-available{ border-color: var(--accent-3); }
.dp-arm.is-available .dp-arm__state{ color: var(--accent-3); }
.dp-arm__use{ margin-top: 5px; padding: 5px 8px; min-width: 0; font-size: var(--step-label); }
.dp-arm__when{ font-family: var(--mono); font-size: var(--step-label); color: var(--accent-hot); margin-top: 3px; }
.dp-arm.is-in{ border-color: var(--accent); background: var(--accent-soft); }
.dp-arm.is-rest{ opacity: .72; }
.dp-arm.is-rest .dp-arm__state, .dp-arm.is-done .dp-arm__state{ color: var(--neg); }

/* ---- settings ------------------------------------------------------- */

.dp-settings{
  display: grid; gap: 12px; margin: 12px 0 16px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.dp-rulenote{
  display: grid; gap: 9px;
  padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
}
.dp-rulenote__title{ margin: 0; font-family: var(--display); font-size: 1.02rem; font-weight: 700; }
.dp-rulelist{ margin: 0; padding-left: 20px; display: grid; gap: 5px; }
.dp-rulelist__item{ color: var(--ink-soft); font-size: var(--step-small); line-height: 1.5; }

/* ---- the headline numbers ------------------------------------------ */

.dp-results{ display: grid; gap: 20px; }
.dp-stripwrap{ display: grid; gap: 10px; }
.dp-strip{ display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.dp-tile{
  display: grid; gap: 3px;
  padding: 14px 16px;
  background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--radius);
}
.dp-tile__value{ font-family: var(--mono); font-weight: 700; font-size: 2rem; line-height: 1; color: var(--accent-hot); }
.dp-tile.is-down .dp-tile__value{ color: var(--neg); }
.dp-tile__label{ font-size: var(--step-label); color: var(--ink-faint); line-height: 1.35; }

/* ---- the card ------------------------------------------------------- */

.dp-grid{
  display: grid; gap: 4px;
  margin: 12px 0;
  overflow-x: auto;
}
.dp-grid__row{
  display: grid;
  grid-template-columns: minmax(120px, 1.6fr) repeat(var(--dp-cols), minmax(46px, 1fr)) 46px;
  gap: 4px; align-items: stretch;
  min-width: 460px;
}
.dp-grid__name{
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  font-size: var(--step-small);
  background: var(--surface-2); border-radius: var(--radius-sm);
  overflow: hidden;
}
.dp-grid__num{ font-family: var(--mono); font-weight: 700; color: var(--ink-faint); min-width: 18px; }
.dp-grid__who{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-grid__cell{
  display: grid; place-items: center;
  padding: 7px 4px;
  font-family: var(--mono); font-weight: 700; font-size: 1rem;
  background: var(--surface-3); color: var(--ink);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.dp-grid__cell.is-sit{ background: transparent; border: 1px dashed var(--line-soft); color: var(--ink-faint); font-weight: 500; }
.dp-grid__cell.is-p{ background: var(--accent); color: var(--accent-ink); }
.dp-grid__cell.is-c{ background: var(--accent-2); color: #2a2100; }
.dp-grid__cell.is-head{
  background: none; color: var(--ink-faint); cursor: default;
  font-size: var(--step-label); padding-bottom: 2px;
}
.dp-grid__total{
  display: grid; place-items: center;
  font-family: var(--mono); font-weight: 700;
  color: var(--ink-faint); font-size: var(--step-small);
}
.dp-grid__row.is-head .dp-grid__name{ background: none; color: var(--ink-faint); font-size: var(--step-label); }

/* ---- the field ------------------------------------------------------ */

.dp-innings{ display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.dp-inning{
  display: grid; gap: 2px; text-align: left;
  padding: 8px 14px;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); color: var(--ink-soft);
  font: inherit; cursor: pointer;
}
.dp-inning:hover{ border-color: var(--accent-line); }
.dp-inning.is-on{ background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.dp-inning__n{ font-family: var(--mono); font-weight: 700; font-size: 1.02rem; }
.dp-inning__who{ font-size: var(--step-label); color: var(--ink-faint); }
.dp-inning.is-on .dp-inning__who{ color: var(--accent-hot); }

.dp-field{ max-width: 660px; margin: 0 auto; }
.dp-man__name{
  font-family: var(--mono); font-weight: 600; font-size: 15px;
  fill: var(--ink); paint-order: stroke;
  stroke: rgba(0,0,0,.55); stroke-width: 3.5px; stroke-linejoin: round;
}
.dp-man.is-moved .dp-man__ring{ stroke: var(--accent); stroke-width: 4px; }

/* A position with nobody legal in it. Drawn as a hole rather than filled with
   somebody the coach never put there, because that is the whole rule. */
.dp-hole__ring{
  fill: none; stroke: var(--neg); stroke-width: 2.5px;
  stroke-dasharray: 5 4;
}
.dp-hole__label{ fill: var(--neg); }
.dp-hole__name{ fill: var(--neg); }

.dp-inning__hole{
  font-family: var(--mono); font-size: var(--step-label);
  color: var(--neg); font-weight: 700;
}
.dp-grid__cell.is-head.is-short{ color: var(--neg); font-weight: 700; }

/* ---- what the plan costs -------------------------------------------- */

.dp-cost{ display: grid; gap: 10px; margin-top: 12px; }
.dp-cost__row{ display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: start; }
.dp-cost__inn{ font-family: var(--mono); font-weight: 700; font-size: 1.05rem; color: var(--accent-hot); padding-top: 1px; }
.dp-cost__body{ display: grid; gap: 6px; min-width: 0; }
.dp-cost__line{ display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: baseline; }
.dp-cost__who{ font-size: var(--step-0); }
.dp-cost__num{ font-family: var(--mono); font-size: var(--step-small); color: var(--ink-faint); }
.dp-cost__num.is-down{ color: var(--neg); }
.dp-cost__bar{ height: 7px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.dp-cost__fill{ display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.dp-cost__why{ margin: 0; font-size: var(--step-small); color: var(--ink-faint); }

/* ---- a different order ---------------------------------------------- */

.dp-alt{
  display: grid; gap: 10px;
  padding: 14px 16px; margin-top: 12px;
  background: var(--accent-3-soft);
  border: 1px solid var(--accent-3);
  border-radius: var(--radius);
}
.dp-alt__head{ display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.dp-alt__gain{ font-family: var(--mono); font-weight: 700; font-size: 1.5rem; color: var(--accent-3); }
.dp-alt__label{ font-size: var(--step-label); color: var(--ink-faint); }
.dp-alt__moves{ margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.dp-alt__move{ font-size: var(--step-small); color: var(--ink-soft); }
.dp-alt__why{ margin: 0; font-size: var(--step-small); color: var(--ink-faint); }
.dp-alt .cz-start{ justify-self: start; }

/* ---- the flags ------------------------------------------------------- */

.dp-flag{
  display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px;
  align-items: start;
  padding: 12px 14px; margin-top: 10px;
  background: var(--surface-2); border-left: 4px solid var(--line);
  border-radius: var(--radius-sm);
}
.dp-flag.is-block{ border-left-color: var(--neg); background: rgba(255,111,95,.1); }
.dp-flag.is-warn{ border-left-color: var(--accent-2); }
.dp-flag.is-note{ border-left-color: var(--line); }
.dp-flag__tag{
  font-family: var(--mono); font-weight: 700; font-size: var(--step-label);
  text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint);
}
.dp-flag.is-block .dp-flag__tag{ color: var(--neg); }
.dp-flag.is-warn .dp-flag__tag{ color: var(--accent-2); }
.dp-flag__text{ margin: 0; font-size: var(--step-small); color: var(--ink-soft); line-height: 1.55; }
@media (max-width: 620px){
  .dp-flag{ grid-template-columns: 1fr; gap: 5px; }
}

/* ---- innings in the field -------------------------------------------- */

.dp-time{ display: grid; gap: 3px; margin: 12px 0; overflow-x: auto; }
.dp-time__row{
  display: grid;
  grid-template-columns: minmax(120px, 1.5fr) 74px 66px minmax(140px, 2fr) 96px;
  gap: 8px; align-items: center;
  padding: 7px 10px;
  background: var(--surface-2); border-radius: var(--radius-sm);
  min-width: 520px;
}
.dp-time__row.is-head{ background: none; color: var(--ink-faint); font-size: var(--step-label); }
.dp-time__cell{ font-family: var(--mono); font-size: var(--step-small); }
.dp-time__name{ font-family: var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-time__where{ color: var(--ink-faint); letter-spacing: .02em; }

/* Printing a card is a real thing a coach does on a Friday night. */
@media print{
  .dp-head__blurb, .dp-note, .dp-chart, .dp-settings, .dp-rulenote,
  .dp-actions, .dp-innings, .dp-field, .dp-alt, .lu-judge{ display: none; }
  .dp-grid__cell{ border: 1px solid #999; background: none; color: #000; }
}
/* The 2026 line on a conference member card. */
.cb-membercard__rec{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  margin-top: 4px; font-family: var(--mono); font-size: .84rem; color: var(--ink-soft);
}
.cb-membercard__conf, .cb-membercard__rpi{ color: var(--ink-faint); font-size: .84rem; }

/* ======================================================================
   THE NEWS DESK  (/mlb/news)
   ----------------------------------------------------------------------
   A front page rather than a feed. Three zones, and they are deliberately
   not interchangeable: a ledger strip that says what the whole slate came
   to, a lead that takes the top of the screen, a tier of cards under it,
   and then the wire, set as a list because it is somebody else's work.

   THE RULE THIS SECTION FOLLOWS. Everything above the wire is this site
   talking: the site's faces, the site's colors, headline sizes. Everything
   in the wire is a filed headline with an outlet's name on it and a link
   out. The two are never allowed to look alike, because a reader has to be
   able to tell what was computed here from what was reported elsewhere
   without being told.

   The club colors come off the data, not out of this file: a scoreline
   sets --away and --home, a wire item sets --club, and the rules below use
   whatever was set.
   ====================================================================== */

.body--news .section-page{ max-width: 1420px; }

.nw-loading{
  margin: 28px 0; font-family: var(--display); font-size: 1.15rem;
  color: var(--ink-faint); letter-spacing: -.01em;
}

/* ---------------------------------------------------------- the ledger */

.nw-ledger{
  margin-top: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, var(--lights), transparent 42%),
    var(--surface);
  overflow: hidden;
}
.nw-ledger__head{
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 18px clamp(16px, 2.4vw, 26px) 0;
}
.nw-ledger__eyebrow{
  margin: 0; font-size: .84rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
}
.nw-ledger__date{
  margin: 0; font-family: var(--display); font-weight: 800;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem); letter-spacing: -.025em;
}
/* The scoreboard row. Tabular figures and a bulb-colored number, because
   this is the one element on the page that is literally a scoreboard. */
.nw-ledger__grid{
  display: grid; gap: 1px; margin: 16px 0 0;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  background: var(--line-soft);
  border-top: 1px solid var(--line-soft);
}
.nw-ledger__cell{
  display: grid; gap: 2px; justify-items: center;
  padding: 15px 8px 14px; background: var(--surface);
}
.nw-ledger__n{
  font-family: var(--mono); font-weight: 700;
  font-size: clamp(1.7rem, 3.2vw, 2.35rem); line-height: 1;
  color: var(--bulb); font-variant-numeric: tabular-nums;
}
.nw-ledger__label{
  font-size: .82rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); text-align: center;
}

/* Last night's finals, as chips you can scan in one pass. */
.nw-scoreline{
  display: flex; gap: 10px; overflow-x: auto; padding: 14px clamp(16px, 2.4vw, 26px) 18px;
  border-top: 1px solid var(--line-soft); scrollbar-width: thin;
}
.nw-scoreline__game{
  flex: 0 0 auto; display: grid; gap: 3px; min-width: 148px;
  padding: 11px 13px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface-2);
  text-decoration: none; color: inherit;
  border-left: 4px solid var(--home);
  transition: border-color .16s ease, background .16s ease;
}
.nw-scoreline__game:hover{ background: var(--surface-3); }
.nw-scoreline__side{
  display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 8px;
  color: var(--ink-faint); font-weight: 700;
}
.nw-scoreline__side.is-winner{ color: var(--ink); }
.nw-scoreline__club{ font-size: .92rem; letter-spacing: .04em; }
.nw-scoreline__runs{
  font-family: var(--mono); font-size: 1.28rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.nw-scoreline__side.is-winner .nw-scoreline__runs{ color: var(--bulb); }
.nw-scoreline__flag{
  margin-top: 3px; font-size: .84rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--seam);
}

/* ------------------------------------------------------------ the lead */

.nw-lead{
  display: grid; gap: clamp(18px, 2.6vw, 34px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: start;
  margin-top: 22px; padding: clamp(22px, 3vw, 36px);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 140% at 0% 0%, var(--accent-soft), transparent 55%),
    var(--surface);
  box-shadow: var(--shadow-warm);
}
@media (max-width: 980px){ .nw-lead{ grid-template-columns: 1fr; } }

.nw-lead__eyebrow{
  margin: 0 0 10px; font-size: .86rem; font-weight: 800; letter-spacing: .17em;
  text-transform: uppercase; color: var(--accent);
}
.nw-lead__headline{
  margin: 0; font-family: var(--display); font-weight: 800;
  font-size: clamp(2rem, 4.1vw, 3.15rem); line-height: 1.02;
  letter-spacing: -.035em; text-wrap: balance;
}
.nw-lead__deck{
  margin: 14px 0 0; font-family: var(--body);
  font-size: clamp(1.06rem, 1.5vw, 1.2rem);
  line-height: 1.6; color: var(--ink-soft); max-width: 58ch;
}
/* The number, given the room a number deserves when it is the story. */
.nw-lead__stat{
  display: flex; align-items: center; gap: 14px;
  margin: 20px 0 0; padding: 14px 18px;
  border-left: 4px solid var(--accent);
  background: var(--surface-2); border-radius: 0 var(--radius) var(--radius) 0;
}
.nw-lead__statvalue{
  font-family: var(--mono); font-weight: 700; line-height: .9;
  font-size: clamp(2.6rem, 5vw, 3.6rem); color: var(--accent-hot);
  font-variant-numeric: tabular-nums;
}
.nw-lead__statside{ display: grid; gap: 2px; }
.nw-lead__statunit{ font-weight: 800; font-size: 1.02rem; letter-spacing: -.01em; }
.nw-lead__statlabel{
  font-size: .84rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
}
.nw-lead__copy{ margin-top: 20px; display: grid; gap: 14px; }
.nw-lead__line{
  margin: 0; font-family: var(--body);
  font-size: clamp(1.1rem, 1.45vw, 1.22rem);
  line-height: 1.68; color: var(--ink-soft); max-width: 60ch;
  letter-spacing: -.003em;
}
/* The first line is what happened, in the words of the play itself. Set as an
   opening line rather than as a stat row: the same family as the headline,
   bigger than the copy under it, and never condensed. */
.nw-lead__line--say{
  font-family: var(--display); font-weight: 700;
  letter-spacing: -.02em; color: var(--ink);
  font-size: clamp(1.22rem, 1.8vw, 1.4rem); line-height: 1.35;
}
.nw-lead__art{ display: grid; gap: 12px; }
.nw-lead__final{
  display: flex; align-items: baseline; gap: 12px;
  padding: 12px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface-2);
}
.nw-lead__finalword{
  font-size: .8rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint);
}
.nw-lead__finalline{ font-family: var(--mono); font-weight: 700; font-size: 1.1rem; }

/* ----------------------------------------------------------- the cards */

.nw-grid{
  display: grid; gap: 16px; margin-top: 20px;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}
.nw-card{
  display: flex; flex-direction: column; gap: 0;
  padding: clamp(18px, 2.2vw, 24px);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface);
  border-top: 3px solid var(--accent);
}
.nw-card__eyebrow{
  margin: 0 0 8px; font-size: .82rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
}
.nw-card__headline{
  margin: 0; font-family: var(--display); font-weight: 800;
  font-size: clamp(1.32rem, 2.1vw, 1.62rem); line-height: 1.1;
  letter-spacing: -.028em; text-wrap: balance;
}
.nw-card__deck{
  margin: 8px 0 0; font-family: var(--body); font-size: 1rem;
  color: var(--ink-faint); font-weight: 600; letter-spacing: 0;
}
.nw-card__stat{ display: flex; align-items: center; gap: 12px; margin: 14px 0 4px; }
.nw-card__statvalue{
  font-family: var(--mono); font-weight: 700; line-height: .9;
  font-size: clamp(2.1rem, 3.4vw, 2.6rem); color: var(--accent-hot);
  font-variant-numeric: tabular-nums;
}
.nw-card__statside{ display: grid; gap: 1px; }
.nw-card__statunit{ font-weight: 800; font-size: .98rem; }
.nw-card__statlabel{
  font-size: .8rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
}
.nw-card__copy{ margin-top: 14px; display: grid; gap: 11px; align-content: start; flex: 1 1 auto; }
.nw-card__line{
  margin: 0; font-family: var(--body); font-size: 1.08rem;
  line-height: 1.64; color: var(--ink-soft); letter-spacing: -.003em;
}
.nw-card__line--say{
  font-family: var(--display); font-weight: 700; letter-spacing: -.018em;
  color: var(--ink); font-size: 1.16rem; line-height: 1.38;
}

/* The way out of a card. Never blue, never underlined: a clay arrow that
   moves, which is how every other action on this site is drawn. */
.nw-go{
  align-self: start; display: inline-flex; align-items: center; gap: 9px;
  margin-top: 18px; padding: 10px 17px;
  border-radius: 999px; border: 1px solid var(--accent-line);
  background: var(--accent-soft); color: var(--accent-hot);
  font-weight: 800; font-size: .98rem; letter-spacing: .01em;
  text-decoration: none;
  transition: background .16s ease, transform .16s ease;
}
.nw-go:hover{ background: var(--accent); color: var(--accent-ink); transform: translateX(2px); }
.nw-go--small{ margin-top: 14px; padding: 8px 14px; font-size: .92rem; }
.nw-go__arrow{
  width: 15px; height: 2px; background: currentColor; position: relative; border-radius: 2px;
}
.nw-go__arrow::after{
  content: ""; position: absolute; right: -1px; top: -3px;
  width: 8px; height: 8px; border-top: 2px solid currentColor;
  border-right: 2px solid currentColor; transform: rotate(45deg); border-radius: 1px;
}

/* Who did it, with the league's photograph where there is one. */
.nw-people{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.nw-people__chip{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 15px 7px 7px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2);
  text-decoration: none; color: inherit;
}
a.nw-people__chip:hover{ border-color: var(--accent-line); background: var(--surface-3); }
.nw-people__text{ display: grid; gap: 1px; }
.nw-people__role{
  font-size: .84rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint);
}
.nw-people__name{ font-weight: 700; font-size: 1rem; letter-spacing: -.01em; }

.nw-face{
  display: block; width: 42px; height: 42px; flex: 0 0 auto;
  border-radius: 999px; overflow: hidden;
  background: var(--surface-3); border: 1px solid var(--line);
}
.nw-face img{ width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.nw-face.is-blank img{ display: none; }

.nw-crest{ display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.nw-crest img{ width: 100%; height: 100%; object-fit: contain; display: block; }
.nw-crest--xs{ width: 20px; height: 20px; }
.nw-crest--sm{ width: 26px; height: 26px; }
.nw-crest--md{ width: 34px; height: 34px; }

/* The byline on a computed story: a seam-red stitch, then the sentence. */
.nw-stamp{
  display: flex; align-items: center; gap: 10px; margin: 18px 0 0;
  font-family: var(--body); font-size: .95rem; font-weight: 500;
  letter-spacing: 0; color: var(--ink-faint);
}
.nw-stamp__mark{
  width: 22px; height: 3px; border-radius: 2px; background: var(--seam);
  box-shadow: 0 0 0 3px var(--seam-soft);
}

/* --------------------------------------------------------- the figures */

.nw-chart__frame{
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-2); padding: 12px 12px 10px;
}
.nw-chart{ width: 100%; height: clamp(180px, 26vw, 260px); display: block; }
.nw-chart__line{ stroke: var(--chalk); stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.nw-chart__mid{ stroke: var(--chalk-soft); stroke-width: 1.5; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.nw-chart__inning{ stroke: var(--line-soft); stroke-width: 1; vector-effect: non-scaling-stroke; }
.nw-chart__mark{ stroke: var(--bulb); stroke-width: 2; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.nw-chart__dot{ fill: var(--bulb); stroke: var(--accent-ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.nw-chart__tick{
  fill: var(--ink-faint); font-family: var(--mono); font-size: 20px; font-weight: 700;
}
.nw-chart__legend{
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 9px;
}
.nw-chart__key{ display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: .92rem; }
.nw-chart__swatch{ width: 15px; height: 15px; border-radius: 4px; background: var(--key); }
.nw-chart__note{ font-family: var(--body); font-size: .95rem; color: var(--ink-faint); font-weight: 500; }

.nw-fig__frame{ margin-top: 14px; }
.nw-fig{ width: 100%; height: auto; display: block; }
.nw-fig__track{ fill: var(--surface-3); }
.nw-fig__fill{ fill: var(--accent); opacity: .75; }
.nw-fig__tick{ stroke: var(--chalk-soft); stroke-width: 2; }
.nw-fig__best{ stroke: var(--bulb); stroke-width: 2; stroke-dasharray: 4 3; }
.nw-fig__ball{ fill: var(--ball-face, #f7fdf5); stroke: var(--seam); stroke-width: 3; }
.nw-fig__ground{ stroke: var(--grass-lit); stroke-width: 3; }
.nw-fig__arc{ stroke: var(--accent-hot); stroke-width: 3; stroke-dasharray: 7 6; stroke-linecap: round; }
.nw-fig__wall{ opacity: .95; }
.nw-fig__walltop{ fill: var(--chalk); opacity: .9; }
.nw-fig__value{ fill: var(--ink); font-family: var(--mono); font-size: 36px; font-weight: 700; }
.nw-fig__ticklabel{ fill: var(--ink-soft); font-family: var(--mono); font-size: 23px; font-weight: 700; }
.nw-fig__ticknote{ fill: var(--ink-faint); font-family: var(--mono); font-size: 20px; font-weight: 600; }
.nw-fig__bestlabel{ fill: var(--bulb); font-family: var(--mono); font-size: 20px; font-weight: 700; }
.nw-fig__caption{
  margin: 9px 0 0; font-family: var(--body); font-size: .96rem;
  line-height: 1.55; color: var(--ink-faint); font-weight: 500;
}

.nw-bands{ margin-top: 14px; display: grid; gap: 8px; }
.nw-bands__row{ display: grid; grid-template-columns: 56px 1fr 76px; align-items: center; gap: 10px; }
.nw-bands__at{ font-family: var(--mono); font-weight: 700; font-size: 1.02rem; color: var(--ink-soft); }
.nw-bands__rail{ height: 16px; border-radius: 8px; background: var(--line-soft); overflow: hidden; }
.nw-bands__fill{ display: block; height: 100%; background: var(--line); border-radius: 8px; }
.nw-bands__fill.is-cleared{ background: var(--accent); }
.nw-bands__n{
  font-family: var(--mono); font-weight: 700; font-size: .98rem;
  text-align: right; color: var(--ink-faint); font-variant-numeric: tabular-nums;
}

.nw-arsenal{ margin-top: 14px; display: grid; gap: 12px; }
.nw-arsenal__head{ display: flex; align-items: baseline; gap: 10px; }
.nw-arsenal__name{ font-weight: 800; font-size: 1.02rem; letter-spacing: -.01em; }
.nw-arsenal__mph{ font-family: var(--mono); font-size: .92rem; color: var(--ink-faint); font-weight: 600; }
.nw-arsenal__rail{
  display: block; height: 18px; margin-top: 5px; border-radius: 9px;
  background: var(--line-soft); overflow: hidden; min-width: 12%;
}
.nw-arsenal__miss{ display: block; height: 100%; background: var(--accent); border-radius: 9px; }
.nw-arsenal__n{
  display: block; margin-top: 4px; font-family: var(--mono);
  font-size: .9rem; color: var(--ink-faint); font-weight: 600;
}

.nw-ladder{ margin-top: 14px; display: grid; gap: 7px; }
.nw-ladder__row{
  display: grid; grid-template-columns: 26px minmax(84px, 1fr) minmax(60px, 1.5fr) 54px 74px;
  align-items: center; gap: 10px; padding: 7px 10px;
  border-radius: var(--radius-sm); background: var(--surface-2);
  text-decoration: none; color: inherit;
  border-left: 3px solid var(--club);
}
.nw-ladder__row:hover{ background: var(--surface-3); }
.nw-ladder__name{ font-weight: 700; font-size: .98rem; }
.nw-ladder__rail{ height: 12px; border-radius: 6px; background: var(--line-soft); overflow: hidden; }
.nw-ladder__fill{ display: block; height: 100%; background: var(--club); border-radius: 6px; }
.nw-ladder__rec{
  font-family: var(--mono); font-weight: 700; font-size: .98rem;
  font-variant-numeric: tabular-nums;
}
.nw-ladder__back{ font-size: .84rem; font-weight: 700; color: var(--ink-faint); text-align: right; }
.nw-ladder__row:first-child .nw-ladder__back{ color: var(--bulb); }

.nw-miles{ margin-top: 14px; display: grid; gap: 10px; }
.nw-miles__row{
  display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: center;
  padding: 9px 11px; border-radius: var(--radius-sm);
  background: var(--surface-2); text-decoration: none; color: inherit;
}
.nw-miles__row:hover{ background: var(--surface-3); }
.nw-miles__body{ display: grid; gap: 5px; min-width: 0; }
.nw-miles__head{ display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.nw-miles__name{ font-weight: 800; font-size: 1rem; letter-spacing: -.01em; }
.nw-miles__mark{ font-family: var(--mono); font-size: .9rem; color: var(--ink-faint); font-weight: 700; }
.nw-miles__rail{ height: 10px; border-radius: 5px; background: var(--line-soft); overflow: hidden; }
.nw-miles__fill{
  display: block; height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, var(--accent), var(--bulb));
}
.nw-miles__need{ font-family: var(--mono); font-size: .88rem; color: var(--ink-faint); font-weight: 600; }

.nw-form{ margin-top: 14px; display: grid; gap: 5px; }
.nw-form__row{
  display: grid; grid-template-columns: 26px minmax(80px, 1fr) auto 48px;
  align-items: center; gap: 10px; padding: 6px 10px;
  border-radius: var(--radius-sm); background: var(--surface-2);
  text-decoration: none; color: inherit; border-left: 3px solid var(--club);
}
.nw-form__row:hover{ background: var(--surface-3); }
.nw-form__name{ font-weight: 700; font-size: .96rem; }
.nw-form__dots{ display: inline-flex; gap: 4px; }
.nw-form__dot{ width: 11px; height: 11px; border-radius: 3px; display: block; }
.nw-form__dot.is-win{ background: var(--pos); }
.nw-form__dot.is-loss{ background: var(--neg); opacity: .55; }
.nw-form__rec{
  font-family: var(--mono); font-weight: 700; font-size: .96rem;
  text-align: right; font-variant-numeric: tabular-nums;
}
.nw-form__split{
  margin: 9px 0 2px; font-size: .8rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint);
}
.nw-form__row.is-cold .nw-form__rec{ color: var(--neg); }

/* ------------------------------------------------------------ the wire */

.nw-wire{
  margin-top: 34px; padding-top: 24px;
  border-top: 3px double var(--line);
}
.nw-wire__head{ display: grid; gap: 6px; margin-bottom: 18px; }
.nw-wire__title{
  margin: 0; font-family: var(--display); font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.03em;
}
.nw-wire__note{ margin: 0; font-family: var(--body); font-size: 1.02rem; color: var(--ink-faint); line-height: 1.6; max-width: 78ch; }
.nw-wire__grid{
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
}
.nw-wire__col{
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--bg-2); padding: 16px 16px 8px;
}
.nw-wire__colhead{ padding-bottom: 11px; border-bottom: 1px solid var(--line-soft); margin-bottom: 6px; }
.nw-wire__coltitle{
  margin: 0; font-family: var(--display); font-weight: 800;
  font-size: 1.18rem; letter-spacing: -.02em;
}
.nw-wire__colnote{ margin: 5px 0 0; font-family: var(--body); font-size: .96rem; color: var(--ink-faint); line-height: 1.5; }
.nw-wire__list{ list-style: none; margin: 0; padding: 0; }
.nw-wire__item{
  border-bottom: 1px solid var(--line-soft);
  border-left: 3px solid var(--club, var(--line));
  padding-left: 11px;
}
.nw-wire__item.is-league{ border-left-color: var(--accent-line); }
.nw-wire__item:last-child{ border-bottom: none; }
.nw-wire__link{
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 2px; text-decoration: none; color: inherit;
}
.nw-wire__link:hover .nw-wire__title{ color: var(--accent-hot); }
.nw-wire__art{
  flex: 0 0 auto; width: 78px; height: 52px; border-radius: 6px;
  overflow: hidden; background: var(--surface-3); display: block;
}
.nw-wire__art img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.nw-wire__text{ display: grid; gap: 5px; min-width: 0; }
.nw-wire__title{
  font-weight: 700; font-size: 1rem; line-height: 1.38;
  letter-spacing: -.01em; color: var(--ink);
  transition: color .14s ease;
}
.nw-wire__summary{
  font-size: .89rem; line-height: 1.45; color: var(--ink-faint);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nw-wire__meta{
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  font-size: .8rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint);
}
.nw-wire__club{ display: inline-flex; align-items: center; gap: 5px; color: var(--ink-soft); }
.nw-wire__outlet{ color: var(--accent); }
.nw-wire__when{ color: var(--ink-faint); }
.nw-wire__empty{ margin: 14px 2px 16px; font-size: .92rem; color: var(--ink-faint); line-height: 1.5; }

.nw-empty{
  margin-top: 26px; padding: clamp(22px, 3vw, 34px);
  border: 1px dashed var(--line); border-radius: var(--radius-lg);
  background: var(--surface);
}
.nw-empty__title{
  margin: 0 0 8px; font-family: var(--display); font-weight: 800;
  font-size: 1.5rem; letter-spacing: -.03em;
}
.nw-empty__note{ margin: 0; color: var(--ink-soft); line-height: 1.6; max-width: 70ch; }

@media (max-width: 620px){
  .nw-lead{ padding: 20px 16px; }
  .nw-ledger__grid{ grid-template-columns: repeat(3, 1fr); }
  .nw-ladder__row{ grid-template-columns: 24px 1fr 52px 64px; }
  .nw-ladder__rail{ display: none; }
  .nw-wire__art{ width: 62px; height: 44px; }
}

/* ===================================================================
   THE PITCH PANEL, SET LIKE THE REST OF THE SITE

   It was body text at body size in a box, which is what a chat window
   looks like, and Connor read it as one. Three changes and it reads as
   a page: the opening line takes the display face the rest of the site
   uses for a headline, the paragraphs get a measure and a line height
   somebody can actually read at, and every figure in the prose is set
   in the condensed face with tabular numerals, which is how numbers
   are set everywhere else here.
   =================================================================== */
.askanswer__lede{
  font-family: var(--display);
  font-size: clamp(1.16rem, 1.9vw, 1.34rem);
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0 0 .7rem;
  max-width: 46ch;
}
.askanswer__para{
  font-family: var(--body);
  font-size: 1.02rem;
  line-height: 1.66;
  color: var(--ink-soft);
  max-width: 68ch;
  margin: 0 0 .72rem;
}
.askanswer__para:last-child{ margin-bottom: 0; }
.askanswer__fig{
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink);
}
.askanswer__lede .askanswer__fig{ font-weight: 700; }

/* ===========================================================================
   BATTER'S EYE CARDS (Sept 11)

   Built the way a card is built rather than the way a dashboard is: a picture
   that fills the frame, a name band across the bottom you can read from the
   other side of a table, and a back you turn over for the numbers.

   THREE RULES GOVERN THIS BLOCK.

   The name is the biggest thing on the card. On a real card you know whose it
   is before you know anything else, and the ratings were fighting the name for
   that job, so the ratings went to the back.

   The rating is a color before it is a number. Steel, bronze, silver, gold,
   ice, prism, in that order. A binder sorts itself from four feet away.

   Nothing shiny crosses the picture. The foil lives in the border ring, masked
   to it, because a light sweeping over a man's face is a screensaver.
   ------------------------------------------------------------------------ */

.bec{
  --w: 300px;
  --ring: 10px;
  position: relative;
  width: var(--w);
  aspect-ratio: 5 / 7;
  perspective: 1400px;
  font-family: var(--body);
  color: var(--ink);
}
.bec__flip{
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
  cursor: pointer;
}
.bec.is-flipped .bec__flip{ transform: rotateY(180deg); }

.bec__side{
  position: absolute; inset: 0;
  backface-visibility: hidden;
  border-radius: 14px;
  padding: var(--ring);
  overflow: hidden;
}
.bec__side--back{ transform: rotateY(180deg); }

/* The ring of card stock. This is where the tier lives. */
.bec__side::before{
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0;
  background: var(--board);
  box-shadow: inset 0 0 0 1px var(--board-edge);
}
/* The foil sweep, masked to the ring so it never reaches the picture. */
.bec__side::after{
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1;
  background: linear-gradient(104deg, transparent 40%, var(--shine, transparent) 50%, transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: becSheen 5s ease-in-out infinite;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce){ .bec__foil::after{ animation: none; } }
.bec__inner{
  position: relative; z-index: 2;
  height: 100%; border-radius: 6px; overflow: hidden;
  background: #0B0C0D;
  box-shadow: 0 0 0 1px rgba(0,0,0,.75), 0 6px 18px rgba(0,0,0,.4);
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
}
/* Every box between the card and the text has to agree to be narrower than
   its own content, or a long club name or a big overall pushes straight off
   the edge and no amount of text-overflow saves it. */
.bec__inner > *, .bec__inner > * > *, .bec__band > *{ min-width: 0; }

/* ---------- the front ---------- */

.bec__art{ position: relative; overflow: hidden; background: color-mix(in srgb, var(--a) 70%, #000); }
.bec__art img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.bec__art::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.34) 0 16%, transparent 38%, transparent 62%, rgba(0,0,0,.82) 100%);
}
/* ---------- the refractor ----------

   A Topps chrome card is not a card with a searchlight going across it. It is
   a card printed on a prism: fine diagonal color that sits ON the photograph
   all the time, plus one slow highlight rolling over it. So this layer lives
   inside the picture and is turned off entirely below All-Star, and the type
   below it is never touched, because the one thing a card cannot do is make
   its own name hard to read.

   Strength climbs with the tier: an All-Star is a hint, an Immortal is
   obviously a different object from across the room. */

.bec__foil{ display: none; }
.bec--allstar .bec__foil,
.bec--mvp .bec__foil,
.bec--immortal .bec__foil{
  display: block;
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    repeating-linear-gradient(101deg,
      rgba(255,122,122,1) 0 3px, rgba(255,209,102,1) 3px 6px,
      rgba(143,227,136,1) 6px 9px, rgba(91,192,235,1) 9px 12px,
      rgba(167,139,250,1) 12px 15px, rgba(255,143,208,1) 15px 18px);
  mix-blend-mode: soft-light;
  opacity: .10;
}
.bec--mvp .bec__foil{ opacity: .16; }
.bec--immortal .bec__foil{ opacity: .24; }

/* The highlight that rolls over it. Kept to soft-light as well, so it lifts
   the picture rather than bleaching a stripe through the middle of a face. */
.bec--allstar .bec__foil::after,
.bec--mvp .bec__foil::after,
.bec--immortal .bec__foil::after{
  content: ""; position: absolute; inset: -20%;
  background: linear-gradient(100deg, transparent 36%, rgba(255,255,255,.55) 50%, transparent 64%);
  mix-blend-mode: soft-light;
  animation: becRoll 6.5s ease-in-out infinite;
}
.bec--immortal .bec__foil::after{ animation-duration: 5s; }

@keyframes becRoll{
  0%, 55% { transform: translateX(-118%); }
  100%    { transform: translateX(118%); }
}

/* The overall, on a home plate, in the color of its tier. */
.bec__ovr{
  position: absolute; top: 10px; left: 10px; z-index: 3;
  width: 56px; height: 56px; display: grid; place-items: center;
  clip-path: polygon(50% 0%, 100% 27%, 100% 73%, 50% 100%, 0% 73%, 0% 27%);
  background: var(--badge); color: var(--badge-ink);
  font-family: var(--mono); font-weight: 700; font-size: 2rem; line-height: 1;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
.bec__ovr span{ transform: translateY(1px); }
.bec__mark{ position: absolute; top: 11px; right: 11px; z-index: 3; width: 26px; height: 26px; opacity: .95; }
.bec__mark svg{ width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }

.bec__band{
  position: relative; z-index: 3; padding: 9px 12px 10px; min-width: 0; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--a) 88%, #000), #0A0B0C);
  border-top: 3px solid var(--badge);
}
.bec__name{
  margin: 0; font-family: var(--display); font-weight: 800;
  font-size: 1.62rem; line-height: .96; letter-spacing: -.028em;
  text-transform: uppercase; text-wrap: balance;
}
/* A long name shrinks instead of wrapping onto a second line and shoving the
   club and the year down into the tier bar. Set in the renderer, which is the
   only thing that can count characters. */
.bec__name--long{ font-size: 1.3rem; letter-spacing: -.032em; }
.bec__name--xlong{ font-size: 1.08rem; letter-spacing: -.034em; line-height: 1.02; }
.bec__meta{
  display: flex; align-items: baseline; gap: 7px; margin-top: 5px; min-width: 0;
  font-family: var(--mono); font-size: .82rem; letter-spacing: .05em; text-transform: uppercase;
}
.bec__pos{ padding: 1px 7px; border-radius: 3px; font-weight: 700; background: var(--badge); color: var(--badge-ink); }
.bec__club{
  color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; min-width: 0; flex: 1 1 auto;
}
/* The year never gives way. A club with a twenty letter name loses letters
   before a card loses the season it is a card of. */
.bec__yr{ font-weight: 700; color: var(--ink); flex: none; }
.bec__metaovr{ display: none; }

.bec__tierbar{
  position: relative; z-index: 3;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 5px 12px 6px; background: #07080A; min-width: 0; overflow: hidden;
  font-family: var(--mono); font-size: .84rem; letter-spacing: .16em; text-transform: uppercase;
}
.bec__tiername{ font-weight: 700; color: var(--badge); }
.bec__headline{ color: var(--ink-faint); letter-spacing: .04em; white-space: nowrap; flex: none; }
.bec__tiername{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- the back ---------- */

.bec__side--back .bec__inner{ grid-template-rows: auto 1fr auto; background: #101214; }
/* The picture is never allowed to collapse, however long the name is. */
.bec__side--front .bec__art{ min-height: 52%; }
.bec__bhead{
  padding: 10px 12px 8px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--a) 90%, #000), #0A0B0C);
  border-bottom: 3px solid var(--badge);
}
.bec__bname{ margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.18rem; line-height: 1; letter-spacing: -.02em; text-transform: uppercase; }
.bec__bsub{ margin: 4px 0 0; font-family: var(--mono); font-size: .84rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }

.bec__ratings{ padding: 9px 12px 4px; display: grid; gap: 7px; align-content: start; }
.bec__r{ display: grid; grid-template-columns: 1fr 26px; gap: 2px 8px; align-items: baseline; }
.bec__r-label{ font-family: var(--mono); font-size: .84rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.bec__r-val{ font-family: var(--mono); font-weight: 700; font-size: 1rem; text-align: right; font-variant-numeric: tabular-nums; }
.bec__r-bar{ grid-column: 1 / -1; height: 4px; border-radius: 3px; background: rgba(255,255,255,.09); overflow: hidden; }
.bec__r-bar i{ display: block; height: 100%; border-radius: 3px; background: var(--badge); }
.bec__r--hi .bec__r-val{ color: var(--pos); }
.bec__r--hi .bec__r-bar i{ background: var(--pos); }
.bec__r--lo .bec__r-val{ color: var(--ink-faint); }
.bec__r-label sup{ color: var(--badge); }

.bec__stats{
  margin: 0 12px; padding: 7px 0; border-top: 1px solid rgba(255,255,255,.10);
  display: flex; flex-wrap: wrap; gap: 2px 14px; font-family: var(--mono); font-size: .8rem;
}
.bec__stat b{ font-weight: 700; }
.bec__stat span{ color: var(--ink-faint); font-size: .84rem; letter-spacing: .08em; text-transform: uppercase; }
.bec__credit{ padding: 6px 12px 9px; background: #07080A; font-size: .84rem; line-height: 1.35; color: rgba(246,243,236,.4); }
.bec__credit a{ color: inherit; }

/* ---------- the six boards ---------- */

.bec--callup{
  --board: repeating-linear-gradient(45deg, #212326 0 2px, #1C1E21 2px 4px);
  --board-edge: rgba(255,255,255,.10);
  --badge: #9AA3AC; --badge-ink: #14171A; --shine: transparent;
}
.bec--regular{
  --board: linear-gradient(150deg, #C98B4B, #6E4520 34%, #2A1B0E 58%, #A9743C);
  --board-edge: rgba(255,200,150,.35);
  --badge: #C98B4B; --badge-ink: #1A1008; --shine: rgba(255,220,180,.28);
}
.bec--everyday{
  --board: repeating-linear-gradient(112deg, rgba(255,255,255,.10) 0 1px, transparent 1px 3px),
           linear-gradient(150deg, #D7DBE0, #6E7479 42%, #C3C8CE 70%, #4E5358);
  --board-edge: rgba(255,255,255,.45);
  --badge: #D2D7DC; --badge-ink: #15181B; --shine: rgba(255,255,255,.45);
}
.bec--allstar{
  --board: linear-gradient(150deg, #FFEBAE, #B08E36 32%, #4A3A14 56%, #EBCE75 80%, #7C6226);
  --board-edge: rgba(255,236,180,.65);
  --badge: #EFD07A; --badge-ink: #1A1406; --shine: rgba(255,244,200,.55);
}
.bec--mvp{
  --board: repeating-linear-gradient(118deg, rgba(255,255,255,.12) 0 2px, transparent 2px 5px),
           linear-gradient(150deg, #E6FBFF, #6FB6C9 26%, #123845 50%, #A9E6F2 74%, #2E6D7E);
  --board-edge: rgba(200,245,255,.7);
  --badge: #8FE0F0; --badge-ink: #06232B; --shine: rgba(230,252,255,.6);
}
.bec--immortal{
  --board: conic-gradient(from 205deg, #FF7A7A, #FFD166, #8FE388, #5BC0EB, #A78BFA, #FF8FD0, #FF7A7A);
  --board-edge: rgba(255,255,255,.8);
  --badge: #FFFFFF; --badge-ink: #16121C; --shine: rgba(255,255,255,.75);
}
.bec--immortal .bec__side::before{
  background: var(--board), radial-gradient(70% 50% at 30% 0%, rgba(255,255,255,.5), transparent 60%);
}
.bec--immortal .bec__ovr{ background: conic-gradient(from 205deg, #FF7A7A, #FFD166, #8FE388, #5BC0EB, #A78BFA, #FF8FD0, #FF7A7A); }
.bec--immortal .bec__tiername, .bec--immortal .bec__r-label sup{ color: #FFE9A8; }
.bec--immortal .bec__band{ border-top-color: #FFE9A8; }
.bec--immortal .bec__pos{ background: #FFE9A8; color: #16121C; }
.bec--immortal .bec__r-bar i{ background: linear-gradient(90deg, #5BC0EB, #A78BFA, #FF8FD0); }

@keyframes becSheen{
  0%, 58% { transform: translateX(-115%); }
  100%    { transform: translateX(115%); }
}
@media (prefers-reduced-motion: reduce){ .bec__side::after{ animation: none; } }

/* ---------- the binder ---------- */

.binder{ max-width: 1400px; margin: 0 auto; padding: 0 22px 60px; }
.binder__wall{ display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; justify-items: center; }
.binder__bar{ display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0 22px; }
.binder__count{ margin-left: auto; font-family: var(--mono); color: var(--ink-soft); letter-spacing: .05em; text-transform: uppercase; font-size: .84rem; }
.binder__more{ display: grid; place-items: center; margin: 28px 0; }

/* ===========================================================================
   THE NINE (Sept 11)

   Your team, standing on a field, made of the cards you own. Two rules.

   The cards ARE the graphic. A lineup screen that shows names in boxes with a
   little diamond beside it is a form. This one puts the card itself where the
   man stands, because the whole point of earning a card is seeing it somewhere
   that means something.

   The field is the one from Read the Play. Same drawing, same coordinates,
   same file, so a card standing at short stands exactly where the shortstop
   stands on every other page of this site.
   ------------------------------------------------------------------------ */

.nine{ max-width: 1560px; margin: 0 auto; padding: 0 22px 64px; }
.nine__layout{ display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
@media (max-width: 1040px){ .nine__layout{ grid-template-columns: minmax(0, 1fr); } }

.nine__scroll{ overflow-x: auto; overflow-y: hidden; border-radius: var(--radius); }
.nine__fieldwrap{
  position: relative; border-radius: var(--radius); overflow: hidden;
  min-width: 660px;
  background: var(--surface); border: 1px solid var(--line);
  /* The cards are sized off the field's own width, so a team reads the same on
     a phone as it does on a desk. Ten cards fit where nine did only if they
     are smaller, so the pitcher batting shrinks them. */
  container-type: inline-size;
  --nine-card: clamp(100px, 17cqw, 196px);
}
.nine__fieldwrap.has-pitcher{ --nine-card: clamp(88px, 14cqw, 166px); }
@container (max-width: 820px){
  .bec--mini .bec__yr{ display: none; }
}
.nine__field{ display: block; width: 100%; height: auto; }

/* A card standing at a position. Absolutely placed from the same coordinates
   the defense uses, then pulled up by half its own height so the card's feet
   are where the man's feet are. */
.nine__spot{
  position: absolute; transform: translate(-50%, -52%);
  display: grid; gap: 4px; justify-items: center;
  cursor: pointer;
}
.nine__spot .bec{ pointer-events: none; filter: drop-shadow(0 8px 14px rgba(0,0,0,.45)); }
.nine__spot:hover .bec{ filter: drop-shadow(0 12px 20px rgba(0,0,0,.55)); }
.nine__spot{ transition: transform .14s ease; }
.nine__spot:hover{ transform: translate(-50%, -56%); }
.nine__spot.is-open{ z-index: 20; }
.nine__poslabel{
  font-family: var(--mono); font-weight: 700; font-size: .84rem; letter-spacing: .1em;
  padding: 1px 8px; border-radius: 999px;
  background: rgba(6,10,8,.82); border: 1px solid var(--line);
  color: var(--ink);
}
.nine__spot.is-problem .nine__poslabel{ border-color: var(--neg); color: var(--neg); }

/* An empty position: a plate-shaped hole with the position on it. */
.nine__empty{
  width: var(--nine-card, 150px); aspect-ratio: 5 / 7; display: grid; place-items: center;
  border-radius: 8px; border: 2px dashed var(--line);
  background: rgba(6,10,8,.5);
  font-family: var(--mono); font-weight: 700; font-size: 1.5rem; color: var(--ink-faint);
  transition: border-color .14s ease, background .14s ease;
}
.nine__spot:hover .nine__empty{ border-color: var(--accent); color: var(--ink); background: rgba(6,10,8,.72); }

/* ---------- the card, small enough to stand on a field ---------- */

.bec--mini{ --w: var(--nine-card, 150px); --ring: 5px; }
.nine__pick .bec--mini{ --w: 156px; }
.bec--mini .bec__side{ border-radius: 8px; }
.bec--mini .bec__inner{ border-radius: 4px; }
/* The picture is the whole card at this size. Nothing sits on it. */
.bec--mini .bec__ovr{ display: none; }
.bec--mini .bec__metaovr{
  display: block; margin-left: auto; flex: none;
  font-family: var(--mono); font-weight: 700; line-height: 1;
  font-size: calc(var(--w) * .105);
  color: var(--badge);
}
.bec--mini .bec__yr{ color: var(--ink-faint); }
.bec--mini .bec__mark{ display: none; }
.bec--mini .bec__band{ padding: calc(var(--w) * .04) calc(var(--w) * .045) calc(var(--w) * .05); border-top-width: 2px; }
.bec--mini .bec__name{ font-size: calc(var(--w) * .115); letter-spacing: -.018em; line-height: 1.02; }
.bec--mini .bec__name--long{ font-size: calc(var(--w) * .098); letter-spacing: -.02em; }
/* A single long surname cannot wrap, so at this size it is allowed to break
   rather than run off the card. CHARLESTON is the one that found this. */
.bec--mini .bec__name--xlong{ font-size: calc(var(--w) * .076); letter-spacing: -.022em; overflow-wrap: anywhere; }
.bec--mini .bec__meta{ font-size: calc(var(--w) * .073); gap: calc(var(--w) * .035); margin-top: 4px; align-items: center; }
.bec--mini .bec__pos{ padding: 0 4px; border-radius: 2px; }
/* The club goes: at this size the position and the season are the only two
   facts that fit, and they are the two that matter on a field. */
.bec--mini .bec__club{ display: none; }
.bec--mini .bec__yr{ flex: none; }
.bec--mini .bec__tierbar{ display: none; }
.bec--mini .bec__foil::after{ animation-duration: 9s; }

/* ---------- the order ---------- */

.nine__side{ display: grid; gap: 16px; position: sticky; top: 16px; }
.nine__panel{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.nine__panel h2{ margin: 0 0 2px; font-size: 1.05rem; }
.nine__panel p{ margin: 0 0 10px; font-size: var(--step-small); color: var(--ink-soft); }

.nine__order{ display: grid; gap: 5px; counter-reset: bat; }
.nine__bat{
  display: grid; grid-template-columns: 20px 1fr auto auto; gap: 9px; align-items: center;
  padding: 6px 8px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line-soft);
  cursor: grab; user-select: none;
}
.nine__bat:active{ cursor: grabbing; }
.nine__bat.is-dragging{ opacity: .4; }
.nine__bat.is-over{ border-color: var(--accent); background: var(--accent-soft); }
.nine__bat__n{ font-family: var(--mono); font-weight: 700; color: var(--ink-faint); text-align: right; }
.nine__bat__who{ font-weight: 700; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nine__bat__pos{ font-family: var(--mono); font-size: .84rem; letter-spacing: .06em; color: var(--ink-faint); }
.nine__bat__ovr{ font-family: var(--mono); font-weight: 700; font-size: .95rem; }

.nine__problems{ display: grid; gap: 5px; margin-top: 4px; }
.nine__problem{ font-size: var(--step-small); color: var(--neg); }
.nine__ready{ font-size: var(--step-small); color: var(--pos); font-weight: 700; }
.nine__note{ font-size: var(--step-small); color: var(--ink-soft, inherit); line-height: 1.45; margin: 0 0 .6rem; }

/* ---------- picking somebody for a spot ---------- */

.nine__picker{
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: rgba(4,7,6,.74); backdrop-filter: blur(3px); padding: 22px;
}
.nine__pickbox{
  width: min(1080px, 100%); max-height: 86vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px 24px;
}
.nine__pickhead{ display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.nine__pickhead h2{ margin: 0; font-size: 1.3rem; }
.nine__pickhead p{ margin: 0; color: var(--ink-soft); font-size: var(--step-small); }
.nine__pickwall{ display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; justify-items: center; }
.nine__pick{ background: none; border: 0; padding: 0; cursor: pointer; display: grid; gap: 4px; justify-items: center; }
.nine__pick .bec{ transition: transform .14s ease; }
.nine__pick:hover .bec{ transform: translateY(-4px); }
.nine__pick--clear{ grid-column: 1 / -1; justify-self: start; }

/* ===========================================================================
   THE DUEL (Sept 11)

   Both halves of a game, played rather than watched. Two rules.

   The board is the same five by five in both halves, so the spot you learned
   to hit as a pitcher is the spot you learn to look for as a hitter. Pitching
   and hitting are the same picture from two sides, and the screen says so.

   Nothing moves that is not the ball. A game that animates its own furniture
   while a pitch is on the way is a game you cannot read in time.
   ------------------------------------------------------------------------ */

.body--duel .section-page{ max-width: 1420px; }
.du{ max-width: 1380px; margin: 0 auto; padding: 0 22px 64px; }

/* ---------- the scoreboard ---------- */

.du-board{
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 18px; margin-bottom: 18px;
}
.du-board__line{ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.du-board__side{ display: flex; align-items: baseline; gap: 12px; opacity: .55; }
.du-board__side:last-child{ justify-content: flex-end; }
.du-board__side--up{ opacity: 1; }
.du-board__who{ font-family: var(--mono); font-size: .84rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.du-board__runs{ font-family: var(--mono); font-weight: 700; font-size: 2.4rem; line-height: 1; font-variant-numeric: tabular-nums; }
.du-board__mid{ display: grid; justify-items: center; }
.du-board__inning{ font-family: var(--mono); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.du-board__of{ font-size: var(--step-label); color: var(--ink-faint); }

.du-board__state{ display: flex; gap: 26px; justify-content: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.du-count{ display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.du-count b{ font-size: 1.2rem; color: var(--ink); }
.du-outs, .du-diamond{ display: flex; gap: 4px; }
.du-outs i{ width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--line); }
.du-outs i.is-out{ background: var(--neg); border-color: var(--neg); }
.du-diamond i{ width: 10px; height: 10px; border: 1px solid var(--line); transform: rotate(45deg); }
.du-diamond i.is-on{ background: var(--accent); border-color: var(--accent); }

/* ---------- the stage ---------- */

.du-stage{ display: grid; grid-template-columns: 250px minmax(0, 1fr) 250px; gap: 22px; align-items: start; }
@media (max-width: 1080px){ .du-stage{ grid-template-columns: minmax(0, 1fr); } }

.du-side{
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; display: grid; gap: 10px; justify-items: center;
}
.du-side__title{ margin: 0; font-size: .8rem; font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); justify-self: start; }
.du-side .bec--mini{ --nine-card: 176px; }

.du-ratings{ display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
.du-rating{
  display: grid; justify-items: center; gap: 1px; padding: 5px 4px;
  background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
}
.du-rating b{ font-family: var(--mono); font-size: 1.1rem; }
.du-rating span{ font-size: .84rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.du-rating.is-hi b{ color: var(--pos); }
.du-rating.is-lo b{ color: var(--ink-faint); }

.du-note{ margin: 0; font-size: var(--step-small); color: var(--ink-soft); text-align: center; }
.du-middle{ display: grid; gap: 12px; justify-items: center; }
.du-prompt{ margin: 0; font-family: var(--display); font-size: 1.5rem; font-weight: 800; }
.du-hint{ margin: 0; font-size: var(--step-small); color: var(--ink-faint); max-width: 46ch; text-align: center; }

/* ---------- the arsenal ---------- */

.du-arsenal{ display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.du-pitch{
  padding: 8px 15px; border-radius: 999px; font: inherit; font-weight: 700;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line); cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.du-pitch:hover{ transform: translateY(-1px); border-color: var(--accent-line); }
.du-pitch.is-on{ background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ---------- the board ---------- */

/* THE BOARD IS DARK, AND THAT IS NOT A STYLE CHOICE. The thing a hitter picks
   the ball up against is the batter's eye: the dark screen in dead centre that
   the whole site is named after. Drawing the strike zone against it is the one
   background in baseball that exists so a white ball can be seen. It also
   means this board carries its own colour and does not wash out on a page
   whose ground happens to be pale. */
.du-zone{
  position: relative;
  width: min(420px, 86vw); aspect-ratio: 1;
  display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr);
  gap: 2px; padding: 2px;
  background: linear-gradient(180deg, #16211B, #0C1410);
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 6px 22px rgba(0,0,0,.55);
}
.du-zone.is-ghost{ opacity: .72; }
.du-cell{
  border: 0; border-radius: 3px; padding: 0;
  background: rgba(255,255,255,.035);
  transition: background .12s ease, box-shadow .12s ease;
}
.du-cell.is-strike{ background: rgba(255,255,255,.10); }
.du-cell.is-heart{ background: rgba(255,255,255,.16); }
.du-zone--live .du-cell{ cursor: crosshair; }
.du-zone--live .du-cell:hover{ background: rgba(226,124,58,.42); box-shadow: inset 0 0 0 2px #E27C3A; }
.du-cell.is-target{ box-shadow: inset 0 0 0 2px #E8C46A; }
/* The strike zone, drawn over the cells so its edge is one clean rectangle
   rather than nine borders that do not quite line up. */
.du-zone::after{
  content: ""; position: absolute; pointer-events: none;
  left: 20%; top: 20%; width: 60%; height: 60%;
  border: 2px solid rgba(255,255,255,.7); border-radius: 4px;
  box-shadow: 0 0 12px rgba(0,0,0,.5);
}
.du-ball{
  position: absolute; width: 20px; height: 20px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 34% 30%, #fff, #d8d2c6);
  box-shadow: 0 0 0 2px rgba(0,0,0,.35), 0 3px 10px rgba(0,0,0,.5);
  pointer-events: none; z-index: 3;
}
.du-ball--live{ width: 26px; height: 26px; }

/* ---------- standing in ---------- */

.du-timing{
  position: relative; width: min(420px, 86vw); height: 12px;
  background: #0C1410; border-radius: 999px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
}
.du-timing__window{ position: absolute; left: 72%; width: 16%; top: 0; bottom: 0; background: rgba(116,231,165,.38); border-left: 2px solid #74E7A5; border-right: 2px solid #74E7A5; }
.du-timing__marker{ position: absolute; top: -1px; bottom: -1px; width: 3px; left: 0; background: #F6F3EC; border-radius: 2px; box-shadow: 0 0 6px rgba(255,255,255,.6); }
.du-swing{ min-width: 190px; text-align: center; }
.du-swing.is-armed{ animation: duArm .9s ease-in-out infinite; }
@keyframes duArm{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce){ .du-swing.is-armed{ animation: none; } }

/* ---------- what just happened ---------- */

.du-last{ width: 100%; display: grid; gap: 4px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.du-last__result{ margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.15rem; }
.du-last__play{ margin: 0; font-size: var(--step-small); color: var(--accent-2); font-weight: 700; }

.du-levels{ display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.du-level{
  padding: 8px 16px; border-radius: 999px; font: inherit; font-weight: 700; cursor: pointer;
  background: var(--surface-2); color: var(--ink); border: 1px solid var(--line);
}
.du-level.is-on{ background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.du-log{ display: grid; gap: 3px; margin: 8px 0 12px; }
.du-log__line{ margin: 0; font-family: var(--mono); font-size: .86rem; color: var(--ink-soft); }

/* ---------------------------------------------------------------------------
   THE DUEL: WHAT IT WAS WORTH (Sept 11)

   Shown once, on the panel at the end of a game. Three figures and a line of
   plain English. It deliberately does not show the score again: the score is
   already the headline above it, and this block is about the part of the game
   the reader's own hands decided.
--------------------------------------------------------------------------- */
.du-earn{
  margin: 10px 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
}
.du-earn__row{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  text-align: center;
}
.du-earn__cell{ display: grid; gap: 2px; min-width: 0; }
.du-earn__n{
  font-family: var(--display, inherit);
  font-size: 1.6rem; line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.du-earn__label{
  font-size: .84rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft);
}
.du-earn__note{
  margin: 10px 0 0; font-size: .92rem; line-height: 1.45; color: var(--ink-soft);
}

/* The three card features on the Tools front, given the same top-edge tint the
   later features already carry so the tab does not read as two generations of
   card. */
.toolcard--bn{ border-top: 3px solid var(--gold, #C8A24A); }
.toolcard--nn{ border-top: 3px solid var(--accent); }
.toolcard--du{ border-top: 3px solid var(--accent-2); }

/* ===========================================================================
   SEPT 15: THE HEADER'S ACCOUNT ENTRY, THE PHONE MENU, THE FOOTER, AND THE
   ACCOUNT PAGE. Written as one block at the foot of the file so it lands
   after the theming layer and wins the cascade without !important.
   =========================================================================== */

/* ---- The account entry in the header ------------------------------------ */
.sitehead__me{
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  align-self: center; margin-left: 8px;
  padding: 7px 13px 7px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--ink-soft); text-decoration: none; font-weight: 650; font-size: .9rem;
  white-space: nowrap;
}
.sitehead__me svg{ width: 18px; height: 18px; color: var(--ink-faint); }
.sitehead__me:hover{ color: var(--ink); border-color: var(--accent-line); background: var(--surface); }
.sitehead__me.is-in{ border-color: var(--accent-line); color: var(--ink); }
.sitehead__me.is-in svg{ color: var(--accent); }
.sitehead__me--home{ margin-left: auto; }
.sitehead__me:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- The burger and the drawer ----------------------------------------- */
.sitehead__burger{
  display: none; flex: none; align-self: center; margin-left: 6px;
  width: 42px; height: 42px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface-2);
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.sitehead__burger span{ display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .18s ease, opacity .18s ease; }
.sitehead__burger.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.sitehead__burger.is-open span:nth-child(2){ opacity: 0; }
.sitehead__burger.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
.sitehead__burger:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

.drawer{
  position: fixed; inset: 0; z-index: 90;
  background: rgba(6, 14, 9, .62); backdrop-filter: blur(3px);
}
.drawer__sheet{
  position: absolute; top: 0; right: 0; bottom: 0; width: min(88vw, 380px);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg-2); border-left: 1px solid var(--line);
  padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  display: grid; gap: 14px; align-content: start;
  box-shadow: -18px 0 40px rgba(0,0,0,.35);
  animation: drawerIn .2s ease;
}
@keyframes drawerIn{ from{ transform: translateX(24px); opacity: 0; } to{ transform: none; opacity: 1; } }
.drawer__ask{ margin: 0; }
.drawer__askInput{
  width: 100%; padding: 12px 14px; border-radius: 12px; font: inherit; font-size: 1rem;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
}
.drawer__askInput:focus{ outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 4px var(--accent-soft); }
.drawer__group{ display: grid; gap: 4px; padding: 10px 0 12px; border-top: 1px solid var(--line-soft); }
.drawer__head{ display: grid; gap: 1px; text-decoration: none; color: var(--ink); padding: 6px 4px; border-radius: 8px; }
.drawer__head:focus-visible{ outline: 2px solid var(--accent); }
.drawer__label{ font-family: var(--display); font-weight: 800; font-size: 1.18rem; letter-spacing: -.02em; }
.drawer__blurb{ font-size: .86rem; color: var(--ink-faint); }
.drawer__group.is-here .drawer__label{ color: var(--accent); }
.drawer__list{ display: grid; gap: 2px; }
.drawer__item{
  display: block; padding: 9px 10px; border-radius: 10px;
  text-decoration: none; color: var(--ink-soft); font-size: .98rem; font-weight: 550;
}
.drawer__item:hover, .drawer__item:focus-visible{ background: var(--surface); color: var(--ink); outline: none; }
.drawer__group[data-section="mlb"] .drawer__head{ border-left: 3px solid var(--accent); padding-left: 10px; }
.drawer__group[data-section="littleleague"] .drawer__head{ border-left: 3px solid var(--accent-2); padding-left: 10px; }
.drawer__group[data-section="college"] .drawer__head{ border-left: 3px solid var(--college); padding-left: 10px; }
.drawer__group[data-section="travel"] .drawer__head{ border-left: 3px solid var(--accent-3); padding-left: 10px; }
.drawer__group[data-section="tools"] .drawer__head{ border-left: 3px solid #9B7DF0; padding-left: 10px; }
.drawer__me{
  display: block; text-align: center; padding: 13px 14px; border-radius: 12px;
  background: var(--accent); color: var(--accent-ink); font-weight: 700; text-decoration: none;
}
body.has-drawer{ overflow: hidden; }

@media (max-width: 940px){
  .sitehead{ flex-wrap: nowrap; align-items: center; }
  .sitehead__tabs{ display: none; }
  .sitehead__burger{ display: flex; margin-left: auto; }
  .sitehead__me{ margin-left: auto; }
  .sitehead__me + .sitehead__burger{ margin-left: 8px; }
  .sitehead__meText{ display: none; }
  .sitehead__me{ padding: 8px; width: 42px; height: 42px; justify-content: center; border-radius: 12px; gap: 0; }
  .sitehead__me svg{ width: 20px; height: 20px; }
  .sitehead__brand{ padding-right: 8px; min-width: 0; }
}
@media (min-width: 941px){
  .drawer{ display: none; }
}

/* ---- The footer -------------------------------------------------------- */
.sitefoot{
  margin-top: 56px; border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 70%, var(--bg-2));
  color: var(--ink-soft); font-size: .93rem;
}
.sitefoot__inner{
  max-width: 1400px; margin: 0 auto; padding: 34px clamp(14px, 3vw, 30px) 30px;
  display: grid; gap: 28px 32px; grid-template-columns: 1.5fr repeat(3, 1fr);
}
.sitefoot__brand{ display: grid; gap: 10px; align-content: start; }
.sitefoot__mark{ display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.sitefoot__mark .ballmark{ width: 30px; height: 30px; }
.sitefoot__word{ font-family: var(--display); font-weight: 800; font-size: 1.12rem; letter-spacing: -.03em; }
.sitefoot__line{ margin: 0; max-width: 40ch; color: var(--ink-faint); line-height: 1.5; }
.sitefoot__col{ display: grid; gap: 6px; align-content: start; }
.sitefoot__title{
  margin: 0 0 4px; font-size: .84rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint);
}
.sitefoot__col a{ color: var(--ink-soft); text-decoration: none; padding: 2px 0; }
.sitefoot__col a:hover{ color: var(--ink); }
.sitefoot__base{
  max-width: 1400px; margin: 0 auto; padding: 14px clamp(14px, 3vw, 30px) 26px;
  border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between;
  font-size: .84rem; color: var(--ink-faint);
}
.sitefoot__base p{ margin: 0; }
.sitefoot__base a{ color: inherit; text-decoration: none; }
.sitefoot__base a:hover{ color: var(--ink); }
@media (max-width: 900px){ .sitefoot__inner{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .sitefoot__inner{ grid-template-columns: 1fr; gap: 20px; } }

/* ---- The account page -------------------------------------------------- */
.acct{ width: 100%; max-width: 1400px; margin: 0 auto; padding: 22px clamp(14px, 3vw, 30px) 40px; }
.acct__grid{ display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 22px; align-items: start; margin-top: 22px; }
@media (max-width: 860px){ .acct__grid{ grid-template-columns: 1fr; } }
.acct__panel{
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px 22px 24px; display: grid; gap: 14px;
}
.acct__panel--why{ background: var(--surface-2); }
.acct__tabs{ display: flex; gap: 6px; padding: 4px; border-radius: 999px; background: var(--bg-2); width: max-content; max-width: 100%; }
.acct__tab{
  border: 0; background: none; color: var(--ink-faint); font: inherit; font-weight: 700; cursor: pointer;
  padding: 9px 18px; border-radius: 999px;
}
.acct__tab.is-on{ background: var(--accent); color: var(--accent-ink); }
.acct__tab:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.acct__title{ margin: 0; font-size: 1.5rem; }
.acct__lede{ margin: 0; color: var(--ink-soft); line-height: 1.55; }
.acct__form{ display: grid; gap: 12px; }
.acct__field{ display: grid; gap: 5px; }
.acct__field label{ font-size: .86rem; font-weight: 650; color: var(--ink-soft); letter-spacing: .01em; }
.acct__field input{
  width: 100%; padding: 12px 14px; border-radius: 12px; font: inherit; font-size: 1rem;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--ink);
}
.acct__field input:focus{ outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 4px var(--accent-soft); }
.acct__hint{ margin: 0; font-size: .84rem; color: var(--ink-faint); }
.acct__row{ display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.acct__go{
  border: 0; cursor: pointer; font: inherit; font-weight: 750; font-size: 1rem;
  padding: 12px 22px; border-radius: 999px; background: var(--accent); color: var(--accent-ink);
}
.acct__go:hover{ background: var(--accent-hot); }
.acct__go[disabled]{ opacity: .6; cursor: wait; }
.acct__quiet{
  border: 1px solid var(--line); cursor: pointer; font: inherit; font-weight: 650; font-size: .95rem;
  padding: 10px 18px; border-radius: 999px; background: var(--surface-2); color: var(--ink);
}
.acct__quiet:hover{ border-color: var(--accent-line); }
.acct__danger{ border-color: rgba(255,111,95,.5); color: var(--neg); }
.acct__msg{ margin: 0; padding: 10px 14px; border-radius: 10px; font-weight: 600; }
.acct__msg.is-bad{ background: rgba(255,111,95,.14); color: var(--neg); border: 1px solid rgba(255,111,95,.35); }
.acct__msg.is-ok{ background: var(--accent-3-soft); color: var(--accent-3); border: 1px solid rgba(70,229,138,.35); }
.acct__what{ display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.acct__what li{ display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; line-height: 1.5; }
.acct__what svg{ width: 30px; height: 30px; color: var(--accent); }
.acct__what strong{ display: block; color: var(--ink); }
.acct__what span{ color: var(--ink-soft); }
.acct__who{ display: flex; align-items: center; gap: 14px; }
.acct__avatar{
  width: 56px; height: 56px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 1.4rem;
  background: var(--accent); color: var(--accent-ink);
}
.acct__whoName{ font-family: var(--display); font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; }
.acct__whoMail{ color: var(--ink-faint); font-size: .92rem; }
.acct__stats{ display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.acct__stat{ background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 14px; display: grid; gap: 2px; }
.acct__statN{ font-family: var(--display); font-weight: 800; font-size: 1.5rem; line-height: 1; color: var(--ink); }
.acct__statL{ font-size: .84rem; color: var(--ink-faint); }
.acct__statN--word{ font-size: 1.12rem; line-height: 1.2; }
.acct__sync{ display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--ink-soft); }
.acct__dot{ width: 9px; height: 9px; border-radius: 50%; background: var(--accent-3); box-shadow: 0 0 0 3px var(--accent-3-soft); }
.acct details{ border: 1px solid var(--line-soft); border-radius: 12px; padding: 0 14px; background: var(--bg-2); }
.acct details summary{ cursor: pointer; padding: 12px 0; font-weight: 700; color: var(--ink); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.acct details summary::after{ content: "+"; color: var(--ink-faint); font-weight: 800; }
.acct details[open] summary::after{ content: "\2013"; }
.acct details > *:not(summary){ margin-bottom: 14px; }
.acct__check{ display: flex; gap: 8px; align-items: center; font-size: .92rem; color: var(--ink-soft); }
.acct__check input{ width: 16px; height: 16px; accent-color: var(--accent); }

/* ---- Your Card: the account block that replaced the transfer-only story --- */
.pf-account{
  display: grid; grid-template-columns: 1fr auto; gap: 16px 22px; align-items: center;
  padding: 18px 20px; border-radius: var(--radius); border: 1px solid var(--accent-line);
  background: linear-gradient(135deg, var(--surface), var(--surface-2));
}
@media (max-width: 640px){ .pf-account{ grid-template-columns: 1fr; } }
.pf-account__text{ margin: 0; color: var(--ink-soft); line-height: 1.5; max-width: 70ch; }
.pf-account__text strong{ color: var(--ink); }
.pf-account__actions{ display: flex; gap: 10px; flex-wrap: wrap; }
.pf-account__go{
  display: inline-block; padding: 11px 20px; border-radius: 999px; text-decoration: none;
  background: var(--accent); color: var(--accent-ink); font-weight: 750;
}
.pf-account__go:hover{ background: var(--accent-hot); }
.pf-account__alt{
  display: inline-block; padding: 11px 18px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--line); color: var(--ink); font-weight: 650; background: var(--surface-2);
}
.pf-transfer--tucked{ margin-top: 4px; }

/* The warning track used to be the bottom edge of every page. The footer is
   the bottom edge now, so the track goes, and the page's bottom padding with
   it: the footer carries its own. */
.section-page::after, .home::after{ display: none; }
.section-page, .home{ padding-bottom: 24px; }

/* Tables that are wider than a phone scroll inside their own box rather
   than pushing the whole page sideways. A line score has ten columns and a
   division table has six; neither has to fit 390px, but the page does. */
.linescore, .division{ overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; max-width: 100%; }
.linescore__table, .division__table{ min-width: 100%; }
@media (max-width: 480px){
  .linescore__table{ font-size: .8rem; }
  .division__table{ font-size: .84rem; }
}

/* ---- The front page, tidied (Sept 15) -------------------------------------
   Seven rooms in a three-wide grid left the seventh on its own with two empty
   slots beside it. The seventh runs the width of the row and lies on its side,
   which reads as "and then the rules, which cover all six" rather than as a
   row that ran out. Same for the four blocks on the rail: two by two gives
   every club its full name and leaves nothing orphaned. */
@media (min-width: 621px){
  .areas__grid > .areacard:nth-child(7):last-child{
    grid-column: 1 / -1;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-rows: auto auto;
    column-gap: 1.4rem; align-items: start;
  }
  .areas__grid > .areacard:nth-child(7):last-child .areacard__name{ grid-column: 1; grid-row: 1; }
  .areas__grid > .areacard:nth-child(7):last-child .areacard__tagline{ grid-column: 1; grid-row: 2; }
  .areas__grid > .areacard:nth-child(7):last-child .areacard__line{ grid-column: 2; grid-row: 1 / 3; margin-top: 0; align-self: center; }
  .areas__grid > .areacard:nth-child(7):last-child .areacard__counts{ grid-column: 1; grid-row: 3; }
}
@media (min-width: 900px){
  .home__rail{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .minigame__club{ font-size: .96rem; }
}
.lostlink{
  margin: 18px 0 -6px; padding: 12px 16px; border-radius: var(--radius);
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--ink);
}
.lostlink code{ font-family: var(--mono); background: var(--bg-2); padding: 1px 6px; border-radius: 6px; }
.lanes{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lane--tools{ grid-column: 1 / -1; }
@media (max-width: 720px){ .lanes{ grid-template-columns: 1fr; } }
.lane__links{ gap: 8px; }

.railblock__foot{ margin: 12px 0 0; font-size: .9rem; color: var(--ink-faint); line-height: 1.5; }
.railblock__foot a{ color: var(--ink-soft); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.railblock__foot a:hover{ color: var(--ink); text-decoration-color: var(--accent); }

/* The skip link: invisible until a keyboard reaches it, then a chip at the
   top left that jumps past the header. */
.skiplink{
  position: absolute; left: 12px; top: -60px; z-index: 200;
  padding: 10px 16px; border-radius: 999px; background: var(--accent); color: var(--accent-ink);
  font-weight: 700; text-decoration: none; transition: top .12s ease;
}
.skiplink:focus{ top: 12px; outline: 2px solid var(--ink); outline-offset: 2px; }

.toolcard--mo{ border-top: 3px solid var(--college); }

/* ---- News desk: the lead headline and graphic are the same door as the button ---- */
.nw-lead__headlink{ color: inherit; text-decoration: none; }
.nw-lead__headlink:hover{ text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: var(--accent); }
a.nw-lead__art{ color: inherit; cursor: pointer; border-radius: var(--radius); }
a.nw-lead__art:hover .nw-chart__line{ stroke-width: 3.5; }
a.nw-lead__art:focus-visible{ outline: 2px solid var(--accent); outline-offset: 4px; }

/* ---- Player hub: what the page says when the address finds nobody ---- */
.hub__missing{ max-width: 56ch; padding: 28px 0 40px; display: grid; gap: 14px; }
.hub__missingTitle{ margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.04; letter-spacing: -.03em; }
.hub__missingNote{ margin: 0; color: var(--ink-soft); line-height: 1.55; }
.hub__missingSearch{ display: flex; gap: 8px; margin-top: 6px; }
.hub__missingInput{
  flex: 1; min-width: 0; padding: 11px 14px; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.hub__missingInput:focus{ outline: 2px solid var(--accent); outline-offset: 1px; }
.hub__missingGo{
  padding: 11px 18px; font: inherit; font-weight: 700; color: var(--bg); background: var(--accent);
  border: 0; border-radius: var(--radius); cursor: pointer;
}
.hub__missingGo:hover{ filter: brightness(1.08); }
.hub__missingAll{ color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; font-size: .95rem; }
.hub__missingAll:hover{ color: var(--ink); }

/* ===========================================================================
   THE CLUBHOUSE (Sept 15)

   The Binder, The Nine and The Duel on one page, picked with three name
   plates along the top. They are drawn as plates rather than as pills
   because a pill bar says "filter" and these are rooms: a brushed plate with
   a screw at each end, the lit one being the room you are in. The strip
   above them is the collection at a glance, and it is redrawn by the
   sections below it whenever a pack is opened or the nine is saved.
   ------------------------------------------------------------------------ */

.body--clubhouse .section-page{ max-width: 1560px; }

/* the strip */
.clubhouse__strip{
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-areas: "head tiles" "acts tiles";
  gap: 14px 32px; align-items: start;
  padding: 24px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.clubhouse__head{ grid-area: head; display: grid; gap: 8px; }
.clubhouse__title{ margin: 0; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: .95; }
.clubhouse__blurb{ margin: 0; color: var(--ink-soft); max-width: 60ch; }
.clubhouse__actions{ grid-area: acts; display: flex; flex-wrap: wrap; gap: 10px; align-self: end; }
.clubhouse__tiles{ grid-area: tiles; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-self: center; }
.clubhouse__tile{ display: grid; gap: 2px; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--radius); min-width: 0; }
.clubhouse__big{ font-family: var(--mono); font-weight: 700; font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.clubhouse__label{ font-family: var(--mono); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.clubhouse__note{ font-size: .88rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px){
  .clubhouse__strip{ grid-template-columns: 1fr; grid-template-areas: "head" "tiles" "acts"; gap: 16px; padding: 18px; }
  .clubhouse__actions{ align-self: start; }
}

/* the name plates */
.clubhouse__tabs{
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  margin: 20px 0 4px; padding: 14px 14px 0;
  border-top: 7px solid var(--surface-3); border-radius: 5px 5px 0 0;
}
.clubhouse__tab{
  position: relative; display: grid; gap: 4px; padding: 15px 44px 13px; text-align: center; text-decoration: none;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line); border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -2px 0 rgba(0,0,0,.16), 0 3px 0 rgba(0,0,0,.22);
  transition: transform .12s ease, border-color .12s ease;
}
.clubhouse__tab::before, .clubhouse__tab::after{
  content: ""; position: absolute; top: 50%; width: 11px; height: 11px; margin-top: -6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--ink-faint), var(--line) 62%, var(--line-soft));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.28);
}
.clubhouse__tab::before{ left: 13px; }
.clubhouse__tab::after{ right: 13px; }
.clubhouse__tab__name{
  font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  letter-spacing: .08em; text-transform: uppercase; line-height: 1; color: var(--ink);
}
.clubhouse__tab__note{ font-family: var(--mono); font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.clubhouse__tab:hover{ border-color: var(--accent-line); transform: translateY(-1px); }
.clubhouse__tab.is-on{
  background: linear-gradient(180deg, var(--accent-hot), var(--accent));
  border-color: var(--accent-hot);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -2px 0 rgba(0,0,0,.14), 0 3px 0 rgba(0,0,0,.3);
}
.clubhouse__tab.is-on .clubhouse__tab__name, .clubhouse__tab.is-on .clubhouse__tab__note{ color: var(--accent-ink); }
.clubhouse__tab.is-on::before, .clubhouse__tab.is-on::after{
  background: radial-gradient(circle at 35% 35%, #fff, var(--accent-hot) 62%, var(--accent));
}
@media (max-width: 720px){
  .clubhouse__tabs{ grid-template-columns: 1fr; gap: 10px; padding: 10px 10px 0; }
  .clubhouse__tab{ padding: 12px 40px 10px; }
}

/* the rooms */
.clubhouse__room{ margin-top: 14px; }
.clubhouse__room .section-head__title{ font-size: 1.7rem; }
.clubhouse__notice{
  margin: 0 0 18px; padding: 12px 16px; border-left: 4px solid var(--accent);
  background: var(--accent-soft); border-radius: var(--radius); color: var(--ink); font-weight: 600;
}
.toolcard--ch{ border-top: 3px solid var(--accent); }

/* =====================================================================
   HOT SEAT: KEEP YOUR JOB (the Sept 15 retool)
   ---------------------------------------------------------------------
   The manager's office wall: the season track, the owner's trust as a
   dial, the decision card with the situation drawn rather than written,
   and the reveal that names the data call. Green is a good grade and a
   win, red is a bad grade and a loss, and the amber is always the
   measured answer, same as everywhere else on the site.
   ===================================================================== */

.hswall{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px 26px;
  align-items: center;
  padding: 16px 18px;
  margin: 18px 0 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--club, var(--accent));
  border-radius: var(--radius-lg);
}
.hswall__id{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hswall__label{
  font: 600 .85rem/1.2 var(--display);
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint);
}
.hswall__record{ font: 800 46px/1 var(--mono); color: var(--ink); }
.hswall__note{ font-size: .92rem; color: var(--ink-soft); }

/* the dial */
.hsgauge{ display: grid; justify-items: center; gap: 2px; min-width: 220px; }
.hsgauge__dial{ width: 220px; height: 128px; overflow: visible; }
.hsgauge--small{ margin: 6px auto 0; }
.hsgauge__track{ fill: none; stroke: var(--surface-3); stroke-width: 16; stroke-linecap: butt; }
.hsgauge__fill{ fill: none; stroke: var(--pos); stroke-width: 16; transition: d .4s ease; }
.hsgauge__fill.is-even{ stroke: var(--accent-2); }
.hsgauge__fill.is-cool{ stroke: var(--accent); }
.hsgauge__fill.is-cold{ stroke: var(--neg); }
.hsgauge__line{ stroke: var(--ink); stroke-width: 3; }
.hsgauge__lineLabel{ font: 600 10px var(--display); letter-spacing: .06em; text-transform: uppercase; fill: var(--ink-faint); }
.hsgauge__num{ font: 800 44px var(--mono); fill: var(--ink); }
.hsgauge__mood{ font: 700 1rem/1.2 var(--display); }
.hsgauge__mood.is-warm{ color: var(--pos); }
.hsgauge__mood.is-even{ color: var(--accent-2); }
.hsgauge__mood.is-cool{ color: var(--accent); }
.hsgauge__mood.is-cold{ color: var(--neg); }

/* the track */
.hstrack{ grid-column: 1 / -1; display: grid; gap: 5px; padding-top: 6px; border-top: 1px solid var(--line-soft); }
.hstrack__flags, .hstrack__ticks, .hstrack__chapters{ display: grid; gap: 4px; }
.hstrack__flag{
  font: 600 .85rem/1.2 var(--display); letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-left: 2px solid var(--line); padding-left: 5px;
}
.hstrack__flag.is-reached{ color: var(--ink); border-left-color: var(--accent-2); }
.hstrack__flag.is-now{ color: var(--accent-hot); border-left-color: var(--accent); }
.hstrack__flag.is-end{ text-align: right; border-left: 0; border-right: 2px solid var(--line); padding: 0 5px 0 0; }
.hstrack__flag.is-end.is-reached{ border-right-color: var(--accent-2); }
.hstrack__tick{
  height: 18px; border-radius: 4px;
  background: var(--surface-3); border: 1px solid var(--line);
}
.hstrack__tick.is-chapter{ border-left: 3px solid var(--ink-faint); }
.hstrack__tick.is-w{ background: var(--pos); border-color: var(--pos); }
.hstrack__tick.is-l{ background: var(--neg); border-color: var(--neg); }
.hstrack__tick.is-done{ background: var(--surface-2); }
.hstrack__tick.is-miss{ background-image: repeating-linear-gradient(135deg, transparent 0 3px, rgba(0,0,0,.28) 3px 5px); }
.hstrack__tick.is-now{ outline: 2px solid var(--accent); outline-offset: 2px; }
.hstrack__tick.is-oct{ border-radius: 999px; }
.hstrack__chapter{
  font: 600 .85rem/1.2 var(--display); letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hstrack__chapter.is-now{ color: var(--ink); }
.hstrack__chapter.is-oct{ color: var(--accent-2); }

/* the decision card */
.hsround__top{ display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; }
.hsround__chap{ font: 600 .85rem/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.hsround__flag.is-dugout{ background: var(--accent-2-soft); color: var(--accent-2); }

.hssitu{
  display: grid; grid-template-columns: 170px 150px minmax(0, 1fr); gap: 18px; align-items: center;
  margin: 14px 0 16px; padding: 16px 18px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.hssitu__score{ display: grid; gap: 6px; }
.hssitu__side{ display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line-soft); }
.hssitu__side.is-us{ border-color: var(--club, var(--accent)); }
.hssitu__team{ font: 700 .95rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.hssitu__runs{ font: 800 26px/1 var(--mono); }
.hssitu__inning{ display: flex; gap: 6px; align-items: baseline; padding: 2px 10px; }
.hssitu__half{ font: 600 .85rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); }
.hssitu__inn{ font: 800 22px/1 var(--mono); }
.hsdia__infield{ fill: color-mix(in srgb, var(--pos) 18%, var(--surface)); stroke: var(--line); stroke-width: 1.5; }
.hsdia__plate{ fill: var(--chalk, #fff); stroke: var(--line); stroke-width: 1; }
.hssitu__men{ display: grid; gap: 10px; min-width: 0; }
.hssitu__man{ display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 10px; align-items: center; }
.hssitu__manLabel{ font: 600 .85rem/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.hssitu__manName{ font: 700 1rem/1.2 var(--display); }
.hssitu__manNote{ grid-column: 2; font-size: .88rem; color: var(--ink-soft); }
.hssitu__pen{ display: flex; flex-wrap: wrap; gap: 6px; }

.hsdesk{
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
  margin: 14px 0 16px; padding: 14px 16px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.hsdesk__cell{ display: grid; gap: 2px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.hsdesk__label{ font: 600 .85rem/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.hsdesk__value{ font: 800 24px/1.1 var(--mono); color: var(--ink); }
.hsdesk__note{ font-size: .86rem; color: var(--ink-soft); }
.hsdesk__men{ grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.hsdeskman{ display: flex; gap: 10px; align-items: center; padding: 8px 10px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); min-width: 0; }
.hsdeskman__face{ width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--surface-3); flex: none; }
.hsdeskman__body{ display: grid; gap: 1px; min-width: 0; }
.hsdeskman__name{ font: 700 .95rem/1.2 var(--display); }
.hsdeskman__line{ font-size: .86rem; color: var(--ink-soft); }

/* the reveal */
.hsreveal.is-best{ border-left: 5px solid var(--pos); }
.hsreveal.is-close{ border-left: 5px solid var(--accent-2); }
.hsreveal.is-off{ border-left: 5px solid var(--accent); }
.hsreveal.is-bad{ border-left: 5px solid var(--neg); }
.hsgrade{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 10px 0 14px; }
.hsgrade__tag{ font: 600 .85rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--surface-3); color: var(--ink); }
.is-best .hsgrade__tag{ background: var(--pos); color: var(--accent-ink); }
.is-bad .hsgrade__tag{ background: var(--neg); color: #fff; }
.hsgrade__label{ font: 800 clamp(20px, 2.4vw, 26px)/1.1 var(--display); }
.hsgrade__delta{ font: 700 1.1rem/1 var(--mono); }
.hsgrade__delta.is-up{ color: var(--pos); }
.hsgrade__delta.is-down{ color: var(--neg); }

.hsdata{
  display: grid; gap: 6px; padding: 14px 16px; margin: 0 0 14px;
  background: var(--accent-2-soft); border-left: 4px solid var(--accent-2); border-radius: var(--radius);
}
.hsdata__label{ font: 600 .85rem/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.hsdata__best{ margin: 0; font: 800 20px/1.2 var(--display); }
.hsdata__coach{ margin: 0; font-size: 1rem; line-height: 1.5; }
.hsdata__gap{ margin: 0; font: 600 .92rem/1.3 var(--mono); color: var(--ink-soft); }

.hstbar{ display: grid; gap: 6px; margin: 14px 0 4px; }
.hstbar__label{ font: 600 .85rem/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.hstbar__track{ position: relative; height: 14px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.hstbar__base{ position: absolute; top: 0; bottom: 0; left: 0; background: var(--ink-faint); opacity: .55; }
.hstbar__change{ position: absolute; top: 0; bottom: 0; }
.hstbar__change.is-up{ background: var(--pos); }
.hstbar__change.is-down{ background: var(--neg); }
.hstbar__line{ position: absolute; top: -2px; bottom: -2px; width: 3px; background: var(--ink); }

/* chapter end and milestones */
.hschap, .hsmile{
  margin: 16px 0 26px; padding: 22px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  border-top: 4px solid var(--accent-2);
}
.hsmile.is-warm{ border-top-color: var(--pos); }
.hsmile.is-cool{ border-top-color: var(--accent); }
.hsmile.is-cold{ border-top-color: var(--neg); }
.hschap__eyebrow, .hsmile__eyebrow{ font: 600 .85rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 6px; }
.hschap__title, .hsmile__title{ font: 800 clamp(24px, 3.2vw, 34px)/1.1 var(--display); margin: 0 0 14px; }
.hschap__grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.hschap__cell{ display: grid; gap: 2px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.hschap__writer{ margin: 16px 0 0; font: italic 600 1.15rem/1.45 var(--body); color: var(--ink); max-width: 60ch; }
.hschap__note, .hsmile__owner, .hsmile__scene{ margin: 10px 0 0; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); max-width: 64ch; }
.hsmile__owner{ color: var(--ink); font-weight: 600; }
.hsmile__verdict{ margin: 14px 0 0; padding: 12px 16px; font: 800 1.3rem/1.2 var(--display); border-radius: var(--radius); }
.hsmile__verdict.is-in{ background: var(--pos); color: var(--accent-ink); }
.hsmile__verdict.is-out{ background: var(--surface-3); color: var(--ink); }

/* the morning paper */
.hspaper{
  margin: 0 0 18px; padding: 18px 22px;
  background: var(--chalk, #f4efe4); color: #1a1a1a;
  border: 1px solid #b9b2a2; border-radius: var(--radius-sm);
  font-family: Georgia, "Times New Roman", serif;
}
.hspaper__masthead{ display: block; font: 700 .85rem/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: #5a5548; border-bottom: 2px solid #1a1a1a; padding-bottom: 6px; margin-bottom: 10px; }
.hspaper__headline{ margin: 0 0 8px; font: 900 clamp(26px, 4vw, 44px)/1.02 var(--display); letter-spacing: -.01em; color: #1a1a1a; }
.hspaper__deck{ margin: 0; font-size: 1rem; line-height: 1.5; color: #333; }
.hsbook__row--calls{ grid-template-columns: minmax(160px, 2fr) 60px minmax(120px, 1fr); }

@media (max-width: 860px){
  .hswall{ grid-template-columns: 1fr; }
  .hsgauge{ justify-items: start; }
  .hssitu{ grid-template-columns: 1fr 1fr; }
  .hssitu__men{ grid-column: 1 / -1; }
  .hsdesk{ grid-template-columns: 1fr 1fr; }
  .hstrack__flag, .hstrack__chapter{ font-size: .85rem; }
}
@media (max-width: 520px){
  .hssitu{ grid-template-columns: 1fr; }
  .hswall__record{ font-size: 36px; }
}

/* ---------------------------------------------------------------------------
   THE WEEKEND: PLAN, LOG AND THE AVAILABILITY BOARD (Sept 15)

   The Pitch Planner became two grids, plan and log, and grew a strip at the
   top that says which game you are on. The same strip sits on the defensive
   card and the Lineup Lab, so the three tools read as one weekend. Grids are
   games across and pitchers down; a cell is a button in the plan and a pair
   of counts in the log. Everything is sized for a phone held between games.
   ------------------------------------------------------------------------ */

.wk-bar{
  display: grid; gap: 10px;
  margin: 18px 0 6px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
}
.wk-bar__head{ display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.wk-bar__label{ font-family: var(--display); font-weight: 800; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em; }
.wk-bar__meta{ color: var(--ink-soft); font-size: var(--step-small); }
.wk-bar__link{ margin-left: auto; font-size: var(--step-small); color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.wk-bar__link:hover{ color: var(--ink); }
.wk-bar__games{ display: flex; flex-wrap: wrap; gap: 8px; }
.wk-game{
  display: grid; gap: 1px;
  padding: 8px 14px;
  text-align: left;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: inherit;
  font: inherit;
  cursor: pointer;
  min-width: 118px;
}
.wk-game:hover{ border-color: var(--accent); }
.wk-game.is-on{ border-color: var(--accent); background: var(--accent-soft); }
.wk-game__n{ font-family: var(--display); font-weight: 800; font-size: 1rem; }
.wk-game__day{ font-size: var(--step-small); color: var(--ink-soft); }
.wk-game__state{ font-family: var(--mono); font-size: var(--step-label); color: var(--ink-faint); text-transform: uppercase; letter-spacing: .05em; }
.wk-game.is-played .wk-game__state{ color: var(--accent-3); }

/* ---- the planner's setup additions ---- */

.pl-select--tight{ min-width: 0; padding: 6px 8px; }
.pl-games{ display: grid; gap: 6px; }
.pl-games__list{ display: flex; flex-wrap: wrap; gap: 10px; }
.pl-games__day{ display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); min-width: 170px; }
.pl-games__label{ font-family: var(--display); font-weight: 800; }
.pl-games__game{ display: flex; gap: 8px; align-items: center; }
.pl-games__n{ font-size: var(--step-small); color: var(--ink-soft); min-width: 58px; }
.pl-add--tight{ padding: 5px 12px; font-size: var(--step-small); }

.pl-names{ display: grid; gap: 6px; max-width: 520px; }
.pl-names__row{ display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.pl-actions{ display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- plan or log ---- */

.pl-plan{ display: grid; gap: 12px; margin-top: 26px; }
.pl-modes{ display: flex; gap: 8px; flex-wrap: wrap; }
.pl-mode{
  display: grid; gap: 1px;
  padding: 10px 18px;
  text-align: left;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  color: inherit;
  font: inherit;
  cursor: pointer;
  min-width: 180px;
}
.pl-mode.is-on{ border-color: var(--accent); background: var(--accent-soft); }
.pl-mode__name{ font-family: var(--display); font-weight: 800; font-size: 1.25rem; text-transform: uppercase; letter-spacing: .04em; }
.pl-mode__note{ font-size: var(--step-small); color: var(--ink-soft); }

/* ---- the grid ---- */

.pg{ display: grid; gap: 6px; overflow-x: auto; }
.pg__row{
  display: grid;
  grid-template-columns: 130px repeat(var(--pg-cols, 3), minmax(118px, 1fr));
  gap: 8px; align-items: stretch;
  min-width: max-content;
}
.pg__row--head{ align-items: end; }
.pg__name{ display: flex; align-items: center; font-weight: 600; }
.pg__head{ display: grid; gap: 2px; padding: 0 2px 4px; }
.pg__game{ font-family: var(--display); font-weight: 800; font-size: 1.05rem; }
.pg__day{ font-size: var(--step-label); color: var(--ink-soft); }
.pg__state{ font-family: var(--mono); font-size: var(--step-label); color: var(--ink-faint); text-transform: uppercase; letter-spacing: .05em; }
.pg__state.is-played{ color: var(--accent-3); }
.pg__book{ display: flex; gap: 6px; align-items: center; font-size: var(--step-label); color: var(--ink-soft); cursor: pointer; }
.pg__book input{ accent-color: var(--accent); width: 16px; height: 16px; }
.pg__book.is-on{ color: var(--accent-3); font-weight: 600; }

.pg__cell{
  display: grid; gap: 2px; align-content: center;
  min-height: 58px;
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
}
.pg__cell:hover{ border-color: var(--accent); }
.pg__cell.is-set{ border-color: var(--accent-line); background: var(--accent-soft); }
.pg__cell.is-open{ outline: 2px solid var(--accent); outline-offset: 1px; }
.pg__cell.is-rest:not(.is-set){ border-style: dashed; opacity: .75; }
.pg__cell.is-warn{ border-color: var(--accent-2); }
.pg__cell.is-block{ border-color: var(--neg); background: rgba(242,97,90,.08); }
.pg__cell.is-played{ border-style: dotted; }
.pg__big{ font-family: var(--mono); font-weight: 800; font-size: 1.25rem; line-height: 1; }
.pg__big--free{ font-size: var(--step-small); font-weight: 600; color: var(--pos); font-family: var(--body); }
.pg__big--rest{ font-size: var(--step-small); font-weight: 600; color: var(--neg); font-family: var(--body); }
.pg__small{ font-size: var(--step-label); color: var(--ink-faint); }

.pg__cell--log{ cursor: default; gap: 6px; grid-auto-flow: row; }
.pg__count{ display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; }
.pg__count-input{
  width: 100%; min-width: 0; height: 34px; text-align: center;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink);
  font-family: var(--mono); font-weight: 700; font-size: 1rem;
}
.pg__count-label{ font-size: var(--step-label); color: var(--ink-faint); min-width: 46px; text-align: left; }

.pg__editor{
  display: grid; gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--accent-line);
  background: var(--surface-2);
  min-width: max-content;
}
.pg__editor-top{ display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; }
.pg__editor-who{ font-family: var(--display); font-weight: 800; font-size: 1.1rem; }
.pg__editor-has{ font-size: var(--step-small); color: var(--ink-soft); }
.pg__editor-label{ font-size: var(--step-label); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); min-width: 64px; }
.pg__innings{ display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pg__inning{
  width: 42px; height: 42px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--mono); font-weight: 800; font-size: 1.05rem;
  cursor: pointer;
}
.pg__inning:hover{ border-color: var(--accent); }
.pg__inning.is-on{ background: var(--accent); border-color: var(--accent); color: var(--bg); }
.pg__cap{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pg__cap-input{
  width: 90px; height: 36px; text-align: center;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
  font-family: var(--mono); font-weight: 700; font-size: 1rem;
}
.pg__editor-hint{ font-size: var(--step-label); color: var(--ink-faint); }
.pg__editor-actions{ display: flex; gap: 8px; flex-wrap: wrap; }
.pg__editor-cost{ margin: 0; font-size: var(--step-small); color: var(--ink-soft); }
.pg__editor-issue{ margin: 0; font-size: var(--step-small); padding: 6px 10px; border-radius: var(--radius-sm); background: var(--surface); border-left: 3px solid var(--accent-2); }
.pg__editor-issue.is-block{ border-left-color: var(--neg); }

/* ---- the reading under the grid ---- */

.pl-read{ display: grid; gap: 10px; }
.pl-cost{
  display: grid; gap: 4px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent-2);
}
.pl-cost__title{ margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.25rem; }
.pl-cost__sub{ margin: 0 0 4px; font-size: var(--step-label); color: var(--ink-faint); text-transform: uppercase; letter-spacing: .05em; }
.pl-cost__line{ margin: 0; line-height: 1.5; }
.pl-warning--ok{ border-left-color: var(--pos); }
.pl-warning--block{ border-left-color: var(--neg); }
.pl-warning--warn{ border-left-color: var(--accent-2); }
.pl-warning--note{ border-left-color: var(--ink-faint); color: var(--ink-soft); }
.pl-arms{ display: grid; gap: 4px; }
.pl-armline{
  display: grid; grid-template-columns: 120px 1fr 2fr; gap: 10px; align-items: baseline;
  padding: 8px 12px; border-radius: var(--radius-sm); background: var(--surface-2);
  font-size: var(--step-small);
}
@media (max-width: 700px){ .pl-armline{ grid-template-columns: 1fr; gap: 2px; } }
.pl-armline.is-block{ border-left: 3px solid var(--neg); }
.pl-armline__who{ font-weight: 700; }
.pl-armline__what{ font-family: var(--mono); font-weight: 700; }
.pl-armline__cost{ color: var(--ink-soft); }

/* ---- on the defensive card ---- */

.dp-costread{ display: grid; gap: 4px; padding: 12px 14px; margin-top: 12px; background: var(--surface-2); border-left: 4px solid var(--accent-2); border-radius: var(--radius); }
.dp-costread__line{ margin: 0; line-height: 1.5; }
.dp-planflags{ display: grid; gap: 6px; margin-top: 10px; }
.dp-planflag{ margin: 0; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--surface); border-left: 3px solid var(--accent-2); font-size: var(--step-small); }
.dp-planflag.is-block{ border-left-color: var(--neg); }
.dp-fixed__value{ font-family: var(--mono); font-weight: 800; font-size: 1.3rem; line-height: 1.1; }
.dp-fixed__note{ font-size: var(--step-label); color: var(--ink-faint); }
.dp .wk-bar{ margin-top: 8px; }

/* ---- the availability board on the Lineup Lab ---- */

.ab{ display: grid; gap: 12px; margin-top: 8px; }
.ab__head{ display: grid; gap: 4px; }
.ab__title{ margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.ab__sub{ margin: 0; color: var(--ink-soft); font-size: var(--step-small); }
.ab__empty{ margin: 0; color: var(--ink-soft); }
.ab__table{ display: grid; gap: 4px; overflow-x: auto; }
.ab__row{
  display: grid; grid-template-columns: minmax(130px, 1.2fr) repeat(3, minmax(150px, 2fr));
  gap: 8px; align-items: center;
  padding: 8px 12px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--line-soft);
  min-width: 620px;
}
.ab__row.is-head{ background: none; border: none; padding-bottom: 0; font-size: var(--step-label); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.ab__row.is-pitching{ border-color: var(--accent-line); background: var(--accent-soft); }
.ab__cell{ display: grid; gap: 1px; min-width: 0; }
.ab__name{ font-weight: 700; }
.ab__state{ font-weight: 700; font-size: var(--step-small); }
.ab__state.is-yes{ color: var(--pos); }
.ab__state.is-no{ color: var(--neg); }
.ab__state.is-warn{ color: var(--accent-2); }
.ab__state.is-on{ color: var(--accent-hot); }
.ab__state.is-quiet{ color: var(--ink-faint); font-weight: 600; }
.ab__why{ font-size: var(--step-label); color: var(--ink-faint); line-height: 1.35; }
.ab__note{ margin: 0; font-size: var(--step-small); color: var(--ink-soft); max-width: 90ch; }

/* ======================================================================
   THE MOMENT, RETOOLED (Sept 15): what's the call, graded by the numbers.
   The stage grew a scoreboard, runner tags and faces, the reveal grew
   win-probability bars and a trivia card, and a session strip sits under
   the hero. Everything below this line belongs to /tools/moment.
   ====================================================================== */

.mses{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
  margin: 0 0 1.1rem;
}
.mses__cell{
  display: grid;
  gap: .05rem;
  padding: .6rem .8rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}
.mses__value{ font-family: var(--display); font-weight: 900; font-size: 1.7rem; line-height: 1; }
.mses__label{ font-family: var(--mono); font-size: .85rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); }
.mses__sub{ font-family: var(--mono); font-size: .88rem; color: var(--ink-soft); }

/* who is in it, with a face */
.mwho{
  display: flex;
  align-items: center;
  gap: .7rem;
}
.mwho .mface{ width: 56px; height: 56px; }
.mwho__body{ display: grid; gap: .12rem; min-width: 0; }
.mwho.is-batter{ border-left-color: var(--accent); }
.mwho.is-pitcher{ border-left-color: var(--accent-3); }
.mwho__line{ font-size: .88rem; line-height: 1.4; color: var(--ink-soft); }
.mstage__ondeck{ margin: 0; font-family: var(--mono); font-size: .9rem; color: var(--ink-faint); }

/* the situation: diamond with runner tags, and a scoreboard */
.msit{ grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.msit__fieldwrap{ position: relative; padding: 1.1rem .4rem; }
.msit__runner{
  position: absolute;
  font-family: var(--mono);
  font-size: .85rem;
  font-weight: 700;
  color: var(--accent-2);
  white-space: nowrap;
  max-width: 46%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msit__runner.is-first{ right: 0; top: 50%; transform: translateY(-50%); text-align: right; }
.msit__runner.is-third{ left: 0; top: 50%; transform: translateY(-50%); }
.msit__runner.is-second{ left: 50%; top: 0; transform: translateX(-50%); }
.msit__board{ display: grid; gap: .5rem; min-width: 8.5rem; }
.msit__inning{ display: flex; align-items: baseline; gap: .35rem; font-family: var(--display); font-weight: 900; font-size: 1.6rem; line-height: 1; }
.msit__arrow{ font-size: .85rem; color: var(--accent-hot); }
.msit__score{ display: grid; gap: .2rem; }
.msit__team{
  display: flex; justify-content: space-between; gap: .8rem;
  font-family: var(--mono); font-weight: 700; font-size: 1.05rem;
  color: var(--ink-soft);
}
.msit__team.is-batting{ color: var(--ink); }
.msit__team.is-batting .msit__teamName::before{ content: "\25B8 "; color: var(--accent-hot); }
.msit__teamRuns{ font-variant-numeric: tabular-nums; }
.msit__counts{ display: grid; gap: .25rem; }
.msit__countRow{ display: flex; align-items: center; gap: .5rem; }
.msit__countLabel{ font-family: var(--mono); font-weight: 700; font-size: .9rem; width: 1rem; color: var(--ink-faint); }
.mdots{ display: inline-flex; gap: .3rem; }
.mdots__dot{
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--surface-3); border: 1px solid var(--line);
}
.mdots.is-balls .mdots__dot.is-on{ background: var(--accent-3); border-color: var(--accent-3); }
.mdots.is-strikes .mdots__dot.is-on{ background: var(--neg); border-color: var(--neg); }
.mdots.is-outs .mdots__dot.is-on{ background: var(--accent-2); border-color: var(--accent-2); }

/* the call */
.mcall__side{
  margin: 0 0 .3rem;
  font-family: var(--mono);
  font-size: .88rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-hot);
}
.mcall.is-defense{ background: linear-gradient(180deg, var(--accent-3-soft), var(--surface)); border-color: rgba(70,229,138,.4); }
.mcall.is-defense .mcall__side{ color: var(--accent-3); }
.mverdict.is-close{ border-left-color: var(--accent-2); color: var(--accent-2); }

/* the bars */
.mbars{ display: grid; gap: .7rem; }
.mbar{
  display: grid;
  gap: .3rem;
  padding: .7rem .9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.mbar.is-best{ border-color: var(--pos); }
.mbar.is-picked:not(.is-best){ border-color: var(--accent-2); }
.mbar__head{ display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.mbar__label{ font-weight: 700; font-size: 1.05rem; }
.mbar__marks{ display: inline-flex; gap: .4rem; }
.mbar__mark{
  font-family: var(--mono); font-size: .85rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  padding: .1rem .5rem; border-radius: 999px;
}
.mbar__mark.is-best{ background: var(--accent-3-soft); color: var(--pos); }
.mbar__mark.is-picked{ background: var(--accent-2-soft); color: var(--accent-2); }
.mbar__track{ height: 14px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.mbar__fill{ height: 100%; background: var(--ink-faint); border-radius: 999px; transition: width .5s ease; }
.mbar.is-best .mbar__fill{ background: var(--pos); }
.mbar.is-picked:not(.is-best) .mbar__fill{ background: var(--accent-2); }
.mbar__tail{ display: flex; justify-content: space-between; gap: .6rem; font-family: var(--mono); font-size: .95rem; }
.mbar__wp{ font-weight: 700; }
.mbar__behind{ color: var(--ink-faint); }
.mreveal__stamp{ margin: 0; max-width: 70ch; font-size: .92rem; line-height: 1.55; color: var(--ink-faint); }

/* what actually happened, as trivia */
.mactual{
  padding: 1rem 1.1rem;
  background: var(--surface-2);
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
}
.mactual__eyebrow{
  margin: 0;
  font-family: var(--mono); font-size: .88rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint);
}
.mactual__note{ margin: .1rem 0 .8rem; font-size: .92rem; color: var(--ink-soft); }
.mactual__split{ display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 1rem; align-items: start; }
.mactual__text{ display: grid; gap: .5rem; }
.mactual__said{ margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.4rem; line-height: 1.1; }
.mactual__line, .mactual__desc{ margin: 0; line-height: 1.55; }
.mactual__desc{ color: var(--ink-soft); }
.mactual__swing{ margin: 0; font-size: .92rem; color: var(--ink-faint); line-height: 1.5; }

.mnext{ display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.mnext__btn{
  display: inline-block;
  padding: .65rem 1.2rem;
  font-family: var(--display); font-weight: 800; font-size: 1.1rem;
  color: var(--accent-ink); background: var(--accent);
  border-radius: 999px; text-decoration: none;
}
.mnext__btn:hover{ background: var(--accent-hot); }
.mnext__all{ color: var(--ink-soft); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 640px){
  .mses{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
  .mses__value{ font-size: 1.3rem; }
  .msit{ grid-template-columns: 1fr; }
  .mactual__split{ grid-template-columns: 1fr; }
}

/* ======================================================================
   bx graphics
   The broadcast graphics from public/bxGraphics.js: at-bat panel, line
   score, Statcast badge, jersey card, win probability, radar, streak
   pills, spray chart, zone grid. Amber is the scoreboard bulb, green and
   red are the site's own positive and negative.
   ====================================================================== */
.bx-card{
  --bx-amber: var(--bulb);
  --bx-dot-off: rgba(0,0,0,.35);
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.25);
  color: var(--ink);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .bx-card{ --bx-amber: #c98a00; --bx-dot-off: rgba(0,0,0,.06); box-shadow: 0 14px 30px -18px rgba(20,40,20,.35); }
}
:root[data-theme="light"] .bx-card{ --bx-amber: #c98a00; --bx-dot-off: rgba(0,0,0,.06); box-shadow: 0 14px 30px -18px rgba(20,40,20,.35); }

/* The at-bat panel */
.bx-atbat{ display: inline-grid; gap: 10px; padding: 12px 16px 14px; min-width: 196px; }
.bx-atbat__top{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bx-live, .bx-atbat__state{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-weight: 800; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase;
  padding: 2px 9px; border-radius: 999px;
}
.bx-live{ color: var(--neg); background: color-mix(in srgb, var(--neg) 16%, transparent); border: 1px solid color-mix(in srgb, var(--neg) 45%, transparent); }
.bx-atbat__state{ color: var(--ink-faint); background: var(--surface-2); border: 1px solid var(--line-soft); }
.bx-live__dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--neg); box-shadow: 0 0 8px var(--neg); animation: bx-pulse 1.6s ease-in-out infinite; }
@keyframes bx-pulse{ 0%,100%{ opacity: 1; transform: scale(1); } 50%{ opacity: .35; transform: scale(.75); } }
.bx-atbat__inning{ font-family: var(--mono); font-weight: 800; font-size: .95rem; letter-spacing: .12em; color: var(--bx-amber); white-space: nowrap; }
.bx-atbat__body{ display: flex; align-items: center; gap: 20px; }

.bx-diamond{ position: relative; width: 74px; height: 70px; flex: none; }
.bx-diamond__field{
  position: absolute; left: 17px; top: 6px; width: 40px; height: 40px;
  transform: rotate(45deg);
  border: 1px dashed color-mix(in srgb, var(--ink-faint) 35%, transparent);
}
.bx-base{
  position: absolute; width: 17px; height: 17px; border-radius: 4px;
  background: var(--bx-dot-off); border: 1.5px solid color-mix(in srgb, var(--ink-faint) 55%, transparent);
  transition: background .25s ease, border-color .25s ease, filter .25s ease;
}
.bx-base--second{ left: -9px; top: -9px; }
.bx-base--first{ right: -9px; top: -9px; }
.bx-base--third{ left: -9px; bottom: -9px; }
.bx-base.is-on{
  background: var(--bx-amber); border-color: var(--bx-amber);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--bx-amber) 80%, transparent));
}
.bx-plate{
  position: absolute; left: 30px; bottom: 0; width: 14px; height: 13px;
  background: var(--ink-faint);
  clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 100%, 0 50%);
}

.bx-count{ display: grid; gap: 5px; }
.bx-count__row{ display: flex; align-items: center; gap: 9px; }
.bx-count__key{ font-family: var(--mono); font-weight: 800; font-size: .9rem; letter-spacing: .08em; color: var(--ink-faint); width: 12px; }
.bx-count__dots{ display: inline-flex; gap: 6px; }
.bx-dot{ width: 13px; height: 13px; border-radius: 50%; background: var(--bx-dot-off); border: 1px solid color-mix(in srgb, var(--ink-faint) 45%, transparent); transition: background .2s ease, box-shadow .2s ease; }
.bx-count__row--b .bx-dot.is-on{ --c: var(--pos); }
.bx-count__row--s .bx-dot.is-on{ --c: var(--neg); }
.bx-count__row--o .bx-dot.is-on{ --c: var(--bx-amber); }
.bx-dot.is-on{ background: var(--c); border-color: var(--c); box-shadow: 0 0 8px color-mix(in srgb, var(--c) 75%, transparent); }

.bx-atbat--mini{ display: flex; padding: 8px 12px; min-width: 0; box-shadow: none; border-radius: 12px; }
.bx-atbat--mini .bx-atbat__body{ gap: 16px; }
.bx-atbat--mini .bx-diamond{ transform: scale(.78); transform-origin: left center; margin-right: -16px; height: 60px; }
.bx-atbat--mini .bx-dot{ width: 11px; height: 11px; }
.bx-atbat--mini .bx-count{ gap: 3px; }
@media (prefers-reduced-motion: reduce){ .bx-live__dot{ animation: none; } }

/* The line score */
.bx-linescore{ padding: 6px 4px 4px; overflow: hidden; }
.bx-linescore__scroll{ overflow-x: auto; }
.bx-linescore__table{ width: 100%; border-collapse: collapse; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.bx-linescore__table th, .bx-linescore__table td{ padding: 6px 7px; text-align: center; font-size: 1rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.bx-linescore__table thead th{ font-size: .85rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); border-bottom: 1px solid var(--line-soft); }
.bx-linescore__table tbody tr + tr th, .bx-linescore__table tbody tr + tr td{ border-top: 1px solid var(--line-soft); }
.bx-linescore__table .is-now{ color: var(--bx-amber); background: color-mix(in srgb, var(--bx-amber) 12%, transparent); }
.bx-linescore__table thead .is-now{ color: var(--bx-amber); }
.bx-linescore__table .is-blank{ color: var(--ink-faint); opacity: .6; }
.bx-linescore__club{ text-align: left !important; padding-left: 12px !important; }
.bx-linescore__team{ display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-weight: 800; letter-spacing: .06em; }
a.bx-linescore__team:hover{ text-decoration: underline; }
.bx-swatch{ width: 11px; height: 11px; border-radius: 3px; background: var(--ink-faint); box-shadow: 0 0 0 1px rgba(255,255,255,.25); flex: none; }
.bx-linescore__tot{ color: var(--ink) !important; font-weight: 800 !important; }
.bx-linescore__tot.is-first{ border-left: 1px solid var(--line); }
.bx-linescore__tot.is-runs{ color: var(--bx-amber) !important; font-size: 1.1rem !important; }
.bx-linescore--mini{ box-shadow: none; border-radius: 10px; }
.bx-linescore--mini th, .bx-linescore--mini td{ padding: 4px 5px; font-size: .9rem; }
.bx-linescore--mini .bx-linescore__club{ padding-left: 8px !important; }

/* The Statcast badge */
.bx-metric{ display: inline-grid; justify-items: center; gap: 6px; }
.bx-metric__label{ font-size: .85rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.bx-metric__pill{
  display: inline-flex; align-items: baseline; gap: 5px; padding: 6px 16px; border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--seam));
  color: #fff; box-shadow: 0 0 22px -4px color-mix(in srgb, var(--accent) 70%, transparent);
}
.bx-metric__value{ font-family: var(--mono); font-size: 1.9rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.bx-metric__unit{ font-family: var(--mono); font-size: .9rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .9; }
.bx-metric__tier{ font-size: .85rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-hot); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 6px; padding: 1px 8px; }

/* Streak pills */
.bx-streak{ display: inline-block; font-family: var(--mono); font-weight: 800; font-size: .95rem; letter-spacing: .06em; padding: 1px 9px; border-radius: 999px; border: 1px solid var(--line-soft); color: var(--ink-faint); background: var(--surface-2); line-height: 1.4; }
.bx-streak.is-win{ color: var(--pos); background: color-mix(in srgb, var(--pos) 15%, transparent); border-color: color-mix(in srgb, var(--pos) 45%, transparent); }
.bx-streak.is-loss{ color: var(--ink-faint); }

/* The jersey card */
.bx-jersey{ --bx-team: var(--surface-3); position: relative; overflow: hidden; padding: 22px 24px; isolation: isolate; }
.bx-jersey__num{
  position: absolute; right: -12px; top: -46px; z-index: -1;
  font-family: var(--display); font-weight: 900; font-size: 15rem; line-height: 1; letter-spacing: -.06em;
  color: var(--ink); opacity: .07; pointer-events: none; user-select: none;
}
.bx-jersey__fade{
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--bx-team) 55%, transparent), transparent 60%),
    linear-gradient(0deg, var(--bg-2) 0%, transparent 70%);
}
.bx-jersey__inner{ display: grid; gap: 20px; align-items: center; }
.bx-jersey__inner.has-media{ grid-template-columns: 132px 1fr; }
.bx-jersey__pos{ display: block; font-size: .85rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--bx-amber); margin-bottom: 4px; }
.bx-jersey__name{ font-family: var(--display); font-weight: 900; font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1; letter-spacing: -.02em; margin: 0 0 8px; }
.hub > .bx-jersey{ margin-bottom: 22px; }
@media (max-width: 560px){
  .bx-jersey{ padding: 18px 16px; }
  .bx-jersey__inner.has-media{ grid-template-columns: 88px 1fr; gap: 14px; }
  .bx-jersey__inner .hero__shot{ width: 88px; height: 88px; }
  .bx-jersey__num{ font-size: 9rem; top: -22px; right: -14px; opacity: .05; }
}

/* Win probability */
.bx-winprob{ padding: 12px 16px 14px; display: grid; gap: 8px; }
.bx-winprob__head{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bx-winprob__side{ display: inline-flex; align-items: baseline; gap: 7px; }
.bx-winprob__team{ font-weight: 800; letter-spacing: .08em; font-size: .9rem; color: var(--ink-soft); }
.bx-winprob__pct{ font-family: var(--mono); font-size: 1.3rem; font-weight: 800; }
.bx-winprob__label{ font-size: .85rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.bx-winprob__bar{ position: relative; height: 12px; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.bx-winprob__fill{ position: absolute; top: 0; bottom: 0; }
.bx-winprob__fill.is-home{ left: 0; right: 0; background: var(--accent-2); }
.bx-winprob__fill.is-away{ left: -8px; background: var(--college); transform: skewX(-24deg); transform-origin: bottom left; border-right: 3px solid var(--bg); }

/* The five-tool radar */
.bx-radar{ display: inline-block; color: var(--line); }
.bx-radar__svg{ display: block; max-width: 100%; height: auto; overflow: visible; }
.bx-radar__outer{ stroke-width: 1.2; }
.bx-radar__grid, .bx-radar__spoke{ stroke-width: 1; opacity: .6; }
.bx-radar__shape{ fill: color-mix(in srgb, var(--bulb) 32%, transparent); stroke: var(--bulb); stroke-width: 2; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--bulb) 45%, transparent)); }
.bx-radar__pt{ fill: var(--bulb); }
.bx-radar__label{ fill: var(--ink-faint); font-family: var(--body); font-size: 13.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.bx-radar__value{ fill: var(--ink); font-family: var(--mono); font-size: 16px; font-weight: 800; }

/* Spray chart */
.bx-spray{ padding: 12px; display: grid; gap: 8px; }
.bx-spray__svg{ display: block; width: 100%; height: auto; }
.bx-spray__grass{ fill: color-mix(in srgb, var(--grass-dark) 40%, transparent); }
.bx-spray__wall{ stroke: var(--ink-faint); stroke-width: 2; }
.bx-spray__line{ stroke: var(--chalk-soft); stroke-width: 1.5; }
.bx-spray__infield{ fill: color-mix(in srgb, var(--clay-deep) 30%, transparent); stroke: var(--chalk-soft); stroke-width: 1; }
.bx-spray__hit{ filter: drop-shadow(0 0 5px currentColor); }
.bx-spray__key{ display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .85rem; font-weight: 700; color: var(--ink-faint); }
.bx-spray__keyItem{ display: inline-flex; align-items: center; gap: 6px; }
.bx-spray__keyDot{ width: 10px; height: 10px; border-radius: 50%; border: 1px solid #fff; }

/* Zone grid */
.bx-zone{ padding: 10px; display: inline-block; }
.bx-zone__svg{ display: block; width: 100%; max-width: 260px; height: auto; }
.bx-zone__cell{ fill: var(--bulb); stroke: var(--line); stroke-width: 1; }
.bx-zone__edge{ stroke: var(--ink-soft); stroke-width: 2; }
.bx-zone__plate{ fill: var(--ink-faint); }
.bx-zone__pitch path{ filter: drop-shadow(0 0 5px currentColor); }
.bx-zone__pitch text{ fill: #fff; font-family: var(--mono); font-size: 13.5px; font-weight: 800; }
/* bx graphics, placed: the game page result row and the scoreboard card */
.nowpanel__resultRow{ display: flex; align-items: center; gap: 16px; margin-top: .8rem; }
.nowpanel__resultRow .nowpanel__result{ margin: 0; }
.nowpanel__sit--big .bx-atbat{ min-width: 0; }
.live .bx-atbat--mini{ align-self: start; }
.score__lineSlot .bx-linescore{ margin-top: 6px; }

/* ---------- Keep the Book: live means live, the perfect game, practice ---------- */

.sbk-perfect{ display: grid; grid-template-columns: 1fr; gap: 12px; align-items: stretch; }
.sbk-goal{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 10px 14px; border-left: 4px solid var(--pos); background: var(--surface-2); border-radius: var(--radius); }
.sbk-goal__label{ font-family: var(--display); font-weight: 800; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
.sbk-goal__text{ color: var(--ink-soft); }
.sbk-perfect__top{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.sbk-perfect__state{ font-family: var(--display); font-weight: 800; font-size: 1.6rem; line-height: 1.05; }
.sbk-perfect__state.is-alive{ color: var(--pos); }
.sbk-perfect__state.is-perfect{ color: var(--pos); }
.sbk-perfect__state.is-lost{ color: var(--neg); }
.sbk-perfect__state.is-wait, .sbk-perfect__state.is-late{ color: var(--ink-soft); }
.sbk-perfect__nums{ display: flex; flex-wrap: wrap; gap: 18px; margin-left: auto; }
.sbk-perfect__stat{ display: grid; gap: 0; text-align: right; }
.sbk-perfect__statvalue{ font-family: var(--mono); font-weight: 700; font-size: 1.25rem; line-height: 1.1; }
.sbk-perfect__statlabel{ font-size: .85rem; color: var(--ink-faint); }
.sbk-track{ display: grid; gap: 6px; }
.sbk-track__row{ display: grid; grid-template-columns: 170px 1fr; gap: 10px; align-items: center; }
.sbk-track__team{ font-size: .88rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbk-track__boxes{ display: flex; flex-wrap: wrap; gap: 3px; }
.sbk-track__box{ width: 15px; height: 15px; border-radius: 3px; border: 1px solid var(--line); background: transparent; }
.sbk-track__box.is-right{ background: var(--pos); border-color: var(--pos); }
.sbk-track__box.is-wrong{ background: var(--neg); border-color: var(--neg); }
.sbk-track__box.is-pending{ border: 2px dashed var(--accent); }
.sbk-track__box.is-given{ background: var(--line); opacity: .5; }
.sbk-track__box.is-now{ border: 2px solid var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.sbk-track__box.is-future{ border-style: dotted; opacity: .55; }
@media (max-width: 640px){
  .sbk-track__row{ grid-template-columns: 1fr; gap: 3px; }
  .sbk-perfect__nums{ margin-left: 0; }
  .sbk-perfect__stat{ text-align: left; }
}

.sbk-cheats{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.sbk-cheats__lead{ font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); margin-right: 4px; }
.sbk-cheat{ display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-soft); }
.sbk-cheat__code{ font-family: var(--mono); font-weight: 800; color: var(--accent); }
.sbk-cheat__words{ font-size: .88rem; color: var(--ink-soft); }
.sbk-cheats__foot{ flex-basis: 100%; font-size: .85rem; color: var(--ink-faint); }

.sbk-nolive{ display: grid; gap: 12px; justify-items: start; padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.sbk-nolive__next{ margin: 0; display: grid; gap: 2px; }
.sbk-nolive__label{ font-size: .85rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); }
.sbk-nolive__time{ font-family: var(--display); font-weight: 800; font-size: 2rem; line-height: 1.05; color: var(--accent); }
.sbk-nolive__teams{ font-weight: 600; }

.sbk-gamerow{ display: grid; gap: 4px; }
.sbk-gamerow .sbk-game{ height: 100%; }
.sbk-replaylink{ justify-self: end; background: none; border: none; padding: 0 2px; color: var(--ink-faint); font: inherit; font-size: .85rem; cursor: pointer; border-bottom: 1px solid transparent; }
.sbk-replaylink:hover{ color: var(--ink); border-bottom-color: var(--accent-line); }
.sbk-replaynote{ margin: 0; font-size: .9rem; color: var(--ink-faint); }
.sbk-tag.is-practice{ border-color: var(--line); color: var(--accent); }

/* An unused square keeps its printed diamond, faint, the way a paper card does. */
.sbk-grid__cell > .sbk-box:only-child .sbk-leg:not(.is-on){ stroke: var(--line-soft, var(--line)); }
.sbk-grid__cell .sbk-box .sbk-box__code:empty{ display: none; }
.sbk-grid__cell > .sbk-box:only-child:not(.is-given):not(.is-mine):not(.is-missed):not(.is-pending) .sbk-diamond{ opacity: .9; }
.stat-tile--streak .bx-streak{ font-size: 1.1rem; padding: 0 10px; line-height: 1.35; }
.hub__tools{ margin: 18px 0 0; display: grid; justify-items: center; gap: 4px; }
.hub__toolsNote{ font-size: .85rem; color: var(--ink-faint); }
/* The card fills its frame instead of stopping after the ninth column. */
.sbk-grid{ min-width: 100%; width: max-content; }
.sbk-grid__row{ grid-template-columns: 190px repeat(var(--sbk-cols, 9), minmax(66px, 1fr)); }

/* THE MOMENT, built-in October set: the trivia card has no pitch to draw. */
.mactual__split.is-text{ grid-template-columns: 1fr; }
.mstage__board.is-nozone{ grid-template-columns: 1fr; }
.msit{ grid-template-columns: minmax(0, 1fr) minmax(8.5rem, auto); }
.msit__fieldwrap{ padding: 1.5rem 0 1.7rem; width: 170px; max-width: 100%; justify-self: center; }
.msit__fieldwrap .msit__field{ width: 100%; max-width: none; }
.mstage__board.is-nozone .msit__fieldwrap{ width: 220px; }
.msit__runner{ max-width: none; }
.msit__runner.is-first{ right: 0; top: 18%; bottom: auto; transform: none; text-align: right; }
.msit__runner.is-third{ left: 0; top: 18%; bottom: auto; transform: none; }

/* ==========================================================================
   SEPT 16: FOUR RULEBOOKS COLUMN MARK, TRAVEL BALL COMPLEX, YOUR LINE BOARD,
   CLINIC DRILL CARDS
   ========================================================================== */

/* ---- One Play, Four Rulebooks: ?book=ncaa marks a column ---- */
.rb-book.is-lead{ box-shadow: 0 0 0 2px var(--college) inset; background: var(--college-soft); }

/* ---- Travel/Youth Baseball: a tournament complex at 7am ---- */
:root{
  --tb-board: #0b1710;
  --tb-board-ink: #f3f8f0;
  --tb-band-small: var(--accent-3);
  --tb-band-mid: var(--accent-2);
  --tb-band-big: var(--accent);
  --tb-band-full: var(--college);
}
.tb-hero{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 18px 28px; align-items: center;
  margin: 6px 0 8px; padding: 22px; border-radius: calc(var(--radius) + 4px);
  background:
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(255,255,255,.025) 46px 92px),
    linear-gradient(160deg, var(--accent-3-soft), transparent 60%), var(--surface);
  border: 1px solid var(--line); border-top: 4px solid var(--accent-3);
}
.tb-hero__eyebrow{ margin: 0; font-family: var(--mono); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-3); font-size: .9rem; }
.tb-hero__title{ margin: 6px 0 10px; font-family: var(--display); font-weight: 900; font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: .95; letter-spacing: -.01em; text-transform: uppercase; }
.tb-hero__blurb{ margin: 0; color: var(--ink-soft); max-width: 52ch; }
.tb-hero__art{ min-width: 0; }
.tb-hero__art--small{ max-width: 420px; justify-self: end; }
.tb-hero .tb-board{ grid-column: 1 / -1; }

.tb-cx{ display: block; width: 100%; height: auto; }
.tb-cx__lot{ fill: var(--bg-2); stroke: var(--line); }
.tb-cx__sun{ fill: var(--bulb); opacity: .85; }
.tb-cx__grass{ fill: var(--accent-3); opacity: .38; }
.tb-cx__dirt{ fill: var(--clay-lit); opacity: .75; }
.tb-cx__line{ fill: none; stroke: var(--chalk); stroke-width: 1.5; opacity: .8; }
.tb-cx__plate{ fill: var(--tb-board); stroke: var(--accent-3); stroke-width: 1.5; }
.tb-cx__num{ fill: var(--tb-board-ink); font-family: var(--mono); font-weight: 800; font-size: 15px; }
.tb-cx__walk{ stroke: var(--line); stroke-width: 10; fill: none; opacity: .55; }
.tb-cx__tent{ fill: var(--chalk); opacity: .85; }
.tb-cx__tentpole{ fill: var(--ink-faint); }
.tb-cx__stand rect:first-child{ fill: var(--surface-3); stroke: var(--line); }
.tb-cx__board{ fill: var(--tb-board); }
.tb-cx__boardtxt{ fill: var(--bulb); font-family: var(--mono); font-weight: 800; font-size: 13px; letter-spacing: .06em; }
.tb-cx__standtxt{ fill: var(--ink); font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: .1em; }
.tb-cx__bags rect{ fill: var(--seam); opacity: .8; }

.tb-board{ background: var(--tb-board); color: var(--tb-board-ink); border-radius: var(--radius); padding: 10px 12px 12px; border: 3px solid #26382c; }
.tb-board__head{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.tb-board__title{ font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 1.1rem; color: var(--tb-board-ink); }
.tb-board__sub{ font-family: var(--mono); font-size: .9rem; color: #9fc3a8; text-transform: uppercase; letter-spacing: .1em; }
.tb-board__row{ display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 6px; }
.tb-board__age{
  display: grid; place-items: center; min-height: 52px; border-radius: 6px; text-decoration: none;
  font-family: var(--mono); font-weight: 800; font-size: 1.45rem; color: #ffe27a;
  background: #13241a; box-shadow: inset 0 -3px 0 var(--band, #46e58a);
  text-shadow: 0 0 10px rgba(255,226,122,.35);
}
.tb-board__age--small{ --band: #46e58a; } .tb-board__age--mid{ --band: #ffd23f; }
.tb-board__age--big{ --band: #ff8f4a; } .tb-board__age--full{ --band: #5ad8f2; }
.tb-board__age:hover, .tb-board__age:focus-visible{ background: #1d3527; }
.tb-board__age.is-here{ background: var(--band); color: #0b1710; text-shadow: none; }

.tb-finder{ margin-top: 18px; }
.tb-block{ margin-top: 30px; }

.tb-bands{ display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.tb-band{
  --band: var(--tb-band-small);
  position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: stretch;
  border-radius: 999px 14px 14px 999px; overflow: hidden; text-decoration: none; color: var(--ink);
  background: var(--surface); border: 2px solid var(--band);
  transition: transform .12s ease, box-shadow .12s ease;
}
a.tb-band:hover{ transform: translateY(-2px); box-shadow: 0 6px 0 -2px var(--band); }
.tb-band--mid{ --band: var(--tb-band-mid); } .tb-band--big{ --band: var(--tb-band-big); } .tb-band--full{ --band: var(--tb-band-full); }
.tb-band__stub{ display: grid; place-content: center; justify-items: center; gap: 2px; padding: 10px 6px 10px 12px; background: var(--band); color: #0b1710; }
.tb-band__age{ font-family: var(--mono); font-weight: 800; font-size: 2rem; line-height: 1; }
.tb-band__flag{ font-family: var(--mono); font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; text-align: center; line-height: 1.05; }
.tb-band__figs{ display: grid; grid-template-columns: 1fr 1.25fr 1.2fr 1fr; padding: 10px 12px 10px 14px; gap: 4px;
  background-image: radial-gradient(circle at 6px 50%, var(--bg) 3px, transparent 3.5px); background-size: 12px 100%; background-repeat: repeat-y; }
.tb-fig{ display: grid; align-content: center; gap: 2px; min-width: 0; }
.tb-fig__v{ font-family: var(--mono); font-weight: 800; font-size: 1.4rem; line-height: 1; white-space: nowrap; }
.tb-fig__l{ font-family: var(--mono); font-size: .85rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .03em; line-height: 1.05; }
.tb-hero > .tb-band{ grid-template-columns: 120px minmax(0, 1fr); }
.tb-hero > .tb-band .tb-band__age{ font-size: 2.8rem; }
.tb-hero > .tb-band .tb-fig__v{ font-size: 2.2rem; }
.tb-legend{ display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; }
.tb-legend__key{ display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .9rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.tb-legend__key::before{ content: ""; width: 22px; height: 10px; border-radius: 999px; background: var(--k); }
.tb-legend__key--small{ --k: var(--tb-band-small); } .tb-legend__key--mid{ --k: var(--tb-band-mid); }
.tb-legend__key--big{ --k: var(--tb-band-big); } .tb-legend__key--full{ --k: var(--tb-band-full); }

.tb-clip{ position: relative; padding: 30px 14px 14px; border-radius: 16px; background: #8a6a45; box-shadow: inset 0 0 0 3px rgba(0,0,0,.12); }
.tb-clip__clamp{ position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 150px; height: 34px; border-radius: 8px 8px 14px 14px;
  background: linear-gradient(#d9dde0, #9aa1a6); box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.tb-clip__sheet{
  list-style: none; margin: 0; padding: 12px 18px; counter-reset: clip; border-radius: 6px;
  background: #fbfaf4; color: #1a2218;
  columns: 2; column-gap: 34px;
  background-image: repeating-linear-gradient(transparent 0 43px, rgba(40,90,160,.16) 43px 44px);
}
.tb-clip__row{ break-inside: avoid; counter-increment: clip; border-bottom: 1px solid rgba(40,90,160,.16); }
.tb-clip__item{ display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 8px; padding: 9px 2px; text-decoration: none; color: inherit; }
.tb-clip__item::before{ content: counter(clip, decimal-leading-zero); grid-row: span 2; font-family: var(--mono); font-weight: 800; font-size: 1.15rem; color: #14874a; }
.tb-clip__name{ font-weight: 700; font-size: 1.05rem; }
.tb-clip__note{ font-size: .9rem; color: #45513f; line-height: 1.35; }
.tb-clip__item:hover .tb-clip__name{ text-decoration: underline; text-decoration-color: #14874a; text-underline-offset: 3px; }

.tb-white{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0; padding: 12px; border-radius: 10px;
  background: #f5f7f8; border: 10px solid #b9c0c4; color: #16202a; }
.tb-white__row{ display: grid; gap: 3px; padding: 12px 14px; text-decoration: none; color: inherit; border-left: 1px dashed #c9d0d4; }
.tb-white__row:first-child{ border-left: 0; }
.tb-white__slot{ font-family: var(--mono); font-weight: 700; font-size: .92rem; color: #c33529; text-transform: uppercase; letter-spacing: .04em; }
.tb-white__name{ font-family: var(--display); font-weight: 800; font-size: 1.35rem; color: #0f5c34; text-transform: uppercase; }
.tb-white__note{ font-size: .95rem; color: #3a4650; }
.tb-white__row:hover .tb-white__name{ text-decoration: underline; text-underline-offset: 3px; }

.tb-bag{ margin-top: 34px; padding: 18px 16px 16px; border-radius: 26px 26px 18px 18px; background: #182019; border: 2px solid #2d3a2f; position: relative; }
.tb-bag::before{ content: ""; position: absolute; left: 22px; right: 22px; top: 8px; height: 4px; border-radius: 4px;
  background: repeating-linear-gradient(90deg, #6d7a70 0 6px, transparent 6px 10px); }
.tb-bag__head{ display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; margin: 6px 4px 12px; }
.tb-bag__title{ margin: 0; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 1.6rem; color: #f3f8f0; }
.tb-bag__aside{ margin: 0; color: #b7c9ba; font-size: .95rem; }
.tb-bag__row{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tb-pocket{ display: grid; justify-items: start; gap: 4px; padding: 14px; border-radius: 12px; text-decoration: none; color: #f3f8f0;
  background: #223024; border: 1px solid #3a4b3c; border-top: 4px solid #46e58a; }
.tb-pocket:hover{ background: #2a3b2c; }
.tb-pocket__icon svg{ width: 42px; height: 42px; fill: none; stroke: #46e58a; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.tb-pocket__name{ font-family: var(--display); font-weight: 800; font-size: 1.2rem; text-transform: uppercase; line-height: 1.05; }
.tb-pocket__line{ font-size: .92rem; color: #c4d5c7; }

@media (max-width: 900px){
  .tb-hero{ grid-template-columns: 1fr; padding: 16px; }
  .tb-hero__art--small{ display: none; }
  .tb-board__row{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tb-bag__row{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb-clip__sheet{ columns: 1; }
}
@media (max-width: 520px){
  .tb-bands{ grid-template-columns: 1fr; }
  .tb-band, .tb-hero > .tb-band{ grid-template-columns: 76px minmax(0, 1fr); }
  .tb-band__age{ font-size: 1.6rem; }
  .tb-hero > .tb-band .tb-band__age{ font-size: 2rem; }
  .tb-fig__v, .tb-hero > .tb-band .tb-fig__v{ font-size: 1.25rem; }
  .tb-fig__l{ font-size: .85rem; }
  .tb-board__age{ min-height: 44px; font-size: 1.2rem; }
  .tb-white{ border-width: 6px; }
  .tb-white__row{ border-left: 0; border-top: 1px dashed #c9d0d4; }
  .tb-white__row:first-child{ border-top: 0; }
  .tb-bag__row{ grid-template-columns: 1fr; }
  .tb-pocket{ grid-template-columns: 42px minmax(0, 1fr); column-gap: 12px; align-items: center; }
  .tb-pocket__icon{ grid-row: span 2; }
}

/* ---- Your Line: equal boxes, and the line as a scoreboard ---- */
.yl-modes .rb-tab{ min-width: 140px; justify-content: center; }
.yl-form .yl-grid{ grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.yl-cell{ display: grid; grid-template-rows: auto 1fr; gap: 0; min-width: 0; height: 88px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); overflow: hidden; }
.yl-cell__label{ padding: 5px 10px 0; font-family: var(--mono); font-weight: 700; font-size: .95rem; letter-spacing: .06em; color: var(--accent-3); }
.yl-cell .yl-input{ width: 100%; height: 100%; min-width: 0; box-sizing: border-box; border: 0; border-radius: 0; background: transparent; padding: 0 10px 4px;
  font-family: var(--mono); font-weight: 800; font-size: 2rem; color: var(--ink); text-align: left; }
.yl-cell .yl-select{ font-size: 1.2rem; appearance: auto; }
.yl-cell:focus-within{ border-color: var(--accent-3); box-shadow: 0 0 0 2px var(--accent-3-soft); }
.yl-cell .yl-input:focus{ outline: none; }

.yl-board{ background: var(--tb-board); color: var(--tb-board-ink); border-radius: calc(var(--radius) + 2px); border: 3px solid #26382c; padding: 14px; display: grid; gap: 12px; }
.yl-board__head{ display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; border-bottom: 2px solid #26382c; padding-bottom: 8px; }
.yl-board__name{ font-family: var(--display); font-weight: 900; font-size: clamp(1.6rem, 3.4vw, 2.4rem); text-transform: uppercase; line-height: 1; color: #f3f8f0; }
.yl-board__level{ font-family: var(--mono); font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: .1em; color: #46e58a; }
.yl-board__strip{ display: flex; flex-wrap: wrap; gap: 6px 20px; }
.yl-board__count{ display: inline-flex; align-items: baseline; gap: 6px; }
.yl-board__countv{ font-family: var(--mono); font-weight: 800; font-size: 1.3rem; color: #f3f8f0; }
.yl-board__countl{ font-family: var(--mono); font-size: .9rem; letter-spacing: .08em; color: #9fc3a8; }
.yl-board__grid{ display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.yl-board__cell{ display: grid; grid-template-rows: auto 1fr; height: 88px; min-width: 0; border-radius: var(--radius-sm); background: #13241a; box-shadow: inset 0 -3px 0 #26382c; overflow: hidden; }
.yl-board__label{ padding: 5px 10px 0; font-family: var(--mono); font-weight: 700; font-size: .95rem; letter-spacing: .06em; color: #9fc3a8; }
.yl-board__value{ align-self: center; padding: 0 10px 4px; font-family: var(--mono); font-weight: 800; font-size: 2rem; line-height: 1; color: #ffe27a; text-shadow: 0 0 12px rgba(255,226,122,.3); white-space: nowrap; }
.yl-board__cell.is-empty .yl-board__value{ color: #53705c; text-shadow: none; }
.yl-match__stats{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.yl-match__stat{ padding: 6px 8px; border-radius: 6px; background: var(--surface-3); }
.yl-match__statvalue{ font-size: 1.3rem; font-weight: 800; }
@media (max-width: 700px){
  .yl-form .yl-grid, .yl-board__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .yl-cell, .yl-board__cell{ height: 74px; }
  .yl-cell .yl-input, .yl-board__value{ font-size: 1.6rem; }
}

/* ---- The clinic: drill cards ---- */
.yl-drills{ gap: 12px; }
.yl-drill{ display: grid; gap: 10px; padding: 14px 16px; border-left: 4px solid var(--accent-3); scroll-margin-top: 90px; }
.yl-drill.is-linked{ box-shadow: 0 0 0 2px var(--accent-3); }
.yl-drill__head{ display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: start; }
.yl-drill__num{ display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent-3); color: var(--bg); font-family: var(--mono); font-weight: 800; font-size: 1.2rem; }
.yl-drill__titles{ display: grid; gap: 2px; }
.yl-drill__name{ margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .01em; }
.yl-drill__fixes{ font-size: .95rem; color: var(--ink-soft); }
.yl-drill__chips{ display: flex; flex-wrap: wrap; gap: 6px; }
.yl-chip{ display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: .9rem; border: 1px solid var(--line); color: var(--ink-soft); }
.yl-chip--reps{ font-family: var(--mono); font-weight: 700; font-size: .95rem; background: var(--accent-2-soft); border-color: transparent; color: var(--ink); }
.yl-steps{ list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: step; }
.yl-step{ counter-increment: step; display: grid; grid-template-columns: 26px 130px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line-soft); }
.yl-step::before{ content: counter(step); font-family: var(--mono); font-weight: 800; color: var(--accent-3); font-size: 1.1rem; }
.yl-step__label{ font-family: var(--mono); font-weight: 700; font-size: .92rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }
.yl-step__text{ color: var(--ink); }
.yl-step.is-mistake::before, .yl-step.is-mistake .yl-step__label{ color: var(--neg); }
.yl-drill__foot{ display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.yl-drill__video, .yl-drill__link{ color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem; border-bottom: 2px solid var(--accent-3); padding-bottom: 1px; }
.yl-drill__video::before{ content: ""; display: inline-block; width: 0; height: 0; margin-right: 7px; border-left: 9px solid var(--seam); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.yl-drill__link{ border-bottom-color: var(--line); color: var(--ink-soft); }
@media (max-width: 600px){
  .yl-step{ grid-template-columns: 22px minmax(0, 1fr); }
  .yl-step__label{ grid-column: 2; }
  .yl-step__text{ grid-column: 2; }
}
/* Beside the strike zone the situation box is narrow: stack the diamond over the scoreboard. */
.mstage__board:not(.is-nozone) .msit{ grid-template-columns: 1fr; }

/* ==========================================================================
   Baseball IQ Map: stops at a glance, and every board redrawn (Sept 16)
   Key idea, cue chips, the numbers strip, the common mistake, the folded
   long version. Board type and strokes use calc(Npx * var(--u)), where --u is
   viewBox units per screen pixel, set by pxTrue() in public/iq.js, so a label
   is the same real size on a 100-unit zone and a 680-unit field.
   ========================================================================== */

.iqidea{
  margin: 0 0 26px; font-family: var(--display); font-weight: 800;
  font-size: clamp(1.45rem, 3.6vw, 2.05rem); line-height: 1.14; letter-spacing: -.01em;
  color: var(--ink); max-width: 40ch; text-wrap: balance;
}

.iqglance{ display: grid; gap: 26px; margin: 0 0 34px; }
.iqglance__title{
  margin: 0 0 10px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em;
  font-size: 0.95rem; font-weight: 700; color: var(--tone);
}
.iqcues__list{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.iqcues__chip{
  border: 1px solid var(--line); border-left: 3px solid var(--tone); background: var(--surface);
  border-radius: var(--radius-sm); padding: 7px 13px; font-weight: 600; font-size: 0.98rem; line-height: 1.3;
}

.iqnums__grid{ display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.iqnums__card{
  display: grid; gap: 4px; align-content: start; padding: 16px 16px 15px;
  border: 1px solid var(--line); border-top: 3px solid var(--tone); border-radius: var(--radius);
  background: var(--surface);
}
.iqnums__fig{ font-family: var(--mono); font-weight: 800; font-size: 2rem; line-height: 1.05; letter-spacing: -.01em; color: var(--ink); }
.iqnums__label{ font-weight: 700; font-size: 0.98rem; line-height: 1.3; }
.iqnums__why{ font-size: 0.92rem; line-height: 1.45; color: var(--ink-soft); }

.iqmistake{
  display: grid; gap: 4px; padding: 14px 18px; border-radius: var(--radius);
  border: 1px solid var(--line); border-left: 4px solid var(--neg); background: var(--surface);
}
.iqmistake__label{
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; font-size: 0.9rem;
  font-weight: 700; color: var(--neg);
}
.iqmistake__text{ margin: 0; line-height: 1.5; font-size: 1.02rem; max-width: 70ch; }

.iqlong{ margin: 30px 0 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.iqlong__summary{
  cursor: pointer; padding: 14px 18px; font-family: var(--display); font-weight: 800; font-size: 1.15rem;
  list-style-position: inside;
}
.iqlong[open] .iqlong__summary{ border-bottom: 1px solid var(--line); }
.iqlong .iqwords{ padding: 18px; margin: 0; }
.iqwords__title{ font-size: 0.9rem; }

/* ---- the boards ---- */
.iqfilm__caption{ font-size: 1.12rem; }
.iqfilm__key{ font-size: 0.95rem; }
.iqfilm__key::before{ top: .42em; width: 10px; height: 10px; }

.iqz{ max-width: 400px; margin: 0 auto; overflow: visible; }
.iqz__bg{ fill: var(--bg-2); }
.iqz text{ font-family: var(--mono); font-weight: 600; font-size: calc(14px * var(--u, .28)); letter-spacing: .02em; }
.iqz__caption{ fill: var(--ink-faint); text-transform: none; letter-spacing: .06em; }
.iqz__label{ fill: var(--ink-faint); }
.iqz__box{ fill: none; stroke: var(--ink-faint); stroke-opacity: .45; stroke-width: calc(1.5px * var(--u, .28)); stroke-dasharray: 2 1.5; }
.iqz__zone{ fill: rgba(255,255,255,.04); stroke: var(--ink-soft); stroke-opacity: .7; stroke-width: calc(2px * var(--u, .28)); }
.iqz__grid{ stroke: var(--ink-faint); stroke-opacity: .35; stroke-width: calc(1px * var(--u, .28)); }
.iqz__plate{ fill: var(--ink-faint); fill-opacity: .28; stroke: var(--ink-faint); stroke-opacity: .6; stroke-width: calc(1.5px * var(--u, .28)); }
.iqz__path{ stroke-width: calc(2.5px * var(--u, .28)); opacity: .85; }
.iqz__ball{ stroke: var(--surface); stroke-width: calc(1.5px * var(--u, .28)); }
.iqz__tunnel circle{ stroke: var(--accent-2); stroke-width: calc(2px * var(--u, .28)); stroke-dasharray: 1.6 1.2; }
.iqz__tunnel text{ fill: var(--accent-2); font-weight: 700; }

.iqfilm--arc .iqfilm__stage{ max-width: 720px; margin: 0 auto; }
.iqa text{ font-family: var(--mono); font-weight: 600; font-size: calc(14px * var(--u, 1)); }
.iqa__grid{ stroke: var(--ink-faint); stroke-opacity: .18; stroke-width: calc(1px * var(--u, 1)); }
.iqa__ground{ stroke: var(--ink-soft); opacity: .6; stroke-width: calc(2px * var(--u, 1)); }
.iqa__tick{ stroke: var(--ink-faint); opacity: .6; stroke-width: calc(1.5px * var(--u, 1)); }
.iqa__ticklabel, .iqa__fencelabel{ fill: var(--ink-faint); }
.iqa__fence{ stroke: var(--ink-soft); opacity: .7; stroke-width: calc(3px * var(--u, 1)); }
.iqa__path{ stroke-width: calc(2.5px * var(--u, 1)); opacity: .9; }
.iqa__ball{ r: calc(5px * var(--u, 1)); stroke: var(--surface); stroke-width: calc(1.5px * var(--u, 1)); }

.iqfilm--bars .iqfilm__stage{ background: transparent; overflow: visible; }
.iqbars{ display: grid; gap: 10px; padding: 4px 0; }
.iqbars__row{ display: grid; grid-template-columns: minmax(6rem, 15rem) 1fr 6.5rem; gap: 14px; align-items: center; }
.iqbars__label{ font-size: 0.98rem; color: var(--ink-soft); text-align: right; line-height: 1.25; }
.iqbars__track{ position: relative; height: 22px; border-radius: 4px; background: var(--surface-2); }
.iqbars__track::before{
  content: ""; position: absolute; left: var(--zero); top: -4px; bottom: -4px; width: 2px; margin-left: -1px;
  background: var(--ink-faint); opacity: .7;
}
.iqbars__bar{ position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--iq-flat); transition: width .9s cubic-bezier(.4,0,.2,1); }
.iqbars__row.is-good .iqbars__bar{ background: var(--iq-good); }
.iqbars__row.is-bad .iqbars__bar{ background: var(--iq-bad); }
.iqbars__value{ font-family: var(--mono); font-weight: 700; font-size: 1.05rem; color: var(--ink); white-space: nowrap; }
@media (max-width: 620px){
  .iqbars{ gap: 12px; }
  .iqbars__row{ grid-template-columns: 1fr auto; gap: 4px 10px; }
  .iqbars__label{ grid-column: 1 / -1; text-align: left; }
}

.iqf__disc{ r: calc(15px * var(--u, 1.5)); stroke-width: calc(2px * var(--u, 1.5)); }
.iqf__man.is-good .iqf__disc, .iqf__man.is-bad .iqf__disc, .iqf__man.is-move .iqf__disc{ stroke-width: calc(3px * var(--u, 1.5)); }
.iqf__pos{ font-family: var(--mono); font-weight: 700; font-size: calc(13px * var(--u, 1.5)); }
.iqf__ball{ r: calc(5px * var(--u, 1.5)); stroke-width: calc(1.5px * var(--u, 1.5)); }
.iqf__throw{ stroke-width: calc(2.5px * var(--u, 1.5)); stroke-dasharray: calc(6px * var(--u, 1.5)) calc(4px * var(--u, 1.5)); }
.iqspot--field .iqspot__pick{ r: calc(7px * var(--u, 1.5)); }
.iqspot__pick{ stroke: #fff; stroke-width: calc(1.5px * var(--u, .28)); }
.iqspot__goal{ stroke-width: calc(2px * var(--u, .28)); stroke-dasharray: calc(5px * var(--u, .28)) calc(4px * var(--u, .28)); }
.iqspot--field .iqspot__goal{ stroke-width: calc(2.5px * var(--u, 1.5)); stroke-dasharray: calc(6px * var(--u, 1.5)) calc(4px * var(--u, 1.5)); }
.iqspot--zone{ max-width: 400px; }

.iqbases__outsLabel{ font-size: 0.9rem; }
.iqbases__reLabel{ font-size: 0.86rem; }
.iqbases__note{ font-size: 0.92rem; }

.iqmap__toggle{ white-space: nowrap; }
.iqm-key__text{ font-size: 23px; font-weight: 700; }
.iqm-node__label{ font-size: 32px; letter-spacing: 0; }
@media (max-width: 700px){ .yl-cell .yl-select{ font-size: .95rem; padding: 0 4px 4px; } }

/* Game page, How It Ended / At the Plate head: title and matchup beside the at-bat card */
.nowpanel__head{ align-items: flex-start; margin-bottom: 1rem; }
.nowpanel__lead{ display: grid; gap: .9rem; flex: 1 1 320px; min-width: 0; }
.nowpanel__lead .nowpanel__matchup{ margin: 0; }

/* ---- Sept 16: Barlow spacing ----------------------------------------------
   The old negative tracking was tuned for Libre Franklin. Barlow is already
   set tight, so the same tracking ran words together. Body copy goes back to
   the face's own spacing with a touch more room between words. */
body, p, li, dd, td, label, input, textarea, button{ letter-spacing: 0 !important; }
p, li, dd{ word-spacing: .05em; }

/* Big Shoulders only where it is big enough to read as a poster. */
h1{ font-family: var(--display-big); letter-spacing: .005em !important; }
h2{ font-family: var(--body); font-weight: 800; letter-spacing: -.01em; }

/* ---- Sept 16: use the screen ------------------------------------------------
   Connor's read after the type reset: bunchy. Pages were capped at 1180 to
   1460 and sat as a column on a wide monitor with the cards packed tight.
   Every page column now grows to 1680 with side gutters that scale with the
   window, and the common grids and cards get more room between them. */
:root{ --page-max: 1840px; --gutter: clamp(16px, 3.2vw, 56px); }
.section-page, .scores-page, .game-page, .home, .mini-search, .acct,
.binder, .nine, .du, .sitefoot__inner, .sitefoot__base,
.body--news .section-page, .body--rulebooks .section-page, .body--duel .section-page{
  max-width: var(--page-max) !important;
  padding-left: var(--gutter) !important; padding-right: var(--gutter) !important;
}
.section-page > * + *, .home > * + *{ margin-top: clamp(28px, 3vw, 52px); }
[class*="__grid"], [class*="cards"], [class$="-grid"]{ gap: clamp(14px, 1.6vw, 26px); }
[class*="card"]:not(svg):not(canvas):not([class*="__"]){ padding: clamp(16px, 1.4vw, 24px); }
.sitehead{ padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---- Sept 16: less robotic lettering -------------------------------------
   What read as robotic: small labels in a condensed face, set in capitals and
   spaced out like a readout, and whole sentences shouted in capitals. Labels
   are now Barlow at a normal weight with light tracking, sub-heads are Barlow
   bold rather than condensed, and anything long enough to be a sentence is in
   sentence case. Condensed type stays only where width is the point: the name
   strip on a card and columns of figures. */
[class*="label"], [class*="eyebrow"], [class*="kicker"], [class*="__k"],
[class*="caption"], [class*="__tag"], [class*="__meta"], small{
  font-family: var(--body) !important;
  letter-spacing: .04em !important;
}
h3, h4{ font-family: var(--body); font-weight: 700; letter-spacing: -.005em; }
p[class], [class*="__sub"], [class*="__lede"], [class*="__blurb"], [class*="__note"], [class*="__intro"]{
  text-transform: none !important; letter-spacing: 0 !important; font-family: var(--body) !important;
}
.bec__name{ font-family: "Barlow Condensed", "Barlow", sans-serif !important; }

/* ---- Sept 16: Batter's Eye Card, readable at every size -------------------
   The card is always a dark object, in either site theme, so it sets its own
   ink instead of borrowing --ink (which is near-black in the light theme and
   put a dark name on a dark band). The band is the club color pushed toward
   black, the name is near-white with a shadow, and a scrim darkens the bottom
   of the photograph so the band never butts into a bright uniform. The
   refractor stays under all of it. */
.bec{
  --card-ink: #F7F4EC; --card-soft: rgba(247,244,236,.82); --card-faint: rgba(247,244,236,.62);
  color: var(--card-ink);
}
.bec__art img{ object-position: var(--focus, 50% 25%); }
.bec__art::after{
  z-index: 2;
  background: linear-gradient(to bottom, rgba(0,0,0,.30) 0 12%, transparent 30%, transparent 70%, rgba(0,0,0,.55) 100%);
}
.bec__art.is-artless{ background: radial-gradient(90% 70% at 50% 30%, color-mix(in srgb, var(--a) 45%, #1a1c1f), #0B0C0D); }
.bec__band{
  background: linear-gradient(180deg, color-mix(in srgb, var(--a) 52%, #050607), #060708);
}
.bec__name{
  color: var(--card-ink) !important;
  letter-spacing: -.005em; line-height: 1;
  text-shadow: 0 1px 0 rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.45);
  white-space: nowrap; overflow: hidden; text-overflow: clip;
}
.bec__name--long{ letter-spacing: -.01em; }
.bec__name--xlong{ letter-spacing: -.012em; }
.bec__name--xxlong{ font-size: .98rem; white-space: normal; line-height: 1.02; }
.bec__club{ color: var(--card-soft); }
.bec__yr{ color: var(--card-ink); }
.bec__pos{ font-size: .9em; line-height: 1.35; }
.bec__headline{ color: var(--card-soft); }
.bec__ovr{ font-size: 2.05rem; box-shadow: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,.55)); }
.bec__mark{ width: 30px; height: 30px; }
/* the back */
.bec__bname{ color: var(--card-ink); }
.bec__bsub{ color: var(--card-soft); }
.bec__r-label{ color: var(--card-soft); font-size: .84rem; }
.bec__r-val{ color: var(--card-ink); }
.bec__r--hi .bec__r-val{ color: #6FE39A; }
.bec__r--hi .bec__r-bar i{ background: #6FE39A; }
.bec__r--lo .bec__r-val{ color: var(--card-faint); }
.bec__r-bar{ background: rgba(255,255,255,.14); }
.bec__stat b{ color: var(--card-ink); }
.bec__stat span{ color: var(--card-faint); }
.bec__credit{ color: rgba(247,244,236,.58); overflow-wrap: anywhere; }
/* small cards: surname only when the full name will not fit, and a floor on
   the type so a 100px card still says who it is */
.bec--mini .bec__name--xlong .bec__first{ display: none; }
.bec--mini .bec__name, .bec--mini .bec__name--long, .bec--mini .bec__name--xlong{
  font-size: max(12px, calc(var(--w) * .118)); letter-spacing: 0; overflow-wrap: normal;
}
.bec--mini .bec__meta{ font-size: max(11px, calc(var(--w) * .075)); }
.bec--mini .bec__metaovr{ font-size: max(13px, calc(var(--w) * .11)); }
.bec--mini .bec__yr{ color: var(--card-soft); }
.bec__name.is-surname .bec__first{ display: none; }
.bec__creditfile{ display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bec__side--back .bec__ratings{ min-height: 0; overflow: hidden; }

/* ==========================================================================
   SEPT 16: EVERY PAGE IN THE TRAVEL FRONT AND BINDER LOOK
   Connor picked the travel front (the complex at 7am, the board of divisions,
   wristbands, clipboard, whiteboard, coach's bag) and The Binder (name plates
   with rivets, poster lettering) as the look for the whole site. Not a
   redesign: every room keeps its own color and its own furniture. What
   carries over is the language:
     1. the banner is a poster: huge Big Shoulders capitals beside a drawing
        of the thing the page is about (public/heroArt.js)
     2. ways into a section are pockets in a coach's bag
     3. mode switches are binder name plates, riveted
     4. headline figures sit on a dark board in bulb lettering
     5. numbered how-it-works lists are a sheet on a clipboard
   Always-dark objects (boards, chalkboard) and always-light ones (paper,
   whiteboard) set their own ink, the way the travel board does, so they read
   the same in both themes.
   ========================================================================== */
:root{
  --obj-board: #0b1710; --obj-board-edge: #26382c; --obj-board-ink: #f3f8f0; --obj-board-sub: #9fc3a8;
  --obj-bulb: #ffe27a; --obj-paper: #fbfaf4; --obj-paper-ink: #1a2218; --obj-paper-soft: #6b7566;
  --obj-rule: rgba(40,90,160,.2); --obj-wood: #8a6a45; --obj-steel: #b9c0c4;
}
body.body--ll{ --obj-board: #0a0f22; --obj-board-edge: #26305a; --obj-board-sub: #aab6e0; }
body[data-section="tools"]{ --obj-board: #120d24; --obj-board-edge: #2f2550; --obj-board-sub: #c3b5ee; }

/* ---- 1. the poster banner ---- */
.sechero.sechero--art{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 18px clamp(20px, 3vw, 44px); align-items: center;
  padding: clamp(20px, 2.2vw, 30px);
  border-top-width: 4px;
}
.sechero--art .sechero__inner{ padding-left: clamp(4px, 1vw, 16px); }
.sechero__title{
  font-family: var(--display-big) !important; font-weight: 900 !important;
  text-transform: uppercase; letter-spacing: .005em !important;
  font-size: clamp(2.3rem, 4.6vw, 4.1rem) !important; line-height: .93 !important;
  text-wrap: balance;
}
.sechero__eyebrow{ font-weight: 800 !important; font-size: .95rem !important; }
.sechero__blurb{ font-size: 1.06rem; line-height: 1.55; max-width: 60ch; }
.sechero__art{ min-width: 0; align-self: stretch; display: grid; align-items: center; }
.sechero__art .ha{ display: block; width: 100%; height: auto; max-height: 340px; }
.sechero--withcrest .sechero__art{ display: none; }
.sechero--withcrest.sechero--art{ grid-template-columns: 1fr; }
/* The seam arcs behind a hero would run through the drawing. */
.sechero--art::before, .sechero--art::after{ display: none !important; }
@media (max-width: 900px){
  .sechero.sechero--art{ grid-template-columns: 1fr; }
  .sechero__art .ha{ max-height: 230px; }
}
@media (max-width: 520px){ .sechero__art{ display: none; } }

/* Page titles that are not section banners still read as posters. */
.clubhouse__title, .team-hero__name, .teamhero__name, .hero__name, .scores-page > h1, .scores__title, .hs-title, .mo-title{
  text-transform: uppercase; letter-spacing: .005em !important; line-height: .95;
}

/* ---- the drawing's paint ---- */
.ha-lot{ fill: var(--bg-2); stroke: var(--line); }
.ha-grass, .ha-fieldgrass{ fill: var(--accent-3); opacity: .38; }
.ha-hill{ fill: var(--accent-3); opacity: .28; }
.ha-mow{ fill: none; stroke: var(--grass-dark); stroke-width: 15; opacity: .22; }
.ha-dirt{ fill: var(--clay-lit); opacity: .78; }
.ha-infield{ fill: var(--accent-3); opacity: .42; }
.ha-chalk{ fill: none; stroke: var(--chalk); stroke-width: 2; opacity: .85; }
.ha-base{ fill: var(--chalk); }
.ha-mound{ fill: var(--clay-lit); stroke: var(--chalk); stroke-width: 1; opacity: .9; }
.ha-stands{ fill: none; stroke: var(--surface-3); stroke-width: 44; }
.ha-seatrow{ fill: none; stroke: var(--line); stroke-width: 2; stroke-dasharray: 5 5; }
.ha-wall{ fill: none; stroke: var(--tone, var(--accent)); stroke-width: 5; }
.ha-pole{ fill: var(--ink-faint); }
.ha-light{ fill: var(--obj-bulb); filter: drop-shadow(0 0 4px rgba(255,226,122,.8)); }
.ha-board{ fill: var(--obj-board); }
.ha-board-edge{ fill: none; stroke: var(--obj-board-edge); stroke-width: 2; }
.ha-boardline{ stroke: var(--obj-board-edge); stroke-width: 3; }
.ha-bulb{ fill: var(--obj-bulb); font-family: var(--mono); font-weight: 800; font-size: 34px; letter-spacing: .06em; filter: drop-shadow(0 0 6px rgba(255,226,122,.45)); }
.ha-bulb--xl{ font-size: 64px; }
.ha-boardsub{ fill: var(--obj-board-sub); font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: .12em; }
.ha-tone-bar{ fill: var(--tone, var(--accent)); }
.ha-dim{ opacity: .5; }
.ha-ink-bar{ fill: var(--ink-faint); opacity: .55; }
.ha-paper{ fill: var(--obj-paper); stroke: rgba(0,0,0,.12); }
.ha-rule{ stroke: var(--obj-rule); stroke-width: 1.5; }
.ha-rulethick{ stroke: var(--obj-paper-ink); stroke-width: 3; }
.ha-print{ fill: var(--obj-paper-soft); opacity: .55; }
.ha-head{ fill: var(--obj-paper-ink); opacity: .85; }
.ha-mast{ fill: var(--obj-paper-ink); font-family: var(--display-big); font-weight: 900; font-size: 34px; letter-spacing: .04em; }
.ha-mast--sm{ font-size: 22px; }
.ha-photo{ fill: color-mix(in srgb, var(--tone, var(--accent)) 30%, #d9dccf); }
.ha-chartline{ fill: none; stroke: var(--obj-paper-ink); stroke-width: 3; stroke-linejoin: round; }
.ha-hanger{ fill: none; stroke: var(--ink-faint); stroke-width: 3; }
.ha-jersey{ fill: var(--surface); stroke: var(--line); stroke-width: 2; }
.ha-piping{ fill: none; stroke: var(--tone, var(--accent)); stroke-width: 4; }
.ha-name{ fill: var(--ink-soft); opacity: .6; }
.ha-jnum{ fill: var(--tone, var(--accent)); font-family: var(--display-big); font-weight: 900; font-size: 72px; }
.ha-cardstock{ fill: #14161a; stroke: #c9ccd1; stroke-width: 3; }
.ha-cardstock--1{ stroke: var(--obj-bulb); }
.ha-cardstock--2{ stroke: var(--tone, var(--accent)); }
.ha-cardphoto{ fill: #2f5f7e; }
.ha-silo{ fill: rgba(0,0,0,.5); }
.ha-idcard .ha-silo, .ha-photo + .ha-silo{ fill: rgba(0,0,0,.35); }
.ha-plate{ fill: var(--obj-bulb); }
.ha-platenum{ fill: #14161a; font-family: var(--mono); font-weight: 800; font-size: 17px; }
.ha-cardname{ fill: #f3f4ee; }
.ha-cardsub{ fill: rgba(243,244,238,.45); }
.ha-sun{ fill: var(--bulb); opacity: .85; }
.ha-blanket{ opacity: .9; }
.ha-blanket--a{ fill: var(--accent-2, #ef4b52); } .ha-blanket--b{ fill: var(--accent, #3f7ae0); } .ha-blanket--c{ fill: var(--bulb); }
.ha-stand-block{ fill: var(--surface-3); stroke: var(--line); }
.ha-seatline{ stroke: var(--line); stroke-width: 2; }
.ha-roof{ fill: var(--ink-faint); opacity: .7; }
.ha-flag{ fill: var(--tone, var(--accent)); }
.ha-bunt--0{ fill: #d8313a; } .ha-bunt--1{ fill: #f4f4f0; } .ha-bunt--2{ fill: #2a4fa8; }
.ha-bookcover{ fill: color-mix(in srgb, var(--tone, var(--accent)) 60%, #111); }
.ha-gutter{ stroke: rgba(0,0,0,.2); stroke-width: 3; }
.ha-ribbon{ fill: #c8102e; }
.ha-rosette{ fill: var(--obj-bulb); stroke: #b8860b; stroke-width: 4; stroke-dasharray: 6 3; }
.ha-rosettenum{ fill: #3a2a02; font-family: var(--display-big); font-weight: 900; font-size: 36px; }
.ha-brick{ fill: color-mix(in srgb, #a4553a 70%, var(--surface)); }
.ha-brickline{ stroke: rgba(0,0,0,.18); stroke-width: 2; }
.ha-arch{ fill: var(--bg); opacity: .75; }
.ha-walk{ fill: var(--surface-3); }
.ha-pennant--0{ fill: var(--tone, var(--accent)); } .ha-pennant--1{ fill: #d8313a; } .ha-pennant--2{ fill: var(--bulb); } .ha-pennant--3{ fill: #6a44c4; }
.ha-pennant-text{ fill: rgba(255,255,255,.75); }
.ha-bracket{ fill: none; stroke: var(--tone, var(--accent)); stroke-width: 3; opacity: .85; }
.ha-trophy{ fill: var(--obj-bulb); stroke: #b8860b; stroke-width: 2; }
.ha-trophy-handle{ fill: none; stroke: var(--obj-bulb); stroke-width: 5; }
.ha-ticket{ fill: var(--obj-paper); stroke: rgba(0,0,0,.14); }
.ha-perf{ stroke: var(--obj-paper-soft); stroke-width: 2; stroke-dasharray: 3 5; }
.ha-perfv{ stroke: var(--obj-paper-soft); stroke-width: 2; stroke-dasharray: 3 5; }
.ha-ticketday{ fill: #c33529; font-family: var(--mono); font-weight: 800; font-size: 26px; letter-spacing: .08em; }
.ha-ticketnum{ fill: var(--obj-paper-ink); font-family: var(--display-big); font-weight: 900; font-size: 40px; }
.ha-ticketnum--sm{ font-size: 30px; fill: #0f5c34; }
.ha-step{ fill: var(--surface-3); stroke: var(--line); }
.ha-step--top{ fill: var(--tone, var(--accent)); }
.ha-steptext{ fill: var(--ink); font-family: var(--display-big); font-weight: 900; font-size: 20px; letter-spacing: .04em; }
.ha-step--top + .ha-steptext{ fill: var(--bg); }
.ha-route{ fill: none; stroke: var(--obj-bulb); stroke-width: 3; stroke-dasharray: 8 7; }
.ha-ball{ fill: #fbfaf4; stroke: rgba(0,0,0,.2); }
.ha-ballseam{ fill: none; stroke: #d8313a; stroke-width: 2; }
.ha-rack{ fill: var(--obj-wood); }
.ha-bat{ stroke: rgba(0,0,0,.25); stroke-width: 1.5; }
.ha-bat--a{ fill: #1b1f24; } .ha-bat--b{ fill: #c9ccd1; } .ha-bat--c{ fill: var(--tone, var(--accent)); } .ha-bat--d{ fill: #d8313a; }
.ha-bat-band{ fill: var(--obj-bulb); opacity: .9; }
.ha-grip{ fill: #2d2d2d; }
.ha-knob{ fill: #111; }
.ha-wbframe{ fill: var(--obj-steel); }
.ha-wb{ fill: #f5f7f8; }
.ha-wbline{ stroke: #c9d0d4; stroke-width: 2; stroke-dasharray: 6 5; }
.ha-marker-red{ fill: #c33529; font-family: var(--mono); font-weight: 800; font-size: 26px; letter-spacing: .06em; }
.ha-marker-green{ fill: #0f5c34; font-family: var(--display-big); font-weight: 900; font-size: 24px; }
.ha-marker-ring{ fill: none; stroke: #0f5c34; stroke-width: 3; }
.ha-marker-bar{ fill: #3a4650; opacity: .45; }
.ha-marker-x{ stroke: #c33529; stroke-width: 4; stroke-linecap: round; }
.ha-marker{ fill: #0f5c34; } .ha-marker-cap{ fill: #0a3f24; }
.ha-clip{ fill: var(--obj-wood); }
.ha-clamp{ fill: #b9c0c4; stroke: #8b9398; stroke-width: 2; }
.ha-cardline-num{ fill: #14874a; font-family: var(--mono); font-weight: 800; font-size: 16px; }
.ha-cardline-pos{ fill: var(--obj-paper-ink); font-family: var(--mono); font-weight: 800; font-size: 15px; }
.ha-arrow{ fill: none; stroke: var(--tone, var(--accent)); stroke-width: 4; stroke-dasharray: 10 8; }
.ha-arrowhead{ fill: var(--tone, var(--accent)); }
.ha-pos{ fill: var(--obj-board); stroke: var(--tone, var(--accent)); stroke-width: 3; }
.ha-posnum{ fill: var(--obj-board-ink); font-family: var(--mono); font-weight: 800; font-size: 14px; }
.ha-run{ stroke: var(--tone, var(--accent)); stroke-width: 3; stroke-dasharray: 6 5; }
.ha-ballpath{ fill: none; stroke: var(--obj-bulb); stroke-width: 3; }
.ha-woodframe{ fill: var(--obj-wood); }
.ha-chalkboard{ fill: #1f3a2b; }
.ha-chalkline{ fill: none; stroke: rgba(255,255,255,.55); stroke-width: 3; }
.ha-chalkmark{ fill: none; stroke: #f4f4ee; stroke-width: 4; stroke-linecap: round; }
.ha-chalkarrow{ fill: none; stroke: #ffe27a; stroke-width: 3; stroke-dasharray: 8 6; }
.ha-chalktext{ fill: rgba(255,255,255,.8); font-family: var(--display-big); font-weight: 800; font-size: 22px; letter-spacing: .08em; }
.ha-tray{ fill: #6d5236; } .ha-chalkstick{ fill: #f4f4ee; }
.ha-routewide{ fill: none; stroke: var(--surface-3); stroke-width: 22; stroke-linejoin: round; stroke-linecap: round; }
.ha-routeline{ fill: none; stroke: var(--tone, var(--accent)); stroke-width: 4; stroke-dasharray: 10 8; stroke-linejoin: round; }
.ha-stop{ fill: var(--surface); stroke: var(--line); stroke-width: 3; }
.ha-stop--done{ fill: var(--tone, var(--accent)); stroke: none; }
.ha-check{ fill: none; stroke: var(--bg); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.ha-lock{ fill: var(--ink-faint); } .ha-lockarc{ fill: none; stroke: var(--ink-faint); stroke-width: 2.5; }
.ha-signplate{ fill: var(--obj-board); stroke: var(--tone, var(--accent)); stroke-width: 2; }
.ha-signtext{ fill: var(--obj-board-ink); font-family: var(--display-big); font-weight: 900; font-size: 24px; letter-spacing: .06em; }
.ha-compass{ fill: none; stroke: var(--line); stroke-width: 3; stroke-dasharray: 3 6; }
.ha-compassneedle{ fill: var(--tone, var(--accent)); opacity: .8; }
.ha-book{ stroke: rgba(0,0,0,.3); stroke-width: 2; }
.ha-book--a{ fill: #c2571a; } .ha-book--b{ fill: #1b3a8f; } .ha-book--c{ fill: #0d8499; } .ha-book--d{ fill: #14874a; }
.ha-bookband{ fill: rgba(255,226,122,.75); }
.ha-spine{ fill: #fbfaf4; font-family: var(--display-big); font-weight: 900; font-size: 20px; letter-spacing: .06em; }
.ha-cell{ fill: none; stroke: rgba(40,90,160,.3); stroke-width: 1.5; }
.ha-celldiamond{ fill: none; stroke: rgba(40,90,160,.35); stroke-width: 1.5; }
.ha-cellfill{ fill: #1a2218; opacity: .8; }
.ha-cellpath{ fill: none; stroke: #1a2218; stroke-width: 3; }
.ha-pencil{ fill: #2a2f33; font-family: var(--mono); font-weight: 800; font-size: 15px; }
.ha-pencilbody{ fill: var(--obj-bulb); stroke: #b8860b; }
.ha-stamp-ok{ fill: none; stroke: #14874a; stroke-width: 3; } .ha-stamp-okmark{ fill: none; stroke: #14874a; stroke-width: 3.5; stroke-linecap: round; }
.ha-stamp-no{ fill: none; stroke: #c33529; stroke-width: 3; } .ha-stamp-nomark{ stroke: #c33529; stroke-width: 3.5; stroke-linecap: round; }
.ha-idcard{ fill: var(--surface); stroke: var(--line); stroke-width: 2; }
.ha-meter{ fill: var(--surface-3); }
.ha-rail{ fill: var(--obj-wood); }
.ha-rung{ fill: var(--surface-3); stroke: var(--line); }
.ha-rung--on{ fill: var(--tone, var(--accent)); stroke: none; }
.ha-rungtext{ fill: var(--ink-soft); font-family: var(--mono); font-weight: 800; font-size: 13px; letter-spacing: .08em; }
.ha-rung--on + .ha-rungtext{ fill: var(--bg); }
.ha-locker{ fill: var(--surface-3); stroke: var(--line); stroke-width: 2; }
.ha-locker--on{ fill: color-mix(in srgb, var(--tone, var(--accent)) 22%, var(--surface)); stroke: var(--tone, var(--accent)); }
.ha-nameplate{ fill: #d9d3c2; stroke: rgba(0,0,0,.2); }
.ha-nametext{ fill: #1a2218; font-family: var(--mono); font-weight: 800; font-size: 13px; letter-spacing: .08em; }
.ha-vent{ stroke: var(--line); stroke-width: 4; stroke-linecap: round; }
.ha-wall-panel{ fill: var(--surface-2); }
.ha-desk{ fill: var(--obj-wood); } .ha-desk-leg{ fill: #6d5236; }
.ha-phone{ fill: #d8313a; } .ha-handset{ fill: #a8232b; }
.ha-cap{ fill: var(--tone, var(--accent)); } .ha-capbrim{ fill: color-mix(in srgb, var(--tone, var(--accent)) 70%, #000); }
@media (prefers-color-scheme: light){
  .ha-grass, .ha-fieldgrass{ opacity: .45; }
  .ha-chalk{ stroke: #ffffff; opacity: 1; }
  .ha-base{ fill: #ffffff; stroke: rgba(0,0,0,.2); }
  .ha-arch{ opacity: .35; }
}

/* ---- 2. ways in, as pockets in the coach's bag ---- */
.door, .toolcard{
  border-top: 4px solid var(--door-tone, var(--accent)) !important;
  border-radius: 12px !important;
}
.door__name, .toolcard__name{
  font-family: var(--display-big) !important; font-weight: 900 !important;
  text-transform: uppercase; letter-spacing: .02em !important;
  font-size: clamp(1.45rem, 1.9vw, 1.8rem) !important; line-height: 1 !important;
}
.door::before{
  content: ""; position: absolute; left: 16px; right: 16px; top: 7px; height: 3px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 10px);
}
.door{ padding-top: 22px !important; }

/* ---- 3. mode switches, as binder name plates ---- */
.rb-tabs, .rtp-tabs{
  display: grid !important; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px !important;
  padding: 14px 14px 0; border-top: 7px solid var(--surface-3); border-radius: 5px 5px 0 0;
}
.rb-tab, .rtp-tab{
  position: relative; display: grid !important; gap: 4px; padding: 14px 42px 12px !important; text-align: center !important;
  background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important;
  border: 1px solid var(--line) !important; border-radius: 4px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -2px 0 rgba(0,0,0,.16), 0 3px 0 rgba(0,0,0,.22);
  transition: transform .12s ease, border-color .12s ease;
}
.rb-tab::before, .rb-tab::after, .rtp-tab::before, .rtp-tab::after{
  content: ""; position: absolute; top: 50%; width: 11px; height: 11px; margin-top: -6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--ink-faint), var(--line) 62%, var(--line-soft));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.28);
}
.rb-tab::before, .rtp-tab::before{ left: 13px; }
.rb-tab::after, .rtp-tab::after{ right: 13px; }
.rb-tab__label, .rtp-tab__label{
  justify-content: center;
  font-family: var(--display-big) !important; font-weight: 900 !important; font-size: clamp(1.35rem, 2vw, 1.9rem) !important;
  letter-spacing: .07em !important; text-transform: uppercase; line-height: 1 !important; color: var(--ink) !important;
}
.rb-tab__note, .rtp-tab__note{ font-size: .9rem !important; color: var(--ink-faint) !important; }
.rb-tab:hover, .rtp-tab:hover{ border-color: var(--accent-line) !important; transform: translateY(-1px); }
.rb-tab.is-on, .rtp-tab.is-on{
  background: linear-gradient(180deg, var(--accent-hot), var(--accent)) !important; border-color: var(--accent-hot) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -2px 0 rgba(0,0,0,.14), 0 3px 0 rgba(0,0,0,.3);
}
.rb-tab.is-on .rb-tab__label, .rb-tab.is-on .rb-tab__note, .rb-tab.is-on .rb-tab__count,
.rtp-tab.is-on .rtp-tab__label, .rtp-tab.is-on .rtp-tab__note{ color: var(--accent-ink) !important; }
.rb-tab.is-on::before, .rb-tab.is-on::after, .rtp-tab.is-on::before, .rtp-tab.is-on::after{
  background: radial-gradient(circle at 35% 35%, #fff, var(--accent-hot) 62%, var(--accent));
}

/* ---- 4. headline figures on the board ---- */
.tiles .tile, .pf-tiles .pf-tile{
  background: var(--obj-board) !important; border: 0 !important; border-radius: 8px !important;
  box-shadow: inset 0 -3px 0 var(--accent), inset 0 0 0 2px var(--obj-board-edge) !important;
  color: var(--obj-board-ink);
}
.tiles .tile__value, .pf-tiles .pf-tile__value, .pf-tiles .pf-tile__big{
  font-size: 2rem !important; line-height: 1.05;
  color: var(--obj-bulb) !important; text-shadow: 0 0 12px rgba(255,226,122,.3);
  font-family: var(--mono) !important; font-weight: 800 !important;
}
.tiles .tile__label, .pf-tiles .pf-tile__label{ color: var(--obj-board-sub) !important; }
.pf-tiles .pf-tile__note{ color: color-mix(in srgb, var(--obj-board-sub) 80%, transparent) !important; }

/* ---- 5. how it works, on a clipboard ---- */
.cb-steps{
  list-style: none; position: relative; margin: 14px 0 0 !important; padding: 34px 16px 16px !important;
  border-radius: 16px; background: var(--obj-wood); box-shadow: inset 0 0 0 3px rgba(0,0,0,.12); counter-reset: clipstep;
}
.cb-steps::before{
  content: ""; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 150px; height: 34px;
  border-radius: 8px 8px 14px 14px; background: linear-gradient(#d9dde0, #9aa1a6); box-shadow: 0 2px 0 rgba(0,0,0,.25);
}
.cb-steps .cb-step{
  counter-increment: clipstep; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 8px;
  margin: 0; padding: 12px 18px; background: var(--obj-paper); color: var(--obj-paper-soft) !important;
  border-bottom: 1px solid var(--obj-rule);
}
.cb-steps .cb-step:first-child{ border-radius: 6px 6px 0 0; }
.cb-steps .cb-step:last-child{ border-radius: 0 0 6px 6px; border-bottom: 0; }
.cb-steps .cb-step::before{ content: counter(clipstep, decimal-leading-zero); grid-row: span 2; font-family: var(--mono); font-weight: 800; font-size: 1.2rem; color: #14874a; }
.cb-steps .cb-step__name{ color: var(--obj-paper-ink) !important; font-size: 1.08rem; }
.cb-steps .cb-step__detail{ color: #45513f; }
/* Hot Seat and The Moment now build the shared banner; their old hero boxes
   set their own padding and background, which the banner owns now. */
.sechero.thero, .sechero.hshero{ margin: 0 0 clamp(20px, 2.4vw, 34px); max-width: none; }
.scores__heading{ font-family: var(--display-big) !important; font-weight: 900 !important; text-transform: uppercase; font-size: clamp(2.3rem, 4.6vw, 4.1rem) !important; line-height: .93; letter-spacing: .005em !important; }

/* =====================================================================
   THE CLIMB (Sept 16)
   A career from a high school roster to October, drawn as a card that
   changes frame with its tier and picture with its level, beside a story
   panel with the calls. The card borrows the six tier boards from the
   Batter's Eye Cards (.bec--tier custom properties) so a Climb card and a
   Binder card of the same tier are the same object.
   ===================================================================== */

.toolcard--cl{ border-top: 3px solid var(--accent-2); }

.climb-page{ --climb-gap: clamp(18px, 2.4vw, 34px); }
.climb-h2{ font-family: var(--display-big); font-weight: 800; font-size: clamp(1.9rem, 2.6vw, 2.5rem); line-height: 1; margin: 0 0 12px; letter-spacing: .01em; }
.climb-lede{ font-size: 1.14rem; line-height: 1.6; color: var(--ink-soft); margin: 0 0 22px; max-width: 60ch; }

/* ---------- the card ---------- */

.clc{ --w: 340px; width: var(--w); max-width: 100%; position: relative; }
.clc--big{ --w: 340px; }
.clc__frame{
  position: relative; border-radius: 16px; padding: 11px;
  background: var(--board); box-shadow: inset 0 0 0 1px var(--board-edge), 0 18px 40px rgba(0,0,0,.45);
  display: grid; grid-template-rows: auto auto auto; overflow: hidden;
}
.clc__art{ border-radius: 8px 8px 0 0; overflow: hidden; background: #0b0c0d; aspect-ratio: 300 / 380; line-height: 0; }
.clc__art svg{ width: 100%; height: 100%; display: block; }
.clc__foil{ display: none; }
.clc--allstar .clc__foil, .clc--mvp .clc__foil, .clc--immortal .clc__foil{
  display: block; position: absolute; left: 11px; right: 11px; top: 11px; aspect-ratio: 300 / 380; border-radius: 8px 8px 0 0;
  pointer-events: none; mix-blend-mode: soft-light; opacity: .07;
  background: repeating-linear-gradient(101deg, #ff7a7a 0 3px, #ffd166 3px 6px, #8fe388 6px 9px, #5bc0eb 9px 12px, #a78bfa 12px 15px, #ff8fd0 15px 18px);
  overflow: hidden;
}
.clc--mvp .clc__foil{ opacity: .1; }
.clc--immortal .clc__foil{ opacity: .16; }
.clc--allstar .clc__foil::after, .clc--mvp .clc__foil::after, .clc--immortal .clc__foil::after{
  content: ""; position: absolute; inset: -20%;
  background: linear-gradient(100deg, transparent 36%, rgba(255,255,255,.7) 50%, transparent 64%);
  animation: becRoll 6.5s ease-in-out infinite;
}
.clc__ovr{
  position: absolute; top: 20px; left: 20px; width: 64px; height: 70px;
  display: grid; place-items: center; align-content: center;
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
  background: var(--badge); color: var(--badge-ink);
  box-shadow: 0 4px 10px rgba(0,0,0,.4);
}
.clc__ovr b{ font-family: var(--display-big); font-weight: 900; font-size: 2.1rem; line-height: .9; margin-top: -6px; }
.clc__ovr small{ font-family: var(--mono); font-weight: 700; font-size: .84rem; letter-spacing: .08em; }
.clc__lvl{
  position: absolute; top: 22px; right: 22px; padding: 5px 10px; border-radius: 999px;
  background: rgba(8,12,10,.78); color: #fff; font-family: var(--mono); font-weight: 700; font-size: .86rem;
  border: 1px solid rgba(255,255,255,.25);
}
.clc__band{ background: #0b0c0d; padding: 12px 14px 10px; border-top: 3px solid var(--badge); }
.clc__name{
  margin: 0; font-family: var(--display-big); font-weight: 800; font-size: 2.05rem; line-height: 1; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .01em;
}
.clc__name--long{ font-size: 1.6rem; }
.clc__meta{ display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 7px; font-family: var(--mono); font-weight: 600; font-size: .95rem; color: rgba(246,243,236,.78); }
.clc__pos{ background: var(--badge); color: var(--badge-ink); padding: 0 8px; border-radius: 4px; font-weight: 800; }
.clc__tierbar{
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: #141618; border-radius: 0 0 8px 8px; padding: 8px 14px;
  font-family: var(--mono); font-weight: 700; font-size: .92rem; color: rgba(246,243,236,.85);
}
.clc__tiername{ color: var(--badge); font-size: 1.02rem; letter-spacing: .03em; }

.clc.is-bump .clc__ovr{ animation: climbPop .7s ease; }
.clc.is-tierup .clc__frame{ animation: climbTierUp 1.3s ease; }
.clc.is-tierdown .clc__frame{ animation: climbTierDown 1s ease; }
@keyframes climbPop{ 0%{ transform: scale(1); } 40%{ transform: scale(1.22); } 100%{ transform: scale(1); } }
@keyframes climbTierUp{
  0%{ transform: rotateY(0) scale(1); filter: brightness(1); }
  35%{ transform: rotateY(12deg) scale(1.04); filter: brightness(1.6); }
  70%{ transform: rotateY(-6deg) scale(1.02); filter: brightness(1.15); }
  100%{ transform: rotateY(0) scale(1); filter: brightness(1); }
}
@keyframes climbTierDown{ 0%,100%{ transform: translateX(0); filter: none; } 25%{ transform: translateX(-6px); filter: grayscale(.6); } 60%{ transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce){
  .clc.is-bump .clc__ovr, .clc.is-tierup .clc__frame, .clc.is-tierdown .clc__frame, .clc__foil::after{ animation: none !important; }
}

/* ---------- the builder ---------- */

.climb-build{
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 380px); gap: var(--climb-gap);
  align-items: start; margin-top: var(--climb-gap);
  background: linear-gradient(160deg, var(--surface), var(--bg-2)); border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg); padding: clamp(18px, 3vw, 36px);
}
.climb-build__preview{ position: sticky; top: 90px; display: grid; justify-items: center; gap: 10px; }
.climb-build__hint{ margin: 0; color: var(--ink-faint); font-size: 1rem; }
.climb-build__row{ display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.climb-build__row .climb-field:first-child:nth-last-child(2){ grid-column: auto; }
.climb-field{ display: grid; gap: 8px; margin-bottom: 18px; }
.climb-field__label{ font-weight: 700; font-size: 1.02rem; color: var(--ink-soft); }
.climb-input{
  font: inherit; font-size: 1.2rem; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); width: 100%;
}
.climb-input:focus{ outline: 2px solid var(--accent); outline-offset: 1px; }
.climb-input.is-missing{ border-color: var(--neg); box-shadow: 0 0 0 3px rgba(255,111,95,.25); }
.climb-input--num{ max-width: 140px; font-family: var(--mono); font-weight: 700; }
.climb-pick{ display: flex; flex-wrap: wrap; gap: 10px; }
.climb-pick--pos{ display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.climb-pos{
  font: inherit; text-align: left; cursor: pointer; display: grid; gap: 3px; padding: 12px 14px;
  border-radius: var(--radius); border: 1px solid var(--line-soft); background: var(--bg-2); color: var(--ink);
  transition: border-color .15s, transform .15s;
}
.climb-pos b{ font-family: var(--display-big); font-size: 1.8rem; line-height: 1; color: var(--accent-2); }
.climb-pos__name{ font-weight: 700; font-size: 1.05rem; }
.climb-pos__note{ font-size: .95rem; color: var(--ink-faint); line-height: 1.35; }
.climb-pos:hover{ transform: translateY(-2px); border-color: var(--line); }
.climb-pos.is-on{ border-color: var(--accent-2); box-shadow: inset 0 0 0 1px var(--accent-2); background: var(--accent-2-soft); }
.climb-chip{
  font: inherit; font-weight: 700; cursor: pointer; padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--ink);
}
.climb-chip.is-on{ background: var(--accent-2); color: #1a1406; border-color: var(--accent-2); }
.climb-swatch{ width: 40px; height: 40px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; box-shadow: 0 0 0 1px var(--line); }
.climb-swatch.is-on{ border-color: var(--accent-2); }
.climb-colorway{
  width: 50px; height: 40px; border-radius: 10px; cursor: pointer; border: 3px solid transparent;
  background: linear-gradient(135deg, var(--ca) 0 55%, var(--cb) 55% 100%); box-shadow: 0 0 0 1px var(--line);
}
.climb-colorway.is-on{ border-color: var(--accent-2); transform: scale(1.06); }

.climb-go{
  font: inherit; font-weight: 800; font-size: 1.14rem; cursor: pointer; margin-top: 10px;
  padding: 14px 26px; border-radius: 999px; border: 0;
  background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 20px rgba(255,143,74,.28);
  transition: transform .15s, background .15s;
}
.climb-go:hover{ background: var(--accent-hot); transform: translateY(-1px); }
.climb-go:focus-visible{ outline: 3px solid var(--chalk); outline-offset: 3px; }
.climb-go--big{ font-size: 1.3rem; padding: 16px 34px; }
.climb-go--ghost{ background: transparent; color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.climb-go--ghost:hover{ background: var(--surface-2); }
.climb-link{ font: inherit; background: none; border: 0; color: var(--ink-faint); cursor: pointer; padding: 6px 0; text-decoration: underline; text-underline-offset: 3px; }
.climb-link.is-armed{ color: var(--neg); }

.climb-how{ margin-top: var(--climb-gap); }
.climb-how__grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.climb-how__item{ background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 18px 20px; }
.climb-how__item h3{ margin: 0 0 8px; font-family: var(--display); font-weight: 800; font-size: 1.2rem; color: var(--accent-2); }
.climb-how__item p{ margin: 0; line-height: 1.55; color: var(--ink-soft); }

/* ---------- playing ---------- */

.climb-play{
  display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: var(--climb-gap);
  align-items: start; margin-top: var(--climb-gap);
}
.climb-side{ position: sticky; top: 84px; display: grid; gap: 16px; justify-items: stretch; }
.climb-side .clc{ --w: 100%; }
.climb-meters{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.climb-meter{ position: relative; display: grid; justify-items: center; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 10px 6px 8px; }
.climb-meter svg{ width: 64px; height: 64px; }
.climb-meter__track{ fill: none; stroke: var(--surface-3); stroke-width: 6; }
.climb-meter__fill{ fill: none; stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset .8s ease; }
.climb-meter--health .climb-meter__fill{ stroke: var(--pos); }
.climb-meter--makeup .climb-meter__fill{ stroke: var(--college); }
.climb-meter--stock .climb-meter__fill{ stroke: var(--accent-2); }
.climb-meter.is-low .climb-meter__fill{ stroke: var(--neg); }
.climb-meter__num{ position: absolute; top: 30px; font-family: var(--mono); font-weight: 700; font-size: 1.2rem; }
.climb-meter__label{ font-weight: 700; font-size: .95rem; color: var(--ink-soft); margin-top: 2px; }
.climb-ratings{ display: grid; gap: 8px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 14px 16px; }
.climb-r{ display: grid; grid-template-columns: 88px minmax(0, 1fr) 64px; gap: 10px; align-items: center; }
.climb-r__label{ font-weight: 700; font-size: 1rem; }
.climb-r__bar{ height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.climb-r__bar i{ display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent-3), var(--accent-2)); transition: width .8s ease; }
.climb-r.is-hi .climb-r__bar i{ background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.climb-r.is-lo .climb-r__bar i{ background: var(--ink-faint); }
.climb-r__val{ font-family: var(--mono); font-weight: 700; font-size: 1.08rem; text-align: right; white-space: nowrap; }
.climb-r__val em{ font-style: normal; font-size: .88rem; margin-left: 5px; }
.climb-r__val em.up, .climb-chip-d.up, .climb-ovrline.up b.climb-ovrline__to{ color: var(--pos); }
.climb-r__val em.down, .climb-chip-d.down, .climb-ovrline.down b.climb-ovrline__to{ color: var(--neg); }
.climb-bank{ display: flex; justify-content: space-between; align-items: baseline; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 12px 16px; }
.climb-bank span{ color: var(--ink-soft); font-weight: 600; }
.climb-bank b{ font-family: var(--mono); font-size: 1.25rem; color: var(--accent-2); }

.climb-main{ display: grid; gap: 18px; min-width: 0; scroll-margin-top: 90px; }

/* The road: a painted base path from the high school field to October. */
.climb-road{
  position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0;
  background: linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg); padding: 16px 18px 12px;
}
.climb-stop{ position: relative; flex: 1 1 0; min-width: 62px; display: grid; justify-items: center; gap: 7px; }
.climb-stop::before{
  content: ""; position: absolute; top: 14px; left: -50%; width: 100%; height: 4px; background: var(--surface-3); z-index: 0;
}
.climb-stop:first-child::before{ display: none; }
.climb-stop.is-done::before, .climb-stop.is-here::before{ background: linear-gradient(90deg, var(--clay-deep), var(--clay-lit)); }
.climb-stop__dot{
  position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%;
  background: var(--bg); border: 3px solid var(--surface-3); display: grid; place-items: center;
}
.climb-stop.is-done .climb-stop__dot{ background: var(--clay-lit); border-color: var(--clay-deep); }
.climb-stop.is-skipped .climb-stop__dot{ background: var(--bg); border-style: dashed; border-color: var(--line); }
.climb-stop.is-here .climb-stop__dot{ width: 40px; height: 40px; margin-top: -5px; border-color: var(--accent-2); background: var(--bg); box-shadow: 0 0 0 6px var(--accent-2-soft); animation: climbSpin 6s linear infinite; }
.climb-stop.is-here .climb-stop__dot svg{ width: 34px; height: 34px; }
@keyframes climbSpin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .climb-stop.is-here .climb-stop__dot{ animation: none; } }
.climb-stop__label{ font-family: var(--mono); font-weight: 700; font-size: .92rem; color: var(--ink-faint); text-align: center; }
.climb-stop.is-done .climb-stop__label{ color: var(--ink-soft); }
.climb-stop.is-here .climb-stop__label{ color: var(--accent-2); }
.climb-detour{ flex-basis: 100%; margin-top: 8px; font-size: .95rem; font-weight: 700; color: var(--accent-2); }
.climb-detour + .climb-detour{ margin-top: 2px; }

.climb-scene, .climb-outcome{
  background: linear-gradient(170deg, var(--surface) 0%, var(--bg-2) 100%); border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 38px);
  animation: climbIn .35s ease;
}
@keyframes climbIn{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: none; } }
.climb-scene__top{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-bottom: 10px; }
.climb-turn{ font-family: var(--mono); font-weight: 700; font-size: 1rem; padding: 4px 12px; border-radius: 999px; background: var(--accent-2-soft); color: var(--accent-2); }
.climb-where{ font-family: var(--mono); font-weight: 600; font-size: 1.02rem; color: var(--ink-faint); }
.climb-title{ font-family: var(--display-big); font-weight: 800; font-size: clamp(2.3rem, 4vw, 3.4rem); line-height: .98; margin: 6px 0 14px; }
.climb-title--chose{ font-size: clamp(1.9rem, 3vw, 2.6rem); }
.climb-text{ font-size: clamp(1.14rem, 1.35vw, 1.3rem); line-height: 1.62; color: var(--ink); margin: 0 0 18px; max-width: 72ch; }
.climb-text--result{ font-size: clamp(1.2rem, 1.5vw, 1.4rem); }

.climb-real{
  margin: 0 0 22px; border-left: 4px solid var(--college); background: var(--college-soft);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 12px 18px;
}
.climb-real summary{ cursor: pointer; font-weight: 800; font-size: 1.08rem; color: var(--college); list-style: none; }
.climb-real summary::-webkit-details-marker{ display: none; }
.climb-real summary::after{ content: " (hide)"; font-weight: 600; color: var(--ink-faint); font-size: .92rem; }
.climb-real:not([open]) summary::after{ content: " (show)"; }
.climb-real p{ margin: 8px 0 2px; line-height: 1.6; color: var(--ink-soft); font-size: 1.06rem; max-width: 80ch; }

.climb-report{
  margin: 0 0 20px; max-width: 560px; background: #0b1013; border: 6px solid #1e2327; border-radius: 16px;
  padding: 12px 16px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.climb-report__head{ display: block; font-family: var(--mono); font-weight: 700; font-size: .92rem; color: #7ee2a8; margin-bottom: 6px; }
.climb-report__row{ display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-top: 1px solid rgba(255,255,255,.08); color: #e7ece9; }
.climb-report__row b{ font-family: var(--mono); font-size: 1.15rem; color: #ffe27a; white-space: nowrap; }

.climb-options{ display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.climb-opt{
  font: inherit; color: var(--ink); text-align: left; cursor: pointer; display: grid; align-content: start; gap: 10px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px 18px;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.climb-opt:hover, .climb-opt:focus-visible{ transform: translateY(-3px); border-color: var(--accent-2); box-shadow: 0 12px 26px rgba(0,0,0,.35); outline: none; }
.climb-opt__head{ display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.climb-opt__key{ width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-family: var(--mono); font-weight: 700; background: var(--surface-2); color: var(--ink-soft); }
.climb-opt__label{ margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.28rem; line-height: 1.2; }
.climb-opt__detail{ margin: 0; color: var(--ink-faint); font-size: 1.02rem; line-height: 1.45; }
.climb-opt__row{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 1.02rem; line-height: 1.45; }
.climb-opt__tag{ font-family: var(--mono); font-weight: 700; font-size: .86rem; padding: 1px 8px; border-radius: 5px; }
.climb-opt__row--up .climb-opt__tag{ background: var(--accent-3-soft); color: var(--pos); }
.climb-opt__row--down .climb-opt__tag{ background: rgba(255,111,95,.16); color: var(--neg); }
.climb-risk{ display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-weight: 700; font-size: .92rem; }
.climb-risk__bars{ display: inline-flex; gap: 2px; align-items: flex-end; }
.climb-risk__bars i{ width: 5px; background: var(--surface-3); border-radius: 1px; }
.climb-risk__bars i:nth-child(1){ height: 8px; } .climb-risk__bars i:nth-child(2){ height: 12px; } .climb-risk__bars i:nth-child(3){ height: 16px; }
.climb-risk--low{ color: var(--pos); } .climb-risk--low .climb-risk__bars i.on{ background: var(--pos); }
.climb-risk--medium{ color: var(--accent-2); } .climb-risk--medium .climb-risk__bars i.on{ background: var(--accent-2); }
.climb-risk--high{ color: var(--neg); } .climb-risk--high .climb-risk__bars i.on{ background: var(--neg); }

.climb-chips{ display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.climb-chip-d{ font-family: var(--mono); font-weight: 700; font-size: 1.02rem; padding: 6px 12px; border-radius: 999px; background: var(--surface-2); animation: climbIn .4s ease backwards; }
.climb-chip-d:nth-child(2){ animation-delay: .06s; } .climb-chip-d:nth-child(3){ animation-delay: .12s; } .climb-chip-d:nth-child(4){ animation-delay: .18s; } .climb-chip-d:nth-child(5){ animation-delay: .24s; }
.climb-ovrline{ display: flex; align-items: baseline; gap: 12px; margin: 0 0 16px; font-weight: 700; color: var(--ink-soft); }
.climb-ovrline b{ font-family: var(--display-big); font-size: 2.4rem; line-height: 1; color: var(--ink); }
.climb-ovrline i{ font-style: normal; color: var(--ink-faint); }
.climb-banner{
  display: grid; gap: 2px; margin: 0 0 14px; padding: 14px 18px; border-radius: var(--radius);
  animation: climbBanner .6s cubic-bezier(.2,1.4,.4,1) backwards;
}
.climb-banner b{ font-family: var(--display-big); font-weight: 800; font-size: 2rem; line-height: 1.05; }
.climb-banner span{ color: var(--ink-soft); }
.climb-banner__kicker{ font-family: var(--mono); font-weight: 700; font-size: .95rem; }
.climb-banner--promo{ background: var(--accent-3-soft); border: 1px solid var(--accent-3); }
.climb-banner--promo .climb-banner__kicker{ color: var(--pos); }
.climb-banner--tier{ position: relative; overflow: hidden; background: #0b0c0d; border: 2px solid var(--badge); color: #fff; }
.climb-banner--tier::before{ content: ""; position: absolute; inset: 0; background: var(--board); opacity: .28; }
.climb-banner--tier > *{ position: relative; }
.climb-banner--tier .climb-banner__kicker, .climb-banner--tier b{ color: var(--badge); }
.climb-banner--tier span{ color: rgba(246,243,236,.8); }
@keyframes climbBanner{ from{ opacity: 0; transform: scale(.94); } to{ opacity: 1; transform: none; } }

/* ---------- the end ---------- */

.climb-end{ margin-top: var(--climb-gap); display: grid; gap: var(--climb-gap); }
.climb-end__hero{
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 26px; align-items: center;
  border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 40px); border: 1px solid var(--line-soft);
  background: radial-gradient(90% 140% at 0% 0%, var(--accent-2-soft), transparent 60%), var(--surface);
}
.climb-end__hero--ghi{ background: radial-gradient(90% 160% at 0% 0%, rgba(242,193,78,.34), transparent 60%), var(--surface); border-color: rgba(242,193,78,.6); }
.climb-end__hero--glo{ background: radial-gradient(90% 140% at 0% 0%, rgba(90,216,242,.14), transparent 60%), var(--surface); }
.climb-end__emblem svg{ width: 150px; height: 150px; display: block; }
.climb-end__title{ font-family: var(--display-big); font-weight: 900; font-size: clamp(2.8rem, 6vw, 4.8rem); line-height: .92; margin: 6px 0 12px; }
.climb-end__lesson{ margin: 0; font-size: 1.1rem; line-height: 1.6; color: var(--ink-soft); border-left: 4px solid var(--accent-2); padding-left: 14px; max-width: 75ch; }
.climb-end__body{ display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: var(--climb-gap); align-items: start; }
.climb-end__card{ position: sticky; top: 84px; }
.climb-end__card .clc{ --w: 100%; }
.climb-end__right{ display: grid; gap: 18px; min-width: 0; }
.climb-tiles{ display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.climb-tile{ background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 14px 16px; display: grid; gap: 4px; }
.climb-tile b{ font-family: var(--display-big); font-weight: 800; font-size: 1.9rem; line-height: 1; }
.climb-tile span{ color: var(--ink-faint); font-weight: 600; }
.climb-needed{ background: rgba(255,111,95,.08); border: 1px solid rgba(255,111,95,.35); border-radius: var(--radius); padding: 16px 20px; }
.climb-needed h3, .climb-pathbox h3{ margin: 0 0 10px; font-family: var(--display); font-weight: 800; font-size: 1.25rem; }
.climb-needed ul{ margin: 0; padding-left: 20px; display: grid; gap: 8px; line-height: 1.55; font-size: 1.06rem; }
.climb-pathbox{ background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 16px 20px; }
.climb-path{ list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: step; }
.climb-path__step{ display: grid; grid-template-columns: 68px minmax(0, 1fr) 48px; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.climb-path__step:first-child{ border-top: 0; }
.climb-path__lvl{ font-family: var(--mono); font-weight: 700; font-size: .9rem; color: var(--accent-2); }
.climb-path__step b{ display: block; font-weight: 700; }
.climb-path__step div span{ color: var(--ink-soft); }
.climb-path__ovr{ justify-self: end; font-family: var(--mono); font-weight: 800; padding: 3px 8px; border-radius: 6px; background: var(--badge); color: var(--badge-ink); }
.climb-actions{ display: flex; flex-wrap: wrap; gap: 12px; }

.climb-endings{ margin-top: var(--climb-gap); }
.climb-endings__head{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.climb-endings__count{ margin: 0; font-family: var(--mono); font-weight: 700; color: var(--accent-2); font-size: 1.1rem; }
.climb-endings__grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 12px; }
.climb-ending{ display: grid; justify-items: center; text-align: center; gap: 6px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 14px 10px; opacity: .72; }
.climb-ending.is-found{ opacity: 1; border-color: var(--line); }
.climb-ending__emblem svg{ width: 74px; height: 74px; display: block; }
.climb-ending__title{ font-weight: 800; font-size: 1.02rem; }
.climb-ending__note{ color: var(--ink-faint); font-size: .92rem; line-height: 1.35; }

@media (max-width: 980px){
  .climb-build, .climb-play, .climb-end__body{ grid-template-columns: minmax(0, 1fr); }
  .climb-build__preview, .climb-side, .climb-end__card{ position: static; }
  .climb-side .clc, .climb-end__card .clc{ --w: 340px; margin: 0 auto; }
  .climb-build__preview{ order: -1; }
}
@media (max-width: 620px){
  .climb-end__hero{ grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .climb-end__emblem svg{ width: 96px; height: 96px; }
  .climb-stop{ min-width: 34px; }
  .climb-stop__label{ font-size: .84rem; }
  .climb-path__step{ grid-template-columns: 54px minmax(0, 1fr) 42px; }
}

/* The strip that stands in for the banner mid-career. */
.climb-strip{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-top: 6px;
  padding: 14px 20px; border-radius: var(--radius-lg); border: 1px solid var(--line-soft);
  background: linear-gradient(100deg, var(--accent-2-soft), transparent 60%), var(--surface);
}
.climb-strip__kicker{ font-family: var(--mono); font-weight: 700; color: #a98cf7; }
.climb-strip__title{ margin: 0; font-family: var(--display-big); font-weight: 900; font-size: clamp(2rem, 3vw, 2.6rem); line-height: 1; }
.climb-strip__who{ margin-left: auto; font-weight: 700; color: var(--ink-soft); }
.climb-page.is-playing .climb-play{ margin-top: 18px; }

/* =====================================================================
   THE MLB FRONT, REBUILT (Sept 16)
   Marquee of tonight's games, the lead off the news desk beside the doors as
   pockets, six division boards and the wild card line. Boards are always
   dark and set their own ink, like the travel division board.
   ===================================================================== */
.mf-block{ margin-top: clamp(28px, 3vw, 48px); }

/* Tonight: a marquee with a row of bulbs along the top */
.mf-marquee{ position: relative; background: var(--obj-board); border-radius: 14px; padding: 22px 14px 14px;
  border: 3px solid var(--obj-board-edge); box-shadow: 0 10px 30px -18px rgba(0,0,0,.6); }
.mf-marquee__bulbs{ position: absolute; left: 16px; right: 16px; top: 8px; height: 6px;
  background: radial-gradient(circle, var(--obj-bulb) 0 2.4px, transparent 3px) 0 50% / 16px 6px repeat-x; opacity: .85;
  filter: drop-shadow(0 0 3px rgba(255,226,122,.7)); }
.mf-marquee__row{ display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; }
.mf-game{ display: grid; gap: 4px; padding: 10px 12px 9px; border-radius: 8px; text-decoration: none;
  background: #13241a; box-shadow: inset 0 -3px 0 var(--obj-board-edge); color: var(--obj-board-ink); transition: background .12s ease, transform .12s ease; }
body.body--ll .mf-game, body[data-section="mlb"] .mf-game{ background: color-mix(in srgb, var(--obj-board) 70%, #2a3b30); }
.mf-game:hover{ transform: translateY(-2px); box-shadow: inset 0 -3px 0 var(--accent); }
.mf-game__line{ display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.mf-game__club{ font-weight: 700; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #cfdcd2; }
.mf-game__line.is-won .mf-game__club{ color: #fff; }
.mf-game__runs{ font-family: var(--mono); font-weight: 800; font-size: 1.35rem; color: var(--obj-bulb); text-shadow: 0 0 10px rgba(255,226,122,.35); min-width: 1.4ch; text-align: right; }
.mf-game.is-final .mf-game__line:not(.is-won) .mf-game__runs{ color: #a79a6a; text-shadow: none; }
.mf-game__state{ margin-top: 2px; font-family: var(--mono) !important; font-weight: 700; font-size: .85rem; letter-spacing: .06em !important; text-transform: uppercase; color: var(--obj-board-sub); }
.mf-game.is-live .mf-game__state{ color: #ff8f4a; }
.mf-game.is-live .mf-game__state::before{ content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #ff5a3c; box-shadow: 0 0 8px #ff5a3c; vertical-align: 1px; }

/* the lead and the pockets */
.mf-front{ display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); margin-top: clamp(28px, 3vw, 48px); }
.mf-lead{ position: relative; display: grid; align-content: start; gap: 10px; padding: clamp(20px, 2.4vw, 34px); border-radius: 16px; text-decoration: none; color: var(--ink);
  background: linear-gradient(150deg, var(--accent-soft), transparent 60%), var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--accent); overflow: hidden; }
.mf-lead::after{ content: ""; position: absolute; right: -60px; bottom: -60px; width: 240px; height: 240px; border-radius: 50%;
  border: 3px dashed var(--seam-soft); opacity: .6; pointer-events: none; }
.mf-lead__eyebrow{ font-weight: 800; color: var(--accent); font-size: .95rem; }
.mf-lead__head{ font-family: var(--display-big); font-weight: 900; text-transform: uppercase; font-size: clamp(2rem, 3.4vw, 3.1rem); line-height: .95; max-width: 20ch; text-wrap: balance; }
.mf-lead__say{ font-weight: 700; color: var(--ink-soft); font-size: 1.05rem; }
.mf-lead__board{ justify-self: start; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 10px 18px 10px 14px;
  border-radius: 10px; background: var(--obj-board); box-shadow: inset 0 -3px 0 var(--accent); max-width: 100%; }
.mf-lead__value{ font-family: var(--mono); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--obj-bulb); text-shadow: 0 0 14px rgba(255,226,122,.35); }
.mf-lead__label{ color: var(--obj-board-sub); font-weight: 700; font-size: .95rem; line-height: 1.25; }
.mf-lead__line{ color: var(--ink-soft); font-size: 1.05rem; line-height: 1.5; max-width: 58ch; }
.mf-lead__go{ justify-self: start; margin-top: 4px; font-weight: 800; border-bottom: 3px solid var(--accent); padding-bottom: 2px; }
.mf-lead:hover .mf-lead__head{ color: var(--accent); }

.mf-bag{ position: relative; display: grid; gap: 10px; align-content: stretch; padding: 22px 14px 14px; border-radius: 22px 22px 16px 16px; background: #182019; border: 2px solid #2d3a2f; }
.mf-bag::before{ content: ""; position: absolute; left: 22px; right: 22px; top: 9px; height: 4px; border-radius: 4px;
  background: repeating-linear-gradient(90deg, #6d7a70 0 6px, transparent 6px 10px); }
.mf-pocket{ display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px;
  text-decoration: none; color: #f3f8f0; background: #223024; border: 1px solid #3a4b3c; border-left: 5px solid var(--accent); transition: background .12s ease, transform .12s ease; }
.mf-pocket:hover{ background: #2a3b2c; transform: translateX(3px); }
.mf-pocket__icon svg{ width: 46px; height: 46px; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.mf-pocket__words{ display: grid; gap: 3px; min-width: 0; }
.mf-pocket__name{ font-family: var(--display-big); font-weight: 900; font-size: 1.55rem; text-transform: uppercase; line-height: 1; }
.mf-pocket__line{ font-size: .95rem; color: #c4d5c7; line-height: 1.35; }
.mf-pocket__tag{ align-self: start; padding: 3px 9px; border-radius: 999px; font-size: .8rem; font-weight: 800; color: #1b0d03; background: var(--accent); }
@media (prefers-color-scheme: light){ .mf-pocket__tag{ color: #fff; } }

/* The Races: six boards */
.mf-races{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.mf-div{ background: var(--obj-board); border-radius: 12px; padding: 12px 12px 10px; border: 3px solid var(--obj-board-edge); color: var(--obj-board-ink); }
.mf-div__head{ display: flex; justify-content: space-between; align-items: baseline; padding: 2px 6px 8px; border-bottom: 2px solid var(--obj-board-edge); margin-bottom: 6px; }
.mf-div__name{ font-family: var(--display-big); font-weight: 900; text-transform: uppercase; font-size: 1.5rem; letter-spacing: .03em; }
.mf-div__cols{ font-family: var(--mono) !important; font-size: .82rem; color: var(--obj-board-sub); white-space: pre; letter-spacing: .1em !important; }
.mf-div__row{ position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr) 4.6rem 2.8rem; align-items: center; gap: 10px; padding: 8px 6px 8px 10px;
  border-radius: 6px; text-decoration: none; color: var(--obj-board-ink); }
.mf-div__row::before{ content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 4px; border-radius: 3px; background: var(--club); opacity: .95; }
.mf-div__row .crest--sm{ width: 26px; height: 26px; }
.mf-div__row:hover{ background: rgba(255,255,255,.07); }
.mf-div__club{ font-weight: 700; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-div__rec, .mf-div__gb{ font-family: var(--mono); font-weight: 800; font-size: 1.12rem; text-align: right; color: #e8efe4; }
.mf-div__gb{ color: var(--obj-board-sub); }
.mf-div__row.is-lead{ background: rgba(255,226,122,.07); }
.mf-div__row.is-lead .mf-div__rec{ color: var(--obj-bulb); text-shadow: 0 0 10px rgba(255,226,122,.35); }
.mf-div__x{ margin-left: 8px; padding: 1px 6px; border-radius: 4px; font-size: .84rem; font-weight: 800; vertical-align: 2px; color: #0b1710; background: var(--obj-bulb); }

/* The Wild Card Line */
.mf-wc{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.mf-wc__board{ background: var(--obj-board); border-radius: 12px; padding: 12px; border: 3px solid var(--obj-board-edge); color: var(--obj-board-ink); }
.mf-wc__name{ font-family: var(--display-big); font-weight: 900; text-transform: uppercase; font-size: 1.5rem; padding: 2px 6px 8px; border-bottom: 2px solid var(--obj-board-edge); margin-bottom: 6px; }
.mf-wc__row{ position: relative; display: grid; grid-template-columns: 1.6rem 26px minmax(0, 1fr) 4.6rem 3rem; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 6px; text-decoration: none; color: var(--obj-board-ink); }
.mf-wc__row:hover{ background: rgba(255,255,255,.07); }
.mf-wc__row .crest--sm{ width: 26px; height: 26px; }
.mf-wc__n{ font-family: var(--mono); font-weight: 800; color: var(--obj-board-sub); text-align: center; }
.mf-wc__row.is-in .mf-wc__n{ color: #0b1710; background: var(--obj-bulb); border-radius: 5px; }
.mf-wc__club{ font-weight: 700; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-wc__rec, .mf-wc__gb{ font-family: var(--mono); font-weight: 800; font-size: 1.1rem; text-align: right; }
.mf-wc__gb{ color: var(--obj-board-sub); }
.mf-wc__cut{ position: relative; margin: 6px 0; text-align: center; font-family: var(--mono) !important; font-weight: 800; font-size: .8rem; letter-spacing: .16em !important; text-transform: uppercase; color: #ff8f4a; }
.mf-wc__cut::before, .mf-wc__cut::after{ content: ""; position: absolute; top: 50%; width: calc(50% - 60px); border-top: 2px dashed #ff8f4a; }
.mf-wc__cut::before{ left: 0; } .mf-wc__cut::after{ right: 0; }

@media (max-width: 1100px){ .mf-races{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .mf-front{ grid-template-columns: 1fr; } }
@media (max-width: 700px){ .mf-races, .mf-wc{ grid-template-columns: 1fr; } .mf-marquee__row{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .mf-pocket{ grid-template-columns: 40px minmax(0, 1fr); } .mf-pocket__tag{ display: none; } }

/* ---- The Show card wall: backs that fit (Sept 16) ----
   The wall cards had shrunk to about 165 pixels because the sitewide card
   padding rule matched .cardwall and .cardcell, and the back was laid out for
   210. The wall goes back to real card sizes, the five tiles use three-letter
   labels, and best and worst read as two short rows. */
.cardwall{ padding: 0 !important; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important; gap: 22px !important; }
.cardcell{ padding: 0 !important; }
.sc:not(.sc--large) .sc__back{ padding: 12px 12px 12px; overflow: hidden; display: flex; flex-direction: column; }
.sc:not(.sc--large) .sc-head{ padding-bottom: 8px; }
.sc:not(.sc--large) .sc-head__name{ font-size: 1.02rem; font-weight: 800; overflow-wrap: anywhere; }
.sc:not(.sc--large) .sc-head__meta{ font-size: .84rem; }
.sc:not(.sc--large) .sc-headline__cap{ margin: 8px 0 5px; font-size: .84rem; font-weight: 800; letter-spacing: .04em !important; text-transform: none; color: var(--accent); }
.sc:not(.sc--large) .sc-headline{ grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 0; }
.sc:not(.sc--large) .sc-tile{ padding: 5px 0 4px; gap: 2px; }
.sc:not(.sc--large) .sc-tile__label{ font-size: .84rem !important; letter-spacing: .03em !important; font-weight: 800; }
.sc:not(.sc--large) .sc-tile__value{ font-size: 1.05rem; font-weight: 800; }
.sc:not(.sc--large) .sc-block__note{ margin: 0; font-size: .86rem; line-height: 1.35; color: var(--ink-soft); }
.sc:not(.sc--large) .sc-end{ grid-template-columns: 3.3rem minmax(0, 1fr) auto; gap: 6px; padding: 4px 7px; align-items: center; }
.sc:not(.sc--large) .sc-end__word{ font-size: .84rem; letter-spacing: .04em !important; }
.sc:not(.sc--large) .sc-end__label{ font-size: .84rem; line-height: 1.15; white-space: normal; }
.sc:not(.sc--large) .sc-end__value{ font-size: 1rem; }
.sc:not(.sc--large) .sc-back__foot{ margin-top: auto; padding-top: 8px; }
.sc-end__label{ letter-spacing: 0 !important; }

/* ---- The defensive card: pick the game on the card (Sept 16) ---- */
.dp-gamepick{ margin: 18px 0 8px; padding: 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--accent); }
.dp-gamepick__head{ display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 12px; }
.dp-gamepick__title{ margin: 0; font-family: var(--display-big) !important; font-weight: 900 !important; text-transform: uppercase; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1; }
.dp-gamepick__now{ margin: 0; font-weight: 700; color: var(--accent); }
.dp-gamepick__row{ display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.dp-gameplate{ position: relative; display: grid; gap: 3px; padding: 12px 36px; text-align: center; cursor: pointer; font: inherit; color: var(--ink);
  background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -2px 0 rgba(0,0,0,.16), 0 3px 0 rgba(0,0,0,.22); }
.dp-gameplate::before, .dp-gameplate::after{ content: ""; position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--ink-faint), var(--line) 62%, var(--line-soft)); }
.dp-gameplate::before{ left: 12px; } .dp-gameplate::after{ right: 12px; }
.dp-gameplate__n{ font-family: var(--display-big); font-weight: 900; font-size: 1.6rem; text-transform: uppercase; line-height: 1; }
.dp-gameplate__day{ font-weight: 700; }
.dp-gameplate__state{ font-size: .88rem; color: var(--ink-faint); }
.dp-gameplate:hover{ border-color: var(--accent-line); }
.dp-gameplate.is-on{ background: linear-gradient(180deg, var(--accent-hot), var(--accent)); border-color: var(--accent-hot); color: var(--accent-ink); }
.dp-gameplate.is-on .dp-gameplate__state{ color: var(--accent-ink); opacity: .85; }

/* ==========================================================================
   SEPT 17: THE FRONT PAGE, ROUND ONE
   Every Part of the Game and Somewhere to Start drop their small description
   text: each card is one line icon on a dark board square and a poster name
   (homeArt.js). The lanes drop their paragraph. Around the League is a real
   scoreboard: away over home, runs in one column, status in a fixed column.
   ========================================================================== */
.areas__grid{ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important; gap: 12px !important; }
.areacard, .walltile{
  display: grid !important; grid-template-columns: 48px minmax(0, 1fr) !important; grid-template-rows: none !important;
  align-items: center; gap: 14px !important;
  padding: 14px 16px 14px 1.35rem !important; border-radius: 12px !important;
}
.areacard{ --tone: var(--accent); border-left: 4px solid var(--tone) !important; }
.areacard--basics{ --tone: var(--accent-hot); }
.areacard--hitting{ --tone: var(--accent); }
.areacard--pitching{ --tone: var(--accent-2); }
.areacard--defense{ --tone: var(--accent-3); }
.areacard--baserunning{ --tone: #ff9a5c; }
.areacard--strategy{ --tone: var(--college); }
.areacard--rules{ --tone: var(--neg); }
.areacard__icon, .walltile__icon{ display: grid; place-items: center; width: 48px; height: 48px; border-radius: 10px; background: var(--obj-board); }
.hc-icon{ width: 34px; height: 34px; fill: none; stroke: var(--obj-bulb); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.areacard .hc-icon{ stroke: var(--tone); }
.areacard__name, .walltile__label{
  font-family: var(--display-big) !important; font-weight: 900 !important; text-transform: uppercase;
  font-size: 1.32rem !important; line-height: 1.02 !important; letter-spacing: .01em !important; margin: 0 !important;
}
.areacard:hover .areacard__name{ color: var(--tone); }
/* The old seventh-card stretch rule laid a paragraph beside the name. */
.areas__grid > .areacard:nth-child(7):last-child{ grid-column: auto !important; grid-template-columns: 48px minmax(0, 1fr) !important; }
.areas__grid > .areacard:nth-child(7):last-child .areacard__name{ grid-column: 2 !important; grid-row: 1 !important; }

/* the wall: an icon and a name */
.wall__grid{ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important; gap: 12px !important; }
.walltile__words{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.walltile__badge{ font-size: .82rem !important; }

/* the lanes: name and links, no paragraph */
.lane__title{ display: inline-block; margin-bottom: 12px; font-family: var(--display-big) !important; font-weight: 900 !important; text-transform: uppercase; font-size: 1.8rem !important; letter-spacing: .01em !important; line-height: 1; }
.lane__link{ font-size: .95rem !important; font-weight: 600; }

/* Around the League: a scoreboard, not a list */
.minigames{ gap: 8px !important; }
.minigame{
  grid-template-columns: minmax(0, 1fr) 76px !important; gap: 12px !important;
  padding: 8px 10px !important; border-radius: 10px !important;
  background: var(--surface-2); border: 1px solid var(--line); border-left: 4px solid var(--line);
}
.minigame.is-live{ border-left-color: var(--pos); }
.minigame.is-final{ border-left-color: var(--ink-faint); }
.minigame__teams{ display: grid; gap: 4px; min-width: 0; }
.minigame__side{ display: grid !important; grid-template-columns: 22px minmax(0, 1fr) 2ch; align-items: center; gap: 8px !important; }
.minigame__club{ font-weight: 700 !important; font-size: 1rem !important; }
.minigame__runs{ margin: 0 !important; text-align: right; font-family: var(--mono); font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.minigame__state{
  display: grid; justify-items: center; align-content: center; gap: 2px; align-self: stretch;
  padding-left: 10px; border-left: 1px solid var(--line); text-align: center !important; white-space: nowrap;
}
.minigame__inning{ font-weight: 800; font-size: .92rem; color: var(--ink-soft); }
.minigame__outs{ font-size: .8rem; font-weight: 700; color: var(--ink-faint); }
.minigame__state.is-live .minigame__inning{ color: var(--pos); }

/* Road to Omaha: the champion's logo beside the name */
.cbfront{ display: grid !important; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; }
.cbfront__words{ display: grid; gap: 2px; min-width: 0; }
.cbfront__logo{ display: grid; place-items: center; width: 84px; height: 84px; border-radius: 14px; background: #fbfaf4; padding: 8px; }
.cbfront__logo img{ width: 100%; height: 100%; object-fit: contain; }
.cbfront__logo:empty{ display: none; }

/* ---- An area of the game, as tabs and chips (Sept 17) ---- */
.tarea__hero{ padding-bottom: 1.4rem; }
.tarea__heroInner{ display: flex; align-items: center; gap: 18px; }
.tarea__icon{ display: grid; place-items: center; flex: none; width: 76px; height: 76px; border-radius: 16px; background: var(--obj-board); }
.tarea__icon .hc-icon{ width: 54px; height: 54px; stroke: var(--obj-bulb); }
.tarea__kicker{ margin: 0 0 4px; font-weight: 800; font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.tarea__title{ font-family: var(--display-big) !important; font-weight: 900 !important; text-transform: uppercase; font-size: clamp(2.6rem, 6vw, 4.2rem) !important; line-height: .92 !important; letter-spacing: .005em !important; }
.tarea{ display: grid !important; gap: 22px; }
.tarea .tpanel__title{ font-family: var(--display-big); font-weight: 900; text-transform: uppercase; font-size: 1.5rem; letter-spacing: .01em; }
.tarea__box{ background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.tarea__tabs{ display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.tarea__tab{
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 10px; cursor: pointer;
  font: inherit; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line);
}
.tarea__tab:hover{ color: var(--ink); border-color: var(--accent-line); }
.tarea__tab.is-on{ color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.tarea__tabName{ font-family: var(--display-big); font-weight: 900; font-size: 1.2rem; text-transform: uppercase; letter-spacing: .02em; line-height: 1; }
.tarea__tabCount{ min-width: 1.6em; padding: 1px 6px; border-radius: 999px; font-size: .8rem; font-weight: 800; text-align: center; background: rgba(0,0,0,.22); }
.tarea__stage{ display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; padding: 18px; align-items: start; }
@media (max-width: 820px){ .tarea__stage{ grid-template-columns: 1fr; } }
.tarea__chips{ display: flex; flex-wrap: wrap; gap: 8px; align-content: start; }
.tarea__chip{
  display: inline-flex; align-items: baseline; gap: 7px; padding: 9px 14px; border-radius: 999px; cursor: pointer;
  font: inherit; color: var(--ink); text-decoration: none; background: var(--surface-2); border: 1px solid var(--line);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.tarea__chip:hover{ border-color: var(--accent-line); transform: translateY(-1px); }
.tarea__chip.is-on{ background: var(--obj-board); border-color: var(--obj-bulb); }
.tarea__chip.is-on .tarea__chipLabel{ color: var(--obj-bulb); }
.tarea__chipLabel{ font-weight: 700; font-size: 1rem; }
.tarea__chipName{ font-size: .85rem; color: var(--ink-faint); }
.tarea__card{
  position: sticky; top: 90px; display: grid; gap: 12px; padding: 18px 20px; border-radius: 12px;
  background: var(--obj-board); border: 1px solid var(--obj-board-edge); color: var(--obj-board-ink);
}
.tarea__cardTop{ display: grid; gap: 2px; }
.tarea__cardLabel{ font-family: var(--display-big); font-weight: 900; font-size: 2rem; text-transform: uppercase; line-height: 1; color: var(--obj-bulb); }
.tarea__cardName{ font-weight: 700; color: var(--obj-board-sub); }
.tarea__cardNote{ margin: 0; font-size: 1.08rem; line-height: 1.5; color: var(--obj-board-ink); }
.tarea__go{ justify-self: start; padding: 9px 16px; border-radius: 10px; font-weight: 800; text-decoration: none; color: var(--accent-ink); background: var(--accent); }
.tarea__go:hover{ background: var(--accent-hot); }
.tarea__chips--links .tarea__chip{ cursor: pointer; }
@media (max-width: 820px){ .tarea__card{ order: -1; position: static; } }
.tarea__chip:focus:not(:focus-visible){ outline: none; }

/* ---- A term page: one idea at a time (Sept 17) ---- */
.tterm__card{ display: grid; gap: 10px; margin: 16px; padding: 22px 24px; border-radius: 12px; background: var(--obj-board); border: 1px solid var(--obj-board-edge); }
.tterm__label{ margin: 0; font-family: var(--display-big) !important; font-weight: 900 !important; text-transform: uppercase; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1; color: var(--obj-bulb); letter-spacing: .01em; }
.tterm__text{ margin: 0; max-width: 62ch; font-size: clamp(1.1rem, 1.5vw, 1.25rem); line-height: 1.55; color: var(--obj-board-ink); }
.tterm__num{ padding: 0 .18em; border-radius: 4px; font-weight: 800; color: var(--obj-bulb); background: rgba(255,226,122,.12); }
.thero__title{ font-family: var(--display-big) !important; font-weight: 900 !important; text-transform: uppercase; line-height: .95 !important; letter-spacing: .005em !important; }
.thero__headline{ font-size: clamp(1.1rem, 1.6vw, 1.3rem) !important; font-weight: 600; color: var(--ink) !important; }
.tbody{ display: grid; gap: 22px; }
.tpanel__title{ font-family: var(--display-big); font-weight: 900; text-transform: uppercase; font-size: 1.5rem !important; letter-spacing: .01em; }

/* Front page headers as posters, matching the section banners (Sept 17) */
.railblock__title, .areas__title, .wall__title, .tnext__title{
  font-family: var(--display-big) !important; font-weight: 900 !important; text-transform: uppercase;
  letter-spacing: .01em !important; line-height: 1 !important;
}
.railblock__title{ font-size: clamp(1.6rem, 2.2vw, 2rem) !important; }
.areas__title, .wall__title{ font-size: clamp(2rem, 3.2vw, 2.8rem) !important; margin-bottom: 16px !important; }
.tnext__title{ font-size: clamp(1.6rem, 2.4vw, 2.1rem) !important; }
.railblock__head{ align-items: center !important; margin-bottom: 6px; }
.railblock__more{ font-weight: 700; font-size: .95rem !important; white-space: nowrap; }

/* The Division Races: six small boards (Sept 17) */
.races{ display: grid; gap: 10px; margin-top: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.race{ display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--obj-board); border: 1px solid var(--obj-board-edge); }
.race__head{ display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.race__name{ font-family: var(--display-big); font-weight: 900; text-transform: uppercase; font-size: 1.25rem; line-height: 1; color: var(--obj-board-ink); letter-spacing: .02em; }
.race__tag{ padding: 2px 8px; border-radius: 999px; font-size: .84rem; font-weight: 800; color: var(--obj-board-sub); border: 1px solid var(--obj-board-edge); white-space: nowrap; }
.race__tag--hot{ color: #1b0d03; background: var(--obj-bulb); border-color: var(--obj-bulb); }
.race__tag--done{ color: #04210f; background: var(--pos); border-color: var(--pos); }
.race__row{ display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 3.2ch; align-items: center; gap: 8px; padding: 4px 2px; text-decoration: none; color: var(--obj-board-sub); border-top: 1px solid rgba(255,255,255,.06); }
.race__row:first-of-type{ border-top: 0; }
.race__row.is-lead{ color: var(--obj-board-ink); }
.race__row:hover .race__club{ color: var(--obj-bulb); }
.race__club{ font-weight: 700; font-size: .98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.race__record{ font-family: var(--mono); font-weight: 700; font-size: .92rem; font-variant-numeric: tabular-nums; }
.race__gb{ font-family: var(--mono); font-weight: 800; font-size: .92rem; text-align: right; color: var(--obj-bulb); font-variant-numeric: tabular-nums; }
.race__row.is-lead .race__gb{ color: var(--obj-board-sub); }

/* ---- Term pages, round two: tiles and small cards (Sept 17) ---- */
.tglance{ display: grid; gap: 10px; }
.tglance__title, .tcard__name{ margin: 0; font-family: var(--display-big) !important; font-weight: 900 !important; text-transform: uppercase; letter-spacing: .01em !important; line-height: 1 !important; }
.tglance__title{ font-size: 1.5rem !important; }
.tglance__row{ display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.tglance__tile{ display: grid; gap: 6px; align-content: start; padding: 14px 16px; border-radius: 12px; background: var(--obj-board); border: 1px solid var(--obj-board-edge); }
.tglance__num{ font-family: var(--mono); font-weight: 800; font-size: clamp(1.9rem, 3vw, 2.4rem); line-height: 1; color: var(--obj-bulb); text-shadow: 0 0 12px rgba(255,226,122,.35); }
.tglance__words{ font-size: .98rem; line-height: 1.4; color: var(--obj-board-ink); }
.tcards{ display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.tcard{ display: grid; gap: 10px; align-content: start; padding: 16px 18px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--accent); }
.tcard--read{ border-top-color: var(--college); }
.tcard--watch{ border-top-color: var(--neg); }
.tcard--youth{ border-top-color: var(--accent-3); }
.tcard__head{ display: flex; align-items: center; gap: 10px; }
.tcard__icon{ display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 9px; background: var(--obj-board); }
.tcard__icon .hc-icon{ width: 26px; height: 26px; }
.tcard__name{ font-size: 1.35rem !important; }
.tcard__lead{ margin: 0; font-size: 1.08rem; line-height: 1.45; font-weight: 600; color: var(--ink); }
.tcard__more{ margin: 0; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.tcard__toggle{ justify-self: start; padding: 5px 12px; border-radius: 999px; font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; color: var(--ink-soft); background: var(--surface-2); border: 1px solid var(--line); }
.tcard__toggle:hover{ color: var(--ink); border-color: var(--accent-line); }
.tcard .tterm__num{ color: var(--accent-hot); background: var(--accent-soft); }

/* Two Batter's Eye marks either side of the front card, on screens with room for them (Sept 17) */
.fronthero{ position: relative; }
.fronthero__logo{
  position: absolute; top: 50%; z-index: 1; display: none; justify-items: center; gap: 12px;
  width: clamp(130px, 13vw, 190px); transform: translateY(-50%); pointer-events: none;
}
.fronthero__logo--left{ left: clamp(24px, 4vw, 70px); }
.fronthero__logo--right{ right: clamp(24px, 4vw, 70px); }
.fronthero__logo img{ width: 100%; height: auto; filter: drop-shadow(0 10px 24px rgba(0,0,0,.45)); }
.fronthero__logo span{
  font-family: var(--display-big); font-weight: 900; text-transform: uppercase; white-space: nowrap;
  font-size: clamp(1.3rem, 1.8vw, 1.9rem); letter-spacing: .03em; line-height: 1; color: var(--ink);
  text-shadow: 0 2px 18px rgba(0,0,0,.4);
}
@media (min-width: 1180px){ .fronthero__logo{ display: grid; } }
body.has-answer .fronthero__logo{ display: none; }
.tbody > .tcards{ padding: 0 !important; margin: 0 !important; }
/* The card mark is a light eye on a transparent ground, so it sits on a dark disc like it does on the cards. */
.fronthero__logo img{ padding: 14%; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #16261c, #0b1710); border: 2px solid rgba(246,243,236,.18); box-sizing: border-box; }
@media (max-width: 1359px){ .fronthero__logo{ display: none !important; } }

/* Region patches (Sept 17) */
.regionpatch{ display: inline-grid; place-items: center; flex: none; vertical-align: middle; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.regionpatch svg{ display: block; width: 100%; height: 100%; }
.llbadge--patch{ width: 34px; height: 34px; background: none !important; border: 0 !important; padding: 0 !important; }
.llwscard{ display: grid !important; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; }
.llwscard__words{ display: grid; gap: 2px; min-width: 0; }

/* ==========================================================================
   SEPT 18: A TERM, A PLAY, A RULE, A POSITION - THE PAGE AS CARDS
   Connor: match the rest of the site, no walls of small gray type, no
   subtitles or footnotes hanging off the bottom, and answer "why it matters"
   for the majors and for youth ball. Each question gets a card, the numbers
   sit on a board, the four rulebooks are four cards, and every line that used
   to be gray filler is either a readable line inside a card or is gone.
   ========================================================================== */
.tpage{ display: grid; gap: 18px; }
.tgrid{ display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); align-items: start; }
.tcard2{
  display: grid; gap: 12px; align-content: start; padding: 20px 22px 22px;
  background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--tone, var(--accent));
  border-radius: 14px; --tone: var(--accent);
}
.tcard2--read{ --tone: var(--college); }
.tcard2--watch{ --tone: var(--accent-2); }
.tcard2--scale{ --tone: var(--accent-3); }
.tcard2--know{ --tone: var(--accent-hot); }
.tcard2__head{ display: flex; align-items: center; gap: 12px; }
.tcard2__icon{ display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 10px; background: var(--obj-board); }
.tcard2__icon .hc-icon{ width: 28px; height: 28px; stroke: var(--tone); }
.tcard2__name{
  margin: 0; font-family: var(--display-big) !important; font-weight: 900 !important; text-transform: uppercase;
  font-size: 1.6rem !important; line-height: 1 !important; letter-spacing: .01em !important;
}
.tcard2__text{ margin: 0; font-size: 1.05rem; line-height: 1.55; color: var(--ink); }
.tcard2__text--lead{ font-size: 1.14rem; }
.tcard2__chip{
  justify-self: start; padding: 4px 12px; border-radius: 999px;
  font-family: var(--display-big); font-weight: 900; text-transform: uppercase; letter-spacing: .04em;
  font-size: 1rem; line-height: 1.15; color: var(--accent-ink); background: var(--tone);
}
.tcard2__chip--youth{ background: var(--accent-3); }
.tcard2__points{ margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.tcard2__point{ position: relative; padding-left: 20px; font-size: 1.05rem; line-height: 1.5; color: var(--ink); }
.tcard2__point::before{
  content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; border-radius: 50%;
  background: var(--tone); box-shadow: 0 0 10px 1px color-mix(in srgb, var(--tone) 45%, transparent);
}
/* the numbers board inside By the Numbers */
.tnums{ display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tnums__tile{ display: grid; gap: 5px; align-content: start; padding: 13px 14px; border-radius: 11px; background: var(--obj-board); border: 1px solid var(--obj-board-edge); }
.tnums__num{ font-family: var(--mono); font-weight: 800; font-size: 1.9rem; line-height: 1; color: var(--obj-bulb); }
.tnums__words{ font-size: .98rem; line-height: 1.4; color: var(--obj-board-ink); }
/* worth knowing */
.tfacts{ display: grid; gap: 8px; }
.tfact{ display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 10px 14px; border-radius: 11px; background: var(--obj-board); border: 1px solid var(--obj-board-edge); }
.tfact__value{ font-family: var(--mono); font-weight: 800; font-size: 1.5rem; line-height: 1; color: var(--obj-bulb); font-variant-numeric: tabular-nums; }
.tfact .tfact__value{ display: grid; justify-items: start; gap: 4px; }
.tfact .tfact__unit{ font-family: var(--body, inherit); font-size: .8rem; font-weight: 700; color: var(--obj-board-sub); line-height: 1.15; max-width: 14ch; }
.tfact__words{ display: grid; gap: 1px; min-width: 0; }
.tfact__label{ font-weight: 700; font-size: 1rem; color: var(--obj-board-ink); }
.tfact__who{ font-size: .95rem; color: var(--obj-board-sub); }
/* panels: the reading line is a line, not a footnote */
.tpanel{ background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; }
.tpanel__head{ display: grid; gap: 8px; margin-bottom: 14px; }
.tpanel__read{ margin: 0; font-size: 1.02rem; line-height: 1.5; color: var(--ink); max-width: 76ch; }
.tpanel__read--foot{ margin-top: 14px; }
.tpanel__note, .tpanel__footer{ display: none !important; }
/* the four rulebooks, as four cards */
.tbooks{ display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.tbook{ display: grid; gap: 9px; align-content: start; padding: 16px 18px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); border-top: 4px solid var(--tone, var(--accent)); --tone: var(--accent); }
.tbook--ll{ --tone: var(--accent-2); }
.tbook--travel{ --tone: var(--accent-3); }
.tbook--college{ --tone: var(--college); }
.tbook__name{ margin: 0; font-family: var(--display-big); font-weight: 900; text-transform: uppercase; font-size: 1.5rem; line-height: 1; letter-spacing: .01em; color: var(--tone); }
.tbook__call{ margin: 0; font-size: 1.06rem; line-height: 1.45; font-weight: 600; color: var(--ink); }
.tbook__chip{ justify-self: start; padding: 3px 10px; border-radius: 999px; font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); background: var(--surface-3); }
.tbook__rule, .tbook__note{ margin: 0; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
/* numbers inside writing: bold and a shade brighter, no highlighter */
.tterm__num{ padding: 0; background: none !important; color: var(--ink) !important; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.tcard2 .tterm__num, .tpanel__read .tterm__num{ color: var(--ink) !important; }
/* The match list is allowed out of the front card while it is open (Sept 18) */
body.has-suggest .fronthero{ overflow: visible; }
.fronthero:has(#suggestions:not([hidden])){ overflow: visible; }

/* ==========================================================================
   SEPT 18: THE ANSWER CARD, AT THE SIZE OF THE REST OF THE SITE
   The season card was a 460 pixel strip of twelve point mono beside the
   reading. The subject card now leads the answer across the full width, the
   name is poster lettering, and every stat is a board tile big enough to read
   from a normal distance.
   ========================================================================== */
.answer__subject{ margin: 0 0 20px; }
.answer__subject .stat-card{
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start;
  padding: 20px 22px; border-radius: 14px; border-top: 4px solid var(--accent);
}
.answer__subject .card-photo{ width: 128px; height: 128px; border-radius: 12px; }
.answer__subject .card-photo-initials{ font-size: 2.2rem; }
.answer__subject .card-name{
  font-family: var(--display-big); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1; letter-spacing: .01em; color: var(--ink);
}
.answer__subject .card-meta{
  font-family: var(--display); font-size: 1.02rem; letter-spacing: .02em;
  text-transform: none; color: var(--ink-soft); margin-top: 4px;
}
@media (max-width: 620px){
  .answer__subject .stat-card{ grid-template-columns: 1fr; }
  .answer__subject .card-photo{ width: 96px; height: 96px; }
}
/* stat tiles, everywhere an answer draws them */
.answer .card-stats, .answer__subject .card-stats{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; margin-top: 14px;
}
.answer .card-stat, .answer__subject .card-stat{
  display: grid; gap: 3px; justify-items: center; padding: 10px 8px; border-radius: 10px;
  background: var(--obj-board); border: 1px solid var(--obj-board-edge);
}
.answer .card-stat-value, .answer__subject .card-stat-value{
  font-family: var(--mono); font-weight: 800; font-size: 1.45rem; line-height: 1; color: var(--obj-bulb);
}
.answer .card-stat-label, .answer__subject .card-stat-label{
  font-family: var(--display); font-weight: 800; font-size: .86rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--obj-board-sub);
}
/* the one big number card (a WAR or a home run total) */
.answer .card--statline{ padding: 20px 22px; border-radius: 14px; }
.answer .statline__who{ font-family: var(--display); font-size: 1.05rem; color: var(--ink-soft); margin: 0; }
.answer .statline__value{
  font-family: var(--mono); font-weight: 800; font-size: clamp(3rem, 7vw, 4.4rem); line-height: 1;
  margin: 6px 0 2px; color: var(--ink);
}
.answer .statline__label{
  font-family: var(--display-big); font-weight: 900; text-transform: uppercase; letter-spacing: .02em;
  font-size: 1.4rem; margin: 0; color: var(--accent);
}
.answer .card__title{
  font-family: var(--display-big); font-weight: 900; text-transform: uppercase;
  font-size: 1.35rem; letter-spacing: .01em;
}
.answer .card__note, .answer .card__subtitle, .answer .card__meaning{ font-size: .98rem; color: var(--ink-soft); font-style: normal; }
.answer__lede{ font-family: var(--display-big); text-transform: none; font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.2rem); }
.answer__prose p{ font-size: 1.06rem; line-height: 1.6; }

/* ==========================================================================
   SEPT 18: NO SMALL PRINT, AND NOTHING LOOSE UNDER A CARD
   Connor, on every page: no small text like that, and everything should have
   a card rather than a line of AI text sitting under something.

   This is one layer at the end rather than 60 edits through the file, so the
   rule is visible in one place and a page built tomorrow inherits it.

     1. Any sentence a person is meant to read is at least 1.02rem and in the
        page's own ink. Notes, blurbs, subs, hints, footers, sources.
     2. Labels that are meant to be small (chips, badges, ranks, values,
        table headers) stay small, because they are signposts, not reading.
     3. A sentence that was hanging loose under a section gets a card: a
        surface, a line, and a lit left edge, the same as the answer points.
   ========================================================================== */

/* ---- 1. reading text is reading size ---- */
[class*="__note"]:where(:not(svg *)), [class*="__blurb"]:where(:not(svg *)), [class*="__sub"]:not([class*="subtitle--"]):where(:not(svg *)),
[class*="__text"]:where(:not(svg *)), [class*="__hint"]:where(:not(svg *)), [class*="__foot"]:where(:not(svg *)), [class*="__source"]:where(:not(svg *)),
[class*="__line"]:where(:not(svg *)):not([class*="headline"]), [class*="__lead"]:where(:not(svg *)),
[class*="__desc"]:where(:not(svg *)), [class*="__explain"]:where(:not(svg *)), [class*="__why"]:where(:not(svg *)), [class*="__meaning"]:where(:not(svg *)),
.card-note, .card__note, .card__subtitle, .card__meaning, .empty-note,
.tab__itemNote, .tab__blurb, .drawer__blurb, .cb-story__text, .cb-tile__note,
.tb-clip__note, .hub__source, .finder-wrap__hint, .panel-block__foot,
.orgcard__edition, .tab__soon, .sitehead__mission{
  font-size: max(1.02rem, 1em) !important;
  line-height: 1.5;
  color: var(--ink-soft);
  font-style: normal;
}
/* Anything drawn inside an SVG keeps the size the drawing gave it.
   (Sept 19: this used to be a "font-size: revert !important" on every SVG
   text element, which threw away the size each drawing set for itself and
   blew the region patch lettering up past its arc. The reading-size rule
   below now simply never reaches inside an SVG.) */

/* Kickers and eyebrows: small is fine, invisible is not. */
[class*="__eyebrow"]:where(:not(svg *)), [class*="__kicker"]:where(:not(svg *)), [class*="__kind"]:where(:not(svg *)), [class*="__tag"]:where(:not(svg *)),
[class*="__badge"]:where(:not(svg *)), [class*="__chip"]:where(:not(svg *)), [class*="__pill"]:where(:not(svg *)){
  font-size: max(.88rem, 1em);
  font-weight: 800;
  letter-spacing: .05em;
}
/* Values and ranks are numbers, not reading, and they set their own size.
   (Sept 19: nothing above selects them, so they are simply left alone. An
   earlier "font-size: revert" here threw their designed sizes away.) */

/* ---- 2. a loose sentence becomes a card ---- */
.panel-block > .panel-block__foot,
.panel-block > .empty-note,
.section-page > .hub__source,
.section-page > .empty-note,
.finder-wrap__hint,
.tpanel__read--foot,
.answer__source{
  display: block;
  margin-top: 14px;
  padding: 13px 16px 13px 18px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  color: var(--ink-soft);
}

/* ---- 3. the shared card shell, so every page's cards read the same ---- */
.panel-block__title, .fieldgroup__name, .hub__heading{
  font-family: var(--display-big) !important; font-weight: 900 !important;
  text-transform: uppercase; letter-spacing: .01em !important;
  font-size: clamp(1.5rem, 2.4vw, 2rem) !important; line-height: 1.05 !important;
}
/* the stragglers the sweep above did not name */
.cb-tile__label, .cb-series__label, .cb-offseason__whenLabel, .cb-offseason__eyebrow,
.tb-legend__key, .tb-legend__key--small, .tb-white__slot, .sitefoot__title, .sitefoot p,
.toolcard__tag, .drawer__blurb, .tab__soon{ font-size: max(.98rem, 1em) !important; }
.cb-more, .cb-link, .railblock__more, .answer__back{ font-size: 1.02rem !important; font-weight: 700; }
.sitefoot__title{ font-family: var(--display-big); font-weight: 900; text-transform: uppercase; letter-spacing: .02em; font-size: 1.15rem !important; }

/* =======================================================================
   THE WORLD SERIES CARD, AND A SEASON'S LEAGUE BOARD (Sept 18)
   -----------------------------------------------------------------------
   Two panels that used to be sentences and tables. The card is drawn in the
   two clubs' own published colors, which arrive as custom properties from
   the renderer, so nothing here hard codes a club.
   ======================================================================= */

.tpanel--wsCard{ background: transparent; border: 0; padding: 0; }
.tpanel--wsCard .tpanel__head{ margin-bottom: 12px; }
.tpanel--env{ background: transparent; border: 0; padding: 0; }

.twsc{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.14)),
    linear-gradient(100deg, color-mix(in srgb, var(--champ) 42%, var(--surface)) 0%,
                            var(--surface) 46%,
                            color-mix(in srgb, var(--runner) 26%, var(--surface)) 100%);
  box-shadow: var(--shadow-lift);
}
/* the mow stripes, so the card sits on grass like the rest of the site */
.twsc::before{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(115deg, var(--mow) 0 26px, transparent 26px 52px);
}

.twsc__banner{
  position: relative;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px clamp(16px, 2.6vw, 28px);
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(0,0,0,.26), rgba(0,0,0,.08));
}
.twsc__trophyWrap{ display: block; line-height: 0; }
.twsc__trophy{ width: 54px; height: 54px; display: block; }
.twsc__blade{ fill: var(--bulb); opacity: .92; }
.twsc__ring{ fill: var(--chalk); }
.twsc__stem, .twsc__base{ fill: var(--bulb); }
.twsc__bannerWords{ display: grid; gap: 2px; }
.twsc__kicker{
  margin: 0; font-family: var(--mono); font-weight: 800; font-size: 1rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--bulb);
}
.twsc .twsc__year{
  margin: 0; font-family: var(--display-big); font-weight: 900; line-height: .9;
  font-size: clamp(2.4rem, 6vw, 3.6rem); color: var(--ink); letter-spacing: .01em;
}
.twsc__shape{
  margin-left: auto; max-width: 30ch;
  font-size: var(--step-small); font-weight: 650; line-height: 1.45; color: var(--ink-soft);
  padding: 8px 14px; border-radius: 999px;
  background: rgba(0,0,0,.26); border: 1px solid var(--line-soft);
}

.twsc__body{
  position: relative;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(12px, 2.4vw, 26px);
  padding: clamp(18px, 2.8vw, 30px) clamp(16px, 2.6vw, 28px);
}
.twsc__side{ display: grid; gap: 7px; align-content: center; }
.twsc__side--runner{ justify-items: end; text-align: right; }
.twsc__cap{
  font-family: var(--mono); font-weight: 800; font-size: .95rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint);
}
.twsc__side--champ .twsc__cap{ color: var(--bulb); }
.twsc .twsc__club{
  margin: 0; font-family: var(--display-big); font-weight: 900; text-transform: uppercase;
  line-height: .95; letter-spacing: .005em;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  color: var(--ink);
  text-shadow: 0 2px 0 rgba(0,0,0,.35);
}
.twsc .twsc__side--champ .twsc__club{
  padding-left: 12px;
  border-left: 6px solid var(--club);
  box-shadow: inset 12px 0 0 -6px var(--trim);
}
.twsc .twsc__side--runner .twsc__club{
  padding-right: 12px;
  border-right: 6px solid var(--club);
  color: var(--ink-soft);
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
}
.twsc__meta{ display: flex; gap: 10px; flex-wrap: wrap; }
.twsc__side--runner .twsc__meta{ justify-content: flex-end; }
.twsc__metaItem{ font-size: var(--step-small); font-weight: 650; color: var(--ink-soft); }

.twsc__score{ display: grid; justify-items: center; gap: 9px; min-width: 132px; }
.twsc__tally{ display: flex; align-items: baseline; gap: 6px; }
.twsc .twsc__num{
  font-family: var(--mono); font-weight: 800; line-height: .9;
  font-size: clamp(2.8rem, 6.4vw, 4.2rem);
}
.twsc .twsc__num--champ{ color: var(--bulb); }
.twsc .twsc__num--runner{ color: var(--ink-faint); }
.twsc .twsc__dash{ font-size: 1.9rem; color: var(--ink-faint); font-weight: 700; }
.twsc__pips{ display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; padding: 3px 0; }
.twsc__pip{
  width: 15px; height: 15px; transform: rotate(45deg);
  border-radius: 3px; border: 1px solid rgba(0,0,0,.4);
}
.twsc__pip--champ{ background: var(--bulb); box-shadow: 0 0 12px rgba(255,226,122,.45); }
.twsc__pip--runner{ background: var(--runner); border-color: var(--runner-trim); box-shadow: 0 0 0 1px rgba(255,255,255,.28); }
.twsc__pip--tie{ background: var(--ink-faint); }
.twsc__pipNote{
  font-family: var(--mono); font-size: .92rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint);
}

.twsc__story{
  position: relative;
  margin: 0; padding: 14px clamp(16px, 2.6vw, 28px);
  border-top: 1px solid var(--line-soft);
  background: rgba(0,0,0,.24);
  font-size: 1.08rem; line-height: 1.5; font-weight: 600; color: var(--ink-soft);
}
.twsc__storyMark{
  display: inline-block; margin-right: 10px;
  font-family: var(--mono); font-weight: 800; font-size: .92rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent-hot);
}
.twsc__go{
  position: relative; display: block; padding: 13px clamp(16px, 2.6vw, 28px);
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono); font-weight: 800; font-size: 1rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-hot); text-decoration: none;
  background: rgba(0,0,0,.16);
}
.twsc__go:hover{ background: var(--accent-soft); color: var(--ink); }
.twsc__go::after{ content: " →"; }

@media (max-width: 720px){
  .twsc__body{ grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .twsc__side, .twsc__side--runner{ justify-items: center; text-align: center; }
  .twsc__side--runner .twsc__meta{ justify-content: center; }
  .twsc .twsc__side--champ .twsc__club{ border-left: 0; padding-left: 0; box-shadow: none; border-bottom: 6px solid var(--club); padding-bottom: 6px; }
  .twsc .twsc__side--runner .twsc__club{ border-right: 0; padding-right: 0; border-bottom: 6px solid var(--club); padding-bottom: 6px; }
  .twsc__shape{ margin-left: 0; }
}

/* ---------- the league board ---------- */

.tenv{ display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
.tenv__tile{
  display: grid; gap: 8px; align-content: start;
  padding: 16px 18px 15px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-top: 4px solid var(--line);
}
.tenv__tile.is-top{ border-top-color: var(--accent); background: linear-gradient(180deg, var(--accent-soft), var(--surface-2) 58%); }
.tenv__top{ display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tenv__abbr{
  font-family: var(--mono); font-weight: 800; font-size: .95rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent-hot);
  padding: 2px 8px; border-radius: 6px; background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.tenv__name{ font-family: var(--display); font-weight: 750; font-size: 1.02rem; color: var(--ink-soft); }
.tenv .tenv__value{
  margin: 2px 0 0; font-family: var(--mono); font-weight: 800; line-height: .9;
  font-size: clamp(2.4rem, 4.6vw, 3.1rem); color: var(--ink);
}
.tenv__scale{
  position: relative; height: 10px; margin-top: 6px;
  border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line-soft);
}
.tenv__fill{
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--grass-dark), var(--accent));
}
.tenv__mark{
  position: absolute; top: -5px; width: 5px; height: 18px;
  margin-left: -2.5px; border-radius: 3px;
  background: var(--chalk); box-shadow: 0 0 10px rgba(255,255,255,.4);
}
.tenv__ends{ display: flex; justify-content: space-between; }
.tenv__end{ font-family: var(--mono); font-size: .9rem; color: var(--ink-faint); }
.tenv__read{ margin: 3px 0 0; font-size: var(--step-small); line-height: 1.45; color: var(--ink-soft); font-weight: 600; }
.tenv__rank{
  display: inline-block; margin-right: 8px; padding: 2px 9px;
  border-radius: 999px; background: var(--accent); color: var(--accent-ink);
  font-family: var(--mono); font-weight: 800; font-size: .92rem;
}
.tenv__foot{
  grid-column: 1 / -1; margin: 2px 0 0;
  font-size: var(--step-small); color: var(--ink-faint); font-weight: 600;
}

/* The reading half of an answer, as cards rather than a column of paragraphs */
.answer__prose{ display: grid; gap: 10px; }
.answer__point{
  position: relative; padding: 14px 18px 14px 20px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line);
}
.answer__point::before{
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0;
  background: var(--accent); opacity: .85;
}
.answer__point:nth-child(2n)::before{ background: var(--accent-3); }
.answer__point:nth-child(3n)::before{ background: var(--college); }
.answer__pointText p{ margin: 0; font-size: 1.08rem; line-height: 1.55; color: var(--ink); max-width: 74ch; }
.answer__pointText p + p{ margin-top: 8px; }
.answer__point .rich-list{ margin: 0; padding-left: 18px; }
.answer__lede{
  padding: 16px 20px; border-radius: 14px; background: var(--surface);
  border: 1px solid var(--line); border-left: 5px solid var(--accent);
}
.tenv__sub{
  margin: 0; font-family: var(--mono); font-weight: 700; font-size: .95rem;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint);
}

/* ---- the two panels, settled (Sept 18) ----------------------------------
   Tiles line up across the board whether the measure is called OPS or Home
   Runs per Team per Game, and the card's overlays are cut in the light
   theme, where a black wash over a white card is just gray. */
.tenv__top{ min-height: 2.9em; align-content: start; }
.tenv__name{ flex: 1 1 8ch; }
.tenv__read{ margin-top: auto; }
.tenv__sub{ padding-top: 2px; border-top: 1px dashed var(--line-soft); margin-top: 4px; }

@media (prefers-color-scheme: light){
  .twsc__banner{ background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.34)); }
  .twsc__story{ background: rgba(255,255,255,.62); }
  .twsc__go{ background: rgba(255,255,255,.5); }
  .twsc__shape{ background: rgba(255,255,255,.7); }
  .twsc .twsc__kicker, .twsc .twsc__num--champ, .twsc .twsc__side--champ .twsc__cap{ color: var(--clay-deep); }
  .twsc__blade, .twsc__stem, .twsc__base{ fill: var(--bulb); }
  .twsc__ring{ fill: var(--clay-deep); }
  .twsc__pip--champ{ background: var(--bulb); box-shadow: none; }
  .twsc .twsc__club{ text-shadow: none; }
  /* A chalk marker is invisible on a light track, so the marker is the ink. */
  .tenv__mark{ background: var(--ink); box-shadow: 0 0 0 1px rgba(255,255,255,.85); }
}
/* team hub, player page and the field map: names and labels at reading size */
.lineupcard__name, .rotcard__last, .armchip__name, .fieldside__title, .field__offLabel,
.field__offName, .field__legend, .sd-chip, .path__team, .hero__birth, .scrub__team,
.rotcard__name, .lineupcard__pos, .armchip__role{ font-size: max(.98rem, 1em) !important; }
.fieldside__title{ font-family: var(--display-big); font-weight: 900; text-transform: uppercase; font-size: 1.2rem !important; letter-spacing: .02em; }
/* Little League pages and the scoreboard: the second line of a name is still a name */
.gamelog__from, .road__from, .placings__from, .teamcard__place, .gamelog__day,
.gamelog__round, .road__round, .llws-champ__label, .placings__note,
.score__status, .score__probablesLabel, .bracket__roundName, .scores__updated,
.champbanner__label{ font-size: max(.98rem, 1em) !important; }
.llws-champ__label, .champbanner__label, .gamelog__round, .road__round, .bracket__roundName{
  font-family: var(--display-big); font-weight: 900; text-transform: uppercase; letter-spacing: .04em;
}
/* the last of the small print: labels, captions and stamps outside drawings */
[class*="__label"]:where(:not(svg *)), [class*="__caption"]:where(:not(svg *)), [class*="__stamp"]:where(:not(svg *)),
[class*="__deck"]:where(:not(svg *)), [class*="__aside"]:where(:not(svg *)), [class*="__count"]:where(:not(svg *)),
[class*="__format"]:where(:not(svg *)), [class*="__split"]:where(:not(svg *)), [class*="__need"]:where(:not(svg *)),
[class*="__mark"]:where(:not(svg *)):not([class*="__marks"]), .cb-aside, .nw-stamp{
  font-size: max(.95rem, 1em);
}
/* news desk and Road to Omaha: the last few */
.nw-lead__statlabel, .nw-card__statlabel, .nw-arsenal__n, .nw-wire__summary, .nw-wire__outlet,
.cb-offseason__instead, .cb-preset__name, .cb-seed__team, .cb-omahateam__meta, .cb-omahateam__flag,
.cb-final__game, .cb-step__detail, .cb-presets__label, .cb-how__count, .cb-formula__label,
.cb-resume__label, .gamelog__filter-label{ font-size: max(.96rem, 1em) !important; }
/* A trading card face sets its own type. Nothing in the sweep reaches inside one. */
/* (Sept 19: the "revert" that sat here reset card faces to the page size;
   the sweep never reached inside a card, so the line is gone.) */
.iqprog__reset, .cb-offseason__whenLabel{ font-size: max(.96rem, 1em) !important; }

/* ==========================================================================
   SEPT 18 (ROUND TWO): THE HEADER FILLS THE TOP AND NOTHING OVERLAPS
   What broke it the first time: the strip was given overflow-x so it could
   scroll, and an overflow box clips anything positioned inside it, which
   meant every dropdown was cut off at the bottom edge of the strip. So the
   strip clips nothing now.
   The rules that hold instead:
     1. Every tab takes a share of the whole strip, so the row fills the top.
     2. No tab is ever narrower than its own text (min-width: max-content),
        which is what stops the text climbing out of its tab.
     3. The second line under each name stays. It costs width, so the burger
        arrives earlier rather than the text overlapping.
     4. The highlight is the whole tab: both lines and the caret inside one
        rounded pill.
   ========================================================================== */
.sitehead{ align-items: stretch; gap: clamp(8px, 1.4vw, 16px); }
.sitehead__tabs{
  display: flex; align-items: stretch; gap: 6px;
  flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow: visible;
  padding: 8px 0;
}
.tab{
  flex: 1 1 auto; min-width: max-content;
  position: relative; display: flex; align-items: stretch;
  border-radius: 12px; border: 1px solid transparent;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.tab__link{
  flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center;
  gap: 1px; padding: 8px 4px 8px 14px; border-bottom: 0 !important; color: var(--ink-soft);
  min-width: 0;
}
.tab__label{ font-size: 1.02rem !important; font-weight: 700; white-space: nowrap; }
.tab__blurb{
  display: block !important; font-size: .92rem !important; color: var(--ink-faint);
  white-space: nowrap; line-height: 1.25;
}
.tab__caret{ padding: 0 12px 0 4px !important; display: flex; align-items: center; }
.tab__caret svg{ position: static !important; }
/* the highlight wraps the whole tab, both lines and the caret */
.tab:hover, .tab:focus-within{ background: var(--surface-2); border-color: var(--line); }
.tab.is-open{ background: var(--surface-2); border-color: var(--accent-line); }
.tab.is-here{ background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: var(--accent-line); }
.tab:hover .tab__link, .tab.is-open .tab__link, .tab.is-here .tab__link{ color: var(--ink); }
.tab:hover .tab__blurb, .tab.is-here .tab__blurb, .tab.is-open .tab__blurb{ color: var(--ink-soft); }
.tab--tools{ margin-left: 2px !important; }
/* a menu hangs below its tab and is clipped by nothing */
.tab__menu{ z-index: 80; }
/* the search shrinks before anything else, then leaves */
.sitehead__ask{ flex: none; margin-left: auto; align-self: center; }
.sitehead__askInput{ width: clamp(120px, 12vw, 210px); }
@media (max-width: 1620px){ .sitehead__mission{ display: none; } }
@media (max-width: 1520px){ .sitehead__ask{ display: none; } }
/* Two lines per tab need the room. Below this the strip becomes the drawer,
   which is a better narrow header than five tabs fighting over 900 pixels. */
/* Measured with the tabs at their own content width: the five need 962px,
   the wordmark 155, the account button 40, and the gutters about 70. So the
   strip needs about 1230 and is given 1320 so it never sits flush against
   the account button. Below that the drawer takes over. */
@media (max-width: 1319px){
  .sitehead{ flex-wrap: nowrap; align-items: center; }
  .sitehead__tabs{ display: none; }
  .sitehead__burger{ display: flex; margin-left: auto; }
}
@media (min-width: 1320px){ .drawer{ display: none; } .sitehead__burger{ display: none; } }
/* In a menu the name leads and the note follows, so the name is the bigger of the two. */
.tab__itemName, .drawer__label{ font-size: 1.12rem !important; font-weight: 800; }
.tab__itemNote, .drawer__blurb{ font-size: 1rem !important; color: var(--ink-soft); }
.tab__menu{ padding: 10px; border-radius: 14px; }
.tab__item{ border-radius: 10px; padding: 10px 12px; }
/* Tighter tabs, and the account button gives up its word before the tabs give
   up their second line. */
.tab__link{ padding: 7px 4px 7px 11px; }
.tab__blurb{ font-size: .86rem !important; }
.tab__caret{ padding: 0 9px 0 3px !important; }
@media (max-width: 1520px){
  .sitehead__meText{ display: none; }
  .sitehead__me{ padding: 8px; width: 40px; height: 40px; justify-content: center; border-radius: 12px; gap: 0; }
  .sitehead__me svg{ width: 20px; height: 20px; }
}
/* The old rule hid the drawer from 941px up. The strip now gives way at 1319,
   so the drawer has to be allowed to exist between those two widths. */
@media (max-width: 1319px){ .drawer{ display: block; } }
/* A closed drawer is closed at every width. The rule above only re-hid it
   between 941 and 1319, so under 941 (a half screen on most monitors) it sat
   open over the page and the close button could not put it away. */
.drawer[hidden]{ display: none !important; }
/* The two front card logos, smaller (Sept 19) */
.fronthero__logo{ width: clamp(84px, 7.5vw, 118px) !important; gap: 8px !important; }
.fronthero__logo span{ font-size: clamp(.95rem, 1.1vw, 1.2rem) !important; }
/* By the Numbers takes the whole width of the term grid, right under What It Is */
.tgrid > .tcard2--wide{ grid-column: 1 / -1; }
.tcard2--wide .tnums{ grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.tgrid > .tcard2--what{ grid-column: 1 / -1; } .tgrid > .tcard2--what .tcard2__text{ max-width: 80ch; }
/* set by nav.js when the tabs do not fit beside them */
.sitehead--noMission .sitehead__mission{ display: none !important; }
.sitehead--noSearch .sitehead__ask{ display: none !important; }
.sitehead__ask{ margin-left: 14px !important; }

/* ==========================================================================
   SEPT 19: WILLIAMSPORT AND OMAHA ON THE FRONT PAGE
   Who won with their mark, the final on a scoreboard, and the numbers around
   it as board tiles, instead of a card of stacked lines.
   ========================================================================== */
.railblock{ display: grid; gap: 14px; align-content: start; }
.champhead{
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px;
  padding: 14px 16px; border-radius: 14px; text-decoration: none; color: inherit;
  background: var(--surface-2); border: 1px solid var(--line); border-left: 4px solid var(--accent);
}
.champhead:hover{ border-color: var(--accent-line); }
.champhead__logo{ display: grid; place-items: center; width: 88px; height: 88px; border-radius: 14px; background: #fbfaf4; padding: 9px; }
.champhead__logo img{ width: 100%; height: 100%; object-fit: contain; }
.champhead__logo:empty{ display: none; }
.champhead__words{ display: grid; gap: 3px; min-width: 0; }
.champhead__kicker{ font-weight: 800; font-size: .92rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.champhead__name{ font-family: var(--display-big); font-weight: 900; text-transform: uppercase; font-size: clamp(1.8rem, 2.6vw, 2.4rem); line-height: .95; letter-spacing: .01em; }
.champhead__under{ font-size: 1rem; color: var(--ink-soft); }
.champboard{ display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--obj-board); border: 1px solid var(--obj-board-edge); }
.champboard__title{ font-family: var(--display-big); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; font-size: .95rem; color: var(--obj-board-sub); margin-bottom: 2px; }
.champboard__row{
  display: grid; grid-template-columns: auto minmax(0, 1fr) 2.6ch; align-items: center; gap: 10px;
  padding: 6px 4px; border-top: 1px solid rgba(255,255,255,.06); color: var(--obj-board-sub);
}
.champboard__row:first-of-type{ border-top: 0; }
.champboard__row:has(.champboard__team--vs){ grid-template-columns: 2.4ch minmax(0, 1fr) 2.4ch minmax(0, 1fr) 2.4ch; }
.champboard__row.is-won .champboard__team:first-of-type, .champboard__row.is-won .champboard__runs:not(.champboard__runs--vs){ color: var(--obj-board-ink); }
.champboard__game{ font-family: var(--mono); font-weight: 800; font-size: .9rem; color: var(--obj-board-sub); }
.champboard__team{ font-weight: 700; font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.champboard__runs{ font-family: var(--mono); font-weight: 800; font-size: 1.25rem; text-align: right; color: var(--obj-bulb); font-variant-numeric: tabular-nums; }
.champboard__row:not(.is-won) .champboard__runs:not(.champboard__runs--vs){ opacity: .7; }
.champboard__runs--vs{ opacity: .7; }
.champtiles{ display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
.champtile{ display: grid; gap: 3px; align-content: start; padding: 10px 12px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--line); }
.champtile__value{ font-family: var(--display-big); font-weight: 900; font-size: 1.45rem; line-height: 1; text-transform: uppercase; }
.champtile__label{ font-size: .88rem !important; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; }
.champboard__row.is-won .champboard__team:not(.champboard__team--vs){ color: var(--obj-board-ink); font-weight: 800; }
.champboard__row:not(.is-won) .champboard__team--vs{ color: var(--obj-board-ink); font-weight: 800; }
.champboard__row:not(.is-won) .champboard__runs--vs{ opacity: 1; }
/* What the front search can answer from, as chips under the line (Sept 19) */
.fronthero__scope{
  list-style: none; margin: 10px auto 18px; padding: 0; max-width: 780px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 7px;
}
.fronthero__scope li{
  padding: 5px 12px; border-radius: 999px; font-size: .92rem; font-weight: 700;
  color: var(--ink); background: color-mix(in srgb, var(--obj-board) 70%, transparent);
  border: 1px solid var(--line);
}
.sitehead--drawer .sitehead__tabs{ display: none !important; }
.sitehead--drawer .sitehead__burger{ display: flex !important; margin-left: auto; }
.sitehead--drawer + .drawer:not([hidden]){ display: block !important; }

/* ==========================================================================
   SEPT 19: THE NEWS DESK, IN THE SITE'S OWN SHAPES
   What the front page got: poster headlines, the deck as a chip, the number
   on a dark board, the play-by-play call on its own strip like a broadcast
   lower third, the rest as lit points with bold numbers, and every "how to
   read this chart" sentence folded behind one tap instead of sitting under
   the chart in gray.
   ========================================================================== */
.nw-lead__headline, .nw-card__headline{
  font-family: var(--display-big) !important; font-weight: 900 !important; text-transform: uppercase;
  letter-spacing: .005em !important; line-height: .98 !important;
}
.nw-lead__headline{ font-size: clamp(2.2rem, 4.2vw, 3.4rem) !important; }
.nw-card__headline{ font-size: clamp(1.5rem, 2.2vw, 1.9rem) !important; }
.nw-lead__eyebrow, .nw-card__eyebrow{ font-size: .92rem !important; letter-spacing: .1em !important; }
/* the deck as a chip */
.nw-deck{
  display: inline-block; align-self: flex-start; margin: 10px 0 0 !important; padding: 5px 12px;
  border-radius: 999px; font-family: var(--body) !important; font-size: .95rem !important; font-weight: 700 !important;
  line-height: 1.3 !important; color: var(--ink) !important; max-width: none !important;
  background: var(--surface-2); border: 1px solid var(--line);
}
/* the number on a board */
.nw-lead__stat, .nw-card__stat{
  display: flex; align-items: center; gap: 14px; padding: 12px 16px !important; margin: 14px 0 6px !important;
  border-radius: 12px !important; border: 1px solid var(--obj-board-edge) !important; border-left: 1px solid var(--obj-board-edge) !important;
  background: var(--obj-board) !important;
}
.nw-lead__statvalue, .nw-card__statvalue{ color: var(--obj-bulb) !important; text-shadow: 0 0 12px rgba(255,226,122,.3); }
.nw-lead__statunit, .nw-card__statunit{ color: var(--obj-board-ink); font-size: 1.02rem !important; }
.nw-lead__statlabel, .nw-card__statlabel{ color: var(--obj-board-sub) !important; font-size: .88rem !important; }
/* the call, as a lower third */
.nw-copy{ display: grid; gap: 12px; margin-top: 14px; }
.nw-call{
  margin: 0; display: grid; gap: 4px; padding: 11px 14px 12px 16px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line); border-left: 4px solid var(--accent);
}
.nw-call__tag{ font-family: var(--display-big); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; color: var(--accent); }
.nw-call__text{ font-family: var(--display); font-weight: 700; font-size: 1.06rem; line-height: 1.4; color: var(--ink); }
.nw-lead .nw-call__text{ font-size: clamp(1.1rem, 1.6vw, 1.28rem); }
/* the rest, as points */
.nw-points{ margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.nw-point{ position: relative; padding-left: 20px; font-size: 1.04rem; line-height: 1.5; color: var(--ink); }
.nw-lead .nw-point{ font-size: clamp(1.06rem, 1.4vw, 1.16rem); }
.nw-point::before{
  content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 10px 1px color-mix(in srgb, var(--accent) 45%, transparent);
}
.nw-num{ font-weight: 800; font-variant-numeric: tabular-nums; }
/* how to read a chart, one tap away */
.nw-howto{ margin-top: 8px; }
.nw-howto > summary{
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  padding: 4px 11px; border-radius: 999px; font-size: .86rem; font-weight: 800; letter-spacing: .04em;
  color: var(--ink-soft); background: var(--surface-2); border: 1px solid var(--line);
}
.nw-howto > summary::-webkit-details-marker{ display: none; }
.nw-howto > summary::before{ content: "?"; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font-size: .84rem; color: var(--bg); background: var(--ink-soft); }
.nw-howto[open] > summary{ color: var(--ink); border-color: var(--accent-line); }
.nw-howto__text{ margin: 8px 0 0; font-size: .98rem; line-height: 1.5; color: var(--ink-soft); }
/* the wire: sources as chips, no column subtitles */
.nw-wire__from{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.nw-wire__fromLabel{ font-weight: 800; font-size: .9rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; }
.nw-wire__outletChip{ padding: 3px 10px; border-radius: 999px; font-size: .9rem; font-weight: 700; background: var(--surface-2); border: 1px solid var(--line); }
.nw-wire__coltitle{ font-family: var(--display-big) !important; font-weight: 900 !important; text-transform: uppercase; font-size: 1.5rem !important; letter-spacing: .02em; }
/* A deck that is a whole sentence reads as a line, not as a chip. */
.nw-deck--long{
  display: block; padding: 0 0 0 14px !important; border-radius: 0; background: none; border: 0;
  border-left: 3px solid var(--accent-line) !important; font-size: clamp(1.02rem, 1.4vw, 1.14rem) !important;
  font-weight: 600 !important; line-height: 1.5 !important; color: var(--ink) !important; max-width: 62ch !important;
}

/* The longest home run, redrawn as a side view of a field (Sept 19) */
.nw-flight{ width: 100%; height: auto; display: block; overflow: visible; }
.nw-flight__grass{ fill: var(--accent-3); opacity: .45; }
.nw-flight__track{ fill: var(--clay-lit); opacity: .55; }
.nw-flight__dirt{ fill: var(--clay-lit); opacity: .75; }
.nw-flight__stands{ fill: var(--surface-3); opacity: .9; }
.nw-flight__plate{ fill: var(--chalk); }
.nw-flight__tick{ stroke: var(--ink-faint); stroke-width: 1.5; }
.nw-flight__ruler{ fill: var(--ink-soft); font-family: var(--mono); font-weight: 700; font-size: 13px; }
.nw-flight__wall{ stroke: rgba(0,0,0,.25); stroke-width: 1; }
.nw-flight__walllabel{ fill: var(--ink); font-family: var(--display-big); font-weight: 900; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.nw-flight__glow{ stroke: var(--obj-bulb); stroke-width: 9; opacity: .16; stroke-linecap: round; }
.nw-flight__arc{ stroke: var(--obj-bulb); stroke-width: 3; stroke-linecap: round; }
.nw-flight__ball{ fill: #fbfaf4; stroke: #d8313a; stroke-width: 2; }
.nw-flight__tag{ fill: var(--obj-board); stroke: var(--obj-board-edge); }
.nw-flight__tagtext{ fill: var(--obj-bulb); font-family: var(--mono); font-weight: 800; font-size: 17px; }
.nw-flight__leader{ stroke: var(--obj-bulb); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: .7; }
.nw-flight__margin{ stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.nw-flight__margintext{ fill: var(--accent); font-weight: 800; font-size: 13px; }
/* Round two: the outcome as a card, the rest as small fact cards */
.nw-outcome{
  margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--obj-board); border: 1px solid var(--obj-board-edge);
  border-left: 4px solid var(--obj-bulb); color: var(--obj-board-ink);
  font-family: var(--display); font-weight: 700; font-size: 1.05rem; line-height: 1.4;
}
.nw-lead .nw-outcome{ font-size: clamp(1.08rem, 1.5vw, 1.22rem); }
.nw-outcome .nw-num{ color: var(--obj-bulb); }
.nw-facts{ display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.nw-fact{
  margin: 0; padding: 10px 13px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--line);
  font-size: .98rem; line-height: 1.45; color: var(--ink);
}
.nw-fact[hidden]{ display: none; }
.nw-more{
  justify-self: start; padding: 5px 12px; border-radius: 999px; cursor: pointer; font: inherit; font-size: .88rem; font-weight: 800;
  color: var(--ink-soft); background: var(--surface-2); border: 1px solid var(--line);
}
.nw-more:hover{ color: var(--ink); border-color: var(--accent-line); }
.nw-flight__wallcap{ fill: #f3f4ee; }
.nw-flight__walllabel{ font-size: 13px !important; }
/* Round three: the numbers as stat cards, value over label, nothing hidden */
.nw-statgrid{ display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.nw-statcard{
  display: grid; gap: 4px; align-content: start; padding: 12px 13px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line); border-top: 3px solid var(--accent);
}
.nw-statcard__value{ font-family: var(--display-big); font-weight: 900; font-size: clamp(1.5rem, 2.1vw, 1.9rem); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.nw-statcard__label{ font-size: .92rem; font-weight: 600; line-height: 1.3; color: var(--ink-soft); }
.nw-lead .nw-statgrid{ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

/* ===== SEPT 19 (evening): shared stat cards, player hub Show card ===== */
.be-statgrid{ display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.be-statcard{
  display: grid; gap: 5px; align-content: start; padding: 13px 14px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line); border-top: 3px solid var(--accent);
}
.be-statcard__kicker{ font-family: var(--display-big); font-weight: 800; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.be-statcard__value{ font-family: var(--display-big); font-weight: 900; font-size: clamp(1.7rem, 2.4vw, 2.2rem); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.be-statcard__label{ font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--ink-soft); }
.be-statcard.is-best{ border-top-color: #3fae6a; }
.be-statcard.is-best .be-statcard__kicker{ color: #3fae6a; }
.be-statcard.is-worst{ border-top-color: #d9534f; }
.be-statcard.is-worst .be-statcard__kicker{ color: #d9534f; }
.hub__cardSay{ display: grid; gap: 16px; align-content: start; }
.hub__tools{ margin: 4px 0 0; }
.hub__toolsNote{ font-family: var(--display-big); font-weight: 800; font-size: 1.1rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); order: -1; }

/* See Every Rating sheet as cards (Sept 19) */
.sc-sheet__body{ display: grid; grid-template-columns: 1fr; gap: 6px; }
.sc-sheet__body .sc-group{ grid-column: 1 / -1; padding: 12px 0 6px; }
.sc-sheet__body .sc-block__title{ font-family: var(--display-big); font-weight: 900; font-size: 1.35rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); margin: 0 0 10px; }
.sc-rgrid{ display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.sc-rcard{
  display: grid; gap: 6px; align-content: start; padding: 12px 13px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line); border-top: 3px solid var(--rc, var(--accent));
}
.sc-rcard.is-weak{ --rc: #b34b45; } .sc-rcard.is-fair{ --rc: #b8823a; } .sc-rcard.is-good{ --rc: #b3ab3c; }
.sc-rcard.is-great{ --rc: #3ea36f; } .sc-rcard.is-elite{ --rc: #3f8fd0; }
.sc-rcard__label{ font-size: 1rem; font-weight: 700; line-height: 1.25; color: var(--ink); }
.sc-rcard__value{ font-family: var(--display-big); font-weight: 900; font-size: 2.1rem; line-height: 1; color: var(--rc); font-variant-numeric: tabular-nums; }
.sc-rcard__track{ display: block; height: 7px; border-radius: 99px; background: var(--line); overflow: hidden; }
.sc-rcard__fill{ display: block; height: 100%; border-radius: 99px; background: var(--rc); }
.sc-rcard__rank{ font-size: .95rem; font-weight: 600; color: var(--ink-soft); }
.sc-pcard__facts{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.sc-pcard__fact{ display: grid; gap: 1px; }
.sc-pcard__fact b{ font-family: var(--display-big); font-size: 1.25rem; color: var(--ink); }
.sc-pcard__fact span{ font-size: .92rem; font-weight: 600; color: var(--ink-soft); }
.sc-qgrid{ display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.sc-qcard{ display: grid; gap: 4px; padding: 12px 13px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--accent); }
.sc-qcard__name{ font-family: var(--display-big); font-weight: 800; font-size: 1.15rem; letter-spacing: .03em; text-transform: uppercase; }
.sc-qcard__what{ font-size: 1rem; line-height: 1.4; color: var(--ink-soft); }

/* Team hub: The Club, by the Numbers as ranked cards (Sept 19) */
.clubnum__grid{ display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.clubnum{
  display: grid; gap: 4px; align-content: start; padding: 12px 13px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line); border-top: 3px solid var(--cn, var(--line));
}
.clubnum.is-top{ --cn: #3fae6a; } .clubnum.is-mid{ --cn: #c9a23a; } .clubnum.is-bottom{ --cn: #d9534f; } .clubnum.is-none{ --cn: var(--accent); }
.clubnum__value{ font-family: var(--display-big); font-weight: 900; font-size: clamp(1.7rem, 2.3vw, 2.1rem); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.clubnum__label{ font-size: 1rem; font-weight: 700; line-height: 1.25; color: var(--ink); }
.clubnum__rank{ justify-self: start; font-size: .95rem; font-weight: 800; padding: 2px 9px; border-radius: 999px; color: var(--cn); background: color-mix(in srgb, var(--cn) 16%, transparent); }
.teamstats__block + .teamstats__block{ margin-top: 16px; }

/* Ballpark: distances as labels on the line, landmarks on the wall, words in cards (Sept 19) */
.sd-dist{
  position: absolute; transform: translate(-50%, -50%); pointer-events: none;
  font-family: var(--display-big); font-weight: 900; font-size: 1.05rem; letter-spacing: .02em;
  color: var(--ink); background: color-mix(in srgb, var(--surface) 82%, transparent);
  padding: 1px 7px; border-radius: 6px; white-space: nowrap;
}
.sd-pin--mark .sd-pin__dot{ width: 30px; height: 30px; font-size: 1rem; font-weight: 900; background: var(--accent); color: #fff; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.sd-key{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sd-key__item{ font-size: 1rem; font-weight: 700; color: var(--ink); padding: 6px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.sd-read__stats{ display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.sd-card{ display: grid; gap: 6px; padding: 13px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--accent); margin-top: 12px; }
.sd-card[hidden]{ display: none; }
.sd-card__kicker{ font-family: var(--display-big); font-weight: 800; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.sd-card__text{ margin: 0; font-size: 1.02rem; line-height: 1.55; color: var(--ink); }
.sd-card.is-quirk{ border-left-color: var(--club-2, var(--accent)); }

/* Game page: live score beside the diamond card (Sept 19) */
.livescore{
  display: grid; gap: 6px; align-content: center; min-width: 190px;
  padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); border-top: 3px solid #d9534f;
}
.livescore__row{ display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.livescore__logo{ width: 34px; height: 34px; object-fit: contain; }
.livescore__team{ font-family: var(--display-big); font-weight: 800; font-size: 1.35rem; letter-spacing: .03em; text-transform: uppercase; }
.livescore__runs{ font-family: var(--display-big); font-weight: 900; font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.livescore__row.is-up .livescore__team::after{ content: " \25C0"; font-size: .8rem; color: #d9534f; vertical-align: middle; }
.livescore__inning{ font-family: var(--display-big); font-weight: 800; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; color: #d9534f; }

/* Scores: day strip, two back to three ahead (Sept 19) */
.daystrip{ display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 4px 0 14px; }
.daystrip__day{
  display: grid; gap: 2px; justify-items: center; padding: 9px 6px; border-radius: 12px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); font: inherit;
}
.daystrip__day:hover{ border-color: var(--accent-line, var(--accent)); }
.daystrip__day.is-on{ border-color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }
.daystrip__word{ font-family: var(--display-big); font-weight: 900; font-size: 1.1rem; letter-spacing: .04em; text-transform: uppercase; }
.daystrip__date{ font-size: .95rem; font-weight: 700; color: var(--ink-soft); }
@media (max-width: 620px){ .daystrip{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Topic panels: cards and versus (Sept 19) */
.tpanel__cards{ margin-top: 12px; }
.tpanel__cardValue{ font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.1; }
.tvs{ display: grid; gap: 12px; margin-top: 12px; }
.tvs__key{ display: flex; flex-wrap: wrap; gap: 8px; }
.tvs__name{ font-family: var(--display-big); font-weight: 800; font-size: 1.1rem; letter-spacing: .03em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); }
.tvs__name.is-a{ border-color: var(--accent); color: var(--accent); }
.tvs__grid{ display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.tvs__card{ display: grid; gap: 6px; padding: 12px 13px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); border-top: 3px solid var(--accent); }
.tvs__nums{ display: flex; align-items: baseline; gap: 10px; }
.tvs__num{ font-family: var(--display-big); font-weight: 900; font-size: 1.9rem; line-height: 1; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.tvs__num.is-a{ color: var(--accent); }
.tvs__num.is-win{ text-decoration: underline 3px; text-underline-offset: 5px; }
.tvs__vs{ font-size: 1rem; font-weight: 700; color: var(--ink-soft); }

/* News: the situation as a scoreboard (Sept 19) */
.nw-sit{ display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 10px; }
@media (max-width: 700px){ .nw-sit{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nw-sit__card{ display: grid; gap: 6px; align-content: start; padding: 12px 13px; border-radius: 12px; background: #10231a; border: 1px solid var(--line); border-top: 3px solid var(--accent); color: #f3f4ee; }
.nw-sit__kicker{ font-family: var(--display-big); font-weight: 800; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.nw-sit__big{ font-family: var(--display-big); font-weight: 900; font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.nw-sit__words{ font-size: 1rem; font-weight: 600; line-height: 1.3; color: #dfe5dc; }
.nw-sit__outs{ display: flex; gap: 8px; height: 32px; align-items: center; }
.nw-sit__outs i{ width: 22px; height: 22px; border-radius: 50%; border: 2px solid #dfe5dc; }
.nw-sit__outs i.is-on{ background: #f0b429; border-color: #f0b429; }
.nw-sit__bases{ position: relative; width: 46px; height: 32px; }
.nw-sit__bases i{ position: absolute; width: 15px; height: 15px; transform: rotate(45deg); border: 2px solid #dfe5dc; }
.nw-sit__bases i.is-second{ left: 15px; top: 0; }
.nw-sit__bases i.is-third{ left: 2px; top: 14px; }
.nw-sit__bases i.is-first{ left: 28px; top: 14px; }
.nw-sit__bases i.is-on{ background: #f0b429; border-color: #f0b429; }
.hub__tools .bx-radar__svg{ overflow: visible; margin: 0 40px; }
.sc-sheet__top{ display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 20px; align-items: center; }
@media (max-width: 760px){ .sc-sheet__top{ grid-template-columns: 1fr; } }
.sc-rcard__mine{ font-family: var(--display-big); font-weight: 800; font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.sc-rcard__real{ font-size: .95rem; font-weight: 600; line-height: 1.35; color: var(--ink); padding-top: 6px; border-top: 1px solid var(--line); }

/* Card back: best and worst fill the space the season line used (Sept 19) */
.sc-block--ends{ flex: 1 1 auto; display: flex; flex-direction: column; }
.sc-block--ends .sc-ends{ flex: 1 1 auto; grid-template-rows: 1fr 1fr; }
.sc-end,
.sc:not(.sc--large) .sc-end{
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; align-content: center;
  gap: 2px 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line);
}
.sc-end.is-best{ border-left: 4px solid #3fae6a; }
.sc-end.is-worst{ border-left: 4px solid #d9534f; }
.sc-end__word, .sc:not(.sc--large) .sc-end__word{ grid-column: 1; grid-row: 1; font-family: var(--display-big); font-weight: 900; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; }
.sc-end.is-best .sc-end__word{ color: #3fae6a; }
.sc-end.is-worst .sc-end__word{ color: #d9534f; }
.sc-end__label, .sc:not(.sc--large) .sc-end__label{ grid-column: 1; grid-row: 2; font-size: 1rem; font-weight: 700; line-height: 1.2; color: var(--ink); align-self: center; }
.sc-end__value, .sc:not(.sc--large) .sc-end__value{ grid-column: 2; grid-row: 1 / span 3; align-self: center; font-family: var(--display-big); font-weight: 900; font-size: 2rem; color: var(--ink); }
.sc-end__pct, .sc:not(.sc--large) .sc-end__pct{ display: block; grid-column: 1; grid-row: 3; font-family: inherit; font-size: .88rem; font-weight: 600; color: var(--ink-soft); }
.sc-block--ends .sc-block__title{ display: none; }
.sc__back{ display: flex; flex-direction: column; }
.sc:not(.sc--large) .sc-block--ends{ margin-top: 8px; }
.sc:not(.sc--large) .sc-ends{ gap: 6px; }
.sc:not(.sc--large) .sc-end{ padding: 6px 9px; gap: 0 8px; }
.sc:not(.sc--large) .sc-end__word{ font-size: .85rem; }
.sc:not(.sc--large) .sc-end__label{ font-size: .95rem; }
.sc:not(.sc--large) .sc-end__pct{ font-size: .85rem; white-space: nowrap; }
.sc:not(.sc--large) .sc-end__value{ font-size: 1.7rem; }
.sechero--art-cards .ha-platenum{ font-size: 21px; }
.sc-block--ends, .sc-ends, .sc-end{ min-width: 0; box-sizing: border-box; }
.sc:not(.sc--large) .sc-block--ends{ margin-top: 6px; padding-top: 0; }
.sc:not(.sc--large) .sc-end{ padding: 4px 8px; }
.sc:not(.sc--large) .sc-end__value{ font-size: 1.55rem; }
.sc:not(.sc--large) .sc-end__label{ font-size: .92rem; }
.sc:not(.sc--large) .sc-back__foot{ padding-top: 6px; }

/* ===== SEPT 19: Little League scorecards, field cards, game log, bracket link ===== */
.llg{
  display: grid; gap: 6px; align-content: start; min-width: 0;
  padding: 10px 12px 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line);
  border-top: 3px solid var(--line);
}
.llg[hidden]{ display: none; }
.llg--final{ border-top-color: var(--accent); }
.llg--title{ border-top-color: #f0b429; }
.llg__head{ display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.llg__round{ font-family: var(--display-big); font-weight: 900; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.llg--final .llg__round{ color: var(--accent); }
.llg--title .llg__round{ color: #f0b429; }
.llg__date{ font-size: .95rem; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.llg__line{
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 10px; border-left: 4px solid var(--ll, var(--line));
  background: color-mix(in srgb, var(--ll, transparent) 10%, var(--surface));
}
.llg__line.is-lost{ background: var(--surface); border-left-color: var(--line); }
.llg__badge{ flex: none; }
.llg__names{ display: grid; gap: 1px; min-width: 0; }
.llg__top{ font-size: 1.05rem; font-weight: 800; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; }
.llg__under{ font-size: .95rem; font-weight: 500; line-height: 1.25; color: var(--ink-soft); overflow-wrap: anywhere; }
.llg__line.is-lost .llg__top{ font-weight: 600; color: var(--ink-soft); }
.llg__wl{ font-family: var(--display-big); font-weight: 900; font-size: .95rem; width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; }
.llg__line.is-won .llg__wl{ background: #1f8a4c; color: #fff; }
.llg__line.is-lost .llg__wl{ background: transparent; color: var(--ink-faint); border: 1px solid var(--line); }
.llg__runs{ font-family: var(--display-big); font-weight: 900; font-size: 1.9rem; line-height: 1; min-width: 1.4ch; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.llg__line.is-lost .llg__runs{ color: var(--ink-faint); }
.llg--compact .llg__line{ padding: 5px 8px; gap: 8px; }
.llg--compact .llg__top{ font-size: .98rem; }
.llg--compact .llg__runs{ font-size: 1.4rem; }
.llg--compact .llg__wl{ display: none; }

/* champion hero: the final + stats */
.llws-champ__final{ display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; margin-top: 16px; align-items: stretch; }
.llws-champ__final > .llg{ background: color-mix(in srgb, var(--surface) 70%, transparent); }
.llws-champ__stats{ display: grid; gap: 10px; align-content: start; }
.llws-stat{ display: grid; gap: 3px; padding: 11px 13px; border-radius: 12px; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--line); }
.llws-stat__value{ font-family: var(--display-big); font-weight: 900; font-size: 1.9rem; line-height: 1; color: var(--ink); }
.llws-stat__label{ font-size: .98rem; font-weight: 600; color: var(--ink-soft); }
@media (max-width: 760px){ .llws-champ__final{ grid-template-columns: 1fr; } }

.llbracket{
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 16px; border-radius: 999px; font-weight: 800; font-size: 1rem; text-decoration: none;
  color: var(--ink); background: var(--surface-2); border: 1px solid var(--accent);
}
.llbracket::after{ content: "\2197"; }
.llbracket:hover{ background: color-mix(in srgb, var(--accent) 18%, var(--surface-2)); }
.llbracket--head{ padding: 7px 14px; }

/* road to the title */
.llroad{ display: grid; gap: 10px; margin-top: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* the field */
.fieldgroup__grid--cards{ display: grid !important; gap: 10px !important; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; }
.teamcard2{
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top rec" "foot rec";
  gap: 8px 12px; align-items: start; min-width: 0;
  padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line);
  border-left: 4px solid var(--ll, var(--line));
}
.teamcard2.is-champ{ border-color: #f0b429; border-left-color: #f0b429; background: color-mix(in srgb, #f0b429 8%, var(--surface-2)); }
.teamcard2__top{ grid-area: top; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; min-width: 0; }
.teamcard2__body{ display: grid; gap: 1px; min-width: 0; }
.teamcard2__club{ font-size: 1.08rem; font-weight: 800; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; }
.teamcard2__place{ font-size: .95rem; line-height: 1.3; color: var(--ink-soft); overflow-wrap: anywhere; }
.teamcard2__foot{ grid-area: foot; display: flex; flex-wrap: wrap; gap: 6px; }
.teamcard2__region, .teamcard2__finish{ font-size: .9rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-soft); background: var(--surface); }
.teamcard2__finish{ color: var(--ink); border-color: var(--accent); }
.teamcard2__finish.is-champion{ color: #1a1300; background: #f0b429; border-color: #f0b429; }
.teamcard2__finish.is-runnerup{ color: var(--ink); background: color-mix(in srgb, #c0c6cf 25%, var(--surface)); border-color: #c0c6cf; }
.teamcard2__rec{ grid-area: rec; display: grid; justify-items: end; gap: 2px; text-align: right; }
.teamcard2__record{ font-family: var(--display-big); font-weight: 900; font-size: 2rem; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.teamcard2__words{ font-size: .9rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }

/* every game */
.gamelog2{ display: grid; gap: 18px; margin-top: 10px; }
.gamelog2__day[hidden]{ display: none; }
.gamelog2__dayhead{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 10px; }
.gamelog2__dayname{ margin: 0; font-family: var(--display-big); font-weight: 900; font-size: 1.35rem; letter-spacing: .03em; text-transform: uppercase; color: var(--ink); }
.gamelog2__daycount{ font-size: .95rem; font-weight: 700; color: var(--ink-soft); }
.gamelog2__grid{ display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.fieldgroup__grid--cards{ grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important; }
.gamelog2__grid, .llroad{ grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.teamcard2__club, .llg__top{ overflow-wrap: normal; word-break: normal; }
.llws-champ__final > .llg{ align-self: start; }
@media (max-width: 420px){ .fieldgroup__grid--cards, .gamelog2__grid, .llroad{ grid-template-columns: 1fr !important; } }
.champgrid{ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.champcard{ display: grid; gap: 4px; align-content: start; }
.champcard .llg{ margin-top: 10px; padding: 8px 9px 9px; background: color-mix(in srgb, var(--surface) 80%, transparent); }
.champcard__year{ font-family: var(--display-big); font-weight: 900; font-size: 1.5rem; }
.champcard__club{ font-size: 1.2rem; }
.champcard__from{ font-size: .95rem; }

/* Record book as cards (Sept 19) */
.llsection__name{ font-family: var(--display-big) !important; font-weight: 900 !important; font-size: 1.5rem !important; letter-spacing: .03em; text-transform: uppercase; margin: 22px 0 10px !important; }
.llcat2{ border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); border-left: 4px solid var(--accent); margin-bottom: 10px; overflow: hidden; }
.llcat2__head{
  list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name rec" "who count";
  gap: 4px 16px; align-items: center; padding: 12px 16px;
}
.llcat2__head::-webkit-details-marker{ display: none; }
.llcat2__name{ grid-area: name; font-family: var(--display-big); font-weight: 900; font-size: 1.35rem; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
.llcat2__rec{ grid-area: rec; display: flex; align-items: baseline; gap: 8px; justify-self: end; }
.llcat2__label{ font-size: .85rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.llcat2__value{ font-family: var(--display-big); font-weight: 900; font-size: 2rem; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.llcat2__unit{ font-size: 1rem; font-weight: 700; color: var(--ink-soft); }
.llcat2__who{ grid-area: who; font-size: 1rem; font-weight: 600; color: var(--ink-soft); }
.llcat2__count{ grid-area: count; justify-self: end; font-size: .95rem; font-weight: 700; color: var(--ink-soft); }
.llcat2__count::after{ content: "  \25BE"; }
.llcat2[open] .llcat2__count::after{ content: "  \25B4"; }
.llcat2__rows{ display: grid; gap: 8px; padding: 0 12px 12px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.llrow2{
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "num body" "tags tags"; gap: 8px 14px;
  padding: 11px 13px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line);
}
.llrow2.is-holder{ border-color: #f0b429; background: color-mix(in srgb, #f0b429 7%, var(--surface)); }
.llrow2__num{ grid-area: num; display: grid; justify-items: center; align-content: start; min-width: 64px; }
.llrow2__value{ font-family: var(--display-big); font-weight: 900; font-size: 2rem; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.llrow2.is-holder .llrow2__value{ color: #f0b429; }
.llrow2__unit{ font-size: .88rem; font-weight: 700; color: var(--ink-soft); text-align: center; }
.llrow2__body{ grid-area: body; min-width: 0; }
.llrow2__people{ display: grid; gap: 6px; }
.llrow2__person{ display: grid; gap: 0; }
.llrow2__name{ font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.llrow2__place{ font-size: .95rem; color: var(--ink-soft); }
.llrow2__entry{ margin: 0; font-size: .98rem; line-height: 1.4; color: var(--ink); }
.llrow2__tags{ grid-area: tags; display: flex; flex-wrap: wrap; gap: 6px; }
.llrow2__tag{ font-size: .9rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-soft); }
.llrow2__tag.is-record{ background: #f0b429; border-color: #f0b429; color: #1a1300; }
.llrow2{ align-content: start; grid-template-rows: auto 1fr; }
.llrow2__tags{ align-self: end; align-items: flex-start; }
.llrow2__tag{ align-self: flex-start; line-height: 1.3; }
.champcard__year{ color: var(--ink) !important; }
.llrow2.is-holder{ grid-column: 1 / -1; }

/* ===== SEPT 19: Road to Omaha as cards ===== */
.omsub{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 28px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.omsub__title{ margin: 0; font-family: var(--display-big); font-weight: 900; font-size: 1.6rem; letter-spacing: .03em; text-transform: uppercase; color: var(--ink); }
.omsub__aside{ font-size: 1rem; font-weight: 600; color: var(--ink-soft); }
.omgrid{ display: grid; gap: 12px; }
.omgrid--2{ grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
.omgrid--3{ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.omgrid--4{ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (max-width: 520px){ .omgrid--2, .omgrid--3, .omgrid--4{ grid-template-columns: 1fr; } }

/* a game */
.omg{ display: grid; gap: 6px; align-content: start; padding: 11px 12px 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); border-top: 3px solid var(--line); min-width: 0; }
.omg--final{ border-top-color: var(--accent); }
.omg--title{ border-top-color: #f0b429; }
.omg.is-upset{ border-top-color: #d9534f; }
.omg__head{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.omg__round{ font-family: var(--display-big); font-weight: 900; font-size: 1.1rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
.omg--final .omg__round{ color: var(--accent); }
.omg--title .omg__round{ color: #f0b429; }
.omg__tag{ font-size: .88rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); white-space: nowrap; }
.omg__tag.is-upset, .omg__tag.is-out{ color: #fff; background: #b8433e; border-color: #b8433e; }
.omg__line{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: var(--surface); }
.omg__line.is-won{ box-shadow: inset 4px 0 0 #3fae6a; background: color-mix(in srgb, #3fae6a 9%, var(--surface)); }
.omg__names{ display: grid; gap: 1px; min-width: 0; }
.omg__team{ font-family: var(--display); font-size: 1.08rem; font-weight: 800; color: var(--ink); text-decoration: none; line-height: 1.2; }
.omg__line.is-lost .omg__team{ font-weight: 600; color: var(--ink-soft); }
.omg__team:hover{ text-decoration: underline; }
.omg__meta{ font-size: .92rem; font-weight: 600; color: var(--ink-soft); }
.omg__runs{ font-family: var(--display-big); font-weight: 900; font-size: 2rem; line-height: 1; min-width: 1.5ch; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.omg__line.is-lost .omg__runs{ color: var(--ink-faint); }
.omg__note{ margin: 2px 0 0; font-size: .98rem; line-height: 1.45; color: var(--ink-soft); }
.omg__series{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding-top: 4px; }
.omg__serieslabel{ font-size: .9rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.omg__final{ font-size: 1rem; font-weight: 700; color: var(--ink); }
.ompills{ display: flex; flex-wrap: wrap; gap: 6px; }
.ompill{ display: inline-flex; gap: 6px; align-items: baseline; padding: 3px 10px; border-radius: 999px; font-size: .98rem; font-weight: 700; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.ompill b{ font-family: var(--display-big); font-size: .92rem; letter-spacing: .04em; }
.ompill.is-w b{ color: #3fae6a; }
.ompill.is-l b{ color: #d9534f; }

/* champion */
.omchamp{ display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; align-items: center; padding: 18px 20px; border-radius: 16px;
  background: linear-gradient(120deg, color-mix(in srgb, #f0b429 16%, var(--surface-2)), var(--surface-2) 60%); border: 1px solid color-mix(in srgb, #f0b429 45%, var(--line)); }
.omchamp__who{ display: flex; align-items: center; gap: 18px; min-width: 0; }
.omchamp__words{ display: grid; gap: 4px; min-width: 0; }
.omchamp__eyebrow{ font-family: var(--display-big); font-weight: 800; font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase; color: #f0b429; }
.omchamp__team{ margin: 0; font-family: var(--display-big); font-weight: 900; font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: .95; text-transform: uppercase; color: var(--ink); }
.omchamp__line{ font-size: 1.05rem; font-weight: 600; color: var(--ink-soft); }
@media (max-width: 760px){ .omchamp{ grid-template-columns: 1fr; } }
.omstats{ display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.omstat{ display: grid; gap: 3px; padding: 11px 13px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent); }
.omstat__value{ font-family: var(--display-big); font-weight: 900; font-size: 1.8rem; line-height: 1; color: var(--ink); }
.omstat__label{ font-size: 1rem; font-weight: 700; color: var(--ink); }
.omstat__note{ font-size: .95rem; color: var(--ink-soft); line-height: 1.35; }

/* Omaha brackets */
.ombracket{ display: grid; gap: 10px; align-content: start; padding: 14px; border-radius: 16px; background: color-mix(in srgb, var(--surface-2) 60%, transparent); border: 1px solid var(--line); }
.ombracket__name{ margin: 0; font-family: var(--display-big); font-weight: 900; font-size: 1.4rem; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.ombracket__field{ display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.ombracket__games{ display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.omteam{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); text-decoration: none; color: var(--ink); position: relative; }
.omteam__words{ display: grid; min-width: 0; }
.omteam__name{ font-weight: 800; font-size: 1rem; }
.omteam__meta{ font-size: .88rem; color: var(--ink-soft); font-weight: 600; }
.omteam__flag{ grid-column: 1 / -1; justify-self: start; font-size: .82rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: #f0b429; color: #1a1300; }

/* seeds */
.omseeds{ display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.omseed{ display: grid; grid-template-columns: 2ch auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.omseed.is-omaha{ border-color: #f0b429; }
.omseed__num{ font-family: var(--display-big); font-weight: 900; font-size: 1.3rem; color: var(--ink-soft); text-align: right; }
.omseed__team{ font-weight: 700; font-size: 1rem; }
.omseed__tag{ font-size: .8rem; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: #f0b429; color: #1a1300; }

.omcallout{ display: grid; gap: 4px; margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); border-left: 4px solid var(--accent); }
.omcallout.is-myth{ border-left-color: #d9534f; }
.omcallout__kicker{ font-family: var(--display-big); font-weight: 800; font-size: 1rem; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); }
.omcallout.is-myth .omcallout__kicker{ color: #d9534f; }
.omcallout__head{ margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--ink); }
.omcallout__text{ margin: 0; font-size: 1.02rem; line-height: 1.5; color: var(--ink-soft); }

/* quadrants */
.omquads{ display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); margin: 12px 0; }
.omquad{ display: grid; gap: 10px; padding: 13px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); border-top: 4px solid var(--q); }
.omquad.is-q1{ --q: #3fae6a; } .omquad.is-q2{ --q: #9fbf3f; } .omquad.is-q3{ --q: #d9a13a; } .omquad.is-q4{ --q: #d9534f; }
.omquad__name{ font-family: var(--display-big); font-weight: 900; font-size: 1.5rem; text-transform: uppercase; color: var(--q); }
.omquad__cells{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.omquad__cell{ display: grid; gap: 2px; padding: 8px; border-radius: 10px; background: var(--surface); text-align: center; }
.omquad__value{ font-family: var(--display-big); font-weight: 900; font-size: 1.25rem; color: var(--ink); }
.omquad__label{ font-size: .85rem; font-weight: 700; color: var(--ink-soft); }

/* how it works */
.omsteps{ list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.omstep{ display: grid; gap: 6px; align-content: start; padding: 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); border-top: 3px solid var(--accent); }
.omstep__num{ font-family: var(--display-big); font-weight: 900; font-size: 2.6rem; line-height: 1; color: var(--accent); }
.omstep__round{ font-family: var(--display-big); font-weight: 900; font-size: 1.2rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.omstep__line{ margin: 0; font-size: 1rem; line-height: 1.45; color: var(--ink-soft); }

/* timeline */
.omtimeline{ list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.omtimeline__step{ display: grid; gap: 6px; align-content: start; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); border-left: 4px solid var(--accent); }
.omtimeline__era{ font-family: var(--display-big); font-weight: 900; font-size: 1.4rem; color: var(--ink); }
.omtimeline__text{ margin: 0; font-size: 1rem; line-height: 1.45; color: var(--ink-soft); }

/* programs */
.omprog{ display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.omprog:not(:has(.omprog__rank)){ grid-template-columns: auto minmax(0, 1fr) auto; }
.omprog__rank{ font-family: var(--display-big); font-weight: 900; font-size: 1.4rem; color: var(--ink-soft); min-width: 1.4ch; text-align: right; }
.omprog__words{ display: grid; gap: 5px; min-width: 0; }
.omprog__team{ font-weight: 800; font-size: 1.08rem; }
.omprog__bar{ display: block; height: 7px; border-radius: 99px; background: var(--surface); overflow: hidden; }
.omprog__fill{ display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.omprog__years{ font-size: .92rem; font-weight: 600; color: var(--ink-soft); }
.omprog__num{ display: grid; justify-items: end; }
.omprog__num b{ font-family: var(--display-big); font-weight: 900; font-size: 2rem; line-height: 1; }
.omprog__num span{ font-size: .88rem; font-weight: 700; color: var(--ink-soft); }
.omprog.is-waiting .omprog__num b{ color: #d9534f; }

/* archive */
.omdecades{ display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); margin-top: 14px; }
.omdecade.is-folded{ display: none; }
.omdecades.is-all .omdecade.is-folded{ display: grid; }
.omdecade{ display: grid; gap: 4px; align-content: start; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.omdecade__name{ margin: 0 0 6px; font-family: var(--display-big); font-weight: 900; font-size: 1.4rem; letter-spacing: .03em; text-transform: uppercase; color: var(--accent); }
.omchampRow{ display: grid; grid-template-columns: 3.2ch auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 4px; border-top: 1px solid var(--line); }
.omchampRow__year{ font-family: var(--display-big); font-weight: 900; font-size: 1.15rem; color: var(--ink-soft); }
.omchampRow__words{ display: grid; min-width: 0; }
.omchampRow__team{ font-weight: 800; font-size: 1.02rem; color: var(--ink); text-decoration: none; }
.omchampRow__meta{ font-size: .9rem; color: var(--ink-soft); }
.omchampRow__none{ grid-column: 2 / -1; font-weight: 700; color: var(--ink-soft); }
.ommore{ margin-top: 12px; padding: 10px 18px; border-radius: 999px; font: inherit; font-weight: 800; cursor: pointer; color: var(--ink); background: var(--surface-2); border: 1px solid var(--accent); }

/* cinderellas and famous games */
.omcard .omcard__top{ display: flex; gap: 12px; align-items: center; }
.omcard__words{ display: grid; }
.cb-cinder.omcard .cb-cinder__year, .cb-game.omcard .cb-game__year{ font-family: var(--display-big) !important; font-weight: 900; font-size: 1.3rem !important; color: var(--accent); }
.cb-cinder.omcard .cb-cinder__team, .cb-game.omcard .cb-game__title{ font-family: var(--display) !important; font-weight: 800; font-size: 1.15rem !important; margin: 0; }
.cb-cinder.omcard .cb-cinder__note, .cb-game.omcard .cb-game__text, .cb-cinder.omcard .cb-cinder__seed{ font-size: 1rem !important; line-height: 1.45; }
.omfold > .is-folded{ display: none; }
.omfold.is-all > .is-folded{ display: grid; }
.omcallout{ margin-top: 0; }
.omgrid > .omcallout{ align-content: start; }
.omgrid + .omcallout, .omseeds + .omcallout{ margin-top: 14px; }
.panel-block > .omstats{ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin: 10px 0 14px; }
.omstats--words .omstat__value{ font-size: 1.4rem; text-transform: uppercase; }
.omstats--words .omstat__label{ font-weight: 600; color: var(--ink-soft); line-height: 1.4; }
.cb-fit__why{ font-size: 1rem !important; line-height: 1.45; }
.cb-band__note{ font-size: 1rem !important; }

/* College tabs: cards for every table (Sept 19) */
.omrank{ display: grid; grid-template-columns: 2.4ch auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.omrank.is-top{ border-color: #f0b429; }
.omrank__num{ font-family: var(--display-big); font-weight: 900; font-size: 1.6rem; color: var(--ink-soft); text-align: right; }
.omrank.is-top .omrank__num{ color: #f0b429; }
.omrank__words{ display: grid; min-width: 0; }
.omrank__team{ font-weight: 800; font-size: 1.05rem; }
.omrank__rec{ font-family: var(--display-big); font-weight: 800; font-size: 1.05rem; color: var(--ink-soft); }
.omfact{ display: grid; gap: 5px; align-content: start; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); border-top: 3px solid var(--accent); }
.omfact.is-good{ border-top-color: #3fae6a; } .omfact.is-bad{ border-top-color: #d9534f; }
.omfact__label{ font-family: var(--display-big); font-weight: 800; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.omfact__value{ font-size: 1.08rem; font-weight: 700; line-height: 1.4; color: var(--ink); }
.omfact__big{ font-family: var(--display-big); font-weight: 900; font-size: 2rem; line-height: 1; color: var(--ink); }
.omdraft{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.omdraft__pick{ font-family: var(--display-big); font-weight: 900; font-size: 2rem; color: var(--accent); min-width: 2.6ch; }
.omdraft__words{ display: grid; gap: 2px; min-width: 0; }
.omdraft__player{ font-weight: 800; font-size: 1.08rem; }
.omdraft__meta{ font-size: .95rem; font-weight: 600; color: var(--ink-soft); }
.omdraft__from{ justify-self: start; font-size: .88rem; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); }
.omdraft__from.is-college{ border-color: #3fae6a; color: var(--ink); }
.omconf{ display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); border-top: 3px solid var(--accent); }
.omconf__name{ font-family: var(--display-big); font-weight: 900; font-size: 1.3rem; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.omconf__row{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; }
.omconf__k{ grid-column: 1 / -1; font-size: .85rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.omconf__team{ font-weight: 800; font-size: 1.02rem; }
.omconf.is-split{ border-top-color: #d9534f; }
.ombids{ display: grid; gap: 8px; }
.ombid{ display: grid; grid-template-columns: 8ch minmax(0, 1fr) 3ch; gap: 10px; align-items: center; text-decoration: none; color: var(--ink); }
.ombid__name{ font-weight: 800; }
.ombid__bar{ height: 14px; border-radius: 99px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--line); }
.ombid__fill{ display: block; height: 100%; background: var(--accent); }
.ombid__n{ font-family: var(--display-big); font-weight: 900; font-size: 1.3rem; text-align: right; }
.ombench{ display: grid; gap: 6px; }
.ombench__row{ display: grid; grid-template-columns: 14ch minmax(0, 1fr); gap: 10px; align-items: center; }
.ombench__lvl{ font-weight: 800; font-size: .98rem; }
.ombench__val{ font-family: var(--display-big); font-weight: 800; font-size: 1.15rem; padding: 6px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.ombenchcard{ display: grid; gap: 8px; align-content: start; padding: 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); border-top: 3px solid var(--accent); margin: 0 !important; }
.ombenchcard .cb-bench__name{ margin: 0; font-family: var(--display-big); font-weight: 900; font-size: 1.25rem; text-transform: uppercase; }
.ombenchcard .cb-bench__note{ margin: 0; font-size: .98rem; line-height: 1.4; color: var(--ink-soft); }
.ombenchcard .ombench__row{ grid-template-columns: minmax(0, 1fr) auto; }
.ombenchcard .ombench__val{ background: var(--surface); padding: 4px 10px; font-size: 1.05rem; }
.omconf{ align-content: start; }
.cb-timeline{ list-style: none; margin: 12px 0 0; padding: 0; display: grid !important; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.cb-timeline__row{ display: grid !important; grid-template-columns: 1fr !important; gap: 6px; align-content: start; padding: 13px 14px !important; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line) !important; border-left: 4px solid var(--accent) !important; }
.cb-timeline__row > :first-child{ font-family: var(--display-big); font-weight: 900; font-size: 1.2rem; text-transform: uppercase; color: var(--accent); }
.cb-timeline__row > :last-child{ font-size: 1rem; line-height: 1.45; color: var(--ink); }
.omstat__note{ font-weight: 600; }
/* Sept 19: the bat was drawn wider than its box, so the rotated barrel ran
   off the top and the box sliced it flat. Smaller, taller box, nothing cut. */
.batcard__art{ height: 150px !important; overflow: visible !important; margin: 8px 0 12px !important; }
.batcard__art .batart{ width: 102% !important; }
.omconf__marks{ display: inline-flex; gap: 3px; }

/* ===== SEPT 19: Travel, the Clipboard and the Whiteboard as site cards ===== */
.tb-clip{ padding: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; }
.tb-clip__clamp{ display: none !important; }
.tb-clip__sheet{
  columns: auto !important; list-style: none; margin: 0; padding: 0 !important; background: none !important; box-shadow: none !important;
  display: grid !important; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); counter-reset: clip;
}
.tb-clip__row{ border: 0 !important; }
.tb-clip__item{
  height: 100%; box-sizing: border-box;
  display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; column-gap: 14px !important; row-gap: 4px; align-content: start;
  padding: 14px 16px !important; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); border-top: 3px solid var(--accent);
  color: var(--ink) !important; transition: border-color .15s, transform .15s;
}
.tb-clip__item:hover{ border-color: var(--accent); transform: translateY(-2px); }
.tb-clip__item::before{ font-family: var(--display-big) !important; font-weight: 900 !important; font-size: 2rem !important; line-height: 1; color: var(--accent) !important; }
.tb-clip__name{ font-family: var(--display-big) !important; font-weight: 900 !important; font-size: 1.35rem !important; letter-spacing: .03em; text-transform: uppercase; line-height: 1.1; color: var(--ink) !important; }
.tb-clip__note{ font-size: 1.02rem !important; line-height: 1.45 !important; color: var(--ink-soft) !important; }

.tb-white{
  padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  display: grid !important; gap: 12px !important; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
}
.tb-white__row{
  display: grid !important; gap: 8px !important; align-content: start;
  padding: 16px 18px !important; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line) !important; border-left: 4px solid var(--accent) !important;
  color: var(--ink) !important; transition: border-color .15s, transform .15s;
}
.tb-white__row:hover{ border-color: var(--accent) !important; transform: translateY(-2px); }
.tb-white__slot{
  justify-self: start; font-family: var(--display-big) !important; font-weight: 800 !important; font-size: 1rem !important; letter-spacing: .06em !important;
  text-transform: uppercase; padding: 4px 10px; border-radius: 999px; color: var(--ink) !important; background: var(--surface); border: 1px solid var(--line);
}
.tb-white__name{ font-family: var(--display-big) !important; font-weight: 900 !important; font-size: 1.7rem !important; line-height: 1.05; letter-spacing: .02em; color: var(--ink) !important; }
.tb-white__note{ font-size: 1.05rem !important; line-height: 1.5 !important; color: var(--ink-soft) !important; }
.tb-white__row::after{ content: "Open \2192"; font-weight: 800; font-size: 1rem; color: var(--accent); margin-top: 4px; }
@media (max-width: 700px){ .tb-white__row{ border-top: 1px solid var(--line) !important; } }

/* ===== SEPT 19: Travel age and topic pages, the rulebook translated ===== */
.tv-block{ margin-top: 26px; }
.tv-grid{ display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-top: 12px; }
.tv-grid--2{ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.tv-grid--glance{ grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.tv-grid--ladder{ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
@media (max-width: 420px){ .tv-grid, .tv-grid--2{ grid-template-columns: 1fr; } }
.tv-card{ display: grid; gap: 6px; align-content: start; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); border-top: 3px solid var(--accent); min-width: 0; }
.tv-card.is-good{ border-top-color: #3fae6a; } .tv-card.is-bad{ border-top-color: #d9534f; }
.tv-card.is-fine{ border-top-width: 1px; border-left: 3px solid var(--accent); }
.tv-card__kicker{ font-family: var(--display-big); font-weight: 800; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.tv-card__value{ font-family: var(--display-big); font-weight: 900; font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.05; color: var(--ink); }
.tv-card__note{ font-size: 1.05rem; line-height: 1.45; color: var(--ink-soft); }
.tv-card.is-fine .tv-card__note{ color: var(--ink); }
.tv-chip{ justify-self: start; font-size: .9rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); }
.tv-callout{ display: grid; gap: 6px; margin-top: 14px; padding: 14px 18px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); border-left: 4px solid var(--accent); }
.tv-callout.is-warn{ border-left-color: #f0b429; } .tv-callout.is-tip{ border-left-color: #3fae6a; }
.tv-callout__kicker{ font-family: var(--display-big); font-weight: 900; font-size: 1.1rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.tv-callout.is-warn .tv-callout__kicker{ color: #f0b429; } .tv-callout.is-tip .tv-callout__kicker{ color: #3fae6a; }
.tv-callout__text{ margin: 0; font-size: 1.1rem; line-height: 1.5; color: var(--ink); }
.tv-org{ display: grid; gap: 8px; align-content: start; padding: 16px 18px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); border-top: 4px solid var(--org, var(--accent)); }
.tv-org--usssa{ --org: #c8102e; } .tv-org--pg{ --org: #1d6fd1; }
.tv-org__name{ margin: 0; font-family: var(--display-big); font-weight: 900; font-size: 1.6rem; letter-spacing: .03em; text-transform: uppercase; color: var(--ink); }
.tv-org--mini .tv-org__name{ font-size: 1.25rem; color: var(--org); }
.tv-org__unit{ justify-self: start; font-size: 1rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--org) 22%, var(--surface)); color: var(--ink); }
.tv-org__nums{ display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.tv-org__nums .tv-card{ background: var(--surface); border-top-color: var(--org); }
.tv-org__nums .tv-card__value{ font-size: clamp(1.2rem, 1.8vw, 1.5rem); }
.tv-org__line{ margin: 0; font-size: 1.1rem; line-height: 1.5; color: var(--ink); }
.tv-org__flag{ margin: 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, #f0b429 12%, var(--surface)); font-size: 1rem; line-height: 1.45; color: var(--ink); }
.tv-jump{ display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.tv-jump__chip{ padding: 8px 14px; border-radius: 999px; font-weight: 800; font-size: 1rem; text-decoration: none; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); }
.tv-jump__chip:hover{ border-color: var(--accent); }
.tv-topic{ margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.tv-topic__head{ display: grid; gap: 6px; }
.tv-topic__title{ margin: 0; font-family: var(--display-big); font-weight: 900; font-size: 1.9rem; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
.tv-topic__answer{ margin: 0; font-size: 1.2rem; font-weight: 600; line-height: 1.45; color: var(--ink); }
.tv-more{ margin-top: 12px; }
.tv-more > summary{ cursor: pointer; display: inline-block; padding: 8px 16px; border-radius: 999px; font-weight: 800; font-size: 1rem; color: var(--ink); background: var(--surface-2); border: 1px solid var(--accent); list-style: none; }
.tv-more > summary::-webkit-details-marker{ display: none; }
.tv-more > summary::after{ content: " \25BE"; }
.tv-more[open] > summary::after{ content: " \25B4"; }
/* The wristband labels, bigger (Sept 19) */
.tb-fig__l{ font-size: .95rem !important; font-weight: 800 !important; letter-spacing: .03em !important; }
.tv-grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (max-width: 700px){ .tv-grid--2{ grid-template-columns: 1fr !important; } }
.tv-org--mini .tv-org__name{ color: var(--ink) !important; }
.tv-org--mini .tv-org__name::before{ content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--org); margin-right: 8px; vertical-align: middle; }

/* ---- Sept 19: two games in one day (planner + defensive card) ---- */
.pl-games__twice, .dp-sameday{
  display: grid; gap: 8px; margin-top: 10px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--accent-line); border-left: 4px solid var(--accent);
  border-radius: 14px;
}
.pl-games__twice-title, .dp-sameday__title{
  margin: 0; font-family: var(--display); text-transform: uppercase; letter-spacing: .03em;
  font-size: 1.3rem; line-height: 1.1; color: var(--ink);
}
.pl-games__twice-text, .dp-sameday__rule, .dp-sameday__line{ margin: 0; font-size: 1.05rem; color: var(--ink); line-height: 1.45; }
.dp-sameday__arms{ display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.dp-sameday__arm{ display: grid; gap: 4px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
.dp-sameday__arm.is-out{ border-color: #ff6b6b; }
.dp-sameday__name{ font-family: var(--display); font-size: 1.35rem; text-transform: uppercase; color: var(--ink); line-height: 1.05; }
.dp-sameday__did{ font-weight: 700; color: var(--accent-2); font-size: 1rem; }
.dp-sameday__now{ color: var(--ink); font-size: 1rem; line-height: 1.4; }

/* ---- Sept 19: situation card above the answer, how-it-ended card ---- */
.askmoment{ display: none; }
.askmoment2{
  grid-column: 1 / -1;
  display: grid; gap: 10px; margin: 0 0 14px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent-2);
  border-radius: 14px;
}
.askmoment2__cap, .resultcard__cap{
  font-family: var(--display); text-transform: uppercase; letter-spacing: .05em;
  font-size: 1.05rem; color: var(--accent-2); line-height: 1;
}
.askmoment2__tiles{ display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.askmoment2__tile{
  display: grid; gap: 4px; padding: 10px 12px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
}
.askmoment2__label{ font-size: .95rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.askmoment2__value{ font-family: var(--display); font-size: 1.5rem; line-height: 1.05; text-transform: uppercase; color: var(--ink); }
.askanswer__prose::before{ content: "The Answer"; color: var(--accent); font-size: .95rem; }
.askanswer__prose .askanswer__para{ font-size: 1.05rem; color: var(--ink); }

.resultcard{
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 14px; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: 14px;
}
.resultcard.is-scoring{ border-left-color: var(--accent-3); }
.resultcard__words{ display: grid; gap: 6px; flex: 1 1 260px; min-width: 0; }
.resultcard__event{ margin: 0; font-family: var(--display); font-size: 1.9rem; line-height: 1; text-transform: uppercase; color: var(--ink); }
.resultcard__play{ margin: 0; font-size: 1.2rem; line-height: 1.45; font-weight: 600; color: var(--ink); }

/* Every at-bat row's play line, bigger and in full ink. */
.playrow__desc{ font-size: 1.08rem; color: var(--ink); line-height: 1.4; }
.askmoment2__tiles{ grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); }
.askmoment2__tile{ align-content: start; }
.askmoment2__value{ font-size: 1.35rem; overflow-wrap: normal; word-break: normal; hyphens: none; }
.nowpanel .resultcard__event, p.resultcard__event{ font-family: var(--display); text-transform: uppercase; font-size: 1.9rem; }

/* ---- Sept 19: coach's changes to the projected best ---- */
.dp-change{
  display: grid; gap: 12px; margin-top: 16px; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: 14px;
}
.dp-change__title{ margin: 0; font-family: var(--display); text-transform: uppercase; font-size: 1.45rem; line-height: 1.05; color: var(--ink); }
.dp-change__sub{ margin: 4px 0 0; font-size: 1.05rem; color: var(--ink); }
.dp-change__grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.dp-change__spot{ display: grid; gap: 6px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
.dp-change__spot.is-p{ border-color: var(--accent-line); }
.dp-change__pos{ font-family: var(--display); text-transform: uppercase; font-size: 1.1rem; letter-spacing: .03em; color: var(--accent-2); }
.dp-change__select{
  width: 100%; font: inherit; font-size: 1.05rem; font-weight: 700; padding: 8px 10px;
  background: var(--bg-2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px;
}
.dp-change__fixed{ font-family: var(--display); font-size: 1.35rem; text-transform: uppercase; color: var(--ink); }
.dp-change__hint{ font-size: .95rem; color: var(--ink-soft); }
.dp-change__warn{ font-size: .95rem; font-weight: 700; color: var(--accent-2); }
.dp-change__warn.is-bad{ color: #ff8a8a; }
.dp-change__acts{ display: flex; flex-wrap: wrap; gap: 10px; }
.dp-grid__cell.is-head.is-edited{ background: var(--accent); color: var(--accent-ink); }

/* The printed lineup: one clean sheet a game, and nothing else from the site. */
.lu-print{ display: none; }
@media print{
  body.lu-printing > *:not(.lu-print){ display: none !important; }
  body.lu-printing{ background: #fff !important; color: #000 !important; }
  body.lu-printing .lu-print{ display: block !important; }
  .lu-sheet{ page-break-after: always; break-after: page; font-family: Arial, Helvetica, sans-serif; color: #000; }
  .lu-sheet:last-child{ page-break-after: auto; break-after: auto; }
  .lu-sheet__title{ margin: 0 0 4px; font-size: 22pt; text-transform: uppercase; color: #000; }
  .lu-sheet__meta{ margin: 0 0 12px; font-size: 11pt; font-weight: 700; color: #000; }
  .lu-sheet__sub{ margin: 16px 0 6px; font-size: 14pt; text-transform: uppercase; color: #000; }
  .lu-table{ width: 100%; border-collapse: collapse; font-size: 12pt; }
  .lu-table th, .lu-table td{ border: 1.5px solid #000; padding: 6px 6px; text-align: center; color: #000; background: #fff; }
  .lu-table th{ background: #e6e6e6; font-weight: 800; }
  .lu-table .lu-name{ text-align: left; font-weight: 700; white-space: nowrap; }
  .lu-table td.is-p{ font-weight: 800; background: #f0f0f0; }
  .lu-table td.is-bench{ color: #555; font-style: italic; }
}
@media print{
  body.lu-printing .lu-sheet h1.lu-sheet__title, body.lu-printing .lu-sheet h2.lu-sheet__sub, body.lu-printing .lu-sheet p.lu-sheet__meta{ color: #000 !important; }
}

/* Sept 19: no H/E beside the runs in the game header */
.gamehead__side{ grid-template-columns: 28px 1fr auto; }

/* ---- Sept 19: the answer as named cards, and the score by club ---- */
.askanswer__prose.is-cards{ background: none; border: 0; padding: 0; display: grid; gap: 10px; }
.askanswer__prose.is-cards::before{ content: none; }
.askcard{
  display: grid; gap: 6px; padding: 14px 16px;
  background: var(--surface-2); border: 1px solid var(--line); border-left: 4px solid var(--line);
  border-radius: 14px;
}
.askcard.is-main{ border-left-color: var(--accent); background: var(--surface); }
.askcard__title{ margin: 0; font-family: var(--display); text-transform: uppercase; letter-spacing: .03em; font-size: 1.2rem; line-height: 1.05; color: var(--accent-2); }
.askcard.is-main .askcard__title{ color: var(--accent); font-size: 1.35rem; }
.askcard__text{ margin: 0; font-size: 1.06rem; line-height: 1.5; color: var(--ink); }
.askcard.is-main .askcard__text{ font-size: 1.15rem; font-weight: 700; }
.askmoment2__score{ display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.askmoment2__team{
  display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
}
.askmoment2__team.is-pitching{ border-color: var(--accent-line); }
.askmoment2__logo{ width: 40px; height: 40px; object-fit: contain; }
.askmoment2__teamname{ display: grid; gap: 2px; min-width: 0; }
.askmoment2__teamname b{ font-family: var(--display); text-transform: uppercase; font-size: 1.35rem; line-height: 1; color: var(--ink); font-weight: 700; }
.askmoment2__role{ font-size: .95rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-2); }
.askmoment2__team.is-pitching .askmoment2__role{ color: var(--accent); }
.askmoment2__runs{ font-family: var(--display); font-size: 2.2rem; line-height: 1; color: var(--ink); }

/* ---- Sept 19: Called Shot retooled into cards ---- */
.cs2-list{ display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 540px), 1fr)); align-items: start; }
.cs2-call{
  display: grid; gap: 14px; padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--accent);
  border-radius: 18px; min-width: 0;
}
.cs2-call.is-right{ border-top-color: var(--pos); }
.cs2-call.is-wrong{ border-top-color: var(--neg); }
.cs2-call.is-missed{ opacity: .8; }
.cs2-call__head{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cs2-call__type{ font-family: var(--display); text-transform: uppercase; letter-spacing: .04em; font-size: 1.15rem; color: var(--accent); }
.cs2-state{
  font-size: .95rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink);
}
.cs2-state.is-open{ background: var(--accent); color: var(--accent-ink, #120a24); border-color: var(--accent); }
.cs2-state.is-in{ border-color: var(--accent); color: var(--accent); }
.cs2-state.is-right{ background: var(--pos); border-color: var(--pos); color: #06210f; }
.cs2-state.is-wrong{ background: var(--neg); border-color: var(--neg); color: #fff; }
.cs2-state.is-shut{ color: var(--ink-soft); }

.cs2-match{ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.cs2-match__at{ font-family: var(--display); font-size: 1.1rem; text-transform: uppercase; color: var(--ink-soft); }
.cs2-team{ display: flex; align-items: center; gap: 10px; min-width: 0; }
.cs2-team.is-home{ flex-direction: row-reverse; text-align: right; }
.cs2-logo{ width: 44px; height: 44px; object-fit: contain; flex: none; }
.cs2-logo--sm{ width: 26px; height: 26px; }
.cs2-logo--opt{ width: 34px; height: 34px; }
.cs2-team__words{ display: grid; min-width: 0; }
.cs2-team__name{ font-family: var(--display); text-transform: uppercase; font-size: 1.55rem; line-height: 1; color: var(--ink); overflow-wrap: anywhere; }
.cs2-team__where{ font-size: .9rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }

.cs2-chips{ display: flex; flex-wrap: wrap; gap: 6px; }
.cs2-chip{
  display: inline-flex; gap: 6px; align-items: baseline; padding: 5px 10px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line); font-size: .98rem; color: var(--ink);
}
.cs2-chip b{ font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }

.cs2-call__ask{ margin: 2px 0 0; font-family: var(--display); font-size: 1.9rem; line-height: 1.05; text-transform: uppercase; color: var(--ink); }

.cs2-opts{ display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs2-opts--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs2-opt{
  display: flex; align-items: center; gap: 10px; min-height: 62px; padding: 10px 14px; text-align: left;
  font: inherit; color: var(--ink); cursor: pointer;
  background: var(--surface-2); border: 2px solid var(--line); border-radius: 14px;
}
.cs2-opt:hover:not(:disabled){ border-color: var(--accent); }
.cs2-opt:disabled{ cursor: default; }
.cs2-opt__words{ display: grid; gap: 2px; flex: 1; min-width: 0; }
.cs2-opt__label{ font-family: var(--display); text-transform: uppercase; font-size: 1.45rem; line-height: 1; }
.cs2-opt__note{ font-size: .95rem; font-weight: 700; color: var(--ink-soft); }
.cs2-opt__flag{ font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); white-space: nowrap; }
.cs2-opt__flag.is-answer{ color: var(--pos); }
.cs2-opt.is-pick{ border-color: var(--accent); background: var(--accent-soft); }
.cs2-opt.is-answer{ border-color: var(--pos); }

.cs2-label{ margin: 0; font-family: var(--display); text-transform: uppercase; letter-spacing: .05em; font-size: 1.05rem; color: var(--accent); }
.cs2-result{ display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--pos); }
.cs2-result .cs2-label{ color: var(--pos); }
.cs2-result__text{ font-family: var(--display); text-transform: uppercase; font-size: 1.5rem; line-height: 1; color: var(--ink); }
.cs2-result.is-void{ border-color: var(--line); }

.cs2-numbers{ display: grid; gap: 10px; }
.cs2-cmp{ display: grid; gap: 6px; }
.cs2-cmp__row{
  display: grid; grid-template-columns: 1fr minmax(120px, 1.1fr) 1fr; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: 10px; background: var(--surface-2);
}
.cs2-cmp__row.is-head{ background: none; padding: 0 12px; }
.cs2-cmp__row.is-sub{ margin-top: -4px; background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.cs2-cmp__team{ display: flex; align-items: center; gap: 6px; font-family: var(--display); text-transform: uppercase; font-size: 1.1rem; color: var(--ink); }
.cs2-cmp__row.is-head .cs2-cmp__team:last-child{ justify-content: flex-end; }
.cs2-cmp__val{ font-family: var(--display); font-size: 1.55rem; line-height: 1; color: var(--ink); }
.cs2-cmp__val:last-child{ text-align: right; }
.cs2-cmp__mid{ display: grid; gap: 1px; text-align: center; }
.cs2-cmp__mid b{ font-size: .92rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink); }
.cs2-cmp__mid span{ font-size: .9rem; color: var(--ink-soft); }
.cs2-cmp__note{ margin: -2px 0 0; padding: 0 12px; font-size: .98rem; color: var(--ink-soft); text-align: center; }

.cs2-tiles{ display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.cs2-tile{ display: grid; gap: 4px; align-content: start; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.cs2-tile__label{ font-size: .9rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); }
.cs2-tile__value{ font-family: var(--display); font-size: 1.35rem; line-height: 1.1; color: var(--ink); text-transform: uppercase; }
.cs2-tile__note{ font-size: .98rem; line-height: 1.35; color: var(--ink-soft); }

.cs2-read{ display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border-left: 4px solid var(--accent); }
.cs2-read__text{ margin: 0; font-size: 1.05rem; line-height: 1.5; color: var(--ink); }

@media (max-width: 560px){
  .cs2-opts, .cs2-opts--3{ grid-template-columns: 1fr; }
  .cs2-team__name{ font-size: 1.25rem; }
  .cs2-logo{ width: 34px; height: 34px; }
  .cs2-cmp__val{ font-size: 1.25rem; }
  .cs2-call__ask{ font-size: 1.55rem; }
}

/* The day strip as tiles. */
.csstrip{ gap: 12px 20px; }
.csstrip__label{ font-size: .9rem; font-weight: 800; color: var(--accent); }
.csstrip__value{ font-family: var(--display); font-size: 1.6rem; line-height: 1; }
.csstrip__date{ font-size: 1.5rem; text-transform: uppercase; }
.cs2-logo{ background: #f4f1ff; border-radius: 50%; padding: 5px; box-sizing: border-box; }
.cs2-logo--sm{ padding: 3px; }
.cs2-cmp__row.is-sub .cs2-cmp__mid b{ font-size: .88rem; text-transform: none; letter-spacing: 0; font-weight: 700; color: var(--ink-soft); }
.cs2-tiles{ grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.cs2-tile__value.is-long{ font-size: 1.12rem; line-height: 1.2; }

/* Sept 19: the pick buttons look like buttons, not like the stat cards around them. */
.cs2-pickhead{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: -4px; }
.cs2-pickhead__hint{ font-size: .95rem; font-weight: 700; color: var(--ink); }
.cs2-opt{
  position: relative; min-height: 70px;
  background: transparent; border: 2px dashed var(--line); box-shadow: none;
}
.cs2-opts.is-live .cs2-opt{
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, var(--surface-2)), var(--surface-2));
  border: 2px solid var(--accent);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--accent) 45%, #000), 0 8px 18px rgba(0,0,0,.25);
  transition: transform .12s ease, box-shadow .12s ease;
}
.cs2-opts.is-live .cs2-opt:hover{ transform: translateY(-2px); box-shadow: 0 6px 0 color-mix(in srgb, var(--accent) 45%, #000), 0 12px 22px rgba(0,0,0,.3); }
.cs2-opts.is-live .cs2-opt:active{ transform: translateY(2px); box-shadow: 0 2px 0 color-mix(in srgb, var(--accent) 45%, #000); }
.cs2-opt__radio{
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--accent); background: transparent;
}
.cs2-opt:not(.is-pick):disabled .cs2-opt__radio{ border-color: var(--line); }
.cs2-opt.is-pick{
  background: var(--accent); border: 2px solid var(--accent); color: var(--accent-ink, #120a24);
}
.cs2-opt.is-pick .cs2-opt__label, .cs2-opt.is-pick .cs2-opt__note, .cs2-opt.is-pick .cs2-opt__flag{ color: var(--accent-ink, #120a24); }
.cs2-opt.is-pick .cs2-opt__radio{ border-color: var(--accent-ink, #120a24); background: radial-gradient(circle, var(--accent-ink, #120a24) 0 45%, transparent 50%); }
.cs2-opt.is-other{ opacity: .55; }
.cs2-opt.is-answer{ border: 2px solid var(--pos); }
.cs2-opt.is-answer .cs2-opt__radio{ border-color: var(--pos); background: radial-gradient(circle, var(--pos) 0 45%, transparent 50%); }
a.cs2-match{ text-decoration: none; color: inherit; border-radius: 12px; padding: 6px; margin: -6px; transition: background .15s ease; }
a.cs2-match:hover{ background: var(--surface-2); }
.cs2-preview{
  justify-self: start; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--accent);
  font-weight: 800; font-size: .98rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--accent); text-decoration: none;
}
.cs2-preview::after{ content: "\2192"; }
.cs2-preview:hover{ background: var(--accent); color: var(--accent-ink, #120a24); }
.cs2-preview.is-live{ border-color: var(--line); color: var(--ink); }

/* ======== Sept 19: Hot Seat retooled into cards ======== */
/* Clubhouse head: readable on every club colour, the Giants' black included. */
.hsclubhouse__head{ text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.hsclubhouse__eyebrow{ color: #fff !important; opacity: .92; font: 800 1rem/1.1 var(--display) !important; text-transform: uppercase; letter-spacing: .06em; }
.hsclubhouse__name{ font-family: var(--display); text-transform: uppercase; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1; }
.hsclubhouse__manager{ color: #fff; font-size: 1.1rem; }
.hsclubhouse__read{ font-size: 1.05rem !important; line-height: 1.5; color: var(--ink) !important; max-width: none !important; }
.hsstat__label{ font-size: .95rem; font-weight: 800; color: var(--accent); }
.hsstat__value{ font-family: var(--display); font-size: 2.1rem; line-height: 1; }
.hsstat__note{ font-size: 1rem; color: var(--ink); }
.hsroster__title{ font-family: var(--display); font-size: 1.6rem !important; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); margin: 18px 0 10px; }
.hsroster__list{ display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }

.hs2-player{ display: grid; gap: 10px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.hs2-player__head{ display: flex; align-items: center; gap: 10px; }
.hs2-player__face{ width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: var(--surface-2); flex: none; }
.hs2-player__who{ display: grid; gap: 4px; min-width: 0; }
.hs2-player__name{ font-family: var(--display); text-transform: uppercase; font-size: 1.35rem; line-height: 1; color: var(--ink); }
.hs2-player__tags{ display: flex; flex-wrap: wrap; gap: 5px; }
.hs2-tag{ font-size: .85rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--accent); color: var(--accent-ink, #120a24); }
.hs2-tag.is-quiet{ background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }
.hs2-player__line{ margin: 0; font-size: 1rem; color: var(--ink); }

.hs2-stats{ display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); }
.hs2-stat{ display: grid; justify-items: center; gap: 2px; padding: 7px 4px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line); }
.hs2-stat__value{ font-family: var(--display); font-size: 1.3rem; line-height: 1; color: var(--ink); }
.hs2-stat__label{ font-size: .84rem; font-weight: 800; letter-spacing: .06em; color: var(--accent); }
.hs2-stat.is-good{ border-color: var(--pos); } .hs2-stat.is-good .hs2-stat__label{ color: var(--pos); }
.hs2-stat.is-poor{ border-color: var(--neg); } .hs2-stat.is-poor .hs2-stat__label{ color: var(--neg); }

/* A call */
.hsround__title{ font-family: var(--display) !important; text-transform: uppercase; font-size: clamp(1.8rem, 4vw, 2.6rem) !important; line-height: 1 !important; }
.hsround__prompt{ font-size: 1.12rem !important; color: var(--ink) !important; }
.hsround__top > *{ font-size: .9rem !important; }
.hsdesk__label{ font-size: .9rem !important; font-weight: 800; color: var(--accent) !important; }
.hsdesk__value{ font-family: var(--display); font-size: 1.7rem !important; line-height: 1; }
.hsdesk__note{ font-size: .98rem !important; color: var(--ink) !important; }
.hs2-why{ margin: 12px 0; padding: 12px 16px; border-radius: 12px; background: var(--surface-2); border-left: 4px solid var(--accent-2, #ffd23f); }
.hs2-why summary{ cursor: pointer; font-family: var(--display); text-transform: uppercase; font-size: 1.15rem; color: var(--ink); }
.hs2-why p{ margin: 8px 0 0; font-size: 1.05rem; line-height: 1.5; color: var(--ink); }
.hs2-choose{ margin: 16px 0 8px; font-family: var(--display); text-transform: uppercase; font-size: 1.3rem; color: var(--accent); letter-spacing: .03em; }
.hs2-opts{ display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.hs2-opt{
  display: flex; flex-direction: column; align-items: stretch; gap: 10px; text-align: left;
  padding: 14px 16px; font: inherit; color: var(--ink); cursor: pointer;
  background: var(--surface); border: 2px solid var(--line); border-radius: 16px;
  transition: border-color .15s ease, transform .15s ease;
}
.hs2-opt:hover{ border-color: var(--accent); transform: translateY(-2px); }
.hs2-opt__label{ font-family: var(--display); text-transform: uppercase; font-size: 1.45rem; line-height: 1.05; }
.hs2-opt__man{ display: grid; gap: 8px; padding: 10px; border-radius: 12px; background: var(--surface-2); }
.hs2-opt__manTop{ display: flex; align-items: center; gap: 8px; }
.hs2-opt__face{ width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--surface-3, #333); }
.hs2-opt__manWho{ display: grid; }
.hs2-opt__manWho b{ font-size: 1.05rem; }
.hs2-opt__manWho span{ font-size: .9rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.hs2-opt .hs2-stat{ background: var(--surface); }
.hs2-opt__case{ font-size: 1.02rem; line-height: 1.45; color: var(--ink); }
.hs2-opt__go{ margin-top: auto; align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: var(--accent); color: var(--accent-ink, #120a24); font-weight: 800; font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; }

/* The season track */
.hs2-track{ display: grid; gap: 10px; grid-column: 1 / -1; }
.hs2-track__grid{ display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hs2-track__grid.has-oct{ grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, .7fr); }
.hs2-chap{ display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.hs2-chap.is-now{ border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.hs2-chap__head{ display: flex; justify-content: space-between; align-items: baseline; }
.hs2-chap__n{ font-size: .85rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.hs2-chap__rec{ font-family: var(--display); font-size: 1.2rem; color: var(--ink); }
.hs2-chap__name{ font-family: var(--display); text-transform: uppercase; font-size: 1.15rem; line-height: 1.05; color: var(--ink); min-height: 2.2em; }
.hs2-dots{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.hs2-dots:has(> :nth-child(6)), .hs2-chap.is-oct .hs2-dots{ grid-template-columns: repeat(auto-fit, minmax(28px, 1fr)); }
.hs2-dotcell{ display: grid; justify-items: center; gap: 3px; }
.hs2-flag{ font-size: .84rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; line-height: 1.05; text-align: center; color: var(--ink-soft); min-height: 1.6em; display: flex; align-items: flex-end; }
.hs2-flag.is-reached{ color: var(--accent-2, #ffd23f); }
.hs2-dot{
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font-family: var(--display); font-size: 1rem; color: var(--ink-soft);
  background: var(--surface); border: 2px solid var(--line);
}
.hs2-dot.is-w{ background: var(--pos); border-color: var(--pos); color: #06210f; }
.hs2-dot.is-l{ background: var(--neg); border-color: var(--neg); color: #fff; }
.hs2-dot.is-done{ background: var(--surface-3, #444); color: var(--ink); }
.hs2-dot.is-miss{ box-shadow: 0 0 0 3px var(--bg, #111), 0 0 0 5px #ffb020; }
.hs2-dot.is-now{ border-color: var(--accent); color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent); }
.hs2-key{ display: flex; flex-wrap: wrap; gap: 14px; }
.hs2-key__item{ display: inline-flex; align-items: center; gap: 6px; font-size: .92rem; font-weight: 700; color: var(--ink); }
.hs2-dot.is-key{ width: 16px; height: 16px; font-size: 0; }
.hs2-dot.is-key.is-miss{ background: var(--surface); box-shadow: 0 0 0 2px var(--bg,#111), 0 0 0 4px #ffb020; width: 12px; height: 12px; }
@media (max-width: 760px){
  .hs2-track__grid, .hs2-track__grid.has-oct{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* the old track is gone; hide any leftover */
.hstrack{ display: none; }
/* The office wall: bigger figures */
.hswall__label{ font-size: .95rem !important; font-weight: 800; color: var(--accent) !important; }
.hswall__record{ font-family: var(--display); font-size: 3rem !important; line-height: 1; }
.hswall__note{ font-size: 1.05rem !important; color: var(--ink) !important; }
.hs2-marks{ display: flex; flex-wrap: wrap; gap: 4px; }
.hs2-mark{ font-size: .85rem; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.hs2-mark.is-reached{ border-color: var(--accent-2, #ffd23f); color: var(--accent-2, #ffd23f); }
.hs2-dots{ margin-top: auto; padding-top: 6px; }
.hs2-dot.is-mile::after{ content: ""; position: absolute; }
.hs2-dot.is-mile{ outline: 2px dashed var(--accent-2, #ffd23f); outline-offset: 2px; }
.hs2-chap__name{ min-height: 0; }
.hs2-stat__label{ font-size: .85rem; }
/* Hot Seat: reveal, chapter, milestone, end screens in the site's type */
.hs2-dot.is-miss{ box-shadow: 0 0 0 3px var(--bg, #111), 0 0 0 5px var(--neg); }
.hs2-dot.is-key.is-miss{ box-shadow: 0 0 0 2px var(--bg,#111), 0 0 0 4px var(--neg); }
.hsreveal__title, .hschap__title, .hsmile__title, .hsend__title, .hsoct__title, .hstable__title{ font-family: var(--display) !important; text-transform: uppercase; font-size: clamp(1.8rem, 4vw, 2.5rem) !important; line-height: 1 !important; }
.hsround__part, .hschap__eyebrow, .hsmile__eyebrow, .hsend__eyebrow{ font-size: .9rem !important; }
.hsgrade__tag{ font-family: var(--display); font-size: 1.3rem !important; }
.hsgrade__label, .hsgrade__delta{ font-size: 1.15rem !important; }
.hsdata{ background: var(--surface-2) !important; border-radius: 14px !important; }
.hsdata__label{ font-family: var(--display); font-size: 1.1rem !important; color: var(--accent-2, #ffd23f) !important; text-transform: uppercase; }
.hsdata__best{ font-family: var(--display); text-transform: uppercase; font-size: 1.5rem !important; line-height: 1.05; }
.hsdata__coach{ font-size: 1.08rem !important; line-height: 1.5; color: var(--ink) !important; }
.hsdata__gap{ font-size: 1.02rem !important; font-weight: 700; color: var(--ink) !important; }
.hsreveal__said, .hsmile__scene, .hsmile__owner, .hschap__writer, .hschap__note, .hsend__verdict{ font-size: 1.08rem !important; line-height: 1.5; color: var(--ink) !important; max-width: none !important; }
.hsgame__label, .hstbar__label, .hsstretch__label{ font-family: var(--display); font-size: 1.1rem !important; text-transform: uppercase; color: var(--accent) !important; }
.hsgame__note, .hsgame__result, .hstbar__line, .hsstretch__line, .hsstretch__score{ font-size: 1.02rem !important; color: var(--ink) !important; }
.hsbtn{ font-size: 1.05rem !important; padding: 12px 22px !important; border-radius: 999px !important; font-weight: 800; }
.hsquit__btn, .hsquit__ask{ font-size: .95rem !important; }
.hschap__cell, .hsend__stat{ border-radius: 12px; }
.hsend__statValue{ font-family: var(--display); font-size: 2rem !important; }
.hsend__statLabel{ font-size: .9rem !important; font-weight: 800; color: var(--accent) !important; }
.hsend__statNote{ font-size: 1rem !important; color: var(--ink) !important; }
/* Called Shot read: scouting-note lines in the condensed face */
.cs2-read__list{ list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.cs2-read__item{
  position: relative; padding-left: 18px;
  font-family: var(--mono); font-weight: 600; font-size: 1.12rem; line-height: 1.4; color: var(--ink);
}
.cs2-read__item::before{ content: ""; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); transform: rotate(45deg); }

/* Sept 19: award winners carry club, position and the season's line */
.award__row--full{ display: grid !important; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); margin-bottom: 8px; }
.award__top{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
.award__row--full .award__name{ font-family: var(--display); text-transform: uppercase; font-size: 1.45rem; line-height: 1; color: var(--ink); }
.award__row--full .award__league{ font-size: .9rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); }
.award__club{ font-size: 1rem; font-weight: 700; color: var(--ink); }
.award__stats{ display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); }
.award__stat{ display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: 9px; background: var(--surface); border: 1px solid var(--line); }
.award__statValue{ font-family: var(--display); font-size: 1.35rem; line-height: 1; color: var(--ink); }
.award__statLabel{ font-size: .85rem; font-weight: 800; letter-spacing: .05em; color: var(--accent); }

/* ======== Sept 19: The Moment in the site's cards ======== */
.mses{ display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mses__cell{ display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.mses__value{ font-family: var(--display); font-size: 2rem; line-height: 1; color: var(--ink); }
.mses__label{ font-size: .9rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); }
.mses__sub{ font-size: .95rem; color: var(--ink); }

.mstage{ display: grid !important; gap: 12px; grid-template-columns: minmax(0, 1fr) !important; padding: 16px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.mstage__where{ font-size: .95rem !important; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--accent) !important; margin: 0; }
.mstage__said{ font-family: var(--display); text-transform: uppercase; font-size: clamp(1.4rem, 3vw, 2rem) !important; line-height: 1.1; color: var(--ink) !important; margin: 4px 0 0; }
.msit{ display: grid !important; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); gap: 16px; align-items: center; }
.msit__board{ display: grid !important; gap: 10px; }
.msit__team{ display: grid !important; grid-template-columns: 36px 1fr auto auto; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.msit__team.is-batting{ border-color: var(--accent); }
.msit__logo{ width: 36px; height: 36px; object-fit: contain; background: #f4f1ff; border-radius: 50%; padding: 4px; box-sizing: border-box; }
.msit__teamName{ font-family: var(--display); font-size: 1.4rem !important; text-transform: uppercase; color: var(--ink); }
.msit__teamRuns{ font-family: var(--display); font-size: 2rem !important; line-height: 1; color: var(--ink); }
.msit__bat{ font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; border-radius: 999px; background: var(--accent); color: var(--accent-ink, #120a24); }
.msit__inning{ font-family: var(--display); font-size: 1.6rem !important; color: var(--ink); }
.msit__countLabel{ font-size: .95rem !important; font-weight: 800; color: var(--accent); }
.msit__runner{ font-size: .9rem !important; font-weight: 800; }
@media (max-width: 560px){ .msit{ grid-template-columns: 1fr; } .msit__fieldwrap{ max-width: 200px; margin: 0 auto; } }

.mstage__who{ display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin-top: 12px; }
.mwho{ display: grid !important; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.mwho.is-batter{ border-top: 4px solid var(--accent); }
.mwho.is-pitcher{ border-top: 4px solid var(--accent-2, #ffd23f); }
.mwho__top{ display: flex; align-items: center; gap: 12px; }
.mwho .mface{ width: 58px; height: 58px; flex: none; }
.mwho__body{ display: grid; gap: 2px; }
.mwho__label{ font-size: .9rem !important; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--accent) !important; }
.mwho__name{ font-family: var(--display); text-transform: uppercase; font-size: 1.6rem !important; line-height: 1; color: var(--ink) !important; }
.mwho__hand{ font-size: .95rem !important; font-weight: 700; color: var(--ink) !important; }
.mwho__tiles{ display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); }
.mwho__tile{ display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.mwho__tileValue{ font-family: var(--display); font-size: 1.35rem; line-height: 1; color: var(--ink); }
.mwho__tileLabel{ font-size: .8rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); text-align: center; }
.mwho__line{ font-size: 1rem !important; color: var(--ink) !important; }

.mstage__around{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.maround{ display: grid; gap: 2px; padding: 8px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.maround.is-deck{ border-style: dashed; }
.maround__label{ font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); }
.maround__name{ font-family: var(--display); text-transform: uppercase; font-size: 1.2rem; color: var(--ink); }

.mcall{ margin-top: 16px; padding: 18px 20px !important; border-radius: 18px !important; background: var(--surface) !important; border: 1px solid var(--line) !important; }
.mcall__side{ font-size: .95rem !important; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--accent) !important; }
.mcall__prompt{ font-family: var(--display) !important; text-transform: uppercase; font-size: clamp(1.8rem, 4vw, 2.6rem) !important; line-height: 1 !important; }
.mcall__why{ font-size: 1.08rem !important; color: var(--ink) !important; }
.mcall__options{ display: grid !important; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important; }
.mopt{
  display: flex !important; flex-direction: column; gap: 8px; align-items: flex-start; text-align: left; min-height: 120px;
  padding: 14px 16px !important; border-radius: 16px !important; cursor: pointer; font: inherit; color: var(--ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, var(--surface-2)), var(--surface-2)) !important;
  border: 2px solid var(--accent) !important;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--accent) 45%, #000);
  transition: transform .12s ease;
}
.mopt:hover:not(:disabled){ transform: translateY(-2px); }
.mopt:disabled{ box-shadow: none; cursor: default; background: var(--surface-2) !important; border-style: dashed !important; border-color: var(--line) !important; }
.mopt.is-right{ border: 2px solid var(--pos) !important; border-style: solid !important; }
.mopt.is-wrong{ border: 2px solid var(--neg) !important; border-style: solid !important; }
.mopt__label{ font-family: var(--display); text-transform: uppercase; font-size: 1.45rem !important; line-height: 1.05; color: var(--ink) !important; }
.mopt__note{ font-size: 1rem !important; line-height: 1.4; color: var(--ink) !important; }
.mopt__go{ margin-top: auto; padding: 5px 12px; border-radius: 999px; background: var(--accent); color: var(--accent-ink, #120a24); font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.mopt:disabled .mopt__go{ display: none; }
.mskip{ font-size: 1rem !important; }
.mverdict{ font-family: var(--display); text-transform: uppercase; font-size: 1.6rem !important; line-height: 1.1; }

.mreveal__eyebrow{ font-size: .95rem !important; font-weight: 800; color: var(--accent) !important; text-transform: uppercase; }
.mreveal__outcome{ font-family: var(--display) !important; text-transform: uppercase; font-size: clamp(1.8rem, 4vw, 2.4rem) !important; }
.mreveal__narration{ font-size: 1.1rem !important; line-height: 1.55; color: var(--ink) !important; padding: 14px 16px; border-radius: 14px; background: var(--surface); border-left: 4px solid var(--accent); }
.mbar{ padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); margin-bottom: 8px; }
.mbar.is-best{ border-color: var(--pos); }
.mbar__label{ font-family: var(--display); text-transform: uppercase; font-size: 1.2rem !important; }
.mbar__wp, .mbar__behind{ font-size: 1rem !important; color: var(--ink) !important; }
.mbar__mark{ font-size: .85rem !important; font-weight: 800; }
.mreveal__stamp, .mactual__note, .mlib__note{ font-size: 1rem !important; color: var(--ink) !important; }
.mactual{ padding: 16px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.mactual__said{ font-family: var(--display); text-transform: uppercase; font-size: 1.6rem !important; }
.mactual__line, .mactual__desc, .mactual__swing{ font-size: 1.05rem !important; color: var(--ink) !important; }
.mlib__title{ font-family: var(--display); text-transform: uppercase; font-size: 1.8rem !important; }
.mlibcard{ padding: 14px 16px !important; border-radius: 14px !important; }
.mlibcard__match{ font-family: var(--display); text-transform: uppercase; font-size: 1.3rem !important; color: var(--ink) !important; }
.mlibcard__setup, .mlibcard__who, .mlibcard__score, .mlibcard__head{ font-size: 1rem !important; color: var(--ink) !important; }
.mlibcard__date, .mlibcard__swing{ font-size: .88rem !important; font-weight: 800; }
/* The Moment: the situation as fact cards */
.mfacts{ display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 8px; }
.mfact{ display: grid; gap: 4px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.mfact__label{ font-size: .88rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); }
.mfact__value{ font-family: var(--display); text-transform: uppercase; font-size: 1.5rem; line-height: 1.05; color: var(--ink); }
.mfact.is-wide{ grid-column: span 2; }
@media (max-width: 560px){ .mfact.is-wide{ grid-column: auto; } }
.mfact{ align-content: start; }
.msit__countRow{ display: flex; align-items: center; gap: 8px; }
/* The Moment: the Outs label was sized for a one-letter "O" and ran into the dots */
.msit__countRow{ gap: 10px !important; }
.msit__countLabel{ width: auto !important; min-width: 0; flex: none; text-transform: uppercase; letter-spacing: .05em; font-family: var(--display) !important; }
.msit__counts .mdots{ display: inline-flex; gap: 6px; }

.mverdict__again{ display: block; margin-top: 6px; font-family: var(--body); text-transform: none; font-size: 1rem; font-weight: 700; color: var(--ink); }
/* The Moment: the coach's read as cards */
.mcoach{ display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin-top: 10px; }
.mcoach__card{ display: grid; gap: 6px; align-content: start; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--line); }
.mcoach__card.is-call{ border-left-color: var(--pos); }
.mcoach__card.is-close{ border-left-color: var(--accent-2, #ffd23f); }
.mcoach__title{ font-family: var(--display); text-transform: uppercase; font-size: 1.3rem; line-height: 1.05; color: var(--ink); }
.mcoach__card.is-call .mcoach__title{ color: var(--pos); }
.mcoach__card.is-close .mcoach__title{ color: var(--accent-2, #ffd23f); }
.mcoach__text{ margin: 0; font-size: 1.05rem; line-height: 1.5; color: var(--ink); }

/* ======== Sept 19: Your Card — badges with crests, record as cards ======== */
.badges{ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; }
.badge{ opacity: 1 !important; justify-items: center; text-align: center; gap: 6px !important; padding: 16px 14px !important; border-radius: 16px !important; }
.badge:not(.is-earned){ background: var(--surface) !important; }
.badge:not(.is-earned) .badge__name, .badge:not(.is-earned) .badge__note{ opacity: .8; }
.bmedal{ width: 76px; height: 76px; display: block; filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); }
.bmedal__g1{ stop-color: #5b5a72; }
.bmedal__g2{ stop-color: #34334a; }
.bmedal.is-earned .bmedal__g1{ stop-color: #ffd66b; }
.bmedal.is-earned .bmedal__g2{ stop-color: #e79a2c; }
.bmedal__edge{ fill: none; stroke: rgba(255,255,255,.35); stroke-width: 1.5; }
.bmedal.is-earned .bmedal__edge{ stroke: rgba(255,255,255,.7); }
.bmedal__icon{ fill: none; stroke: #c9c7dc; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.bmedal.is-earned .bmedal__icon{ stroke: #2a1602; }
.badge__name{ font-size: 1.25rem !important; text-transform: uppercase; line-height: 1.05; color: var(--ink); }
.badge__note{ font-size: .98rem !important; color: var(--ink) !important; }
.badge__when{ font-family: var(--body) !important; font-size: .92rem !important; font-weight: 700; color: var(--accent) !important; }
.badge.is-earned .badge__when{ color: var(--accent-2) !important; }

.pf-recgrid{ display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); margin-top: 14px; }
.pf-rec{ display: grid; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.pf-rec:hover{ border-color: var(--accent); transform: translateY(-2px); }
.pf-rec__top{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.pf-rec__name{ font-family: var(--display); text-transform: uppercase; font-size: 1.3rem; line-height: 1.05; }
.pf-rec__chips{ display: flex; gap: 6px; }
.pf-rec__chip{ font-size: .85rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); }
.pf-rec__chip.is-on{ background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #120a24); }
.pf-rec__tiles{ display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
.pf-rec__tile{ display: grid; gap: 2px; align-content: start; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.pf-rec__value{ font-family: var(--display); font-size: 1.45rem; line-height: 1; color: var(--ink); }
.pf-rec__label{ font-size: .9rem; font-weight: 700; line-height: 1.25; color: var(--ink); }

/* Bigger type for the rest of the page's small print */
.pf-tile__label, .pf-rung__note, .pf-ch__note, .pf-block__note, .pf-nextitem__why{ font-size: 1rem !important; color: var(--ink) !important; }
.pf-rung__name, .pf-ch__name, .pf-nextitem__label{ font-size: 1.15rem !important; }
.pf-rung__at, .pf-ch__points, .pf-ch__count, .pf-tile__note{ font-size: .95rem !important; }

.badge{ align-content: start; }

.bmedal__icon{ stroke-width: 2 !important; }
/* Your Card: a badge opens its own card */
button.badge{ font: inherit; color: var(--ink); cursor: pointer; }
button.badge:hover{ border-color: var(--accent) !important; transform: translateY(-2px); }
.badge-detail{ display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin: 14px 0; padding: 18px 20px; border-radius: 18px; background: var(--surface); border: 2px solid var(--accent); }
.badge-detail.is-earned{ border-color: var(--accent-2); }
.badge-detail[hidden]{ display: none; }
.badge-detail .bmedal{ width: 120px; height: 120px; }
.badge-detail__words{ display: grid; gap: 6px; flex: 1 1 260px; }
.badge-detail__state{ font-size: .9rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.badge-detail.is-earned .badge-detail__state{ color: var(--accent-2); }
.badge-detail__name{ margin: 0; font-family: var(--display); text-transform: uppercase; font-size: 2rem; line-height: 1; color: var(--ink); }
.badge-detail__note, .badge-detail__when{ margin: 0; font-size: 1.05rem; color: var(--ink); }
.badge-detail__when{ font-weight: 800; color: var(--accent); }
.badge-detail__go{ justify-self: start; margin-top: 6px; }
.badge-detail__close{ justify-self: start; font: inherit; font-weight: 700; background: none; border: 0; color: var(--ink-soft); cursor: pointer; padding: 4px 0; }
.pf-ch__wrap{ display: grid; gap: 0; }
.pf-ch__wrap > .pf-ch{ border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.pf-ch__left{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 14px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 14px 14px; background: var(--surface-2); }
.pf-ch__leftLabel{ font-size: .88rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); margin-right: 4px; }
.pf-ch__leftItem{ font-size: .95rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--accent); color: var(--ink); text-decoration: none; }
.pf-ch__leftItem:hover{ background: var(--accent); color: var(--accent-ink, #120a24); }
.badge-detail__bar{ height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-top: 4px; }
.badge-detail__fill{ height: 100%; background: var(--accent); border-radius: 999px; }
.badge-detail.is-earned .badge-detail__fill{ background: var(--accent-2); }
.badge-detail__count{ font-family: var(--display); font-size: 1.2rem; color: var(--ink); }
.badge-detail__howLabel{ margin-top: 6px; font-family: var(--display); text-transform: uppercase; font-size: 1.1rem; color: var(--accent); }
.badge-detail__steps{ margin: 0; padding-left: 22px; display: grid; gap: 4px; font-size: 1.05rem; color: var(--ink); }

.bmedal__iconFill{ fill: #c9c7dc; stroke: none; }
.bmedal.is-earned .bmedal__iconFill{ fill: #2a1602; }

/* ---------- what to do next, as cards (sept 19) ---------- */
.pf-next{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.pf-nextitem{ display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; background: var(--surface-2); border: 1px solid var(--line); border-left: 4px solid var(--accent-2); border-radius: var(--radius); }
.pf-nextitem--badge{ border-left-color: #d4a73a; }
.pf-nextitem--feature{ border-left-color: var(--accent); }
.pf-nextitem .bmedal{ width: 64px; height: 64px; flex: 0 0 64px; }
.pf-nextitem__words{ display: grid; gap: 8px; min-width: 0; flex: 1; }
.pf-nextitem__kind{ font-family: "Big Shoulders Display", var(--font-display, sans-serif); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 1rem; color: var(--accent-2); }
.pf-nextitem--badge .pf-nextitem__kind{ color: #e5bd55; }
.pf-nextitem--feature .pf-nextitem__kind{ color: var(--accent); }
.pf-nextitem__label{ font-family: "Big Shoulders Display", var(--font-display, sans-serif); font-weight: 800; font-size: 1.55rem !important; line-height: 1.05; color: var(--ink); }
.pf-nextitem__why{ display: block; }
.pf-nextitem__left{ display: flex; flex-wrap: wrap; gap: 6px; }
.pf-nextitem__go{ justify-self: start; margin-top: 2px; cursor: pointer; }

/* ---------- parts of the game as crests, like the badges (sept 19) ---------- */
.acrest{ width: 56px; height: 56px; display: block; --tone: var(--accent); }
.acrest--basics{ --tone: var(--accent-hot); }
.acrest--hitting{ --tone: var(--accent); }
.acrest--pitching{ --tone: var(--accent-2); }
.acrest--defense{ --tone: var(--accent-3); }
.acrest--baserunning{ --tone: #ff9a5c; }
.acrest--strategy{ --tone: var(--college); }
.acrest--rules{ --tone: var(--neg); }
.acrest__crest{ fill: color-mix(in srgb, var(--tone) 30%, #17142c); stroke: color-mix(in srgb, var(--tone) 70%, #000); stroke-width: 1.5; }
.acrest__edge{ fill: none; stroke: color-mix(in srgb, var(--tone) 55%, transparent); stroke-width: 1.2; }
.acrest__icon{ fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.acrest__fill{ fill: #fff; stroke: none; }
.areacard__icon{ width: 56px !important; height: 56px !important; background: none !important; border-radius: 0 !important; }
.areacard, .areas__grid > .areacard:nth-child(7):last-child{ grid-template-columns: 56px minmax(0, 1fr) !important; }
.areacard:hover .acrest__crest{ fill: color-mix(in srgb, var(--tone) 45%, #17142c); }
.tarea__icon{ background: none !important; width: 84px !important; height: 84px !important; }
.tarea__icon .acrest{ width: 84px; height: 84px; }
.areas__grid > .areacard:nth-child(7):last-child .areacard__icon{ grid-column: 1 !important; grid-row: 1 !important; }

/* ==========================================================================
   SEPT 19: CARDS THAT FIT, DRAWN WHEN THERE IS NO GAME PHOTO, A READABLE YEAR
   AND A SHORT BACK FOR SMALL CARDS
   ========================================================================== */
.bec__art .bec__photo{ position: relative; z-index: 1; }
.bec__art.is-fit .bec__photo{ object-fit: contain !important; object-position: 50% 50% !important; filter: drop-shadow(0 6px 14px rgba(0,0,0,.55)); }
.bec__artbg{ position: absolute; inset: -12px; width: calc(100% + 24px) !important; height: calc(100% + 24px) !important; object-fit: cover; filter: blur(14px) brightness(.55) saturate(1.1); z-index: 0; }
.bec__art.is-drawn svg{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bec__art.is-drawn svg{ object-fit: cover; }
.bec__art.is-drawn{ background: #0b1a2b; }
/* the season: a gold plate, not small print */
.bec__yr{
  flex: none; font-family: var(--display-big, var(--display)); font-weight: 900; letter-spacing: .02em;
  font-size: 1.12em; line-height: 1; padding: 2px 7px; border-radius: 4px;
  background: #F2C14E; color: #16121C !important; text-shadow: none;
}
.bec--mini .bec__yr{ color: #16121C !important; font-size: max(11px, calc(var(--w) * .08)); padding: 1px 5px; }
/* the short back, for cards small enough to stand on a field */
.bec__brief{ display: none; }
.bec--mini .bec__side--back .bec__inner{ grid-template-rows: 1fr !important; }
.bec--mini .bec__side--back .bec__ratings,
.bec--mini .bec__side--back .bec__stats,
.bec--mini .bec__side--back .bec__credit,
.bec--mini .bec__side--back .bec__bsub{ display: none; }
.bec--mini .bec__bhead{ padding: calc(var(--w) * .06); height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: calc(var(--w) * .05); border-bottom: 0; }
.bec--mini .bec__bname{ font-family: var(--display-big, var(--display)); font-size: max(12px, calc(var(--w) * .12)); line-height: 1; overflow-wrap: anywhere; }
.bec--mini .bec__brief{ display: grid; gap: calc(var(--w) * .045); }
.bec__briefline{ display: flex; align-items: center; gap: 5px; }
.bec__briefyr{ font-family: var(--display-big, var(--display)); font-weight: 900; font-size: max(11px, calc(var(--w) * .085)); padding: 1px 5px; border-radius: 3px; background: #F2C14E; color: #16121C; line-height: 1.1; }
.bec__briefpos{ font-weight: 800; font-size: max(10px, calc(var(--w) * .075)); padding: 1px 5px; border-radius: 3px; background: rgba(255,255,255,.16); color: var(--card-ink); line-height: 1.15; }
.bec__briefovr{ margin-left: auto; font-family: var(--display-big, var(--display)); font-weight: 900; font-size: max(13px, calc(var(--w) * .12)); color: var(--badge, #F2C14E); line-height: 1; }
.bec__brieftiles{ display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.bec__brieftile{ display: grid; gap: 0; padding: 3px 5px; border-radius: 5px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12); }
.bec__brieftile b{ font-family: var(--display-big, var(--display)); font-weight: 900; font-size: max(12px, calc(var(--w) * .11)); line-height: 1; color: var(--card-ink); }
.bec__brieftile span{ font-weight: 700; font-size: max(9px, calc(var(--w) * .062)); text-transform: uppercase; letter-spacing: .04em; color: var(--card-soft); line-height: 1.2; }
.bec__briefhead{ font-weight: 800; font-size: max(10px, calc(var(--w) * .072)); color: var(--card-ink); }

/* ==========================================================================
   SEPT 19: THE BINDER'S PACKS. Foil packs on a shelf, a rip that tears the top
   off, three cards face down that turn when clicked, the odds as tier cards,
   and every opened pack kept.
   ========================================================================== */
.bp-shelf .pf-block__title, .bp-history .pf-block__title{ font-family: var(--display-big) !important; font-weight: 900 !important; text-transform: uppercase; font-size: clamp(1.6rem, 3vw, 2.2rem) !important; letter-spacing: .01em; }
.bp-row{ display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin: 6px 0 18px; }
.bp-pack{ padding: 0; border: 0; background: none; cursor: pointer; width: 150px; flex: none; transition: transform .18s ease, filter .18s ease; filter: drop-shadow(0 10px 18px rgba(0,0,0,.5)); }
.bp-pack:hover{ transform: translateY(-6px) rotate(-2deg); filter: drop-shadow(0 16px 26px rgba(0,0,0,.6)) drop-shadow(0 0 16px rgba(155,125,240,.45)); }
.bp-pack:focus-visible{ outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.bp-pack:disabled{ cursor: default; opacity: .6; }
.bp-pack__svg{ display: block; width: 100%; height: auto; }
.bp-pack:hover .bp-shine{ animation: bp-shine 1.1s ease; }
@keyframes bp-shine{ from{ transform: skewX(-18deg) translateX(0); } to{ transform: skewX(-18deg) translateX(420px); } }
.bp-pack--empty{ cursor: default; opacity: .32; filter: grayscale(.7); }
.bp-pack--empty:hover{ transform: none; filter: grayscale(.7); }
.bp-more{ font-family: var(--display-big); font-weight: 900; font-size: 1.6rem; text-transform: uppercase; color: var(--ink); }
.bp-earn{ flex: 1; min-width: 260px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.bp-earn__card{ display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); border-left: 4px solid var(--accent); }
.bp-earn__n{ font-family: var(--display-big); font-weight: 900; font-size: 2rem; line-height: 1; color: var(--ink); }
.bp-earn__what{ font-weight: 800; font-size: 1.02rem; color: var(--ink); }
.bp-earn__pays{ font-weight: 800; font-size: .98rem; color: #F2C14E; }
.bp-odds{ display: grid; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.bp-odds__label{ font-family: var(--display-big); font-weight: 900; font-size: 1.25rem; text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
.bp-odds__row{ display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.bp-tier{ display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: #1a1733; }
.bp-tier__name{ font-weight: 800; font-size: 1rem; color: #F6F3EC; }
.bp-tier__pct{ font-family: var(--display-big); font-weight: 900; font-size: 1.7rem; line-height: 1; color: #F6F3EC; }
.bp-tier--immortal{ background: linear-gradient(135deg, #5a3f06, #b8860b 55%, #ffe08a); border-color: #ffe08a; }
.bp-tier--immortal .bp-tier__name, .bp-tier--immortal .bp-tier__pct{ color: #1b1204; }
.bp-tier--mvp{ background: linear-gradient(135deg, #3d1466, #8a3ce0); }
.bp-tier--allstar{ background: linear-gradient(135deg, #0d3a6e, #2f7de0); }
.bp-tier--everyday{ background: linear-gradient(135deg, #0f4a32, #2fae6f); }
.bp-tier--regular{ background: linear-gradient(135deg, #3b3f48, #6c7482); }
.bp-tier--callup{ background: linear-gradient(135deg, #3b2a1e, #7a5a3e); }
.bp-odds__pity{ margin: 0; font-weight: 800; font-size: 1.02rem; color: #F2C14E; }

/* the rip */
body.bp-open{ overflow: hidden; }
.bp-stage{ position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; overflow-y: auto; padding: 24px 16px;
  background: radial-gradient(60% 50% at 50% 45%, rgba(75,47,168,.55), rgba(8,6,20,.94) 70%); animation: bp-in .25s ease; }
@keyframes bp-in{ from{ opacity: 0; } to{ opacity: 1; } }
.bp-stage.is-big-pull{ background: radial-gradient(60% 50% at 50% 45%, rgba(242,193,78,.45), rgba(8,6,20,.94) 70%); }
.bp-stage__inner{ display: grid; justify-items: center; gap: 10px; width: min(100%, 980px); }
.bp-stage__title{ margin: 0; font-family: var(--display-big); font-weight: 900; font-size: clamp(2.4rem, 6vw, 3.6rem); text-transform: uppercase; color: #F6F3EC; line-height: .95; }
.bp-stage__note{ margin: 0; font-weight: 800; font-size: 1.15rem; color: #F2C14E; min-height: 1.4em; }
.bp-well{ display: grid; place-items: center; min-height: 440px; width: 100%; }
.bp-well > *{ grid-area: 1 / 1; }
.bp-rip{ width: 230px; transition: transform .6s cubic-bezier(.4,0,.2,1), opacity .6s ease; filter: drop-shadow(0 18px 30px rgba(0,0,0,.6)); }
.bp-rip .bp-top{ transform-box: fill-box; transform-origin: 0% 100%; transition: transform .5s cubic-bezier(.3,.7,.3,1), opacity .5s ease; }
.bp-rip.is-shaking{ animation: bp-shake .6s ease-in-out infinite; }
@keyframes bp-shake{ 0%,100%{ transform: rotate(0); } 20%{ transform: rotate(-3deg) scale(1.02); } 40%{ transform: rotate(3deg); } 60%{ transform: rotate(-2deg) scale(1.03); } 80%{ transform: rotate(2deg); } }
.bp-rip.is-torn .bp-top{ transform: translate(60px, -90px) rotate(-28deg); opacity: 0; }
.bp-rip.is-dropping{ transform: translateY(210px) scale(.9); opacity: 0; }
.bp-fan{ display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; pointer-events: none; }
.bp-fan.is-out{ pointer-events: auto; }
.bp-slot{ position: relative; width: 230px; aspect-ratio: 5 / 7; opacity: 0; transform: translateY(120px) scale(.55);
  transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .5s ease; transition-delay: calc(var(--i) * .16s + .15s); outline: none; }
.bp-fan.is-out .bp-slot{ opacity: 1; transform: none; }
.bp-slot .bp-face{ --w: 230px; position: absolute; inset: 0; transform: rotateY(-90deg); transition: transform .32s ease .3s; }
.bp-slot.is-up .bp-face{ transform: none; }
.bp-cardback{ position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; cursor: pointer; border-radius: 14px;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 10px, transparent 10px 20px), linear-gradient(160deg, #2a1f6e, #4b2fa8 55%, #1b1646);
  border: 6px solid #F6F3EC; box-shadow: 0 16px 30px rgba(0,0,0,.55); transition: transform .3s ease-in; }
.bp-cardback:hover{ box-shadow: 0 16px 30px rgba(0,0,0,.55), 0 0 22px rgba(242,193,78,.55); }
.bp-slot:focus-visible .bp-cardback{ outline: 3px solid #F2C14E; outline-offset: 4px; }
.bp-cardback__mark svg{ width: 96px; height: 96px; display: block; }
.bp-cardback__word{ font-family: var(--display-big); font-weight: 900; font-size: 1.7rem; text-transform: uppercase; color: #F6F3EC; }
.bp-slot.is-up .bp-cardback{ transform: rotateY(90deg); pointer-events: none; }
.bp-slot__tag{ position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); white-space: nowrap; opacity: 0; transition: opacity .3s ease .6s;
  font-weight: 800; font-size: 1rem; padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.14); color: #F6F3EC; }
.bp-slot__tag.is-new{ background: #F2C14E; color: #16121C; }
.bp-slot.is-up .bp-slot__tag{ opacity: 1; }
.bp-slot--immortal.is-up .bp-face, .bp-slot--mvp.is-up .bp-face{ filter: drop-shadow(0 0 22px rgba(242,193,78,.85)); }
.bp-slot--allstar.is-up .bp-face{ filter: drop-shadow(0 0 18px rgba(90,160,255,.8)); }
.bp-stage__done{ margin-top: 40px; }
@media (max-width: 760px){
  .bp-slot{ width: 44vw; max-width: 200px; }
  .bp-slot .bp-face{ --w: min(44vw, 200px); }
  .bp-well{ min-height: 0; }
  .bp-rip{ width: 180px; }
}

/* opened packs */
.bp-hist{ display: grid; gap: 12px; }
.bp-hist__pack{ display: flex; gap: 16px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); overflow-x: auto; }
.bp-hist__side{ display: grid; justify-items: center; gap: 4px; flex: none; width: 92px; }
.bp-hist__art{ width: 70px; }
.bp-hist__art svg{ display: block; width: 100%; height: auto; }
.bp-hist__num{ font-family: var(--display-big); font-weight: 900; font-size: 1.3rem; text-transform: uppercase; color: var(--ink); }
.bp-hist__pity{ font-weight: 800; font-size: .9rem; color: #F2C14E; text-align: center; }
.bp-hist__cards{ display: flex; gap: 12px; }
.bp-hist__loading{ font-weight: 700; color: var(--ink); }
.bp-hist__more{ margin-top: 12px; }

/* The Nine: the mound, a starter and a bullpen arm (sept 19) */
.nine__mound h2{ font-family: var(--display-big) !important; font-weight: 900; text-transform: uppercase; font-size: 1.5rem !important; }
.nine__arms{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nine__arm{ display: grid; justify-items: center; gap: 8px; padding: 10px 8px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.nine__armlabel{ font-weight: 800; font-size: .98rem; color: var(--ink); text-align: center; }
.nine__armempty{ display: grid; place-items: center; width: 132px; aspect-ratio: 5/7; border: 2px dashed var(--line); border-radius: 10px; font-weight: 700; color: var(--ink); text-align: center; padding: 8px; box-sizing: border-box; }
.nine__armbtn{ padding: 6px 16px !important; }

/* ==========================================================================
   SEPT 19: THE DUEL, REBUILT. A lit scoreboard, a result card for every play
   with the ball drawn on a field, lineups before first pitch, keyboard keys.
   ========================================================================== */
.dx{ display: grid; gap: 18px; }
.dx-board{ display: grid; gap: 0; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, #0c1016, #121a24); box-shadow: 0 14px 34px rgba(0,0,0,.35); color: #F6F3EC; }
.dx-board__main{ display: grid; grid-template-columns: minmax(0, 1.6fr) auto minmax(0, 1fr); gap: 22px; align-items: center; padding: 18px 22px; }
@media (max-width: 900px){ .dx-board__main{ grid-template-columns: 1fr; } }
.dx-line{ display: grid; gap: 6px; }
.dx-line__row{ display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 46px) 52px 52px; gap: 6px; align-items: center; }
.dx-line__row--head .dx-line__cell{ background: none; font-size: 1.05rem; color: rgba(246,243,236,.85); height: auto; }
.dx-line__team{ display: flex; align-items: center; gap: 10px; min-width: 0; }
.dx-line__name{ font-family: var(--display-big); font-weight: 900; font-size: 1.7rem; text-transform: uppercase; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-line__bat{ flex: none; font-weight: 800; font-size: .9rem; padding: 3px 8px; border-radius: 999px; background: #F2C14E; color: #16121C; }
.dx-line__cell{ display: grid; place-items: center; height: 44px; border-radius: 8px; background: rgba(255,255,255,.06);
  font-family: var(--display-big); font-weight: 900; font-size: 1.6rem; color: #FFE7A3; }
.dx-line__cell.is-now{ color: #F2C14E; }
.dx-line__cell--r{ background: rgba(242,193,78,.16); color: #F2C14E; font-size: 1.9rem; }
.dx-line__cell--h{ color: #F6F3EC; }
.dx-line__row.is-up .dx-line__name{ color: #F2C14E; }
.dx-inning{ display: grid; justify-items: center; gap: 2px; padding: 0 12px; }
.dx-inning__half{ font-family: var(--display-big); font-weight: 900; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .04em; color: rgba(246,243,236,.9); }
.dx-inning__n{ font-family: var(--display-big); font-weight: 900; font-size: 3.6rem; line-height: .9; text-transform: uppercase; }
.dx-inning__role{ margin-top: 6px; font-weight: 800; font-size: 1rem; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.dx-inning__role.is-pitch{ background: #3b6fd8; color: #fff; }
.dx-inning__role.is-bat{ background: #E4453A; color: #fff; }
.dx-sit{ display: flex; align-items: center; justify-content: flex-end; gap: 18px; flex-wrap: wrap; }
@media (max-width: 900px){ .dx-sit{ justify-content: flex-start; } }
.dx-counts{ display: grid; gap: 8px; }
.dx-count{ display: grid; grid-template-columns: 76px auto; align-items: center; gap: 10px; }
.dx-count__label{ font-family: var(--display-big); font-weight: 900; font-size: 1.25rem; text-transform: uppercase; }
.dx-lights{ display: flex; gap: 8px; }
.dx-lights i{ width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.1); border: 2px solid rgba(255,255,255,.22); }
.dx-lights--ball i.is-on{ background: #46e58a; border-color: #46e58a; box-shadow: 0 0 12px rgba(70,229,138,.7); }
.dx-lights--strike i.is-on{ background: #ff6f5f; border-color: #ff6f5f; box-shadow: 0 0 12px rgba(255,111,95,.7); }
.dx-lights--out i.is-on{ background: #F2C14E; border-color: #F2C14E; box-shadow: 0 0 12px rgba(242,193,78,.7); }
.dx-bases{ width: 132px; }
.dx-diamond{ display: block; width: 100%; height: auto; }
.dx-diamond__lines{ fill: none; stroke: rgba(255,255,255,.25); stroke-width: 2; }
.dx-diamond rect{ fill: rgba(255,255,255,.08); stroke: rgba(255,255,255,.45); stroke-width: 2; }
.dx-diamond rect.is-on{ fill: #F2C14E; stroke: #F2C14E; filter: drop-shadow(0 0 6px rgba(242,193,78,.8)); }
.dx-diamond__plate{ fill: #F6F3EC; }
.dx-board__line{ margin: 0; padding: 12px 22px; background: rgba(255,255,255,.06); border-top: 1px solid rgba(255,255,255,.1); font-weight: 800; font-size: 1.12rem; color: #F6F3EC; }

/* the play */
.dx-play{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 360px); gap: 18px; align-items: center; padding: 18px 22px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--line); }
@media (max-width: 760px){ .dx-play{ grid-template-columns: 1fr; } }
.dx-play.is-fresh{ animation: dx-pop .45s cubic-bezier(.2,.8,.2,1); }
@keyframes dx-pop{ from{ transform: scale(.97); opacity: .4; } to{ transform: none; opacity: 1; } }
.dx-play--single, .dx-play--double, .dx-play--triple, .dx-play--walk{ border-left-color: #46e58a; }
.dx-play--homer{ border-left-color: #F2C14E; background: linear-gradient(90deg, rgba(242,193,78,.16), var(--surface) 60%); }
.dx-play--out, .dx-play--strikeout{ border-left-color: #ff6f5f; }
.dx-play__words{ display: grid; gap: 8px; min-width: 0; }
.dx-play__kicker{ font-weight: 800; font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.dx-play__head{ margin: 0; font-family: var(--display-big); font-weight: 900; font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: .92; text-transform: uppercase; color: var(--ink); }
.dx-play--homer .dx-play__head{ color: #F2C14E; }
.dx-play__text{ margin: 0; font-weight: 800; font-size: 1.3rem; line-height: 1.25; color: var(--ink); }
.dx-play__field{ width: 100%; max-width: 360px; justify-self: end; }
.dx-chips{ display: flex; flex-wrap: wrap; gap: 6px; }
.dx-chip{ font-weight: 800; font-size: .98rem; padding: 5px 11px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); }
.dx-chip.is-run{ background: #F2C14E; color: #16121C; border-color: #F2C14E; }
.dx-chip.is-score{ background: rgba(155,125,240,.22); }
.dx-chip.is-good{ background: rgba(70,229,138,.2); border-color: rgba(70,229,138,.55); }
.dx-chip.is-miss{ background: rgba(255,111,95,.18); border-color: rgba(255,111,95,.5); }

/* the field drawing */
.dx-field{ display: block; width: 100%; height: auto; }
.dx-fld circle{ fill: rgba(10,14,20,.7); stroke: rgba(255,255,255,.7); stroke-width: 1.2; }
.dx-fld text{ font: 800 6.2px var(--body, sans-serif); fill: #F6F3EC; }
.dx-fld.is-on circle{ fill: #E4453A; stroke: #fff; stroke-width: 2; }
.dx-flight{ fill: none; stroke: #F6F3EC; stroke-width: 2.4; stroke-dasharray: 100; stroke-dashoffset: 0; stroke-linecap: round; opacity: .95; }
.dx-flight.is-hit{ stroke: #F2C14E; }
.dx-flight[style]{ animation: dx-draw var(--dur, 1.2s) ease-out both; }
@keyframes dx-draw{ from{ stroke-dashoffset: 100; } to{ stroke-dashoffset: 0; } }
.dx-land{ fill: none; stroke: #F6F3EC; stroke-width: 2; }
.dx-land.is-hit{ stroke: #F2C14E; }
.dx-land[style]{ animation: dx-land .5s ease-out both; animation-delay: var(--dur, 1.2s); }
@keyframes dx-land{ from{ r: 1; opacity: 0; } 50%{ opacity: 1; } to{ r: 7; opacity: 1; } }
.dx-ballfly{ fill: #fff; stroke: #c4302b; stroke-width: 1; }

/* the stage */
.dx-stage{ grid-template-columns: 270px minmax(0, 1fr) 270px !important; }
@media (max-width: 1080px){ .dx-stage{ grid-template-columns: minmax(0, 1fr) !important; } }
.dx-side{ display: grid; justify-items: center; gap: 10px; }
.dx-side__title{ font-family: var(--display-big) !important; font-weight: 900 !important; font-size: 1.6rem !important; letter-spacing: .01em !important; text-transform: uppercase; color: var(--ink) !important; margin: 0; }
.dx-side__spot{ font-weight: 800; font-size: 1rem; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }
.dx-note{ font-weight: 700; font-size: 1.02rem !important; color: var(--ink) !important; text-align: center; margin: 0; }
.dx-prompt{ font-family: var(--display-big) !important; font-weight: 900 !important; font-size: 2rem !important; text-transform: uppercase; margin: 0 !important; text-align: center; }
.dx-hint{ font-weight: 700; font-size: 1.02rem !important; color: var(--ink) !important; text-align: center; max-width: 520px; }
.dx-middle .du-pitch{ display: inline-flex; align-items: center; gap: 8px; font-size: 1.05rem; }
.dx-key{ display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 6px; box-sizing: border-box;
  font: 800 .88rem var(--mono, monospace); background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); color: inherit; }
.du-pitch.is-on .dx-key{ background: rgba(0,0,0,.18); }
.dx-key--cell{ position: absolute; top: 4px; left: 5px; min-width: 20px; height: 20px; font-size: .84rem; opacity: .75; pointer-events: none; }
.dx-zone .du-cell{ position: relative; }
.du-cell.is-aim{ box-shadow: inset 0 0 0 3px #F2C14E !important; background: rgba(242,193,78,.25) !important; }
.dx-legend{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.dx-legend__item{ display: inline-flex; align-items: center; gap: 5px; }
.dx-legend__what{ font-weight: 800; font-size: 1rem; color: var(--ink); margin-left: 3px; }
.dx-pitchcard{ width: 100%; display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); box-sizing: border-box; }
.dx-pitchcard__label{ font-weight: 800; font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.dx-pitchcard__head{ margin: 0; font-family: var(--display-big); font-weight: 900; font-size: 1.9rem; line-height: 1; text-transform: uppercase; color: var(--ink); }
.dx-pitchcard__head.is-ball{ color: #46e58a; }
.dx-pitchcard__head.is-called-strike, .dx-pitchcard__head.is-swinging-strike{ color: #ff6f5f; }
.dx-pitchcard__head.is-in-play{ color: #F2C14E; }
.dx-pitchcard__who{ margin: 0; font-weight: 800; font-size: 1.05rem; color: var(--ink); }
.dx-due{ width: 100%; display: grid; gap: 6px; padding: 10px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); box-sizing: border-box; }
.dx-due__label{ font-weight: 800; font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.dx-due__row{ font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.dx-due__row b{ display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-ink, #16121C); font-size: .9rem; margin-right: 4px; }

/* before first pitch */
.dx-pre{ display: grid; gap: 18px; }
.dx-pre__top{ display: grid; gap: 12px; padding: 18px 22px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.dx-pre__title{ margin: 0; font-family: var(--display-big); font-weight: 900; font-size: clamp(2rem, 4vw, 2.8rem); text-transform: uppercase; line-height: .95; color: var(--ink); }
.dx-pre__note{ margin: 0; font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.dx-levels{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.dx-level{ padding: 14px 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface-2); color: var(--ink); cursor: pointer;
  font-family: var(--display-big); font-weight: 900; font-size: 1.45rem; text-transform: uppercase; }
.dx-level:hover{ border-color: var(--accent); }
.dx-level.is-on{ background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #16121C); }
.dx-squads{ display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: center; }
@media (max-width: 860px){ .dx-squads{ grid-template-columns: 1fr; } .dx-vs{ justify-self: center; } }
.dx-vs{ font-family: var(--display-big); font-weight: 900; font-size: 2.4rem; color: #F2C14E; }
.dx-squad{ display: grid; gap: 10px; padding: 16px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); border-top: 5px solid #E4453A; align-self: stretch; }
.dx-squad.is-mine{ border-top-color: #3b6fd8; }
.dx-squad__head{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dx-squad__title{ margin: 0; font-family: var(--display-big); font-weight: 900; font-size: 1.9rem; text-transform: uppercase; color: var(--ink); line-height: 1; }
.dx-squad__ovr{ font-weight: 800; font-size: 1.02rem; padding: 4px 10px; border-radius: 999px; background: #F2C14E; color: #16121C; white-space: nowrap; }
.dx-squad__list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.dx-squad__row, .dx-squad__arm{ display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 38px 34px; gap: 8px; align-items: center; padding: 7px 10px; border-radius: 10px; background: var(--surface-2); }
.dx-squad__arm{ grid-template-columns: auto minmax(0, 1fr) 34px; }
.dx-squad__n{ font-family: var(--display-big); font-weight: 900; font-size: 1.2rem; color: var(--accent); }
.dx-squad__name{ font-weight: 800; font-size: 1.02rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-squad__yr{ font-weight: 800; font-size: .92rem; padding: 1px 6px; border-radius: 4px; background: #F2C14E; color: #16121C; }
.dx-squad__pos{ font-weight: 800; font-size: .92rem; text-align: center; padding: 1px 4px; border-radius: 4px; background: rgba(255,255,255,.12); color: var(--ink); }
.dx-squad__r{ font-family: var(--display-big); font-weight: 900; font-size: 1.25rem; text-align: right; color: var(--ink); }
.dx-squad__arms{ display: grid; gap: 5px; }
.dx-squad__armlabel{ font-weight: 800; font-size: .92rem; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.dx-go{ justify-self: center; font-size: 1.2rem !important; padding: 14px 42px !important; }

/* the final */
.dx-final{ display: grid; gap: 14px; padding: 18px 22px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.dx-final__title{ margin: 0; font-family: var(--display-big); font-weight: 900; font-size: clamp(2.4rem, 5vw, 3.4rem); text-transform: uppercase; line-height: .95; color: var(--ink); }
.dx-final__plays{ display: grid; gap: 6px; }
.dx-final__play{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--surface-2); border-left: 4px solid #E4453A; }
.dx-final__play.is-yours{ border-left-color: #3b6fd8; }
.dx-final__when{ font-weight: 800; font-size: .95rem; text-transform: uppercase; color: var(--accent); }
.dx-final__what{ font-weight: 800; font-size: 1.05rem; color: var(--ink); }
.dx .du-earn__label, .dx .du-earn__note{ color: var(--ink) !important; font-size: 1rem !important; }
.bp-stage{ background: radial-gradient(60% 50% at 50% 45%, rgba(75,47,168,.7), rgba(8,6,20,.97) 70%) !important; backdrop-filter: blur(6px); }
.bp-stage.is-big-pull{ background: radial-gradient(60% 50% at 50% 45%, rgba(242,193,78,.5), rgba(8,6,20,.97) 70%) !important; }
.bp-stage__done{ justify-self: center !important; margin-left: auto; margin-right: auto; }
.pf-block:has(.binder__wall) > .pf-block__head .pf-block__title{ font-family: var(--display-big) !important; font-weight: 900 !important; text-transform: uppercase; font-size: clamp(1.6rem, 3vw, 2.2rem) !important; }
.bec__brieftiles{ grid-template-columns: 1fr !important; gap: 3px !important; }
.bec__brieftile{ display: flex !important; align-items: baseline; justify-content: space-between; gap: 6px; padding: 2px 6px !important; min-width: 0; }
.bec__brieftile span{ order: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: max(10px, calc(var(--w) * .07)) !important; }
.bec__brieftile b{ order: 2; font-size: max(13px, calc(var(--w) * .1)) !important; }
.bec__brief, .bec__briefline{ min-width: 0; }
.dx-fld text{ font-size: 13px !important; }
.dx .du-rating b{ font-size: 1.35rem !important; }
.dx .du-rating span{ font-size: .9rem !important; font-weight: 800 !important; color: var(--ink) !important; letter-spacing: .02em !important; text-transform: none !important; }
.dx-board{ scroll-margin-top: 80px; }
@media (max-width: 1080px){ .dx-stage .dx-middle{ order: -1; } }

/* ==========================================================================
   SEPT 19 (2): THE PICTURE IS THE MAN. The photo fills the window edge to
   edge, cropped to the window scripts/fit-card-art.py found around the
   player, so he is whole and centered. No blur, no bars, no drawings. The
   club logo sits on the foot of the card.
   ========================================================================== */
.bec__art.has-crop{ container-type: size; }
.bec__art.has-crop .bec__photo{
  position: absolute; max-width: none; object-fit: fill; z-index: 1;
  --dw: max(min(calc(100cqw / var(--cw)), calc(100cqh * var(--r) / var(--ch))), 100cqw, calc(100cqh * var(--r)));
  width: var(--dw); height: calc(var(--dw) / var(--r));
  left: clamp(calc(100cqw - var(--dw)), calc(50cqw - var(--cx) * var(--dw)), 0px);
  top: clamp(calc(100cqh - var(--dw) / var(--r)), calc(50cqh - var(--cy) * var(--dw) / var(--r)), 0px);
}
.bec__artbg, .bec__art.is-drawn svg{ display: none !important; }
.bec__logo{ display: block; flex: none; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.bec__logo--foot{ width: 26px; height: 26px; padding: 3px; border-radius: 6px; background: #F6F3EC; box-sizing: border-box; }
.bec__tierbar{ justify-content: flex-start !important; padding-top: 6px !important; padding-bottom: 7px !important; }
.bec__tierbar .bec__headline{ margin-left: auto; }
.bec__logo--mini{ display: none; }
.bec--mini .bec__logo--mini{ display: block; width: max(16px, calc(var(--w) * .13)); height: max(16px, calc(var(--w) * .13)); padding: 2px; border-radius: 4px; background: #F6F3EC; box-sizing: border-box; }

/* Keep the Book: the typed entry is drawn over the input so a backwards K
   shows as a backwards K (sept 19) */
.sbk-write__input{ color: transparent !important; caret-color: var(--ink); position: relative; z-index: 1; }
.sbk-write__show{ position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 2;
  color: var(--ink); font-family: var(--mono); font-weight: 800; font-size: 1.7rem; letter-spacing: .04em; white-space: pre; }
.sbk-write__show{ display: flex; align-items: center; justify-content: center; }
.sbk-bk{ display: inline-block; transform: scaleX(-1); }
.sbk-key .sbk-bk{ font-weight: 800; }


/* ===========================================================================
   SEPT 20: THE MOTION LAYER

   The pack rip was the only part of this site that moved like a made thing.
   This is the rest of it. Every rule here is driven by public/motion.js,
   which reads the page by shape rather than by name, so a feature written
   next month arrives with the same motion on the day it is written.

   Nothing below is load bearing. Every class in this section is added by
   script, so with the script gone the site is exactly what it was, and the
   whole section turns itself off under reduced motion.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Page to page.

   A cross document view transition, which is the browser doing what an app
   framework spends a megabyte doing. The old page holds while the new one
   comes up under it, so a click reads as moving through the site rather than
   as the screen going white and filling back in. Browsers without it ignore
   the whole at-rule and navigate the way they always did.
   --------------------------------------------------------------------------- */
@view-transition{ navigation: auto; }

::view-transition-old(root){ animation: mo-vt-out .16s ease both; }
::view-transition-new(root){ animation: mo-vt-in .30s cubic-bezier(.2,.8,.2,1) both; }
@keyframes mo-vt-out{ to{ opacity: 0; } }
@keyframes mo-vt-in{ from{ opacity: 0; translate: 0 8px; } to{ opacity: 1; translate: 0 0; } }

/* The header and the color key under it are one object across a navigation,
   so they hold still while the page changes underneath. This is the detail
   that makes it read as one site rather than as two pages. */
.sitehead{ view-transition-name: mo-head; }

/* ---------------------------------------------------------------------------
   The rise.

   Ten pixels and a fade. It is deliberately small: the job is to say the
   page is arriving in an order somebody chose, not to make anybody watch a
   card slide across a screen. The stagger in a grid is 55ms a tile and caps
   at nine, so a wall of forty cards still finishes in half a second.
   --------------------------------------------------------------------------- */
.mo-rise{
  opacity: 0;
  translate: 0 12px;
  transition: opacity .52s ease, translate .52s cubic-bezier(.2,.8,.2,1);
}
.mo-rise.is-in{ opacity: 1; translate: 0 0; }

/* A tile in a wall is dealt rather than raised: it arrives a hair under full
   size and settles, which is the pack's fan at a tenth of the volume. `scale`
   is the independent property on purpose, so a tile already carrying a
   transform of its own keeps it. */
.mo-rise--tile{ scale: .975; transition: opacity .52s ease, translate .52s cubic-bezier(.2,.8,.2,1), scale .52s cubic-bezier(.2,.8,.2,1); }
.mo-rise--tile.is-in{ scale: 1; }

/* A figure lands lit and cools into its own color over half a second, so a
   number that was counted out of the database looks counted rather than
   printed. */
.mo-counting{ color: var(--accent-hot); transition: none; }

/* ---------------------------------------------------------------------------
   The seam. A chalk line across the top of the window that fills as you read
   down the page. It is the one piece of chrome on the site that tells you
   how much of a long page is left, and on a page as long as a team hub that
   is worth three pixels.
   --------------------------------------------------------------------------- */
.mo-seam{
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), var(--accent-hot) 55%, var(--chalk));
  box-shadow: 0 0 14px -2px var(--accent);
  pointer-events: none;
  will-change: transform;
}

/* The header settles once you leave the top: a deeper shadow and a lit
   bottom edge, and not one pixel of height, because a header that changes
   height while you scroll can flicker forever at the boundary. */
.sitehead{ transition: box-shadow .25s ease, background-color .25s ease; }
.mo-scrolled .sitehead{
  box-shadow: 0 18px 40px -28px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.05) inset;
  backdrop-filter: blur(18px) saturate(1.3);
}
.mo-scrolled .sitehead::after{ opacity: 1; filter: saturate(1.25) brightness(1.1); }

/* ---------------------------------------------------------------------------
   The cards.

   Two layers on one pseudo element: a sheen that sweeps across on the way
   in, which is the foil on a pack, and a soft light that follows the cursor,
   which is the thing that makes a flat rectangle read as a surface. The lift
   is `translate` rather than `transform` so a card already carrying a
   transform of its own keeps it.
   --------------------------------------------------------------------------- */
.mo-lift{ transition: translate .16s ease, box-shadow .2s ease, border-color .2s ease; }
.mo-lift:hover{ translate: 0 -3px; }
.mo-lift:active{ translate: 0 1px; transition-duration: .06s; }

.mo-lift--glint{ position: relative; }
.mo-lift--glint::after{
  content: "";
  position: absolute; inset: 0; z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background-image:
    linear-gradient(104deg, transparent 40%, rgba(255,255,255,.20) 47%, rgba(255,255,255,.04) 52%, transparent 60%),
    radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.13), transparent 62%);
  background-size: 280% 100%, auto;
  background-position: 150% 0, 0 0;
  background-repeat: no-repeat;
  transition: opacity .18s ease, background-position .62s cubic-bezier(.3,.7,.3,1);
}
.mo-lift--glint:hover::after,
.mo-lift--glint:focus-visible::after{
  opacity: 1;
  background-position: -60% 0, 0 0;
}

/* ---------------------------------------------------------------------------
   Anything still loading breathes, so a wait reads as work rather than as a
   page that has stopped.
   --------------------------------------------------------------------------- */
[data-mo-num]{ transition: color .55s ease; }
.mo-on [class*="loading" i]{ animation: mo-breathe 1.5s ease-in-out infinite; }
@keyframes mo-breathe{ 0%, 100%{ opacity: .5; } 50%{ opacity: 1; } }

/* ---------------------------------------------------------------------------
   Off, entirely, for anyone who asked for it. Nothing here degrades: the
   page is the same page, it simply does not move.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  @view-transition{ navigation: none; }
  .mo-rise{ opacity: 1 !important; translate: none !important; scale: none !important; transition: none !important; }
  .mo-counting{ color: inherit; }
  .mo-lift:hover, .mo-lift:active{ translate: none; }
  .mo-lift--glint::after{ display: none; }
  .mo-seam{ display: none; }
  .mo-on [class*="loading" i]{ animation: none; }
}

/* SEPT 20: travel rule cards show the actual rule as numbered steps */
.tv-org .tv-org__lead.tv-org__lead{ font-family: var(--display, inherit); font-weight: 800 !important; font-size: 1.2rem !important; line-height: 1.4; color: var(--ink) !important; }
.tv-org ol.tv-steps{ list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 8px; }
.tv-org .tv-step{ display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.tv-org .tv-step .tv-step__n{ display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--org, var(--accent)); color: #0d0b1a; font-family: var(--display-big, inherit); font-weight: 900; font-size: 1rem; }
.tv-org .tv-step .tv-step__text.tv-step__text{ font-size: 1.02rem !important; line-height: 1.5; color: var(--ink) !important; font-weight: 500; }