/* ==========================================================================
   layout.css
   Application-level layout: app shell, nav, footer, page container, form,
   table, modal, flash, age gate, keyboard shortcuts, tag chip, pagination.
   Page-specific styles live in their own files.
   ========================================================================== */

/* The first link in the tab order. It sits above the nav and is only
   visible once it takes focus -- otherwise it would cover the top of the
   page on every load. */
.skip-link {
	position: absolute;
	top: -100px;
	left: var(--s-4);
	z-index: var(--z-skip);
	padding: var(--s-2) var(--s-4);
	border: 1px solid var(--border-strong);
	border-radius: var(--r-md);
	background: var(--surface-solid);
	color: var(--text);
	font-weight: 600;
	text-decoration: none;
	transition: top var(--dur-fast) var(--ease);
}

.skip-link:focus {
	top: var(--s-2);
}

.app-main {
	min-height: calc(100vh - var(--nav-h) - 200px);
	padding-top: var(--s-6);
	padding-bottom: var(--s-10);
}

@media (max-width: 640px) {
	.app-main {
		padding-top: var(--s-4);
		padding-bottom: var(--s-8);
	}
}

/* ==========================================================================
   Nav
   ========================================================================== */

.nav {
	position: sticky;
	top: 0;
	z-index: var(--z-nav);
	background: rgba(7, 9, 15, 0.6);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	border-bottom: 1px solid var(--border);
	height: var(--nav-h);
}

.nav__inner {
	display: flex;
	align-items: center;
	gap: var(--s-5);
	height: 100%;
}

.nav__brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--text);
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 700;
	letter-spacing: -0.02em;
	flex-shrink: 0;
}

.nav__brand:hover {
	text-decoration: none;
}

.nav__brand-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: var(--aurora);
	border-radius: 10px;
	font-size: 18px;
	color: white;
	box-shadow:
		0 4px 16px rgba(239, 68, 68, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.3);
	transition: transform var(--dur) var(--ease);
}

.nav__brand:hover .nav__brand-mark {
	transform: rotate(8deg) scale(1.05);
}

.nav__brand-word {
	color: var(--text);
	font-weight: 600;
	letter-spacing: -0.02em;
}

.nav__primary {
	display: flex;
	align-items: center;
	gap: var(--s-1);
}

.nav__link {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 var(--s-3);
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--text-2);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--r-md);
	text-decoration: none;
	transition:
		color var(--dur) var(--ease),
		background var(--dur) var(--ease),
		border-color var(--dur) var(--ease);
}

.nav__link:hover {
	color: var(--text);
	background: var(--surface-1);
	border-color: var(--border);
	text-decoration: none;
}

.nav__link:focus-visible {
	outline: none;
	border-color: var(--border-accent);
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

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

.nav__search {
	flex: 1;
	min-width: 0;
	max-width: 480px;
	margin-left: auto;
}

.nav__user {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	flex-shrink: 0;
}

.nav__user-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 34px;
	padding: 0 var(--s-3);
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--text-2);
	background: var(--surface-1);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	text-decoration: none;
	transition: all var(--dur) var(--ease);
}

.nav__user-link::before {
	content: "";
	width: 22px;
	height: 22px;
	background: var(--aurora-violet);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 11px;
	font-weight: 700;
}

.nav__user-link:hover {
	color: var(--text);
	background: var(--surface-2);
	border-color: var(--border-strong);
	text-decoration: none;
}

.nav__shortcut-hint {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 24px is the smallest target the target-size minimum allows. */
	width: 24px;
	height: 24px;
	padding: 0;
	color: var(--text-3);
	background: var(--surface-1);
	border: 1px solid var(--border);
	border-radius: 6px;
	cursor: pointer;
	appearance: none;
}

.nav__shortcut-hint svg {
	display: block;
}

.nav__shortcut-hint:hover {
	color: var(--text);
	border-color: var(--border-strong);
}

.nav__shortcut-hint:focus-visible {
	outline: none;
	border-color: var(--border-accent);
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}

/* The menu button. It belongs to the phone layout: the primary nav is
   hidden there, and this button is what brings it back. On a desktop the
   button is display:none and the links sit in the bar as usual. */
.nav__menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	color: var(--text);
	background: var(--surface-1);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	box-shadow: var(--inner-hi);
	cursor: pointer;
	appearance: none;
	flex-shrink: 0;
}

.nav__menu-toggle__icon {
	position: relative;
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: background var(--dur-fast) var(--ease);
}

