/* ===========================================================================
   Voyager: Visit page (mission-terminal logbook).
   No header, no hero. The world's surface fills the entire viewport;
   a translucent logbook panel floats on the right.
   =========================================================================== */

.place-body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

/* ===========================================================================
   In-page logbook overlay (rendered ON TOP of index.html's 3D scene).
   Fades in over the running scene, fades out without unloading the page.
   =========================================================================== */
.logbook-overlay {
  position: fixed;
  inset: 0;
  z-index: 60; /* above 3D scene + side panel + minimap, below loader */
}

.logbook-overlay[hidden] {
  display: none;
}

/* Soft, symmetrical fade for both opening and closing. Longer duration
   with ease-in-out so the curve eases gently at both ends, feeling smooth
   rather than snappy. */
.logbook-overlay.entering {
  animation: overlayIn 0.85s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.logbook-overlay.entering .logbook {
  animation: logbookSoftIn 0.85s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes overlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes logbookSoftIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Exit is a true reverse of the entry: same duration, easing, scale, and
   opacity curve, just played backward. */
.logbook-overlay.exiting {
  pointer-events: none;
  animation: overlayOut 0.85s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.logbook-overlay.exiting .logbook {
  animation: logbookSoftOut 0.85s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes overlayOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes logbookSoftOut {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.985);
  }
}

/* Full-screen ground-view background. Fixed so it never scrolls. */
.place-bg {
  position: fixed;
  inset: 0;
  /* Fixed Milky Way starfield - a full-bleed, text-free image that always
     covers the viewport. (Per-body NASA photos were tried here but they
     are planets on black space and don't fill the frame.) */
  background-image: url('../textures/2k_stars_milky_way.jpg');
  background-position: center;
  background-size: cover;
  background-color: #000;
  background-repeat: no-repeat;
  z-index: 0;
  /* Subtle slow zoom for cinematic feel. */
  animation: bgZoom 30s ease-in-out infinite alternate;
}

@keyframes bgZoom {
  0%   { transform: scale(1.0); }
  100% { transform: scale(1.07); }
}

/* Soft vignette so edges fall into shadow. Keeps the logbook readable. */
.place-bg-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.55) 100%),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%);
}

/* ----- Logbook (sci-fi mission terminal) ------------------------------- */
/* Centered floating card. Bigger and more HUD-styled: terminal title bar,
   bracketed corners, monospace accents. Reads as a piece of mission gear,
   not a content panel. */
.logbook {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(1480px, calc(100vw - 2.25rem));
  height: min(88vh, 960px);
  max-width: calc(100vw - 2.25rem);
  transition: width 0.4s var(--ease-soft), height 0.4s var(--ease-soft), max-height 0.4s var(--ease-soft);
  z-index: 20;
  background: rgba(6, 9, 16, 0.86);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(125, 211, 252, 0.25);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(0, 0, 0, 0.4) inset,
    0 0 60px rgba(125, 211, 252, 0.04) inset;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Animation is now driven by .entering / .exiting overlay states so the
     logbook can grow OUT of the side panel position and shrink back INTO it. */
}

/* Subtle scanline overlay across the whole panel — suggests CRT / terminal
   without being aggressive. */
.logbook::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    rgba(125, 211, 252, 0) 0px,
    rgba(125, 211, 252, 0) 2px,
    rgba(125, 211, 252, 0.013) 3px,
    rgba(125, 211, 252, 0) 4px
  );
  z-index: 1;
}

/* Make sure all the actual content sits above the scanline overlay */
.logbook > * {
  position: relative;
  z-index: 2;
}

/* Corner brackets — both decorative AND clickable. Click any corner to
   expand the logbook to nearly full screen; click again to restore. */
.logbook-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: var(--color-accent);
  background: transparent;
  padding: 0;
  cursor: pointer;
  z-index: 5;
  transition: transform 0.2s var(--ease-soft), border-color 0.2s var(--ease-soft);
}

.logbook-corner--tl { top: 6px; left: 6px; border-top: 1px solid; border-left: 1px solid; }
.logbook-corner--tr { top: 6px; right: 6px; border-top: 1px solid; border-right: 1px solid; }
.logbook-corner--bl { bottom: 6px; left: 6px; border-bottom: 1px solid; border-left: 1px solid; }
.logbook-corner--br { bottom: 6px; right: 6px; border-bottom: 1px solid; border-right: 1px solid; }

/* Extend invisible click area beyond the visual bracket
   (excluded for the TR corner so it doesn't intercept the close × button) */
.logbook-corner:not(.logbook-corner--tr)::after {
  content: '';
  position: absolute;
  inset: -12px;
}

.logbook-corner:not(.logbook-corner--tr):hover {
  border-color: var(--color-text);
  transform: scale(1.5);
}

/* TR corner is decorative only — keep the visual bracket but no interaction. */
.logbook-corner--tr {
  pointer-events: none;
  cursor: default;
}

/* Maximized state: take over almost the entire viewport */
.logbook.maximized {
  width: calc(100vw - 2rem) !important;
  max-width: calc(100vw - 2rem) !important;
  height: calc(100vh - 2rem) !important;
  max-height: none !important;
}

/* Terminal title bar at the very top */
.logbook-titlebar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1.2rem;
  border-bottom: 1px solid rgba(125, 211, 252, 0.18);
  background: rgba(125, 211, 252, 0.03);
}

.logbook-titlebar-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.logbook-titlebar-actions {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

.logbook-titlebar-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Close button: monospaced × that triggers fly-back animation */
.logbook-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 1px;
  cursor: pointer;
  position: relative;
  z-index: 10;
  transition: all 0.2s var(--ease-soft);
}

.logbook-close:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: rgba(125, 211, 252, 0.08);
  transform: rotate(90deg);
}

.logbook-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px #4ade80;
  animation: livePulse 1.6s ease-in-out infinite;
}

@keyframes livePulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.logbook-header {
  flex-shrink: 0;
  padding: 1.6rem var(--space-lg) 1.2rem;
  border-bottom: 1px solid rgba(125, 211, 252, 0.12);
}

.logbook-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin: 0 0 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.logbook-eyebrow::before {
  content: '> ';
  color: var(--color-accent);
}

.logbook-title {
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: 1;
  letter-spacing: -0.015em;
  margin: 0 0 0.6rem;
  color: var(--color-text);
}

.logbook-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.45;
}

/* Tabs row — bracketed sci-fi style */
.logbook-tabs {
  flex-shrink: 0;
  display: flex;
  gap: 0.5rem;
  padding: 0.85rem var(--space-lg);
  border-bottom: 1px solid rgba(125, 211, 252, 0.18);
  background: rgba(0, 0, 0, 0.25);
  overflow-x: auto;
  scrollbar-width: none;
}

.logbook-tabs::-webkit-scrollbar { display: none; }

.logbook-tab {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--color-border);
  background: rgba(0, 0, 0, 0.3);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.2s var(--ease-soft);
  position: relative;
}

.logbook-tab:hover {
  color: var(--color-text);
  border-color: rgba(125, 211, 252, 0.4);
}

.logbook-tab.active {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: rgba(125, 211, 252, 0.12);
  box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.2);
}

/* Scrolling content area */
.logbook-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}

.logbook-content::-webkit-scrollbar { width: 6px; }
.logbook-content::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 3px; }

.logbook-content > * + * {
  margin-top: 1.6rem;
}

.logbook-content p {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  font-weight: 300;
}

.logbook-content .section-intro {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  font-weight: 300;
  margin-bottom: 1.2rem;
}

.logbook-content h2 {
  font-family: var(--font-tech);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 0.8rem;
  color: var(--color-text);
}

/* ----- Voyage timeline (inside the logbook) ----- */
.voyage-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.voyage-list::before {
  content: '';
  position: absolute;
  left: 64px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-border);
}

.voyage-item {
  position: relative;
  padding-left: 88px;
  margin-bottom: 1.6rem;
}

.voyage-item::before {
  content: '';
  position: absolute;
  left: 60px;
  top: 0.4em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid #080b12;
}

.voyage-year {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--color-text);
  width: 50px;
}

.voyage-mission {
  font-family: var(--font-tech);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin: 0 0 0.15rem;
  line-height: 1.25;
}

.voyage-agency {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  display: block;
  margin-bottom: 0.4rem;
}

.voyage-summary {
  font-family: var(--font-body);
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  font-weight: 300;
  margin: 0;
}

/* ----- Discoveries cards ----- */
.discoveries-list {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.discovery {
  padding: 1rem 1.2rem;
  border-left: 1px solid var(--color-accent);
  background: rgba(125, 211, 252, 0.04);
}

.discovery h3 {
  font-family: var(--font-tech);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0 0 0.4rem;
  color: var(--color-text);
}

.discovery p {
  font-family: var(--font-body);
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  font-weight: 300;
  margin: 0;
}

/* ----- Engineering: challenge cards + numbers grid ----- */
.engineering-section + .engineering-section {
  margin-top: 1.8rem;
}

.engineering-section-title {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 0.8rem;
}

.challenge-grid,
.numbers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

.challenge-card,
.numbers-cell {
  padding: 0.85rem;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
}

.challenge-card-label,
.numbers-label {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: 0.45rem;
}

.challenge-card-value,
.numbers-value {
  font-family: var(--font-tech);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin-bottom: 0.4rem;
  line-height: 1.2;
}

.numbers-value {
  font-family: var(--font-tech);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
}

.challenge-card-desc,
.numbers-context {
  font-family: var(--font-body);
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  font-weight: 300;
}

/* ----- Future missions ----- */
.next-missions {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.next-mission {
  padding: 1rem 1.2rem;
  border: 1px solid var(--color-border);
}

.next-mission-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.4rem;
  flex-wrap: wrap;
}

.next-mission-name {
  font-family: var(--font-tech);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--color-text);
}

