/* ─────────────────────────────────────────────────────────────
   BrightNote Song Studio · chart engine stylesheet
   ONE stylesheet for screen, print and PDF. The published page and the
   printed page read the same rules, so they can never drift apart.
   Typography note: the family variables below are deliberately the system
   stack — it renders instantly with no network, which matters on a stage,
   and it is what the rest of BrightNote uses. Swap --bnsc-font-* to move
   the whole system onto a webfont without touching the engine.
   ───────────────────────────────────────────────────────────── */

.bnsc {
  /* ---- scale: the composer moves --bnsc-scale, nothing else ---- */
  --bnsc-scale: 1;
  --bnsc-lyric-pt: 19;
  --bnsc-chord-ratio: 0.82;
  --bnsc-lyric: calc(var(--bnsc-lyric-pt) * var(--bnsc-scale) * 1pt);
  --bnsc-chord: calc(var(--bnsc-lyric) * var(--bnsc-chord-ratio));
  --bnsc-lyric-lh: 1.34;
  --bnsc-chord-lh: 1.2;
  --bnsc-sec-gap: calc(var(--bnsc-lyric) * 1.15);
  --bnsc-stanza-gap: calc(var(--bnsc-lyric) * 0.62);
  --bnsc-line-gap: calc(var(--bnsc-lyric) * 0.34);
  --bnsc-tab: calc(var(--bnsc-lyric) * 0.86);
  --bnsc-dg-w: calc(var(--bnsc-lyric) * 4.0);

  /* ---- page geometry ---- */
  --bnsc-page-w: 8.5in;
  --bnsc-page-h: 11in;
  --bnsc-mt: 0.62in; --bnsc-mr: 0.6in; --bnsc-mb: 0.58in; --bnsc-ml: 0.6in;
  --bnsc-gutter: 0.34in;

  /* ---- families ---- */
  --bnsc-font-lyric: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --bnsc-font-chord: -apple-system, BlinkMacSystemFont, 'Segoe UI Semibold', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --bnsc-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* ---- paper palette (matches the SSB surfaces) ---- */
  --bnsc-paper: #FFFFFF;
  --bnsc-ink: #1E2937;
  --bnsc-soft: #5B6B7A;
  --bnsc-faint: #8A99A8;
  --bnsc-chord-ink: #0F2A4A;
  --bnsc-accent: #9A6F17;
  --bnsc-accent-line: #D9A441;
  --bnsc-accent-tint: #FDF6E3;
  --bnsc-line: #DCE6EE;
  --bnsc-line-strong: #B9C8D6;
  --bnsc-panel: #F6F9FC;
  --bnsc-shadow: 0 1px 2px rgba(15,42,74,.06), 0 12px 34px rgba(15,42,74,.10);

  font-family: var(--bnsc-font-lyric);
  color: var(--bnsc-ink);
  font-size: var(--bnsc-lyric);
  line-height: var(--bnsc-lyric-lh);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}

.bnsc[data-theme="dark"] {
  --bnsc-paper: #0E1620;
  --bnsc-ink: #E9F0F8;
  --bnsc-soft: #A9B8C9;
  --bnsc-faint: #7B8B9E;
  --bnsc-chord-ink: #F7C948;
  --bnsc-accent: #E3B457;
  --bnsc-accent-line: #D9A441;
  --bnsc-accent-tint: #17222F;
  --bnsc-line: #22303F;
  --bnsc-line-strong: #35485D;
  --bnsc-panel: #141F2B;
  --bnsc-shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 40px rgba(0,0,0,.5);
}

.bnsc *, .bnsc *::before, .bnsc *::after { box-sizing: border-box; }

