/* ===================================================================
   BOTTOM NAV - SINGLE SOURCE OF TRUTH
   Loaded LAST (after base.css and every page stylesheet) so nothing can
   override it. All .bottom-nav / .nav-item rules elsewhere were removed.

   Geometry: FIXED to bottom:0 - flush with the true viewport bottom on
   every browser. Content-sized: fixed 64x56 .nav-item boxes + 4px
   vertical padding + 1px top border  65px tall.
   app.js measures the rendered height into --nav-measured for floats
   anchored above it.
   =================================================================== */

:root {
  /* Fallback ONLY (used before app.js measures the real bar).
     Matches the natural rendered height below: 4+56+4 content plus the
     1px top border  65px. */
  --navbar-height: 65px;
  --nav-bg: #FFFFFF;
  --nav-item-muted: #8A94A6;
  --nav-item-active: #1D9E6F;
}

@media (prefers-color-scheme: dark) {
  :root {
    --nav-bg: #16191D;
    --nav-item-muted: #9AA3AF;
    --nav-item-active: #3DDC97;
  }
}

/* -- Bar -- */
.bottom-nav {
  /* FIXED overlay, NOT in-flow: anchored to the TRUE viewport bottom
     (bottom:0 - the one value all browsers agree on), so transient dvh
     swings (address bar / scroll-chrome settle, system bars) can NEVER
     move the bar. Its footprint is reserved on the scrolling content by
     base.css via --nav-measured, so content ends exactly at its top edge.
     NO safe-area padding here on purpose: the bar's height must EXACTLY
     equal the .nav-item heights - there is no invisible underlay strip.
     Trade-off: on devices with a home-indicator, the bar's bottom edge
     sits inside the gesture zone. */
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  background: var(--nav-bg);
  display: flex;
  align-items: center;
  justify-content: space-around;
  /* The bar stays EXACTLY 65px tall (56px items + 4px+4px vertical
     padding + 1px top border); --nav-measured and every nav-anchored
     float key off that reality. Vertical air ONLY: the active ring is
     46px tall, vertically centered in each 56px item - this 4px keeps
     the ENTIRE circle clear of the bar's top border. No horizontal
     padding: 5 x 64px items must fit a 320px screen. */
  padding: 4px 0;
  border-top: 1px solid var(--border, #E4EAE8);
  z-index: 25;
}

/* -- Items -- */
/* Design: the ACTIVE tab collapses into a dotted RING - label hidden,
   icon shrunk to float inside the ring. The ring is an ::before
   pseudo-element, so it animates scale+opacity without ever affecting
   layout. Two anti-jump guarantees:
     1. every item is a FIXED 64x56 box (no per-tab width changes);
     2. the active tab's label is visibility:hidden, NOT display:none -
        its space stays reserved, so the bar height is identical on every
        screen and switching tabs never reflows anything. */
.nav-item {
  position: relative;             /* anchor for the ::before ring */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;   /* vertical centering of icon+label stack */
  gap: 3px;
  width: 64px;
  height: 56px;
  padding: 0;
  color: var(--nav-item-muted);
  font-size: 11px;
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.15s ease;
  font-family: 'Inter', sans-serif;
}
.nav-item i {
  font-size: 22px;
  transition: color 0.15s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Icon + label ride ABOVE the ring */
.nav-item i,
.nav-item span {
  position: relative;
  z-index: 1;
}

/* Active tab: hide the label but KEEP its space (no reflow), and shrink
   the icon so it floats neatly inside the ring. translateY(8px) drops the
   icon to the item's true vertical center (28px in the 56px item) so the
   icon sits dead-center inside the 46px ring, which is anchored at 50%. */
.nav-item.active span { visibility: hidden; }
.nav-item.active i { transform: translateY(8px) scale(0.8); }
.nav-item.active,
.nav-item.active i { color: var(--nav-item-active); }

/* The dotted ring itself - centered on the ITEM's vertical middle (top:50%),
   so circle + icon read as one vertically centered unit inside each button.
   Hidden at scale(0) until the tab becomes active or is pressed.
   46px diameter fits fully inside the 56px item with the bar's 4px padding -
   the entire circle always visible, nothing clipped. */
.nav-item::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px dotted var(--nav-ring);
  background: transparent;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),   /* springy pop */
    opacity 0.18s ease;
}

/* Active tab: ring pops in and stays */
.nav-item.active::before {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* Press feedback on inactive tabs: a smaller, quicker ring bloom */
.nav-item:active:not(.active)::before {
  transform: translate(-50%, -50%) scale(0.72);
  opacity: 1;
  transition-duration: 0.12s, 0.1s;
}
.nav-item:active { opacity: 0.85; }

/* Ring colors: brand green in light mode; soft white in dark mode
   (the green active icon pops nicely against it). */
:root {
  --nav-ring: #1D9E6F;
}
@media (prefers-color-scheme: dark) {
  :root {
    --nav-ring: #E6E9ED;
  }
}

/* -- Short screens / landscape --
   Icons-only squeeze: labels are display:none here, so the icon stack
   already centers in the item - drop the active icon's translateY offset,
   which is only needed when the hidden label reserves space below it. */
@media (max-height: 600px) {
  .nav-item span { display: none; }        /* icons-only when space is tight */
  .nav-item i { font-size: 20px; }
  .nav-item.active i { transform: scale(0.8); }
}