/* ============================================================
 * Theme tokens.
 *
 * Every colour below is a token, never a literal, so the whole site has one
 * place where "what is dark" and "what is light" are decided.
 *
 * The first two blocks are the shipped pair: a neutral slate scale plus a
 * single blue accent, because a blue accent reads as a link or an action
 * without competing with the three status colours, and the neutral scale keeps
 * every surface distinguishable from the text on it.
 *
 * After them sit two more candidates - orange and red - each with warm
 * neutrals, because a warm accent on a cool slate surface reads as an accident
 * rather than a choice. They exist so the switcher can walk every option and a
 * choice can be made by looking rather than by reading hex. The blocks are
 * ordered by *selector*: mode first (`light`/`dark`), then palette, so the
 * warm blocks override the neutrals and the accent blocks override only the
 * accent. Everything is keyed off the single `data-theme` attribute, whose
 * values are listed in public/theme.js.
 *
 * Dark · Red is the default. A rider's explicit choice is kept in localStorage.
 * ============================================================ */
:root {
	color-scheme: dark;
	--bg: #1c1917;
	--surface: #292524;
	--surface-2: #44403c;
	--surface-3: #57534e;
	--border: #44403c;
	--border-strong: #57534e;
	--text: #f5f5f4;
	--text-muted: #d6d3d1;
	--text-faint: #a8a29e;
	--accent: #fca5a5;
	--accent-hover: #fca5a5;
	--accent-contrast: #1c1917;
	--accent-2: #f97316;
	--ok: #4ade80;
	--ok-bg: #052e16;
	--warn: #fbbf24;
	--warn-bg: #451a03;
	--bad: #f87171;
	--bad-bg: #450a0a;
	--shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 1px 3px rgb(0 0 0 / 0.3);
}

/* Explicit light choice: the unqualified root is the Dark · Red default. */
:root[data-theme="light"] {
	color-scheme: light;
	--bg: #f8fafc;
	--surface: #ffffff;
	--surface-2: #f1f5f9;
	--surface-3: #e2e8f0;
	--border: #e2e8f0;
	--border-strong: #cbd5e1;
	--text: #0f172a;
	--text-muted: #475569;
	--text-faint: #94a3b8;
	--accent: #2563eb;
	--accent-hover: #1d4ed8;
	--accent-contrast: #ffffff;
	--accent-2: #0891b2;
	--ok: #15803d;
	--ok-bg: #dcfce7;
	--warn: #a16207;
	--warn-bg: #fef3c7;
	--bad: #b91c1c;
	--bad-bg: #fee2e2;
	--shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 1px 3px rgb(0 0 0 / 0.1);
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--bg: #0f172a;
	--surface: #1e293b;
	--surface-2: #334155;
	--surface-3: #475569;
	--border: #334155;
	--border-strong: #475569;
	--text: #f1f5f9;
	--text-muted: #cbd5e1;
	--text-faint: #64748b;
	--accent: #93c5fd;
	--accent-hover: #93c5fd;
	--accent-contrast: #0f172a;
	--accent-2: #22d3ee;
	--ok: #4ade80;
	--ok-bg: #052e16;
	--warn: #fbbf24;
	--warn-bg: #451a03;
	--bad: #f87171;
	--bad-bg: #450a0a;
	--shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 1px 3px rgb(0 0 0 / 0.3);
}

/* Warm neutrals, matched to whichever warm accent is on: stone in the light
   theme, a warm charcoal in the dark one. Also re-tones --warn to gold, since
   a burnt-amber warning sitting beside an orange accent stops reading as a
   warning at all. */
:root[data-theme^="light-"] {
	color-scheme: light;
	--bg: #fafaf9;
	--surface: #ffffff;
	--surface-2: #f5f5f4;
	--surface-3: #e7e5e4;
	--border: #e7e5e4;
	--border-strong: #d6d3d1;
	--text: #1c1917;
	--text-muted: #57534e;
	--text-faint: #78716c;
	--accent-contrast: #ffffff;
	--warn: #a16207;
	--warn-bg: #fef9c3;
}

