/* ============================================================
   THE PRIMAL ORACLE — nav core (the sticky bar), canvas v3 skin
   Canvas-template-v2 bar: 64px. Wordmark "Zodi Animal" hard left
   (20px gutter), then Find yours | Explore | Menagerie | Bonds |
   Moon, then the right cluster — a plain spaced flex row with a
   fixed order and NO absolute positioning (popovers excepted):
     [identity chip .pn-id] [moon chip .pn-moon] [awakening ring
     .pn-ring] [CTA .pn-cta]
   (The theme toggle is gone: dark celestial is the only theme.)
   Every chip is its own inflexible box (flex:0 0 auto); the only
   shrinking element in the bar is .pn-nav (min-width:0, scrolls
   under a fade mask), so the cluster can never overlap.
   Collapse ladder: <1280px the ring leaves the bar, <1100px the
   identity chip leaves, <900px the burger drawer takes over; the
   drawer's .pn-drawer-chips strip (cloned by nav.js on open)
   carries the dropped chips so nothing is lost.
   Tokens only (tokens.css); dark celestial is the only theme.
   ============================================================ */

.pn-bar{position:sticky; top:0; z-index:120;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  background:color-mix(in oklab, var(--ink) 92%, transparent);
  border-bottom:1px solid var(--line)}
@supports not (background: color-mix(in oklab, red, blue)) {
  .pn-bar{background:var(--ink)}
}
/* one deterministic bar height: the shared knob every sticky offset
   reads (nav-sub.css declares --pn-bar-h:64px; nav.js re-measures).
   The inner row is knob minus the 1px bottom border, so the bar's
   full rendered height equals the knob exactly.
   Full-bleed row: the wordmark sits HARD LEFT on a fixed 20px
   gutter (no centered max-width cap), so at wide viewports the
   middle nav and the right cluster get all the freed room. */
.pn-inner{max-width:none; margin:0; height:calc(var(--pn-bar-h, 64px) - 1px);
  padding:0 clamp(16px, 3vw, 32px) 0 20px; display:flex; align-items:center; gap:16px}

/* compact stacked lockup (Astral Weld): wordmark hard left, a mono
   tagline welded on its right by a hairline, revealed at wide widths */
