/* ==========================================================================
	 AIDB: Acronyms & Initialisms DataBase
	 All styling lives here; the HTML uses classes only (no inline styles).

	 Look: smoked glass panels over the graphite background image, with the
	 orange of its glowing question mark used for every action, every
	 focus and every highlight, and nowhere else.

	 Colours, fonts and the background are design tokens in section 2, so a
	 new colour scheme or background only needs changes there.
============================================================================= */

	/* ---------- 1. Fonts ---------- */

	/* The site title and favicon */
	@font-face {
		font-family: "EdgeCaps";
		src: url("/fonts/EdgeCaps-Regular.otf") format("opentype");
		font-display: swap;
	}

	/* Everything else: Archivo, one variable font with a weight axis (100 to 900)
	   and a width axis (62% to 125%). Headings and acronyms use it wide;
	   reading text uses its normal width. Licence: fonts/Archivo-OFL.txt */
	@font-face {
		font-family: "Archivo";
		src: url("/fonts/archivo-variable.woff2") format("woff2");
		font-weight: 100 900;
		font-stretch: 62% 125%;
		font-display: swap;
	}

	/* ---------- 2. Design tokens ---------- */
	:root {
		/* Colours taken from the background image */
		--color-signal: #f15334;				/* the question mark's lit face: actions, focus, highlights */
		--color-signal-bright: #ff7963;			/* its brightest edge: links and hover */
		--color-signal-deep: #c1290e;			/* its shadowed side: pressed buttons */
		--color-ink: #1b1b1c;					/* text on orange */
		--color-graphite: #1e1e1f;				/* the surface the question marks stand on */
		--color-bone: #eee9e4;					/* main text, warm like the glow */
		--color-ash: #a39e99;					/* secondary text */
		--color-smoke: #6f6b68;					/* placeholders, quiet details */

		/* Glass panels */
		--panel-bg: rgba(30, 30, 31, 0.68);
		--panel-bg-solid: #232324;				/* used where the browser cannot blur */
		--panel-border: rgba(255, 255, 255, 0.08);
		--panel-blur: 18px;
		--panel-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.85);
		--well-bg: rgba(0, 0, 0, 0.32);			/* inputs and the search box */
		--well-border: rgba(255, 255, 255, 0.10);
		--hairline: rgba(255, 255, 255, 0.08);
		--row-hover: rgba(241, 83, 52, 0.07);
		--mark-bg: rgba(241, 83, 52, 0.28);
		--glow: 0 0 0 1px var(--color-signal), 0 0 28px rgba(241, 83, 52, 0.38);

		/* Messages */
		--color-error: #ff8a73;
		--color-success: #7fcf9a;

		/* Tooltips */
		--tooltip-text: var(--color-bone);
		--tooltip-bg: #262627;
		--tooltip-border: rgba(241, 83, 52, 0.55);

		/* Page background: covers the window, stays still while the page scrolls.
		   The position keeps the glowing question mark (lower right of the image)
		   in view at every window shape; the overlay darkens the side the text sits on. */
		--bg-color: #1e1e1f;
		--bg-image: url("/img/background_new.jpg");
		--bg-position: 72% 62%;
		--bg-overlay: linear-gradient(100deg, rgba(20, 20, 21, 0.78) 0%, rgba(20, 20, 21, 0.45) 45%, rgba(20, 20, 21, 0.05) 75%);

		/* Type */
		--font-title: "EdgeCaps", "Archivo", sans-serif;
		--font: "Archivo", "Helvetica Neue", Arial, sans-serif;
		--wide: 118%;							/* width used for headings, buttons and acronyms */

		/* Icon line thickness, added around the outline of every icon, in icon
		   units (an icon is 960 units across): 0 is the thin original, 12 a
		   little heavier, 20 about the same as the regular icon weight, 30 bold */
		--icon-stroke: 20;

		/* Shapes and layout */
		--radius-panel: 20px;
		--radius-control: 12px;
		--page-width: 1180px;
		--column-width: 760px;
		--nav-height: 68px;
	}

	/* ---------- 3. Base ---------- */
	*, *::before, *::after {
		box-sizing: border-box;
	}

	html {
		font-size: 16px;
		-webkit-text-size-adjust: 100%;
		scroll-padding-top: calc(var(--nav-height) + 1rem);
	}

	body {
		margin: 0;
		min-height: 100vh;
		min-height: 100svh;
		display: flex;
		flex-direction: column;
		font-family: var(--font);
		font-size: 1.0625rem;
		font-weight: 400;
		line-height: 1.6;
		color: var(--color-bone);
		background-color: var(--bg-color);
		-webkit-font-smoothing: antialiased;
		overflow-y: scroll;
	}

	/* Background on its own fixed layer: "cover" then always fits the window, on phones too */
	body::before {
		content: "";
		position: fixed;
		inset: 0;
		z-index: -1;
		background: var(--bg-overlay), var(--bg-image) var(--bg-position) / cover no-repeat, var(--bg-color);
	}

	a {
		color: var(--color-signal-bright);
		text-decoration-thickness: 1px;
		text-underline-offset: 0.18em;
	}

	a:hover {
		color: var(--color-bone);
	}

	h1, h2, h3 {
		margin: 0;
		font-stretch: var(--wide);
		font-weight: 700;
		line-height: 1.15;
		letter-spacing: -0.01em;
		text-wrap: balance;
	}

	p {
		margin: 0 0 1em;
	}

	ul {
		margin: 0;
		padding: 0;
	}

	mark {
		padding: 0 0.1em;
		color: var(--color-bone);
		background-color: var(--mark-bg);
		border-radius: 3px;
	}

	::placeholder {
		color: var(--color-smoke);
		opacity: 1;
	}

	::selection {
		color: var(--color-ink);
		background: var(--color-signal);
	}

	:focus-visible {
		outline: 2px solid var(--color-signal);
		outline-offset: 3px;
	}

	.visually-hidden, .nav-toggle, .search-type-radio {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
		opacity: 0;
	}

	.font-title {
		font-family: var(--font-title);
	}

	svg[viewBox="0 -960 960 960"] path {
		stroke: currentColor;
		stroke-width: var(--icon-stroke);
		stroke-linejoin: round;
	}

	/* ---------- 4. Layout ---------- */
	.container, .page {
		width: min(var(--page-width), 100% - 2rem);
		margin: 0 auto;
	}

	.site-main {
		flex: 1 0 auto;
		padding: clamp(1.5rem, 4vw, 3.5rem) 0 4rem;
	}

	/* Content runs in one column, kept to the left on wide screens so the
	   glowing question mark in the background stays in view on the right */
	.page > * {
		max-width: var(--column-width);
		margin-left: auto;
		margin-right: auto;
	}

	@media (min-width: 1100px) {
		.page > * {
			margin-left: 0;
		}
	}

	/* Glass panel */
	.card {
		margin-bottom: 1.5rem;
		padding: clamp(1.25rem, 3vw, 2rem);
		background-color: var(--panel-bg);
		border: 1px solid var(--panel-border);
		border-radius: var(--radius-panel);
		box-shadow: var(--panel-shadow);
		-webkit-backdrop-filter: blur(var(--panel-blur)) saturate(115%);
		backdrop-filter: blur(var(--panel-blur)) saturate(115%);
	}

	@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
		.card {
			background-color: var(--panel-bg-solid);
		}
	}

	.card-heading {
		margin-bottom: 1.25rem;
		font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
	}

	/* ---------- 5. Navigation bar ---------- */
	.site-nav {
		position: sticky;
		top: 0;
		z-index: 900;
		height: var(--nav-height);
		background-color: rgba(24, 24, 25, 0.72);
		border-bottom: 1px solid var(--hairline);
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
	}

	.site-nav-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100%;
		gap: 1rem;
	}

	.site-logo {
		font-size: 2.6rem;
		line-height: 1;
		color: var(--color-signal);
		text-decoration: none;
		white-space: nowrap;
		text-shadow: 0 0 22px rgba(241, 83, 52, 0.45);
	}

	.site-logo:hover {
		color: var(--color-signal-bright);
	}

	.site-nav-list {
		display: flex;
		gap: 0.25rem;
		list-style: none;
	}

	.nav-link {
		display: inline-flex;
		align-items: center;
		gap: 0.45rem;
		padding: 0.5rem 0.85rem;
		font-size: 0.95rem;
		font-weight: 550;
		font-stretch: 110%;
		color: var(--color-ash);
		text-decoration: none;
		border-radius: 999px;
		transition: color 0.2s ease, background-color 0.2s ease;
	}

	.nav-link:hover {
		color: var(--color-bone);
		background-color: rgba(255, 255, 255, 0.05);
	}

	.nav-link.is-current {
		color: var(--color-bone);
		background-color: rgba(241, 83, 52, 0.14);
	}

	.nav-icon {
		width: 18px;
		height: 18px;
	}

	.nav-link.is-current .nav-icon {
		color: var(--color-signal);
	}

	.sidenav-trigger {
		display: none;
		color: var(--color-bone);
		cursor: pointer;
	}

	.sidenav-trigger-icon {
		display: block;
		width: 32px;
		height: 32px;
	}

	.nav-toggle:focus-visible ~ .site-nav .sidenav-trigger {
		outline: 2px solid var(--color-signal);
		outline-offset: 4px;
	}

	@media (max-width: 860px) {
		.site-nav-list {
			display: none;
		}

		.sidenav-trigger {
			display: block;
		}
	}

	@media (max-width: 400px) {
		.site-logo {
			font-size: 2.1rem;
		}
	}

	/* ---------- 6. Slide out menu (narrow screens) ---------- */
	.sidenav {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		width: 290px;
		max-width: 85vw;
		height: 100%;
		padding: 1.25rem 0 60px;
		overflow-y: auto;
		background-color: var(--panel-bg-solid);
		border-right: 1px solid var(--panel-border);
		transform: translateX(-105%);
		visibility: hidden;
		transition: transform 0.25s ease, visibility 0s linear 0.25s;
	}

	.sidenav ul {
		list-style: none;
	}

	.sidenav a {
		display: flex;
		align-items: center;
		gap: 1rem;
		height: 52px;
		padding: 0 28px;
		font-size: 1.05rem;
		font-weight: 550;
		font-stretch: 110%;
		color: var(--color-bone);
		text-decoration: none;
		border-left: 3px solid transparent;
	}

	.sidenav a:hover {
		background-color: rgba(255, 255, 255, 0.04);
	}

	.sidenav a.is-current {
		border-left-color: var(--color-signal);
		background-color: rgba(241, 83, 52, 0.08);
	}

	.sidenav-icon {
		width: 22px;
		height: 22px;
		color: var(--color-ash);
	}

	.sidenav a.is-current .sidenav-icon {
		color: var(--color-signal);
	}

	.sidenav-overlay {
		position: fixed;
		inset: 0;
		z-index: 997;
		background-color: rgba(0, 0, 0, 0.55);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.25s ease, visibility 0s linear 0.25s;
	}

	.nav-toggle:checked ~ .sidenav {
		transform: translateX(0);
		visibility: visible;
		transition: transform 0.25s ease, visibility 0s;
	}

	.nav-toggle:checked ~ .sidenav-overlay {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.25s ease, visibility 0s;
	}

	body:has(.nav-toggle:checked) {
		overflow: hidden;
	}

	@media (min-width: 861px) {
		.nav-toggle, .sidenav, .sidenav-overlay {
			display: none;
		}
	}

	/* ---------- 7. Buttons ---------- */

	/* Standard button: outlined */
	.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		min-height: 46px;
		padding: 0 1.25rem;
		font-family: var(--font);
		font-size: 0.98rem;
		font-weight: 600;
		font-stretch: 112%;
		color: var(--color-bone);
		background-color: rgba(255, 255, 255, 0.04);
		border: 1px solid rgba(255, 255, 255, 0.16);
		border-radius: var(--radius-control);
		text-decoration: none;
		white-space: nowrap;
		cursor: pointer;
		transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
	}

	.btn:hover {
		color: var(--color-bone);
		border-color: rgba(255, 255, 255, 0.32);
		background-color: rgba(255, 255, 255, 0.08);
	}

	/* The main action on each page: lit like the question mark */
	.btn-primary {
		color: var(--color-ink);
		background-color: var(--color-signal);
		border-color: var(--color-signal);
	}

	.btn-primary:hover {
		color: var(--color-ink);
		background-color: var(--color-signal-bright);
		border-color: var(--color-signal-bright);
		box-shadow: 0 0 24px rgba(241, 83, 52, 0.4);
	}

	.btn-primary:active {
		background-color: var(--color-signal-deep);
		border-color: var(--color-signal-deep);
	}

	/* Minor action: text only */
	.btn-quiet {
		color: var(--color-ash);
		background: transparent;
		border-color: transparent;
	}

	.btn-quiet:hover {
		color: var(--color-bone);
		background: transparent;
		border-color: transparent;
	}

	.btn:disabled {
		opacity: 0.45;
		cursor: not-allowed;
		box-shadow: none;
	}

	.btn-icon {
		width: 20px;
		height: 20px;
		flex-shrink: 0;
	}

	/* ---------- 8. Home page: heading and search ---------- */
	.hero {
		margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
	}

	.hero-title {
		font-size: clamp(2rem, 1.15rem + 3.4vw, 3.6rem);
		font-weight: 760;
		font-stretch: 122%;
		line-height: 1.04;
		letter-spacing: -0.02em;
		text-shadow: 0 2px 30px rgba(0, 0, 0, 0.6);
	}

	.hero-text {
		max-width: 34em;
		margin: 1rem 0 0;
		font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
		color: var(--color-ash);
	}

	/* Once a search has been made the heading steps back, so the results come first */
	.hero.is-compact {
		margin-bottom: 1.25rem;
	}

	.hero.is-compact .hero-title {
		font-size: clamp(1.15rem, 0.95rem + 0.8vw, 1.6rem);
		font-weight: 650;
		color: var(--color-ash);
		text-shadow: none;
	}

	.hero.is-compact .hero-text {
		display: none;
	}

	/* Type of search: a segmented control */
	.search-types {
		display: inline-flex;
		flex-wrap: wrap;
		gap: 0.25rem;
		margin: 0 0 1rem;
		padding: 0.3rem;
		background-color: var(--well-bg);
		border: 1px solid var(--well-border);
		border-radius: 999px;
	}

	.search-type {
		padding: 0.45rem 1.05rem;
		font-size: 0.92rem;
		font-weight: 600;
		font-stretch: 110%;
		color: var(--color-ash);
		border-radius: 999px;
		cursor: pointer;
		user-select: none;
		transition: background-color 0.18s ease, color 0.18s ease;
	}

	.search-type:hover {
		color: var(--color-bone);
	}

	.search-type-radio:checked + .search-type {
		color: var(--color-ink);
		background-color: var(--color-signal);
	}

	.search-type-radio:focus-visible + .search-type {
		outline: 2px solid var(--color-signal);
		outline-offset: 2px;
	}

	/* The search box: a dark well that lights up like the question mark when in use */
	.search-row {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		margin-bottom: 1.25rem;
		padding: 0 1rem;
		background-color: var(--well-bg);
		border: 1px solid var(--well-border);
		border-radius: 16px;
		transition: border-color 0.2s ease, box-shadow 0.25s ease;
	}

	.search-row:focus-within {
		border-color: var(--color-signal);
		box-shadow: var(--glow);
	}

	.search-help {
		display: inline-flex;
		flex-shrink: 0;
		color: var(--color-signal);
		cursor: help;
	}

	.search-help-icon {
		width: 28px;
		height: 28px;
	}

	.search-input {
		flex: 1 1 auto;
		min-width: 0;
		height: 4.25rem;
		padding: 0;
		font-family: var(--font);
		font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
		font-weight: 700;
		font-stretch: 122%;
		letter-spacing: 0.02em;
		color: var(--color-bone);
		background: transparent;
		border: none;
		outline: none;
	}

	.search-input::placeholder {
		font-size: 0.8em;
		font-weight: 500;
		font-stretch: 100%;
		letter-spacing: 0;
	}

	.search-count {
		flex-shrink: 0;
		min-width: 3.2em;
		font-size: 0.85rem;
		font-variant-numeric: tabular-nums;
		text-align: right;
		color: var(--color-smoke);
	}

	.search-count.is-over {
		color: var(--color-error);
		font-weight: 700;
	}

	.search-buttons {
		display: flex;
		flex-wrap: wrap;
		gap: 0.75rem;
	}

	.search-buttons .btn-quiet {
		margin-left: auto;
	}

	@media (max-width: 480px) {
		.search-types {
			display: flex;
		}

		.search-type {
			flex: 1 1 auto;
			text-align: center;
			padding-inline: 0.6rem;
		}

		.search-buttons .btn {
			flex: 1 1 auto;
		}

		.search-buttons .btn-quiet {
			margin-left: 0;
		}
	}

	/* ---------- 9. Results ---------- */
	.results-heading {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0.25rem 0.75rem;
		margin-bottom: 1.25rem;
	}

	.results-label {
		font-size: 1rem;
		font-weight: 500;
		font-stretch: 100%;
		letter-spacing: 0;
		color: var(--color-ash);
	}

	/* The acronym searched for, set large and wide */
	.results-term {
		font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.8rem);
		font-weight: 800;
		font-stretch: 125%;
		letter-spacing: 0.01em;
		color: var(--color-bone);
		overflow-wrap: anywhere;
	}

	.results-term.is-words {
		font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
		font-weight: 700;
	}

	.results-message {
		margin: 0.25rem 0 1rem;
		font-size: 1.1rem;
	}

	.results-hint {
		margin: 0.5rem 0 1rem;
		font-size: 0.95rem;
		color: var(--color-ash);
	}

	.results-actions, .levenshtein-actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.75rem;
		margin: 1.5rem 0 0.5rem;
	}

	.table-wrap {
		overflow-x: auto;
		margin: 0 calc(-1 * clamp(0.5rem, 1.5vw, 0.75rem));
	}

	.results-table {
		width: 100%;
		border-collapse: collapse;
	}

	.results-table th {
		padding: 0.6rem clamp(0.5rem, 1.5vw, 0.75rem);
		text-align: left;
		font-size: 0.82rem;
		font-weight: 600;
		font-stretch: 110%;
		letter-spacing: 0.02em;
		color: var(--color-smoke);
		border-bottom: 1px solid var(--hairline);
	}

	.results-table td {
		padding: 0.85rem clamp(0.5rem, 1.5vw, 0.75rem);
		vertical-align: baseline;
		border-bottom: 1px solid var(--hairline);
	}

	.results-table tbody tr:last-child td {
		border-bottom: none;
	}

	.results-table tbody tr {
		transition: background-color 0.2s ease;
	}

	.results-table tbody tr:hover {
		background-color: var(--row-hover);
	}

	.results-table .col-acronym {
		white-space: nowrap;
	}

	.results-table td.col-acronym a {
		font-weight: 750;
		font-stretch: 125%;
		letter-spacing: 0.01em;
		color: var(--color-bone);
		text-decoration: none;
	}

	.results-table td.col-acronym a:hover {
		color: var(--color-signal-bright);
	}

	.results-table .col-link {
		width: 1%;
		padding-block: 0;
		text-align: center;
		vertical-align: middle;
	}

	.result-link, .levenshtein-more {
		display: inline-flex;
		vertical-align: middle;
		padding: 0.25rem;
		color: var(--color-signal);
		border-radius: 8px;
	}

	.result-link:hover, .levenshtein-more:hover {
		color: var(--color-signal-bright);
		background-color: rgba(241, 83, 52, 0.12);
	}

	.link-icon {
		width: 24px;
		height: 24px;
	}

	.levenshtein p {
		margin: 0.85rem 0;
		color: var(--color-ash);
	}

	.levenshtein-example {
		margin: 0 0 0 1.25rem;
		color: var(--color-ash);
	}

	.rate-limit-time {
		color: var(--color-signal-bright);
		font-variant-numeric: tabular-nums;
	}

	/* ---------- 10. Text pages (About, Help Us) ---------- */
	.text-page p {
		color: #d9d4cf;
	}

	.stats-box {
		margin: 0 0 1.75rem;
		padding: 1.25rem 1.5rem;
		background-color: var(--well-bg);
		border: 1px solid var(--well-border);
		border-radius: 16px;
	}

	.stats-title {
		margin-bottom: 0.75rem;
		font-size: 1rem;
		font-weight: 600;
		font-stretch: 110%;
		color: var(--color-ash);
	}

	.text-page .stats-figures {
		margin: 0 0 0.75rem;
		font-size: 1.1rem;
		line-height: 1.9;
		color: var(--color-bone);
	}

	.stats-number {
		font-size: 1.75rem;
		font-weight: 800;
		font-stretch: 125%;
		font-variant-numeric: tabular-nums;
		color: var(--color-signal);
	}

	.text-page .stats-dates {
		margin: 0;
		font-size: 0.9rem;
		color: var(--color-ash);
	}

	.sub-heading {
		margin: 1.75rem 0 0.4rem;
		font-size: 1.2rem;
		color: var(--color-bone);
	}

	.donate {
		margin: 1.5rem 0;
	}

	.donate-link {
		display: inline-block;
		padding: 0.75rem 1rem;
		background-color: #f2efe9;
		border-radius: var(--radius-control);
		transition: box-shadow 0.2s ease;
	}

	.donate-link:hover {
		box-shadow: 0 0 24px rgba(241, 83, 52, 0.4);
	}

	.donate-link img {
		display: block;
	}

	.text-page .thanks {
		margin: 0;
		font-weight: 600;
		font-stretch: 110%;
		color: var(--color-bone);
	}

	/* ---------- 11. Contact form ---------- */
	.contact-intro {
		color: var(--color-ash);
	}

	.form-hp {
		position: absolute;
		left: -10000px;
		top: auto;
		width: 1px;
		height: 1px;
		overflow: hidden;
	}

	.form-field {
		margin: 0 0 0.9rem;
	}

	.form-input {
		display: block;
		width: 100%;
		padding: 0.8rem 1rem;
		font-family: var(--font);
		font-size: 1rem;
		color: var(--color-bone);
		background-color: var(--well-bg);
		border: 1px solid var(--well-border);
		border-radius: var(--radius-control);
		outline: none;
		transition: border-color 0.2s ease, box-shadow 0.25s ease;
	}

	textarea.form-input {
		resize: vertical;
		min-height: 9rem;
		line-height: 1.55;
	}

	.form-input:hover {
		border-color: rgba(255, 255, 255, 0.2);
	}

	.form-input:focus {
		border-color: var(--color-signal);
		box-shadow: var(--glow);
	}

	/* A field left empty or wrongly filled, once the visitor has used it */
	.form-input:user-invalid {
		border-color: var(--color-error);
	}

	.hidden-file-input {
		display: none;
	}

	.file-upload {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.4rem 1rem;
		padding: 1rem;
		border: 1px dashed rgba(255, 255, 255, 0.16);
		border-radius: var(--radius-control);
	}

	.file-count-text, .file-types-text {
		font-size: 0.88rem;
		color: var(--color-ash);
	}

	.file-types-text, .file-list {
		flex-basis: 100%;
	}

	.file-types-text {
		color: var(--color-smoke);
	}

	.file-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		margin-top: 0.4rem;
		padding: 0.45rem 0.6rem 0.45rem 0.85rem;
		background-color: var(--well-bg);
		border-radius: 10px;
	}

	.file-name {
		min-width: 0;
		overflow-wrap: anywhere;
		font-size: 0.92rem;
	}

	.btn-remove-file {
		flex-shrink: 0;
		padding: 0.25rem 0.7rem;
		font-family: var(--font);
		font-size: 0.8rem;
		font-weight: 600;
		color: var(--color-error);
		background: transparent;
		border: 1px solid rgba(255, 138, 115, 0.5);
		border-radius: 8px;
		cursor: pointer;
	}

	.btn-remove-file:hover {
		color: var(--color-ink);
		background-color: var(--color-error);
	}

	.captcha-row {
		display: flex;
		align-items: center;
		gap: 1rem;
	}

	.captcha-font {
		flex-shrink: 0;
		white-space: nowrap;
		font-size: 1.3rem;
		font-weight: 700;
		font-stretch: 120%;
		font-variant-numeric: tabular-nums;
		color: var(--color-signal);
	}

	.captcha-row .form-input {
		width: 11rem;
	}

	.form-actions {
		margin-top: 1.5rem;
	}

	/* Result of a form sent without JavaScript */
	.form-notice {
		margin: 1rem 0;
		padding: 0.85rem 1rem;
		border-left: 3px solid var(--color-error);
		background-color: rgba(255, 138, 115, 0.08);
		border-radius: 0 10px 10px 0;
	}

	.form-notice-success {
		border-left-color: var(--color-success);
		background-color: rgba(127, 207, 154, 0.08);
	}

	.form-notice p {
		margin: 0;
	}

	.form-notice ul {
		margin: 0.5rem 0 0 1.25rem;
		list-style: disc;
	}

	/* ---------- 12. Modals (js/ui-modal.js) ---------- */
	body.ui-modal-lock {
		overflow: hidden;
	}

	html:has(body.ui-modal-lock) {
		scrollbar-gutter: stable;
	}

	.ui-modal-backdrop {
		position: fixed;
		inset: 0;
		z-index: 4000;
		background: rgba(10, 10, 11, 0.7);
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.2s ease, visibility 0.2s ease;
	}

	.ui-modal-backdrop.open {
		opacity: 1;
		visibility: visible;
	}

	.ui-modal {
		position: fixed;
		top: 50%;
		left: 50%;
		z-index: 4001;
		transform: translate(-50%, -50%) scale(0.97);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
	}

	.ui-modal.open {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, -50%) scale(1);
	}

	.ui-modal-content {
		padding: 1.75rem;
		color: var(--color-bone);
		background-color: var(--panel-bg-solid);
		border: 1px solid var(--panel-border);
		border-top: 2px solid var(--color-signal);
		border-radius: var(--radius-panel);
		box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.9);
	}

	.contact-dialog {
		width: min(560px, 90vw);
		max-height: 82vh;
		max-height: 82svh;
		overflow-y: auto;
	}

	.contact-dialog h3 {
		margin-bottom: 0.9rem;
		font-size: 1.45rem;
	}

	.contact-dialog p {
		margin: 0 0 0.75rem;
		color: #d9d4cf;
	}

	.contact-dialog .error-list {
		margin: 0 0 1rem 1.25rem;
		list-style: disc;
		overflow-wrap: anywhere;
	}

	.contact-dialog .error-list li::marker {
		color: var(--color-signal);
	}

	.contact-dialog .error-list:empty {
		display: none;
	}

	.modal-footer {
		padding-top: 0.5rem;
		text-align: right;
	}

	/* ---------- 13. Tooltips (pure CSS) ----------
	 * Shown via ::after on :hover or keyboard focus of any element carrying a
	 * data-tooltip attribute. data-position="top/right/bottom/left" places it.
	 * New lines inside the attribute value are kept.
	 */
	[data-tooltip] {
		position: relative;						/* Anchor point for the tooltip bubble */
	}

	[data-tooltip]::after {
		content: attr(data-tooltip);			/* Pulls text directly from the attribute */
		white-space: pre-line;					/* Respects real newlines inside the attribute value */
		position: absolute;
		width: 250px;
		overflow-wrap: anywhere;
		text-align: center;
		padding: 9px 13px;
		border-radius: 10px;
		font-family: var(--font);
		font-size: 13px;
		font-weight: 500;
		font-stretch: 100%;
		line-height: 1.45;
		letter-spacing: normal;
		text-decoration: none;
		color: var(--tooltip-text);
		background-color: var(--tooltip-bg);
		border: 1px solid var(--tooltip-border);
		box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;					/* Tooltip never intercepts clicks */
		transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
		z-index: 300;
	}

	[data-position="top"]::after {
		bottom: calc(100% + 10px);
		left: 50%;
		transform: translateX(-50%) translateY(4px);
	}

	[data-position="top"]:hover::after, [data-position="top"]:focus-visible::after {
		opacity: 1;
		visibility: visible;
		transform: translateX(-50%) translateY(0);
	}

	[data-position="right"]::after {
		left: calc(100% + 10px);
		top: 50%;
		transform: translateY(-50%) translateX(4px);
		width: max-content;
		min-width: 120px;
		max-width: 260px;
		text-align: left;
		isolation: isolate;
	}

	[data-position="right"]:hover::after, [data-position="right"]:focus-visible::after {
		opacity: 1;
		visibility: visible;
		transform: translateY(-50%) translateX(0);
	}

	[data-position="bottom"]::after {
		top: calc(100% + 10px);
		left: 50%;
		transform: translateX(-50%) translateY(-4px);
	}

	[data-position="bottom"]:hover::after, [data-position="bottom"]:focus-visible::after {
		opacity: 1;
		visibility: visible;
		transform: translateX(-50%) translateY(0);
	}

	[data-position="left"]::after {
		right: calc(100% + 10px);
		top: 50%;
		transform: translateY(-50%) translateX(-4px);
		width: max-content;
		min-width: 120px;
		max-width: 260px;
		text-align: left;
		isolation: isolate;
	}

	[data-position="left"]:hover::after, [data-position="left"]:focus-visible::after {
		opacity: 1;
		visibility: visible;
		transform: translateY(-50%) translateX(0);
	}

	/* Narrow or touch screens: every tooltip shows as a bar along the bottom of the
	   window, so it can never run off the side of the screen */
	@media (max-width: 700px), (hover: none) {
		[data-tooltip]::after,
		[data-position]::after {
			position: fixed;
			top: auto;
			right: 12px;
			bottom: 12px;
			left: 12px;
			width: auto;
			min-width: 0;
			max-width: none;
			text-align: center;
			transform: translateY(6px);
		}

		[data-position]:hover::after, [data-position]:focus-visible::after {
			transform: translateY(0);
		}
	}

	/* ---------- 14. Footer ---------- */
	.site-footer {
		padding: 1.5rem 0 1.75rem;
		font-size: 0.88rem;
		color: var(--color-smoke);
		background-color: rgba(20, 20, 21, 0.78);
		border-top: 1px solid var(--hairline);
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
	}

	.footer-inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.4rem;
		text-align: center;
	}

	/* Items are spaced, not separated by characters, so whole items wrap cleanly on narrow screens */
	.footer-row {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.25rem 1.75rem;
	}

	.footer-row > span {
		white-space: nowrap;
	}

	.footer-clock {
		gap: 0.25rem 1rem;
		font-variant-numeric: tabular-nums;
	}

	.footer-logo {
		margin-bottom: 0.25rem;
		font-size: 1.6rem;
		color: var(--color-signal);
		text-decoration: none;
	}

	.footer-total {
		color: var(--color-ash);
		font-variant-numeric: tabular-nums;
	}

	.footer-author {
		color: var(--color-ash);
	}

	#site-total {
		display: inline-block;
	}

	.counter-bump {
		animation: counterBump 0.7s ease;
	}

	@keyframes counterBump {
		30% {
			transform: scale(1.2);
			color: var(--color-signal);
		}
	}

	/* ---------- 15. Page not found ---------- */
	.notfound {
		max-width: 560px;
		margin: 18vh auto 0;
	}

	.notfound-logo {
		display: inline-block;
		margin-bottom: 1.25rem;
		font-size: 2.8rem;
		color: var(--color-signal);
		text-decoration: none;
		text-shadow: 0 0 22px rgba(241, 83, 52, 0.45);
	}

	/* ---------- 16. Reduced motion ---------- */
	@media (prefers-reduced-motion: reduce) {
		*, *::before, *::after {
			transition-duration: 0.01ms !important;
			animation-duration: 0.01ms !important;
		}
	}

	/* ---------- 17. Print ---------- */
	@media print {
		body {
			color: #000000;
			background: #ffffff;
		}

		body::before, .site-nav, .sidenav, .sidenav-overlay, .site-footer, .search-card {
			display: none;
		}

		.card {
			background: none;
			border: none;
			box-shadow: none;
			backdrop-filter: none;
		}

		.results-term, .results-table td.col-acronym a {
			color: #000000;
		}
	}