/* Shared pitch staff and separate full-range scale mode. Token-only colors. */
.mode-tabs { display:flex; gap:3px; border:1px solid var(--color-line); border-radius:var(--radius-sm); padding:2px; }
.mode-tabs button { font-size:var(--text-sm); background:transparent; }
.mode-tabs button[aria-pressed=true] { background:var(--color-primary); color:var(--color-on-primary); }
.masthead #coverage { margin-left:auto; }
#chord-panel[hidden],#scale-panel[hidden],#tuner-panel[hidden] { display:none!important; }
.chord-score-panel { max-width:100%; min-width:0; border:1px solid var(--color-line); background:var(--color-surface); margin-top:var(--space-3); padding:var(--space-3); }
.chord-score-panel h3 { margin-bottom:var(--space-1); }
music-score,scale-map { display:block; min-width:0; max-width:100%; }
.score-scroll { overflow-x:auto; max-width:100%; overscroll-behavior-x:contain; }
.score-svg { display:block; width:100%; min-width:400px; height:auto; color:var(--color-ink); }
.staff-line,.ledger-line { stroke:var(--color-muted); stroke-width:1.2; }
.ledger-line { stroke-width:1.5; }
.clef-mark { font:46px/1 serif; fill:var(--color-ink); }
.clef-name { font:10px var(--font-sans); fill:var(--color-muted); }
.score-note { cursor:pointer; }
.score-head { fill:var(--color-ink); stroke:var(--color-surface); stroke-width:1; }
.score-note.is-current .score-head { fill:var(--color-primary); stroke:var(--color-diagram-active-ring); stroke-width:3; }
.score-note.outside .score-head { fill:var(--color-surface); stroke:var(--color-muted); }
.score-note.outside.is-current .score-head { fill:var(--color-primary); }
.score-note:focus-visible { outline:none; }
.score-note:focus-visible .score-head { stroke:var(--color-focus); stroke-width:4; }
.score-accidental { font:18px/1 var(--font-serif); fill:var(--color-ink); }
.score-degree { font:600 13px var(--font-sans); fill:var(--color-primary-text); }
.score-pitch { font:11px var(--font-mono); fill:var(--color-ink); }
.score-status { min-height:26px; padding:3px; color:var(--color-primary-text); font-size:var(--text-sm); }
#scale-panel { display:grid; gap:var(--space-3); }
.scale-heading { display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:var(--space-3); }
.scale-heading h2 { font:var(--text-display)/1.2 var(--font-serif); }
.scale-controls { display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:end; }
.scale-controls>div { min-width:100px; flex:1; }
.scale-controls>div:nth-child(2) { min-width:220px; }
.scale-controls select { min-height:var(--target); }
.scale-degrees { display:flex; flex-wrap:wrap; gap:4px; margin:0; }
.scale-degrees span { display:inline-flex; align-items:baseline; gap:6px; padding:5px 9px; border:1px solid var(--color-line); border-radius:var(--radius-sm); background:var(--color-surface); white-space:nowrap; }
.scale-degrees strong { color:var(--color-primary-text); }
scale-map { display:block; }
view-layout .view-layout-region { border:1px solid var(--color-line); border-radius:var(--radius-sm); background:var(--color-surface); padding:var(--space-3); }
view-layout .view-layout-region>h3 { margin-bottom:var(--space-2); }
view-layout .view-layout-region[data-density="paired"] { padding:var(--space-2) var(--space-3); }
.scale-fretboard,.scale-keyboard { overflow-x:auto; overflow-y:hidden; max-width:100%; overscroll-behavior-x:contain; scrollbar-color:var(--color-muted) var(--color-surface); }
full-piano.scale-keyboard,full-guitar.scale-fretboard { display:block; min-width:0; position:relative; }
full-guitar .scale-cell.is-voiced { box-shadow:inset 0 -3px 0 var(--color-primary-line); }
.fret-grid { --fret-w:48px; --fret-h:46px; --string-w:64px; display:grid; grid-template-columns:var(--string-w) repeat(25,var(--fret-w)); width:max-content; align-items:stretch; }
.fret-header,.string-name { display:grid; place-items:center; min-height:27px; font-size:var(--text-xs); color:var(--color-muted); border-bottom:1px solid var(--color-line); }
.string-name { position:sticky; left:0; z-index:2; background:var(--color-surface); font-weight:600; border-right:1px solid var(--color-line); }
.scale-cell { position:relative; margin:0; padding:0; width:var(--fret-w); height:var(--fret-h); min-width:0; min-height:var(--fret-h); background:transparent; border-radius:0; border-left:1px solid var(--color-line); border-bottom:1px solid var(--color-line); font:600 12px var(--font-sans); color:var(--color-muted); }
.scale-cell::before { content:''; position:absolute; top:50%; left:0; width:100%; border-top:1px solid var(--color-line); z-index:0; pointer-events:none; }
.scale-cell.in-scale { background:var(--color-primary-wash); color:var(--color-primary-text); }
.scale-cell.is-root { box-shadow:inset 0 0 0 2px var(--color-primary-line); }
.scale-cell.outside-window { opacity:.4; }
.scale-cell.is-current,.scale-cell.is-origin { background:var(--color-primary); color:var(--color-on-primary); opacity:1; }
.scale-cell.is-origin { outline:3px solid var(--color-focus); outline-offset:-5px; }
.scale-key-track { position:relative; height:132px; min-width:1560px; }
.scale-key { position:absolute; top:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:3px; border-radius:0 0 4px 4px; padding:3px 0 5px; min-width:0; font:9px/1 var(--font-sans); }
.scale-key.white { width:30px; height:126px; background:var(--color-diagram-key); color:var(--color-ink); border:1px solid var(--color-diagram-line); }
.scale-key.black { width:20px; height:78px; z-index:1; background:var(--color-diagram-key-black); color:var(--color-surface); border:1px solid var(--color-diagram-line); }
.scale-key.white.in-scale { background:var(--color-primary-wash); }
.scale-key.black.in-scale { background:var(--color-diagram-active-black); color:var(--color-diagram-active-black-ink); border-color:var(--color-diagram-active-ring); }
.scale-key.is-root { border-bottom:5px solid var(--color-primary-line); }
#chord-full-piano .scale-key.is-voiced { box-shadow:inset 0 -6px 0 var(--color-primary-line); }
#chord-full-piano .scale-key.is-voiced.black { box-shadow:inset 0 -6px 0 var(--color-diagram-active-ring); }
.scale-key.is-current,.scale-key.black.is-current { background:var(--color-primary); color:var(--color-on-primary); outline:3px solid var(--color-diagram-active-ring); outline-offset:-3px; }
.scale-key.black.is-current { background:var(--color-diagram-active-black); color:var(--color-diagram-active-black-ink); }
.key-note { writing-mode:vertical-rl; text-orientation:mixed; }
.key-degree { font-weight:700; font-size:10px; }
/* Views densities: the same projections, only shorter (mobile) or paired beside the staff. */
view-layout [data-region="guitar"][data-density="paired"] .fret-grid { --fret-w:37px; --fret-h:44px; }
view-layout[data-density="compact"] [data-region="guitar"] .fret-grid { --fret-w:38px; --fret-h:36px; --string-w:54px; }
view-layout[data-density="compact"] .fret-header,view-layout[data-density="compact"] .string-name { min-height:24px; }
view-layout [data-region="score"][data-density="paired"] .score-svg { min-width:260px; }
view-layout[data-density="compact"] .score-svg { min-width:300px; }
view-layout[data-density="compact"] .scale-heading h2 { font-size:22px; }
#scale-status { min-height:32px; font:600 var(--text-sm)/1.5 var(--font-sans); color:var(--color-primary-text); }
/* The scale workbench may use a wide monitor; elsewhere the app keeps its 1440px column. */
@media(min-width:1200px) { body:has(#scale-panel:not([hidden])) main { max-width:1800px; } }
@media(max-width:760px) {
  .mode-tabs { order:3; width:100%; }
  .mode-tabs button { flex:1; }
  .masthead #coverage { margin-left:0; }
  view-layout .view-layout-region { padding:var(--space-2); }
  .scale-heading h2 { font-size:24px; }
  .scale-controls { width:100%; }
  .scale-controls>div { min-width:80px; }
  .scale-controls>div:nth-child(2) { min-width:180px; }
}