/* D · Light: a night photograph of the bowl. The map is the light; the story below is type on dark. */
:root[data-theme="dark"] {
  --page: #0b0e10; --ink: #ecebe5; --muted: #8b9397; --rule: #23292d; --hair: rgba(236, 235, 229, .09);
  --grass: #121a15; --dirt: #1f1b16; --sun: #ffb43c; --outline: rgba(236, 235, 229, .07); --label-bg: rgba(11, 14, 16, .82);
}
body.light { font-size: 17px; -webkit-font-smoothing: antialiased; }
.lt { max-width: 720px; margin: 0 auto; }

/* sticky: name, game, seat search, the map and the inning rail */
.lt-stick { position: sticky; top: 0; z-index: 2; background: var(--page); }
.lt-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 16px 4px; }
.lt-top .wordmark { font-size: 17px; letter-spacing: -.02em; }
.lt-game select { appearance: none; -webkit-appearance: none; border: 0; background: none; font-weight: 700; font-size: 14px; color: var(--muted); padding: 4px 0; max-width: 100%; text-overflow: ellipsis; }
/* seat search: a real field (the page's main action), 16px so phones don't zoom on focus */
.lt-find { position: relative; display: flex; align-items: center; color: var(--muted); }
.lt-find svg { position: absolute; left: 11px; width: 15px; height: 15px; pointer-events: none; }
/* drawn as a ticket stub: small corners, a notch bitten out of each side, a dashed tear line after the magnifier */
.lt-find input { -webkit-appearance: none; appearance: none; width: 136px; min-height: 40px; border: 1px solid var(--muted); border-radius: 6px; color: var(--ink); padding: 0 12px 0 37px; font: inherit; font-size: 16px; font-weight: 600;
  background: linear-gradient(var(--muted) 55%, transparent 0) 31px 0 / 1px 5px repeat-y; }
.lt-find::before, .lt-find::after { content: ""; position: absolute; top: 50%; z-index: 1; box-sizing: border-box; width: 12px; height: 12px; margin-top: -6px; border: 1px solid var(--muted); border-radius: 50%; background: var(--page); pointer-events: none; }
.lt-find::before { left: -6px; clip-path: inset(0 0 0 50%); }   /* keep only the half inside the ticket: a notch, not a bump */
.lt-find::after { right: -6px; clip-path: inset(0 50% 0 0); }
.lt-find:has(input[aria-invalid="true"])::before, .lt-find:has(input[aria-invalid="true"])::after { border-color: var(--sun); }
.lt-find input::placeholder { color: var(--muted); opacity: 1; }
.lt-find input::-webkit-search-cancel-button { display: none; }
.lt-find input:focus { outline: 2px solid var(--sun); outline-offset: 2px; }
.lt-find input[aria-invalid="true"] { border-color: var(--sun); }
/* what went wrong, right under the field, kept until the next keystroke */
.lt-qerr:empty { display: none; }
.lt-qerr { position: absolute; top: calc(100% + 6px); right: 0; z-index: 5; width: max-content; max-width: 240px; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--page); color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.3; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lt-map { position: relative; height: min(48vh, 480px); touch-action: none; user-select: none; -webkit-user-select: none; }
.lt-compass { position: absolute; right: 8px; top: 2px; pointer-events: none; opacity: .9; }
.lt-back { position: absolute; left: 16px; top: 6px; display: none; border: 1px solid var(--rule); background: var(--label-bg); border-radius: 999px; min-height: 40px; padding: 0 14px; font-weight: 700; font-size: 14px; cursor: pointer; }
.lt-back.on { display: block; }

