@layer components {
  /* ===================================================
     Page Tabs: Dashboard-Aligned Horizontal Navigation
     Version: 3.1, Fully Transparent Rewrite (2026)

     Improvements:
     • Aligns the navigation band with the shared content width
     • Keeps the tab band completely transparent
     • Uses a dedicated sticky offset and z-index token
     • Prevents clipped focus outlines
     • Supports aria-current="page"
     • Gives episode navigation its own responsive grid behaviour
     • Removes brittle negative-margin and measured-height overrides
     • Keeps selector specificity low for page-level customisation
     • Preserves horizontal scrolling and reduced-motion support
     =================================================== */

  :where(.page-tabs) {
    --page-tabs-width: min(
      calc(100% - (2 * var(--space-md, 1rem))),
      var(--content-max, 1240px)
    );

    --page-tabs-accent: var(--accent, #d4af37);

    --page-tabs-border: var(
      --divider-border,
      var(--border-soft, var(--section-border, rgba(31, 28, 22, 0.18)))
    );

    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;

    position: sticky;

    top: var(
      --sticky-content-offset,
      calc(
        var(--header-offset, 4.5rem) +
        env(safe-area-inset-top)
      )
    );

    z-index: var(--z-sticky, 40);
    isolation: isolate;

    width: var(--page-tabs-width);

    margin:
      var(--space-xs, 0.5rem)
      auto
      var(--space-sm, 1rem);

    padding: 0;

    overflow-x: auto;
    overflow-y: hidden;

    overscroll-behavior-inline: contain;
    touch-action: pan-x pinch-zoom;

    -ms-overflow-style: none;

    background: transparent;
    border-bottom: 1px solid var(--page-tabs-border);

    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  body:has(.site-masthead__breadcrumbs) :where(.page-tabs) {
    --page-tabs-width: 100%;
    min-height: 0;
    align-items: stretch;
    margin-top: 0;
  }

  body:has(.site-masthead__breadcrumbs)
  :where(.content-container > .page-tabs) {
    width: auto;
    margin-inline: calc(-1 * var(--page-gutter));
    padding-inline: 0;
  }

  @supports (scrollbar-width: none) {
    :where(.page-tabs) {
      scrollbar-width: none;
    }
  }

  :where(.page-tabs)::-webkit-scrollbar {
    width: 0;
    height: 0;
    background: transparent;
  }

  :where(.page-tabs > p) {
    display: contents;
    margin: 0;
  }

  :where(.page-tabs) :where(.tab-link) {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    width: max-content;
    min-height: 2.35rem;
    padding: 0.48rem 0.85rem 0.26rem;

    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;

    color:
      var(
        --text-secondary,
        rgba(255, 255, 255, 0.82)
      );

    font-family: var(--font-display);

    font-size: var(--type-eyebrow-size-emphasis, 0.78rem);
    font-weight: var(--type-weight-semibold, 600);
    line-height: var(--type-ui-control-line, 1.1);
    letter-spacing: var(--type-nav-tracking, 0.05em);
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;

    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;

    cursor: pointer;

    transition:
      color 140ms ease,
      border-color 140ms ease,
      background-color 140ms ease;
  }

  :where(.page-tabs) :where(.tab-link:hover) {
    color: var(--page-tabs-accent);
    border-bottom-color: var(--page-tabs-accent);
  }

  :where(.page-tabs) :where(.tab-link:focus-visible) {
    color: var(--page-tabs-accent);
    border-bottom-color: var(--page-tabs-accent);

    outline: none;

    box-shadow:
      inset 0 0 0 2px
      color-mix(
        in srgb,
        var(--page-tabs-accent) 75%,
        transparent
      );
  }

  :where(.page-tabs)
  :where(
    .tab-link.active,
    .tab-link[aria-current="page"]
  ) {
    color: var(--page-tabs-accent);
    border-bottom-color: var(--page-tabs-accent);
  }

  /* Retained for existing markup.
     Prefer an aria-hidden icon in the template. */
  :where(.page-tabs) :where(.tab-link-related)::before {
    content: "↗ ";
  }

  /* ========================================
     Episode previous and next navigation
     ======================================== */

  :where(.page-tabs.episode-nav) {
    display: grid;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    align-items: stretch;
    gap: var(--space-xs, 0.5rem);

    overflow: visible;
  }

  :where(.page-tabs.episode-nav) :where(.tab-link) {
    width: 100%;
    max-width: 100%;
    white-space: normal;
  }

  @supports (text-wrap: balance) {
    :where(.page-tabs.episode-nav) :where(.tab-link) {
      text-wrap: balance;
    }
  }

  :where(.page-tabs.episode-nav) :where(.episode-prev) {
    grid-column: 1;
    justify-content: flex-start;
    text-align: left;
  }

  :where(.page-tabs.episode-nav) :where(.episode-next) {
    grid-column: 2;
    justify-content: flex-end;
    text-align: right;
  }

  /* ========================================
     Community navigation

     Apply .community-nav directly where possible.
     The body selector remains as a compatibility fallback.
     ======================================== */

  :where(.page-tabs.community-nav),
  :where(body.community)
  :where(.page-tabs:not(.episode-nav)) {
    align-items: center;
    margin-top: var(--space-md, 1rem);
    padding-block: 0;
  }

  :where(.page-tabs.community-nav)
  :where(.tab-link),
  :where(body.community)
  :where(.page-tabs:not(.episode-nav))
  :where(.tab-link) {
    min-height: 2.35rem;
    padding-block: 0.48rem 0.26rem;
  }

  /* ========================================
     Responsive behaviour
     ======================================== */

  @media (max-width: 600px) {
    :where(.page-tabs) {
      --page-tabs-width: 100%;

      margin-bottom: 0.75rem;
    }

    :where(.page-tabs) :where(.tab-link) {
      min-height: 2.35rem;
      padding: 0.46rem 0.72rem 0.24rem;
      font-size: 0.73rem;
    }

    :where(.page-tabs.episode-nav) {
      grid-template-columns: 1fr;
    }

    :where(.page-tabs.episode-nav)
    :where(.episode-prev) {
      grid-column: 1;
      grid-row: 1;
    }

    :where(.page-tabs.episode-nav)
    :where(.episode-next) {
      grid-column: 1;
      grid-row: 2;
    }
  }

  /* ========================================
     Reduced motion
     ======================================== */

  @media (prefers-reduced-motion: reduce) {
    :where(.page-tabs) :where(.tab-link) {
      transition: none;
    }
  }
}