/* theme.css — shared palette + theme layer for naterich.net.
   Loaded first (absolute /theme.css) on every page, before each page's own CSS.

   - Canonical tokens live in :root (deep-dark default).
   - Legacy names used by the older tool pages are ALIASED to canonical via var(),
     so they re-resolve automatically when a theme changes the canonical token.
   - Five themes via html[data-theme="…"]; attribute
     specificity (0,1,1) beats a page's own :root (0,1,0), so overrides always win.
   - Type-scale + spacing tokens give one lever for future tuning. Rule-of-5 scale
     (8/9/10/12/15) + a 6px micro floor and an 18px hero/display step. */

/* Site-wide rule (Nate): links never carry an underline -- not even a dotted
   one. Faux-underlines via border-bottom are removed per-page; this kills the
   native text-decoration everywhere. */
a { text-decoration: none; }

/* Theme-accurate tooltip (replaces native title= chrome; see installTooltips in
   theme.js). Fixed to the viewport so it survives table/overflow clipping. */
.nr-tip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  max-width: 260px;
  padding: 4px 8px;
  border: 0.5px solid var(--green-bd);
  border-radius: 4px;
  background: color-mix(in srgb, var(--panel) 92%, var(--bg));
  color: var(--text);
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: 0.05em;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s ease;
}
.nr-tip[data-show="true"] { opacity: 1; }
/* semantic color variants — mirror the source element's accent (set via
   data-tip-color on the trigger), matching /chance/'s inline .tip-* tooltips. */
.nr-tip[data-tip-color="green"]  { background: var(--green-bg);  border-color: var(--green-bd);  color: var(--green); }
.nr-tip[data-tip-color="gold"]   { background: var(--gold-bg);   border-color: var(--gold-bd);   color: var(--gold); }
.nr-tip[data-tip-color="purple"] { background: var(--purple-bg); border-color: var(--purple-bd); color: var(--purple); }

:root,
html[data-theme="dark"] {
  /* canonical */
  --bg: #0d0f0d;
  --panel: #131513;
  --panel-sunken: #080908;
  --line: #3a352e;
  --line-bright: #5f594f;
  --text: #ece9df;
  --muted: #a6a195;
  --dim: #6c665b;
  --faint: #4b463e;

  /* theme palette — every page recolors when these shift, because nearly all
     icon and UI accents reference --green / --purple / --gold and companions. */
  --green: #72d06c;  --green-dim: #183817;  --green-bd: #2d6b2d;
  --purple: #d06cff; --purple-dim: #241334; --purple-bd: #6f35a4;
  --gold: #e1c241;   --gold-dim: #2d2810;   --gold-bd: #7c691b;
  --red: #d98b94;    --red-dim: #34161b;    --red-bd: #7c3a42;
  --theme-active: var(--purple);
  --theme-active-dim: var(--purple-dim);
  --theme-active-bd: var(--purple-bd);

  /* matrix-rain glyph color (read by site.js via getComputedStyle).
     Triplet form so site.js can interpolate alpha without a hex parser. */
  --matrix-rgb: 114, 208, 108;
  --matrix-head-rgb: 180, 244, 173;
  --matrix-bg-rgb: 13, 15, 13;

  /* strategy roster hues (stable across themes) */
  --cyan: #45d6e0;   --cyan-bd: #1f6e75;
  --blue: #6ca0ff;   --blue-bd: #2f4f9e;
  --violet: #9b8cff; --violet-bd: #473f9e;
  --pink: #ff6cc4;   --pink-bd: #9e306f;
  --rose: #ff8a98;   --rose-bd: #9e3a44;
  --orange: #f0944d; --orange-bd: #934f1f;
  --amber: #f0b94d;  --amber-bd: #8a661b;
  --lime: #b6e34f;   --lime-bd: #5f7a1f;

  /* glow used by the hero / brand */
  --glow-gold: rgba(225, 194, 65, 0.12);

  /* ── type scale — rule-of-5: 8/9/10/12/15, + one 18px display step ── */
  --fs-hero: 18px;   /* home wordmark (display, off-scale) */
  --fs-h1: 15px;     /* page title */
  --fs-h2: 12px;     /* section label */
  --fs-h3: 12px;
  --fs-lead: 12px;   /* lead paragraph */
  --fs-body: 10px;   /* body */
  --fs-nav: 12px;    /* top nav */
  --fs-small: 9px;
  --fs-micro: 8px;   /* labels / chips / dense data */
  --sp: 14px;        /* base spacing unit */

  --mono: ui-monospace, "SF Mono", Menlo, "Cascadia Code", "Roboto Mono", monospace;
}