/* the story */
.lt-story { padding: 0 16px 40vh; }
.lt-ch { min-height: 46vh; padding: 28px 0; display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-content: start; color: var(--muted); transition: color 300ms; }
.lt-ch.on { color: var(--ink); }
.lt-open, .lt-end { display: block; color: var(--ink); min-height: 52vh; }
.lt-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lt-lede { font-size: 24px; line-height: 1.3; font-weight: 500; letter-spacing: -.01em; margin: 10px 0 18px; }
.lt-lede b { font-weight: 800; }
.lt-scale { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font-size: 12px; color: var(--muted); }
.lt-scale i { height: 8px; border-radius: 4px; background: linear-gradient(90deg, #1a242c, #3a3c3d 25%, #7d7b75 50%, #cdc6b6 75%, #f3e6c6); }
.lt-temp { display: flex; gap: 18px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.lt-temp span { display: inline-flex; align-items: center; gap: 6px; }
.lt-temp i { width: 22px; height: 8px; border-radius: 4px; }
.lt-temp .c { background: linear-gradient(90deg, #2c3d4c, #86b2d2); }
.lt-temp .w { background: linear-gradient(90deg, #4a2f1c, #e6893a); }
.lt-hint { margin-top: 26px; font-size: 13px; color: var(--muted); }
.lt-num { margin: 0; font-size: 52px; line-height: .9; font-weight: 800; font-stretch: 70%; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lt-time { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.lt-txt p { margin: 6px 0 0; font-size: 19px; line-height: 1.35; }
.lt-bar { margin-top: 10px; }
.lt-bar span { display: block; font-size: 12px; font-weight: 700; line-height: 1.3; }
.lt-bar > i { display: block; position: relative; height: 6px; margin-top: 4px; background: var(--rule); border-radius: 3px; overflow: hidden; }
.lt-bar > i > i { position: absolute; inset: 0 auto 0 0; background: var(--muted); }
.lt-end p { font-size: 19px; }
.lt-span .lt-num { font-size: 34px; padding-top: 6px; }
.lt-span { min-height: 70vh; }

/* time and the slim linescore, under the map */
.lt-tl { padding: 8px 16px 10px; border-bottom: 1px solid var(--rule); }
.lt-now { display: flex; align-items: baseline; gap: 10px; min-height: 22px; margin-bottom: 4px; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 13px; color: var(--muted); letter-spacing: -.01em; }
.lt-now .c { color: var(--ink); font-weight: 600; font-size: 14px; }
.lt-now .sep { margin: 0 -4px; }
.lt-now b { color: var(--ink); font-weight: 600; }
/* a chapter's words stay pinned just under the map while that stretch of the game plays */
.lt-ch > .lt-num, .lt-ch > .lt-txt { position: sticky; top: var(--pin, 334px); align-self: start; }

/* the whole timeline block scrubs: no text selection, a horizontal cursor; vertical swipes still scroll the page */
.lt-tl { user-select: none; -webkit-user-select: none; cursor: ew-resize; touch-action: pan-y; }
.lt-tl button { cursor: pointer; }

/* colour key: one line over the bottom-left of the map */
.lt-key { position: absolute; left: 8px; bottom: 6px; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; width: max-content; max-width: calc(100% - 16px); padding: 4px 7px; border-radius: 6px; background: var(--label-bg); font-size: 11px; font-weight: 600; pointer-events: none; }
.lt-key span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.lt-key i { width: 11px; height: 11px; border-radius: 2px; box-shadow: 0 0 0 1px var(--rule); }
.lt-key em { font-style: normal; font-weight: 500; color: var(--muted); white-space: nowrap; }

/* reduced motion: state changes snap instead of fading (the map's zoom already snaps, study.js) */
@media (prefers-reduced-motion: reduce) { .lt-ch, .ls-c { transition: none; } }

/* conditions under the opening lede: a guessed start time, the forecast near game day, what it's usually like */
.lt-wx { margin-top: 16px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.lt-wx:empty { display: none; }
.lt-wx p { margin: 0 0 4px; }
.lt-wx b { color: var(--ink); font-weight: 700; margin-right: 6px; }
.lt-wx .lt-wx-note { color: var(--ink); }
.lt-verify { margin-top: 12px; font-size: 13px; color: var(--muted); }
.lt-verify a { color: var(--ink); text-underline-offset: 3px; }
.lt-fail { max-width: 640px; margin: 24px auto; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 10px; font-size: 16px; }
.lt-fail a { color: var(--ink); }
/* the stadium shade guide: plain text at the end of the story (and the whole page before the script runs) */
.lt-guide { padding: 40px 0 8px; border-top: 1px solid var(--rule); margin-top: 24px; }
body.light .lt-guide h2 { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.lt-guide h3 { font-size: 15px; margin: 28px 0 8px; }
.lt-guide table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.35; }
.lt-guide caption { caption-side: top; text-align: left; font-size: 13px; color: var(--muted); padding-bottom: 8px; }
.lt-guide th, .lt-guide td { text-align: left; vertical-align: top; padding: 7px 10px 7px 0; border-top: 1px solid var(--rule); font-weight: 400; }
.lt-guide thead th { border-top: 0; padding-top: 0; font-size: 12px; font-weight: 700; color: var(--muted); }
.lt-guide tbody th { font-weight: 700; white-space: nowrap; }
.lt-guide td b { font-weight: 700; font-variant-numeric: tabular-nums; }
/* game links: day games amber, night games blue (the map's sun and shade); each theme its own shade for ≥4.5:1 */
:root { --day-ink: #b86a00; --night-ink: #3b6e8f; }
:root[data-theme="dark"] { --day-ink: #ffb43c; --night-ink: #86b2d2; }
:root[data-theme="light"] { --day-ink: #7a4000; --night-ink: #2d4c68; }
.lt-guide .g-key { font-size: 13px; margin: 0 0 10px; }
.lt-guide .g-key span { margin-right: 14px; font-weight: 700; }
.lt-guide .g-month { font-size: 14px; line-height: 1.9; margin: 0 0 8px; }
.lt-guide .g-month b { display: inline-block; min-width: 72px; color: var(--muted); font-weight: 700; }
.lt-guide .g-month a { margin-right: 12px; white-space: nowrap; text-decoration: none; }
.lt-guide .g-month a:hover, .lt-guide .g-month a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.lt-guide .g-day { color: var(--day-ink); }
.lt-guide .g-night { color: var(--night-ink); }
.lt-report { display: inline-flex; align-items: center; min-height: 40px; margin: 14px 0 0 14px; font-size: 14px; font-weight: 600; color: var(--muted); text-underline-offset: 3px; }

/* back to top (site, phone): the brand, faded, in the map's top-left once the header has scrolled away */
.lt-home { position: absolute; left: 10px; top: 6px; z-index: 2; display: none; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px 0 8px; border-radius: 999px; background: var(--label-bg); color: var(--ink); font-size: 13px; font-weight: 800; letter-spacing: -.01em; text-decoration: none; opacity: .6; transition: opacity 150ms; }
.lt-home .st-mark { width: 18px; height: 18px; }
.lt-home:hover, .lt-home:focus-visible { opacity: 1; }
.lt-home:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }
body.head-gone .lt-home { display: inline-flex; }
body.head-gone .lt-back { top: 48px; } /* the zoomed-in "← Stadium" sits below it */
@media (min-width: 980px) { body.head-gone .lt-home { display: none; } body.head-gone .lt-back { top: 6px; } } /* wide: the header stays pinned */
@media (prefers-reduced-motion: reduce) { .lt-home { transition: none; } }

/* a seat's game as time: amber sun, blue shade (the map's colours; per-theme inks in the guide block above) */
.lt-seattime { margin: -6px 0 4px; font-size: 18px; line-height: 1.4; color: var(--muted); }
.lt-seattime b { font-weight: 800; font-variant-numeric: tabular-nums; }
.lt-t-sun { color: var(--day-ink); }
.lt-t-shade { color: var(--night-ink); }