/* Live timing. Built to be read at arm's length on a phone at the timing
   trailer, so type is large, numbers are tabular and rows are touch sized. */

:root {
	--scale: 1;
	--bg: #f4f5f7;
	--panel: #ffffff;
	--panel-2: #f0f1f4;
	--row: #ffffff;
	--row-alt: #f4f5f8;
	--line: #d8dbe1;
	--line-soft: #e6e8ed;
	--text: #16181d;
	--muted: #666d78;
	--accent: #d6281f;
	--accent-soft: rgba(214, 40, 31, .12);
	--good: #1c7a45;
	--flash: rgba(214, 40, 31, .22);
	--shadow: 0 1px 2px rgba(16, 18, 24, .08), 0 8px 24px rgba(16, 18, 24, .06);
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #101216;
		--panel: #181b21;
		--panel-2: #1f232b;
		--row: #181b21;
		--row-alt: #1d212a;
		--line: #333945;
		--line-soft: #262b34;
		--text: #eef1f5;
		--muted: #98a1af;
		--accent: #ff5a4d;
		--accent-soft: rgba(255, 90, 77, .16);
		--good: #4ad489;
		--flash: rgba(255, 90, 77, .26);
		--shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .35);
	}
}

* { box-sizing: border-box; }

html {
	font-size: calc(17px * var(--scale));
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	line-height: 1.35;
	font-variant-numeric: tabular-nums;
	padding-bottom: 3rem;
}

/* ---------- header ---------- */

.top {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--panel);
	border-bottom: 1px solid var(--line);
	padding: .5rem max(.7rem, env(safe-area-inset-left)) 0;
	box-shadow: var(--shadow);
}

.top-row {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
}

.ident { min-width: 0; flex: 1; }

h1 {
	margin: 0;
	font-size: 1.35rem;
	line-height: 1.2;
	letter-spacing: -.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sub {
	margin: .1rem 0 0;
	color: var(--muted);
	font-size: .8rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.status {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex: none;
}

.live {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .75rem;
	font-weight: 600;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.live .dot {
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	background: var(--good);
	box-shadow: 0 0 0 0 currentColor;
}

.live.on .dot { animation: pulse 2s ease-out infinite; }
.live.stale .dot { background: var(--muted); animation: none; }
.live.down .dot { background: var(--accent); animation: none; }
.live.down { color: var(--accent); }

@keyframes pulse {
	0% { box-shadow: 0 0 0 0 var(--good); opacity: 1; }
	70% { box-shadow: 0 0 0 .5rem transparent; opacity: .85; }
	100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.live.on .dot { animation: none; }
}

.zoom { display: flex; }

.zoom button {
	border: 1px solid var(--line);
	background: var(--panel-2);
	color: var(--text);
	cursor: pointer;
	padding: .2rem .5rem;
	line-height: 1;
	font-family: inherit;
}

.zoom button:first-child { border-radius: .4rem 0 0 .4rem; font-size: .75rem; }
.zoom button:last-child { border-radius: 0 .4rem .4rem 0; border-left: 0; font-size: 1rem; }
.zoom button:active { background: var(--accent-soft); }

/* ---------- pickers ---------- */

.picker {
	display: flex;
	gap: .5rem;
	margin-top: .5rem;
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: .1rem;
}

.picker::-webkit-scrollbar { display: none; }

.field {
	display: flex;
	align-items: center;
	gap: .35rem;
	flex: none;
	background: var(--panel-2);
	border: 1px solid var(--line);
	border-radius: .5rem;
	padding: .15rem .4rem .15rem .55rem;
	min-width: 0;
}

.field > span {
	font-size: .68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--muted);
}

.field select {
	font: inherit;
	font-size: .9rem;
	font-weight: 600;
	color: var(--text);
	background-color: var(--panel-2);
	border: 0;
	padding: .25rem .1rem;
	max-width: 14rem;
	cursor: pointer;
}

.field select:focus-visible { outline: 2px solid var(--accent); border-radius: .25rem; }
.field.hidden { display: none; }

/* The drop-down list is drawn by the browser, and in dark mode it needs to be
   told both colours or it pairs our light text with a white popup. */
.field select option {
	background-color: var(--panel);
	color: var(--text);
}

/* ---------- tabs ---------- */

.tabs {
	display: flex;
	gap: 1.1rem;
	margin-top: .45rem;
}

.tabs button {
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	color: var(--muted);
	font: inherit;
	font-weight: 650;
	font-size: .95rem;
	padding: .4rem 0 .5rem;
	cursor: pointer;
}

.tabs button.on { color: var(--text); border-bottom-color: var(--accent); }

/* ---------- content ---------- */

main { padding: .75rem max(.7rem, env(safe-area-inset-left)) 0; }

.panel {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: .75rem;
	overflow: hidden;
	box-shadow: var(--shadow);
}

.panel + .panel { margin-top: .75rem; }

.panel-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
	padding: .6rem .75rem;
	border-bottom: 1px solid var(--line-soft);
	flex-wrap: wrap;
}

.panel-head h2 {
	margin: 0;
	font-size: 1.05rem;
	letter-spacing: -.01em;
}

.panel-head .note { color: var(--muted); font-size: .8rem; }

.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
	white-space: nowrap;
}

thead th {
	background: var(--panel-2);
	color: var(--muted);
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	text-align: left;
	padding: .45rem .6rem;
	border-bottom: 1px solid var(--line);
}

