/* =========================================================================
   Launch Countdown Live
   Layer order fixes specificity fights up front: anything in a later layer
   beats an earlier one regardless of selector weight.
   ========================================================================= */
@layer reset, tokens, base, layout, components, utilities;

/* Cross-document view transitions between the static pages. Ignored where
   unsupported, so navigation just stays instant. */
@view-transition {
	navigation: auto;
}

@layer tokens {
	:root {
		color-scheme: dark;

		/* Brand palette (unchanged hex values, semantic names) */
		--primary: #3b94b0;
		--white: #fff;
		--light: #c6d3e6;
		--dark: #070707;
		--brand1: #d6f6ff;
		--brand2: #bef1ff;
		--brand3: #e6b497;

		/* Derived tones, mixed rather than hardcoded as alpha hex */
		--surface: color-mix(in srgb, var(--light) 8%, transparent);
		--border: color-mix(in srgb, var(--light) 18%, transparent);
		--border-strong: color-mix(in srgb, var(--light) 38%, transparent);
		--muted: color-mix(in srgb, var(--light) 65%, transparent);

		/* Fluid type scale, ~1.25 ratio, 20rem -> 80rem viewport.
		   All rem-based so it honours the user's browser font size. */
		--text-sm: clamp(0.83rem, 0.06vi + 0.82rem, 0.89rem);
		--text-base: clamp(1rem, 0.13vi + 0.97rem, 1.13rem);
		--text-md: clamp(1.2rem, 0.25vi + 1.14rem, 1.42rem);
		--text-lg: clamp(1.44rem, 0.44vi + 1.33rem, 1.78rem);
		--text-xl: clamp(1.73rem, 0.73vi + 1.55rem, 2.25rem);
		--text-display: clamp(2.5rem, 2.2vi + 1.95rem, 3.75rem);

		/* Fluid space scale */
		--space-3xs: clamp(0.25rem, 0.1vi + 0.23rem, 0.31rem);
		--space-2xs: clamp(0.5rem, 0.2vi + 0.46rem, 0.63rem);
		--space-xs: clamp(0.75rem, 0.3vi + 0.69rem, 0.94rem);
		--space-sm: clamp(1rem, 0.4vi + 0.92rem, 1.25rem);
		--space-md: clamp(1.5rem, 0.6vi + 1.38rem, 1.88rem);
		--space-lg: clamp(2rem, 1.2vi + 1.76rem, 2.75rem);
		--space-xl: clamp(3rem, 2.4vi + 2.52rem, 4.5rem);
		--space-2xl: clamp(4rem, 4.8vi + 3.04rem, 7rem);
		--space-3xl: clamp(5rem, 8vi + 3.4rem, 10rem);

		/* Layout */
		--gutter: clamp(1rem, 4vw, 2.5rem);
		--shell-max: 72rem;
		--prose-max: 65ch;

		/* Widest glyph in each face, measured: Orbitron "0" is 0.834em,
		   Space Mono is uniform at 0.612em */
		--digit-advance: 0.84em;
		--digit-advance-mono: 0.62em;

		--ease: cubic-bezier(0.2, 0, 0.1, 1);
		--speed: 200ms;
	}
}

@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	/* Margins come from the layout, never from element defaults */
	body,
	h1, h2, h3, h4,
	p, dl, dd, ol, ul,
	figure {
		margin: 0;
	}

	ol[class],
	ul[class] {
		list-style: none;
		padding-inline-start: 0;
	}

	img,
	picture,
	svg {
		display: block;
		max-width: 100%;
		height: auto;
	}

	/* Standard properties only; color-scheme handles the rest */
	* {
		scrollbar-width: thin;
		scrollbar-color: #444 #2e2e2e;
	}

	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
			scroll-behavior: auto !important;
		}

		@view-transition {
			navigation: none;
		}
	}
}

