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

:root {
  --bg: #f5f2ed;
  --surface: #faf8f5;
  --text: #1a1916;
  --muted: #5c584f;
  --border: #dedad3;
  --accent: #2c4a3e;
  --accent-light: #e8efe8;
  --highlight: #b8862a;
  --player-bg: #ffffff;
  --sans: 'Karla', sans-serif;
  --serif: 'Cormorant Garamond', serif;
  --mono: 'Space Mono', monospace;
}

/* Dark theme — follows the OS preference; a [data-theme] override wins if a
   toggle is ever added. Keeps the warm, paper-like character of the light theme.
   Accent is richened vs. the original pale sage (#8fb9a4) for more presence
   against the dark brown (2026-07-11 type/palette refresh — "Hannan Classic"). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17150f;
    --surface: #201d16;
    --text: #ece7dc;
    --muted: #a49b8b;
    --border: #363126;
    --accent: #7FA37A;
    --accent-light: #232e28;
    --highlight: #d4a63c;
    --player-bg: #201d16;
    --artist-jerry: #5f93b3;
    --artist-mad:   #d1875a;
    --artist-sean:  #8fb85f;
    --artist-seanjerry: #9a8ad4;
  }
}
:root[data-theme="dark"] {
  --bg: #17150f; --surface: #201d16; --text: #ece7dc; --muted: #a49b8b;
  --border: #363126; --accent: #7FA37A; --accent-light: #232e28; --highlight: #d4a63c; --player-bg: #201d16;
  --artist-jerry: #5f93b3; --artist-mad: #d1875a; --artist-sean: #8fb85f; --artist-seanjerry: #9a8ad4;
}

/* Accessibility: skip link, visible keyboard focus, reduced motion */
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 100;
  background: var(--accent); color: #fff; padding: .5rem .9rem;
  border-radius: 6px; text-decoration: none; transition: top .15s ease;
}
.skip-link:focus { top: 8px; }
:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px;
}
.notfound-links { margin: 1rem 0 0 1.2rem; line-height: 2; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 16px;
  line-height: 1.6;
}

/* Shared width/alignment frame — same 1080px measure and 28px side padding
   as the homepage's .wrap (assets/home.css), so header, page-title and main
   all line up under the homepage's logo/nav instead of each page picking its
   own centering (2026-07-18 flow pass). */
.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 28px;
}

/* Compact top bar — logo mark + inline nav, matching the homepage's header
   (2026-07-12) so the nav no longer jumps position when leaving Home. The
   per-page title (eyebrow/h1/tagline) moved to .page-title below it. */
header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

header .wrap {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--bg);
  font-size: 1.05rem;
  flex-shrink: 0;
  transition: filter 0.18s ease;
}

.mark:hover, .mark:focus-visible {
  filter: brightness(1.12);
  outline: none;
}

.page-title {
  padding-top: 3.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.page-title .wrap {
  text-align: left;
}

.site-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.2rem;
  font-weight: 400;
}

h1 {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--text);
}

h1 em {
  font-style: italic;
  color: var(--accent);
}

.site-tagline {
  margin-top: 1.2rem;
  font-size: 15px;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0.02em;
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
}

nav a {
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--muted);
  transition: color 0.2s;
  padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
}

nav a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

nav a.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 4rem 28px 6rem;
}

/* ── about block ─────────────────────────────────────────────────────────── */

.about {
  max-width: 660px;
  margin: 0 0 3rem;
  padding: 2rem 2.2rem 2.2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.about h2 {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 1rem;
  color: var(--text);
}

.about h2:not(:first-child) {
  margin-top: 2.2rem;
}

.about p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.75;
  font-weight: 400;
  margin-bottom: 0.9rem;
}

.about a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
}

.about .reasons {
  margin: 0.5rem 0 0;
  padding-left: 1.4rem;
  color: var(--muted);
}

.about .reasons li {
  font-size: 15px;
  line-height: 1.75;
  font-weight: 400;
  margin-bottom: 0.9rem;
  padding-left: 0.4rem;
}

.about .reasons li:last-child {
  margin-bottom: 0;
}

.about .reasons strong {
  color: var(--text);
  font-weight: 500;
}