tbody td {
	padding: .5rem .6rem;
	border-bottom: 1px solid var(--line-soft);
	vertical-align: middle;
}

tbody tr:nth-child(even) { background: var(--row-alt); }
tbody tr:last-child td { border-bottom: 0; }

.num { text-align: right; font-variant-numeric: tabular-nums; }
.mid { text-align: center; }
.dim { color: var(--muted); }
.small { font-size: .78rem; }
/* Takes up the slack so the number columns stay tight against each other. */
.wide { width: 99%; }

.time { font-weight: 700; font-size: 1.02em; }
.best { color: var(--good); }
/* A time that was recorded but doesn't count towards the result. */
.time.void { color: var(--muted); font-weight: 600; }
.dnf { color: var(--accent); font-weight: 700; }
.pen { color: var(--accent); font-weight: 600; }

.tag {
	display: inline-block;
	background: var(--accent-soft);
	color: var(--accent);
	border-radius: .3rem;
	padding: .05rem .35rem;
	font-weight: 700;
	font-size: .85em;
}

.pos { font-weight: 700; color: var(--muted); }
.pos-1 { color: var(--accent); }

.split { color: var(--muted); font-size: .74rem; font-weight: 600; }

.classlink {
	background: none;
	border: 0;
	font: inherit;
	color: inherit;
	padding: 0;
	cursor: pointer;
}

.classlink .tag { text-decoration: underline dotted; text-underline-offset: 2px; }

tr.flash { animation: flash 2.4s ease-out; }

@keyframes flash {
	from { background: var(--flash); }
	to { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
	tr.flash { animation: none; }
}

/* ---------- class chips ---------- */

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	padding: .65rem;
}

.chip {
	appearance: none;
	font: inherit;
	font-weight: 700;
	font-size: .9rem;
	color: var(--text);
	background: var(--panel-2);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: .35rem .8rem;
	cursor: pointer;
	min-width: 3.2rem;
}

.chip small { display: block; font-weight: 500; font-size: .65rem; color: var(--muted); }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip.on small { color: rgba(255, 255, 255, .8); }

/* ---------- filter ---------- */

.filter {
	display: flex;
	gap: .5rem;
	align-items: center;
	padding: .5rem .6rem;
	border-bottom: 1px solid var(--line-soft);
}

.filter input {
	font: inherit;
	font-size: .9rem;
	flex: 1;
	min-width: 0;
	color: var(--text);
	background: var(--panel-2);
	border: 1px solid var(--line);
	border-radius: .5rem;
	padding: .4rem .6rem;
}

.filter input:focus-visible { outline: 2px solid var(--accent); }

.empty {
	padding: 2rem .75rem;
	text-align: center;
	color: var(--muted);
	font-size: .95rem;
}

/* ---------- wider screens ---------- */

@media (min-width: 45rem) {
	html { font-size: calc(18px * var(--scale)); }
	main { padding-left: max(1.25rem, env(safe-area-inset-left)); padding-right: 1.25rem; }
	.top { padding-left: 1.25rem; padding-right: 1.25rem; }
	h1 { font-size: 1.6rem; }
	main { max-width: 90rem; margin: 0 auto; }
	.top-row, .picker, .tabs { max-width: 90rem; margin-left: auto; margin-right: auto; }
}

/* ---------- narrow layout ---------- */

/* Driven by a class on <html> rather than a width media query, because what
   matters is how much text fits across the screen, not how many pixels. Someone
   who has turned the text size up on a tablet needs this layout just as much as
   someone on a phone. app.js sets the class and keeps it up to date. */

/* Anything that only exists to fold a hidden column back into view. */
.show-narrow, .break { display: none; }

.narrow .hide-narrow { display: none; }
.narrow .show-narrow { display: inline; }
.narrow .show-narrow.block { display: block; }

/* Long names wrap rather than pushing the table sideways. */
.narrow .wide { white-space: normal; }

.narrow table { font-size: .9rem; }
.narrow thead th, .narrow tbody td { padding-left: .4rem; padding-right: .4rem; }

/* Class results carry one column per run, which no phone can hold. Each car
   becomes a block instead: placing, car, driver and result on the first line,
   then the runs flowing underneath. The order properties do the rearranging, so
   the markup stays a single sensible table. */
.narrow .results thead { display: none; }

.narrow .results tbody tr {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: .5rem;
	padding: .5rem .6rem;
	border-bottom: 1px solid var(--line-soft);
}

.narrow .results tbody td {
	display: block;
	border: 0;
	padding: 0;
}

.narrow .results .pos { order: 1; min-width: 1.4rem; }
.narrow .results .carnum { order: 2; min-width: 1.8rem; }
/* width:99% from the wide-screen table would take the whole line here. */
.narrow .results .driver { order: 3; flex: 1 1 auto; width: auto; text-align: left; }
.narrow .results .score { order: 4; }
.narrow .results .behind { order: 5; min-width: 4rem; text-align: right; }
.narrow .results .break { order: 6; display: block; flex-basis: 100%; height: 0; }
.narrow .results .run { order: 7; min-width: 4.6rem; text-align: left; }

/* The result is what the eye goes to, so it keeps the emphasis the header row
   would otherwise have given it. */
.narrow .results .score { font-weight: 700; }
.narrow .results .run { color: var(--muted); font-weight: 500; }
.narrow .results .run .time { font-weight: 600; font-size: 1em; }

/* Restated: the display:block above is more specific than .hide-narrow. */
.narrow .results tbody td.hide-narrow { display: none; }