/**
 * Antivig Engine — the board.
 *
 * The engine publishes its own --avb-* tokens rather than borrowing the
 * membership plugin's --av-* ones. It used to borrow them, and the board is not
 * a membership screen: that plugin only enqueues its stylesheet on its own
 * pages, so on /today/ every token was undefined and the fallbacks painted
 * light-mode colours onto a dark page — steel-on-navy at about 3.6:1.
 *
 * A theme retints the board by redefining --avb-* (see the child theme). Both
 * themes are defined here, so the board is correct on any theme that sets
 * nothing at all. Everything is scoped under .av-* to avoid a reset war.
 */

:root {
	--avb-surface: #ffffff;
	--avb-surface-alt: #f4f6f3;
	--avb-line: #dfe4e9;
	--avb-ink: #0e1a2b;
	--avb-ink-soft: #3c4a5c;
	--avb-ink-faint: #5a6b80;
	--avb-accent: #f2a900;
	--avb-win: #1f9d5b;
	--avb-dog: #a86b00;
	--avb-loss: #d1453b;
	--avb-radius: 12px;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-bs-theme="light"]) {
		--avb-surface: #111d2e;
		--avb-surface-alt: #0e1928;
		--avb-line: #22314a;
		--avb-ink: #e8edf2;
		--avb-ink-soft: #b3bfcc;
		--avb-ink-faint: #8b9aab;
		--avb-win: #3bbe7a;
	--avb-dog: #f2b53a;
		--avb-loss: #ee6a5f;
	}
}

:root[data-bs-theme="dark"] {
	--avb-surface: #111d2e;
	--avb-surface-alt: #0e1928;
	--avb-line: #22314a;
	--avb-ink: #e8edf2;
	--avb-ink-soft: #b3bfcc;
	--avb-ink-faint: #8b9aab;
	--avb-win: #3bbe7a;
	--avb-dog: #f2b53a;
	--avb-loss: #ee6a5f;
}

.av-board-wrap {
	display: grid;
	gap: 1.25rem;
	margin: 1.5rem 0;
}

/*
 * Defined here rather than assumed. WordPress themes usually ship this class,
 * but a plugin that relies on them doing so puts its caption text and its
 * "no stake, and here is why" explanations on the page in plain sight the one
 * time a theme does not — which is exactly what happened.
 */
.av-board-wrap .screen-reader-text,
.av-ledger-wrap .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------- Game */

.av-game {
	background: var(--avb-surface);
	border: 1px solid var(--avb-line);
	border-radius: var(--avb-radius);
	overflow: hidden;
}

.av-game.is-stale {
	border-style: dashed;
}

.av-game__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem 1.25rem;
	padding: .9rem 1.1rem;
	border-bottom: 1px solid var(--avb-line);
}

.av-game__matchup {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.2;
}

.av-game__meta,
.av-game__provenance {
	margin: .15rem 0 0;
	font-size: .8125rem;
	color: var(--avb-ink-faint);
}

/* The provenance is the reason to believe the fair price, so it sits on the
   same line as the matchup rather than in a footnote nobody reads. */
.av-game__provenance {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* --------------------------------------------------------------- Table */

.av-board__scroll {
	overflow-x: auto;
}

.av-board {
	width: 100%;
	min-width: 34rem;
	border-collapse: collapse;
}

.av-board th {
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--avb-ink-faint);
	text-align: right;
	padding: .6rem 1.1rem;
	background: var(--avb-surface-alt);
	border-bottom: 1px solid var(--avb-line);
	white-space: nowrap;
}

