/* ==========================================================================
   Dynamic-island navbar with liquid glass.

   Opt-in via .topbar-island on the header, NOT a change to .topbar itself: the
   same topbar markup is shared by seven pages, and the exam screen needs a
   stationary, boring bar — a floating pill that shrinks while someone is
   answering timed questions would be motion for its own sake.

   Structure of the effect:
     - the bar detaches into a rounded pill, centred, floating over content
     - a real glass stack: backdrop blur + saturation, top-lit edge, inner sheen
     - it contracts on scroll (the "dynamic island" behaviour) and expands back
     - it can also expand to hold transient content without a layout jump
   ========================================================================== */

.topbar-island {
  /* Detached from the document flow so content scrolls beneath it. The page adds
     .has-island to <html> which pays back the removed header height as padding,
     so nothing hides under the pill on first paint. */
  /* Centring: `left: 50%` resolves against the content box, which excludes the
     scrollbar, so on a scrolling desktop page the pill sat 7px left of the true
     optical centre (measured: pill centre 713 against viewport centre 720 with a
     15px scrollbar). `50vw` includes the scrollbar and matches what the eye
     compares against — the window, not the content box. */
  position: fixed;
  top: 12px;
  left: 50vw;
  transform: translateX(-50%);
  z-index: 60;

  /* Width is intrinsic, not 100%: the pill should be exactly as wide as its
     contents, which is what makes the contraction read as a shape change rather
     than a bar resizing. */
  width: max-content;
  max-width: calc(100vw - 24px);
  height: auto;
  min-height: 52px;
  padding: 8px 10px 8px 14px;
  gap: 10px;

  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  border-bottom-color: rgba(255, 255, 255, 0.10);   /* undo .topbar's bottom rule */

  /* --- the glass --- */
  background:
    linear-gradient(
      168deg,
      rgba(34, 36, 46, 0.44) 0%,
      rgba(20, 21, 27, 0.34) 58%,
      rgba(15, 16, 21, 0.40) 100%
    );
  /* Blur carries the effect, not opacity: a heavier fill hid whatever passed
     underneath and the pill read as a solid capsule. */
  -webkit-backdrop-filter: blur(22px) saturate(190%) brightness(1.06);
  backdrop-filter: blur(22px) saturate(190%) brightness(1.06);

  box-shadow:
    /* top-lit edge: the single most convincing glass cue */
    inset 0 1px 0 0 rgba(255, 255, 255, 0.13),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.30),
    /* contact shadow, so the pill sits above the page rather than in it */
    0 10px 32px -12px rgba(0, 0, 0, 0.80),
    0 2px 8px -4px rgba(0, 0, 0, 0.55);

  transition:
    min-height .34s cubic-bezier(.32, .72, 0, 1),
    padding .34s cubic-bezier(.32, .72, 0, 1),
    transform .34s cubic-bezier(.32, .72, 0, 1),
    background .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
  will-change: transform, min-height;
}

/* Specular highlight across the top third. Pseudo-element rather than another
   gradient layer so it can be faded independently when the pill contracts. */
.topbar-island::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.20) 0%,
    rgba(255, 255, 255, 0.05) 26%,
    transparent 52%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 1;
  transition: opacity .3s ease;
}

/* The page must reclaim the space the fixed header no longer occupies.
   Deliberately LESS than the pill's full height plus margins: leaving a small
   overlap means real content passes under the glass as the page scrolls, which
   is the only way the blur is ever visible. With a full clearance the pill floats
   over empty background and reads as a solid capsule — a review of the first
   version said exactly that: "the background behind the pill is solid black, so
   there is no content to blur".

   js/island.js measures the pill and sets the exact value; this is the pre-JS
   default so the first paint is never wrong by much. */
.has-island body { padding-top: 44px; }

/* ---------- contracted state ----------
   Added by js/island.js once the page is scrolled. The pill tightens and lifts
   slightly, which is the whole "dynamic island" read: the same object changing
   shape, not a bar appearing and disappearing. */

.topbar-island.is-compact {
  min-height: 44px;
  padding: 6px 8px 6px 12px;
  transform: translateX(-50%) translateY(-2px);
  background:
    linear-gradient(
      168deg,
      rgba(34, 36, 46, 0.58) 0%,
      rgba(18, 19, 25, 0.50) 58%,
      rgba(13, 14, 19, 0.56) 100%
    );
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.34),
    0 8px 22px -10px rgba(0, 0, 0, 0.85),
    0 2px 6px -3px rgba(0, 0, 0, 0.6);
}
.topbar-island.is-compact::before { opacity: .72; }

/* Secondary text folds away when compact — the shape change has to remove
   something, or it is just a shorter bar. */
.topbar-island .brand-sub,
.topbar-island .island-hide {
  max-width: 300px;
  opacity: 1;
  transition: max-width .34s cubic-bezier(.32,.72,0,1),
              opacity .22s ease, margin .34s cubic-bezier(.32,.72,0,1);
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
}
.topbar-island.is-compact .brand-sub,
.topbar-island.is-compact .island-hide {
  max-width: 0;
  opacity: 0;
  margin-left: 0;
  margin-right: 0;
}

/* ---------- controls inside the pill ----------
   Buttons need their own rounding and a lighter fill: default .btn styling was
   designed against an opaque bar and reads as a solid slab on glass. */

