/* Flight Deck Daily — global theme styles */

/* "Golden Age" palette — a tobacco-and-olive retro-aviation theme (leather
   flight jacket, aged paper, brass instrument faces), single theme, no
   light/dark mode (there never was one — theme-toggle.js only handles the
   mobile nav, despite its name). Variable NAMES are unchanged from the
   previous "Open Sky" navy scheme (--fdd-blue/--fdd-amber keep their
   existing role as primary/secondary accent) so every existing usage across
   the theme, every inline style in every template, and all JS-driven markup
   pick up the new palette automatically. --fdd-shadow is tobacco-tinted
   rather than flat black, matching the warm ground instead of a cold
   drop shadow. */
:root {
	--fdd-bg: #3A2410;
	--fdd-surface: #55321A;
	--fdd-surface-alt: #472913;
	--fdd-border: rgba(228, 224, 207, 0.14);
	--fdd-blue: #D1A54A;
	--fdd-blue-dark: #A67F2E;
	--fdd-blue-light: #DCC07A;
	--fdd-amber: #A3B35C;
	--fdd-amber-soft: #3A4512;
	--fdd-text: #E4E0CF;
	--fdd-text-muted: #BBA78C;
	--fdd-risk-low: #A8C27A;
	--fdd-risk-medium: #D1A54A;
	--fdd-risk-high: #F28B82;
	--fdd-shadow: rgba(20, 11, 4, 0.55);

	/* Fluid type scale (Zilla Slab): each step holds a rem floor/ceiling with
	   a small viewport-relative component in between, so sizes settle near
	   the floor on narrow screens and the ceiling on wide ones without a
	   separate breakpoint per step. */
	--fdd-step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.9375rem);
	--fdd-step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	--fdd-step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
	--fdd-step-head: clamp(2.25rem, 1.4rem + 3.8vw, 4.5rem);
}

body {
	font-family: "Zilla Slab", Georgia, "Times New Roman", serif;
	letter-spacing: 0;
	background-color: var(--fdd-bg);
	color: var(--fdd-text);
	font-size: var(--fdd-step-body);
	line-height: 1.5;
	transition: background-color 0.2s ease, color 0.2s ease;
}

input, select, textarea, button {
	font-family: inherit;
}

.fdd-fade-in {
	animation: fdd-fade-in 0.5s ease both;
}

@keyframes fdd-fade-in {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Reveal-on-scroll targets start hidden only once JS confirms it can
   animate them in (see home.js initReveal) — never hidden by default, so
   content is never stuck invisible if a script fails to run. */
.fdd-reveal.is-ready {
	opacity: 0;
	transform: translateY(20px);
}

.fdd-reveal.is-ready.is-visible {
	animation: fdd-fade-in 0.5s ease both;
}

/* Entrance for content as it renders — plain CSS, no JS/observer needed,
   since a CSS animation plays on any element matching the selector whether
   present at parse time or appended later. .fdd-card--live opts a card back
   OUT: it's for results that re-render on every user action (a flight
   search), where re-triggering an entrance animation each time would read
   as janky, not polished. */
.fdd-card:not(.fdd-card--live),
.fdd-spotter-badge,
.fdd-timeline-node,
.fdd-news-card,
[data-game-panel],
.fdd-radar-controls,
.fdd-radar-status,
.fdd-pano-controls {
	animation: fdd-fade-in 0.45s ease both;
}

#fdd-hangar-real.fdd-grid > .fdd-card:nth-child(2) { animation-delay: 70ms; }
#fdd-hangar-real.fdd-grid > .fdd-card:nth-child(3) { animation-delay: 140ms; }
#fdd-hangar-real.fdd-grid > .fdd-card:nth-child(4) { animation-delay: 210ms; }
#fdd-hangar-real.fdd-grid > .fdd-card:nth-child(n+5) { animation-delay: 280ms; }

.fdd-spotter-badge:nth-child(2) { animation-delay: 70ms; }
.fdd-spotter-badge:nth-child(3) { animation-delay: 140ms; }
.fdd-spotter-badge:nth-child(n+4) { animation-delay: 210ms; }

@media (prefers-reduced-motion: reduce) {
	.fdd-fade-in,
	.fdd-reveal.is-ready.is-visible,
	.fdd-card,
	.fdd-spotter-badge,
	.fdd-timeline-node,
	.fdd-news-card,
	[data-game-panel],
	.fdd-radar-controls,
	.fdd-radar-status,
	.fdd-pano-controls,
	.fdd-radar-detail {
		animation: none;
	}
	.fdd-reveal.is-ready {
		opacity: 1;
		transform: none;
	}
}

/* ---------- Sticky Header / Nav ---------- */
.fdd-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--fdd-surface);
}

.fdd-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 0.75rem 1.5rem;
	max-width: 1400px;
	margin: 0 auto;
}

