/* ============================================================================
   Orbit Axis — Navigation states
   ----------------------------------------------------------------------------
   app.css owns where the navigation SITS (sidebar above 1024px, bottom tab bar
   below it). This file owns what it SAYS: which destination you are on, and how
   that reads without relying on colour.

   ONE navigation model, five destinations, rendered from one list of links:

     Today · Chart · Sky · Atlas · You

   The phone bar and the desktop sidebar are the same DOM. Two sets of markup
   are two places for the order, the labels, and the current page to disagree,
   and they always eventually do.
   ========================================================================== */

/* ── The icon weight swap ────────────────────────────────────────────────────
   Every tab ships both Phosphor weights: the outline for the destinations you
   are not on, the solid for the one you are. That is the iOS convention, and it
   is the part of "you are here" that still works in greyscale, at 10px, and for
   a reader who cannot separate the accent tint from the surface behind it.

   Both glyphs are in the DOM and one is hidden, rather than swapping markup on
   navigation — so the active state cannot desynchronise from aria-current, and
   there is no repaint flicker on the tab you just left. */
.rail__icon--fill { display: none; }
.rail__link[aria-current="page"] .rail__icon--line { display: none; }
.rail__link[aria-current="page"] .rail__icon--fill { display: block; }

/* On the phone bar the label is 10px and the tint is a small area, so the
   current tab also states itself with weight. */
@media (max-width: 1023px) {
  .rail__link[aria-current="page"] { color: var(--color-accent); }
  .rail__link[aria-current="page"] .rail__label::before { font-weight: var(--weight-semibold); }
}

/* Forced colours discard the tint entirely — the filled icon and a real border
   are what survive. */
@media (forced-colors: active) {
  .rail__link[aria-current="page"] {
    border: 2px solid Highlight;
    border-radius: var(--radius-md);
  }
}

/* ── Sub-navigation within a destination ────────────────────────────────────
   Sky holds two views of the same moment (your sky, and the sky everyone
   shares); the Atlas holds categories. Both switch with a segmented control
   rather than a sixth tab — a destination you reach two levels down is a
   destination nobody reaches. */
.subnav {
  display: flex; align-items: center; gap: var(--space-sm);
  flex-wrap: wrap;
}
.subnav .o-segment { flex: 0 1 auto; }
@media (max-width: 640px) {
  .subnav { align-items: stretch; }
  .subnav .o-segment { width: 100%; }
  .subnav .o-segment button { flex: 1 1 0; }
}