/* Stage 1 — Schema-driven tier/rank tokens.
   tokens.css is generated by scripts/generateCssTokens.py from
   registry/gaia.json's meta block. DO NOT edit it by hand. */
@import url('./tokens.css');

/* Stage 1 — Web fonts are now loaded via explicit <link rel="stylesheet">
   tags in every HTML head (EB Garamond, Bricolage Grotesque, JetBrains
   Mono). The old @import here was replaced so we can preconnect and
   parallelise the font fetch with the CSS download.

   Vendored OFL Departure Mono — drop the woff2 here; JetBrains Mono
   fallback covers in the meantime. See docs/assets/fonts/.gitkeep for
   the vendoring checklist. */
@font-face {
  font-family: 'Departure Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/DepartureMono-Regular.woff2') format('woff2'),
       local('Departure Mono');
}

:root {
  /* Tier colour tokens (--basic / --extra / --unique / --ultimate +
       --tier-* canonical forms) are sourced from
       registry/gaia.json.meta.typeColors via tokens.css above.
       Do not re-declare them here — single source of truth. */
  --bg: #030712;
  --surface: #0f172a;
  --border: #1e293b;
  --text: #e2e8f0;
  --muted: #64748b;
  --code-bg: #0f172a;
  /* Hunter's Atlas brand-voice role tokens (Phase 1) */
  --honor-red: #ef4444;
  --honor-red-rgb: 239, 68, 68;
  --apex-gold: var(--rank-5);
  --apex-gold-rgb: 251, 191, 36;
  --font-display: 'EB Garamond', Georgia, serif;
  --font-body: 'Bricolage Grotesque', Inter, system-ui, sans-serif;
  --font-mono: 'Departure Mono', 'JetBrains Mono', ui-monospace, monospace;
  --diamond-seal-stroke: 1.5;
  /* ── Cluster palette (8 semantic groups, read by skill-graph.js) ── */
  --cluster-0: #4e9bff;
  --cluster-1: #f0a030;
  --cluster-2: #10b981;
  --cluster-3: #ef4444;
  --cluster-4: #b088f9;
  --cluster-5: #ec4899;
  --cluster-6: #22d3ee;
  --cluster-7: #fb7185;
}

/* ============================================================
     Stage 2 — Rank badge component (.rank-badge)
     ------------------------------------------------------------
     Canonical primitive for every rank surface. One component, three
     variants: 'chip' (level pill), 'stars' (6-star row), 'full' (both).
     Colour is driven exclusively by `data-level="N"` resolving to the
     --rank-N / --rank-N-bg / --rank-N-border tokens emitted by
     tokens.css (Stage 1). DO NOT add per-level hex codes here.

     Emit via window.rankBadge(level, { variant, size }) from
     docs/js/rank-badge.js, or via rank_badge_html() in the Python
     generators. Inline rank colours / star markup are forbidden — use
     the component so 4★ on every surface is pixel-identical.
     ============================================================ */
.rank-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  line-height: 1;
  flex-shrink: 0;
  vertical-align: middle;
}

.rank-badge[data-variant="stars"] {
  gap: 0;
}

.rank-badge[data-variant="full"] .rank-badge__stars {
  margin-left: .1rem;
}

/* Chip — colored level pill (e.g. "4★"). All colour via --rank-N tokens. */
.rank-badge__chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: .22rem .62rem;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.4;
  color: var(--muted);
  background: rgba(255, 255, 255, .02);
  border-color: var(--border);
}

.rank-badge[data-level="0"] .rank-badge__chip {
  color: var(--rank-0);
  background: var(--rank-0-bg);
  border-color: var(--rank-0-border);
}

.rank-badge[data-level="1"] .rank-badge__chip {
  color: var(--rank-1);
  background: var(--rank-1-bg);
  border-color: var(--rank-1-border);
}

.rank-badge[data-level="2"] .rank-badge__chip {
  color: var(--rank-2);
  background: var(--rank-2-bg);
  border-color: var(--rank-2-border);
}

.rank-badge[data-level="3"] .rank-badge__chip {
  color: var(--rank-3);
  background: var(--rank-3-bg);
  border-color: var(--rank-3-border);
}

.rank-badge[data-level="4"] .rank-badge__chip {
  color: var(--rank-4);
  background: var(--rank-4-bg);
  border-color: var(--rank-4-border);
}

.rank-badge[data-level="5"] .rank-badge__chip {
  color: var(--rank-5);
  background: var(--rank-5-bg);
  border-color: var(--rank-5-border);
  box-shadow: 0 0 10px rgba(var(--apex-gold-rgb), 0.4);
}

.rank-badge[data-level="6"] .rank-badge__chip {
  color: var(--apex-gold, #fbbf24);
  background: var(--rank-6-bg, rgba(251, 191, 36, .22));
  border: 1.5px solid var(--rank-6-border, #ffffff);
  box-shadow: 0 0 15px #ffffff, 0 0 5px rgba(255, 255, 255, 0.5);
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.4);
}

/* Unique tier rank badge — black background with bright purple glow. */
.rank-badge[data-tier="unique"] .rank-badge__chip {
  color: var(--tier-unique, #7c3aed);
  background: #000000;
  border: 1.5px solid var(--tier-unique, #7c3aed);
  box-shadow: 0 0 12px var(--tier-unique, #7c3aed), 0 0 4px rgba(124, 58, 237, 0.5);
  text-shadow: 0 0 8px rgba(124, 58, 237, 0.4);
}

/* Size modifiers — sampler density only. Default is md. */
.rank-badge[data-size="sm"] .rank-badge__chip {
  font-size: .65rem;
  padding: .15rem .5rem;
}

.rank-badge[data-size="lg"] .rank-badge__chip {
  font-size: .9rem;
  padding: .35rem .85rem;
}

/* Stars row — 6 stars, lit by data-on, dim by data-off.
     Lit colour follows the rank palette (per DESIGN.md): apex gold is
     reserved for 6★ Ultimate only. 4★ reads as fuchsia, 5★ amber,
     6★ apex gold + white shimmer. Off-stars are a neutral white at low
     alpha so the lit colour reads cleanly against unlit slots regardless
     of rank. */
.rank-badge__stars {
  display: inline-flex;
  gap: 2px;
  font-size: .9rem;
  line-height: 1;
  align-items: center;
}

.rank-badge[data-size="sm"] .rank-badge__stars {
  font-size: .7rem;
  gap: 1px;
}

.rank-badge[data-size="lg"] .rank-badge__stars {
  font-size: 1.1rem;
  gap: 3px;
}

.rank-badge__star {
  display: inline-block;
  line-height: 1;
  color: rgba(255, 255, 255, .12);
  text-shadow: none;
  transition: color .18s ease, text-shadow .18s ease;
}

.rank-badge__star[data-off] {
  color: rgba(255, 255, 255, .12);
  text-shadow: none;
}

/* Lit-star colour follows the rank-of-the-row, NOT a blanket apex-gold.
     Each level uses its rank token from tokens.css :root. */
.rank-badge[data-level="0"] .rank-badge__star[data-on] {
  color: var(--rank-0, #94a3b8);
  text-shadow: 0 0 5px rgba(148, 163, 184, .35);
}
.rank-badge[data-level="1"] .rank-badge__star[data-on] {
  color: var(--rank-1, #38bdf8);
  text-shadow: 0 0 5px rgba(56, 189, 248, .4);
}
.rank-badge[data-level="2"] .rank-badge__star[data-on] {
  color: var(--rank-2, #63cab7);
  text-shadow: 0 0 5px rgba(99, 202, 183, .4);
}
.rank-badge[data-level="3"] .rank-badge__star[data-on] {
  color: var(--rank-3, #a78bfa);
  text-shadow: 0 0 6px rgba(167, 139, 250, .45);
}
.rank-badge[data-level="4"] .rank-badge__star[data-on] {
  color: var(--rank-4, #e879f9);
  text-shadow: 0 0 6px rgba(232, 121, 249, .5);
}
.rank-badge[data-level="5"] .rank-badge__star[data-on] {
  color: var(--rank-5, #fbbf24);
  text-shadow: 0 0 6px rgba(251, 191, 36, .45);
}
.rank-badge[data-level="6"] .rank-badge__star[data-on] {
  color: var(--apex-gold, #fbbf24);
  text-shadow: 0 0 8px rgba(251, 191, 36, .6), 0 0 2px rgba(255, 255, 255, .9);
}

/* 6★ apex — The shimmer animation is retired here; the 6★ badge 
     now uses a high-contrast white-on-gold sacred ledger identity. */

/* Legacy alias shims — Stage 2 (deprecated).
     The following selectors are kept ONLY as no-op visual stand-ins
     for any in-the-wild markup that still emits them. New code MUST
     emit <span class="rank-badge"> via rankBadge() / rank_badge_html().
     These shims compose to the rank-badge primitive when a sibling
     .rank-badge is present; otherwise they fall back to safe defaults.

     Active emissions audited in Stage 2; remove these shims entirely
     in Stage 5 (cleanup) once every surface is verified to no longer
     emit the legacy class names.

     Shimmed selectors:
       .asc-tier(--N)          → wrap in .rank-badge[data-level=N] chip
       .hoh-star(--dim)        → use .rank-badge__star[data-on|data-off]
       .ult-stars .hoh-star    → use .rank-badge[data-variant=stars]
       .fn-level               → use .rank-badge[data-variant=chip]
       .ns-level-badge         → use .rank-badge[data-variant=chip]
       .se-badge               → use .rank-badge[data-variant=chip] for level badges
       .ult-level              → use .rank-badge[data-variant=chip] */
.asc-tier {
  font-weight: 700;
  letter-spacing: .04em;
}

.hoh-star {
  color: var(--apex-gold);
  text-shadow: 0 0 5px rgba(var(--apex-gold-rgb), .4);
}

.hoh-star--dim {
  color: rgba(var(--apex-gold-rgb), .18);
  text-shadow: none;
}

.ult-stars {
  display: inline-flex;
  gap: 1px;
  flex-shrink: 0;
  color: var(--apex-gold);
  font-size: .7rem;
  line-height: 1;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.65;
  overflow-x: hidden;
}

/* ── NAV ── */
nav:not(.footer-cols) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Ride above the floating meta notification (.hero-audit-btn @ 100) and its
     stacking context so the More dropdown opens cleanly over the toast/badge. */
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 2rem;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  color: var(--text);
  transition:
    transform .42s cubic-bezier(0.16, 1, 0.3, 1),
    filter .32s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-logo:hover {
  transform: translateY(-1px);
  filter: drop-shadow(0 0 10px rgba(var(--apex-gold-rgb), .35));
}

/* Diamond Seal — ceremonial breathe, intensified ceremonial spin on hover.
   Apex Gold is reserved for Diamond-Seal moments per DESIGN.md, so the
   halo lives only here (and on Apex CTAs elsewhere). */
@keyframes seal-breathe {
  0%, 100% {
    filter:
      drop-shadow(0 0 4px rgba(var(--apex-gold-rgb), .35))
      drop-shadow(0 0 10px rgba(var(--apex-gold-rgb), .15));
  }
  50% {
    filter:
      drop-shadow(0 0 8px rgba(var(--apex-gold-rgb), .55))
      drop-shadow(0 0 18px rgba(var(--apex-gold-rgb), .25));
  }
}

@keyframes seal-spin {
  0%   { transform: rotate(0deg)   scale(1); }
  50%  { transform: rotate(180deg) scale(1.12); }
  100% { transform: rotate(360deg) scale(1); }
}

.nav-seal {
  width: 26px;
  height: 26px;
  color: var(--apex-gold);
  flex-shrink: 0;
  animation: seal-breathe 4.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  transition: transform .6s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center;
  will-change: transform, filter;
}

.nav-logo:hover .nav-seal,
.nav-logo:focus-visible .nav-seal {
  animation:
    seal-breathe 4.2s cubic-bezier(0.45, 0, 0.55, 1) infinite,
    seal-spin .9s cubic-bezier(0.16, 1, 0.3, 1) 1;
}

.nav-wordmark {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--text);
  background: linear-gradient(90deg,
    var(--text) 0%,
    var(--text) 50%,
    var(--apex-gold) 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  transition:
    letter-spacing .42s cubic-bezier(0.16, 1, 0.3, 1),
    background-position .6s cubic-bezier(0.16, 1, 0.3, 1),
    text-shadow .32s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-logo:hover .nav-wordmark,
.nav-logo:focus-visible .nav-wordmark {
  letter-spacing: .12em;
  background-position: 100% 50%;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 18px rgba(var(--apex-gold-rgb), .35);
}

/* Docs nav: <a class="nav-logo">Gaia <span>◆</span></a>. The span is the
   seal stand-in. Match the same ceremonial treatment as the SVG seal. */
nav.docs-nav .nav-logo > span {
  display: inline-block;
  color: var(--apex-gold);
  animation: seal-breathe 4.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  transition: transform .6s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center;
  will-change: transform, filter;
}

/* ============================================================================
   docs/en pages — the legacy in-page <nav class="docs-nav"> element is
   now redundant: site-nav.js renders breadcrumbs inline next to the Gaia
   logo. Hide the old element entirely; the body padding clears the fixed
   site-nav.
   ========================================================================== */
body:has(> nav#site-nav) {
  padding-top: 0;
}
body:has(> nav#site-nav) nav.docs-nav {
  display: none !important;
}

/* ============================================================================
   Site-nav left cluster — logo + (optional) breadcrumb sit together.
   ========================================================================== */
.nav-left {
  display: flex;
  align-items: center;
  gap: .9rem;
  min-width: 0;            /* allow breadcrumb to truncate, not push the layout */
}

/* Breadcrumb: inline strip directly after .nav-logo. Only emitted on /en/*. */
.nav-breadcrumb {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .82rem;
  letter-spacing: .02em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
}

.nav-breadcrumb-sep {
  color: var(--muted);
  opacity: .55;
}

.nav-breadcrumb-link {
  color: var(--muted);
  text-decoration: none;
  transition: color .15s;
}
.nav-breadcrumb-link:hover,
.nav-breadcrumb-link:focus-visible {
  color: var(--text);
  outline: none;
}
.nav-breadcrumb-link[aria-current="page"] {
  color: var(--tier-basic);
}

.nav-breadcrumb-current {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

@media (max-width: 700px) {
  .nav-breadcrumb {
    font-size: .72rem;
    gap: .35rem;
    flex: 1 1 0;
    min-width: 0;
  }
  .nav-breadcrumb-current {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .nav-left {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    margin-right: .5rem;
  }
  .nav-menu-toggle {
    flex: 0 0 auto;
  }
}

/* ============================================================================
   Mobile drawer — dedicated element, never gets confused with the
   desktop .nav-primary. Hidden by default at every viewport; revealed
   only when ≤700px AND .open is set.
   ========================================================================== */
.nav-mobile-drawer {
  display: none;
}

@media (max-width: 700px) {
  .nav-mobile-drawer {
    display: flex;
    position: fixed;
    inset: 0;
    flex-direction: column;
    background: #000;
    z-index: 9998;
    padding: 3.6rem 1.25rem 1.25rem;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
  }
  .nav-mobile-drawer.open {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
  }
  .nav-mobile-close {
    position: absolute;
    top: .55rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 0;
    color: var(--text);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
  }
  .nav-mobile-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .15rem;
    flex: 1;
    min-height: 0;
  }
  .nav-mobile-list li {
    width: 100%;
  }
  .nav-mobile-list a,
  .nav-mobile-list button {
    display: block;
    width: 100%;
    padding: .45rem .25rem;
    font-family: var(--font-display, 'EB Garamond', Georgia, serif);
    font-size: 1.05rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: text-shadow .2s ease;
  }
  .nav-mobile-list a:hover,
  .nav-mobile-list button:hover,
  .nav-mobile-list a:focus-visible,
  .nav-mobile-list button:focus-visible {
    text-shadow: 0 0 10px currentColor;
    outline: none;
  }
  body.nav-drawer-open {
    overflow: hidden;
  }
  body.nav-drawer-open .hero-audit-btn {
    display: none !important;
  }
}

nav.docs-nav .nav-logo:hover > span,
nav.docs-nav .nav-logo:focus-visible > span {
  animation:
    seal-breathe 4.2s cubic-bezier(0.45, 0, 0.55, 1) infinite,
    seal-spin .9s cubic-bezier(0.16, 1, 0.3, 1) 1;
}

nav ul.nav-primary {
  list-style: none;
  display: flex;
  gap: 2rem
}

/* More dropdown (desktop only) */
.nav-more-dropdown {
  position: relative;
}

.nav-more-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-body);
  font-size: .9rem;
  color: var(--muted);
  transition: color .2s;
}

.nav-more-toggle:hover {
  color: var(--text);
}

.nav-more-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  margin-top: .75rem;
  background: rgba(3, 7, 18, .95);
  border: 1px solid var(--border);
  border-radius: 8px;
  list-style: none;
  padding: .5rem 0;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, visibility .2s, transform .2s;
  z-index: 10100;
  backdrop-filter: blur(10px);
}

.nav-more-dropdown:hover .nav-more-menu,
.nav-more-dropdown:focus-within .nav-more-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-more-menu li {
  padding: 0;
}

.nav-more-menu li a,
.nav-more-menu li button {
  display: block;
  padding: .6rem 1.2rem;
  text-decoration: none;
  font-size: .85rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  transition: color .2s;
  width: 100%;
  text-align: left;
}

.nav-more-menu li a,
.nav-more-menu li button {
  color: inherit;
  display: block;
  width: 100%;
  padding: .55rem 1.2rem;
  font-size: .85rem;
  font-family: var(--font-body);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: color .18s;
  box-sizing: border-box;
}

.nav-more-menu li a:hover,
.nav-more-menu li button:hover {
  color: var(--text) !important;
}

/* ── Dropdown items get the same motion as top-level nav, scaled for
     a vertical menu (left wipe instead of center, slide-right instead
     of lift). Override the white !important above so each item keeps
     its inline tier hue and the currentColor glow has something to
     broadcast. The menu has no overflow:hidden, so glow bleeds free. */
.nav-more-menu {
  /* Ensure glow can extend outside the rounded box on hover. */
  overflow: visible;
}

.nav-more-menu li a,
.nav-more-menu li button {
  position: relative;
  letter-spacing: .005em;
  transition:
    color .26s cubic-bezier(0.16, 1, 0.3, 1),
    transform .32s cubic-bezier(0.16, 1, 0.3, 1),
    letter-spacing .32s cubic-bezier(0.16, 1, 0.3, 1),
    text-shadow .26s cubic-bezier(0.16, 1, 0.3, 1),
    background .26s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-more-menu li a::before,
.nav-more-menu li button::before {
  content: "";
  position: absolute;
  left: .5rem;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: 1.5px;
  background: currentColor;
  transform: translateY(-50%);
  transition:
    height .32s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow .32s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* Override the white !important hover above — keep tier hue.
   Constrain the slide effect to true mouse-pointer environments — on
   touch/mobile a tap fires :hover for one frame and the items appear
   to "slide left" awkwardly. The plate-marker, glow, and color tween
   are still applied to focus-visible (keyboard) on every device. */
@media (hover: hover) and (pointer: fine) {
  .nav-more-menu li a:hover,
  .nav-more-menu li button:hover,
  .nav-more-menu li a:focus-visible,
  .nav-more-menu li button:focus-visible {
    color: inherit !important;
    letter-spacing: .03em;
    transform: translateX(4px);
    text-shadow: 0 0 10px currentColor, 0 0 22px currentColor;
    background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, .03) 100%);
  }
}
.nav-more-menu li a:focus-visible,
.nav-more-menu li button:focus-visible {
  color: inherit !important;
  text-shadow: 0 0 10px currentColor;
}

/* Belt-and-braces: at narrow widths the hover-slide reads as a glitch
   even if the device claims `hover: hover` (e.g. a docked phone or a
   touch laptop with mouse). Force-pin transform/letter-spacing under
   700px so nothing slides regardless of pointer capability. */
@media (max-width: 700px) {
  .nav-more-menu li a,
  .nav-more-menu li button,
  .nav-more-menu li a:hover,
  .nav-more-menu li button:hover,
  .nav-more-menu li a:focus,
  .nav-more-menu li button:focus,
  .nav-more-menu li a:focus-visible,
  .nav-more-menu li button:focus-visible,
  nav.nav-open ul.nav-primary > li > a,
  nav.nav-open ul.nav-primary > li > button,
  nav.nav-open ul.nav-primary > li > a:hover,
  nav.nav-open ul.nav-primary > li > button:hover,
  nav.nav-open ul.nav-primary > li > a:focus,
  nav.nav-open ul.nav-primary > li > button:focus,
  nav.nav-open ul.nav-primary > li > a:focus-visible,
  nav.nav-open ul.nav-primary > li > button:focus-visible {
    transform: none !important;
    letter-spacing: .01em !important;
    background: transparent !important;
  }
}

.nav-more-menu li a:hover::before,
.nav-more-menu li button:hover::before,
.nav-more-menu li a:focus-visible::before,
.nav-more-menu li button:focus-visible::before {
  height: 60%;
  box-shadow: 0 0 8px currentColor, 0 0 16px currentColor;
}

.nav-mobile-search {
  display: none
}

.nav-search-back {
  display: none
}

nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: .9rem;
  transition: color .2s
}

nav a:hover {
  color: var(--text)
}

.nav-tree {
  color: var(--ultimate) !important;
  font-family: var(--font-body);
  font-size: .9rem;
  letter-spacing: .01em
}

.nav-tree:hover {
  color: #fcd34d !important
}

button.nav-tree {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: inherit
}

.nav-copy-agent {
  color: var(--tier-basic) !important;
  font-family: var(--font-body);
  font-size: .9rem;
  letter-spacing: .01em
}

.nav-copy-agent:hover {
  color: var(--tier-basic) !important
}

button.nav-copy-agent {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: inherit
}

.nav-named-explorer {
  color: #ef4444 !important;
  font-weight: 700;
  font-family: var(--font-body)
}

.nav-named-explorer:hover {
  color: #f87171 !important
}

/* Registry button looks identical to anchor siblings. Focus ring
     mirrors the rest of the nav (1px hairline + tier-basic glow) so
     keyboard users see the same affordance as on .nav-search-btn. */
.nav-graph-trigger {
  background: none;
  border: none;
  cursor: pointer;
  padding: .1rem .25rem;
  font-family: var(--font-body);
  font-size: .9rem;
  letter-spacing: .01em;
  color: var(--basic) !important;
  line-height: inherit;
  transition: color .2s, box-shadow .15s;
  border-radius: 4px;
}

.nav-graph-trigger:hover {
  color: #7dd3fc !important
}

.nav-graph-trigger:focus-visible {
  color: var(--text);
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--tier-basic-rgb), .4);
}

/* ═══════════════════════════════════════════════
   NAV MOTION — universal across .nav-primary (main
   site) and .docs-nav (en/* docs pages). Underline
   wipe + glow + tracking widen + lift, all in
   currentColor so each link's tier hue carries.
   Plate dot marker on the left. Initial stagger
   entrance on first paint. Reduced-motion is
   neutralized globally in the Phase 5 block below.
   ═══════════════════════════════════════════════ */

/* Stagger entrance: nav items fade in with a gentle 4px drift — soft, not theatrical. */
@keyframes nav-item-rise {
  0%   { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Underline pulse for the active route — very gentle, slow breathe. */
@keyframes nav-underline-pulse {
  0%, 100% { box-shadow: 0 0 6px currentColor, 0 0 14px currentColor; }
  50%      { box-shadow: 0 0 12px currentColor, 0 0 24px currentColor; }
}

nav ul.nav-primary > li > a,
nav ul.nav-primary > li > button,
nav.docs-nav .nav-crumb,
nav.docs-nav .nav-logo {
  position: relative;
  display: inline-block;
  letter-spacing: .01em;
  transition:
    color .32s ease,
    transform .4s cubic-bezier(0.16, 1, 0.3, 1),
    letter-spacing .4s cubic-bezier(0.16, 1, 0.3, 1),
    text-shadow .4s ease,
    opacity .32s ease;
  will-change: transform;
  animation: nav-item-rise .7s ease both;
  animation-delay: calc(var(--nav-i, 0) * 70ms);
}

/* Underline: 2px hairline that wipes from center outward, with a
   currentColor halo so the underline reads ceremonial, not utility. */
nav ul.nav-primary > li > a::after,
nav ul.nav-primary > li > button::after,
nav.docs-nav .nav-crumb::after,
nav.docs-nav .nav-logo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 2px;
  background: currentColor;
  opacity: .85;
  transform: scaleX(0);
  transform-origin: center;
  transition:
    transform .5s ease,
    box-shadow .4s ease;
  pointer-events: none;
  border-radius: 1px;
}

/* Plate-style leading mark: a small currentColor dot fades in to the
   left of the label. Reads as an atlas plate marker, not a bullet. */
nav ul.nav-primary > li > a::before,
nav ul.nav-primary > li > button::before,
nav.docs-nav .nav-crumb::before {
  content: "";
  position: absolute;
  left: -.85em;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transform: translate(.45em, -50%) scale(.5);
  transition:
    transform .45s ease,
    opacity .35s ease,
    box-shadow .35s ease;
  pointer-events: none;
}

/* Hover / focus state — gentle lift, soft bloom, slight tracking widen. */
nav ul.nav-primary > li > a:hover,
nav ul.nav-primary > li > button:hover,
nav ul.nav-primary > li > a:focus-visible,
nav ul.nav-primary > li > button:focus-visible,
nav.docs-nav .nav-crumb:hover,
nav.docs-nav .nav-crumb:focus-visible,
nav.docs-nav .nav-logo:hover,
nav.docs-nav .nav-logo:focus-visible {
  transform: translateY(-2px);
  letter-spacing: .04em;
  text-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
}

nav ul.nav-primary > li > a:hover::after,
nav ul.nav-primary > li > button:hover::after,
nav ul.nav-primary > li > a:focus-visible::after,
nav ul.nav-primary > li > button:focus-visible::after,
nav.docs-nav .nav-crumb:hover::after,
nav.docs-nav .nav-crumb:focus-visible::after,
nav.docs-nav .nav-logo:hover::after,
nav.docs-nav .nav-logo:focus-visible::after,
nav ul.nav-primary > li > a[aria-current="page"]::after,
nav ul.nav-primary > li > button[aria-expanded="true"]::after,
nav.docs-nav .nav-crumb.current::after {
  transform: scaleX(1);
  box-shadow: 0 0 8px currentColor, 0 0 18px currentColor;
}

/* The active route's underline very gently breathes. */
nav ul.nav-primary > li > a[aria-current="page"]::after,
nav.docs-nav .nav-crumb.current::after {
  animation: nav-underline-pulse 3.5s ease infinite;
}

nav ul.nav-primary > li > a:hover::before,
nav ul.nav-primary > li > button:hover::before,
nav ul.nav-primary > li > a:focus-visible::before,
nav ul.nav-primary > li > button:focus-visible::before,
nav.docs-nav .nav-crumb:hover::before,
nav.docs-nav .nav-crumb:focus-visible::before,
nav ul.nav-primary > li > a[aria-current="page"]::before,
nav ul.nav-primary > li > button[aria-expanded="true"]::before,
nav.docs-nav .nav-crumb.current::before {
  opacity: .95;
  transform: translate(0, -50%) scale(1);
  box-shadow: 0 0 8px currentColor;
}

/* Logo gets the lift but no underline pulse (no tier hue to glow with).
   Kill the ::after on .nav-logo so the wordmark stays clean. */
.nav-logo::after,
nav.docs-nav .nav-logo::after {
  display: none;
}

/* Docs breadcrumbs: each page sets .nav-crumb to var(--muted) inline.
   Give the hover/current state a tier hue so currentColor-driven glow
   has something to broadcast. .nav-logo amber stays from inline rule. */
nav.docs-nav .nav-crumb:hover,
nav.docs-nav .nav-crumb:focus-visible {
  color: var(--tier-basic, #38bdf8);
}
nav.docs-nav .nav-crumb.current {
  color: var(--apex-gold, #fbbf24);
}
nav.docs-nav .nav-sep {
  transition: color .26s cubic-bezier(0.16, 1, 0.3, 1),
              transform .34s cubic-bezier(0.16, 1, 0.3, 1);
}
.grade-segment {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text);
  position: relative;
}
nav.docs-nav:hover .nav-sep {
  color: var(--tier-basic, #38bdf8);
}

/* Global search icon — red, subtle */
.nav-search-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: .18rem .25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--honor-red);
  transition: color .2s, transform .15s, filter .2s;
  line-height: 1;
  text-decoration: none;
}

.nav-search-btn:hover,
.nav-search-btn:focus-visible {
  color: #f87171;
  transform: scale(1.08);
  filter: drop-shadow(0 0 8px rgba(var(--honor-red-rgb), .5));
  outline: none;
}

.nav-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  width: 44px;
  height: 44px;
  margin-right: -.5rem;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: color .2s, background .2s;
}

.nav-menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.nav-menu-toggle:hover,
.nav-menu-toggle:focus-visible {
  color: var(--text);
  background: rgba(255, 255, 255, .06);
}

/* ════════════════════════════════════════════════
   PROFILE BACK BUTTON & PAGE HEADER ROW
   Standardized layout for all secondary pages
   (about, badges, named, en, codex, trust, u, etc.)
   ════════════════════════════════════════════════ */

.profile-back-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0.75rem clamp(1.25rem, 4vw, 2.5rem);
  margin-top: -54px;
  margin-bottom: 0;
  position: relative;
  z-index: 10;
  min-height: 2.75rem;
  max-width: 100%;
  width: 100%;
  padding-top: calc(0.75rem + 54px);
}

.profile-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
  color: var(--tier-basic, #38bdf8);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.2s, background 0.2s;
  border: 1px solid transparent;
  line-height: 1;
}

.profile-back:hover {
  color: var(--text);
  background: rgba(56, 189, 248, 0.08);
  border-color: rgba(56, 189, 248, 0.15);
}

.profile-back:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--tier-basic-rgb, 56, 189, 248), 0.4);
}

.profile-back .ico {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.9;
}

/* ── Page wrapper for consistent max-width ── */
.profile-page-wrap,
.page-wrap,
main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
  width: 100%;
  box-sizing: border-box;
}

/* Standardize named-hero and similar hero sections */
.named-hero,
.profile-hero,
.page-hero {
  padding: 1.5rem 0 0.75rem;
  margin-bottom: 0;
  margin-top: 0;
}

/* Reduce gap between profile-hero and search controls */
.profile-section {
  margin-top: 0;
  padding-top: 0;
}

.directory-controls {
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
}

/* ── HERO ── */
#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem 1.5rem 3rem;
  max-width: 100%;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

#canvas3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 1;
  touch-action: none;
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.8s ease;
}

.hero-glass-blur {
  position: absolute;
  inset: 0;
  z-index: 1;
  backdrop-filter: blur(8px) brightness(0.65);
  pointer-events: none;
  transition: backdrop-filter 0.5s ease, opacity 0.5s ease;
}

.hero-glass-noise {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.18;
  mix-blend-mode: overlay;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

/* Ensure consistent main section spacing and no extra gaps */
main section {
  margin-left: auto;
  margin-right: auto;
}

body > section,
body > div[class*="section"],
body > div[class*="hero"] {
  margin-left: auto;
  margin-right: auto;
}

/* ── Standardize all hero section spacing and centering ── */
section[class*="hero"],
section[class*="frontis"],
.ab-frontis,
.ev-hero,
.lb-hero {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Override excessive padding on hero sections to match back button spacing */
.ab-frontis {
  padding-top: 1.5rem !important;
}

.ev-hero {
  padding-top: 1.5rem !important;
}

.lb-hero {
  padding-top: 1.5rem !important;
}

/* Ensure about page and evidence page heroes are centered */
.ab-frontis-body {
  text-align: center;
}

.named-hero-title,
.ev-hero-title {
  text-align: center;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 700px
}

/* Meta Audit Hero Button (Boxy) */
.hero-audit-btn {
  position: absolute;
  top: 72px; /* Sit just below the fixed nav */
  right: 1.5rem;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: #000;
  border: 1px solid var(--border);
  border-radius: 0; /* Boxy */
  padding: 0.6rem 1rem;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-decoration: none;
  transition: all 0.2s;
  box-shadow: 0 5px 15px rgba(0,0,0,0.5);
  animation: audit-fade-in 1.2s ease forwards;
  opacity: 0;
}

@keyframes audit-fade-in {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}

.hero-audit-btn:hover {
  border-color: var(--tier-ultimate);
  background: #111;
  transform: translateX(-4px);
}

.hero-audit-btn-arrow {
  color: var(--muted);
  transition: color 0.2s;
}

.hero-audit-btn:hover .hero-audit-btn-arrow {
  color: var(--tier-ultimate);
}



.hero-title,
.hero-sub,
.hero-cta,
.two-doors,
.ledger-strip,
.scroll-hint {
  transition: opacity .24s ease, filter .24s ease, transform .24s ease
}

#hero.hero-graph-peek .hero-glass-blur {
  backdrop-filter: blur(0px) brightness(1);
  opacity: 0;
}

#hero.hero-graph-peek .hero-glass-noise {
  opacity: 0;
}

#hero.transitioning-to-graph #canvas3d {
  transform: scale(1.3);
  opacity: 0;
}