/* ── layout presets ───────────────────────────────────────── */
.bnsc[data-layout="teaching"] { --bnsc-dg-w:calc(var(--bnsc-lyric)*4.9); --bnsc-lyric-pt:17; --bnsc-chord-ratio:.84; --bnsc-lyric-lh:1.42; --bnsc-line-gap:calc(var(--bnsc-lyric)*.4); --bnsc-sec-gap:calc(var(--bnsc-lyric)*1.2); --bnsc-stanza-gap:calc(var(--bnsc-lyric)*.66); }
.bnsc[data-layout="gig"] { --bnsc-dg-w:calc(var(--bnsc-lyric)*3.4); --bnsc-lyric-pt:15; --bnsc-chord-ratio:.86; --bnsc-lyric-lh:1.24; --bnsc-line-gap:calc(var(--bnsc-lyric)*.22); --bnsc-sec-gap:calc(var(--bnsc-lyric)*.82); --bnsc-stanza-gap:calc(var(--bnsc-lyric)*.44); --bnsc-mt:.45in; --bnsc-mr:.45in; --bnsc-mb:.42in; --bnsc-ml:.45in; --bnsc-tab:calc(var(--bnsc-lyric)*.8); }
.bnsc[data-layout="leadsheet"] { --bnsc-lyric-pt:16.5; --bnsc-chord-ratio:.84; --bnsc-lyric-lh:1.46; --bnsc-line-gap:calc(var(--bnsc-lyric)*.42); --bnsc-sec-gap:calc(var(--bnsc-lyric)*1.3); --bnsc-stanza-gap:calc(var(--bnsc-lyric)*.7); --bnsc-mt:.75in; --bnsc-mr:.7in; --bnsc-mb:.7in; --bnsc-ml:.7in; }

/* ── page shell ───────────────────────────────────────────── */
.bnsc-page {
  position: relative;
  width: var(--bnsc-page-w);
  height: var(--bnsc-page-h);
  padding: var(--bnsc-mt) var(--bnsc-mr) var(--bnsc-mb) var(--bnsc-ml);
  background: var(--bnsc-paper);
  overflow: hidden;
}
.bnsc-cols { display: flex; gap: var(--bnsc-gutter); height: 100%; align-items: stretch; }
.bnsc-col { flex: 1 1 0; min-width: 0; }
/* The two-column rule is painted as a hairline down the middle of the spread
   rather than as padding on the second column — padding would make the real
   column narrower than the one the engine measured, and the page would
   overflow by exactly that much. */
.bnsc-cols[data-cols="2"] {
  background: linear-gradient(to right,
    transparent calc(50% - 0.5px), var(--bnsc-line) calc(50% - 0.5px),
    var(--bnsc-line) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}

.bnsc[data-view="paged"] { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.bnsc[data-view="paged"] .bnsc-page { box-shadow: var(--bnsc-shadow); border-radius: 3px; flex: none; }

/* continuous view — phones and tablets read a scroll, not a page */
.bnsc[data-view="flow"] .bnsc-page { width: 100%; height: auto; padding: 0; background: transparent; box-shadow: none; }
.bnsc[data-view="flow"] .bnsc-cols { display: block; height: auto; }
.bnsc[data-view="flow"] .bnsc-cols { background: none; }
.bnsc[data-view="flow"] .bnsc-foot { display: none; }

/* the offscreen measuring column — real geometry, never visible */
.bnsc-measure { position: absolute !important; left: -10000px !important; top: 0 !important; visibility: hidden !important; pointer-events: none !important; }

/* ── masthead ─────────────────────────────────────────────── */
.bnsc-head { margin-bottom: calc(var(--bnsc-lyric) * 0.95); }
.bnsc-title {
  font-size: calc(var(--bnsc-lyric) * 1.62);
  font-weight: 800; line-height: 1.08; letter-spacing: -0.018em; margin: 0;
  color: var(--bnsc-ink);
}
.bnsc-artist {
  font-size: calc(var(--bnsc-lyric) * 0.8); font-weight: 400;
  color: var(--bnsc-soft); margin: calc(var(--bnsc-lyric) * 0.24) 0 0;
}
.bnsc-facts {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: calc(var(--bnsc-lyric) * .28) calc(var(--bnsc-lyric) * 0.9);
  margin-top: calc(var(--bnsc-lyric) * 0.5);
  padding-top: calc(var(--bnsc-lyric) * 0.42);
  border-top: 1.5px solid var(--bnsc-line-strong);
  font-family: var(--bnsc-font-chord);
  font-size: calc(var(--bnsc-lyric) * 0.58);
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bnsc-faint);
}
.bnsc-fact { white-space: nowrap; }
.bnsc-fact b { font-weight: 800; color: var(--bnsc-ink); letter-spacing: .04em; margin-left: .45em; text-transform: none; font-size: 1.08em; }
.bnsc-fact.accent b { color: var(--bnsc-accent); }

/* ── sections ─────────────────────────────────────────────── */
.bnsc-sechead { display: flex; align-items: center; gap: calc(var(--bnsc-lyric) * 0.5); margin: 0 0 calc(var(--bnsc-lyric) * 0.4); }
.bnsc-seclabel {
  font-family: var(--bnsc-font-chord); font-weight: 800;
  font-size: calc(var(--bnsc-lyric) * 0.62);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bnsc-accent); white-space: nowrap;
}
.bnsc-secrule { flex: 1; height: 1px; background: var(--bnsc-line); }
.bnsc-cont .bnsc-seclabel::after { content: " (cont.)"; color: var(--bnsc-faint); letter-spacing: .07em; }
.bnsc-atom { margin: 0; }
.bnsc-atom.gap-section { margin-top: var(--bnsc-sec-gap); }
.bnsc-atom.gap-line { margin-top: var(--bnsc-line-gap); }
.bnsc-col > .bnsc-atom:first-child { margin-top: 0 !important; }

