/* ==================================================================
 * BACKYARD TIMING – DESIGN
 * Calm, clean, Silent-House-like. Plan + all decisions: docs/redesign-plan.md
 *
 * Easy things to change: the colours, fonts and spacing in section 1.
 * Every colour below is a token, so dark mode works everywhere.
 *
 *   1. Tokens (light + dark)       6. Race director pages
 *   2. Base (type, links)          7. Race menu (sidebar + bottom bar)
 *   3. Motion                      8. Other pages (home, help, plans …)
 *   4. Page frame                  9. Print
 *   5. Components
 * ================================================================== */

/* ==================================================================
 * 1. TOKENS
 * ================================================================== */
:root {
	color-scheme: light;
	/* Surfaces */
	--bg: #FAFAF7;            /* page – "Linen" */
	--paper: #FFFFFF;         /* cards, inputs, sticky bars */
	--soft: #F1F0EC;          /* hover, quiet fills */
	--soft-2: #E8E6E0;        /* selected / pressed */
	--field: #F0EEE9;         /* filled form fields */
	/* Text + lines */
	--ink: #121211;
	--ink-hover: #34332F;
	--ink-2: #4A4945;         /* menu text */
	--on-ink: #FAFAF7;        /* text on ink-filled things */
	--muted: #6F6D67;         /* secondary text (4.5:1 on Linen) */
	--faint: #A3A19B;         /* placeholders, things that are out */
	--line: #E7E5E0;
	--line-strong: #D3D0C8;
	/* Inverse panels (hint boxes, the dark card, phone bottom bar) */
	--inverse: #121211;
	--on-inverse: #FAFAF7;
	/* Colour – used rarely */
	--signal: #C8102E;        /* live dot, logo, emergency – only */
	--bad: #9A3B2F;           /* errors (brick) */
	--bad-bg: #F6E7E4;  --bad-ink: #7E2F25; --bad-line: #D9B5AE;
	--signal-bg: #F8E3E5; --signal-ink: #8A1424;
	--ok: #6E8F63;      --ok-bg: #E9F0E6;   --ok-ink: #3E5A36;
	--warn: #C49A4A;    --warn-bg: #F4EDDC; --warn-ink: #6E5422;
	--off: #A3A19B;     --off-bg: #EFEEEA;  --off-ink: #5C5B56;
	--ring: rgba(18, 18, 17, 0.10);
	--shadow: rgba(18, 18, 17, 0.14);
	--scrim: rgba(18, 18, 17, 0.35);
	/* Type */
	--font: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--mono: "Geist Mono", ui-monospace, Menlo, Consolas, monospace;
	/* Shape + space (scale 4 · 8 · 12 · 16 · 24 · 32 · 48 · 72) */
	--radius: 10px;
	--radius-lg: 14px;
	--side-w: 248px;          /* sidebar width */
	--top-h: 56px;            /* phone top bar height */
	/* Motion */
	--ease-out: cubic-bezier(.2, .7, .2, 1);
	--ease-io: cubic-bezier(.65, 0, .35, 1);
	--fast: .2s;
	--base: .32s;
}
/* Dark: follows the device, unless the visitor picked Light/Dark (data-theme on <html>) */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--bg: #0E0E0D; --paper: #171716; --soft: #1D1D1B; --soft-2: #262624; --field: #1D1D1B;
		--ink: #EDEDEA; --ink-hover: #D6D6D2; --on-ink: #0E0E0D;
		--muted: #8A8984; --faint: #5C5B57; --line: #262624; --line-strong: #3A3A37;
		--inverse: #2A2A28; --on-inverse: #EDEDEA;
		--signal: #FF3B50; --bad: #E07A6C;
		--bad-bg: #3A1A17; --bad-ink: #F2A89D; --bad-line: #5A2A24; --ink-2: #BDBCB7;
		--signal-bg: #3A1A1C; --signal-ink: #FF9AA4;
		--ok: #7FA373; --ok-bg: #1E2A1B; --ok-ink: #A9C79E;
		--warn: #C9A257; --warn-bg: #2E2615; --warn-ink: #E1C281;
		--off: #6E6C67; --off-bg: #222220; --off-ink: #A8A6A0;
		--ring: rgba(237, 237, 234, 0.14); --shadow: rgba(0, 0, 0, 0.5); --scrim: rgba(0, 0, 0, 0.55);
	}
}
:root[data-theme="dark"] {
	color-scheme: dark;
	--bg: #0E0E0D; --paper: #171716; --soft: #1D1D1B; --soft-2: #262624; --field: #1D1D1B;
	--ink: #EDEDEA; --ink-hover: #D6D6D2; --on-ink: #0E0E0D;
	--muted: #8A8984; --faint: #5C5B57; --line: #262624; --line-strong: #3A3A37;
	--inverse: #2A2A28; --on-inverse: #EDEDEA;
	--signal: #FF3B50; --bad: #E07A6C;
	--bad-bg: #3A1A17; --bad-ink: #F2A89D; --bad-line: #5A2A24; --ink-2: #BDBCB7;
	--signal-bg: #3A1A1C; --signal-ink: #FF9AA4;
	--ok: #7FA373; --ok-bg: #1E2A1B; --ok-ink: #A9C79E;
	--warn: #C9A257; --warn-bg: #2E2615; --warn-ink: #E1C281;
	--off: #6E6C67; --off-bg: #222220; --off-ink: #A8A6A0;
	--ring: rgba(237, 237, 234, 0.14); --shadow: rgba(0, 0, 0, 0.5); --scrim: rgba(0, 0, 0, 0.55);
}

/* ==================================================================
 * 2. BASE – type scale (weights 400 + 500 only), links, helpers
 * ================================================================== */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
h1 { font-size: clamp(34px, 3vw + 20px, 48px); line-height: 1.02; margin: 0 0 12px; font-weight: 400; letter-spacing: -0.045em; }
h2 { font-size: clamp(22px, 1vw + 16px, 28px); line-height: 1.15; margin: 0 0 10px; font-weight: 400; letter-spacing: -0.025em; }
h3 { font-size: 18px; line-height: 1.3; margin: 0 0 6px; font-weight: 500; letter-spacing: -0.01em; }
b, strong { font-weight: 500; }
::placeholder { color: var(--faint); opacity: 1; }
::selection { background: var(--ink); color: var(--on-ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.right { text-align: right; margin: -6px 0 0; }
.nowrap { white-space: nowrap; }
.mono, td.num, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.eyebrow { font-size: 11px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hp, .fb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.print-only { display: none; }

/* Icons (Lucide sprite, assets/icons.svg – PHP: icon('name')) */
.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Links.
 * Text links (inside sentences): faint grey line at rest; an ink line grows
 * over it from the left on hover and sweeps out to the right. */
a { color: inherit; text-decoration: none; }
a:not([class]) {
	background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--line-strong), var(--line-strong));
	background-repeat: no-repeat;
	background-size: 0 1px, 100% 1px;
	background-position: 100% 100%, 0 100%;
	transition: background-size var(--base) var(--ease-io);
}
a:not([class]):hover { background-size: 100% 1px, 100% 1px; background-position: 0 100%, 0 100%; }
/* Menu links: no line at rest; it grows from 0 to the text width on hover,
 * and draws itself in when the item is the open one (.on). */
.topnav a:not(.btn), .footer a, .langs a, .sub-tabs a, .tabs a { position: relative; background: none; --u-x: 0px; --u-y: -2px; }
.topnav a:not(.btn)::after, .footer a::after, .langs a::after, .sub-tabs a::after, .tabs a::after {
	content: ""; position: absolute; left: var(--u-x); right: var(--u-x); bottom: var(--u-y); height: 1px; background: currentColor;
	transform: scaleX(0); transform-origin: right; transition: transform var(--base) var(--ease-io);
}
.topnav a:not(.btn):hover::after, .footer a:hover::after, .langs a:hover::after, .sub-tabs a:hover::after, .tabs a:hover::after { transform: scaleX(1); transform-origin: left; }
.langs a.on::after, .sub-tabs a.on::after, .tabs a.on::after { transform: scaleX(1); transform-origin: left; animation: u-draw .45s var(--ease-io) backwards; }
/* Links that are buttons, cards or menu rows: never underlined */
.side-switch a, .side-kids a, .seg-links a, .bottom-bar a, .help-toc a:not(.btn), .race-links a:not(.btn) { background: none; }

/* ==================================================================
 * 3. MOTION – quick and soft; everything off with "reduce motion"
 * ================================================================== */
@keyframes u-draw { from { transform: scaleX(0); } }
@keyframes ink-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
/* Content rises in softly on every page load */
.main > * { animation: rise .5s var(--ease-out) backwards; }
.main > :nth-child(2) { animation-delay: .05s; }
.main > :nth-child(3) { animation-delay: .1s; }
.main > :nth-child(n+4) { animation-delay: .15s; }
/* Ink line that draws itself left → right: add class "ink-top" to any block */
.ink-top { position: relative; }
.ink-top::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink); transform-origin: left; animation: ink-draw .7s var(--ease-io) .1s backwards; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}