#hero.transitioning-to-graph .hero-glass-blur,
#hero.transitioning-to-graph .hero-glass-noise {
  opacity: 0;
}

#hero.hero-graph-peek .hero-title,
#hero.hero-graph-peek .hero-sub,
#hero.hero-graph-peek .hero-cta,
#hero.hero-graph-peek .two-doors,
#hero.hero-graph-peek .ledger-strip,
#hero.hero-graph-peek .scroll-hint,
#hero.hero-graph-peek .hero-audit-btn {
  opacity: 0 !important;
  filter: blur(8px);
  pointer-events: none;
  transform: translateY(10px);
  animation: none !important;
}

.hero-pills {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}

.hero-eyebrow {
  display: inline-block;
  font-size: .8rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #fff;
  border: none;
  padding: .45rem 1.05rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--basic) 0%, var(--extra) 50%, var(--ultimate) 100%);
  box-shadow: 0 0 24px rgba(56, 189, 248, .22);
}

/* ── Field-view chip (Stage 5: collapsed .hud-trigger + .field-trigger).
     The selector list keeps .hud-trigger as a legacy alias so any
     external integration still works; the canonical class is
     .field-trigger. .graph-trigger is the loud Stage-0 hero pill and
     keeps its own glow treatment. */
.graph-trigger {
  appearance: none;
  font: inherit;
  cursor: pointer;
  position: relative;
  z-index: 3;
  transition: box-shadow .2s, transform .2s, opacity .2s;
}

.graph-trigger:hover,
.graph-trigger:focus-visible {
  box-shadow: 0 0 36px rgba(var(--tier-basic-rgb), .42);
  transform: translateY(-1px);
  opacity: .9;
  outline: none;
}

.field-trigger,
.hud-trigger {
  appearance: none;
  cursor: pointer;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, .8);
  background: linear-gradient(135deg, rgba(56, 189, 248, .1) 0%, rgba(192, 132, 252, .1) 50%, rgba(245, 158, 11, .1) 100%);
  border: 1px solid rgba(192, 132, 252, .2);
  border-radius: 999px;
  padding: .3rem .75rem;
  transition: color .2s, border-color .2s, background .2s;
  position: relative;
  z-index: 3;
}

.field-trigger:hover,
.field-trigger:focus-visible,
.hud-trigger:hover,
.hud-trigger:focus-visible {
  color: var(--apex-gold);
  border-color: rgba(var(--apex-gold-rgb), .4);
  background: rgba(var(--apex-gold-rgb), .04);
  outline: none;
}

.field-trigger[aria-pressed="true"],
.hud-trigger[aria-pressed="true"] {
  color: var(--apex-gold);
  border-color: rgba(var(--apex-gold-rgb), .55);
  background: rgba(var(--apex-gold-rgb), .07);
  box-shadow: inset 0 0 12px rgba(var(--apex-gold-rgb), .08);
}

/* ≤700px the hover-peek is suppressed; show the button as a tap-to-open
     trigger for fullscreen graph mode. Stage 6 owns the canonical mobile
     breakpoint pass. */
@media(max-width:700px) {

  .hud-trigger {
    display: none !important
  }

  /* Mobile: tuck the report notification into the nav row beside the
     hamburger, not floating over hero CTAs (it was covering the Trust
     Ledger button). Compact icon+label, fixed to the top-right next to
     the menu toggle (~38px wide + .9rem right + .25rem margin = ~3.5rem). */
  .hero-audit-btn {
    position: fixed;
    top: .85rem;
    right: 3.5rem;            /* clear the hamburger toggle */
    bottom: auto;
    left: auto;
    padding: .35rem .55rem;
    font-size: .68rem;
    gap: .3rem;
    z-index: 201;             /* above nav (z=200) */
    box-shadow: 0 2px 8px rgba(0,0,0,.4);
    background: rgba(0,0,0,.85);
    backdrop-filter: blur(6px);
  }
  .hero-audit-btn span:first-of-type {  /* "Trust Model" label */
    /* Keep the label visible on tablets, hide on the smallest screens */
  }
  .hero-audit-btn .hero-audit-btn-arrow {
    display: none;            /* arrow is decorative — drop on mobile to save room */
  }
}

/* ── HUD MODE ── */
#hero.hero-hud-mode .hero-glass-blur {
  backdrop-filter: blur(0px) brightness(1);
  opacity: 0;
}

#hero.hero-hud-mode .hero-glass-noise {
  opacity: 0;
}

#hero.hero-hud-mode .hero-title,
#hero.hero-hud-mode .hero-sub,
#hero.hero-hud-mode .hero-cta,
#hero.hero-hud-mode .two-doors,
#hero.hero-hud-mode .ledger-strip,
#hero.hero-hud-mode .scroll-hint {
  opacity: .18;
  pointer-events: none;
  transition: opacity .4s ease;
}

#hero.hero-hud-mode .hero-audit-btn {
  opacity: 0 !important;
  pointer-events: none;
  animation: none !important;
  transition: opacity .4s ease;
}

#hero.hero-graph-fullscreen .hero-audit-btn {
  opacity: 0 !important;
  pointer-events: none;
  animation: none !important;
  transition: none;
}

/* ── FULLSCREEN GRAPH MODE ── */
/* Enables interactive canvas controls on the hero without pulling
     it out of document flow (position:fixed removed so user can scroll). */
#hero.hero-graph-fullscreen {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}

@media (max-width: 700px) {
  .profile-back-row {
    padding: 0.5rem clamp(0.75rem, 3vw, 1.5rem);
    padding-top: calc(0.5rem + 54px);
    min-height: 2.5rem;
    margin-top: -54px;
  }

  .profile-back {
    padding: 0.3rem 0.55rem;
    font-size: 0.85rem;
  }

  .profile-back .ico {
    width: 12px;
    height: 12px;
  }

  .named-hero,
  .profile-hero,
  .page-hero,
  .ab-frontis,
  .ev-hero,
  .lb-hero,
  .process-hero {
    padding-top: 1rem !important;
    padding-bottom: 0.5rem !important;
    min-height: auto !important;
  }

  .directory-controls {
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important;
  }

  #hero.hero-graph-fullscreen {
    height: 100svh !important;
    max-height: 100svh !important;
  }

  #hero.hero-graph-fullscreen::before,
  #hero.hero-graph-fullscreen::after {
    opacity: 0;
    transition: opacity 0.4s ease;
  }
}

@media (max-width: 500px) {
  .profile-back-row {
    padding: 0.4rem clamp(0.5rem, 2vw, 0.75rem);
    padding-top: calc(0.4rem + 54px);
    min-height: 2.25rem;
    margin-top: -54px;
  }

  .profile-back {
    padding: 0.25rem 0.45rem;
    font-size: 0.8rem;
  }

  .profile-back span {
    display: none;
  }

  .profile-back .ico {
    width: 14px;
    height: 14px;
  }

  .named-hero,
  .profile-hero,
  .page-hero,
  .ab-frontis,
  .ev-hero,
  .lb-hero,
  .process-hero {
    padding-top: 0.75rem !important;
    padding-bottom: 0.35rem !important;
    min-height: auto !important;
  }

  .directory-controls {
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
  }
}

#hero.hero-graph-fullscreen #canvas3d {
  pointer-events: auto;
  opacity: 1;
  cursor: grab;
  z-index: 1;
}

#hero.hero-graph-fullscreen .hero-glass-blur,
#hero.hero-graph-fullscreen .hero-glass-noise {
  opacity: 0;
  pointer-events: none;
}

#hero.hero-graph-fullscreen .hero-content,
#hero.hero-graph-fullscreen .hero-pills,
#hero.hero-graph-fullscreen .hero-mobile-graph,
#hero.hero-graph-fullscreen .scroll-hint {
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

/* Fullscreen chrome — header bar with downloads + close */
.graph-fullscreen-chrome {
  display: none;
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  z-index: 10;
  pointer-events: none;
}

#hero.hero-graph-fullscreen .graph-fullscreen-chrome {
  display: block;
  pointer-events: auto;
}

.graph-fullscreen-header {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: flex-end;
  padding: .7rem 1.2rem;
  background: linear-gradient(180deg, rgba(3, 7, 18, .82) 0%, transparent 100%);
  border-bottom: none;
}

.graph-fullscreen-header .graph-dialog-actions {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
  justify-content: flex-end
}

.graph-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  min-height: 36px;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 600;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all .2s;
  cursor: pointer;
}

.graph-action-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.graph-action-btn.active {
  background: var(--tier-basic-bg);
  color: var(--tier-basic);
  border-color: var(--tier-basic-border);
}

.graph-atlas-controls {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
}

.graph-hud-toggle-btn {
  display: none !important;
  position: absolute;
  bottom: 1.5rem;
  left: calc(260px + 1.5rem);
  z-index: 100;
  transition: left .3s;
  background: rgba(3, 7, 18, .8);
}

/* Fullscreen status bar */
.graph-fullscreen-status {
  display: none;
  position: absolute;
  top: .6rem;
  left: 60px;
  z-index: 11;
  align-items: center;
  gap: .42rem;
  flex-wrap: nowrap;
  pointer-events: none;
}

#hero.hero-graph-fullscreen .graph-fullscreen-status {
  display: flex;
}

/* Re-show interactive chrome when fullscreen is active.
     The interactive chrome is appended to #hero as children. */
#hero.hero-graph-fullscreen .graph-neighbor-cards,
#hero.hero-graph-fullscreen .graph-search-wrap,
#hero.hero-graph-fullscreen .graph-legend,
#hero.hero-graph-fullscreen .graph-scatter-strip,
#hero.hero-graph-fullscreen .graph-redpill,
#hero.hero-graph-fullscreen .graph-bottom-bar {
  display: flex !important;
  z-index: 8;
}

#hero.hero-graph-fullscreen .graph-search-wrap,
#hero.hero-graph-fullscreen .graph-scatter-strip,
#hero.hero-graph-fullscreen .graph-redpill {
  display: block !important;
}

#hero.hero-graph-fullscreen .skill-tooltip {
  display: none;
  /* controlled by JS on hover */
}

h1 {
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 1.2rem;
}

h1 span {
  border-bottom: 1px solid var(--apex-gold);
  padding-bottom: .06em;
}

h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--apex-gold);
}

.hero-sub {
  font-family: var(--font-body);
  font-size: 1.15rem;
  color: var(--muted);
  max-width: 540px;
  margin: 0 auto 2.4rem
}

.hero-cta {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap
}

.btn {
  padding: .75rem 1.8rem;
  border-radius: 8px;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  transition: all .2s;
  cursor: pointer;
  border: none;
}

.btn:focus-visible,
.btn-ghost:focus-visible,
.mr-tab:focus-visible,
.meta-report-action:focus-visible,
.sl-btn:focus-visible,
.sl-search-clear:focus-visible,
.ns-tab:focus-visible,
.os-tab:focus-visible,
.se-tab-btn:focus-visible,
.se-flow-btn:focus-visible,
.tree-act-btn:focus-visible,
.tree-close-x:focus-visible,
.graph-legend-drawer-toggle:focus-visible,
.graph-action-btn:focus-visible,
.ult-claim:focus-visible,
.footer-link-btn:focus-visible,
.ns-view-btn:focus-visible,
.se-btn-ghost:focus-visible,
.se-btn-action:focus-visible,
.nav-tree:focus-visible,
.meta-btn-icon:focus-visible,
.usp-x:focus-visible,
.graph-collection-copy-all:focus-visible,
.graph-collection-clear-all:focus-visible,
.graph-collection-minimize:focus-visible,
.graph-collection-share:focus-visible,
.graph-collection-remove:focus-visible,
.graph-skill-panel-close:focus-visible,
.nav-search-btn-mobile:focus-visible,
.pmq-changelog-btn:focus-visible,
.scroll-to-top:focus-visible,
.mr-pagination-prev:focus-visible,
.mr-pagination-next:focus-visible,
.hero-audit-btn:focus-visible,
.propose-cta:focus-visible,
.meta-btn-close:focus-visible,
.nav-more-toggle:focus-visible,
.nav-menu-toggle:focus-visible,
.review-sim-btn:focus-visible,
.bd-clear-btn:focus-visible,
.bd-go-btn:focus-visible,
.bd-sampler-cycle:focus-visible,
.bd-skill-remove:focus-visible,
.bd-skill-add:focus-visible,
.bd-skill-addall:focus-visible,
.bd-skill-clear:focus-visible,
.bd-copy-all:focus-visible,
.bd-copy-perline:focus-visible,
.se-close-x:focus-visible {
  outline: 2px solid var(--tier-extra);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--apex-gold);
  color: var(--bg);
  box-shadow: 0 0 24px rgba(var(--apex-gold-rgb), .3);
}

.btn-primary:hover {
  box-shadow: 0 0 40px rgba(var(--apex-gold-rgb), .5);
  transform: translateY(-1px)
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-ghost:hover {
  border-color: var(--basic);
  color: var(--basic)
}

/* Tier-4 (Unique) button — used for "Open Meta Reports" on the home page
   and any other CTA that surfaces the Unique-tier reporting/governance
   surfaces. Reads tier-unique tokens so it tracks the canonical tier color. */
.btn-unique {
  background: transparent;
  color: var(--tier-unique);
  border: 1px solid rgba(var(--tier-unique-rgb), .55);
  box-shadow: 0 0 0 1px rgba(var(--tier-unique-rgb), .12) inset;
}

.btn-unique:hover {
  border-color: var(--tier-unique);
  box-shadow: 0 0 24px rgba(var(--tier-unique-rgb), .25);
  transform: translateY(-1px);
}

/* Meta Reports section trailing CTA — sits below the post queue and routes
   to the full meta-reports archive at /meta.html. Tier-4 purple to match
   the "Meta Reports" topic colour family. */
.meta-reports-cta {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

/* ── Named Skills Explorer hero (standalone /named/ page) ── */
.named-hero {
  text-align: center;
  padding: 2.5rem 1.5rem 1.25rem;
  max-width: 760px;
  margin: 0 auto;
}
.named-hero-kicker {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--honor-red);
  margin: 0 0 .6rem;
}
.named-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 600;
  margin: 0 0 .85rem;
}
.named-hero-lede {
  color: var(--muted);
  line-height: 1.6;
  font-size: 1rem;
  margin: 0;
}

/* CTA row under the hero — primary "Register your repo" + ghost
   "Read the curation process". Mirrors the about page Plate V CTA
   so the registration path is one click away from the explorer. */
.named-hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .75rem;
  margin: 1.75rem 0 0;
}
.named-hero-cta .btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1.25rem;
  font-size: .9rem;
  line-height: 1;
}
.named-hero-cta .btn .ico {
  flex-shrink: 0;
  opacity: .9;
}
.named-hero-cta-note {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--muted);
  letter-spacing: .02em;
  margin: 1rem 0 0;
  line-height: 1.55;
}
.named-hero-cta-note .nh-honor {
  color: var(--honor-red);
  font-weight: 500;
}

.scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  animation: bob 2.4s ease-in-out infinite;
}

.scroll-hint svg {
  width: 20px;
  height: 20px;
  stroke: var(--muted)
}

@keyframes bob {

  0%,
  100% {
    transform: translateX(-50%) translateY(0)
  }

  50% {
    transform: translateX(-50%) translateY(6px)
  }
}

/* ── SECTIONS ── */
section {
  padding: 5rem 1.5rem;
  max-width: 1000px;
  margin: 0 auto
}

h2 {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: .5rem;
  color: var(--text);
}

.section-sub {
  color: var(--muted);
  margin-bottom: 2.5rem;
  font-size: 1rem
}

/* ── REGISTRY STATS ── */
.registry-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 2.8rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
}

.rs-stat {
  flex: 1;
  text-align: center;
  padding: 1.6rem 1.2rem;
}

.rs-divider {
  width: 1px;
  align-self: stretch;
  background: var(--border);
  flex-shrink: 0;
}

.rs-num {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  font-family: var(--font-mono);
  margin-bottom: .35rem;
  color: var(--text);
}

.rs-label {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.rs-named {
  color: #ef4444
}


/* ── TIER CARDS ── */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem
}

.tier-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem;
  transition: transform .2s, box-shadow .2s;
  position: relative;
  overflow: hidden;
}

.tier-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: radial-gradient(ellipse at top left, var(--card-glow, .2) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}

.tier-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .4)
}

.tier-card:hover::before {
  opacity: .35
}

.tier-icon {
  font-size: 2rem;
  margin-bottom: .8rem
}

.tier-badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  padding: .25rem .7rem;
  border-radius: 999px;
  margin-bottom: .8rem;
}

.tier-name {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: .4rem
}

.tier-desc {
  font-size: .875rem;
  color: var(--muted)
}

.basic {
  --card-glow: rgba(56, 189, 248, .4)
}

.extra {
  --card-glow: rgba(192, 132, 252, .4)
}

.ultimate {
  --card-glow: rgba(245, 158, 11, .4)
}

.unique {
  --card-glow: rgba(124, 58, 237, .5)
}

.tier-card.unique {
  border-color: rgba(124, 58, 237, .4);
  box-shadow: inset 0 0 24px rgba(124, 58, 237, .12), 0 0 16px rgba(124, 58, 237, .15);
}

.tier-card.unique .tier-icon {
  color: var(--tier-unique);
  text-shadow: 0 0 12px rgba(124, 58, 237, .6)
}

.badge-basic {
  background: rgba(56, 189, 248, .15);
  color: var(--basic);
  border: 1px solid rgba(56, 189, 248, .3)
}

.badge-extra {
  background: rgba(192, 132, 252, .15);
  color: var(--extra);
  border: 1px solid rgba(192, 132, 252, .3)
}

.badge-ultimate {
  background: rgba(245, 158, 11, .15);
  color: var(--ultimate);
  border: 1px solid rgba(245, 158, 11, .3)
}

/* ── STEPS ── */
.steps {
  display: flex;
  flex-direction: column;
  gap: 1.5rem
}

.step {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 1.2rem;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem;
  transition: border-color .2s;
  min-width: 0;
}

.step>div {
  min-width: 0
}

.step:hover {
  border-color: var(--basic)
}

.step-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--basic), var(--extra));
  color: #fff;
  box-shadow: 0 0 16px rgba(56, 189, 248, .35);
}

.step h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: .3rem
}

.step p {
  font-size: .9rem;
  color: var(--muted);
  margin-bottom: .8rem
}

pre {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: .83rem;
  line-height: 1.6;
  color: var(--rank-0);
}

.pre-wrap {
  position: relative
}

.copy-btn {
  position: absolute;
  top: .45rem;
  right: .45rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--muted);
  background: rgba(15, 23, 42, .85);
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
  transition: color .15s, border-color .15s, filter .15s, opacity .15s, background .15s;
  opacity: .55;
}

.pre-wrap:hover .copy-btn,
.copy-btn:focus-visible {
  opacity: 1
}

/* Foundation icon-state spec: hover = tier-basic + drop-shadow; active = apex-gold;
     focus-visible = 2px tier-extra outline; disabled = muted + opacity .35 */
.copy-btn:hover {
  color: var(--tier-basic);
  border-color: var(--tier-basic);
  background: rgba(15, 23, 42, .95);
  filter: drop-shadow(0 0 8px rgba(var(--tier-basic-rgb), .5));
}

.copy-btn:active {
  color: var(--apex-gold);
  border-color: var(--apex-gold);
  filter: none
}

.copy-btn:focus-visible {
  outline: 2px solid var(--tier-extra);
  outline-offset: 2px;
}

.copy-btn[disabled] {
  color: var(--muted);
  opacity: .35;
  cursor: not-allowed;
  filter: none
}

.copy-btn.copied {
  color: var(--apex-gold);
  border-color: var(--apex-gold);
  opacity: 1;
  filter: none
}

.comment {
  color: #4b6378
}

.cmd {
  color: var(--tier-basic)
}

.str {
  color: #86efac
}

.kw {
  color: var(--rank-3)
}

/* ── RANK TABLE ── */
.rank-table-wrap {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--border)
}

table {
  width: 100%;
  border-collapse: collapse
}

thead tr {
  background: rgba(56, 189, 248, .06)
}

th,
td {
  padding: .85rem 1.1rem;
  text-align: left;
  font-size: .875rem;
  border-bottom: 1px solid var(--border)
}

th {
  font-weight: 700;
  color: var(--text);
  letter-spacing: .04em
}

td {
  color: var(--muted)
}

tr:last-child td {
  border-bottom: none
}

tr:hover td {
  color: var(--text);
  background: rgba(255, 255, 255, .025)
}

.rank-badge {
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
}

/* ── WORKFLOW ── */
.flow {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem
}

.flow-node {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: .5rem 1.1rem;
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 600;
}

.flow-arrow {
  color: var(--basic);
  font-size: 1.2rem
}

/* ── INSTALL CALLOUT ── */
.callout {
  background: linear-gradient(135deg, rgba(56, 189, 248, .08), rgba(167, 139, 250, .08));
  border: 1px solid rgba(167, 139, 250, .25);
  border-radius: 14px;
  padding: 1.8rem;
  margin: 2rem 0;
}

.callout-title {
  font-weight: 700;
  margin-bottom: .5rem;
  color: var(--extra)
}

.callout p {
  font-size: .9rem;
  color: var(--muted)
}

.qs-tip {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin-top: .5rem;
  padding: .5rem .85rem;
  background: rgba(var(--tier-basic-rgb), .06);
  border: 1px solid rgba(var(--tier-basic-rgb), .25);
  border-radius: 7px;
  font-size: .79rem;
  color: var(--muted);
  line-height: 1.5;
}

.qs-tip-icon {
  flex-shrink: 0;
  color: var(--basic);
}

.qs-tip code {
  font-family: var(--font-mono);
  font-size: .77rem;
  color: var(--text);
  background: rgba(255, 255, 255, .07);
  padding: .1rem .32rem;
  border-radius: 3px;
}

.os-tabs {
  display: flex;
  gap: .35rem;
  margin-bottom: .6rem;
}

.os-tab {
  background: transparent;
  border: none;
  border-radius: 4px;
  padding: .28rem .7rem;
  font-size: .76rem;
  color: rgba(100, 116, 139, .55);
  cursor: pointer;
  font-family: inherit;
  transition: color .15s;
}

.os-tab.active {
  color: var(--text);
  font-weight: 500;
}

.os-panel {
  display: none;
}

.os-panel.active {
  display: block;
}

.os-panel pre {
  white-space: pre-wrap;
  word-break: break-all;
}

/* ── UNNAMED SKILL POPUP ── */
.usp-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(0, 0, 0, .65);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}

.usp-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.usp-card {
  position: relative;
  background: var(--surface);
  border: 1px solid rgba(56, 189, 248, .35);
  border-radius: 2px; /* Boxy */
  padding: 1.8rem 2rem 1.6rem;
  width: min(420px, 92vw);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .65), 0 0 40px rgba(56, 189, 248, .1);
  transform: scale(.94) translateY(10px);
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}

.usp-backdrop.open .usp-card {
  transform: scale(1) translateY(0);
}

.usp-x {
  position: absolute;
  top: .7rem;
  right: .9rem;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1.05rem;
  cursor: pointer;
  padding: .25rem .45rem;
  transition: color .15s;
  line-height: 1;
}

.usp-x:hover {
  color: var(--text);
}

.usp-glyph {
  font-size: 1.9rem;
  margin-bottom: .55rem;
  line-height: 1;
}

.usp-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: .2rem;
}

.usp-id {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: #ef4444;
  margin-bottom: .85rem;
}

.usp-body {
  font-size: .87rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 1.1rem;
}

.usp-cta {
  color: var(--basic);
  font-weight: 700;
}

.usp-row {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: var(--bg);
  border: 1px solid rgba(56, 189, 248, .22);
  border-radius: 8px;
  padding: .42rem .75rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--basic);
}

.usp-prompt {
  color: var(--muted);
  flex-shrink: 0;
}

.usp-cmd {
  flex: 1;
}

/* Foundation icon-state spec alignment for .usp-copy */
.usp-copy {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0;
  transition: color .15s, filter .15s;
}

.usp-copy:hover {
  color: var(--tier-basic);
  filter: drop-shadow(0 0 8px rgba(var(--tier-basic-rgb), .5));
}

.usp-copy:active {
  color: var(--apex-gold);
  filter: none;
}

.usp-copy:focus-visible {
  outline: 2px solid var(--tier-extra);
  outline-offset: 2px;
}

.usp-copy[disabled] {
  color: var(--muted);
  opacity: .35;
  cursor: not-allowed;
  filter: none;
}

/* ── GLOSSARY ── */
.glossary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem
}

.gloss-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.2rem;
}

.gloss-term {
  font-weight: 700;
  font-size: .9rem;
  color: var(--basic);
  margin-bottom: .25rem
}

.gloss-def {
  font-size: .82rem;
  color: var(--muted)
}

/* ── PROCESS PAGE ── */
/* Override inline styles on process-hero sections to ensure uniform spacing */
.process-hero[style*="padding-top"] {
  padding-top: 2rem !important;
}

.process-hero[style*="min-height: auto"] {
  min-height: auto !important;
}

.process-page main {
  padding-top: 0;
}

.process-hero {
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 1000px;
  padding-top: 1.5rem;
  padding-bottom: 2rem;
}

.process-kicker {
  color: var(--basic);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.process-hero h1 {
  font-size: clamp(2.5rem, 8vw, 5.4rem);
  line-height: .95;
  margin-bottom: 1.4rem;
}

.process-lede {
  max-width: 760px;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1.75
}

.process-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem
}

/* Codex Table of Contents — in-flow anchor list above the first H2 */
.codex-toc {
  max-width: 1000px;
  padding: 1rem 1.25rem;
  margin-block-end: 2.5rem;
  border-inline-start: 2px solid var(--border);
  font-family: var(--font-body);
  font-size: 0.9rem;
}

.codex-toc__title {
  font-family: var(--font-display);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 0.75rem;
}

.codex-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.codex-toc__list a {
  color: var(--text);
  text-decoration: none;
  border-block-end: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.codex-toc__list a:hover,
.codex-toc__list a:focus {
  color: var(--tier-extra);
  border-block-end-color: currentColor;
}

@media (max-width: 860px) {
  .codex-toc {
    border-inline-start: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-block-end: 2rem;
  }
}

.process-section {
  max-width: 1000px
}

.process-section h3 {
  font-size: 1.02rem;
  margin-bottom: .45rem
}

.process-section p,
.process-section li {
  color: var(--muted);
  font-size: .92rem
}

.branch-bypass-note {
  margin-top: .75rem;
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.5
}

.branch-bypass-note code {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--text);
  background: rgba(255, 255, 255, .05);
  padding: .1em .3em;
  border-radius: 3px
}

.branch-contributing-btn {
  display: block;
  width: fit-content;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border)
}

.process-lanes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem
}

.process-lane,
.review-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.2rem;
}

.process-step-label {
  color: var(--basic);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .7rem;
}

.process-band {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 2rem;
  align-items: start;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.process-checklist {
  display: grid;
  gap: .8rem
}

.process-check {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 1rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--border);
}

.process-check:last-child {
  border-bottom: none
}

.process-check span {
  color: var(--extra);
  font-weight: 800
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem
}

.review-card ul {
  padding-left: 1.1rem
}

.review-card li+li {
  margin-top: .55rem
}

.process-final {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  border-top: 1px solid var(--border);
}

.process-final p {
  max-width: 690px
}

.branch-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
  margin-top: 1rem
}

.branch-table th,
.branch-table td {
  padding: .55rem .8rem;
  border: 1px solid var(--border);
  text-align: left
}

.branch-table th {
  background: var(--surface);
  color: var(--basic);
  font-weight: 700;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em
}

.branch-table td code {
  color: var(--extra);
  font-size: .8rem
}

/* ── GRAPH DIALOG ── */
.graph-dialog {
  margin: auto;
  width: min(1120px, 94vw);
  height: min(760px, 86vh);
  padding: 0;
  color: var(--text);
  background: rgba(3, 7, 18, .98);
  border: 1px solid rgba(56, 189, 248, .35);
  border-radius: 20px;
  box-shadow: 0 30px 100px rgba(0, 0, 0, .72), 0 0 55px rgba(56, 189, 248, .16);
  overflow: hidden;

  opacity: 0;
  transform: scale(0.9) translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    display 0.5s allow-discrete,
    overlay 0.5s allow-discrete;
}

