/*
 * Song composer (owner: Song builder). Tokens only (css/tokens.css): no raw hex, radii 6/10/14/20/pill.
 * Markup: partials/tools/song.php. Behaviour: js/tools/song.js.
 * Sections: 1 composer groups · 2 lyrics editor · 3 style chips, tempo stepper, hints · 4 lyric writer dialog · 5 lyrics sheet.
 */

/* =========================================================================
   0. Placeholders (finding 3): a hint, never a second tier of content.
   `--text-3` at 70% over `--surface-2` measures ~3.9:1 — clearly legible, clearly not typed text.
   ========================================================================= */
body.soundlabs-page .sl-composer-body[data-composer-for="song"] .sl-textarea::placeholder,
body.soundlabs-page .sl-composer-body[data-composer-for="song"] .sl-input::placeholder,
body.soundlabs-page .sl-songw .sl-textarea::placeholder,
body.soundlabs-page .sl-songw .sl-input::placeholder {
  color: var(--text-3);
  opacity: .7;
}
body.soundlabs-page .sl-lyrics-wrap .sl-lyrics::placeholder {
  color: var(--text-3);
  -webkit-text-fill-color: var(--text-3);
  opacity: .7;
}

/* =========================================================================
   1. Composer groups
   ========================================================================= */
body.soundlabs-page .sl-song-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  min-width: 0;
}

/*
 * These rows used to be pulled up with a negative top margin to tighten the rhythm under a field. That works between
 * two blocks of text and is a trap next to a chips row: the negative margin does not shrink the gap, it lifts the row
 * ON TOP of the boxes above it, and because the hint comes later in the DOM it paints over them. With six style chips
 * wrapping to two rows in Write lyrics, the hint covered the last row and took four chips — Cinematic, R&B, Folk and
 * Country — out of reach at 1024x600 through 1440x800 (foundation critic r4 / reach harness). The rhythm now comes
 * from the group's own gap, tightened where it needs to be, so nothing overlaps anything.
 */
body.soundlabs-page .sl-song-hint { margin: 0; }
body.soundlabs-page .sl-song-hints {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* 12px keeps every target's 24px circle clear of its neighbour (WCAG 2.2 target size). */
  gap: var(--sp-3);
  margin: 0 0 var(--sp-2);
}
body.soundlabs-page .sl-song-writerbtn { flex: 0 0 auto; }
body.soundlabs-page .sl-song-hints .sl-song-hint { flex: 1 1 200px; }
body.soundlabs-page .sl-song-hints .sl-song-hint { margin: 0; }
body.soundlabs-page .sl-song-hint .sl-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}
body.soundlabs-page .sl-song-hint-chev { width: 14px; height: 14px; }

/* Quiet artist-name hint: information, never an error. */
body.soundlabs-page .sl-song-warn {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: var(--sp-2) 0 0;
  font: 500 var(--fs-meta)/var(--lh-meta) var(--font-ui);
  color: var(--text-2);
  text-wrap: pretty;
}
body.soundlabs-page .sl-song-warn .sl-icon { width: 14px; height: 14px; margin-top: 1px; color: var(--warning); }

/* Suggestions that help before spending a song (no vocals asked for; draft shortened). */
body.soundlabs-page .sl-song-suggest {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin: var(--sp-2) 0 0;
  padding: 10px var(--sp-3);
  border-radius: var(--r-md);
  background: var(--accent-wash);
  font: 500 var(--fs-label)/var(--lh-label) var(--font-ui);
  color: var(--text-2);
  text-wrap: pretty;
}
body.soundlabs-page .sl-song-suggest > .sl-icon { width: 16px; height: 16px; margin-top: 1px; color: var(--tool-inst); }
body.soundlabs-page .sl-song-suggest[data-tone="info"] > .sl-icon { color: var(--text-2); }
body.soundlabs-page .sl-song-suggest .sl-link { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }

/*
 * Song's two disabled-with-reason sentences (vocab) are one line and two lines at composer width, so switching mode
 * would move the run bar — and with it the Make button — by 16 px. Reserve the taller of the two for Song only, so
 * Describe ↔ Write lyrics moves nothing. Scoped to the Song tool: no other composer is affected.
 */
body.soundlabs-page .sl-app[data-tool="song"] .sl-run-helper { min-height: 32px; }


/*
 * The foot's disclosure row used to need three Song-scoped rules (pin the row, clip `.sl-more`, inset the focus ring)
 * because a tall panel squashed the button to 18px and let focus scroll the row out of a box the user cannot scroll
 * back. Those landed in `css/app.css` for every tool, so the Song copies are gone rather than left to diverge
 * (critic r3 m6). `tests/song/foot.mjs` still guards the behaviour from here.
 */

/* m1: fields announce focus the same way buttons do — a 2px ring, not a 1px border recolour. */
body.soundlabs-page .sl-app[data-tool="song"] .sl-composer .sl-textarea:focus-visible,
body.soundlabs-page .sl-app[data-tool="song"] .sl-composer .sl-input:focus-visible,
body.soundlabs-page .sl-app[data-tool="song"] .sl-composer .sl-select-input:focus-visible,
body.soundlabs-page .sl-songw .sl-textarea:focus-visible,
body.soundlabs-page .sl-songw .sl-input:focus-visible,
body.soundlabs-page .sl-songw .sl-select-input:focus-visible,
/* A <select> is not always :focus-visible after a pointer click; keyboard and pointer should look the same here. */
body.soundlabs-page .sl-app[data-tool="song"] .sl-composer .sl-select-input:focus,
body.soundlabs-page .sl-songw .sl-select-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* m5: a card line stops growing past a comfortable measure on wide screens. */
@media (min-width: 1600px) {
  body.soundlabs-page .sl-card[data-tool="song"] .sl-card-excerpt,
  body.soundlabs-page .sl-card[data-tool="song"] .sl-card-title { max-width: 72ch; }
}

/* The empty-state hint under the description (vocab `song.fields.prompt.empty_hint`). */
body.soundlabs-page .sl-song-emptyhint { margin-top: var(--sp-2); }

/* Single-line autosizing fields (Style, Title). */
body.soundlabs-page .sl-field--line .sl-textarea { min-height: 44px; }
body.soundlabs-page .sl-field--line .sl-field-meta { margin-left: auto; }
body.soundlabs-page .sl-field--line .sl-field-meta ~ .sl-counter:not(.is-visible) { display: none; }

/* =========================================================================
   2. Lyrics editor: a textarea over a mirrored highlight layer
   ========================================================================= */
body.soundlabs-page .sl-song-lyrics .sl-counter { visibility: visible; }

body.soundlabs-page .sl-lyrics-wrap {
  position: relative;
  border-radius: var(--r-md);
  background: var(--surface-2);
}

body.soundlabs-page .sl-lyrics-wrap .sl-lyrics,
body.soundlabs-page .sl-lyrics-mirror {
  padding: var(--sp-3);
  font: 500 var(--fs-lyric)/var(--lh-lyric) var(--font-ui);
  letter-spacing: normal;
  word-spacing: normal;
  tab-size: 4;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  text-align: start; /* n5: RTL lyrics and their section pills agree */
}

body.soundlabs-page .sl-lyrics-wrap .sl-lyrics {
  position: relative;
  z-index: 1;
  /* First paint already matches what song.js computes, so nothing jumps when the module loads. */
  min-height: min(200px, 18vh);
  background: transparent;
  color: transparent;
  -webkit-text-fill-color: transparent;
  caret-color: var(--text);
}
body.soundlabs-page .sl-lyrics-wrap .sl-lyrics:focus,
body.soundlabs-page .sl-lyrics-wrap .sl-lyrics:focus-visible { background: transparent; }
body.soundlabs-page .sl-lyrics-wrap .sl-lyrics::placeholder {
  color: var(--text-3);
  -webkit-text-fill-color: var(--text-3);
  opacity: 1;
}
body.soundlabs-page .sl-lyrics-wrap .sl-lyrics::selection {
  background: var(--accent-tint);
  -webkit-text-fill-color: transparent;
}

