/* ──────────────────────────────────────────────────────────────────────────
   styles/mobile-bottom-nav.css — THv2 mobile-bottom tab nav
   Authored 2026-05-01 alongside engine/mobile-bottom-nav.js.
   Snap/Insta-style: backdrop-blur, accent-pulled active state, 56px tap
   targets, safe-area-inset support, smooth Apple-style easing.
   Visible only at viewport <= 640px; hidden on tablet/desktop where the
   existing elite-nav remains primary.
   Uses existing app.min.css design tokens (--bg-*, --fg-*, --accent, etc.)
   so visual identity is unified.
   ────────────────────────────────────────────────────────────────────── */

#mobile-bottom-nav-root {
  display: none;
}

@media (max-width: 640px) {
  #mobile-bottom-nav-root {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Sit above the consent banner (z=99996) and welcome modal so the nav
       is ALWAYS reachable. Toast/ephemeral overlays can still stack higher. */
    z-index: 99999;
    pointer-events: none;
  }

  /* Reserve space at bottom of body so fixed nav doesn't cover content.
     56px nav + 12px gap + safe-area (notched phones).  */
  body {
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

.mbn {
  pointer-events: auto;
  margin: 0 12px;
  margin-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(18, 22, 29, 0.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 18px;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.04) inset;
  overflow: hidden;
  /* prevents Safari from clipping the rounded corners during scroll */
  isolation: isolate;
}

.mbn__inner {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  height: 56px;
  padding: 0 4px;
}

.mbn-tab {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 56px;
  text-decoration: none;
  color: var(--fg-2, #8a92a0);
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Inter", sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: color var(--dur, 0.18s) var(--ease, cubic-bezier(0.16, 1, 0.3, 1)),
              transform 0.12s var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
  position: relative;
  border-radius: 12px;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  /* Tap target padding for fingers without inflating visual chrome */
  padding: 4px 8px;
}

.mbn-tab:hover {
  color: var(--fg-1, #c9cfd8);
}

.mbn-tab:active {
  transform: scale(0.96);
}

.mbn-tab__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  transition: transform var(--dur, 0.18s) var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.mbn-tab__icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

.mbn-tab__label {
  line-height: 1;
  white-space: nowrap;
  font-feature-settings: 'tnum' on;
}

/* ─── Active state — Snap/Insta-style accent fill ───────────────── */
.mbn-tab--active {
  color: var(--accent, #d4a017);
}

.mbn-tab--active .mbn-tab__icon {
  transform: translateY(-1px);
  filter: drop-shadow(0 0 6px rgba(212, 160, 23, 0.35));
}

/* Subtle active dot below the label (mobile platform convention).
   Appears via ::after so the active state is visible even with reduced
   motion (no animation; pure layout). */
.mbn-tab--active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent, #d4a017);
  transform: translateX(-50%);
  box-shadow: 0 0 8px rgba(212, 160, 23, 0.45);
}

/* ─── Search tab — emphasized FAB-style accent (directive #1: search hard
   to find). Subtle gold ring around the icon when NOT active so it pops
   visually as the discoverable search affordance. */
.mbn-tab[data-mbn-tab="search"]:not(.mbn-tab--active) .mbn-tab__icon {
  background: var(--bg-3, #232935);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(212, 160, 23, 0.30);
}
.mbn-tab[data-mbn-tab="search"]:not(.mbn-tab--active) .mbn-tab__icon svg {
  width: 18px;
  height: 18px;
}
.mbn-tab[data-mbn-tab="search"]:not(.mbn-tab--active):hover .mbn-tab__icon {
  border-color: rgba(212, 160, 23, 0.55);
  background: rgba(212, 160, 23, 0.10);
}

/* ─── Focus visible (WCAG 2.2 AA / keyboard nav) ─────────────────── */
.mbn-tab:focus-visible {
  outline: 2px solid var(--focus, #5b8def);
  outline-offset: 2px;
}

/* ─── Reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mbn-tab,
  .mbn-tab__icon,
  .mbn-tab:active {
    transition: none;
    transform: none;
  }
}

/* No light-mode block — THv2 is dark-mode-only by design (app.min.css
   uses --bg-0: #0a0d12 etc.). Adding a prefers-color-scheme: light block
   here would let the user-agent default light preference override the
   active-tab gold accent, breaking the visual hierarchy. */

/* ──────────────────────────────────────────────────────────────────────
   MOBILE HEADER SLIMMING (≤640px)
   When the bottom-nav is primary, the existing desktop topbar + cockpit
   quick-switch strip become redundant clutter. These rules reclaim
   ~110px of vertical space on mobile by hiding the secondary nav and
   the desktop-only header chips. Desktop view (>640px) is untouched.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Cockpit quick-switch tabs — fully redundant with bottom-nav.
     Frees ~56px of vertical real estate above the fold. */
  #cockpit-tabs {
    display: none !important;
  }

  /* Legacy topbar duplicates the new elite-nav on mobile — both render
     at the very top stacked. Elite-nav has hamburger + search + horizon +
     notif + menu already; topbar adds nothing the bottom-nav doesn't cover.
     Frees another ~44px above the fold. */
  .shell > header.topbar,
  header.topbar {
    display: none !important;
  }
  /* .shell is a CSS grid with `grid-template-rows: 44px 1fr` reserving a
     row for the topbar even when hidden. Override the row track to auto so
     the empty 44px gap collapses. */
  .shell {
    grid-template-rows: 0 1fr !important;
  }

  /* Desktop search trigger ⌘ — search is now a bottom-nav tab. */
  .topbar .palette-trigger,
  .topbar [class*="palette" i] {
    display: none !important;
  }

  /* Adapter-status dots cluster — technical detail, not for primary mobile.
     Still accessible via hamburger menu. */
  .topbar .conn-cluster {
    display: none !important;
  }

  /* Trailing status text links (Track record / Welcome) — too cramped on
     mobile; the hamburger menu provides full sitemap access. */
  .topbar > a.status {
    display: none !important;
  }

  /* Tighten remaining topbar so brand + regime + hamburger get room. */
  .topbar {
    padding-left: 8px !important;
    padding-right: 8px !important;
    gap: 8px !important;
  }
  .topbar .brand {
    font-size: 14px !important;
  }
}