.next-mission-date {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.next-mission-target {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: 0.5rem;
  display: block;
}

.next-mission-summary {
  font-family: var(--font-body);
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  font-weight: 300;
  margin: 0;
}

/* ----- Postcards gallery ----- */
.postcards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}

.postcard {
  display: flex;
  flex-direction: column;
}

.postcard-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
}

.postcard-caption {
  margin-top: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  font-weight: 300;
}

.postcard-credit {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-top: 0.3rem;
  display: block;
}

.view-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  padding: 1rem 1.2rem;
  border-left: 1px solid var(--color-accent);
  background: rgba(125, 211, 252, 0.03);
  margin-top: 1.5rem;
}

/* ----- Glossary term + popup ----- */
.glossary-term {
  border-bottom: 1px dotted var(--color-accent);
  cursor: help;
  transition: color 0.15s var(--ease-soft), border-bottom-color 0.15s var(--ease-soft);
}

.glossary-term:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
  border-bottom-style: solid;
}

.glossary-popup {
  position: fixed;
  z-index: 70;
  width: 320px;
  max-width: calc(100vw - 24px);
  padding: 0.9rem 1.1rem 1rem;
  background: rgba(6, 9, 16, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(125, 211, 252, 0.3);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
  font-family: var(--font-body);
}

.glossary-popup[hidden] { display: none; }

.glossary-popup-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  line-height: 1;
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: all 0.15s var(--ease-soft);
}

.glossary-popup-close:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.glossary-popup-term {
  font-family: var(--font-tech);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--color-accent);
  margin: 0 1.5rem 0.4rem 0;
}

.glossary-popup-short {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0 0 0.5rem;
}

.glossary-popup-long {
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}

/* ----- Sources tab (research-paper citations) ----- */
.source-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.source-entry {
  padding: 0.9rem 1.1rem;
  border-left: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.2s var(--ease-soft), background 0.2s var(--ease-soft);
}

.source-entry:hover {
  border-left-color: var(--color-accent);
  background: rgba(125, 211, 252, 0.04);
}

.source-citation {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--color-text);
  margin: 0 0 0.3rem;
}

.source-author { font-weight: 500; }
.source-year { color: var(--color-text-muted); }
.source-title { font-style: italic; }

.source-context {
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0 0 0.5rem;
}

.source-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  text-decoration: none;
  word-break: break-all;
  transition: color 0.2s var(--ease-soft);
}

.source-link:hover {
  color: var(--color-text);
}

.source-link-arrow {
  font-size: 0.7rem;
  flex-shrink: 0;
}

/* "Coming soon" placeholder for bodies without content yet */
.logbook-empty {
  text-align: center;
  padding: 3rem 0;
  font-family: var(--font-body);
  color: var(--color-text-faint);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* Responsive: a bit smaller on phones */
@media (max-width: 900px) {
  .logbook {
    width: calc(100vw - 1.6rem);
    height: calc(100vh - 5rem);
    max-height: none;
  }
  .logbook-title { font-size: 2.4rem; }
  .challenge-grid, .numbers-grid { grid-template-columns: 1fr; }
}

/* ===========================================================================
   Postcards: clean slideshow
   Image fills the stage. Caption + source sit BELOW the image. Subtle
   prev/next arrows on hover. No HUD overlays on the image itself.
   =========================================================================== */
.archive-stage {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  aspect-ratio: 4 / 3;
  max-height: 380px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.archive-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-soft);
}

.archive-slide.active {
  opacity: 1;
  pointer-events: auto;
}

.archive-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: rgba(0, 0, 0, 0.4);
}

.archive-missing-msg,
.archive-loading-msg {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.archive-slide--missing .archive-image { display: none; }
.archive-slide--missing .archive-missing-msg { display: flex; }

/* Loading state: shown only if the image is still loading after ~500ms,
   so quick cache hits don't flash a "Retrieving" label. */
.archive-slide--loading .archive-loading-msg {
  display: flex;
  opacity: 0;
  animation: archiveLoadingIn 0.4s ease-out 0.5s forwards;
}

.archive-slide--loading .archive-loading-msg::after {
  content: '';
  margin-left: 0.5rem;
  display: inline-block;
  width: 0.55rem;
  text-align: left;
  animation: archiveLoadingDots 1.2s steps(4, end) infinite;
}

@keyframes archiveLoadingIn {
  to { opacity: 1; }
}

@keyframes archiveLoadingDots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
  100% { content: ''; }
}

/* Caption + source row below the image */
.archive-meta-row {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  max-width: 760px;
  margin: 1rem auto 0;
  padding: 0 0.2rem;
}

.archive-counter {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  padding-top: 0.15rem;
  min-width: 60px;
}

.archive-captions {
  position: relative;
  flex: 1;
  min-height: 3.4rem;
}

.archive-caption-block {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-soft);
}

.archive-caption-block.active {
  opacity: 1;
  pointer-events: auto;
}

.archive-caption {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-text);
  font-weight: 400;
  margin: 0;
}

.archive-meta {
  margin: 0.4rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

/* Slideshow row: prev arrow / image stage / next arrow, side-by-side. */
.archive-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  max-width: 880px;
  margin: 0 auto;
}

.archive-row .archive-stage {
  flex: 1;
  margin: 0;
}

/* Visible arrow buttons sitting OUTSIDE the image stage. */
.archive-nav {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s var(--ease-soft),
              border-color 0.2s var(--ease-soft),
              background 0.2s var(--ease-soft);
}

.archive-nav:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: rgba(125, 211, 252, 0.12);
}

.archive-nav-spacer {
  width: 40px;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .archive-row { gap: 0.4rem; }
  .archive-nav { width: 32px; height: 32px; font-size: 1.3rem; }
  .archive-nav-spacer { width: 32px; }
}

/* ===========================================================================
   Readability override
   The logbook content was set to font-weight 300 and a muted text color,
   which is hard to read at small sizes on dark backgrounds. Bump to 400
   weight with full text color so paragraphs are properly legible.
   =========================================================================== */
.logbook-content p,
.logbook-content .section-intro,
.logbook-content .voyage-summary,
.logbook-content .discovery-summary,
.logbook-content .discovery p,
.logbook-content .next-mission-summary,
.logbook-content .challenge-card-desc,
.logbook-content .postcard-caption,
.logbook-content .view-text {
  color: var(--color-text);
  font-weight: 400;
}

.logbook-content .numbers-context {
  color: var(--color-text-muted);
  font-weight: 400;
}

/* ===========================================================================
   Compare overlay - side-by-side stats for any two bodies.
   Visually consistent with the logbook (terminal aesthetic, corner brackets),
   but smaller and content-only - no background hero.
   =========================================================================== */
.compare-overlay {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.compare-overlay[hidden] { display: none; }

.compare-overlay.entering {
  animation: overlayIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.compare-overlay.entering .compare-card {
  animation: compareSoftIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.compare-overlay.exiting {
  pointer-events: none;
  animation: overlayOut 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.compare-overlay.exiting .compare-card {
  animation: compareSoftOut 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes compareSoftIn {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes compareSoftOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.985); }
}

.compare-card {
  position: relative;
  width: min(1100px, 100%);
  max-height: calc(100vh - 4rem);
  display: flex;
  flex-direction: column;
  background: rgba(6, 9, 16, 0.94);
  border: 1px solid rgba(125, 211, 252, 0.25);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.6),
    0 0 60px rgba(125, 211, 252, 0.04) inset;
  overflow: hidden;
}

.compare-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--color-accent);
  background: transparent;
  pointer-events: none;
}
.compare-corner--tl { top: 6px; left: 6px; border-top: 1px solid; border-left: 1px solid; }
.compare-corner--tr { top: 6px; right: 6px; border-top: 1px solid; border-right: 1px solid; }
.compare-corner--bl { bottom: 6px; left: 6px; border-bottom: 1px solid; border-left: 1px solid; }
.compare-corner--br { bottom: 6px; right: 6px; border-bottom: 1px solid; border-right: 1px solid; }

.compare-titlebar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1.2rem;
  border-bottom: 1px solid rgba(125, 211, 252, 0.18);
  background: rgba(125, 211, 252, 0.03);
}

.compare-titlebar-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.compare-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  background: transparent;
  cursor: pointer;
  position: relative;
  z-index: 5;
  transition: all 0.2s var(--ease-soft);
}

.compare-close:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: rgba(125, 211, 252, 0.08);
  transform: rotate(90deg);
}

.compare-pickers {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid rgba(125, 211, 252, 0.12);
  background: rgba(0, 0, 0, 0.2);
}

.compare-picker {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.compare-picker-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  color: var(--color-accent);
  width: 18px;
  flex-shrink: 0;
}

.compare-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.compare-chip {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--color-border);
  background: rgba(0, 0, 0, 0.3);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.2s var(--ease-soft);
}

.compare-chip:hover {
  color: var(--color-text);
  border-color: rgba(125, 211, 252, 0.5);
}

