/* =====================================================================
   nielsdalgaard.com — /assets/print.css

   Paper. The site is designed for a dark screen; a sheet of paper is
   the opposite of that, so printing it raw produced a black page and a
   dead cartridge.

   The whole palette is CSS custom properties, and every chord box and
   fretboard is drawn with classes that resolve against them — no colour
   is hard-coded in the SVG generators. So turning the site into ink is
   one block of variable overrides rather than a second design.

   Two levels, deliberately:

     1. A baseline that applies to ANY page on Ctrl+P. White ground,
        dark ink, navigation and controls dropped. Nobody gets a black
        page again, whether or not they used the button.

     2. The document built by print.js when the reader clicks Print.
        That one has a masthead, the query it came from, and the books
        at the end. body.nd-printing switches to it.

   html:root rather than :root in the palette block: the per-tool
   stylesheets (voicings.css, scales.css) also define variables on
   :root and load after this file, so equal specificity would let them
   win. html:root outranks them and keeps this file order-independent.
   ===================================================================== */

/* ------------------------------------------------------- on screen */

/* The printed document is assembled into the live DOM, so it has to be
   invisible until the print dialog opens. */
#nd-print{display:none}

/* Above and below the results. Solid, not ghost: this is the one thing
   on the page a reader is being invited to press. */
.nd-print-row{margin-top:26px;display:flex;justify-content:flex-end}
.nd-print-row[hidden]{display:none}
.nd-print-top{margin:22px 0 14px}

