/* ======================================== FONT FACES ---------------------------------------- Noto Sans (body) + JetBrains Mono (numbers), latin + latin-ext subsets. Variable axes mean one file covers weights 400→800 (Noto) / 400→600 (JetBrains). Unicode-ranges let the browser skip the larger latin-ext file until an athlete name actually needs accented characters. ======================================== */ @font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/noto-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/noto-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ======================================== DESIGN TOKENS ---------------------------------------- One source of truth. Change a token here → every page updates. Mobile values are the baseline; the @media block at the bottom of this section bumps the type scale on desktop in one place rather than per selector. Spacing/colour/radius/shadow tokens are viewport-invariant. ======================================== */ :root { /* ── Text size follows the reader (27 Sep 2026) ── Every type token is its design size in px times --u, the reader's text scale: 1/16 of the root, which the browser sets from its text-size setting (and iOS from Dynamic Type, below). At default settings every token is exactly its old px value. Each is CAPPED at 1.5x: past that the layouts, not the text, are what break (docs/TODO.md, "Large text"), and browser zoom, which scales everything together, is the way to go bigger. Chart text has its own lower cap: --chart-* below. */ /* x the ☰ menu's Text size (--text-user, set in index.html's first script) */ --u: calc(1rem / 16 * var(--text-user, 1)); /* ── Type scale ──────────────────────── Modular-ish 1.18 ratio. Mobile values; desktop scales below. */ --text-nano: min(calc(8 * var(--u)), 12px); /* the smallest marks: sort arrows, tier tags, forecast leg labels */ --text-micro: min(calc(9 * var(--u)), 13.5px); /* badge eyebrows, leg-num tags */ --text-xs: min(calc(10 * var(--u)), 15px); /* axis ticks, ap-rd, ap-of */ --text-sm: min(calc(11 * var(--u)), 16.5px); /* meta, captions */ --text-base: min(calc(12 * var(--u)), 18px); /* body in compact contexts (cards) */ --text-md: min(calc(13 * var(--u)), 19.5px); /* body, race-row titles */ --text-lg: min(calc(15 * var(--u)), 22.5px); /* section titles in cards */ --text-xl: min(calc(18 * var(--u)), 27px); /* page subhead, athlete name */ --text-2xl: min(calc(22 * var(--u)), 33px); /* stat val */ --text-3xl: min(calc(28 * var(--u)), 42px); /* big stat */ --text-display: min(calc(36 * var(--u)), 54px); /* hero number (h2h score) */ /* Uppercase eyebrow used by every "section title" in the app — distinguishes structural headings from value labels. */ --text-eyebrow: min(calc(10 * var(--u)), 15px); /* iOS Safari zooms the page when a text field under 16px is tapped, so touch-screen text inputs are exactly this, at every width. */ --text-input: max(16px, min(calc(16 * var(--u)), 24px)); /* Chart text: the same design sizes, capped at 1.25x on a phone instead of 1.5x. A phone's charts are fixed geometry in 360px (a podium's boxes, an axis's width, a map's labels) and past ~1.25x their text collides with itself. A desktop has the room, so there they keep up with the page at 1.5x (the desktop block below; her call, 27 Sep 2026). Use these for text drawn INSIDE a chart (SVG), the page tokens for everything around it. */ --chart-text-nano: min(calc(8 * var(--u)), 10px); --chart-text-micro: min(calc(9 * var(--u)), 11.25px); --chart-text-xs: min(calc(10 * var(--u)), 12.5px); --chart-text-sm: min(calc(11 * var(--u)), 13.75px); --chart-text-base: min(calc(12 * var(--u)), 15px); --chart-text-md: min(calc(13 * var(--u)), 16.25px); --chart-text-lg: min(calc(15 * var(--u)), 18.75px); --chart-text-xl: min(calc(18 * var(--u)), 22.5px); --line-tight: 1.25; --line-body: 1.5; /* ── Type family ─────────────────────── Noto Sans for body, JetBrains Mono for any tabular number. */ --font-family: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-black: 800; /* Legacy aliases kept so old rules still work while we migrate. */ /* ── Greys (ink + surface) ────────────── 7-step ink ramp roughly matches Tailwind's slate but named by use. */ /* Underline under a tappable athlete name. Derived from the name's OWN ink so it works on every surface and in dark mode, but held well back: a full-ink underline under every name in a results list striped the page. */ --link-underline: color-mix(in srgb, currentColor 30%, transparent); /* Rim drawn around every flag image. Deliberately a mid grey, not a tinted black: it has to stay visible against a white flag edge on a light surface AND a black flag edge on a dark one. */ --flag-ring: #94a3b8; /* ── Brand + semantic ────────────────── --primary-color and its variants are NOT set here. tokens.css loads last and is the single source for the brand accent; setting a value here would shadow-mismatch the live theme. (This note used to point at saas-theme.css, which was folded into this file, and at CT.bands for the discipline colours, which are now the --seg-* tokens.) */ /* Discipline colours, and the medal trio that used to sit here, are defined in tokens.css — the single source. Both notes above them there. */ /* ── Spacing (px) ────────────────────── Geometric-ish ladder. Existing rem-based --spacing-* kept as aliases. */ --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; --space-5: 10px; --space-6: 12px; --space-7: 14px; --space-8: 16px; --space-10: 20px; --space-12: 24px; --space-16: 32px; --spacing-lg: var(--space-12); /* Radius, shadow and --bg-app are NOT defined here. css/tokens.css defines them and loads last, so a copy in this file is inert. Five of these had silently drifted apart (--radius-lg read 8px here while the app rendered tokens.css's 10px, and all three shadows carried different rgba). Removed 2026-09-03; edit css/tokens.css. */ /* ── Chip primitive ────────────────────── One geometry for every toggle chip in the app (discipline readout, distance filter, country chip, preset chip, gap mode). Padding sized so the chip clears the 28px finger-friendly floor without becoming a button. A chip NARROWS a list; a group of mutually exclusive lenses is a switcher (below), not a row of chips. */ --chip-py: 4px; --chip-px: 10px; --chip-radius: var(--radius-pill); --chip-text: var(--text-sm); --chip-min-h: 28px; /* ── Tab primitive ─────────────────────── Page-level tabs (race tabs, prediction view). Underline-marked, never filled — the fill is the switcher's, and keeping them distinct is what tells you whether a control changes the panel or the whole page. */ --tab-py: var(--space-3); --tab-px: var(--space-5); --tab-gap: var(--space-2); --tab-text: var(--text-md); --tab-min-h: 36px; --tab-ink: var(--text-muted); --tab-on-ink: var(--text); --tab-on-line: var(--accent); /* ── Switcher primitive ────────────────── One geometry for every "pick exactly one lens" control: relay Teams / Athletes + leg filter, summary and profile units, T100 gender, replay Course / Timeline, H2H metric + detail modes, Elite / U23, race-history division / distance / trend. These used to be four different looks (joined rings at two radii, loose pills, an iOS-style padded track) doing the same job — one primitive so a switcher is recognisable wherever it appears. Active is the same neutral dark fill as .chip and .ctrl-pill, which keeps --accent free for the watch-list selection. */ --switch-py: 5px; --switch-px: var(--space-5); --switch-radius: var(--radius-md); --switch-text: var(--text-sm); --switch-min-h: 32px; --switch-bg: var(--surface); --switch-ink: var(--text-muted); --switch-on-bg: var(--text); --switch-on-ink: var(--surface); /* ── Motion ──────────────────────────── */ /* ── Breakpoints ───────────────────────────────────────────────────── Custom properties do not work inside a media query, so this comment is the source of truth and the numbers below are written out by hand. There were five accidental secondary widths (480 / 520 / 540 / 620 / 640); the ladder is four DELIBERATE steps now, each with a stated job: max-width 480px phone — tighten, stack, drop to one column min-width 520px chart step (chart-theme.css only): tick + label type max-width 640px narrow — hide a column, swap long labels for short min-width 769px THE primary boundary; 77 of the file's 91 queries Anything else is drift. Prefer 769px unless the rule is specifically about running out of horizontal room before then. */ --transition-fast: 0.15s ease; --transition-normal: 0.25s ease; /* ── Layout ──────────────────────────── */ --container-max-width: 1400px; } /* Desktop scale-up — bump the whole type ladder at one breakpoint. Spacing, colours, radii intentionally don't change here; if a specific layout needs to widen on desktop it does so in its own @media block. */ @media (min-width: 769px) { :root { --text-nano: min(calc(9 * var(--u)), 13.5px); --text-micro: min(calc(10 * var(--u)), 15px); --text-xs: min(calc(11 * var(--u)), 16.5px); --text-sm: min(calc(12 * var(--u)), 18px); --text-base: min(calc(13 * var(--u)), 19.5px); --text-md: min(calc(15 * var(--u)), 22.5px); --text-lg: min(calc(17 * var(--u)), 25.5px); --text-xl: min(calc(22 * var(--u)), 33px); --text-2xl: min(calc(28 * var(--u)), 42px); --text-3xl: min(calc(34 * var(--u)), 51px); --text-display: min(calc(44 * var(--u)), 66px); --text-eyebrow: min(calc(11 * var(--u)), 16.5px); --chart-text-nano: min(calc(9 * var(--u)), 13.5px); --chart-text-micro: min(calc(10 * var(--u)), 15px); --chart-text-xs: min(calc(11 * var(--u)), 16.5px); --chart-text-sm: min(calc(12 * var(--u)), 18px); --chart-text-base: min(calc(13 * var(--u)), 19.5px); --chart-text-md: min(calc(15 * var(--u)), 22.5px); --chart-text-lg: min(calc(17 * var(--u)), 25.5px); --chart-text-xl: min(calc(22 * var(--u)), 33px); } } /* Larger desktops get a final small bump. */ @media (min-width: 1200px) { :root { --text-lg: min(calc(18 * var(--u)), 27px); --text-xl: min(calc(24 * var(--u)), 36px); --text-2xl: min(calc(30 * var(--u)), 45px); --chart-text-lg: min(calc(18 * var(--u)), 27px); --chart-text-xl: min(calc(24 * var(--u)), 36px); } } /* ======================================== RESET + BODY ======================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { /* Stop iOS Safari auto-inflating font sizes on some blocks (it made long race titles render huge on iPhone, but not in any desktop emulator). */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Anything scrolled into view (standings rows, a share-card's focused row) has to clear the pinned header. One scrollport-level rule beats an offset at every scrollIntoView call site. --header-h is measured in main.js. */ html { scroll-padding-top: var(--header-h, 56px); } /* iPhone and iPad: the root takes the reader's Dynamic Type size (Settings > Display & Brightness > Text Size), whose default body is 17px, so the unit is 1/17 of it and the default renders exactly as before. -webkit-touch-callout exists only on iOS: desktop Safari also knows -apple-system-body, but its body style is 13px, which would shrink everything. body re-sets the family and line height, so only the size is taken from here. */ @supports (font: -apple-system-body) and (-webkit-touch-callout: none) { html { font: -apple-system-body; } :root { --u: calc(1rem / 17 * var(--text-user, 1)); } } body { font-family: var(--font-family); font-size: var(--text-md); line-height: var(--line-body); color: var(--text); min-height: 100vh; padding: var(--space-4); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* folded up from the SaaS layer 2026-09-03 */ background: var(--bg-app); } @media (max-width: 768px) { body { padding: var(--space-2); } } h1 { display: none; } /* Any node that opts into tabular numbers also opts into the mono face — keeps tables (sub-splits, leaderboards, time deltas) aligned cleanly. */ [style*="tabular-nums"], .podium-time, .podium-paces, .ms-sub, .ms-val, .seg-time, .ap-rtot, .podium-stagger, [class*="time-cell"], [class*="pace-cell"] { font-family: var(--font-family-mono); } /* Discipline label tag — colored typography that pairs with chart legends. */ .disc-tag { font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.92em; } /* ======================================== LAYOUT ======================================== */ .container { max-width: var(--container-max-width); margin: 0 auto; background: var(--surface); padding: var(--space-6); /* folded up from the SaaS layer 2026-09-03: the page shell is a hairline border, not a floating card. The --radius-lg that used to sit in the max-width:768 rule below was dead -- this unconditional rule came later and always won -- so mobile was already --radius-xl. */ box-shadow: none; border: 1px solid var(--border); border-radius: var(--radius-xl); } @media (max-width: 768px) { .container { padding: var(--space-3); } } /* Top-level content sections share one centred max-width so on wide monitors header, tabs, and chart content stay aligned in a readable column instead of stretching edge-to-edge. */ #resultsSection, #athleteProfileSection, #raceHistorySection, #predictionSection, #classFormSection { max-width: var(--container-max-width); margin-left: auto; margin-right: auto; } .page-content { padding: var(--space-4); background: var(--surface); border-radius: var(--radius-lg); } @media (max-width: 768px) { .page-content { padding: var(--space-3); } } /* ======================================== LOADING / ERROR ======================================== */ .loading { display: none; text-align: center; padding: var(--spacing-lg); } .loading.active { display: block; } .spinner { border: 4px solid var(--surface-tint); border-top: 4px solid var(--accent); border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 0 auto; } @keyframes spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } .error-message { color: var(--danger); margin-top: var(--space-5); padding: var(--space-5); background: var(--danger-bg); border-radius: var(--radius-lg); display: none; font-size: var(--text-md); } /* ======================================== SHARED PRIMITIVES ---------------------------------------- Reused across athlete-profile, race-history, head-to-head, summary. Namespace classes below (.ap-*, .rh-*, .h2h-*) inherit these via token references so they all look like the same component family. ======================================== */ /* ── Athlete name → profile: the app-wide name cue ── One rule for every name that opens a profile, wherever it renders (see js/ui/athlete-link.js). A thin SOLID underline reads as a link; a dotted one read like an tooltip cue. The name keeps its surrounding ink, weight and size rather than turning into a coloured link, so a results table still reads as a table. The counterpart rule is the absence of this class: a name that is a selection control (rank-chart labels, splits-table rows) carries no underline, because tapping it watches the athlete rather than navigating. It is an INLINE span, never a button: a button is an atomic inline box, so any cell that truncates its own text (the standings name column, the spider name cell) would swallow the whole name into a bare "…". See js/ui/athlete-link.js. */ .athlete-link { color: inherit; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: currentColor; /* fallback */ text-decoration-color: var(--link-underline); } .athlete-link:hover { color: var(--accent); } .athlete-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } /* SVG chart labels opt into the same cue directly. */ text.athlete-link { cursor: pointer; text-decoration: underline; text-decoration-color: var(--link-underline); } /* Section card: a panel grouping related content. Composes .card for the surface (--surface + 1px --border + --radius-lg) and keeps only its own box metrics. Folding the SaaS layer up on 2026-09-03 showed that base+override together WERE exactly the card triple, split across two rules 3,500 lines apart -- which is why no counter had ever seen it. */ .ap-section { margin-bottom: var(--space-7); padding: var(--space-5); } @media (min-width: 769px) { .ap-section { padding: var(--space-8); } } /* ── Section title (eyebrow + optional sub) ── */ .ap-section-title, .summary-section-title, .settings-section-title { font-size: var(--text-eyebrow); font-weight: var(--font-weight-bold); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--space-4); display: flex; align-items: center; gap: var(--space-3); } @media (min-width: 769px) { .ap-section-title, .summary-section-title, .settings-section-title { font-size: var(--text-sm); } } /* ── Chart host inside a section card ── */ .ap-chart-host, .xo-chart-host { background: var(--surface); border-radius: var(--radius-md); padding: var(--space-2); border: 1px solid var(--border-soft); overflow: hidden; } .ap-chart-host svg, .xo-chart-host svg { display: block; max-width: 100%; } /* #apSegmentChart is filled after an async fetch (ability tracks wait on getAbility()). Empty it is ~10px tall and full it is ~545px, so everything below it — Best at each tier, Race history — jumped half a screen once the data landed, which is why it was reported as a layout-shift source. Reserve a lane stack's worth for the duration of the await; the reservation is released the moment content arrives. Sized to the common 3-lane, non-split stack, so the usual case settles within a few px. ONLY .ap-chart-host: this host always ends up filled (the no-data path writes .ap-empty into it). #xoTimeline is a .xo-chart-host that legitimately stays empty when an athlete has no crossover, and reserving there would leave a permanent blank box. */ .ap-chart-host:empty { min-height: 540px; } @media (min-width: 769px) { .ap-chart-host:empty { min-height: 640px; } } /* ── Empty state ── */ .ap-empty, .spider-empty { padding: var(--space-10); text-align: center; color: var(--text-faint); font-size: var(--text-base); } @media (min-width: 769px) { .ap-empty, .spider-empty { font-size: var(--text-md); } } /* ── Back control — ONE canonical style, used app-wide (.btn-back) ── */ .btn-back { background: transparent; border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-5); font-size: var(--text-base); color: var(--text-muted); cursor: pointer; margin-bottom: var(--space-5); transition: background var(--transition-fast), border-color var(--transition-fast); } .btn-back:hover { background: var(--surface-tint); border-color: var(--text-faint); } /* One Back on screen, never two. The pinned header carries it whenever the nav stack has somewhere to go, so a view's own control sits a few pixels under an identical one; it stands down there. Set from _updateBackAffordances(). .ab-back is exempt: it steps between panes INSIDE the athlete browser, which is not the journey the header button walks. */ :root.nav-has-back .btn-back:not(.ab-back) { display: none; } /* ── Pill: outlined chip used for tags, filters, status ── */ .ap-pos, .cond-chip, .rh-leg, .ap-legend-chip, .rh-rec-year { font-variant-numeric: tabular-nums; } /* ======================================== APP HEADER ======================================== */ .app-header { /* Pinned. Every global affordance lives in here (brand -> home, the WT / NCAA / Athlete browsers, the breadcrumb), and a profile runs to ~8700px on a phone, so a static header meant no navigation on screen at all after the first swipe. Session traces showed people walking Back to the landing just to reach the search they already knew about. */ position: sticky; top: 0; z-index: var(--z-header); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); /* Brand + the ⓘ/☰ control pair anchor the top line; the data-source (browse buttons + breadcrumb) wraps within its own column between them rather than pushing the pair onto a second row. The pair lives in .app-menu-wrap and sits flush in the top-right corner, so no right pad is reserved. */ padding: var(--space-3) 0; flex-wrap: nowrap; margin-bottom: var(--space-2); max-width: var(--container-max-width); margin-left: auto; margin-right: auto; width: 100%; } /* The pinned bar needs an opaque ground that reaches the shell's edges, or content scrolls visibly through the container's padding gutter beside and above it. A pseudo-element does the bleed so the header's own box model (and its centred max-width) stays untouched. z-index:-1 keeps it behind the header's own children while the whole stacking context still sits at --z-header, above the page. */ .app-header::before { content: ''; position: absolute; top: calc(-1 * var(--space-6)); bottom: 0; left: calc(-1 * var(--space-6)); right: calc(-1 * var(--space-6)); z-index: -1; pointer-events: none; background: var(--surface); border-bottom: 1px solid transparent; transition: border-color var(--transition-fast); } /* Hairline only once it's actually pinned — at rest the header should still read as part of the page, not as a toolbar bolted to it. */ .app-header.is-pinned::before { border-bottom-color: var(--border); } @media (max-width: 768px) { .app-header::before { top: calc(-1 * var(--space-3)); left: calc(-1 * var(--space-3)); right: calc(-1 * var(--space-3)); } } .app-brand { font-size: var(--text-lg); color: var(--text-2); white-space: nowrap; display: inline-flex; align-items: center; gap: 0.38em; /* folded up from the SaaS layer 2026-09-03 */ font-weight: 700; letter-spacing: -0.01em; } .app-brand-mark { height: 0.92em; width: auto; flex: 0 0 auto; } @media (min-width: 769px) { .app-brand { font-size: var(--text-xl); } } @media (min-width: 1200px) { .app-brand { font-size: var(--text-2xl); } } .app-data-source { display: flex; align-items: center; flex-wrap: wrap; font-size: var(--text-sm); /* folded up from the SaaS layer 2026-09-03 */ gap: var(--space-3); } .app-header.has-data .app-data-source { font-size: var(--text-xs); } @media (min-width: 769px) { .app-data-source { font-size: var(--text-md); } .app-header.has-data .app-data-source { font-size: var(--text-sm); } } /* ── App menu (☰): always-accessible home for app-level prefs (theme, units) and the CSV utility. Race-specific config stays in the Setup tab. ── */ /* The ⓘ help + ☰ menu form one aligned control pair, flush top-right. The ☰ stays put whether or not the ⓘ is showing (it's per-tab), so the corner anchor never shifts. */ .app-menu-wrap { position: relative; margin-left: auto; flex: 0 0 auto; margin-top: var(--space-1); display: inline-flex; align-items: center; gap: var(--space-2); } .app-menu-btn { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 28px; height: 28px; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--text-2); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } .app-menu-btn:hover { background: var(--surface-hover); border-color: var(--text-faint); color: var(--text); } .app-menu-btn[aria-expanded="true"] { background: var(--surface-hover); border-color: var(--accent); color: var(--accent); } .app-menu { position: absolute; top: calc(100% + var(--space-2)); right: 0; z-index: var(--z-menu); min-width: 244px; max-width: min(300px, calc(100vw - 24px)); background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); } .app-menu[hidden] { display: none; } .app-menu-sec { display: flex; flex-direction: column; gap: var(--space-3); } .app-menu-sec + .app-menu-sec { border-top: 1px solid var(--border-soft); padding-top: var(--space-4); } .app-menu-title { font-size: var(--text-xs); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); } .app-menu-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .app-menu-label { font-size: var(--text-sm); color: var(--text-2); font-weight: var(--font-weight-medium); } .app-menu-item { display: block; padding: var(--space-3) var(--space-4); color: var(--text-2); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); cursor: pointer; text-align: center; } .app-menu-item:hover { background: var(--surface-hover); border-color: var(--text-faint); } button.app-menu-item { width: 100%; font-family: inherit; } /* .app-menu-sec is display:flex, which beats the hidden attribute's UA rule: the Browse section showed with the header's own buttons still on screen. */ .app-menu-sec[hidden] { display: none; } .app-menu-sec[hidden] + .app-menu-sec { border-top: 0; padding-top: 0; } /* Large text: the header's browse buttons would wrap, so they live in the ☰ menu's Browse section instead (main.js _setupStickyHeader). Back stays. */ .app-header.hdr-compact #dataSourceArea > .header-btn:not(.header-btn--back), .app-header.hdr-compact .header-sep { display: none; } .app-menu-sub { background: none; border: none; padding: 0; cursor: pointer; font-size: var(--text-xs); color: var(--accent); text-align: left; font-weight: var(--font-weight-medium); } .app-menu-sub:hover { text-decoration: underline; } /* Quiet surface button: the bg/border/color/weight live in the shared .header-btn group below; the accent-filled modal-footer variant lives at .src-modal-foot .header-btn. Base = geometry only. */ .header-btn { padding: var(--space-2) var(--space-5); border-radius: var(--radius-md); font-size: var(--text-sm); cursor: pointer; transition: background var(--transition-fast); } .header-btn:disabled { opacity: 0.4; cursor: default; } /* Back sits with the source buttons rather than in the page, so the nav stack stays reachable from anywhere in a long view — and in the installed PWA, where there is no browser Back at all, from anywhere full stop. */ .header-btn--back { padding: var(--space-2) var(--space-6); font-weight: var(--font-weight-bold); line-height: 1; } /* Back is added to the header only once the nav stack has depth, i.e. AFTER the race has loaded. Toggling it with `display` changed how many rows .app-data-source wrapped onto, which changed the height of a POSITION:STICKY bar, which moved the whole page under it — #dataSourceArea was the app's top reported layout-shift source. Reserving the slot from the start costs a hidden 29px box (invisible at >=360px, where nothing wrapped either way) and makes the header's height constant across the load. JS owns .is-hidden here, NOT `display`, so the box is always in flow. */ .header-btn--back.is-hidden { visibility: hidden; pointer-events: none; } .app-header .header-btn { position: relative; } /* ── Tap areas: 44px on a phone, without making the control bigger ── A small control keeps its look and gets an invisible area centred on it (min(0, 50% - 22px) grows a side only while the box is under 44). ONE list, so the rule is one place to read and to extend. An area only ever grows into EMPTY space: two areas that overlap send a tap to whichever sits on top, which is a worse bug than a small target. tests/tap-targets.spec.js measures what a tap actually hits, overlaps included. Full 44x44 where there is room around the control: */ .cs-clear::after { content: ''; position: absolute; top: min(0px, calc(50% - 22px)); bottom: min(0px, calc(50% - 22px)); left: min(0px, calc(50% - 22px)); right: min(0px, calc(50% - 22px)); } /* The pinned header: 44px TALL, and only as wide as the gaps allow. At 375px the brand and six controls need ~365px at 44 wide each and the row has ~353, so full width would wrap the pinned bar (doubling it over every page) or overlap the areas. Height is free: nothing sits above or below them. The ⓘ/☰ pair split the 2px gap between them rather than each reaching across it (each used to take -6px all round, so ☰ won taps aimed at ⓘ's edge). */ .app-header .header-btn::after, .app-menu-btn::after, .app-info-btn::after { content: ''; position: absolute; top: min(0px, calc(50% - 22px)); bottom: min(0px, calc(50% - 22px)); left: 0; right: 0; } .app-menu-btn::after { left: -1px; } .app-info-btn::after { right: -1px; } /* ── The phone sweep (26 Sep 2026): every control on every surface ── Measured on 26 surfaces by the audit behind tests/tap-targets.spec.js. Three kinds of fix, in this order of preference: 1. an invisible area, the control keeps its look; 2. a visible 44px only for FORM FIELDS (and 16px text in them: below that iOS Safari zooms the whole page when one is tapped); 3. names and race links inside tables and lists are EXEMPT and keep their row: 44px rows there doubled a table's length and read as a big visual change (the forecast's Next 10, rejected 26 Sep). Where such a row has one target the whole row is its area instead. */ @media (max-width: 768px) { /* 1a. Full 44x44 where the control stands clear of its neighbours. */ .sc-close, .src-modal-close, .adjust-reset, .ap-fav-btn, .ap-map-link, .share-btn, .sc-style-prev, .sc-style-next, .btn-back, .privacy-note > summary { position: relative; } .sc-close::after, .src-modal-close::after, .adjust-reset::after, .ap-fav-btn::after, .ap-map-link::after, .share-btn::after, .sc-style-prev::after, .sc-style-next::after, .btn-back::after, .privacy-note > summary::after { content: ''; position: absolute; top: min(0px, calc(50% - 22px)); bottom: min(0px, calc(50% - 22px)); left: min(0px, calc(50% - 22px)); right: min(0px, calc(50% - 22px)); } /* 1b. Height only: controls that sit shoulder to shoulder in a row (pills, chips, checkboxes, the joined switcher segments), whose sideways areas would overlap the next one. */ .ctrl-check, .ctrl-pill, .filter-options-btn, a.chip, button.chip, .share-cta, .sc-ghost, .sc-primary, .landing-primary, .app-menu-sub, .ap-relay-tog, .t100-scoring-summary, .src-modal-title-link, .para-class-open, .rh-sub .np-race-link, .switcher-btn, .np-show-all, .src-modal-foot .header-btn, .sc-modes button, .lf-race-gender { position: relative; } .ctrl-check::after, .ctrl-pill::after, .filter-options-btn::after, a.chip::after, button.chip::after, .share-cta::after, .sc-ghost::after, .sc-primary::after, .landing-primary::after, .app-menu-sub::after, .ap-relay-tog::after, .t100-scoring-summary::after, .src-modal-title-link::after, .para-class-open::after, .rh-sub .np-race-link::after, .switcher-btn::after, .np-show-all::after, .src-modal-foot .header-btn::after, .sc-modes button::after, .lf-race-gender::after, .header-file-name.clickable::before { content: ''; position: absolute; left: 0; right: 0; top: min(0px, calc(50% - 22px)); bottom: min(0px, calc(50% - 22px)); } /* A checkbox label's area must not sit OVER its own box: the box is lifted above it, so a tap on the box hits the box and anywhere else on the label still toggles it. */ .ctrl-check > input, .ap-relay-tog > input { position: relative; z-index: 1; } /* A switcher clipped its segments to its rounded ring (overflow: hidden), which clipped their areas too. The ring's corners go on the end segments instead, so each segment's area can reach above and below. */ /* :not() lifts it over the base .switcher rule further down the file; the --scroll variant must keep scrolling, so it keeps its clip. */ .switcher:not(.switcher--scroll) { overflow: visible; } .switcher-btn:first-child { border-radius: calc(var(--switch-radius) - 1px) 0 0 calc(var(--switch-radius) - 1px); } .switcher-btn:last-child { border-radius: 0 calc(var(--switch-radius) - 1px) calc(var(--switch-radius) - 1px) 0; } .switcher-btn:only-child { border-radius: calc(var(--switch-radius) - 1px); } /* The ⚙ Options row scrolls sideways, and a scroller clips; alone in it, Options needs no scrolling, so its row stops clipping it. */ .filter-chip-row:not(:has(> :not(.filter-options-btn, .share-slot))) { overflow: visible; } .h2h-detail-close { position: relative; } .h2h-detail-close::after { content: ''; position: absolute; top: min(0px, calc(50% - 22px)); bottom: min(0px, calc(50% - 22px)); left: min(0px, calc(50% - 22px)); right: min(0px, calc(50% - 22px)); } .tab-btn { min-height: 44px; } /* The share sheet's layout arrows flank the dots; 44 wide, same glyph. */ .sc-style-prev, .sc-style-next { min-width: 44px; min-height: 44px; } /* A modal's close sat in a 42px head, which cut its area short. */ .src-modal-head { min-height: 44px; } /* Rows of controls closer than 44 centre to centre cut each other's areas short, so these open up by a few px: the ☰ menu's Theme/Units rows, the watch strip over the ⚙ Options row, a standings page's venue chip over its gender switcher. */ .app-menu-sec { gap: var(--space-5); } /* The watch strip's chip areas reach 3px below it; 4px more space under it keeps the Options row's area whole. */ .chip-strip { margin-bottom: var(--space-4); } /* The filter row sits in a clipping chart container: 3px more above it (the sweep had 6) is what its Options button's area needs. */ div.inline-filters { padding-top: calc(var(--space-2) + 3px); } .t100-venue-link { margin-bottom: var(--space-3); } /* div. lifts it over the base .inline-filters rule further down. */ /* The race title's ::after is its "›", so its area is ::before. */ .header-file-name.clickable { position: relative; } /* The landing's race pills stay 32 and reach 44 invisibly (the list above); a round dropdown's select is the 44 over its pill. A relay row wraps under the genders, so the rows sit 44 apart centre to centre. */ .lf-race-slot .lf-race-round { height: 44px; } div.lf-race-genders { row-gap: var(--space-6); } /* 27 Sep 2026, her call: the LOOK from before this sweep wins. Visible 44s came back out (tab and segment widths, scrolling switchers, the watch strip, form fields); what could stay invisible stayed. The controls left under 44 are listed in tests/tap-targets.spec.js EXEMPT. */ /* Sliders: the track stays 6px and the input grows to the 44px row. The forecast's rows are 42px apart track to track, so the row gap opens 2px and the areas meet without overlapping. */ .adjust-range { height: 44px; margin: -14px 0; } .adjust { row-gap: calc(var(--space-5) + 2px); } } /* Phone: the pinned row has to stay ONE row — wrapping doubles its height, which is the whole thing we're buying back. Adding Back put the race view over at 375px (the race view also shows the ⓘ, which the landing hides), so the gaps and Back's own padding tighten below 430px. Verified one row at 360 / 375 / 390 / 414 / 430 / 768. 320px still wraps to two, and wrapping is the right degradation there. NOTE the doubled .app-header and the descendant selector: the redesign section near the end of this file re-sets .app-data-source's gap at equal specificity, so bare selectors here lose on source order. */ @media (max-width: 430px) { .app-header.app-header { gap: var(--space-2); } .app-header .app-data-source { gap: var(--space-2); } .header-btn--back { padding: var(--space-2) var(--space-4); } .app-menu-wrap { gap: var(--space-1); } } @media (min-width: 769px) { .header-btn { font-size: var(--text-md); padding: var(--space-3) var(--space-7); } } .header-sep { color: var(--text-faint); font-size: var(--text-xs); } @media (min-width: 769px) { .header-sep { font-size: var(--text-md); } } /* Lives at the top of the race view now, not in the pinned header — a race title wrapped to two lines there cost 26px of every screen for the whole scroll. It keeps its id and classes: several call sites read #fileName.textContent as the race label. */ .race-title-bar { display: flex; margin-bottom: var(--space-4); } .header-file-name { font-size: var(--text-sm); color: var(--text-muted); } @media (min-width: 769px) { .header-file-name { font-size: var(--text-md); } } /* When the loaded race has a history bucket, the filename becomes the entry point: link-styled (dotted underline), accent colour, pointer cursor. */ .header-file-name.clickable { cursor: pointer; color: var(--accent-ink); font-weight: var(--font-weight-semibold); padding: var(--space-1) var(--space-3); border-radius: var(--radius-md); text-decoration: underline dotted; text-underline-offset: 3px; transition: background var(--transition-fast), color var(--transition-fast); } /* NBSP, not a plain space: on its own title line a long race name wraps, and a breaking space stranded the chevron alone on line two. */ .header-file-name.clickable::after { content: '\00a0›'; font-weight: 700; text-decoration: none; } .header-file-name.clickable:hover, .header-file-name.clickable:focus { background: var(--accent-subtle); color: var(--accent-hover); outline: none; } .header-file-name.clickable:focus-visible { box-shadow: 0 0 0 2px var(--focus-ring); } /* ── Race-tier binding ──────────────────────────────────────────────────── One class per tier, binding an element to that tier's tokens. This exists because a resolved colour copied into a JS record freezes at whatever theme it was built under: the profile's tier chips kept their light-mode ink in dark, and re-rendering could not fix it because the record still held the old hex. main.js says it plainly next to setupThemeRedraw — "colours that CAN live in CSS should, and then they need none of this". --tier-c the hue, for a tint or a swatch --tier-i the ink, for text and dots on the app surface Both follow the theme with no repaint at all. */ .tier-olympics { --tier-c: var(--tier-olympics); --tier-i: var(--tier-olympics-ink); } .tier-world-champs { --tier-c: var(--tier-world-champs); --tier-i: var(--tier-world-champs-ink); } .tier-wtcs-final { --tier-c: var(--tier-wtcs-final); --tier-i: var(--tier-wtcs-final-ink); } .tier-wtcs { --tier-c: var(--tier-wtcs); --tier-i: var(--tier-wtcs-ink); } .tier-t100 { --tier-c: var(--tier-t100); --tier-i: var(--tier-t100-ink); } .tier-world-cup { --tier-c: var(--tier-world-cup); --tier-i: var(--tier-world-cup-ink); } .tier-olympic-qual { --tier-c: var(--tier-olympic-qual); --tier-i: var(--tier-olympic-qual-ink); } .tier-conti-champs { --tier-c: var(--tier-conti-champs); --tier-i: var(--tier-conti-champs-ink); } .tier-conti-cup { --tier-c: var(--tier-conti-cup); --tier-i: var(--tier-conti-cup-ink); } .tier-multisport { --tier-c: var(--tier-multisport); --tier-i: var(--tier-multisport-ink); } .tier-regional-champs { --tier-c: var(--tier-regional-champs); --tier-i: var(--tier-regional-champs-ink); } .tier-games { --tier-c: var(--tier-games); --tier-i: var(--tier-games-ink); } .tier-junior-u23 { --tier-c: var(--tier-junior-u23); --tier-i: var(--tier-junior-u23-ink); } .tier-para-series { --tier-c: var(--tier-para-series); --tier-i: var(--tier-para-series-ink); } .tier-para-cup { --tier-c: var(--tier-para-cup); --tier-i: var(--tier-para-cup-ink); } .tier-para-conti-cup { --tier-c: var(--tier-para-conti-cup); --tier-i: var(--tier-para-conti-cup-ink); } .tier-ncaa-nationals { --tier-c: var(--tier-ncaa-nationals); --tier-i: var(--tier-ncaa-nationals-ink); } .tier-ncaa-regionals { --tier-c: var(--tier-ncaa-regionals); --tier-i: var(--tier-ncaa-regionals-ink); } .tier-ncaa-cup { --tier-c: var(--tier-ncaa-cup); --tier-i: var(--tier-ncaa-cup-ink); } .tier-other { --tier-c: var(--tier-other); --tier-i: var(--tier-other-ink); } /* Marks that carry a tier: the dot in the career-arc legend, and the dots and rung labels drawn into SVG. */ .tier-dot { background: var(--tier-i); } .tier-fill { fill: var(--tier-i); } .tier-stroke { stroke: var(--tier-i); } /* ── Icon button: ONE box for every square/circular glyph control ────────── These were three independent definitions — a 22px ghost circle, a 28px bordered square and a 30px bordered square — so the same affordance read differently depending on which screen you were on. The geometry lives here once; an instance sets only what makes it itself, via the two custom properties. Bare glyph buttons (no box at all) are the group below. */ .btn--icon, .share-btn, .h2h-detail-close { display: inline-flex; align-items: center; justify-content: center; width: var(--icon-btn-size); height: var(--icon-btn-size); padding: 0; flex-shrink: 0; border: 1px solid transparent; border-radius: var(--icon-btn-radius); background: transparent; color: var(--text-faint); font-size: var(--text-sm); line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } .btn--icon { --icon-btn-size: 22px; --icon-btn-radius: 50%; } .btn--icon:hover, .h2h-detail-close:hover { background: var(--surface-hover); color: var(--text-2); } /* ── Bare glyph button: a control with no box, only the mark ────────────── Three of these existed independently (modal dismiss, share-sheet dismiss, remove-from-comparison). Size, placement and hover intent differ; nothing else does. */ .src-modal-close, .sc-close, .spider-remove-btn, .spider-expand-btn { background: none; border: 0; padding: 0; line-height: 1; cursor: pointer; color: var(--text-muted); transition: background var(--transition-fast), color var(--transition-fast); } /* ── CSV-format help (ⓘ next to "Upload CSV") ── */ .csv-help-tip { position: fixed; z-index: var(--z-tooltip); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); padding: var(--space-6) var(--space-7); max-width: 380px; font-size: var(--text-base); color: var(--text-2); } .csv-help-title { font-weight: var(--font-weight-bold); font-size: var(--text-md); color: var(--text-2); margin-bottom: var(--space-3); } .csv-help-body p { margin: var(--space-3) 0; } .csv-help-body code { font-family: var(--font-family-mono); font-size: var(--text-sm); background: var(--surface-tint); padding: 1px var(--space-2); border-radius: var(--radius-sm); } .csv-help-body ul { margin: var(--space-3) 0 0 18px; padding: 0; } .csv-help-body li { margin: var(--space-2) 0; } .csv-help-note { color: var(--text-muted); } /* ── App-level info button: the ⓘ half of the top-right control pair, sat just left of the ☰ menu inside .app-menu-wrap (not fixed) ── */ .app-info-btn { position: relative; width: 28px; height: 28px; font-size: var(--text-md); } .app-info-btn:hover { border-color: var(--text-faint); } .app-info-btn.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .app-info-tip { position: fixed; z-index: var(--z-tooltip); background: var(--surface-inverse); color: var(--on-surface-inverse); padding: var(--space-6) var(--space-7); border-radius: var(--radius-lg); font-size: var(--text-base); line-height: 1.6; max-width: 320px; min-width: 220px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); max-height: 80vh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .app-info-tip strong { color: var(--warning); display: block; margin-bottom: var(--space-2); } .app-info-tip ul { margin: var(--space-2) 0 0; padding-left: var(--space-8); } .app-info-tip li { margin-bottom: var(--space-2); } @media (min-width: 769px) { .app-info-tip { font-size: var(--text-md); max-width: 380px; } } /* ======================================== TAB NAVIGATION ======================================== `.tab-btn` is the PAGE-LEVEL tab: it switches the whole panel below it and there is at most one bar of them on screen (the race tabs, the prediction view's `.pvx-tabs`). Underline-marked, no fill — deliberately a different shape from `.switcher`, which picks a lens WITHIN one panel. Don't reach for `.tab-btn` for an in-panel toggle; that's what `.switcher` is for. */ .tab-navigation { display: flex; gap: var(--tab-gap); border-bottom: 1px solid var(--border); padding: 0; margin-bottom: var(--space-3); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .tab-navigation::-webkit-scrollbar { display: none; } .tab-btn { flex-shrink: 0; padding: var(--tab-py) var(--tab-px); background: transparent; color: var(--tab-ink); border: none; border-radius: 0; border-bottom: 2px solid transparent; cursor: pointer; font-family: inherit; font-size: var(--tab-text); font-weight: var(--font-weight-medium); transition: color var(--transition-fast), border-color var(--transition-fast); white-space: nowrap; -webkit-tap-highlight-color: transparent; min-height: var(--tab-min-h); } .tab-btn:hover { background: transparent; color: var(--text-2); } .tab-btn.active { background: transparent; color: var(--tab-on-ink); font-weight: var(--font-weight-semibold); border-bottom-color: var(--tab-on-line); } /* Tabs gated by state (e.g. Head-to-Head needs exactly 2 athletes selected). */ .tab-btn.hidden { display: none; } /* A gated tab appears MID-SESSION, in a bar that scrolls on a phone — so it can arrive off-screen, or on-screen and simply unnoticed. Three indigo pulses say "this is new" without moving anything or stealing the tap. Applied by _revealTab in js/main.js and removed when the animation ends, so it re-fires every time the tab comes back. */ .tab-btn--flash { animation: tab-flash 1.2s ease-in-out 1; border-radius: var(--radius-sm); } /* The whole tab fills, rather than just the label changing colour — a filled block is what catches the eye in peripheral vision on a phone. The label flips to --on-accent so it stays readable at the peak. ONE pulse: it announces the tab without turning into a blinking thing beside the content. */ @keyframes tab-flash { 0%, 100% { background: transparent; color: var(--tab-ink); } 22%, 55% { background: var(--accent); color: var(--on-accent); } } @media (prefers-reduced-motion: reduce) { /* Still say it, just don't blink: hold the filled state. */ .tab-btn--flash { animation: none; background: var(--accent); color: var(--on-accent); } } @media (min-width: 769px) { .tab-btn { font-size: var(--text-lg); padding: var(--space-5) var(--space-10); min-height: 42px; } } @media (max-width: 480px) { /* Tighten so the 7-tab bar fits a 390px viewport without crowding the edge; the 8th (Head-to-Head) tab still scrolls, with trailing room to hint it. */ .tab-navigation { gap: 1px; padding-right: var(--space-3); scroll-padding-right: var(--space-3); } .tab-btn { padding: var(--space-2); font-size: var(--text-sm); min-height: 44px; } } /* ======================================== CHART SECTIONS ======================================== */ .chart-section { display: none; } .chart-section.active { display: block; } .chart-container { margin: var(--space-2) 0; padding: var(--space-3); background: var(--surface-tint); border-radius: var(--radius-lg); display: none; width: 100%; overflow: hidden; } .chart-container.active { display: block; } .chart-container svg { display: block; margin: 0 auto; max-width: 100%; height: auto; } .chart-title { font-size: var(--text-md); color: var(--text); padding: var(--space-3) var(--space-5); text-align: center; font-weight: var(--font-weight-semibold); background: var(--surface); border-bottom: 1px solid var(--border); } @media (min-width: 769px) { .chart-title { font-size: var(--text-xl); padding: var(--space-4) var(--space-6); } } @media (min-width: 1200px) { .chart-title { font-size: var(--text-2xl); } } @media (max-width: 768px) { .chart-title { display: none; } .chart-container { padding: var(--space-1); margin: 0; } } /* Rank chart owns its scroll container — let it overflow its parent. */ #rankChart svg { max-width: none !important; } #rankChart .scroll-container { -webkit-overflow-scrolling: touch; } #rankChart foreignObject div { font-family: var(--font-family); } /* SVG chart primitives (.axis, .grid, .athlete-…, .radar-…, spotlight) live in chart-theme.css — the single source. Don't re-add them here. NB: never write a comment-closer inside a comment. A CSS comment ends at the FIRST one, so the old wording (which spelled out .athlete-) closed here and silently swallowed the .sel-dot rule below. */ .sel-dot { transition: background var(--transition-fast); } /* ======================================== TOOLTIP ======================================== */ .tooltip { position: absolute; text-align: left; padding: var(--space-5); font-size: var(--text-xs); background: var(--scrim-tooltip); color: var(--on-surface-inverse); border-radius: var(--radius-md); pointer-events: none; opacity: 0; transition: opacity var(--transition-normal); z-index: var(--z-tooltip); max-width: 250px; } /* Set by TooltipManager's `center` option — a label hanging over a scatter point reads centred; one beside a table row does not. */ .tooltip-center { text-align: center; } @media (min-width: 769px) { .tooltip { font-size: var(--text-md); padding: var(--space-6) var(--space-7); max-width: 320px; } } @media (max-width: 768px) { .tooltip { position: fixed !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.15); } } /* ======================================== GENERIC BUTTON ======================================== */ .btn { padding: var(--space-3) var(--space-5); color: white; border: none; cursor: pointer; font-size: var(--text-md); transition: all var(--transition-normal); /* folded up from the SaaS layer 2026-09-03 */ background: var(--accent); border-radius: var(--radius-md); font-weight: 600; } .btn:hover { background: var(--accent-hover); } /* Start-list → prediction CTA: shared .btn appearance, full-width block. */ .ap-sl-pred-cta { display: block; width: 100%; margin-top: var(--space-8); font-weight: var(--font-weight-bold); } /* The full-width save on a phone is the lg button (SYSTEM.md 6.2: 44); at the .btn default this one was ~26px, the "shallow" button at the foot of a start list (26 Sep 2026). */ @media (max-width: 768px) { .ap-sl-pred-cta { min-height: 44px; } } /* ======================================== SHARED CONTAINERS — the card primitive ======================================== */ /* One source for every bordered surface in the app. Before this existed, each feature grew its own (.rh-dd-card, .h2h-chart-card, .t100-drill-card, .filter-options-panel, ...): the SAME three declarations written eight times over. That is how two of them drifted to --radius-md while the other six sat at --radius-lg, and how one concept ended up carrying four different paddings. Nobody chose that; it is what happens when eight authors each pick plausibly. The token ratchet never caught it because every value WAS a good token -- the duplication was the bug, not the values. THE MIGRATION IS FINISHED (2026-09-03). It landed in two halves, and the first half on its own was a trap: the surfaces were converged onto one rule by listing every feature class as an ALIAS of `.card`. That removed the duplication but left nine names for one concept, and the markup still said `.h2h-chart-card` rather than `.card`, so nothing on screen announced that these were the same thing. A reader could not tell a real surface from a bespoke one, and the surface-budget counter could not either: it counts rules that RE-DERIVE the triple, and an alias re-derives nothing. Now the JS composes the primitive directly -- `class="card card--clip ..."` -- and a feature class survives only where it carries something genuinely its own (a grid, a min-width, its own padding). `.h2h-detail-card`, `.t100-drill-card` and `.lv-card` had nothing of their own and are gone. A new panel composes `.card` and adds ONLY what is genuinely different about it. tests/style-surface-budget.spec.js counts bespoke container classes and fails on a new one, so this cannot silently re-accrete. design/SYSTEM.md principle 2 -- borders define surfaces, shadows mean "floats" -- so the base card is elevation 0 and every shadow is opt-in. */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); } /* The traits. Each has TWO OR MORE call sites, which is the bar this file sets for having a modifier at all. A trait with one user stays a feature rule -- see .rh-record-card's leading stripe, which is why there is no --marked here. There is no --float either: it resolved to --shadow-card, which tokens.css sets to `none`, so it painted nothing -- and design/SYSTEM.md section 5 puts cards, sections and chart frames at elevation 0 with no shadow, so a floating CARD is off-system by construction. A dropdown that genuinely floats reaches for --shadow-2 directly. They are deliberately declaration-thin -- one property each -- so composing two of them can never be ambiguous about which wins. A feature rule later in this file overrides a trait at equal specificity, which is the intended cascade: take the trait, then say what is different. */ /* Standard interior. A card that clips a table or chart to its own edge stays unpadded and lets the child own the inset. Two surfaces deliberately do NOT take this and set their own: .rh-record-card is tighter (--space-3/4) and .rh-dd-card is roomier (--space-5/6). Those are design calls, not drift. */ .card--pad { padding: var(--space-4) var(--space-5); } /* Clip a chart, table or image to the rounded corner. */ .card--clip { overflow: hidden; } /* The small surface: list rows, menu items, tappable items. design/SYSTEM.md section 5 assigns --radius-md to "buttons, inputs, segmented controls" and --radius-lg to "cards, sections, chart frames", so these are two SIZES of one recipe, not two recipes. Naming the small one is what stopped nineteen rows from each re-deriving it. */ .card--sm { border-radius: var(--radius-md); } /* A leading stripe down the left edge: this card is set apart from its neighbours. Width and style here; the COLOUR is the user's (a discipline on a race-history record, the accent on a World Championships landing tile). Promoted from .rh-record-card on 24 Sep 2026 when the landing became its second user. */ .card--marked { border-left: 3px solid var(--border-strong); } /* ======================================== INLINE FILTERS / CHIP STRIP / SEARCH ======================================== */ .inline-filters { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--surface-sunken); border-radius: var(--radius-md); } @media (min-width: 769px) { .inline-filters { gap: var(--space-3); padding: var(--space-3) var(--space-4); } } .filter-chip-row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .filter-chip-row::-webkit-scrollbar { display: none; } /* The filter bar is a flex COLUMN, so a control dropped straight into it would stretch to the full bar width. Controls size to their content instead — this is the bar's job, not an inline `alignSelf` at each call site. */ .inline-filters > .switcher, .inline-filters > .ctrl-pill, .inline-filters > .ctrl-check { align-self: flex-start; } /* ── Switcher: the shared segmented control ────────────────────────────────── `.switcher` wraps 2+ `.switcher-btn`s and marks the current one `.on`. Reach for it whenever a control picks ONE of a small set of lenses; use `.chip` for filters that narrow a list and `.tab-btn` for page-level tabs. One shared border ring, so the per-button radius collapses inside the group. Variants: .switcher--scroll the group may outgrow a phone (5+ options) and scrolls. (--soft and --fill were declared here too and adopted by nothing; removed 2026-09-03. Same bar as the card traits: a SECOND user, not a good idea.) */ .switcher { display: inline-flex; flex: none; align-items: stretch; max-width: 100%; border: 1px solid var(--border-strong); border-radius: var(--switch-radius); overflow: hidden; min-height: var(--switch-min-h); background: var(--switch-bg); } .switcher-btn { /* Segments size to their own label. Growing them to fill the row was tried and reads as a heavy full-width bar next to the rest of the controls. */ flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--switch-py) var(--switch-px); border: 0; background: transparent; color: var(--switch-ink); font-family: inherit; font-size: var(--switch-text); font-weight: var(--font-weight-semibold); min-height: var(--switch-min-h); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background var(--transition-fast), color var(--transition-fast); } .switcher-btn + .switcher-btn { border-left: 1px solid var(--border); } .switcher-btn:hover:not(.on):not([disabled]) { background: var(--surface-tint); color: var(--text-2); } .switcher-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .switcher-btn.on { background: var(--switch-on-bg); color: var(--switch-on-ink); } .switcher-btn[disabled] { opacity: 0.4; cursor: not-allowed; } /* A count / unit that rides inside a segment (leg counts, race counts). */ .switcher-btn .switcher-n { font-size: var(--text-micro); font-weight: var(--font-weight-bold); opacity: 0.7; font-variant-numeric: tabular-nums; } .switcher-btn.on .switcher-n { opacity: 0.85; } /* Every switcher's active segment is the same inverse fill (--switch-on-bg). Segments keyed to a chart series once took that series' colour instead, which put two active-states on one page (race history's header vs its sections) — the series colour lives on the line and its legend, not on the control. */ .switcher--scroll { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .switcher--scroll::-webkit-scrollbar { display: none; } /* Several switchers are hosts filled from JS (race-history division rotation, the H2H metric group) and are emptied when the race has nothing to switch between — an empty group must not leave a bare border ring behind. */ .switcher:empty { display: none; } /* Filter/toggle chip — one geometry source (outline-quiet, dark-filled active). */ .chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--chip-py) var(--chip-px); border: 1px solid var(--border); border-radius: var(--chip-radius); background: var(--surface); color: var(--text-muted); font-size: var(--chip-text); font-weight: 500; min-height: var(--chip-min-h); cursor: pointer; -webkit-tap-highlight-color: transparent; /* A chip reads as a control whatever element it is. The first (the race page's link to its season index) arrived underlined, because the underline is the app-wide cue for a link sitting in running text — which a pill with a border never is. */ text-decoration: none; } /* The dark-fill ON state. Every pick-one/filter control shares it — a second copy of these four declarations lived down in the surfaces section and had to be kept in step by hand. */ .chip.active, .chip:active { transform: scale(0.95); } /* ⚙ Options button — collapses Quick-picks + Countries/Teams behind a panel. `.ctrl-pill` is the SHARED chart-control pill: any chart toggle (Race median, Pacing impact, …) uses it so every control reads as one component. Do not hand-roll button styling — add `.ctrl-pill` (+ `.on` when it's a toggle). It carries a . */ .ctrl-check { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--switch-min-h); padding: 0 var(--space-2); font-size: var(--text-sm); color: var(--text-muted); cursor: pointer; user-select: none; } .ctrl-check input { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; cursor: pointer; } .ctrl-check:hover { color: var(--text); } .ctrl-check:has(input:checked) { color: var(--text); } .filter-options-btn, .ctrl-pill { flex-shrink: 0; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-5); border: 1px solid var(--border-strong); border-radius: var(--radius-xl); background: var(--surface); cursor: pointer; font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--text-2); -webkit-tap-highlight-color: transparent; transition: all var(--transition-fast); } .filter-options-btn .fo-icon { font-size: var(--text-md); line-height: 1; } .filter-options-btn .fo-text { white-space: nowrap; } .filter-options-btn .fo-summary { color: var(--accent); font-weight: var(--font-weight-bold); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } select.ctrl-pill { /* The platform caret stays: it is the only thing that says "menu" rather than "button", and on a phone the native picker is the right control for a dozen-plus options. Only the box is restyled to match the pills. */ padding-right: var(--space-3); max-width: min(11rem, 264px); /* follows text size, capped like the type scale */ } .filter-options-btn:hover, .ctrl-pill:hover { border-color: var(--text-faint); background: var(--surface-tint); } .filter-options-btn.active { background: var(--accent); color: white; border-color: var(--accent); } .filter-options-btn.active .fo-summary { color: var(--surface); } .filter-options-btn.has-selection:not(.active) { border-color: var(--accent); } .filter-options-panel { display: none; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); } .filter-options-panel.open { display: flex; } .fop-section { display: flex; flex-direction: column; gap: var(--space-2); } .fop-section-title { font-size: var(--text-eyebrow); text-transform: uppercase; letter-spacing: 0.5px; font-weight: var(--font-weight-bold); color: var(--text-muted); } .fop-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); } .fop-chips.country-chip-row { display: flex; max-height: 120px; overflow-y: auto; } /* .country-chip geometry from .chip; keeps nowrap + transition + hover, and a bold + ✓ active (the dark fill itself comes from .chip.active). */ .country-chip { white-space: nowrap; transition: all var(--transition-fast); } .country-chip:hover { border-color: var(--text-faint); background: var(--surface-tint); } .country-chip.active { font-weight: var(--font-weight-bold); } .country-chip.active::before { content: '✓ '; font-weight: 900; } /* flag / team-logo inside a filter chip (replaces the abbreviation text) */ .country-chip img, .country-chip .flag-img { width: 22px; height: 15px; object-fit: contain; border-radius: 2px; display: block; } /* Inline search (lives inside the Options panel) */ .fop-search-wrap { position: relative; } .inline-search-input { width: 100%; padding: var(--space-2) var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-md); font-size: var(--text-md); background: var(--surface); -webkit-appearance: none; box-sizing: border-box; } .inline-search-input:focus { outline: none; border-color: var(--accent); } .inline-search-results { position: absolute; top: 100%; left: 0; right: 0; z-index: var(--z-dropdown); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 0 0 var(--radius-md) var(--radius-md); box-shadow: var(--shadow-3); max-height: 180px; overflow-y: auto; display: none; } .inline-search-results.open { display: block; } @media (min-width: 769px) { .inline-search-input { font-size: var(--text-lg); padding: var(--space-4) var(--space-6); } } /* iOS Safari zooms the page in on focus of any text field under 16px, and never zooms back out, so the view behind it (an athlete profile) opens magnified. Touch only: desktop keeps the type ladder. :is() carries attribute specificity so this outranks single-class rules like .settings-num. */ @media (pointer: coarse) { input:is([type="search"], [type="text"], [type="number"], :not([type])) { font-size: var(--text-input); } } .sr-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); cursor: pointer; border-bottom: 1px solid var(--surface-tint); font-size: var(--text-sm); } .sr-row:active { background: var(--accent-subtle); } .sr-rank { font-weight: var(--font-weight-bold); color: var(--accent); min-width: 22px; } .sr-name { flex: 1; } .sr-toggle { font-weight: var(--font-weight-bold); font-size: var(--text-md); } .sr-toggle.on { color: var(--success); } .sr-toggle.off { color: var(--border-strong); } .sr-no-results { padding: var(--space-5); color: var(--text-faint); text-align: center; font-size: var(--text-sm); } @media (min-width: 769px) { .sr-row { font-size: var(--text-md); padding: var(--space-5) var(--space-7); } .sr-rank { font-size: var(--text-md); min-width: 30px; } } /* Mobile collapsible controls (dev chart header reset button) */ .dev-header-row, .rank-header-row { position: relative; } .dev-header-row .chart-header, .rank-header-row .chart-header { display: block; } .chart-reset { display: none; /* hidden until a segment is zoomed */ position: absolute; left: 0; top: 4px; height: 26px; min-width: 30px; padding: 0 var(--space-2); background: var(--surface-hover); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--font-weight-bold); color: var(--text-muted); cursor: pointer; -webkit-tap-highlight-color: transparent; white-space: nowrap; line-height: 1; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); z-index: 1; } .chart-reset.show { display: block; background: var(--text-2); color: var(--bg-app); border-color: var(--text-2); } .chart-reset.show:hover { background: var(--text); border-color: var(--text); } @media (min-width: 769px) { .chart-reset { height: 30px; padding: 0 var(--space-5); font-size: var(--text-md); min-width: 40px; } } /* ======================================== CHIP STRIP — global watched-athletes bar ======================================== */ .chip-strip { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: var(--space-2); min-height: 30px; /* folded up from the SaaS layer 2026-09-03 */ background: var(--surface-sunken); border: 1px solid var(--border); } @media (min-width: 769px) { .chip-strip { padding: var(--space-3) var(--space-5); min-height: 36px; } } .cs-label { font-size: var(--text-micro); font-weight: var(--font-weight-bold); color: var(--text-faint); white-space: nowrap; text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0; /* `.switcher-btn.on` uses the same --text fill (see the switcher primitive); don't add a --primary-color active anywhere — it drifts from this family and collides with the accent that marks a watched athlete. */ /* folded up from the SaaS layer 2026-09-03 */ color: var(--text-muted); } @media (min-width: 769px) { .cs-label { font-size: var(--text-sm); } } .cs-scroll { display: flex; gap: var(--space-2); overflow-x: auto; flex: 1; /* The chips' 44px boxes overhang the strip instead of stretching it: the strip keeps its old ~30px look (27 Sep 2026). A sideways scroller clips vertically too, so the scroller is the chips' 44 tall box itself and the negative margins give back 24 of it: 20px of layout. */ margin-block: -12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .cs-scroll::-webkit-scrollbar { display: none; } .cs-chip { /* Two targets, each 44px tall: the body opens the profile, the × zone removes. The BOX is the 44px tap area and carries no paint; the pill you see is ::before, inset to its old size, so the chip looks as it did while a thumb has the whole strip height to land in. */ position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 0 0 var(--space-2); border: 0; background: none; font-size: var(--text-xs); font-weight: var(--font-weight-semibold); color: var(--chip-color, var(--text-2)); cursor: pointer; white-space: nowrap; flex-shrink: 0; -webkit-tap-highlight-color: transparent; line-height: 1.4; } .cs-chip::before { content: ''; position: absolute; z-index: -1; /* 12px top and bottom leaves the old 20px pill; the right inset leaves the outer part of the × zone outside the pill, as space between chips. */ inset: 12px 0; /* Watched-athlete chips: keep --chip-color (the data color!) but quiet the frame */ border: 1px solid var(--chip-color, var(--accent)); border-radius: 12px; background: var(--surface); transition: background var(--transition-fast); } .cs-chip:hover::before { background: var(--surface-hover); } /* The name is the tap target for the athlete's profile — see .athlete-link, the app-wide rule. Colour identity is already carried by the name + pill here, so the chip needs no separate dot/glyph. */ .cs-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: currentColor; /* fallback */ text-decoration-color: var(--link-underline); } .cs-x { /* Its own zone at the chip's end, the full 44 tall, so a thumb aimed at × cannot land on the name. 26 wide: a 44 wide zone spread the chips apart (27 Sep 2026), so it is exempt in width. */ align-self: stretch; width: 26px; margin-left: calc(var(--space-2) * -1); display: inline-flex; align-items: center; justify-content: flex-end; padding-right: var(--space-3); box-sizing: border-box; font-size: var(--text-md); font-weight: var(--font-weight-normal); color: var(--text-faint); cursor: pointer; line-height: 1; } .cs-x:hover { color: var(--danger); } /* The squad key (chip-strip.js _renderTeams): crest + count + ×, one row. The body is a target (it names the school), so it keeps the pointer; the pill stays at rest on hover because nothing about the chip changes state. */ .cs-chip-team:hover::before { background: var(--surface); } .cs-team-n { font-size: var(--text-xs); font-weight: var(--font-weight-semibold); color: var(--text-faint); } .cs-clear { /* position + margin: its 44px area (the tap-area list) must not reach over the last chip's × zone, which ends at the scroller's edge. */ position: relative; margin-left: 11px; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-faint); font-size: var(--text-xs); cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; } .cs-clear:hover { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); } @media (min-width: 769px) { .cs-chip { font-size: var(--text-md); padding-left: var(--space-3); } .cs-x { font-size: var(--text-lg); } .cs-clear { width: 28px; height: 28px; font-size: var(--text-md); } } /* ======================================== MODALS — source picker, dialog, athlete browser ======================================== */ .src-overlay { position: fixed; inset: 0; background: var(--scrim); z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--space-8); /* folded up from the SaaS layer 2026-09-03 */ background: rgba(15, 23, 42, 0.4); backdrop-filter: blur(2px); } .src-modal { background: var(--surface); border-radius: var(--radius-lg); width: min(420px, 100%); max-height: 90vh; position: relative; display: flex; flex-direction: column; overflow: hidden; /* folded up from the SaaS layer 2026-09-03 */ border-radius: var(--radius-xl); box-shadow: var(--shadow-3); border: 1px solid var(--border); } .src-modal-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-7); border-bottom: 1px solid var(--border); background: var(--surface-hover); } .src-modal-title { font-weight: var(--font-weight-bold); font-size: var(--text-md); color: var(--text-2); } /* Clickable variant — the start-list modal uses this on its title so the user can jump from "who's racing" to "how has this race evolved". */ .src-modal-title-link { background: none; border: 0; padding: var(--space-1) var(--space-3); border-radius: var(--radius-md); cursor: pointer; color: var(--warning); font-weight: var(--font-weight-bold); font-size: var(--text-md); font-family: inherit; transition: background var(--transition-fast), color var(--transition-fast); } .src-modal-title-link:hover, .src-modal-title-link:focus-visible { background: var(--warning-bg); color: var(--warning); outline: none; } .src-modal-sub { font-size: var(--text-sm); color: var(--text-muted); margin-left: var(--space-2); } .src-modal-close { font-size: var(--text-xl); padding: 0 var(--space-2); } .src-modal-close:hover { color: var(--text-2); } .src-modal-body { padding: var(--space-7); display: flex; flex-direction: column; gap: var(--space-5); overflow-y: auto; } .src-field { display: flex; flex-direction: column; gap: var(--space-2); } .src-field > span { font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--text-muted); } .src-field select { padding: var(--space-3) var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); font-size: var(--text-md); } .src-field select:disabled { background: var(--surface-tint); color: var(--text-faint); } .src-status { font-size: var(--text-sm); color: var(--text-muted); min-height: 14px; } .src-modal-foot { padding: var(--space-5) var(--space-7); border-top: 1px solid var(--border); background: var(--surface-hover); display: flex; justify-content: flex-end; gap: var(--space-3); } /* Reel maker (js/ui/reel-maker.js): the source-picker modal, a 9:16 preview on top and the choices under it. The offscreen replay it renders from sits off the page at the size it draws at. */ .reel-modal { width: min(460px, 100%); } .reel-preview { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); } .reel-preview canvas, .reel-preview video { height: min(44vh, 440px); aspect-ratio: 9 / 16; width: auto; max-width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface-sunken); } .reel-preview canvas[hidden] { display: none; } .reel-meta { font-size: var(--text-sm); color: var(--text-muted); } .reel-form { display: flex; flex-direction: column; gap: var(--space-5); } .reel-leg { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) 0; border-top: 1px solid var(--border); } .reel-leg-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .reel-leg-name { font-weight: var(--font-weight-semibold); color: var(--text-2); } .reel-laps { color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--font-weight-normal); } .reel-end { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); } /* One row per lap: the checkbox, then (when it is in) how much, the view and the speed, wrapping onto a second line on a phone. */ .reel-lap-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); } .reel-lap-row .ctrl-check { min-width: 5.5rem; } .reel-lap-row.on { padding-bottom: var(--space-2); } .reel-athletes { display: flex; flex-wrap: wrap; gap: var(--space-2); } .reel-athletes:empty { display: none; } /* The team chips and "Find an athlete" reuse the Options panel's country chips and search rows; in the sheet the list sits in the flow, not over it. */ .reel-teams { max-height: 132px; } .reel-count { color: var(--text-muted); font-weight: var(--font-weight-normal); } .reel-find .inline-search-results { position: static; max-height: 260px; border-radius: var(--radius-md); box-shadow: none; margin-top: var(--space-2); } .reel-find .sr-row img, .reel-find .sr-row .flag-img { width: 22px; height: 15px; object-fit: contain; border-radius: 2px; flex: none; } .reel-checks { display: flex; flex-wrap: wrap; gap: var(--space-5); padding-top: var(--space-2); } .reel-foot { align-items: center; flex-wrap: wrap; } .reel-foot .reel-status { margin-right: auto; } .reel-foot a.ctrl-pill { text-decoration: none; } .reel-busy .reel-form { opacity: 0.55; } .reel-offscreen { position: fixed; left: -20000px; top: 0; width: 512px; pointer-events: none; } /* Generic dialog (used by chart configuration etc.) */ .dialog-overlay { position: fixed; inset: 0; background: var(--scrim-strong); z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; } .summary-podium { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); } .podium-card { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-4) var(--space-6); background: var(--surface); border-radius: var(--radius-md); border-left: 3px solid var(--border-strong); font-size: var(--text-base); line-height: 1.4; } .podium-1 { border-color: var(--gold); background: linear-gradient(to right, var(--warning-bg), var(--surface)); } .podium-2 { border-color: var(--silver); } .podium-3 { border-color: var(--bronze); } .podium-medal { font-size: var(--text-base); margin-top: 0; } .podium-body { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; } .podium-row { display: flex; align-items: baseline; gap: var(--space-3); } .podium-name { flex: 1; font-weight: var(--font-weight-semibold); } .podium-time { font-weight: var(--font-weight-bold); color: var(--accent); font-size: var(--text-md); } .podium-paces { font-size: var(--text-micro); color: var(--text-muted); } @media (min-width: 769px) { .podium-card { font-size: var(--text-md); padding: var(--space-5) var(--space-7); gap: var(--space-5); } .podium-medal { font-size: var(--text-md); } .podium-time { font-size: var(--text-lg); } } .share-cta-row { display: flex; justify-content: flex-end; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; } .share-cta { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-7); border: 1px solid var(--border); border-radius: var(--radius-pill); background: transparent; color: var(--text-2); cursor: pointer; font-size: var(--text-sm); font-weight: var(--font-weight-bold); transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); } .share-cta:hover { color: var(--accent); border-color: var(--accent); background: var(--surface); } .share-cta svg { width: 14px; height: 14px; } .share-btn { --icon-btn-size: 30px; --icon-btn-radius: var(--radius-md); align-self: center; border-color: var(--border); color: var(--text-muted); } .share-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--surface); } .share-btn-sm { --icon-btn-size: 24px; border-color: transparent; } .seg-entry:hover .share-btn-sm { border-color: var(--border); } /* A view's one Share control, at the right end of its first row: level with Options, clear of the chart and its table. */ .share-slot { margin-left: auto; } .share-slot::before { content: ''; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--share-icon) center / contain no-repeat; mask: var(--share-icon) center / contain no-repeat; } .share-slot[hidden] { display: none; } .summary-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); margin-bottom: var(--space-4); } .mini-stat { text-align: center; padding: var(--space-2) var(--space-1); background: var(--surface); border-radius: var(--radius-md); } .ms-val { display: block; font-weight: var(--font-weight-bold); font-size: var(--text-md); color: var(--accent); } .ms-label { display: block; font-size: var(--text-micro); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; } .ms-sub { display: block; font-size: var(--text-micro); color: var(--text-muted); margin-top: 1px; } @media (min-width: 769px) { .ms-val { font-size: var(--text-2xl); } .ms-label { font-size: var(--text-sm); letter-spacing: 0.6px; } .mini-stat { padding: var(--space-4) var(--space-1); } } @media (min-width: 1200px) { .ms-val { font-size: var(--text-3xl); } } /* A fixed `repeat(3, 1fr)` was the bug behind the vanishing Run column: a `1fr` track keeps an `auto` MINIMUM, so each column refused to shrink below the longest name in it, three of them overflowed the container, and the third was clipped out of sight at desktop widths. auto-fit + a real floor instead: three columns when they fit, two in the middle band, one on a phone. `min(100%, …)` keeps the floor from overflowing a container narrower than the floor itself. */ .summary-segments { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: var(--space-2); } .seg-col { background: var(--surface); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); } .seg-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-weight: var(--font-weight-bold); font-size: var(--text-sm); color: var(--text-2); margin-bottom: var(--space-2); padding-bottom: var(--space-1); border-bottom: 1px solid var(--surface-tint); } /* Discipline-podium share button lives in the header (no row-hover to reveal it) */ .seg-header .seg-podium-share { border-color: var(--border); color: var(--text-muted); } .seg-header .seg-podium-share:hover { color: var(--accent); border-color: var(--accent); background: var(--surface); } /* ── Para: one block per sport class ────────────────────── A para race is several races sharing a course, scored within class, so the summary repeats podium + discipline leaders per class instead of showing one field-wide ranking. Same surface/radius vocabulary as .seg-col. */ .para-class-block { background: var(--surface); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-3); } .para-class-head { display: flex; align-items: center; gap: var(--space-3); font-weight: var(--font-weight-bold); font-size: var(--text-sm); color: var(--text-2); margin-bottom: var(--space-3); padding-bottom: var(--space-1); border-bottom: 1px solid var(--surface-tint); } .para-class-name { color: var(--text); } /* PTVI guide, named under the athlete: they race the whole race together. */ .podium-guide { color: var(--text-muted); font-size: var(--text-sm); } /* Staggered start: elapsed + the head start conceded, so the finish time above reconciles with splits that deliberately sum to less than it. */ .podium-stagger { color: var(--text-muted); font-size: var(--text-sm); } .para-class-count { color: var(--text-muted); font-weight: var(--font-weight-normal); margin-right: auto; } .para-class-head .share-btn { border-color: var(--border); color: var(--text-muted); } .para-class-head .share-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--surface); } @media (min-width: 769px) { .para-class-block { padding: var(--space-5); } .para-class-head { font-size: var(--text-md); } } /* The para form-spread box plot (.para-spread / .ps-*) used to live here. It was the cross-course normalisation experiment, which measured as a coin flip and was replaced by the per-race class chart (see scripts/para/EXPERIMENTS.md and js/charts/para-class-chart.js). Nothing has rendered those classes since. */ /* Gender group heading inside a fastest-sub-splits column (mixed relays) */ .seg-gender-label { font-weight: var(--font-weight-bold); color: var(--text-muted); font-size: var(--text-sm); line-height: 1.7; margin: var(--space-2) 0 1px; } .seg-gender-group:first-of-type .seg-gender-label { margin-top: 1px; } /* Mixed relay: one block per gender, and the blocks line up ACROSS the three discipline columns. Without this each column packs its own way, so a tie in the bike's first block (four rows instead of three) pushed the bike's second block a row below the swim's and the run's, and three columns of the same thing read as three unrelated lists. Subgrid gives every column the same three rows — header, first gender, second gender — and each block is placed in the row its gender owns, so a discipline with no entry for one gender leaves that row empty instead of moving the other gender into it. Stacked (one column per row band) nothing is shared, so the phone keeps its tight blocks. */ .summary-segments--gendered { grid-template-rows: repeat(3, auto); } .summary-segments--gendered .seg-col { display: grid; grid-row: span 3; grid-template-rows: subgrid; } .summary-segments--gendered .seg-header { grid-row: 1; } .summary-segments--gendered .seg-gender-group[data-gi="0"] { grid-row: 2; } .summary-segments--gendered .seg-gender-group[data-gi="1"] { grid-row: 3; } @media (min-width: 769px) { .seg-col { padding: var(--space-5); } .seg-header { font-size: var(--text-md); } } /* Single-row per-rank entry inside .seg-col */ .seg-entry { display: flex; flex-wrap: nowrap; align-items: baseline; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--surface-tint); font-size: var(--text-sm); } .seg-entry .seg-rank { font-weight: var(--font-weight-bold); color: var(--accent); min-width: 14px; flex-shrink: 0; } .seg-entry .seg-time { font-weight: var(--font-weight-semibold); flex-shrink: 0; } .seg-entry .seg-pace { color: var(--text-muted); font-size: var(--text-micro); flex-shrink: 0; } /* Wraps rather than ellipsing: three columns share the row, so at narrow desktop widths the name gets little space and an ellipsis ate most of it. A second line costs a few pixels of height and keeps the name whole. */ .seg-entry .seg-name { flex: 1; min-width: 0; overflow-wrap: break-word; font-weight: var(--font-weight-semibold); } /* Relay only: the team behind a member, where the flag alone can't say it (a second national team, a club). Muted — the name is what the row is about. */ .seg-entry .seg-team { color: var(--text-muted); } /* A split podium ranks the leg, so a non-finisher can place in it. The status rides with the name rather than replacing the rank: the swim happened, the race didn't finish, and the row has to say both. */ .seg-entry .seg-dnf { margin-left: var(--space-2); padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--surface-tint); color: var(--danger); font-size: var(--text-micro); font-weight: var(--font-weight-semibold); white-space: nowrap; } @media (min-width: 769px) { .seg-entry { font-size: var(--text-md); gap: var(--space-2); padding: var(--space-2) 0; } .seg-entry .seg-rank { min-width: 18px; } .seg-entry .seg-pace { font-size: var(--text-sm); } } @media (min-width: 1200px) { .seg-entry { font-size: var(--text-lg); } } .summary-section-title { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-sm); } @media (min-width: 769px) { .summary-section-title { font-size: var(--text-md); margin: var(--space-7) 0 var(--space-3); } } /* Relay member breakdown inside podium card */ .relay-members { display: flex; flex-direction: column; gap: 1px; margin-top: var(--space-2); padding: var(--space-2) 0 0 var(--space-3); border-top: 1px dashed rgba(0, 0, 0, 0.08); } .relay-member { display: flex; align-items: baseline; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-muted); padding: 1px 0; } .relay-leg-num { font-weight: var(--font-weight-bold); color: var(--text-muted); min-width: 18px; font-size: var(--text-micro); text-transform: uppercase; } .relay-gender { color: var(--text-faint); font-size: var(--text-xs); min-width: 10px; } /* Holds a flag (a fixed 16x12 .flag-img) or the .flag-code chip that stands in for a code with no flag — never an emoji glyph, so it is sized as a BOX. min-width keeps the name column aligned across the legs when a member's NOC is unknown and there is nothing at all to paint. */ .relay-flag { display: inline-flex; align-items: center; flex: none; min-width: 16px; } /* Wraps, never truncates: the leg list carries FULL names, so it is where a long one lands. The row is baseline-aligned, so the time stays on the first line. */ .relay-member-name { flex: 1; min-width: 0; overflow-wrap: break-word; } .relay-member-time { font-size: var(--text-xs); color: var(--text-muted); } @media (min-width: 769px) { .relay-member { font-size: var(--text-md); padding: var(--space-1) 0; gap: var(--space-4); } .relay-leg-num { font-size: var(--text-base); min-width: 22px; } .relay-gender { font-size: var(--text-md); min-width: 12px; } .relay-member-time { font-size: var(--text-md); } } /* The same track as .summary-segments above, deliberately spelled the same way: a bare 160px minimum fit TWO columns at the phone width, so the leg cards came up half as wide as the sub-split cards directly above them and wrapped every name onto three lines. The min(100%, …) is what makes auto-fit stack instead of cramming — the track can never be asked to be wider than the container. */ .summary-legs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: var(--space-2); } @media (min-width: 769px) { .summary-legs { gap: var(--space-3); } /* Four legs is the count auto-fit gets wrong: it spends a desktop row on four cards a third the width of the three sub-split cards above them, and every name wraps onto a second line under its own rank. 2x2 instead — legs 1 and 2 over legs 3 and 4 — which is the column width a name, a gender mark, a flag and a time need to sit on one row, and it lines the section up with the grid above rather than cutting across it. Three legs or two already stack neatly and keep auto-fit. */ .summary-legs[data-legs="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .summary-headbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; margin-bottom: var(--space-3); } .summary-distances { font-size: var(--text-base); color: var(--text-muted); } .summary-distances .dist-seg { white-space: nowrap; } .summary-distances .dist-leg { color: var(--text-faint); font-weight: var(--font-weight-normal); } .summary-distances .dist-km { color: var(--text-2); font-weight: var(--font-weight-semibold); } .summary-distances .dist-sep { color: var(--text-faint); margin: 0 var(--space-2); } .summary-dist-note { color: var(--text-faint); font-weight: var(--font-weight-normal); } /* Whose number an estimated leg distance is. One line under the distances, not a repeat beside every pace it feeds. */ .summary-est-note { color: var(--text-faint); font-size: var(--text-sm); margin: calc(var(--space-1) * -1) 0 var(--space-3); } /* The sport class of a race loaded as one class on its own. It sits opposite the distances because it is the same kind of fact about the race, and it is the door to the class over two years (.para-class-open). */ .summary-class { font-size: var(--text-base); font-weight: var(--font-weight-semibold); color: var(--text-2); } /* Theme / units pickers in the app menu use the shared `.switcher`. */ .summary-conditions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-2) 0 var(--space-5); } .cond-chip { font-size: var(--text-sm); background: var(--surface-tint); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 3px var(--space-4); color: var(--text-2); } .cond-chip small { color: var(--text-faint); } .cond-chip.cond-duathlon { background: var(--warning-bg); border-color: var(--warning); color: var(--warning); } /* Provenance, not a race fact: the organiser's timing, or our own reading of the live timing mats, standing in until World Triathlon posts. Amber whether or not it links anywhere: the live-timing one has no timer page to link to, and a grey chip was easy to miss on a result that can still change. A link keeps the chip ink rather than turning into a coloured link, same rule as .athlete-link. */ .cond-chip.cond-provisional { color: var(--warning); background: var(--warning-bg); border-color: var(--warning); text-decoration: none; } .cond-chip.cond-provisional small { color: inherit; opacity: 0.75; } /* ======================================== SETTINGS ======================================== */ .settings-card { max-width: 560px; margin: 0 auto; padding: var(--space-5); } .settings-section { margin-bottom: var(--space-8); } .settings-section-title { letter-spacing: 0.08em; color: var(--text-faint); margin-bottom: var(--space-3); padding-left: var(--space-1); } .settings-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } .settings-preset { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: var(--space-3) var(--space-3); cursor: pointer; text-align: center; transition: all var(--transition-fast); } .settings-preset:hover { border-color: var(--border-strong); } .settings-preset.active { border-color: var(--accent); background: var(--accent-subtle); } .settings-preset-label { font-size: var(--text-md); font-weight: var(--font-weight-semibold); color: var(--text-2); } .settings-preset-sub { font-size: var(--text-xs); color: var(--text-faint); } .settings-preset.active .settings-preset-label { color: var(--accent-hover); } .settings-row { margin-bottom: var(--space-4); } .settings-row-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-2); } .settings-label { font-size: var(--text-md); font-weight: var(--font-weight-semibold); color: var(--text-2); } .settings-value { font-size: var(--text-md); font-weight: var(--font-weight-bold); color: var(--accent); } .settings-num { width: 4.2em; text-align: right; font: inherit; color: var(--accent); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 1px var(--space-2); margin-right: var(--space-1); background: var(--surface); } .settings-num:focus { outline: none; border-color: var(--accent); } .settings-row-foot { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--text-faint); margin-top: var(--space-2); } /* ── Unified range slider (settings, prediction, replay — one look) ── The track is drawn by the runnable-track pseudo at a fixed 6px, so an input can keep a taller element height for a bigger touch target (e.g. the replay scrubber) without thickening the visible track. Accent = primary in both themes. Any per-component accent-color is a no-op once appearance is none. */ input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; margin: 0; background: transparent; cursor: pointer; outline: none; touch-action: pan-y; } input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: var(--radius-pill); background: var(--border); } input[type="range"]::-moz-range-track { height: 6px; border-radius: var(--radius-pill); background: var(--border); } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; margin-top: -5px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.28); cursor: pointer; } input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.28); cursor: pointer; } input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .settings-save { width: 100%; padding: var(--space-6); font-size: var(--text-md); font-weight: var(--font-weight-semibold); margin-top: var(--space-4); } .settings-save.saved { background: var(--success); } .settings-note { margin: var(--space-6) 0 0; font-size: var(--text-sm); color: var(--text-faint); text-align: center; } /* ======================================== TEAM RANKINGS ======================================== */ .team-rankings, .country-rankings { display: flex; flex-direction: column; gap: var(--space-2); } .team-division-group { margin-bottom: var(--space-5); } .team-division-title { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); padding-bottom: var(--space-1); border-bottom: 2px solid var(--accent); } .team-row { background: var(--surface); border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .team-row.podium { background: linear-gradient(to right, var(--warning-bg), var(--surface)); } /* Relay: a country's squads grouped under one heading */ .relay-country-group { background: var(--surface); border-radius: var(--radius-sm); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); overflow: hidden; } .relay-country-group .relay-country-header { font-weight: var(--font-weight-bold); font-size: var(--text-md); padding: var(--space-3) var(--space-5) 0; color: var(--text); } .relay-country-group .team-row { box-shadow: none; border-radius: 0; background: transparent; } .relay-country-group .team-row + .team-row { border-top: 1px solid var(--surface-tint); } .team-status-badge { font-size: var(--text-xs); font-weight: var(--font-weight-bold); color: var(--text-muted); letter-spacing: 0.03em; } /* The summary is a grid, not a flow of flex items: a spelled-out school name is long enough that it needs a cell of its own, and the grid lets the points sit beside the places (rather than on a line of their own) without either of them moving in the markup. Areas are re-mapped per breakpoint below. */ .team-summary { display: grid; align-items: center; column-gap: var(--space-4); row-gap: var(--space-1); padding: var(--space-2) var(--space-5); cursor: pointer; user-select: none; } .team-summary:hover { background: var(--surface-hover); } .team-info { display: contents; } /* its two children are the real grid items */ .team-rank { grid-area: rank; font-size: var(--text-md); font-weight: var(--font-weight-bold); min-width: 28px; color: var(--text-2); } .team-name { grid-area: name; min-width: 0; font-weight: var(--font-weight-bold); font-size: var(--text-md); display: flex; align-items: center; gap: var(--space-2); } /* Standings spell the team out, so the name wraps instead of squeezing the figures beside it. */ .team-name-text { overflow-wrap: anywhere; line-height: 1.2; } .team-score { grid-area: score; justify-self: start; font-size: var(--text-sm); color: var(--text-muted); font-weight: var(--font-weight-medium); } /* Right-hand stack: scoring places, and the team's average paces under them. Points sit on the left of the row, these on the right. */ .team-meta { grid-area: meta; justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); min-width: 0; } /* Bare figures, no per-discipline tag — the tags ate the width the numbers need, most visibly for an NCAA squad with 5+ scoring places. Order is always swim, bike, run; the units tell them apart. */ .team-averages { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: var(--space-1) var(--space-8); font-size: var(--text-xs); color: var(--text-muted); } /* Fixed slot per discipline so swim/bike/run line up as columns down the standings instead of drifting with each row's digits. */ .avg { font-family: var(--font-family-mono); font-weight: var(--font-weight-semibold); white-space: nowrap; min-width: 5.6em; text-align: right; } .avg:last-child { min-width: 0; } .scoring-positions { display: flex; gap: var(--space-1); flex-wrap: wrap; justify-content: flex-end; } .pos { padding: 1px var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-micro); font-weight: var(--font-weight-semibold); } .pos.scoring, .pos.counting { color: white; } .pos.displacer { background: var(--border-strong); color: var(--text-muted); } /* A team's own Share rides beside its name, in the muted ink of a control rather than the team's colour. */ .team-name .team-share { color: var(--text-muted); border-color: var(--border); } .expand-icon { grid-area: chev; color: var(--text-faint); font-size: var(--text-xs); transition: transform var(--transition-normal); } .team-row.expanded .expand-icon { transform: rotate(180deg); } .team-details { display: none; padding: var(--space-3) var(--space-5) var(--space-5); background: var(--surface-sunken); border-top: 1px solid var(--surface-tint); } .team-row.expanded .team-details { display: block; } @media (min-width: 769px) { /* Desktop keeps the name/points column on the left and the whole stack on the right, side by side. */ .team-summary { padding: var(--space-4) var(--space-6); column-gap: var(--space-5); grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "rank name meta chev" "rank score meta chev"; } .team-rank { font-size: var(--text-lg); min-width: 34px; } .team-name { font-size: var(--text-lg); gap: var(--space-3); } .team-score { font-size: var(--text-md); } .team-averages { font-size: var(--text-base); gap: var(--space-1) var(--space-8); } .pos { font-size: var(--text-base); padding: 3px var(--space-4); } .expand-icon { font-size: var(--text-md); } } @media (min-width: 1200px) { .team-name { font-size: var(--text-xl); } } @media (max-width: 768px) { /* Phone: the name gets the full width of its own line (schools spell out long), and the points move down to sit at the left of the places/paces stack instead of taking a line of their own — one line saved per row without crowding the name. */ .team-summary { padding: var(--space-2) var(--space-4); grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "rank name name chev" "rank score meta chev"; } .team-meta { align-self: start; } .team-score { align-self: end; } /* points level with the paces line */ } /* Larger text on a phone (html.text-lg, main.js): the points and the three paces no longer fit one line, and wrapping put the run pace under the points. The places and paces take a line of their own instead. */ @media (max-width: 768px) { .text-lg .team-summary { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "rank name chev" "rank score chev" "rank meta chev"; } .text-lg .team-meta { justify-self: stretch; align-items: stretch; } .text-lg .team-averages { justify-content: space-between; flex-wrap: nowrap; gap: var(--space-1) var(--space-4); } .text-lg .avg { min-width: 0; } .text-lg .scoring-positions { justify-content: flex-start; } } .athletes-table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); } .athletes-table th { text-align: left; padding: 3px var(--space-3); font-weight: var(--font-weight-semibold); color: var(--text-muted); border-bottom: 1px solid var(--border); font-size: var(--text-micro); text-transform: uppercase; } .athletes-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--surface-tint); } /* Cap the name column on phones so a long name wraps to ~2 lines instead of stealing width from the swim/bike/run pace columns (#6). overflow-wrap keeps even a long single token from forcing the cell wider. Lifted on desktop. */ .athletes-table .athlete-name-cell { font-weight: var(--font-weight-semibold); max-width: 8.5em; overflow-wrap: anywhere; line-height: 1.25; } .athletes-table .time-cell { font-family: var(--font-family-mono); font-size: var(--text-xs); } .athletes-table .pace-cell { font-size: var(--text-micro); color: var(--text-muted); } .athletes-table tr.displacer { opacity: 0.7; background: var(--surface-tint); } .divider-row td { font-size: var(--text-micro); font-weight: var(--font-weight-semibold); color: var(--text-faint); text-transform: uppercase; padding: var(--space-3); border-bottom: 1px dashed var(--border) !important; background: var(--surface-tint); } .scoring-note { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-4); padding: var(--space-3) var(--space-5); background: var(--warning-bg); border-left: 3px solid var(--warning); border-radius: var(--radius-sm); } .scoring-rules { margin-top: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--surface-hover); border-radius: var(--radius-md); font-size: var(--text-xs); color: var(--text-muted); border: 1px solid var(--accent); } .scoring-rules strong { color: var(--accent); } @media (min-width: 769px) { .athletes-table { font-size: var(--text-md); } .athletes-table th { font-size: var(--text-base); padding: var(--space-3) var(--space-5); } .athletes-table td { padding: var(--space-3) var(--space-5); } .athletes-table .athlete-name-cell { max-width: none; } .athletes-table .time-cell { font-size: var(--text-md); } .athletes-table .pace-cell { font-size: var(--text-base); } .divider-row td { font-size: var(--text-base); padding: var(--space-4); } .scoring-note { font-size: var(--text-md); padding: var(--space-4) var(--space-7); } .scoring-rules { font-size: var(--text-md); padding: var(--space-5) var(--space-7); } } .spider-table-wrap { overflow-x: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; min-width: 0; } .spider-tbl { width: 100%; border-collapse: collapse; font-size: var(--text-sm); min-width: 400px; } .spider-tbl thead th { padding: var(--space-3) var(--space-2); font-size: var(--text-xs); font-weight: var(--font-weight-bold); color: var(--text-muted); background: var(--surface-hover); border-bottom: 2px solid var(--border); text-align: center; position: sticky; top: 0; z-index: 5; text-transform: uppercase; letter-spacing: 0.3px; } .spider-tbl thead th:first-child { text-align: left; z-index: 10; } /* Opaque base so the sticky first column (background: inherit) always masks the scrolling value columns behind it — odd/unstriped rows were transparent, so text bled through the name on horizontal scroll. */ .spider-tbl tbody tr { border-bottom: 1px solid var(--surface-tint); background: var(--surface); } .spider-tbl tbody tr:nth-child(even) { background: var(--surface-sunken); } .spider-tbl tbody tr:hover { background: var(--surface-hover); } /* 44px minimum cell height on mobile so each row is a finger-friendly target (the per-row ✕ button and athlete cell both inherit this). */ .spider-tbl td { padding: var(--space-4) var(--space-2); vertical-align: middle; text-align: center; } .spider-tbl td:first-child { text-align: left; position: sticky; left: 0; background: inherit; z-index: 2; min-width: 110px; } .spider-tbl .ath-cell { display: flex; align-items: center; gap: var(--space-2); } .spider-tbl .cdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } /* Names wrap rather than truncate: an ellipsis here hid text while the cell still had ~40px of spare width, and a half-name is worth less than a second line. The max-width is a brake on the column stealing room from the split columns (which start wrapping "42.3 km/h"), NOT a clip: anything past it wraps. */ .spider-tbl .aname { font-weight: var(--font-weight-semibold); font-size: var(--text-sm); white-space: normal; overflow-wrap: anywhere; line-height: 1.2; max-width: 124px; } .spider-tbl .acountry { font-size: var(--text-micro); color: var(--text-muted); } /* Pace under each split. Was inline 9px, which was too small to read at a glance for the number people most want off this table; --text-sm matches the grid's own body size and scales up again on mobile. Also carries the relay member name in the Teams lens. */ .spider-tbl .tpace { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.2; } /* The unit, stated once per column under its name (cells hold bare numbers). */ .spider-tbl thead th .tunit { display: block; margin-top: 1px; font-size: var(--text-micro); font-weight: var(--font-weight-normal); color: var(--text-muted); text-transform: none; letter-spacing: 0; } /* White tile + hairline ring: most NCAA logos ship on a solid white background, so a bare shows a white rectangle on coloured rows / dark mode. The tile normalises every logo (white-bg blends in, transparent gets a legible backing) into one cohesive badge. --logo-tile stays white in both themes (see tokens). */ /* The tile is a FIXED shape and every mark is contained inside it, so a row of badges reads as one set. `aspect-ratio` rather than a hard width, so the handful of rules that override only `height` still get a proportional tile. 6/5 is the median shape of the trimmed logos. This has to be a fixed box. The source files used to be a uniform 800x640 canvas, which normalised every badge for free — but the mark inside was floating in dead space, which is what made crests unreadable. Trimming the canvas to the mark (scripts/trim_team_logos.py) fixed the size but exposed a 5.3x spread in aspect ratio, so `width: auto` then rendered badges anywhere from 0.66em to 2.75em wide. Trimmed source + fixed tile gives both: one tile shape, and each mark scaled up to fill as much of it as its shape allows. */ .team-logo { height: 1.3em; aspect-ratio: 6 / 5; width: auto; object-fit: contain; object-position: center; vertical-align: middle; background: var(--logo-tile); padding: 1px; border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--logo-tile-ring); } /* Transfer athlete: one crest per school, sitting together with a hair of gap. */ .team-logos { display: inline-flex; align-items: center; gap: var(--space-1); vertical-align: middle; } .spider-tbl .tval { font-weight: var(--font-weight-medium); } .spider-tbl .rbadge { display: inline-block; padding: 1px var(--space-2); border-radius: var(--radius-lg); font-size: var(--text-micro); font-weight: var(--font-weight-bold); margin-top: 1px; } /* .rbadge tier colors live in chart-theme.css (single source). */ .spider-tbl .tpace { font-size: var(--text-nano); color: var(--accent-ink); margin-top: 1px; } .spider-tbl .spider-remove-col { width: 24px; padding: 0; } /* ── Splits grid (WT-style sortable results table) ───────────────────────── */ .spl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius-lg); } .spl-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; --spl-name-w: 7.5em; --spl-pos-w: 2.6em; } /* Header scrolls away with the table (no top-sticky) — on a phone a pinned header row otherwise floats over the app chrome above as you scroll. */ .spl-table thead th { padding: var(--space-3) var(--space-2); font-size: var(--text-xs); font-weight: var(--font-weight-bold); color: var(--text-2); background: var(--surface-hover); border-bottom: 2px solid var(--border); text-align: center; white-space: nowrap; user-select: none; } .spl-th[data-key] { cursor: pointer; } .spl-th[data-key]:hover { filter: brightness(0.97); } /* Sorted-column underline + arrow colour are set inline per column (discipline colour for swim/bike/run, neutral otherwise) — never purple. */ /* Sort mark: ▲ over ▼ under the column name, so it adds height, not width. Faint on every sortable column; the sorted direction takes the column's ink. */ .spl-sort { display: flex; flex-direction: column; align-items: center; margin-top: 2px; font-size: var(--text-nano); line-height: 7px; color: var(--text-faint); } .spl-th-name .spl-sort { align-items: flex-start; } /* The name header starts where the names start: past the flag and the gap. */ .spl-table thead th.spl-th-name { padding-left: calc(var(--space-2) + 16px + var(--space-2)); } .spl-th-name { text-align: left !important; } /* The name is frozen (after the place, on a phone). It is always the full name: on a phone it wraps to the longest word (.spl-nm), so it never needs to shrink when you scroll. The divider marks the frozen edge. */ /* `1%` is the shrink-to-fit width in a table that is itself width:100% — the cell takes what its content needs and no more. It matters because SOMETHING has to absorb the leftover pixels on a wide desktop, and while this column was `auto` it was the only candidate: it grew into a band of dead space with the splits shoved against the right edge. The split columns share the slack instead (see .spl-splitcol). --spl-rest is then the column's real content width, measured after layout (_pinRestWidth). */ .spl-th-name, .spl-name { position: sticky; left: var(--spl-pos-w); z-index: 6; width: var(--spl-rest, 1%); /* A table cell's `width` is only a MINIMUM under auto layout — the column can still be handed slack — so the measured content width has to be a max-width as well, or the name column silently re-absorbs the leftover space. */ max-width: var(--spl-rest, none); white-space: nowrap; border-right: 1px solid var(--border); } .spl-th-name, .spl-th-pos { z-index: 15; } /* Row backgrounds MUST be opaque — the sticky columns inherit them, and any translucency lets scrolled-under cells show through the pinned columns. */ .spl-table tbody tr { background: var(--surface); border-bottom: 1px solid var(--border-soft); } .spl-table tbody tr:nth-child(even) { background: var(--surface-sunken); } .spl-table tbody tr:hover { background: var(--surface-hover); } .spl-row { cursor: pointer; } .spl-row-sel, .spl-row-sel:hover { background: var(--surface-selected) !important; } .spl-row-dnf { color: var(--text-faint); } .spl-cell { padding: var(--space-3) var(--space-2); text-align: center; vertical-align: middle; white-space: nowrap; } /* Frozen name: opaque (inherits row bg) so scrolling splits pass cleanly beneath. */ .spl-name { background: inherit; text-align: left; font-weight: var(--font-weight-semibold); color: var(--text); vertical-align: middle; } .spl-namewrap { display: flex; align-items: flex-start; gap: var(--space-2); } /* Phone: first name beside the flag, surname under it beside the start number. */ .spl-first, .spl-last { display: block; } .spl-nobr { white-space: nowrap; } /* Phone shows the one family name the rest of the app uses; desktop the whole surname field (splits-table.js _nameLines). */ .spl-last-full { display: none; } /* The flag, with the start number under it: the flag column is already as wide as a 3-digit bib, so the number costs no width at all. */ .spl-flag { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; flex: none; } .spl-flag > * { margin: 0; } .spl-flag .spl-bib { margin: 0; } /* Names WRAP rather than truncate: the column is as wide as the longest word, so "Candela Sánchez Touza" takes two lines instead of half the screen, and the whole name is always there. */ .spl-name .spl-nm { white-space: normal; max-width: var(--spl-name-w); line-height: 1.2; } /* A split cell's time/rank halves: inert on a phone, two columns on a desktop. */ .spl-pair, .spl-half { display: contents; } /* The phone layout (the default) shows neither of these: its pick box rides under the place and its start number under the flag. */ .spl-pickcol, .spl-th-bib, .spl-bibcell { display: none; } .spl-bibcell { color: var(--text-muted); font-size: var(--text-xs); } /* DESKTOP: width to spare and height to save. The pick box and the start number get columns of their own, every cell is one line (a split's rank in brackets beside its time), and the sort mark sits beside the heading. Only the name is frozen, since the columns to its left are not needed while scrolling. */ @media (min-width: 769px) { .spl-table .spl-name .spl-nm { white-space: nowrap; max-width: none; } .spl-table .spl-pickcol { display: table-cell; width: 1.6em; padding-left: var(--space-3) !important; padding-right: var(--space-1) !important; } .spl-table .spl-th-bib, .spl-table .spl-bibcell { display: table-cell; width: 3.2em; } .spl-table .spl-pos .spl-box, .spl-table .spl-flag .spl-bib { display: none; } .spl-table .spl-pickcol .spl-box { margin: 0 auto; } .spl-table .spl-th-pos, .spl-table .spl-pos { position: static; width: 2.8em; min-width: 2.8em; max-width: none; padding-left: var(--space-2) !important; } .spl-table .spl-th-name, .spl-table .spl-name { left: 0; } .spl-table .spl-cell { padding-top: var(--space-2); padding-bottom: var(--space-2); } .spl-table .spl-time, .spl-table .spl-rk, .spl-table .spl-posnum { display: inline; } .spl-table .spl-rk { margin: 0; font-size: var(--text-xs); } .spl-table .spl-pair { display: grid; align-items: center; } /* A split cell: the times right-aligned in a slot as wide as the column's widest time (measured, _fitTimeSlots), starting at the cell's padding exactly like the header above it; then the place, right-aligned in a slot as wide as the column's widest place and centred in the rest of the column, so it has its own space rather than trailing the time. */ .spl-table { --spl-tw: 4.4em; --spl-rw: 2ch; } .spl-table .spl-th.spl-splitcol, .spl-table .spl-cell.spl-splitcol { width: var(--spl-colw, auto); } .spl-table .spl-pair { grid-template-columns: var(--spl-tw) 1fr; column-gap: var(--space-2); } .spl-table .spl-half { display: block; text-align: center; } .spl-table .spl-half:first-child { text-align: right; } /* times line up on the last digit */ .spl-table .spl-half .spl-rk { display: inline-block; width: var(--spl-rw); text-align: right; } /* Pace lens: the unit sits at the far right of the header, not between the name and its sort mark, so it never widens the column. */ .spl-table thead th.spl-splitcol { position: relative; } .spl-table thead th.spl-splitcol .spl-unit { position: absolute; right: var(--space-2); top: 50%; transform: translateY(-50%); margin: 0; } .spl-table .spl-first, .spl-table .spl-last { display: inline; } .spl-table .spl-last-short { display: none; } .spl-table .spl-last-full { display: inline; } .spl-table .spl-namewrap { align-items: center; } /* Every header starts where its numbers start: the same left edge, the same padding. The name header is pushed past the flag (16px + the gap) so it sits over the names. */ .spl-table thead th, .spl-table .spl-cell { text-align: left; } .spl-table .spl-sort { display: inline-flex; vertical-align: middle; margin: 0 0 0 var(--space-1); } } /* The place: the first frozen column, as narrow as a 2-digit place in its ring allows. Its width is the name column's sticky offset, so the two are one token. */ .spl-th-pos, .spl-pos { position: sticky; left: 0; z-index: 6; width: var(--spl-pos-w); min-width: var(--spl-pos-w); max-width: var(--spl-pos-w); padding-left: var(--space-1) !important; padding-right: var(--space-1) !important; } .spl-pos { background: inherit; color: var(--text-muted); font-weight: var(--font-weight-semibold); } /* Start number under the name: muted, small, never a column of its own. */ .spl-bib { display: block; margin-top: 1px; font-size: var(--text-micro); font-weight: var(--font-weight-normal); color: var(--text-faint); line-height: 1; } /* Pick affordance: a small square checkbox under the place (straight lines, like the grid), filled with the athlete's chart colour and ticked once picked. */ .spl-posnum { display: block; line-height: 1.15; } .spl-box { position: relative; display: block; margin: 3px auto 0; width: 12px; height: 12px; box-sizing: border-box; border: 1.5px solid var(--border-strong); border-radius: 2px; } .spl-row-sel .spl-box { background: var(--pick, var(--accent)); border-color: var(--pick, var(--accent)); } .spl-row-sel .spl-box::after { content: ''; position: absolute; left: 2.5px; top: -0.5px; width: 3px; height: 6px; border: solid var(--on-accent); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); } /* Every split column shares one width so the grid reads with even spacing (T1/T2 would otherwise sit narrower than swim/bike/run and stagger the gaps). `auto` over a floor rather than a fixed width, so on a wide desktop the leftover space is shared out across the numbers instead of pooling in one dead column. */ .spl-th.spl-splitcol, .spl-cell.spl-splitcol { width: auto; min-width: 3.6em; } /* Pace lens: the unit is stated once under the column name, so the cells hold a bare number ("3:52") and the columns need only a little more room than a time. */ .spl-scroll.spl-pace .spl-th.spl-splitcol, .spl-scroll.spl-pace .spl-cell.spl-splitcol { min-width: 4.2em; } .spl-unit { display: block; margin-top: 1px; font-size: var(--text-micro); line-height: 1; font-weight: var(--font-weight-normal); color: var(--text-faint); text-transform: none; letter-spacing: 0; } .spl-status { font-size: var(--text-micro); font-weight: var(--font-weight-bold); color: var(--text-faint); } .spl-time { display: block; font-weight: var(--font-weight-medium); line-height: 1.15; } .spl-rk { display: block; margin-top: 1px; font-size: var(--text-micro); line-height: 1; color: var(--text-faint); } /* Sorted-column tint + fastest-split colour are applied inline per column (discipline colour), so there are no purple .spl-best / .spl-cell-active rules. */ .spl-empty { color: var(--text-faint); } /* An estimated split reads as qualified, not measured: muted, and carrying the ** the legend under the grid explains. */ .spl-est .spl-time { color: var(--text-muted); } /* The ** on an estimated value. Sized against the number it marks, so it scales with whatever cell it lands in. */ .spl-estmark { font-size: 0.85em; letter-spacing: -0.5px; margin-left: var(--space-1); } /* The ** hangs past the last digit rather than widening the time, so an estimate is centred (phone) or right-aligned (desktop) exactly like the measured times around it. */ .spl-est .spl-time { display: inline-block; position: relative; } .spl-est .spl-estmark { position: absolute; left: 100%; top: -0.2em; margin-left: 1px; } /* A time penalty served in this segment. Sits under the split like the rank does, in the warning ink so it reads as a note on the time and never as a second time. */ .spl-penmark { display: block; margin-top: 1px; font-size: var(--text-micro); line-height: 1; font-family: var(--font-family-mono); color: var(--warning); } /* A quiet one-line note under a chart, grid or table: what a mark means, or how a table was ranked. Never a boxed callout, so it explains without competing with the numbers above it. */ .chart-note, .chart-estimate-note { display: flex; align-items: center; justify-content: center; gap: var(--space-1); text-align: center; font-size: var(--text-xs); color: var(--text-muted); padding: var(--space-3) var(--space-4) var(--space-1); line-height: 1.4; } .ce-mark { font-weight: var(--font-weight-medium); } /* ── Relay lens toggle + leg filter — both are shared `.switcher`s ────────── */ .spl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); } /* The leg filter can run to 5+ options, so it scrolls rather than clipping. */ .spl-legfilter { margin-left: auto; } /* Leg column (Athletes mode): narrow, muted, sortable — groups the grid by leg. */ .spl-th-leg, .spl-legcell { width: 2.6em; min-width: 2.6em; } .spl-legcell { color: var(--text-muted); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); } /* Athlete row in a relay: the team name rides under the runner's name so the frozen column still answers "whose leg was that?" when sorted by bike. */ .spl-name .spl-nm { line-height: 1.15; } .spl-team { display: block; font-size: var(--text-micro); font-weight: var(--font-weight-normal); color: var(--text-muted); } /* What the timer logged against the athlete: why a race ended, or a penalty served during it. Rides under the name like the relay team line. */ .spl-note { display: block; font-size: var(--text-micro); font-weight: var(--font-weight-normal); color: var(--danger); white-space: normal; } @media (max-width: 480px) { /* Phone: the leg filter drops to its own row under the lens toggle rather than fighting it for the same line. */ .spl-legfilter { margin-left: 0; } } .spider-tbl .spider-remove-cell { padding: var(--space-1); width: 24px; } .spider-remove-btn { padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); color: var(--border-strong); font-size: var(--text-sm); } .spider-remove-btn:hover { background: var(--danger-bg); color: var(--danger); } /* Spider Teams mode (NCAA): a team row and its opened athletes are controls (tap to put that squad or athlete on the radar), so they read as tappable. Rows outside the scoring five are dimmed, not hidden: they are the depth the "All" average is taken over. */ .spider-tbl tr.spider-team-row, .spider-tbl tr.spider-team-athlete { cursor: pointer; } .spider-tbl tr.spider-team-athlete td:first-child { padding-left: var(--space-5); } .spider-tbl tr.nonscoring td { opacity: 0.62; } /* The Teams-lens tables size their columns instead of letting the auto layout hand the slack to the name: with a 110px name floor and a 400px table floor, Run was pushed past the right edge of a phone and only reachable by scrolling a table most people never scroll. Percentages, so the same rule holds in the narrow desktop column beside the radar. */ .spider-tbl--fit { table-layout: fixed; min-width: 0; } .spider-tbl--fit td, .spider-tbl--fit th { padding-left: var(--space-1); padding-right: var(--space-1); } .spider-tbl--fit td:first-child { min-width: 0; } .spider-tbl--fit .aname { max-width: none; } .spider-tbl--fit col.sc-name { width: 32%; } .spider-tbl--fit col.sc-leg { width: 14%; } .spider-tbl--fit col.sc-tran { width: 9%; } .spider-tbl--fit col.sc-act { width: 6%; } .spider-expand-btn { padding: var(--space-1) var(--space-2); font-size: var(--text-sm); } .spider-expand-btn:hover { color: var(--accent); } @media (min-width: 769px) { /* Desktop: the name has room to spell a school out. */ .spider-tbl--fit col.sc-name { width: 34%; } .spider-tbl--fit col.sc-leg { width: 14%; } .spider-tbl--fit col.sc-tran { width: 9%; } .spider-tbl--fit col.sc-act { width: 6%; } .spider-tbl { font-size: var(--text-md); } .spider-tbl thead th { font-size: var(--text-base); padding: var(--space-4); } .spider-tbl td { padding: var(--space-3); } .spider-tbl .aname { font-size: var(--text-md); max-width: 200px; } .spider-tbl .acountry { font-size: var(--text-base); } .spider-tbl .tval { font-size: var(--text-md); } .spider-tbl .rbadge { font-size: var(--text-sm); padding: 3px var(--space-4); } .spider-tbl .tpace { font-size: var(--text-sm); } .spider-tbl td:first-child { min-width: 140px; } .spider-tbl .spider-remove-col, .spider-tbl .spider-remove-cell { width: 32px; } .spider-remove-btn { font-size: var(--text-lg); padding: var(--space-3) var(--space-5); } .spider-expand-btn { font-size: var(--text-md); } } @media (min-width: 1200px) { .spider-tbl { font-size: var(--text-lg); } .spider-tbl .aname { font-size: var(--text-lg); } } /* ======================================== CHECKPOINT NAV ======================================== */ .checkpoint-navigation { display: flex; align-items: center; justify-content: center; gap: var(--space-6); padding: var(--space-6); background: linear-gradient(135deg, var(--accent), var(--accent-hover)); border-radius: var(--radius-xl); margin-bottom: var(--space-5); /* Checkpoint nav (Teams): gradient hero → toolbar. Always-dark chrome so its white-text children stay legible in both themes (--ink-2 would flip light). */ /* folded up from the SaaS layer 2026-09-03 */ background: var(--surface-inverse); border-radius: var(--radius-lg); } .checkpoint-nav-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--surface); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; } .checkpoint-nav-btn.disabled { opacity: 0.3; cursor: not-allowed; } .checkpoint-nav-btn .arrow { font-size: var(--text-lg); color: var(--accent); font-weight: bold; } .checkpoint-info { text-align: center; color: white; min-width: 160px; } .checkpoint-label { font-size: var(--text-xs); opacity: 0.9; text-transform: uppercase; letter-spacing: 1px; } .checkpoint-name { font-size: var(--text-xl); font-weight: var(--font-weight-bold); margin: var(--space-2) 0; } .checkpoint-indicator { display: flex; gap: var(--space-3); justify-content: center; margin-top: var(--space-3); } .checkpoint-indicator .dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); } .checkpoint-indicator .dot.active { background: white; transform: scale(1.5); } .checkpoint-indicator .dot.passed { background: rgba(255, 255, 255, 0.6); } @media (min-width: 769px) { .checkpoint-label { font-size: var(--text-md); letter-spacing: 1.2px; } .checkpoint-name { font-size: var(--text-2xl); } .checkpoint-info { min-width: 200px; } } @media (max-width: 768px) { .checkpoint-navigation { padding: var(--space-5); gap: var(--space-4); } .checkpoint-name { font-size: var(--text-lg); } .checkpoint-info { min-width: 120px; } } /* ======================================== ATHLETE BROWSER (.ab-*) ======================================== */ .ab-results { display: flex; flex-direction: column; gap: var(--space-2); max-height: 50vh; overflow-y: auto; } .ab-section-title { font-size: var(--text-eyebrow); font-weight: var(--font-weight-bold); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.5px; padding: var(--space-3) var(--space-2) var(--space-1); } .ab-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); font-size: var(--text-md); text-align: left; cursor: pointer; min-height: 44px; -webkit-tap-highlight-color: transparent; position: relative; } .ab-row:active { background: var(--accent-subtle); } .ab-name { flex: 1; font-weight: var(--font-weight-semibold); color: var(--text-2); } .ab-sub { font-size: var(--text-sm); color: var(--text-muted); } .ab-races-head { font-size: var(--text-md); padding: var(--space-1) 0 var(--space-3); color: var(--text-2); } .ab-star { font-size: var(--text-lg); color: var(--border-strong); padding: var(--space-2) var(--space-3); cursor: pointer; line-height: 1; flex-shrink: 0; border-radius: var(--radius-sm); transition: color var(--transition-fast), background var(--transition-fast); -webkit-tap-highlight-color: transparent; } .ab-star:hover { color: var(--warning); background: var(--surface-hover); } .ab-star.on { color: var(--major-accent); } .ab-icon { flex-shrink: 0; min-width: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-lg); text-align: center; } /* Shape + fit come from .team-logo; only the scale is local here. */ .ab-icon img.team-logo { height: 1.4em; } .ab-yob { font-size: var(--text-sm); color: var(--text-faint); font-weight: var(--font-weight-normal); } /* Start-list race number. Tabular + fixed width so the names stay in a column. */ .ab-bib { flex: none; min-width: 2.2em; text-align: right; font-family: var(--font-family-mono); font-variant-numeric: tabular-nums; font-size: var(--text-sm); color: var(--text-muted); } /* No number assigned yet (a late entry, added after the organiser drew the numbers). Fainter than a real one so the column still reads as numbers. */ .ab-bib-none { color: var(--text-faint); } /* Entered but not yet confirmed. Neutral, not amber or red: a waitlist position is a fact about the entry, not a problem with the athlete. These are excluded from the forecast until they are official, so the badge is also the reason a name on the start list is absent from the form guide. */ .ab-wait { flex: none; font-size: var(--text-xs); font-weight: var(--font-weight-bold); padding: 1px var(--space-2); border-radius: var(--radius-sm); background: var(--badge-neutral-bg); color: var(--badge-neutral-ink); } /* ======================================== ATHLETE PROFILE (.ap-*) ======================================== */ #athleteProfileSection { display: none; } #athleteProfileSection[style*="block"] { display: block !important; } #athleteProfileContent { background: var(--surface); border-radius: var(--radius-xl); padding: var(--space-4); } .ap-header { display: flex; gap: var(--space-6); align-items: flex-start; padding: var(--space-5); background: linear-gradient(135deg, var(--accent-subtle), var(--surface-tint)); border-radius: var(--radius-xl); margin-bottom: var(--space-6); } /* Race day: the athlete's race, live or about to be, above everything else on the profile (_liveMarkerHTML). A card with the danger stripe, and the landing's LIVE dot, still while it counts down and pulsing once it is on. */ .ap-live { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); border-left-color: var(--danger); color: var(--text); text-decoration: none; } .ap-live:hover { border-color: var(--danger); } .ap-live-body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .ap-live-when { font-weight: 700; color: var(--danger); font-variant-numeric: tabular-nums; } .ap-live-race { font-size: var(--text-sm); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ap-live-go { flex: none; font-size: var(--text-sm); font-weight: 600; color: var(--accent); } .ap-live--pre .lf-live-dot { animation: none; } .ap-photo { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid var(--surface); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); flex-shrink: 0; } .ap-photo-blank { display: flex; align-items: center; justify-content: center; background: var(--border); font-size: 32px; } .ap-header-body { flex: 1; min-width: 0; } .ap-name { font-size: var(--text-xl); font-weight: var(--font-weight-bold); color: var(--text-2); margin: 0 0 var(--space-2); display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; } /* The door to the athlete's map (/a/{id}/map): an icon the size of the star, at the right end of the Discipline trend heading (her call, 5 Oct 2026). */ .ap-map-link { margin-left: auto; display: inline-flex; color: var(--border-strong); line-height: 1; transition: color var(--transition-fast); -webkit-tap-highlight-color: transparent; } .ap-map-link:hover { color: var(--accent); } .ap-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } .ap-flag { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; } .ap-meta { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-4); } .ap-meta span + span { margin-left: var(--space-1); } .ap-ranks { display: flex; gap: var(--space-5); flex-wrap: wrap; } .ap-rank { display: flex; flex-direction: column; align-items: center; padding: var(--space-2) var(--space-5); } .ap-rank-val { font-size: var(--text-lg); font-weight: var(--font-weight-bold); color: var(--accent); } .ap-rank-lbl { font-size: var(--text-micro); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.5px; } /* The para rank is the one of these that goes somewhere (its sport class), so it is a button. Same card, plus the app's "this opens something" cues. */ .ap-rank-open { cursor: pointer; font: inherit; text-align: center; } .ap-rank-open:hover { border-color: var(--border-strong); background: var(--surface-hover); } .ap-rank-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .ap-rank-open .ap-rank-lbl { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; } @media (min-width: 769px) { .ap-photo { width: 120px; height: 120px; } .ap-name { font-size: var(--text-3xl); } .ap-meta { font-size: var(--text-md); } .ap-rank-val { font-size: var(--text-2xl); } .ap-rank-lbl { font-size: var(--text-base); } } .ap-fav-btn { background: transparent; border: none; cursor: pointer; font-size: var(--text-2xl); color: var(--border-strong); padding: 0 var(--space-2); line-height: 1; flex-shrink: 0; transition: color var(--transition-fast), transform var(--transition-fast); -webkit-tap-highlight-color: transparent; } .ap-fav-btn:hover { color: var(--warning); } .ap-fav-btn:active { transform: scale(0.9); } .ap-fav-btn.on { color: var(--major-accent); text-shadow: 0 0 6px rgba(245, 158, 11, 0.25); } .ap-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-bottom: var(--space-6); } .ap-stat { padding: var(--space-4) var(--space-2); text-align: center; } .ap-stat-val { display: block; font-size: var(--text-xl); font-weight: var(--font-weight-bold); color: var(--text-2); } .ap-stat-lbl { display: block; font-size: var(--text-micro); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.4px; margin-top: var(--space-1); } @media (min-width: 769px) { .ap-stat-val { font-size: var(--text-3xl); } .ap-stat-lbl { font-size: var(--text-base); } } .ap-upcoming { display: flex; gap: var(--space-4); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .ap-upcoming::-webkit-scrollbar { display: none; } .ap-upcoming-card { flex: 0 0 auto; min-width: 180px; } .ap-up-date { font-size: var(--text-xs); color: var(--text-muted); } .ap-up-title { font-size: var(--text-base); font-weight: var(--font-weight-semibold); color: var(--text-2); margin: var(--space-1) 0; } .ap-up-prog { font-size: var(--text-xs); color: var(--text-faint); } .ap-up-startlist { font-size: var(--text-xs); color: var(--accent); font-weight: var(--font-weight-bold); margin-top: var(--space-2); } .ap-upcoming-card.startlist-ready { border-color: var(--accent); cursor: pointer; } .ap-upcoming-card.startlist-ready:hover { background: var(--surface-hover); } .ap-legend { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); padding: 0 var(--space-2); } .ap-legend-chip { font-size: var(--text-xs); padding: var(--space-1) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--text-muted); display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ap-legend-dot { width: 7px; height: 7px; border-radius: 50%; } .ap-legend-count { color: var(--text-faint); font-weight: var(--font-weight-bold); } .ap-relay-tog { margin-left: auto; font-size: var(--text-sm); font-weight: 400; color: var(--text-faint); display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; } .ap-relay-tog input { margin: 0; } /* Best-of cards */ .ap-bests { display: flex; flex-direction: column; gap: var(--space-2); } .ap-best-card { display: grid; grid-template-columns: auto auto 1fr; gap: var(--space-4); align-items: center; cursor: pointer; text-align: left; min-height: 44px; min-width: 0; } .ap-best-card:hover, .ap-best-card:active { background: var(--surface-hover); } /* A WT card is an . It was a