/* The outer two bars of the hamburger -- the element itself is the
   middle one. */
.nav__menu-toggle__icon::before,
.nav__menu-toggle__icon::after {
	content: "";
	position: absolute;
	left: 0;
	width: 18px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition:
		transform var(--dur) var(--ease),
		opacity var(--dur-fast) var(--ease);
}

.nav__menu-toggle__icon::before {
	top: -6px;
}

.nav__menu-toggle__icon::after {
	top: 6px;
}

.nav__menu-toggle:hover {
	color: var(--text);
	border-color: var(--border-strong);
}

.nav__menu-toggle:focus-visible {
	outline: none;
	border-color: var(--border-accent);
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

/* Open: the three bars cross into an X. */
.nav__menu-toggle--open .nav__menu-toggle__icon {
	background: transparent;
}

.nav__menu-toggle--open .nav__menu-toggle__icon::before {
	transform: translateY(6px) rotate(45deg);
}

.nav__menu-toggle--open .nav__menu-toggle__icon::after {
	transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 1100px) {
	.nav__inner {
		gap: var(--s-3);
		flex-wrap: wrap;
		padding-top: var(--s-2);
		padding-bottom: var(--s-2);
	}
	.nav {
		height: auto;
	}
	.nav__menu-toggle {
		display: inline-flex;
	}
	.nav__search {
		order: 3;
		/* flex-basis 100% is what puts it on a row of its own. The base
		   rule sets flex: 1, and a flex item with a basis of 0 shrinks
		   instead of wrapping, which left the field 64px wide on a phone. */
		flex: 0 0 100%;
		width: 100%;
		max-width: none;
		margin-left: 0;
	}
	.nav__brand-word {
		display: none;
	}
	/* The keyboard hint opens the shortcuts overlay, which is a keyboard
	   thing -- on a touch device it is dead weight in a bar that has
	   room for the menu button. */
	.nav__shortcut-hint {
		display: none;
	}
	/* The search field takes the row under the bar, so the account block
	   is what pushes to the right of the top row. */
	.nav__user {
		margin-left: auto;
	}

	/* The primary nav collapses into the panel the menu button opens.
	   It sits out of flow, so opening it does not push the page down. */
	.nav__primary {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: var(--s-1);
		max-height: calc(100vh - 112px);
		max-height: calc(100dvh - 112px);
		overflow-y: auto;
		padding: var(--s-3) var(--s-4);
		background: var(--surface-solid);
		border-bottom: 1px solid var(--border);
		box-shadow: var(--shadow-lg);
		z-index: var(--z-popover);
	}

	.nav__primary--open {
		display: flex;
	}

	.nav__primary--open .nav__link {
		/* A touch target, not a 34px desktop chip. */
		height: 44px;
		justify-content: flex-start;
		font-size: var(--text-base);
	}
}

.discovery-nav {
	background: var(--surface-solid);
	border-bottom: 1px solid var(--border);
}

.discovery-nav__inner {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	min-height: 52px;
	padding-top: var(--s-1);
	padding-bottom: var(--s-1);
}

.discovery-nav__label {
	flex-shrink: 0;
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: var(--text-3);
}

.discovery-nav__links {
	display: flex;
	align-items: center;
	gap: var(--s-1);
	flex: 1;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--border-strong) transparent;
}

.discovery-nav__links::-webkit-scrollbar {
	height: 6px;
}

.discovery-nav__links::-webkit-scrollbar-thumb {
	background: var(--border-strong);
	border-radius: var(--r-full);
}

.discovery-nav__links::-webkit-scrollbar-track {
	background: transparent;
}

.discovery-nav__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--s-3);
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--text-2);
	white-space: nowrap;
	flex-shrink: 0;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition:
		color var(--dur) var(--ease),
		background var(--dur) var(--ease),
		border-color var(--dur) var(--ease);
}

.discovery-nav__link:hover {
	color: var(--text);
	background: var(--surface-1);
	text-decoration: none;
}

.discovery-nav__link--active {
	color: var(--text);
	background: var(--border-accent-soft);
	border-bottom-color: var(--border-accent);
}