:root[data-theme^="dark-"] {
	color-scheme: dark;
	--bg: #1c1917;
	--surface: #292524;
	--surface-2: #44403c;
	--surface-3: #57534e;
	--border: #44403c;
	--border-strong: #57534e;
	--text: #f5f5f4;
	--text-muted: #d6d3d1;
	--text-faint: #a8a29e;
	--accent-contrast: #1c1917;
}

:root[data-theme="light-orange"] {
	--accent: #c2410c;
	--accent-hover: #9a3412;
	--accent-2: #f59e0b;
}

:root[data-theme="dark-orange"] {
	--accent: #fdba74;
	--accent-hover: #fdba74;
	--accent-2: #f59e0b;
}

:root[data-theme="light-red"] {
	--accent: #dc2626;
	--accent-hover: #b91c1c;
	--accent-2: #f97316;
}

:root[data-theme="dark-red"] {
	--accent: #fca5a5;
	--accent-hover: #fca5a5;
	--accent-2: #f97316;
}
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/**
 * The UA rule for [hidden] is a bare `display: none`, so any later `display` in
 * this file silently beats it. Several containers here are flex, and the
 * dashboard is hidden by attribute until an event is chosen.
 */
[hidden] {
	display: none !important;
}

body {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	background: var(--bg);
	color: var(--text);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

header {
	padding: 1.25rem 2rem;
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

header .logo {
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--accent-contrast);
	background: var(--accent);
	padding: 0.35rem 0.75rem;
	border-radius: 6px;
}

.nav {
	display: flex;
	gap: 0.75rem;
	margin-left: auto;
}

.nav a {
	color: var(--text-muted);
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 600;
	padding: 0.35rem 0.65rem;
	border-radius: 6px;
	border: 1px solid transparent;
}

.nav a:hover {
	color: var(--text);
}

.nav a.active {
	color: var(--text);
	border-color: var(--surface-2);
	background: var(--surface);
}

#status {
	font-size: 0.85rem;
	color: var(--text-muted);
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

#status .dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--text-faint);
}

#status.live .dot {
	background: var(--ok);
}

#status.connecting .dot {
	background: var(--warn);
}

main {
	flex: 1;
	width: 100%;
	padding: 2rem 2rem 4rem;
}

.region-bar {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	background: var(--surface);
	border-bottom: 1px solid var(--border);
}

.region-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	padding: 0.8rem 0.5rem 0.9rem;
	border-left: 1px solid var(--surface-3);
}

.region-card:first-child {
	border-left: none;
}

.region-card .region-name {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--text);
	font-size: 0.85rem;
	font-weight: 600;
}

.region-card .region-name .flag {
	font-size: 1rem;
}

.region-card .region-time {
	color: var(--accent);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
}

h1 {
	font-size: 2rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin-bottom: 1.25rem;
}

h2 {
	font-size: 1rem;
	font-weight: 700;
	color: var(--accent);
	margin-bottom: 1rem;
}

.dashboard-layout {
	display: grid;
	grid-template-columns: 4fr 1fr;
	gap: 1rem;
	align-items: stretch;
}

.main-column {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	min-width: 0;
}

.spotlight-row {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 1rem;
	align-items: start;
}

@media (max-width: 720px) {
	.spotlight-row {
		grid-template-columns: 1fr;
	}
}

.cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
	min-width: 0;
}

@media (max-width: 720px) {
	.dashboard-layout {
		grid-template-columns: 1fr;
	}
	.cards {
		grid-template-columns: 1fr;
	}
	.region-bar {
		grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	}
	main {
		padding: 1.5rem 1rem 3rem;
	}
}

.card {
	background: var(--surface);
	border: 1px solid var(--surface-2);
	border-radius: 10px;
	padding: 1.25rem;
}

form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 2.5rem;
}

.card form {
	margin-bottom: 0;
}

input,
select,
button {
	font: inherit;
	font-size: 0.95rem;
	padding: 0.6rem 0.8rem;
	border-radius: 8px;
	border: 1px solid var(--surface-2);
	background: var(--surface);
	color: var(--text);
}

select option {
	background: var(--surface);
}

input:focus,
select:focus {
	outline: none;
	border-color: var(--accent);
}

input[type="text"] {
	width: 140px;
}