.compare-chip.active {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: rgba(125, 211, 252, 0.12);
}

.compare-chip[disabled] {
  opacity: 0.35;
  pointer-events: none;
}

.compare-grid {
  flex: 1;
  overflow-y: auto;
  padding: 1.2rem 1.4rem 1.6rem;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}

.compare-grid::-webkit-scrollbar { width: 6px; }
.compare-grid::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 3px; }

.compare-headline {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0.9rem;
}

.compare-headline-name {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.01em;
}

.compare-headline-name--a { text-align: left; }
.compare-headline-name--b { text-align: right; }

.compare-headline-vs {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  color: var(--color-text-faint);
  padding-bottom: 0.3rem;
}

.compare-row {
  display: grid;
  grid-template-columns: 1fr 160px 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.compare-row:last-child { border-bottom: none; }

.compare-cell {
  font-family: var(--font-tech);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text);
}

.compare-cell--a { text-align: left; }
.compare-cell--b { text-align: right; }

.compare-label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  text-align: center;
}

.compare-empty {
  text-align: center;
  padding: 3rem 0;
  font-family: var(--font-body);
  color: var(--color-text-faint);
  font-size: 0.92rem;
}

@media (max-width: 760px) {
  .compare-headline { grid-template-columns: 1fr; gap: 0.4rem; text-align: center; }
  .compare-headline-name--a, .compare-headline-name--b { text-align: center; }
  .compare-row { grid-template-columns: 1fr; gap: 0.2rem; text-align: center; padding: 0.85rem 0; }
  .compare-cell--a, .compare-cell--b { text-align: center; }
  .compare-label { text-align: center; }
}

/* ===========================================================================
   Missions dock - slim right-edge panel that pairs with trajectory mode in
   the 3D scene. Lists every mission; click an entry to highlight its
   trajectory. Solar system stays visible on the left.
   =========================================================================== */
.missions-dock {
  position: fixed;
  top: 0;
  right: 0;
  width: min(380px, 92vw);
  height: 100vh;
  z-index: 45;
  background: rgba(6, 9, 16, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-left: 1px solid rgba(125, 211, 252, 0.25);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.5s var(--ease-cinematic);
  overflow: hidden;
}

.missions-dock[hidden] { display: none; }

.missions-dock.open { transform: translateX(0); }

.missions-dock-titlebar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.2rem;
  border-bottom: 1px solid rgba(125, 211, 252, 0.18);
  background: rgba(125, 211, 252, 0.03);
}

/* Prominent back banner shown at the top of the dock while a station is
   being tracked. The user's eye lands on the dock first - putting the
   back affordance here makes it impossible to miss. Full-width, accent
   color, big chevron + bold label + secondary line ("Currently tracking X"). */
.missions-tracking-banner {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.85rem 1.2rem;
  border: none;
  border-bottom: 1px solid var(--color-accent);
  background: rgba(125, 211, 252, 0.12);
  color: var(--color-accent);
  text-align: left;
  cursor: pointer;
  transition: background 0.2s var(--ease-soft);
  font-family: inherit;
}
.missions-tracking-banner[hidden] { display: none; }
.missions-tracking-banner:hover {
  background: rgba(125, 211, 252, 0.22);
}
.missions-tracking-banner[data-status="past"] {
  border-bottom-color: rgba(156, 163, 175, 0.8);
  background: rgba(156, 163, 175, 0.1);
  color: rgba(229, 231, 235, 0.95);
}
.missions-tracking-banner[data-status="upcoming"] {
  border-bottom-color: var(--color-accent-warm);
  background: rgba(251, 191, 36, 0.1);
  color: var(--color-accent-warm);
}
.missions-tracking-banner-arrow {
  flex: 0 0 auto;
  font-family: var(--font-tech);
  font-size: 2rem;
  line-height: 0.6;
  font-weight: 300;
}
.missions-tracking-banner-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.missions-tracking-banner-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
}
.missions-tracking-banner-sub {
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: var(--color-text-muted);
  font-weight: 400;
  letter-spacing: 0;
}

.missions-dock-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.missions-dock-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  background: transparent;
  cursor: pointer;
  transition: all 0.2s var(--ease-soft);
}

.missions-dock-close:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: rgba(125, 211, 252, 0.08);
  transform: rotate(90deg);
}

.missions-legend {
  flex-shrink: 0;
  padding: 0.85rem 1.2rem;
  border-bottom: 1px solid rgba(125, 211, 252, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.missions-legend-row {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 0.7rem;
}

.missions-legend-swatch {
  height: 2px;
  width: 100%;
  align-self: center;
}

.missions-legend-swatch--idle {
  height: 3px;
  background: linear-gradient(to right, #9aa3b3 0 5px, transparent 5px 10px) repeat-x;
  background-size: 10px 100%;
  opacity: 0.85;
}
.missions-legend-swatch--highlight {
  height: 3px;
  background: linear-gradient(to right, #7dd3fc 0 5px, transparent 5px 10px) repeat-x;
  background-size: 10px 100%;
  filter: drop-shadow(0 0 4px rgba(125, 211, 252, 0.5));
}
.missions-legend-swatch--dots {
  height: 8px;
  background: radial-gradient(circle 3px at 8px 4px, #ffffff 0 3px, transparent 3px),
              radial-gradient(circle 3px at 28px 4px, #f5c16c 0 3px, transparent 3px);
  background-repeat: no-repeat;
}

.missions-legend-text {
  font-family: var(--font-body);
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--color-text-muted);
}

.missions-legend-text strong {
  font-family: var(--font-tech);
  font-weight: 600;
  color: var(--color-text);
  display: block;
  font-size: 0.78rem;
  letter-spacing: -0.005em;
  margin-bottom: 0.1rem;
}

/* Primary view tabs above the legend - similar treatment to the side
   panel's Overview/Conditions tabs, but inside the missions dock. */
.missions-views {
  flex-shrink: 0;
  display: flex;
  gap: 1.4rem;
  padding: 0.85rem 1.2rem 0;
  border-bottom: 1px solid var(--color-border);
}

.missions-view {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.4rem 0 0.6rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.2s var(--ease-soft), border-color 0.2s var(--ease-soft);
}

.missions-view:hover { color: var(--color-text); }

.missions-view.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.missions-filters {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid rgba(125, 211, 252, 0.12);
  background: rgba(0, 0, 0, 0.2);
}

.missions-filter {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--color-border);
  background: rgba(0, 0, 0, 0.3);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.2s var(--ease-soft);
}

.missions-filter:hover {
  color: var(--color-text);
  border-color: rgba(125, 211, 252, 0.5);
}

.missions-filter.active {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: rgba(125, 211, 252, 0.12);
}

.missions-list {
  flex: 1;
  overflow-y: auto;
  padding: 1.2rem 1.4rem 1.6rem;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}

.missions-list::-webkit-scrollbar { width: 6px; }
.missions-list::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 3px; }

/* Status-grouped sections in the dock list. */
.missions-status-section { margin-bottom: 1rem; }
.missions-status-section:last-child { margin-bottom: 0; }

.missions-status-label {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin: 0 0 0.55rem;
}

.missions-entry {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.7rem 0.85rem;
  border-left: 2px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
  margin-bottom: 0.4rem;
  cursor: pointer;
  transition: background 0.2s var(--ease-soft),
              border-color 0.2s var(--ease-soft);
}

.missions-entry:hover {
  background: rgba(125, 211, 252, 0.06);
}

.missions-entry.active {
  background: rgba(125, 211, 252, 0.12);
  border-left-color: var(--color-accent);
}

.missions-entry--past     { border-left-color: rgba(138, 147, 166, 0.5); }
.missions-entry--current  { border-left-color: var(--color-accent); }
.missions-entry--upcoming { border-left-color: var(--color-accent-warm); }

/* Info-only entry (mission listed but no 3D trajectory data). Slightly
   muted text so the trajectory-having ones still feel like the primary
   interactive items. */
.missions-entry--info .missions-entry-name {
  color: var(--color-text-muted);
}
.missions-entry--info:hover .missions-entry-name {
  color: var(--color-text);
}

/* Plain info entries (voyage events / next missions that aren't stations)
   have no meaningful click action - we don't want to suggest interactivity
   they don't deliver. Remove the pointer + hover background + active state
   entirely so they read as static reference text. */
.missions-entry--info:not(.missions-entry--station) {
  cursor: default;
  pointer-events: none;  /* no hover, no click — truly inert */
}
/* Keep child anchor links clickable if any future entry adds them. */
.missions-entry--info:not(.missions-entry--station) a {
  pointer-events: auto;
}

/* Station entries DO have rich click behavior (photo + locate). Reinforce
   that with a chevron in the head row and a hint line below the name so
   users know there's more to see. */
.missions-entry--station .missions-entry-name::after {
  content: ' ▾';
  color: var(--color-accent);
  font-size: 0.7rem;
  opacity: 0.85;
  transition: transform 0.2s var(--ease-soft);
  display: inline-block;
}
.missions-entry--station.active .missions-entry-name::after {
  transform: rotate(180deg);
}
.missions-entry--station .missions-entry-name {
  color: var(--color-text);  /* override the --info dim */
}
.missions-entry--station-hint {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  opacity: 0.65;
  margin-top: 0.2rem;
}
.missions-entry--station.active .missions-entry--station-hint {
  display: none;
}

.missions-entry-name {
  font-family: var(--font-tech);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.005em;
  line-height: 1.2;
}

.missions-entry-route {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-tech);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-top: 0.15rem;
}

.missions-entry-arrow {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  line-height: 1;
}

.missions-entry-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.missions-entry-agency { color: var(--color-text-muted); }

.missions-entry-summary {
  font-family: var(--font-body);
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--color-text-muted);
  margin: 0.2rem 0 0;
}

/* Entry head: name/route/meta on the left, optional station thumbnail on the
   right. For non-station entries the thumbnail slot is empty, so the head
   simply renders the text block at full width. */
.missions-entry-head {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}
.missions-entry-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* Small clickable photo preview for station entries. Acts as the "rectangle"
   that hints the entry has a photo. Clicking it (or the entry itself) toggles
   the expanded photo panel below. */
.station-thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  background: linear-gradient(135deg, rgba(125, 211, 252, 0.06), rgba(8, 14, 28, 0.4));
  cursor: pointer;
  padding: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s var(--ease-soft),
              transform 0.2s var(--ease-soft);
}
.station-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.station-thumb-fallback {
  display: none;
  font-size: 1rem;
  color: var(--color-accent);
  opacity: 0.65;
}
.station-thumb--missing img { display: none; }
.station-thumb--missing .station-thumb-fallback { display: inline; }
.station-thumb--missing { cursor: default; }
.station-thumb:not(.station-thumb--missing):hover {
  border-color: var(--color-accent);
  transform: scale(1.04);
}
.missions-entry--station.active .station-thumb {
  border-color: var(--color-accent);
}