/* legacy aliases (older tool pages reference these names) → follow canonical */
:root {
  --bg-card: var(--panel);
  --bg-sunken: var(--panel-sunken);
  --bd: var(--line);
  --bd-bright: var(--line-bright);
  --tx: var(--text);
  --tx-mute: var(--muted);
  --tx-dim: var(--dim);
  --tx-faint: var(--faint);
  --green-bg: var(--green-dim);
  --purple-bg: var(--purple-dim);
  --gold-bg: var(--gold-dim);
  --red-bg: var(--red-dim);
  --purple-bd2: var(--purple-bd);
}

/* ── Blood — near-black red mode. It stays close to Dark's luminance; the red
      ink is brightened enough to read without turning the canvas gray/light. ── */
html[data-theme="blood"] {
  --bg: #100b0b;
  --panel: #131513;
  --panel-sunken: #080908;
  --line: #3a352e;
  --line-bright: #5f594f;
  --text: #ece9df;
  --muted: #a6a195;
  --dim: #6c665b;
  --faint: #4b463e;

  /* the swap: --green now points at red values. Blood's secondary accent is
     ember instead of default violet so links/icons stay in the same family. */
  --green: #ff6262;  --green-dim: #3b1214;  --green-bd: #a83737;
  --purple: #ff8f70; --purple-dim: #331913; --purple-bd: #9b4d3e;
  --gold: #e1c241;   --gold-dim: #2d2810;   --gold-bd: #7c691b;
  /* keep --red distinct so error/danger states stay legible against the new accent */
  --red: #ff7c86;    --red-dim: #3a1216;    --red-bd: #a83a44;
  --theme-active: var(--green);
  --theme-active-dim: var(--green-dim);
  --theme-active-bd: var(--green-bd);

  --matrix-rgb: 255, 98, 98;
  --matrix-head-rgb: 255, 150, 150;
  --matrix-bg-rgb: 16, 11, 11;

  --glow-gold: rgba(225, 194, 65, 0.14);

  /* re-assert legacy aliases at theme specificity so the inline-styled tool
     pages (which redefine these literally in their own :root) follow the theme */
  --bg-card: var(--panel); --bg-sunken: var(--panel-sunken);
  --bd: var(--line); --bd-bright: var(--line-bright);
  --tx: var(--text); --tx-mute: var(--muted); --tx-dim: var(--dim); --tx-faint: var(--faint);
  --green-bg: var(--green-dim); --purple-bg: var(--purple-dim); --gold-bg: var(--gold-dim); --red-bg: var(--red-dim);
}

/* ── Dusk — night-blue twilight pushing in against a setting-sun orange accent.
      Slightly deeper/bluer than the old graphite so text has more bite while
      staying warmer and lighter than Dark / Blood (not a light mode). ── */
html[data-theme="dusk"] {
  --bg: #101729;
  --panel: #151c2f;
  --panel-sunken: #0a1020;
  --line: #2f3954;
  --line-bright: #53617c;
  --text: #edf0f8;
  --muted: #a8b0c2;
  --dim: #6d7790;
  --faint: #4b5570;

  --green: #f0a04d;  --green-dim: #3a2413;  --green-bd: #8d5a28;
  --purple: #b86cff; --purple-dim: #251631; --purple-bd: #6c3f96;
  --gold: #ffd36a;   --gold-dim: #3d2f13;   --gold-bd: #b68a2f;
  --red: #e39a8d;    --red-dim: #40251f;    --red-bd: #935a50;
  --theme-active: var(--green);
  --theme-active-dim: var(--green-dim);
  --theme-active-bd: var(--green-bd);

  --matrix-rgb: 240, 160, 77;
  --matrix-head-rgb: 255, 198, 126;
  --matrix-bg-rgb: 10, 16, 32;

  --glow-gold: rgba(225, 194, 65, 0.14);

  --bg-card: var(--panel); --bg-sunken: var(--panel-sunken);
  --bd: var(--line); --bd-bright: var(--line-bright);
  --tx: var(--text); --tx-mute: var(--muted); --tx-dim: var(--dim); --tx-faint: var(--faint);
  --green-bg: var(--green-dim); --purple-bg: var(--purple-dim); --gold-bg: var(--gold-dim); --red-bg: var(--red-dim);
}
/* Dusk only: night drawing in from one side, a faint warm sun-glow on the other.
   Layered over --bg so the solid colour still backs knockout fills elsewhere. */