/* ── the chord/lyric line ─────────────────────────────────── */
.bnsc-line { line-height: 1; margin: 0; padding: 0; }
.bnsc-space { height: var(--bnsc-stanza-gap); }

/* A pair is inline-block, so its width is the WIDER of chord and lyric.
   Chords therefore cannot overlap or crowd — the geometry forbids it
   rather than the spacing merely discouraging it. */
.bnsc-pair { display: inline-block; vertical-align: bottom; }
.bnsc-word { white-space: nowrap; }
.bnsc-ch {
  display: block;
  font-family: var(--bnsc-font-chord); font-weight: 700;
  font-size: var(--bnsc-chord); line-height: var(--bnsc-chord-lh);
  letter-spacing: -0.005em; color: var(--bnsc-chord-ink);
  white-space: nowrap; padding-right: 0.6em;
}
.bnsc-ch.empty { padding-right: 0; }
.bnsc-ch .bass { font-weight: 600; opacity: .8; }
.bnsc-ly { display: block; line-height: var(--bnsc-lyric-lh); white-space: pre; }
.bnsc-line.plain .bnsc-ly { white-space: pre-wrap; }

/* bar notation, engraved as an even measure grid */
.bnsc-bars {
  display: flex; align-items: stretch;
  font-family: var(--bnsc-font-chord); font-weight: 700;
  font-size: var(--bnsc-chord); line-height: calc(var(--bnsc-chord-lh) * 1.3);
  color: var(--bnsc-chord-ink); letter-spacing: .02em;
  border-right: 1.5px solid var(--bnsc-line-strong);
}
.bnsc-bars .bnsc-cell {
  flex: 1 1 0; min-width: 0;
  border-left: 1.5px solid var(--bnsc-line-strong);
  padding: .2em .55em; white-space: nowrap; overflow: hidden;
}

/* ── performance notes ────────────────────────────────────── */
.bnsc-note {
  display: flex; gap: calc(var(--bnsc-lyric) * 0.38); align-items: flex-start;
  margin: calc(var(--bnsc-lyric) * 0.4) 0 0;
  padding: calc(var(--bnsc-lyric) * 0.3) calc(var(--bnsc-lyric) * 0.5);
  background: var(--bnsc-accent-tint);
  border-left: 2.5px solid var(--bnsc-accent-line);
  border-radius: 0 4px 4px 0;
  font-size: calc(var(--bnsc-lyric) * 0.64); line-height: 1.42;
  color: var(--bnsc-soft);
}
.bnsc-note .ic { flex: none; }
.bnsc-note b, .bnsc-note strong { color: var(--bnsc-ink); font-weight: 700; }
.bnsc-repeat {
  font-family: var(--bnsc-font-chord); font-weight: 700;
  font-size: calc(var(--bnsc-lyric) * 0.6); letter-spacing: .1em;
  text-transform: uppercase; color: var(--bnsc-faint);
  margin-top: calc(var(--bnsc-lyric) * 0.28);
}
.bnsc-comment { font-size: calc(var(--bnsc-lyric) * .68); font-style: italic; color: var(--bnsc-soft); margin-top: calc(var(--bnsc-lyric) * .3); }