.fdd-logo {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: inherit;
	font-weight: 600;
	font-size: 1.15rem;
	color: var(--fdd-text);
	text-decoration: none;
	letter-spacing: -0.01em;
}

.fdd-logo__text {
	white-space: nowrap;
}

/* ---------- Animated globe logo ----------
   A minimalist globe (ring + latitude/meridian guide lines) with a single
   great-circle flight arc drawn across it. The arc's dashes flow along the
   path and a small "aircraft" dot orbits the same path on a loop — two
   independent but synchronized animations standing in for "a plane
   following a flight path," built from pure SVG/CSS so it renders before
   any JS runs. */
.fdd-logo-globe {
	flex-shrink: 0;
	overflow: visible;
}

.fdd-logo-globe__ring {
	fill: none;
	stroke: var(--fdd-blue);
	stroke-width: 1.4;
	opacity: 0.9;
}

.fdd-logo-globe__lat,
.fdd-logo-globe__lon {
	fill: none;
	stroke: var(--fdd-blue);
	stroke-width: 1;
	opacity: 0.3;
}

.fdd-logo-globe__route {
	fill: none;
	stroke: var(--fdd-amber);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-dasharray: 3 4;
	animation: fdd-logo-route-flow 2.4s linear infinite;
}

.fdd-logo-globe__craft {
	fill: var(--fdd-amber);
	offset-path: path( "M7,32 Q24,4 41,20" );
	animation: fdd-logo-orbit 3.6s ease-in-out infinite;
}

@keyframes fdd-logo-route-flow {
	to { stroke-dashoffset: -14; }
}

@keyframes fdd-logo-orbit {
	0% { offset-distance: 0%; opacity: 0; }
	8% { opacity: 1; }
	92% { opacity: 1; }
	100% { offset-distance: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.fdd-logo-globe__route,
	.fdd-logo-globe__craft {
		animation: none;
	}
}

.fdd-nav {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
}

.fdd-nav ul {
	display: flex;
	gap: 1.1rem;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.fdd-nav a {
	display: inline-flex;
	align-items: center;
	color: var(--fdd-text-muted);
	text-decoration: none;
	font-size: 1rem;
	font-weight: 500;
	padding: 0.3rem 0.05rem;
	border-bottom: 2px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
	white-space: nowrap;
}

.fdd-nav a:hover {
	color: var(--fdd-blue);
}

.fdd-nav a.is-active {
	color: var(--fdd-blue-light);
	border-bottom-color: var(--fdd-amber);
}

.fdd-nav-toggle {
	display: none;
	background: none;
	border: 1px solid var(--fdd-border);
	color: var(--fdd-text);
	border-radius: 6px;
	padding: 0.4rem 0.6rem;
	cursor: pointer;
}

/* ---------- Contextual Banner ---------- */
.fdd-banner {
	position: relative;
	min-height: 280px;
	display: flex;
	align-items: flex-end;
	background: var(--fdd-surface);
	overflow: hidden;
}

.fdd-banner__art {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	opacity: 0.14;
}

.fdd-banner__art svg {
	width: 100%;
	height: 100%;
}

/* Secondary-page banners: a real archival photo instead of schematic line
   art, with a neutral scrim for text legibility (the one gradient the house
   style allows). Same `.fdd-banner` structure/classes as before. */
.fdd-banner__photo {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(0.55) sepia(0.3) contrast(1.05) brightness(0.75);
}

.fdd-banner__scrim {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(90deg, var(--fdd-bg) 0%, rgba(58, 36, 16, 0.75) 38%, rgba(58, 36, 16, 0.15) 100%);
}

.fdd-banner__content {
	position: relative;
	z-index: 1;
	padding: 2.5rem 1.5rem;
	max-width: 1400px;
	margin: 0 auto;
	width: 100%;
}

/* Used by history.js for the timeline detail panel's year badge (e.g.
   "1933") — not a hero eyebrow/kicker, so it's exempt from that ban; kept
   out of monospace and out of tracked caps regardless. */
.fdd-banner__eyebrow {
	color: var(--fdd-blue);
	font-weight: 600;
	font-size: var(--fdd-step-small);
}

.fdd-banner__title {
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--fdd-text);
	margin: 0.25rem 0 0.5rem;
}

.fdd-banner__subtitle {
	color: var(--fdd-text-muted);
	max-width: 60ch;
	font-size: var(--fdd-step-lead);
}

.fdd-banner--slim {
	min-height: 160px;
}

.fdd-banner--slim .fdd-banner__content {
	padding: 1.25rem 1.5rem;
}

/* ---------- Homepage hero: the boarding pass ----------
   "Page-is-the-object" direction: the hero is a vintage boarding-pass card
   pinned over a full-bleed archival photograph. On scroll it shrinks and
   docks bottom-left as a ticket stub — the signature move (motion.css
   handles the shrink via scroll-driven animation, progressively enhanced). */
.fdd-hero {
	position: relative;
	min-height: 92vh;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	overflow: hidden;
	background: var(--fdd-bg);
}

.fdd-hero__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.55) sepia(0.25);
}

