.phrase-reader{box-sizing:border-box;height:100dvh;min-height:480px;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;background:var(--bg,#e9edf4);color:var(--ink,#24334a);font:16px/1.4 var(--sans,system-ui,sans-serif);padding:0 24px 16px;outline-offset:-3px}
.phrase-reader *{box-sizing:border-box}.phrase-reader:focus-visible{outline:3px solid var(--accent,#4e62b5)}
.reader-header{display:flex;align-items:center;gap:20px;max-width:1120px;width:100%;margin:0 auto;padding:20px 0 16px;border-bottom:1px solid var(--border,#cbd5e4)}
.reader-heading{flex:1;min-width:0}.reader-heading h1{font:600 clamp(20px,3vw,30px)/1.2 var(--sans,system-ui,sans-serif);margin:3px 0;overflow-wrap:anywhere}
.reader-eyebrow{font-size:10px;letter-spacing:.12em;color:var(--muted,#586982)}
.phrase-reader button,.phrase-reader select{min-height:48px;border:1px solid var(--border,#cbd5e4);border-radius:8px;background:var(--panel,#fbfcff);color:var(--ink,#24334a);padding:11px 16px;font:600 14px var(--sans,system-ui,sans-serif);touch-action:manipulation;white-space:nowrap}
.phrase-reader button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.phrase-reader button:hover:not(:disabled){background:var(--hover,#dce5f5)}
.phrase-reader button:disabled{opacity:.4;cursor:default}.phrase-reader button:focus-visible,.phrase-reader select:focus-visible{outline:3px solid var(--accent,#4e62b5);outline-offset:3px}
.reader-toolbar{display:flex;gap:20px;align-items:end;flex-wrap:wrap;max-width:1120px;width:100%;margin:16px auto}
.reader-field{display:flex;flex-direction:column;gap:5px;min-width:120px;max-width:100%;font-size:12px;color:var(--muted,#586982)}.reader-field:first-child{flex:1}.reader-field select{width:100%;min-width:0;font-weight:400}
.reader-page{max-width:1120px;width:100%;min-height:0;margin:0 auto;background:#faf7ef;color:#292b2a;border:1px solid #c9c8bd;border-radius:5px;padding:8px 16px;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;touch-action:pan-x pan-y pinch-zoom}
.phrase-reader .phrase-score{max-width:none;padding:16px 0;background:#faf7ef}.phrase-reader .phrase-score>h1,.phrase-reader .phrase-score .score-intro,.phrase-reader .phrase-score .score-legend,.phrase-reader .phrase-score .score-footer{display:none}
/* A guitar/bass staff names its octave convention (written an octave above sounding) in one quiet line. */
.phrase-reader:has(.reader-field select:not(:disabled) option:is([value=staff],[value=both]):checked) .phrase-score>p.score-octave{display:block;margin:0 0 8px;font:12px/1.5 var(--sans,system-ui,sans-serif);color:#50564f}
.phrase-reader .phrase-score .score-system{margin:0 0 18px}.phrase-reader .phrase-score .score-system:last-of-type{margin-bottom:0}.phrase-reader .phrase-score h3{font-size:12px;color:#50564f;margin-top:12px}.phrase-reader .phrase-score .score-system:first-of-type>.score-part:first-of-type>h3{margin-top:0}
.reader-rhythm-note{margin:0 0 10px;font:13px/1.5 var(--sans,system-ui,sans-serif);color:#50564f}.phrase-reader .reader-rhythm-toggle{min-height:44px;padding:10px 0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;white-space:normal}.reader-rhythm-toggle::before{content:'▸';margin-right:8px}.reader-rhythm-toggle[aria-expanded=true]::before{content:'▾'}.reader-rhythm-toggle:focus-visible{outline:2px solid #4e62b5;outline-offset:2px}.phrase-reader .reader-rhythm-note .score-warning{max-height:240px;overflow:auto;overflow-wrap:anywhere;margin-bottom:12px}
.phrase-reader .phrase-score svg{min-width:620px}.phrase-reader .phrase-score .score-fret{font-size:19px}.phrase-reader .phrase-score .score-small{font-size:12px}
.reader-navigation{position:relative;z-index:2;max-width:1120px;width:100%;margin:0 auto;display:grid;grid-template-columns:auto 1fr auto 1fr;gap:12px;align-items:center;background:var(--bg,#e9edf4);padding:12px 0;border-top:1px solid var(--border,#cbd5e4)}
.phrase-reader .reader-turn{min-height:58px;font-size:17px}.reader-range{font:600 15px/1.4 var(--sans,system-ui,sans-serif);text-align:center;white-space:nowrap;margin:0 5px;font-variant-numeric:tabular-nums}
.reader-hint{margin:0 auto;max-width:1120px;text-align:center;font-size:12px;color:var(--muted,#586982)}
@media(max-width:650px){.phrase-reader{padding:0 12px 12px}.reader-header{flex-wrap:wrap;gap:10px}.reader-heading{order:-1;flex-basis:100%}.reader-header button{flex:1}.reader-toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.reader-field,.reader-field:first-child{min-width:0}.reader-navigation{grid-template-columns:1fr 1fr;gap:8px}.reader-first{grid-column:1}.reader-range{grid-column:2;grid-row:1}.reader-turn{grid-row:2}.reader-page{padding:6px 10px}.reader-hint{font-size:11px}}

/* Short landscape keeps the score and page turns together; View retains every option and note. */
.phrase-reader .reader-options-toggle{display:none}
.reader-options-toggle{gap:6px;min-width:0}.reader-options-part{max-width:10ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
@media screen and (max-width:1000px) and (max-height:500px) and (orientation:landscape){
  #app .phrase-reader{height:100dvh;min-height:0;padding:0 12px 6px;grid-template-rows:auto auto minmax(0,1fr) auto}
  .phrase-reader>.reader-header{grid-row:1}.phrase-reader>.reader-toolbar{grid-row:2}.phrase-reader>.reader-navigation{grid-row:4}
  .reader-header{padding:6px 0;gap:8px}.reader-heading h1{font-size:19px}.reader-eyebrow,.reader-hint{display:none}
  .phrase-reader .reader-options-toggle{display:inline-flex}.phrase-reader .reader-header button,.phrase-reader select{min-height:44px;padding:8px 12px}
  .reader-toolbar{display:none;margin:8px auto;gap:12px}.reader-options-open .reader-toolbar{display:flex}
  .phrase-reader:not(.reader-options-open) :is(.reader-rhythm-note,.phrase-score h3){display:none}
  #app .phrase-reader .reader-page{grid-row:3;max-height:none;padding:4px 12px}.phrase-reader .phrase-score{padding:4px 0}
  .reader-navigation{padding:6px 0;gap:8px}.phrase-reader .reader-turn{min-height:44px;font-size:15px}
}

/* Browser-menu Print uses the current Reader page; a score-preview dialog keeps its existing print path. */
@media print{
  body:has(.phrase-reader):not(:has(#dialog[open]))>#app{display:block!important}
  #app .phrase-reader{display:block;height:auto;min-height:0;padding:0;background:#fff;color:#202320}
  .phrase-reader .reader-header,.phrase-reader .reader-toolbar,.phrase-reader .reader-navigation,.phrase-reader .reader-hint{display:none!important}
  .phrase-reader .reader-page{max-width:none;max-height:none!important;height:auto;overflow:visible;border:0;padding:0;scrollbar-gutter:auto;background:#fff}
  .phrase-reader .phrase-score{padding:0;background:#fff}
  .phrase-reader .phrase-score>h1,.phrase-reader .phrase-score .score-intro,.phrase-reader .phrase-score .score-footer{display:block}
  .phrase-reader .phrase-score .score-legend{display:block}
  .phrase-reader .phrase-score svg{min-width:0}
  .phrase-reader .reader-rhythm-note{display:block!important}
  .phrase-reader .reader-rhythm-toggle{display:none}
  .phrase-reader .reader-rhythm-note .score-warning{display:block!important;max-height:none;overflow:visible}
}