/* Hidden by default; reveals the full-size station photo + caption when the
   entry is .active. Same toggle pattern as .missions-entry-playback. */
.station-photo-panel {
  display: none;
  margin-top: 0.6rem;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--color-border);
  animation: stationPhotoReveal 0.35s var(--ease-soft);
}
.missions-entry--station.active .station-photo-panel {
  display: block;
}
.station-photo-frame {
  width: 100%;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--color-border);
  overflow: hidden;
}
.station-photo-img {
  display: block;
  width: 100%;
  height: auto;
}
.station-photo-caption {
  font-family: var(--font-body);
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--color-text-muted);
  margin-top: 0.45rem;
}
.station-photo-credit {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-top: 0.25rem;
}
@keyframes stationPhotoReveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* CTA: fly the camera in tight on the station's primary body so the live
   marker and orbit ring are visible at scale. */
.station-track-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.6rem;
  padding: 0.5rem 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid var(--color-accent);
  background: rgba(125, 211, 252, 0.08);
  color: var(--color-accent);
  cursor: pointer;
  transition: background 0.2s var(--ease-soft);
}
.station-track-btn::before {
  content: '◎';
  font-size: 0.85rem;
  letter-spacing: 0;
}
.station-track-btn:hover {
  background: rgba(125, 211, 252, 0.2);
}

/* Photo fallback: a styled identity card shown if the img onerror handler
   fires. Becomes the "rectangle visual" of the station - name, agency, and
   status, on a status-colored gradient. Reads as intentional, not broken. */
.station-photo-frame {
  position: relative;
  min-height: 0;
}
.station-photo-fallback {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0.35rem;
  min-height: 160px;
  padding: 1.1rem 1.05rem;
  background: linear-gradient(135deg, rgba(125, 211, 252, 0.08), rgba(8, 14, 28, 0.6));
  border: 1px solid var(--color-border);
}
.station-photo-frame--missing .station-photo-fallback {
  display: flex;
}
.station-photo-frame[data-status="past"] .station-photo-fallback {
  background: linear-gradient(135deg, rgba(156, 163, 175, 0.1), rgba(8, 14, 28, 0.6));
}
.station-photo-frame[data-status="upcoming"] .station-photo-fallback {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(8, 14, 28, 0.6));
}
.station-photo-fallback-badge {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-accent);
  padding: 0.18rem 0.45rem;
  border: 1px solid var(--color-accent);
}
.station-photo-frame[data-status="past"] .station-photo-fallback-badge {
  color: rgba(156, 163, 175, 0.9);
  border-color: rgba(156, 163, 175, 0.5);
}
.station-photo-frame[data-status="upcoming"] .station-photo-fallback-badge {
  color: var(--color-accent-warm);
  border-color: var(--color-accent-warm);
}
.station-photo-fallback-name {
  font-family: var(--font-tech);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
  line-height: 1.1;
}
.station-photo-fallback-agency {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Short caption under the view tabs explaining what's in each list. */
.missions-view-desc {
  margin: 0.4rem 1.4rem 0.2rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}

/* ===========================================================================
   Station tracking card - HUD overlay shown when a station is being tracked
   in 3D. Anchored to the bottom-left so it doesn't fight the missions dock
   on the right. Surfaces identity + orbit metadata + data-source attribution.
   =========================================================================== */
.station-tracking-card {
  position: fixed;
  left: var(--space-md, 1.5rem);
  bottom: var(--space-md, 1.5rem);
  z-index: 40;
  width: min(320px, calc(100vw - 3rem));
  padding: 0.95rem 1.05rem 1rem;
  background: rgba(6, 9, 16, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(125, 211, 252, 0.3);
  border-left: 2px solid var(--color-accent);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s var(--ease-soft), transform 0.3s var(--ease-soft);
  pointer-events: auto;
}
.station-tracking-card[hidden] { display: none; }
.station-tracking-card.open {
  opacity: 1;
  transform: translateY(0);
}
.station-tracking-card[data-status="past"]     { border-left-color: rgba(156, 163, 175, 0.8); }
.station-tracking-card[data-status="current"]  { border-left-color: var(--color-accent); }
.station-tracking-card[data-status="upcoming"] { border-left-color: var(--color-accent-warm); }

/* Primary (and only) "back" affordance on the info card. Bright solid
   accent so it's instantly readable as the way out. */
.station-tracking-back {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.85rem;
  padding: 0.55rem 0.95rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: rgba(6, 9, 16, 0.95);
  cursor: pointer;
  border-radius: 2px;
  transition: filter 0.15s var(--ease-soft), transform 0.15s var(--ease-soft);
}
.station-tracking-back:hover {
  filter: brightness(1.15);
  transform: translateX(-1px);
}
.station-tracking-card[data-status="past"] .station-tracking-back {
  background: rgba(229, 231, 235, 0.95);
  border-color: rgba(229, 231, 235, 0.95);
}
.station-tracking-card[data-status="upcoming"] .station-tracking-back {
  background: var(--color-accent-warm);
  border-color: var(--color-accent-warm);
}
.station-tracking-back-arrow {
  font-size: 1.1rem;
  line-height: 0.6;
  font-family: var(--font-tech);
  letter-spacing: 0;
  font-weight: 400;
}

/* Hint at the bottom of the info card explaining the shift+drag camera
   control. Subtle so it doesn't compete with the back button. */
.station-tracking-hint {
  margin-top: 0.85rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--color-border);
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.station-tracking-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.station-tracking-name {
  font-family: var(--font-tech);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--color-text);
  line-height: 1.2;
}
.station-tracking-close {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 2px;
  transition: color 0.15s var(--ease-soft), border-color 0.15s var(--ease-soft);
}
.station-tracking-close:hover {
  color: var(--color-text);
  border-color: var(--color-accent);
}

.station-tracking-source {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.7rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px dashed var(--color-border);
}
.station-tracking-card[data-status="past"] .station-tracking-source     { color: rgba(156, 163, 175, 0.95); }
.station-tracking-card[data-status="upcoming"] .station-tracking-source { color: var(--color-accent-warm); }

.station-tracking-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem 0.85rem;
}
.station-tracking-row {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.station-tracking-row-label {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.station-tracking-row-value {
  font-family: var(--font-tech);
  font-size: 0.78rem;
  color: var(--color-text);
  line-height: 1.3;
}

/* The "ISS" / "TIANGONG" / "MIR" label that follows the 3D marker on screen. */
.station-marker-label {
  position: fixed;
  z-index: 38;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.7);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s var(--ease-soft);
}
.station-marker-label[hidden] { display: none; }

/* ===========================================================================
   Celestial events overlay - upcoming sky events, annual recurring,
   historical supernovae, and active supernova candidates.
   =========================================================================== */
.events-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md, 1.5rem);
  background: rgba(2, 4, 9, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.35s var(--ease-soft);
}
.events-overlay[hidden] { display: none; }
.events-overlay.entering, .events-overlay.exiting { opacity: 1; }
.events-overlay.entering { opacity: 1; }
.events-overlay.exiting { opacity: 0; }

.events-card {
  position: relative;
  width: min(1100px, 100%);
  max-height: calc(100vh - 4rem);
  display: flex;
  flex-direction: column;
  background: rgba(6, 9, 16, 0.96);
  border: 1px solid rgba(125, 211, 252, 0.25);
}

.events-intro {
  padding: 1.1rem 1.5rem 0.4rem;
}
.events-intro p {
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}

.events-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  padding: 0.4rem 1.5rem 0;
  border-bottom: 1px solid var(--color-border);
}
.events-tab {
  padding: 0.7rem 1rem;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s var(--ease-soft), border-color 0.15s var(--ease-soft);
}
.events-tab:hover { color: var(--color-text); }
.events-tab.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* Almanac section dropdown - replaces the tab row on phone layouts.
   Hidden on desktop. */
