/* show-detail.css — BTB Show Detail Page v5.70 */

/* ── Design tokens (inherit from site-header.css) ────────────── */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.show-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px 60px;
  color: #e4eaf5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.show-loading, .show-error {
  text-align: center;
  padding: 60px 20px;
  color: #5a7090;
  font-size: 15px;
}
.show-error { color: #e06060; }

/* ── Prev / Next nav ─────────────────────────────────────────── */
.show-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  margin-bottom: 8px;
  border-bottom: 1px solid #1a2b3f;
}
.show-nav a {
  color: #7c9fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(124,159,255,.2);
  transition: background .15s, border-color .15s;
}
.show-nav a:hover {
  background: rgba(124,159,255,.12);
  border-color: rgba(124,159,255,.5);
}
.show-nav .nav-spacer { flex: 1; }
.show-nav .nav-center {
  font-size: 11px;
  color: #5a7090;
  text-align: center;
}

/* ── Top grid: hero area + setlist sidebar ───────────────────── */
.show-top-grid {
  position: relative; /* v6.3.9 — anchor for .show-top20-badge in upper-right corner */
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
  margin-bottom: 24px;
}
@media (max-width: 900px) {
  .show-top-grid { grid-template-columns: 1fr; }
}
.show-top-left { min-width: 0; }

/* v6.3.9 — Top 20 Hall of Fame badge container. Positioned upper-right
   of the show-top-grid so it sits at the top of the page above the
   setlist sidebar header. Stays empty (display:none) when the show
   isn't in the Top 20 list. Mirrors the .top20Badge visual treatment
   from archived_shows.html — same SVG, same gold treatment, same
   drop-shadow, same hover scale. */
.show-top20-badge {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 6;
  pointer-events: none; /* the inner span re-enables for tooltip */
}
.show-top20-badge:empty { display: none; }
.show-top20-badge .top20Badge {
  position: relative;
  display: block;
  width: 56px;
  height: 56px;
  pointer-events: auto;
  cursor: help;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.7));
  transition: transform .18s ease;
}
.show-top20-badge .top20Badge:hover { transform: scale(1.08); }
.show-top20-badge .top20Badge svg { display: block; width: 100%; height: 100%; }
@media (max-width: 900px) {
  /* On narrow viewports the grid collapses to single-column. Keep the
     badge top-right but slightly smaller. */
  .show-top20-badge .top20Badge { width: 44px; height: 44px; }
}

/* ── Hero section ────────────────────────────────────────────── */
.show-hero {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 24px;
}
@media (max-width: 700px) {
  .show-hero { grid-template-columns: 1fr; }
}

.show-poster-wrap {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  overflow: hidden;
}
.show-poster {
  width: 100%;
  display: block;
  object-fit: contain;
}
.show-poster-placeholder {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: rgba(255,255,255,.15);
  background: radial-gradient(circle at 30% 30%, rgba(124,159,255,.08), transparent 70%);
}

/* ── The night's photograph ──────────────────────────────────── */
/* Sits under the hero, full width of the left column, because a photograph of the night is the
   most evocative thing on this page and a 280px poster column would waste it. Capped by height
   rather than width so a tall frame cannot push the setlist off the screen. */
