/* === Reset & root === */
*, *::before, *::after { box-sizing: border-box; }
:root {
  --bg:           #0A0A0B;
  --surface:      #121214;
  --surface-2:    #1A1A1D;
  --border:       #1F1F22;
  --text:         #E5E5E7;
  --muted:        #8B8B92;
  --accent:       #4DA8FF;
  --accent-hover: #7CC2FF;
  --error:        #FF6B6B;
  --radius:       12px;
  --radius-sm:    6px;
  --shadow:       0 4px 24px rgba(0, 0, 0, 0.4);
}

html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
button { font-family: inherit; }

h1, h2, h3, h4 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; line-height: 1.2; margin: 0 0 0.5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.875rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.25rem; }

/* === Layout === */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; width: 100%; }
main { flex: 1; padding: 1.5rem 0 4rem; }

/* === Header === */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 10, 11, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 1rem; gap: 1rem; }
.site-header__brand { display: inline-flex; align-items: center; text-decoration: none; transition: opacity 0.15s ease; }
.site-header__logo { height: 48px; width: auto; display: block; }
.site-header__brand:hover { opacity: 0.85; text-decoration: none; }
@media (max-width: 640px) { .site-header__logo { height: 40px; } }
.site-nav { display: flex; gap: 1.5rem; }
.site-nav a { color: var(--muted); font-size: 0.9375rem; }
.site-nav a:hover { color: var(--text); text-decoration: none; }
.site-nav a.active { color: var(--text); }

/* Brand wordmark — "NEXT" rendered amber for the styled body uses of the
   brand name. Plain text contexts (titles, meta, alt) keep SITE_NAME and
   render with no styling. See {% brand_name %} in core/templatetags/site_extras.py. */
.brand-next { color: #E69138; font-weight: 600; }

/* Person-name emphasis — same accent treatment used for artist names on
   the song-detail / song-card surfaces. Used in prose where a specific
   person is being highlighted (e.g. /about/ co-founders). */
.person-name { color: var(--accent); font-weight: 500; }

/* === Footer === */
.site-footer { border-top: 1px solid var(--border); padding: 2rem 0; color: var(--muted); font-size: 0.875rem; margin-top: 4rem; }
.site-footer__inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--text); }

/* === Breadcrumb === */
.breadcrumb { color: var(--muted); font-size: 0.875rem; margin-bottom: 1rem; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--text); }

/* === Filter bar === */
.filter-bar { margin: 1rem 0 2rem; display: flex; flex-direction: column; gap: 0.75rem; }
.filter-bar__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filter-bar__chip {
  display: inline-flex; align-items: center; padding: 0.4rem 0.875rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  color: var(--muted); font-size: 0.875rem; cursor: pointer; text-decoration: none;
  transition: all 0.15s ease;
}
.filter-bar__chip:hover { color: var(--text); border-color: var(--muted); text-decoration: none; }
.filter-bar__chip.is-active { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.filter-bar__chip.is-active:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--bg); }
.filter-bar__row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.filter-bar__select {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem; font-size: 0.875rem; font-family: inherit;
  cursor: pointer;
}
.filter-bar__select:hover { border-color: var(--muted); }
.filter-bar__select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* === Song grid === */
.song-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 640px)  { .song-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px)  { .song-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1280px) { .song-grid { grid-template-columns: repeat(5, 1fr); } }

.song-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: transform 0.15s ease, border-color 0.15s ease; }
.song-card:hover { transform: translateY(-2px); border-color: var(--muted); }
.song-card a { color: inherit; text-decoration: none; display: block; }
.song-card__cover { position: relative; aspect-ratio: 1 / 1; background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--border); }
.song-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.song-card__body { padding: 0.625rem 0.75rem 0.75rem; }
.song-card__title { font-family: 'Fraunces', Georgia, serif; font-size: 0.9375rem; font-weight: 600; color: var(--text); margin: 0 0 0.125rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song-card__artist { color: var(--accent); font-weight: 500; font-size: 0.8125rem; line-height: 1.3; margin-bottom: 0.125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song-card__meta { color: var(--muted); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* === Empty state === */
.empty-state { padding: 4rem 1rem; text-align: center; color: var(--muted); }

/* === Pagination === */
.pagination { display: flex; justify-content: center; gap: 0.25rem; margin: 2.5rem 0 1rem; flex-wrap: wrap; }
.pagination a, .pagination span { padding: 0.5rem 0.875rem; border-radius: var(--radius-sm); color: var(--muted); font-size: 0.875rem; border: 1px solid transparent; }
.pagination a:hover { color: var(--text); border-color: var(--border); text-decoration: none; }
.pagination .is-current { background: var(--surface); color: var(--text); border-color: var(--border); }
.pagination .is-disabled { color: var(--surface-2); cursor: not-allowed; }

/* === Detail pages === */
.detail-hero { display: grid; grid-template-columns: 1fr; gap: 2rem; margin: 1rem 0 3rem; }
@media (min-width: 760px) { .detail-hero { grid-template-columns: 400px 1fr; } }
.detail-hero__cover { position: relative; aspect-ratio: 1 / 1; background: var(--surface-2); border-radius: var(--radius); overflow: hidden; }
.detail-hero__cover img { width: 100%; height: 100%; object-fit: cover; }
.detail-hero__meta { display: flex; flex-direction: column; gap: 0.75rem; }
.detail-hero__title { font-size: clamp(2rem, 5vw, 3rem); margin: 0; }
.detail-hero__artist { color: var(--accent); font-weight: 500; font-size: 1rem; }
.detail-hero__album { color: var(--muted); font-size: 0.9375rem; }
.detail-hero__album a { color: var(--muted); }
.detail-hero__album a:hover { color: var(--accent-hover); }
.detail-hero__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.detail-hero__description { color: var(--text); font-size: 1rem; line-height: 1.7; margin: 0.5rem 0; }
.detail-hero__publish { color: var(--muted); font-size: 0.875rem; }
.detail-hero__plays { color: var(--muted); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
/* V2 group-detail variant: same hero shape as song/album, but no artist line. */
.group-detail__hero .detail-hero__description { margin-top: 0.25rem; }
.group-detail__hero .detail-hero__cover svg { color: var(--border); }

.lyrics { font-family: 'Inter', sans-serif; font-size: 1rem; line-height: 1.8; white-space: pre-wrap; color: var(--text); background: var(--surface); padding: 1.5rem; border-radius: var(--radius); border: 1px solid var(--border); margin: 2rem 0; max-width: 720px; }

/* === Track list (album detail) === */
.track-list { display: flex; flex-direction: column; gap: 0.5rem; margin: 2rem 0; }
.track-list__item { display: grid; grid-template-columns: 50px 1fr auto; gap: 0.875rem; padding: 0.625rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); align-items: center; }
.track-list__item:hover { border-color: var(--muted); }
.track-list__cover { position: relative; width: 50px; height: 50px; border-radius: 4px; overflow: hidden; background: var(--surface-2); }
.track-list__cover img { width: 100%; height: 100%; object-fit: cover; }
.track-list__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--accent);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 120ms ease, background 120ms ease;
}
.track-list__play:hover { transform: translate(-50%, -50%) scale(1.12); background: rgba(0, 0, 0, 0.75); }
.track-list__play:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.track-list__play svg { transform: translateX(1px); }
.track-list__title { font-weight: 500; color: var(--text); }
.track-list__title a { color: inherit; }
.track-list__title a:hover { color: var(--accent); text-decoration: none; }
.track-list__meta { color: var(--muted); font-size: 0.8125rem; margin-top: 0.125rem; }
.track-list__duration { color: var(--muted); font-size: 0.875rem; font-variant-numeric: tabular-nums; }

/* === Share buttons === */
.share-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 1.5rem 0; }
.share-buttons button, .share-buttons a {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0.875rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--muted); font-size: 0.875rem; cursor: pointer;
  text-decoration: none; font-family: inherit;
}
.share-buttons button:hover, .share-buttons a:hover { color: var(--text); border-color: var(--muted); text-decoration: none; }
.share-buttons svg { width: 16px; height: 16px; }

/* === Prose (about, privacy) === */
.prose { max-width: 720px; margin: 0 auto; }
.prose h2 { margin-top: 2rem; }
.prose p { margin: 0 0 1rem; }
.prose ul, .prose ol { padding-left: 1.5rem; margin: 0 0 1rem; }
.prose li { margin: 0.25rem 0; }
.prose a { text-decoration: underline; }

/* === Helpers === */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); }

/* ========== Phase 4: sticky player bar ========== */

[x-cloak] { display: none !important; }

#player-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: grid;
  /* cover · meta · eq · prev · play · next · time · seek · time · repeat · volume · expand · close */
  grid-template-columns: 48px minmax(0, 1fr) auto auto auto auto auto minmax(80px, 1fr) auto auto auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 8px 16px;
  background: rgba(18, 18, 20, 0.85);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  color: var(--text);
}

.player-bar__cover {
  width: 48px;
  height: 48px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
}
.player-bar__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.player-bar__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.player-bar__title {
  font: 600 0.95rem 'Fraunces', serif;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-bar__title:hover { color: var(--accent); }
.player-bar__artist {
  font: 400 0.8rem 'Inter', sans-serif;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-bar__play {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 120ms ease, transform 120ms ease;
}
.player-bar__play:hover { background: var(--accent-hover); transform: scale(1.04); }

.player-bar__skip {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.player-bar__skip:hover:not(:disabled) { color: var(--accent); }
.player-bar__skip:disabled { color: var(--muted); opacity: 0.4; cursor: default; }

.player-bar__repeat {
  position: relative;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.player-bar__repeat:hover { color: var(--text); }
.player-bar__repeat.is-active { color: var(--accent); }
.player-bar__repeat-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  font: 700 0.55rem 'Inter', sans-serif;
  color: var(--accent);
}

/* v0.15.0 — decorative eq pulse (CSS only; real analysis lives in the visualizer) */
.player-bar__eq {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  width: 20px;
  height: 16px;
  flex: 0 0 auto;
}
.player-bar__eq span {
  flex: 1;
  height: 30%;
  background: var(--accent);
  border-radius: 1px;
}
.player-bar__eq.is-playing span { animation: rp-eq 1s ease-in-out infinite; }
.player-bar__eq span:nth-child(1) { animation-duration: 0.9s; animation-delay: -0.2s; }
.player-bar__eq span:nth-child(2) { animation-duration: 0.7s; animation-delay: -0.5s; }
.player-bar__eq span:nth-child(3) { animation-duration: 1.1s; animation-delay: -0.1s; }
.player-bar__eq span:nth-child(4) { animation-duration: 0.8s; animation-delay: -0.4s; }
@keyframes rp-eq {
  0%, 100% { height: 30%; }
  50% { height: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .player-bar__eq.is-playing span { animation: none; }
}

/* v0.15.0 — expand-to-visualizer button */
.player-bar__expand {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.player-bar__expand:hover { color: var(--accent); }

.player-bar__time {
  font: 500 0.8rem 'Inter', sans-serif;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.player-bar__seek,
.player-bar__volume {
  accent-color: var(--accent);
  cursor: pointer;
}
.player-bar__volume { width: 90px; }

.player-bar__close {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 8px;
}
.player-bar__close:hover { color: var(--text); }

@media (max-width: 640px) {
  #player-bar {
    /* cover · meta · prev · play · next · seek · repeat · expand · close */
    grid-template-columns: 40px minmax(0, 1fr) auto auto auto minmax(60px, 1fr) auto auto auto;
    padding: 6px 10px;
    gap: 8px;
  }
  .player-bar__time,
  .player-bar__volume { display: none; }
  .player-bar__eq { display: none; }
  .player-bar__skip,
  .player-bar__repeat { width: 28px; height: 28px; }
  .player-bar__expand { width: 28px; height: 28px; }
}

@media (hover: none) {
  .player-bar__volume { display: none; }
}

/* Ensure main content doesn't get hidden under the fixed bar */
body { padding-bottom: 80px; }
@media (max-width: 640px) { body { padding-bottom: 64px; } }

/* ========== Phase 4: card play button ========== */

/* Invisible clickable overlay covering the cover area — opens song detail.
   Sits beneath the play button (z-index) so the button's click target wins. */
.song-card__cover-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.song-card__body-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.song-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--accent);
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 2;
  transition: transform 120ms ease, background 120ms ease;
}
.song-card__play:hover {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(0, 0, 0, 0.35);
}
.song-card__play:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Nudge the play glyph rightward by ~2px so the triangle visually centers in the circle
   (a centered "play" triangle's optical center is left of its geometric center). */
.song-card__play svg { transform: translateX(2px); }

/* Open-details affordance (top-right) — small ↗ chevron signalling that
   the card is a clickable surface that navigates to the detail page.
   pointer-events:none so the underlying cover-link captures the click.
   Hover brightens via the cover's :hover state since pointer-events:none
   means the chevron itself never receives :hover. */
.song-card__open {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  color: var(--text);
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 3;
  transition: background 120ms ease, color 120ms ease;
}
.song-card__cover:hover .song-card__open {
  background: rgba(0, 0, 0, 0.8);
  color: var(--accent);
}
.song-card__open svg { display: block; }

/* Duration pill on cover (bottom-right). pointer-events:none so clicks pass
   through to the cover-link below (otherwise the pill would shadow the link
   in its small rectangle and visitors couldn't click that corner to open the
   detail page). Hidden via the {% if song.duration_seconds %} template gate
   when duration is 0 or null — see signals.populate_duration_seconds
   (V1.1 candidate to surface ID3 read failures rather than swallow them). */
.song-card__duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.65);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  color: var(--text);
  font-size: 0.6875rem;
  font-weight: 500;
  font-feature-settings: "tnum";
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1.4;
  pointer-events: none;
  z-index: 3;
}

/* ========== Phase 4: song-detail action row + waveform ========== */

.detail-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  margin: 16px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.action-row__download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 6px;
  background: var(--accent);
  color: #000;
  font: 600 0.9rem 'Inter', sans-serif;
  text-decoration: none;
  transition: background 120ms ease;
}
.action-row__download:hover { background: var(--accent-hover); }
.action-row__download svg { display: block; }

/* v0.10.0 streaming links — secondary buttons; Download keeps the accent. */
.streaming-links { display: inline-flex; gap: 0.5rem; flex-wrap: wrap; }
.action-row__stream {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0.875rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--muted); font-size: 0.875rem; text-decoration: none;
}
.action-row__stream:hover { color: var(--text); border-color: var(--muted); text-decoration: none; }
.action-row__stream svg { display: block; }

/* v0.17.0 fan hello — the voluntary note card, revealed by a Download click.
   Styled as a quiet aside, not a dialog: no overlay, no backdrop, nothing
   modal. The download has already started by the time this is visible, so the
   card must never read as something standing between the listener and the
   file. Send is the only accented control; "No thanks" is a bare link-weight
   button so dismissing costs nothing. [x-cloak] is handled globally above. */
.fan-hello {
  max-width: 460px;
  margin: 0 0 24px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.fan-hello__lead { margin: 0 0 12px; font-size: 0.9375rem; }
.fan-hello__input {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  /* 16px exactly, not the 15px used elsewhere on this card: iOS Safari zooms
     the whole page when focusing an input under 16px, which would yank the
     layout the moment a fan taps the name field. This is the site's first
     public form, so it sets the convention. */
  font-size: 1rem;
  resize: vertical;
}
.fan-hello__input::placeholder { color: var(--muted); }
.fan-hello__input:focus { outline: none; border-color: var(--accent); }
.fan-hello__note { margin: 8px 0 0; font-size: 0.75rem; line-height: 1.5; color: var(--muted); }
.fan-hello__error { margin: 8px 0 0; font-size: 0.8125rem; color: var(--error); }
.fan-hello__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.fan-hello__send {
  padding: 8px 14px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #000;
  font: 600 0.875rem 'Inter', sans-serif;
  cursor: pointer;
  transition: background 120ms ease;
}
.fan-hello__send:hover:not(:disabled) { background: var(--accent-hover); }
.fan-hello__send:disabled { opacity: 0.6; cursor: default; }
.fan-hello__skip {
  padding: 8px 12px;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 0.875rem;
  cursor: pointer;
}
.fan-hello__skip:hover { color: var(--text); }
.fan-hello__thanks { margin: 0; font-size: 0.9375rem; }
@media (max-width: 480px) { .fan-hello { max-width: none; } }

.detail-waveform {
  width: 100%;
  min-height: 120px;
  margin: 24px 0;
  cursor: pointer;
  background: var(--surface);
  border-radius: 6px;
  padding: 8px;
}

/* v0.11.0: waveform when the queue has moved past this page's song */
.detail-waveform.wave--stale { opacity: 0.45; cursor: pointer; }

/* ========== Phase 4: song-detail hero play button ========== */
/* Mirrors .song-card__play but larger (80px vs 64px) to anchor the
   detail-page hero. Same low-opacity backdrop. Pause glyph swap when
   THIS song is the currently-playing track. */

.detail-hero__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--accent);
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 2;
  transition: transform 120ms ease, background 120ms ease;
}
.detail-hero__play:hover {
  transform: translate(-50%, -50%) scale(1.06);
  background: rgba(0, 0, 0, 0.35);
}
.detail-hero__play:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.detail-hero__play svg { display: block; }
/* Nudge the play triangle right for optical centering (asymmetric glyph). */
.detail-hero__play svg:first-of-type { transform: translateX(3px); }

