/* ============================================================
   Solar System — responsive.css
   Designed breakpoints (not a final patch). Desktop shows the
   full orbital composition; tablet reduces scale; mobile gives
   the orrery a dedicated region + prominent planet selector.
   ============================================================ */

@media (max-width: 1080px) {
  .orrery { --size: min(48vw, 500px); }
}

/* tablet — stack, keep ordering / labels / selection / hierarchy */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; gap: 28px; }
  .hero__lede { max-width: none; }
  .hero__orrery { min-height: 60vw; }
  .orrery { --size: min(82vw, 470px); margin-inline: auto; }
  .readout { position: static; width: 100%; margin-top: 16px; }
}

/* mobile — keep a persistent map affordance in the nav; selector + orrery below */
@media (max-width: 720px) {
  /* Previously this hid EVERY link but the first. That rule predates the article
     pages, and it made formation / exploration / instruments unreachable from the
     nav on a phone — the topbar was their only route in. Instead, drop the in-page
     anchors (reachable by scrolling anyway) and keep the pages, which are not. */
  .nav__links a[href^="#"]:not(:first-child) { display: none; }
  .nav__links { flex-wrap: wrap; gap: 2px; justify-content: flex-end; }
  .nav__links a {
    display: inline-flex; align-items: center; min-height: 44px;
    padding: 8px 11px; font-size: .86rem;
  }
  .panel { padding: 18px; border-radius: 22px; min-height: 0; }
  .hero__title { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .orrery { --size: min(86vw, 420px); }
  .selector { gap: 12px 18px; }
  .selector__label { width: 100%; }
  .source-tag { width: 100%; }
  /* comfortable touch targets (≥44px) */
  .selector__list a { padding: 11px 16px; min-height: 44px; }
  .neighbors a { min-height: 44px; }
  .readout__arrow { width: 44px; height: 44px; }
  .planet::after { inset: -16px; }            /* keep small planets easy to tap */
}

@media (max-width: 460px) {
  .stage { padding: 8px; }
  .orrery { --size: 90vw; }
  .btn--lg { padding: 12px 18px; font-size: .95rem; }
  .planet::after { inset: -16px; }
}

/* ── reduced motion: freeze decorative movement, keep usability ──
   Every animation/transition introduced across components.css,
   planet.css and sections.css is frozen here — functionality (hover
   feedback, Explorer mode, resizing) is preserved, only the motion is
   removed, per prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  .orbit__spin, .planet__body, .planet__body::after, .planet__tagspin,
  .sun__core, .sun__core::before,
  .sun-visual__core, .sun-visual__core::before, .sun-visual__core::after,
  .scroll-cue__dot { animation: none !important; }
  .panel, .hero, .selector { animation: none !important; }
  .btn, .btn__chev, .planet__body, .back svg, .orbit,
  .widget, .mission-item, .mission-item__more, .readout, .readout__arrow, .scroll-cue,
  .orrery, .section--menu > .section__card { transition: none !important; }
}