/* ==================================================================
 * 4. PAGE FRAME
 *    Logged in: sidebar at the screen edge + the page (body.app)
 *    Visitors:  minimal top bar + the page (body.site)
 * ================================================================== */
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 500; font-size: 18px; letter-spacing: -0.01em; }
.brand-logo { display: block; height: 36px; width: auto; }
.brand-icon { display: none; }
.brand-logo.brand-dark { display: none; }   /* light text logo for dark mode */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .brand-logo.brand-light { display: none; }
	:root:not([data-theme="light"]) .brand-logo.brand-dark { display: block; }
}
:root[data-theme="dark"] .brand-logo.brand-light { display: none; }
:root[data-theme="dark"] .brand-logo.brand-dark { display: block; }
.inline { display: inline; margin: 0; }
.linklike { background: none; border: 0; padding: 0; font: inherit; font-weight: 400; cursor: pointer; color: var(--ink); }
.linklike.small { font-size: 13px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Visitors: minimal top bar */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 32px; }
.topnav { display: flex; align-items: center; gap: 24px; font-size: 15px; }
.topnav a { text-decoration: none; font-weight: 400; }
.main { max-width: 1040px; margin: 0 auto; padding: 32px 24px 72px; min-height: 70vh; }

/* Logged in: sidebar + page */
.app-side {
	position: fixed; top: 0; left: 0; bottom: 0; z-index: 40; width: var(--side-w);
	display: flex; flex-direction: column; padding: 20px 14px 16px;
	background: var(--bg); border-right: 1px solid var(--line);
	overflow-y: auto; scrollbar-width: none;
}
.app-side::-webkit-scrollbar { display: none; }
.side-brand { padding: 2px 10px 22px; }
.side-brand .brand-logo { height: 32px; }
.app-main { margin-left: var(--side-w); min-width: 0; }
.app .main { max-width: 1200px; margin: 0; padding: 44px 56px 80px; }
.app-top, .side-scrim { display: none; }

/* Footer + appearance switch */
.footer { display: flex; flex-wrap: wrap; gap: 12px 22px; justify-content: center; align-items: center; padding: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.app .footer { justify-content: flex-start; padding: 24px 56px; }
.footer a { color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.footer a:hover { color: var(--ink); }
.langs a { margin: 0 4px; }
.langs a.on { font-weight: 500; color: var(--ink); }
.theme-sw { display: inline-flex; padding: 2px; border-radius: 999px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.theme-sw button { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 400 12px var(--font); cursor: pointer; transition: background var(--fast), color var(--fast); }
.theme-sw button:hover { color: var(--ink); }
.theme-sw button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }

@media (max-width: 860px) {
	/* phones + small tablets: slim top bar, the sidebar slides in from the left */
	.app-top { display: flex; position: sticky; top: 0; z-index: 45; height: var(--top-h); align-items: center; justify-content: space-between; padding: 0 12px 0 16px; background: var(--bg); border-bottom: 1px solid var(--line); }
	.app-top .brand-logo { height: 28px; }
	.app-menu-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper); color: var(--ink); font: 400 14px var(--font); cursor: pointer; }
	.app-side { width: min(300px, 86vw); z-index: 60; transform: translateX(-105%); transition: transform .25s var(--ease-out); box-shadow: 4px 0 30px var(--shadow); padding-bottom: 96px; }
	.side-brand { display: none; }
	body.side-open .app-side { transform: none; }
	body.side-open .side-scrim { display: block; position: fixed; inset: 0; background: var(--scrim); z-index: 55; }
	.app-main { margin-left: 0; }
	.app .main { padding: 28px 16px 64px; }
	.app.is-race .main { padding-bottom: 104px; }
	.app .footer { padding: 24px 16px; }
	.app.is-race .footer { padding-bottom: 96px; }
}
@media (max-width: 560px) {
	.topbar { padding: 12px 16px; }
	.topbar .brand-logo { display: none !important; }
	.brand-icon { display: block; }
	.topnav { gap: 16px; }
	.main { padding: 24px 16px 60px; }
}

/* ==================================================================
 * 5. COMPONENTS
 * ================================================================== */
/* Buttons – pills (0.38 "outline first"): .btn is an ink outline that fills on hover;
 * .btn-primary (filled ink) only for the ONE main action of a page · .btn-ghost faint outline
 * · .btn-danger quiet brick. The label rolls up on hover (layout.php wraps it in .btn-l). */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%;
	min-height: 44px; padding: 0 20px; border: 1px solid var(--ink); border-radius: 999px;
	background: transparent; color: var(--ink); font: 500 15px/1.2 var(--font); text-decoration: none; white-space: nowrap; cursor: pointer;
	overflow: hidden; transition: background var(--fast), border-color var(--fast), color var(--fast);
}
.btn:hover { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.btn-primary { background: var(--ink); color: var(--on-ink); }
.btn-primary:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn-l { display: inline-block; text-shadow: 0 2.2em currentColor; transition: transform var(--base) var(--ease-io); }
@media (hover: hover) { .btn:hover:not(:disabled) .btn-l { transform: translateY(-2.2em); } }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-big { min-height: 56px; font-size: 17px; padding: 0 28px; }
.btn-small { min-height: 34px; padding: 0 14px; font-size: 13px; }
.btn-danger { background: transparent; border-color: var(--bad-line); color: var(--bad); }
.btn-danger:hover { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }
.btn-light { background: var(--on-inverse); color: var(--inverse); border-color: var(--on-inverse); }
.btn-light:hover { background: var(--soft-2); border-color: var(--soft-2); color: var(--inverse); }
.btn .ic { width: 16px; height: 16px; }
.btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 0; }
.danger, .linklike.danger { color: var(--bad); }

/* Messages – soft tinted bar with a dot */
.flash, .warn { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--radius); margin: 0 0 16px; font-weight: 400; background: var(--ok-bg); color: var(--ok-ink); }
.flash::before, .warn::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: .55em; border-radius: 50%; background: var(--ok); }
.flash-err { background: var(--bad-bg); color: var(--bad-ink); }
.flash-err::before { background: var(--bad); }
.warn { background: var(--warn-bg); color: var(--warn-ink); margin: 0; }
.warn::before { background: var(--warn); }
.ok-line { font-weight: 500; margin: 0 0 4px; }
.mail-msg { margin-top: 8px; font-weight: 500; }

/* Cards – white on Linen, one faint line */
.card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; margin: 0 0 20px; background: var(--paper); min-width: 0; overflow-wrap: anywhere; }
.card h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 22px; }
.dark { background: var(--inverse); color: var(--on-inverse); border-color: var(--inverse); }
.dark a { color: var(--on-inverse); }
.dark .hint-i { border-color: var(--on-inverse); color: var(--on-inverse); }
.dark .hint-box { background: var(--on-inverse); color: var(--inverse); }
.narrow { max-width: 460px; margin-left: auto; margin-right: auto; }
/* Small one-job pages (log in, sign up, password, invitation, messages) */
/* 0.38: single forms (log in, sign up, new race, messages …) – no floating box, the page is the form */
.card.narrow { margin-top: 4vh; padding: 28px 0 0; border: 0; border-top: 1px solid var(--ink); border-radius: 0; background: none; }
.card.narrow h1 { font-size: clamp(34px, 2vw + 24px, 48px); font-weight: 300; letter-spacing: -0.045em; margin-bottom: 14px; }
/* Long text (terms, privacy) and the Platform page: hairline sections instead of boxes */
.card.legal, .card.flat { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; padding: 28px 0 8px; }
.card.legal { border-top-color: var(--ink); }
.card.narrow .form .btn-big { width: 100%; margin-top: 6px; }
.card.narrow > p.center:last-child { margin: 22px 0 0; font-size: 14px; }
@media (max-width: 560px) { .card.narrow { margin-top: 0; padding: 22px 0 0; } }
.narrow-col { max-width: 760px; }
.narrow-col > .card { margin-bottom: 16px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; align-items: start; }
.grid2 > .card { margin: 0; }
.grid2 > * { min-width: 0; }
.grid2.tight { gap: 10px; margin-bottom: 8px; }
.span2 { grid-column: 1 / -1; }
.empty { text-align: center; padding: 50px 20px; border-style: dashed; border-color: var(--line-strong); }
.empty-icon { font-size: 44px; }
/* Folding card ("Getting started") */
.card details > summary { list-style: none; cursor: pointer; }
.card details > summary::-webkit-details-marker { display: none; }
.card details > summary h2 { margin: 0; }
.card details[open] > summary h2 { margin-bottom: 10px; }
.fold > summary h2::before { content: "▸"; display: inline-block; width: 1em; color: var(--muted); transition: transform .15s; }
.fold[open] > summary h2::before { transform: rotate(90deg); }

/* Fields – "boxed": white with one soft line; ink line + soft ring while typing.
 * :where() keeps this easy to override (sizes are set per form below). */
:where(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=color]), select, textarea) {
	min-height: 44px; padding: 0 14px; font: 16px var(--font); color: var(--ink);
	background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius);
	transition: background var(--fast), border-color var(--fast), box-shadow var(--fast);
}
:where(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), select, textarea):hover { border-color: var(--faint); }
:where(textarea) { padding: 10px 14px; line-height: 1.45; }
:where(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), select, textarea):focus { outline: none; background: var(--paper); border-color: var(--ink); box-shadow: 0 0 0 3px var(--ring); }
:where(input, select, textarea):disabled { color: var(--muted); opacity: .7; }
:where(input, select, textarea)[aria-invalid="true"], :where(input, select, textarea):user-invalid { border-color: var(--bad); }
input[type=file] { font: 14px var(--font); color: var(--muted); max-width: 100%; }
input[type=file]::file-selector-button { font: 500 13px var(--font); color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 999px; padding: 7px 14px; margin-right: 10px; cursor: pointer; }
input[type=file]::file-selector-button:hover { border-color: var(--ink); }
input[type=checkbox], input[type=radio] { accent-color: var(--ink); }

