/* 字母琴 · Scale Rows — page styles.
   Builds on base.css tokens. The keys are drawn as small paper tiles with
   an ink jianpu numeral: a printed 简谱 sheet laid over a keyboard, not a
   piano and not a button grid. */

.sr-controls{display:flex; flex-wrap:wrap; gap:10px 18px; margin:10px 0 4px}
.sr-controls label{display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--muted)}
.sr-controls select{min-width:150px}
.sr-rootgroup{display:flex; gap:4px; align-items:stretch}
.sr-rootgroup button{padding:6px 9px; font-size:12.5px}
.sr-rootgroup select{min-width:80px}
.sr-controls input[type=range]{width:120px; accent-color:var(--cinnabar); margin-top:8px}
.sr-toggles{margin-top:12px}
.sr-soundstatus{margin-top:6px}
.sr-soundstatus.warn{color:var(--cinnabar)}

/* ── ladder ─────────────────────────────────────────── */
.sr-ladder{display:flex; gap:4px; flex-wrap:wrap; margin-top:10px; align-items:flex-end}
.sr-step{
  flex:1 1 0; min-width:34px; padding:8px 2px 6px; text-align:center; border-radius:4px;
  border:1px solid var(--line); background:var(--paper); color:var(--ink);
  font-family:var(--serif); transition:background .08s, transform .08s;
}
.sr-step .sr-jp{display:block; font-size:19px; line-height:1.1}
.sr-step .sr-name{display:block; font-size:10.5px; color:var(--muted); margin-top:3px; font-family:var(--sans)}
.sr-step.tonic{border-color:var(--gold); background:#fbf3df}
.sr-step.on{background:var(--cinnabar); border-color:var(--cinnabar); color:#faf3ea; transform:translateY(-3px)}
.sr-step.on .sr-name{color:#f3d9cf}

/* ── keyboard ───────────────────────────────────────── */
.sr-keycard{overflow-x:auto}
.sr-keyboard{display:flex; flex-direction:column; gap:6px; margin-top:12px; width:max-content; max-width:none; user-select:none; -webkit-user-select:none}
.sr-row{display:flex; gap:6px}
.sr-key{
  position:relative; width:2.6em; height:2.9em; flex:0 0 auto; border-radius:5px;
  border:1px solid var(--line); border-bottom-width:3px; background:var(--card);
  display:grid; place-items:center; cursor:pointer; font-size:17px;
  transition:background .06s, transform .06s;
  touch-action:none;
}
.sr-key .sr-letter{position:absolute; top:2px; left:5px; font-size:9.5px; color:var(--muted); font-family:var(--sans); letter-spacing:.5px}
.sr-key .sr-jp{font-family:var(--serif); font-size:1.15em; line-height:1; color:var(--ink); margin-top:3px}
.sr-key .sr-sf{display:none}
.sr-key .sr-name{position:absolute; bottom:2px; right:5px; font-size:9px; color:var(--muted); font-family:var(--sans); display:none}
body.sr-letters .sr-key .sr-name{display:block}
body[data-solfege="on"] .sr-key .sr-sf{display:block; position:absolute; bottom:2px; left:5px; font-size:8.5px; color:var(--sage); font-family:var(--sans)}
body[data-jianpu="off"] .sr-key .sr-jp{visibility:hidden}
.sr-key.tonic{background:#fbf3df; border-color:var(--gold)}
.sr-key.tonic .sr-jp{color:var(--cinnabar-dark)}
.sr-key.on{background:var(--cinnabar); border-color:var(--cinnabar-dark); transform:translateY(2px); border-bottom-width:1px}
.sr-key.on .sr-jp, .sr-key.on .sr-letter, .sr-key.on .sr-name, .sr-key.on .sr-sf{color:#faf3ea}
.sr-shifts{display:flex; justify-content:space-between; margin-top:8px; gap:8px}
.sr-shift{font-size:12px; color:var(--muted); border:1px dashed var(--line); border-radius:20px; padding:2px 12px}
.sr-shift.on{color:#faf3ea; background:var(--sage); border-style:solid; border-color:var(--sage)}

/* ── staff beside the keyboard ──────────────────── */
.sr-kbrow{display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap}
.sr-kbrow > div:first-child{flex:1 1 600px; min-width:0}
.sr-staffbox{flex:0 0 230px; margin-top:12px}
.sr-staff{width:230px; height:176px; display:block; margin-top:6px}
.st-line{stroke:var(--muted); stroke-width:.8; opacity:.7}
.st-clef{font-family:'Noto Music','Bravura','Noto Sans Symbols2','Segoe UI Symbol',serif; font-size:34px; fill:var(--ink)}
.st-clef.st-bass{font-size:28px}
.st-faint{fill:var(--line); stroke:var(--muted); stroke-width:.6; opacity:.9}
.st-note{fill:var(--cinnabar); stroke:var(--cinnabar-dark); stroke-width:.6}
.st-acc{font-size:11px; stroke:none; font-family:var(--serif)}
text.st-faint{fill:var(--muted)}
text.st-note{fill:var(--cinnabar)}

/* ── trace ──────────────────────────────────────────── */
.sr-trace{
  font-family:var(--serif); font-size:26px; letter-spacing:6px; line-height:1.4; min-height:44px;
  padding:6px 10px; margin-top:8px; border-bottom:1px solid var(--line); word-break:break-all;
}
.sr-trace.empty{font-family:var(--sans); font-size:12.5px; color:var(--muted); letter-spacing:0}
.whybox.show{display:flex}
.whybox input.need{border-color:var(--cinnabar)}

/* ── media ──────────────────────────────────────────── */
.sr-mediaform{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:10px}
.sr-mediaform input[type=text]{flex:1 1 260px}
.sr-filebtn{
  font-size:13.5px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
  padding:7px 14px; cursor:pointer;
}
.sr-filebtn:hover{border-color:var(--gold)}
.sr-filebtn input{display:none}
.sr-providers .chip{flex:0 0 auto; padding:0 10px; display:grid; place-items:center; color:var(--muted); background:var(--card)}
.sr-providers .chip.sr-default{border-color:var(--sage); color:var(--sage)}
.sr-media{margin-top:10px; max-width:720px}
.sr-media iframe, .sr-media video{width:100%; border:0; border-radius:var(--radius); background:#000; display:block}
.sr-media.fixed iframe{background:transparent}
.sr-media audio{width:100%; display:block}
.sr-focus{
  display:block; width:100%; max-width:720px; margin-top:8px; text-align:left;
  background:#fbf3df; border-color:var(--gold); color:var(--cinnabar-dark); font-size:13px;
}

@media (max-width:640px){
  .sr-key{font-size:14px}
}

/* ── display mode toggle ───────────────────────────── */
.sr-modebar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:10px 0 4px}
.sr-modeswitch button{padding:5px 12px}
.sr-touch-only{display:none}
body.sr-touch .sr-touch-only{display:block}
body.sr-touch .sr-laptop-only{display:none}

/* ── touch grid ─────────────────────────────────────── */
.sr-touchgrid{display:flex; flex-direction:column; gap:6px; margin-top:12px; user-select:none; -webkit-user-select:none; touch-action:none; -webkit-touch-callout:none}
.sr-trow{display:flex; gap:6px}
.sr-tkey{
  flex:1 1 0; min-width:40px; height:clamp(52px, 13vw, 78px); border-radius:7px; position:relative;
  border:1px solid var(--line); border-bottom-width:4px; background:var(--card);
  display:grid; place-items:center; transition:background .05s, transform .05s;
}
.sr-tkey .sr-jp{font-family:var(--serif); font-size:clamp(20px, 5.5vw, 28px); line-height:1; color:var(--ink)}
.sr-tkey .sr-sf{display:none}
.sr-tkey .sr-name{position:absolute; bottom:3px; right:6px; font-size:9.5px; color:var(--muted); display:none}
body.sr-letters .sr-tkey .sr-name{display:block}
body[data-solfege="on"] .sr-tkey .sr-sf{display:block; position:absolute; bottom:3px; left:6px; font-size:9.5px; color:var(--sage)}
body[data-jianpu="off"] .sr-tkey .sr-jp{visibility:hidden}
.sr-tkey.tonic{background:#fbf3df; border-color:var(--gold)}
.sr-tkey.tonic .sr-jp{color:var(--cinnabar-dark)}
.sr-tkey.on{background:var(--cinnabar); border-color:var(--cinnabar-dark); transform:translateY(3px); border-bottom-width:1px}
.sr-tkey.on .sr-jp, .sr-tkey.on .sr-name, .sr-tkey.on .sr-sf{color:#faf3ea}
.sr-shift{touch-action:none; user-select:none; -webkit-user-select:none}
body.sr-touch .sr-shift{padding:10px 18px; font-size:14px; border-style:solid}

/* ── touch layout: media first, compact settings, staff under the grid ── */
body.sr-touch .sr-main{display:flex; flex-direction:column}
body.sr-touch #secLede{order:0}
body.sr-touch #secMedia{order:1}
body.sr-touch #secPlay{order:2}
body.sr-touch #secSettings{order:3}
body.sr-touch .sr-keycard{overflow:visible}
body.sr-touch .sr-kbrow{flex-direction:column; gap:10px}
body.sr-touch .sr-kbrow > div:first-child{flex:1 1 auto; width:100%}
body.sr-touch .sr-shifts{min-width:0}
body.sr-touch .sr-staffbox{flex:0 0 auto; margin-top:4px}
body.sr-touch .sr-controls label{flex:1 1 44%}
body.sr-touch .sr-controls select{min-width:0; width:100%; font-size:16px}  /* 16px stops iOS zooming into the field */
body.sr-touch .sr-mediaform input[type=text]{font-size:16px}
body.sr-touch .sr-ladder .sr-step{min-width:30px; padding:6px 1px 4px}
body.sr-touch .sr-ladder .sr-step .sr-jp{font-size:16px}
body.sr-touch .sr-ladder .sr-step .sr-name{display:none}
body.sr-touch .toggles button{padding:9px 14px}
@media (max-width:480px){
  body.sr-touch .sr-media{max-width:none}
  body.sr-touch .sr-trace{font-size:22px; letter-spacing:4px}
}

/* landscape tablet in touch mode: video on the left, grid on the right */
@media (min-width:900px){
  body.sr-touch .sr-main{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:0 22px; align-items:start}
  body.sr-touch #secLede{grid-column:1 / -1}
  body.sr-touch #secMedia{grid-column:1}
  body.sr-touch #secPlay{grid-column:2}
  body.sr-touch #secSettings{grid-column:1 / -1}
  body.sr-touch .sr-main > section:not([id]){grid-column:1 / -1}
  body.sr-touch .sr-media{max-width:none}
  body.sr-touch .sr-tkey{height:clamp(56px, 7vw, 84px)}
  body.sr-touch .sr-tkey .sr-jp{font-size:clamp(22px, 2.6vw, 30px)}
}

/* ── takes: live roll and the card strip ─────────────── */
.sr-roll{display:block; width:100%; height:120px; margin-top:8px; border:1px solid var(--line); border-radius:4px; background:var(--card)}
.tk-strip{display:flex; gap:10px; overflow-x:auto; padding:10px 2px 6px; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity}
.tk-card{flex:0 0 190px; scroll-snap-align:start; background:var(--card); border:1px solid var(--line); border-radius:6px; padding:8px; display:flex; flex-direction:column; gap:6px}
.tk-card.playing{border-color:var(--sage); box-shadow:0 0 0 1px var(--sage)}
.tk-card .tk-roll{width:100%; height:64px; display:block; background:var(--paper); border-radius:3px}
.tk-meta{display:flex; flex-direction:column; gap:1px; min-width:0}
.tk-title{font-family:var(--serif); font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; outline:none; border-bottom:1px dashed transparent}
.tk-title:focus{border-bottom-color:var(--gold); white-space:normal}
.tk-sub{font-size:11px; color:var(--muted)}
.tk-actions{display:flex; gap:4px; align-items:center}
.tk-actions button{padding:4px 9px; font-size:12px}
.tk-actions .tk-play{background:var(--cinnabar); border-color:var(--cinnabar); color:#faf3ea; font-size:13px; min-width:34px}
.tk-card.playing .tk-play{background:var(--sage); border-color:var(--sage)}
.tk-actions .tk-del{margin-left:auto; color:var(--muted)}
.tk-empty{padding:6px 0}
body.sr-touch .tk-card{flex-basis:170px}

/* ── textbook epigraph, presets, degree marks ───────── */
.sr-quote{border-left:3px solid var(--gold); padding:4px 12px; margin:6px 0 10px; font-family:var(--serif); font-size:14px; color:var(--ink); max-width:70ch}
.sr-quote small{display:block; color:var(--muted); font-size:12px; margin-top:3px; font-family:var(--sans)}
.sr-presets{display:flex; flex-direction:column; gap:6px; margin:8px 0 4px}
.sr-presets .chips{flex-wrap:wrap; margin:0}
.sr-preset{flex:0 0 auto; height:auto; padding:6px 12px; font-size:13px; border-radius:20px}
.sr-preset[aria-pressed="true"]{background:var(--sage); border-color:var(--sage); color:#faf3ea}
.sr-key.marked::after, .sr-tkey.marked::after{content:"♯"; position:absolute; top:1px; right:5px; font-size:11px; color:var(--gold); font-family:var(--serif)}
.sr-step.marked{border-color:var(--gold); box-shadow:inset 0 -3px 0 var(--gold)}
.sr-step.marked::after{content:attr(data-mark); display:block; font-size:9px; color:var(--gold); font-family:var(--sans); margin-top:1px}
.sr-marknote{margin-top:8px; color:var(--gold)}