.fdd-hero__photo-credit {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	z-index: 2;
	color: rgba(228, 224, 207, 0.7);
	font-size: 0.8125rem;
	text-decoration: none;
}

.fdd-hero__photo-credit:hover {
	color: var(--fdd-text);
}

.fdd-hero__card {
	position: sticky;
	top: 8vh;
	z-index: 1;
	width: min(640px, 88vw);
	background: var(--fdd-surface);
	border-radius: 6px;
	padding: 2.25rem 2rem 1.5rem;
	box-shadow: 0 30px 70px var(--fdd-shadow);
}

.fdd-hero__kicker {
	display: flex;
	justify-content: space-between;
	font-size: var(--fdd-step-small);
	color: var(--fdd-blue);
	margin-bottom: 1rem;
}

.fdd-hero__title {
	font-size: var(--fdd-step-head);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: var(--fdd-text);
	margin: 0 0 0.9rem;
}

.fdd-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.25rem;
	font-size: var(--fdd-step-small);
	color: var(--fdd-text-muted);
	margin-bottom: 0.9rem;
}

.fdd-hero__subtitle {
	color: var(--fdd-text-muted);
	max-width: 42ch;
	font-size: var(--fdd-step-body);
	margin: 0 0 1.5rem;
}

.fdd-hero__card-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1.25rem;
	border-top: 2px dotted var(--fdd-border);
	flex-wrap: wrap;
}

.fdd-hero__link {
	color: var(--fdd-text-muted);
	font-size: var(--fdd-step-small);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.fdd-hero__link:hover {
	color: var(--fdd-text);
}

@media (max-width: 782px) {
	.fdd-hero { min-height: 100svh; }
	.fdd-hero__card { top: 4vh; width: calc(100vw - 2rem); padding: 1.75rem 1.5rem 1.25rem; }
}


/* ---------- Cards / Surfaces ---------- */
.fdd-card {
	background: var(--fdd-surface);
	border-radius: 6px;
	padding: 1.75rem;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fdd-card > p {
	max-width: 52ch;
}

.fdd-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px var(--fdd-shadow);
}

/* ---------- Hangar 3D model viewers ---------- */
/* Our own fullscreen toggle, not the Sketchfab/model-viewer built-in one —
   see wrapWithFullscreen() in hangar.js for why: a visitor who fullscreens
   via the embed's own control has no way out on mobile (no Escape key). */
.fdd-model-viewer-wrap {
	position: relative;
	margin-bottom: 0.75rem;
}

.fdd-model-viewer-wrap:fullscreen,
.fdd-model-viewer-wrap:-webkit-full-screen {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
}

.fdd-model-viewer-wrap:fullscreen model-viewer,
.fdd-model-viewer-wrap:-webkit-full-screen model-viewer,
.fdd-model-viewer-wrap:fullscreen > div,
.fdd-model-viewer-wrap:-webkit-full-screen > div {
	width: 100%;
	height: 100%;
}

.fdd-model-fs-btn {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	z-index: 2;
	width: 2.25rem;
	height: 2.25rem;
	border: none;
	border-radius: 6px;
	background: var(--fdd-surface);
	color: var(--fdd-text);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px var(--fdd-shadow);
}

.fdd-model-fs-btn:hover {
	background: var(--fdd-surface-alt);
}

/* Only ever rendered while this wrapper itself is the fullscreen element —
   so it's always a visible descendant of whatever's painted, on any device. */
.fdd-model-fs-exit {
	display: none;
}

.fdd-model-viewer-wrap:fullscreen .fdd-model-fs-exit,
.fdd-model-viewer-wrap:-webkit-full-screen .fdd-model-fs-exit {
	display: block;
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 2;
	padding: 0.65rem 1.25rem;
	border: none;
	border-radius: 999px;
	background: var(--fdd-amber);
	color: var(--fdd-bg);
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* ---------- YouTube channel callout ---------- */
.fdd-youtube-cta {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	border-left: 4px solid #CC1F1F;
}

.fdd-youtube-cta__icon {
	flex: 0 0 auto;
	width: 3rem;
	height: 3rem;
	border-radius: 8px;
	background: #CC1F1F;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fdd-youtube-cta__icon svg {
	width: 1.5rem;
	height: 1.5rem;
	fill: #fff;
}

.fdd-youtube-cta__body {
	flex: 1 1 auto;
	min-width: 200px;
}

.fdd-youtube-cta__body h3 {
	margin: 0 0 0.2rem;
}

.fdd-youtube-cta__body p {
	margin: 0;
	color: var(--fdd-text-muted);
}

.fdd-youtube-cta__btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.7rem 1.4rem;
	border-radius: 4px;
	background: #CC1F1F;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.3s ease, transform 0.3s ease;
}

.fdd-youtube-cta__btn:hover {
	background: #A81919;
	transform: translateY(-2px);
	color: #fff;
}

@media (max-width: 640px) {
	.fdd-youtube-cta {
		flex-wrap: wrap;
	}
	.fdd-youtube-cta__btn {
		width: 100%;
		justify-content: center;
	}
}

.fdd-footer-youtube {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--fdd-risk-high);
	font-weight: 700;
}