.discovery-nav__link:focus-visible {
	outline: none;
	color: var(--text);
	border-bottom-color: var(--border-accent);
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

@media (max-width: 768px) {
	.discovery-nav__label {
		display: none;
	}
}

/* ==========================================================================
   Search (used in nav)
   ========================================================================== */

.search-form,
.nav__search form {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	width: 100%;
}

.search-input {
	width: 100%;
	height: 44px;
	min-height: 44px;
	padding: 0 var(--s-3) 0 38px;
	font-size: var(--text-sm);
	color: var(--text);
	background: var(--surface-1);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	box-shadow: var(--inner-hi);
	transition: all var(--dur) var(--ease);
	position: relative;
}

.search-input::placeholder {
	color: var(--text-3);
}

.search-input:focus {
	outline: none;
	border-color: var(--border-accent);
	background: var(--surface-2);
	box-shadow:
		0 0 0 3px rgba(239, 68, 68, 0.18),
		var(--inner-hi);
}

.search-input:focus::placeholder {
	color: var(--text-2);
}

.search-btn {
	display: none;
}

.search-wrapper {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
}

.search-wrapper__icon {
	position: absolute;
	left: 12px;
	width: 16px;
	height: 16px;
	color: var(--text-3);
	pointer-events: none;
	z-index: var(--z-raised);
}

.search-wrapper__kbd {
	position: absolute;
	right: 8px;
	pointer-events: none;
}

@media (max-width: 1100px) {
	/* Phones: no physical keyboard, so hide the "/" hint and free up tap space. */
	.search-wrapper__kbd {
		display: none;
	}
	/* Larger tap target (44px iOS guideline) and 16px font to prevent iOS auto-zoom on focus. */
	.search-input {
		height: 44px;
		font-size: 16px;
		padding-left: 40px;
	}
	.search-wrapper__icon {
		left: 14px;
		width: 18px;
		height: 18px;
	}
	/* The field has a row of its own here, so there is room for a real
	   button -- and a phone has no Enter key to search with. */
	.search-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		height: 44px;
		padding: 0 var(--s-4);
		font-family: var(--font-sans);
		font-size: var(--text-sm);
		font-weight: 600;
		color: var(--text);
		background: var(--surface-2);
		border: 1px solid var(--border);
		border-radius: var(--r-md);
		cursor: pointer;
	}
	.search-btn:hover {
		background: var(--surface-3);
		border-color: var(--border-strong);
	}
	.search-btn:focus-visible {
		outline: none;
		border-color: var(--border-accent);
		box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
	}
}

/* ==========================================================================
   Page
   ========================================================================== */

.page-title {
	margin: 0 0 var(--s-5);
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--text);
}

.page-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-4);
	margin-bottom: var(--s-6);
	flex-wrap: wrap;
}

/* ==========================================================================
   Form (page-level)
   ========================================================================== */

.form {
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
}

.form-section {
	padding-top: var(--s-5);
	border-top: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}

.form-section__title {
	font-size: var(--text-md);
	font-weight: 600;
	color: var(--text);
	margin: 0 0 var(--s-3);
}

.form-actions {
	display: flex;
	gap: var(--s-3);
	flex-wrap: wrap;
	margin-top: var(--s-3);
}

.form-field {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}

.form-input,
.form-select {
	width: 100%;
	height: 44px;
	padding: 0 var(--s-4);
	font-size: var(--text-md);
	color: var(--text);
	background: var(--surface-1);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	box-shadow: var(--inner-hi);
	transition: all var(--dur) var(--ease);
}

.form-input::placeholder {
	color: var(--text-3);
}

.form-input:focus,
.form-select:focus {
	outline: none;
	border-color: var(--border-accent);
	background: var(--surface-2);
	box-shadow:
		0 0 0 3px rgba(239, 68, 68, 0.18),
		var(--inner-hi);
}

.form-select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a8afc1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 40px;
	cursor: pointer;
}

/* Moved here from admin.css, where it only reached the admin pages. The sale
   wishlist sort dropdown is not an admin page, so it rendered with the same
   invisible unselected options as .select did. Belongs beside the primitive. */
.form-select option {
	color: var(--text);
	background-color: var(--surface-solid);
	padding: 6px 10px;
}

.form-field label {
	display: block;
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--text-2);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	margin-bottom: var(--s-5);
}

.form-group label {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--text);
}

.form-group input[type="checkbox"] {
	accent-color: var(--violet);
	width: 18px;
	height: 18px;
	cursor: pointer;
}

.checkbox-label {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	cursor: pointer;
	color: var(--text);
	font-size: var(--text-sm);
}

.checkbox-label input {
	width: 18px;
	height: 18px;
	accent-color: var(--violet);
	cursor: pointer;
}

/* ==========================================================================
   Flash messages
   ========================================================================== */

