/* ============================================================================
   nav.css — the top bar, shared by index.html and gallery.html so both look the same.
   On the main page experience.css already defines the --x-* tokens; the gallery page has no
   experience.css, so the bar's tokens are also set here, on the bar only. In the 8-bit design
   pixel.css sets them for the whole page, so these stand aside there.
   ========================================================================== */
html:not([data-design="pixel"]) .nav {
  --x-bg: #ffffff; --x-text: #1d1d1f; --x-muted: #6e6e73; --x-faint: #86868b; --x-hair: rgba(0, 0, 0, 0.1);
  --x-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --x-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --color-nav-bg: rgba(255, 255, 255, 0.72); --color-nav-bg-scrolled: rgba(255, 255, 255, 0.8);
  --color-nav-bg-mobile: rgba(255, 255, 255, 0.97);
  font-family: var(--x-font);
}
html[data-theme="dark"]:not([data-design="pixel"]) .nav {
  --x-bg: #000000; --x-text: #f5f5f7; --x-muted: #a1a1a6; --x-faint: #86868b; --x-hair: rgba(255, 255, 255, 0.12);
  --color-nav-bg: rgba(0, 0, 0, 0.72); --color-nav-bg-scrolled: rgba(0, 0, 0, 0.8); --color-nav-bg-mobile: rgba(10, 10, 11, 0.97);
}
:root { --nav-height: 48px; }

/* ---------- Navigation ---------- */
.nav {
  height: var(--nav-height);
  border-bottom: 1px solid var(--x-hair);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.nav.nav--scrolled { box-shadow: none; }
.nav-inner { max-width: 1080px; }
.nav-brand { font-family: var(--x-display); font-size: 1rem; font-weight: 600; letter-spacing: -0.015em; }
.nav-brand:hover { color: var(--x-text); text-decoration: none; }
.nav-links { gap: 1.6rem; }
.nav-links a { font-family: var(--x-font); font-size: 0.75rem; font-weight: 400; letter-spacing: -0.01em; color: var(--x-text); opacity: 0.8; }   /* font set here too: index.css gives links the page's body font */
.nav-links a:hover, .nav-links a.active { opacity: 1; color: var(--x-text); text-decoration: none; }
.nav-links a::after { display: none; }
.nav-theme-toggle { color: var(--x-text); opacity: 0.8; margin-left: 1.2rem; }
.nav-search {
  margin-left: 0.6rem;
  background: none;
  border: 1px solid var(--x-hair);
  border-radius: 7px;
  padding: 0.12rem 0.45rem;
  cursor: pointer;
  color: var(--x-muted);
  line-height: 1;
}
.nav-search kbd { font: 500 0.6875rem var(--x-font); letter-spacing: 0; }
.nav-search i { display: none; font-size: 0.8rem; }
/* Touch screens have no shortcut to show: a magnifier instead of the key. */
@media (pointer: coarse) {
  .nav-search { border: 0; padding: 0.3rem; }
  .nav-search kbd { display: none; }
  .nav-search i { display: inline; }
}
.nav-search:hover { color: var(--x-text); border-color: var(--x-faint); }
.nav-star { color: var(--x-faint); }

/* ---------- Rain + music button (sound.js) ---------- */
.nav-music {
  margin-left: 1.2rem;
  background: none;
  border: 0;
  padding: 0.3rem;
  cursor: pointer;
  color: var(--x-text);
  opacity: 0.8;
  font-size: 0.85rem;
  line-height: 1;
}
.nav-music:hover { opacity: 1; }
.nav-music + .nav-theme-toggle { margin-left: 0.6rem; }

/* Listen: moved out of the link list, next to the gallery icon; icon only on narrow bars */
.nav-listen { margin-left: 1rem; font-family: var(--x-font); letter-spacing: -0.022em; font-size: 0.75rem; color: var(--x-text); opacity: 0.8; white-space: nowrap; text-decoration: none; }
.nav-listen:hover { opacity: 1; text-decoration: none; }
@media (max-width: 900px) { .nav-listen-text { display: none; } .nav-listen { margin-left: 0.8rem; } }
/* Rain + music button: green play, red stop while playing */
#navMusic { color: #30d158; opacity: 1; padding: 0.3rem 0.45rem; }
#navMusic.is-playing { color: #ff453a; }
:root:not([data-theme="dark"]) #navMusic { color: #1f9d48; }
:root:not([data-theme="dark"]) #navMusic.is-playing { color: #d70015; }

/* Very narrow phones (about 360 px): everything in the bar must still fit */
@media (max-width: 380px) {
  .nav-brand { font-size: 0.9rem; }
  .nav-music, .nav-theme-toggle, .nav-search, .nav-listen, .nav-star { margin-left: 0.45rem; }
  #navMusic, .nav-design { padding-left: 0.25rem; padding-right: 0.25rem; }
}