@layer base {
	body {
		background: var(--dark);
		color: var(--white);
		font-family: "Space Mono", monospace;
		font-size: var(--text-base);
		line-height: 1.6;
		min-height: 100svh;
		-webkit-font-smoothing: antialiased;
	}

	body.homepage {
		background:
			linear-gradient(to bottom, transparent 55%, var(--dark) 90%),
			url("img/bg.webp") no-repeat top center,
			var(--dark);
		/* Caps the art on ultrawide screens instead of letting it scale forever */
		background-size: auto, min(95%, 64rem) auto, auto;
		/* Only the artwork screens against the near-black base (that is what
		   hides its own black backdrop); the gradient composites normally on
		   top so it can actually fade the art out */
		background-blend-mode: normal, screen, normal;
	}

	h1, h2, h3,
	.eyebrow,
	#logo,
	#countdown {
		font-family: "Orbitron", sans-serif;
		font-weight: 700;
		font-optical-sizing: auto;
		line-height: 1.1;
		text-wrap: balance;
	}

	p {
		text-wrap: pretty;
		max-width: var(--prose-max);
	}

	strong {
		font-weight: 700;
	}

	a {
		color: var(--primary);
		text-decoration: none;
		/* Specific properties, not `all` */
		/* outline-color is deliberately not transitioned — a focus ring must
		   appear instantly, not fade in from the element's current colour */
		transition:
			color var(--speed) var(--ease),
			background-color var(--speed) var(--ease),
			opacity var(--speed) var(--ease);

		&:hover {
			color: var(--light);
		}
	}

	/* Visible ring for keyboard users only; hover no longer stands in for focus */
	:focus-visible {
		outline: 2px solid var(--brand2);
		outline-offset: 3px;
		border-radius: 2px;
	}

	:focus:not(:focus-visible) {
		outline: none;
	}
}

@layer layout {
	.page {
		max-width: var(--shell-max);
		margin-inline: auto;
		padding-inline: var(--gutter);
		/* Deliberately tight at the top — the logo sits close to the edge */
		padding-block: clamp(0.625rem, 1.2vw, 1.25rem) var(--space-2xl);
	}

	header {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		gap: var(--space-sm);
		margin-block-end: var(--space-xl);
	}

	main {
		display: block;
	}

	footer {
		margin-block-start: var(--space-3xl);
		padding-block-start: var(--space-lg);
		border-block-start: 1px solid var(--border);
		color: var(--muted);
		font-size: var(--text-sm);

		& h2 {
			font-size: var(--text-md);
			color: var(--light);
			margin-block-end: var(--space-xs);
		}

		& p + p {
			margin-block-start: var(--space-sm);
		}

		/* Links inside prose need more than colour to be distinguishable */
		& p a {
			text-decoration: underline;
			text-underline-offset: 0.2em;
			text-decoration-thickness: 1px;
		}
	}
}