.form { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.form > .btn { align-self: flex-start; }   /* 0.38: buttons hug their text (the big ones on single forms stay full width) */
.card.narrow .form > .btn-big { align-self: stretch; }
.form label { display: block; font-size: 14px; font-weight: 500; }
.form label small { font-size: 13px; font-weight: 400; color: var(--muted); }
.form label > input:not([type=checkbox]):not([type=radio]), .form label > select { display: block; width: 100%; margin-top: 6px; }
.form label > .prefix-input { margin-top: 6px; }
.form label > input.short { width: 140px; }
.field-err { display: block; color: var(--bad); font-size: 13px; font-weight: 500; margin-top: 6px; }
.field-err:empty { display: none; }
.form label .hint { margin-left: 4px; }
.form input[type=text], .form input[type=email], .form input[type=password], .form select,
.form input[type=date], .form input[type=time], .form input[type=number] { height: 46px; }
.form textarea { display: block; width: 100%; margin-top: 6px; resize: vertical; }
.form select, .form input { max-width: 100%; min-width: 0; }
.form input.short, .inline-form .short { max-width: 140px; }
.form .check { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 15px; }
.form .check input { width: 20px; height: 20px; margin-top: 1px; flex: none; }
.form fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 12px; }
.form legend { font-weight: 500; padding: 0 6px; }
.form h3 { margin: 10px 0 0; font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.form .seg { display: flex; flex-direction: row; align-items: center; gap: 6px; font-weight: 400; }
.form .seg input { width: 18px; height: 18px; }
.seg-field { border: 0 !important; padding: 0 !important; display: flex !important; flex-direction: row !important; gap: 18px !important; align-items: center; flex-wrap: wrap; }
.seg-field legend { font-weight: 500; padding: 0 0 6px; }
.prefix-input { display: flex; align-items: stretch; background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; transition: background var(--fast), border-color var(--fast), box-shadow var(--fast); }
.prefix-input:focus-within { background: var(--paper); border-color: var(--ink); box-shadow: 0 0 0 3px var(--ring); }
.prefix-input:hover { border-color: var(--faint); }
.prefix-input span { display: flex; align-items: center; padding: 0 2px 0 14px; color: var(--muted); font-weight: 400; font-size: 14px; white-space: nowrap; max-width: 50%; overflow: hidden; text-overflow: ellipsis; }
.form .prefix-input input, .prefix-input input { border: 0; border-radius: 0; background: transparent; box-shadow: none; flex: 1; min-width: 0; padding-left: 4px; }
.form-btns { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 0; }
.inline-form input[type=text], .inline-form input[type=search], .inline-form input[type=date], .inline-form input[type=datetime-local] { height: 40px; font-size: 15px; }
.inline-form label { display: flex; align-items: center; gap: 8px; font-weight: 500; flex-wrap: wrap; }
.short-select { height: 40px; font-size: 15px; }
.filter { height: 40px; font-size: 15px; min-width: 260px; border-radius: 999px; padding: 0 16px; }
/* On/off switch – ink when on */
.toggle { position: relative; flex: none; width: 96px; height: 44px; border-radius: 99px; border: 0; background: var(--soft-2); color: var(--muted); cursor: pointer; font: 500 14px var(--font); padding: 0; transition: background var(--fast); }
.toggle .toggle-knob { position: absolute; top: 4px; left: 4px; width: 36px; height: 36px; border-radius: 50%; background: var(--paper); box-shadow: 0 1px 3px var(--shadow); transition: left .25s var(--ease-out); }
.toggle .toggle-txt { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }
.toggle.on { background: var(--ink); color: var(--on-ink); }
.toggle.on .toggle-knob { left: 56px; background: var(--on-ink); }
.toggle.on .toggle-txt { left: 14px; right: auto; }
/* Pill-shaped choice links */
.seg-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.seg-links a { text-decoration: none; padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: 99px; font-weight: 400; font-size: 14px; transition: border-color var(--fast), background var(--fast); }
.seg-links a:hover { border-color: var(--ink); }
.seg-links a.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

/* Status tags – pill + dot + word. Neutral by default; .pill-live = signal red */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 400; line-height: 1.4; padding: 3px 10px; border-radius: 99px; background: var(--off-bg); color: var(--off-ink); margin-left: 6px; vertical-align: 2px; white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--off); flex: none; }
.pill-live { background: var(--signal-bg); color: var(--signal-ink); }
.pill-live::before { background: var(--signal); }
.tag { display: inline-block; font-size: 11px; padding: 0 7px; border: 1px solid var(--line-strong); color: var(--muted); border-radius: 99px; margin-left: 4px; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.filters .pill { text-decoration: none; margin: 0; padding: 5px 12px; font-size: 13px; }
.filters .pill::before { display: none; }
.filters .pill.on { background: var(--ink); color: var(--on-ink); }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 400; border-radius: 999px; padding: 2px 9px; }
.chip-confirmed { background: var(--ok-bg); color: var(--ok-ink); }
.chip-requested { background: var(--warn-bg); color: var(--warn-ink); box-shadow: inset 0 0 0 1px var(--warn); }
.chip-gap { background: var(--bad-bg); color: var(--bad-ink); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; }
.dot-g { background: var(--ok); } .dot-o { background: var(--warn); } .dot-r { background: var(--bad); }

/* Tables – tight rows; the ink line under the header draws itself in */
@keyframes th-draw { from { background-size: 0 1px; } }
.table-wrap { overflow-x: auto; max-height: 70vh; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); margin-top: 12px; background: var(--paper); }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; overflow-wrap: normal; }
.table th { white-space: nowrap; }
.table td:last-child a { white-space: nowrap; }
.table th {
	position: sticky; top: 0; z-index: 1; text-align: left; font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted);
	padding: 9px 10px 8px; border-bottom: 0;
	background: linear-gradient(var(--ink), var(--ink)) no-repeat left bottom / 100% 1px, var(--paper);
	animation: th-draw .45s var(--ease-io) backwards;
}
.table th:nth-child(2) { animation-delay: .05s; } .table th:nth-child(3) { animation-delay: .1s; } .table th:nth-child(4) { animation-delay: .15s; }
.table th:nth-child(5) { animation-delay: .2s; } .table th:nth-child(6) { animation-delay: .25s; } .table th:nth-child(n+7) { animation-delay: .3s; }
.table td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tr:hover td { background: var(--soft); }
td.num, th.num { text-align: right; }
.plain { list-style: none; padding: 0; margin: 0; }
.plain li { padding: 7px 0; border-bottom: 1px solid var(--line); }

/* Tabs (old style, still on a few pages) + sub-page tabs */
.tabs { display: flex; flex-wrap: wrap; gap: 4px 22px; border-bottom: 1px solid var(--line); margin: 0 0 20px; }
.tabs a { --u-y: -1px; padding: 10px 0; text-decoration: none; font-weight: 400; color: var(--muted); white-space: nowrap; }
.tabs a:hover, .tabs a.on { color: var(--ink); }
.tabs a.tab-help { margin-left: auto; }
.sub-tabs { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 2px 4px; background: var(--bg); border-bottom: 1px solid var(--line); margin: 0 0 28px; padding: 6px 0 0; }
.sub-tabs a { --u-x: 12px; --u-y: -1px; padding: 9px 12px; text-decoration: none; font-weight: 400; font-size: 14px; color: var(--muted); }
.sub-tabs a:first-child { --u-x: 0px; padding-left: 0; }
.sub-tabs a:first-child::after { right: 12px; }
.sub-tabs a:hover, .sub-tabs a.on { color: var(--ink); }

/* ⓘ hints */
.hint { position: relative; display: inline-flex; vertical-align: middle; cursor: help; outline: none; font-weight: 400; }
.hint-i { width: 17px; height: 17px; border: 1px solid var(--line-strong); color: var(--muted); border-radius: 50%; font: 500 10.5px/15px var(--font); text-align: center; transition: border-color var(--fast), color var(--fast); }
.hint:hover .hint-i, .hint:focus .hint-i { border-color: var(--ink); color: var(--ink); }
.hint-box { display: none; position: absolute; left: 50%; top: 26px; transform: translateX(-50%); z-index: 50; width: 280px; max-width: 80vw; background: var(--inverse); color: var(--on-inverse); padding: 10px 12px; border-radius: 10px; font: 400 13px/1.45 var(--font); text-transform: none; letter-spacing: 0; box-shadow: 0 6px 20px var(--shadow); }
.hint:hover .hint-box, .hint:focus .hint-box, .hint.open .hint-box { display: block; }

