/**
 * Supplementary styles for project_setlist full view.
 * Builds on lyric_sheet_chords/setlist.css (setlist-container, -header,
 * -title, -controls, -songs, song-wrapper, etc). Only adds what's new:
 *   - .setlist-project  (project name line under title)
 *   - .setlist-notes    (private band notes block above songs)
 *   - .setlist-jump     (in-page nav: jump to any song in the setlist)
 *   - .setlist-song-key-inline / -vocalist-inline  (admin metadata in
 *     the song title row — visible only on the private/admin setlist
 *     destination page, not on the public show-archive render)
 */

.setlist-project {
  margin-top: 0.25em;
  font-size: 1.1em;
  color: var(--muted-light);
  letter-spacing: 0.02em;
}

.setlist-project a {
  color: var(--green-pale, #c8d8c8);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition, 0.2s ease);
}

.setlist-project a:hover {
  border-bottom-color: var(--green-dim, #6b8a6b);
}

.setlist-notes {
  margin: 1rem 0 1.5rem;
  padding: 0.75rem 1rem;
  background: rgba(232, 199, 96, 0.05);
  border-left: 3px solid var(--accent, #e8c760);
  color: var(--muted-light);
  font-style: italic;
  font-size: 0.95em;
}

.setlist-notes p:last-child {
  margin-bottom: 0;
}

/* ─── Jump-to-song anchor targets ─────────────────────────────────────
   The ID now lives directly on .setlist-song-wrapper (the previous empty
   marker div approach didn't survive rendering reliably). scroll-margin-top
   reserves space above the target so the song header lands in the viewport
   instead of being hidden behind any sticky toolbar. Bump if your sticky
   header is taller. */
.setlist-song-wrapper[id^="song-"] {
  scroll-margin-top: 6rem;
}

/* ─── Jump-to-song navigation ─────────────────────────────────────── */

.setlist-jump {
  margin: 1rem 0 1.25rem;
  padding: 0.6rem 1rem;
  background: rgba(232, 199, 96, 0.03);
  border-left: 3px solid var(--accent, #e8c760);
  font-size: 0.9em;
  line-height: 1.7;
}

.setlist-jump-label {
  display: inline-block;
  margin-right: 0.6em;
  color: var(--accent, #e8c760);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.75em;
  vertical-align: middle;
}

.setlist-jump-list {
  display: inline;
  list-style: none;
  padding: 0;
  margin: 0;
}

.setlist-jump-list li {
  display: inline;
}

.setlist-jump-list li:not(:last-child)::after {
  content: " · ";
  color: var(--muted-light);
  margin: 0 0.15em;
  opacity: 0.5;
}

.setlist-jump-list a {
  color: var(--green-pale, #c8d8c8);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition, 0.2s ease), color var(--transition, 0.2s ease);
}

.setlist-jump-list a:hover {
  color: var(--accent, #e8c760);
  border-bottom-color: var(--green-dim, #6b8a6b);
}

.setlist-jump-num {
  display: inline-block;
  min-width: 1.5em;
  color: var(--muted-light);
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

.setlist-jump-key {
  display: inline-block;
  margin-left: 0.3em;
  padding: 0 0.4em;
  font-size: 0.8em;
  font-weight: 600;
  color: var(--accent, #e8c760);
  background: rgba(232, 199, 96, 0.1);
  border-radius: 3px;
  vertical-align: baseline;
}

/* Hide jump nav in print and plain-text modes — keep the printed page tight. */
@media print {
  .setlist-jump {
    display: none;
  }
}

body.setlist-plain-text .setlist-jump {
  display: none;
}

/* Inline key + vocalist in song title (admin-rich metadata). */
.setlist-song-key-inline {
  display: inline-block;
  margin-left: 0.6em;
  padding: 0 0.5em;
  font-size: 0.65em;
  font-weight: 600;
  color: var(--accent, #e8c760);
  background: rgba(232, 199, 96, 0.1);
  border-radius: 3px;
  vertical-align: middle;
  letter-spacing: 0.03em;
}

.setlist-song-vocalist-inline {
  display: inline-block;
  margin-left: 0.4em;
  font-size: 0.55em;
  font-weight: 400;
  font-style: italic;
  color: var(--muted-light);
  vertical-align: middle;
  opacity: 0.8;
}

.setlist-song-vocalist-inline::before {
  content: "· ";
  margin-right: 0.2em;
  opacity: 0.6;
}

/* Inline edit affordance in the setlist song header. Quiet by default so it
   doesn't compete with the title or Play button; lights on hover. Editors
   only (gated in template). Own class, no shared state. */
.setlist-song-edit {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.15em 0.55em;
  font-size: 0.5em;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.04em;
  vertical-align: middle;
  color: var(--muted-light);
  text-decoration: none;
  border: 1px solid var(--line, rgba(255,255,255,0.14));
  border-radius: 999px;
  opacity: 0.65;
  transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.setlist-song-edit:hover,
.setlist-song-edit:focus-visible {
  opacity: 1;
  color: var(--paper, #f4efe6);
  border-color: var(--accent, currentColor);
}

@media (max-width: 600px) {
  .setlist-song-key-inline,
  .setlist-song-vocalist-inline {
    display: block;
    margin-left: 0;
    margin-top: 0.2em;
    font-size: 0.75em;
  }
  .setlist-song-vocalist-inline::before {
    content: "";
  }
}

/* Hide admin metadata in plain-text mode (setlist.js toggles a body class). */
body.setlist-plain-text .setlist-song-key-inline,
body.setlist-plain-text .setlist-song-vocalist-inline {
  display: none;
}

/* ─── Back-to-top link per song ─────────────────────────────────── */

.setlist-song-totop {
  display: inline-block;
  margin: 0.5rem 0;
  padding: 0.15em 0.6em;
  font-size: 0.75em;
  color: var(--muted-light);
  text-decoration: none;
  border: 1px solid rgba(232, 199, 96, 0.2);
  border-radius: 3px;
  opacity: 0.5;
  transition: opacity var(--transition, 0.2s ease), color var(--transition, 0.2s ease), border-color var(--transition, 0.2s ease);
}

.setlist-song-totop:hover {
  opacity: 1;
  color: var(--accent, #e8c760);
  border-color: var(--accent, #e8c760);
}

@media print {
  .setlist-song-totop {
    display: none;
  }
}

body.setlist-plain-text .setlist-song-totop {
  display: none;
}

/* Top anchor target — give it scroll margin so it doesn't land under the
   sticky controls bar when triggered from a "↑ top" link. */
#setlist-top {
  scroll-margin-top: 1rem;
}

/* ============================================================
   SETLIST-WIDE TOOLS — unified with the chart's design tokens

   The page-level setlist toolbar (Size / Theme / Plain text) sits
   above the songs and used to have its own visual treatment. Now
   it uses the same warm-cream / accent-rust palette as the
   per-chart tools below, so the page reads as one continuous design.
   ============================================================ */
.setlist-container {
  --paper:        #F4ECD8;
  --paper-edge:   #D6C9A9;
  --ink-muted:    #6B5938;
  --ink-faint:    #8A7755;
  --accent:       #B8581D;
  --accent-deep:  #9C4A18;
  --tool-radius:  4px;
}
.setlist-container.setlist-dark-mode {
  --paper:        #000;
  --paper-edge:   #2A2A2A;
  --ink-muted:    #999;
  --ink-faint:    #777;
  --accent:       #e8c760;
  --accent-deep:  #C9A748;
}

/* Setlist-wide tools-toggle (the "⚙ Tools" button at the top of a
   project setlist page) — same minimal treatment as the per-chart
   toggle. Higher specificity to win over base setlist.css. */
.setlist-container .setlist-tools-toggle {
  background: transparent;
  color: var(--ink-muted);
  border: 1px solid var(--paper-edge);
  border-radius: var(--tool-radius);
  padding: 4px 10px;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.setlist-container .setlist-tools-toggle:hover,
.setlist-container .setlist-tools-toggle[aria-expanded="true"] {
  color: var(--accent);
  border-color: var(--accent);
  outline: none;
}

/* Setlist buttons (.setlist-btn applies to size, theme, plain-text).
   One palette, one shape, matches the per-chart tools below. */
.setlist-container .setlist-btn,
.setlist-container .setlist-size-btn,
.setlist-container .setlist-toggle-theme,
.setlist-container .toggle-plain-text {
  background: transparent !important;
  color: var(--ink-muted) !important;
  border: 1px solid var(--paper-edge) !important;
  border-radius: var(--tool-radius) !important;
  padding: 4px 10px !important;
  font-family: inherit !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  cursor: pointer !important;
  transition: color 0.15s ease, border-color 0.15s ease !important;
  font-weight: 400 !important;
  box-shadow: none !important;
}
.setlist-container .setlist-btn:hover,
.setlist-container .setlist-size-btn:hover,
.setlist-container .setlist-toggle-theme:hover,
.setlist-container .toggle-plain-text:hover,
.setlist-container .setlist-size-btn.active {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* Group labels (Size:, etc.) — small uppercase muted to match the
   per-chart tools labels. */
.setlist-container .setlist-control-group label {
  font-size: 11px !important;
  color: var(--ink-faint) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}

/* Setlist-wide chart theme picker — matches the .setlist-btn palette/shape. */
.setlist-container .setlist-theme-select {
  background: transparent !important;
  color: var(--ink-muted) !important;
  border: 1px solid var(--paper-edge) !important;
  border-radius: var(--tool-radius) !important;
  padding: 4px 10px !important;
  font-family: inherit !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  cursor: pointer !important;
  font-weight: 400 !important;
}
.setlist-container .setlist-theme-select:hover {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* Setlist info pill (e.g. "12 songs in set") — match meta strip style. */
.setlist-container .setlist-info {
  font-family: 'Menlo', 'Consolas', monospace !important;
  font-size: 11px !important;
  color: var(--ink-faint) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Setlist controls bar container — light hairline rules top/bottom
   instead of the previous heavy box treatment. Reads as a thin
   dashboard strip on the page. */
.setlist-container .setlist-controls {
  background: transparent !important;
  border: 0 !important;
  border-top: 0.5px solid var(--paper-edge) !important;
  border-bottom: 0.5px solid var(--paper-edge) !important;
  border-radius: 0 !important;
  padding: 10px 0 !important;
  margin: 0 0 16px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  box-shadow: none !important;
}

/* Setlist jump nav (the "Jump to:" anchor list) — tone down and
   align with the new aesthetic. */
.setlist-container .setlist-jump {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 0.5px solid var(--paper-edge) !important;
  padding: 6px 0 12px 0 !important;
}
.setlist-container .setlist-jump-label {
  font-size: 11px !important;
  color: var(--ink-faint) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}
.setlist-container .setlist-jump-list a {
  color: var(--ink-muted) !important;
  text-decoration: none !important;
  padding: 2px 8px !important;
  border-radius: var(--tool-radius) !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}
.setlist-container .setlist-jump-list a:hover {
  color: var(--accent) !important;
  background: rgba(184, 88, 29, 0.06) !important;
}
.setlist-container.setlist-dark-mode .setlist-jump-list a:hover {
  background: rgba(232, 199, 96, 0.08) !important;
}

/* Inline song-key chip in the setlist title row — match the metadata
   strip's KEY treatment. */
.setlist-container .setlist-song-key-inline {
  color: var(--accent) !important;
  background: rgba(184, 88, 29, 0.08) !important;
  font-family: 'Menlo', 'Consolas', monospace !important;
}
.setlist-container.setlist-dark-mode .setlist-song-key-inline {
  background: rgba(232, 199, 96, 0.1) !important;
}

/* ============================================================
   ROUND 5 — JUMP-TO NAV REDESIGN

   Was a bullet list. Now a designed grid: each song is a chip with
   a number badge, title + vocalist, and a key pill. Hover lifts.
   Reads like a concert program at a glance.
   ============================================================ */
.setlist-container .setlist-jump {
  background: transparent !important;
  border: 0 !important;
  border-top: 0.5px solid var(--paper-edge) !important;
  border-bottom: 0.5px solid var(--paper-edge) !important;
  padding: 16px 0 !important;
  margin: 0 0 24px 0 !important;
}

.setlist-jump-header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 14px;
}
.setlist-container .setlist-jump-label {
  font-family: inherit !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: var(--accent) !important;
}
.setlist-container .setlist-jump-count {
  font-family: 'Menlo', 'Consolas', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--ink-faint) !important;
}

.setlist-container .setlist-jump-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 6px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  counter-reset: setlist-jump-counter;
}

.setlist-container .setlist-jump-item {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.setlist-container .setlist-jump-link {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px 8px 8px !important;
  border-radius: 6px !important;
  border: 0.5px solid transparent !important;
  background: rgba(184, 88, 29, 0.03) !important;
  text-decoration: none !important;
  color: var(--ink-muted) !important;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease !important;
}
.setlist-container .setlist-jump-link:hover {
  background: rgba(184, 88, 29, 0.08) !important;
  border-color: var(--accent) !important;
  transform: translateY(-1px) !important;
}

.setlist-container .setlist-jump-num {
  flex: 0 0 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: 4px !important;
  background: var(--accent) !important;
  color: #F4ECD8 !important;
  font-family: 'Menlo', 'Consolas', monospace !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

.setlist-container .setlist-jump-body {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  gap: 1px !important;
}
.setlist-container .setlist-jump-title {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  font-family: inherit !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  background: transparent !important;
  padding: 0 !important;
}
.setlist-container .setlist-jump-voc {
  font-size: 11px !important;
  font-style: italic !important;
  color: var(--ink-faint) !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.setlist-container .setlist-jump-key {
  flex: 0 0 auto !important;
  padding: 2px 8px !important;
  background: rgba(184, 88, 29, 0.1) !important;
  color: var(--accent) !important;
  border-radius: 999px !important;
  font-family: 'Menlo', 'Consolas', monospace !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* Dark mode — flip backgrounds + key chip tint */
.setlist-container.setlist-dark-mode .setlist-jump-link {
  background: rgba(232, 199, 96, 0.04) !important;
}
.setlist-container.setlist-dark-mode .setlist-jump-link:hover {
  background: rgba(232, 199, 96, 0.1) !important;
}
.setlist-container.setlist-dark-mode .setlist-jump-num {
  background: #e8c760 !important;
  color: #1A1410 !important;
}
.setlist-container.setlist-dark-mode .setlist-jump-key {
  background: rgba(232, 199, 96, 0.12) !important;
  color: #e8c760 !important;
}

@media screen and (max-width: 600px) {
  .setlist-container .setlist-jump-list {
    grid-template-columns: 1fr !important;
  }
}
@media print {
  .setlist-container .setlist-jump {
    display: none !important;
  }
}

/* ============================================================

/* ============================================================
   ROUND 6 (REVISED) — SETLIST GREEN PALETTE
   + COMFORTABLE JUMP MENU
   + DARK-MODE LYRICS → SOFT BLUE

   The jump menu now reads as a real setlist program:
   generous line height, monospace numbering, hairline dividers
   between songs, comfortable hover. Single column (or two when
   there's space), not a hap-hazard pile of pills.
   ============================================================ */

/* --- Setlist tokens — green palette --- */
.setlist-container {
  --paper:        #F5F2EA;
  --paper-edge:   #C8C8B8;
  --paper-tint:   rgba(61, 115, 89, 0.05);
  --ink:          #1A1F1B;
  --ink-muted:    #5A6058;
  --ink-faint:    #8A908A;
  --accent:       #3D7359;
  --accent-deep:  #2A523F;
  --accent-soft:  rgba(61, 115, 89, 0.1);
}
.setlist-container.setlist-dark-mode {
  --paper:        #0A0E0C;
  --paper-edge:   #4A5448;
  --paper-tint:   rgba(111, 191, 161, 0.06);
  --ink:          #EFEFEF;
  --ink-muted:    #B5BCC5;
  --ink-faint:    #888;
  --accent:       #6FBFA1;
  --accent-deep:  #4FA08D;
  --accent-soft:  rgba(111, 191, 161, 0.1);
}

/* --- Dark-mode LYRICS in setlist context → soft blue.
   Most-specific selectors + !important to win against any earlier
   contrast bumps regardless of file load order. --- */
.setlist-container.setlist-dark-mode .lyric-line,
.setlist-container.setlist-dark-mode .lyrics,
.setlist-container.setlist-dark-mode .style-lyrics,
.setlist-container.setlist-dark-mode .harmonies,
.setlist-container.setlist-dark-mode .style-harmonies {
  color: #B0C8DC !important;
}

/* ============================================================
   JUMP MENU — concert program layout

   Single-column list with monospace numbers, generous line
   height, hairline dividers between songs. On wide viewports
   splits into two columns to use the space without losing the
   list rhythm. Hover paints the accent in a way that feels
   like turning a page, not poking at a button.
   ============================================================ */

.setlist-container .setlist-jump {
  background: transparent !important;
  border: 0 !important;
  border-top: 0.5px solid var(--paper-edge) !important;
  border-bottom: 0.5px solid var(--paper-edge) !important;
  padding: 18px 0 6px 0 !important;
  margin: 0 0 28px 0 !important;
}

.setlist-container .setlist-jump-header {
  display: flex !important;
  align-items: baseline !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
}
.setlist-container .setlist-jump-label {
  font-family: inherit !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: var(--accent) !important;
}
.setlist-container .setlist-jump-count {
  font-family: 'Menlo', 'Consolas', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--ink-faint) !important;
}

/* Two-column program layout when there's space; single column on
   narrow screens. CSS columns rather than grid keeps the list
   rhythm intact while flowing across columns. */
.setlist-container .setlist-jump-list {
  display: block !important;
  column-count: 2 !important;
  column-gap: 32px !important;
  column-rule: 0.5px solid var(--paper-edge) !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  grid-template-columns: none !important;
}
@media screen and (max-width: 720px) {
  .setlist-container .setlist-jump-list {
    column-count: 1 !important;
  }
}

.setlist-container .setlist-jump-item {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  break-inside: avoid !important;
  -webkit-column-break-inside: avoid !important;
  page-break-inside: avoid !important;
}

/* Each program line: generous height, monospace number, ample
   letterspacing. Hairline divider at the bottom for that printed-
   program rhythm. Hover paints accent-soft across the row. */
.setlist-container .setlist-jump-link {
  display: flex !important;
  align-items: baseline !important;
  gap: 14px !important;
  padding: 9px 8px !important;
  border-radius: 4px !important;
  border: 0 !important;
  border-bottom: 0.5px dotted var(--paper-edge) !important;
  background: transparent !important;
  text-decoration: none !important;
  color: #C9BC9A !important;
  transition: background 0.18s ease, color 0.18s ease, padding-left 0.18s ease !important;
  line-height: 1.2 !important;
}
.setlist-container .setlist-jump-link:hover {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  padding-left: 14px !important;
}

.setlist-container .setlist-jump-num {
  flex: 0 0 auto !important;
  display: inline-block !important;
  width: 28px !important;
  height: auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #D9B25A !important;
  font-family: 'Menlo', 'Consolas', monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-align: right !important;
  letter-spacing: 0.04em !important;
}
.setlist-container .setlist-jump-link:hover .setlist-jump-num {
  color: var(--accent) !important;
}
.setlist-container.setlist-dark-mode .setlist-jump-num {
  background: transparent !important;
  color: var(--ink-faint) !important;
}

.setlist-container .setlist-jump-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #EFE4CB !important;
  font-family: inherit !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: normal !important;
  background: transparent !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
}

/* Hide any body/voc/key elements that might slip through from
   cached templates. The new design uses only num + title. */
.setlist-container .setlist-jump-body,
.setlist-container .setlist-jump-voc,
.setlist-container .setlist-jump-key {
  display: none !important;
}

@media print {
  .setlist-container .setlist-jump { display: none !important; }
}

/* ============================================================
   ROUND 7 — JUMP MENU PRO POLISH

   Tighter rows (24px instead of 36px+), three columns on wide
   screens, refined typography, no wasted vertical space.
   Reads like a record-sleeve track listing.
   ============================================================ */

/* Three columns on wide, two on medium, one on mobile. CSS columns
   keeps the list rhythm intact across columns. */
.setlist-container .setlist-jump-list {
  display: block !important;
  column-count: 3 !important;
  column-gap: 28px !important;
  column-rule: 0.5px solid var(--paper-edge) !important;
}
@media screen and (max-width: 960px) {
  .setlist-container .setlist-jump-list {
    column-count: 2 !important;
  }
}
@media screen and (max-width: 560px) {
  .setlist-container .setlist-jump-list {
    column-count: 1 !important;
  }
}

/* Tighter rows: less vertical padding, dotted divider stays but
   thinner; baseline-aligned number and title. */
.setlist-container .setlist-jump-link {
  padding: 5px 6px !important;
  gap: 12px !important;
  border-bottom: 0.5px dotted var(--paper-edge) !important;
  line-height: 1.3 !important;
}
.setlist-container .setlist-jump-link:hover {
  padding-left: 10px !important;
}

/* Smaller monospace number, two-digit padded zero. The padded zero
   gives a record-sleeve feel: 01, 02, 03 ... */
.setlist-container .setlist-jump-num {
  width: 22px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  color: var(--ink-faint) !important;
  text-align: right !important;
}

/* Title tightens up, more refined typography. */
.setlist-container .setlist-jump-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #EFE4CB !important;
  letter-spacing: 0.01em !important;
  line-height: 1.3 !important;
}

/* Make the count chip in the header feel more designed too. */
.setlist-container .setlist-jump-header {
  margin-bottom: 12px !important;
  padding-bottom: 4px !important;
  border-bottom: 0.5px solid var(--paper-edge) !important;
}
.setlist-container .setlist-jump-label {
  letter-spacing: 0.25em !important;
}

/* ─── Per-song view modes (Outline / Title only) ──────────────────────
   Each song has its own two-button toolbar between the title row and
   chart body. Modes are independent per song and persist in
   localStorage by song nid (see js/setlist-view-modes.js).

   - Outline view: JS marks the section-header paragraphs and the single
     following content paragraph with .setlist-keep; CSS hides everything
     else inside .setlist-song-content. Songs with no section headers
     fall back to keeping only the first non-empty paragraph.
   - Title-only view: collapses .setlist-song-content entirely and the
     per-song back-to-top link (no point with nothing below it). */

.setlist-song-view-modes {
  display: flex;
  gap: 0.35rem;
  margin: 0.15rem 0 0.6rem;
  flex-wrap: wrap;
}

.setlist-song-view-modes .setlist-view-mode-btn,
.setlist-song-view-modes .song-fit-toggle {
  background: transparent;
  color: var(--muted-light, #b0b0b0);
  border: 1px solid var(--green-dim, #6b8a6b);
  border-radius: 3px;
  padding: 0.15rem 0.55rem;
  font-size: 0.78em;
  font-family: inherit;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease,
              border-color 0.15s ease;
}

.setlist-song-view-modes .setlist-view-mode-btn:hover {
  background: rgba(107, 138, 107, 0.18);
  color: var(--green-pale, #c8d8c8);
}

.setlist-song-view-modes .setlist-view-mode-btn[aria-pressed="true"],
.setlist-song-view-modes .song-fit-toggle[aria-pressed="true"] {
  background: var(--green-dim, #6b8a6b);
  color: #fff;
  border-color: var(--green-dim, #6b8a6b);
}

/* Title-only: hide the chart body and the back-to-top link below it.
   The song title row stays visible — that is the whole point of this
   mode (you already know the song, just need to see what's next). */
.setlist-song-wrapper.view-titles .setlist-song-content,
.setlist-song-wrapper.view-titles .setlist-song-totop {
  display: none;
}

/* Outline mode targets logical lines wrapped by JS into spans of class
   .setlist-line, classified .setlist-line-{section|chord|lyric|note}.
   We hide ONLY lyric lines beyond the first of each section (those
   carry .setlist-outline-hide). Chord rows, song messages, and section
   headers stay visible — the chord chart still functions, just with
   the repetitive verse/chorus lyrics collapsed to one cue line each.

   The trailing <br> immediately after each hidden lyric line also
   hides — otherwise we'd accumulate blank line gaps where lyrics used
   to be. Adjacent-sibling selector handles this cleanly.

   Failsafe: if processOutline doesn't find any section markers, no
   .setlist-outline-hide marks get applied and outline silently does
   nothing rather than blanking the chart. */
.setlist-song-wrapper.view-outline .setlist-song-content .setlist-line-lyric.setlist-outline-hide,
.setlist-song-wrapper.view-outline .setlist-song-content .setlist-outline-hide + br {
  display: none;
}

/* ─── Per-song duration chip + setlist total ──────────────────────
   The duration chip rides at the right of each jump-list row,
   matching the .setlist-jump-key chip style but in a quieter neutral
   so it never competes visually with the song's key. Total row sits
   below the list — same hairline-rule aesthetic as setlist-controls,
   so it reads as a footer of the list rather than another item. */

.setlist-container .setlist-jump-duration {
  flex: 0 0 auto !important;
  padding: 2px 8px !important;
  background: rgba(107, 89, 56, 0.08) !important;
  color: var(--ink-muted) !important;
  border-radius: 999px !important;
  font-family: 'Menlo', 'Consolas', monospace !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  margin-left: auto !important;
}
.setlist-container.setlist-dark-mode .setlist-jump-duration {
  background: rgba(232, 199, 96, 0.06) !important;
  color: var(--ink-muted) !important;
}

.setlist-container .setlist-jump-total {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  margin-top: 6px !important;
  border-top: 0.5px solid var(--paper-edge) !important;
  border-bottom: 0.5px solid var(--paper-edge) !important;
}
.setlist-container .setlist-jump-total-label {
  font-family: inherit !important;
  font-size: 11px !important;
  color: var(--ink-faint) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
.setlist-container .setlist-jump-total-value {
  font-family: 'Menlo', 'Consolas', monospace !important;
  font-size: 13px !important;
  color: var(--accent) !important;
  letter-spacing: 0.04em !important;
  font-weight: 500 !important;
}
.setlist-container .setlist-jump-total-untimed {
  font-family: inherit !important;
  font-size: 11px !important;
  font-style: italic !important;
  color: var(--ink-faint) !important;
  margin-left: 6px !important;
  font-weight: 400 !important;
}

/* ── Set splitting (Set Break divider) ─────────────────────────────────────
   Rendered when a setlist contains a dummy "Set Break" song. Headers announce
   each set + its runtime; the break divider replaces that dummy song's chart. */
.setlist-set-header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 8px 0 18px;
  padding-bottom: 8px;
  border-bottom: 2px solid currentColor;
  opacity: .92;
}
.setlist-set-label {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.setlist-set-meta {
  font-size: .95rem;
  font-style: italic;
  opacity: .7;
  font-variant-numeric: tabular-nums;
}
.setlist-set-break {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 40px 0;
  text-align: center;
}
.setlist-set-break::before,
.setlist-set-break::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: .3;
}
.setlist-set-break-label {
  font-size: 1.05rem;
  font-style: italic;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .65;
  white-space: nowrap;
}
/* Jump-nav set subheaders */
.setlist-jump-setheader {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 14px 0 4px;
  padding: 4px 0 3px;
  border-bottom: 1px solid currentColor;
  opacity: .75;
}
.setlist-jump-setheader:first-child { margin-top: 0; }
.setlist-jump-set-label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.setlist-jump-set-total {
  font-size: .72rem;
  font-style: italic;
  opacity: .8;
  font-variant-numeric: tabular-nums;
}