/**
 * Atlas Arcadia - the Token Vault (all-tokens grid).
 *
 * Plan: docs/plans/2026-10-07-001-feat-token-vault-page-plan.md (U2)
 * Design: docs/design/tokens-directory/TokensDirectory.dc.html, section 3a.
 *
 * TOKENS. The site names its palette (--aa-orange etc., inlined by aa-points.php
 * on every page). This file aliases it as --tv-*, with literal fallbacks equal to
 * the design system's values, on the page root AND on the two dialogs (they are
 * appended to <body>, outside .aa-tvault, so they cannot inherit the root's
 * variables). Background and foreground are set together on every surface: The7
 * regenerates a dark #252525 body more than once.
 *
 * SCOPING. Everything that needs JS (the bar, the sheets, the panel) hangs off
 * html.aa-tvault-js or the dialog classes. Without JS the page is a plain A-Z
 * grid of tile links plus a search form that falls back to site search.
 *
 * BREAKPOINT. 767px, Elementor's phone boundary.
 */

.aa-tvault,
.aa-tvault-panel,
.aa-tvault-sheet {
	--tv-orange: var( --aa-orange, #db680b );
	--tv-orange-dark: var( --aa-orange-dark, #b8560a );
	--tv-brown: var( --aa-brown, #6a3306 );
	--tv-brown-dark: #4a2404;
	--tv-yellow: var( --aa-yellow, #fae905 );
	--tv-cream: var( --aa-cream, #fdf6e8 );
	--tv-white: #fff;
	--tv-muted: var( --aa-muted, #8a7a63 );
	--tv-rule: #e8ddc4;
	--tv-shadow: 0 2px 8px rgba( 74, 36, 4, .10 );
	--tv-shadow-hover: 0 6px 20px rgba( 74, 36, 4, .18 );
	--tv-pill: 999px;
	--tv-display: var( --aa-display, 'Cartridge', ui-sans-serif, system-ui, sans-serif );
	--tv-accent: 'Righteous', var( --tv-display ), sans-serif;
	--tv-text: var( --aa-text, 'Poppins', ui-sans-serif, system-ui, sans-serif );
}

.aa-tvault *,
.aa-tvault *::before,
.aa-tvault *::after,
.aa-tvault-panel *,
.aa-tvault-panel *::before,
.aa-tvault-panel *::after,
.aa-tvault-sheet *,
.aa-tvault-sheet *::before,
.aa-tvault-sheet *::after {
	box-sizing: border-box;
}

.aa-tvault [hidden],
.aa-tvault-panel [hidden],
.aa-tvault-sheet [hidden] {
	display: none !important;
}

/* --- Page root ------------------------------------------------------------- */

.aa-tvault {
	max-width: 1200px;
	margin: 0 auto;
	padding: 28px 40px 64px;
	background: var( --tv-cream );
	color: var( --tv-brown );
	font-family: var( --tv-text );
	font-size: 16px;
	line-height: 1.5;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.aa-tvault a:focus-visible,
.aa-tvault button:focus-visible,
.aa-tvault input:focus-visible,
.aa-tvault-panel a:focus-visible,
.aa-tvault-panel button:focus-visible,
.aa-tvault-sheet a:focus-visible,
.aa-tvault-sheet button:focus-visible,
.aa-tvault-sheet input:focus-visible,
.aa-tvault-sheet [tabindex]:focus-visible {
	outline: 3px solid var( --tv-brown );
	outline-offset: 2px;
}

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

.aa-tvault .aa-tvault__search {
	display: flex;
	gap: 12px;
	align-items: center;
	margin: 0;
}

.aa-tvault .aa-tvault__search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	margin: 0;
	padding: 0 20px;
	border: 1px solid var( --tv-rule );
	border-radius: var( --tv-pill );
	background: var( --tv-white );
	color: var( --tv-brown );
	font-family: var( --tv-text );
	font-size: 15px;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.aa-tvault .aa-tvault__search input[type="search"]::placeholder {
	color: var( --tv-muted );
	opacity: 1;
}

.aa-tvault .aa-tvault__search input[type="search"]:focus {
	border-color: var( --tv-orange );
	outline: none;
	box-shadow: 0 0 0 3px rgba( 219, 104, 11, .25 );
}

.aa-tvault .aa-tvault__search .aa-tvault__search-btn {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* --- Bar ------------------------------------------------------------------- */

html:not( .aa-tvault-js ) .aa-tvault__bar {
	display: none;
}

html.aa-tvault-js .aa-tvault__bar {
	position: relative;
	z-index: 10;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

html.aa-tvault-js .aa-tvault__left {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

html.aa-tvault-js .aa-tvault__fwrap {
	position: relative;
}

html.aa-tvault-js .aa-tvault__bar button {
	margin: 0;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
}

html.aa-tvault-js .aa-tvault__fbtn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 16px;
	border: 1px solid var( --tv-orange );
	border-radius: var( --tv-pill );
	background: var( --tv-white );
	color: var( --tv-orange );
	font-family: var( --tv-display );
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
}

html.aa-tvault-js .aa-tvault__fbtn:hover {
	background: var( --tv-cream );
	color: var( --tv-orange-dark );
}

html.aa-tvault-js .aa-tvault__fbtn.is-active,
html.aa-tvault-js .aa-tvault__fbtn.is-active:hover {
	background: var( --tv-orange );
	color: var( --tv-white );
}

html.aa-tvault-js .aa-tvault__fbtn .aa-tvault__caret {
	font-size: 11px;
}

html.aa-tvault-js .aa-tvault__menu {
	position: absolute;
	top: calc( 100% + 8px );
	left: 0;
	z-index: 30;
	width: 230px;
	max-height: min( 60vh, 420px );
	overflow-y: auto;
	padding: 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: var( --tv-white );
	color: var( --tv-brown );
	border-radius: 8px;
	box-shadow: var( --tv-shadow-hover );
}

html.aa-tvault-js .aa-tvault__clear {
	padding: 0 6px;
	border: 0;
	background: none;
	color: var( --tv-orange );
	font-family: var( --tv-text );
	font-size: 14px;
	cursor: pointer;
}

html.aa-tvault-js .aa-tvault__clear:hover {
	background: none;
	color: var( --tv-brown );
	text-decoration: underline;
}

html.aa-tvault-js .aa-tvault__count {
	margin-left: 6px;
	font-size: 14px;
	color: var( --tv-muted );
}

html.aa-tvault-js .aa-tvault__sortbar {
	display: flex;
	align-items: center;
	gap: 8px;
}

html.aa-tvault-js .aa-tvault__sortlabel {
	margin-right: 4px;
	font-size: 14px;
	color: var( --tv-muted );
}

html.aa-tvault-js .aa-tvault__sortpills {
	display: flex;
	align-items: center;
	gap: 8px;
}

html.aa-tvault-js .aa-tvault__pill {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 12px;
	border: 1px solid var( --tv-rule );
	border-radius: var( --tv-pill );
	background: var( --tv-white );
	color: var( --tv-brown );
	font-family: var( --tv-text );
	font-size: 13px;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
}

html.aa-tvault-js .aa-tvault__pill:hover {
	background: var( --tv-cream );
	color: var( --tv-brown );
}

html.aa-tvault-js .aa-tvault__pill[aria-pressed="true"],
html.aa-tvault-js .aa-tvault__pill[aria-pressed="true"]:hover {
	border-color: var( --tv-brown );
	background: var( --tv-brown );
	color: var( --tv-white );
}

/* The phone-only Filters pill. */
html.aa-tvault-js .aa-tvault__fpill {
	display: none;
}

/* --- Checkbox rows (dropdowns and sheet) ---------------------------------- */

.aa-tvault .aa-tvault__opt,
.aa-tvault-sheet .aa-tvault__opt {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 28px;
	margin: 0;
	padding: 0;
	font-family: var( --tv-text );
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
	text-transform: none;
	letter-spacing: normal;
	color: var( --tv-brown );
	cursor: pointer;
}

.aa-tvault .aa-tvault__opt input,
.aa-tvault-sheet .aa-tvault__opt input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var( --tv-orange );
	cursor: pointer;
}

.aa-tvault .aa-tvault__opt-label,
.aa-tvault-sheet .aa-tvault__opt-label {
	flex: 1 1 auto;
	min-width: 0;
}

.aa-tvault .aa-tvault__opt-count,
.aa-tvault-sheet .aa-tvault__opt-count {
	flex: 0 0 auto;
	font-size: 12px;
	color: var( --tv-muted );
}

.aa-tvault .aa-tvault__opt.is-disabled,
.aa-tvault-sheet .aa-tvault__opt.is-disabled {
	opacity: .45;
	cursor: default;
}

.aa-tvault .aa-tvault__opt.is-disabled input,
.aa-tvault-sheet .aa-tvault__opt.is-disabled input {
	cursor: default;
}

/* --- Grid ------------------------------------------------------------------ */

.aa-tvault ul.aa-tvault__grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
	gap: 28px 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 1200px) {
	.aa-tvault ul.aa-tvault__grid {
		grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
	}
}

.aa-tvault .aa-tvault__item {
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.aa-tvault .aa-tvault__item[hidden] {
	display: none !important;
}

html.aa-tvault-js .aa-tvault__item {
	transition: opacity 500ms ease, transform 760ms cubic-bezier( .2, .8, .2, 1 );
}

html.aa-tvault-js .aa-tvault__item.is-pre:not( .is-in ) {
	opacity: 0;
	transform: translateY( 72px );
}

html.aa-tvault-js .aa-tvault__item.is-in {
	opacity: 1;
	transform: translateY( 0 );
}

.aa-tvault a.aa-tvault__tile {
	display: flex;
	flex-direction: column;
	gap: 10px;
	color: var( --tv-brown );
	text-decoration: none;
	cursor: pointer;
}

.aa-tvault a.aa-tvault__tile:hover {
	color: var( --tv-brown );
	text-decoration: none;
}

.aa-tvault .aa-tvault__ring {
	display: block;
	padding: 6px;
	background: var( --tv-white );
	border: 1px solid var( --tv-rule );
	border-radius: 36px;
	box-shadow: var( --tv-shadow );
	transition: box-shadow 200ms ease;
}

.aa-tvault a.aa-tvault__tile:hover .aa-tvault__ring,
.aa-tvault a.aa-tvault__tile:focus-visible .aa-tvault__ring {
	box-shadow: var( --tv-shadow-hover );
}

.aa-tvault .aa-tvault__coin {
	display: block;
	position: relative;
	aspect-ratio: 1 / 1;
	perspective: 1000px;
}

.aa-tvault .aa-tvault__flip {
	display: block;
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	/* Even ease-in-out, as cectoken.com's coins: a front-loaded curve races
	   past edge-on and makes the turn read as a snap. */
	transition: transform 700ms cubic-bezier( .4, 0, .2, 1 );
}

.aa-tvault .aa-tvault__flip.is-flipped,
.aa-tvault a.aa-tvault__tile.is-flipped .aa-tvault__flip {
	transform: rotateY( 180deg );
}

.aa-tvault .aa-tvault__face {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	max-width: none;
	border-radius: 50%;
	object-fit: cover;
	background: var( --tv-cream );
	/* Each face hides itself the moment it turns edge-on, so the Front never
	   shows mirrored and the Back is never painted over it. No opacity swap:
	   a timed swap can't track an eased rotation. */
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.aa-tvault .aa-tvault__face--back {
	transform: rotateY( 180deg );
}

/* The "no Back photo" face: a dashed cream disc. */
.aa-tvault .aa-tvault__face--none {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 16%;
	border: 2px dashed var( --tv-rule );
	background: var( --tv-cream );
	color: var( --tv-muted );
	font-family: var( --tv-text );
	font-size: 12px;
	line-height: 1.25;
	text-align: center;
}

.aa-tvault .aa-tvault__face--none b {
	font-family: var( --tv-accent );
	font-weight: 400;
	font-size: 13px;
	color: var( --tv-brown );
}

.aa-tvault .aa-tvault__name {
	display: block;
	padding: 0 4px;
	font-family: var( --tv-accent );
	font-size: 14px;
	line-height: 1.25;
	text-align: center;
	color: var( --tv-brown );
}

.aa-tvault .aa-tvault__place {
	display: block;
	margin-top: -8px;
	padding: 0 4px;
	font-size: 12px;
	line-height: 1.3;
	text-align: center;
	color: var( --tv-muted );
}

.aa-tvault .aa-tvault__empty {
	margin: 0;
	padding: 40px;
	text-align: center;
	font-family: var( --tv-accent );
	font-size: 20px;
	color: var( --tv-brown );
}

@media (prefers-reduced-motion: reduce) {
	.aa-tvault .aa-tvault__flip,
	.aa-tvault .aa-tvault__ring,
	html.aa-tvault-js .aa-tvault__item {
		transition: none;
	}
}

/* --- Detail panel (desktop: right-hand 400px; phone: bottom sheet) --------- */

html.aa-tvault-open {
	overflow: hidden;
}

dialog.aa-tvault-panel {
	box-sizing: border-box;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: auto;
	z-index: 10001;
	width: 400px;
	max-width: 100vw;
	height: 100vh;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	overflow-y: auto;
	background: var( --tv-white );
	color: var( --tv-brown );
	font-family: var( --tv-text );
	font-size: 16px;
	line-height: 1.5;
	box-shadow: -8px 0 28px rgba( 74, 36, 4, .18 );
}

dialog.aa-tvault-panel::backdrop {
	background: transparent;
}

.aa-tvault-panel .aa-tvault-panel__inner {
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.aa-tvault-panel .aa-tvault-panel__head {
	display: flex;
	justify-content: flex-end;
}

.aa-tvault-panel button.aa-tvault-panel__close {
	margin: 0;
	padding: 6px;
	border: 0;
	background: none;
	box-shadow: none;
	color: var( --tv-brown );
	font-family: var( --tv-text );
	font-size: 14px;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

.aa-tvault-panel button.aa-tvault-panel__close:hover {
	background: none;
	color: var( --tv-orange );
}

.aa-tvault-panel .aa-tvault-panel__faces {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.aa-tvault-panel .aa-tvault-panel__face {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var( --tv-muted );
}

.aa-tvault-panel .aa-tvault-panel__disc {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	background: var( --tv-cream );
	box-shadow: var( --tv-shadow );
}

.aa-tvault-panel .aa-tvault-panel__disc img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	opacity: 0;
	transition: opacity 250ms ease;
}

.aa-tvault-panel .aa-tvault-panel__disc img.is-loaded {
	opacity: 1;
}

.aa-tvault-panel .aa-tvault-panel__disc--none {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	border: 2px dashed var( --tv-rule );
	box-shadow: none;
	text-align: center;
	font-size: 12px;
	line-height: 1.3;
	color: var( --tv-muted );
}

.aa-tvault-panel h2.aa-tvault-panel__name {
	margin: 0;
	font-family: var( --tv-display );
	font-weight: 400;
	font-size: 26px;
	line-height: 1.15;
	letter-spacing: normal;
	text-transform: none;
	color: var( --tv-brown );
}

.aa-tvault-panel .aa-tvault-panel__place {
	margin: 6px 0 0;
	font-size: 14px;
	color: var( --tv-muted );
}

.aa-tvault-panel dl.aa-tvault-panel__spec {
	display: grid;
	/* auto columns size to their longest word, so "Entertainment" never splits */
	grid-template-columns: repeat( 3, auto );
	justify-content: space-between;
	gap: 12px 16px;
	margin: 0;
	padding: 16px 0 0;
	border-top: 1px solid var( --tv-rule );
}

.aa-tvault-panel .aa-tvault-panel__spec dt {
	margin: 0;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 400;
	color: var( --tv-muted );
}

.aa-tvault-panel .aa-tvault-panel__spec dd {
	margin: 0;
	font-size: 15px;
	overflow-wrap: break-word;
}

.aa-tvault-panel .aa-tvault-panel__locs {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 16px;
	border-top: 1px solid var( --tv-rule );
}

.aa-tvault-panel .aa-tvault-panel__lochead {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 4px;
}

.aa-tvault-panel .aa-tvault-panel__loclabel {
	font-family: var( --tv-accent );
	font-size: 16px;
}

.aa-tvault-panel .aa-tvault-panel__range {
	font-size: 12px;
	color: var( --tv-muted );
}

.aa-tvault-panel ul.aa-tvault-panel__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.aa-tvault-panel .aa-tvault-panel__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 9px 0;
	min-height: 58px;
	border-bottom: 1px solid var( --tv-rule );
}

.aa-tvault-panel .aa-tvault-panel__rowtext {
	min-width: 0;
}

.aa-tvault-panel .aa-tvault-panel__locname {
	font-size: 15px;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.aa-tvault-panel .aa-tvault-panel__locplace {
	font-size: 13px;
	color: var( --tv-muted );
}

.aa-tvault-panel a.aa-tvault-panel__loclink {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 14px;
	border: 1px solid var( --tv-orange );
	border-radius: var( --tv-pill );
	background: var( --tv-white );
	color: var( --tv-orange );
	font-family: var( --tv-display );
	font-size: 13px;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.aa-tvault-panel a.aa-tvault-panel__loclink:hover {
	background: var( --tv-orange );
	color: var( --tv-white );
	text-decoration: none;
}

.aa-tvault-panel .aa-tvault-panel__short {
	display: none;
}

.aa-tvault-panel .aa-tvault-panel__none {
	margin: 0;
	padding: 8px 0;
	font-size: 14px;
	color: var( --tv-muted );
}

.aa-tvault-panel .aa-tvault-panel__pager {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	padding-top: 10px;
}

.aa-tvault-panel .aa-tvault-panel__pager button {
	min-width: 28px;
	height: 26px;
	margin: 0;
	padding: 0 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var( --tv-rule );
	border-radius: var( --tv-pill );
	background: var( --tv-white );
	box-shadow: none;
	color: var( --tv-brown );
	font-family: var( --tv-text );
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
}

.aa-tvault-panel .aa-tvault-panel__pager button:hover {
	background: var( --tv-cream );
	color: var( --tv-brown );
}

.aa-tvault-panel .aa-tvault-panel__pager button[aria-current="page"] {
	border-color: var( --tv-brown );
	background: var( --tv-brown );
	color: var( --tv-white );
	cursor: default;
}

.aa-tvault-panel .aa-tvault-panel__pager button.aa-tvault-panel__arrow {
	border: 0;
	background: none;
	min-width: 36px;
	height: 36px;
	font-size: 22px;
	padding: 0;
}

.aa-tvault-panel .aa-tvault-panel__pager button:disabled {
	color: var( --tv-rule );
	cursor: default;
	background: none;
}

.aa-tvault-panel .aa-tvault-panel__gap {
	padding: 0 2px;
	color: var( --tv-muted );
}

/* .aa-points__cta forces display:inline-block; two classes beat it for flex. */
.aa-tvault-panel a.aa-points__cta.aa-tvault-panel__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	color: #fff;
}

/* --- Phone filter sheet ---------------------------------------------------- */

dialog.aa-tvault-sheet {
	box-sizing: border-box;
	position: fixed;
	top: auto;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10001;
	width: 100%;
	max-width: 100%;
	max-height: 78%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 16px 16px 0 0;
	overflow-y: auto;
	background: var( --tv-white );
	color: var( --tv-brown );
	font-family: var( --tv-text );
	font-size: 16px;
	line-height: 1.5;
}

dialog.aa-tvault-sheet::backdrop {
	background: rgba( 74, 36, 4, .5 );
}

.aa-tvault-sheet .aa-tvault-sheet__inner {
	padding: 20px 18px 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.aa-tvault-sheet .aa-tvault-sheet__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.aa-tvault-sheet h2.aa-tvault-sheet__title {
	margin: 0;
	font-family: var( --tv-display );
	font-weight: 400;
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	color: var( --tv-brown );
}

.aa-tvault-sheet button.aa-tvault-sheet__clear {
	min-height: 44px;
	margin: 0;
	padding: 0 4px;
	border: 0;
	background: none;
	box-shadow: none;
	color: var( --tv-orange );
	font-family: var( --tv-text );
	font-size: 14px;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

.aa-tvault-sheet .aa-tvault-sheet__group {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-top: 10px;
	border-top: 1px solid var( --tv-rule );
}

.aa-tvault-sheet h3.aa-tvault-sheet__gtitle {
	margin: 0 0 4px;
	font-family: var( --tv-accent );
	font-weight: 400;
	font-size: 15px;
	letter-spacing: normal;
	text-transform: none;
	color: var( --tv-brown );
}

.aa-tvault-sheet .aa-tvault__opt {
	min-height: 36px;
}

.aa-tvault-sheet button.aa-points__cta.aa-tvault-sheet__show {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	margin: 0;
	border: 0;
	font-size: 1rem;
}

/* --- Phones ---------------------------------------------------------------- */

@media (max-width: 767px) {
	.aa-tvault {
		padding: 20px 16px 32px;
		gap: 14px;
	}

	.aa-tvault .aa-tvault__search {
		gap: 8px;
	}

	.aa-tvault .aa-tvault__search .aa-tvault__search-btn {
		padding: 0 18px;
	}

	.aa-tvault ul.aa-tvault__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 20px 12px;
	}

	.aa-tvault a.aa-tvault__tile {
		gap: 8px;
	}

	.aa-tvault .aa-tvault__ring {
		padding: 5px;
		border-radius: 28px;
	}

	.aa-tvault .aa-tvault__name {
		font-size: 13px;
	}

	.aa-tvault .aa-tvault__place {
		font-size: 11px;
		margin-top: -6px;
	}

	html.aa-tvault-js .aa-tvault__bar {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 10px;
	}

	html.aa-tvault-js .aa-tvault__fpill {
		display: inline-flex;
		align-items: center;
		flex: 0 0 auto;
		min-height: 44px;
		padding: 0 22px;
		border: 0;
		border-radius: var( --tv-pill );
		background: var( --tv-brown );
		color: var( --tv-white );
		font-family: var( --tv-display );
		font-size: 15px;
		cursor: pointer;
	}

	html.aa-tvault-js .aa-tvault__fpill:hover {
		background: var( --tv-brown-dark );
		color: var( --tv-white );
	}

	html.aa-tvault-js .aa-tvault__left > .aa-tvault__fwrap,
	html.aa-tvault-js .aa-tvault__left > .aa-tvault__clear,
	html.aa-tvault-js .aa-tvault__sortlabel {
		display: none;
	}

	/* The live region stays in the accessibility tree, off screen. */
	html.aa-tvault-js .aa-tvault__left {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect( 0, 0, 0, 0 );
		white-space: nowrap;
	}

	html.aa-tvault-js .aa-tvault__sortbar {
		flex: 1 1 auto;
		min-width: 0;
	}

	html.aa-tvault-js .aa-tvault__sortpills {
		gap: 6px;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	html.aa-tvault-js .aa-tvault__sortpills::-webkit-scrollbar {
		display: none;
	}

	html.aa-tvault-js .aa-tvault__pill {
		flex: 0 0 auto;
		height: 28px;
		margin: 8px 0;
		padding: 0 14px;
	}

	/* Detail: bottom sheet. */
	dialog.aa-tvault-panel {
		top: auto;
		left: 0;
		right: 0;
		width: 100%;
		max-width: 100%;
		height: auto;
		max-height: 90%;
		border-radius: 16px 16px 0 0;
		box-shadow: none;
	}

	dialog.aa-tvault-panel::backdrop {
		background: rgba( 74, 36, 4, .5 );
	}

	.aa-tvault-panel .aa-tvault-panel__inner {
		padding: 8px 20px 24px;
		gap: 14px;
	}

	.aa-tvault-panel button.aa-tvault-panel__close {
		min-width: 44px;
		min-height: 44px;
	}

	.aa-tvault-panel .aa-tvault-panel__close-text {
		display: none;
	}

	.aa-tvault-panel .aa-tvault-panel__faces {
		gap: 12px;
		padding: 0 18px;
	}

	.aa-tvault-panel h2.aa-tvault-panel__name {
		font-size: 22px;
	}

	.aa-tvault-panel .aa-tvault-panel__place {
		font-size: 13px;
		margin-top: 4px;
	}

	.aa-tvault-panel dl.aa-tvault-panel__spec {
		padding-top: 12px;
		gap: 10px 12px;
	}

	.aa-tvault-panel .aa-tvault-panel__spec dd {
		font-size: 13px;
	}

	.aa-tvault-panel .aa-tvault-panel__locs {
		padding-top: 12px;
	}

	.aa-tvault-panel .aa-tvault-panel__row {
		min-height: 57px;
		padding: 0;
		gap: 10px;
	}

	.aa-tvault-panel .aa-tvault-panel__locname {
		font-size: 14px;
	}

	.aa-tvault-panel .aa-tvault-panel__locplace {
		font-size: 12px;
	}

	.aa-tvault-panel a.aa-tvault-panel__loclink {
		height: 36px;
	}

	.aa-tvault-panel .aa-tvault-panel__long {
		display: none;
	}

	.aa-tvault-panel .aa-tvault-panel__short {
		display: inline;
	}

	.aa-tvault-panel .aa-tvault-panel__pager button {
		min-height: 36px;
		min-width: 36px;
	}

	.aa-tvault-panel a.aa-points__cta.aa-tvault-panel__cta {
		min-height: 48px;
		font-size: 1rem;
	}
}