/* Jianpu layout mirrors the printed textbook: four two-beat bars per line,
   note widths follow beat values, beams/dots are drawn as real marks. */
.jianpu {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--bars-per-line, 4), minmax(0, 1fr));
  gap: 30px 0;
  padding: 26px 30px 18px;
  text-align: left;
}
/* 有歌词的谱面（教材页在音符下方印歌词）多留一点行距 */
.jianpu.has-lyrics { gap: 44px 0; padding-bottom: 26px; }
.jianpu-measure {
  min-width: 0;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 0 16px 0 10px;
}
.jianpu-measure::after {
  /* 小节线：像印刷谱一样贯通音符行（上不越过数字、下到减时线下方），不再是一小截竖线 */
  content: '';
  position: absolute;
  right: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: #4b4f57;
}
.jianpu-measure.final-bar::after {
  width: 5px;
  background:
    linear-gradient(to right,
      var(--ink) 0 1.4px,
      transparent 1.4px 3.6px,
      var(--ink) 3.6px 5px);
}
.measure-track {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 72px;
}
.jianpu-note {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 20px;
}
.jianpu-note b {
  font: 2.05rem/1 Georgia, 'Times New Roman', 'Songti SC', 'SimSun', serif;
  font-variant-numeric: lining-nums tabular-nums;
}
/* 减时线：八分一条，十六分两条，相邻音符自然连成一线 */
.jianpu-note .beam {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.6px;
  background: var(--ink);
  bottom: 14px;
}
.jianpu-note .beam.lower { bottom: 9px; }
/* 附点：记在音符右侧 */
.jianpu-note .dot-after {
  position: absolute;
  left: 50%;
  margin-left: .38em;
  bottom: 28px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink);
}
/* 低音点：记在音符下方 */
.jianpu-note .dot-low {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 3px;
  width: 4.5px;
  height: 4.5px;
  border-radius: 50%;
  background: var(--ink);
}
/* 高音点：记在音符上方（数字之上，不再压在数字头上） */
.jianpu-note .dot-high {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: 4.5px;
  height: 4.5px;
  border-radius: 50%;
  background: var(--ink);
}
/* 小节号：印刷谱习惯每 5 小节在行首标一次小号 */
.jianpu-measure .measure-no {
  position: absolute;
  left: -2px;
  top: -13px;
  font-style: normal;
  font-size: .64rem;
  line-height: 1;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* 顿音记号：音符上方的小三角 */
.jianpu-note .staccato {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -1px;
  width: 0;
  height: 0;
  border-inline: 4px solid transparent;
  border-top: 6px solid var(--ink);
}
/* 连音线：整条弧由 score.js 按前后音符的真实位置画在覆盖层上（见 .slur-layer） */
.jianpu .slur-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 3;
}
.jianpu .slur-layer path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linecap: round;
}
/* 歌词：与教材一致，印在音符下方 */
.jianpu-note .jianpu-lyric {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -20px;
  font-style: normal;
  font-size: .86rem;
  line-height: 1.2;
  color: var(--muted);
  white-space: nowrap;
}
.singing-sheet .jianpu-note .jianpu-lyric { font-size: 1.05rem; color: var(--ink); }
.jianpu-note.is-active { background: var(--soft); border-radius: 6px; }
/* ---- 报告页：谱面错音标注 ---- */
.jianpu-note .note-flag {
  position: absolute; top: 1px; right: 4px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--red);
}
.jianpu-note.is-pitch-bad b { color: var(--red); }
.jianpu-note.is-rhythm-bad b { text-decoration: underline wavy var(--amber); text-underline-offset: 5px; }
.jianpu-note.is-rhythm-bad .note-flag { background: var(--amber); }
.jianpu-note.is-pitch-bad.is-rhythm-bad .note-flag {
  background: linear-gradient(90deg, var(--red) 0 50%, var(--amber) 50% 100%);
}
.jianpu-note.is-missed { border: 1px dashed #c3c7d2; border-radius: 8px; }
.jianpu-note.is-missed b { color: #b9bdc9; }
.jianpu-note.is-missed .note-flag { display: none; }
.jianpu-note.is-uncertain b { color: var(--muted); opacity: .7; }
.jianpu-note.is-uncertain .note-flag { background: var(--muted); opacity: .55; }
.score-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .78rem; color: var(--muted); padding: 0 30px 4px; }
.score-legend span::before {
  content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle;
}
.score-legend .lg-pitch::before { background: var(--red); }
.score-legend .lg-rhythm::before { background: var(--amber); }
.score-legend .lg-missed::before { background: #c3c7d2; }
.score-legend .lg-uncertain::before { background: #9aa0b0; }
.jianpu-note.is-active b,
.jianpu-note.is-active .dot-after,
.jianpu-note.is-active .dot-low { color: var(--accent); }
.jianpu-note.is-active .beam,
.jianpu-note.is-active .dot-after,
.jianpu-note.is-active .dot-low,
.jianpu-note.is-active .dot-high { background: var(--accent); }
.jianpu-note.is-active .staccato { border-top-color: var(--accent); }
.jianpu-note.is-active .jianpu-lyric { color: var(--accent); }
.jianpu-measure.is-current .measure-track { background: linear-gradient(var(--soft), transparent 78%); }
.score-position {
  grid-column: 1 / -1; text-align: center; color: var(--muted); font-size: .78rem;
  padding-top: 10px; min-height: 30px; font-variant-numeric: tabular-nums;
}
.song-meta { flex-wrap: wrap; gap: 8px 20px; }
/* 调速：60–130 拍/分，只改练习速度，不改谱面音高 */
.song-meta .tempo {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; color: var(--muted);
}
.song-meta .tempo input[type=range] {
  width: 116px; height: 18px; accent-color: var(--accent); cursor: pointer;
}
.song-meta .tempo output {
  color: var(--ink); font-variant-numeric: tabular-nums; min-width: 4.4em;
}
/* v2 评语：一条一个错音，读起来不用猜 */
.comment-panel .cmt-issues { margin: 10px 0 0; padding-left: 20px; }
.comment-panel .cmt-issues li { margin: 4px 0; }
.comment-panel .cmt-more { margin: 8px 0 0; font-size: .8rem; color: var(--muted); }
.comment-panel .cmt-tip { margin: 10px 0 0; }
.singing { padding: 0; max-width: 920px; margin: auto; }
.singing-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  text-align: left; margin-bottom: 22px;
  position: sticky; top: 0; z-index: 2; background: var(--bg); padding-block: 12px;
}
.singing h1 { font-size: 1.5rem; margin: 10px 0 0; }
.singing .beats { margin: 0; gap: 14px; }
.singing .beats i { width: 12px; height: 12px; }
.live-sheet-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 28px; border-bottom: 1px solid var(--line); text-align: left;
}
.live-sheet-heading span { font-size: .82rem; color: var(--muted); }
.singing-sheet .jianpu { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 36px; }
.singing-sheet .jianpu-note b { font-size: 2.3rem; }
.singing .sing-progress { margin: 20px auto 12px; }
@media (max-width: 1250px) {
  .jianpu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1150px) {
  .jianpu { padding-inline: 16px; }
  .singing-sheet .jianpu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .jianpu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 0; }
  .singing-sheet .jianpu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .jianpu { padding: 20px 12px 14px; gap: 24px 0; }
  .jianpu-measure { padding: 0 10px 0 6px; }
  .jianpu-measure::after { top: 6px; bottom: 6px; }
  .jianpu-measure .measure-no { top: -12px; font-size: .6rem; }
  .measure-track { height: 62px; }
  .jianpu-note b, .singing-sheet .jianpu-note b { font-size: 1.7rem; }
  .jianpu-note { padding-bottom: 17px; }
  .jianpu-note .beam { bottom: 12px; }
  .jianpu-note .beam.lower { bottom: 7.5px; }
  .jianpu-note .dot-after { bottom: 24px; margin-left: .3em; }
  .jianpu-note .dot-low { bottom: 2px; width: 4px; height: 4px; }
  .jianpu-note .dot-high { top: 0; width: 4px; height: 4px; }
  .jianpu-note .staccato { top: -1px; border-inline-width: 3.5px; border-top-width: 5px; }
  .jianpu-note .jianpu-lyric { bottom: -18px; font-size: .78rem; }
  .singing-sheet .jianpu-note .jianpu-lyric { font-size: .9rem; }
  .jianpu.has-lyrics { gap: 40px 0; }
  .singing-sheet .jianpu { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 10px; }
  .singing-toolbar { flex-wrap: wrap; gap: 16px; }
  .singing-toolbar > div:first-child { flex: 1; }
  .singing-toolbar .beats { order: 3; flex-basis: 100%; }
  .singing h1 { font-size: 1.25rem; }
  .live-sheet-heading { padding: 18px 16px; flex-wrap: wrap; gap: 8px; }
  .live-sheet-heading span { font-size: .75rem; }
}