/* ==================================================================
 * Backyard Timing – RESULTS PAGE DESIGN (0.34: new look)
 * Calm, like the rest of the platform (docs/redesign-plan.md):
 * light big type, numbers in a mono font, hairlines instead of boxes.
 *
 * Easy things to change (on body, so pop-ups and the owner bar use them too):
 *   --byt-accent  the race colour (Race setup › Results page; default red)
 *   --byt-ink     text      --byt-page  background     --byt-line  thin lines
 *   --byt-dim     runners who are out
 * body.byt-own   = our look (Geist, Linen, dark mode)
 * body.byt-blend = embedded on another website: see-through, simple font
 * Everything else starts with .byt-results so it never touches a host page.
 * ================================================================== */
body {
	--byt-accent: #C8102E;
	--byt-page: #FAFAF7;       /* page background */
	--byt-card: #FFFFFF;       /* opened rows, pop-ups, chips */
	--byt-paper: var(--byt-page);
	--byt-ink: #121211;
	--byt-on-ink: #FAFAF7;
	--byt-muted: #6F6D67;
	--byt-dim: #A3A19B;
	--byt-line: #E7E5E0;
	--byt-line-strong: #D3D0C8;
	--byt-soft: #F1F0EC;
	--byt-ok: #4F8A4B; --byt-ok-bg: #E9F0E6; --byt-ok-ink: #3E5A36;
	--byt-warn: #C08A2E; --byt-warn-bg: #F6EEDC; --byt-warn-ink: #6E5422;
	--byt-font: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--byt-mono: "Geist Mono", ui-monospace, Menlo, Consolas, monospace;
	background: var(--byt-page);
	color: var(--byt-ink);
	font-family: var(--byt-font);
}
/* Dark (our own page only – an embedded page follows the organiser's website) */
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) body.byt-own:not(.embed) {
		color-scheme: dark;
		--byt-page: #0E0E0D; --byt-card: #171716; --byt-ink: #EDEDEA; --byt-on-ink: #0E0E0D; --byt-muted: #8A8984; --byt-dim: #5C5B57;
		--byt-line: #262624; --byt-line-strong: #3A3A37; --byt-soft: #1D1D1B;
		--byt-ok: #7FA373; --byt-ok-bg: #1E2A1B; --byt-ok-ink: #A9C79E; --byt-warn: #C9A257; --byt-warn-bg: #2E2615; --byt-warn-ink: #E1C281;
	}
}
html[data-theme="dark"] body.byt-own:not(.embed) {
	color-scheme: dark;
	--byt-page: #0E0E0D; --byt-card: #171716; --byt-ink: #EDEDEA; --byt-on-ink: #0E0E0D; --byt-muted: #8A8984; --byt-dim: #5C5B57;
	--byt-line: #262624; --byt-line-strong: #3A3A37; --byt-soft: #1D1D1B;
	--byt-ok: #7FA373; --byt-ok-bg: #1E2A1B; --byt-ok-ink: #A9C79E; --byt-warn: #C9A257; --byt-warn-bg: #2E2615; --byt-warn-ink: #E1C281;
}
/* Embedded and blending in: see-through, the visitor's normal system font */
body.byt-blend { color-scheme: light; --byt-page: transparent; --byt-paper: transparent; --byt-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --byt-mono: var(--byt-font); background: transparent; }
body.byt-blend.embed { background: transparent; }
body .ic { width: 1.1em; height: 1.1em; vertical-align: -0.15em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.byt-results {
	font-family: var(--byt-font);
	color: var(--byt-ink);
	background: transparent;
	max-width: 1040px;
	margin: 0 auto;
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
}
.byt-results *, .byt-results *::before, .byt-results *::after { box-sizing: border-box; }
.byt-results .byt-loading { padding: 40px 0; text-align: center; font-size: 18px; color: var(--byt-muted); }
@keyframes byt-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes byt-pulse { 50% { opacity: 0.25; } }

/* ---------- Logo banner (wide logo): the organiser's picture comes first ---------- */
.byt-results .byt-banner { margin: 0 0 28px; }
.byt-results .byt-banner img {
	display: block; width: 100%; height: auto; max-height: 360px;
	object-fit: cover; border-radius: 18px;
}

/* ---------- Title row ---------- */
.byt-results .byt-head { display: flex; align-items: center; gap: 18px; margin: 0 0 22px; }
.byt-results .byt-logo-sq { width: 64px; height: 64px; object-fit: cover; border-radius: 14px; }
.byt-results .byt-title { min-width: 0; display: flex; flex-direction: column; }   /* live line sits above the name, like an eyebrow */
.byt-results .byt-title h2 {
	margin: 0; padding: 0; border: 0;
	font-family: var(--byt-font); font-size: clamp(32px, 4.5vw, 52px); font-weight: 400;
	letter-spacing: -0.045em; text-transform: none; line-height: 1.02; color: var(--byt-ink); text-wrap: balance;
}
.byt-results .byt-live { margin: 0 0 10px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--byt-muted); order: -1; }
.byt-results .byt-wx { margin: 10px 0 0; font-size: 14px; color: var(--byt-ink); font-variant-numeric: tabular-nums; }
.byt-results .byt-wx-k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--byt-muted); margin-right: 6px; }
.byt-results .byt-wx a { font-size: 11px; color: var(--byt-muted); text-decoration: none; margin-left: 4px; }
.byt-results .byt-wx a:hover { text-decoration: underline; }
.byt-results .byt-dot {
	display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--byt-accent);
	margin-right: 6px; vertical-align: 1px; animation: byt-pulse 2s ease-in-out infinite;
}
.byt-results.byt-stale .byt-dot { animation: none; background: var(--byt-warn); }
.byt-results.byt-offline .byt-dot { animation: none; background: #E5182B; }
.byt-results.byt-finished .byt-dot { animation: none; background: var(--byt-dim); }
.byt-results.byt-offline .byt-live::after { content: " · " attr(data-off); }

/* ---------- Numbers: a hairline scoreboard row (the ink line draws itself in) ---------- */
.byt-results .byt-stats { position: relative; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 0; margin: 0 0 28px; border-bottom: 1px solid var(--byt-line); }
.byt-results .byt-stats::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--byt-ink); transform-origin: left; animation: byt-draw .7s cubic-bezier(.65, 0, .35, 1) .1s backwards; }
.byt-results .byt-stat {
	border: 0; border-left: 1px solid var(--byt-line); border-radius: 0; padding: 14px 16px 16px;
	display: flex; flex-direction: column; min-width: 0;
}
.byt-results .byt-stat:first-child { border-left: 0; padding-left: 0; }
.byt-results .byt-stat-main { background: none; color: inherit; }
.byt-results .byt-k { font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; color: var(--byt-muted); }
.byt-results .byt-v {
	font-family: var(--byt-mono); font-size: clamp(28px, 4.6vw, 48px); font-weight: 400; line-height: 1.05;
	font-variant-numeric: tabular-nums; letter-spacing: -0.03em; margin: 8px 0 4px; white-space: nowrap;
}
.byt-results .byt-stat-main .byt-v { font-weight: 300; font-size: clamp(36px, 6vw, 64px); letter-spacing: -0.05em; }
.byt-results .byt-v small { font-family: var(--byt-font); font-size: .35em; letter-spacing: .02em; color: var(--byt-muted); margin-left: 2px; }
.byt-results .byt-s { font-size: 13px; color: var(--byt-muted); }

