/* OWNER: motion-nav lane, Sept 21 2026. The nav family, the More screen and the Settings/theme controls only.
   Every duration and curve below is a --mo-* token from css/motion-tokens.css, nothing invented.
   Law: transform, opacity, background-color and color only. The reduced-motion kill switch already lives
   in motion-tokens.css and applies globally, so nothing here needs its own copy of it. */

/* ---------------------------------------------------------- the nav item, both rail and tab bar shapes */
.nav-item {
  position: relative;
  transition: transform var(--mo-instant) var(--mo-ease);
}
.nav-item:active { transform: scale(.94); }

/* The active mark: one small bar, centered under the icon, scaling from its own center. Bottom edge on
   the phone tab bar and the icon rail; re-centered under the icon at the full 1280 rail below. Never a
   side stripe (DESIGN.md bans a colored left border on anything). */
.nav-item::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 3px;
  width: 16px; height: 2px;
  margin-left: -8px;
  border-radius: 2px;
  background: var(--accent); /* Sophie, Sep 25: the active underline is an indicator, rose so it reads on the sky nav */
  opacity: 0;
  transform: scaleX(0);
  transition: transform var(--mo-base) var(--mo-ease), opacity var(--mo-base) var(--mo-ease);
}
.nav-item[aria-current="page"]::after {
  opacity: 1;
  transform: scaleX(1);
}
@media (min-width: 1280px) {
  /* padding: 0 12px, a 20px icon first, so the icon's own center sits at 22px. */
  .nav-item::after { left: 22px; }
}

/* The icon and label settle with a tiny lift the moment the item becomes current. An animation (not a
   transition) so it restarts only when aria-current newly lands on this item, never on a same-value reset
   from re-rendering the same route (settings tab switches, a DB repaint). */
.nav-item[aria-current="page"] {
  animation: glam-nav-settle var(--mo-base) var(--mo-spring);
}
@keyframes glam-nav-settle {
  from { transform: translateY(-3px); }
  to { transform: translateY(0); }
}

/* ------------------------------------------------------------------------------------- the More screen */
/* Real anchors and the Lock button rise in a calm stagger; the inert Theme display div is excluded for
   free because tag selectors below only match <a> and <button>. Scoped to the 700ms mount window from
   MOTION.onMount so a later DB repaint (the theme row, a settings save) never replays it. */
[data-mo-enter="more"] .more-row {
  animation: glam-rise var(--mo-base) var(--mo-ease-out) both;
}
[data-mo-enter="more"] .more-row:nth-of-type(2) { animation-delay: calc(var(--mo-stagger) * 1); }
[data-mo-enter="more"] .more-row:nth-of-type(3) { animation-delay: calc(var(--mo-stagger) * 2); }
[data-mo-enter="more"] .more-row:nth-of-type(4) { animation-delay: calc(var(--mo-stagger) * 3); }
[data-mo-enter="more"] .more-row:nth-of-type(5) { animation-delay: calc(var(--mo-stagger) * 4); }
[data-mo-enter="more"] .more-row:nth-of-type(6) { animation-delay: calc(var(--mo-stagger) * 5); }
[data-mo-enter="more"] .more-row:nth-of-type(7) { animation-delay: calc(var(--mo-stagger) * 6); }
[data-mo-enter="more"] .more-row:nth-of-type(8) { animation-delay: calc(var(--mo-stagger) * 7); }
@keyframes glam-rise {
  from { opacity: 0; transform: translateY(var(--mo-rise)); }
  to { opacity: 1; transform: translateY(0); }
}
a.more-row, button.more-row { transition: transform var(--mo-instant) var(--mo-ease); }
a.more-row:active, button.more-row:active { transform: scale(.98); }

/* ------------------------------------------------------ Settings toggles and the Light/Dark control */
/* Neither control has a thumb element in the markup today (a bare checkbox, a two button segmented
   control), so this is a color/background glide, not a sliding thumb. Hook request below. */
.theme-btn {
  transition: background-color var(--mo-fast) var(--mo-ease), color var(--mo-fast) var(--mo-ease),
    border-color var(--mo-fast) var(--mo-ease), transform var(--mo-instant) var(--mo-ease);
}
.theme-btn:active { transform: scale(.95); }

.set-open input[type="checkbox"] {
  transition: transform var(--mo-instant) var(--mo-ease);
}
.set-open input[type="checkbox"]:active { transform: scale(.9); }