/*
 * rmc-section-nav.css — the one owner of the in-page section bar.
 *
 * Before 2026-09-15 `.rmc-section-nav` was styled by 13 stylesheets carrying three
 * designs at once: a boxed left rail (padding, border, shadow, max-height and its
 * own scrollbar), a pill bar, and tabs. Measured in a browser, the result pinned
 * 61px below the top of the scroll area on role homes (content showed through the
 * gap), wrapped to three rows on phones, collapsed to a 13px sliver on operator
 * pages, and gave the active item 1.32:1 contrast.
 *
 * One design now: a flat bar pinned flush to the top of whatever scrolls the page.
 *  - The offset is MEASURED, not guessed. rmc-section-nav.js sets
 *    --rmc-section-nav-top on each bar: 0 inside an inner scroll container, the
 *    fixed header height on document-scroll shells, plus the height of any strip
 *    already pinned above it (--rmc-sticky-stack).
 *  - One row at every width; it scrolls sideways instead of wrapping.
 *  - The current item is marked with aria-current="location" (anchors on this page),
 *    aria-current="page" (links to other pages) or aria-selected="true" (tabs), and
 *    styled from that attribute.
 *
 * Variants:
 *  .rmc-section-nav--tabs    real tabs that swap panels (role="tablist")
 *  .rmc-section-nav--static  inline, never pinned (short pages, embedded cards)
 *  .rmc-section-nav--toc     vertical table of contents in a side column
 *
 * scripts/scan_section_nav_css_ownership.py keeps position/top/box/overflow/colour
 * rules for these selectors in this file only.
 */

.rmc-section-nav {
  position: sticky;
  top: var(--rmc-section-nav-top, 0px);
  z-index: var(--rmc-z-section-nav, 30);
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  min-width: 0;
  max-width: 100%;
  max-height: none;
  margin: 0 0 var(--rmc-dh-gap, 0.875rem);
  padding: 0;
  overflow: visible;
  background: color-mix(in oklab, var(--surface-canvas, var(--surface-bg)) 90%, transparent);
  -webkit-backdrop-filter: saturate(1.08) blur(10px);
  backdrop-filter: saturate(1.08) blur(10px);
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  box-shadow: none;
}

.rmc-section-nav__label,
.rmc-section-nav__inline-label {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding-inline-start: 0.25rem;
  font-size: var(--type-size-micro, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.rmc-section-nav__list {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: 0.125rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
}

/* The strip scrolls sideways when the sections do not fit, so it must SAY so.
   A hidden bar here read as "these are all the sections" and the rest were
   unreachable by anything but a trackpad swipe.

   Thin, not the shared 11px pill: this strip's links are 2.75rem (44px) and the
   phone contract caps the whole bar at 48px (audit B8), so 4px is what fits
   beside them. Above that breakpoint there is no cap and the bar takes the
   shared track/thumb tokens. */
.rmc-section-nav__list::-webkit-scrollbar {
  height: 4px;
}
.rmc-section-nav__list::-webkit-scrollbar-thumb {
  border-radius: 2px;
}

@media (max-width: 30rem) {
  /* scrollbar-hidden-allow: phone caps the whole strip at 48px (audit B8) and a
     44px link row plus any bar exceeds it; the edge fade carries the affordance. */
  .rmc-section-nav__list {
    scrollbar-width: none;
  }
  .rmc-section-nav__list::-webkit-scrollbar {
    display: none;
  }
}
.rmc-section-nav__list > li { display: flex; flex: 0 0 auto; margin: 0; }

.rmc-section-nav .rmc-section-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--type-size-caption, 0.8125rem);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--motion-fast, 120ms) var(--ease-out, ease-out),
              border-color var(--motion-fast, 120ms) var(--ease-out, ease-out);
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.rmc-section-nav .rmc-section-nav__link i { color: var(--text-tertiary); }

.rmc-section-nav .rmc-section-nav__link:hover { color: var(--text-primary); }

.rmc-section-nav .rmc-section-nav__link:focus-visible {
  outline: 2px solid var(--focus-ring, var(--school-primary, currentColor));
  outline-offset: -2px;
}

.rmc-section-nav .rmc-section-nav__link[aria-current="location"],
.rmc-section-nav .rmc-section-nav__link[aria-current="page"],
.rmc-section-nav .rmc-section-nav__link[aria-selected="true"] {
  color: var(--text-primary);
  font-weight: 600;
  border-bottom-color: var(--school-primary, var(--brand-primary));
}
.rmc-section-nav .rmc-section-nav__link[aria-current="location"] i,
.rmc-section-nav .rmc-section-nav__link[aria-current="page"] i,
.rmc-section-nav .rmc-section-nav__link[aria-selected="true"] i {
  color: var(--school-primary, var(--brand-primary));
}

/* Tabs: buttons, not anchors. */
.rmc-section-nav--tabs .rmc-section-nav__link {
  cursor: pointer;
  font: inherit;
  font-size: var(--type-size-caption, 0.8125rem);
}

/* Inline: same look, never pinned. */
.rmc-section-nav--static {
  position: static;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Table of contents: a <details> dropdown (rmc_section_nav_curated.html, mode "toc"),
   optionally a vertical rail at >=1200px. The <details> box itself is styled in
   rmc-section-nav-toc.css; this file owns the nav's placement and its links. */
.rmc-section-nav--toc {
  position: static;
  display: block;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 0;
}
.rmc-section-nav--toc .rmc-section-nav__list {
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.35rem 0.5rem 0.55rem;
  max-height: min(16rem, 40vh);
  overflow-x: hidden;
  overflow-y: auto;
}
.rmc-section-nav--toc .rmc-section-nav__link {
  min-height: 2.25rem;
  padding: 0.4rem 0.55rem;
  border-bottom: 0;
  border-inline-start: 2px solid transparent;
  white-space: normal;
}
.rmc-section-nav--toc .rmc-section-nav__link[aria-current="location"],
.rmc-section-nav--toc .rmc-section-nav__link[aria-current="page"] {
  border-inline-start-color: var(--school-primary, var(--brand-primary));
}

@media (prefers-reduced-motion: reduce) {
  .rmc-section-nav .rmc-section-nav__link { transition: none; }
}