/* sofo — song form notation. Print-first: US Letter, "Save as PDF" is the product. */

@page {
  size: letter;
  /* The bottom margin is deep enough to hold the repeating footer, which is
     positioned down into it — content fills the area above and can never
     collide with the revision date. */
  margin: 0.45in 0.5in 0.6in;
}

/* Self-hosted so the exported PDF embeds them and renders identically on any
   tablet, with no network at print time. Both are SIL OFL 1.1 — see fonts/README.md. */
@font-face {
  font-family: "Patrick Hand";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/patrick-hand-400.ttf") format("truetype");
}

@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 500;
  src: url("fonts/caveat-500.ttf") format("truetype");
}

@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 600;
  src: url("fonts/caveat-600.ttf") format("truetype");
}

:root {
  --ink: #16181d;
  --ink-soft: #4a5060;
  --rule: #b9bec9;
  --paper: #fff;

  /* Section tints. Deliberately matched in luminance (~L 92) so a grayscale
     print shows one uniform light gray — color never carries meaning alone,
     the section label does. */
  --tint-intro: #e7eaf3;
  --tint-verse: #e4eef0;
  --tint-prechorus: #eaeaf5;
  --tint-chorus: #f6e8e6;
  --tint-bridge: #eff0e2;
  --tint-interlude: #e9eff5;
  --tint-solo: #f4eadd;
  --tint-breakdown: #eeeaf0;
  --tint-vamp: #e6efe8;
  --tint-outro: #ececec;
  --tint-other: #eeeeee;

  --gap: 0.12in;

  /* 0.75pt is exactly 1 CSS px at 96dpi and still lands on a whole device pixel
     when Chrome rasterizes for print, so hairlines never round away to nothing. */
  --hair: 0.75pt;
  --radius: 0.045in;

  /* Lyrics get their own hand-lettered voice so they never read as chart
     instructions. Swap to "Caveat" for a looser, more script-like feel —
     it is whimsier but noticeably harder to read at arm's length on a stand. */
  --font-lyric: "Patrick Hand", "Comic Neue", "Bradley Hand", cursive;
}

html {
  background: #6b7080;
}

body {
  margin: 0;
  color: var(--ink);
  font: 11pt/1.35 "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}

/* Screen preview mimics a sheet of Letter paper. */
song-sheet {
  display: block;
  box-sizing: border-box;
  width: 8.5in;
  min-height: 11in;
  margin: 0.4in auto;
  padding: 0.5in 0.5in 0.6in;
  background: var(--paper);
  box-shadow: 0 0.06in 0.3in rgb(0 0 0 / 35%);
}

/* ---------- head ---------- */

song-head {
  display: block;
  margin-bottom: 0.12in;
}

song-head h1 {
  margin: 0;
  font-size: 26pt;
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  letter-spacing: -0.01em;
}

song-head .artist {
  margin: 0.03in 0 0;
  color: var(--ink-soft);
  font-size: 12pt;
  text-align: center;
}

song-head .facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.06in 0.3in;
  justify-content: center;
  margin: 0.14in 0 0;
  padding: 0.08in 0;
  border-top: var(--hair) solid var(--rule);
  border-bottom: var(--hair) solid var(--rule);
}

song-fact {
  display: flex;
  gap: 0.06in;
  align-items: baseline;
}

