/* ---------------------------------------------------------------- tokens */
:root {
  --scale: 1;

  --bg: #12110f;
  --bg-raised: #1a1917;
  --bg-chip: #232120;
  --fg: #ece7df;
  --fg-dim: #a29a8f;
  --fg-faint: #6f675e;
  --accent: #d9a441;
  --accent-dim: #8a6a2b;
  --rule: #2e2b28;

  /* Per-script stacks. Han needs a different face and more leading than Latin;
     Cyrillic reads better in a face with real Cyrillic design (PT Serif). */
  --font-latin: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-cyrillic: "PT Serif", "Charter", Georgia, "Times New Roman", serif;
  --font-han: "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC",
              "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --font-japanese: "Hiragino Sans", "Yu Gothic", "Noto Sans CJK JP", sans-serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  /* Romanizations carry stacked diacritics (POJ ō͘, Gàidhlig à, IPA) — this stack
     is chosen for glyph coverage, not looks. */
  --font-roman: "Charis SIL", "Doulos SIL", "Gentium Plus", "Lucida Grande",
                "DejaVu Sans", var(--font-ui);
}

:root[data-theme="light"] {
  --bg: #faf7f1;
  --bg-raised: #fffdf9;
  --bg-chip: #ece7dc;
  --fg: #221f1b;
  --fg-dim: #5d564c;
  --fg-faint: #918879;
  --accent: #966a12;
  --accent-dim: #c9a45e;
  --rule: #ddd5c7;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- chrome */
.chrome {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem max(1rem, calc(50vw - 30rem));
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.crumb { flex: 1; font-size: .85rem; color: var(--fg-dim); font-weight: 500;
         white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chrome-actions { display: flex; gap: .25rem; }
.icon-btn {
  border: 1px solid transparent; background: none; color: var(--fg-dim);
  font: inherit; font-size: .8rem; padding: .3rem .5rem; border-radius: 6px; cursor: pointer;
}
.icon-btn:hover { background: var(--bg-chip); color: var(--fg); }

main { padding: 1.5rem max(1rem, calc(50vw - 30rem)) 6rem; }

/* ---------------------------------------------------------------- library */
.search {
  width: 100%; padding: .7rem .9rem; font: inherit; font-size: 1rem;
  background: var(--bg-raised); color: var(--fg);
  border: 1px solid var(--rule); border-radius: 10px;
}
.search:focus { outline: 2px solid var(--accent-dim); outline-offset: 1px; }

.facets { margin: .9rem 0 1.2rem; display: flex; flex-direction: column; gap: .4rem; }
.facet-row { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.facet-name {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--fg-faint); width: 5.5rem; flex: none;
}

.results { display: flex; flex-direction: column; }
.song-row {
  display: flex; align-items: baseline; gap: 1rem; width: 100%; text-align: left;
  padding: .85rem .6rem; background: none; border: 0;
  border-bottom: 1px solid var(--rule); color: inherit; font: inherit; cursor: pointer;
}
.song-row:hover { background: var(--bg-raised); }
.song-main { flex: 1; min-width: 0; }
/* The whole chain reads as one line at one weight — same size, same colour,
   separators included. Only the title's serif sets it apart. */
.song-title, .song-artist, .song-source, .song-sep {
  font-size: 1.02rem;
  color: var(--fg);
}
.song-title { font-family: var(--font-latin); }
.song-sep { margin: 0 .45rem; }
.song-meta { display: flex; align-items: center; gap: .5rem; flex: none; }
.badges { display: flex; gap: .25rem; }
.badge {
  font-size: .65rem; padding: .12rem .4rem; border-radius: 4px;
  background: var(--bg-chip); color: var(--fg-faint);
}
.badge.is-original { color: var(--accent); }
.row-tags { display: flex; gap: .4rem; }
.tag-badge { font-size: .65rem; color: var(--fg-faint); white-space: nowrap; }
.count { font-size: .72rem; color: var(--fg-faint); margin-top: 1rem; }

/* ---------------------------------------------------------------- chips */
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .7rem; border-radius: 999px; cursor: pointer;
  background: var(--bg-chip); color: var(--fg-dim);
  border: 1px solid transparent; font: inherit; font-size: .82rem; white-space: nowrap;
}
.chip:hover { color: var(--fg); }
.chip.on { background: var(--accent); color: #17140e; border-color: var(--accent); font-weight: 600; }
.chip-sm { font-size: .74rem; padding: .22rem .55rem; }
.chip-key { font-size: .62rem; opacity: .5; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- song head */
.song-head { margin-bottom: 1.1rem; }
.title { font-family: var(--font-latin); font-size: 2rem; font-weight: 600; margin: 0 0 .3rem; }
.byline { margin: 0; font-size: .88rem; color: var(--fg-dim); }
.byline-sub { color: var(--fg-faint); }
.tagline { margin: .5rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.tag { font-size: .7rem; color: var(--fg-faint); }

.picker {
  position: sticky; top: 2.7rem; z-index: 5;
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem 0; margin-bottom: .5rem;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
/* The horizontal multi-select: scrolls sideways rather than wrapping, so the
   row height never changes as versions are added. */
.chips {
  display: flex; gap: .4rem; overflow-x: auto; flex: 1;
  scrollbar-width: thin; padding-bottom: .15rem;
}
.chips::-webkit-scrollbar { height: 4px; }
.chips::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 2px; }
.mode-btn {
  flex: none; font: inherit; font-size: .7rem; cursor: pointer;
  padding: .3rem .55rem; border-radius: 6px;
  background: none; border: 1px solid var(--rule); color: var(--fg-faint);
}
.mode-btn:hover { color: var(--fg); border-color: var(--fg-faint); }
.mode-btn.on { background: var(--accent); border-color: var(--accent); color: #17140e; font-weight: 600; }

/* ---------------------------------------------------------------- lyrics */
.lyrics { margin-top: 1.2rem; }
/* No section headings — the gap is the only separator, so it carries the
   weight the label used to. */
.sec { margin-bottom: 2.6rem; }

.ln {
  margin: 0;
  /* Lyric files carry deliberate phrase spacing (a romanization mirrors the
     gaps in its source line); HTML would collapse those runs of spaces. */
  white-space: pre-wrap;
  font-size: calc(1.02rem * var(--scale));
  line-height: 1.55;
  /* Hanging indent: a wrapped continuation never reads as a new lyric line. */
  padding-left: 1.3em;
  text-indent: -1.3em;
}
.ln[data-script="han"]      { font-family: var(--font-han); line-height: 1.85; letter-spacing: .01em; }
.ln[data-script="japanese"] { font-family: var(--font-japanese); line-height: 1.85; }
.ln[data-script="cyrillic"] { font-family: var(--font-cyrillic); }
.ln[data-script="latin"]    { font-family: var(--font-latin); }

.ln[data-kind="original"]     { color: var(--fg); font-weight: 500; }
.ln[data-kind="translation"]  { color: var(--fg-dim); }
/* Body size like every other line — a romanization must not change size
   depending on whether it aligned or fell back to stacking. Colour, not
   scale, is what marks it as the reading. */
.ln[data-kind="romanization"],
.ln[data-kind="phonetic"] {
  font-family: var(--font-roman);
  font-size: calc(1.02rem * var(--scale));
  color: var(--fg-faint);
  letter-spacing: .012em;
  line-height: 1.45;
}
.ln[data-kind="script"] { color: var(--fg-dim); font-size: calc(.92rem * var(--scale)); }
.ln.slot { min-height: 1em; }

/* A Han line and its own romanization, aligned character by character.
   Each character is its own column: the character on top, its syllable below,
   both flush left, with a gap so columns never run together. ruby-align has
   poor support, so the stacking is done with plain block boxes instead. */
/* Same body size as every other lyric line — an aligned column sitting beside
   a plain translation must not be visibly larger than it. The reading takes a
   bigger share of that size instead of the base being inflated to carry it. */
.ruby-line {
  font-size: calc(1.02rem * var(--scale));
  line-height: 1.35;
  padding-left: 0;
  text-indent: 0;
}
.ruby-line ruby {
  display: inline-block;
  vertical-align: top;
  text-align: left;
  margin: 0 .5em .55em 0;
}
.ruby-line .rb { display: block; line-height: 1.25; }
/* Word columns are already wide, so they need neither the enlarged base nor
   the shrunken reading that Han characters do — the word and its romanization
   sit at the same size, one above the other. */
.ruby-line[data-align="word"] { font-size: calc(1.02rem * var(--scale)); line-height: 1.4; }
/* Word columns already sit as far apart as their readings demand; a wide
   margin on top of that pulls the original text visibly apart. Keep it to
   about one space so the base line still reads as ordinary prose. */
.ruby-line[data-align="word"] ruby { margin: 0 .3em .45em 0; }
/* Inherit the base's face rather than --font-roman. That stack exists for the
   stacked diacritics of POJ and Tâi-lô, and for a Cyrillic base it resolves to
   a UI sans sitting under a serif — two different families in one column. */
.ruby-line[data-align="word"] rt { font-size: 1em; font-family: inherit; }
.ruby-line rt {
  display: block;
  font-family: var(--font-roman);
  font-size: .58em;
  font-weight: 400;
  line-height: 1.3;
  color: var(--fg-dim);
  letter-spacing: 0;
  text-align: left;
}

/* section mode with attribution: each stanza is cut into runs by singer */
.run + .run { margin-top: .9rem; }
/* Only the spacing differs from the attribution column — everything else
   comes from .ln.speaker so a name looks identical in every mode. */
.run-who { margin-bottom: .15rem; }

/* section mode: whole block per version */
.block + .block { margin-top: .55rem; }
.block.sep { padding-top: .55rem; border-top: 1px dashed var(--rule); }

/* column mode: the stanza stays whole, versions sit side by side. minmax(0,1fr)
   rather than 1fr so a long unbroken line wraps instead of widening its column. */
.cols {
  display: grid;
  grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
  column-gap: 1.9rem;
  row-gap: .2rem;
  align-items: start;   /* a taller wrapped cell must not centre its neighbours */
}
/* The attribution column is only as wide as the longest name, so it never
   steals width from the lyrics. */
.cols[data-who] {
  /* --who-w is measured after the first paint; max-content is the fallback
     for that one frame. */
  grid-template-columns:
    repeat(var(--who-n, 1), var(--who-w, max-content))
    repeat(var(--cols, 1), minmax(0, 1fr));
}
/* Same size, colour and line-height as the lyric it names, so it sits on the
   line rather than floating above it. */
.ln.speaker {
  color: var(--fg);
  white-space: nowrap;
  padding-left: 0;
  text-indent: 0;
  padding-right: .5rem;
  text-decoration: underline;
  text-underline-offset: .22em;
  text-decoration-thickness: from-font;
}
/* Too narrow to sit side by side — stack the columns rather than crush them. */
@media (max-width: 720px) {
  .cols { grid-template-columns: 1fr; gap: .9rem; }
}

/* line mode: one group per line position */
.group { margin-bottom: .95rem; }
/* With a single version there is nothing to hold together, so the group gap
   would just make every line look like its own stanza — and swamp the section
   break. Let the lines flow; the section margin alone separates stanzas. */
.lyrics[data-versions="1"] .group { margin-bottom: 0; }
.group .ln[data-kind="original"] { margin-bottom: .05rem; }

.notes {
  margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--rule);
  font-size: .76rem; color: var(--fg-faint); line-height: 1.6;
}
.empty-note { color: var(--fg-faint); font-size: .85rem; }
.fatal {
  white-space: pre-wrap; background: var(--bg-raised); border: 1px solid var(--rule);
  border-left: 3px solid var(--accent); padding: 1rem; border-radius: 8px;
  font-size: .84rem; line-height: 1.6; color: var(--fg-dim);
}

/* ---------------------------------------------------------------- print */
@media print {
  :root { --bg: #fff; --fg: #000; --fg-dim: #333; --fg-faint: #666; --rule: #ccc; }
  .chrome, .picker, .notes { display: none; }
  main { padding: 0; }
  .sec { break-inside: avoid; margin-bottom: 1.4rem; }
}

/* Shown only when the index carries one — the public demo build says there what
   it is, so a one-song library does not read as a broken site. */
.notice {
  margin: 0 0 .9rem;
  padding: .6rem .8rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--fg-dim);
}