/* ═══════════════════════════════════════════════════════
   Hymnal Adventist — Chord Chart Styles
   ════════════════════════════════════════════════════════ */

/* ── Song subtitle ───────────────────────────────────── */
.chord-song-subtitle {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
}

/* ── Key transposition controls ──────────────────────── */
.key-controls {
  margin-block: 1.25rem;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.key-controls__inner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.key-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}
.key-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  background: var(--surface-2);
  transition: background var(--transition), border-color var(--transition);
}
.key-btn svg { width: 14px; height: 14px; }
.key-btn:hover { background: var(--primary-light); border-color: var(--primary); color: var(--primary-text); }
.key-btn--reset {
  background: transparent;
  color: var(--text-muted);
  border-color: transparent;
}
.key-btn--reset:hover { background: var(--surface-2); border-color: var(--border); color: var(--text); }

.key-display {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  min-width: 3.5rem;
  padding: 0.3rem 0.75rem;
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius-sm);
  text-align: center;
  justify-content: center;
}
#current-key {
  font-size: 1.1rem;
  font-weight: 800;
  font-family: var(--font-hymn);
  line-height: 1;
}
.key-display__semitones {
  font-size: 0.7rem;
  opacity: 0.8;
}

/* Capo indicator */
.capo-box {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
}
.capo-box svg { width: 14px; height: 14px; flex-shrink: 0; }
.capo-box--active {
  background: #fef3c7;
  color: #92400e;
  font-weight: 600;
}
[data-theme="dark"] .capo-box--active {
  background: #1c1400;
  color: #fbbf24;
}

/* ── Chord chart ──────────────────────────────────────── */
.chord-chart {
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1;
  margin-block: 1.5rem;
}

/* Section break (empty line in source) */
.chord-section-break {
  height: 1.5em;
}

/* Plain lyric line (no chords) */
.cl-plain {
  padding-block: 0.15em;
  color: var(--text);
  line-height: 1.7;
  white-space: pre-wrap;
}

/* A line containing chord+lyric pairs */
.chord-line {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 0.1em;
  gap: 0;
}

/* One chord+lyric cell */
.cc {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  /* White-space: the lyric syllable should not wrap away from its chord */
  white-space: nowrap;
}

/* Chord name (top) */
.cn {
  font-size: 0.8em;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
  padding-bottom: 0.2em;
  min-height: 1.1em;
  letter-spacing: 0.01em;
  font-family: var(--font-ui);
  transition: color var(--transition);
}
/* Empty chord slot — still occupies space to keep alignment */
.cn:empty { min-width: 0; }

/* Lyric syllable (bottom) */
.cl {
  color: var(--text);
  line-height: 1.6;
  font-size: 1em;
  white-space: pre;
  font-family: var(--font-hymn);
}

/* ── Print styles ────────────────────────────────────── */
@media print {
  .site-header,
  .app-banner,
  .key-controls,
  .hymn-nav,
  .site-footer,
  .header-controls { display: none !important; }

  body { font-size: 11pt; color: #000; background: #fff; }
  .main { padding: 0; }
  .container { max-width: 100%; padding: 0; }
  .hymn-header { border: none; box-shadow: none; padding: 0; margin-bottom: 0.5cm; }
  .hymn-title { font-size: 18pt; }
  .cn { color: #000; font-weight: 700; font-size: 8pt; }
  .cl { font-size: 11pt; }
  .chord-section-break { height: 0.5cm; }

  @page { margin: 1.5cm; }
}