.events-tab-select {
  display: none;
  width: 100%;
  margin: 0.55rem 0 0.2rem;
  padding: 0.6rem 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--color-accent);
  border-radius: 2px;
  outline: none;
  color-scheme: dark;
  -webkit-appearance: menulist;
  appearance: menulist;
}

.events-content {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1.4rem 1.5rem 1.6rem;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}
.events-section-intro {
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0 0 1.2rem;
  font-style: italic;
}
.events-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.events-empty {
  font-family: var(--font-body);
  color: var(--color-text-faint);
  font-style: italic;
  margin: 0;
}

/* Hero card: large, prominent treatment for the next-occurring event. */
.event-hero {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 1.2rem;
  padding: 1.4rem 1.5rem;
  margin-bottom: 1.2rem;
  background: linear-gradient(135deg, rgba(125, 211, 252, 0.1), rgba(8, 14, 28, 0.4));
  border: 1px solid var(--color-accent);
  border-left-width: 3px;
  position: relative;
  overflow: hidden;
}
.event-hero::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 220px; height: 100%;
  background: radial-gradient(circle at top right, rgba(125, 211, 252, 0.15), transparent 70%);
  pointer-events: none;
}
.event-hero--supernova { background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(8, 14, 28, 0.4)); border-color: var(--color-accent-warm); }
.event-hero-glyph {
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  opacity: 0.7;
}
.event-hero--supernova .event-hero-glyph { color: var(--color-accent-warm); }
.event-hero-glyph svg { width: 100%; height: 100%; }
.event-hero-body { min-width: 0; position: relative; z-index: 1; }
.event-hero-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.3rem;
}
.event-hero-title {
  font-family: var(--font-tech);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0 0 0.5rem;
  line-height: 1.15;
}
.event-hero-when {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.7rem;
  margin-bottom: 0.7rem;
}
.event-hero-countdown {
  font-family: var(--font-tech);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-accent);
}
.event-hero-date {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.event-hero-desc {
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--color-text);
  margin: 0 0 0.7rem;
}

/* Standard event card with glyph column. */
.event-card {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 0.85rem;
  padding: 0.95rem 1.1rem 1rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
}
.event-card-glyph {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  opacity: 0.6;
}
.event-card-glyph svg { width: 100%; height: 100%; }
.event-card--supernova .event-card-glyph,
.event-card--candidate .event-card-glyph { color: var(--color-accent-warm); }
.event-card-content { min-width: 0; }
.event-card-countdown {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.event-card-date-line {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  color: var(--color-text-muted);
  margin-bottom: 0.45rem;
}
.event-card--supernova  { border-left-color: var(--color-accent-warm); }
.event-card--candidate  { border-left-color: var(--color-accent-warm); }
.event-card--meteor     { border-left-color: var(--color-accent); }
.event-card--eclipse    { border-left-color: rgba(229, 231, 235, 0.95); }
.event-card--transit    { border-left-color: var(--color-accent); }
.event-card--asteroid   { border-left-color: rgba(220, 100, 100, 0.6); }

.event-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}
.event-card-type {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 600;
}
.event-card--supernova .event-card-type,
.event-card--candidate .event-card-type {
  color: var(--color-accent-warm);
}
.event-card-date {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}
.event-card-title {
  font-family: var(--font-tech);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin: 0 0 0.45rem;
  line-height: 1.25;
}
.event-card-desc {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0 0 0.5rem;
}
.event-card-visibility {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  color: var(--color-text-faint);
  padding-top: 0.5rem;
  border-top: 1px dashed var(--color-border);
}
.event-card-visibility strong {
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 0.5rem;
  margin-right: 0.3rem;
}

/* ---------------------------------------------------------------------------
   Body types encyclopedia + organizations directory inside the Reference
   overlay. Both share a "category header → list of entries" structure.
   --------------------------------------------------------------------------- */
.type-category, .org-category {
  margin-bottom: 2rem;
}
.type-category:last-child, .org-category:last-child { margin-bottom: 0; }
.type-category-label {
  font-family: var(--font-tech);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--color-accent);
  margin: 0 0 0.4rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--color-border);
}

.type-list, .org-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 1rem;
}

.type-entry, .org-entry {
  padding: 0.95rem 1.1rem 1rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
}

.type-entry-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}
.type-entry-name {
  font-family: var(--font-tech);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin: 0;
}
.type-entry-examples {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: var(--color-text-faint);
  font-style: italic;
}
.type-entry-summary {
  font-family: var(--font-body);
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--color-text);
  margin: 0 0 0.45rem;
}
.type-entry-details {
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}
.type-entry-details strong {
  color: var(--color-text);
  font-weight: 600;
}

/* Organizations entries: same shell, different content layout. */
.org-entry-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-bottom: 0.45rem;
}
.org-entry-name {
  font-family: var(--font-tech);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin: 0;
}
.org-entry-fullname {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-style: italic;
  color: var(--color-text-faint);
  margin-top: 0.1rem;
}
.org-entry-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  text-align: right;
}
.org-entry-summary {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--color-text);
  margin: 0 0 0.6rem;
}
.org-entry-focus {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--color-border);
}
.org-entry-focus-label {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.org-entry-focus-text {
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------------
   Constants of nature inside the Almanac. Same shell as type-entry but the
   header carries a prominent numeric "value" instead of an examples chip.
   --------------------------------------------------------------------------- */
.const-category {
  margin-bottom: 2rem;
}
.const-category:last-child { margin-bottom: 0; }
.const-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 1rem;
}
.const-entry {
  padding: 0.95rem 1.1rem 1rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
}
.const-entry-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.const-entry-name {
  font-family: var(--font-tech);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin: 0;
  flex: 1 1 50%;
  min-width: 0;
}
.const-entry-value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  text-align: right;
}
.const-entry-value-main {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--color-accent);
}
.const-entry-value-alt {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: var(--color-text-faint);
  font-style: italic;
}
.const-entry-what {
  font-family: var(--font-body);
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--color-text);
  margin: 0 0 0.4rem;
}
.const-entry-why {
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}

/* ---------------------------------------------------------------------------
   Moon phases inside the Almanac. Date picker + SVG diagram + explanation.
   --------------------------------------------------------------------------- */
.moon-picker {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 1rem 0 1.5rem;
  padding: 0.7rem 0.95rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--color-border);
}
.moon-picker-label {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.moon-picker-input {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--color-text);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--color-border);
  padding: 0.4rem 0.6rem;
  outline: none;
  color-scheme: dark;
}
.moon-picker-input:focus {
  border-color: var(--color-accent);
}
.moon-picker-today {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: transparent;
  border: 1px solid var(--color-accent);
  padding: 0.4rem 0.85rem;
  cursor: pointer;
  transition: background 0.2s var(--ease-soft), color 0.2s var(--ease-soft);
}
.moon-picker-today:hover {
  background: var(--color-accent);
  color: rgba(0, 0, 0, 0.85);
}
.moon-display {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.4rem 1.2rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
  margin-bottom: 1.2rem;
  flex-wrap: wrap;
}
.moon-diagram {
  width: 200px;
  height: 200px;
  flex: 0 0 200px;
  display: block;
}
.moon-info {
  flex: 1 1 200px;
  min-width: 0;
}
.moon-info-label {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.3rem;
}
.moon-info-name {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin: 0 0 0.9rem;
}
.moon-info-stats {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.moon-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.moon-stat-value {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--color-accent);
  letter-spacing: 0.02em;
}
.moon-stat-label {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.moon-why, .moon-logic {
  padding: 0.95rem 1.1rem 1rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  margin-bottom: 0.85rem;
}
.moon-why-label, .moon-logic-label {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 0.5rem;
}
.moon-why-text, .moon-logic-text {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0 0 0.55rem;
}
.moon-logic-text:last-child {
  margin-bottom: 0;
}
.moon-why-text strong, .moon-logic-text strong {
  color: var(--color-text);
  font-weight: 600;
}
.moon-why-text em, .moon-logic-text em {
  font-style: italic;
  color: var(--color-accent);
}

/* ---------------------------------------------------------------------------
   Constellations inside the Almanac. Each card pairs a star-pattern SVG with
   multiple cultural perspectives on the same stars.
   --------------------------------------------------------------------------- */
.constellation-card {
  margin-bottom: 2rem;
  padding: 1.2rem 1.2rem 1.1rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
}
.constellation-card:last-child { margin-bottom: 0; }
.constellation-head {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.constellation-head-text {
  flex: 1 1 240px;
  min-width: 0;
}
.constellation-name {
  font-family: var(--font-tech);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--color-accent);
  margin: 0 0 0.4rem;
}
.constellation-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: 0.55rem;
}
.constellation-summary {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--color-text);
  margin: 0;
}
.constellation-svg-wrap {
  flex: 0 0 160px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle at center, rgba(8, 12, 24, 0.85) 0%, rgba(2, 4, 10, 0.95) 100%);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
}
.constellation-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.constellation-perspectives {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--color-border);
}
.constellation-perspective {
  padding: 0.7rem 0.85rem 0.75rem;
  background: rgba(255, 255, 255, 0.02);
  border-left: 2px solid var(--color-accent);
}
.constellation-perspective-head {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin-bottom: 0.3rem;
}
.constellation-perspective-culture {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.constellation-perspective-name {
  font-family: var(--font-tech);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--color-text);
}
.constellation-perspective-story {
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}