.about .about-note {
  font-size: 13px;
  font-style: italic;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.group-label-bare {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin: 1.8rem 0 0.7rem;
}

/* ── updates / changelog ─────────────────────────────────────────────────── */

.updates { margin-bottom: 5rem; }

.update-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Each entry is its own rounded panel, like a homepage card, rather than a
   hairline-separated row — easier to scan a long changelog (2026-07-18). */
.update-item {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: 1rem 1.3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.update-date {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.update-text {
  font-size: 15px;
  color: var(--text);
  font-weight: 400;
  line-height: 1.6;
}
.update-text a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
}
.update-text .src-tag { margin-left: 0.45rem; white-space: nowrap; }

@media (max-width: 600px) {
  .update-item { grid-template-columns: 1fr; gap: 0.3rem; padding: 0.9rem 1.1rem; }
}

/* ── search ──────────────────────────────────────────────────────────────── */

.search-input {
  font-family: var(--sans); font-size: 16px; color: var(--text);
  width: 100%; padding: 0.85rem 1rem;
  background: var(--player-bg); border: 1px solid var(--border);
  border-radius: 6px; outline: none; transition: border-color 0.2s;
}
.search-input:focus { border-color: var(--accent); }

.search-filters { display: flex; flex-direction: column; gap: 0.45rem; margin: 1rem 0 0.4rem; }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.03em; color: var(--muted);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 0.3rem 0.8rem; cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.chip:hover { color: var(--accent); border-color: var(--accent); }
.chip[aria-pressed="true"] { color: #fff; background: var(--accent); border-color: var(--accent); }

.search-status { font-size: 13px; color: var(--muted); font-weight: 300; margin: 1rem 0 0.6rem; }

.search-results { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--player-bg); }
.search-results:empty { border: none; }

/* Placeholder rows shown while search-index.json is in flight. Sized to match
   .sr so the list doesn't jump when real results replace them; search.js
   overwrites #results wholesale on its first run(), which removes these. */
.sr-skeleton span {
  display: block; height: 15px; margin: 0.95rem 1.1rem;
  border-radius: 4px; background: var(--border);
  animation: sr-pulse 1.4s ease-in-out infinite;
}
.sr-skeleton span + span { border-top: none; }
.sr-skeleton span:nth-child(2) { width: 72%; animation-delay: 0.1s; }
.sr-skeleton span:nth-child(3) { width: 84%; animation-delay: 0.2s; }
.sr-skeleton span:nth-child(4) { width: 64%; animation-delay: 0.3s; }
.sr-skeleton span:nth-child(5) { width: 78%; animation-delay: 0.4s; }
@keyframes sr-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.9; } }
@media (prefers-reduced-motion: reduce) {
  .sr-skeleton span { animation: none; }
}

.sr {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.7rem 1.1rem; text-decoration: none;
  border-top: 1px solid var(--border); transition: background 0.15s;
}
.sr:first-child { border-top: none; }
.sr:hover { background: var(--accent-light); }
.sr:hover .sr-title { color: var(--accent); }

.sr-icon { flex-shrink: 0; width: 1.2em; text-align: center; color: var(--accent); font-size: 13px; }
.sr-show .sr-icon { color: var(--muted); }
.sr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sr-title {
  font-size: 14px; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sr-sub { font-size: 12px; color: var(--muted); font-weight: 300; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.sr-tag {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.04em; color: var(--accent);
  background: var(--accent-light); border-radius: 3px; padding: 1px 6px; font-weight: 500;
}
.sr-src { flex-shrink: 0; }
.sr-meta {
  flex-shrink: 0; font-family: var(--mono); font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums; min-width: 2.6em; text-align: right;
}

@media (max-width: 600px) {
  .sr-meta { display: none; }
}

.src-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

/* Soundboard recordings stand out; audience recordings stay quiet. */
.src-tag.src-sbd {
  color: #fff;
  background: var(--accent);
  padding: 2px 7px;
  border-radius: 3px;
}

/* ── compact track list (show pages) ─────────────────────────────────────── */

.track-hint {
  font-size: 12px;
  color: var(--muted);
  font-weight: 300;
  margin: -0.2rem 0 0.8rem;
}

.track-list {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--player-bg);
}

.track-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.4rem 1.1rem;
  position: relative;
  border-top: 1px solid var(--border);
  transition: background 0.15s;
}

.track-row:first-child { border-top: none; }

.track-group-head {
  padding: 0.7rem 1.1rem 0.2rem;
  border-top: 1px solid var(--border);
}
.track-group-head:first-child { border-top: none; }
.track-group-head .group-label-bare { margin: 0; }
.track-row:hover { background: var(--accent-light); }
.track-row:hover .track-title { color: var(--accent); }
.track-row.playing { background: var(--accent-light); box-shadow: inset 3px 0 0 var(--accent); }

.track-row .play-btn { width: 30px; height: 30px; }
.track-row .play-btn svg { width: 12px; height: 12px; }

.track-row .track-num {
  min-width: 1.8em;
  text-align: right;
  font-size: 12px;
  color: var(--muted);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
}

.track-row .track-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.track-row .track-title {
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* inline flag for songs with audible tape damage / dropouts */
.track-badge {
  flex-shrink: 0;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-light);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 7px;
  line-height: 1.5;
  cursor: help;
}

.track-row .time-label {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.track-row .download-btn {
  width: 24px;
  height: 24px;
  background: transparent;
  color: var(--muted);
}
.track-row .download-btn:hover { background: var(--accent-light); color: var(--accent); }
.track-row .download-btn svg { width: 12px; height: 12px; }

.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}
.share-btn:hover { background: var(--accent-light); color: var(--accent); }
.share-btn svg { width: 14px; height: 14px; display: block; }

.track-row .progress-range {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 0;
  background: transparent;
  opacity: 0;
  transition: opacity 0.15s;
}
.track-row.playing .progress-range,
.track-row .progress-range:focus-visible { opacity: 1; }
.track-row .progress-range::-webkit-slider-runnable-track { height: 2px; border-radius: 0; background: transparent; }
.track-row .progress-range::-webkit-slider-thumb { width: 8px; height: 8px; margin-top: -3px; }
.track-row .progress-range::-moz-range-track { height: 2px; border-radius: 0; }
.track-row .progress-range::-moz-range-progress { height: 2px; border-radius: 0; }
.track-row .progress-range::-moz-range-thumb { width: 8px; height: 8px; }

/* waveform track rows (show pages with pre-computed peaks) reuse the bare .ws-wave
   rule; the title yields space so the waveform can fill the row */
.track-row.ws-track .track-main { flex: 0 1 220px; }

