@import "https://assets.elements.dev/assets/app/shared/styles/page.b167db396f67ed0.css";

/*
 * 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(--theater-bg);
  /* 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(--theater-ink);
}

.topbar.topbar-v2 .topbar-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-areas: "brand nav search";
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 1.75rem;
  /* minmax(0, 1fr) on the search column lets it 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. Brand, nav,
     and the CTA are all auto — they should never compress, so the
     search field is what gives up room first. */
}

.topbar.topbar-v2 .brand      { grid-area: brand; }
.topbar.topbar-v2 .topbar-nav { grid-area: nav; }

.topbar.topbar-v2 .topbar-nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  white-space: nowrap;
  /* Extra air after the wordmark. At the grid's own gap the first link
     crowds the brand and the two read as one run of text instead of
     identity-then-navigation. Mobile drops this: there the nav is on
     its own row and aligns to the page gutter. */
  margin-left: 1.5rem;
}

/* These have to read as links, not labels. Resting state carries
   medium weight and near-ink color so they look clickable standing
   still; the underline is the hover and you-are-here payoff.

   The underline is an ::after, never a border. A border-bottom is part
   of the box, so centering the box in the grid row leaves the TEXT
   sitting a pixel high relative to the wordmark and the search field
   next to it. Absolutely positioning the rule takes it out of layout
   and the text lands on the same optical line as everything else. */
.topbar.topbar-v2 .topbar-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 140ms ease;
}

.topbar.topbar-v2 .topbar-nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.5rem;
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity 140ms ease, transform 140ms ease;
}

.topbar.topbar-v2 .topbar-nav-link:hover {
  color: var(--ink);
}

.topbar.topbar-v2 .topbar-nav-link:hover::after {
  opacity: 0.32;
  transform: scaleX(1);
}

.topbar.topbar-v2 .topbar-nav-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

/* You-are-here. The accent rule is what makes the row read as
   navigation rather than a line of prose. */
.topbar.topbar-v2 .topbar-nav-link.is-current {
  color: var(--ink);
}

.topbar.topbar-v2 .topbar-nav-link.is-current::after {
  opacity: 1;
  transform: scaleX(1);
}

/* Dark theme = the player and other theater surfaces. The wordmark is a
   bare text node inside .brand, not a .brand-wordmark element, so the
   color has to be set on .brand itself or it stays --ink and renders as
   dark navy on black. The mark keeps its own sky fill at every theme. */
.topbar.topbar-v2.is-dark .brand { color: var(--theater-ink); }

/* No nav on a player. The reader arrived to watch something; four links
   and a search field over a theater surface is chrome competing with the
   content, and the palette still reaches every destination. Search stays
   because it is the one affordance that is useful mid-content. */
.topbar.topbar-v2.is-dark .topbar-nav {
  display: none;
}

.topbar.topbar-v2.is-dark .topbar-nav-link            { color: rgba(255, 255, 255, 0.62); }
.topbar.topbar-v2.is-dark .topbar-nav-link:hover      { color: var(--theater-ink); }
.topbar.topbar-v2.is-dark .topbar-nav-link.is-current { color: var(--theater-ink); }

/* 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;
}

/* Search is deliberately narrower than it used to be (was 640px). The
   nav links now carry wayfinding, so the field only has to read as a
   search affordance, not dominate the bar. Scoped to the topbar so the
   palette's own overlay input is untouched. */
.topbar.topbar-v2 .topbar-pill-slot .palette-pill {
  max-width: 320px;
}

.topbar.topbar-v2 .topbar-pill-slot {
  grid-area: search;
  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;
}

/* Mobile: one row cannot hold brand + four links + search + CTA, so
   the bar becomes two. Row one is the things you reach for (brand,
   search, sign up); the links get their own strip beneath, which also
   gives them a wider tap target than they would get squeezed inline.
   Nothing is hidden — the same destinations are reachable on a phone
   as on a desktop. */
@media (max-width: 700px) {
  .topbar.topbar-v2 {
    padding: 0.625rem 0 0;
  }

  .topbar.topbar-v2 .topbar-inner {
    padding: 0 1rem;
    grid-template-areas:
      "brand search"
      "nav   nav";
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 0;
    column-gap: 0.75rem;
  }

  .topbar.topbar-v2 .topbar-nav {
    /* Scrolls rather than wraps, so a fifth link never stacks the bar
       into a third row. Negative margins let the strip bleed to the
       screen edges while its items stay aligned to the page gutter.
       Shorthand also clears the desktop margin-left. */
    margin: 0.5rem -1rem 0;
    padding: 0 1rem;
    gap: 1.5rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .topbar.topbar-v2 .topbar-nav::-webkit-scrollbar {
    display: none;
  }

  .topbar.topbar-v2 .topbar-nav-link {
    /* Taller tap target on the strip; the ::after rule tracks the
       padding box, so it drops with it and stays clear of the text. */
    padding: 0.4375rem 0 0.5625rem;
    font-size: 13px;
  }

  .topbar.topbar-v2 .topbar-nav-link::after {
    bottom: 0.25rem;
  }

  /* No modifier key on a phone, so the ⌘K badge is noise taking the
     room the field needs. */
  .topbar.topbar-v2 .palette-pill-kbd-row {
    display: none;
  }

  .topbar.topbar-v2 .topbar-pill-slot .palette-pill {
    max-width: none;
    height: 34px;
  }

}