/* ---------- Results table ---------- */
.byt-results .byt-table-wrap { width: 100%; overflow-x: auto; }
.byt-results .byt-table {
	width: 100%; border-collapse: collapse; border: 0; margin: 0;
	font-size: 15.5px; font-variant-numeric: tabular-nums;
}
.byt-results .byt-table th {
	text-align: left; font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap;
	padding: 10px 8px 9px; border: 0; color: var(--byt-muted);
	background: linear-gradient(var(--byt-ink), var(--byt-ink)) no-repeat left bottom / 100% 1px;
	animation: byt-th .45s cubic-bezier(.65, 0, .35, 1) backwards;
}
@keyframes byt-th { from { background-size: 0 1px; } }
.byt-results .byt-table td {
	padding: 13px 8px; border: 0; border-bottom: 1px solid var(--byt-line);
	vertical-align: middle; background: none; color: inherit;
}
.byt-results .byt-row { cursor: pointer; transition: background 0.15s; }
.byt-results .byt-row:hover td { background: var(--byt-soft); }
.byt-results .byt-c-place { width: 44px; font-family: var(--byt-mono); color: var(--byt-muted); }
.byt-results .byt-c-bib { width: 56px; font-family: var(--byt-mono); color: var(--byt-muted); }
.byt-results .byt-c-name { font-weight: 500; }
.byt-results .byt-c-num { text-align: right; white-space: nowrap; font-family: var(--byt-mono); }
.byt-results .byt-c-status { width: 130px; text-align: right; }
.byt-results .byt-laps { font-family: var(--byt-mono); font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
.byt-results .byt-country {
	display: inline-block; font-size: 11px; font-weight: 400; letter-spacing: 0.06em; color: var(--byt-muted);
	border: 1px solid var(--byt-line-strong); border-radius: 4px; padding: 0 4px; margin-left: 4px; vertical-align: 2px;
}

/* Status labels: soft pills with a dot */
.byt-results .byt-pill {
	display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0;
	padding: 3px 10px; border-radius: 999px; border: 0; white-space: nowrap; background: var(--byt-soft); color: var(--byt-muted);
}
.byt-results .byt-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.byt-results .byt-st-oncourse .byt-pill { background: color-mix(in srgb, var(--byt-accent) 14%, transparent); color: var(--byt-accent); }
.byt-results .byt-st-resting .byt-pill { background: var(--byt-ok-bg); color: var(--byt-ok-ink); }
.byt-results .byt-st-ready .byt-pill { background: var(--byt-soft); color: var(--byt-ink); }
.byt-results .byt-st-out td,
.byt-results .byt-st-late td,
.byt-results .byt-st-dnf td { color: var(--byt-dim); }
.byt-results .byt-st-out .byt-pill,
.byt-results .byt-st-late .byt-pill,
.byt-results .byt-st-dnf .byt-pill { background: transparent; color: var(--byt-dim); box-shadow: inset 0 0 0 1px var(--byt-line-strong); }
.byt-results .byt-st-winner td { background: var(--byt-soft); color: var(--byt-ink); }
.byt-results .byt-st-winner .byt-c-name { font-size: 1.05em; }
.byt-results .byt-st-winner .byt-pill { background: var(--byt-ink); color: var(--byt-on-ink); }
.byt-results .byt-st-winner:hover td { background: var(--byt-line); }

/* Opened row with lap times */
.byt-results .byt-detail td { background: var(--byt-card); padding: 14px 10px 16px; }
.byt-results .byt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.byt-results .byt-chip {
	font-family: var(--byt-mono); font-size: 12.5px; background: var(--byt-page); border: 1px solid var(--byt-line);
	border-radius: 8px; padding: 3px 8px;
}
.byt-results .byt-chip b { font-weight: 500; margin-right: 4px; color: var(--byt-muted); }
.byt-results .byt-muted { color: var(--byt-muted); font-size: 13px; }
.byt-results .byt-note { color: var(--byt-muted); font-size: 13px; margin: 14px 0 0; }

/* ---------- Phones ---------- */
@media (max-width: 640px) {
	.byt-results .byt-stats { grid-template-columns: 1fr 1fr 1fr; }
	.byt-results .byt-stat { padding: 10px 10px 12px; }
	.byt-results .byt-stat .byt-v { font-size: 26px; }
	.byt-results .byt-stat-main { grid-column: 1 / -1; border-bottom: 1px solid var(--byt-line); padding-left: 0; }
	.byt-results .byt-stat-main .byt-v { font-size: 52px; }
	.byt-results .byt-stat-main + .byt-stat { border-left: 0; padding-left: 0; }
	.byt-results .byt-hide-sm,
	.byt-results .byt-country { display: none; }
	.byt-results .byt-table { font-size: 15px; }
	.byt-results .byt-table td { padding: 12px 5px; }
	.byt-results .byt-c-place { width: 28px; }
	.byt-results .byt-c-bib { width: 40px; }
	.byt-results .byt-c-status { width: auto; }
	.byt-results .byt-pill { padding: 2px 8px; font-size: 11px; }
}

/* ---------- Flags, Men/Women tabs, goal badges, late finish ---------- */
.byt-results .byt-flag {
	width: 22px; height: 15px; object-fit: cover; border-radius: 3px; vertical-align: -2px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.byt-results .byt-cc {
	display: inline-block; font-size: 10px; font-weight: 400; letter-spacing: 0.05em; color: var(--byt-muted);
	border: 1px solid var(--byt-line-strong); border-radius: 3px; padding: 0 3px; vertical-align: 2px;
}
.byt-results .byt-st-out .byt-flag, .byt-results .byt-st-late .byt-flag, .byt-results .byt-st-dnf .byt-flag { opacity: 0.45; }
/* All / Men / Women */
.byt-results .byt-tabs { display: flex; gap: 4px; margin: 0 0 12px; padding: 3px; border-radius: 999px; background: var(--byt-card); box-shadow: inset 0 0 0 1px var(--byt-line); width: max-content; max-width: 100%; }
.byt-results .byt-tabs button {
	font-family: var(--byt-font); font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0;
	padding: 7px 16px; border: 0; border-radius: 999px; background: transparent;
	color: var(--byt-muted); cursor: pointer; line-height: 1; transition: background .2s, color .2s;
}
.byt-results .byt-tabs button.on { background: var(--byt-ink); color: var(--byt-on-ink); }
/* Goal badges next to the laps */
.byt-results .byt-goal {
	display: inline-block; margin-left: 6px; min-width: 24px; padding: 2px 7px; border-radius: 999px;
	font-family: var(--byt-mono); font-size: 11.5px; font-weight: 400; text-align: center; vertical-align: 4px; line-height: 1.2;
}
.byt-results .byt-goal-beat { background: var(--byt-accent); color: #fff; }
.byt-results .byt-goal-hit { box-shadow: inset 0 0 0 1px var(--byt-ink); }
.byt-results .byt-st-winner .byt-goal-beat { background: var(--byt-accent); color: #fff; }
.byt-results .byt-goalcol { color: var(--byt-muted); font-family: var(--byt-mono); }
.byt-results .byt-latetime { text-decoration: line-through; }
.byt-results .byt-chip-late { text-decoration: line-through; color: var(--byt-muted); }
.byt-results .byt-note a { color: inherit; font-weight: 500; }

/* ==================================================================
 * TV MODE – the whole screen (results page with ?tv=1)
 * ================================================================== */
html.byt-tv-on, html.byt-tv-on body { overflow: hidden !important; }
.byt-results.byt-tv {
	position: fixed; inset: 0; z-index: 999999; max-width: none; margin: 0;
	box-sizing: border-box; width: 100vw; height: 100vh; height: 100dvh;
	display: flex; flex-direction: column; overflow: hidden;
	padding: 1.6vh 1.6vw; background: var(--byt-page);
}
body.byt-blend .byt-results.byt-tv { background: #FAFAF7; }
.byt-tv .byt-tv-head {
	flex: none; display: flex; align-items: center; gap: 1vw; padding-bottom: 1.2vh; margin-bottom: 1.4vh;
	border-bottom: 1px solid var(--byt-ink);
}
.byt-tv .byt-tv-logo { width: 5vw; height: 5vw; object-fit: cover; border-radius: 1vw; }
.byt-tv .byt-tv-title { flex: 1; min-width: 0; }
.byt-tv .byt-tv-title h2 {
	margin: 0; padding: 0; border: 0; font-family: var(--byt-font); color: var(--byt-ink);
	font-size: 2.3vw; font-weight: 400; text-transform: none; letter-spacing: -0.04em; line-height: 1;
}
.byt-tv .byt-live { font-size: 0.85vw; margin: 0.4vw 0 0; }
.byt-tv .byt-wx { font-size: 0.85vw; margin: 0.3vw 0 0; }
.byt-tv .byt-wx-k, .byt-tv .byt-wx a { font-size: 0.75vw; }
.byt-tv .byt-tv-clock, .byt-tv .byt-tv-stat {
	display: flex; flex-direction: column; justify-content: center; padding: 0.4vw 1.2vw;
	border: 0; border-left: 1px solid var(--byt-line); border-radius: 0; min-width: 7.5vw;
}
.byt-tv .byt-tv-clock { background: none; color: var(--byt-ink); min-width: 13vw; }
.byt-tv .byt-k { font-size: 0.8vw; }
.byt-tv .byt-v { font-size: 2.8vw; margin: 0.2vw 0 0; white-space: nowrap; }
.byt-tv .byt-v small { font-size: 0.4em; }
.byt-tv .byt-tv-clock .byt-v { font-size: 4vw; font-weight: 300; letter-spacing: -0.05em; }
.byt-tv .byt-s { font-size: 0.8vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.byt-tv .byt-tv-fast { max-width: 15vw; }
/* Window controls (minimize · full screen · close), upper right */
.byt-tv .byt-tv-ctrls { align-self: flex-start; display: flex; flex-direction: column; align-items: flex-end; gap: 0.6vw; margin-left: 0.4vw; }
.byt-tv .byt-tv-ctrl {
	display: flex; gap: 0; margin-left: 0;
	border: 1px solid var(--byt-line-strong); border-radius: 999px; overflow: hidden; background: var(--byt-card);
	transition: opacity 0.4s;
}
.byt-tv .byt-tv-ctrl button {
	width: 2.6vw; height: 2.2vw; min-width: 34px; min-height: 30px; padding: 0; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	background: transparent; color: var(--byt-ink); border: 0; border-left: 1px solid var(--byt-line);
}
.byt-tv .byt-tv-ctrl button:first-child { border-left: 0; }
.byt-tv .byt-tv-ctrl button:hover { background: var(--byt-ink); color: var(--byt-on-ink); }
.byt-tv .byt-tv-ctrl button.off { color: var(--byt-dim); cursor: default; }
.byt-tv .byt-tv-ctrl button.off:hover { background: transparent; color: var(--byt-dim); }
.byt-tv .byt-tv-ctrl svg { width: 55%; height: 55%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.byt-tv .byt-tv-viewbtn button { width: 2.6vw; }
/* After 3 s without mouse movement: hide the controls and the mouse pointer */
.byt-tv.byt-idle, .byt-tv.byt-idle * { cursor: none !important; }
.byt-tv.byt-idle .byt-tv-ctrl { opacity: 0; pointer-events: none; }

/* The tiles fill the rest of the screen. results.js works out columns/rows (fitTiles)
   and sets --th / --tw = tile height / width; every size inside is a share of the tile. */
.byt-tv .byt-tv-grid { flex: 1; min-height: 0; display: grid; }
.byt-tv .byt-tv-grid[hidden] { display: none; }
.byt-tv .byt-tile {
	--th: 140px; --tw: 240px;
	background: var(--byt-card); border: 1px solid var(--byt-line-strong); border-radius: calc(var(--th) * 0.1);
	padding: calc(var(--th) * 0.08) calc(var(--th) * 0.1);
	display: flex; flex-direction: column; justify-content: space-between; min-width: 0; min-height: 0; overflow: hidden;
}
.byt-tv .byt-tile-top { display: flex; align-items: center; justify-content: space-between; }
.byt-tv .byt-tile-bib { font-family: var(--byt-mono); font-size: calc(var(--th) * 0.17); font-weight: 400; line-height: 1; color: var(--byt-muted); }
.byt-tv .byt-tile .byt-flag { height: calc(var(--th) * 0.12); width: calc(var(--th) * 0.18); }
.byt-tv .byt-tile .byt-cc { font-size: calc(var(--th) * 0.08); }
.byt-tv .byt-tile-name {
	font-size: min(calc(var(--th) * 0.14), calc(var(--tw) * 0.08)); line-height: 1.15; letter-spacing: -0.02em;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.byt-tv .byt-tile-bottom { display: flex; align-items: baseline; gap: calc(var(--th) * 0.04); min-width: 0; }
.byt-tv .byt-tile-laps { font-family: var(--byt-mono); font-size: calc(var(--th) * 0.34); font-weight: 400; line-height: 0.9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.byt-tv .byt-tile .byt-goal { font-size: calc(var(--th) * 0.085); vertical-align: 0; margin-left: 0; padding: 0.15em 0.45em; }
.byt-tv .byt-tile-status {
	margin-left: auto; white-space: nowrap; font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; color: var(--byt-muted);
	font-size: min(calc(var(--th) * 0.075), calc(var(--tw) * 0.045));
}
.byt-tv .byt-tile-km { font-family: var(--byt-mono); font-size: min(calc(var(--th) * 0.085), calc(var(--tw) * 0.05)); font-weight: 400; color: var(--byt-muted); white-space: nowrap; }
/* Tile colours by status: done this lap = filled ink, out = faint */
.byt-tv .byt-tile.byt-st-resting { background: var(--byt-ink); border-color: var(--byt-ink); color: var(--byt-on-ink); }
.byt-tv .byt-tile.byt-st-resting .byt-tile-bib, .byt-tv .byt-tile.byt-st-resting .byt-tile-status, .byt-tv .byt-tile.byt-st-resting .byt-tile-km { color: var(--byt-on-ink); opacity: .7; }
.byt-tv .byt-tile.byt-st-resting .byt-goal-hit { box-shadow: inset 0 0 0 1px var(--byt-on-ink); }
.byt-tv .byt-tile.byt-st-oncourse .byt-tile-status { color: var(--byt-accent); }
.byt-tv .byt-tile.byt-st-out, .byt-tv .byt-tile.byt-st-late, .byt-tv .byt-tile.byt-st-dnf {
	background: transparent; border-color: var(--byt-line); color: var(--byt-dim);
}
.byt-tv .byt-tile.byt-st-winner {
	grid-column: span 2; background: var(--byt-ink); border-color: var(--byt-ink); color: var(--byt-on-ink);
	box-shadow: 0 0 0 3px var(--byt-page), 0 0 0 4px var(--byt-accent);
}
.byt-tv .byt-tile.byt-st-winner .byt-tile-status { font-size: calc(var(--th) * 0.11); color: var(--byt-on-ink); }
.byt-tv .byt-tile.byt-st-winner .byt-tile-bib { color: var(--byt-on-ink); opacity: .7; }
.byt-tv .byt-tile.byt-st-atclose { background: var(--byt-card); }
/* TV before anyone has checked in */
.byt-tv .byt-tv-empty {
	display: flex; align-items: center; justify-content: center; text-align: center;
	font-size: 2.6vw; font-weight: 400; letter-spacing: -0.02em; color: var(--byt-dim);
	border: 1px dashed var(--byt-line-strong); border-radius: 1.4vw;
}

/* ---------- Tabs row with "Fastest lap" on the right, runner detail ---------- */
.byt-results .byt-bar {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px;
}
.byt-results .byt-bar .byt-tabs { margin: 0; }
.byt-results .byt-fastest { margin-left: auto; font-size: 14px; text-align: right; }
.byt-results .byt-fastest b { font-family: var(--byt-mono); font-weight: 500; }
.byt-results .byt-fastest .byt-k { margin-right: 6px; }
.byt-results .byt-dstats { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 10px; font-size: 13px; }
.byt-results .byt-dstats span { color: var(--byt-muted); }
.byt-results .byt-dstats b { color: var(--byt-ink); font-family: var(--byt-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.byt-results .byt-chip.byt-chip-best { background: var(--byt-ink); color: var(--byt-on-ink); border-color: var(--byt-ink); }
.byt-results .byt-chip.byt-chip-best b { color: var(--byt-on-ink); }
@media (max-width: 640px) {
	.byt-results .byt-fastest { margin-left: 0; text-align: left; flex-basis: 100%; }
}

/* ---------- RACE FINISHED – clock stopped, nobody greyed out ---------- */
.byt-results.byt-finished .byt-stat-main .byt-v,
.byt-results.byt-finished .byt-tv-clock .byt-v { font-family: var(--byt-font); text-transform: none; letter-spacing: -0.03em; }
.byt-results.byt-finished .byt-stat-main .byt-v { font-size: clamp(24px, 3vw, 34px); font-weight: 400; }
.byt-tv.byt-finished .byt-tv-clock .byt-v { font-size: 2.4vw; }
.byt-tv.byt-finished .byt-tv-clock .byt-s { display: block; font-size: 0.8vw; }
.byt-results.byt-finished .byt-st-dnf td { color: var(--byt-ink); }
.byt-results.byt-finished .byt-st-dnf .byt-pill { color: var(--byt-muted); }
.byt-results.byt-finished .byt-st-dnf .byt-flag { opacity: 1; }
.byt-tv.byt-finished .byt-tile.byt-st-dnf { border-color: var(--byt-line-strong); color: var(--byt-ink); }

/* ---------- Past editions, runner actions (share image / link), credit line ---------- */
.byt-results .byt-archive-bar {
	display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 0 0 18px; padding: 12px 16px;
	background: var(--byt-warn-bg); color: var(--byt-warn-ink); border-radius: 12px; font-size: 15px;
}
.byt-results .byt-archive-bar a { color: inherit; margin-left: auto; font-weight: 500; }
.byt-results .byt-past { margin: 22px 0 0; font-size: 14px; color: var(--byt-muted); }
.byt-results .byt-past a { color: var(--byt-ink); font-weight: 400; text-underline-offset: 3px; }
.byt-results .byt-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.byt-results .byt-act {
	font: 500 13px var(--byt-font); padding: 8px 16px; cursor: pointer; border-radius: 999px;
	background: var(--byt-ink); color: var(--byt-on-ink); border: 1px solid var(--byt-ink);
}
.byt-results .byt-act + .byt-act { background: transparent; color: var(--byt-ink); border-color: var(--byt-line-strong); }
.byt-results a.byt-act { text-decoration: none; display: inline-block; }
.byt-results .byt-credit { margin: 32px 0 0; padding-top: 16px; border-top: 1px solid var(--byt-line); font-size: 12px; color: var(--byt-muted); text-align: center; }
.byt-results .byt-credit a { color: var(--byt-muted); }
.byt-results .byt-unlicensed { color: var(--byt-ink); font-weight: 500; }
.byt-results .byt-tv-credit { position: fixed; right: 12px; bottom: 8px; font-size: 11px; color: var(--byt-muted); opacity: 0.7; pointer-events: none; }

/* ==================================================================
 * ANNOUNCER SCREEN (?mode=announcer) – for the speaker
 * Always dark, big, readable from a metre away on a laptop or tablet.
 * ================================================================== */
html.byt-ann-on body { background: #0E0E0D; }
html.byt-ann-on .page { padding: 0; }
.byt-results.byt-ann {
	--byt-ink: #EDEDEA; --byt-muted: #8A8984; --byt-line: #262624;
	max-width: none; margin: 0; min-height: 100vh; box-sizing: border-box; padding: 22px 24px 32px;
	background: #0E0E0D; color: #EDEDEA; font-family: var(--byt-font);
}
.byt-ann .byt-ann-head { display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: stretch; border-bottom: 1px solid #EDEDEA; padding-bottom: 16px; margin-bottom: 18px; }
.byt-ann .byt-ann-title { flex: 1 1 280px; display: flex; gap: 14px; align-items: center; min-width: 0; }
.byt-ann .byt-ann-title img { width: 60px; height: 60px; border-radius: 14px; object-fit: cover; }
.byt-ann .byt-ann-title h2 { margin: 0; padding: 0; border: 0; color: #fff; font-size: clamp(24px, 2.6vw, 42px); font-weight: 400; letter-spacing: -0.04em; text-transform: none; line-height: 1.05; }
.byt-ann .byt-ann-title p { margin: 4px 0 0; color: #8A8984; font-size: 14px; }
.byt-ann .byt-ann-clock, .byt-ann .byt-ann-stat { display: flex; flex-direction: column; justify-content: center; min-width: 120px; padding-left: 20px; border-left: 1px solid #262624; }
.byt-ann .byt-k { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: #8A8984; font-weight: 400; }
.byt-ann .byt-v { font-family: var(--byt-mono); font-size: clamp(30px, 4vw, 60px); font-weight: 400; font-variant-numeric: tabular-nums; line-height: 1.05; color: #fff; letter-spacing: -0.03em; }
.byt-ann .byt-v small { font-size: .4em; }
.byt-ann .byt-s { font-size: 13px; color: #8A8984; }
.byt-ann .byt-ann-clock .byt-v { color: #FFD60A; font-weight: 300; }
.byt-ann .byt-ann-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
@media (max-width: 1000px) { .byt-ann .byt-ann-cols { grid-template-columns: 1fr; } }
.byt-ann h3 { margin: 0 0 10px; font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: .1em; color: #FFD60A; }
.byt-ann .byt-ann-list { list-style: none; margin: 0; padding: 0; }
.byt-ann .byt-ann-list li { position: relative; padding: 10px 76px 10px 0; border-bottom: 1px solid #262624; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.25; }
.byt-ann .byt-ann-list li b { color: #fff; font-weight: 500; }
.byt-ann .byt-ann-bib { display: inline-block; min-width: 2.4em; margin-right: 8px; padding: 1px 7px; border-radius: 8px; background: #EDEDEA; color: #0E0E0D; font-family: var(--byt-mono); font-weight: 500; text-align: center; font-variant-numeric: tabular-nums; }
.byt-ann .byt-ann-time { position: absolute; right: 0; top: 10px; font-family: var(--byt-mono); font-weight: 400; font-variant-numeric: tabular-nums; color: #fff; }
.byt-ann .byt-ann-sub { font-size: 14px; color: #A8A6A0; margin-top: 3px; }
.byt-ann .byt-ann-late { background: rgba(255, 69, 58, .12); }
.byt-ann .byt-ann-late .byt-ann-sub { color: #FF8A80; font-weight: 500; }
.byt-ann .byt-tag { display: inline-block; margin: 3px 4px 0 0; padding: 1px 9px; border-radius: 99px; font-size: 13px; font-weight: 500; }
.byt-ann .byt-tag-fast { background: #FFD60A; color: #000; }
.byt-ann .byt-tag-goal { background: #30D158; color: #000; }
.byt-ann .byt-tag-mile { background: #0A84FF; color: #fff; }
.byt-ann .byt-ann-talk { margin: 0; padding-left: 20px; }
.byt-ann .byt-ann-talk li { margin-bottom: 12px; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.4; }
.byt-ann .byt-muted { color: #8A8984; }
.byt-ann .byt-flag { height: .8em; vertical-align: baseline; margin-right: 4px; }
.byt-ann .byt-ann-time small { font-size: .6em; font-weight: 400; color: #A8A6A0; }

/* ---------- DNF reason in small text ---------- */
.byt-results .byt-reason { display: block; margin-top: 4px; font-size: 11px; font-weight: 400; color: var(--byt-dim); white-space: nowrap; letter-spacing: 0; text-transform: none; }
.byt-results.byt-finished .byt-reason { color: var(--byt-muted); }
.byt-results .byt-st-atclose .byt-pill { background: var(--byt-card); color: var(--byt-ink); box-shadow: inset 0 0 0 1px var(--byt-ink); }

/* ---------- Estimated position, tracking link, course map ---------- */
.byt-results .byt-prog { display: block; width: 64px; height: 2px; margin: 6px 0 0 auto; background: var(--byt-line); border-radius: 2px; overflow: hidden; }
.byt-results .byt-prog i { display: block; height: 100%; background: var(--byt-accent); border-radius: 2px; }
.byt-results .byt-track { text-decoration: none; font-size: .9em; margin-left: 4px; }
.byt-results .byt-maps { margin: 32px 0 8px; }
.byt-results .byt-maps h3 { font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: .1em; color: var(--byt-muted); margin: 0 0 12px; }
.byt-results .byt-maps-row { display: flex; gap: 16px; flex-wrap: wrap; }
.byt-results .byt-map { margin: 0; flex: 0 1 280px; max-width: 280px; border: 1px solid var(--byt-line); border-radius: 16px; padding: 14px; color: var(--byt-ink); background: var(--byt-card); }
.byt-results .byt-map-now { border-color: var(--byt-accent); color: var(--byt-accent); }
.byt-results .byt-map svg { width: 100%; height: auto; display: block; }
.byt-results .byt-map-start { fill: var(--byt-ink); }
.byt-results .byt-map figcaption { font-size: 13px; margin-top: 8px; color: var(--byt-ink); }
.byt-results .byt-map figcaption a { color: inherit; }

/* ==================================================================
 * COURSE VIEW – TV map mode, course strip, map (course.js)
 * ================================================================== */
.byt-results .byt-maplink { margin-left: auto; font-size: 13px; font-weight: 400; color: var(--byt-ink); text-decoration: none; border: 1px solid var(--byt-line-strong); border-radius: 999px; padding: 5px 14px; white-space: nowrap; }
.byt-results .byt-maplink:hover { border-color: var(--byt-ink); }
.byt-tv .byt-tv-ctrl .ic-tiles { display: none; }
.byt-tv.byt-tv-mapmode .byt-tv-ctrl .ic-tiles { display: block; }
.byt-tv.byt-tv-mapmode .byt-tv-ctrl .ic-map { display: none; }
.byt-tv .byt-tv-map { flex: 1; min-height: 0; display: flex; }
.byt-tv .byt-tv-map[hidden] { display: none; }
.byt-results .cv { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1vh; width: 100%; }
.byt-results .cv-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.byt-results .cv-note { font-size: 12px; color: var(--byt-accent); font-weight: 500; }
.byt-results .cv-off .cv-note { visibility: hidden; }
.byt-results .cv-switch { display: flex; padding: 3px; gap: 3px; border-radius: 999px; background: var(--byt-card); box-shadow: inset 0 0 0 1px var(--byt-line); }
.byt-results .cv-switch[hidden] { display: none; }
.byt-results .cv-switch button { border: 0; border-radius: 999px; background: transparent; color: var(--byt-muted); font: 400 13px var(--byt-font); padding: 6px 14px; cursor: pointer; }
.byt-results .cv-switch button.on { background: var(--byt-ink); color: var(--byt-on-ink); }
.byt-results .cv-map { flex: 1; min-height: 0; position: relative; border: 1px solid var(--byt-line-strong); border-radius: 16px; overflow: hidden; background: #F1F0EC; }
.byt-results .cv-map[hidden], .byt-results .cv-strip[hidden] { display: none; }
.byt-results .cv-leaflet { position: absolute; inset: 0; }
.byt-results .cv-strip { flex: none; border: 1px solid var(--byt-line-strong); border-radius: 16px; overflow: hidden; background: var(--byt-card); }
.byt-results .cv-strip svg { display: block; width: 100%; height: auto; }
.byt-results .cv-prof { fill: var(--byt-soft); }
.byt-results .cv-line { stroke: var(--byt-ink); stroke-width: 2; }
.byt-results .cv-tick { stroke: var(--byt-ink); stroke-width: 1.5; }
.byt-results .cv-axis { font: 400 12px var(--byt-mono); fill: var(--byt-muted); }
.byt-results .cv-flag { font-size: 18px; }
.byt-results .cv-corral { fill: var(--byt-soft); stroke: var(--byt-ink); stroke-width: 1.5; }
.byt-results .cv-corral-n { font: 400 26px var(--byt-mono); fill: var(--byt-ink); }
.byt-results .cv-corral-t { font: 400 11px var(--byt-font); fill: var(--byt-muted); }
.byt-results .cv-dot circle { fill: var(--byt-ink); stroke: var(--byt-page); stroke-width: 2; }
.byt-results .cv-dot text { font: 500 11px var(--byt-mono); fill: var(--byt-on-ink); pointer-events: none; }
.byt-results .cv-dot.cv-late circle { fill: #C08A2E; }
.byt-results .cv-dot.cv-hl circle { fill: var(--byt-accent); stroke: var(--byt-ink); stroke-width: 2.5; }
.byt-results .cv-dot.cv-cluster circle { fill: var(--byt-muted); }
.byt-results .cv-oval { width: 100%; height: 100%; display: block; }
.byt-results .cv-oval-path { fill: none; stroke: var(--byt-accent); stroke-width: 12; }
.byt-results .cv-oval-start line { stroke: var(--byt-ink); stroke-width: 5; }
.byt-results .cv-oval-start text { font: 400 22px var(--byt-font); text-anchor: middle; fill: var(--byt-ink); }
.byt-results .cv-oval .cv-dot text { font-size: 15px; }
.byt-results .cv-hint { position: absolute; left: 12px; bottom: 6px; margin: 0; font-size: 12px; color: #6F6D67; }
.byt-results .cv-follow { margin: 0; font-size: 15px; }
.byt-results .cv-follow:empty { display: none; }
.byt-results .cv-leaflet.leaflet-container, .byt-results .cv-leaflet .leaflet-container { background: #F1F0EC; }
.byt-results .cv-list { list-style: none; margin: 4px 0 0; padding: 0; columns: 2; column-gap: 12px; }
.byt-results .cv-list li { break-inside: avoid; display: flex; flex-wrap: wrap; gap: 0 8px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--byt-line); font-size: 14px; }
.byt-results .cv-list li b { min-width: 2.2em; font-family: var(--byt-mono); font-weight: 500; }
.byt-results .cv-list li small { flex-basis: 100%; color: var(--byt-dim); font-size: 11px; }
.byt-results .cv-list li.cv-late b, .byt-results .cv-list li.cv-late small { color: #C08A2E; }
.byt-results .cv-list li.cv-hl b { color: var(--byt-accent); }
/* Leaflet markers (outside .byt-results) */
.cv-mk { width: 30px; height: 30px; border-radius: 50%; background: #121211; color: #fff; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4);
	display: flex !important; align-items: center; justify-content: center; font: 500 12px "Geist Mono", ui-monospace, monospace; }
.cv-mk.cv-late { background: #C08A2E; }
.cv-mk.cv-hl { background: var(--byt-accent, #C8102E); border-color: #121211; border-width: 3px; }
.cv-mk-group { background: #6F6D67; font-size: 13px; }
.cv-start span { display: inline-block; transform: translate(-50%, -150%); background: #121211; color: #fff; font: 500 12px "Geist", system-ui, sans-serif; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.cv-recenter { background: #fff; color: #121211; border: 1px solid rgba(0,0,0,.2); border-radius: 999px; padding: 5px 11px; font: 500 13px "Geist", system-ui, sans-serif; cursor: pointer; }
.cv-recenter:hover { background: #F1F0EC; }
/* TV map mode on a phone (opened from the results page): readable header */
@media (max-width: 760px) {
	.byt-tv.byt-tv-mapmode { padding: 10px; overflow-y: auto; }
	.byt-tv.byt-tv-mapmode .byt-tv-head { flex-wrap: wrap; gap: 8px; }
	.byt-tv.byt-tv-mapmode .byt-tv-logo { width: 44px; height: 44px; }
	.byt-tv.byt-tv-mapmode .byt-tv-title { flex: 1 1 calc(100% - 140px); }
	.byt-tv.byt-tv-mapmode .byt-tv-title h2 { font-size: 22px; }
	.byt-tv.byt-tv-mapmode .byt-live, .byt-tv.byt-tv-mapmode .byt-k, .byt-tv.byt-tv-mapmode .byt-s { font-size: 11px; }
	.byt-tv.byt-tv-mapmode .byt-tv-clock, .byt-tv.byt-tv-mapmode .byt-tv-stat { flex: 1 1 40%; min-width: 0; padding: 6px 8px; }
	.byt-tv.byt-tv-mapmode .byt-v, .byt-tv.byt-tv-mapmode .byt-tv-clock .byt-v { font-size: 22px; }
	.byt-tv.byt-tv-mapmode .byt-tv-fast { display: none; }
	.byt-tv.byt-tv-mapmode .byt-tv-ctrls { order: -1; margin-left: auto; flex-direction: row; }
	.byt-tv.byt-tv-mapmode .byt-tv-ctrl button[data-el="tv-min"], .byt-tv.byt-tv-mapmode .byt-tv-ctrl button[data-el="tv-max"] { display: none; }
	.byt-tv.byt-tv-mapmode .cv-map { min-height: 60vh; }
	.byt-tv.byt-tv-mapmode .byt-tv-credit { display: none; }
	.byt-results .cv-bar { flex-wrap: wrap; }
	.byt-results .cv-switch { order: -1; }
	.byt-results .cv-note { flex-basis: 100%; }
}

/* ---------- Course record / ticket line ---------- */
.byt-record { margin: .4rem 0 0; font-size: .85rem; font-weight: 400; color: var(--byt-accent); }
.byt-record span + span::before { content: "  ·  "; white-space: pre; }
.byt-tv .byt-record { font-size: .85rem; margin: .1rem 0 .2rem; line-height: 1.3; }
.byt-tv .byt-record span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 0.36.1 TV on a laptop, tablet or phone (narrower than a TV): the title gets its own row,
 * the numbers sit below it in sizes that stay readable */
@media (max-width: 1100px) {
	.byt-tv .byt-tv-head { flex-wrap: wrap; gap: 8px 0; }
	.byt-tv .byt-tv-logo { width: 44px; height: 44px; border-radius: 10px; margin-right: 10px; }
	.byt-tv .byt-tv-title { flex: 1 1 calc(100% - 180px); }
	.byt-tv .byt-tv-title h2 { font-size: 24px; }
	.byt-tv .byt-live, .byt-tv .byt-k, .byt-tv .byt-s { font-size: 11px; }
	.byt-tv .byt-record { font-size: 12px; }
	.byt-tv .byt-wx { font-size: 12px; }
	.byt-tv .byt-wx-k, .byt-tv .byt-wx a { font-size: 10px; }
	.byt-tv .byt-tv-ctrls { order: 1; flex-direction: row; gap: 6px; }
	.byt-tv .byt-tv-clock, .byt-tv .byt-tv-stat { order: 2; flex: 1 1 15%; min-width: 0; padding: 6px 12px; }
	.byt-tv .byt-tv-clock { border-left: 0; padding-left: 0; }
	.byt-tv .byt-v { font-size: 24px; }
	.byt-tv .byt-tv-clock .byt-v { font-size: 34px; }
	.byt-tv .byt-tv-fast { max-width: none; }
}
.byt-tv .byt-record span + span::before { content: none; }

/* ---------- Race staff under the results ---------- */
.byt-results .byt-team { margin: 24px 0 0; font-size: 14px; text-align: center; color: var(--byt-muted); }

/* ---------- Follow a runner by e-mail (pop-up) ---------- */
.byt-follow { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 16px; }
.byt-follow-card { position: relative; background: var(--byt-card, #fff); color: var(--byt-ink, #121211); border-radius: 22px; padding: 26px 22px 20px; width: 100%; max-width: 400px; font: 15px/1.45 var(--byt-font, system-ui, sans-serif); box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.byt-follow-card h3 { margin: 0 28px 8px 0; font-size: 22px; font-weight: 400; letter-spacing: -0.02em; }
.byt-follow-card p { margin: 0 0 12px; color: var(--byt-muted, #6F6D67); }
.byt-follow-card input[type=email] { display: block; width: 100%; box-sizing: border-box; padding: 12px 14px; font: inherit; color: inherit; background: var(--byt-card, #fff); border: 1px solid var(--byt-line-strong, #D3D0C8); border-radius: 12px; margin: 0 0 12px; }
.byt-follow-card input[type=email]:focus { outline: none; border-color: var(--byt-ink, #121211); box-shadow: 0 0 0 3px rgba(18,18,17,.1); }
.byt-follow-every { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; font-weight: 400; }
.byt-follow-go { width: 100%; padding: 13px; font: 500 15px var(--byt-font, system-ui, sans-serif); background: var(--byt-ink, #121211); color: var(--byt-on-ink, #fff); border: 0; border-radius: 999px; cursor: pointer; }
.byt-follow-go:disabled { opacity: .5; }
.byt-follow-x { position: absolute; top: 12px; right: 14px; background: none; border: 0; font-size: 18px; cursor: pointer; color: var(--byt-muted, #6F6D67); }
.byt-follow-msg { font-weight: 500; margin: 12px 0 0 !important; }
.byt-follow-msg.ok { color: var(--byt-ok-ink, #3E5A36) !important; } .byt-follow-msg.bad { color: #9A3B2F !important; }
.byt-follow-small { font-size: 12px; color: var(--byt-muted, #6F6D67) !important; margin: 10px 0 0 !important; }

/* ---------- Sponsors under the results ---------- */
.byt-results .byt-sponsors { margin: 32px 0 0; text-align: center; }
.byt-results .byt-sponsors p { margin: 0 0 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--byt-muted); }
.byt-results .byt-sponsors div { display: flex; flex-wrap: wrap; gap: 16px 26px; justify-content: center; align-items: center; }
.byt-results .byt-sponsors img { height: 44px; max-width: 150px; object-fit: contain; }

@media (prefers-reduced-motion: reduce) {
	.byt-results *, .byt-results *::before { animation: none !important; transition: none !important; }
}