/**
 * CHART LINES — chords-off space reclaim, section hiding, colour combinations.
 * ISOLATED UNIT.
 *
 * Every rule here is gated behind a class the user switches on:
 * .lsc-chords-off, .lsc-sections-off, or .lsc-color-N. With none of them
 * present the chart renders byte-identically to a site without this file.
 *
 * ── History ───────────────────────────────────────────────────────────────
 * This file originally also carried a "Tight" line-spacing mode. It was
 * removed: it did not deliver the space it promised, and it stripped section
 * markers down to bare labels, which made charts HARDER to find your place in
 * on a stand. Its supporting line-marking engine (js/chart-lines.js) survives
 * because Sections depends on it — hiding a header means removing its LINE,
 * not just the marker span inside it.
 *
 * The real vertical waste is section-header margins and the --clh 2.0 leading,
 * both of which live in css/lyric-sheet-chords.css. That is where a spacing
 * change belongs; not here.
 */


/* ═══════════════════════════════════════════════════════════════════════
   PER-LINE CLEARANCE — .lsc-lines (default, applied by chart-lines.js)
   ═══════════════════════════════════════════════════════════════════════
   THE RULE: a line with no chords over it reserves no space for chords.

   Why this could not be done with line-height. --clh 2.0 puts the clearance
   INSIDE the line box, and a line box is created for every visual row of a
   soft-wrapped line. "…Papa's bankbook wasn't big / enough" is ONE line that
   wraps, so the continuation row inherited a full 48px of chord clearance for
   a word with no chord anywhere near it — and a wrap's second row is not an
   element, so no selector can reach it.

   Moving the clearance to padding-top on the chord-bearing line pays it once
   per LINE instead of once per ROW. The continuation gets --lsc-lh and
   nothing else.

   NOTHING here touches section markers. That coupling is what made the
   retired Tight mode worse rather than better: it stripped the landmarks you
   find your place with in the same switch that changed spacing.
   ═══════════════════════════════════════════════════════════════════════ */

.lyric-sheet-container.lsc-lines {
  /* THE LEVER IS --clh. Not a new token.

     What was wrong from 436 until now: this unit declared its own --lsc-lh and
     applied it to .lsc-line. But wrapLine() inserts .lsc-line as a span AROUND
     the existing .lyrics element, so .lyrics is still inline content inside it
     — and a line box is sized by its inline content, not by the block's
     line-height. .lyrics carries `line-height: var(--clh) !important`, so it
     won every time. --lsc-lh has never affected a single lyric line. Every
     "leading" change since 436 was inert; only the padding-top landed, which
     is why charts got TALLER, not shorter, and why lowering --lsc-lh to 1.2
     made it worse still (padding rose, leading did not move).

     Redefining --clh here does not fight the !important — it changes the value
     that !important resolves to. That is the mechanism the token block in
     lyric-sheet-chords.css describes and the reason the ratio system exists.
     One lever, the one already built.

     NOTE: this also overrides cp-theme-industrial's --clh: 1.9, since
     chart-lines.css loads after the theme files at equal specificity. 1.9 vs
     1.4 was never a visible distinction; flagged so it isn't a surprise. */
  --clh: 1.4;

  /* Kept in sync with --clh so any line NOT inside a .lyrics wrapper (notes,
     bare text nodes) gets the same leading. Purely a backstop now. */
  --lsc-lh: 1.4;

  /* Space reserved above a line that DOES carry chords.
     Arithmetic, so this is checkable rather than taste. 1em = 24px here.
     Chords have always sat on 12px of clearance, from --clh 2.0:
     (2.0 - 1) / 2 = 0.5em = 12px of half-leading. At 1.4 the leading gives
     (1.4 - 1) / 2 = 0.2em = 4.8px, so padding supplies the remaining 7.2px
     = 0.3em. Unchanged, because the arithmetic is unchanged — 0.3em was
     always right, it just never had a 1.4 line box to sit on. */
  --lsc-clear: 0.3em;
}

/* Lines must be blocks for vertical padding to affect layout at all —
   padding on an inline span does not change line box height. This is what
   the marking pass is for. */