.graph-dialog[open] {
  opacity: 1;
  transform: scale(1) translateY(0);
}

@starting-style {
  .graph-dialog[open] {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
}

.graph-dialog::backdrop {
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  opacity: 0;
  transition: opacity 0.5s ease, backdrop-filter 0.5s ease, display 0.5s allow-discrete, overlay 0.5s allow-discrete;
}

.graph-dialog[open]::backdrop {
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(6px);
  opacity: 1;
}

@starting-style {
  .graph-dialog[open]::backdrop {
    opacity: 0;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
  }
}

.graph-dialog-inner {
  display: flex;
  flex-direction: column;
  height: 100%
}

.graph-dialog-header {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, rgba(56, 189, 248, .1), rgba(167, 139, 250, .08));
}

.graph-dialog-title {
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: .15rem
}

.graph-dialog-sub {
  color: var(--muted);
  font-size: .82rem
}

.graph-dialog-actions {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
  justify-content: flex-end
}

.graph-download,
.graph-close {
  color: var(--text);
  background: rgba(15, 23, 42, .84);
  border: 1px solid var(--border);
  border-radius: 999px;
  text-decoration: none;
  font-size: .78rem;
  font-weight: 700;
  padding: .42rem .78rem;
  cursor: pointer;
  white-space: nowrap;
}

.graph-download:hover,
.graph-close:hover,
.graph-download:focus-visible,
.graph-close:focus-visible {
  border-color: var(--basic);
  color: var(--basic);
  outline: none;
}

.graph-canvas-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  background: radial-gradient(circle at center, rgba(15, 23, 42, .75), #020617 68%)
}

#graphDialogCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%
}

.graph-status {
  position: absolute;
  top: .6rem;
  left: 60px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: .42rem;
  flex-wrap: nowrap;
  pointer-events: none;
}

.gst-stat {
  color: rgba(148, 163, 184, .7);
  font-size: .7rem;
  white-space: nowrap;
  background: rgba(3, 7, 18, .68);
  border: 1px solid rgba(148, 163, 184, .15);
  border-radius: 999px;
  padding: .26rem .62rem;
}

.gst-stat .gst-unique,
.gst-stat .gst-unique-count {
  color: var(--tier-unique)
}

.gst-dim {
  color: rgba(148, 163, 184, .4)
}

/* ── Canvas tooltip / collection chrome — token-bound text bits ─────
     These classes were inlined as style="…" attributes pre-Stage 5;
     the canvas emits them as className refs now. Each maps to a single
     :root token so a theme swap recolors every site in lockstep. */
.gst-named-id {
  font-family: var(--font-mono);
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .01em;
  margin-bottom: .2rem;
  word-break: break-all;
  color: var(--honor-red);
}

/* Per DESIGN.md — Honor Red carries the @handle only; the slash form
   inherits the skill's rank colour (applied inline by JS). */
.gst-named-id .gst-named-handle {
  color: var(--honor-red);
}

.gst-named-id .gst-named-slug {
  /* per-skill rank colour applied inline */
}

.gst-skill-id {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  margin-bottom: .15rem;
}

.gst-honor {
  color: var(--honor-red)
}

.gst-effective-pill {
  display: inline-block;
  padding: .12rem .42rem;
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 700;
  background: rgba(var(--apex-gold-rgb), .16);
  color: var(--apex-gold);
}

.gst-demerit-note {
  color: var(--apex-gold);
  font-size: .66rem;
  margin-top: .26rem
}

.gst-confirm-label {
  font-size: .6rem;
  font-weight: 600;
  margin-left: .2rem
}

.gst-btn-ico {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: currentColor;
  vertical-align: middle;
}

.gst-tip {
  display: inline-flex;
  align-items: center;
  gap: .24rem;
  color: rgba(148, 163, 184, .42);
  font-size: .67rem;
  white-space: nowrap;
}

.gst-tip span {
  color: rgba(148, 163, 184, .55)
}

.gst-or {
  color: rgba(148, 163, 184, .28) !important;
  font-size: .6rem
}

.gst-ctrl {
  font: .7rem/1 Inter, system-ui, sans-serif;
  font-weight: 700;
  color: rgba(148, 163, 184, .6);
  background: rgba(3, 7, 18, .68);
  border: 1px solid rgba(148, 163, 184, .22);
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: .08rem .3rem;
}

.gst-icon {
  width: 10px;
  height: 15px;
  flex-shrink: 0;
  color: rgba(148, 163, 184, .55);
  overflow: visible;
}

/* ── tree dialog ── */
.tree-dialog {
  margin: auto;
  width: min(840px, 94vw);
  height: min(640px, 86vh);
  padding: 0;
  color: var(--text);
  background: rgba(3, 7, 18, .98);
  border: 1px solid rgba(56, 189, 248, .45);
  border-radius: 20px;
  box-shadow: 0 30px 100px rgba(0, 0, 0, .8),
    0 0 70px rgba(56, 189, 248, .28),
    0 0 30px rgba(255, 255, 255, .14),
    0 0 110px rgba(192, 132, 252, .14);
  overflow: hidden;
  animation: tree-dialog-breathe 5s ease-in-out infinite;
}

@keyframes tree-dialog-breathe {

  0%,
  100% {
    box-shadow: 0 30px 100px rgba(0, 0, 0, .8), 0 0 70px rgba(56, 189, 248, .28), 0 0 30px rgba(255, 255, 255, .14), 0 0 110px rgba(192, 132, 252, .14)
  }

  50% {
    box-shadow: 0 30px 100px rgba(0, 0, 0, .8), 0 0 80px rgba(192, 132, 252, .32), 0 0 36px rgba(255, 255, 255, .18), 0 0 120px rgba(56, 189, 248, .16)
  }
}

.tree-dialog::backdrop {
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(6px)
}

.tree-dialog-inner {
  display: flex;
  flex-direction: column;
  height: 100%
}

.tree-dialog-header {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 1.2rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: linear-gradient(90deg, rgba(56, 189, 248, .1), rgba(167, 139, 250, .08));
  cursor: grab;
  user-select: none;
}

.tree-dialog-header.dragging {
  cursor: grabbing
}

.tree-dialog-title {
  font-weight: 800;
  font-size: 1rem
}

.tree-dialog-actions {
  display: flex;
  align-items: center;
  gap: .6rem
}

.tree-act-btn {
  color: var(--text);
  background: rgba(15, 23, 42, .84);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  padding: .42rem .78rem;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}

.tree-act-btn:hover {
  border-color: var(--basic);
  color: var(--basic)
}

.tree-act-btn.copied {
  border-color: #86efac;
  color: #86efac
}

.tree-close-x {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: .85rem;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}

.tree-close-x:hover {
  border-color: var(--basic);
  color: var(--basic)
}

.tree-dialog-body {
  flex: 1;
  overflow: auto;
  padding: 1.1rem 1.4rem;
  min-height: 0
}

.tree-dialog-body pre {
  font-family: var(--font-mono);
  font-size: .78rem;
  line-height: 1.65;
  color: var(--text);
  white-space: pre;
  background: transparent;
  border: none;
  margin: 0;
  padding: 0;
}

.tree-skeleton {
  color: var(--muted);
  animation: tree-skeleton-pulse 1.5s ease-in-out infinite
}

@keyframes tree-skeleton-pulse {

  0%,
  100% {
    opacity: .35
  }

  50% {
    opacity: .7
  }
}

/* syntax highlighting */
@keyframes tree-rainbow-glow {
  0% {
    color: var(--tier-basic);
    text-shadow: 0 0 10px rgba(56, 189, 248, .8), 0 0 22px rgba(56, 189, 248, .4)
  }

  18% {
    color: var(--rank-3);
    text-shadow: 0 0 10px rgba(167, 139, 250, .8), 0 0 22px rgba(167, 139, 250, .4)
  }

  36% {
    color: var(--tier-ultimate);
    text-shadow: 0 0 10px rgba(245, 158, 11, .8), 0 0 22px rgba(245, 158, 11, .4)
  }

  54% {
    color: #ef4444;
    text-shadow: 0 0 10px rgba(239, 68, 68, .8), 0 0 22px rgba(239, 68, 68, .4)
  }

  72% {
    color: var(--tier-extra);
    text-shadow: 0 0 10px rgba(192, 132, 252, .8), 0 0 22px rgba(192, 132, 252, .4)
  }

  90% {
    color: #34d399;
    text-shadow: 0 0 10px rgba(52, 211, 153, .8), 0 0 22px rgba(52, 211, 153, .4)
  }

  100% {
    color: var(--tier-basic);
    text-shadow: 0 0 10px rgba(56, 189, 248, .8), 0 0 22px rgba(56, 189, 248, .4)
  }
}

@keyframes tree-extra-glow {

  0%,
  100% {
    color: var(--tier-basic);
    text-shadow: 0 0 10px rgba(56, 189, 248, .6);
  }

  20% {
    color: var(--rank-3);
    text-shadow: 0 0 10px rgba(167, 139, 250, .6);
  }

  40% {
    color: #ef4444;
    text-shadow: 0 0 10px rgba(239, 68, 68, .6);
  }

  60% {
    color: var(--tier-extra);
    text-shadow: 0 0 10px rgba(192, 132, 252, .6);
  }

  80% {
    color: #34d399;
    text-shadow: 0 0 10px rgba(52, 211, 153, .6);
  }
}

/* ── Tree Tier Glyphs — token-bound (Stage 1/5b) ── */
.tree-glyph-ult {
  color: var(--tier-ultimate) !important;
  font-weight: 900 !important;
}

.tree-glyph-ext {
  color: var(--tier-extra) !important;
  font-weight: 700 !important;
}

.tree-glyph-uni {
  color: var(--tier-unique) !important;
  font-weight: 900 !important;
}

.tree-glyph-basic {
  color: var(--tier-basic) !important;
}

/* ── Rank chips [N★] / [N★ · Name] — token-bound ── */
.tree-rank {
  color: var(--muted) !important;
}

/* brackets */
.tree-rank-digit {
  font-weight: 700 !important;
}

.tree-rank-sep {
  color: var(--muted) !important;
  opacity: .55 !important;
}

.tree-rank-suffix {
  color: var(--muted) !important;
}

.tree-rank-0 .tree-rank-digit {
  color: var(--rank-0) !important;
}

.tree-rank-1 .tree-rank-digit {
  color: var(--rank-1) !important;
}

.tree-rank-2 .tree-rank-digit {
  color: var(--rank-2) !important;
}

.tree-rank-3 .tree-rank-digit {
  color: var(--rank-3) !important;
}

.tree-rank-4 .tree-rank-digit {
  color: var(--rank-4) !important;
}

.tree-rank-5 .tree-rank-digit {
  color: var(--rank-5) !important;
}

.tree-rank-6 .tree-rank-digit {
  color: var(--rank-6) !important;
}

/* ── Owned / unowned markers ── */
.tree-owned {
  color: var(--apex-gold) !important;
  font-weight: 800 !important;
}

.tree-unowned {
  color: var(--muted) !important;
  opacity: .5 !important;
}

/* ── Unclaimed label (Honor Red) ── */
.tree-unclaimed {
  color: var(--honor-red) !important;
  font-weight: 700 !important;
}

/* ── Shared-prereq marker (↑ see above) — muted italic ── */
.tree-shared {
  color: var(--muted) !important;
  font-style: italic !important;
  opacity: .7 !important;
}

/* ── Tree Highlighting ── */
.tree-ult-line {
  font-weight: 700 !important;
  color: var(--text) !important;
}

.tree-ult-contributor {
  color: var(--honor-red) !important;
  font-weight: 800 !important;
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.4) !important;
}

.tree-ult-slash {
  color: var(--muted) !important;
  opacity: 0.5 !important;
}

.tree-ult-skillname,
.tree-ult-id {
  color: var(--tier-ultimate) !important;
  font-weight: 700 !important;
}

.tree-unique-line {
  font-weight: 700 !important;
  color: var(--text) !important;
}

.tree-unique-contributor {
  color: var(--honor-red) !important;
  font-weight: 800 !important;
}

.tree-unique-slash {
  color: var(--muted) !important;
  opacity: 0.5 !important;
}

.tree-unique-skillname {
  color: var(--tier-unique) !important;
  font-weight: 900 !important;
  text-shadow: 0 0 8px rgba(124, 58, 237, 0.6), 0 0 16px rgba(124, 58, 237, 0.3) !important;
}

.tree-unique-gold {
  color: var(--rank-5) !important;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.6), 0 0 16px rgba(251, 191, 36, 0.3) !important;
}

.tree-extra-line {
  font-weight: 600 !important;
  color: var(--text) !important;
}

.tree-extra-contributor {
  color: var(--honor-red) !important;
  font-weight: 700 !important;
}

.tree-extra-slash {
  color: var(--muted) !important;
  opacity: 0.5 !important;
}

.tree-extra-skillname,
.tree-extra-id {
  color: var(--tier-extra) !important;
}

.tree-basic-line {
  color: var(--text) !important;
}

.tree-basic-contributor {
  color: var(--honor-red) !important;
  font-weight: 600 !important;
}

.tree-basic-slash {
  color: var(--muted) !important;
  opacity: 0.5 !important;
}

.tree-basic-skillname,
.tree-basic-id {
  color: var(--tier-basic) !important;
}

.tree-sep {
  color: rgba(56, 189, 248, 0.25) !important;
}

.skill-tooltip {
  position: absolute;
  pointer-events: all;
  display: none;
  z-index: 15;
  background: rgba(3, 7, 18, .9);
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: .6rem;
  padding: .6rem .85rem;
  min-width: 148px;
  max-width: 230px;
  backdrop-filter: blur(8px);
}

.skill-tooltip.pinned {
  border-color: rgba(56, 189, 248, .4);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, .12), 0 6px 28px rgba(0, 0, 0, .55);
}

/* Tiered tooltip rhythm (impeccable typeset).
   Name gets the heaviest visual weight; named-id and skill-id sit
   tighter as paired data; the badge row is the closer. */
.skill-tooltip-name {
  font-size: .8rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: .35rem;
}

/* 6★ skills earn an apex-gold underline accent on the tooltip name,
   echoing the hero-title emphasis rule. The JS adds data-level on the
   tooltip wrapper. */
.skill-tooltip[data-level="6★"] .skill-tooltip-name {
  border-bottom: 1px solid var(--apex-gold);
  padding-bottom: .12em;
}

.skill-tooltip-row {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  margin-top: .1rem;
}

.skill-tooltip-badge {
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .06em;
  padding: .14rem .42rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  opacity: .85;
}

.skill-tooltip-detail {
  color: #64748b;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em
}

.skill-tooltip-type-basic {
  color: var(--tier-basic)
}

.skill-tooltip-type-extra {
  color: var(--tier-extra)
}

.skill-tooltip-type-unique {
  color: var(--tier-unique)
}

.skill-tooltip-type-ultimate {
  color: var(--tier-ultimate)
}

.graph-search-wrap {
  position: absolute;
  top: 110px;
  right: .75rem;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}

.graph-search-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(var(--tier-basic-rgb), .3);
  color: var(--tier-basic);
  cursor: pointer;
  padding: 0;
  transition: background .15s, border-color .15s, color .15s;
}

.graph-search-help:hover {
  background: rgba(var(--tier-basic-rgb), .12);
  border-color: rgba(var(--tier-basic-rgb), .55);
}

.graph-search-help[aria-expanded="true"] {
  background: rgba(var(--tier-basic-rgb), .18);
  border-color: var(--tier-basic);
}

.graph-search-help-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 11;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: .5rem;
  padding: .55rem .7rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--text);
  line-height: 1.6;
  width: 240px;
  max-width: 80vw;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}

.graph-search-help-popover[hidden] {
  display: none;
}

.graph-search-help-popover code {
  color: var(--honor-red);
  font-family: var(--font-mono);
  padding: 0 .2rem;
  font-weight: 700;
}

.graph-search {
  background: rgba(3, 7, 18, .15);
  border: 1px solid rgba(148, 163, 184, .15);
  border-radius: 999px;
  padding: .28rem .72rem;
  font-size: .74rem;
  color: var(--honor-red);
  outline: none;
  width: 130px;
  font-family: var(--font-mono);
  transition: background .2s, border-color .2s, width .2s;
}

.graph-search::placeholder {
  color: rgba(var(--honor-red-rgb), .4)
}

.graph-search:hover,
.graph-search:focus {
  background: rgba(3, 7, 18, .72);
  border-color: rgba(148, 163, 184, .5);
  width: 175px;
}

.graph-legend {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
  z-index: 100;
  display: none;
  flex-direction: row;
  align-items: center;
  transition: transform .38s cubic-bezier(0.16, 1, 0.3, 1);
  background: transparent;
  border: none;
  padding: 0;
  user-select: none;
  max-height: calc(100% - 3.5rem);
}

/* Collapsed/Minimized state: slide out to the right, leaving only the handle visible */
.graph-legend.minimized {
  transform: translate(calc(100% - 38px), -50%) !important;
}

/* The sliding drawer handle toggle button */
.graph-legend-drawer-toggle {
  width: 38px;
  height: 96px;
  background: rgba(3, 7, 18, .88);
  border: 1px solid var(--border);
  border-right: none;
  border-radius: .5rem 0 0 .5rem;
  color: var(--text);
  cursor: pointer;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .22rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.3);
  transition: background .2s, color .2s;
  padding: 0 .2rem;
  z-index: 2;
  margin-right: -1px;
}

.graph-legend-drawer-toggle:hover {
  background: rgba(15, 23, 42, .95);
  color: var(--tier-basic);
}

.graph-legend-drawer-toggle svg {
  transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1);
  fill: currentColor;
  transform: rotate(0deg); /* Default open: arrow points right (→) to close */
  flex-shrink: 0;
}

/* Rotation of arrow: when minimized (drawer closed), we rotate it 180deg to point left (←) to invite opening */
.graph-legend.minimized .graph-legend-drawer-toggle svg {
  transform: rotate(180deg);
}

.graph-legend-drawer-label {
  font-family: var(--font-mono);
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  opacity: .85;
  transition: color .2s;
  flex-shrink: 0;
}

.graph-legend-drawer-toggle:hover .graph-legend-drawer-label {
  color: var(--text);
}

/* The actual content panel containing types/ranks */
.graph-legend-content {
  background: rgba(3, 7, 18, .88);
  border: 1px solid var(--border);
  border-right: none;
  border-radius: 0;
  padding: .65rem .85rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: .55rem;
  z-index: 1;
}

.graph-legend-body {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.graph-legend-section {
  display: flex;
  flex-direction: column;
  gap: .18rem
}

.graph-legend-heading {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: .1rem;
}

.graph-legend-item {
  display: flex;
  align-items: center;
  gap: .38rem;
  font-size: .7rem;
  font-weight: 600;
  color: var(--rank-0);
  padding: .18rem .38rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.graph-legend-item:hover {
  background: rgba(255, 255, 255, .06);
  color: #e2e8f0
}

.graph-legend-item.active {
  background: rgba(56, 189, 248, .12);
  color: #e2e8f0;
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, .3)
}

.graph-legend-swatch {
  border-radius: 50%;
  flex-shrink: 0
}

.graph-legend-swatch[data-tier="basic"] {
  background: var(--tier-basic)
}

.graph-legend-swatch[data-tier="extra"] {
  background: var(--tier-extra)
}

.graph-legend-swatch[data-tier="unique"] {
  background: var(--tier-unique)
}

.graph-legend-swatch[data-tier="ultimate"] {
  background: var(--tier-ultimate)
}

.graph-legend-ranks {
  display: flex;
  flex-wrap: wrap;
  gap: .28rem;
  padding: .1rem 0
}

.graph-legend-rank-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: .6rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}

/* Rank pill swatches read from --rank-N / --rank-N-bg tokens so
     the six-rank palette stays in lockstep with tokens.css. */
.graph-legend-rank-pill[data-rank="1"] {
  background: var(--rank-1-bg);
  color: var(--rank-1)
}

.graph-legend-rank-pill[data-rank="2"] {
  background: var(--rank-2-bg);
  color: var(--rank-2)
}

.graph-legend-rank-pill[data-rank="3"] {
  background: var(--rank-3-bg);
  color: var(--rank-3)
}

.graph-legend-rank-pill[data-rank="4"] {
  background: var(--rank-4-bg);
  color: var(--rank-4)
}

.graph-legend-rank-pill[data-rank="5"] {
  background: var(--rank-5-bg);
  color: var(--rank-5)
}

.graph-legend-rank-pill[data-rank="6"] {
  background: var(--rank-6-bg);
  color: var(--rank-6)
}

.graph-legend-rank-pill:hover {
  transform: scale(1.18);
  box-shadow: 0 0 8px currentColor
}

.graph-legend-rank-pill.active {
  transform: scale(1.18);
  box-shadow: 0 0 10px currentColor, inset 0 0 0 1.5px currentColor
}

.graph-redpill {
  position: absolute;
  bottom: calc(52px + .75rem);
  right: .75rem;
  z-index: 10;
  color: var(--honor-red);
  font-size: .72rem;
  font-weight: 700;
  background: rgba(3, 7, 18, .68);
  border: 1px solid rgba(var(--honor-red-rgb), .45);
  border-radius: 999px;
  padding: .3rem .78rem;
  cursor: pointer;
  transition: all .2s;
  font-family: var(--font-mono);
  white-space: nowrap;
}

.graph-redpill:hover {
  border-color: rgba(var(--honor-red-rgb), .75);
  color: var(--honor-red);
  background: rgba(var(--honor-red-rgb), .08)
}

.graph-redpill.active {
  background: rgba(var(--honor-red-rgb), .18);
  border-color: rgba(var(--honor-red-rgb), .7);
  color: var(--honor-red);
  box-shadow: 0 0 14px rgba(var(--honor-red-rgb), .35);
}

/* ── Scatter strip (direction rule: top = Ultimate, bottom = Basic).
     Four-stop gradient runs from --tier-ultimate-edge through
     --tier-unique-edge → --tier-extra-edge → --tier-basic-edge so the
     strip visually maps onto the tier hierarchy from apex down. */
.graph-scatter-strip {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 52px;
  width: 52px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(to bottom,
      var(--tier-ultimate-edge) 0%,
      var(--tier-unique-edge) 33%,
      var(--tier-extra-edge) 66%,
      var(--tier-basic-edge) 100%);
  border-right: 1px solid var(--border);
  cursor: ns-resize;
  user-select: none;
  touch-action: none;
}

.graph-scatter-edge {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  padding: .55rem 0;
  user-select: none;
  font-family: var(--font-mono);
}

.graph-scatter-edge--top {
  color: var(--tier-ultimate)
}

.graph-scatter-edge--bot {
  color: var(--tier-basic)
}

.graph-scatter-track {
  flex: 1;
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.graph-ruler-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.graph-scatter-title {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: rgba(148, 163, 184, .55);
  padding: .45rem 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  text-transform: uppercase;
}

/* Discoverability captions for the otherwise drag-only strips. */
.graph-strip-caption {
  font-family: var(--font-mono);
  font-size: .54rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: rgba(var(--tier-basic-rgb), .35);
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
}

.graph-strip-caption--scatter {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: .35rem 0;
  align-self: center;
}

.graph-strip-caption--speed {
  padding: 0 .55rem;
  flex-shrink: 0;
  font-size: .58rem;
}

/* ── Bottom bar (Stage 5: no glass; sits on --bg with hairline top).
     Labels render in Bricolage (var(--font-body)); numeric stats in
     mono small-caps via .graph-zoom-counter / .graph-speed-title. */
.graph-bottom-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 52px;
  z-index: 10;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: var(--bg);
  border-top: 1px solid var(--border);
}

.graph-pause-btn,
.graph-reset-btn,
.graph-random-btn {
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(148, 163, 184, .65);
  background: transparent;
  border: none;
  border-right: 1px solid var(--border);
  cursor: pointer;
  transition: color .15s, background .15s;
}

.graph-pause-btn:hover,
.graph-reset-btn:hover,
.graph-random-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, .04)
}

.graph-pause-btn.active,
.graph-random-btn.active {
  color: var(--honor-red);
}

.graph-bottom-btn {
  flex: 0 0 auto;
  padding: 0 .85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, .55);
  background: transparent;
  border: none;
  border-right: 1px solid var(--border);
  cursor: pointer;
  transition: color .15s, background .15s;
  font-family: var(--font-mono);
  white-space: nowrap;
}

.graph-bottom-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, .04)
}

.graph-bottom-btn.active {
  color: var(--tier-basic)
}

.graph-bottom-btn.off {
  color: rgba(148, 163, 184, .2);
  text-decoration: line-through
}

.graph-speed-strip {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  cursor: ew-resize;
  user-select: none;
  touch-action: none;
}

.graph-speed-edge {
  font-size: .9rem;
  font-weight: 700;
  line-height: 1;
  padding: 0 .55rem;
  flex-shrink: 0;
  user-select: none;
}

.graph-speed-edge--left {
  color: rgba(148, 163, 184, .28)
}

.graph-speed-edge--right {
  color: var(--tier-extra)
}

.graph-speed-track {
  flex: 1;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.graph-speed-title {
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: rgba(148, 163, 184, .5);
  white-space: nowrap;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.graph-zoom-counter {
  flex: 0 0 auto;
  padding: 0 .8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: rgba(148, 163, 184, .42);
  font-variant-numeric: tabular-nums;
  border-right: 1px solid var(--border);
  cursor: pointer;
  transition: color .15s;
  white-space: nowrap;
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.graph-zoom-counter:hover {
  color: rgba(148, 163, 184, .75)
}

.graph-tooltip-add {
  position: absolute;
  top: .45rem;
  right: .45rem;
  background: transparent;
  border: 1px solid rgba(var(--tier-basic-rgb), .3);
  border-radius: .35rem;
  color: rgba(var(--tier-basic-rgb), .7);
  font-size: .82rem;
  font-weight: 700;
  padding: .1rem .4rem;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
  pointer-events: all;
  font-family: var(--font-mono);
  line-height: 1;
}

.graph-tooltip-add:hover {
  color: var(--tier-basic);
  border-color: rgba(var(--tier-basic-rgb), .6);
  background: rgba(var(--tier-basic-rgb), .08)
}

.graph-skill-panel {
  position: absolute;
  z-index: 20;
  width: 320px;
  max-width: 85%;
  background: rgba(3, 7, 18, .85);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(var(--honor-red-rgb), .45);
  border-radius: .75rem;
  display: none;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0, 0, 0, .6), 0 0 0 1px rgba(var(--honor-red-rgb), .08);
  overflow: hidden;
  font-family: var(--font-mono);
}

.graph-skill-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem .5rem;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(var(--honor-red-rgb), .15);
}

.graph-skill-panel-close {
  background: transparent;
  border: none;
  color: var(--honor-red);
  font-size: 1.1rem;
  padding: .1rem .4rem;
  cursor: pointer;
  transition: opacity .15s;
  font-family: inherit;
  line-height: 1;
  opacity: .7;
}

.graph-skill-panel-close:hover {
  opacity: 1;
}

.graph-skill-panel-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.graph-skill-panel-name {
  font-size: .95rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--honor-red);
}

.graph-skill-panel-named-id {
  font-size: .72rem;
  font-weight: 700;
  font-family: var(--font-mono);
  word-break: break-all;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0;
  color: var(--honor-red);
  opacity: .85;
}

.graph-skill-panel-named-id .gst-named-handle {
  color: var(--honor-red);
}

.graph-skill-panel-named-id .gst-named-slug {
  /* per-skill rank colour applied inline */
}

.graph-skill-panel-title {
  color: rgba(148, 163, 184, .6);
  font-size: .72rem;
  font-style: italic;
  line-height: 1.25;
}

.graph-skill-panel-hint {
  color: rgba(148, 163, 184, .4);
  font-size: .64rem;
  margin-top: .15rem;
  font-style: italic;
  line-height: 1.3;
}

.graph-skill-panel-type-row {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  margin-top: .1rem;
}

.graph-skill-panel-terminal {
  margin-top: .3rem;
  padding: .4rem .55rem;
  background: rgba(15, 23, 42, .85);
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: .4rem;
}

.graph-skill-panel-cmd {
  display: block;
  padding: .4rem .6rem;
  background: rgba(0, 0, 0, .4);
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: .35rem;
  font-size: .76rem;
  font-family: var(--font-mono);
  color: var(--tier-basic);
  cursor: pointer;
  transition: background .15s, border-color .15s;
  word-break: break-all;
  user-select: all;
}

.graph-skill-panel-cmd:hover {
  background: rgba(var(--tier-basic-rgb), .06);
  border-color: rgba(var(--tier-basic-rgb), .3)
}

.graph-skill-panel-cmd.copied {
  border-color: rgba(var(--tier-extra-rgb), .5);
  color: var(--tier-extra)
}

.graph-skill-panel-cmd.copied::after {
  content: ' ✓ copied';
  color: rgba(var(--tier-extra-rgb), .7);
  font-size: .65rem
}

.graph-skill-panel-explorer-link {
  display: inline-block;
  margin-top: .55rem;
  padding: .38rem .75rem;
  background: rgba(var(--honor-red-rgb), .1);
  border: 1px solid rgba(var(--honor-red-rgb), .35);
  border-radius: .4rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--honor-red);
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.graph-skill-panel-explorer-link:hover {
  background: rgba(var(--honor-red-rgb), .2);
  border-color: rgba(var(--honor-red-rgb), .6)
}

/* ── Collection panel (Stage 5: token-bound, .plaque--mini cards).
     The panel chrome itself stays glassy because it sits over the 3D
     canvas and benefits from the depth cue, but every colour now reads
     from --tier-*, --honor-red, or --border instead of hardcoded hex.
     Saved-skill cards render as .plaque--mini per Stage 3. */
.graph-collection-panel {
  position: absolute;
  z-index: 30;
  width: 240px;
  background: rgba(3, 7, 18, .62);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: .75rem;
  box-shadow: 0 8px 40px rgba(0, 0, 0, .6);
  display: none;
  flex-direction: column;
  overflow: hidden;
  max-height: 85vh;
}

#hero.hud-hidden [data-interactive-chrome] {
  display: none !important;
}

.graph-collection-panel.minimized {
  max-height: 38px !important;
  height: 38px !important;
  border-radius: 0 !important;
}

.graph-collection-panel.minimized .graph-collection-list,
.graph-collection-panel.minimized .graph-collection-note {
  display: none !important;
}

.graph-collection-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.graph-collection-title {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-family: var(--font-mono);
}

.graph-collection-actions {
  display: flex;
  gap: .35rem
}