@media (max-width: 600px) {
  /* long titles wrap instead of truncating */
  .track-row .track-title { white-space: normal; line-height: 1.35; }
  .track-row:not(.ws-track) { padding: 0.55rem 1.1rem; }
  /* two lines per waveform track: [play · # · title · time · FLAC] over a
     full-width waveform */
  .track-row.ws-track { flex-wrap: wrap; row-gap: 0.5rem; padding: 0.7rem 1.1rem; }
  .track-row.ws-track .track-main { flex: 1 1 auto; }
  .track-row.ws-track .time-label { margin-left: auto; }
  .track-row.ws-track .ws-wave { flex: 1 1 100%; order: 5; }
  /* larger touch targets for thumbs */
  .track-row.ws-track .play-btn { width: 44px; height: 44px; }
  .track-row.ws-track .play-btn svg { width: 15px; height: 15px; }
  .track-row.ws-track .download-btn { width: 40px; height: 40px; }
  .track-row.ws-track .download-btn svg { width: 16px; height: 16px; }
}

/* ── wavesurfer.js prototype (lab page) ──────────────────────────────────── */

.ws-list {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--player-bg);
}

.ws-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.5rem 1.1rem;
  border-top: 1px solid var(--border);
  transition: background 0.15s;
}

.ws-row:first-child { border-top: none; }
.ws-row.playing { background: var(--accent-light); box-shadow: inset 3px 0 0 var(--accent); }

.ws-row .play-btn { width: 30px; height: 30px; flex-shrink: 0; }
.ws-row .play-btn svg { width: 12px; height: 12px; }

.ws-row .track-num {
  min-width: 1.8em;
  text-align: right;
  font-size: 12px;
  color: var(--muted);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.ws-row .track-title {
  flex: 0 1 170px;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-row:hover .track-title { color: var(--accent); }

.ws-wave {
  flex: 1 1 auto;
  min-width: 80px;
  height: 38px;
  cursor: pointer;
}

.ws-row .time-label {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  min-width: 3em;
  text-align: right;
}

.ws-row .download-btn {
  width: 24px;
  height: 24px;
  background: transparent;
  color: var(--muted);
}
.ws-row .download-btn:hover { background: var(--accent-light); color: var(--accent); }
.ws-row .download-btn svg { width: 12px; height: 12px; }

/* the download link's wrapper is transparent to the flex layout */
.ws-dl { display: contents; }

@media (max-width: 600px) {
  .ws-row { flex-wrap: wrap; row-gap: 0.5rem; padding: 0.7rem 1.1rem; }
  .ws-row .track-title { flex: 1 1 auto; white-space: normal; line-height: 1.35; }
  .ws-row .time-label { margin-left: auto; }
  .ws-wave { flex: 1 1 100%; order: 5; }
  /* larger touch targets for thumbs */
  .ws-row .play-btn { width: 44px; height: 44px; }
  .ws-row .play-btn svg { width: 15px; height: 15px; }
  .ws-row .download-btn { width: 40px; height: 40px; }
  .ws-row .download-btn svg { width: 16px; height: 16px; }
}

/* ── recording cards & player ────────────────────────────────────────────── */

.recording-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--border);
}

.recording-item {
  background: var(--player-bg);
  padding: 1.4rem 1.6rem;
  transition: background 0.15s;
}

.recording-item:hover { background: var(--surface); }

.recording-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  gap: 1rem;
}

.recording-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
}

.track-num {
  display: inline-block;
  min-width: 2em;
  color: var(--muted);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
}

.recording-detail {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
  font-weight: 300;
  letter-spacing: 0.02em;
}

.recording-title .track-num + * { padding-left: 0; }

.recording-item .recording-title + .recording-detail { padding-left: 2em; }

.recording-item .recording-meta-grid + .recording-detail { padding-left: 0; }

.recording-badge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-light);
  padding: 3px 8px;
  border-radius: 2px;
  white-space: nowrap;
  font-weight: 500;
  flex-shrink: 0;
}

.recording-meta-grid {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 2px 12px;
  margin-top: 4px;
}

.meta-label {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  padding-top: 1px;
}

.meta-value {
  font-size: 12px;
  color: var(--text);
  font-weight: 300;
}

.custom-player {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: visible;
}

.play-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.play-btn:hover {
  background: var(--accent);
  color: white;
}

.play-btn svg {
  width: 14px;
  height: 14px;
}

.progress-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Native <input type="range"> seek control — keyboard, touch, and mouse all
   work natively (arrow keys, dragging, click-to-seek), unlike the div-based
   bar this replaced. JS sets the filled portion via an inline background
   gradient (WebKit/Blink reads the input's own background through a
   transparent ::-webkit-slider-runnable-track); Firefox fills natively via
   ::-moz-range-progress. */
.progress-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  cursor: pointer;
  outline-offset: 4px;
}
.progress-range::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: transparent; }
.progress-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px;
  height: 11px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}
.progress-range::-moz-range-track { height: 3px; border-radius: 2px; background: var(--border); }
.progress-range::-moz-range-progress { height: 3px; border-radius: 2px; background: var(--accent); }
.progress-range::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}

.time-row {
  display: flex;
  justify-content: space-between;
}

.time-label {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Icon-only download button — a plain arrow, no text label. There's only one
   download option now (password-protected lossless), so the format doesn't
   need spelling out in the button itself; it's in the hover title. */
.download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent);
  text-decoration: none;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}

.download-btn:hover { background: var(--accent); color: white; }
.download-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

/* "+" / checkmark playlist-selection toggle — same circular-icon language as
   .download-btn, filled solid once selected (aria-pressed="true"). */
