:root {
  --bg: #101314;
  --panel: #191d1f;
  --panel-2: #22282b;
  --line: #2e3538;
  --text: #e8ecee;
  --muted: #9aa5a9;
  --accent: #f4d800;
  --danger: #e2564a;
  --ok: #4fbf7b;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 24px 20px 64px; }
.wrap.narrow { max-width: 560px; }

h1 { font-size: 24px; margin: 0 0 4px; }
h2 { font-size: 17px; margin: 28px 0 10px; }
.sub { color: var(--muted); margin: 0 0 20px; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grow { flex: 1; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.num { text-align: right; }

button, .btn {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 14px;
  font: inherit;
  cursor: pointer;
}
button:hover, .btn:hover { border-color: var(--accent); text-decoration: none; }
button.primary { background: var(--accent); color: #101314; border-color: var(--accent); font-weight: 600; }
button.danger { border-color: var(--danger); color: var(--danger); }
button:disabled { opacity: .45; cursor: not-allowed; }

input, select, textarea {
  background: #121618;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 10px;
  font: inherit;
  width: 100%;
}
textarea { resize: vertical; }
label { display: block; font-size: 13px; color: var(--muted); margin: 12px 0 4px; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }

.pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}
.pill.ok { color: var(--ok); border-color: var(--ok); }
.pill.warn { color: var(--accent); border-color: var(--accent); }
.pill.bad { color: var(--danger); border-color: var(--danger); }

.msg { padding: 10px 12px; border-radius: 7px; margin: 10px 0; display: none; }
.msg.show { display: block; }
.msg.err { background: #37201d; color: #ffb9b1; }
.msg.ok { background: #1c2f24; color: #b6f0cd; }

.list { list-style: none; margin: 0; padding: 0; }
.list li {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--line);
}

/* ── chord sheet (the free static view) ───────────────────────────────────── */

.sheet { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; white-space: pre; }
.sheet .l-section { color: var(--accent); font-weight: 700; margin-top: 14px; }
.sheet .l-chords { color: #8fd3ff; }
.sheet .l-lyrics { color: var(--text); }
.sheet .l-comment { color: var(--muted); font-style: italic; }

/* ── live display ─────────────────────────────────────────────────────────── */

body[data-chrome="none"] { background: #000; }

/* The no-capo view gets its own backdrop rather than the display page's black.
   The two are routinely open side by side — guitarist on one screen, bass on the
   other — and the colour is how you tell at a glance which one you are reading.
   Dark plum was picked to leave every text colour on this page alone: yellow
   chords land at 10:1 against it, white lyrics 14:1, blue section headers 9:1
   and muted comments 5.8:1. Both attributes are in the selector so it outranks
   the rule above regardless of source order. */
body[data-page="nocapo"][data-chrome="none"] { background: #3d1d3d; }

.stage {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

/* The chords view is the one presentation page whose content is routinely taller
   than the viewport — a full song is 60+ lines. Centring and clipping it (correct
   for a single projected lyric) silently cuts the end of the song off with no
   scrollbar, so this variant scrolls instead and lets scrollIntoView work. */
.stage.scroll {
  height: 100vh;
  justify-content: flex-start;
  overflow-y: auto;
  /* No scroll-behavior: smooth — scrollToCurrentLine() animates scrollTop per
     frame, and the two together stutter. */
}
/* Room to bring the last lines of a song up to the read-ahead position. Must
   exceed the 0.75 of the viewport that sits below it, or the final lines can't
   scroll high enough and the anchor drifts down at the end of a song. */
.stage.scroll .content { padding-bottom: 80vh; }
.stage video.bg {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.stage .scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 1; }
.stage .content { position: relative; z-index: 2; padding: 4vh 5vw; }

.lines {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  white-space: pre;
  font-size: 18px;
  line-height: 1.5;
}

/* Ported from static/simple_chords_display.html `.content-line`: the highlight
   easing in over 0.4s is what stops a line change reading as a jump-cut. The
   `min-height` keeps a blank line from collapsing, so the sheet doesn't reflow
   as the highlight moves. */
.lines .line {
  padding: 1px 6px;
  border-radius: 3px;
  min-height: 1.2em;
  transition: background-color .4s cubic-bezier(.25, .8, .25, 1),
              color .4s cubic-bezier(.25, .8, .25, 1);
}

/* All chords: high-contrast yellow */
.lines .line.t-chords {
  color: var(--accent);
  font-weight: 600;
}

/* All lyrics: pure white */
.lines .line.t-lyrics {
  color: #ffffff;
}

/* Section headers: background highlight for clear division */
.lines .line.t-section {
  color: #8fd3ff;
  background: rgba(143, 211, 255, 0.15);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 6px 0 2px;
}

/* Active line: distinct background highlight. No transform/scale — on a
   monospace chord sheet a scaled line no longer column-aligns with the lyric
   under it, which is the one thing this view exists to preserve. */
.lines .line.active {
  background: rgba(244, 216, 0, 0.28);
  box-shadow: 0 0 0 1px rgba(244, 216, 0, .5);
}
.lines .line.t-lyrics.active { color: #fff; }

/* Comments stay muted */
.lines .line.t-comment {
  color: var(--muted);
  font-style: italic;
}

/* 3-song sliding window on the Chords / No Capo views. Each song sits in its
   own block preceded by a delimiter that names it; the *current* song block
   is untouched, while the previous and next blocks are dimmed so a musician
   reads them as context rather than as what to play now. */
.song-delimiter {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 24px 0 10px;
  padding: 8px 12px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .03);
  font-family: inherit;
}
.song-delimiter.current {
  border-top-color: rgba(244, 216, 0, .55);
  border-bottom-color: rgba(244, 216, 0, .25);
  background: linear-gradient(90deg, rgba(244, 216, 0, .10), transparent);
}
.song-delimiter.previous {
  border-top-color: rgba(255, 255, 255, .12);
  border-bottom-color: rgba(255, 255, 255, .06);
}
.song-delimiter-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.song-delimiter.current .song-delimiter-label { color: var(--accent); }
.song-delimiter-title {
  color: #fff;
  font-size: 1.1em;
  font-weight: 700;
}
.song-delimiter-meta {
  color: var(--muted);
  font-size: .9em;
  margin-left: auto;
}

.song-block.adjacent .line { opacity: .55; }
.song-block.adjacent .line.t-section { opacity: .75; }

.songmeta { color: var(--muted); margin-bottom: 2vh; font-family: inherit; }

.overlay {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  gap: 14px; background: rgba(0, 0, 0, .82); text-align: center; padding: 24px;
}
.overlay.hidden { display: none; }

/* Playlist song list overlay for the Chords and No Capo views. Off by default;
   a controller can pin it open. Sits in the bottom-right so it doesn't collide
   with the fullscreen exit hint or the size-hint at the bottom-center. */
.playlist-toggle {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 25;
  background: rgba(0, 0, 0, .7);
  color: var(--accent);
  border: 1px solid rgba(244, 216, 0, .45);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: .35;
  transition: opacity .12s ease;
}
.playlist-toggle:hover, .playlist-toggle.active { opacity: 1; }
.playlist-toggle[hidden] { display: none; }

.playlist-panel {
  position: fixed;
  right: 14px;
  bottom: 62px;
  z-index: 25;
  width: min(320px, 92vw);
  max-height: min(60vh, 480px);
  background: rgba(20, 24, 26, .95);
  border: 1px solid rgba(244, 216, 0, .35);
  border-radius: 10px;
  color: var(--text);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  backdrop-filter: blur(4px);
  box-shadow: 0 10px 32px rgba(0, 0, 0, .55);
}
.playlist-panel.hidden { display: none; }
.playlist-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.playlist-panel .playlist-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}
.playlist-panel ol {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  overflow: auto;
  flex: 1;
}
.playlist-panel li { padding: 0; }
.playlist-panel li button,
.playlist-panel li span {
  display: block;
  width: 100%;
  padding: 8px 14px;
  background: transparent;
  border: none;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.playlist-panel li button:hover { background: rgba(255, 255, 255, .06); }
.playlist-panel li.active button,
.playlist-panel li.active span {
  background: rgba(244, 216, 0, .18);
  color: var(--accent);
  font-weight: 600;
}
.playlist-panel .playlist-hint {
  margin: 0;
  padding: 8px 14px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 12px;
  color: var(--muted);
}