/* ============================================================
   nav-sub.css  —  Zodianimal.com sub-head bar (Phase 2)
   ------------------------------------------------------------
   Styles the build-injected `<nav class="pn-sub">` band that Agent B
   emits directly beneath the fixed top bar `.pn-bar`. It carries two
   rows generated from PNAV.HUBS:

     row 1  <ol class="pn-crumb">   breadcrumb trail, slash-separated
     row 2  <ul class="pn-subnav">  sibling links, horizontal scroller

   Markup contract (do not restyle away from it):
     <nav class="pn-sub" aria-label="Section">
       <ol class="pn-crumb"> <li><a href>..</a></li> ... <li aria-current="page">Leaf</li> </ol>
       <ul class="pn-subnav"> <li><a href>..</a></li> ... <li><a href aria-current="page">..</a></li> </ul>
     </nav>

   All color/space/motion reads design tokens from tokens.css. No hex.
   The breadcrumb separator is a literal forward slash, injected via CSS.
   ============================================================ */

/* Height the sticky top bar occupies. THE one knob every sticky
   offset on the site reads (this sub bar, the homepage .omv4-sub,
   the homepage rail, scroll-padding). The canvas bar is a FIXED
   64px at every width (.pn-inner { height: var(--pn-bar-h) } in
   nav-core.css; the nav pills scroll under a fade mask instead of
   wrapping), so the knob is exact even before hydration / JS-off.
   nav.js still measures the real rendered bar and re-asserts the
   value on :root, belt and braces. */