.av-board td {
	padding: .7rem 1.1rem;
	text-align: right;
	border-bottom: 1px solid var(--avb-line);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.av-board th:first-child,
.av-board td:first-child {
	text-align: left;
}

.av-board tbody tr:last-child td {
	border-bottom: 0;
}

.av-board td.av-team {
	font-weight: 600;
	font-variant-numeric: normal;
}

.av-board td.av-book {
	color: var(--avb-ink-faint);
	font-variant-numeric: normal;
}

/*
 * The best price is bold but not coloured. It used to carry the accent, so on
 * every game the underdog's bigger number looked like the pick — colour read as
 * "bet this team", when it only meant "this book pays most". Colour is now kept
 * for one meaning: a price worth more than it costs.
 */
.av-board td.av-best {
	font-weight: 600;
}

.av-tag {
	display: inline-block;
	margin-left: .35rem;
	padding: .05rem .4rem;
	border: 1px solid var(--avb-ink-faint);
	border-radius: 999px;
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .02em;
	color: var(--avb-ink-faint);
	vertical-align: middle;
	white-space: nowrap;
}

.av-tag--fav {
	border-color: var(--avb-ink-soft);
	color: var(--avb-ink-soft);
	font-weight: 600;
}

.av-facts {
	margin: .5rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .2rem;
	font-size: .875rem;
	color: var(--avb-ink-soft);
	max-width: 65ch;
}

.av-facts li:first-child {
	color: inherit;
	font-weight: 600;
}

.av-underdog {
	font-style: italic;
}

.av-fair-price {
	display: block;
	font-size: .75rem;
	color: var(--avb-ink-faint);
}

/*
 * Expected value is negative on most games, and that is the normal, honest
 * answer — not an error. Painting every one of those rows red trains a reader
 * to ignore red, which is exactly the colour that has to still mean something
 * when a price really is stale. So: green where there is value, plain where
 * there is not, and red reserved for "do not trust this number".
 */
.av-ev {
	display: inline-block;
	padding: .15rem .45rem;
	border-radius: 4px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.av-ev--up {
	background: rgba(31, 157, 91, .16);
	color: var(--avb-win);
}

.av-ev--dog {
	background: rgba(242, 169, 0, .16);
	color: var(--avb-dog);
}

.av-legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem .5rem;
}

.av-ev--flat {
	color: var(--avb-ink-faint);
}

.av-board td.av-stake {
	color: var(--avb-ink-soft);
}

.av-win  { color: var(--avb-win); }
.av-loss { color: var(--avb-loss); }

.av-stale {
	color: var(--avb-loss);
	font-weight: 600;
}

/* --------------------------------------------------------- Best bets */

/*
 * The board is ordered by edge, and this strip repeats the top of it. Every
 * screen bettors already use — OddsJam's +EV tool, Unabated's odds screen —
 * leads with the biggest edge, because a slate ordered by kick-off makes
 * somebody read forty rows to find the two worth acting on.
 */
.av-best-bets {
	background: var(--avb-surface);
	border: 1px solid var(--avb-line);
	border-left: 3px solid var(--avb-win);
	border-radius: var(--avb-radius);
	padding: 1.1rem 1.25rem;
}

.av-best-bets__head {
	margin: 0 0 .75rem;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--avb-ink-faint);
}

.av-best-bets__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .5rem;
	counter-reset: none;
}

.av-best-bet {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1fr);
	align-items: baseline;
	gap: .5rem 1rem;
	padding: .45rem 0;
	border-bottom: 1px solid var(--avb-line);
}

.av-best-bet:last-child {
	border-bottom: 0;
}

.av-best-bet__ev {
	font-family: inherit;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--avb-win);
}

/* Same rule as the table: green needs value on a favoured side. */
.av-best-bet__ev--dog {
	color: var(--avb-dog);
}

.av-best-bet__ev--flat {
	color: var(--avb-ink);
}

.av-best-bet__pick {
	font-variant-numeric: tabular-nums;
}

.av-best-bet__book {
	color: var(--avb-ink-faint);
	font-size: .8125rem;
	margin-left: .35rem;
}

.av-best-bet__game {
	color: var(--avb-ink-soft);
	font-size: .875rem;
}

@media (max-width: 40rem) {
	.av-best-bet {
		grid-template-columns: 4.5rem minmax(0, 1fr);
	}

	.av-best-bet__game {
		grid-column: 2;
	}
}

.av-best-bets__note {
	margin: .85rem 0 0;
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--avb-ink-faint);
}

/* ------------------------------------------------------------- Links */