input[type="number"] {
	width: 110px;
}

input[type="checkbox"] {
	width: auto;
	padding: 0;
	border: none;
	background: none;
	accent-color: var(--accent);
}

label.check {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--text-muted);
	font-size: 0.9rem;
	padding: 0.6rem 0;
}

.hint {
	margin: 0.1rem 0 0.6rem;
	color: var(--text-faint);
	font-size: 0.78rem;
	line-height: 1.4;
	max-width: 46rem;
}

button {
	background: var(--accent);
	color: var(--accent-contrast);
	border: none;
	cursor: pointer;
	font-weight: 600;
	transition: background 0.15s;
}

button:hover {
	background: var(--accent-hover);
}

.notice {
	min-height: 1.2em;
	font-size: 0.85rem;
	margin-top: 0.6rem;
	color: var(--text-muted);
}

.notice.ok {
	color: var(--ok);
}

.notice.err {
	color: var(--bad);
}

.feed h2 {
	margin-bottom: 0;
}

form#post-form {
	margin-top: 1rem;
}

ul#events {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

#events li {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	padding: 0.85rem 1rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 8px;
}

#events li .user {
	font-weight: 700;
	min-width: 120px;
}

#events li .type {
	color: var(--bad);
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	min-width: 50px;
}

#events li .badge {
	font-size: 0.7rem;
	text-transform: uppercase;
	color: var(--warn);
	border: 1px solid var(--border-strong);
	padding: 0.1rem 0.4rem;
	border-radius: 4px;
}

#events li .meta {
	color: var(--text-muted);
	font-size: 0.8rem;
	min-width: 100px;
}

#events li .numbers {
	margin-left: auto;
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
}

#events li .numbers .distance {
	color: var(--text);
	font-size: 0.9rem;
}

#events li .numbers .duration {
	color: var(--text-muted);
	font-size: 0.9rem;
}

#events li .when {
	color: var(--text-faint);
	font-size: 0.8rem;
	min-width: 70px;
	text-align: right;
}

#events li.new {
	animation: flash 1s ease-out;
}

@keyframes flash {
	0% {
		background: var(--bad-bg);
		border-color: var(--accent);
	}
	100% {
		background: var(--surface);
	}
}

.empty {
	color: var(--text-faint);
	text-align: center;
	padding: 2rem 0;
}

.card.stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.55rem;
	padding: 1.5rem 1rem;
}

.stat-value {
	color: var(--accent);
	font-size: 1.7rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.stat-hr {
	border: none;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, var(--accent), var(--border-strong));
}

.stat-label {
	color: var(--text-muted);
	font-size: 0.83rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

@media (min-width: 721px) and (max-width: 1050px) {
	.card.stat {
		padding: 1.25rem 0.5rem;
	}
	.stat-value {
		font-size: 1.5rem;
	}
}

@media (max-width: 720px) {
	.card.stat {
		padding: 1.5rem 1rem;
	}
	.stat-value {
		font-size: 1.7rem;
	}
}

.rider-feed {
	display: flex;
	flex-direction: column;
	padding: 1.25rem 1rem;
	min-width: 0;
}

.rider-feed h2 {
	margin-bottom: 0.75rem;
	font-size: 1rem;
}

#rider-feed-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.feed-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.35rem;
	font-size: 0.85rem;
	line-height: 1.35;
}

.feed-item .feed-name {
	font-weight: 700;
	color: var(--text);
}

.feed-item .feed-text {
	color: var(--text-muted);
	text-transform: uppercase;
}

.feed-item .feed-emoji .emoji {
	width: 18px;
	height: 18px;
	object-fit: cover;
	vertical-align: middle;
}

.team-spotlight {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.ts-bar,
.ts-bar-2 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-radius: 8px;
	overflow: hidden;
}

.ts-bar-2 {
	grid-template-columns: repeat(2, 1fr);
}

.ts-bar-top,
.ts-bar-bottom {
	background: linear-gradient(90deg, var(--surface-2) 0%, var(--accent-2) 100%);
}

.ts-cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	padding: 0.9rem 0.5rem;
	position: relative;
}

