/* ============================================================
   section-tab-index (.pf-secnav) — a sticky, full-bleed section
   nav for long case studies. The bar spans the page; the tabs span
   the reading column, equal width, with a pink indicator that
   SLIDES to the current section (scrollspy, in context-cue.js).
   Sits in-page after the intro and pins under the nav via native
   position:sticky. Colours are tokens → dark mode flips for free.
   ============================================================ */

.pf-secnav { position: sticky; top: var(--pf-navh, 74px); z-index: 40; background: transparent; border-bottom: var(--pf-border) solid var(--pf-hairline); transition: background var(--pf-dur) var(--pf-ease), box-shadow var(--pf-dur) var(--pf-ease); }
.pf-secnav--stuck { background: var(--pf-surface); box-shadow: 0 6px 16px -12px rgba(0, 0, 0, .55); }

/* mirror the content structure so the tabs line up with the prose column */
.pf-secnav__inner { max-width: var(--pf-container-max); margin-inline: auto; padding-inline: var(--pf-gutter); }
.pf-secnav__rail { max-width: var(--pf-measure); margin-inline: auto; }

.pf-secnav__list { position: relative; display: flex; align-items: stretch; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pf-secnav__list::-webkit-scrollbar { display: none; }

.pf-secnav__link { flex: 1 1 0; min-width: max-content; display: inline-flex; align-items: center; justify-content: center; text-align: center; font-family: var(--pf-font-body); font-size: var(--pf-text-small); color: var(--pf-ink-secondary); text-decoration: none; white-space: nowrap; padding: 14px var(--pf-space-2) 8px; }
.pf-secnav__link:hover { color: var(--pf-ink); }
.pf-secnav__link[aria-current="true"] { color: var(--pf-ink); }

/* Landing position (v0.9.83): a section heading reached from a tab (or any in-page anchor) stops
   below the sticky nav + this bar with a breath of space, instead of under them, where the first
   lines of the section were hidden. --pf-secnav-h is set from the live bar height by context-cue.js
   (like --pf-navh); the fallback is the bar's resting height. The scroll itself is smooth via the
   reset's html rule (reduced-motion safe). */
.pf-secnav ~ * :is(h2, h3)[id] { scroll-margin-top: calc(var(--pf-navh, 74px) + var(--pf-secnav-h, 46px) + var(--pf-space-3)); }

/* Space under the bar (v0.9.89): the section that follows the bar opens one section-head step
   (--pf-space-6, 64px) below it, the same rhythm as between the h2 sections inside the prose, so
   the first heading never sits on the bar's hairline. It sat at 0: the case-study body carried an
   inline padding-top:0 from before the bar existed, when it followed the header's divider (Louis,
   2026-10-01). Two classes, so it outranks the section-to-section collapse in tokens/spacing.css. */
.pf-secnav + .pf-section { padding-block-start: var(--pf-space-6); }

/* the sliding pink indicator — hugs the bottom, tight to the text */
.pf-secnav__ind { position: absolute; left: 0; bottom: 0; height: var(--pf-border-strong); width: var(--pf-secnav-w, 0px); transform: translateX(var(--pf-secnav-x, 0px)); background: var(--pf-accent); transition: transform var(--pf-dur-slow) var(--pf-ease), width var(--pf-dur-slow) var(--pf-ease); }
@media (prefers-reduced-motion: reduce) { .pf-secnav__ind { transition: none; } }

/* mobile (DS md breakpoint): tabs stop being equal-width and scroll
   horizontally so long labels never truncate. The last tab peeking past the
   edge is the scroll affordance — no fade mask (it would clip the focus ring).
   v0.9.84: the bar pins to the TOP EDGE here. The primary nav is position:relative at this
   width (nav.css) and scrolls away, but --pf-navh is still set from its live height, so the
   bar used to pin 74px down with nothing above it and floated mid-air over the prose
   (Louis, 2026-09-30). It stays sticky on purpose: a long study on a phone is where section
   wayfinding pays most (Apple's local product nav pins the same way once the global nav is
   gone), and at 46px it is under a tenth of a phone viewport. The landing offset drops the
   nav height to match. */
@media (max-width: 768px) {
  .pf-secnav { top: 0; }
  .pf-secnav ~ * :is(h2, h3)[id] { scroll-margin-top: calc(var(--pf-secnav-h, 46px) + var(--pf-space-3)); }
  .pf-secnav__list { gap: var(--pf-space-3); -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .pf-secnav__link { flex: 0 0 auto; scroll-snap-align: start; }
}