/* ===========================================================================
   Starmap HUD - the overlay UI for the exoplanets warp-out view.
   =========================================================================== */

/* Bottom-right intro panel + catalog button. Fades in after the warp
   animation completes (CSS handles the entrance, JS toggles .open). When
   an exoplanet is selected the detail card takes this slot, so we fade
   the HUD out via body:has() rule below. */
.starmap-hud {
  position: fixed;
  bottom: var(--space-md, 1.5rem);
  right: var(--space-md, 1.5rem);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.65rem;
  max-width: 340px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--ease-soft) 0.8s, transform 0.4s var(--ease-soft) 0.8s;
}
/* When the detail card is open, slide the intro/catalog HUD out of the way
   so the selected-exoplanet info occupies the bottom-right slot. */
body:has(.exoplanet-detail.open) .starmap-hud {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.25s var(--ease-soft) 0s, transform 0.25s var(--ease-soft) 0s;
}
.starmap-hud[hidden] { display: none; }
.starmap-hud.open {
  opacity: 1;
  transform: translateY(0);
}
.starmap-catalog-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  align-self: flex-end;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--color-border);
  background: rgba(6, 9, 16, 0.7);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.15s var(--ease-soft), border-color 0.15s var(--ease-soft);
}
.starmap-catalog-btn:hover {
  background: rgba(125, 211, 252, 0.12);
  border-color: var(--color-accent);
}
.starmap-catalog-btn-icon { font-size: 0.85rem; letter-spacing: 0; }
.starmap-intro {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.85rem 1rem;
  background: rgba(6, 9, 16, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-left: 2px solid var(--color-accent);
}
.starmap-intro-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.starmap-intro-sub {
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}

/* Exoplanet detail card - bottom-right, slides in when a star is clicked. */
.exoplanet-detail {
  position: fixed;
  right: var(--space-md, 1.5rem);
  bottom: var(--space-md, 1.5rem);
  z-index: 40;
  width: min(360px, calc(100vw - 3rem));
  padding: 1rem 1.1rem 1.1rem;
  background: rgba(6, 9, 16, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(125, 211, 252, 0.25);
  border-left: 2px solid var(--color-accent);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s var(--ease-soft), transform 0.3s var(--ease-soft);
}
.exoplanet-detail[hidden] { display: none; }
.exoplanet-detail.open {
  opacity: 1;
  transform: translateY(0);
}
.exoplanet-detail-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 22px;
  height: 22px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 2px;
  transition: color 0.15s var(--ease-soft), border-color 0.15s var(--ease-soft);
}
.exoplanet-detail-close:hover {
  color: var(--color-text);
  border-color: var(--color-accent);
}
.exoplanet-detail-system {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: 0.2rem;
}
.exoplanet-detail-name {
  font-family: var(--font-tech);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin: 0 0 0.5rem;
  line-height: 1.15;
}
.exoplanet-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.7rem;
}
.exoplanet-detail-badge {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.22rem 0.45rem;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.exoplanet-detail-badge--habitable {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: rgba(125, 211, 252, 0.08);
}
.exoplanet-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem 0.85rem;
  padding-bottom: 0.7rem;
  margin-bottom: 0.7rem;
  border-bottom: 1px dashed var(--color-border);
}
.exoplanet-detail-row { display: flex; flex-direction: column; gap: 0.1rem; }
.exoplanet-detail-row-label {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.exoplanet-detail-row-value {
  font-family: var(--font-tech);
  font-size: 0.78rem;
  color: var(--color-text);
  line-height: 1.3;
}
.exoplanet-detail-summary {
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0;
}

/* Distance-from-Sun callout - the visual headline stat. Larger type, bright
   accent color, contextual subtitle so the number feels real. */
.exoplanet-detail-distance {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.7rem 0.85rem;
  margin-bottom: 0.7rem;
  background: rgba(125, 211, 252, 0.08);
  border-left: 2px solid var(--color-accent);
}
.exoplanet-detail-distance-label {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.exoplanet-detail-distance-value {
  font-family: var(--font-tech);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
  line-height: 1.1;
}
.exoplanet-detail-distance-context {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-style: italic;
  color: var(--color-text-muted);
  line-height: 1.35;
}

/* Nearest-neighbors section: clickable rows of catalog neighbors with their
   actual 3D separation in light-years. Clicking a row jumps to that star. */
.exoplanet-detail-neighbors {
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--color-border);
}
.exoplanet-detail-neighbors-label {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: 0.4rem;
}
.exoplanet-detail-neighbors-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.exoplanet-detail-neighbor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.4rem 0.55rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: background 0.15s var(--ease-soft), border-color 0.15s var(--ease-soft);
  font-family: inherit;
  color: inherit;
}
.exoplanet-detail-neighbor:hover {
  background: rgba(125, 211, 252, 0.08);
  border-color: var(--color-accent);
}
.exoplanet-detail-neighbor-name {
  font-family: var(--font-tech);
  font-size: 0.72rem;
  color: var(--color-text);
  text-align: left;
}
.exoplanet-detail-neighbor-dist {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--color-accent);
}

/* Floating star name labels anchored to each 3D exoplanet marker. */
.exoplanet-labels {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 38;
}
.exoplanet-label {
  position: absolute;
  transform: translate(12px, -8px);
  padding: 0.2rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text);
  background: rgba(6, 9, 16, 0.65);
  border: 1px solid rgba(125, 211, 252, 0.3);
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
  transition: opacity 0.2s var(--ease-soft), background 0.15s var(--ease-soft);
  opacity: 0;
}
.exoplanet-label:hover {
  background: rgba(125, 211, 252, 0.18);
  opacity: 1 !important;
}
.exoplanet-label--habitable {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.exoplanet-label.selected {
  background: var(--color-accent);
  color: rgba(6, 9, 16, 0.95);
  border-color: var(--color-accent);
}


/* SOL "you are here" label anchored on the Sun in starmap mode. Visually
   distinct from exoplanet labels (warm gold instead of cyan) so it's
   immediately recognizable as the home star. */
.sol-marker-label {
  position: fixed;
  z-index: 38;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.3rem 0.55rem;
  background: rgba(6, 9, 16, 0.75);
  border: 1px solid rgba(251, 191, 36, 0.6);
  border-radius: 2px;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s var(--ease-soft);
}
.sol-marker-label[hidden] { display: none; }
.sol-marker-label-name {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent-warm);
}
.sol-marker-label-sub {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-style: italic;
  color: var(--color-text-muted);
}

/* ===========================================================================
   About overlay - credits, design statement, copyright, AI disclosure.
   Reached via the small ⓘ button below the brand wordmark.
   =========================================================================== */
.about-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md, 1.5rem);
  background: rgba(2, 4, 9, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s var(--ease-soft);
}
.about-overlay[hidden] { display: none; }
.about-overlay.open { opacity: 1; }

.about-card {
  position: relative;
  width: min(540px, 100%);
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  padding: 2rem 2.2rem 1.6rem;
  background: rgba(6, 9, 16, 0.96);
  border: 1px solid rgba(125, 211, 252, 0.25);
  border-left: 2px solid var(--color-accent);
  transform: translateY(10px);
  transition: transform 0.35s var(--ease-soft);
}
.about-overlay.open .about-card {
  transform: translateY(0);
}

.about-close {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 2px;
  transition: color 0.15s var(--ease-soft), border-color 0.15s var(--ease-soft);
}
.about-close:hover {
  color: var(--color-text);
  border-color: var(--color-accent);
}

.about-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-accent);
  display: block;
  margin-bottom: 0.4rem;
}
.about-title {
  font-family: var(--font-tech);
  font-size: 2rem;
  letter-spacing: 0.04em;
  color: var(--color-text);
  margin: 0 0 0.55rem;
  line-height: 1;
}
.about-subtitle {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}

.about-section {
  margin-top: 1.45rem;
}
.about-section-label {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin: 0 0 0.5rem;
}
.about-section p {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--color-text);
  margin: 0 0 0.55rem;
}
.about-section p:last-child { margin-bottom: 0; }

.about-credits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.about-credits li {
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  padding-left: 0.85rem;
  border-left: 1px solid var(--color-border);
}
.about-credits strong {
  color: var(--color-text);
  font-weight: 600;
}

.about-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.7rem;
}
.about-link {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: rgba(6, 9, 16, 0.95);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: filter 0.15s var(--ease-soft);
}
.about-link:hover { filter: brightness(1.15); }
.about-link--secondary {
  background: transparent;
  color: var(--color-accent);
}
.about-link--secondary:hover {
  background: rgba(125, 211, 252, 0.1);
  filter: none;
}