.flash-area {
	max-width: var(--container);
	margin: 0 auto;
	padding: var(--s-4) var(--s-6) 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}

.flash {
	padding: var(--s-3) var(--s-4);
	font-size: var(--text-sm);
	font-weight: 500;
	border-radius: var(--r-md);
	background: var(--surface-1);
	border: 1px solid var(--border);
	box-shadow: var(--inner-hi);
	animation: flash-slide-in 280ms var(--ease-out) backwards;
}

@keyframes flash-slide-in {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

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

.flash--alert {
	color: color-mix(in srgb, var(--danger) 60%, var(--text));
	background: color-mix(in srgb, var(--danger) 10%, transparent);
	border-color: color-mix(in srgb, var(--danger) 32%, transparent);
}

.flash--notice {
	color: color-mix(in srgb, var(--success) 60%, var(--text));
	background: color-mix(in srgb, var(--success) 10%, transparent);
	border-color: color-mix(in srgb, var(--success) 32%, transparent);
}

/* ==========================================================================
   Alert (admin)
   ========================================================================== */

.alert {
	padding: var(--s-3) var(--s-4);
	border-radius: var(--r-md);
	margin-bottom: var(--s-4);
	font-size: var(--text-sm);
	font-weight: 500;
	background: var(--surface-1);
	border: 1px solid var(--border);
}

.alert-danger {
	color: color-mix(in srgb, var(--danger) 60%, var(--text));
	background: color-mix(in srgb, var(--danger) 10%, transparent);
	border-color: color-mix(in srgb, var(--danger) 32%, transparent);
}

.alert h4 {
	margin: 0 0 var(--s-2);
	font-size: var(--text-sm);
	font-weight: 600;
}

.alert ul {
	margin: 0;
	padding-left: var(--s-5);
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--s-5);
	padding: var(--s-5);
	margin-top: var(--s-7);
	background: var(--surface-1);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
}

/* "Page 2 of 5 · 120 games" readout. Same slot as .pagination__info but with
   padding, since the pages using it all render it as a bare span between two
   buttons. Lives here, not in admin.css, because tags#show is public and
   needs it too. */
.pagination__current {
	color: var(--text-3);
	font-size: var(--text-sm);
	font-variant-numeric: tabular-nums;
	padding: var(--s-2) var(--s-3);
}

/* ==========================================================================
   Tag chip (top by tag)
   ========================================================================== */

.tag-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin-bottom: var(--s-5);
}

.tag-chip {
	display: inline-flex;
	align-items: center;
	padding: 6px var(--s-3);
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--text-2);
	background: var(--surface-1);
	border: 1px solid var(--border);
	border-radius: var(--r-full);
	text-decoration: none;
	transition: all var(--dur) var(--ease);
}

.tag-chip:hover {
	background: var(--surface-2);
	border-color: var(--border-strong);
	color: var(--text);
	text-decoration: none;
	transform: translateY(-1px);
}

.tag-chip:focus-visible {
	outline: none;
	border-color: var(--border-accent);
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}

.tag-chip-active {
	color: white;
	background: var(--aurora-violet);
	border-color: transparent;
}

.tag-chip-active:hover {
	color: white;
	background: var(--aurora);
	border-color: transparent;
}

/* ==========================================================================
   Age verification modal
   ========================================================================== */

.age-verification {
	/* A native dialog fills the viewport and sits in the top layer, so it
	   covers the page whatever the stacking context below it does. The
	   closed state stays hidden because the layout only applies once the
	   dialog is open. */
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: var(--s-6);
	border: none;
	background: rgba(7, 9, 15, 0.85);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.age-verification[open] {
	display: flex;
	align-items: center;
	justify-content: center;
}

.age-verification__modal {
	width: 100%;
	max-width: 440px;
	padding: var(--s-8);
	text-align: center;
	background: var(--surface-2);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	border: 1px solid var(--border-strong);
	border-radius: var(--r-2xl);
	box-shadow: var(--shadow-lg), var(--inner-hi-strong);
	position: relative;
}

.age-verification__modal::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: var(--aurora-soft);
	-webkit-mask:
		linear-gradient(white, white) content-box,
		linear-gradient(white, white);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0.6;
	pointer-events: none;
}

.age-verification__title {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--text);
	margin: 0 0 var(--s-5);
}

.age-verification__text {
	color: var(--text-2);
	font-size: var(--text-md);
	line-height: var(--leading-relaxed);
	margin: 0 0 var(--s-4);
}

.age-verification__buttons {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	margin-top: var(--s-6);
}