/* Numbers – hairline scoreboard row: big mono number, small uppercase label */
.stats, .kpis { overflow-wrap: normal; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-bottom: 1px solid var(--line); margin: 0 0 16px; }
.stats::before, .kpis::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink); transform-origin: left; animation: ink-draw .7s var(--ease-io) .1s backwards; }
.stats div, .kpi { border: 0; border-left: 1px solid var(--line); border-radius: 0; padding: 12px 14px 14px; text-align: left; min-width: 0; }
.stats div:first-child, .kpi:first-child { border-left: 0; padding-left: 0; }
.stats span, .kpi span { display: block; font-family: var(--mono); font-size: 24px; font-weight: 400; line-height: 1.15; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.card .stats span { font-size: 20px; }
.stats small, .kpi small { display: block; margin-top: 4px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.meter { height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; margin: 12px 0 8px; }
.meter span { display: block; height: 100%; background: var(--ink); }
svg.bars { width: 100%; height: 110px; display: block; background: var(--soft); border-radius: 8px; }
svg.bars .bar { fill: var(--ink); }
svg.bars g:hover .bar { fill: var(--signal); }
.axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin: 4px 0 0; }
@media (max-width: 820px) {
	.kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.kpi:nth-child(3n+1) { border-left: 0; padding-left: 0; }
	.kpi:nth-child(n+4) { border-top: 1px solid var(--line); }
}
@media (max-width: 480px) {
	.kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kpi:nth-child(3n+1) { border-left: 1px solid var(--line); padding-left: 14px; }
	.kpi:nth-child(odd) { border-left: 0; padding-left: 0; }
	.kpi:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* Checklists */
.checks { list-style: none; padding: 0; margin: 8px 0 12px; }
.checks li { position: relative; display: flex; gap: 10px; margin: 7px 0; padding: 4px 0 4px 28px; align-items: flex-start; }
.checks li > span { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font-size: 12px; font-weight: 500; display: flex; align-items: center; justify-content: center; }
.checks li::before { position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; color: var(--paper); }
.checks li.ok::before { content: "✓"; background: var(--ok); }
.checks li.todo::before { content: "!"; background: var(--warn); }
.c-warn > span { background: var(--warn) !important; }
.c-bad > span { background: var(--bad) !important; }
.c-info > span { background: var(--off) !important; }
.manual-l { display: flex; gap: 8px; margin: 7px 0; align-items: flex-start; }
.manual-l input { width: 18px; height: 18px; flex: none; margin-top: 2px; }

/* Page header: small uppercase eyebrow · title · quiet status line */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 32px; flex-wrap: wrap; }
.page-head h1 { margin: 0; }
.page-head .eyebrow { margin: 0 0 10px; }
.page-head p { margin: 4px 0 0; }
.page-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 12px 0 0 !important; color: var(--muted); font-size: 14px; }
.page-meta .pill { margin: 0; }

/* ↳ text links ("go to …"): quiet, ink on hover, the arrow nudges */
.go { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 14px; text-decoration: none; white-space: nowrap; transition: color var(--fast), transform var(--fast) var(--ease-out); }
.go:hover { color: var(--ink); transform: translateX(3px); }
.btns .go { margin-left: 8px; }
.go { max-width: 100%; }
@media (max-width: 560px) { .go { white-space: normal; } }   /* 0.37: long ↳ links wrap on phones */