.ts-cell:not(:last-child)::after {
	content: "";
	position: absolute;
	right: -1px;
	top: 10%;
	bottom: 10%;
	width: 2px;
	background: var(--accent);
}

.ts-value {
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1;
	color: var(--accent);
	font-variant-numeric: tabular-nums;
}

.ts-label {
	font-size: 0.51rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-muted);
}

.ts-name {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.6rem 0;
	background: linear-gradient(45deg, var(--surface-2) 80%, var(--accent-2) 80%);
}

.ts-team-name {
	font-size: 0.93rem;
	font-weight: 700;
	color: var(--text);
}

.leaderboards h2 {
	text-align: center;
	text-transform: uppercase;
}

.leaderboard-card {
	background: var(--surface-3);
	border: 1px solid var(--surface-2);
	border-radius: 10px;
	padding: 1.25rem;
}

.leaderboards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

@media (max-width: 720px) {
	.leaderboards {
		grid-template-columns: 1fr;
	}
}

#leaderboard-riders,
#leaderboard-teams {
	list-style: none;
	display: flex;
	flex-direction: column;
}

#leaderboard-riders li,
#leaderboard-teams li {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--border);
}

#leaderboard-riders li:last-child,
#leaderboard-teams li:last-child {
	border-bottom: none;
}

#leaderboard-riders .rank,
#leaderboard-teams .rank {
	color: var(--text-faint);
	font-weight: 700;
	width: 1.5rem;
	text-align: right;
	font-size: 0.85rem;
}

#leaderboard-riders .value,
#leaderboard-teams .value {
	color: var(--accent);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.flag {
	font-size: 1rem;
	line-height: 1;
	font-family:
		"Apple Color Emoji",
		"Segoe UI Emoji",
		"Noto Color Emoji",
		sans-serif;
}

.flag .emoji {
	width: 24px;
	height: 16px;
	object-fit: cover;
	vertical-align: middle;
}

.bar-track {
	display: block;
	flex: 1 1 100%;
	height: 6px;
	background: var(--surface-3);
	border-radius: 4px;
	overflow: hidden;
	margin-top: 0.15rem;
}

.bar-track i {
	display: block;
	height: 100%;
	background: var(--accent);
	border-radius: 4px;
	/* The bar is the one piece of a leaderboard row that cannot be a transform -
	   it is a percentage of the leader's value, so it grows as a width. */
	transition: width 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/**
 * Both live-board motions - the counters climbing and the rows sliding - are
 * opt-out. A counter that animates anyway after the reader has asked for reduced
 * motion is the bug, so the CSS transitions are cut here as well as the tweens
 * being skipped in `motion.js`: the bar's width is animated purely in CSS and
 * would otherwise survive a JS-level opt-out.
 */
@media (prefers-reduced-motion: reduce) {
	.bar-track i {
		transition: none;
	}
	#leaderboard-riders li,
	#leaderboard-teams li {
		transition: none !important;
	}
}

#leaderboard-teams li {
	flex-wrap: wrap;
}

#leaderboard-riders .name,
#leaderboard-teams .name {
	font-weight: 600;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#leaderboard-riders .meta,
#leaderboard-teams .meta {
	color: var(--text-muted);
	font-size: 0.8rem;
	max-width: 40%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#leaderboard-riders li.empty,
#leaderboard-teams li.empty {
	border: none;
}

.manage-form-card form {
	margin-bottom: 0;
	align-items: center;
}

.manage-form-card h2 {
	margin-bottom: 1rem;
}

input[type="date"] {
	width: 160px;
}

input[type="datetime-local"] {
	width: 215px;
}

.boundary-fields {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

/* An author `display` beats the UA rule for [hidden], so restate it. */
.boundary-fields[hidden] {
	display: none;
}

button.ghost {
	background: transparent;
	border: 1px solid var(--surface-2);
	color: var(--text-muted);
}

button.ghost:hover {
	background: var(--border);
	color: var(--text);
}

button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.modality-set {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	border: 1px solid var(--surface-2);
	border-radius: 8px;
	padding: 0.25rem 0.85rem;
}

.modality-set legend {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-faint);
	padding: 0 0.3rem;
}

.manage-section {
	margin: 2.5rem 0;
}

.manage-section h2 {
	margin-bottom: 0.75rem;
}

