/* Linescore (linescore.js): nine innings and a GAME total; drag across to scrub. */
.ls { position: relative; }
.ls-grid { position: relative; display: grid; grid-template-columns: 44px repeat(9, 1fr) 58px; column-gap: 2px; row-gap: 4px; align-items: center; }
.ls-n { font-size: 11px; font-weight: 700; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.ls-tn { margin-left: 6px; text-transform: uppercase; letter-spacing: .06em; font-size: 10px; }
.ls-lab { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); line-height: 1.1; }
.ls-play { border: 0; background: none; color: var(--ink); font-size: 12px; height: 22px; text-align: left; padding: 0; }
.ls-c { height: 36px; display: grid; place-items: center; font-size: 13px; font-weight: 700; font-stretch: 80%; font-variant-numeric: tabular-nums; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--hair); transition: background-color 200ms; }
.ls-c.on { box-shadow: inset 0 0 0 2px var(--sun); }
.ls-t { margin-left: 6px; border: 0; font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .01em; line-height: 1.05; padding: 0 2px; }
.ls-t.on { box-shadow: inset 0 0 0 2px var(--ink); }
.ls-track { position: absolute; cursor: ew-resize; touch-action: none; border-radius: 3px; }
.ls-track:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }
.ls-mark { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--ink); display: none; pointer-events: none; }
.ls-mark::before { content: ""; position: absolute; top: -4px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }


/* slim: colour only, a thin strip under the numbers (D · Light) */
.ls-slim .ls-grid { grid-template-columns: 22px repeat(9, 1fr) 40px; row-gap: 3px; }
.ls-slim .ls-c { height: 12px; border-radius: 2px; }
.ls-slim .ls-c b { display: none; }
.ls-slim .ls-t { margin-left: 4px; }
.ls-slim .ls-tn { margin-left: 4px; }
.ls-slim .ls-lab { visibility: hidden; } /* keeps its grid column so cells sit under their numbers */
.ls-slim .ls-c.on { box-shadow: inset 0 0 0 1.5px var(--sun); }
.ls-slim .ls-mark { top: 0; bottom: -3px; }
.ls-slim .ls-mark::before { top: auto; bottom: -4px; width: 8px; height: 8px; left: -3px; }

/* small controls get a bigger invisible hit area (WCAG 2.2 target size), without moving the layout */
.ls-play, .ls-t { position: relative; }
.ls-play::after { content: ""; position: absolute; inset: -8px 0 -8px -10px; }
.ls-slim .ls-t::after { content: ""; position: absolute; inset: -14px -6px -10px; }

/* GAME (the whole game) reads as clickable: pointer, a hover outline, and its label clicks too */
.ls-t, .ls-tn { cursor: pointer; }
.ls-t:hover:not(.on) { box-shadow: inset 0 0 0 1.5px var(--muted); }
.ls-tn:hover { color: var(--ink); }
.ls-t:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }