/*
 * nowplaying.css — 37th Chamber · Now Playing widget
 *
 * BLUE LAW: The ONLY blue is on the electric-hex canvas (it paints itself).
 * ALL card text — title, artist, album, status — is GOLD (#FFD60A / --gold)
 * on near-black (#08080a / --bg). Never blue text. Never blue fills on the card.
 *
 * Reuses the site's exact CSS custom properties (defined in index.html :root).
 * If this sheet is loaded in a page that already defines those properties,
 * the fallback literals keep everything correct on isolated pages (e.g., the demo).
 *
 * Layout: [album-art | title + artist + album | status-dot + link]
 *          [progress bar]
 *          [canvas — full width, blue charge band — the ONLY blue here]
 */

/* ── Brand tokens for the widget. Declared UNCONDITIONALLY (literals, not
   self-referential var()) so the widget is correct both on the site (where :root
   already defines identical values — so this is a no-op there) and on isolated
   pages (demo / fixture / tests). The old form `--gold: var(--gold, #FFD60A)`
   referenced ITSELF → a cycle → invalid at computed-value time → every use site
   (color: var(--gold)) fell back to inherited --text, so the card title rendered
   white (#f3eede) instead of gold and the --electric accent bar went transparent.
   Fixed Day-48 alongside the visitor tuner. (Flips the 3 expected-fail guards green.) */
#now-playing {
  --gold:     #FFD60A;
  --gold-soft:#d9b400;
  --bg:       #08080a;
  --text:     #f3eede;
  --dim:      #8f8a73;
  --electric: #0E44FF;
  --font:     'Bahnschrift','DIN Alternate','Century Gothic','Futura',system-ui,sans-serif;
}

/* ── Wrapper ── */
.np-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: rgba(255, 214, 10, 0.015);
  border: 1px solid rgba(255, 214, 10, 0.28);
  overflow: hidden;
  position: relative;
}

/* Left electric-charge accent bar — mirrors the .flagship / stat-card treatment */
.np-wrapper::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--electric);
  box-shadow:
    0 0 8px  rgba(14, 68, 255, 0.95),
    0 0 20px rgba(14, 68, 255, 0.60);
  z-index: 1;
  pointer-events: none;
}

/* ── aria-live region (visually hidden — screen readers only) ── */
.np-live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Card row ── */
.np-card {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2.5vw, 1.1rem);
  padding: clamp(0.85rem, 2.5vw, 1.2rem) clamp(1rem, 3vw, 1.4rem);
  padding-left: calc(clamp(1rem, 3vw, 1.4rem) + 3px); /* clear the accent bar */
}

/* ── Album art ── */
.np-art-wrap {
  flex-shrink: 0;
  width: clamp(44px, 10vw, 64px);
  height: clamp(44px, 10vw, 64px);
}

.np-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid rgba(255, 214, 10, 0.22);
}