.track-add {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--accent); background: transparent; color: var(--accent);
  cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.track-add:hover { background: var(--accent); color: white; }
.track-add svg { width: 11px; height: 11px; flex-shrink: 0; }
.track-add[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: white; }
/* Right-aligned on every surface: show-page rows put it last in the flex row
   (after the download button — .track-main/.ws-wave grow to absorb the
   space, so trailing items sit flush right); .song-occ-head pushes it with
   margin-left: auto; .pl-row-play carries flex: 1, leaving .track-add as the
   fixed-size sibling that lands at the row's right edge. */
.track-row .track-add { width: 19px; height: 19px; }
.track-row .track-add svg { width: 9px; height: 9px; }
.song-occ-head .track-add { width: 18px; height: 18px; margin-left: auto; }

/* Header row above a tracklist: the existing count/duration caption plus the
   new "Select all" bulk action, side by side. */
.tracks-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.tracks-head .group-label-bare { margin: 0; }
.tracks-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.select-all {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em; color: var(--muted); background: none;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 0.25rem 0.75rem; cursor: pointer; transition: color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.select-all:hover { color: var(--accent); border-color: var(--accent); }

/* "Download all as ZIP" — a text-labeled sibling of the icon-only
   .download-btn (that one covers a single track; this covers a whole
   show/song's worth, assembled client-side, see player.js tryBatchDownload).
   Kept compact — count/size detail lives in the hover title rather than
   the visible label, so it sits next to "Select all" without dominating. */
.zip-download-btn {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: var(--sans); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.02em; color: var(--accent); background: var(--accent-light);
  border: none; border-radius: 999px; padding: 0.25rem 0.7rem;
  cursor: pointer; transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.zip-download-btn:hover { background: var(--accent); color: white; }
.zip-download-btn svg { width: 10px; height: 10px; flex-shrink: 0; }

/* Floating summary bar — appears once at least one track is selected via a
   "+" button anywhere on the page, offers Clear or committing the selection
   to /playlist/#p=... (see track-select.js). */
.track-select-bar {
  position: fixed; left: 50%; bottom: 1.1rem; transform: translateX(-50%);
  z-index: 40; display: flex; align-items: center; gap: 0.8rem;
  background: var(--player-bg); border: 1px solid var(--border); border-radius: 999px;
  padding: 0.5rem 0.6rem 0.5rem 1.1rem; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
.tsb-count { font-size: 13px; color: var(--muted); white-space: nowrap; }
.tsb-clear {
  font-family: var(--sans); font-size: 12px; color: var(--muted);
  background: none; border: none; cursor: pointer; text-decoration: underline;
}
.tsb-clear:hover { color: var(--accent); }
.tsb-add, .tsb-player { padding: 0.4rem 1rem; font-size: 12px; white-space: nowrap; }

/* ── alternates disclosure ───────────────────────────────────────────────── */

.alt-details summary {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  cursor: pointer;
  padding: 0.8rem 0;
  user-select: none;
}

.alt-details summary:hover { color: var(--accent); }
.alt-details[open] summary { margin-bottom: 0.6rem; }

/* ── technical-data disclosure ───────────────────────────────────────────── */

.tech-details summary {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  cursor: pointer;
  padding: 0.8rem 0;
  user-select: none;
}
.tech-details summary:hover { color: var(--accent); }
.tech-details[open] summary { margin-bottom: 0.4rem; }

.tech-head {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  font-weight: 300;
  margin: 0 0 0.7rem;
}

.tech-scroll { overflow-x: auto; }

.tech-table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--sans);
  font-size: 13px;
}
.tech-table th,
.tech-table td {
  padding: 0.4rem 0.7rem;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  text-align: left;
  white-space: nowrap;
}
.tech-table th {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.tech-table td.tnum,
.tech-table th { font-variant-numeric: tabular-nums; }
.tech-table td.tnum { font-family: var(--mono); text-align: right; color: var(--muted); }

/* /archive-data/ — sortable column headers on an otherwise-static tech-table */
.tech-table th.sortable { cursor: pointer; user-select: none; }
.tech-table th.sortable:hover { color: var(--accent); }
.tech-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }

/* per-track treatment audit trail (workflow v5+): what normalization the track
   got; the recorded decision note shows on hover */
.tech-table td.ttreat { font-family: var(--mono); font-size: 11px; }
.treat { cursor: help; color: var(--muted); }
.treat-linear { color: #5cc98a; }
.treat-linear-reduced { color: #6ea3d8; }
.treat-applause-limiter { color: #9d85c9; }
.treat-review { text-decoration: underline dotted; }

/* processing status badge (in the technical-data summary) */
.proc-status {
  display: inline-block;
  font-family: var(--mono);
  margin-left: 0.5rem;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.04em;
  font-weight: 600;
  vertical-align: middle;
  border: 1px solid currentColor;
}
.proc-status.status-done { color: #5cc98a; }
.proc-status.status-partial { color: #d9b65c; }
.proc-status.status-redo { color: #e08a4c; }
.proc-status.status-needs-processing { color: var(--muted); }
.proc-status.pre-edit { cursor: help; }
.proc-status.pre-edit-nr { color: #6ea3d8; }
.proc-status.pre-edit-pe { color: #9d85c9; }
.tech-table td.tver { font-family: var(--mono); text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

/* highlight badge — Rene's editorial call on the performance itself,
   independent of recording quality (the pre-edit/NR/PE badges above) */
.h-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--highlight);
  cursor: help;
}
.h-badge svg { flex-shrink: 0; display: block; }
.highlight-line {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--highlight);
  font-weight: 500;
  margin: 0 0 1.4rem;
}

/* standalone audio-processing status line (top of every show page) */
.proc-status-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 1.4rem;
}
.proc-status-line .proc-status { margin-left: 0; }
.proc-status-blurb {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 300;
  font-style: italic;
}

.wav-note {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  font-weight: 300;
  margin-top: 2rem;
  text-align: center;
}

/* ── contact form ────────────────────────────────────────────────────────── */

.contact-section {
  max-width: 560px;
  margin: 0 auto 5rem;
  padding-top: 2rem;
}

.contact-sub {
  font-size: 14px;
  color: var(--muted);
  font-weight: 300;
  margin-bottom: 2rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-group label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.form-group input,
.form-group textarea {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text);
  background: var(--player-bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.7rem 0.9rem;
  transition: border-color 0.2s;
  outline: none;
  width: 100%;
}

.form-group input:focus,
.form-group textarea:focus { border-color: var(--accent); }

.form-group textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.6;
}

.form-submit {
  align-self: flex-start;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--surface);
  background: var(--accent);
  border: none;
  border-radius: 3px;
  padding: 0.7rem 1.6rem;
  cursor: pointer;
  transition: opacity 0.2s;
}

.form-submit:hover { opacity: 0.85; }
.form-submit:disabled { opacity: 0.5; cursor: not-allowed; }

#formStatus { font-size: 13px; margin-top: 0.2rem; }
#formStatus.success { color: var(--accent); }
#formStatus.error { color: #b94a3a; }

/* ── password modal ──────────────────────────────────────────────────────── */

.pw-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26,25,22,0.55);
  z-index: 100;
  align-items: center;
  justify-content: center;
}
.pw-overlay.open { display: flex; }

.pw-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2.4rem 2.4rem 2rem;
  width: 340px;
  max-width: 90vw;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

.pw-modal h3 {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: 0.4rem;
  color: var(--text);
}

.pw-modal p {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 1.4rem;
  font-weight: 300;
}

.pw-modal input {
  font-family: var(--sans);
  font-size: 14px;
  width: 100%;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--player-bg);
  color: var(--text);
  outline: none;
  margin-bottom: 0.8rem;
  transition: border-color 0.2s;
}
.pw-modal input:focus { border-color: var(--accent); }

.pw-modal-error {
  font-size: 12px;
  color: #b94a3a;
  min-height: 1.2em;
  margin-bottom: 0.6rem;
}

.pw-modal-actions {
  display: flex;
  gap: 0.8rem;
  justify-content: flex-end;
}

.pw-cancel {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.6rem 1.2rem;
  cursor: pointer;
  transition: color 0.2s;
}
.pw-cancel:hover { color: var(--text); }

.pw-submit {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--surface);
  background: var(--accent);
  border: none;
  border-radius: 3px;
  padding: 0.6rem 1.2rem;
  cursor: pointer;
  transition: opacity 0.2s;
}
.pw-submit:hover { opacity: 0.85; }

/* Non-blocking progress toast — once a batch ZIP's password is confirmed,
   the blocking modal hands off to this so visitors can keep browsing the
   page while the rest of the tracks fetch/zip in the background. */
.dl-toast {
  display: none;
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 100;
  align-items: center;
  gap: 0.8rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.85rem 1rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.16);
  max-width: min(320px, calc(100vw - 2.4rem));
}
.dl-toast.open { display: flex; }
.dl-toast.error .dl-toast-text { color: #b94a3a; }
.dl-toast-text {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--text);
  flex: 1;
}
.dl-toast-cancel {
  font-size: 18px;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.1rem 0.3rem;
  flex-shrink: 0;
}
.dl-toast-cancel:hover { color: var(--text); }

