/* ============================================
   SETLIST STYLES — continuous performance display
   
   This file contains ONLY setlist-page-specific styling:
     • The .setlist-container wrapper and its UI chrome
     • Sticky controls bar, navigation buttons, song dividers
     • Wrapper-level dark/plain-text modes (chrome only)
     • Setlist-specific theme overrides and mobile layout
   
   Lyric and chord styling — colors, spacing, chord positioning,
   .lyrics / .chords / .harmonies / .songmsg classes, .dark-mode and
   .plain-text-mode color schemes, personal notes — all live in
   lyric-sheet-chords.css. Each song's .lyric-sheet-container inside a
   setlist receives the same .dark-mode / .plain-text-mode classes that
   individual song pages use, so the base stylesheet's rules apply
   automatically.
   
   If you need to change spacing, colors, or chord positioning, edit
   lyric-sheet-chords.css. The change will take effect on song pages AND
   setlist pages with no porting needed.
   ============================================ */

/* ---- Setlist wrapper ---- */

.setlist-container {
  max-width: 100%;
  animation: none !important;       /* Disable theme's slideUp animation */
  opacity: 1 !important;            /* Visible immediately, no fade-in */
  transform: none !important;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Override theme animations on the surrounding node */
.node--type-set,
.node--type-set .content-wrapper,
.node--type-set .node__content,
.node--type-set article {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Defensive: theme may animate descendant opacity */
.setlist-container *,
.setlist-songs *,
.lyric-sheet-container * {
  opacity: 1 !important;
}

/* ---- Setlist header ---- */

.setlist-header {
  text-align: center;
  padding: 20px;
  background-color: #000;
  border-bottom: 3px solid #333;
  margin-bottom: 20px;
}

.setlist-title {
  font-size: 2em;
  margin: 0 0 10px 0;
  color: #e8e8e8;
  font-weight: 700;
}

.setlist-venue,
.setlist-date {
  font-size: 1.1em;
  color: #e8c760;       /* Gold accent */
  margin: 5px 0;
  font-weight: 600;
}

/* ---- Sticky controls bar ---- */

.setlist-controls {
  position: static;
  z-index: 99999 !important;
  background-color: #000 !important;
  border-bottom: 2px solid #333;
  padding: 15px;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  pointer-events: auto !important;
}

.setlist-control-group {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Setlist-level tools toggle & panel — collapsible wrapper around the
   page-wide size/theme/plaintext controls. Same UX pattern as the
   per-song toggle inside each chart, but operating at the setlist
   scope (one toggle for the whole page, controls inside affect every
   song in the set at once). */
.setlist-tools-toggle {
  background: transparent;
  color: #ccc;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 12px;
  letter-spacing: 0.05em;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.setlist-tools-toggle:hover,
.setlist-tools-toggle[aria-expanded="true"] {
  color: #e8c760;
  border-color: #e8c760;
}
.setlist-tools-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
}
.setlist-tools-panel[hidden] {
  display: none;
}

.scroll-speed-controls {
  display: flex;
  gap: 5px;
  align-items: center;
  background-color: #000;
  padding: 5px 10px;
  border-radius: 4px;
}

.scroll-speed-controls label {
  font-weight: bold;
  margin-right: 5px;
  font-size: 14px;
}

/* ---- Setlist buttons ---- */

.setlist-btn {
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s;
  white-space: nowrap;
}

.setlist-btn:hover {
  background-color: #0056b3;
}

.setlist-btn:active,
.setlist-btn.active {
  background-color: #004085;
}

.setlist-btn.scroll-speed {
  background-color: #6c757d;
  padding: 8px 12px;
  font-size: 13px;
}

.setlist-btn.scroll-speed:hover {
  background-color: #5a6268;
}

.setlist-btn.scroll-speed.active {
  background-color: #28a745;
}

.setlist-btn.autoscroll-toggle.active {
  background-color: #dc3545;
}

.setlist-btn.autoscroll-toggle.active:hover {
  background-color: #c82333;
}

.setlist-info {
  font-size: 14px;
  color: #666;
  font-weight: bold;
  padding: 5px 10px;
  background-color: #000;
  border-radius: 4px;
}

/* ---- Songs container ---- */

.setlist-songs {
  padding: 20px;
  position: relative;
  z-index: 1;           /* Below the sticky controls */
  background-color: #000;
}

/* Setlist-specific tweaks on each song's lyric sheet.
   Base lyric-sheet-chords.css sets font-size, line-height, cream
   background, base padding, and all lyric/chord styling. We only add
   the extra left padding setlists need (nav buttons crowd the left
   edge) and the theme-overlay defenses. */
.setlist-container .lyric-sheet-container {
  padding-left: 30px !important;
  position: relative !important;
  z-index: auto !important;
  opacity: 1 !important;
}

/* Prevent theme pseudo-elements from covering content — ONLY for Clean,
   which doesn't use ::before/::after as a frame. Classic and Industrial
   draw their FRAME with these pseudo-elements, so suppressing them there
   erased the border in setlist view. Scope by theme class so frame themes
   keep their frame. */
.setlist-container .cp-theme-clean.lyric-sheet-container::before,
.setlist-container .cp-theme-clean.lyric-sheet-container::after,
.setlist-container .lyric-sheet-container:not([class*="cp-theme-"])::before,
.setlist-container .lyric-sheet-container:not([class*="cp-theme-"])::after {
  display: none !important;
}

/* Large size on desktop needs extra right padding so long chord names
   don't clip. (Mobile equivalent lives in lyric-sheet-chords.css.) */
.setlist-container .lyric-sheet-container.large-size {
  padding-right: 40px !important;
}

/* ---- Song wrapper, header, divider, marker ---- */

.setlist-song-wrapper {
  margin-bottom: 40px;
  scroll-margin-top: 80px;    /* Accounts for sticky controls bar */
}

.setlist-song-header {
  position: relative;
}

.setlist-song-marker {
  position: absolute;
  top: -80px;                 /* Scroll-to-song anchor */
}

/* ── Title source per setlist type ──────────────────────────────────────
   Legacy `set` content type renders each song as a full node, which
   provides its own linked title, so the template's h2 is hidden there
   to avoid a duplicate. The new `project_setlist` template renders only
   the body field, so its h2 IS the title source and must stay visible.

   NOTE (per J, 2026-06): the `set` type is LEGACY — kept only to carry
   past/archived setlists into the Archives so they aren't lost. All live
   work has shifted to `project_setlist` under Projects. Each project is one
   J produces or co-produces; the "Sessions" project holds all hired work. */
.node--type-set .setlist-song-title {
  display: none !important;
}

/* When a chart THEME shows the module's manuscript title plate (Classic),
   setlist.js marks the wrapper .lsc-plate-active; hide the host h2's TITLE
   LINK so the plate is the single title — keeping the row's inline key/
   vocalist/play controls. Excluded in .view-titles (title-only) mode, where
   the title row IS the content and must show. Clean never sets the flag. */
.node--type-project-setlist .setlist-song-wrapper.lsc-plate-active:not(.view-titles) > .setlist-song-title > a {
  display: none !important;
}

.setlist-song-content {
  padding-left: 20px;
}

.setlist-song-divider {
  height: 3px;
  background: linear-gradient(to right, #ddd, #999, #ddd);
  margin: 40px 0;
}

/* Show each song's per-song controls toolbar inside the setlist */
.setlist-container .lyric-controls {
  display: flex !important;
  margin-bottom: 1rem;
}

/* Setlist-specific layout: the tools toggle sits above each song's title.
   The base .lyric-controls flex-column behavior from lyric-sheet-chords.css
   already does the right thing here. */

/* ============================================
   SETLIST DARK MODE — wrapper chrome only.
   Per-song lyric/chord dark-mode colors come from
   lyric-sheet-chords.css via the .dark-mode class
   on each individual .lyric-sheet-container, plus the
   .setlist-dark-mode selectors already in the base file
   for .lyric-line / .chord-line.
   ============================================ */

.setlist-container.setlist-dark-mode {
  background-color: #000 !important;
}

.setlist-container.setlist-dark-mode .lyric-sheet-container {
  background-color: #000 !important;
  color: #d4d4d4 !important;
}

.setlist-container.setlist-dark-mode .setlist-controls {
  background-color: #000 !important;
  border-color: #333 !important;
}

.setlist-container.setlist-dark-mode .setlist-songs {
  background-color: #000 !important;
}

/* Setlist intentionally uses BLUE for song notes in dark mode
   (vs the base scheme's tan/yellow). The source-set green variant
   matches base exactly and is handled there. */
.setlist-container.setlist-dark-mode .personal-note {
  background-color: #2a3a5a !important;
  border-color: #4a5a7a !important;
  color: #a0c0ff !important;
}

/* ============================================
   SETLIST PLAIN-TEXT MODE — wrapper chrome only.
   Lyric/chord plain-text colors come from base CSS.
   ============================================ */

.setlist-container.plain-text-mode {
  background-color: #fff !important;
  color: #000 !important;
}

.setlist-container.plain-text-mode .setlist-controls {
  background-color: #f5f5f5 !important;
  border-bottom: 1px solid #ccc !important;
}

.setlist-container.plain-text-mode .lyric-sheet-container {
  background-color: #fff !important;
  color: #000 !important;
  border: none !important;
  box-shadow: none !important;
  padding: 10px !important;
}

.setlist-container.plain-text-mode .setlist-song-divider {
  background: #000 !important;
  height: 2px !important;
  margin: 20px 0 !important;
}

/* ============================================
   Mobile responsive — setlist chrome only.
   Per-song lyric/chord mobile sizing is in lyric-sheet-chords.css.
   ============================================ */

@media screen and (max-width: 768px) {
  .setlist-controls {
    /* Stay horizontal and wrap — vertical stacking ate too much height (per J). */
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .setlist-control-group {
    width: auto;
    justify-content: center;
  }

  .scroll-speed-controls {
    justify-content: center;
  }

  .setlist-btn {
    flex: 0 1 auto;
  }
}

/* ============================================
   PRINT — Compact one-page setlist
   
   Strategy: don't add new markup. The setlist templates already render
   a song title row per song (with key + vocalist inline on the
   project_setlist template). For print we hide everything else and
   restyle that existing title row as a tight list line.
   
   Result: one page, numbered list, "Title  KEY  Vocalist" per line,
   two-column layout for long sets, no charts, no controls, no
   "Play reference recording" buttons, no drawing toolbars.
   ============================================ */

@media print {
  @page {
    margin: 0.5in;
  }

  body {
    background: #fff !important;
    color: #000 !important;
  }

  /* Strip page chrome the user definitely doesn't need on paper. */
  header,
  nav,
  footer,
  .region-header,
  .region-navigation,
  .region-footer,
  .site-header,
  .site-footer,
  .toolbar,
  .toolbar-bar,
  .toolbar-tray,
  .tabs,
  .breadcrumb,
  .messages,
  .skip-link {
    display: none !important;
  }

  /* Hide all the interactive / chart machinery. */
  .setlist-controls,
  .setlist-info,
  .setlist-notes,
  .setlist-song-divider,
  .setlist-song-content,
  .setlist-song-marker,
  .lyric-sheet-container,
  .lsc-drawing-toolbar,
  .archive-floating-player,
  .archive-play-wrapper,
  .lyric-controls,
  .transpose-controls,
  .chord-visibility-controls,
  .size-controls,
  .theme-controls,
  .plaintext-controls {
    display: none !important;
  }

  /* Setlist container resets — drop dark backgrounds and excess spacing. */
  .setlist-container {
    background: #fff !important;
    color: #000 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    animation: none !important;
  }

  /* Header: title + venue + date (or project name + date), centered, compact. */
  .setlist-header {
    background: #fff !important;
    border: none !important;
    color: #000 !important;
    padding: 0 0 0.25rem 0 !important;
    margin: 0 0 0.5rem 0 !important;
    text-align: center !important;
  }

  .setlist-title {
    color: #000 !important;
    font-size: 18pt !important;
    margin: 0 0 0.25rem 0 !important;
    font-weight: 700 !important;
  }

  .setlist-venue,
  .setlist-date,
  .setlist-project,
  .setlist-project a {
    color: #333 !important;
    font-size: 11pt !important;
    margin: 0 !important;
    display: inline-block !important;
    text-decoration: none !important;
    border: 0 !important;
  }

  .setlist-venue + .setlist-date::before,
  .setlist-project + .setlist-date::before {
    content: " · ";
    margin: 0 0.4em;
  }

  /* Two-column numbered list of songs. Long sets stay on one page;
     short sets just look like a single column. */
  .setlist-songs {
    display: block !important;
    background: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
    column-count: 2;
    column-gap: 1.5rem;
    counter-reset: setlist-song;
  }

  .setlist-song-wrapper {
    display: block !important;
    margin: 0 0 1px 0 !important;
    padding: 0 !important;
    break-inside: avoid;
    page-break-inside: avoid;
    counter-increment: setlist-song;
  }

  /* Reveal the song title — hidden on screen by setlist.css base styles
     for the legacy `set` template; here in print we want it back. */
  .setlist-song-title {
    display: block !important;
    font-family: Calibri, Arial, sans-serif !important;
    font-size: 11pt !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: #000 !important;
    margin: 0 !important;
    padding: 1px 0 !important;
    text-align: left !important;
  }

  /* Numbered prefix on each title — "1. Song Title KEY Vocalist" */
  .setlist-song-title::before {
    content: counter(setlist-song) ". ";
    color: #666;
    font-weight: 400;
    margin-right: 0.15em;
  }

  .setlist-song-title a {
    color: #000 !important;
    text-decoration: none !important;
    border: 0 !important;
  }

  /* Inline metadata next to the title (project_setlist template only) */
  .setlist-song-key-inline {
    margin-left: 0.5em;
    font-family: 'Courier New', Courier, monospace !important;
    font-weight: 700 !important;
    color: #000 !important;
    font-size: 10pt !important;
  }

  .setlist-song-vocalist-inline {
    margin-left: 0.5em;
    font-size: 9pt !important;
    color: #555 !important;
    font-style: italic;
  }
}

/* Setlist-level chart theme picker — match the .setlist-btn look */
.setlist-theme-select {
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  white-space: nowrap;
}
.setlist-theme-select:hover { background-color: #0056b3; }
.setlist-control-group label[for="setlist-theme-select"] { margin-right: 6px; }

/* ── Rehearsal / Performance mode ───────────────────────────────────────
   Rehearsal (default) shows working aids; Performance hides them for a
   clean stage view. setlist.js toggles .setlist-performance-mode on the
   .setlist-container. The section jump ribbon (IN V1 V2… structure map)
   is a rehearsal tool, so it hides in performance mode. Add future
   rehearsal-only aids to this selector list. */
.setlist-container.setlist-performance-mode .lyric-section-ribbon {
  display: none !important;
}