/*
 * Link colour comes from --av-ink, the text token, which flips with the theme;
 * the ember is spent on the underline instead. Colouring the text itself with
 * the accent looks right on chalk and fails on it — #f2a900 on white is about
 * 2:1 — and --av-accent-ink is the ink used *on* an accent background, which
 * goes dark in dark mode and would make these links invisible.
 */
.av-board-wrap a,
.av-ledger-wrap a {
	color: var(--avb-ink);
	text-decoration-color: var(--avb-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.av-board-wrap a:hover,
.av-ledger-wrap a:hover {
	color: var(--avb-ink);
	text-decoration-thickness: 2px;
}

/* ------------------------------------------------------------- Verdicts */

.av-game__verdict,
.av-game__locked {
	margin: 0;
	padding: .7rem 1.1rem;
	font-size: .8125rem;
	color: var(--avb-ink-soft);
	border-top: 1px solid var(--avb-line);
}

.av-game__locked {
	background: var(--avb-surface-alt);
}

.av-game__verdict--arb {
	border-left: 3px solid var(--avb-win);
	color: var(--avb-ink);
}

/* ------------------------------------------------------- Plain English */

/*
 * The same pick, said in words. The table is for people who already read
 * prices; this is for everybody else, and it is deliberately not a summary —
 * it carries what you risk, what comes back, why this price stands out, what
 * the edge is worth in money, what to stake, and whether to bother at all.
 */
.av-plain {
	padding: .9rem 1.1rem 1rem;
	border-top: 1px solid var(--avb-line);
	background: var(--avb-surface-alt);
}

.av-plain__head {
	margin: 0 0 .5rem;
	font-weight: 700;
	color: var(--avb-ink);
}

.av-plain__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .35rem;
	font-size: .875rem;
	line-height: 1.55;
	color: var(--avb-ink-soft);
}

.av-plain__list li {
	padding-left: 1.1rem;
	position: relative;
}

.av-plain__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: .35rem;
	height: .35rem;
	border-radius: 50%;
	background: var(--avb-accent);
}

/* ------------------------------------------------------------ Filters */