footer {
  text-align: center;
  padding: 2.5rem;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
  background: var(--surface);
}

footer a { color: var(--accent); text-decoration: none; }
footer a:hover { text-decoration: underline; }
.footer-links { display: block; margin-top: 0.5rem; }

/* Tablet pass: give the two wide scroll containers a little more room */
@media (max-width: 900px) {
  .song-grid-wrap { font-size: 13px; }
  .tech-scroll { font-size: 12px; }
}

/* ── hover info tooltip ──────────────────────────────────────────────────── */

.info-tooltip {
  position: fixed;
  z-index: 200;
  max-width: 300px;
  padding: 0.65rem 0.8rem;
  background: var(--text);
  color: #fff;
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.info-tooltip.show { opacity: 1; transform: translateY(0); }

.info-tooltip dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 12px;
  margin: 0;
}
.info-tooltip dt {
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
}
.info-tooltip dd {
  margin: 0;
  font-size: 12.5px;
  font-weight: 300;
  color: #fff;
}

/* ── share popover ───────────────────────────────────────────────────────── */

.share-pop {
  position: fixed;
  z-index: 210;
  min-width: 168px;
  padding: 0.35rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.16);
  display: none;
}
.share-pop.open { display: block; }
.share-pop a,
.share-pop button {
  display: block;
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: none;
  border-radius: 5px;
  background: none;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.share-pop a:hover,
.share-pop button:hover { background: var(--accent-light); color: var(--accent); }

/* ── deep-linked track flash ─────────────────────────────────────────────── */

@keyframes track-flash-in {
  from { background: var(--player-bg); box-shadow: inset 3px 0 0 transparent; }
  to { background: var(--accent-light); box-shadow: inset 3px 0 0 var(--accent); }
}
/* Flashes in, then holds — matches .track-row.playing's look, and stays until
   JS clears it (a different track starting playback, or a new deep link). */
.track-row.target { animation: track-flash-in 0.6s ease 1 forwards; }

@media (max-width: 600px) {
  .page-title { padding-top: 2.5rem; padding-bottom: 2rem; }
  .page-title .wrap, header .wrap, main { padding-left: 1.25rem; padding-right: 1.25rem; }
  main { padding-top: 2.5rem; padding-bottom: 4rem; }
  nav { gap: 1rem; }
  nav a { font-size: 11px; }
  .custom-player { flex-wrap: wrap; }
  .custom-player .progress-wrap { min-width: 55%; }
}

/* ── song concordance ─────────────────────────────────────────────── */
:root {
  --artist-jerry: #35617d;
  --artist-mad:   #a75a34;
  --artist-sean:  #5f7d34;
  --artist-seanjerry: #6a5aa7;
}
.artist-chip {
  display: inline-flex; align-items: center; gap: .3em;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  padding: .18em .6em; border-radius: 20px; white-space: nowrap;
  color: #fff; background: var(--muted); text-decoration: none;
}
.artist-chip.sm { font-size: 10px; padding: .12em .5em; }
.artist-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  display: inline-block; background: var(--muted);
}
.artist-dot.empty { background: transparent; }
.song-legend {
  display: flex; flex-wrap: wrap; gap: .35rem 1.1rem;
  font-size: 12px; color: var(--muted); margin: -.6rem 0 1rem .1rem;
}
.song-legend .legend-item { display: inline-flex; align-items: center; gap: .4em; }
.artist-jerry { background: var(--artist-jerry); }
.artist-mad   { background: var(--artist-mad); }
.artist-sean  { background: var(--artist-sean); }
.artist-seanjerry { background: var(--artist-seanjerry); }
a.artist-chip:hover { filter: brightness(1.08); }