.fdd-footer a.fdd-footer-youtube:hover { color: var(--fdd-risk-high); opacity: 0.8; }

.fdd-footer-youtube svg {
	width: 1rem;
	height: 1rem;
	fill: currentColor;
	flex: 0 0 auto;
}

/* ---------- Privacy policy ---------- */
.fdd-privacy {
	max-width: 72ch;
	margin: 0 auto;
	color: var(--fdd-text-muted);
	line-height: 1.6;
}

.fdd-privacy h2 {
	color: var(--fdd-blue);
	margin-top: 2.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--fdd-border);
}

.fdd-privacy h2:first-of-type {
	margin-top: 1.5rem;
	padding-top: 0;
	border-top: none;
}

.fdd-privacy h3 {
	color: var(--fdd-text);
	margin-top: 1.75rem;
}

.fdd-privacy ul,
.fdd-privacy ol {
	padding-left: 1.4rem;
}

.fdd-privacy li {
	margin-bottom: 0.5rem;
}

.fdd-privacy a {
	color: var(--fdd-amber);
}

.fdd-privacy-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
	margin: 1rem 0;
}

.fdd-privacy-table th,
.fdd-privacy-table td {
	border: 1px solid var(--fdd-border);
	padding: 0.6rem 0.75rem;
	text-align: left;
	vertical-align: top;
}

.fdd-privacy-table th {
	background: var(--fdd-surface-alt);
	color: var(--fdd-text);
}

/* ---------- Buttons ---------- */
.fdd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.8rem 1.8rem;
	border: 1px solid var(--fdd-amber);
	background: transparent;
	color: var(--fdd-text);
	border-radius: 4px;
	cursor: pointer;
	font-weight: 600;
	letter-spacing: 0;
	font-size: 1rem;
	font-family: inherit;
	text-decoration: none;
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.fdd-btn:hover {
	background: var(--fdd-amber);
	color: var(--fdd-bg);
	transform: translateY(-2px);
}

.fdd-btn--primary {
	background: var(--fdd-blue);
	border-color: var(--fdd-blue);
	color: var(--fdd-bg);
}

.fdd-btn--primary:hover {
	background: var(--fdd-blue-dark);
	border-color: var(--fdd-blue-dark);
	color: var(--fdd-bg);
	box-shadow: 0 8px 30px var(--fdd-shadow);
}

/* ---------- Section title underline ---------- */
.fdd-section-title {
	text-align: center;
	margin-bottom: 2rem;
}

.fdd-section-title h2,
.fdd-section-title h3 {
	color: var(--fdd-blue);
	margin-bottom: 0;
}

.fdd-section-title::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	background: var(--fdd-amber);
	margin: 0.9rem auto 0;
}