:root {
  --pn-bar-h: 64px;
  /* FULL sticky stack = the fixed bar + the sticky sub-band (sub-nav +
     breadcrumb). nav.js measures the real .pn-sub and overrides this exactly
     (bar-only on pages with no sub-band, like the homepage). Everything that
     sticks below the nav or scroll-pads to an anchor must clear THIS, not just
     --pn-bar-h, or the stack covers the page's own content. */
  --pn-stack-h: calc(var(--pn-bar-h) + 86px);
  --pn-sub-focus: var(--brass-bright, #efe2b4);
}

/* ---- The band ---------------------------------------------------- */
/* Astral Weld order: the sibling sub-nav (tabs) is the PRIMARY strip on
   top; the breadcrumb is a quieter, recessed strip beneath it. */
.pn-sub {
  /* full-width band under the top bar */
  position: sticky;
  top: var(--pn-bar-h);
  z-index: 110; /* below .pn-bar (120), above page content */
  display: flex;
  flex-direction: column;
  /* NOTE: no backdrop-filter here — it establishes a containing block that
     would clip the position:fixed sub-nav dropdown. A more opaque bg keeps
     the bar legible over scrolling content without the blur. */
  background: color-mix(in oklch, var(--ink, #0d0e18) 94%, transparent);
  border-bottom: 1px solid var(--line, rgba(214,193,140,.16));
  font-family: var(--sans, sans-serif);
  transition: background var(--dur, 320ms) var(--ease-out, ease),
              box-shadow var(--dur, 320ms) var(--ease-out, ease);
}

/* PRIMARY strip: the sub-menu tabs */
.pn-sub-primary { width: 100%; }

/* CRUMB strip: recessed, quieter, its own hairline-topped band below.
   A subtly LIGHTER, fading gradient (hair brighter than the sub-bar at the
   top, dissolving to transparent toward the page) reads it as its own quiet
   recessed shelf — distinct from the tabs above and the content below —
   while the top hairline keeps the hard join. color-mix over --ink/--panel,
   with a flat hex fallback for engines without color-mix. */
.pn-sub-crumb {
  width: 100%;
  border-top: 1px solid var(--line-soft, rgba(214,193,140,.08));
  background:
    linear-gradient(
      to bottom,
      color-mix(in oklch, var(--panel, #1a1c30) 32%, transparent),
      color-mix(in oklch, var(--ink,   #0d0e18) 18%, transparent) 55%,
      transparent);
}
@supports not (background: color-mix(in oklch, red, blue)) {
  .pn-sub-crumb {
    background: linear-gradient(to bottom, rgba(34,37,61,.34), rgba(0,0,0,.14) 55%, transparent);
  }
}

/* keep both rows hard-left on the SAME left edge as the top bar's .pn-inner
   (wordmark gutter). No centered measure cap: "Overview…Pisces" and
   "Home / …" begin directly under the wordmark. .pn-subnav keeps its
   horizontal scroller (declared below). */
.pn-crumb,
.pn-subnav {
  max-width: none;
  width: 100%;
  margin: 0;
  padding-inline: clamp(18px, 2.2vw, 34px);
  box-sizing: border-box;
}
.pn-subnav { padding-block: var(--s-2, .5rem); }
.pn-crumb { padding-block: var(--s-2, .5rem); }
/* Start the breadcrumb a touch farther right than the sub-nav's first tab
   (which sits at gutter + 12px), so "Home" never begins before the first
   sub-menu word — a small, stylish indent. */
.pn-sub-crumb .pn-crumb { padding-inline-start: calc(clamp(18px, 2.2vw, 34px) + 1.4rem); }

/* ---- Row 1: breadcrumb ------------------------------------------- */
.pn-crumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2, .5rem);
  font-size: .8125rem;
  letter-spacing: .01em;
  color: var(--muted, #adaec2);
}

.pn-crumb li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2, .5rem);
  min-width: 0;
}

/* literal forward-slash separator between crumbs (never a dash or arrow) */
.pn-crumb li + li::before {
  content: "/";
  color: var(--faint, #7f8096);
  font-size: .8em;
  line-height: 1;
  opacity: .7;
}

.pn-crumb a {
  color: var(--muted, #adaec2);
  text-decoration: none;
  border-radius: var(--r-1, 8px);
  transition: color var(--dur-fast, 180ms) var(--ease-out, ease);
}
.pn-crumb a:hover,
.pn-crumb a:focus-visible {
  color: var(--moon, #f6efd8);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent, #d6c18c);
  text-shadow: 0 0 10px oklch(0.90 0.09 88 / .45);
}

/* the current page: not a link, a stronger token color */
.pn-crumb [aria-current="page"] {
  color: var(--ivory, #ece7d8);
  font-weight: 500;
  /* let a long final crumb truncate rather than push the row */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* PRIMARY strip keeps overflow visible so a sub-nav dropdown can spill
   downward past the tab row; the horizontal scroll clip lives on the inner
   .pn-subnav only (see below). The progress seam is positioned against it. */
.pn-sub-primary { position: relative; overflow: visible; }

/* ---- Row 2: sibling sub-nav scroller ----------------------------- */
.pn-subnav {
  list-style: none;
  display: flex;
  align-items: stretch;
  gap: var(--s-1, .25rem);
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  /* soft edge fades so cut-off items read as "more to scroll" */
  --pn-fade: 24px;
  -webkit-mask-image: linear-gradient(
    to right, transparent 0, #000 var(--pn-fade),
    #000 calc(100% - var(--pn-fade)), transparent 100%);
  mask-image: linear-gradient(
    to right, transparent 0, #000 var(--pn-fade),
    #000 calc(100% - var(--pn-fade)), transparent 100%);
}
.pn-subnav::-webkit-scrollbar { display: none; } /* Chrome/Safari */

.pn-subnav li {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* Astral Weld sub-tab: serif label with a thin luminous underline that
   draws from center on hover. NEVER a fat pill fill. */
.pn-subnav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* touch target */
  padding: 0 12px;
  font-family: var(--serif, serif);
  font-size: .9rem;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
  color: var(--muted, #adaec2);
  text-decoration: none;
  background: transparent;
  transition: color var(--dur-fast, 180ms) var(--ease-out, ease),
              transform var(--dur-fast, 180ms) var(--ease-out, ease);
}
.pn-subnav a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 8px;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--brass, #d6c18c), transparent);
  transition: left var(--dur, 320ms) var(--ease-out, ease),
              right var(--dur, 320ms) var(--ease-out, ease),
              box-shadow var(--dur, 320ms) var(--ease-out, ease);
}
.pn-subnav a:hover,
.pn-subnav a:focus-visible {
  color: var(--moon, #f6efd8);
  transform: translateY(-1px);
  background: transparent;
  text-shadow: 0 0 10px oklch(0.90 0.09 88 / .4);
}
.pn-subnav a:hover::after,
.pn-subnav a:focus-visible::after {
  left: 12px;
  right: 12px;
  box-shadow: 0 0 8px oklch(0.78 0.11 85 / .5);
}

/* the current sibling: brightened italic serif + a lit underline + an
   ember star dot (meaning is never color-only) */
.pn-subnav a[aria-current="page"] {
  color: var(--moon, #f6efd8);
  font-style: italic;
  font-weight: 560;
  background: transparent;
}
.pn-subnav a[aria-current="page"]::after {
  left: 12px;
  right: 12px;
  background: linear-gradient(90deg, transparent, var(--brass-bright, #efe2b4), transparent);
  box-shadow: 0 0 10px oklch(0.90 0.09 88 / .6);
}
.pn-subnav a[aria-current="page"]::before {
  content: "\2726"; /* ✦ */
  position: absolute;
  top: 6px;
  right: 3px;
  font-size: 8px;
  color: var(--brass-bright, #efe2b4);
  text-shadow: 0 0 7px oklch(0.90 0.09 88 / .8);
}

/* visible focus for keyboard users on both rows (no outline removal) */
.pn-crumb a:focus-visible,
.pn-subnav a:focus-visible {
  outline: 2px solid var(--pn-sub-focus);
  outline-offset: 2px;
  border-radius: var(--r-1, 8px);
}

/* ---- THE WELD SEAM (Astral Weld) --------------------------------- */
/* nav.js toggles html.pn-bound past 24px of scroll. When bound, an
   igniting brass seam lights along the sub-bar's TOP edge and the join
   tightens (the bar's cool rim is in nav-core.css). The seam is a
   ::before top-border glow; a one-shot spark sweeps it L->R once on
   bind and is suppressed under reduced motion. 60fps: opacity/transform
   only. --pn-sealing is set by nav.js for the single sweep. */
.pn-sub::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent,
    var(--brass-dim, #a8925c) 22%,
    var(--weld-warm, #f0b46a) 50%,
    var(--brass-dim, #a8925c) 78%,
    transparent);
  opacity: 0;
  transform: scaleX(.2);
  transform-origin: left center;
  transition: opacity var(--dur, 320ms) var(--ease-out, ease),
              transform var(--dur-slow, 640ms) var(--ease-out, ease),
              box-shadow var(--dur, 320ms) var(--ease-out, ease);
}
html.pn-bound .pn-sub {
  background: color-mix(in oklch, var(--ink, #0d0e18) 94%, transparent);
  box-shadow: none;
}
@supports not (background: color-mix(in oklch, red, blue)) {
  html.pn-bound .pn-sub { background: var(--ink, #0d0e18); }
}
html.pn-bound .pn-sub::before {
  opacity: 1;
  transform: scaleX(1);
  box-shadow: 0 0 7px oklch(from var(--weld-warm) l c h / .55);
}
@supports not (color: oklch(from white l c h)) {
  html.pn-bound .pn-sub::before { box-shadow: 0 0 7px var(--weld-warm, #f0b46a); }
}
/* the travelling ignition spark, swept once on bind by nav.js */
.pn-sub .pn-seam-spark {
  position: absolute;
  top: -3px;
  left: 0;
  width: 64px;
  height: 5px;
  border-radius: 5px;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(closest-side,
    var(--weld-cool, #eaf3ff), var(--weld-warm, #f0b46a) 45%, transparent 75%);
  transform: translateX(-40px);
}
html.pn-sealing .pn-sub .pn-seam-spark {
  animation: pnSeamSpark var(--dur-slow, 640ms) var(--ease-out, ease) forwards;
}
@keyframes pnSeamSpark {
  0%   { opacity: 0; transform: translateX(-40px) scaleX(.6); }
  12%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(calc(100vw - 20px)) scaleX(1); }
}

/* ---- THE SCROLL SHOOTING-STAR (progress on the seam) ------------- */
/* nav.js injects `<div class="pn-progress"><i class="pn-progress-star"></i></div>`
   as the FIRST child of .pn-sub, sets --pn-scroll (0->1 page fraction) and
   --pn-beam (0->1 brightness) on <html>, and toggles html.pn-bound. The
   track spans the seam between the top bar and the sub-nav; it coexists with
   the base .pn-sub::before hairline (that stays the resting line). 60fps:
   width / left / opacity / transform / box-shadow only. */
.pn-progress {
  position: absolute;
  top: -1px;              /* sit on the seam, over .pn-sub::before */
  left: 0;
  right: 0;
  height: 2px;
  z-index: 7;             /* above the sub background + the ::before seam (5/6) */
  pointer-events: none;
}
/* the FILLED track: left edge -> the star head, brass gradient */
.pn-progress::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: calc(var(--pn-scroll, 0) * 100%);
  background: linear-gradient(90deg,
    transparent,
    var(--brass-dim, #a8925c) 40%,
    var(--brass, #d6c18c) 82%,
    var(--brass-bright, #efe2b4));
  border-radius: 2px;
  opacity: calc(.35 + var(--pn-beam, 0) * .55);
}
/* the beaming comet head: a warm brass -> cool-white core with a horizontal
   trailing tail, parked at the scroll fraction. Its opacity, glow spread and
   scale all ride --pn-beam so it blazes mid-scroll and fades toward the end. */
.pn-progress-star {
  position: absolute;
  top: 50%;
  left: calc(var(--pn-scroll, 0) * 100%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  /* cool-white core over a warm brass halo */
  background:
    radial-gradient(closest-side, #fff, var(--brass-bright, #efe2b4) 45%, transparent 78%);
  transform: translate(-50%, -50%) scale(calc(.7 + var(--pn-beam, 0) * .6));
  opacity: calc(.25 + var(--pn-beam, 0) * .75);
  box-shadow:
    0 0 calc(4px + var(--pn-beam, 0) * 12px) oklch(0.90 0.09 88 / .85),
    0 0 calc(2px + var(--pn-beam, 0) * 5px)  #fff;
  transition: opacity var(--dur-fast, 180ms) linear;
}
@supports not (color: oklch(from white l c h)) {
  .pn-progress-star {
    box-shadow:
      0 0 calc(4px + var(--pn-beam, 0) * 12px) var(--brass-bright, #efe2b4),
      0 0 calc(2px + var(--pn-beam, 0) * 5px)  #fff;
  }
}
/* the trailing tail: a short horizontal comet streak dragging left of the head */
.pn-progress-star::before {
  content: "";
  position: absolute;
  right: 50%;
  top: 50%;
  height: 2px;
  width: calc(18px + var(--pn-beam, 0) * 34px);
  transform: translateY(-50%);
  background: linear-gradient(270deg,
    var(--brass-bright, #efe2b4),
    var(--brass, #d6c18c) 35%,
    transparent);
  border-radius: 2px;
  opacity: calc(.2 + var(--pn-beam, 0) * .7);
}

/* ---- SUB-NAV DROPDOWN (items with children) ---------------------- */
/* apply-nav emits: li.pn-sub-item.pn-has-drop > a.pn-sub-link[aria-haspopup]
   (Label + span.pn-sub-caret) + ul.pn-subdrop > li > a.pn-subdrop-link.
   The parent li gets .pn-has-current when a child is the current page, and
   [data-open] when JS opens it. Shown on [data-open] OR hover/focus-within
   (desktop). The tab-row base look (.pn-subnav a) still applies to
   .pn-sub-link since it is an <a> inside .pn-subnav. */
.pn-sub-item { position: relative; }

/* the caret: a small chevron that flips when the drop is open */
.pn-sub-caret {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: .7;
  transition: transform var(--dur-fast, 180ms) var(--ease-out, ease),
              opacity var(--dur-fast, 180ms) var(--ease-out, ease);
}
.pn-sub-link:hover .pn-sub-caret,
.pn-sub-link:focus-visible .pn-sub-caret,
.pn-sub-item[data-open] .pn-sub-caret,
.pn-sub-item:hover .pn-sub-caret,
.pn-sub-item:focus-within .pn-sub-caret { opacity: 1; }
.pn-sub-item[data-open] .pn-sub-caret,
.pn-sub-link[aria-expanded="true"] .pn-sub-caret {
  transform: rotate(-135deg) translateY(1px);
}

/* the hidden dropdown panel: dark surface, hairline, radius, soft shadow.
   Renders downward, absolutely, below the item. High z-index so it clears
   the sub background even if the JS portals it under .pn-sub. */
.pn-subdrop {
  position: fixed;            /* fixed so the tab-row's overflow can't clip it; nav.js sets top/left */
  z-index: 130;               /* above bar (120) */
  min-width: 200px;
  margin: 0;
  padding: var(--s-1, .25rem);
  list-style: none;
  background: var(--panel, #1a1c30);
  border: 1px solid var(--line, rgba(214,193,140,.16));
  border-radius: var(--r-2, 14px);
  box-shadow: var(--e-2, 0 8px 30px rgba(0,0,0,.45));
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-fast, 180ms) var(--ease-out, ease),
              transform var(--dur-fast, 180ms) var(--ease-out, ease),
              visibility 0s linear var(--dur-fast, 180ms);
}
/* Shown ONLY via [data-open] (nav.js sets it on hover/focus/tap AND positions
   the fixed panel first, so there is no unpositioned flash). */
.pn-sub-item[data-open] > .pn-subdrop,
.pn-subdrop[data-open] {           /* [data-open] on the drop = nav.js portaled it to <body> */
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.pn-subdrop li { margin: 0; }

/* dropdown rows: quiet by default, IGNITE on hover (per #3) — brighten to
   moon, warm wash, lit-underline glow, a small nudge. Never dim. */
.pn-subdrop-link {
  position: relative;
  display: block;
  padding: 9px 12px;
  border-radius: var(--r-1, 8px);
  font-family: var(--serif, serif);
  font-size: .88rem;
  line-height: 1.25;
  color: var(--muted, #adaec2);
  text-decoration: none;
  transition: color var(--dur-fast, 180ms) var(--ease-out, ease),
              background var(--dur-fast, 180ms) var(--ease-out, ease),
              transform var(--dur-fast, 180ms) var(--ease-out, ease),
              text-shadow var(--dur-fast, 180ms) var(--ease-out, ease);
}
.pn-subdrop-link:hover,
.pn-subdrop-link:focus-visible {
  color: var(--moon, #f6efd8);
  background: var(--accent-soft, rgba(214,193,140,.16));
  transform: translateX(3px);
  text-shadow: 0 0 10px oklch(0.90 0.09 88 / .4);
}
.pn-subdrop-link:focus-visible {
  outline: 2px solid var(--pn-sub-focus);
  outline-offset: 2px;
}
/* current child inside the drop: brightened italic + a lit dot */
.pn-subdrop-link[aria-current="page"] {
  color: var(--moon, #f6efd8);
  font-style: italic;
  font-weight: 560;
}

/* the parent tab when a child is the current page: the lit active treatment
   (brightened + a lit underline + the ember star), matching aria-current tabs */
.pn-has-current > .pn-sub-link {
  color: var(--moon, #f6efd8);
  font-style: italic;
  font-weight: 560;
}
.pn-has-current > .pn-sub-link::after {
  left: 12px;
  right: 12px;
  background: linear-gradient(90deg, transparent, var(--brass-bright, #efe2b4), transparent);
  box-shadow: 0 0 10px oklch(0.90 0.09 88 / .6);
}
.pn-has-current > .pn-sub-link::before {
  content: "\2726"; /* ✦ */
  position: absolute;
  top: 6px;
  right: 3px;
  font-size: 8px;
  color: var(--brass-bright, #efe2b4);
  text-shadow: 0 0 7px oklch(0.90 0.09 88 / .8);
}

/* ---- Responsive collapse ----------------------------------------- */
@media (max-width: 640px) {
  .pn-sub {
    /* the sticky offset comes from the shared :root --pn-bar-h knob
       (measured by nav.js); no local override, it would desync */
    padding-top: var(--s-2, .5rem);
  }
  /* dropdown expands inline / full-width; tap to open (JS sets [data-open]).
     No hover-open on touch — only the explicit open state shows it. */
  /* stays a fixed panel (nav.js positions + width-clamps it); tap-to-open
     only — the [data-open] rule above is the sole reveal on touch */
  .pn-subdrop {
    min-width: 180px;
    max-width: calc(100vw - 16px);
  }
  .pn-crumb {
    flex-wrap: nowrap;
    overflow: hidden;
  }
  /* keep Home and the current page visible; truncate a long middle crumb */
  .pn-crumb li:not(:first-child):not(:last-child) a {
    max-width: 8ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pn-subnav a {
    padding-inline: var(--s-3, .75rem);
  }
}

/* ---- Reduced motion: no scroll animation, no seam sweep ---------- */
@media (prefers-reduced-motion: reduce) {
  .pn-subnav {
    scroll-behavior: auto;
    scroll-snap-type: none;
  }
  .pn-crumb a,
  .pn-subnav a {
    transition: none;
  }
  /* the seam becomes an instant hairline; no sweeping spark */
  .pn-sub::before {
    transition: opacity 1ms !important;
    transform: scaleX(1);
  }
  .pn-sub .pn-seam-spark { display: none !important; }

  /* progress: a static thin fill tracking --pn-scroll; no comet travel,
     no glow pulse. The star head + tail are suppressed entirely. */
  .pn-progress::before { opacity: .5; }
  .pn-progress-star {
    opacity: 0 !important;
    box-shadow: none !important;
    transition: none;
  }
  .pn-progress-star::before { display: none; }

  /* dropdown: still opens (visibility/opacity), just no rise/nudge transforms */
  .pn-subdrop { transition: none; transform: none; }
  .pn-sub-item[data-open] > .pn-subdrop,
  .pn-sub-item:hover > .pn-subdrop,
  .pn-sub-item:focus-within > .pn-subdrop { transform: none; }
  .pn-subdrop-link { transition: color var(--dur-fast, 180ms) linear; }
  .pn-subdrop-link:hover,
  .pn-subdrop-link:focus-visible { transform: none; }
  .pn-sub-caret { transition: none; }
}