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

  /* Beyond the base palette. The two rgb triplets exist so translucent tints can
     flip with the theme: --fx is the "ink" colour (white on dark, black on
     light) and --shade is the opposite, used for scrims and drop shadows. */
  --fx: 255, 255, 255;
  --shade: 0, 0, 0;
  --accent-rgb: 244, 216, 0;
  --blue-rgb: 143, 211, 255;
  --on-accent: #101314;
  --input-bg: #121618;
  --stage-bg: #000;
  --nocapo-bg: #3d1d3d;
  --lyric: #ffffff;
  --lyric-current: #ffff00;
  --chord-blue: #8fd3ff;
  --panel-glass: rgba(20, 24, 26, .95);
  --msg-err-bg: #37201d;
  --msg-err-text: #ffb9b1;
  --msg-ok-bg: #1c2f24;
  --msg-ok-text: #b6f0cd;
  --link-soft: #8ab4d8;
  --notice-bg: #3a3305;
  --notice-text: #ffeb8a;
  --notice-bad-bg: #3a1512;
  color-scheme: dark;
}

/* Light mode, chosen per browser (cookie `chords2_theme`, applied server-side as
   data-theme on <html>). Only values change; every rule reads the variables. */
:root[data-theme="light"] {
  --bg: #f5f6f7;
  --panel: #ffffff;
  --panel-2: #eceff1;
  --line: #d3d9dc;
  --text: #1a1f21;
  --muted: #5d6a70;
  --accent: #8a7300;
  --danger: #c0392b;
  --ok: #1f8a4c;

  --fx: 0, 0, 0;
  --shade: 255, 255, 255;
  --accent-rgb: 138, 115, 0;
  --blue-rgb: 11, 111, 168;
  --on-accent: #ffffff;
  --input-bg: #ffffff;
  --stage-bg: #ffffff;
  --nocapo-bg: #f3e3f3;
  --lyric: #111111;
  --lyric-current: #a04a00;
  --chord-blue: #0b6fa8;
  --panel-glass: rgba(255, 255, 255, .95);
  --msg-err-bg: #fbe4e1;
  --msg-err-text: #8c1d13;
  --msg-ok-bg: #ddf3e5;
  --msg-ok-text: #14532d;
  --link-soft: #1d5fa0;
  --notice-bg: #fff6c2;
  --notice-text: #5c4a00;
  --notice-bad-bg: #fde1de;
  color-scheme: light;
}

* { 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: var(--on-accent); 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: var(--input-bg);
  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: var(--msg-err-bg); color: var(--msg-err-text); }
.msg.ok { background: var(--msg-ok-bg); color: var(--msg-ok-text); }

.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: var(--chord-blue); }
.sheet .l-lyrics { color: var(--text); }
.sheet .l-comment { color: var(--muted); font-style: italic; }

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

body[data-chrome="none"] { background: var(--stage-bg); }

/* 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: var(--nocapo-bg); }

.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(var(--shade), .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: var(--lyric);
}

/* Section headers: background highlight for clear division */
.lines .line.t-section {
  color: var(--chord-blue);
  background: rgba(var(--blue-rgb), 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(var(--accent-rgb), 0.28);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .5);
}
.lines .line.t-lyrics.active { color: var(--lyric); }

/* 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(var(--fx), .18);
  border-bottom: 1px solid rgba(var(--fx), .08);
  background: rgba(var(--fx), .03);
  font-family: inherit;
}
.song-delimiter.current {
  border-top-color: rgba(var(--accent-rgb), .55);
  border-bottom-color: rgba(var(--accent-rgb), .25);
  background: linear-gradient(90deg, rgba(var(--accent-rgb), .10), transparent);
}
.song-delimiter.previous {
  border-top-color: rgba(var(--fx), .12);
  border-bottom-color: rgba(var(--fx), .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: var(--lyric);
  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(var(--shade), .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(var(--shade), .7);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), .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: var(--panel-glass);
  border: 1px solid rgba(var(--accent-rgb), .35);
  border-radius: 10px;
  color: var(--text);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  backdrop-filter: blur(4px);
  box-shadow: 0 10px 32px rgba(var(--shade), .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(var(--fx), .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(var(--fx), .06); }
.playlist-panel li.active button,
.playlist-panel li.active span {
  background: rgba(var(--accent-rgb), .18);
  color: var(--accent);
  font-weight: 600;
}
.playlist-panel .playlist-hint {
  margin: 0;
  padding: 8px 14px;
  border-top: 1px solid rgba(var(--fx), .08);
  font-size: 12px;
  color: var(--muted);
}