/* ---------- Stat / feature / team cards ---------- */
.fdd-stat-card,
.fdd-feature-card,
.fdd-team-card {
	background: var(--fdd-surface);
	border: 1px solid var(--fdd-border);
	border-radius: 14px;
	padding: 1.75rem;
	text-align: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fdd-stat-card:hover,
.fdd-feature-card:hover,
.fdd-team-card:hover {
	border-color: var(--fdd-blue);
	transform: translateY(-4px);
}

.fdd-stat-card .fdd-stat-card__value {
	font-size: 2.3em;
	font-weight: 900;
	color: var(--fdd-blue);
	margin-bottom: 0.1rem;
}

.fdd-stat-card .fdd-stat-card__label {
	color: var(--fdd-text-muted);
	font-size: 0.82em;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* ---------- Badges ---------- */
.fdd-badge {
	display: inline-block;
	padding: 0.3rem 0.85rem;
	border-radius: 50px;
	font-size: 0.8em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.fdd-badge--good { background: rgba(34, 197, 94, 0.15); color: var(--fdd-risk-low); }
.fdd-badge--warn { background: rgba(245, 158, 11, 0.15); color: var(--fdd-risk-medium); }
.fdd-badge--bad { background: rgba(239, 68, 68, 0.15); color: var(--fdd-risk-high); }

.fdd-mono {
	font-family: "Roboto Mono", monospace;
}

/* ---------- Ticket stubs: the homepage tool index ----------
   Replaces a generic icon-topped card row. Each stub is a torn ticket: a
   photograph above a dotted perforation, then the stub's own printed text
   below — one real picture per tool instead of a drawn icon. */
.fdd-stub-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1.5rem;
}

.fdd-stub {
	display: block;
	background: var(--fdd-surface);
	border-radius: 6px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fdd-stub:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px var(--fdd-shadow);
}

.fdd-stub__photo {
	display: block;
	width: 100%;
	height: 150px;
	object-fit: cover;
	filter: grayscale(0.65) sepia(0.35) contrast(1.05);
}

.fdd-stub__perf {
	height: 0;
	border-top: 2px dotted var(--fdd-border);
	margin: 0 1rem;
}

.fdd-stub__body {
	padding: 1.1rem 1.25rem 1.4rem;
}

.fdd-stub__label {
	display: block;
	font-size: var(--fdd-step-small);
	color: var(--fdd-blue-light);
	margin-bottom: 0.3rem;
}

.fdd-stub__title {
	color: var(--fdd-text);
	margin: 0 0 0.3rem;
	font-size: 1.1rem;
}

.fdd-stub__desc {
	color: var(--fdd-text-muted);
	font-size: 1rem;
	margin: 0;
}

.fdd-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.4rem 0.75rem;
	border-radius: 999px;
	font-size: 1rem;
	font-weight: 600;
	background: var(--fdd-surface-alt);
	border: 1px solid var(--fdd-border);
	color: var(--fdd-text-muted);
	cursor: pointer;
	user-select: none;
}

.fdd-pill.is-active {
	background: rgba(199, 154, 62, 0.15);
	border-color: var(--fdd-blue);
	color: var(--fdd-blue-light);
}

.fdd-risk {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.25rem 0.65rem;
	border-radius: 4px;
	font-size: 0.875rem;
	font-weight: 600;
}

.fdd-risk--low { background: rgba(79, 163, 58, 0.12); color: var(--fdd-risk-low); }
.fdd-risk--medium { background: rgba(232, 130, 79, 0.12); color: var(--fdd-risk-medium); }
.fdd-risk--high { background: rgba(227, 88, 79, 0.12); color: var(--fdd-risk-high); }

/* ---------- History Timeline ---------- */
.fdd-timeline-toolbar {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}

.fdd-timeline-node {
	position: relative;
	z-index: 1;
	background: none;
	border: none;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	width: 150px;
	flex-shrink: 0;
	color: var(--fdd-text);
	font-family: inherit;
	padding: 0;
}

.fdd-timeline-dot {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 3px solid var(--fdd-bg);
	opacity: 0.5;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.fdd-timeline-node:hover .fdd-timeline-dot {
	opacity: 0.8;
}

.fdd-timeline-dot.is-active {
	opacity: 1;
	transform: scale(1.3);
}

/* ---------- Trivia & Games ---------- */
.fdd-game-tabs {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.fdd-mode-tabs {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin: 0.75rem 0 1.25rem;
}

.fdd-clue-list {
	margin: 1rem 0;
	padding: 1rem;
	background: var(--fdd-surface-alt);
	border-radius: 8px;
}

/* ---------- Guess the Livery (tile-reveal) ---------- */
.fdd-livery-image-wrap {
	position: relative;
	width: 100%;
	height: 320px;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--fdd-border);
}

.fdd-livery-image-wrap img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.fdd-livery-tile {
	position: absolute;
	background: var(--fdd-surface-alt);
	transition: opacity 0.5s ease;
	opacity: 1;
}

.fdd-livery-tile.is-revealed {
	opacity: 0;
	pointer-events: none;
}

.fdd-livery-trail {
	display: flex;
	gap: 0.4rem;
	margin: 0.85rem 0;
	flex-wrap: wrap;
}

.fdd-livery-trail span {
	width: 30px;
	height: 30px;
	border-radius: 7px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	font-weight: 700;
	font-family: "Roboto Mono", monospace;
	background: var(--fdd-surface-alt);
	color: var(--fdd-text-muted);
}

.fdd-livery-trail span.is-wrong {
	background: rgba(239, 68, 68, 0.15);
	border-color: var(--fdd-risk-high);
	color: var(--fdd-risk-high);
}

.fdd-livery-trail span.is-correct {
	background: rgba(34, 197, 94, 0.15);
	border-color: var(--fdd-risk-low);
	color: var(--fdd-risk-low);
}

.fdd-autocomplete {
	position: relative;
}

.fdd-suggestions {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 20;
	background: var(--fdd-surface);
	border: 1px solid var(--fdd-border);
	border-radius: 8px;
	margin-top: 0.3rem;
	max-height: 220px;
	overflow-y: auto;
	box-shadow: 0 8px 24px var(--fdd-shadow);
}

.fdd-suggestions button {
	display: block;
	width: 100%;
	text-align: left;
	padding: 0.55rem 0.9rem;
	background: none;
	border: none;
	color: var(--fdd-text);
	cursor: pointer;
	font-family: inherit;
	font-size: 1rem;
}

.fdd-suggestions button:hover,
.fdd-suggestions button.is-active {
	background: var(--fdd-surface-alt);
	color: var(--fdd-blue);
}

.fdd-share p {
	white-space: pre-line;
	background: var(--fdd-surface-alt);
	border-radius: 8px;
	padding: 0.75rem 1rem;
	font-size: 1rem;
	margin: 0 0 0.75rem;
}

/* ---------- Layover (route-building) ---------- */
.fdd-layover-challenges {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0.85rem 1rem;
	background: var(--fdd-surface-alt);
	border-radius: 8px;
	font-size: 1rem;
}

.fdd-layover-challenges li {
	padding: 0.25rem 0;
	color: var(--fdd-text-muted);
}

.fdd-layover-challenges li.is-correct {
	color: var(--fdd-risk-low);
}

.fdd-layover-challenges li.is-wrong {
	color: var(--fdd-text-muted);
	text-decoration: line-through;
}

.fdd-layover-trail {
	font-family: "Roboto Mono", monospace;
	font-size: 1rem;
	margin-bottom: 0.85rem;
}

/* ---------- Virtual cockpit pano ---------- */
.fdd-pano-page {
	position: relative;
	height: calc(100vh - 65px - 90px);
	min-height: 420px;
	width: 100%;
}

#fdd-pano {
	position: absolute;
	inset: 0;
	background: var(--fdd-bg);
}

.fdd-pano-controls {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 10;
	background: var(--fdd-surface);
	border-radius: 10px;
	padding: 1rem;
	max-width: 280px;
}

.fdd-hangar-highlight {
	outline: 2px solid var(--fdd-blue);
	outline-offset: 2px;
	transition: outline-color 0.3s ease;
}

/* ---------- Spotter Hub badges ---------- */
/* A stacked strip of medal rows, not a grid of identical icon-topped cards:
   each earned/unearned badge reads as one line (icon, name + status) rather
   than a repeated tile. */
.fdd-badge-strip {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.fdd-spotter-badge {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	background: var(--fdd-surface-alt);
	border-radius: 8px;
	padding: 0.75rem 0.9rem;
	opacity: 0.55;
	filter: grayscale(0.6);
	transition: opacity 0.3s ease, filter 0.3s ease, background-color 0.3s ease;
}

.fdd-spotter-badge.is-earned {
	opacity: 1;
	filter: none;
	background: var(--fdd-amber-soft);
}

.fdd-spotter-badge__icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--fdd-surface);
	color: var(--fdd-text-muted);
}