html[data-theme="dusk"] body {
  background-image: linear-gradient(105deg, #0a1020 0%, #101729 56%, #201827 100%);
  background-attachment: fixed;
}

/* -- Ice — dark glacial blue mode. Cold and high-contrast, but still in the
      same dark family as the rest of the set. -- */
html[data-theme="ice"] {
  --bg: #06111a;
  --panel: #0f1d28;
  --panel-sunken: #02070c;
  --line: #263f52;
  --line-bright: #557184;
  --text: #edf7fb;
  --muted: #a6bac6;
  --dim: #6f8797;
  --faint: #496170;

  --green: #2fb8ff;  --green-dim: #062d49;  --green-bd: #1777ad;
  --purple: #c28bff; --purple-dim: #2b1a46; --purple-bd: #7650b6;
  --gold: #ffffff;   --gold-dim: #203844;   --gold-bd: #9ec9d8;
  --red: #ff8ea1;    --red-dim: #3a1820;    --red-bd: #9b4050;
  --theme-active: var(--green);
  --theme-active-dim: var(--green-dim);
  --theme-active-bd: var(--green-bd);

  --matrix-rgb: 47, 184, 255;
  --matrix-head-rgb: 172, 226, 255;
  --matrix-bg-rgb: 6, 17, 26;

  --glow-gold: rgba(255, 255, 255, 0.18);

  --bg-card: var(--panel); --bg-sunken: var(--panel-sunken);
  --bd: var(--line); --bd-bright: var(--line-bright);
  --tx: var(--text); --tx-mute: var(--muted); --tx-dim: var(--dim); --tx-faint: var(--faint);
  --green-bg: var(--green-dim); --purple-bg: var(--purple-dim); --gold-bg: var(--gold-dim); --red-bg: var(--red-dim);
}
html[data-theme="ice"] body {
  background-image: linear-gradient(105deg, #02070c 0%, #06111a 54%, #103047 100%);
  background-attachment: fixed;
}

/* -- Grove — warm cherry/maple dark mode with sage-leaf accents. This is the
      approachable warm option for people who do not want blue, red, or black. -- */
html[data-theme="grove"] {
  --bg: #21120f;
  --panel: #2b1712;
  --panel-sunken: #140907;
  --line: #523128;
  --line-bright: #815848;
  --text: #f0e4d8;
  --muted: #bda796;
  --dim: #887060;
  --faint: #654c40;

  --green: #7fd466;  --green-dim: #193319;  --green-bd: #45823a;
  --purple: #8fd3a1; --purple-dim: #183323; --purple-bd: #4d8a5c;
  --gold: #d6a464;   --gold-dim: #3d2818;   --gold-bd: #956a3c;
  --red: #dd8874;    --red-dim: #351914;    --red-bd: #8f5145;
  --theme-active: var(--green);
  --theme-active-dim: var(--green-dim);
  --theme-active-bd: var(--green-bd);

  --matrix-rgb: 127, 212, 102;
  --matrix-head-rgb: 186, 239, 170;
  --matrix-bg-rgb: 33, 18, 15;

  --glow-gold: rgba(199, 168, 121, 0.16);

  --bg-card: var(--panel); --bg-sunken: var(--panel-sunken);
  --bd: var(--line); --bd-bright: var(--line-bright);
  --tx: var(--text); --tx-mute: var(--muted); --tx-dim: var(--dim); --tx-faint: var(--faint);
  --green-bg: var(--green-dim); --purple-bg: var(--purple-dim); --gold-bg: var(--gold-dim); --red-bg: var(--red-dim);
}
html[data-theme="grove"] body {
  background-image: linear-gradient(105deg, #170b08 0%, #21120f 64%, #2a1711 100%);
  background-attachment: fixed;
}

/* ───────────── theme switcher (injected by theme.js) ───────────── */
.nr-theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 2px;
  border: 0.5px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  position: relative;
}
.nr-theme-switch button {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  overflow: hidden;
  transition: color 0.12s ease, background 0.12s ease, width 0.14s ease, opacity 0.12s ease;
}
.nr-theme-switch button[data-theme="dark"] {
  --sw-accent: #72d06c;
  --sw-dim: #183817;
  --sw-bd: #2d6b2d;
}
.nr-theme-switch button[data-theme="blood"] {
  --sw-accent: #ff6262;
  --sw-dim: #3b1214;
  --sw-bd: #a83737;
}
.nr-theme-switch button[data-theme="dusk"] {
  --sw-accent: #f0a04d;
  --sw-dim: #3a2413;
  --sw-bd: #8d5a28;
}
.nr-theme-switch button[data-theme="ice"] {
  --sw-accent: #2fb8ff;
  --sw-dim: #062d49;
  --sw-bd: #1777ad;
}
.nr-theme-switch button[data-theme="grove"] {
  --sw-accent: #7bdc67;
  --sw-dim: #17351b;
  --sw-bd: #3d813e;
}
.nr-theme-switch button:hover {
  color: var(--sw-accent, var(--theme-active));
  background: color-mix(in srgb, var(--sw-accent, var(--theme-active)) 12%, transparent);
}
/* Collapsed by default: only the active theme shows. Hover/focus or a touch-open
   state reveals the other options. Each option previews its own accent. */
.nr-theme-switch:not(:hover):not(:focus-within):not([data-open="true"]) button:not([aria-pressed="true"]) {
  width: 0;
  opacity: 0;
  pointer-events: none;
}
.nr-theme-switch button[aria-pressed="true"] {
  color: var(--sw-accent, var(--theme-active));
  background: color-mix(in srgb, var(--sw-accent, var(--theme-active)) 16%, transparent);
}
.nr-theme-switch svg { width: 13px; height: 13px; display: block; }
.nr-theme-switch button:focus-visible { outline: 1px solid var(--sw-accent, var(--theme-active)); outline-offset: 1px; }
.nr-theme-switch button[data-label]::after {
  content: attr(data-label);
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  padding: 3px 7px;
  border: 0.5px solid var(--sw-bd, var(--theme-active-bd));
  border-radius: 5px;
  background: var(--sw-dim, var(--theme-active-dim));
  color: var(--sw-accent, var(--theme-active));
  font-size: 8px;
  letter-spacing: .04em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
  z-index: 30;
}
.nr-theme-switch button:hover::after,
.nr-theme-switch button:focus-visible::after { opacity: 1; }

/* Shared header dropdowns attached by theme.js. Existing header links remain the
   triggers; the panels only appear on hover/focus so the static markup stays
   readable and keyboard-reachable without per-page nav scripts. */
header.top > .nr-theme-switch,
.top > .nr-theme-switch {
  margin-left: auto;
}
.nr-audio-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  isolation: isolate;
}
.top > .nr-audio-wrap,
header.top > .nr-audio-wrap,
header > .nr-audio-wrap {
  margin-left: auto;
}
.top > .nr-audio-wrap + .nr-theme-switch,
header.top > .nr-audio-wrap + .nr-theme-switch,
header > .nr-audio-wrap + .nr-theme-switch {
  margin-left: 2px;
}
.nr-audio-toggle {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0.5px solid var(--line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  color: var(--dim);
  cursor: pointer;
  position: relative;
  z-index: 3;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease, transform 0.16s ease;
}
.nr-audio-toggle:hover,
.nr-audio-toggle:focus-visible {
  color: var(--green);
  border-color: var(--green-bd);
  background: color-mix(in srgb, var(--green) 14%, transparent);
  outline: none;
}
.nr-audio-toggle[aria-pressed="true"] {
  color: var(--green);
  border-color: var(--green-bd);
  background: color-mix(in srgb, var(--green) 13%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--green) 28%, transparent);
}
.nr-audio-toggle[aria-pressed="true"]:hover,
.nr-audio-toggle[aria-pressed="true"]:focus-visible {
  color: var(--green);
  border-color: var(--green-bd);
  background: color-mix(in srgb, var(--green) 14%, transparent);
}
.nr-audio-toggle[data-pending="true"] {
  color: var(--gold);
  border-color: var(--gold-bd);
}
.nr-audio-toggle svg {
  width: 11px;
  height: 11px;
  display: block;
}
/* Panel drops straight down from the icon, right-aligned so its 184px width
   extends leftward and stays on-screen (the icon lives near the header's right
   edge). The icon stays put -- no more "run-away". */
.top .nr-audio-panel,
header.top .nr-audio-panel,
header .nr-audio-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  width: 184px;
  min-height: 20px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  padding: 5px 8px 6px;
  border: 0.5px solid var(--green-bd);
  border-radius: 8px;
  background: color-mix(in srgb, var(--green-dim) 26%, var(--panel));
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
}
/* transparent bridge across the vertical gap so hover never drops between the
   icon and the panel below it */