.show-photo { margin: 0 0 24px; }
.show-photo-fig { margin: 0; }
.show-photo-fig a { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 14px;
  overflow: hidden; border: 1px solid rgba(255,255,255,.08); background: #0b0f14; }
.show-photo-blur { position: absolute; inset: 0; background-size: cover; background-position: center;
  filter: blur(26px) saturate(.75) brightness(.5); transform: scale(1.15); }
@media (max-width: 700px) { .show-photo-fig a { aspect-ratio: 4 / 3; } }
/* A HORIZONTAL SLOT THAT THE PHOTOGRAPH FILLS. Three wrong answers came before this one: cover
   centred butchered a portrait frame, contain left dead bars either side, and contain inside a
   16:9 box shrank a 1154x2048 portrait to a 188px sliver floating in blur. The box is a fixed
   16:9 so the slot is always horizontal, and the photograph fills it. The crop is anchored at 38%
   rather than the centre because in a live shot the faces sit above the middle: a tall frame
   loses ceiling and floor, which is what a tall frame has too much of. The blurred copy stays
   underneath as the backdrop while the full image is still loading. */
.show-photo-fig img { position: relative; display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 38%; }
.show-photo-fig figcaption { margin-top: 7px; font-size: 12px; color: rgba(255,255,255,.45); }

.show-hero-right { display: flex; flex-direction: column; gap: 12px; }
.show-info { display: flex; flex-direction: column; gap: 6px; }
.show-date {
  font-size: 13px;
  font-weight: 700;
  color: #7c9fff;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.show-title {
  font-size: 28px;
  font-weight: 800;
  margin: 0;
  line-height: 1.15;
}

/* v6.0.3 → v6.0.4 — Tier 3 Show Significance. v6.0.4 splits the visual:
 * a small colored PILL carries the type label, with the note rendered as
 * italic prose beside it (wrapping to the next line on narrow viewports).
 * Keeps the pill compact at any note length. Sits between title and venue. */
.show-significance-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 8px 0 4px;
  max-width: 100%;
}
.show-significance-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  font-size: 11px;
  line-height: 1.4;
  white-space: nowrap;
  flex-shrink: 0;
}
.show-significance-note {
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.45;
  color: #cfe0fa;
  opacity: 0.92;
  margin: 0;
  flex: 1 1 260px;
  min-width: 0;
}
/* Per-type palette — border + background + label text color on the pill. */
.show-significance--first_together { border-color: #4cd489; background: rgba(76, 212, 137, 0.14); color: #a2ecc5; }
.show-significance--lineup_debut   { border-color: #7acbff; background: rgba(122, 203, 255, 0.14); color: #bde2ff; }
.show-significance--last_show      { border-color: #ff7a7a; background: rgba(255, 122, 122, 0.14); color: #ffb3b3; }
.show-significance--tour_kickoff   { border-color: #ffb04c; background: rgba(255, 176, 76, 0.14); color: #ffd18a; }
.show-significance--tour_closer    { border-color: #c98cff; background: rgba(201, 140, 255, 0.14); color: #dfbcff; }
.show-significance--milestone      { border-color: #ffd34c; background: rgba(255, 211, 76, 0.16); color: #ffe59a; }
.show-significance--notable        { border-color: #8ab4ff; background: rgba(138, 180, 255, 0.14); color: #bcd1ff; }

/* v6.3.0 — Tier 3 Lineup Rarity badge.
 * Mirrors the show-significance row layout exactly — pill + italic
 * note alongside, wraps to its own line on narrow viewports. Two
 * visual variants: --unique (1-time lineup) gets a brighter teal,
 * --rare (2-3 times) gets a muted teal-violet. Sits between any
 * Show Significance row and the venue line; both can render on
 * the same show with no visual conflict. */
.show-rarity-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 6px 0 4px;
  max-width: 100%;
}
.show-rarity-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  font-size: 11px;
  line-height: 1.4;
  white-space: nowrap;
  flex-shrink: 0;
}
.show-rarity-note {
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.45;
  color: #cfe0fa;
  opacity: 0.92;
  margin: 0;
  flex: 1 1 260px;
  min-width: 0;
}
.show-rarity--unique { border-color: #5fe3d9; background: rgba(95, 227, 217, 0.16); color: #aff0ea; }
.show-rarity--rare   { border-color: #b59cff; background: rgba(181, 156, 255, 0.14); color: #d6c8ff; }

/* v6.4.0 — Milestones on detail page. Mirrors archived-card pill colors:
 *   nth        = light blue (10th/25th/100th counts)
 *   career     = magenta (career-total milestones, the rarest)
 *   band-first = green (first show with a recurring band, threshold 15)
 *   band-last  = red (last show with a band, 12-month dormant rule)
 * Each row stacks below the rarity row and above the venue line. Multiple
 * milestones can render on a single show — they fall into a vertical stack. */
.show-milestones {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 6px;
}
.show-milestone-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  max-width: 100%;
}
.show-milestone-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  font-size: 11px;
  line-height: 1.4;
  white-space: nowrap;
  flex-shrink: 0;
}
.show-milestone-note {
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.45;
  color: #cfe0fa;
  opacity: 0.92;
  margin: 0;
  flex: 1 1 260px;
  min-width: 0;
}
.show-milestone--nth        .show-milestone-pill { border-color: #9bc4ff; background: rgba(155, 196, 255, 0.14); color: #cfe1ff; }
.show-milestone--career     .show-milestone-pill { border-color: #ff8ad6; background: rgba(255, 138, 214, 0.14); color: #ffc4e8; }
.show-milestone--band-first .show-milestone-pill { border-color: #4cd489; background: rgba(76, 212, 137, 0.14); color: #a2ecc5; }
.show-milestone--band-last  .show-milestone-pill { border-color: #ff7a7a; background: rgba(255, 122, 122, 0.14); color: #ffb3b3; }
/* v6.4.7 — per-musician milestone (Bill's Nth show with X). Distinct lavender
   palette so it's visually separate from the band/venue blue 'nth' variant. */
.show-milestone--musician   .show-milestone-pill { border-color: #c4a8ff; background: rgba(196, 168, 255, 0.14); color: #e1d4ff; }

/* v6.4.6 — Anniversary widget. Renders only when today's MM-DD matches the
   show's MM-DD. Two variants: subtle (1/2/3/4/6/7/8/9/11/12 yrs etc.) and
   gold milestone (5/10/15/20/25/30/35/40/45/50 yrs). */
.show-anniversary {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  padding: 12px 16px;
  background: rgba(74, 122, 191, 0.10);
  border: 1px solid rgba(74, 122, 191, 0.32);
  border-left: 3px solid #7c9fff;
  border-radius: 0 10px 10px 0;
}
.show-anniversary--milestone {
  background: linear-gradient(135deg, rgba(255, 208, 106, 0.12) 0%, rgba(220, 168, 56, 0.06) 100%);
  border-color: rgba(255, 208, 106, 0.42);
  border-left-color: #dca838;
  border-left-width: 4px;
}
.show-anniversary-emoji {
  font-size: 28px;
  flex-shrink: 0;
  line-height: 1;
}
.show-anniversary-text { min-width: 0; }
.show-anniversary-title {
  font-size: 15px;
  font-weight: 800;
  color: #e4eaf5;
  letter-spacing: 0.01em;
  margin: 0 0 2px;
}
.show-anniversary--milestone .show-anniversary-title {
  background: linear-gradient(180deg, #ffe580 0%, #dca838 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 900;
}
.show-anniversary-sub {
  font-size: 13px;
  color: #8aabcf;
  line-height: 1.4;
}

.show-venue-line {
  font-size: 15px;
  color: #8aabcf;
  margin: 2px 0;
}
.show-venue-line a { color: #7c9fff; text-decoration: none; }
.show-venue-line a:hover { text-decoration: underline; }
.show-time {
  font-size: 13px;
  color: #5a7090;
}
.show-band-link {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(124,159,255,.3);
  color: #7c9fff;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s;
}
.show-band-link:hover { background: rgba(124,159,255,.12); }

/* ── Career moment bar ───────────────────────────────────────── */
.show-career {
  background: rgba(124,159,255,.06);
  border: 1px solid rgba(124,159,255,.15);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 24px;
}
.career-text {
  font-size: 13px;
  color: #8aabcf;
  margin-bottom: 8px;
}
.career-text strong { color: #e4eaf5; }
.career-bar-wrap {
  height: 6px;
  background: rgba(124,159,255,.1);
  border-radius: 3px;
  overflow: hidden;
}
.career-bar {
  height: 100%;
  background: linear-gradient(90deg, #7c9fff, #4a9a6f);
  border-radius: 3px;
  transition: width .6s ease-out;
}

/* ── Section styling ─────────────────────────────────────────── */
.show-section { margin-bottom: 24px; }
.show-section-title {
  font-size: 14px;
  font-weight: 700;
  color: #7c9fff;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #1a2b3f;
}

/* ── Lineup (multi-band) ────────────────────────────────────── */
.lineup-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lineup-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(255,255,255,.03);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.06);
}
.lineup-order {
  font-size: 11px;
  font-weight: 700;
  color: #5a7090;
  min-width: 20px;
}
.lineup-band {
  font-weight: 600;
  font-size: 14px;
}
.lineup-band.is-bill { color: #7c9fff; }
.lineup-role {
  font-size: 11px;
  color: #5a7090;
  margin-left: auto;
}

/* ── Participants ────────────────────────────────────────────── */
.participants-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.participant-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.4;
}
.participant-name { font-weight: 600; }
.participant-instrument { color: #5a7090; font-size: 10px; }
.participant-callout {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 999px;
  white-space: nowrap;
}
.callout-fillin { background: rgba(201,168,76,.15); color: #c9a84c; }
.callout-debut { background: rgba(74,154,111,.15); color: #4a9a6f; }
.callout-return { background: rgba(124,159,255,.15); color: #7c9fff; }

/* ── Setlist sidebar ─────────────────────────────────────────── */
.show-setlist-sidebar {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(124,159,255,.25) transparent;
}
.show-setlist-sidebar::-webkit-scrollbar { width: 4px; }
.show-setlist-sidebar::-webkit-scrollbar-thumb { background: rgba(124,159,255,.25); border-radius: 2px; }
@media (max-width: 900px) {
  .show-setlist-sidebar { position: static; max-height: none; }
}

/* ── Setlist vertical list ──────────────────────────────────── */
.setlist-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.setlist-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background .12s;
  min-height: 28px;
}
.setlist-row:hover {
  background: rgba(255,255,255,.04);
}
.setlist-row__num {
  font-size: 10px;
  font-weight: 700;
  color: #3a5878;
  min-width: 18px;
  text-align: right;
  flex-shrink: 0;
}
.setlist-row__bar {
  width: 6px;
  min-height: 18px;
  border-radius: 3px;
  flex-shrink: 0;
  align-self: stretch;
}
.setlist-row__name {
  font-size: 12px;
  font-weight: 600;
  color: #e4eaf5;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.setlist-row__artist {
  font-weight: 400;
  color: #5a7090;
  font-size: 11px;
}
.setlist-row__plays {
  font-size: 10px;
  font-weight: 700;
  color: #5a7090;
  min-width: 22px;
  text-align: right;
  flex-shrink: 0;
}
.setlist-row__badge {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Heatmap intensity levels — green → yellow → orange → red */
.setlist-cell--q0 { background: rgba(168,85,247,.50); }   /* <5 plays — purple (rare) */
.setlist-cell--q1 { background: rgba(34,197,94,.55); }    /* 5-19 plays — green */
.setlist-cell--q2 { background: rgba(234,179,8,.55); }    /* 20-49 plays — yellow */
.setlist-cell--q3 { background: rgba(249,115,22,.60); }   /* 50-99 plays — orange */
.setlist-cell--q4 { background: rgba(239,68,68,.65); }    /* 100+ plays — red (workhorse) */

/* Callout badge colors */
.badge-debut    { background: rgba(96,165,250,.20); color: #60a5fa; }  /* blue — debut */
.badge-finale   { background: rgba(224,96,96,.18); color: #e06060; }
.badge-dustoff  { background: rgba(124,159,255,.18); color: #7c9fff; }
.badge-rare     { background: rgba(168,85,247,.18); color: #a855f7; }  /* purple — rare */

/* Setlist legend */
.setlist-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  font-size: 11px;
  color: #5a7090;
}
.legend-item { display: inline-flex; align-items: center; gap: 4px; }
.legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,.06);
}
.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.legend-dot.badge-debut  { background: #60a5fa; }
.legend-dot.badge-finale { background: #e06060; }
.legend-dot.badge-dustoff { background: #7c9fff; }
.legend-dot.badge-rare   { background: #a855f7; }

/* ── Setlist insights cards ──────────────────────────────────── */
.insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.insight-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 12px 14px;
}
.insight-label {
  font-size: 11px;
  font-weight: 700;
  color: #5a7090;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.insight-value {
  font-size: 18px;
  font-weight: 800;
  color: #e4eaf5;
}
.insight-detail {
  font-size: 12px;
  color: #8aabcf;
  margin-top: 2px;
}

/* ── Venue context ───────────────────────────────────────────── */
.venue-context {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.venue-stat {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
}
.venue-stat strong { color: #e4eaf5; }
.venue-stat--upcoming {
  background: rgba(74,154,111,.12);
  border-color: rgba(74,154,111,.3);
  color: #7ccea0;
}
.venue-stat--upcoming strong { color: #7ccea0; }

/* ── v6.4.8 Ship 7 — Venue lifecycle chips ─────────────────── */
.venue-stat--lifecycle {
  background: rgba(255, 208, 106, 0.10);
  border-color: rgba(255, 208, 106, 0.32);
  color: #ffd06a;
  font-weight: 600;
}
.venue-stat--lifecycle strong { color: #ffe6a8; }

.venue-stat--dormancy {
  background: rgba(192, 132, 252, 0.10);
  border-color: rgba(192, 132, 252, 0.32);
  color: #d6b6ff;
  font-weight: 600;
}
.venue-stat--dormancy strong { color: #ead4ff; }

.venue-stat--allbands {
  background: rgba(124, 159, 255, 0.08);
  border-color: rgba(124, 159, 255, 0.28);
  color: #b8c8f5;
}
.venue-stat--allbands strong { color: #e4eaf5; }

/* ── Show notes ──────────────────────────────────────────────── */
.show-notes-text {
  font-size: 14px;
  color: #8aabcf;
  line-height: 1.5;
  background: rgba(255,255,255,.03);
  border-radius: 10px;
  padding: 14px 18px;
  border: 1px solid rgba(255,255,255,.06);
}

/* ── External links ──────────────────────────────────────────── */
.show-ext-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.show-ext-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(124,159,255,.3);
  color: #7c9fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.show-ext-link:hover {
  background: rgba(124,159,255,.12);
  border-color: rgba(124,159,255,.55);
}

/* ── Footer ──────────────────────────────────────────────────── */
.show-footer {
  margin-top: 40px;
  padding: 16px 0;
  border-top: 1px solid #1a2b3f;
  text-align: center;
  font-size: 12px;
  color: #3a5878;
}
.show-footer a { color: #5a7090; text-decoration: none; }
.show-footer a:hover { color: #7c9fff; }

/* ── Ship 27d (2026-06-04) — archive.org Listen drilldown ─────
   Mirrors the BTAM musician.html pattern (capture-phase toggle
   delegation, data-loaded gating, native <audio> + fetched track
   list) but styled for BTB's dark theme. Replaces the bare
   "Listen on Archive.org" external link in renderLinks() with
   an inline player when the archive_url is an archive.org URL. */
.show-listen { margin-top: 16px; }
.show-listen .show-section-title { margin-bottom: 8px; }
.show-listen-drilldown { display: block; margin: 0; }
.show-listen-drilldown summary {
  display: inline-block;
  cursor: pointer;
  outline: none;
  background: rgba(124,159,255,.12);
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(124,159,255,.3);
  color: #7c9fff;
  font-size: 13px;
  font-weight: 600;
  list-style: none;
  transition: background .15s, border-color .15s;
}
.show-listen-drilldown summary::-webkit-details-marker { display: none; }
.show-listen-drilldown summary::marker { content: ''; }
.show-listen-drilldown summary:hover {
  background: rgba(124,159,255,.22);
  border-color: rgba(124,159,255,.55);
}
.show-listen-drilldown[open] summary { margin-bottom: 12px; }
.show-listen-body {
  font-size: 13px;
  color: #c9d8ee;
  max-width: 560px;
}
.show-listen-body .show-listen-audio { display: block; width: 100%; max-width: 560px; }
.show-listen-body .show-listen-now-playing {
  margin-top: 6px;
  font-size: 12px;
  color: #8aa0bf;
  min-height: 1.2em;
}
.show-listen-body .show-listen-now-playing.empty::before {
  content: 'Click a track to play';
  font-style: italic;
}
.show-listen-body .show-listen-tracks {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid rgba(124,159,255,.2);
  border-radius: 6px;
  background: rgba(8,13,20,.5);
}
.show-listen-body .show-listen-tracks li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(124,159,255,.12);
}
.show-listen-body .show-listen-tracks li:last-child { border-bottom: none; }
.show-listen-body .show-listen-track-btn {
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  color: #c9d8ee;
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.show-listen-body .show-listen-track-btn:hover { background: rgba(124,159,255,.1); }
.show-listen-body .show-listen-track-btn.playing {
  background: rgba(124,159,255,.18);
  color: #ffffff;
  font-weight: 500;
}
.show-listen-body .show-listen-track-num {
  color: #5a7090;
  min-width: 24px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.show-listen-body .show-listen-track-title { flex: 1; word-break: break-word; }
.show-listen-body .show-listen-track-len {
  color: #5a7090;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}
.show-listen-body .show-listen-tracks-loading {
  margin-top: 6px;
  font-size: 12px;
  color: #5a7090;
  font-style: italic;
}
.show-listen-body .show-listen-footer {
  margin-top: 6px;
  font-size: 11px;
  color: #5a7090;
}
.show-listen-body .show-listen-footer a {
  color: #7c9fff;
  text-decoration: none;
}
.show-listen-body .show-listen-footer a:hover { text-decoration: underline; }

/* ── Ship 27d.1 (2026-06-04 evening) — hero overflow hotfix ───
   The .show-milestone-pill (e.g., "50TH SHOW WITH TRIBUTE: A
   CELEBRATION OF THE ALLMAN BROTHERS BAND") and .show-significance-pill
   both had `white-space: nowrap` + `flex-shrink: 0`. When a band's
   name is long, the pill text refuses to wrap and the pill overflows
   the .show-top-left grid column into the .show-setlist-sidebar
   column, producing visible overlap. The .show-band-link
   (e.g., "View Tribute: ... page →") had the same problem from
   `display: inline-block` with no max-width.
   Fix: allow wrap on the pills and constrain to the column width
   so the layout stays inside its grid track. */
.show-milestone-pill,
.show-significance-pill {
  white-space: normal;
  max-width: 100%;
  line-height: 1.5;
}
.show-band-link {
  max-width: 100%;
  overflow-wrap: anywhere;
  line-height: 1.45;
}