.fdd-spotter-badge__icon.is-earned {
	background: var(--fdd-blue);
	color: var(--fdd-bg);
}

.fdd-spotter-badge__text {
	min-width: 0;
}

.fdd-spotter-badge__name {
	font-weight: 700;
	font-size: 1rem;
	color: var(--fdd-text);
}

.fdd-spotter-badge__desc {
	font-size: 0.875rem;
	color: var(--fdd-text-muted);
	margin-top: 0.1rem;
}

.fdd-spotter-badge.is-earned .fdd-spotter-badge__desc {
	color: var(--fdd-risk-low);
	font-weight: 700;
}

.fdd-spotter-badge__progress {
	font-size: 0.875rem;
	color: var(--fdd-blue);
	margin-top: 0.4rem;
}

/* ---------- News cards (expand-in-place) ---------- */
.fdd-news-card {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	margin-bottom: 1rem;
}

.fdd-news-card__media {
	width: 120px;
	height: 80px;
	object-fit: cover;
	border-radius: 6px;
	flex-shrink: 0;
}

.fdd-news-card__media--placeholder {
	background: var(--fdd-surface-alt);
	display: flex;
	align-items: center;
	justify-content: center;
}

.fdd-news-card__body {
	flex: 1;
	min-width: 0;
}

.fdd-news-card__toggle {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	color: var(--fdd-text);
	font-size: 1rem;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
}

.fdd-news-card__toggle:hover,
.fdd-news-card__toggle:focus-visible {
	color: var(--fdd-blue);
}

.fdd-news-card__summary {
	color: var(--fdd-text-muted);
	font-size: 1rem;
	margin: 0.3rem 0;
}

.fdd-news-card__full {
	margin-top: 1.25rem;
	line-height: 1.6;
}

.fdd-news-card__full img,
.fdd-news-card__full iframe {
	max-width: 100%;
}

.fdd-news-card__source {
	font-size: 0.875rem;
	color: var(--fdd-text-muted);
	text-decoration: none;
}

.fdd-news-card__source:hover {
	color: var(--fdd-blue);
}

/* ---------- Breaking-news ticker ---------- */
.fdd-ticker {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background: var(--fdd-surface-alt);
	padding: 0.5rem 1.25rem;
	overflow: hidden;
}

.fdd-ticker__label {
	flex-shrink: 0;
	background: var(--fdd-amber);
	color: var(--fdd-bg);
	font-weight: 700;
	font-size: 0.875rem;
	padding: 0.2rem 0.6rem;
	border-radius: 4px;
}

