/* 通用乐谱控件：版式与按钮全部沿用 practice.css，
   这里只补练习页没有的东西——宽度档位、打印、右侧两个按钮的排布，
   以及两处 practice.css 管不到的细节（a 标签、标签定位）。 */
.sp{display:block}
.sp[data-width="inline"]{max-width:720px;margin-inline:auto}

/* 练习页的控件行是居中的，这里改成左对齐，好把打印/下载推到最右 */
.sp .ctl-row{justify-content:flex-start}
.sp-spacer{flex:1 1 auto}

/* practice.css 的 .fchip 用了 font 简写里的 inherit，浏览器整条丢弃，
   结果按钮落到 13.33px、<a> 落到 16px 并带下划线。这里显式声明。 */
.sp .fchip{
  font-size:12px;
  line-height:1;
  font-family:inherit;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
}
.sp a.fchip{color:var(--ink)}
.sp a.fchip:hover{color:var(--accent)}

/* 音名/唱名标签：practice.css 只给了 pointer-events，没有定位容器 */
.sp .osmd-labels{position:absolute;inset:0;pointer-events:none}
.sp-label{
  position:absolute;
  transform:translateX(-50%);
  font:600 12px/1 var(--sans,-apple-system,"PingFang SC",sans-serif);
  color:#1c1c1e;
  white-space:nowrap;
}

/* 打印：只留曲名与谱面 */
.sp-print-title{display:none}
.sp-print-head{display:none}

@media print{
  /* 纸面页头：第一行曲名，第二行站点地址 */
  .sp-print-head{display:block!important;margin:0 0 14px}
  .sp-print-title{margin:0}
  .sp-print-site{
    margin:2px 0 0;
    font:500 9.5pt/1.3 var(--sans,-apple-system,"PingFang SC",sans-serif);
    color:#6b7280;letter-spacing:.03em;
  }
  @page{size:A4 portrait;margin:14mm}
  /* styles.css 的打印规则会隐藏除 #tool 外的所有小节，这里把乐谱页放回来 */
  main > section.sp-section:not(#tool){display:block!important}
  .sp,.sp *{visibility:visible!important}
  .sp-ctl,.sp-labels,.practice-countin,.breadcrumb,
  .site-header,.site-footer,.skip-link{display:none!important}
  .sp.practice-shell,.sp .v-card{
    background:none!important;border:0!important;box-shadow:none!important;
    padding:0!important;border-radius:0!important;
  }
  .sp .staff-wrap{
    border:0!important;padding:0!important;background:none!important;
    max-height:none!important;overflow:visible!important;
  }
  .sp .staff-wrap svg{width:100%!important;height:auto!important}
  .sp-print-title{
    display:block;margin:0;
    font:700 18px/1.4 var(--sans,-apple-system,"PingFang SC",sans-serif);
    color:#1e2433;
  }
}

@media (max-width:640px){
  .sp-spacer{display:none}
  .sp .ctl-row{justify-content:center}
}