/* ============================================================
   App navigation row (June 2026 IA refresh)
   A lightweight, consistent in-flow nav placed directly beneath
   each page's .topbar. Injected by app-nav.js and shared across
   Home, Guided, Live, Learn, and Progress.

   Design notes:
   · Single horizontal row, never wraps, comfortable tap targets.
   · Active state is subtle (a rounded pill) and uses STABLE neutral
     tokens — NOT --accent — so the row looks identical on Guided
     (coral) and Live (sage) pages, which retint --accent.
   · On tight widths we reduce spacing/padding before font size.
   ============================================================ */
.app-nav {
  display: flex;
  gap: 6px;
  margin: -8px 0 20px;            /* pull up under the topbar's bottom border */
  padding: 0 max(0px, env(safe-area-inset-right)) 0 max(0px, env(safe-area-inset-left));
  -webkit-tap-highlight-color: transparent;
}

.app-nav-item {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;            /* never wrap a label */
  height: 42px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 99px;
  color: var(--text-3);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.005em;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.app-nav-item:hover {
  color: var(--text-2);
  background: var(--bg-panel-2);
}
.app-nav-item.is-active {
  color: var(--text);
  background: var(--bg-panel-2);
  border-color: var(--line);
}

.app-nav-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}
/* Guided's ladder is an inline SVG (the 🪜 emoji is missing on some platforms);
   render it block so it aligns with the emoji glyphs on the other items. */
.app-nav-ico svg { display: block; width: 17px; height: 17px; }
.app-nav-label { line-height: 1; }

/* Tight widths: shrink the gap + horizontal padding first, font last. */
@media (max-width: 400px) {
  .app-nav { gap: 3px; }
  .app-nav-item { gap: 5px; padding: 0 4px; }
}
@media (max-width: 340px) {
  .app-nav-item { font-size: 13px; }
  .app-nav-ico { font-size: 15px; }
}