/* ==== v0.15.0 full-screen visualizer overlay ============================ */
#viz-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;                 /* above #player-bar (100) */
  background: #0A0A0B;
}
#viz-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
body.viz-open { overflow: hidden; }   /* scroll lock while the overlay is up */

.viz__close {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top));
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
}
.viz__close:hover { color: var(--accent); }

.viz__hud {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(24px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  pointer-events: none;         /* empty HUD gaps must not swallow canvas clicks */
}
.viz__hud button,
.viz__hud input { pointer-events: auto; }

.viz__meta { text-align: center; max-width: 84vw; }
.viz__title {
  font: 600 1.3rem 'Fraunces', serif;
  color: var(--text);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}
.viz__artist {
  font: 400 0.9rem 'Inter', sans-serif;
  color: var(--muted);
  margin-top: 2px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

.viz__controls {
  display: flex;
  align-items: center;
  gap: 20px;
}
.viz__btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text);
  cursor: pointer;
  display: grid;
  place-items: center;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.viz__btn:hover:not(:disabled) { color: var(--accent); }
.viz__btn:disabled { opacity: 0.4; cursor: default; }
.viz__btn--big { width: 58px; height: 58px; }

.viz__seek-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(520px, 84vw);
}
.viz__seek { flex: 1; accent-color: var(--accent); }
.viz__time {
  font: 400 0.75rem 'Inter', sans-serif;
  color: var(--muted);
  min-width: 34px;
  text-align: center;
}

/* ===== Work With Us (v0.18.0) =========================================== */
/* [x-cloak] is defined once, globally, higher up in this file. */

/* Smooth-scroll the CTA anchor jump to the form. Scoped with :has() so only
   the work-with-us page opts in; every other page keeps instant scrolling. */
html:has(#wwu) { scroll-behavior: smooth; }

.wwu-hero { position: relative; overflow: hidden; margin: 0 -1rem;
  border-bottom: 1px solid var(--border); }
.wwu-hero__inner { position: relative; z-index: 3; max-width: 960px;
  margin: 0 auto; padding: 3.5rem 1.5rem 5.5rem; }
.wwu-hero h1 { font-size: clamp(2.125rem, 6.5vw, 3.375rem); line-height: 1.1;
  margin: 0 0 1.1rem; }
.wwu-wall { position: absolute; inset: -12% -6%; z-index: 1; display: grid;
  grid-template-columns: repeat(4, 1fr); gap: 12px; transform: rotate(-5deg);
  filter: brightness(0.45) saturate(1.1);
  animation: wwu-drift 36s ease-in-out infinite alternate; }
.wwu-wall img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 10px; }
@keyframes wwu-drift { from { transform: rotate(-5deg) translateY(0); }
  to { transform: rotate(-5deg) translateY(-56px); } }
.wwu-shade { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,10,11,0.59) 0%,
    rgba(10,10,11,0.85) 78%, var(--bg) 100%); }
.wwu-bars { position: absolute; left: 0; right: 0; bottom: 0; height: 56%;
  z-index: 2; display: flex; align-items: flex-end; gap: 3px; opacity: 0.3;
  pointer-events: none; }
.wwu-bar { flex: 1;
  background: linear-gradient(180deg, rgba(77,168,255,0.65), rgba(77,168,255,0.02));
  border-radius: 3px 3px 0 0; transform-origin: bottom;
  animation: wwu-eq 1.4s ease-in-out infinite alternate; }
.wwu-bar--org {
  background: linear-gradient(180deg, rgba(232,93,47,0.55), rgba(232,93,47,0.02)); }
@keyframes wwu-eq { from { transform: scaleY(0.12); } to { transform: scaleY(1); } }
.wwu-langbar { display: flex; justify-content: flex-end; margin-bottom: 0.75rem; }
[dir="rtl"] .wwu-langbar { justify-content: flex-start; }
.wwu-langbar button { background: rgba(10,10,11,0.8); border: 1px solid var(--border);
  color: var(--muted); padding: 0.35rem 0.9rem; cursor: pointer; font: inherit;
  font-size: 0.8rem; }
.wwu-langbar button:first-child { border-radius: 999px 0 0 999px; }
.wwu-langbar button:last-child { border-radius: 0 999px 999px 0; }
.wwu-langbar button.is-on { background: var(--accent); color: #04131f;
  border-color: var(--accent); font-weight: 600; }