.graph-collection-copy-all,
.graph-collection-clear-all,
.graph-collection-minimize {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: .3rem;
  color: rgba(148, 163, 184, .6);
  font-size: .6rem;
  font-weight: 600;
  padding: .22rem .42rem;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
  font-family: var(--font-mono);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.graph-collection-copy-all:hover {
  color: var(--tier-basic);
  border-color: rgba(var(--tier-basic-rgb), .4);
  background: rgba(var(--tier-basic-rgb), .06);
}

.graph-collection-minimize:hover {
  color: var(--tier-basic);
  border-color: rgba(var(--tier-basic-rgb), .4);
  background: rgba(var(--tier-basic-rgb), .06);
}

.graph-collection-copy-all:hover .gst-btn-ico {
  filter: drop-shadow(0 0 8px rgba(var(--tier-basic-rgb), .5));
}

.graph-collection-copy-all.copied {
  color: var(--text);
  border-color: rgba(var(--tier-extra-rgb), .5);
}

.graph-collection-clear-all:hover {
  color: var(--honor-red);
  border-color: rgba(var(--honor-red-rgb), .4);
  background: rgba(var(--honor-red-rgb), .06);
}

.graph-collection-clear-all.confirming {
  color: var(--honor-red);
  border-color: rgba(var(--honor-red-rgb), .5);
  background: rgba(var(--honor-red-rgb), .1);
}

.graph-collection-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: .4rem .5rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.graph-collection-list::-webkit-scrollbar {
  width: 4px
}

.graph-collection-list::-webkit-scrollbar-track {
  background: transparent
}

.graph-collection-list::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px
}

/* Collection card = .plaque--mini variant scoped to the panel. The
     Stage 3 .plaque--mini base supplies the slug + handle vocabulary;
     we tighten the padding here so the card fits the 260px-wide
     panel. data-ghost="true" dims unnamed entries (no install path). */
.graph-collection-card.plaque--mini {
  padding: .4rem .55rem;
  border-radius: .45rem;
  background: rgba(15, 23, 42, .7);
  border: 1px solid var(--border);
  transition: border-color .15s, background .15s;
  
  /* Density & alignment overrides for collection panel context */
  width: 100%;
  max-width: 100%;
  min-height: 0; /* Remove 220px tall Hall of Heroes default */
  height: auto;
  text-align: left; /* Left-align for superior typography flow */
  align-items: stretch; /* Keep children aligned horizontally */
}

.graph-collection-card.plaque--mini:hover {
  border-color: rgba(148, 163, 184, .28)
}

.graph-collection-card[data-ghost="true"] {
  border-style: dashed;
  opacity: .78;
}

.graph-collection-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .3rem
}

.graph-collection-card-name {
  font-size: .7rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  font-family: var(--font-body)
}

.graph-collection-card-btns {
  display: flex;
  gap: .2rem;
  flex-shrink: 0
}

.graph-collection-card-named {
  font-size: .6rem;
  font-family: var(--font-mono);
  color: var(--honor-red);
  margin-top: .15rem;
  opacity: .85
}

.graph-collection-cmd {
  display: block;
  margin-top: .2rem;
  padding: .2rem .35rem;
  background: rgba(0, 0, 0, .4);
  border: 1px solid var(--border);
  border-radius: .3rem;
  font-size: .62rem;
  font-family: var(--font-mono);
  color: var(--tier-basic);
  cursor: pointer;
  transition: background .15s, border-color .15s;
  word-break: break-all;
  user-select: all;
}

.graph-collection-cmd:hover {
  background: rgba(var(--tier-basic-rgb), .06);
  border-color: rgba(var(--tier-basic-rgb), .25);
}

.graph-collection-cmd.copied {
  border-color: rgba(var(--tier-extra-rgb), .5);
  color: var(--tier-extra);
}

.graph-collection-share,
.graph-collection-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: .7rem;
  line-height: 1;
  padding: .18rem;
  transition: color .15s;
  color: rgba(148, 163, 184, .5);
}

.graph-collection-share:hover {
  color: var(--tier-basic)
}

.graph-collection-remove {
  color: rgba(148, 163, 184, .4)
}

.graph-collection-remove:hover {
  color: var(--honor-red)
}

.graph-collection-note {
  flex-shrink: 0;
  padding: .5rem .65rem;
  border-top: 1px solid var(--border);
  font-size: .6rem;
  color: rgba(148, 163, 184, .55);
  font-style: italic;
  line-height: 1.45;
  font-family: var(--font-body);
}

.graph-neighbor-cards {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 12;
  overflow: hidden;
}

.graph-neighbor-card {
  position: absolute;
  pointer-events: all;
  cursor: pointer;
  transform: translate(-50%, -120%);
  padding: .2rem .55rem;
  background: rgba(15, 23, 42, .88);
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 1rem;
  font-size: .62rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  backdrop-filter: blur(6px);
  transition: background .15s, border-color .15s, transform .15s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}

.graph-neighbor-card:hover {
  background: rgba(30, 41, 59, .95);
  border-color: var(--tier-basic-border);
  transform: translate(-50%, -120%) scale(1.08);
}

/* Neighbor card border tints route through --tier-*-border tokens. */
.graph-neighbor-card[data-type="basic"] {
  border-color: var(--tier-basic-border)
}

.graph-neighbor-card[data-type="extra"] {
  border-color: var(--tier-extra-border)
}

.graph-neighbor-card[data-type="ultimate"] {
  border-color: var(--tier-ultimate-border)
}

.graph-neighbor-card[data-type="unique"] {
  border-color: var(--tier-unique-border)
}

@media(max-width:700px) {

  #hero.hud-hidden .graph-scatter-strip,
  #hero.hud-hidden .graph-bottom-bar,
  #hero.hud-hidden .graph-collection-panel,
  #hero.hud-hidden .graph-legend,
  #hero.hud-hidden .graph-neighbor-cards,
  #hero.hud-hidden .graph-search-wrap,
  #hero.hud-hidden .graph-status,
  #hero.hud-hidden .graph-fullscreen-status,
  #hero.hud-hidden .graph-redpill {
    display: none !important;
  }

  #hero.hero-graph-fullscreen .graph-hud-toggle-btn {
    display: flex !important;
    left: 52px !important;
    bottom: calc(44px + .65rem) !important;
    padding: .3rem .55rem;
  }

  /* Mobile fullscreen polish:
     - Type/Rank filter raised so it doesn't collide with bottom bar +
       redpill stacked above it.
     - Bottom bar tightened so all six controls + speed strip survive
       the 375px width without overflowing the right edge.
     - Redpill moved to top-right of canvas instead of stacking above
       the bottom bar where it used to sit under the legend.
     - Search wrap drops down so it doesn't overlap the close chrome. */
  #hero.hero-graph-fullscreen .graph-legend {
    top: 50% !important;
    right: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    max-width: none !important;
    transform: translate(0, -50%) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
  }

  #hero.hero-graph-fullscreen .graph-legend-content {
    padding: .4rem .55rem !important;
    background: rgba(3, 7, 18, .92) !important;
    border-radius: 0 !important;
    max-width: 124px !important;
  }

  #hero.hero-graph-fullscreen .graph-legend-drawer-toggle {
    width: 32px !important;
    height: 84px !important;
    border-radius: .4rem 0 0 .4rem !important;
    gap: .18rem !important;
    padding: 0 .15rem !important;
    margin-right: -1px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #hero.hero-graph-fullscreen .graph-legend-drawer-label {
    font-size: .5rem !important;
    letter-spacing: .08em !important;
  }

  #hero.hero-graph-fullscreen .graph-legend.minimized {
    transform: translate(calc(100% - 32px), -50%) !important;
  }

  #hero.hero-graph-fullscreen .graph-legend-body {
    gap: .25rem !important;
  }

  #hero.hero-graph-fullscreen .graph-legend-heading {
    font-size: .52rem;
  }

  #hero.hero-graph-fullscreen .graph-legend-item {
    font-size: .62rem;
    padding: .12rem .25rem;
    gap: .3rem;
  }

  #hero.hero-graph-fullscreen .graph-legend-rank-pill {
    width: 19px;
    height: 19px;
    font-size: .54rem;
  }

  #hero.hero-graph-fullscreen .graph-legend-ranks {
    gap: .2rem;
  }

  #hero.hero-graph-fullscreen .graph-redpill {
    bottom: calc(44px + .65rem) !important;
    top: auto !important;
    left: auto !important;
    right: .85rem !important;
    font-size: .6rem !important;
    padding: .22rem .55rem !important;
    z-index: 11;
  }

  /* Search bar on right side, well clear of Hide Controls (bottom-left) */
  #hero.hero-graph-fullscreen .graph-search-wrap {
    top: auto !important;
    bottom: calc(44px + 3.2rem) !important;
    left: auto !important;
    right: .75rem !important;
    z-index: 100;
  }

  #hero.hero-graph-fullscreen .graph-search {
    width: 130px;
    font-size: .68rem;
  }

  #hero.hero-graph-fullscreen .graph-bottom-bar {
    height: 52px;
  }

  #hero.hero-graph-fullscreen .graph-pause-btn {
    flex: 0 0 48px;
    min-height: 48px;
    font-size: 1.05rem;
  }

  /* Reset + Random: bigger tap targets on mobile */
  #hero.hero-graph-fullscreen .graph-reset-btn,
  #hero.hero-graph-fullscreen .graph-random-btn {
    flex: 0 0 56px;
    min-height: 52px;
    font-size: 1.1rem;
  }

  #hero.hero-graph-fullscreen .graph-bottom-btn {
    padding: 0 .65rem;
    min-height: 48px;
    min-width: 48px;
    font-size: .62rem;
    letter-spacing: .04em;
  }

  #hero.hero-graph-fullscreen .graph-zoom-counter {
    padding: 0 .6rem;
    min-height: 48px;
    min-width: 48px;
    font-size: .64rem;
  }

  #hero.hero-graph-fullscreen .graph-speed-edge {
    padding: 0 .4rem;
    font-size: .78rem;
  }

  #hero.hero-graph-fullscreen .graph-speed-title {
    font-size: .62rem;
  }

  #hero.hero-graph-fullscreen .graph-scatter-strip {
    width: 56px;
    bottom: 52px;
  }

  #hero.hero-graph-fullscreen .graph-action-btn {
    min-height: 44px;
    padding: .5rem .8rem;
  }

  #hero.hero-graph-fullscreen .graph-hud-toggle-btn {
    min-height: 44px;
    padding: .55rem .9rem;
  }

  #hero.hero-graph-fullscreen .graph-search-help-popover {
    top: calc(100% + 6px) !important;
    right: 0 !important;
    width: 220px;
  }

  /* Hide GEXF download on mobile — bandwidth + no file manager flow */
  #hero.hero-graph-fullscreen .graph-dialog-actions a[download] {
    display: none !important;
  }

  /* Semantic / Labels / Orbit row: raise above the close button cluster */
  #hero.hero-graph-fullscreen .graph-fullscreen-header {
    flex-direction: column;
    align-items: flex-end;
    gap: .4rem;
    padding: .5rem .75rem;
  }

  #hero.hero-graph-fullscreen .graph-atlas-controls {
    order: -1;
    margin-left: 0;
    gap: .35rem;
  }
}

/* 480px Threshold — Double row layout with Speed bar on top */
@media (max-width: 480px) {
  #hero.hero-graph-fullscreen .graph-bottom-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    height: auto !important;
    background: rgba(3, 7, 18, 0.95) !important;
  }

  #hero.hero-graph-fullscreen .graph-speed-strip {
    order: 1 !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    border-bottom: 1px solid var(--border) !important;
  }

  #hero.hero-graph-fullscreen .graph-pause-btn {
    order: 2 !important;
    height: 48px !important;
    min-height: 48px !important;
    min-width: 48px !important;
    flex: 1 1 auto !important;
    border-right: 1px solid var(--border) !important;
  }

  #hero.hero-graph-fullscreen .graph-bottom-btn {
    order: 2 !important;
    height: 48px !important;
    min-height: 48px !important;
    min-width: 48px !important;
    flex: 1 1 auto !important;
    border-right: 1px solid var(--border) !important;
  }

  #hero.hero-graph-fullscreen .graph-zoom-counter {
    order: 2 !important;
    height: 48px !important;
    min-height: 48px !important;
    min-width: 48px !important;
    flex: 1 1 auto !important;
  }

  #hero.hero-graph-fullscreen .graph-reset-btn,
  #hero.hero-graph-fullscreen .graph-random-btn {
    order: 2 !important;
    height: 52px !important;
    min-height: 52px !important;
    min-width: 56px !important;
    flex: 1 1 auto !important;
    border-right: 1px solid var(--border) !important;
  }

  #hero.hero-graph-fullscreen .graph-hud-toggle-btn {
    bottom: calc(96px + .65rem) !important;
    min-height: 44px !important;
    padding: .55rem .9rem !important;
  }

  #hero.hero-graph-fullscreen .graph-redpill {
    bottom: calc(96px + .65rem) !important;
  }

  #hero.hero-graph-fullscreen .graph-search-wrap {
    bottom: calc(96px + 3.2rem) !important;
    right: .75rem !important;
    left: auto !important;
  }

  #hero.hero-graph-fullscreen .graph-scatter-strip {
    bottom: 96px !important;
    width: 56px !important;
  }
}

/* Sub-400px: shed the least-used toggles (Titles + Nebula) into an
   implicit overflow by hiding them so the speed strip can breathe.
   Direction rule mirrors the bottom-bar order: pause → labels →
   titles → nebula → random → reset → zoom → speed. Hiding the 3rd
   and 4th .graph-bottom-btn (titles, nebula) preserves the
   pause/labels/random/reset rhythm. */
@media (max-width: 400px) {
  #hero.hero-graph-fullscreen .graph-bottom-btn:nth-of-type(3),
  #hero.hero-graph-fullscreen .graph-bottom-btn:nth-of-type(4) {
    display: none;
  }

  #hero.hero-graph-fullscreen .graph-zoom-counter {
    padding: 0 .4rem;
    font-size: .58rem;
  }

  #hero.hero-graph-fullscreen .graph-strip-caption--speed {
    display: none;
  }
}

/* ── REGISTRY STATS — 2×2 grid on mobile ── */
@media(max-width:700px) {
  .registry-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 12px
  }

  .rs-divider {
    display: none
  }

  .rs-stat {
    padding: .9rem .5rem;
    position: relative
  }

  .rs-stat:nth-child(1) {
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border)
  }

  .rs-stat:nth-child(3) {
    border-right: 1px solid var(--border)
  }

  .rs-stat:nth-child(5) {
    border-bottom: 1px solid var(--border)
  }

  .rs-num {
    font-size: 1.5rem
  }

  .rs-label {
    font-size: .67rem
  }
}

/* ── GRAPH MODAL — mobile desktop hint (Stage 5: token-bound).
     Built on the plaque vocabulary so it reads as one of "us". The
     .plaque--callout selector is local to this file (plaque.css
     doesn't ship a callout variant yet); when one lands it can
     replace the rules below without touching the markup. */
.graph-mobile-hint {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 20;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .75rem;
  background: rgba(3, 7, 18, .92);
  backdrop-filter: blur(6px);
  text-align: center;
  padding: 2rem;
}

.graph-mobile-hint.plaque--callout {
  /* Override .plaque base to keep the full-overlay behaviour. */
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.graph-mobile-hint-icon {
  color: var(--tier-basic);
  line-height: 1;
  filter: drop-shadow(0 0 12px rgba(var(--tier-basic-rgb), .35));
}

.graph-mobile-hint-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  font-family: var(--font-body);
}

.graph-mobile-hint-sub {
  font-size: .84rem;
  color: var(--muted);
  line-height: 1.55;
  max-width: 260px;
  font-family: var(--font-body);
}

.graph-mobile-hint-dismiss {
  margin-top: .4rem;
  padding: .45rem .9rem;
  border: 1px solid rgba(var(--tier-basic-rgb), .45);
  border-radius: 999px;
  background: transparent;
  color: var(--tier-basic);
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-body);
}

.graph-mobile-hint-dismiss:hover {
  background: rgba(var(--tier-basic-rgb), .1)
}

@media(max-width:700px) {
  .graph-mobile-hint {
    display: flex
  }
}

@media (max-width:700px) {

  html,
  body {
    overflow-x: clip
  }

  nav {
    padding: .7rem 1rem;
    flex-wrap: nowrap;
    justify-content: space-between;
    row-gap: .4rem;
    column-gap: .65rem;
    align-items: center;
    background: #030712;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav-logo {
    font-size: 1rem;
    line-height: 1.2;
    white-space: nowrap
  }

  nav ul {
    flex-wrap: wrap;
    gap: .45rem .9rem;
    font-size: .82rem;
    width: 100%;
    justify-content: flex-start;
  }

  #hero {
    min-height: 100svh;
    padding: 5.25rem 1rem 2.25rem
  }

  #canvas3d {
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden
  }

  .hero-sub {
    font-size: 1rem
  }

  .scroll-hint {
    display: none
  }

  section {
    padding: 3.8rem 1rem
  }

  .os-tab,
  .ns-tab,
  .ns-view-btn,
  .copy-btn,
  .se-copy-btn {
    background: #0f172a;
    box-shadow: none;
    filter: none;
    -webkit-filter: none;
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  .pre-wrap,
  pre {
    background: #0f172a;
    filter: none;
    -webkit-filter: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .se-topbar {
    background: #030712;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .85rem 1rem;
  }

  .se-topbar-actions {
    flex-wrap: wrap;
    gap: .4rem
  }

  .skill-explorer {
    top: 52px;
    background: #030712;
  }

  .tree-dialog,
  .graph-dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100svh;
    max-height: 100svh;
    border-radius: 0;
    border-left: none;
    border-right: none;
    animation: none;
    box-shadow: 0 0 0 1px rgba(56, 189, 248, .2);
  }

  .tree-dialog::backdrop,
  .graph-dialog::backdrop {
    backdrop-filter: none
  }

  .tree-dialog-header,
  .graph-dialog-header {
    padding: .85rem .9rem
  }

  .tree-dialog-body {
    padding: .5rem .7rem 1rem
  }

  .tree-dialog-body pre {
    font-size: 0.65rem;
    /* Stage 7: unified to 1.5 across all breakpoints for consistent
         monospace tree readability (the 1.3 from Stage 5 was legacy). */
    line-height: 1.5;
    letter-spacing: -0.01em;
  }

  .tree-sep {
    letter-spacing: -0.2em;
    opacity: 0.5;
  }

  .tree-ult-line,
  .tree-extra-line,
  .tree-basic-line,
  .tree-unique-line {
    display: block;
    white-space: nowrap;
  }

  /* Attempt 4-column layout for pure skills if they have the class */
  .tree-pure-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
  }

  .tree-pure-line {
    display: inline-block;
    width: 50%;
    /* 2 columns on small mobile */
    overflow: hidden;
    text-overflow: ellipsis;
  }

  @media(min-width:480px) {
    .tree-pure-line {
      width: 33.33%;
    }

    /* 3 columns at tablet-narrow+ */
  }

  .graph-dialog-header {
    flex-direction: column
  }

  .graph-dialog-actions {
    justify-content: flex-start
  }

  .graph-legend {
    top: auto;
    bottom: 2.8rem;
    right: .5rem;
    transform: none;
    padding: .4rem .5rem;
    font-size: .65rem
  }

  .graph-redpill {
    bottom: 14rem;
  }
}

/* -- NAMED SKILLS -- */
#named {
  min-height: 100vh;
  padding-top: 4rem;
  scroll-margin-top: 5rem;
  max-width: none;
}

.ns-controls {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  margin-bottom: 1.6rem;
}

/* ── Sticky/floating explorer rail (used on the standalone /named/ page).
   The rail pins below the top nav while the grid scrolls; backdrop blur
   keeps the strip translucent so it reads as floating, not opaque. */
.ns-controls--sticky {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(3, 7, 18, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: .9rem 1rem;
  margin: 0 -1rem 1.6rem;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 16px -8px rgba(0, 0, 0, .55);
}
@media (max-width: 700px) {
  .ns-controls--sticky {
    padding: .7rem .6rem;
    margin: 0 -.6rem 1.2rem;
  }
}

.ns-filter-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}

.ns-level-tabs {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  flex: 1
}

.ns-tab {
  padding: .35rem .85rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  cursor: pointer;
  font-family: var(--font-body);
  background-size: 200% 100%;
  background-position: 0% 0%;
  transition: color .2s, border-color .2s, background-position .45s ease, background-color .2s;
}

.ns-tab:hover {
  color: var(--text);
  border-color: rgba(148, 163, 184, .4)
}

/* Stage 2 — the level filter tab wraps a .rank-badge chip so it inherits
     the rank-badge visual identity. The tab itself only adds the affordance
     underline / active state; colour comes from the embedded chip.
     See window.rankBadge(level, { variant: 'chip' }) in docs/js/rank-badge.js. */
.ns-tab .rank-badge {
  margin: 0;
}

.ns-tab .rank-badge__chip {
  pointer-events: none;
}

.ns-tab.active {
  border-color: rgba(148, 163, 184, .5);
  background: rgba(255, 255, 255, .03);
}

.ns-tab.active[data-level="all"] {
  color: var(--basic);
  background: rgba(56, 189, 248, .1);
  border-color: rgba(56, 189, 248, .35)
}

.ns-tab:disabled {
  opacity: .3;
  cursor: not-allowed;
  background-image: none
}

.ns-tab:disabled:hover {
  color: var(--muted);
  border-color: var(--border);
  background-position: 0% 0%
}

.ns-view-btns {
  display: flex;
  gap: .3rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px;
}

.ns-view-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  padding: .3rem .65rem;
  min-height: 44px;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  font-size: .78rem;
  transition: background .15s, color .15s;
  display: flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--font-body);
}

.ns-view-btn:hover {
  color: var(--text)
}

.ns-view-btn.active {
  background: var(--surface);
  color: var(--basic)
}

/* Stage 4 — view grid containers. The per-card glow / data-level / data-type
     visual rules moved to .plaque[data-level][data-type] in plaque.css so a
     single source of truth drives Tile, List, Tree, and any future view mode.
     What remains here is layout-only (gaps, columns, scroll). */
.ns-grid-tile {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.ns-grid-list {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

/* shared card bits */
.ns-loading,
.ns-empty {
  text-align: center;
  color: var(--muted);
  font-size: .9rem;
  padding: 3rem 1.5rem;
  border: 1px dashed var(--border);
  border-radius: 14px;
}

/* Stage 2 — .ns-level-badge is deprecated; new emissions use .rank-badge
     via window.rankBadge(level, { variant: 'chip' }). The shim below keeps
     any stray legacy markup from collapsing visually; remove in Stage 5. */
.ns-level-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  padding: .22rem .62rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  white-space: nowrap;
  letter-spacing: .04em;
  color: var(--muted);
  background: rgba(255, 255, 255, .02)
}

.ns-origin {
  font-family: var(--font-mono);
  flex-shrink: 0;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .08em;
  padding: .16rem .48rem;
  border-radius: 999px;
  background: rgba(245, 158, 11, .12);
  color: var(--ultimate);
  border: 1px solid rgba(245, 158, 11, .3);
}

.ns-chip {
  font-size: .74rem;
  font-weight: 600;
  padding: .2rem .58rem;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap
}

.ns-chip-prereq {
  color: var(--tier-basic);
  background: rgba(56, 189, 248, .08);
  border-color: rgba(56, 189, 248, .25)
}

.ns-chip-deriv {
  color: var(--tier-extra);
  background: rgba(192, 132, 252, .08);
  border-color: rgba(192, 132, 252, .25)
}

.ns-chip-variant {
  color: var(--tier-ultimate);
  background: rgba(245, 158, 11, .08);
  border-color: rgba(245, 158, 11, .25)
}

.ns-chip-ref {
  color: var(--rank-2);
  background: rgba(99, 202, 183, .08);
  border-color: rgba(99, 202, 183, .25)
}

.ns-tag {
  font-size: .72rem;
  padding: .18rem .52rem;
  border-radius: 999px;
  background: rgba(100, 116, 139, .1);
  color: var(--muted);
  border: 1px solid var(--border)
}

/* ── named h2 red ── */
#named h2 {
  color: #ef4444;
}

/* ── search & sort controls ── */
.ns-search {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .4rem .9rem;
  color: var(--honor-red);
  font-size: .83rem;
  font-family: var(--font-body);
  min-height: 44px;
  outline: none;
  transition: border-color .2s;
  box-sizing: border-box;
  font-weight: 600;
}

.ns-search::placeholder {
  color: var(--muted);
}

.ns-search:focus {
  border-color: rgba(56, 189, 248, .5);
}

/* Stage 4 — sort wrap pairs the native <select> with a sprite icon since
     SVG cannot live inside <option>. The icon labels the entire control. */
.ns-sort-wrap {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .1rem .7rem;
  color: var(--muted);
  min-height: 44px;
  transition: border-color .2s, color .15s;
}

.ns-sort-wrap:hover,
.ns-sort-wrap:focus-within {
  border-color: rgba(var(--tier-basic-rgb), .4);
  color: var(--text);
}

.ns-sort-icon {
  color: var(--muted);
  flex-shrink: 0;
}

.ns-sort-wrap:hover .ns-sort-icon,
.ns-sort-wrap:focus-within .ns-sort-icon {
  color: var(--text);
}

.ns-sort-sel {
  background: transparent;
  border: none;
  outline: none;
  color: inherit;
  font-size: .78rem;
  font-family: var(--font-body);
  padding: .35rem 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  min-height: 0;
}

/* Stage 4 — type-tab glyphs read tier colour from the canonical tokens
     so adding a new tier in registry/gaia.json.meta.typeColors propagates
     without an HTML edit. Acceptance: no inline tier hex in index.html. */
.tier-glyph {
  font-weight: 800;
  display: inline-block;
}

.tier-glyph[data-type="basic"] {
  color: var(--tier-basic);
}

.tier-glyph[data-type="extra"] {
  color: var(--tier-extra);
}

.tier-glyph[data-type="unique"] {
  color: var(--tier-unique);
}

.tier-glyph[data-type="ultimate"] {
  color: var(--tier-ultimate);
}

/* ── terminal install row (inside cards) ── */
.ns-install-row {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: .38rem .7rem;
  margin-top: .55rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--basic);
  overflow: hidden;
  flex-shrink: 0;
}

.ns-install-prompt {
  color: var(--muted);
  flex-shrink: 0;
}

.ns-install-cmd-txt {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Foundation icon-state spec alignment for .ns-install-copy */
.ns-install-copy {
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: color .15s, filter .15s;
}

.ns-install-copy:hover {
  color: var(--tier-basic);
  filter: drop-shadow(0 0 8px rgba(var(--tier-basic-rgb), .5));
}

.ns-install-copy:active {
  color: var(--apex-gold);
  filter: none;
}

.ns-install-copy:focus-visible {
  outline: 2px solid var(--tier-extra);
  outline-offset: 2px;
}

.ns-install-copy[disabled] {
  color: var(--muted);
  opacity: .35;
  cursor: not-allowed;
  filter: none;
}

/* Stage 4 — Tree view layout. Per-card chrome is owned by plaque.css's
     .plaque--mini block; per-tier/per-rank glow is on .plaque[data-type][data-level]
     so the same skill in Tile / List / Tree renders with the same colour weight. */
.ns-grid-flow {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.ns-none {
  color: var(--muted);
  font-size: .78rem;
  font-style: italic
}

.ns-links {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .9rem
}

/* ── GROUP LAYOUT ── */
.ns-group-header {
  grid-column: 1/-1;
  width: 100%;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 0 .35rem;
  margin-top: .6rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-top: 1px solid var(--border);
  color: var(--muted);
  /* Clears the fixed nav when the global AlphaRail jumps to a group. */
  scroll-margin-top: 5rem;
}

/* Alpha-mode (Name / Contributor sort) buckets show a single A-Z glyph. */
.ns-group-az-glyph {
  font-size: 1rem;
  color: var(--tier-basic);
}

/* Section scroll targets for the global AlphaRail clear the fixed nav. */
#paths, #ultimates, #hall-of-heroes, #ascension, #named {
  scroll-margin-top: 5rem;
}

.ns-group-header:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.ns-group-glyph {
  font-size: 1rem;
}

/* grab-to-scroll cursor on grid area. The explorer no longer scrolls
   internally — its content joins the global page scroll so the page-wide
   AlphaRail can track it. Flow view keeps horizontal scroll for wide DAGs. */
#nsGrid {
  cursor: grab;
  user-select: none;
  padding-right: 4px;
}
#nsGrid.ns-grid-flow {
  overflow-x: auto;
  overflow-y: visible;
}

#named.ns-grabbing,
#named.ns-grabbing * {
  cursor: grabbing !important;
}

.ns-link-btn {
  font-size: .78rem;
  font-weight: 600;
  padding: .3rem .78rem;
  border-radius: 8px;
  background: rgba(56, 189, 248, .07);
  color: var(--basic);
  border: 1px solid rgba(56, 189, 248, .22);
  text-decoration: none;
  transition: background .15s, border-color .15s;
}

.ns-link-btn:hover {
  background: rgba(56, 189, 248, .16);
  border-color: rgba(56, 189, 248, .45)
}

/* Stage 4 — DAG / Tree view layout.
     Card chrome and per-tier glow live on .plaque--mini (plaque.css). What
     remains here is purely layout + the SVG edge layer + arrow stroke.
     Stage 5: per-rank --rank-N-edge tokens are now emitted by
     scripts/generateCssTokens.py (a translucent stroke variant of each
     rank hue). The DAG renderer adds data-rank="N" on each arrow
     element keyed to the dependent's rank; the selectors below resolve
     the stroke colour from the rank token, falling back to --muted for
     unranked or 0★ edges. */
.ns-dag-container {
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  padding: 2rem 1rem
}

.ns-dag-rank {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  margin-bottom: 3.5rem;
  position: relative;
  z-index: 1;
  flex-wrap: wrap
}

/* .ns-dag-card / .ns-dag-ghost layout-only hooks. The .plaque--mini
     base owns the visual chrome and per-tier glow. */
.ns-dag-card {
  min-width: 110px;
  max-width: 170px;
  text-align: center;
}

.ns-dag-ghost {
  opacity: .55;
}

.ns-dag-svg {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
  color: var(--muted)
}

/* Arrow stroke base — defaults to --muted; per-rank overrides below.
     Inline style="stroke: var(--rank-N-edge)" from the DAG renderer
     wins by specificity if the renderer supplies one. */
.ns-dag-arrow {
  stroke: var(--muted);
  stroke-width: 1.5;
  fill: none;
  marker-end: url(#ns-arrowhead)
}

.ns-dag-arrow[data-rank="0"] {
  stroke: var(--rank-0-edge, var(--muted))
}

.ns-dag-arrow[data-rank="1"] {
  stroke: var(--rank-1-edge, var(--muted))
}

.ns-dag-arrow[data-rank="2"] {
  stroke: var(--rank-2-edge, var(--muted))
}

.ns-dag-arrow[data-rank="3"] {
  stroke: var(--rank-3-edge, var(--muted))
}

.ns-dag-arrow[data-rank="4"] {
  stroke: var(--rank-4-edge, var(--muted))
}

.ns-dag-arrow[data-rank="5"] {
  stroke: var(--rank-5-edge, var(--muted))
}

.ns-dag-arrow[data-rank="6"] {
  stroke: var(--rank-6-edge, var(--muted))
}

/* SVG arrowhead uses currentColor; the .ns-dag-svg color above drives it. */
#ns-arrowhead polygon {
  fill: currentColor;
}

