/* =====================================================
   Bulk lyrics import (Songs → Import lyrics)
   Theme variables only, so light and dark both work.
   ===================================================== */

/* The shared modal card is a fixed-height flex column with overflow:hidden, so
   the body has to be the scrolling child or the footer ends up outside it. */
.li-scroll { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-4) var(--sp-5); min-height: 0; }
#li-modal .fb-view-modal-card { height: auto; max-height: min(88vh, 900px); }

.li-hint { font-size: 12px; line-height: 1.5; margin: 0 0 var(--sp-3); }
.li-hint code {
  font: 500 11px/1 var(--font-mono);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-1); padding: 1px 4px; color: var(--text-2);
}

.li-text {
  width: 100%; min-height: 240px; resize: vertical;
  padding: var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--r-2);
  background: var(--surface-2); color: var(--text);
  font: 400 12.5px/1.5 var(--font-mono);
}
.li-text:focus { outline: none; border-color: var(--accent-ring); background: var(--surface); }

.li-fileline { display: block; margin-top: var(--sp-3); }
.li-fileline input[type="file"] { font-size: 12px; color: var(--text-2); }

/* ── Match report ──────────────────────────────────── */
.li-summary {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding-bottom: var(--sp-3); margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
  font-size: 13px; color: var(--text-2);
}
.li-summary .muted { font-size: 12px; }

.li-rows { display: flex; flex-direction: column; gap: var(--sp-2); }
.li-row {
  display: grid; grid-template-columns: 26px 1fr; gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--line); border-left-width: 3px;
  border-radius: var(--r-2); background: var(--surface-2);
}
.li-row.matched   { border-left-color: var(--pos); }
.li-row.ambiguous { border-left-color: var(--warn); }
.li-row.unmatched { border-left-color: var(--line-strong); opacity: .8; }

.li-pick { display: flex; align-items: flex-start; justify-content: center; padding-top: 2px; }
.li-main { min-width: 0; }
.li-title {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  font: 600 13px/1.35 var(--font-sans); color: var(--text);
}
.li-meta {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
  margin-top: 2px; font-size: 11.5px; line-height: 1.5; color: var(--text-3);
}
.li-meta strong { color: var(--text-2); }
.li-warn { color: var(--warn); }

.li-badge {
  flex: 0 0 auto;
  padding: 1px var(--sp-2); border-radius: var(--r-pill);
  border: 1px solid var(--line);
  font: 700 10px/1.6 var(--font-sans); text-transform: uppercase; letter-spacing: .04em;
}
.li-badge.is-ok   { border-color: var(--pos);  color: var(--pos);  background: var(--pos-soft); }
.li-badge.is-warn { border-color: var(--warn); color: var(--warn); background: var(--warn-soft); }
.li-badge.is-off  { border-color: var(--line-strong); color: var(--text-3); }

.li-choose {
  margin-top: var(--sp-2); width: 100%; max-width: 420px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--r-1);
  background: var(--surface); color: var(--text);
  font: 400 12.5px/1.3 var(--font-sans);
}
.li-choose:focus { outline: none; border-color: var(--accent-ring); }

/* A block that carried inline chords — flagged because it lands on an
   arrangement rather than just the song's lyrics. */
.li-chart { color: var(--accent); }