.wwu-lede { color: #c9c9cf; font-size: clamp(0.95rem, 2.5vw, 1.06rem);
  line-height: 1.7; max-width: 620px; }
.wwu-cta { display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--accent); color: #04131f; font-weight: 600;
  border-radius: 999px; padding: 0.8rem 1.5rem; margin-top: 1.9rem;
  font-size: 0.95rem; box-shadow: 0 0 32px rgba(77,168,255,0.27);
  transition: transform 0.15s; }
.wwu-cta:hover { transform: translateY(-2px); color: #04131f;
  text-decoration: none; }
.wwu-section { margin-top: 4rem; }
[dir="rtl"] .wwu-hero h1, [dir="rtl"] .wwu-section h2,
[dir="rtl"] .wwu-step h3 { font-family: 'Frank Ruhl Libre', serif; }
.wwu-picks { grid-template-columns: repeat(2, 1fr); }
.wwu-picks .song-card:nth-child(3) { display: none; }
.wwu-steps { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.wwu-step { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.25rem; }
.wwu-step h3 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.wwu-step__n { display: flex; width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #04131f; font-weight: 700; font-size: 0.8rem;
  align-items: center; justify-content: center; margin-bottom: 0.75rem; }
.wwu-step p { color: var(--muted); font-size: 0.85rem; line-height: 1.6; margin: 0; }
.wwu-form { background: linear-gradient(180deg, #17171a, #131316);
  border: 1px solid var(--border); border-radius: 16px; padding: 1.5rem 1rem; }
.wwu-form__grid { display: grid; grid-template-columns: 1fr; gap: 0 1.25rem; }
.wwu-form label { display: block; font-size: 0.85rem; font-weight: 500;
  margin-bottom: 0.35rem; }
.wwu-opt { color: var(--muted); font-weight: 400; }
.wwu-form input, .wwu-form select, .wwu-form textarea { width: 100%;
  background: #0f0f11; border: 1px solid #333; border-radius: 8px;
  min-height: 42px; color: var(--text); padding: 0.5rem 0.75rem;
  font-family: inherit;
  /* 16px exactly: iOS zooms the page in on any input under 16px. */
  font-size: 1rem; margin-bottom: 1.1rem; }
.wwu-form input:focus, .wwu-form select:focus, .wwu-form textarea:focus {
  outline: none; border-color: var(--accent); }
.wwu-form textarea { min-height: 96px; resize: vertical; }
.wwu-hint { color: var(--muted); font-size: 0.78rem; margin: -0.6rem 0 0.9rem; }
.wwu-send { width: 100%; background: var(--accent); border: none;
  border-radius: 10px; min-height: 48px; color: #04131f; font-weight: 600;
  font-size: 0.97rem; cursor: pointer; font-family: inherit; }
.wwu-send:hover { filter: brightness(1.1); }
.wwu-send[disabled] { opacity: 0.6; cursor: wait; }
.wwu-fineprint { color: #7c7c82; font-size: 0.75rem; margin-top: 0.75rem;
  line-height: 1.5; }
.wwu-sent { border: 1px solid var(--accent); border-radius: var(--radius-sm);
  padding: 0.9rem 1rem; color: var(--accent); margin-bottom: 1rem; }
.wwu-error { border: 1px solid var(--error); border-radius: var(--radius-sm);
  padding: 0.9rem 1rem; color: var(--error); margin-bottom: 1rem; }
.wwu-hp { position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; opacity: 0; }
@media (max-width: 640px) {
  /* Bars top out just above the CTA, never behind the hero text. */
  .wwu-bars { height: 175px; }
  /* Keep the fourth nav link (Work With Us) on one row at 375px. */
  .site-header__inner { padding: 0.875rem 0.75rem; gap: 0.55rem; }
  .site-nav { gap: 0.65rem; font-size: 0.8rem; }
}
@media (min-width: 640px) {
  .wwu-picks { grid-template-columns: repeat(3, 1fr); }
  .wwu-picks .song-card:nth-child(3) { display: revert; }
  .wwu-steps { grid-template-columns: repeat(3, 1fr); }
  .wwu-form { padding: 2rem; }
  .wwu-form__grid { grid-template-columns: 1fr 1fr; }
  .wwu-form__full { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .wwu-wall, .wwu-bar { animation: none; }
}