.fdd-ticker__track {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
}

/* Two identical halves placed side by side (see home.js); animating to
   -50% lines the second half up exactly where the first started, giving
   a seamless infinite scroll with no visible jump or restart. */
.fdd-ticker__marquee {
	display: inline-flex;
	animation: fdd-ticker-scroll linear infinite;
	animation-duration: var(--fdd-ticker-duration, 30s);
}

.fdd-ticker:hover .fdd-ticker__marquee,
.fdd-ticker:focus-within .fdd-ticker__marquee {
	animation-play-state: paused;
}

.fdd-ticker__half {
	display: inline-flex;
	flex-shrink: 0;
}

.fdd-ticker__item {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	color: var(--fdd-text);
	text-decoration: none;
	font-size: 1rem;
	padding-right: 2.5rem;
}

.fdd-ticker__item::after {
	content: "•";
	color: var(--fdd-text-muted);
	margin-left: 2.5rem;
}

.fdd-ticker__item:hover {
	color: var(--fdd-blue);
}

@keyframes fdd-ticker-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

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

/* ---------- Footer ---------- */
.fdd-footer {
	background: var(--fdd-surface);
	padding: 3rem 1.5rem 1.5rem;
	margin-top: 3rem;
}

.fdd-footer__inner {
	max-width: 1400px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 2rem;
}

.fdd-footer h4 {
	color: var(--fdd-text);
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 0.75rem;
}

.fdd-footer a {
	color: var(--fdd-text-muted);
	text-decoration: none;
	font-size: 1rem;
	display: block;
	margin-bottom: 0.5rem;
}

.fdd-footer a:hover { color: var(--fdd-blue); }

.fdd-footer__bottom {
	max-width: 1400px;
	margin: 2.5rem auto 0;
	color: var(--fdd-text-muted);
	font-size: 1rem;
}

.fdd-footer__bottom p {
	max-width: 56ch;
}

.fdd-footer__bottom a {
	display: inline;
	margin-bottom: 0;
	font-size: inherit;
}

/* ---------- Live Flight Radar page ---------- */
.fdd-radar-page {
	position: relative;
	height: calc(100vh - 65px - 90px);
	min-height: 420px;
	width: 100%;
}

#fdd-map {
	position: absolute;
	inset: 0;
	background: var(--fdd-bg);
}

/* OpenFreeMap ships light styles only; invert + hue-rotate approximates a
   dark cockpit map to match the theme without needing a paid dark style. */
#fdd-map .maplibregl-canvas {
	filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.9) saturate(0.7);
}

#fdd-map .maplibregl-popup {
	filter: none;
}

/* MapLibre's own stylesheet puts a resting box-shadow on its zoom/attribution
   control groups — override to the flat-surface convention used everywhere
   else on the map. */
#fdd-map .maplibregl-ctrl-group {
	box-shadow: none;
	background: var(--fdd-surface);
}

/* MapLibre's own stylesheet sets its UI chrome (attribution, popups) in the
   browser's default sans stack rather than inheriting the page font, and its
   attribution control defaults to 12px, under this site's 13px floor. */
#fdd-map .maplibregl-ctrl,
#fdd-map .maplibregl-popup {
	font-family: inherit;
}

#fdd-map .maplibregl-ctrl-attrib {
	font-size: 0.8125rem;
}

/* ---------- Route maps (Getaway, Layover, Weather plotter, Guess the Routes) ----------
   A distinct "vintage atlas" treatment, separate from Live Radar's dark
   instrument-panel map: these are planning/exploration tools, not a live
   tracker, so OpenFreeMap's own light tiles stay light, just warmed toward
   parchment instead of inverted to navy. */
.fdd-route-map {
	position: relative;
	height: 340px;
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 1rem;
	background: var(--fdd-surface-alt);
}

.fdd-route-map .maplibregl-canvas {
	filter: sepia(0.6) saturate(0.55) brightness(0.95) contrast(1.08) hue-rotate(-8deg);
}

.fdd-route-map .maplibregl-ctrl-group {
	box-shadow: none;
	background: var(--fdd-surface);
}

.fdd-route-map .maplibregl-ctrl,
.fdd-route-map .maplibregl-popup {
	font-family: inherit;
}

.fdd-route-map .maplibregl-ctrl-attrib {
	font-size: 0.8125rem;
}

.fdd-route-map .maplibregl-popup-content {
	background: var(--fdd-surface);
	color: var(--fdd-text);
	box-shadow: 0 8px 24px var(--fdd-shadow);
	border-radius: 6px;
	font-size: 0.9375rem;
	padding: 0.5rem 0.75rem;
}

.fdd-route-map .maplibregl-popup-tip {
	border-top-color: var(--fdd-surface);
	border-bottom-color: var(--fdd-surface);
}

