/* ─────────────────────────────────────────────────────────────────
   J.Hilburn iPhone Prototype · FloatingTabBar
   The 6-tab floating pill anchored to the bottom of the screen,
   with selected-pill matchedGeometryEffect-style animation and a
   red badge dot on the Feed tab. Plus the More popover styles
   (the More tab opens a sheet, not a screen).
   ───────────────────────────────────────────────────────────────── */

/* ───── FloatingTabBar (sits above screen content via z-index) ───── */
.tab-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  z-index: 9;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.tab-bar__pill {
  position: relative;          /* anchor for the sliding selector */
  display: inline-flex;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 999px;
  box-shadow: var(--glass-shadow);
  padding: 4px;
  pointer-events: auto;
}

/* Sliding selector — single element that translates between tab positions,
   approximating SwiftUI's matchedGeometryEffect. Geometry matches the
   shipped FloatingTabBar.swift exactly: 54×48pt with `Capsule()` shape
   (full pill — border-radius clamps to height/2 = 24pt). */
.tab-bar__selector {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 54px;
  height: 48px;
  background: var(--app-divider);   /* #E1E1E1, Color.dividerBackground */
  border-radius: 999px;             /* Capsule() — clamps to 24px on 48-tall pill */
  transition: transform 250ms cubic-bezier(0.4, 0.0, 0.2, 1);
  pointer-events: none;
  z-index: 0;
}

.tab-bar__item {
  position: relative;
  z-index: 1;                  /* above the selector */
  flex-direction: column;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 48px;
  gap: 2px;                    /* VStack spacing: halfGutter × 0.5 = 2pt */
  background: transparent;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tab-bar__icon {
  width: 20px;
  height: 20px;
}

.tab-bar__label {
  font: var(--app-body-xs);
  color: var(--app-text-primary);
  line-height: 1;
}

/* Red notification badge dot on the Feed tab only.
   Anchored to the upper-right of the 20×20 bell icon (which centers
   in the 54×48 button — icon top edge at y≈9, right edge at x≈37),
   slightly overlapping the icon corner per the shipped app. */
.tab-bar__badge {
  display: block;
  position: absolute;
  top: 5px;
  right: 13px;
  width: 8px;
  height: 8px;
  /* Feed badge is an icon/dot indicator, not text — uses the brighter
     mid-range icon token (Color.lightStatusError #E8303D) per Rebekah's
     3-tokens-per-state framework (2026-06-07). */
  background: var(--app-error-icon);
  border-radius: 50%;
}
.tab-bar__item:not([data-tab="feed"]) .tab-bar__badge {
  display: none;
}