.lyric-sheet-container.lsc-lines .lsc-line {
  display: block;
  line-height: var(--lsc-lh, 1.4);
}

/* The <br>s are still in the DOM — nothing was destroyed — but would now add
   a second break after every block line. Suppressed, not removed. */
.lyric-sheet-container.lsc-lines .lsc-line + br {
  display: none;
}

/* THE POINT: only a line carrying chords reserves room for them. */
.lyric-sheet-container.lsc-lines .lsc-line.lsc-has-chords {
  padding-top: var(--lsc-clear, 0.3em);
}

/* A chord-only row (a bare "A" under INTRO, or a "C7 D7 E F" turnaround under
   a lyric) sits between two things and needs the same air above it as any
   other chord.

   SPECIFICITY, not decoration: a chord-only row obviously carries chords, so
   it also matches .lsc-line.lsc-has-chords above — four classes to the first
   selector's three. Without the five-class second selector that rule wins and
   the row would take --lsc-clear twice over. Both selectors are still needed.

   HISTORY, so this doesn't cycle a third time. This was `padding-top: 0`, and
   that was correct while --clh was 2.0: the lyric above then contributed
   (2.0-1)/2 = 12px of half-leading below itself, which was the row's entire
   clearance and landed on ~12px. Dropping --clh to 1.4 cut that contribution
   to 4.8px, so zero padding left the row jammed against the lyric's
   descenders at ~5px. Paying --lsc-clear here puts it back on ~12px — the
   same figure a chord gets over its own lyric, and the same figure this row
   had in 438.

   The lesson both directions: this row's clearance is (half-leading of the
   line ABOVE) + (its own padding). Change --clh and this number moves. They
   are not independent.

   NOTE: `line-height` here is inert — .style-chords sets
   `line-height: var(--chord-line-height, 1.3rem) !important` and a plain
   declaration cannot beat it. Left in place because it is correct for any
   chord row not wrapped in .style-chords, but do not tune spacing with it;
   it will look like it did nothing, because it did. */
.lyric-sheet-container.lsc-lines .lsc-line--chord,
.lyric-sheet-container.lsc-lines .lsc-line.lsc-line--chord.lsc-has-chords {
  line-height: 1.1;
  padding-top: var(--lsc-clear, 0.3em);
  margin-top: 0;
}

/* Repeat notes (x3, x4) ride tight to the line they annotate. */
.lyric-sheet-container.lsc-lines .lsc-line--note {
  line-height: 1.15;
}

/* Section header lines keep the margins tuned in lyric-sheet-chords.css —
   this unit deliberately does not restyle them. */
