/* nav.css — the app's one bottom nav, styled once.
 * Previously this markup was hand-duplicated across 52 files with real
 * drift (two different Home icons, "Plan" vs "Birth Plan" labels, 6 pages
 * still reading "Account" after a sitewide swap missed their href format,
 * ~38 of 52 files never marking any tab active at all). nav.js renders
 * the markup; this file is the one place that styles it.
 *
 * Uses a class name (ba-bottom-nav) distinct from the old bottom-nav /
 * app-bottom-nav names still sitting unused in old per-page <style>
 * blocks, so there is no risk of stale rules matching this component.
 */
.ba-bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(255,252,250,.97);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border-light, #EDE4DF);
  z-index: 300;
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 20px);
  align-items: stretch; justify-content: space-around;
}
.ba-bottom-nav.ba-nav-ready { display: flex; }
@media(min-width: 769px) { .ba-bottom-nav { display: none !important; } }

.ba-nav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; height: 58px; flex: 1;
  text-decoration: none; cursor: pointer; background: none; border: none;
  color: var(--ink-light, #9A8E89);
  font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 600;
  letter-spacing: .8px; text-transform: uppercase;
  transition: color .15s;
  -webkit-tap-highlight-color: transparent;
}
.ba-nav-item svg { width: 22px; height: 22px; }
.ba-nav-item.active { color: var(--rust, #B5674A); }
.ba-bottom-nav.ba-labor-active { border-top: 2px solid var(--gold, #9A7B4F); }

/* Labor mode banner — shown on every page while active, not just wherever
   it was turned on, so there's always a visible way to end it. */
.ba-labor-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 301;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 9px 16px; padding-top: max(env(safe-area-inset-top, 0px), 9px);
  background: var(--gold-light, #F5EFE4); border-bottom: 1px solid var(--gold, #9A7B4F);
  font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--ink-mid, #4A3F3A);
  text-align: center;
}
.ba-labor-banner strong { color: var(--gold, #9A7B4F); }
.ba-labor-end-btn {
  flex-shrink: 0; background: none; border: 1px solid var(--gold, #9A7B4F); border-radius: 20px;
  padding: 4px 12px; font-size: 11px; font-weight: 600; color: var(--gold, #9A7B4F);
  cursor: pointer; font-family: 'DM Sans', sans-serif; -webkit-tap-highlight-color: transparent;
}
.ba-labor-end-btn:hover { background: var(--gold, #9A7B4F); color: #fff; }
@media(max-width: 400px) { .ba-labor-banner { flex-wrap: wrap; } }