@layer components {
	/* ---------- Logo ---------- */
	#logo {
		display: flex;
		align-items: center;
		gap: var(--space-xs);
		color: var(--brand1);
		font-size: var(--text-md);
		line-height: 1.15;

		& img {
			width: clamp(2.25rem, 4vw, 3.25rem);
			height: auto;
		}

		& span:nth-of-type(1) {
			color: var(--brand2);
		}

		& span:nth-of-type(2) {
			color: var(--brand3);
		}

		&:hover {
			color: var(--white);
		}
	}

	/* Stacks the wordmark on small screens without a separate breakpoint
	   for type sizing */
	@media (width < 40rem) {
		#logo div {
			display: flex;
			flex-direction: column;
			font-size: var(--text-sm);
			text-transform: uppercase;
			letter-spacing: 0.2em;
			line-height: 1.3;
		}
	}

	nav a {
		font-size: var(--text-sm);
		font-weight: 400;
		text-transform: uppercase;
		letter-spacing: 0.12em;
		color: var(--light);

		&:hover {
			color: var(--white);
		}
	}

	/* ---------- Section headings ---------- */
	.eyebrow,
	#upcoming-launches > h2 {
		max-width: none;
		font-size: var(--text-base);
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.15em;
		color: var(--light);
	}

	/* ---------- Featured launch ---------- */
	#next-launch {
		display: grid;
		gap: var(--space-md);
		margin-block: var(--space-xl) var(--space-2xl);

		& h1 {
			font-size: var(--text-display);
			letter-spacing: -0.01em;
			overflow-wrap: anywhere;
		}

		& dl {
			display: grid;
			grid-template-columns: auto 1fr;
			gap: var(--space-2xs) var(--space-sm);
			width: fit-content;
			font-size: var(--text-sm);
		}

		& dt {
			color: var(--muted);
		}

		& dd {
			font-weight: 700;
			color: var(--white);
		}
	}

	/* The two-column hero needs real room: below 60rem the title wraps and the
	   metadata values break, so it stays stacked until then */
	@media (width >= 60rem) {
		#next-launch {
			grid-template-areas:
				"heading  heading"
				"title    title"
				"metadata countdown"
				"links    countdown";
			grid-template-columns: minmax(0, 1fr) auto;
			align-items: start;
			gap: var(--space-md) var(--space-xl);
			margin-block: var(--space-2xl) var(--space-3xl);
		}

		#next-launch .eyebrow { grid-area: heading; }
		#next-launch h1 { grid-area: title; }
		#next-launch dl { grid-area: metadata; }
		/* The links row is the flex wrapper itself, not its anchors —
		   this is what the old `#next-launch a { grid-area: links }` missed */
		#next-launch #links { grid-area: links; }
		.hero-countdown { grid-area: countdown; align-self: center; }
	}

	/* ---------- Featured launch: links ---------- */
	#links {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-sm) var(--space-md);
		margin-block-start: var(--space-2xs);

		& a:first-child {
			background: var(--primary);
			/* Dark on teal is 5.8:1; white on teal is only 3.47:1, which fails
			   WCAG AA at this text size */
			color: var(--dark);
			padding: var(--space-xs) var(--space-md);
			font-weight: 700;
			text-transform: uppercase;
			letter-spacing: 0.05em;
			font-size: var(--text-sm);

			&:hover {
				background: var(--light);
				color: var(--dark);
			}
		}

		/* Emoji have no glyph in Orbitron/Space Mono and fall back to tofu,
		   so the external-link arrow is drawn instead of typed */
		& a.external::after {
			content: "";
			display: inline-block;
			width: 0.75em;
			height: 0.75em;
			margin-inline-start: 0.5em;
			translate: 0 0.1em;
			background: currentColor;
			--arrow: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M2.2 7.8 7.8 2.2M4.2 2.2h3.6v3.6" fill="none" stroke="black" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>');
			-webkit-mask: var(--arrow) center / contain no-repeat;
			mask: var(--arrow) center / contain no-repeat;
		}

		& a:nth-child(2)::after {
			content: "";
			display: inline-block;
			margin-inline-start: 0.5em;
			/* Chevron drawn in CSS rather than a stray ">" character
			   that screen readers announce */
			border-inline-end: 2px solid currentColor;
			border-block-start: 2px solid currentColor;
			width: 0.4em;
			height: 0.4em;
			rotate: 45deg;
			translate: 0 -0.05em;
		}
	}

	/* ---------- Countdown ---------- */
	#countdown {
		display: grid;
		/* Four across when there is room, 2x2 when there isn't —
		   no breakpoint needed */
		grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
		gap: var(--space-md) var(--space-sm);
		font-variant-numeric: tabular-nums;
		margin-block-start: var(--space-sm);

		& > * {
			display: grid;
			gap: var(--space-3xs);
		}

		& .value {
			font-size: var(--text-display);
			line-height: 1;
			letter-spacing: -0.02em;
		}

		/* Grid blockifies this anyway, but state it so the swapped-in custom
		   element is guaranteed to fill its cell and honour text-align */
		& number-flow {
			display: block;
		}

		/* Orbitron has no tabular figures, so font-variant-numeric cannot help
		   here — "1" is under half the width of "0". Pinning NumberFlow's digit
		   part to the widest glyph gives genuinely monospaced digits. */
		& number-flow::part(digit) {
			width: var(--digit-advance);
			text-align: center;
		}

		& .label {
			font-size: var(--text-sm);
			font-family: "Space Mono", monospace;
			font-weight: 400;
			text-transform: uppercase;
			letter-spacing: 0.15em;
			color: var(--muted);
		}
	}

	@media (width >= 60rem) {
		#countdown {
			/* Explicit column flow — auto-fit has no width to work with inside
			   an auto-sized grid track and would stack to one per row */
			grid-template-columns: none;
			grid-auto-flow: column;
			justify-self: end;
			align-self: center;
			text-align: end;
			gap: var(--space-lg);
			margin-block-start: 0;
		}
	}

	/* ---------- Upcoming launches ---------- */
	#upcoming-launches {
		container-type: inline-size;

		& > h1,
		& > h2 {
			margin-block-end: var(--space-md);
		}

		& > h1 {
			font-size: var(--text-xl);
		}

		& ol {
			display: grid;
			gap: var(--space-3xs);
		}
	}

	.launch-item {
		/* min() guarantees the outdent never exceeds the page gutter, so the
		   negative margin can't cause horizontal overflow */
		--item-pad: min(var(--space-sm), calc(var(--gutter) * 0.75));
		display: grid;
		grid-template-areas:
			"name chevron"
			"when chevron";
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: var(--space-3xs) var(--space-sm);
		padding: var(--item-pad);
		/* Outdent the hover box by exactly its own padding so the text inside
		   lines up flush with the section heading above it */
		margin-inline: calc(var(--item-pad) * -1);
		border-radius: 4px;
		color: inherit;

		&:hover,
		&:focus-visible {
			background: var(--surface);
			box-shadow: 0 0 0 1px var(--border-strong);
		}

		&:hover .launch-name,
		&:focus-visible .launch-name,
		&:hover .launch-time,
		&:focus-visible .launch-time {
			color: var(--white);
		}

		&:hover::after,
		&:focus-visible::after {
			opacity: 1;
			translate: 2px 0;
		}

		/* Chevron, matching the featured-launch one */
		&::after {
			content: "";
			grid-area: chevron;
			width: 0.45em;
			height: 0.45em;
			border-inline-end: 2px solid var(--light);
			border-block-start: 2px solid var(--light);
			rotate: 45deg;
			opacity: 0.5;
			transition:
				opacity var(--speed) var(--ease),
				translate var(--speed) var(--ease);
		}
	}

	.launch-headline {
		grid-area: name;
		display: grid;
		gap: var(--space-3xs);
		min-width: 0;
	}

	.launch-name {
		font-size: var(--text-base);
		line-height: 1.4;
		text-wrap: pretty;
		color: var(--light);
	}

	.launch-operator {
		font-size: var(--text-sm);
		color: var(--muted);
	}

	.launch-when {
		grid-area: when;
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: var(--space-2xs) var(--space-sm);
		font-size: var(--text-sm);
	}

	.launch-time {
		color: var(--light);
		font-variant-numeric: tabular-nums;
		white-space: nowrap;
	}

	.launch-time number-flow::part(digit) {
		width: var(--digit-advance-mono);
		text-align: center;
	}

	.launch-date {
		color: var(--muted);
	}

	/* Container query, not a viewport one: the row reflows based on the space
	   the list actually has, so it stays correct if it's ever put in a sidebar */
	@container (width >= 34rem) {
		.launch-item {
			grid-template-areas: "name when chevron";
			grid-template-columns: minmax(0, 1fr) auto auto;
			gap: var(--space-md);
		}

		.launch-when {
			justify-content: end;
			gap: var(--space-md);
		}
	}
}

