/* SPA framework */
.view {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: none;
  flex-direction: column;
  background: var(--bg-color);
  z-index: var(--z-base);
}

.view.active {
  display: flex;
  animation: fadeIn var(--duration-slow) var(--ease-out-quint) forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Scroll containers */
.scroll-container {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-8);
  /* Was a flat 100px, which ignored the safe-area inset the nav itself adds. */
  padding-bottom: calc(var(--nav-clearance) + var(--space-8));
  scrollbar-width: none; /* Firefox */
}

.scroll-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

/* Top Navs */
.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-5) var(--space-8);
  /* Flat paper, not frosted glass. This carried two bugs: the rule below was
     declared twice, and the second one, rgba(255,255,255,0.05), left over
     from the dark ground, won, so the header had no visible bottom edge at
     all on paper. And a translucent bar with backdrop-filter is the
     glassmorphism the direction rejects; paper is opaque. Dropping the blur
     also drops a compositing layer on every scroll. */
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  z-index: var(--z-nav);
}

.logo-small {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--brand);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
}

.view-title {
  /* Was 18px/600, sized like a UI label rather than the title of a page.
     Stays at --text-title rather than --text-display: this is a title inside
     a compact bar, and 30px would set the header taller than the content it
     labels. */
  font-size: var(--text-title);
  font-weight: 700;
}

/* Bottom Nav, floating labelled pill (Brewly's structure, paper styling).
   Phase 3 corrected this from a near-black bar to paper; Phase 5 does the
   structural rework it flagged. It lifts off the bottom edge and sits on the
   page rather than walling it off, which is the whole point of the reference.

   Labels stay on every tab. The direction is explicit that an icon must not
   replace a label just because it looks tidier, "easy to find functions" is
   a stated requirement, not a preference. */
.bottom-nav {
  position: fixed;
  bottom: calc(var(--nav-inset) + env(safe-area-inset-bottom, 0px));
  left: var(--space-4);
  right: var(--space-4);
  height: var(--nav-height);
  max-width: 520px;
  margin: 0 auto;
  background: var(--paper-raised);
  /* Borders over shadows, but a pill that floats needs to read as lifted,
     so this is a soft warm lift, not the old glow. */
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding: var(--space-1);
  z-index: var(--z-fab);
}

.bottom-nav.hidden {
  display: none;
}

.nav-tab {
  background: none; border: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  color: var(--text-secondary); cursor: pointer;
  border-radius: var(--radius-pill);
  /* flex-basis 0 so all five share the width evenly regardless of label
     length; min-width 0 so "Leaderboard" can never force an overflow. */
  flex: 1 1 0;
  min-width: 0;
  transition: color var(--duration-fast) ease, background var(--duration-fast) ease;
}

.nav-tab span {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.nav-tab svg { width: 21px; height: 21px; }

/* Active state is a vermilion wash, not solid vermilion. The accent earns
   attention by being rare, so it must not become a background, and a solid
   pill here would compete with the FAB directly above it. */
.nav-tab.active {
  color: var(--brand);
  background: rgba(206, 64, 26, 0.10);
}

/* "Leaderboard" is 64px at 11px, it fits the 68px each tab gets at 375px,
   but not the 59px it gets at 320px. Drop a point rather than drop the word. */
@media (max-width: 400px) {
  .bottom-nav {
    left: var(--space-2);
    right: var(--space-2);
  }

  .nav-tab span { font-size: 10px; }
}

/* At 320px the 10px label measures 59px inside a 59px tab, not clipped, but
   with nothing to spare, so it would clip the moment the webfont fell back to
   a wider system face. Buy headroom rather than sit on the boundary. */
@media (max-width: 340px) {
  .nav-tab span {
    font-size: 9px;
    letter-spacing: -0.01em;
  }

  .nav-tab svg { width: 19px; height: 19px; }
}

/* Shared content layouts */
.feed-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
  align-items: flex-start;
}

/* Activity Log (main feed) */
#view-feed {
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  animation: none !important;
  transform: none !important;
}

#view-feed::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

#view-feed .top-nav {
  position: sticky;
  top: 0;
}

#view-feed #fab-add {
  /* #view-feed scrolls as a whole rather than through .scroll-container, so
     an absolutely-positioned FAB would scroll away with the content. */
  position: fixed !important;
  right: var(--space-9) !important;
  bottom: calc(var(--nav-clearance) + var(--space-4)) !important;
  z-index: 1200 !important;
}

#feed-container {
  overflow: visible;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
  gap: var(--space-4);
}