/* ── Meta: title / artist / album ── */
.np-meta {
  flex: 1;
  min-width: 0;           /* allow text truncation */
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.np-title {
  font-family: var(--font);
  font-size: clamp(0.88rem, 2.4vw, 1.06rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);     /* BLUE LAW: gold, never blue */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.np-artist {
  font-family: var(--font);
  font-size: clamp(0.78rem, 2vw, 0.92rem);
  color: var(--gold-soft); /* dimmed gold — still gold, not dim/gray */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.np-album {
  font-family: var(--font);
  font-size: clamp(0.68rem, 1.8vw, 0.78rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);      /* site's --dim for tertiary info */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Status: dot + Spotify link ── */
.np-status-wrap {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
}

.np-status-dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dim);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.np-status-dot--playing {
  background: var(--gold);
  box-shadow:
    0 0 4px  rgba(255, 214, 10, 0.90),
    0 0 10px rgba(255, 214, 10, 0.55);
}

.np-status-dot--idle {
  background: var(--dim);
  box-shadow: none;
}

/* Spotify link: gold text, keyboard-focusable */
.np-track-link {
  font-family: var(--font);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
  padding: 0.1rem 0.2rem;
  transition: color 0.14s ease;
  border-radius: 2px;
}

.np-track-link:hover {
  color: var(--gold);
}

/* :focus-visible — keyboard nav, matches site's link treatment */
.np-track-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  color: var(--gold);
}

/* ── Progress bar ── */
.np-progress-bar {
  width: 100%;
  height: 3px;
  background: rgba(143, 138, 115, 0.18);
  position: relative;
  overflow: hidden;
}

.np-progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: var(--gold-soft);
  border-radius: 0;
  /* No CSS transition here — interpolation is driven by rAF in JS for smoothness */
}

/* ── Electric-Hex canvas ── */
/* The ONLY blue element in the widget. The canvas paints itself in the
   #0E44FF palette. No CSS blue is applied — JS/canvas owns all blue. */
.np-hex-canvas {
  display: block;
  width: 100%;
  /* 2x Y (operator-set Day-45): 56/12/80 → 112/24/160. The hex engine rebuilds
     rows to fill whatever height the canvas reports (buildGrid reads logH), so a
     taller band = more rows of the same-size cells, no JS change needed. */
  height: clamp(112px, 24vw, 160px);
  background: var(--bg);  /* near-black floor — canvas paints over this */
}

/* ── Visitor Hearth tuner ──────────────────────────────────────────────────── */
/* BLUE LAW: the panel chrome is gold/dim/near-black ONLY. The single rainbow track
   is a background-IMAGE gradient (its background-COLOR stays transparent), and the
   slider thumbs are ::pseudo-elements — so no real element ever computes to blue.
   The one place colour lives is still the canvas; the tuner just lets the visitor
   rotate that charge for their own session. */
.np-tuner-toggle {
  position: absolute;
  top: 6px; right: 6px;
  z-index: 3;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  color: var(--dim);
  background: rgba(8, 8, 10, 0.55);
  border: 1px solid rgba(255, 214, 10, 0.22);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.np-tuner-toggle:hover,
.np-tuner-toggle:focus-visible,
.np-tuner-toggle--open {
  color: var(--gold);
  border-color: rgba(255, 214, 10, 0.55);
  background: rgba(8, 8, 10, 0.88);
}
.np-tuner-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.np-tuner-panel {
  position: absolute;
  top: 38px; right: 6px;
  z-index: 3;
  width: min(250px, calc(100% - 12px));
  display: flex; flex-direction: column; gap: 0.7rem;
  padding: 0.85rem 0.9rem 0.4rem;
  background: rgba(8, 8, 10, 0.96);
  border: 1px solid rgba(255, 214, 10, 0.30);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
}
.np-tuner-panel[hidden] { display: none; }

.np-tuner-heading {
  font-family: var(--font);
  font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold);
}

.np-tuner-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
}
.np-tuner-label {
  font-family: var(--font);
  font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--dim);
  flex-shrink: 0; min-width: 3.3em;
}

/* ── Range sliders ── */
.np-tuner-slider {
  -webkit-appearance: none; appearance: none;
  flex: 1; height: 4px;
  background: rgba(255, 214, 10, 0.20);   /* gold-tinted track — never blue */
  cursor: pointer;
}
.np-tuner-slider:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.np-tuner-slider--hue {
  /* Rainbow preview anchored at the brand blue (hue 226) so slider-0 == blue.
     background-IMAGE only — background-COLOR stays transparent (Blue-Law safe). */
  background-image: linear-gradient(90deg,
    hsl(226,90%,58%), hsl(286,90%,58%), hsl(346,90%,58%),
    hsl(46,90%,58%), hsl(106,90%,58%), hsl(166,90%,58%), hsl(226,90%,58%));
  background-color: transparent;
}
.np-tuner-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--gold); border: 1px solid #0a0a0c;
  box-shadow: 0 0 4px rgba(255, 214, 10, 0.55);
  cursor: pointer;
}
.np-tuner-slider::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--gold); border: 1px solid #0a0a0c; cursor: pointer;
}

/* ── Segmented controls ── */
.np-tuner-seg { display: flex; gap: 3px; }
.np-seg-btn {
  font-family: var(--font);
  font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--dim);
  background: rgba(255, 214, 10, 0.04);
  border: 1px solid rgba(255, 214, 10, 0.22);
  padding: 0.26rem 0.48rem;
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.np-seg-btn:hover { color: var(--gold); border-color: rgba(255, 214, 10, 0.45); }
.np-seg-btn[aria-pressed="true"] { color: #0a0a0c; background: var(--gold); border-color: var(--gold); }
.np-seg-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.np-auto-btn { flex-shrink: 0; font-size: 0.56rem; padding: 0.2rem 0.42rem; letter-spacing: 0.06em; }

/* ── Reset ── */
.np-tuner-reset {
  font-family: var(--font);
  font-size: 0.58rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--dim);
  background: none; border: none;
  border-top: 1px solid rgba(255, 214, 10, 0.14);
  padding: 0.5rem 0 0.45rem; margin-top: 0.15rem;
  cursor: pointer; text-align: right;
  transition: color 0.12s ease;
}
.np-tuner-reset:hover { color: var(--gold); }
.np-tuner-reset:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── Responsive: narrow (below ~380px) ── */
@media (max-width: 380px) {
  .np-art-wrap {
    display: none;  /* drop art on very small viewports to keep title readable */
  }
  .np-album {
    display: none;
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .np-status-dot,
  .np-track-link,
  .np-tuner-toggle,
  .np-seg-btn,
  .np-tuner-reset {
    transition-duration: 0.01ms !important;
  }
  /* Progress fill: no CSS animation; JS rAF respects reducedMotion too */
}