/* A long sheet scrolls inside the editor: fade the cut edge so it never looks like the lyrics simply stop. */
body.soundlabs-page .sl-lyrics-wrap::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 1px;
  right: 1px;
  bottom: 1px;
  height: 48px;
  border-radius: 0 0 var(--r-md) var(--r-md);
  background: linear-gradient(to top, var(--surface-2), rgba(17, 30, 40, 0));
  opacity: 0;
  transition: opacity var(--t-med) var(--ease-out);
  pointer-events: none;
}
body.soundlabs-page .sl-lyrics-wrap.is-cut::after { opacity: 1; }
body.soundlabs-page .sl-lyrics-wrap::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 1px;
  right: 1px;
  top: 1px;
  height: 24px;
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: linear-gradient(to bottom, var(--surface-2), rgba(17, 30, 40, 0));
  opacity: 0;
  transition: opacity var(--t-med) var(--ease-out);
  pointer-events: none;
}
body.soundlabs-page .sl-lyrics-wrap.is-cut-top::before { opacity: 1; }

body.soundlabs-page .sl-lyrics-mirror {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  color: var(--text);
  pointer-events: none;
  user-select: none;
}

/* [Verse 1] lines: accent colour and a tint behind them. Same metrics as plain text, so the caret never drifts. */
body.soundlabs-page .sl-lyr-tag {
  color: var(--accent);
  background: var(--accent-tint);
  box-shadow: 0 0 0 3px var(--accent-tint);
  border-radius: var(--r-sm);
  -webkit-text-stroke: .35px currentColor;
}
body.soundlabs-page .sl-lyr-tag.is-flash { animation: sl-song-flash 1.4s var(--ease-out) 1; }
@keyframes sl-song-flash {
  0%, 30% { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 3px var(--accent); }
  100% { background: var(--accent-tint); color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
}

body.soundlabs-page .sl-song-lyrics[data-invalid] .sl-lyrics { border-color: var(--danger); }

body.soundlabs-page .sl-lyrics-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
body.soundlabs-page .sl-lyrics-add { padding: 0 var(--sp-2); }
body.soundlabs-page .sl-lyrics-add .sl-lyrics-add-chev { width: 14px; height: 14px; margin-left: -2px; color: var(--text-3); }
body.soundlabs-page .sl-lyrics-headmeta {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}
body.soundlabs-page .sl-lyrics-stats {
  overflow: hidden;
  text-overflow: ellipsis;
  font: 500 var(--fs-meta)/var(--lh-meta) var(--font-ui);
  color: var(--text-3);
  white-space: nowrap;
}

@media (forced-colors: active) {
  body.soundlabs-page .sl-lyrics-mirror { display: none; }
  body.soundlabs-page .sl-lyrics-wrap .sl-lyrics { color: CanvasText; -webkit-text-fill-color: CanvasText; }
}

/* B1: at laptop heights the Write-lyrics stack tightens so the REQUIRED Style field and its help stay on screen. */
@media (max-height: 860px) {
  body.soundlabs-page .sl-song-group[data-song-mode="lyrics"] { gap: var(--sp-3); }
  body.soundlabs-page .sl-song-lyrics .sl-lyrics-tools { margin-top: 6px; }
  body.soundlabs-page .sl-song-stylechips { margin-top: 0; }
}
/* 1024x768 is the laptop the spec names, and it sits just outside the 760px band: with a Style value long enough to
   wrap the input to three lines, the help that names the Vocals control was sliced through the x-height (critic r3
   F4). Tighten the same stack from 800px so the required field's explanation survives its own worst case — at every
   width, because a 740px phone is the other place the stack runs out of column (critic r3 F5). */
@media (max-height: 800px) {
  body.soundlabs-page .sl-song-group[data-song-mode="lyrics"] { gap: var(--sp-1); }
  body.soundlabs-page .sl-song-lyrics .sl-lyrics-tools { margin-top: var(--sp-1); }
  body.soundlabs-page .sl-song-group[data-song-mode="lyrics"] .sl-field-head { margin-bottom: var(--sp-1); }
  /* 8px of block padding instead of 12 inside the editor: a whole line of room, without losing a line of text. */
  body.soundlabs-page .sl-song-lyrics .sl-lyrics,
  body.soundlabs-page .sl-song-lyrics .sl-lyrics-mirror { padding-block: var(--sp-2); }
}

/* =========================================================================
   3. Style chips, tempo stepper
   ========================================================================= */
body.soundlabs-page .sl-song-stylechips { margin-top: 0; min-width: 0; }

body.soundlabs-page .sl-song-tempo { gap: var(--sp-3); }
body.soundlabs-page .sl-stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
body.soundlabs-page .sl-stepper-btn {
  width: 44px;
  height: 44px;
  box-shadow: inset 0 0 0 1px var(--border-control);
  color: var(--text);
}
body.soundlabs-page .sl-stepper-btn .sl-icon { width: 16px; height: 16px; }
body.soundlabs-page .sl-stepper-input.sl-input {
  width: 72px;
  padding: 0 var(--sp-2);
  text-align: center;
  font-weight: 700;
}
body.soundlabs-page .sl-stepper-unit {
  font: 600 var(--fs-label)/var(--lh-label) var(--font-ui);
  color: var(--text-3);
}
body.soundlabs-page .sl-song-bpm .sl-help { margin-top: var(--sp-1); }

/* =========================================================================
   4. "Write lyrics for me" dialog (anchored beside the composer ≥1024, centred 768-1023, sheet <768)
   ========================================================================= */
body.soundlabs-page .sl-song-writer { width: min(400px, calc(100vw - 32px)); }
body.soundlabs-page .sl-song-writer::backdrop {
  background: var(--cover-scrim);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.soundlabs-page .sl-song-writer.is-anchored {
  position: fixed;
  inset: auto;
  margin: 0;
}
body.soundlabs-page .sl-song-writer.is-anchored[open] { animation: sl-songw-in var(--t-slow) var(--ease-out); }
@keyframes sl-songw-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
/* The pointer back to the composer: a rotated square whose two borders form the "<". */
body.soundlabs-page .sl-song-writer.is-anchored::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: -6px;
  top: calc(var(--sl-songw-pointer, 48px) - 6px);
  width: 12px;
  height: 12px;
  background: var(--surface-1);
  border-left: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  transform: rotate(45deg);
}
body.soundlabs-page .sl-song-writer .sl-dialog-panel { border-color: var(--border-strong); }

body.soundlabs-page .sl-songw {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin: 0;
  padding: var(--sp-5) var(--sp-5) 0;
}
body.soundlabs-page .sl-songw-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
body.soundlabs-page .sl-songw-head .sl-dialog-title { flex: 1 1 auto; min-width: 0; }
body.soundlabs-page .sl-songw-mark {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: var(--accent-tint);
  color: var(--accent);
}
body.soundlabs-page .sl-songw-close { margin: -6px -8px -6px 0; }

body.soundlabs-page .sl-songw-fields {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
body.soundlabs-page .sl-songw-fields:disabled .sl-field,
body.soundlabs-page .sl-songw-fields:disabled .sl-songw-examples,
body.soundlabs-page .sl-songw-fields:disabled .sl-songw-uses { opacity: .55; }
body.soundlabs-page .sl-songw-fields:disabled .sl-chip,
body.soundlabs-page .sl-songw-fields:disabled .sl-seg-opt { cursor: default; }

body.soundlabs-page .sl-songw-idea { min-height: 88px; }
body.soundlabs-page .sl-songw .sl-field-head .sl-field-meta { color: var(--text-3); }

body.soundlabs-page .sl-songw-examples {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px var(--sp-2);
  min-width: 0;
  margin-top: calc(-1 * var(--sp-2));
}
body.soundlabs-page .sl-songw-examples-label {
  flex: 0 0 auto;
  align-self: flex-start;
  padding-top: 8px;
  font: 600 var(--fs-meta)/var(--lh-meta) var(--font-ui);
  color: var(--text-3);
}
body.soundlabs-page .sl-songw .sl-songw-examples-chips {
  flex: 1 1 200px;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
}

body.soundlabs-page .sl-songw-moods { gap: 6px; }

body.soundlabs-page .sl-songw-uses {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: calc(-1 * var(--sp-1)) 0 0;
  font: 500 var(--fs-meta)/var(--lh-meta) var(--font-ui);
  color: var(--text-2);
}
body.soundlabs-page .sl-songw-uses .sl-icon { width: 14px; height: 14px; margin-top: 1px; color: var(--accent); }

body.soundlabs-page .sl-songw-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: 10px var(--sp-3);
  border-radius: var(--r-md);
  background: var(--danger-tint);
  color: var(--text);
  font: 600 var(--fs-label)/var(--lh-label) var(--font-ui);
  text-wrap: pretty;
}
body.soundlabs-page .sl-songw-alert .sl-icon { width: 16px; height: 16px; margin-top: 1px; color: var(--danger); }
body.soundlabs-page .sl-songw-alert[data-tone="info"] { background: var(--surface-2); color: var(--text-2); }
body.soundlabs-page .sl-songw-alert[data-tone="info"] .sl-icon { color: var(--text-2); }

/* The panel's own top edge fades the same way its footer does, so a scrolled brief never ends in a hard line through
   a live field (critic r3 m1). Sticky, zero-height in flow, and only painted once there is something above. */
body.soundlabs-page .sl-song-writer .sl-dialog-panel::before {
  content: "";
  position: sticky;
  top: 0;
  z-index: 2;
  display: block;
  /* The panel is a flex column, so the fade needs a fixed basis or it shrinks to nothing; the negative margin keeps
     it out of the flow so it overlays the first field instead of pushing it down. */
  flex: 0 0 48px;
  height: 48px;
  margin-bottom: -48px;
  background: linear-gradient(to bottom, var(--surface-1), rgba(12, 22, 30, 0));
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}
body.soundlabs-page .sl-song-writer .sl-dialog-panel[data-cut-top]::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  body.soundlabs-page .sl-song-writer .sl-dialog-panel::before { transition: none; }
}

