/* Shared chrome for the logged-in web app pages (feed/search/meets/
   profile) — phase 1 of the multi-tab shell (Messages excluded, per
   scope). Distinct from styles.css's marketing-site header (Home/
   Privacy/Terms/Login): these pages are reached only by an already-
   logged-in visitor (each page's own inline script redirects to /login
   otherwise), so the top bar swaps the marketing nav for a Log Out
   control, and a persistent bottom tab bar is added — matching mobile's
   tab bar in spirit (icons, active-state red tint, Redline branding), not
   a pixel-for-pixel copy of React Navigation's own chrome. */

body.app-shell {
  /* Reserve space so page content never sits under the fixed bottom tab
     bar — matches the tab bar's own height + safe-area inset below. */
  padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
}

/* Shown only until the client-side session check resolves — see each
   page's own inline script. Kept deliberately blank/minimal rather than
   a branded splash: this should be on screen for a few dozen
   milliseconds at most, not a moment worth designing. */
.auth-check-loading {
  min-height: 100vh;
}

.app-logout-btn {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sub);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 0;
}

.app-logout-btn:hover {
  color: var(--ink);
}

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: var(--bg);
  border-top: 2px solid var(--line);
  z-index: 50;
}

.tab-bar-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
  color: var(--sub);
  text-decoration: none;
}

.tab-bar-item svg {
  display: block;
}

.tab-bar-item.active {
  color: var(--red);
}

/* Generic placeholder body for tabs not yet built in this phase (Search,
   Meets, Profile) — a real "coming soon," not a dead link, so the shell
   is actually navigable end to end even though only Feed has real
   content this pass. */
.app-coming-soon {
  max-width: 560px;
  margin: 0 auto;
  padding: 80px 24px;
  text-align: center;
}

.app-coming-soon h1 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 26px;
  color: var(--ink);
  margin: 0 0 10px;
}

.app-coming-soon p {
  font-size: 15px;
  color: var(--sub);
  margin: 0;
}