/* ── TAB + riff blocks ────────────────────────────────────── */
.bnsc-tab { margin-top: calc(var(--bnsc-lyric) * 0.45); }
.bnsc-tabhead { display: flex; align-items: baseline; gap: calc(var(--bnsc-lyric) * 0.42); margin-bottom: calc(var(--bnsc-lyric) * 0.24); }
.bnsc-tabtitle {
  font-family: var(--bnsc-font-chord); font-weight: 800;
  font-size: calc(var(--bnsc-lyric) * 0.62); letter-spacing: .12em;
  text-transform: uppercase; color: var(--bnsc-ink);
}
.bnsc-tabcap { font-family: var(--bnsc-font-chord); font-weight: 600; font-size: calc(var(--bnsc-lyric) * 0.58); letter-spacing: .06em; color: var(--bnsc-faint); }
.bnsc-tabcap::before { content: "· "; }
.bnsc-tabbody {
  font-family: var(--bnsc-font-mono); font-size: var(--bnsc-tab); font-weight: 500;
  line-height: 1.4; white-space: pre; overflow: hidden;
  color: var(--bnsc-ink); background: var(--bnsc-panel);
  border: 1px solid var(--bnsc-line); border-radius: 5px;
  padding: calc(var(--bnsc-lyric) * 0.4) calc(var(--bnsc-lyric) * 0.5);
  font-variant-ligatures: none; tab-size: 4;
}
.bnsc-tabbody .s { color: var(--bnsc-faint); }
.bnsc-tabbody .f { color: var(--bnsc-chord-ink); font-weight: 700; }
.bnsc-tabbody .t { color: var(--bnsc-accent); font-weight: 700; }
.bnsc-tab.riff .bnsc-tabbody { background: var(--bnsc-paper); border-color: var(--bnsc-line-strong); border-left: 3px solid var(--bnsc-accent-line); }
.bnsc-tab.riff .bnsc-tabtitle { color: var(--bnsc-accent); }
.bnsc-tabcont { font-family: var(--bnsc-font-chord); font-weight: 700; font-size: calc(var(--bnsc-lyric) * .55); letter-spacing: .1em; text-transform: uppercase; color: var(--bnsc-faint); margin-top: calc(var(--bnsc-lyric) * .18); }

/* ── chord diagrams ───────────────────────────────────────── */
.bnsc-diagrams {
  display: flex; flex-wrap: wrap;
  gap: calc(var(--bnsc-lyric) * 0.55) calc(var(--bnsc-lyric) * 0.7);
  padding-bottom: calc(var(--bnsc-lyric) * 0.5);
  border-bottom: 1px solid var(--bnsc-line);
}
/* Diagrams are sized in type units, not fixed pixels — when the composer
   scales the chart down to save a page turn, the chord boxes come with it. */
.bnsc-dg { display: block; overflow: visible; width: var(--bnsc-dg-w); height: auto; }
.bnsc-dg .nm { font-family: var(--bnsc-font-chord); font-weight: 800; font-size: 15px; fill: var(--bnsc-chord-ink); }
.bnsc-dg .pos { font-family: var(--bnsc-font-chord); font-weight: 700; font-size: 11px; fill: var(--bnsc-soft); }
.bnsc-dg .gr { stroke: var(--bnsc-line-strong); stroke-width: 1; }
.bnsc-dg .nut { fill: var(--bnsc-ink); }
.bnsc-dg .dot { fill: var(--bnsc-chord-ink); }
.bnsc-dg .fng { font-family: var(--bnsc-font-chord); font-weight: 800; font-size: 10px; fill: var(--bnsc-paper); }
.bnsc-dg .opn { fill: none; stroke: var(--bnsc-soft); stroke-width: 1.4; }
.bnsc-dg .mut { stroke: var(--bnsc-faint); stroke-width: 1.6; stroke-linecap: round; fill: none; }

/* ── page furniture ───────────────────────────────────────── */
.bnsc-foot {
  position: absolute; left: var(--bnsc-ml); right: var(--bnsc-mr);
  bottom: calc(var(--bnsc-mb) * 0.42);
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--bnsc-font-chord); font-size: 7.6pt; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--bnsc-faint);
}

/* ── print ────────────────────────────────────────────────── */
@page { size: 8.5in 11in; margin: 0; }
@media print {
  html, body { margin: 0; padding: 0; background: #fff; }
  body > *:not(.bnsc-printroot) { display: none !important; }
  .bnsc-printroot { display: block !important; }
  .bnsc { --bnsc-paper: #fff; display: block !important; }
  .bnsc[data-view="paged"] .bnsc-page { box-shadow: none; border-radius: 0; }
  .bnsc-page { break-after: page; page-break-after: always; }
  .bnsc-page:last-child { break-after: auto; page-break-after: auto; }
  .bnsc-noprint, .bnsc-toolbar { display: none !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}