.about-footer {
  margin-top: 1.6rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.about-copyright,
.about-tagline {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.about-copyright { color: var(--color-text-muted); }

/* ===========================================================================
   FAQ tab: accordion of common questions about a world.
   =========================================================================== */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.faq-item {
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
  transition: border-color 0.15s var(--ease-soft);
}
.faq-item:hover { border-color: rgba(125, 211, 252, 0.3); }
.faq-item.open { border-color: var(--color-accent); }

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 0.95rem 1.1rem;
  background: transparent;
  border: none;
  color: var(--color-text);
  font-family: var(--font-tech);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-align: left;
  line-height: 1.35;
  cursor: pointer;
}
.faq-item.open .faq-question { color: var(--color-accent); }

.faq-question-icon {
  flex: 0 0 auto;
  font-family: var(--font-tech);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
  color: var(--color-accent);
  transition: transform 0.2s var(--ease-soft);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  transition: max-height 0.3s var(--ease-soft), padding 0.3s var(--ease-soft);
  padding: 0 1.1rem;
}
.faq-item.open .faq-answer {
  max-height: 500px;
  padding: 0 1.1rem 1rem;
}

/* ===========================================================================
   Listen tab: NASA audio + sonifications inside the logbook.
   =========================================================================== */
.audio-list {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.audio-track {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.1rem 1.25rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
}
.audio-track-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.15rem;
}
.audio-track-kind {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.audio-track-year {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  color: var(--color-text-faint);
}
.audio-track-title {
  font-family: var(--font-tech);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin: 0;
  line-height: 1.2;
}
.audio-track-desc {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}
.audio-track-player {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.45rem;
}
.audio-play-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--color-accent);
  background: rgba(125, 211, 252, 0.1);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.15s var(--ease-soft);
  min-width: 90px;
  justify-content: center;
}
.audio-play-btn:hover { background: rgba(125, 211, 252, 0.22); }
.audio-play-btn.playing {
  background: var(--color-accent);
  color: rgba(6, 9, 16, 0.95);
}
.audio-play-btn--error {
  border-color: var(--color-border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--color-text-faint);
  cursor: not-allowed;
}
.audio-play-icon { font-size: 0.85rem; letter-spacing: 0; }
.audio-progress {
  flex: 1 1 auto;
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  position: relative;
}
.audio-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--color-accent);
  transition: width 0.1s linear;
}
.audio-time {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  min-width: 70px;
  text-align: right;
}
.audio-track-credit {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-top: 0.25rem;
}

/* Playback controls inside a mission entry. Hidden by default; shown only
   when the entry is .active. */
.missions-entry-playback {
  display: none;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.5rem;
  padding-top: 0.45rem;
  border-top: 1px dashed var(--color-border);
}

.missions-entry.active .missions-entry-playback {
  display: flex;
}

.missions-play-btn {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--color-accent);
  background: rgba(125, 211, 252, 0.08);
  color: var(--color-accent);
  cursor: pointer;
  transition: background 0.2s var(--ease-soft);
}

.missions-play-btn:hover {
  background: rgba(125, 211, 252, 0.18);
}

.missions-play-date {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
}

/* ===========================================================================
   Mission flight card - top-center overlay shown during trajectory mode for
   the selected mission. Echoes flight-tracker apps (BCN -> LHR style).
   =========================================================================== */
.mission-flightcard {
  position: fixed;
  top: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  z-index: 35;
  width: min(560px, calc(100vw - 4rem));
  background: rgba(6, 9, 16, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(125, 211, 252, 0.25);
  padding: 0.85rem 1.2rem 1rem;
  opacity: 0;
  transform: translateX(-50%) translateY(-12px);
  transition: opacity 0.35s var(--ease-soft),
              transform 0.35s var(--ease-soft);
  pointer-events: none;
}

.mission-flightcard[hidden] { display: none; }

.mission-flightcard.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* Shift flightcard left when the side panel or missions dock is open so it
   stays centered in the visible viewport. */
body:has(.missions-dock.open) .mission-flightcard {
  left: calc((100vw - min(380px, 92vw)) / 2);
}
body:has(#panel.open) .mission-flightcard {
  left: calc((100vw - min(440px, 92vw)) / 2);
}

.flightcard-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}

.flightcard-status {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding: 0.25rem 0.55rem;
  border-radius: 1px;
  background: rgba(125, 211, 252, 0.12);
  color: var(--color-accent);
}

.flightcard-status[data-status="past"] {
  background: rgba(154, 163, 179, 0.15);
  color: var(--color-text-muted);
}

.flightcard-status[data-status="upcoming"] {
  background: rgba(245, 193, 108, 0.15);
  color: var(--color-accent-warm);
}

.flightcard-agency {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.flightcard-name {
  font-family: var(--font-display);
  font-size: 1.55rem;
  letter-spacing: -0.005em;
  line-height: 1.1;
  margin: 0 0 0.5rem;
  color: var(--color-text);
}

.flightcard-route {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: center;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(125, 211, 252, 0.12);
}

.flightcard-end {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.flightcard-end--to { text-align: right; }

.flightcard-label {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.flightcard-place {
  font-family: var(--font-tech);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--color-text);
}

.flightcard-year {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  color: var(--color-text-muted);
}

.flightcard-arrow {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-accent);
  text-align: center;
}

/* ===========================================================================
   Bottom timeline scrubber - play / pause + draggable position thumb.
   =========================================================================== */
.mission-timeline {
  position: fixed;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  z-index: 35;
  width: min(680px, calc(100vw - 4rem));
  background: rgba(6, 9, 16, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(125, 211, 252, 0.25);
  padding: 0.7rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  opacity: 0;
  transform: translateX(-50%) translateY(12px);
  transition: opacity 0.35s var(--ease-soft),
              transform 0.35s var(--ease-soft);
  pointer-events: none;
}

.mission-timeline[hidden] { display: none; }

.mission-timeline.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

body:has(.missions-dock.open) .mission-timeline {
  left: calc((100vw - min(380px, 92vw)) / 2);
}
body:has(#panel.open) .mission-timeline {
  left: calc((100vw - min(440px, 92vw)) / 2);
}

.timeline-play {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  border: 1px solid var(--color-accent);
  background: rgba(125, 211, 252, 0.12);
  color: var(--color-accent);
  cursor: pointer;
  transition: all 0.2s var(--ease-soft);
}

.timeline-play:hover {
  background: rgba(125, 211, 252, 0.22);
}

.timeline-info {
  flex: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.6rem;
}

.timeline-year-start,
.timeline-year-end {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
}

.timeline-track {
  position: relative;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  cursor: pointer;
}

.timeline-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--color-accent);
  border-radius: 2px;
}

.timeline-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-accent);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px rgba(125, 211, 252, 0.2);
  cursor: grab;
}

.timeline-thumb:active { cursor: grabbing; }

.timeline-date {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--color-text);
  min-width: 88px;
  text-align: right;
}

.missions-empty {
  text-align: center;
  padding: 3rem 0;
  font-family: var(--font-body);
  color: var(--color-text-faint);
  font-size: 0.86rem;
}

/* ===========================================================================
   Exoplanets overlay - catalog of notable confirmed exoplanets.
   =========================================================================== */