.av-filters {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

.av-filter {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .4rem .75rem;
	border: 1px solid var(--avb-line);
	border-radius: 999px;
	font-size: .875rem;
	font-weight: 600;
	text-decoration: none !important;
	color: var(--avb-ink-soft) !important;
	background: var(--avb-surface);
}

.av-filter:hover {
	border-color: var(--avb-accent);
}

/*
 * The selected pill takes the accent, not the ink. --avb-ink is the *text*
 * token and flips to near-white in dark mode, so using it as a background
 * produced a white pill with white text. The accent is the one colour that is
 * the same in both themes, which is exactly what a selected state needs, and
 * the dark ink on it is fixed for the same reason.
 */
.av-filter.is-on {
	background: var(--avb-accent);
	border-color: var(--avb-accent);
	color: #0e1a2b !important;
}

.av-filter.is-on .av-filter__count {
	opacity: .8;
}

.av-filter__count {
	font-size: .75rem;
	font-weight: 500;
	opacity: .7;
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- Primer */

.av-primer {
	background: var(--avb-surface);
	border: 1px solid var(--avb-line);
	border-radius: var(--avb-radius);
	padding: .35rem .5rem;
}

.av-primer__summary {
	cursor: pointer;
	padding: .6rem .75rem;
	font-weight: 600;
	color: var(--avb-ink);
	list-style-position: inside;
}

.av-primer__summary:focus-visible {
	outline: 2px solid var(--avb-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

.av-primer__body {
	padding: .25rem .75rem .75rem;
	max-width: 68ch;
}

.av-primer__body h4 {
	margin: .9rem 0 .25rem;
	font-size: .9375rem;
	color: var(--avb-ink);
}

.av-primer__body p {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--avb-ink-soft);
}

.av-primer__foot {
	margin-top: 1rem !important;
	font-size: .8125rem !important;
	color: var(--avb-ink-faint) !important;
}

.av-best-bet__verdict {
	display: block;
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--avb-ink-faint);
}

.av-best-bet__plain,
.av-best-bet__why {
	display: block;
	margin-top: .2rem;
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--avb-ink-faint);
	white-space: normal;
}

/* ---------------------------------------------------------------- Empty */

.av-board-empty {
	background: var(--avb-surface-alt);
	border: 1px dashed var(--avb-line);
	border-radius: var(--avb-radius);
	padding: 1.5rem;
	color: var(--avb-ink-soft);
}

.av-board-empty__head {
	margin: 0 0 .35rem;
	font-weight: 600;
	color: var(--avb-ink);
}

.av-board-empty p:last-child,
.av-board-foot p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------- Foot */

.av-board-foot {
	font-size: .8125rem;
	color: var(--avb-ink-faint);
}

@media (max-width: 40rem) {
	.av-game__head {
		flex-direction: column;
	}
}

/*
 * On a phone the table stops being a table.
 *
 * Seven columns need about 34rem, so on a 375px screen the scroll container
 * did its job and the reader saw "Side" and half of "Best price" — the two
 * numbers the page exists for, EV and the fair price, sat off the right edge
 * behind a horizontal swipe nobody makes. Each row becomes its own block
 * instead, with the column heading carried on the cell as a data-label, so the
 * same numbers read top to bottom. The header row is hidden visually but left
 * in the accessibility tree: a screen reader still gets a table with headers,
 * because that is a perfectly good way to read this and only sighted layout
 * was ever the problem.
 */
@media (max-width: 34rem) {
	.av-board__scroll {
		overflow-x: visible;
	}

	.av-board {
		min-width: 0;
	}

	.av-board thead {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.av-board tbody tr {
		display: grid;
		grid-template-columns: minmax(0, auto) minmax(0, 1fr);
		gap: 0 1rem;
		padding: .75rem 0;
		border-bottom: 1px solid var(--avb-line);
	}

	.av-board tbody tr:last-child {
		border-bottom: 0;
	}

	.av-board td {
		display: grid;
		grid-column: 1 / -1;
		grid-template-columns: subgrid;
		padding: .2rem 1.1rem;
		border-bottom: 0;
		text-align: right;
		white-space: normal;
	}

	.av-board td::before {
		content: attr(data-label);
		grid-column: 1;
		justify-self: start;
		font-size: .6875rem;
		font-weight: 600;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--avb-ink-faint);
		font-variant-numeric: normal;
	}

	/*
	 * The side is the row's own heading, so it spans both tracks and keeps its
	 * label to itself; everything under it is that side's numbers.
	 */
	.av-board td.av-team {
		grid-column: 1 / -1;
		grid-template-columns: 1fr;
		font-size: 1.0625rem;
		text-align: left;
		padding-bottom: .45rem;
	}

	.av-board td.av-team::before {
		display: none;
	}

	/*
	 * Each cell is a grid, so an element inside one becomes a grid item rather
	 * than inline text: left alone, the fair price and the EV pill land in the
	 * label's column and stretch across it. Both are pinned to the value column
	 * and pushed to its end, under the number they qualify.
	 */
	.av-fair-price {
		grid-column: 2;
		justify-self: end;
		margin-top: .1rem;
	}

	.av-board td .av-ev {
		grid-column: 2;
		justify-self: end;
	}
}

/*
 * Grid subgrid is well supported now, but where it is not the labels would
 * stack on top of their values rather than beside them. Two columns of plain
 * grid is the same shape without it.
 */
@supports not (grid-template-columns: subgrid) {
	@media (max-width: 34rem) {
		.av-board td {
			grid-template-columns: minmax(0, auto) minmax(0, 1fr);
		}
	}
}

/* ------------------------------------------------------------- Toolbar */

/*
 * Market tabs, date window, sport pills and search sit above the board as one
 * block, so a reader changes one thing and sees the whole board answer. The
 * tabs and windows reuse .av-filter: a second pill style would be a second
 * thing to keep readable in both themes.
 */
.av-board-tools {
	display: grid;
	gap: .75rem;
	margin-bottom: 1.25rem;
}

.av-toolbar-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .6rem 1rem;
}

