/*
 * Topbar — two-slot grid:
 *   [brand]   [palette pill (right)]
 *
 * The middle/search/menu surface is owned by <Palette>; the topbar
 * only renders the chrome and gives the palette a layout slot.
 *
 * `theme='dark'` flips background + border for use on the video
 * composer + post pages. Brand-mark stays visible on all viewports
 * (defensive override — older cached bundles of @elements/style
 * may still hide the mark below 700px).
 */

.topbar .brand .brand-mark { display: inline-flex; }

.topbar.topbar-v2 {
  /* Not sticky — the topbar scrolls away with content. Persistent
     nav isn't necessary because the palette is always one Cmd/Ctrl-K
     away and overlays the page from any scroll position. Dropping
     sticky also frees vertical room for focused content (lesson
     videos, long-form articles).

     Bordered by default — content pages (post detail, feed, account)
     read as un-anchored without a separator between chrome and body.
     Marketing-style pages can opt out with a per-page rule (see
     app/pages/home/style.css for the .home-page override). */
  background: var(--bg);
  border-bottom: 1px solid rgba(23, 23, 26, 0.04);
  padding: 0.625rem 0;
}

.topbar.topbar-v2.is-dark {
  background: var(--bg-dark);
  /* Intentionally no border — the dark topbar shares its background
     with the theater surface so the chrome reads as one continuous
     dark shell. A divider here would chop them apart. */
  border-bottom: none;
  color: var(--ink-dark);
}

.topbar.topbar-v2 .topbar-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2.5rem;
  /* minmax(0, 1fr) lets the right slot shrink past its intrinsic
     min-content size; the palette pill inside has its own max-width
     cap so it doesn't sprawl on wide viewports. */
}

/* Full-width variant — used by full-screen editor pages (course
   builder) so the topbar's brand + palette span the entire viewport
   width instead of sitting inside a narrow centered column. */
.topbar.topbar-v2.is-fullwidth .topbar-inner {
  max-width: none;
  padding: 0 1.5rem;
}

.topbar.topbar-v2 .topbar-pill-slot {
  display: flex;
  /* Anchor the pill to the right edge of the topbar so a wide
     desktop viewport doesn't leave the pill stranded next to the
     brand with a sea of whitespace to the right. The pill caps at
     640px (max-width on .palette-pill); on viewports wider than
     that, the leftover space sits between brand and pill, framing
     the page like a margin. On narrow viewports (mobile) the pill
     fills the entire remaining width — flex-end is a no-op since
     there's no leftover. */
  justify-content: flex-end;
  min-width: 0;
}

@media (max-width: 700px) {
  .topbar.topbar-v2 {
    padding: 0.75rem 0;
  }

  .topbar.topbar-v2 .topbar-inner {
    padding: 0 1rem;
    gap: 2rem;
  }
}

/* Dark-theme adjustments to the brand mark + text. The brand mark
   keeps its accent fill at all themes; only the wordmark color flips. */
.topbar.topbar-v2.is-dark .brand            { color: var(--ink-dark); }
.topbar.topbar-v2.is-dark .brand-wordmark   { color: var(--ink-dark); }