/* 19.3 — THE SHEETS, ON SCREEN AND ON PAPER.

   One stylesheet, two media. On screen this page belongs to the app and is
   dark like the rest of it; on paper it is black on white, because a sheet
   that prints its own background is a sheet nobody prints twice.

   The whole light/dark switch is six custom properties. Everything below
   uses them and nothing below names a colour, which is also why chordbox.js
   emits classes rather than fills.                                       */

:root {
  --paper: #15111c;
  --ink:   #ece8f4;
  --dim:   #9d95b4;
  --rule:  #3a3346;
  --line:  #6d6483;
  --dot:   #c9b8f2;
  --dot-ink: #1a1420;
  --accent: #b79cf5;
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* `hidden` is a presentation hint and loses to any `display` rule that names
   an element -- and every control below is a flex box. Without this, hiding
   the song select on the shapes sheet does nothing at all. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        system-ui, sans-serif;
}

/* ------------------------------------------------------------- CONTROLS */

.bar {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 10px 18px 12px;
  background: color-mix(in srgb, var(--paper) 88%, black);
  border-bottom: 1px solid var(--rule);
}
/* Two rows: WHAT to print on the first, HOW on the second. They are
   different questions and one long wrapping line made every control look
   equally important. */
.bar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
}
.bar-row.second {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}
.bar-row.second .f select { min-width: 96px; }

/* How many sheets of paper this is. The one thing a preview is for, and the
   browser's own is three clicks away. */