.songs-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 1.25rem 0 1.5rem;
}
.song-search {
  flex: 1 1 12rem; min-width: 10rem; font: inherit; font-size: 14px;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px; padding: .45rem .75rem;
}
.song-search:focus { outline: none; border-color: var(--accent); }
.songs-empty { color: var(--muted); font-style: italic; margin: 1.5rem 0; }
.songs-controls .seg {
  display: inline-flex; border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden; background: var(--surface);
}
.songs-controls .seg button {
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--muted);
  padding: .4rem .8rem; border-right: 1px solid var(--border);
}
.songs-controls .seg button:last-child { border-right: 0; }
.songs-controls .seg button.active { background: var(--accent); color: #fff; }

/* list view */
.song-list { border-top: 1px solid var(--border); }
.song-item { border-bottom: 1px solid var(--border); }
.song-item > summary {
  display: flex; align-items: center; gap: .7rem; cursor: pointer;
  padding: .55rem .25rem; list-style: none;
}
.song-item > summary::-webkit-details-marker { display: none; }
.song-item > summary::before {
  content: "▸"; color: var(--muted); font-size: 12px;
  transition: transform .15s ease; transform: translateY(-1px);
}
.song-item[open] > summary::before { transform: rotate(90deg); }
.song-plays {
  font-variant-numeric: tabular-nums; color: var(--muted);
  font-size: 13px; min-width: 2.4em; text-align: right;
}
.song-name {
  font-family: var(--serif); font-size: .92rem; color: var(--accent);
  text-decoration: none; line-height: 1.25;
}
.song-name:hover { text-decoration: underline; }
.song-chips { margin-left: auto; display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.song-occs { padding: .2rem 0 .8rem 1.6rem; }

/* Tighter card now that the download button is a small icon rather than a
   labeled pill — songs played a dozen-plus times (the top of the list runs
   to 14) stay scannable instead of scrolling forever. */
.song-occ {
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); padding: .55rem .75rem; margin: .4rem 0;
}
.song-occ-head {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin-bottom: .4rem; font-size: 13px;
}
.song-occ-where { color: var(--muted); }
.song-occ-open {
  margin-left: auto; font-size: 12px; color: var(--accent);
  text-decoration: none; white-space: nowrap;
}
.song-occ-open:hover { text-decoration: underline; }
.song-occ .custom-player { margin: 0; }

/* grid view */
.song-grid-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
.song-grid { border-collapse: collapse; font-size: 13px; width: max-content; min-width: 100%; }
.song-grid th, .song-grid td {
  border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
  padding: .4rem .5rem; text-align: center;
}
.song-grid thead th {
  position: sticky; top: 0; background: var(--surface); z-index: 2;
  vertical-align: bottom; border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.song-grid thead th a { color: inherit; text-decoration: none; display: block; }
.song-grid thead th a:hover .g-venue { color: var(--accent); text-decoration: underline; }
.song-grid thead th .g-venue { display: block; font-weight: 600; }
.song-grid thead th .g-date { display: block; color: var(--muted); font-size: 10px; font-weight: 400; }
.song-grid thead th[class^="artist-"], .song-grid thead th[class*=" artist-"] {
  background: transparent; color: inherit;
  box-shadow: inset 0 -3px 0 currentColor;
}
.song-grid thead th.artist-jerry { color: var(--artist-jerry); }
.song-grid thead th.artist-mad   { color: var(--artist-mad); }
.song-grid thead th.artist-sean  { color: var(--artist-sean); }
.song-grid th.g-corner { text-align: left; left: 0; z-index: 3; border-right: 2px solid var(--border); }
.song-grid th.g-song {
  position: sticky; left: 0; background: var(--surface); z-index: 1;
  text-align: left; white-space: nowrap; font-weight: 500;
  border-right: 2px solid var(--border);
}
/* Cap the sticky song column so one long title can't swallow the viewport —
   the full name is on the hover title and the song page. */
.song-grid th.g-song a {
  color: var(--text); text-decoration: none;
  display: inline-block; max-width: 15rem;
  overflow: hidden; text-overflow: ellipsis; vertical-align: bottom;
}
.song-grid th.g-song a:hover { color: var(--accent); text-decoration: underline; }
.song-grid th.g-song .g-count { color: var(--muted); font-size: 11px; margin-left: .4em; }
.song-grid td.hit a { text-decoration: none; font-size: 14px; }
.song-grid td.hit.artist-jerry a { color: var(--artist-jerry); }
.song-grid td.hit.artist-mad a   { color: var(--artist-mad); }
.song-grid td.hit.artist-sean a  { color: var(--artist-sean); }
.song-grid td.hit { background: transparent; }
.song-grid tbody tr:hover th.g-song, .song-grid tbody tr:hover td { background: var(--accent-light); }

.song-back { margin: 0 0 1rem; }
.song-back a { color: var(--muted); text-decoration: none; font-size: 13px; }
.song-back a:hover { color: var(--accent); }
.song-variants { color: var(--muted); font-size: 14px; }

@media (max-width: 600px) {
  .song-occs { padding-left: .5rem; }
  .song-occ-open { margin-left: 0; }
  /* phone grid view: keep the sticky song column to ~a third of the screen
     so the show columns stay visible and horizontal scrolling works */
  .song-grid th.g-song a { max-width: 34vw; }
  .song-grid th, .song-grid td { padding: .35rem .45rem; }
}

/* ── playlist generator (/playlist/) ───────────────────────────────────── */

.pl-intro {
  max-width: 620px; margin: 0 0 1.2rem;
  font-size: 14px; color: var(--muted); font-weight: 300; line-height: 1.7;
}
.pl-intro a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent); }