/* ── flow-node ghost + stacked cards + close button ── */
.flow-node-ghost {
  opacity: .5;
  border-style: dashed
}

.fn-contrib {
  color: #ef4444 !important;
  font-weight: 700
}

.se-close-x {
  margin-left: auto;
  font-size: 1.2rem;
  font-weight: 700;
  padding: .3rem .6rem;
  border-radius: 6px
}

.se-stack-deck {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  min-width: 150px
}

.se-stack-card {
  position: absolute;
  padding: .6rem .9rem;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  text-align: center;
  transition: transform .3s, z-index .3s, box-shadow .3s;
  min-width: 120px;
  cursor: pointer;
}

.se-stack-card:hover {
  transform: rotate(0deg) !important;
  z-index: 100 !important;
  box-shadow: 0 4px 20px rgba(56, 189, 248, .3)
}

.se-stack-current {
  transform: rotate(0deg) !important;
  border-color: rgba(56, 189, 248, .5);
  box-shadow: 0 0 12px rgba(56, 189, 248, .2)
}

.usp-details-link {
  margin-top: .8rem;
  text-align: center
}

.usp-details-link a {
  color: var(--basic);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 600
}

.usp-details-link a:hover {
  text-decoration: underline
}

/* ── hero install terminal ── */
.se-hero-card {
  position: relative
}

.se-github-link {
  position: absolute;
  top: .6rem;
  right: .6rem;
  color: var(--basic);
  font-size: .75rem;
  font-weight: 600;
  text-decoration: none;
  opacity: .7;
  transition: opacity .2s
}

.se-github-link:hover {
  opacity: 1;
  text-decoration: underline
}

.se-hero-install {
  margin-top: .8rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  background: rgba(0, 0, 0, .4);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .45rem .7rem;
  font-family: var(--font-mono);
  font-size: .78rem
}

.se-hero-prompt {
  color: var(--muted);
  user-select: none
}

.se-hero-cmd {
  color: var(--basic);
  flex: 1
}

/* Foundation icon-state spec alignment for .se-hero-copy (text+border copy button) */
.se-hero-copy {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 4px;
  padding: .2rem .5rem;
  font-size: .7rem;
  cursor: pointer;
  font-family: var(--font-body);
  transition: border-color .2s, color .2s, filter .2s
}

.se-hero-copy:hover {
  border-color: var(--tier-basic);
  color: var(--tier-basic);
  filter: drop-shadow(0 0 6px rgba(var(--tier-basic-rgb), .4))
}

.se-hero-copy:active {
  color: var(--apex-gold);
  border-color: var(--apex-gold);
  filter: none
}

.se-hero-copy:focus-visible {
  outline: 2px solid var(--tier-extra);
  outline-offset: 2px
}

/* ── fusion + lock + GitHub link on cards ── */
.se-fusion-label {
  color: var(--muted);
  font-size: .8rem;
  margin-top: 1rem;
  text-align: center;
  font-family: var(--font-body);
}

/* Upgrade-path action buttons (Show Fusion / Recenter) live on the
     right side of the .se-flow-h header. */
.se-flow-actions {
  margin-left: auto;
  display: flex;
  gap: .35rem;
}

.se-flow-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .3rem .6rem;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}

.se-flow-btn:hover {
  border-color: var(--text);
  color: var(--text);
  background: rgba(255, 255, 255, .03);
}

.se-flow-btn.active {
  border-color: var(--tier-extra, #c084fc);
  color: var(--tier-extra, #c084fc);
  background: rgba(192, 132, 252, .08);
}

.se-flow-btn svg {
  width: 12px;
  height: 12px;
}

/* Slash labels above dots are click-through by default; in the
     upgrade-path view they need to be clickable for navigation
     (named → openSkillExplorer, ghost → openUnnamedPopup). */
#se-upgrade .dag-node-label {
  pointer-events: auto;
  cursor: pointer;
}

#se-upgrade .dag-node-label:hover {
  border-color: var(--text);
}

/* Lone unique zone — current skill stands alone inside the void. */
.se-flowchart-rows.unique-alone {
  min-height: 200px;
  align-items: center;
  justify-content: center;
}

.se-flowchart-rows.unique-alone .se-flowchart-row.void-zone {
  min-width: 280px;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Subtle marker for the current/main node so the user knows which
     "you are here" without needing the Recenter button. */
#se-upgrade .git-node--main .git-commit-dot {
  transform: scale(1.25);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .08), 0 0 14px var(--dot-color, var(--muted));
}

#se-upgrade .git-node--main .dag-node-label {
  opacity: 1;
  border-color: var(--text);
}

.fn-lock {
  font-size: .7rem;
  margin-right: .3rem;
  opacity: .6
}

.flow-node-locked {
  border-color: rgba(100, 116, 139, .3)
}

/* GitHub link — right-edge slot. Position is owned by the .plaque__gh-link
     rule (plaque.css). The .ns-gh-link alias remains so legacy emitters
     (page-ia.js, skill-explorer.js) get the same right-edge behaviour. */
.ns-gh-link {
  color: var(--basic);
  font-size: .68rem;
  font-weight: 600;
  text-decoration: none;
  opacity: .7;
  transition: opacity .2s
}

.ns-gh-link:hover {
  opacity: 1;
  text-decoration: underline
}

/* ── FOOTER ── */
footer a {
  color: var(--basic);
  text-decoration: none
}

/* ── SECTION DIVIDERS (redesigned) ── */
.section-divider {
  height: 1px;
  margin: 0 auto;
  width: 55%;
  background: linear-gradient(90deg, transparent, var(--border) 30%, var(--border) 70%, transparent);
}

.section-divider--glow {
  height: 2px;
  width: 70%;
  background: linear-gradient(90deg, transparent, rgba(239, 68, 68, .45) 30%, rgba(239, 68, 68, .45) 70%, transparent);
  box-shadow: 0 0 12px rgba(239, 68, 68, .25), 0 0 30px rgba(239, 68, 68, .08);
}

.section-divider--brand {
  height: 2px;
  width: 50%;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, .4) 20%, rgba(192, 132, 252, .4) 50%, rgba(245, 158, 11, .4) 80%, transparent);
  box-shadow: 0 0 10px rgba(56, 189, 248, .12);
}

/* ── SECTION BACKGROUND PROGRESSION ── */
[data-section] {
  position: relative
}

[data-section="what"] {
  background: radial-gradient(ellipse at 50% 0%, rgba(56, 189, 248, .025) 0%, transparent 55%);
}

[data-section="ranks"] {
  background: radial-gradient(ellipse at 50% 20%, rgba(167, 139, 250, .02) 0%, transparent 55%);
}

[data-section="start"] {
  background: transparent
}

[data-section="workflow"] {
  background: radial-gradient(ellipse at 50% 30%, rgba(245, 158, 11, .018) 0%, transparent 50%);
}

[data-section="explorer"] {
  max-width: none;
  background: linear-gradient(180deg, #050a14 0%, #040810 100%);
  border-top: 1px solid rgba(239, 68, 68, .2);
  padding: 4rem 2rem 5rem;
  margin: 0;
}

[data-section="explorer"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: radial-gradient(ellipse at 50% 0%, rgba(239, 68, 68, .04) 0%, transparent 70%);
  pointer-events: none;
}

[data-section="explorer"]>* {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

[data-section="glossary"] {
  background: transparent
}

/* ── SECTION SPACING VARIATION ── */
[data-section="what"],
[data-section="ranks"] {
  padding: 5rem 1.5rem
}

[data-section="start"],
[data-section="workflow"] {
  padding: 6rem 1.5rem 5rem
}

[data-section="glossary"] {
  padding: 4rem 1.5rem 5rem
}

/* ── HEADING COLOR PROGRESSION ── */
/* ── FOOTER ENHANCEMENT ── */
footer {
  text-align: center;
  padding: 4rem 1.5rem;
  border-top: none;
  color: var(--muted);
  font-size: .85rem;
  background: linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, .4) 100%);
  position: relative;
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 45%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, .3) 20%, rgba(192, 132, 252, .3) 50%, rgba(245, 158, 11, .3) 80%, transparent);
}

/* ─────────────────────────────────────────────────────────────
   FOOTER v2 — multi-column ledger footer
   Add class="footer-v2" to every <footer> element to activate.
   ───────────────────────────────────────────────────────────── */

footer.footer-v2 {
  display: block;
  text-align: left;
  padding: 0;
  border-top: none;
  color: var(--muted);
  font-size: .85rem;
  background: linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, .55) 100%);
  position: relative;
  width: 100%;
}

footer.footer-v2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, .3) 20%, rgba(192, 132, 252, .3) 50%, rgba(245, 158, 11, .3) 80%, transparent);
}

.footer-v2 .footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 2.5rem) clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: minmax(170px, 230px) 1fr;
  gap: 3rem 4rem;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
}

