/* ==========================================================================
   Bottom tab bar — Phase 2A
   Single source of truth. Before this file the bar was defined twice: a
   "liquid glass" pill in the index.html inline <style> and a flat archive
   override in identity-v2.css @max-760, which quietly won on phones. Both are
   gone; this file is the only definition, and it is the only navigation CSS
   the order pages need (they never load identity-v2.css).

   Shape: full-width, edge-to-edge, hairline on top. That is the iOS tab-bar
   signature — a centred floating pill reads as web chrome. It also suits the
   archive identity better than the pill did: flat paper, one rule, no glass.

   Loaded by index.html (inherited by catalog.html and every /plants/ page),
   order-tracking.html and order-success.html. Deliberately NOT loaded by
   checkout.html — iOS hides the tab bar inside a modal task flow.
   ========================================================================== */

/* The bar's measured content height. Three things depend on it — the bar, the
   body padding that keeps content off it, and the product sticky bar that has
   to clear it — so it lives in one place instead of three hand-copied numbers
   drifting apart. Measured, not computed: the label's line box makes the tab
   53px tall, above its own 48px floor. */
:root { --pw-tabbar-h: 66px; }

.tabbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 70;
  display: flex;
  align-items: stretch;
  /* The inset is the whole point: content sits above the home indicator, and
     the bar's own background still bleeds to the physical screen edge. */
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--archive-paper, #f0ece2);
  border-top: 1px solid var(--archive-line, rgba(20, 33, 27, 0.22));
  /* No backdrop-filter. Standalone already disabled it to stop iOS scroll
     hangs, and a blurred bar over an ivory page buys nothing. */
}

.tabbar .tab {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  /* 48 clears the 44pt floor with room for the label; four equal flex tabs on
     the narrowest supported phone (375pt) are ~92pt wide, so width is never
     the constraint and adjacent targets never touch. */
  min-height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 2px;
  border-radius: 2px;
  color: var(--archive-ink-soft, #46544c);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: center;
  text-shadow: none;
  transition: color 200ms cubic-bezier(.22, .9, .24, 1);
}

.tabbar .tab svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transition: stroke-width 200ms cubic-bezier(.22, .9, .24, 1);
}

.tabbar .tab span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Active state carries three signals, not just colour: ink, a heavier label
   and a heavier stroke. Colour alone would fail for anyone who cannot
   distinguish it, and aria-current carries it to assistive tech. */
.tabbar .tab.active,
.tabbar .tab[aria-current='page'] {
  color: var(--archive-ink, #14211b);
  font-weight: 700;
}

.tabbar .tab.active svg,
.tabbar .tab[aria-current='page'] svg {
  stroke-width: 2.3;
}

/* ---- cart badge ---------------------------------------------------------- */
.tabbar .tab .cart-badge {
  position: absolute;
  top: 2px;
  inset-inline-start: calc(50% + 6px);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--wine, #7f432d);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 250ms, transform 250ms;
}

.tabbar .tab .cart-badge.show { opacity: 1; transform: scale(1); }

@keyframes cart-bump {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.4); }
  55%  { transform: scale(0.85); }
  100% { transform: scale(1); }
}

.tabbar .tab .cart-badge.bump { animation: cart-bump 450ms cubic-bezier(.22, .9, .24, 1); }

/* ---- where the bar is and isn't ------------------------------------------ */

/* Content has to clear the bar, or the last row of every page sits under it.
   62px was 4px short of the bar's real 66px and content slid underneath. */
body { padding-bottom: calc(var(--pw-tabbar-h) + 6px + env(safe-area-inset-bottom, 0px)); }

/* Desktop browsers navigate from the header, so the bar stands down — but an
   INSTALLED app keeps it at every size. An iPad app with no tab bar and no
   hamburger would have no primary navigation at all. */
@media (min-width: 1024px) {
  .tabbar { display: none; }
  body { padding-bottom: 0; }
}

html.pwa .tabbar { display: flex; }
html.pwa body { padding-bottom: calc(var(--pw-tabbar-h) + 6px + env(safe-area-inset-bottom, 0px)); }

@media (prefers-reduced-motion: reduce) {
  .tabbar .tab,
  .tabbar .tab svg,
  .tabbar .tab .cart-badge { transition: none; }
  .tabbar .tab .cart-badge.bump { animation: none; }
}