.pl-help { margin-bottom: 1.2rem; }
.pl-help p {
  max-width: 620px; margin: 0 0 0.7rem;
  font-size: 13.5px; color: var(--muted); font-weight: 300; line-height: 1.65;
}
.pl-help p:last-child { margin-bottom: 0; }
.pl-help strong { color: var(--text); font-weight: 500; }
.pl-help a { color: var(--accent); }

/* One-click starting points — most visitors don't want to build a set from
   a blank slate; these generate immediately rather than just pre-filling. */
.pl-presets { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.2rem; }
.pl-preset {
  font-family: var(--sans); font-size: 12.5px; font-weight: 500;
  color: var(--accent); background: var(--accent-light);
  border: 1px solid transparent; border-radius: 999px;
  padding: 0.45rem 1rem; cursor: pointer; transition: background 0.15s, opacity 0.15s;
}
.pl-preset:hover { opacity: 0.85; }

/* Two cards: narrow-it-down filters, then build-and-play. Replaces the old
   flat stack of unlabeled chip rows, which read as one undifferentiated
   wall of buttons once artist/venue/source/tags were all on screen. */
.pl-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 1.1rem 1.2rem; margin: 1.2rem 0;
}
.pl-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.7rem;
}
.pl-panel-head .pl-filter-label { margin: 0; }
.pl-clear {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em; color: var(--muted); background: none;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 0.25rem 0.75rem; cursor: pointer; transition: color 0.15s, border-color 0.15s;
}
.pl-clear:hover { color: var(--accent); border-color: var(--accent); }
.pl-panel-build { display: flex; flex-direction: column; gap: 0.2rem; }
.pl-panel-build .search-status { margin: 0.7rem 0 0; }
.pl-panel-build .pl-actions { margin: 0.9rem 0 0; }

.pl-filter-groups { display: flex; flex-direction: column; gap: 0.9rem; }
.pl-filter-label {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); font-weight: 500; margin: 0 0 0.4rem;
}

.pl-amount {
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 0.3rem 0.8rem; width: 5em; text-align: center;
}
.pl-amount:focus { border-color: var(--accent); outline: none; }

.pl-generate {
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  letter-spacing: 0.03em; color: #fff; background: var(--accent);
  border: 1px solid var(--accent); border-radius: 999px;
  padding: 0.5rem 1.4rem; cursor: pointer; transition: opacity 0.15s;
}
.pl-generate:hover { opacity: 0.9; }
.pl-generate:disabled { opacity: 0.45; cursor: default; }

/* Now-playing card sticks while the queue scrolls under it. */
.pl-now {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-direction: column; gap: 0.55rem;
  background: var(--player-bg); border: 1px solid var(--border);
  border-radius: 6px; padding: 0.9rem 1.1rem; margin: 1rem 0;
}
/* .pl-now's own `display` beats the UA [hidden]{display:none} default
   (author rules always win over user-agent ones), so the empty card was
   rendering as an empty bar even while marked hidden. */