/* Brand column */
.footer-v2 .footer-brand-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-v2 .footer-brand-mark {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.footer-v2 .footer-seal {
  width: 26px;
  height: 26px;
}

.footer-v2 .footer-wordmark {
  font-size: 1.15rem;
}

.footer-v2 .footer-tagline {
  font-family: var(--font-body);
  font-size: .8rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

/* Link columns grid */
.footer-v2 .footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  align-items: start;
  width: 100%;
}

.footer-v2 .footer-col {
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.footer-v2 .footer-col-heading {
  font-family: var(--font-display);
  font-style: italic;
  font-size: .875rem;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: .01em;
  line-height: 1;
}

.footer-v2 .footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.footer-v2 .footer-col ul li a,
.footer-v2 .footer-col ul li button.footer-link-btn {
  font-family: var(--font-body);
  font-size: .82rem;
  color: var(--muted);
  text-decoration: none;
  transition: color .18s;
  display: inline;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  font: inherit;
}

.footer-v2 .footer-col ul li a:hover,
.footer-v2 .footer-col ul li button.footer-link-btn:hover {
  color: var(--text);
}

/* ── Footer link motion: each column gets a tier hue, links adopt it
     on hover via currentColor — underline wipe + glow + 1px shift.
     Honor handle stays Honor Red end-to-end. ─────────────────────── */
.footer-v2 .footer-col              { --col-hue: var(--tier-basic, #38bdf8); }
.footer-v2 .footer-col:nth-child(1) { --col-hue: var(--tier-basic, #38bdf8); }
.footer-v2 .footer-col:nth-child(2) { --col-hue: var(--tier-extra, #c084fc); }
.footer-v2 .footer-col:nth-child(3) { --col-hue: var(--tier-basic, #38bdf8); }
.footer-v2 .footer-col:nth-child(4) { --col-hue: var(--apex-gold, #fbbf24); }
.footer-v2 .footer-col:nth-child(5) { --col-hue: var(--honor-red, #ef4444); }

.footer-v2 .footer-col ul li a,
.footer-v2 .footer-col ul li button.footer-link-btn {
  position: relative;
  display: inline-block;
  letter-spacing: .005em;
  transition:
    color .26s cubic-bezier(0.16, 1, 0.3, 1),
    transform .32s cubic-bezier(0.16, 1, 0.3, 1),
    letter-spacing .32s cubic-bezier(0.16, 1, 0.3, 1),
    text-shadow .26s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-v2 .footer-col ul li a::after,
.footer-v2 .footer-col ul li button.footer-link-btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1.5px;
  background: currentColor;
  opacity: .9;
  transform: scaleX(0);
  transform-origin: left center;
  transition:
    transform .42s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow .32s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  border-radius: 1px;
}

.footer-v2 .footer-col ul li a:hover,
.footer-v2 .footer-col ul li button.footer-link-btn:hover,
.footer-v2 .footer-col ul li a:focus-visible,
.footer-v2 .footer-col ul li button.footer-link-btn:focus-visible {
  color: var(--col-hue);
  letter-spacing: .03em;
  transform: translateX(2px);
  text-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
}

.footer-v2 .footer-col ul li a:hover::after,
.footer-v2 .footer-col ul li button.footer-link-btn:hover::after,
.footer-v2 .footer-col ul li a:focus-visible::after,
.footer-v2 .footer-col ul li button.footer-link-btn:focus-visible::after {
  transform: scaleX(1);
  box-shadow: 0 0 8px currentColor, 0 0 18px currentColor;
}

/* Column heading also breathes the hue when the column is hovered. */
.footer-v2 .footer-col-heading {
  transition: color .3s cubic-bezier(0.16, 1, 0.3, 1),
              text-shadow .3s cubic-bezier(0.16, 1, 0.3, 1);
}
.footer-v2 .footer-col:hover .footer-col-heading,
.footer-v2 .footer-col:focus-within .footer-col-heading {
  color: var(--col-hue);
  text-shadow: 0 0 12px currentColor;
}

/* Honor attribution — contributor handle only */
.footer-v2 .footer-link-honor {
  color: var(--honor-red) !important;
}

.footer-v2 .footer-link-honor:hover {
  color: var(--text) !important;
}

/* Honor handle keeps red end-to-end, but still gets the glow treatment
   from currentColor — the column-hue rule above shouldn't override it. */
.footer-v2 .footer-col ul li a.footer-link-honor:hover,
.footer-v2 .footer-col ul li a.footer-link-honor:focus-visible {
  color: var(--honor-red) !important;
  text-shadow: 0 0 10px var(--honor-red), 0 0 22px var(--honor-red);
}

/* Docs page-footer (en/*.html): same color motion, scaled down. */
.page-footer a {
  position: relative;
  display: inline-block;
  letter-spacing: .005em;
  transition:
    color .26s cubic-bezier(0.16, 1, 0.3, 1),
    letter-spacing .32s cubic-bezier(0.16, 1, 0.3, 1),
    text-shadow .26s cubic-bezier(0.16, 1, 0.3, 1);
}
.page-footer a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1.5px;
  background: currentColor;
  opacity: .9;
  transform: scaleX(0);
  transform-origin: left center;
  transition:
    transform .42s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow .32s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  border-radius: 1px;
}
.page-footer a:hover,
.page-footer a:focus-visible {
  color: var(--tier-basic, #38bdf8) !important;
  letter-spacing: .03em;
  text-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
}
.page-footer a:hover::after,
.page-footer a:focus-visible::after {
  transform: scaleX(1);
  box-shadow: 0 0 8px currentColor, 0 0 18px currentColor;
}

/* External link indicator */
.footer-v2 .footer-ext::after {
  content: ' ↗';
  font-size: .75em;
  opacity: .6;
}

/* Bottom strip */
.footer-v2 .footer-bottom {
  border-top: 1px solid var(--border);
  padding: 1.1rem clamp(1.5rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--muted);
  flex-wrap: wrap;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

.footer-v2 .footer-bottom-sep {
  color: var(--border);
  user-select: none;
}

/* Responsive */
@media (max-width: 900px) {
  .footer-v2 .footer-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .footer-v2 .footer-cols {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem 2.5rem;
  }
}

@media (max-width: 520px) {
  .footer-v2 .footer-cols {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

/* ── DIVIDER (legacy) ── */
.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0
}

/* ── ANIMATE ON SCROLL ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .55s ease, transform .55s ease
}

.reveal.visible {
  opacity: 1;
  transform: none
}

/* ── REVEAL TIMING VARIATION ── */
[data-section="what"].reveal,
[data-section="glossary"].reveal {
  transition-duration: .45s
}

[data-section="start"].reveal,
[data-section="workflow"].reveal {
  transition-duration: .65s
}

[data-section="explorer"].reveal {
  transition-duration: .7s
}

/* ── SKILL EXPLORER OVERLAY ── */
:root {
  --glow-II: 0 0 8px var(--rank-2), 0 0 22px rgba(99, 202, 183, .35);
  --glow-III: 0 0 10px var(--rank-3), 0 0 26px rgba(167, 139, 250, .4);
  --glow-IV: 0 0 14px var(--rank-4), 0 0 32px rgba(232, 121, 249, .45);
  --glow-V: 0 0 18px var(--rank-5), 0 0 40px rgba(251, 191, 36, .5);
  --glow-VI: 0 0 20px var(--rank-6), 0 0 50px rgba(251, 191, 36, .6), 0 0 80px rgba(56, 189, 248, .3);
}

.skill-explorer {
  position: fixed;
  top: 58px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  background: var(--bg);
  overflow-y: auto;
  overflow-x: clip;
  transform: translateX(100%);
  transition: transform .34s cubic-bezier(.4, 0, .2, 1);
  visibility: hidden;
}

.skill-explorer.open {
  transform: translateX(0);
  visibility: visible;
}

.se-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 2rem;
  background: rgba(3, 7, 18, .88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.se-topbar-actions {
  margin-left: auto;
  display: flex;
  gap: .6rem;
}

.se-breadcrumb {
  font-family: var(--font-body);
  font-size: .85rem;
  color: #ef4444;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.se-btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: .38rem .9rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: .82rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: border-color .2s, color .2s;
  font-family: var(--font-body);
}

.se-btn-ghost:hover {
  border-color: var(--basic);
  color: var(--basic);
}

.se-btn-action {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: .38rem .9rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: .82rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: border-color .2s, color .2s;
  font-family: var(--font-body);
}

.se-btn-action:hover {
  border-color: var(--extra);
  color: var(--extra);
}

.se-body {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 2rem 5rem;
  overflow: visible;
}

.se-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.se-hero>* {
  min-width: 0;
}

@media(max-width:700px) {
  .se-hero {
    grid-template-columns: 1fr;
  }
}

.se-hero-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.8rem;
  transition: box-shadow .3s;
}

.se-hero-card[data-level="2★"] {
  box-shadow: var(--glow-II);
}

.se-hero-card[data-level="3★"] {
  box-shadow: var(--glow-III);
}

.se-hero-card[data-level="4★"] {
  box-shadow: var(--glow-IV);
}

.se-hero-card[data-level="5★"] {
  box-shadow: var(--glow-V);
  animation: se-pulse 2.4s ease-in-out infinite;
}

.se-hero-card[data-level="6★"] {
  animation: se-shimmer 3s linear infinite, se-pulse 2s ease-in-out infinite;
}

.se-hero-card[data-type="unique"] {
  border-color: rgba(124, 58, 237, .4);
  box-shadow: 0 0 20px rgba(124, 58, 237, .25), inset 0 0 30px rgba(0, 0, 0, .4)
}

@keyframes se-pulse {

  0%,
  100% {
    box-shadow: var(--glow-V);
  }

  50% {
    box-shadow: 0 0 28px var(--rank-5), 0 0 60px rgba(251, 191, 36, .65);
  }
}

@keyframes se-shimmer {
  0% {
    border-color: rgba(56, 189, 248, .6);
  }

  25% {
    border-color: rgba(192, 132, 252, .6);
  }

  50% {
    border-color: rgba(245, 158, 11, .6);
  }

  75% {
    border-color: rgba(232, 121, 249, .6);
  }

  100% {
    border-color: rgba(56, 189, 248, .6);
  }
}

/* .se-node-orb — kept intact for back-compat. Type-modifier
     color rules also live (merged) in plaque.css under
     .plaque-orb--{type}, .se-node-orb--{type} so the two
     selectors paint identically. TODO(phase-8d): remove these
     duplicates after JS migrates to .plaque-orb. */
.se-node-orb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  margin-bottom: .7rem;
  position: relative;
}

.se-node-orb--basic {
  background: radial-gradient(circle at 35% 35%, #7dd3fc, var(--tier-basic) 60%, #0284c7);
  box-shadow: 0 0 12px rgba(56, 189, 248, .4)
}

.se-node-orb--extra {
  background: radial-gradient(circle at 35% 35%, #e9d5ff, var(--tier-extra) 60%, #7c3aed);
  box-shadow: 0 0 12px rgba(192, 132, 252, .4)
}

.se-node-orb--ultimate {
  background: radial-gradient(circle at 35% 35%, #fef3c7, var(--tier-ultimate) 60%, #d97706);
  box-shadow: 0 0 12px rgba(245, 158, 11, .4)
}

.se-node-orb--unique {
  background: radial-gradient(circle at 50% 50%, #000 55%, var(--tier-unique) 80%, #5b21b6);
  box-shadow: 0 0 14px rgba(124, 58, 237, .5), inset 0 0 6px rgba(124, 58, 237, .3)
}

.se-node-orb--vi {
  background: radial-gradient(circle at 35% 35%, #fff 40%, #fef3c7 70%, var(--tier-ultimate)) !important;
  box-shadow: 0 0 18px rgba(255, 255, 255, .6), 0 0 40px rgba(245, 158, 11, .35) !important
}

.se-skill-name {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 800;
  margin-bottom: .3rem;
}

.se-contrib {
  font-size: .88rem;
  color: #ef4444;
  margin-bottom: 1rem;
}

.se-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: 1.2rem;
}

/* Stage 2 — .se-badge level chip is deprecated for rank badges. Hero now
     emits a .rank-badge[data-variant="chip"] for the level. The .se-badge
     class survives only for the type-tag and origin-star chips. */
.se-badge {
  display: inline-block;
  padding: .22rem .7rem;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 600;
  border: 1px solid var(--border);
  color: var(--muted);
  background: rgba(255, 255, 255, .02);
  font-family: var(--font-mono);
}

.se-desc-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.8rem;
}

.se-desc-panel h3 {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: .8rem;
}

.se-desc-text {
  line-height: 1.75;
  color: var(--text);
}

.se-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: 1rem;
}

.se-tag {
  background: rgba(56, 189, 248, .08);
  border: 1px solid rgba(56, 189, 248, .18);
  color: var(--basic);
  padding: .18rem .6rem;
  border-radius: 20px;
  font-size: .75rem;
}

.se-btn-icon {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  width: 32px;
  height: 32px;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s, color .2s;
  flex-shrink: 0;
}

.se-btn-icon:hover {
  border-color: var(--basic);
  color: var(--basic);
}

.se-btn-icon.copied {
  border-color: var(--basic);
  color: var(--basic);
}

/* sequential flow sections — no tabs */
.se-flow {
  padding: 0;
}

.se-flow-section {
  padding: 2.2rem 0;
  border-bottom: 1px solid var(--border);
}

.se-flow-section:last-child {
  border-bottom: none;
}

/* ── se-hero #se-upgrade compact overrides ── */
@media (min-width: 701px) {
  .se-hero #se-upgrade {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
    border-bottom: none;
  }

  .se-hero #se-upgrade .se-flowchart-wrap {
    min-height: 160px;
    padding: 0.5rem 0;
  }

  .se-hero #se-upgrade .se-flowchart-rows {
    gap: 20px;
  }

  .se-hero #se-upgrade .se-flowchart-row {
    gap: 12px;
  }

  .se-hero #se-upgrade .flow-node {
    padding: 0.4rem 0.6rem;
    min-width: 100px;
    max-width: 130px;
  }

  .se-hero #se-upgrade .flow-node .fn-name {
    font-size: 0.72rem;
    margin-bottom: 0;
  }

  .se-hero #se-upgrade .flow-node .rank-badge {
    margin-top: 0.15rem;
    margin-bottom: 0;
    transform: scale(0.9);
    transform-origin: top center;
  }

  .se-hero #se-upgrade .se-flow-h {
    margin-bottom: 0.8rem;
  }
}

.se-flow-h {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  margin-bottom: 1.4rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.se-flow-h svg {
  opacity: .7;
}

.se-install-block {
  background: rgba(0, 0, 0, .4);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .6rem .8rem;
  margin-bottom: .6rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}

.se-install-block.recommended {
  border-color: rgba(56, 189, 248, .35);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, .12);
}

.se-install-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  min-width: 90px;
  color: var(--muted);
}

.se-install-label span {
  display: block;
  font-size: .6rem;
  color: var(--basic);
  margin-top: .15rem;
}

.se-install-cmd {
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--text);
  flex: 1;
  word-break: break-all;
}

/* Foundation icon-state spec alignment for .se-copy-btn */
.se-copy-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  width: 32px;
  height: 32px;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color .2s, color .2s, filter .2s;
}

.se-copy-btn:hover {
  border-color: var(--tier-basic);
  color: var(--tier-basic);
  filter: drop-shadow(0 0 8px rgba(var(--tier-basic-rgb), .5));
}

.se-copy-btn:active {
  color: var(--apex-gold);
  border-color: var(--apex-gold);
  filter: none;
}

.se-copy-btn:focus-visible {
  outline: 2px solid var(--tier-extra);
  outline-offset: 2px;
}

.se-copy-btn[disabled] {
  color: var(--muted);
  opacity: .35;
  cursor: not-allowed;
  filter: none;
}

.se-copy-btn.copied {
  border-color: var(--apex-gold);
  color: var(--apex-gold);
  filter: none;
}

/* ── Custom install body (rendered from named skill ## Installation markdown) ── */
.se-install-custom {
  margin-top: .75rem;
  border-top: 1px solid var(--border);
  padding-top: .75rem;
}

/* Custom tabs for suite install */
.se-tabs-header {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.75rem;
  padding-bottom: 0.1rem;
  overflow-x: auto;
}

.se-tab-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.se-tab-btn:hover {
  color: var(--text);
}

.se-tab-btn.active {
  color: var(--tier-ultimate, #f59e0b);
  border-bottom-color: var(--tier-ultimate, #f59e0b);
  font-weight: 600;
}

.se-tab-panel {
  display: none;
}

.se-tab-panel.active {
  display: block;
  animation: se-fade-in 0.2s ease-out;
}

@keyframes se-fade-in {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}

.se-dropdown-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.6rem 0 0.4rem;
  flex-wrap: wrap;
}

.se-dropdown-label {
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 500;
}

.se-hosts-dropdown {
  background: var(--bg-card, #1e1e2e);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.25rem 1.5rem 0.25rem 0.5rem;
  font-size: 0.8rem;
  font-family: var(--font-display);
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.4rem center;
}

.se-hosts-dropdown:hover, .se-hosts-dropdown:focus {
  border-color: var(--tier-ultimate, #f59e0b);
}

.se-target-path {
  font-size: 0.78rem;
  margin-top: 0.4rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.se-mono-path {
  font-family: var(--font-mono);
  color: var(--tier-basic, #38bdf8);
  background: var(--bg-code, rgba(0,0,0,0.2));
  padding: 0.05rem 0.2rem;
  border-radius: 3px;
}


.se-install-guide-h {
  margin-bottom: .6rem;
}

.se-install-body {
  font-size: .88rem;
  color: var(--text);
  line-height: 1.6;
}

.se-install-body p {
  margin: .4rem 0;
}

.se-install-sub-h {
  font-family: var(--font-display);
  font-weight: 600;
  margin: .9rem 0 .35rem;
  color: var(--text);
}

h3.se-install-sub-h { font-size: .95rem; }
h4.se-install-sub-h { font-size: .85rem; }

.se-install-list {
  padding-left: 1.1rem;
  margin: .3rem 0;
}

.se-install-list li { margin: .2rem 0; }

.se-install-code {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-all;
  flex: 1;
  margin: 0;
  line-height: 1.5;
}

.se-install-code code {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

.se-install-block--code {
  align-items: flex-start;
  margin: .35rem 0;
}

.se-install-block--code .se-copy-btn {
  align-self: flex-start;
  flex-shrink: 0;
}

.se-docs-block {
  margin-bottom: 2rem;
}

.se-docs-block h4 {
  font-size: .88rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: .8rem;
}

.se-evidence-row {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding: .6rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .85rem;
}

.se-ev-class {
  font-family: var(--font-mono);
  font-weight: 700;
  min-width: 28px;
  color: var(--ultimate);
}

.se-ev-link {
  color: var(--basic);
  text-decoration: none;
  word-break: break-all;
}

.se-ev-link:hover {
  text-decoration: underline;
}

.se-ev-date {
  color: var(--muted);
  white-space: nowrap;
}

.se-known-agent {
  display: inline-block;
  background: rgba(192, 132, 252, .1);
  border: 1px solid rgba(192, 132, 252, .25);
  color: var(--tier-extra);
  padding: .22rem .65rem;
  border-radius: 20px;
  font-size: .78rem;
  margin: .2rem;
}

/* FLOWCHART */
.se-flowchart-wrap {
  position: relative;
  overflow: visible;
  min-height: 320px;
  padding: 1.5rem 1rem;
}

.se-flowchart-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.se-flowchart-rows {
  display: flex;
  flex-direction: column-reverse;
  gap: 48px;
  align-items: center;
}

.ns-dag-container.git-style {
  display: flex;
  flex-direction: column-reverse;
}

.se-flowchart-row {
  display: flex;
  gap: 28px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 100%;
}

.se-flowchart-row-label {
  text-align: center;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 6px;
  font-family: var(--font-mono);
}

.flow-node {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .8rem 1rem;
  min-width: 140px;
  max-width: 180px;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  text-align: center;
  position: relative;
}

.flow-node:hover {
  transform: translateY(-3px);
}

.flow-node.current {
  border-color: var(--basic);
  outline: 2px solid rgba(56, 189, 248, .3);
}

.flow-node[data-level="2★"] {
  box-shadow: var(--glow-II);
}

.flow-node[data-level="3★"] {
  box-shadow: var(--glow-III);
}

.flow-node[data-level="4★"] {
  box-shadow: var(--glow-IV);
}

.flow-node[data-level="5★"] {
  box-shadow: var(--glow-V);
  animation: flow-pulse-V 2.2s ease-in-out infinite;
}

.flow-node[data-level="6★"] {
  box-shadow: var(--glow-VI);
  animation: flow-shimmer-VI 3s linear infinite, flow-pulse-V 2s ease-in-out infinite;
}

@keyframes flow-pulse-V {

  0%,
  100% {
    box-shadow: var(--glow-V);
  }

  50% {
    box-shadow: 0 0 28px var(--rank-5), 0 0 55px rgba(251, 191, 36, .7);
  }
}

@keyframes flow-shimmer-VI {

  0%,
  100% {
    border-color: rgba(56, 189, 248, .7);
  }

  33% {
    border-color: rgba(192, 132, 252, .7);
  }

  66% {
    border-color: rgba(245, 158, 11, .7);
  }
}

/* Stage 2 — .fn-level is deprecated. Flow nodes now emit
     .rank-badge[data-variant="chip"] via window.rankBadge(level). The shim
     below is a safe stand-in for any legacy markup; remove in Stage 5. */
.fn-level {
  display: inline-block;
  font-size: .68rem;
  font-weight: 600;
  margin-bottom: .3rem;
  padding: .12rem .5rem;
  border-radius: 20px;
  color: var(--muted);
  background: rgba(255, 255, 255, .02);
  border: 1px solid var(--border);
}

/* Flow node chip nests a .rank-badge for the new path. */
.flow-node .rank-badge {
  margin-top: .3rem;
  margin-bottom: .2rem;
}

.fn-name {
  display: block;
  font-size: .88rem;
  font-weight: 700;
  margin-bottom: .2rem;
  font-family: var(--font-display);
  transition: color .2s;
}

/* Tier-based animations — only if Level 6 (Apex) to prioritize rank color for others */
.flow-node[data-type="ultimate"][data-level="6★"] .fn-name,
.se-stack-card[data-type="ultimate"][data-level="6★"] .fn-name {
  animation: tree-rainbow-glow 4s linear infinite;
}

.flow-node[data-type="extra"][data-level="6★"] .fn-name,
.se-stack-card[data-type="extra"][data-level="6★"] .fn-name {
  animation: tree-extra-glow 4s linear infinite;
}

/* Unique tier color — fallback if rank color not applied or for specific branding */
.flow-node[data-type="unique"] .fn-name,
.se-stack-card[data-type="unique"] .fn-name {
  color: var(--tier-unique);
  text-shadow: 0 0 12px rgba(124, 58, 237, 0.4);
}

/* Rank coloring for flowchart names — takes precedence over tier defaults */
.flow-node[data-level="0★"] .fn-name,
.se-stack-card[data-level="0★"] .fn-name {
  color: var(--rank-0);
}

.flow-node[data-level="1★"] .fn-name,
.se-stack-card[data-level="1★"] .fn-name {
  color: var(--rank-1);
}

.flow-node[data-level="2★"] .fn-name,
.se-stack-card[data-level="2★"] .fn-name {
  color: var(--rank-2);
}

.flow-node[data-level="3★"] .fn-name,
.se-stack-card[data-level="3★"] .fn-name {
  color: var(--rank-3);
}

.flow-node[data-level="4★"] .fn-name,
.se-stack-card[data-level="4★"] .fn-name {
  color: var(--rank-4);
}

.flow-node[data-level="5★"] .fn-name,
.se-stack-card[data-level="5★"] .fn-name {
  color: var(--rank-5);
}

.flow-node[data-level="6★"] .fn-name,
.se-stack-card[data-level="6★"] .fn-name {
  color: var(--rank-6);
}

.fn-contrib {
  display: block;
  font-size: .72rem;
  color: var(--muted);
  font-family: var(--font-body);
}

.fn-type {
  display: block;
  font-size: .7rem;
  color: var(--muted);
  margin-top: .25rem;
  font-family: var(--font-body);
}

/* TIMELINE */
.se-timeline {
  position: relative;
  padding-left: 28px;
}

.se-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--border) 0%, transparent 100%);
}

.se-tl-event {
  position: relative;
  margin-bottom: 1.2rem;
  display: flex;
  gap: .6rem;
  align-items: flex-start;
}

.se-tl-dot {
  position: absolute;
  left: -24px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--basic);
  border: 2px solid var(--bg);
  flex-shrink: 0;
}

.se-tl-dot[data-action="rank_up"]  { background: var(--apex-gold);  box-shadow: 0 0 6px rgba(var(--apex-gold-rgb),.35); }
.se-tl-dot[data-action="ascend"]   { background: #fff;             box-shadow: 0 0 8px #fff; }
.se-tl-dot[data-action="name"]     { background: var(--honor-red);  box-shadow: 0 0 6px rgba(var(--honor-red-rgb),.35); }
.se-tl-dot[data-action="fuse"]     { background: var(--extra);      box-shadow: 0 0 6px rgba(192,132,252,.35); }
.se-tl-dot[data-action="push"]     { background: var(--basic);      box-shadow: 0 0 5px rgba(56,189,248,.25); }
.se-tl-dot[data-action="evidence"] { background: var(--rank-3);     box-shadow: 0 0 5px rgba(167,139,250,.25); }
.se-tl-dot[data-action="demote"]   { background: var(--muted); }
.se-tl-dot[data-action="propose"]  { background: var(--ultimate);   box-shadow: 0 0 6px rgba(245,158,11,.35); }
.se-tl-dot[data-action="commit"]   { background: var(--muted); }

.se-tl-body {
  flex: 1;
  min-width: 0;
}

.se-tl-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .15rem;
}

.se-tl-action {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .12rem .4rem;
  border-radius: 3px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.07);
  color: var(--muted);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: .2rem;
}

.se-tl-action-icon {
  font-size: .55rem;
  opacity: .7;
}

.se-tl-action[data-action="rank_up"]  { color: var(--apex-gold);  border-color: rgba(var(--apex-gold-rgb),.2); background: rgba(var(--apex-gold-rgb),.05); }
.se-tl-action[data-action="ascend"]   { color: var(--apex-gold);  border-color: rgba(var(--apex-gold-rgb),.25); background: rgba(var(--apex-gold-rgb),.07); }
.se-tl-action[data-action="name"]     { color: var(--honor-red);  border-color: rgba(var(--honor-red-rgb),.2); background: rgba(var(--honor-red-rgb),.05); }
.se-tl-action[data-action="fuse"]     { color: var(--extra);      border-color: rgba(192,132,252,.2); background: rgba(192,132,252,.05); }
.se-tl-action[data-action="evidence"] { color: var(--rank-3);     border-color: rgba(167,139,250,.2); background: rgba(167,139,250,.05); }
.se-tl-action[data-action="push"]     { color: var(--basic);      border-color: rgba(56,189,248,.15); background: rgba(56,189,248,.04); }
.se-tl-action[data-action="propose"]  { color: var(--ultimate);   border-color: rgba(245,158,11,.2); background: rgba(245,158,11,.05); }
.se-tl-action[data-action="demote"]   { color: var(--muted);      border-color: rgba(100,116,139,.2); background: rgba(100,116,139,.05); }

.se-tl-date {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--muted);
  margin-left: auto;
  flex-shrink: 0;
}

.se-tl-msg {
  font-size: .85rem;
  color: var(--text);
  line-height: 1.5;
}

.se-tl-contributor {
  color: var(--honor-red);
  font-weight: 500;
  font-size: .8rem;
}

.se-tl-sha {
  font-size: .68rem;
  color: var(--muted);
  font-family: var(--font-mono);
  margin-top: .1rem;
}

/* ── Timeline grouped events ── */
.se-tl-dot--group {
  width: 16px;
  height: 16px;
  left: -26px;
  top: 2px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.se-tl-group-count {
  font-family: var(--font-mono);
  font-size: .5rem;
  font-weight: 700;
  line-height: 1;
  color: inherit;
  opacity: .85;
  /* hide the count — the badge in the row carries it */
  display: none;
}
.se-tl-group-badge {
  font-family: var(--font-mono);
  font-size: .58rem;
  color: var(--muted);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 3px;
  padding: .1rem .3rem;
  flex-shrink: 0;
}
.se-tl-group-details {
  margin-top: .4rem;
}
.se-tl-group-toggle {
  font-family: var(--font-mono);
  font-size: .65rem;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
  opacity: .7;
}
.se-tl-group-toggle::-webkit-details-marker { display: none; }
.se-tl-group-toggle::before { content: '▸ '; }
details[open] .se-tl-group-toggle::before { content: '▾ '; }
.se-tl-group-toggle:hover { opacity: 1; color: var(--text); }
.se-tl-group-inner {
  margin-top: .4rem;
  border-left: 1px solid var(--border);
  padding-left: .75rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.se-tl-group-item {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.se-tl-group-date {
  margin-left: 0;
  flex-shrink: 0;
}
.se-tl-group-msg {
  font-size: .82rem;
}

.se-empty {
  color: var(--muted);
  font-size: .9rem;
  padding: 1rem 0;
}

/* ── META REPORT ── */
#meta-report {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.mr-controls { margin-bottom: 1.5rem; }

.mr-filter-tabs {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.mr-tab {
  appearance: none;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .35rem .85rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--muted);
  cursor: pointer;
  transition: color .2s, background .2s, border-color .2s;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.mr-tab:hover {
  color: var(--text);
  border-color: rgba(255,255,255,.15);
}

.mr-tab.active {
  color: var(--text);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
}

.mr-count {
  font-size: .58rem;
  font-weight: 700;
  opacity: .5;
  font-variant-numeric: tabular-nums;
}

.mr-tab.active .mr-count { opacity: .7; }

.mr-timeline {
  position: relative;
  padding-left: 32px;
  max-height: 640px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.mr-timeline::-webkit-scrollbar { width: 5px; }
.mr-timeline::-webkit-scrollbar-track { background: transparent; }
.mr-timeline::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }

.mr-timeline::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--border) 0%, rgba(30,41,59,.2) 100%);
}

/* Date group headers */
.mr-month-header {
  font-family: var(--font-mono);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: .7rem 0 .35rem;
  margin-top: .25rem;
  position: relative;
}

.mr-month-header::before {
  content: '';
  position: absolute;
  left: -23px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(100,116,139,.4);
  transform: translateY(-50%);
}

.mr-month-header:first-child { margin-top: 0; padding-top: .2rem; }

.mr-event {
  position: relative;
  margin-bottom: .75rem;
  padding: .65rem .9rem;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 0; /* Strictly Boxy */
  transition: background .2s, border-color .2s;
  animation: mr-fade-in .35s cubic-bezier(.2,.8,.2,1) both;
}

.mr-event:hover {
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.1);
}

@keyframes mr-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.mr-dot {
  position: absolute;
  left: -28px;
  top: .85rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  background: var(--basic);
  box-shadow: 0 0 6px rgba(56,189,248,.3);
}

.mr-dot[data-action="rank_up"]  { background: var(--apex-gold);  box-shadow: 0 0 8px rgba(var(--apex-gold-rgb),.4); }
.mr-dot[data-action="ascend"]   { background: #fff;             box-shadow: 0 0 12px #fff, 0 0 4px rgba(var(--apex-gold-rgb),.6); }
.mr-dot[data-action="name"]     { background: var(--honor-red);  box-shadow: 0 0 8px rgba(var(--honor-red-rgb),.4); }
.mr-dot[data-action="fuse"]     { background: var(--extra);      box-shadow: 0 0 8px rgba(192,132,252,.4); }
.mr-dot[data-action="push"]     { background: var(--basic);      box-shadow: 0 0 6px rgba(56,189,248,.3); }
.mr-dot[data-action="evidence"] { background: var(--rank-3);     box-shadow: 0 0 6px rgba(167,139,250,.3); }
.mr-dot[data-action="demote"]   { background: var(--muted);      box-shadow: none; }
.mr-dot[data-action="propose"]  { background: var(--ultimate);   box-shadow: 0 0 8px rgba(245,158,11,.4); }
.mr-dot[data-action="bond"]     { background: var(--basic); }
.mr-dot[data-action="register"] { background: #22c55e;           box-shadow: 0 0 6px rgba(34,197,94,.3); }

.mr-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .2rem;
  flex-wrap: wrap;
}

.mr-action {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .14rem .48rem;
  border-radius: 4px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--muted);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: .2rem;
}

.mr-action-icon {
  font-size: .58rem;
  opacity: .75;
}

.mr-action[data-action="rank_up"]  { color: var(--apex-gold);  border-color: rgba(var(--apex-gold-rgb),.25); background: rgba(var(--apex-gold-rgb),.06); }
.mr-action[data-action="ascend"]   { color: var(--apex-gold);  border-color: rgba(var(--apex-gold-rgb),.3);  background: rgba(var(--apex-gold-rgb),.08); }
.mr-action[data-action="name"]     { color: var(--honor-red);  border-color: rgba(var(--honor-red-rgb),.25); background: rgba(var(--honor-red-rgb),.06); }
.mr-action[data-action="fuse"]     { color: var(--extra);      border-color: rgba(192,132,252,.25); background: rgba(192,132,252,.06); }
.mr-action[data-action="evidence"] { color: var(--rank-3);     border-color: rgba(167,139,250,.25); background: rgba(167,139,250,.06); }
.mr-action[data-action="push"]     { color: var(--basic);      border-color: rgba(56,189,248,.2);   background: rgba(56,189,248,.05); }
.mr-action[data-action="propose"]  { color: var(--ultimate);   border-color: rgba(245,158,11,.25);  background: rgba(245,158,11,.06); }
.mr-action[data-action="demote"]   { color: var(--muted);      border-color: rgba(100,116,139,.2);  background: rgba(100,116,139,.05); }

.mr-skill-wrap {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  min-width: 0;
}

.mr-tier-glyph {
  font-size: .7rem;
  opacity: .6;
  flex-shrink: 0;
}

.mr-tier-glyph[data-type="ultimate"] { color: var(--ultimate); }
.mr-tier-glyph[data-type="unique"]   { color: var(--tier-unique); }
.mr-tier-glyph[data-type="extra"]    { color: var(--extra); }
.mr-tier-glyph[data-type="basic"]    { color: var(--basic); }

.mr-skill {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--text);
  cursor: pointer;
  transition: color .2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mr-skill:hover { color: var(--basic); }

.mr-date {
  font-family: var(--font-mono);
  font-size: .65rem;
  color: var(--muted);
  margin-left: auto;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.mr-details {
  font-size: .78rem;
  color: rgba(226,232,240,.55);
  line-height: 1.55;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.mr-contributor {
  color: var(--honor-red);
  font-weight: 500;
  text-decoration: none;
  transition: opacity .15s;
}

.mr-contributor:hover { opacity: .8; }

.mr-loading {
  color: var(--muted);
  font-size: .9rem;
  padding: 2rem 0;
}

/* Empty state */
.mr-empty {
  text-align: center;
  padding: 3rem 1rem;
}

.mr-empty-icon {
  font-size: 1.8rem;
  color: var(--muted);
  opacity: .35;
  margin-bottom: .6rem;
}

.mr-empty-text {
  font-size: .85rem;
  color: var(--muted);
}

.mr-footer {
  margin-top: 1rem;
  text-align: center;
}

@media (max-width: 700px) {
  .mr-timeline { padding-left: 26px; max-height: 480px; }
  .mr-event { padding: .55rem .7rem; }
  .mr-dot { left: -22px; width: 10px; height: 10px; }
  .mr-timeline::before { left: 7px; }
  .mr-header { gap: .35rem; }
  .mr-skill { font-size: .72rem; }
  .mr-month-header { font-size: .6rem; }
  .mr-month-header::before { left: -19px; width: 5px; height: 5px; }
  .mr-filter-tabs { gap: .35rem; }
  .mr-tab { padding: .3rem .65rem; font-size: .65rem; }
}

.se-repo-row {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-top: 1rem;
  padding: .8rem 1rem;
  background: rgba(56, 189, 248, .06);
  border: 1px solid rgba(56, 189, 248, .15);
  border-radius: 8px;
}

.se-repo-url {
  font-size: .82rem;
  color: var(--basic);
  word-break: break-all;
}

/* ─────────────────────────────────────────────────────────────────
     RESPONSIVE — code overflow safety, layout collapse, named-skills
     empty state, ultra-narrow nav. Branding & graph rendering left
     untouched; only structural shifts and overflow are addressed.
     ───────────────────────────────────────────────────────────────── */

/* ── Code-block overflow safety (all viewports) ── */
pre {
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-wrap: anywhere;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  box-sizing: border-box;
}

code {
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* ── Tablet & below (≤700px): collapse multi-column grids ── */
@media (max-width:700px) {
  section {
    padding-left: 1rem;
    padding-right: 1rem
  }

  .process-page main {
    padding-top: 6.2rem
  }

  .process-lanes,
  .process-band,
  .review-grid {
    grid-template-columns: 1fr
  }

  .process-check {
    grid-template-columns: 1fr;
    gap: .2rem
  }

  .process-final {
    display: block
  }

  .process-final .btn {
    margin-top: 1.2rem
  }

  .tier-grid,
  .glossary,
  .steps {
    grid-template-columns: 1fr
  }

  .step {
    grid-template-columns: auto minmax(0, 1fr)
  }

  .hero-cta {
    flex-direction: column;
    align-items: stretch
  }

  .hero-cta .btn {
    text-align: center
  }

  .rank-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
  }

  table {
    font-size: .85rem
  }

  pre,
  code {
    font-size: .82rem
  }

  pre {
    padding: .75rem
  }

  .step pre,
  .os-panel pre,
  .rite-body pre {
    white-space: pre-wrap !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
  }

  .ns-install-cmd-txt {
    white-space: normal !important;
    word-break: break-all !important;
  }

  /* Named Skills: keep the full explorer visible and usable on narrow screens. */
  #named {
    min-height: auto;
    padding: 3rem 1rem 1.5rem;
    scroll-margin-top: 7rem
  }

  .ns-filter-row {
    align-items: stretch;
    flex-direction: column;
    align-items: stretch
  }

  .ns-level-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: .2rem;
    -webkit-overflow-scrolling: touch
  }

  .ns-level-tabs .ns-tab {
    flex: 0 0 auto
  }

  .ns-view-btns,
  .ns-sort-wrap {
    width: 100%
  }

  .ns-view-btns {
    justify-content: space-between
  }

  .ns-sort-wrap {
    min-height: 2.35rem
  }

  .ns-grid-tile {
    grid-template-columns: 1fr
  }

  .plaque--row {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: .75rem;
    padding: .75rem 1rem
  }

  .plaque--row .plaque-tags {
    display: none !important;
  }

  .plaque--row .ns-level-badge {
    margin-left: auto;
  }

  .ns-dag-container {
    overflow-x: auto;
    padding-bottom: 2rem
  }

  .ns-dag-rank {
    flex-wrap: nowrap !important;
    min-width: 1200px;
    justify-content: flex-start;
    padding-left: 2rem
  }

  .ns-grid-flow {
    overflow-x: auto;
    padding-bottom: 1rem
  }

  .flow {
    flex-direction: column;
    align-items: stretch
  }

  .flow-arrow {
    transform: rotate(90deg);
    align-self: center
  }
}

/* ── Phone (≤480px): tighten further ── */
@media (max-width:480px) {
  h1 {
    font-size: clamp(1.7rem, 8.5vw, 2.5rem)
  }

  h2 {
    font-size: clamp(1.35rem, 6.5vw, 2rem)
  }

  section {
    padding: 3.2rem .9rem
  }

  pre {
    font-size: .76rem;
    padding: .65rem .7rem
  }

  .step pre {
    margin-left: 0;
    margin-right: 0
  }

  code {
    font-size: .78rem
  }

  .step {
    grid-template-columns: 1fr;
    gap: .4rem
  }

  .step-num {
    margin-bottom: .25rem
  }

  .btn {
    width: 100%;
    text-align: center
  }

  .ns-grid-tile {
    grid-template-columns: 1fr
  }

  #named {
    padding-left: .9rem;
    padding-right: .9rem
  }

  .ns-controls {
    gap: .55rem
  }

  .ns-search {
    font-size: .85rem
  }

  .ns-view-btn {
    flex: 1;
    justify-content: center;
    padding: .35rem .45rem
  }

  /* Always keep loading/empty state visible above the fold */
  .ns-loading,
  .ns-empty {
    padding: 2rem 1rem;
    font-size: .88rem
  }

  /* Tree dialog: improve readability at narrow widths (Stage 5b note) */
  .tree-dialog-body pre {
    line-height: 1.5
  }
}

/* ── Ultra-narrow (≤360px): the iPhone-SE / 320px case ── */
@media (max-width:360px) {
  nav {
    padding: .55rem .75rem
  }

  .nav-logo {
    font-size: .95rem
  }

  nav ul {
    gap: .35rem .7rem;
    font-size: .74rem
  }

  section {
    padding: 2.8rem .75rem
  }

  pre {
    font-size: .72rem
  }

  .tier-card {
    padding: 1.1rem 1rem
  }

  /* Tree-pure overflow safety at iPhone-SE widths */
  .tree-pure-container {
    max-width: 100%;
    overflow-x: auto
  }
}

/* ── Mobile index hero port ── */
@media (max-width:700px) {
  .home-page nav {
    padding: .8rem 1.5rem;
    flex-wrap: nowrap;
    row-gap: 0;
    background: rgba(11, 15, 25, .94);
    border-bottom: 1px solid rgba(255, 255, 255, .05);
  }

  .nav-mobile-search {
    display: block;
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: .4rem 1rem;
    color: var(--honor-red);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 600;
    outline: none;
    min-width: 0;
    height: 36px;
  }

  .nav-mobile-search:focus {
    border-color: rgba(56, 189, 248, .5);
    background: rgba(255, 255, 255, 0.08);
  }

  .nav-mobile-search::placeholder {
    color: rgba(255, 255, 255, 0.4);
  }

  .nav-search-back {
    display: none;
    background: transparent;
    border: none;
    color: var(--text);
    padding: 0;
    margin: 0 0 0 -.5rem;
    cursor: pointer;
  }

  body.search-mode .nav-search-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
  }

  body.search-mode .nav-logo,
  body.search-mode .nav-menu-toggle,
  body.search-mode #hero,
  body.search-mode #paths,
  body.search-mode #hall-of-heroes,
  body.search-mode .ascension-section,
  body.search-mode .section-divider {
    display: none !important;
  }

  body.search-mode #named {
    padding-top: 1.5rem;
    min-height: 100vh;
  }

  .home-page .nav-logo {
    font-size: 1.125rem;
    line-height: 1;
  }

  .nav-menu-toggle {
    display: flex;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    margin-right: -.25rem;
    gap: 3px;
    border-radius: 6px;
  }
  .nav-menu-toggle span {
    width: 16px;
    height: 1.5px;
  }

  nav ul.nav-primary {
    display: none;          /* mobile uses .nav-mobile-drawer instead */
  }
  /* Legacy `nav.nav-open` reflow of .nav-primary is intentionally gone.
     The drawer is a separate sibling element with its own visibility. */

  #hero {
    min-height: 100svh;
    justify-content: center;
    padding: 5.4rem 1.5rem 2rem;
    background: var(--bg);
  }

  #hero::before,
  #hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 999px;
    z-index: 0;
  }

  #hero::before {
    top: 11%;
    left: 50%;
    width: 500px;
    height: 500px;
    transform: translate(-50%, -15%);
    background: rgba(245, 158, 11, .28);
    filter: blur(120px);
  }

  #hero::after {
    top: 52%;
    left: 24%;
    width: 300px;
    height: 300px;
    background: rgba(251, 191, 36, .15);
    filter: blur(100px);
  }

  #canvas3d {
    z-index: 1;
    opacity: .2;
    background-image: radial-gradient(circle at center, rgba(255, 255, 255, .55) 1px, transparent 1px);
    background-size: 40px 40px;
    transition: opacity 0.6s ease, background 0.6s ease;
  }

  #hero.hero-hud-mode #canvas3d {
    opacity: 1;
    background-image: none;
  }

  /* Darker midnight HUD filter */
  #hero.hero-hud-mode {
    background: #01040a;
  }

  #hero.hero-hud-mode .hero-glass-blur {
    opacity: 1;
    background: rgba(1, 4, 10, 0.2);
    backdrop-filter: blur(0px) brightness(0.9);
  }

  .hero-content {
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 24rem;
    margin: 0 auto;
  }

  .hero-eyebrow {
    box-shadow: none;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .2em;
  }

  h1.hero-title {
    margin-bottom: 1.25rem;
    font-size: clamp(2rem, 10vw, 2.85rem);
    line-height: 1.15;
    letter-spacing: -.02em;
  }

  h1.hero-title span {
    display: inline-block;
    margin-top: .25rem;
    padding-bottom: .1em;
    border-bottom: 1px solid var(--apex-gold);
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: currentColor;
  }

  .hero-sub {
    max-width: 100%;
    margin: 0 auto 2rem;
    color: #9ca3af;
    font-size: .9375rem;
    line-height: 1.65;
  }

  .hero-cta {
    width: 100%;
    max-width: 24rem;
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
    margin-bottom: 2.5rem;
  }

  .hero-cta .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    border-radius: 12px;
    padding: .875rem 1.5rem;
    font-size: .9375rem;
    line-height: 1.2;
    text-align: center;
  }

  .btn-primary {
    background: linear-gradient(90deg, #3b82f6, #9333ea);
    box-shadow: 0 0 30px rgba(99, 102, 241, .2);
  }

  .btn-ghost {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .1);
    color: #d1d5db;
  }

  .registry-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 24rem;
    margin: 0 auto;
    gap: 1px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .45);
  }

  .rs-divider {
    display: none
  }

  .rs-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 6.25rem;
    padding: 1.35rem;
    background: rgba(11, 15, 25, .95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .rs-stat:nth-child(1),
  .rs-stat:nth-child(3),
  .rs-stat:nth-child(5) {
    border: 0
  }

  .rs-num {
    margin-bottom: .25rem;
    font-size: 1.875rem;
    line-height: 1;
    color: #fff;
  }

  .rs-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    color: #6b7280;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .16em;
  }

  .rs-named {
    color: #f87171
  }

  .rs-stat .rs-num[style] {
    color: var(--tier-extra) !important
  }

}

/* ═══════════════════════════════════════════════
   HUNTER'S ATLAS — PHASE 2 COMPONENTS
   ═══════════════════════════════════════════════ */

/* ── NAV GRAPH TRIGGER ── */
button.nav-graph-trigger {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: .9rem;
  color: var(--basic) !important;
  padding: .1rem .25rem;
  transition: color .2s;
}

button.nav-graph-trigger:hover {
  color: #7dd3fc !important;
}

/* ── TWO DOORS ── */
.two-doors {
  display: flex;
  gap: 1rem;
  margin: 2.5rem auto 0;
  width: 100%;
  max-width: 28rem;
}

.door-b-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.door {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1.25rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  background: rgba(255, 255, 255, .03);
  transition: border-color .25s, box-shadow .25s;
  position: relative;
  overflow: hidden;
}

/* Path Meta Queue (Academic/Prestige Variant) */
.path-meta-queue {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.pmq-post {
  display: block;
  padding: 1.5rem;
  background: #000;
  color: #fff;
  border: 1px solid var(--border);
  border-radius: 0;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.pmq-post:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  border-color: var(--apex-gold);
}

.pmq-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--honor-red); /* Honor Red for Audit label */
  display: block;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.pmq-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: #fff;
  margin: 0 0 0.6rem 0;
  font-weight: 500;
  line-height: 1.1;
}

.pmq-summary {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: #ccc;
  line-height: 1.5;
  margin: 0;
  font-style: italic; /* Journal abstract style */
}

.pmq-changelog-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.6rem 1.25rem;
  cursor: pointer;
  border-radius: 8px;
  transition: border-color .2s, color .2s;
  align-self: flex-start;
  margin-top: 0.5rem;
}

.pmq-changelog-btn:hover {
  border-color: var(--basic);
  color: var(--basic);
}

.nav-search-btn-mobile {
  display: none;
}

@media (max-width: 700px) {
  .home-page nav {
    background: transparent;
    border-bottom: none;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .home-page .nav-logo {
    display: flex !important;
    margin-right: auto;
  }

  .nav-search-btn-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 0.5rem;
    margin-right: 0.5rem;
  }

  .nav-search-btn-mobile:hover {
    color: var(--text);
  }
}

.door::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}

.door-a::before {
  background: linear-gradient(135deg, rgba(251, 191, 36, .15), transparent)
}

.door-b::before {
  background: linear-gradient(135deg, rgba(239, 68, 68, .15), transparent)
}

.door:hover::before {
  opacity: .35
}

.door:hover {
  border-color: rgba(255, 255, 255, .15);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .4)
}

/* Primary door — visually heavier than .door-b ghost so the contribute
   path reads as the headline action, not a co-equal browse alt. */
.door--primary {
  border-color: rgba(251, 191, 36, .55);
  background: linear-gradient(135deg, rgba(251, 191, 36, .08), rgba(251, 191, 36, .02));
  box-shadow: 0 0 0 1px rgba(251, 191, 36, .12) inset;
}
.door--primary .door-label {
  color: var(--apex-gold);
  font-weight: 600;
}
.door--primary::before {
  opacity: .25;
}
.door--primary:hover {
  border-color: var(--apex-gold);
  box-shadow: 0 6px 28px rgba(251, 191, 36, .18);
}

.door-icon {
  font-size: 1.5rem;
  position: relative;
  z-index: 1
}

.door-label {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  position: relative;
  z-index: 1
}

.door-caption {
  font-family: var(--font-body);
  font-size: .75rem;
  color: var(--muted);
  text-align: center;
  position: relative;
  z-index: 1
}

/* ── LEDGER STRIP ── */
.ledger-strip {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  justify-content: center;
  margin: 2rem auto 0;
  padding: .75rem 1.5rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .12em;
  color: var(--muted);
  text-transform: uppercase;
  flex-wrap: wrap;
}

.ls-stat {
  display: flex;
  align-items: center;
  gap: .4rem
}

.ls-num {
  color: var(--text);
  font-size: .875rem
}

.ls-num-honor {
  color: var(--honor-red)
}

.ls-num-apex {
  color: var(--apex-gold)
}

.ls-sep {
  color: var(--border);
  user-select: none
}

.ls-updated {
  color: var(--muted);
  font-size: .625rem
}

/* ── PATHS SECTION ── */
[data-section="paths"],
[data-section="hoh"],
[data-section="ascension"] {
  padding: 5rem 1.5rem;
}

.paths-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  max-width: 900px;
  margin: 0 auto;
}

.path-plate-num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .75rem;
}

.rite-steps {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 1.5rem 0
}

.rite-step {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1.5rem
}

.rite-meta {
  display: flex;
  gap: 0.75rem;
  flex: 1;
  min-width: 140px;
}

.rite-desc {
  min-width: 0;
  flex: 1
}

.rite-term {
  flex: 1.4;
  min-width: 0
}

.rite-numeral {
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--apex-gold);
  width: 1.5rem;
  flex-shrink: 0;
  padding-top: .15rem;
}

.rite-desc strong {
  font-size: .9375rem;
  color: var(--text);
  display: block;
  margin-bottom: .2rem
}

.rite-desc p {
  font-size: .875rem;
  color: var(--muted);
  margin: 0
}

@media (max-width: 700px) {
  .rite-step {
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
  }
  .rite-meta {
    width: 100%;
    min-width: 0;
  }
  .rite-term {
    width: 100%;
    min-width: 0;
  }
}

.rite-term pre {
  margin: .5rem 0 0;
  font-size: .78rem;
  white-space: pre-wrap;
  word-break: break-all
}

/* Post-register subgroup — IV (MCP bond) and V (TUI) live here so the
   "Three steps" lede stays honest. Closed by default; the summary itself
   reads as a small section divider rather than a heavy heading. */