.pn-brand{display:flex; flex-direction:row; align-items:center; gap:.7ch;
  font-family:var(--serif,serif); letter-spacing:.2px; color:var(--ivory,#ece7d8);
  white-space:nowrap; text-decoration:none; flex:0 0 auto}
.pn-word{display:flex; flex-direction:column; line-height:1.02; font-size:18px}
.pn-word .z{color:var(--muted,#adaec2)}
.pn-word b{font-weight:560; color:var(--moon,#f5ecd2)}
.pn-tagline{font-family:var(--mono,monospace); font-size:7.5px; letter-spacing:.09em;
  line-height:1.42; text-transform:uppercase; color:var(--faint,#7f8096);
  white-space:nowrap; padding-left:.8ch; border-left:1px solid var(--line-soft);
  display:none}
@media (min-width:1040px){ .pn-tagline{display:block} }

/* top-level nav: pill links; overflow scrolls under a fade mask
   (canvas) so the bar can never wrap and change height */
.pn-nav{display:flex; align-items:center; gap:2px; flex:1 1 auto; min-width:0;
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
.pn-nav::-webkit-scrollbar{display:none}
/* the shared "Porsche" trigger hover (Astral Weld): a blurred headlight
   bloom BEHIND the label, a thin accent underline drawing from center,
   and a 1px lift. Text muted -> moon. No boxy pill fill. */
.pn-link,.pn-trigger{position:relative; font:500 .875rem/1 var(--sans,sans-serif);
  color:var(--muted,#adaec2); letter-spacing:.01em; white-space:nowrap;
  padding:9px 13px; border-radius:var(--r-1,8px);
  background:transparent; border:none; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:6px;
  transition:color var(--dur-fast,180ms) var(--ease-out,ease),
             transform var(--dur-fast,180ms) var(--ease-out,ease)}
.pn-link::before,.pn-trigger::before{content:""; position:absolute; inset:-6px -2px; z-index:-1;
  border-radius:40px;
  background:radial-gradient(60% 120% at 50% 60%, oklch(from var(--accent) l c h / .28), transparent 70%);
  filter:blur(7px); opacity:0; transform:scale(.7);
  transition:opacity var(--dur,320ms) var(--ease-out,ease), transform var(--dur,320ms) var(--ease-out,ease)}
.pn-link::after,.pn-trigger::after{content:""; position:absolute; left:50%; right:50%; bottom:4px; height:1px;
  background:linear-gradient(90deg,transparent,var(--accent-bright),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-link:hover,.pn-trigger:hover,
.pn-link:focus-visible,.pn-trigger:focus-visible,
.pn-trigger[aria-expanded="true"]{color:var(--moon,#f5ecd2); transform:translateY(-1px); background:transparent}
.pn-link:hover::before,.pn-trigger:hover::before,
.pn-link:focus-visible::before,.pn-trigger:focus-visible::before,
.pn-trigger[aria-expanded="true"]::before{opacity:1; transform:scale(1)}
.pn-link:hover::after,.pn-trigger:hover::after,
.pn-link:focus-visible::after,.pn-trigger:focus-visible::after,
.pn-trigger[aria-expanded="true"]::after{left:13px; right:13px;
  box-shadow:0 0 8px oklch(from var(--accent) l c h / .5)}
.pn-link.active,.pn-trigger.active{color:var(--accent-bright,#efe2b4)}

/* per-item accent: re-points --accent ramp so each tab's moonstone,
   headlight bloom, and underline tint to its domain hue */
.pn-item[data-accent="teal"]{--accent:var(--teal); --accent-bright:var(--teal-bright); --accent-dim:var(--teal-dim)}
.pn-item[data-accent="brass"]{--accent:var(--brass); --accent-bright:var(--brass-bright); --accent-dim:var(--brass-dim)}
.pn-item[data-accent="amethyst"]{--accent:var(--amethyst); --accent-bright:var(--amethyst-bright); --accent-dim:var(--amethyst-dim)}
.pn-item[data-accent="jade"]{--accent:var(--jade); --accent-bright:var(--jade-bright); --accent-dim:var(--jade-dim)}
.pn-item[data-accent="rose"]{--accent:var(--rose); --accent-bright:var(--rose-bright); --accent-dim:var(--rose-dim)}
.pn-item[data-accent="silver"]{--accent:var(--silver); --accent-bright:var(--silver-bright); --accent-dim:var(--silver-dim)}
.pn-item[data-accent]{--accent-soft:oklch(from var(--accent) l c h / 0.16)}

/* "Find yours": its own quiet keystone, a hair brighter with a warm bloom */
.pn-link.pn-find{color:var(--ivory,#ece7d8); font-weight:600}
.pn-link.pn-find::before{background:radial-gradient(60% 120% at 50% 60%,
   oklch(0.90 0.09 88 / .30), transparent 70%)}

/* the moonstone in each trigger — ACCENTUATES on hover/open, never dims */
.pn-stone{width:15px; height:15px; color:var(--accent); opacity:.85; flex:0 0 auto;
  filter:drop-shadow(0 0 4px var(--accent-soft));
  transition:opacity var(--dur-fast,180ms) var(--ease-out,ease),
             transform var(--dur-fast,180ms) var(--ease-out,ease),
             filter var(--dur-fast,180ms) var(--ease-out,ease)}
.pn-trigger:hover .pn-stone,.pn-trigger[aria-expanded="true"] .pn-stone{
  opacity:1; transform:translateY(-1px) scale(1.08); filter:drop-shadow(0 0 7px var(--accent-soft))}

.pn-trigger .chev{width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-1px); transition:transform .22s ease; opacity:.75}
.pn-trigger:hover .chev,.pn-trigger[aria-expanded="true"] .chev{opacity:1}
.pn-trigger.expanded,.pn-trigger[aria-expanded="true"]{color:var(--moon,#f5ecd2)}
.pn-trigger.expanded .chev,.pn-trigger[aria-expanded="true"] .chev{transform:rotate(-135deg) translateY(1px)}
.pn-item{position:relative}

/* @supports fallback: browsers without relative-color oklch() get a
   flat accent-tinted bloom + underline instead of the per-hue mix */
@supports not (color: oklch(from white l c h)){
  .pn-link::before,.pn-trigger::before{background:radial-gradient(60% 120% at 50% 60%, var(--accent-soft), transparent 70%)}
  .pn-link:hover::after,.pn-trigger:hover::after,
  .pn-link:focus-visible::after,.pn-trigger:focus-visible::after,
  .pn-trigger[aria-expanded="true"]::after{box-shadow:0 0 8px var(--accent-soft)}
}

/* right-side tools: [identity chip] [moon chip] [awakening ring]
   [theme toggle] [CTA]. A plain spaced flex row: every chip is an
   inflexible box (flex:0 0 auto), separation comes ONLY from the
   flex gap, and nothing in here is absolutely positioned except
   the moon popover. Hidden slots are hard-off so an empty slot can
   never cost a gap or catch a click. */
.pn-tools{display:flex; align-items:center; gap:10px; margin-left:auto; flex:0 0 auto; min-width:0}
.pn-tools > [hidden]{display:none !important}
/* the chips set their own display, which would beat the UA [hidden]
   rule outside .pn-tools (drawer clones et al.); keep hidden hard-off */
.pn-id[hidden],.pn-ring[hidden]{display:none}

/* identity chip: compact glyph avatar + short animal name. The
   label truncates with ellipsis at 140px; the full line lives in
   title/aria-label (nav-me.js). Hidden entirely until a reveal. */
.pn-id{display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 12px 0 7px;
  max-width:200px; flex:0 0 auto; min-width:0;
  background:transparent; border:1px solid var(--line); border-radius:var(--r-pill,999px);
  color:var(--ivory); font:500 .78rem/1 var(--sans,sans-serif); letter-spacing:.01em;
  text-decoration:none; white-space:nowrap;
  transition:border-color .2s ease, color .2s ease, background .2s ease,
             box-shadow .2s ease, transform var(--dur-fast,180ms) var(--ease-out,ease)}
/* ignite (never dim): brass rim, moon text, warm wash + a lift and a soft bloom */
.pn-id:hover,.pn-id:focus-visible{border-color:var(--accent); color:var(--moon); background:var(--accent-soft);
  transform:translateY(-1px); box-shadow:0 0 16px -3px var(--accent-soft)}
.pn-id .pn-id-glyph{display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; flex:0 0 auto; border-radius:50%;
  border:1px solid var(--line-soft); background:var(--accent-soft);
  font-size:.85rem; line-height:1}
.pn-id .lbl{display:block; max-width:140px; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.pn-moonwrap{position:relative; flex:0 0 auto}
.pn-moon{display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 12px;
  flex:0 0 auto; text-decoration:none;
  background:transparent; border:1px solid var(--line); border-radius:var(--r-pill,999px);
  color:var(--muted); font:400 .68rem/1 var(--mono,monospace); cursor:pointer; white-space:nowrap;
  transition:border-color .2s ease, color .2s ease, background .2s ease,
             box-shadow .2s ease, transform var(--dur-fast,180ms) var(--ease-out,ease)}
/* ignite: brass rim, moon text, a lift and a soft bloom (never dim) */
.pn-moon:hover,.pn-moon:focus-visible,.pn-moon[aria-expanded="true"]{border-color:var(--accent); color:var(--moon);
  transform:translateY(-1px); box-shadow:0 0 16px -3px var(--accent-soft)}
.pn-moon[aria-expanded="true"]{background:var(--accent-soft)}
.pn-moon .g{font-size:1rem; line-height:1}
.pn-moon[hidden]{display:none}
.pn-moonpop{position:absolute; right:0; top:calc(100% + 14px);
  width:min(300px, calc(100vw - 32px)); background:var(--panel);
  border:1px solid var(--line); border-radius:0 0 18px 18px; box-shadow:var(--e-2);
  padding:20px; z-index:121}
.pn-moonpop[hidden]{display:none}
.pn-moonpop .pnm-head{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.pn-moonpop .pnm-glyph{font-size:2.2rem; line-height:1}
.pn-moonpop .pnm-name{margin:0; font:600 1.1rem/1.2 var(--serif); color:var(--moon)}
.pn-moonpop .pnm-pct{margin:0; font:400 .68rem/1.4 var(--mono); color:var(--muted)}
.pn-moonpop .pnm-meaning{margin:0 0 6px; font:400 .85rem/1.55 var(--sans); color:var(--body-text)}
.pn-moonpop .pnm-favors{margin:0 0 12px; font:600 .8rem/1.4 var(--sans); color:var(--season)}
.pn-moonpop .pnm-link{font:600 .8rem/1 var(--sans); color:var(--accent); text-decoration:none;
  transition:color var(--dur-fast,180ms) var(--ease-out,ease), text-shadow var(--dur-fast,180ms) var(--ease-out,ease)}
.pn-moonpop .pnm-link:hover,.pn-moonpop .pnm-link:focus-visible{color:var(--accent-bright); text-shadow:0 0 12px var(--accent-soft)}
@media (prefers-reduced-motion: no-preference){
  .pn-moonpop{animation:pnPopIn .2s ease both}
  @keyframes pnPopIn{from{opacity:0; transform:translateY(-6px) scale(.99)} to{opacity:1; transform:none}}
}

/* awakening ring: a 38px slot holding a 34px SVG ring with the
   openness % stacked in its center via grid (grid-area 1/1 on both
   children), NOT absolute positioning. Filled by nav-progress.js;
   ring colors are tokens here, never in JS. */
.pn-ring{display:inline-grid; place-items:center; width:38px; height:38px; flex:0 0 auto;
  border-radius:50%; text-decoration:none; color:var(--ivory); cursor:pointer;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease,
             transform var(--dur-fast,180ms) var(--ease-out,ease)}
.pn-ring > *{grid-area:1 / 1}
.pn-ring svg{display:block; transform:rotate(-90deg)}
.pn-ring .pnp-track{stroke:var(--line)}
.pn-ring .pnp-fill{stroke:var(--accent); transition:stroke-dasharray .4s ease, stroke .2s ease}
.pn-ring .pn-ring-pct{font:700 .5rem/1 var(--mono,monospace); color:var(--ivory);
  letter-spacing:0; pointer-events:none}
/* ignite: warm wash, moon text, brighter ring fill + a soft bloom (never dim) */
.pn-ring:hover,.pn-ring:focus-visible{background:var(--accent-soft); color:var(--moon);
  box-shadow:0 0 16px -3px var(--accent-soft)}
.pn-ring:hover .pnp-fill,.pn-ring:focus-visible .pnp-fill{stroke:var(--accent-bright,var(--accent))}

/* the theme toggle chip is retired (dark-only); if a stale page
   still ships one, theme.js hides it and this keeps it gone */
.pn-theme{display:none !important}

/* the bar CTA: the sitewide sheen contract (om-sheen lives in skin.css) */
.pn-cta{display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 20px;
  background:
    linear-gradient(105deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 58%) no-repeat,
    linear-gradient(135deg, var(--cta-g1), var(--cta-g2));
  background-size:220% 100%, 180% 180%;
  background-position:-160% 50%, 0% 50%;
  color:var(--cta-text); font:700 .85rem/1 var(--sans); letter-spacing:.01em;
  border-radius:var(--r-pill,999px); text-decoration:none; white-space:nowrap;
  box-shadow:0 4px 18px var(--accent-soft);
  transition:transform .25s var(--ease-io), box-shadow .25s var(--ease-io)}
.pn-cta:hover,.pn-cta:focus-visible{animation:om-sheen .7s ease forwards;
  transform:translateY(-2px);
  box-shadow:0 10px 30px var(--accent-soft), 0 0 0 3px var(--sec-soft)}
.pn-cta:active{transform:translateY(0) scale(.97)}

.pn-burger{display:none; margin-left:6px; background:transparent; border:1px solid var(--line,#2a2c44);
  color:var(--moon,#f5ecd2); border-radius:11px; width:44px; height:40px; cursor:pointer; font-size:1.15rem; flex:0 0 auto}

/* anchor jumps clear the sticky bar; --pn-bar-h is the shared knob
   declared in nav-sub.css and measured live by nav.js */
body.pn-has-bar{scroll-padding-top:calc(var(--pn-stack-h, 150px) + 12px)}
/* the pre-rendered bar supersedes any legacy simple header */
body.pn-has-bar header.top{display:none}
/* crawlable section links: real anchors, not shown to sighted users */
.pn-crawl[hidden]{display:none}

/* ============================================================
   THE WELD (Astral Weld, adapted to the fixed bar + sticky sub).
   nav.js toggles html.pn-bound past 24px of scroll. On bind the bar
   slab cools and settles a hair, and a moonlit cool rim lights on its
   bottom edge — the sub-bar carries the brass igniting seam (nav-sub
   .css). Opacity/transform only; the seam animation respects reduced
   motion (see the guard block below).
   ============================================================ */
:root{
  --weld-warm:oklch(0.80 0.13 62);   /* red-light warmth at the seam */
  --weld-cool:oklch(0.95 0.03 220);  /* cryo cool top/bottom rim */
}
@supports not (color: oklch(0% 0 0)){
  :root{ --weld-warm:#f0b46a; --weld-cool:#eaf3ff }
}
html.pn-bound .pn-bar{
  background:color-mix(in oklab, var(--ink) 95%, transparent);
  border-bottom-color:transparent;
  transition:background var(--dur,320ms) var(--ease-out,ease),
             border-color var(--dur,320ms) var(--ease-out,ease)}
@supports not (background: color-mix(in oklab, red, blue)){
  html.pn-bound .pn-bar{background:var(--ink)}
}
/* moonlit cool rim welded onto the bar's bottom edge on bind */
/* .pn-bar is position:sticky (declared above) so it is a containing
   block for this absolutely-positioned rim */
html.pn-bound .pn-bar::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  z-index:2; pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--weld-cool),transparent); opacity:.5}

@media (prefers-reduced-motion: reduce){
  .pn-cta:hover,.pn-cta:focus-visible{animation:none; transform:none}
  .pn-moonpop{animation:none}
  .pn-ring .pnp-fill{transition:none}
  html.pn-bound .pn-bar{transition:none}
  /* triggers/links still brighten (color set on :hover); drop only the lift */
  .pn-link:hover,.pn-trigger:hover,
  .pn-link:focus-visible,.pn-trigger:focus-visible,
  .pn-trigger[aria-expanded="true"]{transform:none}
  .pn-id:hover,.pn-id:focus-visible,
  .pn-moon:hover,.pn-moon:focus-visible{transform:none}
  .pn-stone{transition:none}
}

/* the drawer's tool-chip strip: nav.js clones the bar's identity
   chip, moon chip, and awakening ring here on every open, so the
   chips dropped by the collapse ladder below are never lost. The
   chips reuse their bar classes (.pn-id/.pn-moon/.pn-ring above);
   this block only lays the strip out. Lives here, not in
   nav-drawer.css, because the chips and their ladder are owned by
   this file. */
.pn-drawer-chips{display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:var(--s-2,.5rem) 0 var(--s-3,.75rem); margin-bottom:var(--s-2,.5rem);
  border-bottom:1px solid var(--line-soft)}
.pn-drawer-chips:empty{display:none; border:0; margin:0; padding:0}
.pn-drawer-chips .pn-id{max-width:100%}
.pn-drawer-chips .pn-id .lbl{max-width:240px}

/* responsive collapse ladder: chips leave the BAR (never the
   drawer strip) as space tightens, widest first */
@media(max-width:1279px){ .pn-bar .pn-tools .pn-ring{display:none} }
@media(max-width:1180px){ .pn-cta{padding:0 14px} }
@media(max-width:1099px){ .pn-bar .pn-tools .pn-id{display:none} }
@media(max-width:900px){
  .pn-nav{display:none}
  .pn-burger{display:block}
}
@media(max-width:760px){ .pn-cta{display:none} }
@media(max-width:560px){
  .pn-moonwrap{display:none}
  .pn-inner{padding:0 18px; gap:12px}
}