/* ============================================================
   OCCAM site — SECTION CAPSULE, 768–1459 (LOCKED 23 Sep 2026 — owner picked R3 · rev 2.1)
   Between the phone bar (≤767) and the labelled desktop rail (≥1460) the shipped rail kept its
   marks only. Here the phone bar is promoted to a floating capsule: one glass pill centred at
   the foot — prev · dot-chips · next — a neutral thumb under the current chip, the accent fill
   travelling along its top edge (full as the final banner enters, before the capsule leaves). It arrives after 40% of a screen
   of scroll, steps away as the page's last section (the final banner) reaches it — so it
   never covers it — and tucks away while the drawer is open. The rail, the header's progress
   line and the drawer's "On this page" list hide in this band only once the capsule exists
   (body.has-spine-capsule), so without script the shipped rail stays. Tokens only.
   Owner unlocked four fixes (25 Sep, tablet pass E13), none of which moves or resizes it:
   parked and tucked it is visibility:hidden, so neither a screen reader nor Tab reaches
   invisible buttons; its hover resets after a tap on touch; the thumb no longer animates
   width (it slides, and takes the new chip's width at once). Layout untouched.
   ============================================================ */
.spine-capsule, .spine-capsule-sentinel { display: none; }
@media (min-width: 768px) and (max-width: 1459px) {
  .spine-capsule-sentinel { display: block; position: absolute; top: 40vh; left: 0; width: 1px; height: 1px; visibility: hidden; pointer-events: none; }
  .spine-capsule { display: flex; align-items: center; gap: 2px; position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 60; max-width: calc(100vw - 48px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); height: 52px; padding: 0 3px; box-sizing: border-box; border: 1px solid var(--app-border); border-radius: var(--r-pill); background-color: var(--shell-bg); background-image: var(--rim-light); backdrop-filter: blur(var(--blur-shell)); -webkit-backdrop-filter: blur(var(--blur-shell)); box-shadow: var(--shadow-xl); opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, calc(100% + 32px)); transition: transform var(--transition-slow), opacity var(--transition-base), visibility var(--transition-slow); }
  /* on: past the opening stretch and short of the last section — and whenever keyboard focus is inside it
     (focus can only be inside it once it is on: parked it is hidden, so focus that entered keeps it up).
     visibility rides the slide: it turns visible at once on the way in and hidden only when the
     slide out ends, so the motion is exactly the shipped one. */
  .spine-capsule.is-on, .spine-capsule:has(:focus-visible) { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
  /* tucked: the drawer is open (outranks both of the above by source order) */
  .spine-capsule.is-tucked { opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, calc(100% + 32px)); }
  /* the fill: the capsule's own reading progress (--capsule-p), full before it steps away; rides the straight run of the top edge (radius 26, so 25px in); no transition, it tracks the scroll */
  .spine-capsule::after { content: ""; position: absolute; top: -1px; left: 25px; right: 25px; height: 1px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--capsule-p, 0)); pointer-events: none; }
  .spine-capsule-chips { position: relative; display: flex; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; border-radius: var(--r-pill); }
  .spine-capsule-chips::-webkit-scrollbar { display: none; }
  .spine-capsule-thumb { position: absolute; top: 0; left: 0; height: 44px; width: var(--thumb-w, 0); transform: translateX(var(--thumb-x, 0)); border-radius: var(--r-pill); background: var(--control-surface-hover-bg); box-shadow: 0 0 0 1px var(--app-border); transition: transform var(--transition-base); pointer-events: none; }
  .spine-capsule-chip { position: relative; z-index: 1; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: var(--r-pill); font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: var(--tracking-label, 0.1em); text-transform: uppercase; color: var(--text-secondary); white-space: nowrap; transition: color var(--transition-base); }
  .spine-capsule-chip::before { content: ""; width: 7px; height: 7px; flex: 0 0 auto; border-radius: var(--r-pill); background: var(--text-muted); transition: background-color var(--transition-base), transform var(--transition-base); }
  .spine-capsule-chip:hover, .spine-capsule-chip.is-current { color: var(--text-primary); }
  .spine-capsule-chip.is-current::before { background: var(--accent); transform: scale(calc(9 / 7)); }
  .spine-capsule-chip:focus-visible, .spine-capsule-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
  .spine-capsule-arrow { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 auto; border-radius: var(--r-pill); color: var(--text-secondary); transition: color var(--transition-base), background-color var(--transition-base), opacity var(--transition-base); }
  .spine-capsule-arrow svg { width: 16px; height: 16px; }
  .spine-capsule-arrow:hover { color: var(--text-primary); background: var(--control-surface-hover-bg); }
  .spine-capsule-arrow[disabled] { opacity: 0.4; pointer-events: none; }
  /* the capsule carries sections and progress in this band: one of each, not two */
  body.has-spine-capsule .gs-index, body.has-spine-capsule .gs-progress, body.has-spine-capsule .site-nav-scenes { display: none; }
  /* keyboard focus and in-page anchors stop short of the capsule wherever it floats */
  html:has(> body.has-spine-capsule) { scroll-padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}
/* hover is a mouse state: on touch a tapped chip or arrow kept its hover look until the next tap
   (a second chip in primary ink beside the real current one). Each shows its resting look; the
   press and keyboard focus keep theirs. */
@media (min-width: 768px) and (max-width: 1459px) and (hover: none) {
  .spine-capsule-chip:not(.is-current):hover:not(:active) { color: var(--text-secondary); }
  .spine-capsule-arrow:hover:not(:active) { color: var(--text-secondary); background: none; }
}
@media (prefers-reduced-motion: reduce) {
  .spine-capsule, .spine-capsule-thumb, .spine-capsule-chip, .spine-capsule-chip::before, .spine-capsule-arrow { transition: none; }
  .spine-capsule-chips { scroll-behavior: auto; }
}