.manage-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.manage-list li {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	padding: 0.85rem 1rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 8px;
}

.manage-list li.selected {
	border-color: var(--accent);
	background: var(--bad-bg);
}

.manage-list .title {
	font-weight: 700;
	min-width: 160px;
}

.manage-list .detail {
	color: var(--text-muted);
	font-size: 0.85rem;
}

/* Explains why the historic list holds nothing you can act on. */
.manage-section .section-note {
	color: var(--text-muted);
	font-size: 0.85rem;
	margin: 0 0 0.75rem;
	max-width: 60ch;
}

/* A finished event: present as a record, inert as an invitation. */
.manage-list li.historic {
	color: var(--text-faint);
}

.manage-list li.historic .title {
	font-weight: 500;
}

.manage-list .counts {
	color: var(--text-faint);
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
}

.manage-list .actions {
	margin-left: auto;
	display: flex;
	gap: 0.5rem;
}

.manage-list .actions button {
	padding: 0.35rem 0.7rem;
	font-size: 0.85rem;
}

.manage-list .actions button.ghost:hover {
	background: var(--bad-bg);
	border-color: var(--bad);
	color: var(--text);
}

.manage-list.compact li {
	padding: 0.6rem 0.8rem;
	font-size: 0.9rem;
}

.manage-list.compact .actions button {
	padding: 0.25rem 0.55rem;
	font-size: 0.8rem;
}

.badge {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.15rem 0.45rem;
	border-radius: 4px;
	border: 1px solid var(--border-strong);
	color: var(--text-muted);
}

.badge.pending {
	color: var(--warn);
	border-color: var(--warn-bg);
}

.badge.open {
	color: var(--ok);
	border-color: var(--ok-bg);
}

.badge.closed {
	color: var(--text-muted);
}

.badge.locked {
	color: var(--bad);
	border-color: var(--bad-bg);
}

.roster-card {
	margin-top: 2.5rem;
}

.roster-window {
	color: var(--text-muted);
	font-size: 0.85rem;
	margin-top: -0.5rem;
	margin-bottom: 1.25rem;
}

.modality-boxes {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.roster-window.locked {
	color: var(--bad);
}

.roster-grid {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 1.5rem;
	align-items: start;
}

@media (max-width: 720px) {
	.roster-grid {
		grid-template-columns: 1fr;
	}
}

.roster-pane h3 {
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-muted);
	margin-bottom: 0.6rem;
}

.roster-form {
	margin-bottom: 0.5rem;
}

.roster-form input[type="text"] {
	flex: 1 1 160px;
	width: auto;
}

.roster-form input[type="number"] {
	width: 110px;
}

/* The amount and the unit it was pledged in are one value, so they sit together
   and cannot be reordered apart by the flex row. */
.pledge-input {
	display: inline-flex;
	align-items: stretch;
}

