/**
 * Space Launch Live — 3D Probe Tracker styles
 *
 * Design decision: the 3D canvas stays DARK in both dark and light site themes.
 * Space is dark — forcing a white background would make planets/stars invisible
 * and look wrong. The HUD floats as dark-glass cards in both modes. A gradient
 * fade at the top/bottom of the view softens the transition into the surrounding
 * light-mode page.
 */

/* ── full-bleed wrapper ── */

.sll-probe-view,
.sll-lr-view {
	/* The view is emitted OUTSIDE .sll-content (which has max-width: 1100px),
	   so `width: 100%` here gives us the full-width block container. No JS tricks. */
	position: relative;
	width: 100%;
	margin: 0 0 24px;
	background: linear-gradient(180deg, #000408 0%, #03081a 100%);
	border-top: 1px solid rgba(74, 176, 255, 0.18);
	border-bottom: 1px solid rgba(74, 176, 255, 0.28);
	overflow: hidden;
	min-height: 72vh;
}

.sll-probe-view__inner,
.sll-lr-view__inner {
	position: relative;
	width: 100%;
	height: 72vh;
	min-height: 520px;
	overflow: hidden;
}

/* Lander/rover archive view uses the same toggle + pane machinery as the
   probe archive, plus an overlaid body switcher. The switcher floats below
   the 2D/3D toggle so users can pick a planet without losing either pane. */
.sll-lr-view__twod {
	position: absolute;
	inset: 0;
	display: none;
	padding: 80px 20px 20px; /* make room for floating mode toggle + body switcher */
	box-sizing: border-box;
}
.sll-lr-view__threed {
	position: absolute;
	inset: 0;
	display: none;
}
.sll-lr-view[data-mode="2d"] .sll-lr-view__twod { display: block; }
.sll-lr-view[data-mode="3d"] .sll-lr-view__threed { display: block; }

.sll-lr-view__twod .sll-surface-map--archive {
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
}

/* Body switcher floats over both panes at the top-center, below the 2D/3D toggle.
   Translucent pill backdrop so it reads over both the Leaflet tiles and the 3D scene. */
.sll-lr-view .sll-surface-body-switcher {
	position: absolute;
	top: 70px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 11;
	margin: 0;
	padding: 6px 8px;
	background: rgba(0, 8, 20, 0.6);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(74, 176, 255, 0.24);
	border-radius: 999px;
}

/* ── 2D / 3D toggle ── */

.sll-probe-view__mode-toggle {
	position: absolute;
	top: 18px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 12;
	display: inline-flex;
	padding: 4px;
	background: rgba(0, 8, 20, 0.72);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(74, 176, 255, 0.28);
	border-radius: 999px;
	box-shadow: 0 6px 32px rgba(0, 70, 140, 0.25);
}

.sll-probe-view__mode-btn {
	appearance: none;
	background: transparent;
	border: 0;
	color: rgba(200, 220, 240, 0.7);
	padding: 8px 18px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	cursor: pointer;
	border-radius: 999px;
	transition: color 0.15s ease, background 0.2s ease;
	font-family: inherit;
	text-transform: uppercase;
}

.sll-probe-view__mode-btn:hover { color: #ffffff; }

.sll-probe-view__mode-btn.is-active {
	background: linear-gradient(135deg, #0088ff 0%, #4ab0ff 100%);
	color: #ffffff;
	box-shadow: 0 4px 14px rgba(0, 136, 255, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

/* ── 2D / 3D pane sizing ── */

.sll-probe-view__twod {
	position: absolute;
	inset: 0;
	display: none;
}

.sll-probe-view__threed {
	position: absolute;
	inset: 0;
	display: none;
}

.sll-probe-view[data-mode="2d"] .sll-probe-view__twod { display: block; }
.sll-probe-view[data-mode="3d"] .sll-probe-view__threed { display: block; }

.sll-probe-view__twod .sll-probe-map--archive {
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
}

/* ── 3D canvas container ──
 * On the archive page the container is absolutely positioned inside
 * .sll-probe-view__threed, which supplies the size. On embedded single-post
 * viewers the container IS the sized box (.sll-probe-embed sets 78vh) and
 * must position relative so it stays in document flow. Same for the
 * dedicated /solar-system/ page (.sll-solar-full). */
.sll-probe-3d {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: transparent;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
}

.sll-probe-3d.sll-probe-embed,
.sll-probe-3d.sll-solar-full {
	position: relative;
	inset: auto;
}

.sll-probe-3d:active { cursor: grabbing; }

.sll-probe-3d canvas {
	position: absolute;
	inset: 0;
	display: block;
}

/* ── loading overlay ──
 * Covers the canvas during the 1-3s window when THREE.js, GLTFLoader,
 * DRACOLoader, satellite.js, HD planet textures, and 16 probe GLBs are
 * all streaming in. Fades out ~600ms after the first rendered frame so
 * users never see a half-formed scene. */
.sll-p3d-loader {
	position: absolute;
	inset: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	background: radial-gradient(ellipse at center, #06142e 0%, #000408 80%);
	color: rgba(200, 220, 240, 0.85);
	font-family: 'Space Grotesk', system-ui, sans-serif;
	transition: opacity 0.6s ease, visibility 0.6s;
	opacity: 1;
	visibility: visible;
}
.sll-p3d-loader.is-fading {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
.sll-p3d-loader__ring {
	width: 48px;
	height: 48px;
	border: 2px solid rgba(74, 176, 255, 0.18);
	border-top-color: rgba(74, 176, 255, 0.92);
	border-right-color: rgba(74, 176, 255, 0.6);
	border-radius: 50%;
	animation: sll-p3d-loader-spin 1.2s cubic-bezier(0.65, 0.1, 0.35, 0.9) infinite;
	box-shadow: 0 0 32px rgba(74, 176, 255, 0.32);
}
.sll-p3d-loader__label {
	font-size: 11px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: rgba(180, 210, 240, 0.75);
}
.sll-p3d-loader__bar {
	width: 220px;
	max-width: 60vw;
	height: 4px;
	background: rgba(74, 176, 255, 0.12);
	border-radius: 999px;
	overflow: hidden;
	box-shadow: 0 0 16px rgba(74, 176, 255, 0.12) inset;
}
.sll-p3d-loader__bar-fill {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, rgba(74, 176, 255, 0.9), rgba(180, 220, 255, 1));
	box-shadow: 0 0 14px rgba(74, 176, 255, 0.6);
	transition: width 0.08s linear;
	border-radius: 999px;
}
.sll-p3d-loader__pct {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: rgba(200, 225, 250, 0.95);
	font-variant-numeric: tabular-nums;
	min-width: 3ch;
	text-align: center;
}
@keyframes sll-p3d-loader-spin {
	to { transform: rotate(360deg); }
}

/* ── labels layer ── */

.sll-p3d-labels {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.sll-p3d-label {
	position: absolute;
	top: 0; left: 0;
	pointer-events: auto;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: rgba(200, 220, 240, 0.55);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
	white-space: nowrap;
	transform: translate(-50%, -50%);
	font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
	padding: 2px 6px;
	border-radius: 3px;
	transition: color 0.15s, background 0.15s, box-shadow 0.2s, opacity 0.2s;
	will-change: transform;
}

.sll-p3d-label--planet {
	font-size: 11px;
	letter-spacing: 0.22em;
	color: rgba(255, 255, 255, 0.65);
	text-transform: uppercase;
	font-weight: 700;
}

.sll-p3d-label--moon {
	font-size: 9px;
	letter-spacing: 0.15em;
	color: rgba(220, 230, 245, 0.55);
	text-transform: uppercase;
	font-weight: 500;
}

.sll-p3d-label--comet {
	font-size: 10px;
	letter-spacing: 0.18em;
	color: rgba(150, 200, 255, 0.82);
	text-transform: uppercase;
	font-weight: 600;
	text-shadow: 0 0 8px rgba(130, 180, 255, 0.45);
}

.sll-p3d-label--dwarf {
	font-size: 10px;
	letter-spacing: 0.16em;
	color: rgba(240, 200, 170, 0.72);
	text-transform: uppercase;
	font-weight: 600;
}

.sll-p3d-label--asteroid {
	font-size: 9px;
	letter-spacing: 0.14em;
	color: rgba(200, 180, 160, 0.62);
	text-transform: uppercase;
	font-weight: 500;
}

/* Surface markers (landers / rovers / launch pads) — optional HTML labels.
   The engine currently renders markers as pure THREE sphere+sprite meshes
   and animates pad pulses in the tick loop, so no CSS pulse is required.
   These classes are reserved for the future "show mission label on hover"
   pass described in the project plan. */
.sll-p3d-marker-label {
	position: absolute;
	top: 0; left: 0;
	pointer-events: auto;
	transform: translate(-50%, -120%);
	font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
	font-size: 9px;
	letter-spacing: 0.12em;
	font-weight: 600;
	text-transform: uppercase;
	white-space: nowrap;
	padding: 2px 6px;
	border-radius: 3px;
	background: rgba(5, 8, 14, 0.72);
	color: rgba(230, 240, 255, 0.92);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
	opacity: 0;
	transition: opacity 0.2s ease;
}
.sll-p3d-marker-label.is-visible { opacity: 1; }
.sll-p3d-marker-label--lander { border-left: 2px solid #4ab0ff; }
.sll-p3d-marker-label--rover  { border-left: 2px solid #4cff7a; }
.sll-p3d-marker-label--pad    { border-left: 2px solid #ff6a2a; }

/* HUD status variants for the surface-marker view (re-uses the probe panel
   chrome, so we only need colored status pills). */
.sll-p3d-hud__status[data-status^="marker-"] {
	background: rgba(74, 176, 255, 0.18);
	color: #cfe4ff;
}
.sll-p3d-hud__status[data-status="marker-rover"] {
	background: rgba(76, 255, 122, 0.18);
	color: #c7ffda;
}
.sll-p3d-hud__status[data-status="marker-pad"] {
	background: rgba(255, 106, 42, 0.20);
	color: #ffd6bf;
}

/* Satellite constellation toggle panel (shown in HUD when a planet with
   satellites is selected). Scrollable list of checkboxes — one per
   constellation — with color swatches matching the orbit type (LEO blue,
   MEO amber, GEO orange, etc.). */
.sll-p3d-hud__satellites {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	display: none;
}
.sll-p3d-hud__sat-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
	gap: 8px;
}
.sll-p3d-hud__sat-title {
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
	font-weight: 600;
}

/* Master on/off label — wraps the satellite section title + checkbox.
 * When unchecked the constellation list is collapsed and nothing renders. */
.sll-p3d-hud__sat-master {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	user-select: none;
}
.sll-p3d-hud__sat-master input[type="checkbox"] {
	accent-color: #6eb5ff;
	cursor: pointer;
	width: 14px;
	height: 14px;
}
.sll-p3d-hud__sat-actions {
	display: flex;
	gap: 4px;
}
.sll-p3d-hud__sat-all {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.85);
	font-size: 9px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 3px 8px;
	cursor: pointer;
	border-radius: 3px;
	transition: background 0.12s, border-color 0.12s;
}
.sll-p3d-hud__sat-all:hover {
	background: rgba(110, 181, 255, 0.15);
	border-color: rgba(110, 181, 255, 0.5);
}
.sll-p3d-hud__sat-list {
	max-height: 220px;
	overflow-y: auto;
	padding-right: 4px;
}
.sll-p3d-hud__sat-row {
	display: grid;
	grid-template-columns: 16px 10px 1fr auto auto auto auto;
	align-items: center;
	gap: 6px;
	padding: 4px 0;
	cursor: pointer;
	font-size: 11px;
	color: rgba(230, 240, 255, 0.78);
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.sll-p3d-hud__sat-row:hover {
	color: #ffffff;
}
.sll-p3d-hud__sat-row input[type="checkbox"] {
	accent-color: var(--sat-color, #6eb5ff);
	cursor: pointer;
}
.sll-p3d-hud__sat-swatch {
	width: 10px;
	height: 10px;
	background: var(--sat-color, #8aa2c4);
	border-radius: 2px;
}
.sll-p3d-hud__sat-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sll-p3d-hud__sat-orbit {
	font-size: 9px;
	letter-spacing: 0.12em;
	color: rgba(200, 210, 225, 0.6);
	text-transform: uppercase;
}
.sll-p3d-hud__sat-count {
	font-variant-numeric: tabular-nums;
	font-size: 10px;
	color: rgba(180, 200, 225, 0.65);
}

/* Loading spinner shown while fetching the satellite summary / TLEs so
 * users see an obvious "working on it" indicator instead of a blank HUD. */
.sll-p3d-hud__sat-loading {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 0;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(200, 220, 240, 0.7);
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	margin-top: 12px;
}
.sll-p3d-hud__sat-spinner {
	width: 14px;
	height: 14px;
	border: 2px solid rgba(110, 181, 255, 0.2);
	border-top-color: rgba(110, 181, 255, 0.9);
	border-radius: 50%;
	animation: sll-p3d-spin 0.7s linear infinite;
}
@keyframes sll-p3d-spin {
	to { transform: rotate(360deg); }
}
/* Per-row "dots" toggle — renders individual satellites as propagated points.
 * Compact: checkbox + 3-letter label, hugs right edge of the constellation row. */
.sll-p3d-hud__sat-dots {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 9px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(180, 200, 225, 0.55);
	padding-left: 4px;
	border-left: 1px solid rgba(255, 255, 255, 0.05);
}
.sll-p3d-hud__sat-dots input[type="checkbox"] {
	width: 11px;
	height: 11px;
	margin: 0;
}
.sll-p3d-hud__sat-dots-label {
	line-height: 1;
}
/* Trails chip reuses the dots layout; subtle tint difference so the
 * two toggles don't read as duplicates. */
.sll-p3d-hud__sat-trails {
	color: rgba(200, 220, 240, 0.6);
}
.sll-p3d-hud__sat-hint {
	margin-top: 6px;
	padding: 4px 6px;
	font-size: 10px;
	color: rgba(255, 200, 130, 0.85);
	background: rgba(255, 150, 50, 0.08);
	border-left: 2px solid rgba(255, 170, 80, 0.5);
	border-radius: 2px;
}

/* Celestial body labels (planet / moon / comet). Click zooms the camera +
 * opens the HUD panel. Double-click jumps to the CPT post. We use div + JS
 * click handler (not anchor) so preventDefault can't be bypassed by synthetic
 * clicks and so left-click has a single unambiguous meaning. Hover treatment
 * intensifies color + shadow; transform is owned by JS positioning so we
 * avoid touching it here. */
.sll-p3d-label--planet,
.sll-p3d-label--moon,
.sll-p3d-label--comet,
.sll-p3d-label--dwarf,
.sll-p3d-label--asteroid {
	cursor: pointer;
	transition: color 0.12s ease, text-shadow 0.12s ease;
}
.sll-p3d-label--planet:hover,
.sll-p3d-label--moon:hover,
.sll-p3d-label--comet:hover,
.sll-p3d-label--dwarf:hover,
.sll-p3d-label--asteroid:hover {
	color: #ffffff;
	text-shadow: 0 0 10px rgba(255, 255, 255, 0.6), 0 0 18px rgba(110, 181, 255, 0.55);
}

.sll-p3d-label--probe {
	cursor: pointer;
	border: 1px solid transparent;
}

.sll-p3d-label--probe.is-active {
	color: #4ab0ff;
	text-shadow: 0 0 8px rgba(74, 176, 255, 0.55), 0 1px 2px rgba(0, 0, 0, 0.85);
}

.sll-p3d-label--probe.is-inactive {
	color: rgba(154, 174, 196, 0.6);
}

.sll-p3d-label--probe:hover {
	color: #fff;
	background: rgba(0, 136, 255, 0.18);
	border-color: rgba(74, 176, 255, 0.55);
	box-shadow: 0 0 12px rgba(0, 136, 255, 0.3);
}

.sll-p3d-label--probe.is-selected {
	color: #fff;
	background: linear-gradient(135deg, #0088ff, #4ab0ff);
	border-color: rgba(255, 255, 255, 0.35);
	box-shadow: 0 0 18px rgba(74, 176, 255, 0.55);
	font-weight: 700;
}

/* ── HUD ── */

.sll-p3d-hud {
	position: absolute;
	inset: 0;
	pointer-events: none;
	font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
	color: #e8f4ff;
}

.sll-p3d-hud__top {
	position: absolute;
	top: 18px;
	left: 22px;
	right: 22px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	pointer-events: none;
}

.sll-p3d-hud__brand {
	pointer-events: auto;
	padding: 10px 16px;
	background: rgba(0, 8, 20, 0.62);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(74, 176, 255, 0.22);
	border-radius: 6px;
	min-width: 220px;
	color: #e8f4ff;
}

.sll-p3d-hud__tag {
	font-size: 9px;
	letter-spacing: 0.28em;
	font-weight: 800;
	color: #4ab0ff;
	margin-bottom: 4px;
}

.sll-p3d-hud__title {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #ffffff;
}

.sll-p3d-hud__time {
	pointer-events: auto;
	padding: 10px 14px;
	background: rgba(0, 8, 20, 0.62);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(74, 176, 255, 0.22);
	border-radius: 6px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
	font-variant-numeric: tabular-nums;
	color: #e8f4ff;
}

.sll-p3d-hud__time-label {
	font-size: 9px;
	letter-spacing: 0.2em;
	color: #4ab0ff;
	font-weight: 700;
}

.sll-p3d-hud__time-val {
	font-size: 13px;
	font-weight: 600;
	color: #ffffff;
}

.sll-p3d-hud__panel {
	position: absolute;
	top: 90px;
	right: 22px;
	width: 340px;
	max-width: calc(100% - 44px);
	padding: 20px 22px 18px;
	background: rgba(0, 8, 20, 0.82);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border: 1px solid rgba(74, 176, 255, 0.36);
	border-radius: 8px;
	box-shadow: 0 12px 48px rgba(0, 50, 100, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
	pointer-events: auto;
	animation: sll-p3d-fade 0.35s ease-out;
	color: #e8f4ff;
}

@keyframes sll-p3d-fade {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.sll-p3d-hud__close {
	position: absolute;
	top: 8px;
	right: 12px;
	font-size: 20px;
	line-height: 1;
	color: rgba(200, 220, 240, 0.5);
	cursor: pointer;
	padding: 4px 8px;
	transition: color 0.15s;
}
.sll-p3d-hud__close:hover { color: #fff; }

.sll-p3d-hud__probe-status {
	display: inline-block;
	font-size: 9px;
	letter-spacing: 0.24em;
	font-weight: 800;
	padding: 3px 8px;
	border-radius: 3px;
	background: rgba(0, 255, 136, 0.18);
	color: #00ff88;
	margin-bottom: 8px;
	border: 1px solid rgba(0, 255, 136, 0.35);
}

.sll-p3d-hud__probe-status[data-status="completed"],
.sll-p3d-hud__probe-status[data-status="decommissioned"],
.sll-p3d-hud__probe-status[data-status="lost-contact"],
.sll-p3d-hud__probe-status[data-status="retired"],
.sll-p3d-hud__probe-status[data-status="end-of-mission"] {
	background: rgba(154, 174, 196, 0.18);
	color: #9cb3c8;
	border-color: rgba(154, 174, 196, 0.3);
}

.sll-p3d-hud__probe-status[data-status="cruise"],
.sll-p3d-hud__probe-status[data-status="en-route"],
.sll-p3d-hud__probe-status[data-status="transit"] {
	background: rgba(255, 204, 0, 0.18);
	color: #ffcc00;
	border-color: rgba(255, 204, 0, 0.35);
}

.sll-p3d-hud__probe-name {
	font-size: 22px;
	font-weight: 800;
	margin: 0 0 4px;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: #ffffff;
}

.sll-p3d-hud__probe-operator {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(200, 220, 240, 0.65);
	margin-bottom: 2px;
}

.sll-p3d-hud__target {
	font-size: 13px;
	color: rgba(200, 220, 240, 0.8);
	margin-bottom: 14px;
}

.sll-p3d-hud__stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 18px;
	padding: 12px 0;
	border-top: 1px solid rgba(74, 176, 255, 0.16);
	border-bottom: 1px solid rgba(74, 176, 255, 0.16);
	margin-bottom: 12px;
}

.sll-p3d-hud__stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sll-p3d-hud__stat-label {
	font-size: 9px;
	letter-spacing: 0.18em;
	font-weight: 700;
	color: rgba(200, 220, 240, 0.55);
	text-transform: uppercase;
}

.sll-p3d-hud__stat-val {
	font-size: 13px;
	font-weight: 700;
	font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
	font-variant-numeric: tabular-nums;
	color: #4ab0ff;
}

.sll-p3d-hud__link {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: #4ab0ff;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s;
}
.sll-p3d-hud__link:hover { border-color: #4ab0ff; }

.sll-p3d-hud__footer {
	position: absolute;
	left: 22px;
	bottom: 14px;
	pointer-events: none;
	max-width: 60%;
}

.sll-p3d-hud__footnote {
	font-size: 10px;
	color: rgba(200, 220, 240, 0.42);
	letter-spacing: 0.02em;
	font-style: italic;
}

/* Credits / attribution modal */
.sll-p3d-credits-link {
	color: #4ab0ff;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s;
}
.sll-p3d-credits-link:hover { border-color: #4ab0ff; }

/* Compact corner popover — shows anchored near the Credits link, never covers
   the scene. Smaller type, tighter spacing, fixed max-height with scroll. */
.sll-p3d-credits {
	position: absolute;
	bottom: 46px;
	left: 22px;
	width: 280px;
	max-width: calc(100% - 44px);
	max-height: 340px;
	overflow-y: auto;
	padding: 12px 14px 10px;
	background: rgba(0, 8, 20, 0.96);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(74, 176, 255, 0.32);
	border-radius: 6px;
	box-shadow: 0 8px 28px rgba(0, 30, 60, 0.55);
	pointer-events: auto;
	animation: sll-p3d-fade 0.2s ease-out;
	color: rgba(200, 220, 240, 0.86);
	font-size: 10px;
	line-height: 1.45;
	z-index: 20;
}

.sll-p3d-credits__close {
	position: absolute;
	top: 4px;
	right: 8px;
	font-size: 16px;
	line-height: 1;
	color: rgba(200, 220, 240, 0.55);
	cursor: pointer;
	padding: 2px 6px;
}
.sll-p3d-credits__close:hover { color: #fff; }

.sll-p3d-credits__title {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.14em;
	color: #4ab0ff;
	margin: 0 0 6px;
	text-transform: uppercase;
}

.sll-p3d-credits__section {
	padding: 6px 0;
	border-bottom: 1px solid rgba(74, 176, 255, 0.1);
}
.sll-p3d-credits__section:last-child { border-bottom: 0; }
.sll-p3d-credits__section strong {
	display: block;
	font-size: 9px;
	letter-spacing: 0.12em;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.82);
	text-transform: uppercase;
	margin-bottom: 2px;
}
.sll-p3d-credits__section a {
	color: #4ab0ff;
	text-decoration: underline;
	text-decoration-color: rgba(74, 176, 255, 0.35);
}
.sll-p3d-credits__footnote { color: rgba(200, 220, 240, 0.5); font-style: italic; font-size: 9px; }

.sll-p3d-hud__footnote kbd {
	display: inline-block;
	padding: 1px 5px;
	margin: 0 1px;
	font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
	font-size: 9px;
	font-style: normal;
	background: rgba(74, 176, 255, 0.14);
	border: 1px solid rgba(74, 176, 255, 0.25);
	border-radius: 2px;
	color: #4ab0ff;
}

/* ── time scrubber ── */

.sll-p3d-time {
	position: absolute;
	left: 50%;
	bottom: 22px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px 8px 10px;
	background: rgba(0, 8, 20, 0.78);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(74, 176, 255, 0.28);
	border-radius: 999px;
	box-shadow: 0 6px 24px rgba(0, 30, 60, 0.45);
	pointer-events: auto;
	max-width: min(640px, calc(100% - 120px));
	font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
	color: #e8f4ff;
	z-index: 9;
}

.sll-p3d-time__btn {
	appearance: none;
	height: 30px;
	min-width: 30px;
	padding: 0 9px;
	border: 1px solid rgba(74, 176, 255, 0.35);
	background: rgba(74, 176, 255, 0.12);
	color: #c8e8ff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	border-radius: 999px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.15s ease;
	font-family: inherit;
}

.sll-p3d-time__btn:hover {
	background: rgba(74, 176, 255, 0.25);
	color: #fff;
}

.sll-p3d-time__btn--play { background: linear-gradient(135deg, #0088ff, #4ab0ff); color: #fff; border-color: transparent; }
.sll-p3d-time__btn--play:hover { box-shadow: 0 0 12px rgba(74, 176, 255, 0.5); }

.sll-p3d-time__date-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 120px;
	padding: 0 4px;
}

.sll-p3d-time__date {
	font-size: 12px;
	font-weight: 700;
	font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
	font-variant-numeric: tabular-nums;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	line-height: 1;
}

.sll-p3d-time__meta {
	display: flex;
	align-items: center;
	gap: 6px;
	line-height: 1;
}

.sll-p3d-time__tag {
	font-size: 8px;
	font-weight: 800;
	letter-spacing: 0.12em;
	padding: 2px 6px;
	border-radius: 999px;
	background: rgba(74, 176, 255, 0.2);
	color: #4ab0ff;
	border: 1px solid rgba(74, 176, 255, 0.4);
}
.sll-p3d-time__tag[data-tag="past"] {
	background: rgba(255, 180, 60, 0.18);
	color: #ffbb44;
	border-color: rgba(255, 180, 60, 0.45);
}
.sll-p3d-time__tag[data-tag="future"] {
	background: rgba(255, 100, 200, 0.18);
	color: #ff85d6;
	border-color: rgba(255, 100, 200, 0.45);
}

.sll-p3d-time__era {
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: rgba(200, 220, 240, 0.68);
	white-space: nowrap;
	text-transform: uppercase;
}

.sll-p3d-time__slider-wrap {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 220px;
	padding: 4px 0 14px;
}

.sll-p3d-time__slider {
	-webkit-appearance: none;
	appearance: none;
	height: 3px;
	width: 100%;
	background:
		linear-gradient(90deg, rgba(74, 176, 255, 0.15) 0%, rgba(74, 176, 255, 0.35) 56%, rgba(255, 204, 0, 0.35) 100%);
	border-radius: 2px;
	outline: none;
	cursor: pointer;
}

/* Year tick labels under the slider at 1900 / 1950 / 2000 / 2050 / 2100. */
.sll-p3d-time__ticks {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 10px;
	pointer-events: none;
}
.sll-p3d-time__tick {
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: rgba(200, 220, 240, 0.55);
	font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
	font-variant-numeric: tabular-nums;
}
.sll-p3d-time__tick::before {
	content: '';
	position: absolute;
	left: 50%;
	top: -6px;
	transform: translateX(-50%);
	width: 1px;
	height: 4px;
	background: rgba(74, 176, 255, 0.35);
}

.sll-p3d-time__slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	background: #4ab0ff;
	border: 2px solid #fff;
	border-radius: 50%;
	cursor: grab;
	box-shadow: 0 0 10px rgba(74, 176, 255, 0.7);
}

.sll-p3d-time__slider::-moz-range-thumb {
	width: 16px;
	height: 16px;
	background: #4ab0ff;
	border: 2px solid #fff;
	border-radius: 50%;
	cursor: grab;
	box-shadow: 0 0 10px rgba(74, 176, 255, 0.7);
}

.sll-p3d-time__slider::-webkit-slider-thumb:active { cursor: grabbing; }

.sll-p3d-time__speed {
	display: flex;
	gap: 2px;
	padding-left: 8px;
	border-left: 1px solid rgba(74, 176, 255, 0.2);
}

.sll-p3d-time__speed-btn {
	appearance: none;
	padding: 4px 8px;
	background: transparent;
	border: 0;
	color: rgba(200, 220, 240, 0.6);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	cursor: pointer;
	border-radius: 3px;
	font-family: inherit;
	font-variant-numeric: tabular-nums;
	transition: color 0.15s, background 0.15s;
}

.sll-p3d-time__speed-btn:hover { color: #fff; }
.sll-p3d-time__speed-btn.is-active {
	color: #fff;
	background: rgba(74, 176, 255, 0.2);
}

/* Time-travel banner — appears when simTime deviates from 'now' */
.sll-p3d-hud[data-time-traveling="yes"]::before {
	content: 'PROBE POSITIONS ARE CURRENT \2014 NOT HISTORICAL';
	position: absolute;
	top: 72px;
	left: 50%;
	transform: translateX(-50%);
	padding: 4px 12px;
	background: rgba(255, 204, 0, 0.14);
	border: 1px solid rgba(255, 204, 0, 0.4);
	color: #ffcc00;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.18em;
	border-radius: 999px;
	pointer-events: none;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	animation: sll-p3d-fade 0.4s ease-out;
	white-space: nowrap;
	max-width: 90%;
	z-index: 11;
}

@media (max-width: 640px) {
	.sll-p3d-hud[data-time-traveling="yes"]::before {
		content: 'PROBE POSITIONS = TODAY';
		top: 116px;
		font-size: 8px;
		padding: 3px 10px;
	}
}

/* ── controls cluster ── */

.sll-p3d-controls {
	position: absolute;
	right: 22px;
	bottom: 22px;
	z-index: 8;
	display: flex;
	flex-direction: column;
	gap: 6px;
	pointer-events: auto;
}

.sll-p3d-btn {
	appearance: none;
	width: 36px;
	height: 36px;
	border: 1px solid rgba(74, 176, 255, 0.35);
	background: rgba(0, 8, 20, 0.72);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-radius: 4px;
	color: #c8e8ff;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: inherit;
	transition: all 0.15s ease;
	line-height: 1;
	padding: 0;
}

.sll-p3d-btn:hover {
	background: rgba(0, 136, 255, 0.25);
	border-color: rgba(74, 176, 255, 0.6);
	color: #fff;
	box-shadow: 0 0 14px rgba(74, 176, 255, 0.3);
}

.sll-p3d-btn:active { transform: scale(0.96); }

/* Toggle buttons — when active, stay highlighted so the user can
 * see the current state without hovering. */
.sll-p3d-btn--trails.is-active,
.sll-p3d-btn--orbits.is-active {
	background: rgba(110, 181, 255, 0.35);
	border-color: rgba(150, 210, 255, 0.8);
	color: #ffffff;
	box-shadow: 0 0 14px rgba(110, 181, 255, 0.5);
}

/* View-mode button — always a little lit so users can spot it, tiny
 * mode indicator strip underneath via data-mode. */
.sll-p3d-btn--view {
	position: relative;
}
.sll-p3d-btn--view::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 4px;
	transform: translateX(-50%);
	width: 12px;
	height: 2px;
	border-radius: 2px;
	background: rgba(150, 200, 255, 0.5);
	transition: background 0.2s;
}
.sll-p3d-btn--view[data-mode="theater"]::after { width: 8px; background: #4ab0ff; }
.sll-p3d-btn--view[data-mode="portrait"]::after { width: 4px; background: #4ab0ff; }
.sll-p3d-btn--view[data-mode="fullwidth"]::after { width: 14px; background: rgba(150, 200, 255, 0.9); }

/* Earth-only launch-pads checkbox inside the body HUD panel. */
.sll-p3d-hud__earth-pads {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	margin-top: 10px;
	background: rgba(255, 106, 42, 0.08);
	border: 1px solid rgba(255, 106, 42, 0.25);
	border-radius: 8px;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 210, 180, 0.9);
	cursor: pointer;
	user-select: none;
}
.sll-p3d-hud__earth-pads input {
	appearance: none;
	-webkit-appearance: none;
	width: 14px; height: 14px;
	border: 1px solid rgba(255, 140, 80, 0.7);
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.2);
	position: relative;
	cursor: pointer;
	margin: 0;
	flex-shrink: 0;
}
.sll-p3d-hud__earth-pads input:checked {
	background: #ff6a2a;
	border-color: #ff8a4a;
}
.sll-p3d-hud__earth-pads input:checked::after {
	content: '✓';
	position: absolute;
	inset: 0;
	display: flex; align-items: center; justify-content: center;
	font-size: 10px;
	color: #fff;
	line-height: 1;
}

/* ── fullscreen ── */

.sll-probe-3d.is-fullscreen,
.sll-probe-3d:fullscreen,
.sll-probe-3d:-webkit-full-screen {
	width: 100vw !important;
	height: 100vh !important;
	background: #000408;
}

.sll-probe-3d:fullscreen .sll-p3d-hud__top { top: 28px; }

/* ── responsive ── */

@media (max-width: 900px) {
	.sll-probe-view__inner { height: 65vh; min-height: 440px; }
	.sll-p3d-hud__panel { width: calc(100% - 44px); top: auto; bottom: 140px; right: 22px; }
	.sll-p3d-time { max-width: min(420px, calc(100% - 90px)); gap: 6px; padding: 6px 8px; }
	.sll-p3d-time__slider-wrap { width: 140px; padding-bottom: 12px; }
	.sll-p3d-time__date-wrap { min-width: 96px; }
	.sll-p3d-time__date { font-size: 11px; }
	.sll-p3d-time__era { display: none; }
	.sll-p3d-time__tick { font-size: 7px; }
	.sll-p3d-time__speed { display: none; }
	.sll-p3d-time__btn { height: 26px; min-width: 26px; padding: 0 7px; font-size: 10px; }
	.sll-p3d-hud__brand { min-width: 0; padding: 6px 10px; }
	.sll-p3d-hud__title { font-size: 11px; }
	.sll-p3d-hud__tag { font-size: 8px; letter-spacing: 0.22em; }
	.sll-p3d-hud__time { padding: 6px 10px; }
	.sll-p3d-hud__time-label { font-size: 8px; }
	.sll-p3d-hud__time-val { font-size: 11px; }
	.sll-p3d-controls { right: 12px; bottom: 12px; }
	.sll-p3d-btn { width: 32px; height: 32px; font-size: 14px; }
	.sll-p3d-hud__footer { display: none; }
}

@media (max-width: 640px) {
	.sll-probe-view { margin-bottom: 12px; }
	.sll-probe-view__inner { height: 70vh; min-height: 420px; }
	.sll-p3d-time { bottom: 12px; left: 10px; right: 10px; transform: none; max-width: none; width: auto; justify-content: center; border-radius: 8px; }
	.sll-p3d-time__slider-wrap { flex: 1; min-width: 100px; width: auto; }
	.sll-p3d-time__slider { flex: 1; min-width: 80px; width: 100%; }
	.sll-p3d-hud__top {
		top: 58px; /* below the 2D/3D toggle */
		left: 10px;
		right: 10px;
		flex-direction: row;
		gap: 8px;
	}
	.sll-p3d-hud__brand {
		padding: 4px 8px;
		flex: 1;
		min-width: 0;
	}
	.sll-p3d-hud__title { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.sll-p3d-hud__time { padding: 4px 8px; }
	.sll-p3d-hud__time-val { font-size: 10px; }
	.sll-p3d-hud__panel {
		padding: 14px 16px 12px;
		bottom: 64px;
		left: 10px;
		right: 10px;
		width: auto;
		max-width: none;
	}
	.sll-p3d-hud__probe-name { font-size: 17px; }
	.sll-p3d-hud__stats { gap: 8px 12px; }
	.sll-p3d-hud__stat-val { font-size: 11px; }
	.sll-p3d-label { font-size: 9px; padding: 1px 3px; }
	.sll-p3d-label--planet { font-size: 9px; letter-spacing: 0.16em; }
	.sll-probe-view__mode-toggle { top: 10px; padding: 3px; }
	.sll-probe-view__mode-btn { padding: 5px 10px; font-size: 10px; letter-spacing: 0.08em; }
}

/* ── reduced motion ── */

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

/* ────────────────────────────────────────────────────────────────
 * Single-probe 3D showcase hero (cinematic Three.js scene on
 * /probes/{slug}/ — the probe sprite floats against a slowly
 * rotating Milky Way skybox). Rendered above the probe dashboard
 * via the `the_content` filter at priority 20.
 * ──────────────────────────────────────────────────────────────── */

.sll-probe-showcase-hero {
	position: relative;
	display: block;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: -8px;
	margin-bottom: 24px;
	height: 60vh;
	min-height: 420px;
	max-height: 720px;
	background:
		radial-gradient(ellipse at 70% 30%, rgba(255, 180, 100, 0.08) 0%, rgba(0, 0, 0, 0) 55%),
		linear-gradient(180deg, #000308 0%, #02061a 55%, #040a22 100%);
	overflow: hidden;
	border-bottom: 1px solid rgba(74, 176, 255, 0.22);
	box-shadow: inset 0 -60px 80px -40px rgba(0, 0, 0, 0.7);
}

.sll-probe-showcase-hero canvas {
	display: block;
	width: 100% !important;
	height: 100% !important;
}

/* Soft top/bottom fade so the hero blends into the page background */
.sll-probe-showcase-hero::before,
.sll-probe-showcase-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 80px;
	pointer-events: none;
	z-index: 2;
}
.sll-probe-showcase-hero::before {
	top: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 100%);
}
.sll-probe-showcase-hero::after {
	bottom: 0;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 100%);
}

@media (max-width: 640px) {
	.sll-probe-showcase-hero {
		height: 48vh;
		min-height: 320px;
	}
}