/* Notelings printables: shared styles. Design settings live in :root, so a color or font change is a one-line edit. */
:root{
  --ink:#132042;      /* text and staff lines */
  --muted:#56647F;    /* secondary text */
  --line:#C9D2E6;     /* thin rules */
  --soft:#EEF2FB;     /* light panels */
  --accent:#2B59E8;   /* Notelings blue */
  --gold:#F0B429;     /* Notelings gold */
  --sharp:rgba(43,89,232,.2);
  --flat:rgba(249,115,22,.26);
  --head-font:"Bricolage Grotesque",Figtree,system-ui,sans-serif;
  --body-font:Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;
  --z:1;
}
*{box-sizing:border-box}
html{-webkit-print-color-adjust:exact;print-color-adjust:exact}
body{margin:0;background:#E3E9F4;color:var(--ink);font:400 14px/1.45 var(--body-font)}

/* ---- screen only: a toolbar and the sheet(s) of paper ---- */
.toolbar{max-width:8.5in;margin:14px auto;padding:0 14px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.toolbar.wide{max-width:11in}
.toolbar a.back{color:var(--ink);font-weight:700;text-decoration:none}
.toolbar .tip{color:var(--muted);font-size:.9rem;flex:1;min-width:200px}
.printbtn{appearance:none;border:2px solid var(--accent);background:var(--accent);color:#fff;font:700 1rem var(--body-font);padding:10px 22px;border-radius:12px;cursor:pointer}
.printbtn:focus-visible,.toolbar a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

.page{width:8.5in;height:11in;margin:0 auto 22px;background:#fff;padding:.5in;position:relative;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 6px 24px rgba(19,32,66,.18);zoom:var(--z)}
.page.land{width:11in;height:8.5in}

/* ---- sheet furniture ---- */
.phead{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:3px solid var(--ink);padding-bottom:8px;margin-bottom:12px}
.brand{font:800 1.15rem var(--head-font);letter-spacing:-.02em;line-height:1}
.brand b{color:var(--accent);font-weight:800}
.brand small{display:block;font:600 .62rem var(--body-font);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.phead h1{font:800 1.9rem var(--head-font);letter-spacing:-.02em;line-height:1;margin:0;text-align:right}
.phead h1 span{display:block;font:600 .8rem var(--body-font);color:var(--muted);letter-spacing:0;margin-top:5px}
.pfoot{margin-top:auto;padding-top:8px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:.72rem;color:var(--muted)}
.pfoot b{color:var(--ink)}
.tagpro{display:inline-block;background:var(--gold);color:#3A2A00;font:700 .62rem var(--body-font);padding:1px 8px;border-radius:999px;letter-spacing:.04em;text-transform:uppercase;margin-right:6px;vertical-align:1px}

h2.sec{font:800 1.02rem var(--head-font);letter-spacing:-.01em;margin:0 0 3px}
.note{font-size:.78rem;color:var(--muted);line-height:1.4;margin:0}
.note b{color:var(--ink)}
.panel{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:8px 12px}

/* ---- staff and chart drawing ---- */
.staff{color:var(--ink);display:block}
.staff .sl{stroke:currentColor;stroke-width:1.3}
.chartsvg{width:100%;height:auto}
.chartsvg .cl{font:800 15px var(--head-font);fill:var(--ink);text-anchor:middle}
.chartsvg .mc{fill:var(--accent);color:var(--accent)}
.chartsvg .mct{font:700 9px var(--body-font);fill:var(--accent);text-anchor:middle}
.fifths{display:block;width:100%;height:auto}
.fifths text{fill:var(--ink);text-anchor:middle;font-family:var(--head-font);font-weight:800}
.fifths .sub{font-family:var(--body-font);font-weight:600;fill:var(--muted)}
.f-sharp{fill:var(--sharp)}.f-flat{fill:var(--flat)}.f-c{fill:#E6ECF8}
.f-min{fill:#fff;stroke:var(--line);stroke-width:1.5}
.legend-row{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;font-size:.8rem;color:var(--muted)}
.lg{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:-2px}
.lg.sharp{background:rgba(43,89,232,.45)}.lg.flat{background:rgba(249,115,22,.55)}.lg.minor{background:#fff;border:1.5px solid var(--line)}

/* ---- gate for Premium pages ---- */
#gate{max-width:560px;margin:60px auto;padding:28px;background:#fff;border:1px solid var(--line);border-radius:18px;text-align:center}
#gate h1{font:800 1.6rem var(--head-font);margin:0 0 8px}
#gate p{color:var(--muted);margin:0 0 18px}
#gate a{display:inline-block;margin:4px 6px;font-weight:700}
body.locked .page,body.locked .toolbar{display:none}

/* ---- printing: sheet-sized, no chrome ---- */
@media print{
  body{background:#fff}
  .toolbar,#gate{display:none!important}
  .page{margin:0;box-shadow:none;zoom:1;break-after:page;page-break-after:always;height:calc(11in - 2px)}
  .page.land{height:calc(8.5in - 2px)}
  .page:last-of-type{break-after:auto;page-break-after:auto}
}
@page{size:letter portrait;margin:0}

/* ---- page-specific layouts ---- */
.mt{margin-top:8px}
.cbox{min-width:0}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px 22px}
.pgrid .note{font-size:.66rem;line-height:1.3}
.pstrip{display:grid;grid-template-columns:1.15fr 1fr;gap:22px;margin-top:6px;align-items:end}
.pstrip svg.kbd{width:100%;max-height:1.15in}
.pstrip .accsvg{width:100%;max-height:1in}
.circlebox{max-width:6.2in;margin:0 auto}
.keygrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.kcell{border:1px solid var(--line);border-radius:8px;padding:5px 7px;display:flex;flex-direction:column;gap:2px;min-width:0}
.kcell svg{width:100%;height:auto;max-height:.8in}
.kname{display:flex;flex-direction:column;line-height:1.2}
.kname b{font:800 .88rem var(--head-font)}
.kname span{font-size:.62rem;color:var(--muted)}
.kinfo{background:var(--soft);justify-content:center}
.kinfo p{margin:3px 0 0;font-size:.7rem;color:var(--muted);line-height:1.35}
.midc{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.midc figure,.irow figure{margin:0}
figcaption{text-align:center;font-size:.7rem;color:var(--muted);font-weight:600}
.irows{display:flex;flex-direction:column;gap:6px}
.irow{display:grid;grid-template-columns:1.25in repeat(3,1fr);gap:8px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:4px}
.ilab{display:flex;flex-direction:column;line-height:1.2}
.ilab b{font:800 1.25rem var(--head-font);color:var(--accent)}
.ilab .in{font-weight:700;font-size:.82rem}
.ilab .isub,.ilab .ihs{font-size:.7rem;color:var(--muted)}
.ilab .ihs{font-weight:700;color:var(--ink);margin-top:2px}
.exsvg{width:100%;height:auto;max-height:.98in}
.circlebox{width:100%;max-width:6.6in}
.page>.cbox{margin-bottom:16px}
.page>.cbox .note{margin-top:4px}

/* ---- note names poster (landscape) ---- */
.chartsvg .gl{font:700 11px var(--body-font);fill:var(--muted);text-anchor:middle;letter-spacing:.12em}
.chartsvg .wd{font:600 12px var(--body-font);fill:var(--ink);text-anchor:middle}
.pgrid .cbox>div+div{margin-top:4px}
.pstrip3{display:grid;grid-template-columns:1.55fr 1fr 1fr;gap:20px;margin-top:8px;align-items:end}
.pstrip3 .midc{gap:6px}
.pstrip3 .midc svg{max-height:1in}
.pstrip3 svg.kbd{width:100%;max-height:1in}
.pstrip3 .accsvg{width:100%;max-height:.95in}
.chartsvg.mn .wd{font-size:14px}
.chartsvg.mn .cl{font-size:19px}
.chartsvg.mn .gl{font-size:12px}
.pgrid{gap:14px 26px}
.pgrid .cbox>div+div{margin-top:10px}
.pstrip3{margin-top:14px}
.pstrip3 .midc svg{max-height:1.25in}
.pstrip3 svg.kbd{max-height:1.25in}
.pstrip3 .accsvg{max-height:1.2in}
.pgrid{gap:22px 26px}
.pstrip3{margin-top:auto;margin-bottom:12px}

/* ---- note names poster (portrait, two sheets) ---- */
.np{margin-bottom:18px}
.np .wmn{max-width:6.7in;margin:0 auto}
.np .wls{max-width:5.9in;margin:6px auto 0}
.np .wmn+.wls{margin-top:12px}
.page>.np .note{margin-top:4px}
.pstrip2{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:end}
.pstrip2 svg.kbd{width:100%;max-height:1.35in}
.pstrip2 .accsvg{width:100%;max-height:1.3in}
.np .midc svg{max-height:1.25in}