/* ============================================================================
   chapter-nav.css — house navigation for a linear, multi-page site (book, docs, archive chapters).
   Pairs with zen-theme.css (uses its --nav-pill-* tokens). Vendor next to it; markup contract in chapter-nav.md.

   Two presentations, ONE data list, exactly one exposed per viewport (the other is display:none):
     .chapter-nav  — desktop: always-visible pills that WRAP inside the sticky header. Never a hidden-scrollbar strip:
                     a nav that blends into browser chrome is a nav nobody uses (analytics: visitors never left page 1).
     .chapter-bar  — phones / short viewports: fixed bottom bar in the thumb zone, ‹ Prev | [current ▴] | Next ›.
                     The middle button IS the "which page am I on" indicator and opens .chapter-sheet, a native
                     <dialog> listing every chapter (focus trap, inert background, Escape and focus restore for free).
   Breakpoint: (max-width:700px) OR (max-height:500px) — landscape phones are wide but too short for a 3-row header.
   Fixed chrome paints on opaque --surface (zen-cosmic --card-bg is translucent and ghosts text through a bar).
   z-index ladder: header 20 · bar 30 · drawers 40 · sheet = browser top layer (above everything, no number needed).
   ========================================================================== */

/* --- desktop pills --- */
.chapter-nav{display:flex;flex-wrap:wrap;gap:8px;flex:1;min-width:0;padding:2px}
.chapter-nav a{white-space:nowrap;font-size:13px;font-weight:700;color:var(--nav-pill-fg);text-decoration:none;padding:7px 14px;border-radius:999px;
  border:1.5px solid var(--nav-pill-border);background:var(--nav-pill-bg);transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.chapter-nav a:hover{background:var(--nav-pill-bg-hover);border-color:var(--teal);transform:translateY(-1px);box-shadow:0 4px 12px rgba(13,91,110,.18)}
.chapter-nav a[aria-current="page"]{background:var(--nav-pill-current-bg);color:var(--nav-pill-current-fg);border-color:transparent;box-shadow:0 6px 16px var(--nav-pill-current-shadow)}
.chapter-nav a[aria-current="page"]:hover{transform:none}
.chapter-nav a:focus-visible,.chapter-bar a:focus-visible,.chapter-bar button:focus-visible,.chapter-sheet a:focus-visible,.chapter-sheet button:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

/* --- mobile bar (hidden until the media query below) --- */
.chapter-bar{display:none}
/* outer pills: a DETERMINISTIC label ("‹ Ch. 3", "Ch. 5 ›", "‹ Start", "About ›") — never the title, which would
   ellipsize to "3 · W…" and mean nothing (Kindle / Apple Books toolbars: chevron + short target identifier). */
.chapter-bar-prev,.chapter-bar-next{display:flex;align-items:center;gap:4px;min-height:44px;padding:6px 14px;border-radius:999px;border:1.5px solid var(--nav-pill-border);
  background:var(--nav-pill-bg);color:var(--nav-pill-fg);font-size:13.5px;font-weight:800;text-decoration:none;white-space:nowrap;box-shadow:0 2px 8px rgba(12,47,40,.10)}
.chapter-bar-prev i,.chapter-bar-next i{font-style:normal;font-size:20px;line-height:1;flex:0 0 auto}
.chapter-bar-empty{min-width:0}
.chapter-bar-current{display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 16px;border-radius:999px;border:none;background:var(--nav-pill-current-bg);color:var(--nav-pill-current-fg);
  font:inherit;font-size:13px;font-weight:800;box-shadow:0 6px 16px var(--nav-pill-current-shadow);cursor:pointer;min-width:0;justify-content:center}
.chapter-bar-current span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chapter-bar-current i{font-style:normal;font-size:15px;line-height:1;flex:0 0 auto}
.chapter-bar-current i:last-child{font-size:10px;transition:transform .15s}
.chapter-bar-current[aria-expanded="true"] i:last-child{transform:rotate(180deg)}

/* --- the sheet: a native modal <dialog> anchored to the bottom edge --- */
.chapter-sheet{position:fixed;inset:auto 0 0 0;width:100%;max-width:none;margin:0;padding:10px 14px calc(16px + env(safe-area-inset-bottom));border:0;border-top:1px solid var(--line);border-radius:18px 18px 0 0;
  background:var(--surface);color:var(--fg);max-height:78vh;max-height:78dvh;overflow-y:auto;overscroll-behavior:contain;box-shadow:0 -12px 40px rgba(6,20,26,.28)}
.chapter-sheet[open]{animation:chapter-sheet-up .18s ease-out}
.chapter-sheet::backdrop{background:rgba(6,20,26,.45);backdrop-filter:blur(2px)}
@keyframes chapter-sheet-up{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
.chapter-sheet-head{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--purple);padding:6px 4px 8px}
.chapter-sheet-close{border:none;background:none;color:var(--faint);font-size:26px;line-height:1;cursor:pointer;padding:0 4px}
.chapter-sheet-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.chapter-sheet-list a{display:flex;align-items:center;gap:12px;min-height:46px;padding:8px 14px;border-radius:14px;border:1.5px solid var(--nav-pill-border);background:var(--nav-pill-bg);color:var(--fg);text-decoration:none}
.chapter-sheet-list a b{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--nav-pill-fg);flex:0 0 74px}
.chapter-sheet-list a span{font-size:14.5px;font-weight:600;line-height:1.3}
.chapter-sheet-list a[aria-current="page"]{background:var(--nav-pill-current-bg);border-color:transparent;color:var(--nav-pill-current-fg);box-shadow:0 6px 16px var(--nav-pill-current-shadow)}
.chapter-sheet-list a[aria-current="page"] b{color:var(--nav-pill-current-fg)}
body.chapter-sheet-open{overflow:hidden}

/* --- the switch: phones, narrow windows, and SHORT viewports (landscape phones) get the bar --- */
@media (max-width:700px),(max-height:500px){
  .chapter-nav{display:none}
  html{scroll-padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .chapter-bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:30;
    padding:8px max(10px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
    background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -4px 18px rgba(12,47,40,.12)}
  /* no JS = no dialog: show the wrapped pills again so every chapter stays one tap away */
  html.no-js .chapter-nav{display:flex;flex-basis:100%;order:3}   /* the header must allow wrap: .site-header{flex-wrap:wrap} in the site stylesheet */
  html.no-js .chapter-bar-current{display:none}
}
@media (prefers-reduced-motion:reduce){.chapter-nav a,.chapter-bar-current i{transition:none}.chapter-nav a:hover{transform:none}.chapter-sheet[open]{animation:none}}