.nr-audio-panel::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 10px;
}
.top .nr-audio-wrap:hover .nr-audio-panel,
.top .nr-audio-wrap:focus-within .nr-audio-panel,
header.top .nr-audio-wrap:hover .nr-audio-panel,
header.top .nr-audio-wrap:focus-within .nr-audio-panel,
header .nr-audio-wrap:hover .nr-audio-panel,
header .nr-audio-wrap:focus-within .nr-audio-panel,
.nr-audio-wrap[data-open="true"] .nr-audio-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* master: tiny centered label + horizontal slider across the top */
.nr-audio-master {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}
.nr-audio-master-label {
  font-size: 7px;
  letter-spacing: 0.14em;
  text-align: center;
  color: var(--dim);
}

/* body: vertical melody fader | center column | vertical background fader */
.nr-audio-body {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: stretch;
  gap: 7px;
}
.nr-audio-fader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.nr-audio-fader > span {
  font-size: 7px;
  letter-spacing: 0.06em;
  color: var(--dim);
}
.nr-audio-center {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* layer on/off toggles — purple on hover, green when active */
.nr-audio-layers {
  display: flex;
  gap: 4px;
}
.nr-audio-layers button {
  flex: 1;
  min-height: 18px;
  padding: 2px 4px;
  border: 0.5px solid var(--line);
  border-radius: 4px;
  background: var(--panel-sunken);
  color: var(--dim);
  font: inherit;
  font-size: 8px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.nr-audio-layers button:hover,
.nr-audio-layers button:focus-visible {
  color: var(--purple);
  border-color: var(--purple-bd);
  outline: none;
}
.nr-audio-layers button[aria-pressed="true"] {
  color: var(--green);
  border-color: var(--green-bd);
  background: color-mix(in srgb, var(--green-dim) 70%, var(--panel-sunken));
}

/* reset melody — purple on hover */
.nr-audio-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 18px;
  padding: 2px 6px;
  border: 0.5px solid var(--line);
  border-radius: 4px;
  background: var(--panel-sunken);
  color: var(--dim);
  font: inherit;
  font-size: 8px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.nr-audio-reset svg { width: 11px; height: 11px; display: block; }
.nr-audio-reset:hover,
.nr-audio-reset:focus-visible {
  color: var(--purple);
  border-color: var(--purple-bd);
  outline: none;
}

/* custom dropdowns — styled like the main-nav panels, in green, click-open */
.nr-audio-dd { position: relative; display: block; }
.nr-audio-dd-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
  min-height: 19px;
  padding: 2px 6px;
  border: 0.5px solid var(--line);
  border-radius: 4px;
  background: color-mix(in srgb, var(--green-dim) 30%, var(--panel-sunken));
  color: var(--green);
  font: inherit;
  font-size: 9px;
  letter-spacing: 0.03em;
  cursor: pointer;
}
.nr-audio-dd-trigger::after {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: 0.8;
}
.nr-audio-dd-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nr-audio-dd-trigger:hover,
.nr-audio-dd[data-open="true"] .nr-audio-dd-trigger {
  border-color: var(--green-bd);
  outline: none;
}
.nr-audio-dd-menu {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  z-index: 41;
  display: grid;
  gap: 1px;
  padding: 5px;
  border: 0.5px solid var(--green-bd);
  border-radius: 7px;
  background: color-mix(in srgb, var(--panel) 94%, var(--bg));
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2px);
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s ease;
}
.nr-audio-dd[data-open="true"] .nr-audio-dd-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.nr-audio-dd-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 5px 7px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 9px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
}
.nr-audio-dd-option:hover,
.nr-audio-dd-option:focus-visible {
  color: var(--green) !important;
  background: color-mix(in srgb, var(--green) 14%, transparent);
  outline: none;
}
.nr-audio-dd-option[aria-pressed="true"] { color: var(--green); }