.pl-now[hidden] { display: none; }
.pl-now-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; }
.pl-now-title {
  font-size: 16px; font-weight: 500; color: var(--text); text-decoration: none;
}
.pl-now-title:hover { color: var(--accent); }
.pl-now-meta {
  font-size: 12px; color: var(--muted); font-weight: 300;
  display: flex; align-items: center; gap: 0.4rem;
}
.pl-controls { display: flex; gap: 0.5rem; }
.pl-btn {
  display: flex; align-items: center; justify-content: center;
  color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; width: 2.2rem; height: 2.2rem; cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.pl-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.pl-btn:hover { color: var(--accent); border-color: var(--accent); }
.pl-btn-play { color: #fff; background: var(--accent); border-color: var(--accent); }
.pl-btn-play:hover { color: #fff; opacity: 0.9; }
/* Shuffle mode on — same filled-solid language as .track-add[aria-pressed]. */
.pl-btn[aria-pressed="true"] { color: #fff; background: var(--accent); border-color: var(--accent); }
.pl-btn[aria-pressed="true"]:hover { color: #fff; opacity: 0.9; }
.pl-progress {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.pl-progress .progress-range { flex: 1; }

/* Queue rows: a plain container (border + the playing-state background) that
   holds two separate interactive children — the "+" selection toggle and the
   play button (.pl-row-play, which dresses like a search result via .sr). */
.pl-row {
  display: flex; align-items: center;
  border-top: 1px solid var(--border);
}
.pl-row:first-child { border-top: none; }
.pl-row.pl-playing { background: var(--accent-light); }
.pl-row.pl-playing .sr-title { color: var(--accent); }
/* Matches .pl-remove/.pl-link's borderless ghost style here — .track-add's
   sitewide accent ring (meant to stand out on show/song pages) read visibly
   larger than its 24px siblings even at a smaller box size, since the ring
   itself adds bulk no other queue-row icon carries. aria-pressed keeps its
   own solid-accent "selected" state so the toggle is still legible. */
.pl-row .track-add {
  width: 24px; height: 24px; margin: 0 0.6rem;
  border: none; background: transparent; color: var(--muted);
}
.pl-row .track-add:hover { background: var(--accent-light); color: var(--accent); }
.pl-row .track-add[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }

/* × remove — quieter than the +: no ring, muted until hovered. */
.pl-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  border: none; background: transparent; color: var(--muted);
  cursor: pointer; margin-right: 0.9rem;
  transition: background 0.15s, color 0.15s;
}
.pl-remove:hover { background: var(--accent-light); color: var(--accent); }
.pl-remove svg { width: 11px; height: 11px; }

/* Link out to the track's show page — same weight as the × remove, sits
   just before it. */
.pl-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  color: var(--muted); text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.pl-link:hover { background: var(--accent-light); color: var(--accent); }
.pl-link svg { width: 11px; height: 11px; }

/* Curated playlists (from recordings.json) — rendered at build time,
   section absent while the list is empty. */
.pl-curated { margin: 1.4rem 0; }
.pl-curated .pl-filter-label { margin-bottom: 0.5rem; }
.pl-curated-row { cursor: pointer; }

/* Your saved playlists (localStorage) — rows mirror the curated look, with
   small muted Rename/Delete actions on the right. */
#pl-saved { margin: 1.4rem 0; }
#pl-saved .pl-filter-label { margin-bottom: 0.5rem; }
.pl-saved-row { display: flex; align-items: center; border-top: 1px solid var(--border); }
.pl-saved-row:first-child { border-top: none; }
.pl-saved-load {
  flex: 1; min-width: 0; background: none; font: inherit; text-align: left;
  border: none; border-top: none; cursor: pointer;
}
.pl-saved-act {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em; color: var(--muted); background: none;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 0.25rem 0.75rem; cursor: pointer; flex-shrink: 0;
  margin-right: 0.6rem; transition: color 0.15s, border-color 0.15s;
}
.pl-saved-act:hover { color: var(--accent); border-color: var(--accent); }
.pl-row-play {
  flex: 1; min-width: 0; background: none; font: inherit; text-align: left;
  border: none; border-top: none; cursor: pointer;
}

.pl-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pl-share { color: var(--accent); background: transparent; border-color: var(--accent); }
.pl-share:hover { color: #fff; background: var(--accent); opacity: 1; }

/* ── /process/ — pipeline flowchart ─────────────────────────────────────── */
.process-intro, .process-outro { max-width: 620px; margin: 0 auto 1.6rem; }
.process-intro p, .process-outro p { color: var(--muted); line-height: 1.65; }
.process-outro { margin-top: 1.8rem; }
.flow { max-width: 620px; margin: 0 auto; }
.flow-stage {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.1rem 1.3rem 1.15rem;
}
.flow-stage h2 {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
  margin: 0.15rem 0 0.5rem;
}
.flow-stage p { line-height: 1.6; margin: 0 0 0.6rem; }
.flow-stage p:last-of-type { margin-bottom: 0; }
.flow-kind {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
}
.flow-manual { border-left: 3px solid var(--accent); }
.flow-optional {
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  background: var(--accent-light);
}
.flow-loc {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin-top: 0.75rem;
}
.flow-loc span {
  font-size: 11px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  background: var(--bg);
  font-variant-numeric: tabular-nums;
}
.flow-arrow {
  text-align: center;
  color: var(--accent);
  font-size: 1.3rem;
  line-height: 1;
  padding: 0.45rem 0;
  user-select: none;
}
.process-outro h2 {
  font-family: var(--serif); font-size: 1.4rem; font-weight: 400;
  margin-bottom: 0.7rem;
}
.process-outro .reasons { padding-left: 1.4rem; margin-bottom: 1rem; }
.process-outro .reasons li { line-height: 1.7; margin-bottom: 0.6rem; }
.process-intro code, .flow code, .process-outro code {
  font-size: 0.85em; background: var(--accent-light);
  padding: 0.05em 0.35em; border-radius: 4px;
}