/* ════════════════════════════════════════════════════════════════════════════
   Sectorly v2 — tab-bar.css  (Phase 8c — four-tab bottom nav)
   ────────────────────────────────────────────────────────────────────────────

   The persistent bottom nav and the tab content host above it.
   Per IA spec (Notion page 9): four tabs (Live · My Garage · Season ·
   Numbers), always visible, word-only labels, active tab visually distinct.

   Layout:

     ┌──────────────────────────────────┐
     │                                  │
     │   tab-shell__content (scroll)    │
     │   (the active tab's view)        │
     │                                  │
     ├──────────────────────────────────┤
     │  Live  My Garage  Season  Numbers│  ← tab-bar (sticky bottom)
     └──────────────────────────────────┘

   Link this after components.css. Only existing tokens used.
   ════════════════════════════════════════════════════════════════════════════ */


/* ── TAB SHELL ────────────────────────────────────────────────────────── */

.tab-shell {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  width: 100%;
}

.tab-shell__content {
  flex: 1 1 auto;
  min-height: 0;
  /* Leave room at the bottom for the tab bar (its own height + safe-area
     inset). Computed: ~56px bar + safe-bot. The +12px breathes a bit
     so content doesn't kiss the bar's top edge. */
  padding-bottom: calc(56px + var(--safe-bot) + 12px);
}

/* Each tab's content host. Only one is visible at a time (display:none
   on the inactive ones — see tab_router.js showTab). The hidden ones
   keep their DOM mounted so scroll position survives switches. */
.tab-content {
  width: 100%;
}


/* ── TAB BAR ──────────────────────────────────────────────────────────── */

.tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;

  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);

  padding: 6px 0 calc(6px + var(--safe-bot));
}


/* ── TAB BUTTON ───────────────────────────────────────────────────────── */

.tab-bar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;          /* iOS HIG tap target */
  padding: 4px 6px;

  background: transparent;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  color: var(--text3);
  transition: color var(--motion-fast) var(--ease-out);
}

.tab-bar__btn:hover,
.tab-bar__btn:focus-visible {
  color: var(--text2);
}

.tab-bar__btn.is-active {
  color: var(--purple3);
}

.tab-bar__label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.tab-bar__btn.is-active .tab-bar__label {
  font-weight: 700;
}


/* ── PLACEHOLDER VIEWS (for tabs not built yet) ───────────────────────── */

.tab-placeholder {
  min-height: 60dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-placeholder__inner {
  text-align: center;
  padding: 32px 24px;
  max-width: 360px;
}

.tab-placeholder__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.tab-placeholder__blurb {
  font-size: 14px;
  font-weight: 500;
  color: var(--text2);
  line-height: 1.5;
}