.exoplanets-overlay {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.exoplanets-overlay[hidden] { display: none; }

.exoplanets-overlay.entering {
  animation: overlayIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.exoplanets-overlay.entering .exoplanets-card {
  animation: compareSoftIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.exoplanets-overlay.exiting {
  pointer-events: none;
  animation: overlayOut 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.exoplanets-overlay.exiting .exoplanets-card {
  animation: compareSoftOut 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.exoplanets-card {
  position: relative;
  width: min(1180px, 100%);
  max-height: calc(100vh - 4rem);
  display: flex;
  flex-direction: column;
  background: rgba(6, 9, 16, 0.94);
  border: 1px solid rgba(125, 211, 252, 0.25);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.6),
    0 0 60px rgba(125, 211, 252, 0.04) inset;
  overflow: hidden;
}

.exoplanets-intro {
  flex-shrink: 0;
  padding: 1rem 1.4rem 0.4rem;
  border-bottom: 1px solid rgba(125, 211, 252, 0.08);
}

.exoplanets-intro p {
  font-family: var(--font-body);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
  padding-bottom: 0.6rem;
}

.exoplanets-grid {
  flex: 1;
  overflow-y: auto;
  padding: 1.2rem 1.4rem 1.6rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}

.exoplanets-grid::-webkit-scrollbar { width: 6px; }
.exoplanets-grid::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 3px; }

.exoplanet-card {
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-soft), background 0.2s var(--ease-soft), transform 0.15s var(--ease-soft);
}
.exoplanet-card:hover { transform: translateY(-2px); }

.exoplanet-card:hover {
  border-color: rgba(125, 211, 252, 0.35);
  background: rgba(125, 211, 252, 0.04);
}

.exoplanet-card.habitable {
  border-left: 3px solid var(--color-accent);
}

.exoplanet-name {
  font-family: var(--font-tech);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--color-text);
}

.exoplanet-system {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.exoplanet-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 1rem;
  margin: 0.3rem 0 0.5rem;
}

.exoplanet-stat-label {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.exoplanet-stat-value {
  font-family: var(--font-tech);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-text);
  margin-top: 0.05rem;
}

.exoplanet-summary {
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0.2rem 0 0;
}

.exoplanet-habitable-badge {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  align-self: flex-start;
}


/* ===========================================================================
   Mobile responsive rules. Phone-sized viewports get a different layout for
   the HUD, modals, and tabs. Tablet (>=600px) inherits the desktop layout.
   =========================================================================== */

/* Touch legend replaces the keyboard legend on touch devices - the
   keyboard shortcuts (DRAG / SHIFT+DRAG / SCROLL / SPACE / ESC) don't
   apply to touch input. Hidden by default; shown on touch / phone layouts. */
.brand-touch-keys {
  display: none;
  list-style: none;
  margin: 0.55rem 0 0;
  padding: 0;
  flex-direction: column;
  gap: 0.22rem;
}
.brand-touch-keys li {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}
.brand-touch-keys .touch-gesture {
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-right: 0.4rem;
}

@media (hover: none) and (pointer: coarse) {
  .brand-keys { display: none; }
  .brand-touch-keys { display: flex; }
}

/* Phone layouts: portrait phones (<=600px wide) and landscape phones
   (landscape orientation with a short viewport). Both get the mobile
   treatment so a landscape phone doesn't fall back to the desktop layout
   where the HUD overlaps the brand wordmark. */
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
  /* HUD nav: 3-column grid wraps to two rows -
     row 1: Solar System | Missions | Exoplanets
     row 2: Almanac | Compare */
  .hud-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.3rem;
    top: 0.5rem;
    right: 0.5rem;
    left: auto;
    width: calc(100vw - 1rem);
  }
  .hud-nav button {
    padding: 0.45rem 0.15rem;
    font-size: 0.58rem;
    letter-spacing: 0.04em;
    text-align: center;
    min-width: 0;
    white-space: nowrap;
  }

  /* Brand sits BELOW the two-row HUD so they never overlap (the desktop
     layout put the wordmark top-left, which the full-width HUD covers).
     Keep a compact wordmark + the touch legend; drop the tagline. */
  .brand {
    top: 5.2rem;
    left: 0.7rem;
    max-width: 62vw;
  }
  .brand .wordmark { font-size: 1.2rem; }
  .brand .tagline,
  .brand .subline { display: none; }
  .brand-keys { display: none; }
  .brand-touch-keys { display: flex; }
  .brand .about-trigger {
    position: static;
    z-index: auto;
  }
  /* Don't shift HUD when panel/dock is open on phones - just hide it,
     since the open panel/dock already covers the viewport. */
  body:has(#panel.open) .hud-nav,
  body:has(.missions-dock.open) .hud-nav,
  body:has(#panel.open):has(.missions-dock.open) .hud-nav {
    right: var(--space-md);
    opacity: 0;
    pointer-events: none;
  }

  /* Full-screen modals on phones. Pin the card to the viewport with
     position:fixed so it can't be centered/clipped, and size it with
     100dvh (dynamic viewport height) which excludes the browser address
     bar - plain 100vh counts the area behind the bar and pushes the card
     header and footer out of view. */
  .events-card,
  .compare-card,
  .exoplanets-card,
  .about-card {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border: none;
    border-radius: 0;
  }
  /* Overlay padding must be zeroed too, or the flex-centered card gets
     shrunk by flex-shrink to fit inside the padding and leaves side gaps. */
  .events-overlay,
  .compare-overlay,
  .exoplanets-overlay,
  .about-overlay {
    padding: 0;
  }
  /* Full-screen cards get a fully opaque background on phones. The desktop
     cards are translucent for a glassy effect over the scene; full-screen
     on a phone that just reads as a dim layer (the logbook at 86% opacity
     looked unfinished / hard to tell apart from the dark scene). */
  .events-card,
  .compare-card,
  .exoplanets-card,
  .about-card,
  .logbook,
  .missions-dock {
    background: #060910;
  }
  /* Scrollable content inside a flex column won't scroll unless it is
     allowed to shrink below its content height - min-height:0 enables it. */
  .events-content,
  .compare-grid,
  .exoplanets-grid {
    min-height: 0;
  }

  /* Almanac sections: on phones the 7 tabs become a dropdown. The tab row
     is hard to scan/scroll on a narrow screen; a select is the native
     mobile pattern and shows every option at a tap. */
  .events-tabs {
    display: block;
    padding: 0.2rem 1rem 0.5rem;
  }
  #events-tabs .events-tab {
    display: none;
  }
  .events-tab-select {
    display: block;
  }

  /* Reduce overlay content padding on phones. */
  .events-intro,
  .events-content {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Missions dock: full-screen on phones. */
  .missions-dock {
    width: 100vw;
    max-width: 100vw;
    border-left: none;
  }

  /* Logbook: full-bleed on phones. Reset the desktop centering transform
     and pin to the top-left so the titlebar isn't clipped. 100dvh keeps
     it inside the visible viewport (excludes the address bar). max-width
     must be overridden too - the desktop rule caps it at 100vw-2.25rem,
     which would leave a gap on the right. */
  .logbook {
    top: 0;
    left: 0;
    transform: none;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
  }
  .logbook-content {
    min-height: 0;
  }
  /* The desktop logbook entry/exit animations use translate(-50%,-50%) to
     keep it centered while scaling. On phones the logbook is pinned to the
     top-left, so that translate would shove it off-screen mid-animation.
     Drop the element animation - the overlay's own opacity fade covers it. */
  .logbook-overlay.entering .logbook,
  .logbook-overlay.exiting .logbook {
    animation: none;
  }

  /* Live ticker: full-width strip pinned to the very bottom edge, NOT
     centered. Centered, it overlapped the bottom-left status + moons
     toggle. Text wraps instead of truncating with an ellipsis. */
  .live-ticker {
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.5rem;
    transform: none;
    max-width: none;
    align-items: flex-start;
  }
  .live-ticker-text {
    font-size: 0.72rem;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  /* Status + moons toggle: lifted ABOVE the bottom ticker so they don't
     collide with it. */
  .hud-status {
    bottom: 5rem;
    left: 0.7rem;
    right: auto;
  }

  /* Decorative corner brackets: hidden on phones. They sit exactly where
     the close button is pinned (top-right), so a bracket line cut across
     the X. They're a desktop flourish; full-screen mobile cards drop them. */
  .compare-corner,
  .logbook-corner {
    display: none;
  }

  /* Auxiliary cards (station tracking, exoplanet detail) - constrain width. */
  .station-tracking-card,
  .exoplanet-detail {
    left: var(--space-md);
    right: var(--space-md);
    max-width: calc(100vw - 2 * var(--space-md));
  }

  /* Almanac content layouts - stack diagrams and info on phones. */
  .moon-display {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .moon-info-stats { justify-content: center; }
  .constellation-head { flex-direction: column-reverse; align-items: stretch; }
  .constellation-svg-wrap {
    flex: 0 0 auto;
    width: 100%;
    max-width: 240px;
    height: 200px;
    margin: 0 auto;
  }

  /* Reduce modal internal padding to give content more room on narrow phones. */
  .events-intro,
  .compare-pickers,
  .exoplanets-intro {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .compare-grid { padding: 1rem; }
  .exoplanets-grid { padding: 1rem; }

  /* Compare row: stack the label between cells vertically on phones.
     The existing 760px rule does part of this; just tighten the spacing. */
  .compare-row {
    padding: 0.5rem 0;
  }

  /* Compare-pickers: stack chip rows below the A/B label for narrow widths. */
  .compare-picker {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }
  .compare-picker-label {
    width: 100%;
  }

  /* Logbook header text scales down on phones (already partly handled at
     900px; the very-narrow phones need an extra step). */
  .logbook-header { padding: 0.85rem 1rem 0.6rem; }
  .logbook-title { font-size: 1.9rem; }
  .logbook-content { padding: 1rem; }

  /* Mission entries: keep them tight on phones - they're already a list. */
  .missions-list { padding: 0.75rem 1rem; }

  /* Brand/about-trigger row on phones - keep the (i) trigger usable. */
  .brand .about-trigger {
    width: 32px;
    height: 32px;
    font-size: 1.1rem;
  }

  /* Close buttons: consistent position + size across every overlay. Pinned
     top-right of the viewport so they're always reachable, even after the
     panel content scrolls, and identical placement panel-to-panel. */
  .compare-close,
  .exoplanet-detail-close,
  .about-close,
  .panel-close,
  .missions-dock-close,
  .logbook-close {
    position: fixed;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 70;
    width: 38px;
    height: 38px;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Slightly larger tab padding so taps land easily on Almanac/logbook tabs. */
  .events-tab,
  .logbook-tab {
    padding: 0.7rem 0.85rem;
  }

  /* Moon date picker - keep input height comfortable for tap-and-pick. */
  .moon-picker-input {
    min-height: 36px;
    padding: 0.55rem 0.7rem;
  }
  .moon-picker-today {
    min-height: 36px;
    padding: 0.55rem 1rem;
  }

  /* Mission timeline scrubber: hidden on phones. With the missions dock
     taking the full screen, a bottom timeline/playback bar has nowhere
     sensible to live and overlaps the dock. */
  .mission-timeline {
    display: none !important;
  }

  /* Side panel: scroll as ONE container on phones instead of a fixed
     header + tabs with only the body scrolling. The header, tabs, and
     footer all scroll with the content so the whole panel is reachable
     and the content area isn't squeezed into a small middle band. */
  #panel {
    width: 100vw;
    height: 100dvh;
    display: block;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .panel-header { flex-shrink: 1; }
  .panel-body {
    flex: none;
    overflow-y: visible;
  }
  .panel-footer { flex-shrink: 1; }
  /* Panel close button: the panel scrolls as one container, so the close
     button is sticky (rides along at the top) rather than fixed - a fixed
     child of the transformed #panel would scroll away with the content. */
  #panel .panel-close {
    position: sticky;
    float: right;
    top: 0.55rem;
    margin: 0.55rem 0.55rem -2.7rem 0;
  }
}

/* Phone landscape: the loader's centered card can crowd horizontal space.
   Tighten margins so the wordmark stays centered with breathing room. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .loader-inner {
    padding: 1.5rem 1rem;
  }
  .loader-wordmark {
    font-size: 2.2rem;
  }
  .loader-tagline {
    font-size: 0.7rem;
  }
}