@layer utilities {
	/* Trims the nav label on narrow screens, matching the layout breakpoint */
	@media (width < 40rem) {
		.wide-only {
			display: none;
		}
	}
}
/* Data-driven mission pages share the original visual design. */
.mission-details { max-width: 70ch; margin-block: 3rem; }
.mission-description { white-space: pre-line; }
.view-all-launches { margin-block-start: var(--space-lg); }
.mission-details > h2 { font-size: var(--text-lg); margin-block-end: var(--space-sm); }
.mission-description { color: var(--light); line-height: 1.8; }
.mission-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-lg);
	margin-block: var(--space-lg);
	padding-block: var(--space-lg);
	border-block: 1px solid var(--border);
}
.mission-facts dt { color: var(--muted); font-size: var(--text-sm); margin-block-end: var(--space-2xs); }
.mission-facts dd { color: var(--light); overflow-wrap: anywhere; }
.mission-window { grid-column: 1 / -1; }
.mission-window a { text-decoration: underline; text-underline-offset: 0.25em; }
.mission-window time { display: inline-block; }
.mission-details > .livestream-heading { margin-block-start: var(--space-xl); }
@media (width < 40rem) {
	.mission-facts { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
}
/* Keep the shared header steady and carry matching mission titles between pages.
   UUID-based names are unique on each page, including the homepage feature. */
#logo { view-transition-name: site-logo; }
header nav { view-transition-name: site-navigation; }
::view-transition-group(*) { animation-duration: 220ms; animation-timing-function: ease-out; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 180ms; }
@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) { animation: none !important; }
}
.launch-headline, .launch-when { min-width: 0; }
.launch-name, .launch-operator, .launch-date { overflow-wrap: anywhere; }
[data-freshness] { color: #ffc966; }
.hero-countdown { min-width: 0; }
.countdown-note { color: var(--muted); font-size: var(--text-sm); margin-bottom: var(--space-xs); }