/* Footer sticks to the bottom of the scrolling panel. */
body.soundlabs-page .sl-songw-actions::before,
body.soundlabs-page .sl-songw-confirm::before,
body.soundlabs-page .sl-dialog--lyrics .sl-dialog-actions::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 48px;
  background: linear-gradient(to top, var(--surface-1), rgba(12, 22, 30, 0));
  pointer-events: none;
}
body.soundlabs-page .sl-songw-actions,
body.soundlabs-page .sl-songw-confirm {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-3);
  margin: 0 calc(-1 * var(--sp-5));
  padding: var(--sp-3) var(--sp-5) var(--sp-5);
  border-top: 1px solid var(--border);
  background: var(--surface-1);
}
body.soundlabs-page .sl-songw-status {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font: 500 var(--fs-meta)/var(--lh-meta) var(--font-ui);
  color: var(--text-3);
}
body.soundlabs-page .sl-songw-buttons {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
}
body.soundlabs-page .sl-songw-submit { min-width: 132px; }
body.soundlabs-page .sl-songw-submit[aria-disabled="true"] {
  background: var(--surface-3);
  color: var(--text-disabled);
  cursor: not-allowed;
  filter: none;
}
body.soundlabs-page .sl-songw-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--r-pill);
  animation: sl-songw-spin .8s linear infinite;
}
@keyframes sl-songw-spin { to { transform: rotate(360deg); } }