.rite-steps-after {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--border);
}
.rite-steps-after > summary {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  margin-bottom: .5rem;
  outline: none;
}
.rite-steps-after > summary::-webkit-details-marker { display: none; }
.rite-steps-after > summary::before {
  content: '▸ ';
  color: var(--apex-gold);
  display: inline-block;
  width: 1rem;
  transition: transform .2s;
}
.rite-steps-after[open] > summary::before {
  content: '▾ ';
}
.rite-steps-after .rite-after-hint {
  font-family: var(--font-body);
  font-size: .8125rem;
  color: var(--muted);
  font-weight: 400;
  font-style: italic;
}
.rite-steps--after {
  margin: .75rem 0 0;
}

.path-cta {
  margin-top: 1.5rem
}

.path-intro {
  font-size: .9rem;
  color: var(--muted);
  margin-bottom: .25rem
}

/* ── ULTIMATES LIST ── */
.ultimates-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 1.5rem 0
}

.ultimate-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem .75rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .02);
  transition: border-color .2s, background .2s;
  min-width: 0;
  max-width: 100%;
}

.ultimate-item:hover {
  border-color: rgba(251, 191, 36, .3)
}

.ult-glyph {
  color: var(--apex-gold);
  font-size: .95rem;
  flex-shrink: 0
}

.ult-slug {
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--text);
  letter-spacing: .02em;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ult-contrib {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  color: var(--honor-red);
  text-decoration: none;
  letter-spacing: .02em;
  flex-shrink: 0;
  transition: opacity .15s;
}

.ult-contrib:hover {
  opacity: .78;
  text-decoration: underline
}

/* Atlas handle — reusable contributor-mention link, used wherever a handle
   is rendered. Honor red, no underline by default, underline on hover/focus. */
.atlas-handle {
  color: var(--honor-red);
  text-decoration: none;
  transition: opacity .15s, color .15s;
}

.atlas-handle:hover,
.atlas-handle:focus-visible {
  text-decoration: underline;
  opacity: .88
}

/* Named-skill slash slug — primary visitor-facing identifier (e.g. /autoresearch).
   Honor-red mono token. The --muted variant is used when there is no named
   implementation yet (canonical slug shown in dimmed text instead of red). */
.named-slug {
  font-family: var(--font-mono);
  color: var(--honor-red);
  font-weight: 600;
  letter-spacing: .02em;
  transition: opacity 0.15s, filter 0.15s;
}

.named-slug[role="button"]:hover,
.named-slug[role="button"]:focus-visible {
  text-decoration: underline;
  filter: brightness(1.2);
}

.named-slug--muted {
  color: var(--muted);
  font-weight: 500
}

/* Stage 2 — .ult-stars / .ult-level chips are deprecated. The Ultimates
   list now emits .rank-badge[data-variant="stars"] and a chip via
   window.rankBadge(level). The two rules below keep .ult-level (a
   neutral-colored chip) and .ult-stars (gold-row alias) as shims for
   legacy markup. Per-level colour lives only in .rank-badge selectors. */
.ult-level {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--muted);
  flex-shrink: 0;
  letter-spacing: .04em;
  padding: .18rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .02)
}

.ultimate-item .rank-badge[data-variant="stars"] {
  font-size: .7rem;
  flex-shrink: 0
}

.ultimate-item .rank-badge[data-variant="chip"] {
  flex-shrink: 0
}

.ult-claim {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .05em;
  padding: .28rem .65rem;
  border-radius: 4px;
  border: 1px solid rgba(251, 191, 36, .45);
  color: var(--apex-gold);
  background: none;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .15s;
  flex-shrink: 0;
}

.ult-claim:hover {
  background: rgba(251, 191, 36, .1);
  border-color: var(--apex-gold);
  transform: translateY(-1px)
}

.ult-claimed {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .28rem .65rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  color: var(--muted);
  background: rgba(255, 255, 255, .02);
  flex-shrink: 0;
  cursor: default;
}

.ultimate-item--claimed {
  opacity: .78
}

.ultimate-item--claimed:hover {
  border-color: rgba(var(--honor-red-rgb), .25);
  opacity: 1
}

/* Claimed slug uses EB Garamond (--font-display) to match .plaque__slug,
   and honor-red color — the inline rank-color on the span is intentional
   for the level tint, but font-family must be the display face. */
.ultimate-item--claimed .ult-slug {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .01em;
}

.propose-cta {
  display: inline-flex;
  align-items: center;
  gap: .45rem
}

.propose-gh {
  flex-shrink: 0;
  opacity: .85
}

/* ── HALL OF HEROES ── */
.hoh-section {
  text-align: center
}

.hoh-section--mini {
  max-width: none;
  margin: 0;
  scroll-margin-top: 5rem;
  padding:
    clamp(4rem, 7vw, 6rem)
    max(1.25rem, calc((100vw - 1180px) / 2));
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid rgba(var(--apex-gold-rgb), 0.16);
  border-bottom: 1px solid rgba(var(--apex-gold-rgb), 0.14);
  background:
    radial-gradient(ellipse 58% 64% at 86% 10%, rgba(var(--apex-gold-rgb), 0.1), transparent 62%),
    radial-gradient(ellipse 40% 52% at 10% 80%, rgba(var(--honor-red-rgb), 0.06), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 34%),
    var(--bg);
}

.hoh-section--mini::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.45;
  background:
    linear-gradient(90deg, rgba(var(--apex-gold-rgb), 0.04) 1px, transparent 1px),
    linear-gradient(180deg, rgba(var(--apex-gold-rgb), 0.028) 1px, transparent 1px);
  background-size: 56px 56px, 56px 56px;
  mask-image: radial-gradient(ellipse 76% 68% at 58% 42%, black 0%, transparent 78%);
}

.hoh-mini-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 1180px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(250px, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.hoh-mini-intro {
  text-align: left;
}

.hoh-mini-mark {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 1.25rem;
  color: var(--apex-gold);
  border: 1px solid rgba(var(--apex-gold-rgb), 0.32);
  background:
    radial-gradient(circle, rgba(var(--apex-gold-rgb), 0.12), transparent 68%),
    rgba(255, 255, 255, 0.025);
  font-family: var(--font-mono);
  font-size: 1rem;
  box-shadow: 0 0 28px rgba(var(--apex-gold-rgb), 0.14);
  transform: rotate(45deg);
}

.hoh-mini-mark span {
  display: inline-block;
  transform: rotate(-45deg);
}

.hoh-mini-kicker {
  margin: 0 0 0.65rem;
  color: rgba(var(--apex-gold-rgb), 0.86);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

.hoh-section--mini h2 {
  max-width: 10ch;
  margin-bottom: 0.85rem;
  color: var(--text);
  font-size: clamp(2.15rem, 5.4vw, 3.75rem);
  line-height: 0.98;
  letter-spacing: 0;
  text-wrap: balance;
}

.hoh-section--mini .section-sub {
  max-width: 33rem;
  margin: 0 0 1.4rem;
  color: rgba(226, 232, 240, 0.76);
  line-height: 1.65;
  text-wrap: pretty;
}

.hoh-mini-ledger {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.6rem;
}

.hoh-mini-ledger span {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid rgba(var(--apex-gold-rgb), 0.18);
  border-radius: 999px;
  color: rgba(226, 232, 240, 0.78);
  background: rgba(255, 255, 255, 0.025);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.035em;
  white-space: nowrap;
}

.hoh-section--mini .hoh-footer {
  justify-content: flex-start;
  margin-top: 0;
  gap: 0.65rem;
}

.hoh-section--mini .hoh-footer .btn {
  display: inline-flex;
  align-items: center;
}

.hoh-section--mini .hoh-primary-link {
  border-color: rgba(var(--apex-gold-rgb), 0.55);
  color: var(--apex-gold);
  box-shadow: 0 0 22px rgba(var(--apex-gold-rgb), 0.12);
}

.hoh-section--mini .hoh-primary-link:hover,
.hoh-section--mini .hoh-primary-link:focus-visible {
  border-color: rgba(var(--apex-gold-rgb), 0.82);
  color: var(--apex-gold);
}

.hoh-mini-stage {
  position: relative;
  min-width: 0;
  padding-left: clamp(1rem, 2.2vw, 1.7rem);
}

.hoh-mini-stage-rail {
  position: absolute;
  left: 0;
  top: 0.25rem;
  bottom: 0.25rem;
  width: 2px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(180deg, transparent, rgba(var(--apex-gold-rgb), 0.4), transparent);
}

.hoh-mini-stage-rail span {
  width: 9px;
  height: 9px;
  margin-left: -3.5px;
  border-radius: 50%;
  border: 1px solid rgba(var(--apex-gold-rgb), 0.42);
  background: var(--bg);
  box-shadow: 0 0 12px rgba(var(--apex-gold-rgb), 0.18);
}

/* Phase 9 — HoH plate redesign.
   Layout is a featured row (1–2 large plates whose primary skill is 6★)
   stacked above a uniform grid of standard plates. CSS Grid (not flex-
   wrap) gives deterministic row alignment so the previous overlap bug
   between adjacent plates can't reappear. The legacy .hoh-track-wrap /
   .hoh-track classes are retained as no-op fallbacks for any cached
   page-ia.js still emitting the old DOM shape. */
.hoh-section #hohPlates {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
  text-align: left;
}

.hoh-section--mini #hohPlates {
  max-width: none;
  margin: 0;
  padding: 0;
  gap: 1.25rem;
}

.hoh-section #hohPlates > .hoh-featured,
.hoh-section #hohPlates > .hoh-grid {
  flex: 0 0 auto;
}

.hoh-featured {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 820px) {
  .hoh-featured {
    grid-template-columns: 1fr 1fr;
  }
}
.hoh-featured > * {
  align-self: start;
}

.hoh-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 560px) {
  .hoh-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 880px) {
  .hoh-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.hoh-grid > * {
  align-self: start;
}

.hoh-section--mini .hoh-featured {
  gap: 1rem;
}

.hoh-section--mini .hoh-grid {
  gap: 0.85rem;
}

.hoh-section--mini .plaque--hall {
  --hoh-card-atmosphere:
    radial-gradient(ellipse 42% 68% at 80% 18%, rgba(var(--plaque-accent-rgb), 0.12), transparent 70%),
    linear-gradient(116deg, transparent 0%, transparent 60%, rgba(var(--plaque-accent-rgb), 0.18) 61%, transparent 62%);
  --hoh-card-atmosphere-shift-x: 10px;
  --hoh-card-atmosphere-shift-y: -8px;
  --hoh-card-atmosphere-duration: 8s;
  background:
    radial-gradient(circle at 50% -24%, rgba(var(--plaque-accent-rgb), 0.075), transparent 58%),
    rgba(15, 23, 42, 0.72);
}

.hoh-section--mini .plaque--hall:not(.plaque--apex-vi)::before {
  content: '';
  position: absolute;
  inset: -18%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.78;
  background: var(--hoh-card-atmosphere);
  transform: translate3d(0, 0, 0);
}

.hoh-section--mini .hoh-featured > .plaque--hall:nth-child(2n) {
  --hoh-card-atmosphere:
    radial-gradient(ellipse 34% 78% at 18% 12%, rgba(var(--honor-red-rgb), 0.09), transparent 72%),
    linear-gradient(64deg, transparent 0%, transparent 56%, rgba(var(--plaque-accent-rgb), 0.15) 57%, transparent 58%);
  --hoh-card-atmosphere-shift-x: -12px;
  --hoh-card-atmosphere-shift-y: 7px;
  --hoh-card-atmosphere-duration: 9.5s;
}

.hoh-section--mini .hoh-featured > .plaque--hall:nth-child(3n) {
  --hoh-card-atmosphere:
    radial-gradient(circle at 50% 12%, rgba(var(--apex-gold-rgb), 0.12), transparent 34%),
    linear-gradient(156deg, transparent 0%, transparent 48%, rgba(var(--plaque-accent-rgb), 0.14) 49%, transparent 50%),
    linear-gradient(24deg, transparent 0%, transparent 72%, rgba(var(--honor-red-rgb), 0.08) 73%, transparent 74%);
  --hoh-card-atmosphere-shift-x: 6px;
  --hoh-card-atmosphere-shift-y: 12px;
  --hoh-card-atmosphere-duration: 11s;
}

.hoh-section--mini .hoh-featured > .plaque--hall:nth-child(4n) {
  --hoh-card-atmosphere:
    radial-gradient(ellipse 50% 48% at 74% 72%, rgba(var(--plaque-accent-rgb), 0.11), transparent 72%),
    linear-gradient(102deg, transparent 0%, transparent 64%, rgba(var(--apex-gold-rgb), 0.13) 65%, transparent 66%);
  --hoh-card-atmosphere-shift-x: -8px;
  --hoh-card-atmosphere-shift-y: -10px;
  --hoh-card-atmosphere-duration: 10s;
}

.hoh-section--mini .plaque--hall .plaque__hall-content {
  z-index: 2;
}

.hoh-section--mini .plaque--hall[data-art-loaded="true"] .plaque__hall-backdrop {
  opacity: 0.035;
}

.hoh-section--mini .plaque--hall-featured[data-art-loaded="true"] .plaque__hall-backdrop {
  opacity: 0.045;
}

@media (prefers-reduced-motion: no-preference) {
  .hoh-section--mini .plaque--hall:not(.plaque--apex-vi)::before {
    animation: hoh-mini-atmosphere-drift var(--hoh-card-atmosphere-duration) cubic-bezier(0.22, 1, 0.36, 1) infinite alternate;
  }
}

@keyframes hoh-mini-atmosphere-drift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.58;
  }
  to {
    transform: translate3d(var(--hoh-card-atmosphere-shift-x), var(--hoh-card-atmosphere-shift-y), 0) scale(1.04);
    opacity: 0.88;
  }
}

@media (max-width: 720px) {
  .hoh-featured,
  .hoh-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 920px) {
  .hoh-mini-shell {
    grid-template-columns: 1fr;
  }

  .hoh-mini-intro {
    max-width: 42rem;
  }

  .hoh-section--mini h2 {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .hoh-section--mini {
    padding:
      clamp(3.25rem, 14vw, 4.25rem)
      1rem;
  }

  .hoh-mini-stage {
    padding-left: 0;
  }

  .hoh-mini-stage-rail {
    display: none;
  }

  .hoh-mini-ledger {
    gap: 0.4rem;
  }

  .hoh-mini-ledger span {
    white-space: normal;
  }

  .hoh-section--mini .hoh-footer {
    justify-content: stretch;
  }

  .hoh-section--mini .hoh-footer .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* Legacy fallback — keep flex-wrap minus the overlap risk for any
   transient deploy where page-ia.js still emits the old .hoh-track. */
.hoh-track-wrap {
  position: relative;
  margin: 2rem auto;
  max-width: 1200px;
}

.hoh-section--mini .hoh-track-wrap {
  max-width: none;
  margin: 0;
}

.hoh-track {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: stretch;
  padding-bottom: 0.5rem;
}

.hoh-track > * {
  flex: 0 0 auto;
}

/* Stage 2 — Hall of Heroes mini-plaque stars now render through the
   .rank-badge[data-variant="stars"] primitive (see rankBadge() in
   docs/js/rank-badge.js). The .hoh-star shim is declared once near the
   top of this file for any legacy markup; no per-level overrides here. */
.plaque--mini .rank-badge[data-variant="stars"] {
  font-size: 12px;
  gap: 2px
}

.hoh-footer {
  margin-top: 1.5rem;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
}

/* ── ASCENSION CYCLE ── */
.ascension-section {
  text-align: center
}

.ascension-track {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  margin: 2.5rem auto;
  max-width: 860px;
}

.asc-stage {
  display: flex;
  align-items: center
}

.asc-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  padding: .85rem .9rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .02);
  min-width: 7rem;
  text-align: center;
}

.asc-node.is-apex {
  border-color: rgba(251, 191, 36, .5);
  background: rgba(251, 191, 36, .04)
}

.asc-node.is-apex .asc-label {
  color: var(--apex-gold);
  font-family: var(--font-display);
  font-size: .9375rem;
  font-weight: 600;
}

.asc-label {
  font-size: .8125rem;
  color: var(--text);
  font-weight: 500
}

.asc-sub {
  font-family: var(--font-mono);
  font-size: .65rem;
  color: var(--muted);
  letter-spacing: .08em
}

/* Stage 2 — Ascension Cycle stars now render through .rank-badge
   chips. .asc-tier(--N) class names are deprecated; the journey
   wrapper carries data-pattern="journey" so the ascending direction
   is documented as the SOLE exempt catalog ordering (per Stage 4
   direction rule). Per-level colour lives only in the .rank-badge
   selector block at the top of this file. */
.ascension-track[data-pattern="journey"] .rank-badge {
  margin: 0;
}

.asc-arrow {
  padding: 0 .4rem;
  color: var(--muted);
  font-size: .875rem;
  flex-shrink: 0
}

/* ── FOOTER MARK ── */
.footer-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-bottom: 1rem;
}

.footer-seal {
  width: 22px;
  height: 22px;
  color: var(--apex-gold)
}

.footer-wordmark {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--text);
}

.footer-link-btn {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: .85rem;
  color: var(--muted);
  padding: 0;
  transition: color .2s;
  text-decoration: none;
  vertical-align: baseline;
}

.footer-link-btn:hover {
  color: var(--text)
}

/* ── PHASE 2 MOBILE ── */
@media(max-width:700px) {
  .two-doors {
    flex-direction: row;
    max-width: 100%;
    gap: 1rem
  }

  .two-doors .door-label {
    font-size: .9rem
  }

  .paths-wrap {
    grid-template-columns: 1fr;
    gap: 2rem
  }

  .ascension-track {
    flex-direction: column-reverse;
    align-items: center;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }

  .asc-stage {
    width: 100%;
    flex-direction: column-reverse
  }

  .asc-node {
    width: 100%;
    min-width: 0
  }

  .asc-arrow {
    transform: rotate(-90deg);
    align-self: center;
    padding: .2rem 0
  }

  .ledger-strip {
    gap: 1rem
  }

  /* Task: Ultimates list as tiles */
  .ultimates-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.75rem;
  }

  .ultimate-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem 0.75rem;
    height: 100%;
  }

  .ult-slug {
    white-space: normal;
    word-break: break-all;
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
    flex: none;
  }

  .ultimate-item--claimed .ult-slug {
    font-size: 0.875rem;
  }

  .ult-claim,
  .ult-claimed {
    width: 100%;
    margin-top: auto;
    padding: 0.5rem;
  }

  /* Fix Propose button overflow */
  .propose-cta {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 0.8rem;
    font-size: 0.8rem;
    white-space: normal;
    height: auto;
    box-sizing: border-box;
  }
}

.plaque--mini {
  animation: none !important;
  transition: none !important;
}

.plaque--mini:hover {
  transform: none !important;
}

/* ═══════════════════════════════════════════════
   PHASE 5 — MOBILE NAV SHEET
   ═══════════════════════════════════════════════ */

/* Sheet backdrop — hidden by default; mobile override reveals the backdrop */
.nav-sheet-backdrop {
  display: none !important
}

.nav-sheet {
  display: none !important
}

/* Only show hamburger / sheet on mobile (≤700px) */
@media(max-width:700px) {
  .nav-sheet-backdrop {
    display: block
  }
}

/* ── PHASE 5 — FIRST-LOAD REVEAL OVERLAY ── */
.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.5rem;
  pointer-events: auto;
  opacity: 1;
  transition: opacity 1.2s ease;
}

.intro-overlay.fading {
  opacity: 0;
  pointer-events: none
}

.intro-overlay.done {
  display: none
}

.intro-reveal-line {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  font-weight: 600;
  color: var(--text);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s ease;
  text-align: center;
}

.intro-reveal-line.visible {
  opacity: 1;
  transform: none
}

.intro-skip {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .8;
  white-space: nowrap;
}

/* ── PHASE 3 MOBILE — disable 3D HUD, show static SVG fallback ── */
.hero-mobile-graph {
  display: none
}

@media(max-width:480px) {
  .hoh-track {
    gap: .75rem
  }

  .plaque--mini {
    width: 170px;
    max-width: 170px;
    min-height: 200px
  }
}

/* ═══════════════════════════════════════════════
   PHASE 5 — prefers-reduced-motion
   Disable all CSS animations & transitions except
   the Level VI shimmer (hard lock — plaque.css
   explicitly re-enables plaque-vi-edge under this
   media query via animation:none, which is correct
   for the CSS plaque. The canvas Level VI node is
   handled in JS and is intentionally excluded).
   ═══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

  /* Kill all @keyframes transitions sitewide */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Restore instant-show for scroll-reveal — they would get stuck at opacity:0 */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Intro overlay — skip entirely (see also JS gate) */
  .intro-overlay {
    display: none !important;
  }

  /* Graph dialog open/close transitions */
  .graph-dialog,
  .graph-dialog[open] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .graph-dialog::backdrop,
  .graph-dialog[open]::backdrop {
    opacity: 1 !important;
    transition: none !important;
  }

  /* Skill explorer slide-in */
  .skill-explorer {
    transition: none !important;
  }

  /* Nav sheet */
  .nav-sheet,
  .nav-sheet-backdrop {
    transition: none !important;
  }

  /* USP card pop */
  .usp-card {
    transition: none !important;
    transform: none !important;
  }
}

/* ── SCROLL TO TOP ── */
.scroll-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 900;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(3, 7, 18, .8);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(56, 189, 248, .3);
  color: var(--basic);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .3s, transform .3s, border-color .2s;
}

.scroll-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.scroll-to-top:hover {
  border-color: var(--basic);
  background: rgba(56, 189, 248, .1);
}

@media(max-width:700px) {
  .scroll-to-top {
    bottom: 1.5rem;
    right: 1.5rem;
  }
}

/* ── Git-Branch Flowchart Design (Hunter's Atlas Stage 9) ── */
.se-flowchart-wrap.git-style {
  min-height: 400px;
  background: radial-gradient(circle at center, rgba(30, 41, 59, 0.2) 0%, transparent 70%);
}

.se-flowchart-rows.git-style {
  gap: 40px;
}

.git-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  z-index: 2;
  cursor: pointer;
}

.git-node-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--border);
  transition: all 0.25s ease;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
}

.git-node:hover .git-node-dot {
  border-color: var(--text);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

.git-node.current .git-node-dot {
  background: var(--text);
  border-color: var(--text);
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.2);
}

/* Tier-specific dot colors */
.git-node[data-type="ultimate"] .git-node-dot {
  border-color: var(--tier-ultimate);
}

.git-node[data-type="extra"] .git-node-dot {
  border-color: var(--tier-extra);
}

.git-node[data-type="unique"] .git-node-dot {
  border-color: var(--tier-unique);
}

.git-node[data-type="basic"] .git-node-dot {
  border-color: var(--tier-basic);
}

.git-node[data-type="ultimate"].current .git-node-dot {
  background: var(--tier-ultimate);
}

.git-node[data-type="extra"].current .git-node-dot {
  background: var(--tier-extra);
}

.git-node[data-type="unique"].current .git-node-dot {
  background: var(--tier-unique);
}

.git-node[data-type="basic"].current .git-node-dot {
  background: var(--tier-basic);
}

.git-node-label {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  margin-left: 14px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  background: rgba(3, 7, 18, 0.8);
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--border);
  backdrop-filter: blur(4px);
  opacity: 0.7;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}

.git-node:hover .git-node-label {
  opacity: 1;
  transform: translateY(-50%) translateX(2px);
}

/* Slash-name label for flowchart nodes (contributor/skill-name) */
.dag-node-label {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 50;
}

.git-node.show-label .dag-node-label,
.git-node:hover .dag-node-label {
  opacity: 1;
}

.dag-node-label-contrib {
  color: #ef4444;
  font-weight: 600;
}

.dag-node-label-name {
  color: var(--text);
}

.git-node-badge {
  position: absolute;
  bottom: 100%;
  margin-bottom: 6px;
  transform: scale(0.75);
  pointer-events: none;
}

.git-node-contrib {
  position: absolute;
  top: 100%;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--honor-red);
  opacity: 0.8;
}

.git-edge {
  stroke: var(--border);
  stroke-width: 4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.4s ease, stroke-width 0.4s ease;
  opacity: 0.4;
}

.git-edge.active {
  stroke: var(--tier-basic);
  opacity: 0.8;
  stroke-width: 5;
}

/* Specific edge colors by target tier */
.git-edge[data-target-type="ultimate"] {
  stroke: var(--tier-ultimate);
}

.git-edge[data-target-type="extra"] {
  stroke: var(--tier-extra);
}

.git-edge[data-target-type="unique"] {
  stroke: var(--tier-unique);
}

.git-edge[data-target-type="basic"] {
  stroke: var(--tier-basic);
}

.ns-dag-container.git-style .ns-dag-rank {
  gap: 40px;
  margin-bottom: 48px;
}

/* ── Git Branch Flowchart Aesthetic ── */
.git-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  width: 24px;
  height: 24px;
  margin-top: var(--staggerY, 0);
}

.git-node .ns-dag-card,
.git-node .flow-node,
.git-node .git-card,
.git-node .se-stack-deck {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  transition: opacity 0.2s, visibility 0.2s;
  z-index: 10;
  margin-top: 8px;
}

.git-node:hover .ns-dag-card,
.git-node:hover .flow-node,
.git-node:hover .git-card,
.git-node:hover .se-stack-deck {
  opacity: 1 !important;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%);
}

/* Issue #346 — flowchart popover flicker + stacking.
   All .git-node siblings share z-index: 2, so a later sibling's dot
   painted over an earlier node's popover card; raise the hovered node's
   whole stacking context above its siblings. */
.git-node:hover {
  z-index: 30;
}

/* The popover card is itself a .plaque, so the global .plaque:hover
   lift (translateY(-2px)) competes with the translateX(-50%) centering
   when the cursor crosses onto the card — the card shifts sideways, the
   cursor leaves it, and the hover state thrashes. Pin the transform for
   the card while it is open. */
.git-node > .plaque:hover {
  transform: translateX(-50%);
}

.git-node:hover .ns-dag-card[data-ghost="true"],
.git-node:hover .flow-node.flow-node-ghost,
.git-node:hover .git-card[data-ghost="true"],
.git-node:hover .plaque--ghost {
  opacity: 0.55 !important;
}

/* Click-selected node state: lock and amplify */
.git-node.selected .ns-dag-card,
.git-node.selected .flow-node,
.git-node.selected .git-card,
.git-node.selected .se-stack-deck {
  opacity: 1 !important;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.git-node.selected .git-commit-dot {
  transform: scale(1.5);
  box-shadow: 0 0 18px var(--dot-color, var(--muted));
  z-index: 10;
}

.git-commit-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--dot-color, var(--muted));
  z-index: 3;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
  cursor: pointer;
}

/* Hover no longer scales the dot — keeps the layout calm. The selected
   state (.git-node.selected .git-commit-dot) still amplifies on lock. */
/* Base: structure only — color comes from [data-tier] rules below */
.git-path {
  fill: none;
  stroke: rgba(148, 163, 184, .3);
  stroke-width: 1px;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.45;
  transition: stroke-width 0.3s, opacity 0.3s, filter 0.3s;
}

/* Tier-based vein colors: each edge color matches its source node's tier */
.git-path[data-tier="apex"] {
  stroke: rgba(255, 255, 255, .8);
  stroke-width: 2px;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .45));
  opacity: .65;
}

.git-path[data-tier="ultimate"] {
  stroke: rgba(245, 158, 11, .75);
  stroke-width: 1.8px;
  filter: drop-shadow(0 0 5px rgba(245, 158, 11, .35));
  opacity: .55;
}

.git-path[data-tier="unique"] {
  stroke: rgba(124, 58, 237, .7);
  stroke-width: 1.6px;
  filter: drop-shadow(0 0 4px rgba(124, 58, 237, .3));
  opacity: .5;
}

.git-path[data-tier="extra"] {
  stroke: rgba(192, 132, 252, .65);
  stroke-width: 1.4px;
  filter: drop-shadow(0 0 4px rgba(192, 132, 252, .25));
  opacity: .5;
}

.git-path[data-tier="basic"] {
  stroke: rgba(56, 189, 248, .6);
  stroke-width: 1.2px;
  filter: drop-shadow(0 0 3px rgba(56, 189, 248, .2));
  opacity: .45;
}

/* Active/hover: glow burst along the path */
.git-path:hover,
.git-path.active-path {
  opacity: 1;
  stroke-width: 2px;
  filter: drop-shadow(0 0 8px currentColor);
}

.git-path[data-tier="apex"].active-path {
  stroke-width: 3.5px;
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, .7));
}

.git-path[data-tier="ultimate"].active-path {
  stroke-width: 3px;
  filter: drop-shadow(0 0 12px rgba(245, 158, 11, .6));
}

.git-path[data-tier="unique"].active-path {
  stroke-width: 2.8px;
  filter: drop-shadow(0 0 11px rgba(124, 58, 237, .55));
}

.git-path[data-tier="extra"].active-path {
  stroke-width: 2.6px;
  filter: drop-shadow(0 0 10px rgba(192, 132, 252, .5));
}

.git-path[data-tier="basic"].active-path {
  stroke-width: 2.4px;
  filter: drop-shadow(0 0 9px rgba(56, 189, 248, .45));
}

/* Dimmed paths when node selected */
.git-path.dimmed {
  opacity: 0.1 !important;
  filter: none;
}

/* Downstream node labels */
.git-node-label {
  position: absolute;
  bottom: 100%;
  margin-bottom: 8px;
  font-family: var(--font-body);
  font-size: .75rem;
  color: var(--text);
  white-space: nowrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .3rem .6rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}

.git-node.show-label .git-node-label {
  opacity: 1;
}

.se-flowchart-svg,
.ns-dag-svg {
  overflow: visible !important;
}

/* Show scrollbars for flowchart containers cleanly */
.ns-dag-container,
.se-flowchart-wrap,
.git-branch-container {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  display: flex;
  flex-direction: column;
}

.ns-dag-container::-webkit-scrollbar,
.se-flowchart-wrap::-webkit-scrollbar,
.git-branch-container::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

.ns-dag-container::-webkit-scrollbar-track,
.se-flowchart-wrap::-webkit-scrollbar-track,
.git-branch-container::-webkit-scrollbar-track {
  background: transparent;
}

.ns-dag-container::-webkit-scrollbar-thumb,
.se-flowchart-wrap::-webkit-scrollbar-thumb,
.git-branch-container::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

/* Rank rows: invisible containers — only nodes and edges should be visible */
.ns-dag-rank,
.se-flowchart-row,
.git-rank-row {
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  position: relative;
  z-index: 2;
}

/* 6-star node aesthetic */
.git-node[data-level*="6"] .git-commit-dot {
  background: #ffffff !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.6) !important;
}

/* Ghost node grey-out */
.git-node[data-ghost="true"] .git-commit-dot {
  opacity: 0.4;
  filter: grayscale(1) brightness(0.7);
}

/* Main node visibility */
.git-node--main .ns-dag-card,
.git-node--main .flow-node,
.git-node--main .git-card,
.git-node--main .se-stack-deck {
  opacity: 1 !important;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%);
}