@media print{

/* ------------------------------------------------- 1 · the palette */

html:root{
  /* grounds */
  --bg:#ffffff; --bg2:#ffffff; --panel:#ffffff; --panel2:#f7f6f3;
  /* ink */
  --cream:#14130f; --muted:#494640; --muted2:#6b675f;
  --line:rgba(0,0,0,.16); --line-strong:rgba(0,0,0,.30);
  --pewter:#55514a;

  /* Harmonic function keeps its identity, darkened until it holds up
     against white and still survives a greyscale printer. */
  --f-tonic:#26694a; --f-pre:#345480; --f-dom:#a05704;
  --f-modal:#775310; --f-chrom:#5a4090; --f-other:#4f4c46;
  --ok:#26694a; --mid:#775310; --low:#4f4c46;

  /* fretboards: the dot was paper-coloured on a dark neck, so the two
     swap roles */
  --gut:#8a867c;
  --dot:#14130f; --dotroot:#26694a;
  --sc-tone:#14130f; --sc-root:#26694a; --sc-tension:#345480;
  --ap-tone:#14130f; --ap-root:#26694a; --ap-tension:#345480;
  --tp-a:#1d5c40; --tp-b:#7a5410; --tp-ink:#ffffff;
}

/* Not everything dark went through a variable. The cards are painted
   with linear-gradient(var(--panel), #111113) — the first stop turns
   white with the palette, the second does not — and a few grounds are
   literal hex. Both have to be named here.

   Killing background images wholesale rather than listing the cards
   one by one: a gradient is screen decoration that prints as grey mud,
   there is no case where one earns its toner, and doing it broadly
   also covers any card added later. With the image gone the elements
   fall back to a transparent ground, which is the white page. */
html:root *{background-image:none !important}

/* What is left is background-COLOR written as a literal dark value,
   which no fallback rescues. */
html:root .neckwrap,
html:root .chip.on,
html:root .cta,
html:root th{background-color:#ffffff !important}

/* Ink that was chosen to sit on a dark ground, and now sits on a light
   one — or the reverse. The note dots keep their dark fill so they
   read at a glance, so their labels have to flip. */
html:root .chordbox .fin{fill:#ffffff}       /* finger number, inside the dot */
html:root .nlab.root,html:root .nlab.aroot,html:root .nlab.tone,
html:root .nlab.ta,html:root .nlab.tb{fill:#ffffff}
html:root .ndot.tension{fill:#ffffff}        /* the hollow note */

/* --------------------------------------------------- 2 · the page */

@page{margin:16mm 14mm 18mm}

html,body{background:#ffffff !important;color:var(--cream) !important}
body{font-size:10.2pt;line-height:1.48;overflow:visible}

/* Chrome drops backgrounds and fills by default; the diagrams are the
   whole point of these pages, so they have to survive. */
*{-webkit-print-color-adjust:exact;print-color-adjust:exact}

a{color:inherit;text-decoration:none}
.wrap{max-width:none;padding:0}

/* Body copy on the hand-written pages is set in light greys picked for
   a dark ground — #d6d2ca, #d8d2c6, #ded9cf and four more — spread over
   a dozen selectors. On white they are barely there. Rather than chase
   each one, the block-level text elements are given the ink colour;
   a span inside them that sets its own colour still wins for itself,
   so the harmonic function colours survive this untouched. */
p,li,dd,.desc,.set-note{color:var(--muted) !important}

/* ------------------------------------- 3 · furniture, on any page */

.nav,footer,.lang-toggle,.backlink,.nav-right,
.vcontrols,.sccontrols,.console,.examples,.chips,
.btn,.chip,.nd-print-row,noscript,
#vchord,#vprog,#scchord,#scprogin,#sccontext,#prog,
/* Text that tells the reader to click something. */
.hint,.striphint{display:none !important}

/* Decorative gradient behind the tool header — invisible on paper,
   expensive in toner. */
.tool::before{display:none !important}
.tool{padding:0;overflow:visible}

/* Paper does not scroll sideways. Every horizontal scroller has to
   resolve into something that fits the sheet instead, or its overflow
   is simply lost: the neck scales down, the row of position boxes
   wraps onto a second line, and a wide table gives up its fixed
   widths. */
.neckwrap,.boxrow,.shaperow,.table-wrap{overflow:visible !important}
.neckwrap{margin-top:10px}
.neck{width:100% !important;height:auto !important;max-width:100%}
.boxrow,.shaperow{flex-wrap:wrap;padding-bottom:0}
.table-wrap table{width:100%}
.chordbox,.posbox,.shapebox{height:auto}

/* The progression chain, on paper.

   Chrome evaluates width media queries against the PAGE BOX when it
   prints, and A4 at these margins is 688px wide — under the 760px
   breakpoint. So the sheet was quietly getting the phone layout:
   .chain and .clink stacked into columns, one chord per full-width row
   with a diagram on the left and two thirds of the line empty, and a
   three-chord ii-V-I ran to nearly five pages.

   Paper is not a narrow screen. It is a fixed 688px, and five chord
   boxes fit across it, so the chain goes back to a row and wraps only
   when it genuinely has to.

   html:root, not .chain: voicings.css loads after this file and its
   breakpoint block has the same specificity, so at equal weight the
   later file would win. The extra element selector settles it without
   an !important. */
html:root .chain{flex-direction:row;flex-wrap:wrap;align-items:flex-start;
  gap:5px;margin:6px 0 14px}
html:root .chain .clink{flex-direction:row;align-items:flex-start;gap:5px}
html:root .chain .cvoicing{min-width:0;padding:8px 9px 7px;border:1px solid var(--line);
  border-radius:6px}
/* .chain-qualified throughout: .carrow, .cnotes and the rest are also the
   scale and arpeggio tools' progression rows, and this is the voicing
   chain's layout, not theirs. It is also what outranks voicings.css,
   which loads after this file. */
html:root .chain .carrow{flex-direction:column;align-self:center;min-width:32px;padding:0}
html:root .chain .carrow span:first-child{font-size:15px}
/* Bigger than the 104px the voicing cards use, and qualified past that
   rule rather than fighting it on source order: three chords across is
   what 688px allows once the arrow between them is counted, so a ii-V-I
   is one row and a six-bar blues is two even rows of three. The extra
   width all goes into the diagram. */
.ndp-body .chain .chordbox{width:112px;height:154px}
.chain .cname{font-size:11.5pt;margin-top:3px}
.chain .cfrets,.chain .civ,.chain .cnotes{font-size:7.6pt;letter-spacing:1.1px}
.chain .cmotion{font-size:6.6pt;letter-spacing:.9px}

/* The same breakpoint catches the scale and arpeggio progression rows,
   which are .chainrow rather than .chain: on paper each step was taking
   a full 688px line to hold a chord name and four short lines of text.
   Three or four steps sit across the sheet comfortably. */
html:root .chainrow{flex-direction:row;flex-wrap:wrap;align-items:stretch}
html:root .chainrow .carrow{transform:none;min-height:0}
.ndp-body .cstep{padding:10px 12px;min-width:150px}
.ndp-body .cstep .cchord{font-size:12pt}
.ndp-body .cstep .calt{font-size:7.6pt;margin-top:6px}

/* -------------------------------------- 4 · the built document */

body.nd-printing>*{display:none !important}
body.nd-printing>#nd-print{display:block !important}

#nd-print{color:var(--cream);font-family:'Inter',system-ui,sans-serif}

/* masthead */
.ndp-head{border-bottom:2px solid var(--cream);padding-bottom:12px;margin-bottom:20px}
.ndp-kicker{font-family:'Oswald',sans-serif;font-size:9.5pt;letter-spacing:3px;
  text-transform:uppercase;color:var(--muted2)}
.ndp-title{font-family:'Oswald',sans-serif;font-weight:600;font-size:20pt;
  letter-spacing:.4px;text-transform:uppercase;margin:6px 0 2px;line-height:1.15}
.ndp-query{font-family:'Oswald',sans-serif;font-size:12pt;letter-spacing:1px;
  color:var(--f-tonic);margin-top:6px}
.ndp-meta{font-size:8.5pt;color:var(--muted2);margin-top:8px;letter-spacing:.3px}

/* the results, cloned out of the live page */
.ndp-body{margin-bottom:26px}
.ndp-sec+.ndp-sec{margin-top:22px}
.ndp-sec-h{font-family:'Oswald',sans-serif;font-size:11pt;letter-spacing:2px;
  text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);
  padding-bottom:5px;margin-bottom:14px}

/* Nothing that carries a diagram may be split across a page break —
   a chord box cut in half is worse than a page that ends early. */
.ndp-body .vcard,.ndp-body .scard,.ndp-body .acard,.ndp-body .neckwrap,
.ndp-body .posbox,.ndp-body .chordbox,.ndp-body .shapebox,
.ndp-body .shapefig,.ndp-body .shaperow,.ndp-body .tpcard,.ndp-body .card,
.ndp-body .vlink,.ndp-body .bar{break-inside:avoid;page-break-inside:avoid}

.ndp-body h2,.ndp-body h3,.ndp-body h4{break-after:avoid;page-break-after:avoid}

/* Two up on paper, but not the screen's two-column card: at 688px of
   printable A4 that leaves the prose in a 120px gutter and stretches
   each card down the page. The diagram floats instead, so the text
   starts beside it and then runs the full width of the card. Roughly
   twice as many voicings per sheet, and a readable measure. */
.ndp-body .vgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px}
.ndp-body .vcard{display:block;border:1px solid var(--line);border-radius:6px;
  padding:10px 12px;background:#fff}
.ndp-body .vcard::after{content:"";display:block;clear:both}
.ndp-body .vdiagram{float:left;margin:2px 10px 2px 0}
.ndp-body .chordbox{width:104px;height:143px}
.ndp-body .vcard h3{font-size:12pt;margin-bottom:4px}
.ndp-body .vwhy{font-size:8.4pt;line-height:1.4;color:var(--muted);margin-top:5px}
.ndp-body .vmeta{font-size:8.6pt}
.ndp-body .vtags{margin:3px 0}
.ndp-body .vtag{border:1px solid var(--line-strong);color:var(--muted);
  background:#fff;font-size:7.6pt}

.ndp-body .scard{border:1px solid var(--line);border-left-width:3px;
  border-radius:6px;padding:12px 14px;background:#fff;margin-bottom:12px}

/* One string set — heading, chain, what moved, total — is a unit worth
   about a third of a page, so it is kept whole and two of them share a
   sheet. The findings under a chain are one short sentence each and do
   not need the full measure; two columns puts the whole group in the
   space the chain already occupies. */
.ndp-body .pstringlead{margin-bottom:12px}
.ndp-body .pstring{break-inside:avoid;page-break-inside:avoid;
  border-top:1px solid var(--line);padding-top:12px;margin-top:14px}
.ndp-body .pstring:first-of-type{border-top:0;padding-top:0;margin-top:0}
.ndp-body .pstring .blk h3{font-size:10pt;letter-spacing:2px;margin-bottom:6px}
.ndp-body .pstring .blk h4{font-size:7.4pt;letter-spacing:1.8px;margin:0 0 5px}
.ndp-body .pstring .findings{display:grid;grid-template-columns:1fr 1fr;
  gap:8px 14px;margin-bottom:8px}
.ndp-body .pstring .find{padding:8px 10px}
.ndp-body .pstring .find .ttl{font-size:9pt}
.ndp-body .pstring .find p{font-size:8.2pt;line-height:1.38;margin-top:4px}
.ndp-body .pstring>.hint{font-size:8.2pt;margin-top:0}

/* Arpeggio cards. One per row rather than the screen's two-column grid:
   each one carries a fifteen-fret neck and three shape boxes, and at
   half of 688px the neck shrinks to the point where the degree in each
   dot stops being legible. Full width, one card after another, and
   nothing crosses a page break. */
.ndp-body .agrid{display:block}
.ndp-body .acard{border:1px solid var(--line);border-left-width:3px;
  border-radius:6px;padding:12px 14px;background:#fff;margin-bottom:14px}
.ndp-body .acard h3{font-size:13pt;margin-bottom:2px}
.ndp-body .awhy{font-size:8.6pt;line-height:1.42;margin-bottom:8px}
.ndp-body .ameta{font-size:8.8pt}
/* The button that opens the shapes on screen has nothing to open on
   paper — everything is already drawn. */
.ndp-body .acard .btn{display:none}
.ndp-body .shaperow{display:flex;gap:14px;margin-top:2px}
.ndp-body .shapefig{flex:0 0 auto}
.ndp-body .shapebox{width:142px}
.ndp-body .shapefig figcaption{font-size:7pt;letter-spacing:.8px;max-width:142px;margin-top:2px}

/* A card carrying a full-width neck AND three shape boxes is taller than
   half a sheet however tightly it is set, so it gets a page of its own
   either way. Given that, the diagrams are drawn at a size that is
   comfortable to read off a music stand rather than squeezed to chase a
   second card that was never going to fit. The chrome around them is
   still trimmed — that is what keeps the neck from being pushed onto the
   following page. */
.ndp-body .acard{padding:10px 12px 11px;margin-bottom:12px}

/* Triad-pair cards, on the same terms as the arpeggio ones: one per row,
   full-width neck, three shapes, nothing crossing a page break. The
   panel that sells the pass is not content and does not print. */
.tplock{display:none !important}
.ndp-body .tpgrid{display:block}
.ndp-body .tpcard{border:1px solid var(--line);border-left-width:3px;border-radius:6px;
  background:#fff;padding:10px 12px 11px;margin-bottom:12px}
.ndp-body .tpcard h3{font-size:13pt;margin-bottom:2px}
.ndp-body .tpcard .tphead{margin-bottom:6px}
.ndp-body .tpcard .tpcat{font-size:6.8pt;padding:1px 7px;margin-bottom:3px}
.ndp-body .tpcard .tpgap{font-size:7.6pt;margin-top:2px}
.ndp-body .tpmeta{font-size:8.8pt;gap:1px 12px;margin-bottom:6px}
.ndp-body .tpwhy,.ndp-body .tpfeel{font-size:8.6pt;line-height:1.42;margin-bottom:5px}
.ndp-body .tpfeel{padding-left:9px}
.ndp-body .tpcard .btn{display:none}
.ndp-body .tpcard .blk{margin:0}
.ndp-body .tpcard .blk h4{font-size:7.4pt;letter-spacing:1.8px;margin:8px 0 3px}
.ndp-body .tpcard .neckwrap{margin-top:2px;padding:3px;border-radius:4px}
.ndp-body .tplegend{font-size:7pt;margin-top:4px}
.ndp-body .acard .ahead{margin-bottom:6px}
.ndp-body .acard .acat{font-size:6.8pt;padding:1px 7px;margin-bottom:3px}
.ndp-body .acard .afrom{font-size:7.6pt;margin-top:2px}
.ndp-body .ameta{gap:1px 12px;margin-bottom:6px}
.ndp-body .awhy{margin-bottom:4px}
.ndp-body .acard .blk{margin:0}
.ndp-body .acard .blk h4{font-size:7.4pt;letter-spacing:1.8px;margin:8px 0 3px}
.ndp-body .acard .neckwrap{margin-top:2px;padding:3px;border-radius:4px}

/* the books */
.ndp-books{border-top:2px solid var(--cream);padding-top:14px;margin-top:30px;
  break-inside:avoid;page-break-inside:avoid}
.ndp-books-h{font-family:'Oswald',sans-serif;font-size:10pt;letter-spacing:3px;
  text-transform:uppercase;color:var(--muted2);margin-bottom:12px}
.ndp-books-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px}
.ndp-book{display:grid;grid-template-columns:46px 1fr;gap:12px;align-items:start;
  break-inside:avoid;page-break-inside:avoid}
.ndp-book img{width:46px;height:auto;border:1px solid var(--line);display:block}
.ndp-book h4{font-family:'Oswald',sans-serif;font-weight:600;font-size:10.5pt;
  letter-spacing:.3px;text-transform:uppercase;line-height:1.2;margin-bottom:3px}
.ndp-book .ndp-bnum{font-family:'Oswald',sans-serif;font-size:7.4pt;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--muted2);margin-bottom:2px}
.ndp-book p{font-size:8.4pt;line-height:1.38;color:var(--muted)}

.ndp-books-foot{margin-top:14px;padding-top:10px;border-top:1px solid var(--line);
  font-family:'Oswald',sans-serif;font-size:9pt;letter-spacing:2px;
  text-transform:uppercase;color:var(--muted);text-align:center}

/* There is deliberately no running footer. position:fixed does repeat
   on every printed page, but the flow does not reserve room for it, so
   on any document longer than one sheet it lands on top of the last
   line. Without a paged-media engine there is no way to reserve that
   space, so the address lives in the masthead and again under the
   books instead — both of which are verifiable. */

/* ------------------------------------ 5 · the unmade bed */

/* A tool page printed with Ctrl+P instead of the button keeps the
   screen's dark ground, on purpose. The button builds a document meant
   for paper; this is the page, as it is, on paper — and the gap between
   the two is the point.

   Scoped to .nd-tool, which print.js sets only where a print button
   exists. The landing page and the six book pages are not part of this
   and stay readable: someone printing a book page is not the behaviour
   being discouraged.

   print-color-adjust is what makes it real. Chrome leaves "Background
   graphics" off by default, and without forcing it the result would be
   light grey text on white paper — not ugly, just blank, which reads as
   a broken site rather than a deliberate one. */
html.nd-tool body:not(.nd-printing){
  --bg:#0b0b0c; --bg2:#101012; --panel:#151517; --panel2:#1b1b1e;
  --cream:#f1eee8; --muted:#a3a099; --muted2:#76736d;
  --line:rgba(241,238,232,.10); --line-strong:rgba(241,238,232,.20);
  --pewter:#b9b4aa;
  --f-tonic:#6FB78F; --f-pre:#8fa9ce; --f-dom:#e6831f;
  --f-modal:#c9942f; --f-chrom:#a98bd6; --f-other:#8d8a83;
  --ok:#6FB78F; --mid:#c9942f; --low:#8d8a83;
  --gut:#c9c3b6; --dot:#f1eee8; --dotroot:#6FB78F;
  --sc-tone:#f1eee8; --sc-root:#6FB78F; --sc-tension:#8fa9ce;

  background:#0b0b0c !important;
  color:#f1eee8 !important;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}

/* Put back what the readable baseline took away. The gradients and the
   literal dark grounds come back too, so the page prints as it looks. */
html.nd-tool body:not(.nd-printing) *{background-image:revert !important}
html.nd-tool body:not(.nd-printing) .chordbox .fin{fill:#111}
html.nd-tool body:not(.nd-printing) .nlab.root,
html.nd-tool body:not(.nd-printing) .nlab.tone{fill:#111}
html.nd-tool body:not(.nd-printing) .ndot.tension{fill:#0a0a0b}
html.nd-tool body:not(.nd-printing) .neckwrap,
html.nd-tool body:not(.nd-printing) .chip.on,
html.nd-tool body:not(.nd-printing) .cta,
html.nd-tool body:not(.nd-printing) th{background-color:revert !important}
html.nd-tool body:not(.nd-printing) p,
html.nd-tool body:not(.nd-printing) li,
html.nd-tool body:not(.nd-printing) dd,
html.nd-tool body:not(.nd-printing) .desc,
html.nd-tool body:not(.nd-printing) .set-note{color:revert !important}

/* the furniture returns as well — this is the whole page, not an
   extract of it */
html.nd-tool body:not(.nd-printing) .nav,
html.nd-tool body:not(.nd-printing) footer,
html.nd-tool body:not(.nd-printing) .console,
html.nd-tool body:not(.nd-printing) .examples,
html.nd-tool body:not(.nd-printing) .chips,
html.nd-tool body:not(.nd-printing) .vcontrols,
html.nd-tool body:not(.nd-printing) .sccontrols,
html.nd-tool body:not(.nd-printing) .btn,
html.nd-tool body:not(.nd-printing) .chip,
html.nd-tool body:not(.nd-printing) .hint,
html.nd-tool body:not(.nd-printing) .striphint{display:revert !important}

/* The print row itself never prints — offering a button on paper is
   the one thing that would just look like a mistake. */
html.nd-tool body:not(.nd-printing) .nd-print-row{display:none !important}

}