.site-header:has(.browse-menu) {
  position: relative;
}

.browse-menu[hidden] {
  display: none;
}

.browse-menu {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 6px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);

  transform-origin: center;
}

.browse-menu-preview {
  animation: browse-menu-pop 360ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.browse-menu-handoff-ready .browse-menu:not(.browse-menu-preview) {
  animation: browse-menu-pop 360ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: var(--browse-menu-offset, 0ms);
}

.browse-menu-item {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.browse-menu-preview .browse-menu-item {
  animation: browse-menu-item-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(180ms + var(--i, 0) * 60ms);
}

.browse-menu-handoff-ready .browse-menu:not(.browse-menu-preview) .browse-menu-item {
  animation: browse-menu-item-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(180ms + var(--i, 0) * 60ms + var(--browse-menu-offset, 0ms));
}

.browse-menu-item:hover {
  background: var(--accent-soft);
  color: var(--text);
}

.browse-menu-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.browse-menu-item.active {
  background: var(--accent);
  color: #fff;
}

.browse-menu-item.active:hover {
  background: var(--accent);
  color: #fff;
  filter: brightness(1.05);
}

@keyframes browse-menu-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 8px)) scaleX(0.6);
  }
  60% {
    opacity: 1;
    transform: translate(-50%, -50%) scaleX(1.02);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scaleX(1);
  }
}

@keyframes browse-menu-item-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.85);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .browse-menu,
  .browse-menu-item {
    animation: none;
  }
}

/* ── Mobile (≤ 720px) ─────────────────────────────────────────────
   The pill drops into normal flow on its own row, becomes a
   horizontally snap-scrolling chip strip with edge fades that hint
   there's more, and the scrollbar is hidden so it feels native.
   Auto-scroll of the active chip into view is handled in JS.        */
@media (max-width: 720px) {
  /* Wrap the menu in a fade-edge mask so the leading/trailing chips
     softly fade where the scroll continues. Using a transparent
     mask-image rather than overlay siblings keeps the markup intact. */
  /* Kill the Plan→Browse handoff "pop" animation on mobile — its
     keyframes apply the desktop `translate(-50%, -50%)` transform,
     which drags the static mobile pill off-screen after navigation. */
  .browse-menu-handoff-ready .browse-menu:not(.browse-menu-preview),
  .browse-menu-handoff-ready .browse-menu:not(.browse-menu-preview) .browse-menu-item {
    animation: none !important;
  }

  .browse-menu:not(.browse-menu-preview) {
    position: static;
    transform: none;
    animation: none;
    order: 4;
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    /* Flex items default to min-width:auto, which refuses to shrink
       below their content's intrinsic width. That makes a row of chips
       wider than the screen burst out of the header. Force shrink. */
    min-width: 0;
    margin: 6px 0 0;
    padding: 6px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: none;
    box-sizing: border-box;

    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
    justify-content: flex-start;

    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 16px,
      #000 calc(100% - 16px),
      transparent 100%
    );
            mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 16px,
      #000 calc(100% - 16px),
      transparent 100%
    );
  }

  .browse-menu:not(.browse-menu-preview)::-webkit-scrollbar {
    display: none;
  }

  .browse-menu:not(.browse-menu-preview) .browse-menu-item {
    flex: 0 0 auto;
    padding: 8px 16px;
    font-size: 13.5px;
    min-height: 36px;
    border-radius: 999px;
    scroll-snap-align: center;
    transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease;
  }

  .browse-menu:not(.browse-menu-preview) .browse-menu-item:not(.active) {
    background: var(--accent-soft);
    color: var(--text);
  }

  .browse-menu:not(.browse-menu-preview) .browse-menu-item.active {
    transform: scale(1.02);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  }

  /* The Plan-page preview pill animation looks fine collapsed but should
     still be centered horizontally so it doesn't anchor on top of the
     brand. Push it below the header by removing the vertical centering. */
  .browse-menu-preview {
    top: auto;
    bottom: -8px;
    transform: translate(-50%, 100%);
  }

  @keyframes browse-menu-pop {
    0% {
      opacity: 0;
      transform: translate(-50%, calc(100% - 8px)) scaleX(0.6);
    }
    60% {
      opacity: 1;
      transform: translate(-50%, 100%) scaleX(1.02);
    }
    100% {
      opacity: 1;
      transform: translate(-50%, 100%) scaleX(1);
    }
  }
}