/* credit — gray, gold on hover */
.nr-audio-lite {
  font-size: 9px;
  letter-spacing: 0.03em;
  text-align: center;
  color: var(--gold);
  white-space: nowrap;
  cursor: help;
  opacity: 0.85;
}
.nr-audio-credit {
  font-size: 9px;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--dim);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.12s ease;
}
.nr-audio-credit:hover,
.nr-audio-credit:focus-visible {
  color: var(--gold);
  outline: none;
}

/* horizontal master slider — green thumb (no purple accent) */
.nr-audio-panel input#nr-audio-volume[type="range"] {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: var(--line);
  cursor: pointer;
  display: block;
}
.nr-audio-panel input#nr-audio-volume[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: var(--line); }
.nr-audio-panel input#nr-audio-volume[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 50%;
  background: var(--green);
  margin-top: -3.5px;
}
.nr-audio-panel input#nr-audio-volume[type="range"]::-moz-range-track { height: 3px; border-radius: 3px; background: var(--line); }
.nr-audio-panel input#nr-audio-volume[type="range"]::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--green); }

/* vertical level faders — green thumb */
.nr-audio-fader input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  writing-mode: vertical-lr;
  direction: rtl;
  width: 3px;
  height: 58px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: var(--line);
  cursor: pointer;
}
.nr-audio-fader input[type="range"]::-webkit-slider-runnable-track { width: 3px; border-radius: 3px; background: var(--line); }
.nr-audio-fader input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 50%;
  background: var(--green);
  margin-left: -3.5px;
}
.nr-audio-fader input[type="range"]::-moz-range-track { width: 3px; border-radius: 3px; background: var(--line); }
.nr-audio-fader input[type="range"]::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--green); }
.nr-nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nr-nav-trigger {
  position: relative;
  z-index: 2;
  text-decoration: none;
  color: inherit;
}
/* keep the trigger purple while its dropdown is open */
.nr-nav-item:hover .nr-nav-trigger,
.nr-nav-item:focus-within .nr-nav-trigger { color: var(--purple) !important; }
.nr-nav-panel {
  position: absolute;
  top: calc(100% + 7px);
  left: -8px;
  z-index: 40;
  min-width: 150px;
  display: grid;
  gap: 1px;
  padding: 6px;
  border: 0.5px solid var(--purple-bd);
  border-radius: 7px;
  background: color-mix(in srgb, var(--panel) 94%, var(--bg));
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2px);
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s ease;
}
.nr-nav-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -8px;
  height: 8px;
}
.nr-nav-item:hover .nr-nav-panel,
.nr-nav-item:focus-within .nr-nav-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.nr-nav-panel a,
.top .nr-nav-panel a,
header.top .nr-nav-panel a {
  display: block;
  padding: 6px 8px;
  border-radius: 5px;
  color: var(--muted);
  font-size: var(--fs-nav, 11px);
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
}
.nr-nav-panel a:hover,
.nr-nav-panel a:focus-visible,
.top .nr-nav-panel a:hover,
.top .nr-nav-panel a:focus-visible,
header.top .nr-nav-panel a:hover,
header.top .nr-nav-panel a:focus-visible {
  color: var(--purple) !important;
  background: color-mix(in srgb, var(--purple) 14%, transparent);
  outline: none;
}

html[data-nr-navigating="true"] body {
  opacity: 0;
}
body {
  transition: opacity 0.08s ease;
}

@media (max-width: 560px) {
  /* Left-align to the trigger so the panel drops down-and-right and never
     clips off the left edge for left-positioned items (Docs/Lab/Tools). */
  .nr-nav-panel {
    left: 0;
    transform: translateY(-2px);
  }
  .nr-nav-item:hover .nr-nav-panel,
  .nr-nav-item:focus-within .nr-nav-panel {
    transform: translateY(0);
  }
}