.age-verification__buttons .btn {
	width: 100%;
	height: 48px;
	font-size: var(--text-md);
}

/* ==========================================================================
   Keyboard shortcuts modal
   ========================================================================== */

.keyboard-shortcuts-overlay {
	/* A native dialog, like the age gate: the browser handles the focus
	   trap, the inert background and the Escape key. */
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: var(--s-6);
	border: none;
	background: rgba(7, 9, 15, 0.78);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.keyboard-shortcuts-overlay[open] {
	display: flex;
	align-items: center;
	justify-content: center;
}

.keyboard-shortcuts-modal {
	width: 100%;
	max-width: 440px;
	padding: var(--s-6);
	background: var(--surface-2);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	border: 1px solid var(--border-strong);
	border-radius: var(--r-xl);
	box-shadow: var(--shadow-lg), var(--inner-hi-strong);
}

.keyboard-shortcuts-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--s-5);
	padding-bottom: var(--s-3);
	border-bottom: 1px solid var(--border);
}

.keyboard-shortcuts-header h2 {
	margin: 0;
	font-size: var(--text-lg);
	font-weight: 600;
}

.keyboard-shortcuts-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--text-2);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--r-md);
	cursor: pointer;
	transition: all var(--dur) var(--ease);
}

.keyboard-shortcuts-close:hover {
	color: var(--text);
	background: var(--surface-2);
	border-color: var(--border);
}

.keyboard-shortcuts-close:focus-visible {
	outline: none;
	border-color: var(--border-accent);
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}

.keyboard-shortcuts-content {
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
}

.keyboard-shortcuts-section h3 {
	margin: 0 0 var(--s-3);
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: var(--text-3);
	font-weight: 600;
}

.keyboard-shortcut {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	margin-bottom: var(--s-2);
	font-size: var(--text-sm);
}

.keyboard-shortcut:last-child {
	margin-bottom: 0;
}

.keyboard-shortcut span {
	color: var(--text-3);
	font-size: var(--text-sm);
}

.keyboard-shortcut-desc {
	margin-left: auto;
	color: var(--text-2);
	font-size: var(--text-sm);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
	margin-top: var(--s-10);
	padding: var(--s-7) 0;
	border-top: 1px solid var(--border);
	background: rgba(7, 9, 15, 0.4);
}

.footer__inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--s-8);
	flex-wrap: wrap;
}

.footer__about {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	max-width: 36ch;
}

.footer__brand {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-md);
	color: var(--text);
	letter-spacing: -0.02em;
}

.footer__tagline {
	margin: 0;
	color: var(--text-3);
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
}

.footer__group {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}

.footer__group-title {
	color: var(--text-3);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}

.footer__links {
	display: flex;
	align-items: center;
	gap: var(--s-5);
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer__links a {
	color: var(--text-2);
	font-size: var(--text-sm);
	text-decoration: none;
	/* The smallest target the target-size minimum allows. */
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	transition: color var(--dur) var(--ease);
}

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

.footer__meta {
	font-size: var(--text-xs);
	color: var(--text-3);
}

.footer__meta a {
	color: var(--text-3);
	text-decoration: none;
}

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

/* ==========================================================================
   Privacy policy
   ========================================================================== */

/* A prose page, not a catalogue grid: one readable column centred in the
   page rather than the full container width. */
.privacy-page {
	max-width: 44rem;
	margin: 0 auto;
	padding: 0 var(--s-6);
}

@media (max-width: 640px) {
	.privacy-page {
		padding: 0 var(--s-4);
	}
}

.privacy-page__body {
	margin-top: var(--s-6);
	line-height: var(--leading-relaxed);
}

.privacy-page__body h2 {
	margin: var(--s-8) 0 var(--s-3);
	font-size: var(--text-xl);
}

.privacy-page__body h2:first-child {
	margin-top: 0;
}

.privacy-page__body h3 {
	margin: var(--s-5) 0 var(--s-2);
	font-size: var(--text-lg);
}

.privacy-page__body p {
	margin: 0 0 var(--s-4);
	color: var(--text-2);
}

.privacy-page__body ul {
	margin: 0 0 var(--s-4);
	padding-left: var(--s-5);
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	color: var(--text-2);
}

.privacy-page__body li::marker {
	color: var(--text-3);
}

.privacy-page__body code {
	font-family: var(--font-mono);
	font-size: 0.9em;
	padding: 0.1em 0.35em;
	border-radius: var(--r-sm);
	background: var(--surface-2);
}