/* 第一把位指法页 */

.fb-card{
  max-width:880px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px 16px 18px;
}
.fb-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* 提示紧贴表格下方，说明的是表格本身 */
.fb-card .staff-hint{margin-top:22px}

table.fb{
  width:100%;min-width:344px;border-collapse:collapse;table-layout:fixed;text-align:center;
}
table.fb caption{
  caption-side:top;text-align:left;padding:0 0 12px;
  font-size:12px;line-height:1.55;color:var(--muted);
}
.fb thead th{padding:0 3px 10px;vertical-align:bottom;font-weight:650}
.fbc-string{
  display:block;font:700 11px/1.4 var(--mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);
}
.fbc-tuning{display:block;font:650 10px/1.4 var(--mono);color:var(--muted)}
.fb-corner{width:54px}

.fb-row th[scope="row"]{
  width:54px;padding:0 8px 0 0;text-align:right;white-space:nowrap;
  font:650 11px/1.25 var(--mono);color:var(--muted);
}
.fbc-cell{
  padding:7px 3px;border-top:1px solid var(--line);
  background-color:var(--fbtint,var(--paper));
  background-image:linear-gradient(to right,
    transparent calc(50% - 1px),#dcd4c5 calc(50% - 1px),
    #dcd4c5 calc(50% + 1px),transparent calc(50% + 1px));
  background-repeat:no-repeat;
}
.fb-row-open .fbc-cell{border-top:3px solid #2b3244}
.fbc-note{
  position:relative;z-index:1;display:inline-block;padding:2px 7px;border-radius:6px;
  background:var(--fbtint,var(--paper));color:var(--ink);
  font-size:clamp(13px,2.6vw,15px);font-weight:700;line-height:1.45;letter-spacing:-.01em;
}
.fb-row-open .fbc-note{color:var(--accent)}
.fbc-var{
  position:relative;z-index:1;display:block;width:fit-content;margin:3px auto 0;
  padding:1px 5px;border-radius:5px;background:var(--fbtint,var(--paper));
  font-size:11.5px;line-height:1.5;font-weight:600;color:#4c5464;white-space:nowrap;
}

.fb-staff{
  max-width:880px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 14px 8px;
}
.fb-staff svg{display:block;width:100%;height:auto}

.fb-variants{display:grid;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.fb-variant{
  display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:space-between;align-items:baseline;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px 13px;
  font-size:13px;line-height:1.5;color:#3d4558;
}
.fb-variant-notes{font:650 13px/1.5 var(--mono);color:var(--ink);letter-spacing:.01em}

.fb-steps{display:grid;gap:10px;margin:16px 0 0;padding:0;list-style:none}
.fb-step{
  display:grid;grid-template-columns:34px 1fr;gap:12px;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px 14px;
}
.fb-step-num{font:700 11px/1 var(--mono);color:var(--accent);padding-top:4px}
.fb-step h3{margin:0 0 3px}
.fb-step p{margin:0;font-size:13px;line-height:1.65;color:var(--muted)}

.fb-related{margin:16px 0 0;padding-left:20px;color:#3d4558;font-size:14px}
.fb-related li{margin:6px 0}

.fb-lead{max-width:820px}
.fb-lead p{color:#3d4558;margin:0 0 12px}

@media (max-width:700px){
  .fb-staff{overflow-x:auto}
  .fb-staff svg{min-width:640px}
}

@media (max-width:460px){
  .fb-card{padding:12px 10px 12px}
  .fb-corner,.fb-row th[scope="row"]{width:44px}
  .fbc-var{font-size:10.5px;padding:1px 3px}
}

@media print{
  .fb-card,.fb-staff,.fb-variant,.fb-step{box-shadow:none;border-color:#c9c2b4}
  .fb-scroll{overflow:visible}
  .fb-card{break-inside:avoid}
}

/* 按手指分组的浅底：同明度低饱和，只用于指法表与指板图 */
.fbf-0{--fbtint:#eef0ff}
.fbf-1{--fbtint:#e6f0f8}
.fbf-2{--fbtint:#e8f4ea}
.fbf-3{--fbtint:#fdf3e2}
.fbf-4{--fbtint:#f9ece8}

/* 互动：可点音位 */
.fbc-hit{
  appearance:none;-webkit-appearance:none;display:block;width:100%;
  margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;
  cursor:pointer;border-radius:8px;
}
.fbc-hit + .fbc-hit{margin-top:2px}
.fbc-hit:hover .fbc-note,
.fbc-hit:focus-visible .fbc-note{background:var(--accent-soft);color:var(--accent)}
.fbc-hit:hover .fbc-var{color:var(--ink)}
.fbc-hit[aria-pressed="true"] .fbc-note{background:var(--accent);color:#fff}
.fbc-hit[aria-pressed="true"] .fbc-var{background:var(--accent);color:#fff}
.fbc-hit.is-same .fbc-note,
.fbc-hit.is-same .fbc-var{outline:2px dashed var(--accent);outline-offset:1px}

/* 互动：读数 + 谱面 */
.fb-live{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:14px;margin-top:14px}
.fb-readout{
  display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 15px;
}
.fb-readout-note{display:flex;align-items:baseline;gap:10px;margin:0 0 8px;min-height:34px}
#fbNote{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
#fbAlt{font-size:15px;color:var(--muted)}
.fb-readout-meta{margin:0;font-size:12.5px;line-height:1.65;color:var(--muted)}
.fb-readout-same{
  margin:10px 0 0;padding:7px 9px;border-radius:8px;
  background:#fff7ed;border:1px dashed #f0d7b8;color:var(--warm);
  font-size:12px;line-height:1.5;
}
.fb-live-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:12px}
.fb-live-btn{
  appearance:none;border:1px solid var(--line);background:#fff;color:var(--ink);
  border-radius:10px;padding:8px 12px;font:650 12px/1.2 inherit;cursor:pointer;min-height:38px;
}
.fb-live-btn:hover{border-color:#c7d2fe;color:var(--accent);transform:translateY(-1px)}
.fb-staffbox{
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:8px 10px 4px;
}
.fb-staffsvg{display:block;width:100%;height:auto}
.fb-clef-sm{font-size:88px}
.fb-notehead{fill:var(--accent)}
.fb-stem{stroke:var(--accent);stroke-width:1.8}
.fb-accidental{font-family:Georgia,serif;font-size:18px;font-weight:700;fill:var(--accent)}
.fb-note-tag{text-anchor:middle;font-family:var(--mono);font-size:12px;fill:var(--accent)}

@media (max-width:760px){
  .fb-live{grid-template-columns:1fr}
  .fb-neckbox{max-width:360px;margin-inline:auto}
}
@media print{
  .fb-live{display:none}
  .fbc-hit{cursor:default}
}

/* 读数卡片按内容高度排布，不跟着谱面拉高 */
.fb-readout{align-self:start}
.fb-live-actions{margin-top:12px;padding-top:0}

/* 触控目标：手机上把两个音位各自撑到可点高度 */
.fbc-hit{touch-action:manipulation}
@media (max-width:620px){
  .fbc-cell{padding:6px 3px}
  .fbc-hit{min-height:36px;display:flex;align-items:center;justify-content:center}
  .fbc-hit-var{min-height:32px}
}

/* 连播时的当前音位 */
.fbc-hit.is-playing .fbc-note,
.fbc-hit.is-playing .fbc-var{box-shadow:0 0 0 3px rgba(79,70,229,.28)}

/* 指法表 + 矢量指板图并排 */
.fb-chart-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.fb-chart-grid > .fb-card{max-width:none}
.fb-neckbox{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;min-height:0;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:10px 8px 16px;
}
.fb-neck{display:block;width:100%;height:auto;max-height:100%}
.fn-legend{
  margin:0;font-size:11.5px;line-height:1.5;color:var(--muted);text-align:center;
}

.fn-pegbox{fill:#39415a}
.fn-peg{fill:#5b6478}
.fn-board{fill:#232a3b}
.fn-nut{fill:#6b7488}
.fn-string{stroke:#d9d3c5;stroke-width:1.8}
.fn-strname{font:700 13px/1 var(--mono);fill:var(--muted);text-anchor:middle}
.fn-rowlab{font:650 12px/1 var(--mono);fill:var(--muted);text-anchor:end}
.fn-chip{fill:var(--fbtint,var(--paper));stroke:none}
.fn-finger{
  font:700 14px/1 var(--mono);fill:var(--muted);text-anchor:middle;
}
.fn-finger-open{fill:var(--accent)}
.fn-note{
  font:700 15px/1 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  fill:var(--ink);text-anchor:middle;
}
.fn-note-open{fill:var(--accent)}
/* 变体位退到背景：无底色、虚线、弱文字 */
.fn-variant .fn-chip{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1;stroke-dasharray:4 4}
.fn-variant .fn-note{fill:#a7b0c2}
.fn-variant .fn-finger{fill:#7f889b}

.fn-stop.is-on .fn-chip{fill:var(--accent);stroke:var(--accent);stroke-dasharray:none}
.fn-stop.is-on .fn-note{fill:#fff}
.fn-stop.is-on .fn-finger{fill:#fff}

@media (min-width:960px){
  .fb-chart-grid{
    grid-template-columns:minmax(0,600px) minmax(300px,1fr);
    align-items:stretch;max-width:1120px;
  }
}
@media print{
  .fb-neckbox{break-inside:avoid}
}

/* 示例曲：谱面 + 指板 */
.fb-piece{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;max-width:1120px}
@media (min-width:960px){
  .fb-piece{grid-template-columns:minmax(0,1fr) minmax(300px,364px);align-items:start}
}
.fb-score-host{min-height:150px}
.fb-score-host svg{display:block;width:100%;height:auto}
.fb-score-status{margin:0;font-size:12px;line-height:1.6;color:var(--muted)}
.fb-piece-score{
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px 14px;
}
.fb-piece-name{
  margin:0 0 6px;font:700 11px/1 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);
}
.fb-piece-actions{margin-top:12px}
@media print{.fb-piece-actions{display:none}}

/* ---------- 七个把位 ---------- */
.fb-pos { max-width: 460px; margin: 0 auto; }
.fb-pos-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 14px; }
.fb-pos-tab {
  appearance: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font: 700 14px/1 var(--mono);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.fb-pos-tab:hover { border-color: #c7d2fe; color: var(--accent); }
.fb-pos-tab.is-active {
  background: var(--accent-soft);
  border-color: #c7d2fe;
  color: var(--accent);
}

.fb-pos-stage { position: relative; }
.fb-pos-slide { display: none; margin: 0; position: relative; }
.fb-pos-slide.is-active { display: block; }
.fb-pos-slide img {
  display: block;
  width: 100%; height: auto;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
}

.fb-pos-badge {
  position: absolute;
  top: 12px; right: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 253, 248, .92);
  border: 1px solid var(--line);
  font: 700 12px/1.2 var(--mono);
  color: var(--accent);
}

.fb-pos-finger {
  position: absolute;
  transform: translate(-100%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  font: 700 11px/1 var(--mono);
  pointer-events: none;
}

.fb-pos-legend {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}

@media (max-width: 460px) {
  .fb-pos-tab { width: 40px; height: 40px; }
  .fb-pos-finger { width: 20px; height: 20px; font-size: 10px; }
}