.av-toolbar-label {
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--avb-ink-faint);
	margin-right: .25rem;
}

.av-filter:focus-visible,
.av-search__input:focus-visible,
.av-search__submit:focus-visible,
.av-pager a:focus-visible {
	outline: 2px solid var(--avb-accent);
	outline-offset: 2px;
}

/* -------------------------------------------------------------- Search */

.av-search {
	display: flex;
	gap: .4rem;
	flex: 1 1 18rem;
	max-width: 28rem;
}

.av-search__input {
	flex: 1;
	min-width: 0;
	min-height: 2.75rem;
	padding: .5rem .85rem;
	border: 1px solid var(--avb-line);
	border-radius: 999px;
	background: var(--avb-surface);
	color: var(--avb-ink);
	font: inherit;
	font-size: .9375rem;
}

.av-search__input::placeholder {
	color: var(--avb-ink-faint);
}

.av-search__submit {
	min-height: 2.75rem;
	padding: .5rem 1rem;
	border: 1px solid var(--avb-accent);
	border-radius: 999px;
	background: var(--avb-accent);
	color: #0e1a2b;
	font: inherit;
	font-size: .875rem;
	font-weight: 600;
	cursor: pointer;
}

.av-search-status {
	font-size: .8125rem;
	color: var(--avb-ink-faint);
	min-height: 1.2em;
}

/*
 * The live filter hides games with the hidden attribute. .av-game sets its own
 * display, and an author display rule beats the user-agent's [hidden] rule, so
 * without this a filtered-out game would stay on screen.
 */
.av-game[hidden] {
	display: none !important;
}

/* ----------------------------------------------------------- Freshness */

.av-freshness {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem .9rem;
	font-size: .8125rem;
	color: var(--avb-ink-soft);
}

.av-freshness__item {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}

.av-freshness__dot {
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	background: var(--avb-win, #1f9d5b);
	flex: none;
}

.av-freshness.is-stale .av-freshness__dot {
	background: var(--avb-accent);
}

.av-freshness time {
	font-variant-numeric: tabular-nums;
	color: var(--avb-ink);
	font-weight: 600;
}

/* ------------------------------------------------------ Lines and pager */

.av-point {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	margin-right: .35rem;
}

.av-other-lines {
	margin: .5rem 0 0;
	font-size: .8125rem;
	color: var(--avb-ink-faint);
}

.av-board-count {
	font-size: .875rem;
	color: var(--avb-ink-soft);
	margin: 0 0 .75rem;
}

.av-sort-note {
	font-size: .875rem;
	color: var(--avb-ink-soft);
	margin: -.25rem 0 .75rem;
	padding: .5rem .75rem;
	border-left: 3px solid var(--avb-ink-faint);
	max-width: 65ch;
}

.av-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	margin: 1.5rem 0;
}

.av-pager a,
.av-pager span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 .75rem;
	border: 1px solid var(--avb-line);
	border-radius: 999px;
	font-size: .875rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-decoration: none !important;
	color: var(--avb-ink-soft) !important;
	background: var(--avb-surface);
}

.av-pager [aria-current="page"] {
	background: var(--avb-accent);
	border-color: var(--avb-accent);
	color: #0e1a2b !important;
}

@media (max-width: 34rem) {
	.av-search {
		max-width: none;
		flex-basis: 100%;
	}
}


/* --------------------------------------------------------- Game page */

.av-game__matchup a {
	color: inherit;
	text-decoration: none;
}

.av-game__matchup a:hover,
.av-game__matchup a:focus-visible {
	text-decoration: underline;
	text-underline-offset: .2em;
}

.av-game-page__back {
	margin: 0 0 .75rem;
	font-size: .875rem;
}

.av-game-page__head {
	margin-bottom: 1rem;
}

.av-game-page__title {
	margin: 0 0 .25rem;
	text-wrap: balance;
}

.av-chart-wrap {
	margin: 0;
	padding: .75rem 1.1rem 1rem;
	border-top: 1px solid var(--avb-line);
}