/* Void zone for uniques: in-flow zone with violet atmospheric border.
   Sits ABOVE the SVG vein layer (including active-path glows) so the
   zone reads as a self-contained "well" that lines flow into. */
.void-zone {
  background: linear-gradient(135deg, rgba(124, 58, 237, .16) 0%, rgba(76, 29, 149, .10) 100%);
  border: 1px dashed rgba(124, 58, 237, .4);
  border-radius: 20px;
  padding: 28px 36px;
  position: relative;
  z-index: 5;
  backdrop-filter: blur(2px);
  box-shadow: inset 0 0 40px rgba(124, 58, 237, .1);
}

.void-zone::before {
  content: 'VOID';
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--tier-unique);
  letter-spacing: 0.35em;
  opacity: 0.6;
  pointer-events: none;
  z-index: 6;
}

/* Prerequisites (bottom row in skill explorer) stay in one layer if possible, or scroll horizontally */
.se-flowchart-row[data-depth="0"] {
  flex-wrap: nowrap !important;
  width: max-content;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 700px) {
  .ns-dag-rank {
    min-width: auto !important;
    flex-wrap: wrap !important;
  }

  .se-flowchart-row {
    width: 100% !important;
  }

  .ns-dag-rank,
  .se-flowchart-row,
  .git-rank-row {
    gap: 12px;
    padding: 12px;
  }

  .git-node {
    margin-top: calc(var(--staggerY, 0) * 0.3) !important;
  }
}

/* Utilities extracted from inline styles */
.mt-sm {
  margin-top: .5rem;
}

.text-sm {
  font-size: .875rem;
}

.text-tier-basic {
  color: var(--basic);
}

/* ─────────────────────────────────────────────────────────────
   STAGE 9 — META REPORT SIDEBAR & CALLOUT SYSTEM
   ───────────────────────────────────────────────────────────── */

/* Nav button styling */
.nav-meta {
  color: var(--tier-extra, #c084fc) !important;
  font-family: var(--font-body);
  font-size: .9rem;
  letter-spacing: .01em;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: inherit;
  transition: color .2s, filter .2s;
}

.nav-meta:hover {
  color: var(--apex-gold, #fbbf24) !important;
  filter: drop-shadow(0 0 8px rgba(192, 132, 252, 0.5));
}

/* Callout Section styling */
.section-callout {
  max-width: 820px;
  margin: 3.5rem auto;
  padding: 0 1.5rem;
}

.callout-inner {
  background: radial-gradient(circle at top left, rgba(192, 132, 252, 0.04), rgba(56, 189, 248, 0.01));
  border: 1px solid rgba(192, 132, 252, 0.15);
  border-radius: 20px;
  padding: 3rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(192, 132, 252, 0.02);
  transition: border-color .3s, box-shadow .3s;
}

.callout-inner:hover {
  border-color: rgba(192, 132, 252, 0.35);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5), 0 0 25px rgba(192, 132, 252, 0.08);
}

.callout-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(192, 132, 252, 0.4), rgba(56, 189, 248, 0.3), transparent);
}

.callout-glyph {
  font-size: 2.2rem;
  color: var(--tier-extra, #c084fc);
  display: block;
  margin-bottom: 1rem;
  text-shadow: 0 0 15px rgba(192, 132, 252, 0.5);
  animation: callout-pulse 3s ease-in-out infinite;
}

@keyframes callout-pulse {
  0%, 100% { transform: scale(1) translateY(0); filter: drop-shadow(0 0 2px rgba(192, 132, 252, 0.2)); }
  50% { transform: scale(1.05) translateY(-3px); filter: drop-shadow(0 0 10px rgba(192, 132, 252, 0.5)); }
}

/* Sidebar and Backdrop foundation */
.meta-sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}

.meta-sidebar-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.meta-sidebar {
  position: fixed;
  top: 80px;
  right: 24px;
  width: 460px;
  height: calc(100vh - 104px);
  z-index: 10000;
  background: rgba(13, 10, 22, 0.96);
  border: 1px solid rgba(192, 132, 252, 0.25);
  border-radius: 0;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 35px rgba(192, 132, 252, 0.05);
  display: flex;
  flex-direction: column;
  transform: translateX(calc(100% + 40px));
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
  visibility: hidden;
  overflow: hidden;
}

.meta-sidebar.open {
  transform: translateX(0);
  visibility: visible;
}

/* Header UI Elements */
.meta-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.4rem;
  background: linear-gradient(90deg, rgba(192, 132, 252, 0.08), rgba(56, 189, 248, 0.03));
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: relative;
}

.meta-sidebar-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(192, 132, 252, 0.3), rgba(56, 189, 248, 0.2));
}

.meta-sidebar-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
}

.meta-sidebar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Clean, icon-only button style matching foundation.html sampler */
.meta-btn-icon {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--border);
  color: var(--muted);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  padding: 0;
}

.meta-btn-icon:hover {
  border-color: var(--tier-extra, #c084fc);
  color: var(--text);
  background: rgba(192, 132, 252, 0.08);
  filter: drop-shadow(0 0 6px rgba(192, 132, 252, 0.35));
  transform: translateY(-1px);
}

.meta-btn-icon:active {
  transform: translateY(0);
}

.meta-btn-icon.copied {
  border-color: #22c55e;
  color: #22c55e;
  background: rgba(34, 197, 94, 0.08);
  filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.35));
}

.meta-btn-icon.copied svg {
  transform: scale(1.15);
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.meta-btn-close svg {
  transform: rotate(270deg);
  transition: transform 0.22s ease;
}

.meta-btn-close:hover svg {
  transform: rotate(270deg) translateX(1px);
}

.mr-pagination-prev svg {
  transform: rotate(90deg);
}

.mr-pagination-next svg {
  transform: rotate(270deg);
}

/* Sidebar Body styling */
.meta-sidebar-body {
  flex: 1;
  overflow-y: hidden; /* Scroll inside timeline, not body */
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
}

.meta-sidebar-intro {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.45;
  margin-bottom: 1rem;
}

/* Align controls inside sidebar context */
.meta-sidebar-body .mr-controls {
  margin-bottom: 0.8rem;
}

.meta-sidebar-body .mr-filter-tabs {
  gap: 0.3rem;
}

.meta-sidebar-body .mr-tab {
  padding: 0.25rem 0.6rem;
  font-size: 0.65rem;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.03);
}

/* HIGHLY COMPACT timeline for displaying more content */
.meta-sidebar-body .mr-timeline {
  flex: 1;
  overflow-y: auto;
  padding-left: 20px;
  padding-right: 2px;
  margin-bottom: 0.8rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  /* Breathtaking infinite-fade mask overlay for premium scroll transition */
  mask-image: linear-gradient(to bottom, transparent 0%, black 15px, black calc(100% - 15px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15px, black calc(100% - 15px), transparent 100%);
}

.meta-sidebar-body .mr-timeline::-webkit-scrollbar { width: 4px; }
.meta-sidebar-body .mr-timeline::-webkit-scrollbar-track { background: transparent; }
.meta-sidebar-body .mr-timeline::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }

/* Perfect pixel alignment for the vertical line overlay centered in the sidebar */
.meta-sidebar-body .mr-timeline::before {
  left: 3px;
}

/* Extremely compact event cells with organic scale and color transitions */
.meta-sidebar-body .mr-event {
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.4rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.03);
  background: rgba(255, 255, 255, 0.015);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.meta-sidebar-body .mr-event:hover {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(192, 132, 252, 0.12); /* subtle purple hover outline */
  transform: translateX(-2px);
  box-shadow: 0 4px 12px rgba(192, 132, 252, 0.04);
}

.meta-sidebar-body .mr-event:hover .mr-dot {
  transform: scale(1.2);
  box-shadow: 0 0 8px currentColor;
}

.meta-sidebar-body .mr-month-header {
  font-size: 0.6rem;
  padding: 0.4rem 0 0.2rem;
  margin-top: 0.15rem;
  letter-spacing: 0.08em;
}

.meta-sidebar-body .mr-month-header::before {
  left: -18px; /* pixel-perfect align with vertical line centered at 4px */
  width: 4px;
  height: 4px;
}

.meta-sidebar-body .mr-dot {
  left: -20px;
  top: 0.6rem;
  width: 8px;
  height: 8px;
  border-width: 1.5px;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}

.meta-sidebar-body .mr-header {
  gap: 0.4rem;
  margin-bottom: 0.1rem;
}

.meta-sidebar-body .mr-action {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  letter-spacing: 0.02em;
}

.meta-sidebar-body .mr-skill {
  font-size: 0.72rem;
}

.meta-sidebar-body .mr-date {
  font-family: var(--font-mono);
  font-size: 0.58rem;
}

.meta-sidebar-body .mr-details {
  font-size: 0.72rem;
  line-height: 1.4;
  color: rgba(226, 232, 240, 0.45);
  -webkit-line-clamp: 2; /* Clamp strictly to 2 lines */
}

/* Pagination container styling */
.mr-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 0.4rem 0;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  gap: 0.5rem;
}

.mr-page-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.02em;
  min-width: 80px;
  text-align: center;
}

.mr-pagination .meta-btn-icon:disabled {
  opacity: 0.25;
  pointer-events: none;
  border-color: var(--border);
}

/* Date filter row */
.mr-date-row {
  margin-top: 0.5rem;
}

.mr-year-select {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  width: 100%;
  transition: border-color .2s;
}

.mr-year-select:hover,
.mr-year-select:focus {
  border-color: rgba(192,132,252,.5);
  outline: none;
}

/* Swiping animation support */
.meta-sidebar.swiping {
  transition: none !important;
}
/* Evidence Grade Bar */
.grade-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

.grade-row {
  display: flex;
  width: 100%;
  height: 32px;
  border-radius: 8px;
  overflow: hidden;
}

.grade-segment {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--bg);
  position: relative;
}

@keyframes platinum-shimmer {
  0% { background-position: -150% 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  35% { background-position: 150% 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 150% 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
}

.ev-grade-pill,
.otg-badge,
.ev-grade,
.ev-tab {
  position: relative;
  overflow: hidden;
}

body[data-overall-grade="S"] .report-card {
  border-color: rgba(56, 189, 248, 0.22);
  box-shadow: 0 4px 20px rgba(56, 189, 248, 0.04);
}

.grade-segment.grade-plat,
.ev-grade-pill.grade-S,
.otg-badge[data-grade="S"],
.ev-grade[data-grade="S"],
.ev-tab[data-grade="S"].active,
.ev-legend-dot.grade-S,
.se-ev-mag-bar[data-trust-grade="S"],
.plaque__trust-notch[data-trust-grade="S"],
.lb-dist-seg[data-trust-grade="S"],
.lb-dist-key__pip[data-trust-grade="S"],
.lb-grade-pill[data-trust-grade="S"] {
  position: relative;
  overflow: hidden;
  border: 1px solid #3b82f6; /* Stronger blue border */
  background:
    /* animated blue-white shine sweep */
    linear-gradient(105deg, 
      rgba(56, 189, 248, 0) 25%, 
      rgba(191, 219, 254, 0.7) 48%, 
      rgba(255, 255, 255, 0.98) 50%, 
      rgba(191, 219, 254, 0.7) 52%, 
      rgba(56, 189, 248, 0) 75%
    ) -150% 0 / 200% 100% no-repeat,
    /* Curved reflections (radial highlights/shadows) */
    radial-gradient(ellipse at 50% -80px, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 65%),
    radial-gradient(ellipse at 50% 120px, rgba(15, 32, 67, 0.25) 0%, rgba(0, 0, 0, 0) 65%),
    /* SVG horizontal brushed metal grain (highly polished, subtle opacity 0.05) */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.98' numOctaves='2' result='noise'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"),
    /* Specular reflections (tempered / burnt titanium iridescence) */
    linear-gradient(135deg, 
      rgba(224, 231, 255, 0.5) 0%, 
      rgba(192, 132, 252, 0.45) 25%, /* tempered violet hint */
      rgba(56, 189, 248, 0.5) 45%,   /* tempered cyan hint */
      rgba(251, 191, 36, 0.3) 65%,   /* tempered gold hint */
      rgba(224, 231, 255, 0.4) 100%
    ),
    /* Base steel blue-platinum gradient (vibrant light blue) */
    linear-gradient(180deg, #ecf4ff, #a5c7eb);
  background-size: 200% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  animation: platinum-shimmer 7s infinite ease-in-out;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    inset 0 0 10px rgba(147, 197, 253, 0.65), /* ice blue inner glow */
    0 1px 3px rgba(0, 0, 0, 0.35);
  color: #0b2545;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 4px rgba(147, 197, 253, 0.6);
}

.grade-segment.grade-gold,
.ev-grade-pill.grade-A,
.otg-badge[data-grade="A"],
.ev-grade[data-grade="A"],
.ev-tab[data-grade="A"].active,
.ev-legend-dot.grade-A,
.se-ev-mag-bar[data-trust-grade="A"],
.plaque__trust-notch[data-trust-grade="A"],
.lb-dist-seg[data-trust-grade="A"],
.lb-dist-key__pip[data-trust-grade="A"],
.lb-grade-pill[data-trust-grade="A"] {
  border: 1px solid #d99706;
  background:
    /* Specular reflections (anisotropic sheen) */
    linear-gradient(135deg, 
      rgba(255, 255, 255, 0.55) 0%, 
      rgba(255, 255, 255, 0) 30%, 
      rgba(146, 64, 14, 0.12) 45%, 
      rgba(255, 255, 255, 0.45) 50%, 
      rgba(146, 64, 14, 0.12) 55%, 
      rgba(255, 255, 255, 0) 70%, 
      rgba(255, 255, 255, 0.45) 100%
    ),
    /* SVG fine brushed gold grain (opacity 0.08) */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.01 0.95' numOctaves='2' result='noise'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"),
    /* Rich gold gradient base */
    linear-gradient(180deg, #fef08a, #eab308);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    inset 0 0 6px rgba(255, 255, 255, 0.25),
    0 1px 3px rgba(0, 0, 0, 0.25);
  color: #451a03;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

.grade-segment.grade-silver,
.ev-grade-pill.grade-B,
.otg-badge[data-grade="B"],
.ev-grade[data-grade="B"],
.ev-tab[data-grade="B"].active,
.ev-legend-dot.grade-B,
.se-ev-mag-bar[data-trust-grade="B"],
.plaque__trust-notch[data-trust-grade="B"],
.lb-dist-seg[data-trust-grade="B"],
.lb-dist-key__pip[data-trust-grade="B"],
.lb-grade-pill[data-trust-grade="B"] {
  border: 1px solid #475569; /* Darker border */
  background:
    /* Specular reflections (matte sheen) */
    linear-gradient(135deg, 
      rgba(255, 255, 255, 0.25) 0%, 
      rgba(255, 255, 255, 0) 35%, 
      rgba(15, 23, 42, 0.15) 50%, 
      rgba(255, 255, 255, 0.15) 55%, 
      rgba(255, 255, 255, 0) 80%
    ),
    /* SVG coarser brushed silver grain (opacity 0.13) */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.015 0.9' numOctaves='2' result='noise'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"),
    /* Darker silver gradient base */
    linear-gradient(180deg, #8a99ad, #475569);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    inset 0 0 6px rgba(255, 255, 255, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.35);
  color: #0f172a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.grade-segment.grade-bronze,
.ev-grade-pill.grade-C,
.otg-badge[data-grade="C"],
.ev-grade[data-grade="C"],
.ev-tab[data-grade="C"].active,
.ev-legend-dot.grade-C,
.se-ev-mag-bar[data-trust-grade="C"],
.plaque__trust-notch[data-trust-grade="C"],
.lb-dist-seg[data-trust-grade="C"],
.lb-dist-key__pip[data-trust-grade="C"],
.lb-grade-pill[data-trust-grade="C"] {
  border: 1px solid #7c2d12;
  background:
    /* Specular reflections (faint) */
    linear-gradient(135deg, 
      rgba(255, 255, 255, 0.2) 0%, 
      rgba(255, 255, 255, 0) 40%, 
      rgba(0, 0, 0, 0.2) 60%, 
      rgba(255, 255, 255, 0.15) 70%
    ),
    /* SVG rough brushed bronze grain (opacity 0.15) */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.85' numOctaves='2' result='noise'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.15 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"),
    /* Bronze gradient base */
    linear-gradient(180deg, #c2410c, #7c2d12);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 1px 3px rgba(0, 0, 0, 0.3);
  color: #ffedd5;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55);
}

.grade-segment.grade-ungraded,
.ev-grade-pill.grade-ungraded,
.otg-badge[data-grade="—"],
.ev-grade[data-grade="—"],
.ev-tab[data-grade="—"].active,
.ev-legend-dot.grade-ungraded,
.se-ev-mag-bar[data-trust-grade="none"],
.plaque__trust-notch[data-trust-grade="—"],
.plaque__trust-notch[data-trust-grade="none"],
.lb-dist-seg[data-trust-grade="none"],
.lb-dist-key__pip[data-trust-grade="none"],
.lb-grade-pill[data-trust-grade="none"] {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--muted);
}

.grade-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .meta-sidebar-backdrop {
    background: rgba(3, 7, 18, 0.75);
    z-index: 9999;
  }

  .meta-sidebar-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }

  .meta-sidebar {
    top: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    border: none;
    background: rgba(3, 7, 18, 0.99);
    transform: translateX(100%);
  }
  
  .meta-sidebar-header {
    padding: 1rem 1.2rem;
  }

  .meta-sidebar-body {
    padding: 1rem;
  }
}

/* ── Trust Magnitude display (Phase 1.5 I6) ───────────────────────────────── */

/* Small pill: TM number + grade letter. Reuses --grade-S/A/B/C color tokens.
   data-grade="S"|"A"|"B"|"C" or absent for ungraded. */
.tm-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
  white-space: nowrap;
  vertical-align: middle;
}

.tm-badge[data-grade="S"] {
  color: var(--grade-s, #e2e8f0);
  border-color: var(--grade-s-border, rgba(226, 232, 240, 0.35));
  background: var(--grade-s-bg, rgba(226, 232, 240, 0.07));
}

.tm-badge[data-grade="A"] {
  color: var(--grade-a, #fbbf24);
  border-color: var(--grade-a-border, rgba(251, 191, 36, 0.35));
  background: var(--grade-a-bg, rgba(251, 191, 36, 0.07));
}

.tm-badge[data-grade="B"] {
  color: var(--grade-b, #94a3b8);
  border-color: var(--grade-b-border, rgba(148, 163, 184, 0.35));
  background: var(--grade-b-bg, rgba(148, 163, 184, 0.07));
}

.tm-badge[data-grade="C"] {
  color: var(--grade-c, #b45309);
  border-color: var(--grade-c-border, rgba(180, 83, 9, 0.35));
  background: var(--grade-c-bg, rgba(180, 83, 9, 0.07));
}

/* Apex gate checklist: list of predicate pass/fail/flagged-off items */
.apex-gate-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.apex-gate-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--text);
}

/* Pass indicator */
.apex-gate-checklist .apex-pass {
  color: #10b981;
  font-weight: 700;
  flex-shrink: 0;
  font-family: var(--font-mono);
}

/* Fail indicator */
.apex-gate-checklist .apex-fail {
  color: var(--honor-red, #ef4444);
  font-weight: 700;
  flex-shrink: 0;
  font-family: var(--font-mono);
}

/* Feature-flagged-off (neither pass nor fail) */
.apex-gate-checklist .apex-off {
  color: var(--muted);
  flex-shrink: 0;
  font-family: var(--font-mono);
}

.apex-gate-checklist .apex-predicate-name {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
  margin-right: 0.25rem;
}

.apex-gate-checklist .apex-predicate-note {
  font-size: 0.75rem;
  color: var(--muted);
  font-style: italic;
}

/* Trust Magnitude card within report / modal contexts */
.tm-card-value {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.tm-card-number {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}

.tm-card-meta {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
}

/* ── Evidence type pills (shared: evidence library + skill-explorer modal) ── */
.ev-type-pill {
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.67rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  white-space: nowrap;
  display: inline-block;
}
/* Legacy aliases */
.ev-type-pill.type-repo          { background: rgba(56,189,248,.10); color: var(--tier-basic); border: 1px solid rgba(56,189,248,.2); }
.ev-type-pill.type-github-stars  { background: rgba(245,158,11,.12); color: var(--tier-ultimate); border: 1px solid rgba(245,158,11,.25); }
/* Canonical types */
.ev-type-pill.type-fusion-recipe        { background: rgba(245,158,11,.15); color: var(--tier-ultimate); border: 1px solid rgba(245,158,11,.3); }
.ev-type-pill.type-github-stars-own     { background: rgba(245,158,11,.12); color: var(--tier-ultimate); border: 1px solid rgba(245,158,11,.25); }
.ev-type-pill.type-proxy-containment    { background: rgba(124,58,237,.12); color: var(--tier-unique); border: 1px solid rgba(124,58,237,.25); }
.ev-type-pill.type-verifier-attestation { background: rgba(232,121,249,.12); color: var(--rank-4); border: 1px solid rgba(232,121,249,.25); }
.ev-type-pill.type-benchmark-result     { background: rgba(192,132,252,.12); color: var(--tier-extra); border: 1px solid rgba(192,132,252,.25); }
.ev-type-pill.type-arxiv                { background: rgba(192,132,252,.12); color: var(--tier-extra); border: 1px solid rgba(192,132,252,.25); }
.ev-type-pill.type-peer-review          { background: rgba(56,189,248,.12);  color: var(--tier-basic); border: 1px solid rgba(56,189,248,.25); }
.ev-type-pill.type-repo-own             { background: rgba(56,189,248,.10);  color: var(--tier-basic); border: 1px solid rgba(56,189,248,.2); }
.ev-type-pill.type-self-attestation     { background: rgba(100,116,139,.12); color: var(--rank-0); border: 1px solid rgba(100,116,139,.25); }
.ev-type-pill.type-social-signal        { background: rgba(52,211,153,.12);  color: #34d399; border: 1px solid rgba(52,211,153,.25); }

/* ── Per-skill modal evidence cards — mosaic layout ──
   CSS columns fill top-to-bottom then wrap left-to-right, packing tiles
   with zero gaps regardless of height differences. No JS needed. */
.se-ev-grid {
  columns: 3 130px;
  column-gap: 5px;
  margin-top: 0.5rem;
}

/* Card: display block so CSS columns can measure height correctly.
   margin-bottom creates the inter-tile gap (column-gap handles horizontal).
   break-inside: avoid keeps each card intact — never split across columns. */
.se-ev-card {
  display: flex;
  flex-direction: column;
  break-inside: avoid;
  margin-bottom: 5px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: rgba(255,255,255,0.02);
  overflow: hidden;
  width: 100%;   /* fills its column slot fully */
}
/* Wide cards span 2 columns when the grid is ≥ 3 columns */
.se-ev-card--wide {
  column-span: none;  /* let column layout handle width naturally */
}
/* Ghost tiles — narrow column fills fine, no special sizing needed */
.se-ev-card--ghost {
  opacity: 0.4;
}
.se-ev-card:not(.se-ev-card--ghost):hover {
  border-color: rgba(167,139,250,.3);
}

/* Greyed-out placeholder for ungraded / missing evidence */
.se-ev-card--ungraded {
  opacity: 0.5;
  filter: grayscale(0.4);
}

/* Ghost tile appearance — dashed border, muted */
.se-ev-card--ghost {
  border: 1px dashed rgba(255,255,255,0.12);
  background: transparent;
  opacity: 0.4;
  pointer-events: none;
}
.se-ev-ghost-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.se-ev-ghost-hint {
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: var(--muted);
  font-style: italic;
  line-height: 1.3;
}

.se-ev-card-body {
  padding: 8px 10px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.se-ev-card-top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.se-ev-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.se-ev-eval {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
}
.se-ev-date {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
  opacity: 0.6;
  margin-left: auto;
}
/* Freshness indicator — only shown on decay-type evidence rows */
.se-ev-freshness {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 1px 5px;
  cursor: default;
  flex-shrink: 0;
}
.se-ev-freshness--fresh {
  color: #34d399;
  background: rgba(52,211,153,0.08);
  border: 1px solid rgba(52,211,153,0.2);
}
.se-ev-freshness--stale {
  color: var(--tier-ultimate);
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.2);
}
.se-ev-freshness--unverified {
  color: var(--muted);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  opacity: 0.7;
}
.se-ev-notes {
  font-size: 0.75rem;
  color: var(--muted);
  font-style: italic;
  margin-top: 2px;
  border-left: 2px solid var(--border);
  padding-left: 8px;
}
.se-ev-metrics {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.se-ev-metric {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--muted);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 1px 5px;
}
.se-ev-origins {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 3px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.se-ev-origins-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.7;
}
.se-ev-origins-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.se-ev-suite-note {
  font-size: 0.62rem;
  color: var(--muted);
  opacity: 0.55;
  cursor: help;
  font-style: italic;
}
.se-ev-origin-chip {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 1px 5px;
  color: var(--basic, #38bdf8);
  font-size: 0.68rem;
}
.se-ev-link {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px dotted var(--border);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.se-ev-link:hover {
  color: var(--rank-3);
  border-bottom-color: var(--rank-3);
}

/* MAG bar — full-width metallic bar at card bottom, plaque-style */
.se-ev-mag-bar {
  width: 100%;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-top: 1px solid var(--border);
}

/* Grade fills — unified with .grade-segment metallic system above (line ~10398).
   The selectors .se-ev-mag-bar[data-trust-grade="S/A/B/C/none"] are appended to
   each metallic rule so MAG bars render exactly like plaque trust notches and
   the docs/index.html Evidence Grade ladder. No separate fills — single source. */

.se-ev-mag-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.se-ev-mag-num {
  font-weight: 700;
}

.se-ev-link {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px dotted var(--border);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 280px;
}
.se-ev-link:hover {
  color: var(--rank-3);
  border-bottom-color: var(--rank-3);
}

/* (i) info button on MAG bars — shows formula tooltip on hover */
.se-ev-mag-info {
  background: transparent;
  border: 1px solid currentColor;
  color: currentColor;
  border-radius: 50%;
  width: 13px;
  height: 13px;
  font-size: 8px;
  font-family: var(--font-mono);
  font-weight: 700;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  pointer-events: auto;
  opacity: 0.7;
  margin-left: 5px;
  flex-shrink: 0;
}
.se-ev-mag-info:hover {
  opacity: 1;
}

/* (i) button injected into the plaque trust notch in the skill modal */
.se-notch-info {
  background: transparent;
  border: 1px solid currentColor;
  color: currentColor;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  font-size: 8px;
  font-family: var(--font-mono);
  font-weight: 700;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  pointer-events: auto;
  opacity: 0.75;
  margin-left: 8px;
  flex-shrink: 0;
  vertical-align: middle;
}
.se-notch-info:hover {
  opacity: 1;
}

/* (i) button inside type pills */
.ev-type-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.ev-type-pill-info {
  background: transparent;
  border: 1px solid currentColor;
  color: currentColor;
  border-radius: 50%;
  width: 11px;
  height: 11px;
  font-size: 7px;
  font-family: var(--font-mono);
  font-weight: 700;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  pointer-events: auto;
  opacity: 0.6;
  flex-shrink: 0;
}
.ev-type-pill-info:hover { opacity: 1; }
/* Ghost tiles: allow pointer events on the (i) but not the card itself */
.se-ev-card--ghost .ev-type-pill-info {
  pointer-events: auto;
  cursor: help;
}

/* Layer hint — subtle "via generic" tag on evidence rows */
.se-ev-layer-hint {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--muted);
  opacity: 0.55;
  letter-spacing: 0.04em;
  cursor: default;
  margin-left: auto;
}

/* Evidence section header — title + action row */
.se-ev-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.se-ev-section-header h4 {
  margin: 0;
}
.se-ev-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Trust Methodology / Library links — small, muted */
.se-ev-tm-link {
  font-size: 0.72rem;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.se-ev-tm-link:hover { color: var(--text); }

/* Submit CTA button */
.se-ev-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 5px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
  cursor: pointer;
}
.se-ev-submit-btn:hover {
  background: rgba(255,255,255,0.11);
  border-color: rgba(255,255,255,0.35);
  color: var(--text);
}

/* Ghost tiles: pointer-events off for the card body, on for info buttons */
.se-ev-card--ghost .se-ev-card-body {
  pointer-events: none;
}
.se-ev-card--ghost .ev-type-pill-info {
  pointer-events: auto;
}

/* ════════════════════════════════════════════════════════════════════
   Trust Leaderboard preview — embedded under the home hero
   Seamless inline mount of the Named-skills panel (no card wrap, no
   redundant heading — the chart panel itself IS the section header).
   ════════════════════════════════════════════════════════════════════ */
.trust-preview {
  padding:
    clamp(2.75rem, 5vw, 4rem)
    1.25rem
    clamp(3.5rem, 6vw, 5rem);
  max-width: 1180px;
  margin: 0 auto;
}
.trust-preview .lb-embed-host { margin: 0; }
.trust-preview .lb-embed-host #lbNamed { margin: 0; }
.trust-preview-cta {
  margin-top: 0.9rem;
  display: flex;
  justify-content: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.trust-preview-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.25rem;
  border: 1px solid var(--text);
  border-radius: 100px;
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  background: transparent;
  transition: background 0.18s, transform 0.18s, box-shadow 0.18s;
}
.trust-preview-cta-link:hover {
  background: var(--text);
  color: var(--bg);
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(var(--apex-gold-rgb), 0.18);
}
.trust-preview-cta-link--ghost {
  border-color: var(--border);
  color: var(--muted);
}
.trust-preview-cta-link--ghost:hover {
  border-color: var(--text);
  background: transparent;
  color: var(--text);
  box-shadow: none;
}
@media (max-width: 640px) {
  .trust-preview { padding: 1rem 0.75rem 2rem; }
}

/* Homepage narrative rhythm: hero and Hall are full-bleed moments; the
   remaining direct sections share a tighter ledger cadence. */
.home-page .section-divider {
  width: min(54rem, 62vw);
  opacity: 0.72;
}

.home-page > section:not(#hero):not(.hoh-section--mini):not(.trust-preview) {
  padding:
    clamp(4.25rem, 7vw, 6rem)
    1.5rem
    clamp(4.5rem, 7vw, 6.25rem);
}

.home-page > section:not(#hero):not(.trust-preview) > h2,
.home-page > section:not(#hero):not(.trust-preview) .hoh-mini-intro h2 {
  text-wrap: balance;
}

.home-page > section:not(#hero):not(.trust-preview) > .section-sub {
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.65;
  text-wrap: pretty;
}

.home-page #paths {
  max-width: 1120px;
}

.home-page .paths-wrap {
  max-width: 1060px;
  gap: clamp(2rem, 5vw, 4rem);
}

.home-page #ascension,
.home-page #evidence-cycle,
.home-page #meta-reports {
  max-width: 960px;
}