.topbar-island .btn {
  border-radius: 999px;
  min-height: 36px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
  backdrop-filter: none;               /* already behind the pill's own blur */
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
.topbar-island .btn:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.18);
}
.topbar-island .btn:active { transform: translateY(1px); }

.topbar-island .btn-primary {
  background: var(--accent);
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.22),
    0 6px 16px -8px rgba(94, 106, 210, 0.9);
}
.topbar-island .btn-primary:hover { background: var(--accent-hover); }

/* The tier badge and account chip also need pill geometry to belong here. */
.topbar-island .tier-badge { border-radius: 999px; }
.topbar-island .acct-chip { border-radius: 999px; }

/* Spacer is meaningless in an intrinsic-width pill: with width:max-content a
   flex:1 spacer would try to claim infinite room. */
.topbar-island .topbar-spacer { display: none; }

/* With the wordmark gone the mark sits directly beside the buttons, so the pill's
   left padding is reduced (it was tuned for a text lockup) and a hairline divider
   separates brand from actions. Without the divider the mark read as a third
   button rather than as the brand. */
.topbar-island { padding-left: 10px; }
.topbar-island .brand { margin-right: 2px; }
.topbar-island .brand::after {
  content: "";
  display: block;
  width: 1px; height: 18px;
  margin-left: 10px;
  background: rgba(255, 255, 255, 0.10);
}
.topbar-island.is-compact .brand::after { height: 15px; }

/* ---------- expanded state ----------
   The island can grow to hold transient content (a status line, a message)
   without the page jumping, because it is out of flow. */

.topbar-island.is-expanded {
  min-height: 52px;
  border-radius: 24px;          /* less pill, more panel, while expanded */
  padding: 10px 14px;
}
.island-extra {
  display: none;
  width: 100%;
  padding-top: 6px;
  font-size: 12.5px;
  color: var(--ink-3);
}
.topbar-island.is-expanded { flex-wrap: wrap; }
.topbar-island.is-expanded .island-extra { display: block; }

/* ---------- mobile ----------
   A pill that spans nearly the full width stops reading as an island, so on
   phones it keeps clear side margins and drops the blur radius: heavy blur on a
   large area is the most expensive thing on this page for mobile GPUs. */

@media (max-width: 720px) {
  .topbar-island {
    top: 8px;
    max-width: calc(100vw - 16px);
    min-height: 48px;
    padding: 6px 8px 6px 12px;
    gap: 8px;
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
  }
  .topbar-island.is-compact { min-height: 42px; }
  .has-island body { padding-top: calc(48px + 16px); }

  /* On a narrow screen the subtitle never fits alongside the actions. */
  .topbar-island .brand-sub { display: none; }
  .topbar-island .btn { min-height: 34px; padding: 0 12px; font-size: 13px; }
}

/* Very narrow phones: keep the brand from pushing the actions off-screen. */
@media (max-width: 400px) {
  .topbar-island { padding-left: 10px; }
  .topbar-island .brand-text { max-width: 96px; overflow: hidden;
                               text-overflow: ellipsis; white-space: nowrap; }
}

/* ---------- fallbacks ----------
   Without backdrop-filter the pill would be a translucent smear over moving
   text — unreadable. Opaque background instead, which is why the @supports test
   is a requirement rather than a nicety. */

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .topbar-island,
  .topbar-island.is-compact {
    background: #16171c;
    border-color: var(--line);
  }
  .topbar-island::before { opacity: .5; }
}

@media (prefers-reduced-motion: reduce) {
  .topbar-island,
  .topbar-island .brand-sub,
  .topbar-island .island-hide,
  .topbar-island .btn,
  .topbar-island::before {
    transition: none !important;
  }
  /* No shape change at all: the contraction is the animation. */
  .topbar-island.is-compact {
    min-height: 52px;
    padding: 8px 10px 8px 14px;
    transform: translateX(-50%);
  }
  .topbar-island.is-compact .brand-sub,
  .topbar-island.is-compact .island-hide {
    max-width: 300px;
    opacity: 1;
  }
}

/* Keyboard focus must stay visible on glass. */
.topbar-island .btn:focus-visible,
.topbar-island .acct-chip:focus-visible {
  outline: 2px solid var(--accent-hi);
  outline-offset: 2px;
}

/* ---------- give the glass something to refract ----------
   Measured problem: with the pill 342px wide and centred, and the hero carrying
   72px of top padding, no element ever intersected the pill's rectangle — probes
   returned zero elements beneath it both at rest and scrolled. A glass panel over
   permanent empty background is indistinguishable from a solid capsule, which is
   what two review passes reported.

   Fix: pull the hero up so its own content (eyebrow, headline) travels under the
   pill as the page scrolls, and let the proof strip pass beneath it too. Nothing
   is obscured at rest because the eyebrow still starts below the pill's bottom
   edge; the overlap only happens while scrolling, which is exactly when the blur
   should be visible. */
.has-island .lp-hero { padding-top: 34px; }

@media (max-width: 720px) {
  .has-island .lp-hero { padding-top: 26px; }
}

/* Same reasoning on the shorter marketing pages: their content column starts
   close to the top, so it passes under the pill on any scroll. */
.has-island .wrap > *:first-child { margin-top: 0; }