.fdd-map-pin {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--fdd-amber);
	border: 2px solid var(--fdd-bg);
	box-shadow: 0 1px 4px var(--fdd-shadow);
}

.fdd-map-pin--origin,
.fdd-map-pin--hub {
	width: 20px;
	height: 20px;
	background: var(--fdd-blue);
	border-width: 3px;
}

.fdd-map-pin--option:hover {
	transform: scale(1.25);
}

.fdd-radar-controls {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	background: var(--fdd-surface);
	border-radius: 10px;
	padding: 1rem;
	max-width: 280px;
}

.fdd-radar-controls__row {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.fdd-radar-filters-toggle {
	display: none;
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 11;
	background: var(--fdd-surface);
	border-radius: 4px;
	padding: 0.5rem 0.9rem;
	font-size: 1rem;
	color: var(--fdd-text);
	cursor: pointer;
}

.fdd-radar-status {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	z-index: 10;
	background: var(--fdd-surface);
	border-radius: 4px;
	padding: 0.5rem 0.9rem;
	font-size: 1rem;
	color: var(--fdd-text-muted);
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.fdd-radar-status__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--fdd-risk-low);
}

.fdd-radar-detail {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 10;
	background: var(--fdd-surface);
	border-radius: 10px;
	padding: 1rem 1.25rem;
	max-width: 300px;
	box-shadow: 0 8px 24px var(--fdd-shadow);
	animation: fdd-fade-in 0.35s ease both;
}

.fdd-radar-detail__close {
	position: absolute;
	top: 0.5rem;
	right: 0.65rem;
	background: none;
	border: none;
	color: var(--fdd-text-muted);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
}

.fdd-radar-detail__close:hover {
	color: var(--fdd-text);
}

.fdd-radar-detail dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.3rem 0.75rem;
	margin: 0.5rem 0 0;
	font-size: 1rem;
}

.fdd-radar-detail dt {
	color: var(--fdd-text-muted);
}

.fdd-plane-tooltip {
	background: var(--fdd-surface);
	border-radius: 8px;
	padding: 0.75rem 1rem;
	font-size: 1rem;
	color: var(--fdd-text);
	min-width: 200px;
	box-shadow: 0 8px 24px var(--fdd-shadow);
}

.fdd-plane-tooltip h4 {
	margin: 0 0 0.35rem;
	color: var(--fdd-blue);
	font-family: "Roboto Mono", monospace;
	font-size: 0.95rem;
}

.fdd-plane-tooltip dl {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.15rem 0.75rem;
}

.fdd-plane-tooltip dt { color: var(--fdd-text-muted); }
.fdd-plane-tooltip dd { margin: 0; font-family: "Roboto Mono", monospace; }

input[type="range"] {
	accent-color: var(--fdd-blue);
	width: 100%;
}

/* ---------- Utility ---------- */
.fdd-grid {
	display: grid;
	gap: 1.5rem;
}

.fdd-grid--1 { grid-template-columns: 1fr; }
.fdd-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.fdd-grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.fdd-grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.fdd-loading {
	color: var(--fdd-text-muted);
	font-size: 1rem;
	padding: 2rem;
	text-align: center;
}

/* ---------- Interaction feedback ----------
   Elements at rest carry no shadow or glow — a flat surface plus a tone or
   border step does the work above. Shadow/glow is reserved for genuine
   overlays (the autocomplete dropdown, the radar detail panel, both
   elsewhere) and as momentary feedback on press/hover, never as a resting
   decoration. */
.fdd-card:hover {
	box-shadow: 0 16px 40px var(--fdd-shadow);
}

.fdd-btn:hover {
	box-shadow: 0 0 0 1px var(--fdd-amber);
}

.fdd-btn--primary:hover {
	box-shadow: 0 0 0 1px var(--fdd-blue-dark);
}

.fdd-stat-card:hover,
.fdd-feature-card:hover,
.fdd-team-card:hover {
	box-shadow: 0 16px 40px var(--fdd-shadow);
}

/* ---------- Responsive ---------- */
@media (max-width: 782px) {
	.fdd-nav-toggle { display: inline-flex; }
	.fdd-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--fdd-bg);
		border-bottom: 1px solid var(--fdd-border);
		flex-direction: column;
		align-items: flex-start;
		padding: 1rem 1.5rem;
		display: none;
	}
	.fdd-nav.is-open { display: flex; }
	.fdd-nav ul { flex-direction: column; gap: 0.75rem; width: 100%; }

	/* The filters panel otherwise covers the entire map on narrow screens —
	   collapse it behind a toggle and cap its height so even open it never
	   fills the whole radar view. */
	.fdd-radar-filters-toggle { display: inline-flex; }
	.fdd-radar-controls {
		display: none;
		max-width: calc(100% - 2rem);
		max-height: calc(100% - 5rem);
		overflow-y: auto;
		top: 4rem;
	}
	.fdd-radar-controls.is-open { display: flex; }
}