@import "https://assets.elements.dev/assets/app/shared/styles/page.64d6423997831185.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 var(--chrome-rule);
  padding: 0.625rem 0;
}

.topbar.topbar-v2.is-dark {
  background: var(--theater-bg);
  /* A hairline under the bar. Without it the dark topbar and the dark
     theater ran together into one shell with no edge, and the theater read
     as unbounded. */
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  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); }

/* The nav stays on a player. Video and demo pages are the ones that get
   shared, so they are where a stranger lands first, and without the links
   their only way to Install or Demos was the logo or a search they had no
   reason to try. Set back at 62% white so it does not compete with the
   theater. */
.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;
}

/* Over a theater the bar's edges line up with the video's. Same cap as
   .post-theater in app/pages/posts/show/style.css (1600px, or the 16:9
   width that fits the viewport height) plus the 1.25rem inset the theater
   wrap gives the frame on each side. Change one, change both. Phones keep
   the mobile bar below, where the theater runs edge to edge anyway. */
.topbar.topbar-v2.is-dark.is-fullwidth .topbar-inner {
  max-width: calc(min(1600px, (100svh - 4rem) * 16 / 9) + 2.5rem);
  padding: 0 1.25rem;
}

/* Search fills the whole bar to the right of the nav. Capped at 320px and
   pushed to the far edge, it sat where a reader scanning left to right had
   often stopped reading, and was easy to miss. Filling the space puts its
   left edge a short gap after Pricing, inside the eye's path. The extra
   margin keeps that gap wider than the gap between nav links, so the field
   reads as its own thing and not a sixth link. Scoped to the topbar so the
   palette's own overlay input is untouched. */
.topbar.topbar-v2 .topbar-pill-slot {
  margin-left: 1.5rem;
}

/* Never more than half the bar: past that it stops reading as a search
   field in the chrome and starts competing with the page. The bar is
   capped at 1240px, so half is at most 620px. */
.topbar.topbar-v2 .topbar-pill-slot .palette-pill {
  max-width: min(50vw, 620px);
}

.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 {
    margin-left: 0;
  }

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

}