.lyric-sheet-container.lsc-lines .lsc-line--section {
  line-height: 1.2;
  padding-top: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   CHORDS OFF — reclaim the space the chords were reserving
   ═══════════════════════════════════════════════════════════════════════
   Hide Chords set span.chord to display:none and stopped there, so the chords
   vanished and the gaps they lived in did not. That was never a bug in the
   button: the gap is --clh 2.0 on .lyrics, and that leading exists purely so a
   floated chord clears the line above it. With no chords rendered there is
   nothing to clear and the leading is dead weight — which is exactly why
   hiding chords appeared to accomplish nothing.

   This is a defect fix, not a mode. Hiding the chords gives the space back
   whatever else is switched on. */

.lyric-sheet-container.lsc-chords-off .lyrics {
  line-height: var(--lsc-lh-nochords, 1.4) !important;
}

/* Chord-only rows have nothing left to show; collapse them entirely rather
   than leaving an empty band where a chord row used to be. */
.lyric-sheet-container.lsc-chords-off .lsc-line--chord {
  display: none;
}

/* With chords gone, no line needs to reserve clearance. */
.lyric-sheet-container.lsc-chords-off .lsc-line.lsc-has-chords {
  padding-top: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTIONS OFF — the labels themselves
   ═══════════════════════════════════════════════════════════════════════
   Ten headers is ten lines of screen spent on words you already know. On
   material you know cold the structure is in your hands and the titles are
   scaffolding. This removes them AND the space they sat in — hiding a header
   while keeping its margins would repeat exactly the mistake Hide Chords
   made. */

.lyric-sheet-container.lsc-sections-off .lsc-line--section,
.lyric-sheet-container.lsc-sections-off .section-marker,
.lyric-sheet-container.lsc-sections-off [data-section-type],
.lyric-sheet-container.lsc-sections-off .style-section-header {
  /* !important is REQUIRED, not defensive habit. lyric-sheet-chords.css sets
     `[data-section-type] { display: block !important }`, and an !important
     declaration beats any specificity without one — so the plain display:none
     here lost silently and the header stayed on screen. It only ever appeared
     to work when the marker happened to sit inside a .lsc-line--section
     wrapper; a header not inside a <p> is never wrapped (mark() walks <p>),
     so nothing hid it at all. */
  display: none !important;
}

/* The <br> that followed the now-hidden header would leave an empty line box
   where the header used to be — the exact mistake Hide Chords made. */
.lyric-sheet-container.lsc-sections-off .section-marker + br,
.lyric-sheet-container.lsc-sections-off [data-section-type] + br {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   COLOUR COMBINATIONS
   ═══════════════════════════════════════════════════════════════════════
   Applied as a class, never as inline style. That distinction is the whole
   lesson from the contrast slider this replaces: inline declarations beat every
   stylesheet, so writing tokens inline stopped Light, Dark and Sun from being
   able to override anything. Here the cascade still works — and with no
   .lsc-color-N class at all, the active theme is untouched.

   Each pairing is chosen for SEPARATION between chords and lyrics. On a stage
   you find the changes by colour before you read a word, so the gap between the
   two matters more than either colour on its own.

   Loaded after the theme files, so at equal specificity these win — which is
   correct: choosing a combination is a deliberate act that should override the
   theme's defaults. Cycling back to Theme removes the class and hands control
   straight back. */

/* Gold — the familiar chart look: warm chords over plain white lyrics. */
.lyric-sheet-container.lsc-color-1 {
  --lyric: #f2f2f2;
  --chord: #e8c760;
  --ink: #f2f2f2;
  --accent: #e8c760;
}

/* Cyan — the widest hue separation available. Chords read as a different
   KIND of thing, not merely a different shade, which is what you want when
   scanning ahead for the next change. */
.lyric-sheet-container.lsc-color-2 {
  --lyric: #f4f1e8;
  --chord: #5fd4e0;
  --ink: #f4f1e8;
  --accent: #5fd4e0;
}

/* Amber — warm throughout. Easiest on the eye in a dark room, and the least
   disruptive to night vision if you have to look up at the room. */
.lyric-sheet-container.lsc-color-3 {
  --lyric: #ecdcc0;
  --chord: #ff9d3d;
  --ink: #ecdcc0;
  --accent: #ff9d3d;
}

/* Lime — chords pushed to high visibility for bright ambient light, where
   subtler hues wash out. */
.lyric-sheet-container.lsc-color-4 {
  --lyric: #ffffff;
  --chord: #b6f24a;
  --ink: #ffffff;
  --accent: #b6f24a;
}

/* Mono — no hue at all. Maximum luminance contrast for the worst conditions;
   chords separate by BRIGHTNESS instead of colour, which survives glare,
   coloured stage wash, and tired eyes. */
.lyric-sheet-container.lsc-color-5 {
  --lyric: #b0b0b0;
  --chord: #ffffff;
  --ink: #b0b0b0;
  --accent: #ffffff;
}

/* The chord colour must beat theme rules that hard-set it. */
.lyric-sheet-container[class*="lsc-color-"] .chord,
.lyric-sheet-container[class*="lsc-color-"] .chord-text,
.lyric-sheet-container[class*="lsc-color-"] .chords,
.lyric-sheet-container[class*="lsc-color-"] .style-chords {
  color: var(--chord) !important;
}
.lyric-sheet-container[class*="lsc-color-"] .lyrics {
  color: var(--lyric) !important;
}

.lsc-color-toggle[aria-pressed="true"] {
  border-color: var(--accent, #B8581D);
}

.lsc-sections-toggle[aria-pressed="true"] {
  background: var(--accent-soft, rgba(184, 88, 29, 0.1));
  border-color: var(--accent, #B8581D);
  color: var(--accent, #B8581D);
}