/* Numbered sections, Silent House style: number + title + one line left (4), content right (8) */
.sec { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px 48px; padding: 32px 0 40px; border-top: 1px solid var(--line); }
.sec-l h2 { margin: 0 0 8px; font-size: 24px; }
.sec-n { display: block; margin: 0 0 10px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.sec-d { margin: 0; max-width: 34ch; color: var(--muted); font-size: 14px; line-height: 1.5; }
.sec-r { min-width: 0; }
.sec-r > :first-child { margin-top: 0; }
.sec-r h3 { margin: 22px 0 8px; font-size: 11px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sec-r h3:first-child { margin-top: 0; }
/* Long settings pages built from sections (sec_open / sec_close in PHP) */
.sec-page .sec { border-top: 0; border-bottom: 1px solid var(--line); }
.sec-page .sec:first-child, .sec-form > .part:not([hidden]) ~ .part .sec:first-child { padding-top: 12px; }
.sec-form { gap: 0; margin: 0; }
.sec-form .sec-r, .sec-page .sec-r { display: flex; flex-direction: column; gap: 16px; }
.sec-page .sec-r > * { margin-top: 0; margin-bottom: 0; }
.sec-save { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 0 48px; padding: 28px 0 8px; }
.sec-wide { grid-template-columns: 1fr; }
.sec-wide .sec-l { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 24px; }
.sec-wide .sec-n { flex-basis: 100%; }
.sec-wide .sec-d { max-width: 60ch; }
.sec-danger .sec-l h2, .sec-danger .sec-n { color: var(--bad); }
.sec-plain .sec-n { display: none; }
.accent-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.accent-row input[type=color] { width: 52px; height: 36px; padding: 2px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--paper); cursor: pointer; }
.accent-row input[type=color]:disabled { opacity: .35; cursor: default; }   /* parts that are not steps: no numbers ("structure is information") */
.sec .logo-row:first-child { padding-top: 0; }
@media (max-width: 820px) { .sec-save { grid-template-columns: 1fr; } }
.pill-warn { background: var(--warn-bg); color: var(--warn-ink); }
.pill-warn::before { background: var(--warn); }
.pill-ok { background: var(--ok-bg); color: var(--ok-ink); }
.pill-ok::before { background: var(--ok); }

@media (max-width: 820px) {
	.grid2, .check-cols, .runner-form, .row2 { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
	.sec { grid-template-columns: 1fr; gap: 14px; padding: 24px 0 32px; }
	.sec-d { max-width: none; }
}
@media (max-width: 560px) {
	.card { padding: 20px; }
	.page-head { margin-bottom: 24px; }
}

/* ==================================================================
 * 6. RACE DIRECTOR PAGES
 * ================================================================== */
/* Dashboard: page head + race list */
.race-list { display: grid; gap: 10px; margin: 0 0 32px; }
.list-h { margin: 32px 0 14px; font-size: 22px; }
.race-ph { color: var(--muted); }
.race-ph .ic { width: 24px; height: 24px; }
.empty-icon .ic { width: 40px; height: 40px; stroke-width: 1.2; color: var(--muted); }
.dash-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 40px 0 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dash-link { display: flex; flex-direction: column; gap: 4px; padding: 20px 24px 22px 0; text-decoration: none; transition: color var(--fast); }
.dash-link + .dash-link { padding-left: 24px; border-left: 1px solid var(--line); }
.dash-link b { font-weight: 400; font-size: 18px; letter-spacing: -0.015em; }
.dash-link .eyebrow { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 4px; }
.dash-link:hover b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (max-width: 640px) { .dash-more { grid-template-columns: 1fr; } .dash-link + .dash-link { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } }
.race-card { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); text-decoration: none; background: var(--paper); transition: border-color var(--fast); }
.race-card:hover { border-color: var(--ink); }
.race-card.live { box-shadow: inset 3px 0 0 var(--signal); }
.race-card img, .race-ph { width: 54px; height: 54px; border-radius: 10px; object-fit: cover; flex: none; }
.race-ph { display: flex; align-items: center; justify-content: center; background: var(--soft); font-size: 26px; }
.race-card > div { flex: 1; min-width: 0; }
.race-card h3 { margin: 0; }
.race-card p { margin: 2px 0 0; }

/* Race header */
.race-title { display: flex; align-items: center; gap: 14px; min-width: 0; }
.race-title img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
.race-title h1 { margin: 0; }
.race-title p { margin: 4px 0 0; }
.race-links { display: flex; gap: 8px; flex-wrap: wrap; }

/* Overview (0.31): phase hero + numbers, then numbered sections */
.ov-hero { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px 48px; padding: 22px 0 30px; }
.ov-hero-l .eyebrow { margin: 0 0 8px; }
.ov-hero-l p { margin: 0; font-size: 14px; max-width: 34ch; }
.ov-live { display: inline-flex; align-items: center; gap: 8px; color: var(--signal) !important; }
.ov-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); animation: live-pulse 2s ease-in-out infinite; }
@keyframes live-pulse { 50% { opacity: .35; } }
/* 0.37 weather line, things waiting, recent sign-ups */
.wx { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.wx .ic { width: 16px; height: 16px; color: var(--muted); }
.wx-k { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.wx .wx-c { font-size: 11px; color: var(--muted); background: none; }
.ov-wx { padding: 12px 0 4px; }
.ov-wait, .ov-recent { list-style: none; margin: 0; padding: 0; }
.ov-wait li { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ov-wait li:first-child { border-top: 1px solid var(--ink); }
.ov-wait .mono { font-size: 22px; font-weight: 300; }
.ov-recent li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ov-recent li:first-child { border-top: 1px solid var(--ink); }
.ov-recent .pill { margin: 0; }
.ov-ago { margin-left: auto; }
@media (max-width: 520px) { .ov-wait li { grid-template-columns: 40px 1fr; } .ov-wait .go { grid-column: 2; } }
.ov-big { font-size: clamp(52px, 6vw, 84px); font-weight: 300; line-height: .95; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.ov-big small { font-family: var(--font); font-size: 12px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 14px 0 6px; }
.ov-name { font-size: clamp(32px, 3.4vw, 44px); line-height: 1.05; letter-spacing: -0.04em; }
.ov-sub { margin: 12px 0 0; color: var(--muted); font-size: 14px; }
.ov-hero .btns { margin-top: 20px; }
.ov-stats { margin: 0 0 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 560px) {
	.ov-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ov-stats div:nth-child(3) { border-left: 0; padding-left: 0; }
	.ov-stats div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
.ov-stats + .sec { border-top: 0; }
.ov-app { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; padding: 0 0 24px; margin: 0 0 22px; border-bottom: 1px solid var(--line); }
.ov-app > div:last-child { flex: 1; min-width: 220px; }
.ov-app h3 { margin: 0 0 6px !important; font-size: 18px !important; font-weight: 500 !important; letter-spacing: -0.01em !important; text-transform: none !important; color: var(--ink) !important; }
.ov-app p { margin: 0 0 10px; overflow-wrap: anywhere; }
.ov-h3 { margin-top: 28px !important; }
.lic-sec.no .sec-r { border-left: 2px solid var(--warn); padding-left: 18px; }
@media (max-width: 820px) {
	.ov-hero { grid-template-columns: 1fr; gap: 12px; }
}

/* Overview: getting started, timer app, checklist */
.clear-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.clear-btns form { margin: 0; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.steps li > div { flex: 1; min-width: 0; }
.step-dot { counter-increment: s; flex: none; width: 32px; height: 32px; border: 1px solid var(--ink); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 13px; font-weight: 400; }
.step-dot:empty::before { content: counter(s); }
.steps li.ok .step-dot { background: var(--ink); color: var(--on-ink); }
.app-box { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.app-box > div:last-child { flex: 1; min-width: 200px; }
.app-box p { margin: 0 0 10px; overflow-wrap: anywhere; }
.qr { background: #fff; padding: 6px; border-radius: 8px; line-height: 0; width: max-content; }   /* QR codes stay black on white */
.qr svg { width: 150px; height: 150px; }
.pin { display: flex; align-items: center; gap: 8px; }
.pin strong { font-family: var(--mono); font-size: 30px; font-weight: 400; letter-spacing: 0.12em; }
.check-cols { display: grid; grid-template-columns: 3fr 2fr; gap: 24px; }
.check-cols h3 { margin-top: 0; }
@media (max-width: 1180px) { .check-cols { grid-template-columns: 1fr; } }   /* 0.37: the content column is too narrow for two lists */
.danger-row { margin-top: 16px; }
.danger-zone { border-color: var(--bad); }
.lic-card.no { border-color: var(--warn); background: var(--warn-bg); }

/* Race setup: logos, sponsors, map, people with access */
.logo-row { padding: 10px 0; border-top: 1px solid var(--line); }
.logo-row:first-of-type { border-top: 0; }
.logo-row h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; }
.logo-prev { display: block; max-width: 100%; border-radius: 8px; background: var(--soft); }
.logo-prev.logo-full { max-height: 100px; }
.logo-prev.logo-square { width: 90px; height: 90px; object-fit: cover; }
.cp-setup { list-style: none; margin: 0 0 10px; padding: 0; }   /* 0.40 checkpoints */
.cp-setup li { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.cp-setup li:first-child { border-top: 0; padding-top: 0; }
.cp-setup a { word-break: break-all; }
.sponsor-list { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.sponsor-item { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; margin: 0; background: var(--paper); }
.sponsor-item img { height: 36px; max-width: 100px; object-fit: contain; }
.map-prev { width: 180px; height: 180px; background: var(--soft); border-radius: 10px; display: block; margin: 6px 0; }
.embed { margin-top: 12px; }
.embed summary { cursor: pointer; font-weight: 500; }
.embed textarea { width: 100%; font: 12px var(--mono); padding: 8px 10px; }
.access-invite { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.access-invite input[type=email], .table.access select, .access-invite select { min-height: 40px; font-size: 15px; }
.access-invite input[type=email] { flex: 1 1 200px; }
.table.access td { vertical-align: middle; }
.loc-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0 4px; scroll-margin-top: 130px; }
/* 0.44 Finish › Sponsors */
.thanks-table td { vertical-align: top; }
.thanks-logo { width: 110px; }
.thanks-logo img { max-width: 100px; max-height: 44px; object-fit: contain; }
.thanks-edit { margin-top: 4px; }
.thanks-edit summary { cursor: pointer; color: var(--muted); }
.thanks-edit .form { margin-top: 8px; }
.thanks-h { margin: 18px 0 6px; font-size: 16px; font-weight: 500; }
.thanks-add { margin-top: 10px; padding-top: 12px; border-top: 1px dashed var(--line); }
/* 0.43 Timing › Phones */
.dev-table td { vertical-align: top; }
.dev-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; background: var(--ok); vertical-align: 0.05em; }
.dev-warn .dev-dot { background: var(--warn); } .dev-bad .dev-dot { background: var(--bad); }
.dev-bad td { color: var(--bad-ink); }
.dev-low { color: var(--bad-ink); font-weight: 600; }
.dev-old { color: var(--warn-ink); }
/* 0.42 equipment checklist under each location */
.kit { padding: 0 0 12px 26px; border-bottom: 1px solid var(--line); }
.kit summary { cursor: pointer; font-size: 14px; padding: 4px 0; list-style-position: outside; }
.kit summary .ic { vertical-align: -0.15em; }
.kit-total { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 8px 12px; margin: 0 0 6px; background: var(--soft); border-radius: 10px; font-size: 14px; }
.kit-list { list-style: none; margin: 6px 0 8px; padding: 0; }
.kit-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--line); }
.kit-list label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 15px; }
.kit-list input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--ink); flex: none; }
.kit-list li.done label span:not(.muted) { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.kit-add { display: flex; gap: 8px; margin: 8px 0; }
.kit-add input[name=name] { flex: 1; min-width: 0; }
.kit-add .kit-qty { width: 110px; }
.kit-sugg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.kit-chip { font: 13px var(--font); color: var(--ink); background: var(--paper, transparent); border: 1px dashed var(--line-strong); border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.kit-chip:hover { border-style: solid; border-color: var(--ink); }
@media print { .kit { padding-left: 0; } .kit summary { list-style: none; font-weight: 600; } .kit-list li { break-inside: avoid; } }
.table.people td { vertical-align: top; }

/* Registration */
.reg-switch-row { display: flex; gap: 20px; align-items: center; justify-content: space-between; }
.reg-switch-row h2 { margin-bottom: 4px; }
.reg-switch-row p { margin: 0; }
/* 0.37: the status pill says on/off – no coloured bar over the text; numbers wrap to the width they get */
.reg-stats { margin: 18px 0 8px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.reg-stats span small { font-size: 0.5em; color: var(--muted); }
.fields-table td { vertical-align: middle; padding: 8px 6px; }
.fields-table input[type=text] { display: block; margin-top: 6px; width: 100%; }
.paid-tick { width: 30px; height: 30px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--paper); color: var(--ink); cursor: pointer; font: 500 17px var(--font); line-height: 1; padding: 0; }
.paid-tick.on { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.embed-box .seg { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 6px; }
.embed-box .embed-tv { display: block; margin-bottom: 8px; }
.embed-box .embed-tv[hidden], .embed-help[hidden] { display: none; }
.emails { margin: 0 0 12px; }
.emails textarea, .embed-box textarea { width: 100%; font: 13px/1.4 var(--mono); padding: 10px 12px; }
.reg-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.reg-form .row2 input { width: 100%; margin-top: 5px; }
.price-note { margin: 10px 0 20px; }
@media (max-width: 600px) {
	.reg-switch-row { flex-direction: column; align-items: flex-start; }
}

/* Runners: form, bib generator, table tools */
.runner-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.runner-form .form-btns, .runner-form .span-all { grid-column: 1 / -1; }
.runner-form input, .runner-form select { height: 46px !important; }
.bib-gen { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 16px; align-items: end; }
.bib-gen .form-btns { margin: 0; }
.bib-gen select, .bib-gen input { width: 100%; max-width: none; }
.table-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.table-tools .filter { flex: 1 1 220px; margin: 0; }
.fix { color: var(--warn-ink); }
.bigbib { width: 110px !important; font-family: var(--mono); font-size: 22px !important; font-weight: 500; }
#lap-msg.ok { color: var(--ok-ink); font-weight: 500; }
#lap-msg.bad { color: var(--bad); font-weight: 500; }
.tap-ignored td { color: var(--muted); }
.tap-late td { background: var(--warn-bg); }

/* Check-in (0.32): a table on laptops, stacked rows on phones. Rows are drawn by race.js. */
section.ci { container: ci / inline-size; }
.ci-top { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 16px 0; }
.ci-top input[type=search] { font-size: 17px; height: 48px; min-width: 240px; flex: 1; max-width: 460px; border-radius: 999px; padding: 0 18px; }
.ci-top label { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.ci-top strong { font-family: var(--mono); font-weight: 400; }
.ci-msg { display: flex; gap: 10px; padding: 12px 16px; background: var(--ok-bg); color: var(--ok-ink); border-radius: var(--radius); margin: 8px 0; }
.ci-msg::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: .55em; border-radius: 50%; background: var(--ok); }
.ci-msg.err { background: var(--bad-bg); color: var(--bad-ink); }
.ci-msg.err::before { background: var(--bad); }
.ci-list { --ci-cols: minmax(170px, 2fr) 64px minmax(110px, 1.3fr) 84px minmax(110px, 1.2fr) 84px 148px; border-top: 1px solid var(--ink); }
.ci-list.has-chip { --ci-cols: minmax(170px, 2fr) 64px minmax(110px, 1.3fr) 84px minmax(110px, 1.2fr) 84px 120px 148px; }
.ci-head, .ci-row { display: grid; grid-template-columns: var(--ci-cols); gap: 12px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.ci-head { padding: 9px 4px 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ci-row.in { background: color-mix(in srgb, var(--ok-bg) 55%, transparent); }
.ci-name { min-width: 0; font-size: 15.5px; font-weight: 500; overflow-wrap: anywhere; }
.ci-c { min-width: 0; font-size: 13.5px; color: var(--muted); }
.ci-country { font-family: var(--mono); font-size: 13px; color: var(--ink); }
.ci-bib, .ci-chip { width: 100%; height: 44px; text-align: center; font-family: var(--mono); }
.ci-bib { font-size: 20px; font-weight: 500; padding: 0 6px; }
.ci-chip { font-size: 14px; padding: 0 6px; }
.ci-btn { height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font: 500 14px var(--font); cursor: pointer; white-space: nowrap; transition: background var(--fast), border-color var(--fast); }
.ci-btn:hover, .ci-btn:active { background: var(--ink); color: var(--on-ink); }
.ci-btn.undo { background: transparent; color: var(--muted); border-color: var(--line-strong); }
.ci-btn.undo:hover { background: transparent; color: var(--ink); border-color: var(--ink); }
.tag-s { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 400; white-space: nowrap; vertical-align: 2px; }
.tag-s::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.tag-s.ok { background: var(--ok-bg); color: var(--ok-ink); }
.tag-s.warn { background: var(--warn-bg); color: var(--warn-ink); }
.tag-s.win { background: var(--ink); color: var(--on-ink); }
.tag-bad { background: var(--bad-bg); color: var(--bad-ink); border-color: transparent; }   /* 0.38 e-mail bounced */
.tag .ic { width: 12px; height: 12px; vertical-align: -1px; }
.ci-unpaid { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 6px; background: var(--warn-bg); color: var(--warn-ink); font-size: 11px; font-weight: 500; vertical-align: middle; }
.ci-ice { font-size: 13px; }
.ci-ice summary { cursor: pointer; display: inline-block; padding: 1px 9px; border: 1px solid var(--signal); color: var(--signal); border-radius: 999px; font-size: 12px; list-style: none; }
.ci-ice summary::-webkit-details-marker { display: none; }
.ci-ice span { display: block; margin-top: 4px; color: var(--ink); }
.ci-ice .ci-med { color: var(--signal); }
.reset-form { margin-top: 28px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
@container ci (max-width: 880px) {
	.ci-list, .ci-list.has-chip { border-top: 0; }
	.ci-head { display: none; }
	.ci-row { display: flex; flex-wrap: wrap; gap: 8px 10px; padding: 12px 14px; margin: 8px 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); }
	.ci-row.in { background: var(--ok-bg); border-color: transparent; }
	.ci-name { flex-basis: 100%; font-size: 17px; }
	.ci-c:empty { display: none; }
	.ci-country::after { content: " ·"; color: var(--muted); }
	.ci-em { flex-basis: 100%; }
	.ci-bib { width: 84px; height: 52px; font-size: 24px; }
	.ci-chip { width: 120px; height: 52px; }
	.ci-btn { flex: 1; height: 52px; font-size: 15px; }
	/* 0.37: bib + button always on their own line, so every card lines up */
	.ci-row::after { content: ""; flex-basis: 100%; order: 1; }
	.ci-bib, .ci-chip, .ci-btn { order: 2; }
	.ci-em { order: 3; }
}

/* Timing tab: desk frame, chip reads */
.desk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.desk-head h2, .desk-head .btns { margin: 0; }
.desk-frame { margin: 14px 0 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); overflow: hidden; resize: vertical; height: 720px; min-height: 420px; }
.desk-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.chip-url { width: 100%; font-family: var(--mono); font-size: 13px; }
.chip-set { gap: 16px; flex-wrap: wrap; margin: 10px 0; }
.chip-set label { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
tr.read-lap td:last-child, tr.read-merged td:last-child { font-weight: 500; }
tr.read-unknown, tr.read-badtime, tr.read-refused { color: var(--bad); }
tr.read-start, tr.read-dup, tr.read-before { color: var(--muted); }

/* Finish: downloads, signatures, race team */
.table.downloads td { vertical-align: middle; }
.table.downloads td:last-child { white-space: nowrap; text-align: right; }
.table.downloads td:last-child .btn { margin-left: 4px; }
.sign-prev { display: block; max-height: 70px; max-width: 240px; margin: 6px 0; background: #fff; border: 1px dashed var(--line-strong); border-radius: 6px; padding: 4px; }   /* signatures stay on white */
.sign-prev.small-sign { display: inline-block; max-height: 32px; margin: 0; }
.team-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.team-row input[type=text] { width: auto; flex: 1 1 140px; min-height: 40px; font-size: 15px; }
.team-row input[type=file] { font-size: 13px; max-width: 220px; }
.team-add { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.team-show { margin-top: 12px; }
.profile-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
@media (max-width: 700px) { .table.downloads td:last-child { white-space: normal; text-align: left; } }

/* Volunteers: shifts, status, schedule */
.shift-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px 18px; margin: 0 0 10px; background: var(--paper); }
.shift-card.open { box-shadow: inset 3px 0 0 var(--warn); }
.shift-card.full { box-shadow: inset 3px 0 0 var(--ok); }
.shift-top { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: space-between; align-items: center; }
.shift-card .table { margin-top: 8px; }
.vstat { display: inline-block; white-space: nowrap; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; border-radius: 999px; padding: 1px 8px; }
.vstat-requested { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn); }
.vstat-confirmed { background: var(--ok-bg); color: var(--ok-ink); border: 1px solid var(--ok); }
.vstat-declined { background: var(--off-bg); color: var(--off-ink); border: 1px solid var(--line); }
tr.st-declined td { opacity: .55; }
/* 0.37: the actions per helper wrap instead of running out of the card */
.vact { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 10px; }
.vact form { margin: 0; }
@media (max-width: 700px) {
	.shift-card .table, .shift-card .table tbody, .shift-card .table tr, .shift-card .table td { display: block; }
	.shift-card .table tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
	.shift-card .table td { padding: 2px 0; border: 0; }
	.vact { justify-content: flex-start; margin-top: 6px; }
}
.move-form select, .assign-form select, .assign-form input { min-height: 36px; padding: 0 10px; font-size: 13px; max-width: 200px; }
.assign { margin-top: 8px; }
.assign summary { cursor: pointer; font-weight: 500; }
.assign-form { margin-top: 8px; gap: 6px; }
.sched-day { margin: 18px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.sched-row { display: grid; grid-template-columns: 110px 200px 1fr; gap: 12px; align-items: center; padding: 8px 10px; border-left: 3px solid var(--ok); background: var(--paper); border-radius: 0; margin: 0 0 6px; }
.sched-row.gap { border-left-color: var(--bad); }
.sched-time { font-family: var(--mono); font-weight: 400; font-variant-numeric: tabular-nums; }
.sched-who { display: flex; flex-wrap: wrap; gap: 4px; }
@media (max-width: 700px) { .sched-row { grid-template-columns: 1fr; gap: 4px; } }

/* ==================================================================
 * 7. SIDEBAR MENU (inside .app-side) + phone bottom bar on race pages
 * ================================================================== */
.side-nav { position: relative; display: flex; flex-direction: column; gap: 1px; padding-bottom: 16px; }
.side-back { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); text-decoration: none; padding: 0 10px 10px; }
.side-back:hover { color: var(--ink); }
.side-back .ic { width: 14px; height: 14px; }
/* Race switcher */
.side-race { border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 14px; background: var(--paper); }
.side-race summary { display: flex; gap: 10px; align-items: center; padding: 8px 10px; cursor: pointer; list-style: none; }
.side-race summary::-webkit-details-marker { display: none; }
.side-race summary img, .side-ph { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; flex: none; display: grid; place-items: center; background: var(--soft); color: var(--muted); }
.side-race summary > span:not(.side-ph) { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.side-race summary b { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-race summary small { font-size: 12px; color: var(--muted); }
.side-race-tog { color: var(--muted); }
.side-switch { display: flex; flex-direction: column; border-top: 1px solid var(--line); padding: 6px; max-height: 260px; overflow-y: auto; }
.side-switch a { padding: 6px 8px; border-radius: 6px; text-decoration: none; font-size: 14px; }
.side-switch a small { color: var(--muted); }
.side-switch a:hover { background: var(--soft); }
/* Groups + items */
.side-group { margin: 18px 10px 6px; font-size: 11px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.side-item { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); font: 400 14.5px/1.35 var(--font); text-align: left; text-decoration: none; cursor: pointer; transition: background var(--fast), color var(--fast); }
.side-item:hover { background: var(--soft); color: var(--ink); }
.side-item .side-ic { width: 18px; height: 18px; color: var(--muted); transition: color var(--fast); }
.side-item:hover .side-ic { color: var(--ink); }
.side-item.on { color: var(--ink); font-weight: 500; background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.side-item.on .side-ic { color: var(--ink); }
.side-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-ext { width: 14px; height: 14px; color: var(--faint); }
.side-badge { font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--muted); white-space: nowrap; }
.side-badge.live { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font); color: var(--signal); }
.side-badge.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }
.side-race-link .side-badge { font-size: 10.5px; }
/* The white "you are here" pill that glides between items (layout.php) */
.side-pill { position: absolute; z-index: 0; border-radius: 8px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); pointer-events: none; }
.side-pill.glide { transition: top .38s var(--ease-out), height .38s var(--ease-out); }
.has-pill > .side-item.on, .has-pill .side-row > .side-item.on { background: none; box-shadow: none; }
/* Sub-pages */
.side-row { display: flex; align-items: center; }
.side-row .side-item { flex: 1; min-width: 0; }
.side-tog { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-left: 2px; border: 0; background: none; border-radius: 6px; cursor: pointer; color: var(--muted); transition: transform .2s var(--ease-out); }
.side-tog:hover { background: var(--soft); color: var(--ink); }
.side-tog .ic { width: 15px; height: 15px; }
.side-grp.open .side-tog { transform: rotate(180deg); }
.side-kids { display: none; flex-direction: column; margin: 2px 0 8px 19px; }
.side-grp.open .side-kids { display: flex; }
.side-kids a { padding: 5px 12px; border-left: 1px solid var(--line); text-decoration: none; font-size: 13.5px; color: var(--muted); font-weight: 400; transition: color var(--fast), border-color var(--fast); }
.side-kids a:hover { color: var(--ink); border-left-color: var(--line-strong); }
.side-kids a.on { color: var(--ink); font-weight: 500; border-left-color: var(--ink); }
/* Bottom of the sidebar: plans, account, log out, appearance */
.side-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 1px; }
.side-out { margin: 0; }
.side-foot .theme-sw { align-self: flex-start; margin: 12px 0 0 6px; }

/* Phone bottom bar on race pages: big race-day buttons */
.bottom-bar { display: none; }
@media (max-width: 860px) {
	.bottom-bar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--paper); border-top: 1px solid var(--line); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
	.bottom-bar a, .bottom-bar button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px 6px; color: var(--ink-2); text-decoration: none; font: 400 11px var(--font); background: none; border: 0; border-radius: 10px; cursor: pointer; }
	.bottom-bar .ic { width: 22px; height: 22px; }
	.bottom-bar .on { color: var(--ink); font-weight: 500; background: var(--soft); }
	.bottom-bar .bb-sos { color: var(--signal); }
	.sub-tabs { top: var(--top-h); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.sub-tabs::-webkit-scrollbar { display: none; }
	.sub-tabs a { white-space: nowrap; }
}

/* ==================================================================
 * 8. OTHER PAGES
 * ================================================================== */
/* Home page – old simple version */
.hero { text-align: center; padding: 30px 0 40px; }
.hero h1 { font-size: clamp(36px, 7vw, 64px); text-transform: uppercase; }
.lead { font-size: 19px; max-width: 640px; margin: 0 auto 26px; color: var(--muted); }
.hero-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.price { background: var(--soft); border-radius: var(--radius-lg); padding: 18px; }
.price small { font-weight: 500; color: var(--muted); }
.price p { margin: 0; }

/* Home page (0.36) – Silent House calm: the clock, real screens, hairline sections */
.h-hero { padding: 24px 0 48px; }
.h-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.h-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); animation: live-pulse 2s ease-in-out infinite; }
.h-clock { font-family: var(--mono); font-weight: 300; font-size: clamp(88px, 19vw, 232px); line-height: .9; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; margin: 0 0 28px -0.04em; }
.h-clock.go-now { color: var(--signal); }
.h-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px 48px; padding-top: 24px; }
.h-split, .h-sec, .h-facts { position: relative; }
.h-split::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink); transform-origin: left; animation: ink-draw .7s var(--ease-io) .2s backwards; }
.h-note { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.h-note span { color: var(--ink); }
.h-copy h1 { font-size: clamp(34px, 4.4vw, 48px); font-weight: 300; line-height: 1.05; letter-spacing: -0.045em; margin: 0 0 16px; }
.h-lead { font-size: 18px; line-height: 1.5; color: var(--ink-2); max-width: 56ch; margin: 0 0 24px; }
.h-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0 0 12px; }
.h-btns .go { font-size: 16px; }
/* Real screens */
.h-screens { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 32px; align-items: end; margin: 0 0 56px; }
.h-shot { margin: 0; }
.h-shot img { display: block; width: 100%; height: auto; }
.h-shot figcaption { margin-top: 12px; font-size: 13px; color: var(--muted); }
.h-phone { padding: 7px; border-radius: 34px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 24px 60px -24px var(--shadow); }
.h-phone img { border-radius: 27px; }
.h-frame { padding: 6px; border-radius: 16px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 24px 60px -24px var(--shadow); }
.h-frame img { border-radius: 10px; }
/* Facts strip */
.h-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 20px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); margin: 0 0 72px; }
.h-facts div { display: flex; flex-direction: column; gap: 2px; }
.h-facts b { font-weight: 500; }
.h-facts span { color: var(--muted); font-size: 14px; }
/* Sections: number + title on a hairline */
.h-sec { margin: 0 0 88px; padding-top: 24px; border-top: 1px solid var(--line); }
.h-head { margin: 0 0 32px; }
.h-n { display: block; font-size: 12px; color: var(--muted); margin: 0 0 10px; }
.h-head h2, .h-band h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 300; letter-spacing: -0.04em; line-height: 1.1; margin: 0; }
.h-sub { margin: 10px 0 0; color: var(--muted); }
.h-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.h-steps li { border-top: 1px solid var(--ink); padding-top: 14px; }
.h-steps .mono { font-size: 12px; color: var(--muted); }
.h-steps h3 { font-size: 18px; font-weight: 500; margin: 10px 0 6px; }
.h-steps p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
/* Race day: dark band (dark in both themes) */
.h-band { background: #0E0E0D; color: #EDEDEA; border-radius: 20px; padding: clamp(32px, 6vw, 72px); margin: 0 0 88px; }
.h-band-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 48px; align-items: center; }
.h-band .h-n { color: #8A8984; }
.h-band .h-lead { color: #BDBCB7; margin: 16px 0 24px; }
.h-list { list-style: none; padding: 0; margin: 0; }
.h-list li { padding: 10px 0; border-top: 1px solid #262624; font-size: 15px; }
.h-list li::before { content: "↳ "; color: #8A8984; }
.h-shot-night { max-width: 280px; justify-self: end; width: 100%; }
.h-shot-night .h-phone { background: #000; box-shadow: 0 0 0 1px #262624; }
.h-shot-night figcaption { color: #8A8984; }
/* Watching + before/after: feature lists */
.h-watch-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; }
.h-two { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.h-two .eyebrow { margin: 0 0 4px; }
.h-feats { margin: 0; }
.h-feats dt { font-weight: 500; padding-top: 14px; border-top: 1px solid var(--line); }
.h-feats dd { margin: 4px 0 16px; color: var(--muted); font-size: 15px; line-height: 1.5; }
/* Pricing: hairline columns */
.h-prices { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); }
.h-price { display: flex; flex-direction: column; gap: 8px; padding: 18px 24px 8px 0; }
.h-price + .h-price { padding-left: 24px; border-left: 1px solid var(--line); }
.h-price p { margin: 0; font-size: 15px; color: var(--ink-2); }
.h-price .eyebrow { font-size: 11px; color: var(--muted); }
.h-price .h-amount { font-size: 40px; line-height: 1.1; font-weight: 300; letter-spacing: -0.04em; color: var(--ink) !important; }
.h-price .h-amount small { font-family: var(--font); font-size: 14px; color: var(--muted); letter-spacing: 0; }
.h-price .small { font-size: 13px; color: var(--muted); }
.h-price .go { margin-top: auto; padding-top: 8px; }
.h-pnote { margin: 20px 0 0; }
/* Questions */
.h-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 0 48px; }
.h-faq details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.h-faq details:first-child { padding-top: 0; }
.h-faq summary { font-weight: 500; cursor: pointer; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.h-faq summary::-webkit-details-marker { display: none; }
.h-faq summary::after { content: "+"; font-family: var(--mono); font-weight: 300; color: var(--muted); transition: transform var(--fast) var(--ease-out); }
.h-faq details[open] summary::after { transform: rotate(45deg); }
.h-faq details p { margin: 10px 0 0; color: var(--muted); line-height: 1.55; }
/* Maker + closing call */
.h-maker { margin: 0 0 72px; padding-top: 24px; border-top: 1px solid var(--line); }
.h-quote { font-size: clamp(24px, 3vw, 32px); font-weight: 300; letter-spacing: -0.03em; margin: 0 0 8px; }
.h-cta { padding: 56px 0 16px; border-top: 1px solid var(--ink); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.h-cta h2 { font-size: clamp(28px, 4vw, 48px); font-weight: 300; letter-spacing: -0.045em; margin: 0; }
body.site:has(.h-hero) .main { max-width: 1200px; }
@media (max-width: 960px) {
	.h-screens { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 20px; }
	.h-facts, .h-steps, .h-prices { grid-template-columns: 1fr 1fr; }
	.h-price:nth-child(3) { padding-left: 0; border-left: 0; }
	.h-price:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 12px; }
	.h-watch-grid, .h-band-in { grid-template-columns: 1fr; }
	.h-shot-night { justify-self: start; max-width: 240px; }
}
@media (max-width: 640px) {
	.h-hero { padding-top: 8px; }
	.h-split, .h-faq, .h-two { grid-template-columns: 1fr; }
	.h-screens { grid-template-columns: 1fr; }
	.h-shot-phone:first-child { max-width: 260px; }
	.h-facts, .h-steps, .h-prices { grid-template-columns: 1fr; gap: 20px; }
	.h-price, .h-price + .h-price { padding: 16px 0 8px; border-left: 0; }
	.h-price + .h-price { border-top: 1px solid var(--line); margin-top: 0; }
	.h-lead { font-size: 17px; }
	.h-band { border-radius: 14px; }
	.h-cta { flex-direction: column; align-items: flex-start; }
}

/* Plans */
.plans li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.prices.buy { margin-bottom: 20px; }
.prices.buy .price { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); background: var(--paper); padding: 22px; }
.prices.buy .price h3 { margin: 0; font-size: 20px; font-weight: 400; letter-spacing: -0.02em; text-transform: none; color: var(--ink); display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.prices.buy .price h3 small { font-family: var(--mono); font-size: 15px; color: var(--ink); }
.prices.buy .price .btn { margin-top: auto; }
.prices.buy .price p { margin: 0; }

/* Privacy policy + Terms */
.legal { max-width: 780px; margin: 0 auto; line-height: 1.6; }
.legal h2 { font-size: 22px; margin: 32px 0 8px; }
.legal ul { padding-left: 20px; }
.legal li { margin: 4px 0; }

/* Feedback */
.fb .lead { color: var(--muted); }
.fb-kinds { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.fb-kinds legend { font-weight: 500; margin-bottom: 6px; }
.fb-kind { display: flex !important; flex-direction: row !important; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); cursor: pointer; font-weight: 400 !important; background: var(--paper); }
.fb-kind:has(input:checked) { border-color: var(--ink); background: var(--soft); }
.fb-kind input { width: 20px; height: 20px; accent-color: var(--ink); }
.fb-tr-hint { display: none; margin: -6px 0 0; }
.fb-kinds:has(input[value=translation]:checked) ~ .fb-tr-hint { display: block; }
.fb-box { background: var(--soft); border-radius: 12px; padding: 14px 18px; margin: 14px 0; }
.fb-box ol { margin: 6px 0 0; padding-left: 20px; }
.fb-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.fb-card + .fb-card { margin-top: 12px; }
.fb-card h3 { margin: 0 0 2px; }
.fb-card p { margin: 0; }
.fb-item { border-top: 1px solid var(--line); padding: 12px 0; }
.fb-item.done { opacity: .5; }
.fb-head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.fb-head form { margin-left: auto; }
.fb-item p { margin: 6px 0 0; white-space: normal; }
@media (max-width: 600px) { .fb-card { flex-direction: column; align-items: flex-start; } }

/* Confirm your e-mail */
.verify-icon { margin: 0 0 8px; line-height: 1; color: var(--muted); }
.verify-icon .ic { width: 44px; height: 44px; stroke-width: 1.2; }
.verify .lead { margin-left: auto; margin-right: auto; }
.verify-fix { margin: 22px auto 0; max-width: 360px; text-align: left; }
.verify-fix summary { cursor: pointer; text-align: center; color: var(--muted); }
.verify-logout { margin-top: 18px; }

/* Manual (/help) */
.help { display: grid; grid-template-columns: 220px 1fr; gap: 36px; align-items: start; }
.help-toc { position: sticky; top: 24px; padding: 4px 0 0; font-size: 14px; }
.help-toc-title { margin: 0 0 10px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.help-toc ol { margin: 0 0 12px; padding-left: 20px; }
.help-toc li { margin: 4px 0; }
.help-toc a:hover { color: var(--muted); }
.help-body { min-width: 0; max-width: 760px; }
.help-body h1 { margin-top: 0; }
.help-body h2 { margin: 48px 0 12px; padding-top: 14px; border-top: 1px solid var(--ink); scroll-margin-top: 12px; }
.help-body h3 { margin: 28px 0 8px; scroll-margin-top: 12px; }
.help-body li { margin: 5px 0; }
.help-body code { font-family: var(--mono); background: var(--soft); padding: 1px 5px; border-radius: 4px; font-size: .9em; word-break: break-word; }
.help-body .lead { margin-left: 0; margin-right: 0; max-width: none; }
.help-steps li { margin: 8px 0; }
.help-tip { background: var(--soft); border-left: 3px solid var(--ink); padding: 10px 14px; border-radius: 0; }
.hf { margin: 16px 0 22px; }
.hf img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 2px 10px var(--shadow); }
.hf figcaption { font-size: 14px; color: var(--muted); margin-top: 6px; }
.hf-narrow img { max-width: min(420px, 100%); }
.hf-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 16px 0 22px; }
.hf-row .hf { margin: 0; }
.hf-phone img { border-radius: 14px; }
.help-faq dt { font-weight: 500; margin-top: 16px; }
.help-faq dd { margin: 4px 0 0; }
.help-h1-logo { width: 54px; height: 54px; vertical-align: -10px; margin-right: 6px; }
@media (max-width: 820px) {
	.help { grid-template-columns: 1fr; gap: 16px; }
	.help-toc { position: static; }
	.hf-row { grid-template-columns: repeat(2, 1fr); }
}

/* ==================================================================
 * 9. PRINT – always light, no motion
 * ================================================================== */
@media print {
	:root, :root[data-theme="dark"] {
		color-scheme: light;
		--bg: #fff; --paper: #fff; --soft: #f3f3f3; --soft-2: #e6e6e6; --field: #f3f3f3;
		--ink: #111; --on-ink: #fff; --muted: #555; --faint: #999; --line: #ddd; --line-strong: #bbb;
		--inverse: #111; --on-inverse: #fff;
	}
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.app-side, .app-top, .side-scrim, .bottom-bar, .sub-tabs { display: none !important; }
	.app-main { margin-left: 0; }
	.app .main { padding: 0; }
	.ice-list { font-size: 11pt; }
	.ice-list td { padding: 4px 6px; }
}
/* The printed manual (/help → Print) */
@media print {
	@page { size: A4; margin: 14mm 14mm 16mm; }
	@page bare { margin: 0; }
	html, body { font-size: 10.5pt; }
	.topbar, .footer, .help-toc, .flash, .screen-only { display: none !important; }
	.print-only { display: block; }
	.main { max-width: none; padding: 0; min-height: 0; }
	.help { display: block; }
	.help-body { max-width: none; }
	.help-body h2 { break-before: page; border-top: 0; margin-top: 0; }
	.help-body h3, .help-faq dt { break-after: avoid; }
	.hf, .hf-row, .help-faq dd, li { break-inside: avoid; }
	.hf img { box-shadow: none; max-height: 120mm; width: auto; }
	.hf-row { grid-template-columns: repeat(3, 1fr); gap: 10px; }
	.hf-phone img { max-height: 85mm; width: auto; }
	a { text-decoration: none; background: none !important; }
	/* cover + back page: whole page, no page number */
	.help-cover, .help-back { page: bare; height: 296mm; box-sizing: border-box; display: block; text-align: center; padding: 0 20mm; break-after: page; position: relative; overflow: hidden; }
	.help-back { break-before: page; break-after: auto; padding-top: 70mm; }
	.help-cover { border-bottom: 12mm solid #C8102E; padding-top: 40mm; }
	.help-cover-logo { width: 95mm; height: 95mm; display: block; margin: 8mm auto 0; }
	.help-cover-name { display: block; width: 130mm; margin: 14mm auto 0; }
	.help-cover-title { font-size: 20pt; font-weight: 500; color: #C8102E; text-transform: uppercase; letter-spacing: 6pt; margin: 6mm 0 0; }
	.help-cover-sub { font-size: 12pt; color: #444; max-width: 120mm; margin: 8mm 0 0; }
	.help-cover-foot { position: absolute; bottom: 22mm; left: 0; right: 0; font-size: 10pt; color: #666; }
	.help-back-logo { width: 110mm; display: block; margin: 0 auto; }
	.help-back-name { font-size: 20pt; font-weight: 500; margin: 6mm 0 0; }
	.help-back-claim { color: #C8102E; font-weight: 500; margin: 6mm 0 10mm; }
	.help-back-contact { display: inline-grid; grid-template-columns: auto auto; gap: 2.5mm 6mm; text-align: left; font-size: 11pt; margin: 0; }
	.help-back-contact dt { color: #666; text-align: right; }
	.help-back-contact dd { margin: 0; font-weight: 500; }
	.help-back-foot { margin-top: 14mm; color: #888; font-size: 9pt; }
	/* contents page */
	.help-contents { break-after: page; }
	.help-contents-title { font-size: 22pt; margin: 0 0 8mm !important; }
	.help-contents-list { list-style: none; padding: 0; margin: 0; }
	.help-contents-list li { display: flex; flex-wrap: wrap; align-items: baseline; margin: 0; }
	.help-contents-list li > span { order: 1; }
	.help-contents-list li > i { order: 2; flex: 1; border-bottom: 1.2px dotted #999; margin: 0 2mm; transform: translateY(-1mm); }
	.help-contents-list li > b { order: 3; min-width: 6mm; text-align: right; }
	.help-contents-list li > ol { order: 4; flex-basis: 100%; list-style: none; padding: 0 0 0 7mm; margin: 1mm 0 0; }
	.hc-ch { font-weight: 500; font-size: 12.5pt; margin-top: 4.5mm !important; }
	.hc-ch ol li { font-weight: 400; font-size: 10.5pt; margin: .8mm 0 !important; }
	.hc-ch ol li b { font-weight: 400; }
}


/* 0.38 Platform › Emails: long addresses wrap on phones */
.mail-settings td { overflow-wrap: anywhere; }

/* 0.39 Races on Backyard Timing – homepage section + /races (hairline rows, mono numbers) */
.rc-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.rc-group { margin: 0 0 36px; }
.rc-group:last-child { margin-bottom: 0; }
.rc-group > .eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.rc-live { color: var(--signal-ink) !important; }
.rc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.rc-list li { border-bottom: 1px solid var(--line); }
.rc-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) 110px minmax(0, 3fr) 20px; gap: 16px; align-items: baseline;
	padding: 14px 0; color: var(--ink); text-decoration: none; transition: background var(--fast), padding var(--fast) var(--ease-out); }
.rc-row:hover { background: var(--soft); padding-left: 10px; padding-right: 10px; }
.rc-name { font-weight: 500; font-size: 16px; overflow-wrap: anywhere; }
.rc-place { color: var(--muted); font-size: 14px; }
.rc-flag { width: 18px; height: 12px; object-fit: cover; border-radius: 2px; vertical-align: -1px; margin-right: 4px; }
.rc-when { color: var(--muted); font-size: 13px; }
.rc-fact { font-size: 14px; }
.rc-fact b { font-weight: 500; }
.rc-reg { color: var(--ok-ink); }
.rc-go { color: var(--muted); font-size: 13px; text-align: right; transition: transform var(--fast) var(--ease-out); }
.rc-row:hover .rc-go { color: var(--ink); transform: translate(2px, -2px); }
.rc-page { border-top: 0; padding-top: 0; }
.rc-page h1 { font-size: clamp(34px, 4vw, 48px); font-weight: 300; letter-spacing: -0.045em; line-height: 1.1; margin: 6px 0 10px; }
.rc-own { margin-top: 40px; }
@media (max-width: 820px) {
	.rc-row { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; }
	.rc-name { grid-column: 1; }
	.rc-when { grid-column: 2; grid-row: 1; text-align: right; }
	.rc-place { grid-column: 1 / -1; }
	.rc-fact { grid-column: 1 / -1; }
	.rc-go { display: none; }
}