body.soundlabs-page .sl-songw-confirm-text {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  font: 700 var(--fs-label)/var(--lh-label) var(--font-ui);
  color: var(--text);
}
body.soundlabs-page .sl-songw-confirm-text .sl-icon { width: 16px; height: 16px; color: var(--warning); }

@media (max-width: 767px) {
  /* 16px text in fields on phones, so iOS never zooms the page on focus. */
  body.soundlabs-page .sl-lyrics-wrap .sl-lyrics,
  body.soundlabs-page .sl-lyrics-mirror,
  body.soundlabs-page .sl-songw .sl-textarea,
  body.soundlabs-page .sl-songw .sl-input { font-size: 1rem; line-height: 1.5rem; }
  body.soundlabs-page .sl-song-writer { width: 100%; }
  body.soundlabs-page .sl-songw { gap: var(--sp-4); padding: var(--sp-3) var(--sp-4) 0; }
  body.soundlabs-page .sl-songw-actions,
  body.soundlabs-page .sl-songw-confirm {
    margin: 0 calc(-1 * var(--sp-4));
    padding: var(--sp-3) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  }
  body.soundlabs-page .sl-songw-confirm .sl-songw-buttons,
  body.soundlabs-page .sl-songw-actions .sl-songw-buttons { width: 100%; }
  body.soundlabs-page .sl-songw-buttons .sl-btn { flex: 1 1 0; }
  body.soundlabs-page .sl-songw-status:empty { display: none; }
  body.soundlabs-page .sl-songw .sl-songw-examples-chips { margin: 0; padding-left: 2px; }
  body.soundlabs-page .sl-songw-moods {
    margin: 0 calc(-1 * var(--sp-4));
    padding: 2px var(--sp-4);
  }
  body.soundlabs-page .sl-song-writer .sl-dialog-panel { padding-bottom: 0; }
}