.av-chart-wrap figcaption {
	font-size: .8125rem;
	color: var(--avb-ink-soft);
	margin-top: .35rem;
}

.av-chart {
	display: block;
	width: 100%;
	height: auto;
	max-width: 44rem;
}

.av-chart__grid {
	stroke: var(--avb-line);
	stroke-width: 1;
}

.av-chart__axis {
	fill: var(--avb-ink-faint);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}

.av-chart__line {
	stroke-width: 2.5;
	stroke-linejoin: round;
}

.av-chart__line--0 { stroke: var(--avb-ink-faint); }
.av-chart__line--1 { stroke: var(--avb-ink); }

.av-chart__label {
	font-size: 12px;
	font-weight: 600;
}

.av-chart__label--0 { fill: var(--avb-ink-faint); }
.av-chart__label--1 { fill: var(--avb-ink); }

.av-timeline__list {
	margin: 0;
	padding: .75rem 1.1rem 1rem 2.4rem;
	display: grid;
	gap: .3rem;
	font-size: .9rem;
}

.av-timeline__list li {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.av-timeline__when {
	color: var(--avb-ink-faint);
	font-variant-numeric: tabular-nums;
	min-width: 5.5rem;
}


/* --------------------------------------------------------- Bet tracker */

.av-track {
	margin-left: .4rem;
	font-size: .75rem;
	font-weight: 500;
	white-space: nowrap;
}

.av-tracker__notice {
	padding: .6rem .85rem;
	border-left: 3px solid var(--avb-win);
	background: var(--avb-surface);
	margin: 0 0 1rem;
}

.av-tracker__notice--invalid,
.av-tracker__notice--failed,
.av-tracker__notice--paused {
	border-left-color: var(--avb-dog);
}

.av-tracker__summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: .75rem;
	margin: 0 0 .5rem;
}

.av-tracker__summary > div {
	background: var(--avb-surface);
	border: 1px solid var(--avb-line);
	border-radius: var(--avb-radius);
	padding: .7rem .9rem;
}

.av-tracker__summary dt {
	font-size: .75rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--avb-ink-faint);
}

.av-tracker__summary dd {
	margin: .2rem 0 0;
	font-size: 1.25rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.av-tracker__hint,
.av-tracker__empty,
.av-tracker__paused {
	font-size: .875rem;
	color: var(--avb-ink-soft);
	max-width: 65ch;
}

.av-tracker__empty,
.av-tracker__paused {
	padding: .75rem 1.1rem 1rem;
	margin: 0;
}

.av-tracker__add,
.av-tracker > .av-game {
	margin-top: 1rem;
}

.av-tracker__form {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: .75rem;
	padding: .75rem 1.1rem 1.1rem;
}

.av-tracker__form label {
	display: grid;
	gap: .25rem;
	font-size: .8125rem;
	color: var(--avb-ink-soft);
}

.av-tracker__form input,
.av-tracker__form select {
	font: inherit;
	color: var(--avb-ink);
	background: var(--avb-surface-alt);
	border: 1px solid var(--avb-line);
	border-radius: 6px;
	padding: .45rem .55rem;
}

.av-tracker__note {
	grid-column: 1 / -1;
}

.av-tracker__submit,
.av-tracker__actions button,
.av-tracker__export {
	font: inherit;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--avb-ink);
	background: var(--avb-surface-alt);
	border: 1px solid var(--avb-line);
	border-radius: 6px;
	padding: .4rem .7rem;
	cursor: pointer;
}

.av-tracker__submit {
	justify-self: start;
	align-self: end;
}

.av-tracker__submit:focus-visible,
.av-tracker__actions button:focus-visible,
.av-tracker__export:focus-visible {
	outline: 2px solid var(--avb-ink);
	outline-offset: 2px;
}

.av-tracker__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
}

.av-tracker__actions form {
	margin: 0;
}

.av-tracker__delete {
	color: var(--avb-loss) !important;
}

.av-tracker__skipped {
	margin: -.5rem 0 1rem 1.25rem;
	font-size: .8125rem;
	color: var(--avb-ink-soft);
}