/* ══ TOPBAR ═══════════════════════════════════════════════════════════════
   partials/topbar.php. One strict row, three zones:

     [ menu ] [ .lx-topbar__scroll ........ ] [ .lx-topbar__fixed ]
      fixed     page-injected, scrolls X        messages · alerts · account

   The row never wraps and never grows. Only the middle zone may overflow, and it
   scrolls sideways inside itself, so the two fixed zones keep their place on any
   width. Menus open from the fixed zone and are therefore never clipped by the
   scroller. A page adds its own controls by injecting them into the middle zone
   ($topbar_before / $topbar_after / $lx_topbar_actions), never into the others. */

.lx-topbar {
  position: sticky;
  top: 0;
  z-index: var(--lx-z-topbar);
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--lx-s-2);
  height: var(--lx-topbar-h);
  padding: 0 var(--lx-s-4);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background var(--lx-t-base) var(--lx-ease),
    border-color var(--lx-t-base) var(--lx-ease),
    backdrop-filter var(--lx-t-base) var(--lx-ease);
}

.lx-topbar.is-stuck {
  background: var(--lx-glass);
  -webkit-backdrop-filter: var(--lx-glass-blur);
  backdrop-filter: var(--lx-glass-blur);
  border-bottom-color: var(--lx-glass-border);
}

.lx-topbar__title {
  font-size: var(--lx-fs-base);
  font-weight: 500;
  letter-spacing: var(--lx-ls-title);
  color: var(--lx-t1);
  /* Fades in with the glass — at the top of a page the page's own heading is
     already visible, so repeating it in the bar is noise. */
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--lx-t-base) var(--lx-ease), transform var(--lx-t-base) var(--lx-ease);
}
.lx-topbar.is-stuck .lx-topbar__title { opacity: 1; transform: none; }

.lx-topbar__spacer { flex: 1 1 auto; }
.lx-topbar > .lx-icon-btn { flex: none; }

.lx-topbar__actions {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--lx-s-1);
}
.lx-topbar__scroll {
  flex: 0 1 auto; min-width: 0;
  display: flex; align-items: center; gap: var(--lx-s-1);
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain;
}
.lx-topbar__scroll::-webkit-scrollbar { display: none; }
.lx-topbar__scroll > * { flex: none; }
.lx-topbar__fixed { flex: none; display: flex; align-items: center; gap: var(--lx-s-1); }

/* Balance chip in the topbar */
.lx-balance {
  display: inline-flex;
  align-items: center;
  gap: var(--lx-s-2);
  height: 30px;
  padding: 0 var(--lx-s-3);
  border-radius: var(--lx-r-full);
  background: var(--lx-fill);
  font-family: var(--lx-f-mono);
  font-size: var(--lx-fs-micro);
  letter-spacing: 0.04em;
  color: var(--lx-t2);
  white-space: nowrap;
}
.lx-balance .lx-icon { color: var(--lx-accent); }
/* Auth's minimal topbar: just the wordmark + the flat control row. Always
   glass rather than materialising on scroll (lx-shell.js's scroll-driven
   .is-stuck toggle keys off .lx-content, which lite pages don't have — an
   always-on bar suits a short, rarely-scrolled login page better anyway). */
.lx-topbar--auth {
  position: static;
  background: var(--lx-glass);
  -webkit-backdrop-filter: var(--lx-glass-blur);
  backdrop-filter: var(--lx-glass-blur);
  border-bottom: 1px solid var(--lx-glass-border);
}

@media (max-width: 600px) {
  .lx-topbar { padding: 0 var(--lx-s-3); }
  .lx-balance { display: none; }
}