/* =========================================================================
   4b. Song cards: reserve the Lyrics slot so every waveform ends on the same pixel (finding 6)
   ========================================================================= */
@media (min-width: 768px) {
  body.soundlabs-page .sl-card[data-tool="song"] .sl-card-actions {
    min-width: var(--sl-song-actions, 152px);
    justify-content: flex-end;
  }
}

/* =========================================================================
   5. Lyrics sheet (card "Lyrics" button)
   ========================================================================= */
body.soundlabs-page .sl-dialog--lyrics .sl-dialog-panel { padding-bottom: 0; }
body.soundlabs-page .sl-lyricsheet {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-5) 0 var(--sp-6);
  border-top: 1px solid var(--border);
}
body.soundlabs-page .sl-lyricsheet-stanza { display: flex; flex-direction: column; }
body.soundlabs-page .sl-lyricsheet-tag {
  margin: 0 0 var(--sp-1);
  font: 700 var(--fs-meta)/var(--lh-meta) var(--font-ui);
  color: var(--accent);
}
body.soundlabs-page .sl-lyricsheet-line {
  margin: 0;
  font: 500 var(--fs-body)/1.6 var(--font-ui);
  color: var(--text);
  overflow-wrap: break-word;
}
body.soundlabs-page .sl-dialog--lyrics .sl-dialog-actions {
  position: sticky;
  isolation: isolate;
  bottom: 0;
  margin: 0 calc(-1 * var(--sp-6));
  padding: var(--sp-3) var(--sp-6) var(--sp-6);
  border-top: 1px solid var(--border);
  background: var(--surface-1);
}
@media (max-width: 767px) {
  body.soundlabs-page .sl-dialog--lyrics .sl-dialog-actions {
    margin: 0 calc(-1 * var(--sp-4));
    padding: var(--sp-3) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  }
}