.pledge-input input[type="number"] {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.pledge-input select {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-left: 0;
	padding-left: 0.4rem;
	padding-right: 0.3rem;
	font-weight: 600;
}

.manage-list .title .flag {
	margin-right: 0.35rem;
}
.event-picker {
	max-width: 44rem;
	margin: 2rem auto;
	padding: 0 1.25rem;
}

.event-picker h1 {
	margin-bottom: 0.25rem;
	font-size: 1.4rem;
}

.event-picker p {
	margin-top: 0;
	color: var(--text-muted);
	font-size: 0.9rem;
}

.event-picker ul {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	border: 1px solid var(--surface-2);
	border-radius: 8px;
	overflow: hidden;
}

.event-picker li {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	padding: 0.85rem 1rem;
	border-bottom: 1px solid var(--surface-2);
}

.event-picker li:last-child {
	border-bottom: none;
}

.event-picker li.err {
	color: var(--bad);
}

.event-picker li a {
	flex: 1 1 auto;
	font-weight: 600;
}


.event-picker .when {
	color: var(--text-muted);
	font-size: 0.85rem;
	white-space: nowrap;
}

.event-picker .phase {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.15rem 0.45rem;
	border-radius: 999px;
	border: 1px solid var(--surface-2);
	color: var(--text-muted);
}

.event-picker .phase.open {
	color: var(--ok);
	border-color: var(--ok);
}

.event-picker .phase.closed {
	color: var(--text-faint);
}

/* Ride cards on the logging page: a checkbox, the coach where one is
   published, and the details. Plain rows stay rows; only synced-candidate
   rides get the card treatment. */
#peloton-workouts li.ride-card {
	display: flex;
	gap: 0.75rem;
	align-items: center;
}
#peloton-workouts li.ride-card input[type="checkbox"] {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
}
.ride-coach {
	flex: none;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	object-fit: cover;
}
.ride-body {
	min-width: 0;
}
.ride-title {
	font-weight: 600;
}
.ride-coach-name {
	color: var(--text-muted);
	font-size: 0.85rem;
}
.ride-meta {
	color: var(--text-faint);
	font-size: 0.8rem;
}
.feed-title {
	color: var(--text-muted);
	font-size: 0.85rem;
}
@media (max-width: 720px) {
	header {
		flex-wrap: wrap;
		gap: 0.75rem;
		padding: 1rem;
	}
	.nav {
		order: 3;
		width: 100%;
		margin-left: 0;
		flex-wrap: wrap;
		gap: 0.5rem;
	}
	#status {
		margin-left: auto;
	}
	main {
		padding: 1.25rem 1rem 3rem;
	}
	#peloton-workouts li.ride-card {
		align-items: flex-start;
	}
	.ride-coach {
		width: 2.5rem;
		height: 2.5rem;
	}
	#logging-connect-card form input,
	#logging-connect-card form button {
		min-height: 2.75rem;
	}
}

/* The signed-in rider, top right: a name with a sign-out, or a sign-up link. */
#auth {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.85rem;
	color: var(--text-muted);
	margin-left: auto;
}
#auth button {
	padding: 0.35rem 0.65rem;
	font-size: 0.85rem;
}
#auth a {
	color: var(--text);
	font-weight: 600;
	text-decoration: none;
}

/* The theme switcher sits beside the sign-in link, and is quiet until hovered:
   it is a control of the reader's comfort, not something to be read. */
#theme .theme-toggle {
	background: transparent;
	border: 1px solid var(--border);
	color: var(--text-muted);
	white-space: nowrap;
	/* Icon only, so it is sized to the type beside it rather than to the 0.6rem
	   padding every other button in this file carries. */
	padding: 0.35rem 0.5rem;
}
#theme .theme-toggle:hover {
	background: var(--surface-2);
	border-color: var(--border-strong);
	color: var(--text);
}
/* The switcher's icon is an emoji character that twemoji swaps for an <img> on
   the pages that run that pass. Unpinned, the image takes its intrinsic size -
   an order of magnitude above the label - so the button is one height until the
   page renders and another afterwards. Sized to the type, the two forms agree.
   This is the same treatment the flags and the ride feed already give theirs. */
#theme .theme-toggle .emoji {
	width: 1em;
	height: 1em;
	vertical-align: middle;
}
@media (max-width: 720px) {
	#auth {
		margin-left: 0;
	}
}
.team-badge {

	width: 24px;

	height: 24px;

	border-radius: 6px;

	object-fit: cover;

	vertical-align: middle;

	margin-right: 6px;

}

.team-badge--large {

	width: 64px;

	height: 64px;

	border-radius: 12px;

}

.team-identity {

	display: inline-flex;

	align-items: center;

}

.team-description {

	display: block;

	font-size: 0.85em;

	opacity: 0.8;

	margin-top: 2px;

}

.ts-badge {

	width: 28px;

	height: 28px;

}


/* Profile page */
.profile-main {
	max-width: 640px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}
.profile-hero {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.profile-avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--accent);
	color: var(--accent-contrast);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.75rem;
	font-weight: 700;
	flex-shrink: 0;
	box-shadow: var(--shadow);
}
.profile-hero-text h1 {
	margin: 0 0 0.25rem;
}
.profile-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.field label {
	font-weight: 600;
	font-size: 0.9rem;
}
.profile-country-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.profile-flag {
	font-size: 1.5rem;
	line-height: 1;
}
.profile-actions {
	display: flex;
	justify-content: flex-end;
}