.fit {
  margin-left: auto;
  align-self: flex-end;
  font-size: 12px;
  color: var(--dim);
  padding-bottom: 7px;
}
.fit.over { color: #e0a35c; }

.back {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  margin-right: 6px;
}
.back img { display: block; border-radius: 7px; }

.f { display: flex; flex-direction: column; gap: 3px; }
.f > span { font-size: 11px; letter-spacing: .04em; color: var(--dim);
            text-transform: uppercase; }
.f select {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 7px;
  padding: 6px 8px;
  font: inherit;
  min-width: 150px;
}
.f.chk { flex-direction: row; align-items: center; gap: 6px; }
.f.chk > span { text-transform: none; font-size: 13px; color: var(--ink);
                letter-spacing: 0; }

.go {
  margin-left: auto;
  background: var(--accent);
  color: #17111f;
  border: 0;
  border-radius: 8px;
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.go:hover { filter: brightness(1.08); }

/* ---------------------------------------------------------------- SHEET */

.sheet {
  /* A4 minus the margins the @page rule sets, so what is on screen is the
     width that will actually be printed and a row that fits here fits
     there. */
  /* The chosen paper minus its margins, so what is on screen is the width
     that will be printed and a row that fits here fits there. */
  max-width: var(--page-w, 186mm);
  margin: 0 auto;
  padding: 22px 12px 60px;
}

/* Flex, not a float. The form badge floated out past the header's own rule
   and printed with the border struck through it -- a contained float needs
   flow-root or overflow, and a two-item row wants neither. */
.sh-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 7px;
  margin-bottom: 12px;
}
.sh-main { flex: 1 1 auto; min-width: 0; }
.sh-head h1 { margin: 0; font-size: 23px; letter-spacing: -.01em; }
.sh-head .meta { display: flex; flex-wrap: wrap; gap: 6px 18px;
                 margin-top: 7px; font-size: 12.5px; color: var(--dim); }
.sh-head .meta b { color: var(--ink); font-weight: 600; }
.sh-head .note { margin: 8px 0 0; font-size: 12.5px; color: var(--dim);
                 max-width: 62ch; }

/* THE FORM, in the top right where a reader looks for it. It is the one
   fact about a tune you need before the first bar and cannot get from the
   chords, so it is not buried in the meta line with the tempo. */
.sh-form {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
}
.sh-form .lab { font-size: 10px; letter-spacing: .12em; color: var(--dim);
                text-transform: uppercase; }
/* Spelled out rather than the `font` shorthand: `font: 700 26px/1.05 inherit`
   is not valid -- `inherit` is not a font-family the shorthand accepts -- so
   the whole declaration was dropped and the form printed at body size. */
.sh-form .val { font-size: 27px; font-weight: 700; line-height: 1.05;
                letter-spacing: .06em; }
.sh-form .nbars { font-size: 11.5px; color: var(--dim); }

h2.blk {
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 15px 0 6px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 4px;
}
h2.blk b { color: var(--accent); font-size: 15px; letter-spacing: .04em; }

/* ------------------------------------------------------------ BAR GRID */

.bars {
  display: grid;
  /* 19.24 - set by print.js from the Bars a row select. Four is the default
     in the shorthand as well as in the control, so a sheet drawn before the
     property is set still comes out right. */
  grid-template-columns: repeat(var(--bars-row, 4), 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  break-inside: avoid;
}
.bar-cell {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  /* 19.5 - four millimetres a row. A 32-bar tune is eight rows of these
     plus four headings, and trimming both is what takes Dream a Little
     Dream from 284mm to inside an A4 page. */
  min-height: 40px;
  padding: 4px 8px 5px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.bar-cell .n { font-size: 16px; font-weight: 600; white-space: nowrap; }
/* A chord still sounding from the bar before. Printing the name again would
   read as a change; the mark is what a lead sheet uses and means "same". */
.bar-cell .cont { color: var(--dim); font-size: 17px; font-weight: 400; }
.bar-cell .half { font-size: 13.5px; }
.bar-no { font-size: 9px; color: var(--dim); align-self: flex-start;
          min-width: 12px; }

/* 19.24 - EIGHT TO A ROW. Half the width means the chord name has to come
   down with it: an A4 text column is 186mm, so a cell goes from about 44mm
   to 22mm, and "Dbmaj7" at 16px does not fit in 22mm with a bar number
   beside it. Everything shrinks together -- type, padding, gap and the row
   height -- so the grid stays a grid rather than a set of cells with the
   names spilling out of them. */
.eight .bar-cell { min-height: 30px; padding: 3px 5px 4px; gap: 5px; }
.eight .bar-cell .n    { font-size: 13px; }
.eight .bar-cell .half { font-size: 10.5px; }
.eight .bar-cell .cont { font-size: 14px; }
.eight .bar-no { min-width: 10px; }

/* ------------------------------------------------------------- BOXES */

.boxes { display: flex; flex-wrap: wrap; gap: 8px 8px; margin: 8px 0 2px; }
.boxes.tight { gap: 8px 4px; }

.cb {
  margin: 0;
  width: 76px;
  text-align: center;
  break-inside: avoid;
}
.cb-title { font-size: 12px; font-weight: 600; margin-bottom: 2px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-sub { font-size: 9.5px; color: var(--dim); line-height: 1.25;
          margin-top: 1px; }
.cb-svg { width: 100%; height: auto; display: block; }

.cb-fret, .cb-string { stroke: var(--line); stroke-width: 1; }
.cb-nut  { fill: var(--ink); }
.cb-pos  { fill: var(--dim); font-size: 10px; text-anchor: end; }
.cb-x    { fill: var(--dim); font-size: 10px; text-anchor: middle; }
/* An open string: a ring above the nut, hollow, the way every chord chart
   has drawn one for a century. */
.cb-open { fill: none; stroke: var(--line); stroke-width: 1.2; }

/* 19.7 - the horizontal strip. Same classes as the box wherever the part is
   the same thing; only the two it alone has are new. */
.cb.hb    { width: 152px; }
.boxes.tight .cb.hb { width: 138px; }
.cb.hb.wide { width: 176px; }
.cb-strn  { fill: var(--dim); font-size: 8px; text-anchor: start; }
.cb-fnum  { fill: var(--dim); font-size: 8px; text-anchor: middle; }
.cb-dot  { fill: var(--dot); }
.cb-root { fill: var(--accent); }
.cb-deg  { fill: var(--dot-ink); font-size: 8.4px; font-weight: 700;
           text-anchor: middle; }
/* Three characters -- which in practice means bb7, the diminished seventh --
   is wider than the dot at full size. Shrinking only those keeps R, 3, 5, 7
   and every two-character note name as large as they were. */
.cb-deg.cb-long { font-size: 6.6px; }

/* --------------------------------------------------------- KEY ROWS */

/* Column-wise fill, so the keys read C F Bb Eb Ab Db down the left and
   Gb B E A D G down the right -- the circle of fourths in order. A plain
   two-column grid fills across, which would interleave them. */
.keys {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(6, auto);
  grid-template-columns: repeat(2, 1fr);
  gap: 0 20px;
}
@media screen and (max-width: 760px) {
  .keys { grid-auto-flow: row; grid-template-columns: 1fr;
          grid-template-rows: none; }
}

.boxes.tight .cb { width: 68px; }
/* A position map: same grid, two and a half times the dots. Nothing but
   size helps. */
.cb.wide { width: 98px; }

.krow {
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--rule);
  break-inside: avoid;
}
.krow .kname { font-size: 17px; font-weight: 700; }

.empty { color: var(--dim); font-style: italic; padding: 30px 0; }
/* 19.33 - the twelve position maps of one chord type: three to a row on A4
   at the wide strip width, a key with nothing in the window drawn as its
   name and a line rather than an empty neck. */
.boxes.positions { gap: 6px 8px; }
.cb.none { display: flex; flex-direction: column; justify-content: center;
           min-height: 48px; border: 1px dashed var(--line); border-radius: 4px;
           padding: 6px 8px; box-sizing: border-box; }

/* ---------------------------------------------------------------- PRINT */

@page { size: A4 portrait; margin: 12mm; }

@media print {
  :root {
    --paper: #fff;
    --ink:   #000;
    --dim:   #555;
    --rule:  #bbb;
    --line:  #444;
    --dot:   #000;
    --dot-ink: #fff;
    --accent: #000;
    color-scheme: light;
  }
  .bar { display: none; }
  .sheet { max-width: none; margin: 0; padding: 0; }
  /* Colour mode survives the trip to paper on its own: chordbox writes the
     fill as an inline STYLE, which outranks these rules, while an SVG
     presentation attribute would have lost to them. Mono mode writes
     neither and falls through to the black above. */
  /* A section and its grid stay together, and a chord box is never split
     down the middle by a page break. */
  h2.blk { break-after: avoid; }
  .cb, .krow, .bars, .boxes { break-inside: avoid; }
  a[href]::after { content: none; }
}