song-fact dt {
  color: var(--ink-soft);
  font-size: 8.5pt;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

song-fact dd {
  margin: 0;
  font-weight: 600;
}

/* Tempo reads as a metronome marking: note-value glyph = number. */
song-fact[data-kind="tempo"] dd {
  display: flex;
  gap: 0.03in;
  align-items: center;
}

song-unit {
  display: block;
  line-height: 0;
}

/* Sized off the surrounding type and colored by currentColor, so it tracks the
   text it sits beside and goes solid black in grayscale. */
.song-note-value {
  display: block;
  width: 0.09in;
  height: 0.14in;
  overflow: visible;
}

song-fact[data-kind="tempo"] .equals {
  color: var(--ink-soft);
  font-weight: 600;
}

/* Groove/feel sits after tempo and carries a little extra weight: it sets how
   everything else is played. */
song-fact[data-kind="groove"] dd {
  font-size: 11.5pt;
  font-weight: 700;
  white-space: nowrap; /* "Medium half-time shuffle" is one idea, not two lines */
}

/* Count-off runs long, so it gets its own line under the facts rather than
   wrapping inside a chip. */
song-count-off {
  display: flex;
  gap: 0.06in;
  align-items: baseline;
  justify-content: center;
  margin-top: 0.08in;
}

song-count-off dt {
  color: var(--ink-soft);
  font-size: 8.5pt;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

song-count-off dd {
  margin: 0;
  font-weight: 600;
}

/* Says on the printed page which instrument this part is written for, so a
   transposed PDF is never mistaken for a concert one. */
song-transposed {
  display: block;
  margin-top: 0.07in;
  color: var(--ink-soft);
  font-size: 9.5pt;
  font-weight: 600;
  text-align: center;
  /* No text-transform: uppercasing "Bb" gives "BB", which reads as a different
     pitch. Accidentals are case-sensitive, so this text must be left alone. */
  letter-spacing: 0.02em;
}

song-head .note {
  margin: 0.08in 0 0;
  color: var(--ink-soft);
  font-size: 10pt;
}

/* ---------- screen-only controls ---------- */

song-controls {
  display: flex;
  gap: 0.08in;
  align-items: center;
  justify-content: center;
  padding: 0.12in;
  color: #fff;
  font-size: 10pt;
}

song-controls label {
  font-weight: 600;
}

song-controls select,
song-controls button {
  padding: 0.03in 0.06in;
  border: 0;
  border-radius: 0.03in;
  font: inherit;
}

song-controls button {
  cursor: pointer;
  font-weight: 600;
}

song-controls button[aria-pressed="true"] {
  background: #1f6f3f;
  color: #fff;
}

song-controls select:disabled {
  opacity: 0.5;
}

song-controls .status {
  opacity: 0.85;
  font-size: 9pt;
}

/* ---------- editing affordances ---------- */

/* Editable leaves get a hover target only in edit mode; the printed document
   and the read-only view carry no editing chrome at all. */
song-sheet[editing] [data-path] {
  border-radius: 0.02in;
  outline: var(--hair) dashed transparent;
  outline-offset: 0.01in;
  cursor: text;
}

song-sheet[editing] [data-path]:hover {
  outline-color: #5a7fd0;
  background: #eef3fd;
}

/* Empty fields need to be clickable, so they show their label instead of
   collapsing to nothing. */
song-sheet[editing] [data-path]:empty::before {
  color: #8b93a6;
  content: attr(data-placeholder);
  font-style: italic;
  font-weight: 400;
}

song-sheet[editing] song-note:empty,
song-sheet[editing] song-end-notes:empty {
  display: block;
  min-height: 0.16in;
}

/* ---------- structural edit toolbars ---------- */

song-tools {
  display: flex;
  gap: 0.02in;
  align-items: center;
}

.song-action {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0.19in;
  height: 0.2in;
  padding: 0 0.04in;
  border: var(--hair) solid #b6c2da;
  border-radius: 0.025in;
  background: #f4f7fd;
  color: #33415c;
  cursor: pointer;
  /* system-ui has the widest glyph coverage of anything guaranteed present, and
     these labels are ASCII plus U+00D7 so nothing can go tofu. */
  font-family: system-ui, sans-serif;
  font-size: 8pt;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

/* The drawn duplicate icon, sized off the button's own type. */
.song-icon {
  display: block;
  width: 1.15em;
  height: 1.15em;
}

.song-action:hover {
  border-color: #5a7fd0;
  background: #dfe9fb;
}

/* Deleting is the one irreversible-looking action, so it reads as dangerous
   even though Ctrl+Z will bring it back. */
.song-action[data-action$="-delete"]:hover {
  border-color: #c0504a;
  background: #fbe4e2;
  color: #8f2f28;
}

/* The phrase toolbar floats over the top-right of its phrase box and only
   appears on hover, so it never competes with the chords for space. */
song-phrase {
  position: relative;
}

.phrase-tools {
  position: absolute;
  top: -0.11in;
  right: 0.02in;
  z-index: 2;
  padding: 0.01in;
  border-radius: 0.03in;
  background: rgb(255 255 255 / 92%);
  box-shadow: 0 0 0.04in rgb(0 0 0 / 18%);
  opacity: 0;
  transition: opacity 90ms ease-in;
  pointer-events: none;
}

song-phrase:hover > .phrase-tools,
.phrase-tools:focus-within {
  opacity: 1;
  pointer-events: auto;
}

/* Section tools are always visible: they are the top-level structure and worth
   the space, unlike the per-phrase controls. */
.section-tools {
  margin-left: 0.08in;
}

.sheet-tools {
  justify-content: center;
  margin-top: var(--gap);
}

.sheet-tools .song-action {
  min-width: 1in;
  height: 0.26in;
  font-size: 9.5pt;
  font-weight: 600;
}

.song-editor {
  box-sizing: border-box;
  width: 100%;
  padding: 0.02in 0.03in;
  border: var(--hair) solid #5a7fd0;
  border-radius: 0.02in;
  background: #fff;
  color: var(--ink);
  font: inherit;
  resize: vertical;
}

/* A bar's editor is centered like the chord symbol it replaces. */
.song-editor[data-kind="bar"] {
  text-align: center;
}

.song-editor[data-kind="lines"] {
  font-family: var(--font-lyric);
}

@media print {
  song-controls {
    display: none;
  }
}

/* ---------- sections ---------- */

/* Spacing and pagination only — no border here. The gap is padding rather than
   margin because Chrome discards a top margin at the start of a printed page,
   which would put the frame's border on the clip edge. */
song-section {
  display: block;
  padding-top: var(--gap);
  break-inside: avoid;
}

/* The visible section box. */
song-frame {
  display: block;
  padding: 0.08in 0.1in 0.1in;
  border: var(--hair) solid var(--rule);
  border-radius: 0.1in;
  background: var(--paper);
}

song-section[data-type="intro"] { --tint: var(--tint-intro); }
song-section[data-type="verse"] { --tint: var(--tint-verse); }
song-section[data-type="prechorus"] { --tint: var(--tint-prechorus); }
song-section[data-type="chorus"] { --tint: var(--tint-chorus); }
song-section[data-type="bridge"] { --tint: var(--tint-bridge); }
song-section[data-type="interlude"] { --tint: var(--tint-interlude); }
song-section[data-type="solo"] { --tint: var(--tint-solo); }
song-section[data-type="breakdown"] { --tint: var(--tint-breakdown); }
song-section[data-type="vamp"] { --tint: var(--tint-vamp); }
song-section[data-type="outro"] { --tint: var(--tint-outro); }

song-head-row {
  display: flex;
  gap: 0.06in;
  align-items: baseline;
  margin-bottom: 0.06in;
}

/* Pushes the bar count — and the edit tools, when present — to the right edge,
   which stays correct however many of them there are. */
song-label {
  margin-right: auto;
}

song-label {
  display: block;
  font-size: 12pt;
  font-weight: 700;
  letter-spacing: 0.01em;
}

song-bar-count {
  color: var(--ink-soft);
  font-size: 8.5pt;
  letter-spacing: 0.04em;
}

/* ---------- phrases, bars, chords ---------- */

/* The colored horizontal bar representing the measures. Phrase boxes sit side
   by side in one line, each flex-grow'd by its bar count so a 4-bar phrase is
   twice the width of a 2-bar phrase. */
song-rows {
  display: flex;
  flex-direction: column;
  gap: 0.05in;
}

song-phrases {
  display: flex;
  gap: 0.05in;
  align-items: stretch;
}

song-phrase {
  display: flex;
  flex-direction: column;
  flex-basis: 0;
  break-inside: avoid; /* a phrase split across a page edge loses its borders */
  border: var(--hair) solid var(--ink-soft);
  border-radius: var(--radius);
  background: var(--paper);
}

/* The colored measure bar itself. Rounds its own corners to sit inside the
   phrase box: no overflow clipping, which is what was eating the phrase's
   top and bottom borders in print rasterization. */
song-bars {
  display: flex;
  align-items: stretch;
  border-radius: calc(var(--radius) - var(--hair)) calc(var(--radius) - var(--hair)) 0 0;
  background: var(--tint, var(--tint-other));
}

/* An instrumental phrase has no lyric box, so the tint rounds all four corners. */
song-bars:last-child {
  border-radius: calc(var(--radius) - var(--hair));
}

song-bar {
  display: flex;
  flex: 1 1 0;
  gap: 0.04in;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0.34in;
  padding: 0.02in 0.03in;
  border-left: var(--hair) solid var(--rule);
  font-size: 13pt;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

song-bar:first-child {
  border-left: 0;
}

/* 7 or 8 bars in a row leaves under an inch each, so step the type down rather
   than let long symbols like Bb7sus4 clip. */
song-phrases[data-density="snug"] song-bar { font-size: 11.5pt; }

/* Two or more chords in one bar: split the width and divide them with a slash
   rule so it stays clear they share the measure. */
song-bar[data-chords="2"] song-chord + song-chord,
song-bar[data-chords="3"] song-chord + song-chord,
song-bar[data-chords="4"] song-chord + song-chord {
  padding-left: 0.05in;
  border-left: var(--hair) dotted var(--ink-soft);
}

/* Continuation bar: the simile mark, sized off the bar's own type size. */
song-repeat {
  display: block;
  width: 0.85em;
  height: 0.85em;
  color: var(--ink-soft);
}

song-repeat svg {
  display: block;
  width: 100%;
  height: 100%;
}

song-chord {
  display: flex;
  align-items: baseline;
}

/* ---------- lyrics ---------- */

/* Grows to fit its lines; because every phrase in a row is a flex sibling with
   align-items: stretch, the tallest lyric box sets the height for the row and
   the bars above stay on one line. */
song-lyric {
  display: block;
  flex: 1 1 auto;
  padding: 0.045in 0.05in 0.05in;
  border-top: var(--hair) solid var(--rule);
  /* Larger than the 9.5pt sans it replaces: hand-lettered faces have a smaller
     x-height, so matching point sizes would read smaller than the notes. */
  font-family: var(--font-lyric);
  font-size: 11.5pt;
  line-height: 1.22;
}

song-line {
  display: block;
  overflow-wrap: break-word;
  hyphens: auto;
}

song-line + song-line {
  margin-top: 0.015in;
}

song-phrases[data-density="snug"] song-lyric {
  font-size: 10.5pt;
}

song-quality {
  font-size: 0.68em;
  font-weight: 600;
  translate: 0 -0.28em; /* raised like a jazz lead sheet; flex items ignore vertical-align */
}

song-bass {
  font-size: 0.85em;
  font-weight: 500;
}

song-note {
  display: block;
  margin-top: 0.04in;
  color: var(--ink-soft);
  font-size: 9.5pt;
  font-style: italic;
}

/* ---------- tail ---------- */

song-end-notes {
  display: block;
  margin-top: 0.16in;
  padding-top: 0.08in;
  break-inside: avoid; /* never strand one ending instruction on its own page */
  border-top: var(--hair) solid var(--rule);
  color: var(--ink-soft);
  font-size: 10pt;
}

song-end-notes p {
  margin: 0.04in 0 0;
}

/* On screen the footer sits in the flow at the end of the sheet. It only becomes
   position: fixed in print, where that is what repeats it on every page —
   viewport-fixed on screen would strand it over the dark page background. */
song-footer {
  display: block;
  margin-top: 0.16in;
  color: var(--ink-soft);
  font-size: 8.5pt;
  text-align: right;
}

song-footer::before {
  content: "updated ";
}

@media print {
  html { background: none; }

  song-sheet {
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    box-shadow: none;
  }

  /* Keep the tints and hairlines instead of letting the print path drop
     backgrounds. Still requires "Background graphics" checked in the dialog. */
  song-section,
  song-frame,
  song-phrase,
  song-bars,
  song-bar {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* Repeats on every printed page, sitting in the page's bottom margin so no
     line of content can ever overlap it. */
  song-footer {
    position: fixed;
    right: 0;
    bottom: -0.24in;
    margin-top: 0;
  }
}