/* 編集シート固有の追記(Stage B1 が排他的に書く)。共通部品の CSS は style.css にある */

/* 固定ライブプレビュー: sheet-body の中で sticky にし、本文だけがその下をスクロールする(§3.4「ここから縦スクロール」)。
   本体の左右パディング 16 を負マージンで打ち消して、背景で下の本文を隠す */
.edit-fixed {
  position: sticky; top: 0; z-index: 3; background: var(--panel);
  margin: 0 calc(-1 * var(--sp-4)); padding: 0 var(--sp-4) var(--sp-3);
  border-bottom: var(--bw) solid var(--line);
}
.edit-fixed .card-preview { cursor: default; }
.edit-fixed .card-preview .card-body { cursor: default; }

/* 題の Badge はタップで強拍試聴(§5.5)。ボタン化しても見た目は Badge のまま */
.edit-title-badge { display: inline-flex; padding: 0; border-radius: 50%; line-height: 0; position: relative; }
.edit-title-badge::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; } /* タップ領域 30 → 40 */
.edit-title-badge .badge { transition: transform 50ms; }
.edit-title-badge:active .badge { transform: scale(.92); }
.edit-title-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 題行 [‹] (B) セクション B [›] … 完了(c02-23)。題の列は 2 字の名前の「セクション FF」まで入る 7.5em に固定し
   (2026-10-16 にセクションの上限を 32 にしたので 6.5em から広げた)、名前の字幅で › が動かないようにする。
   余白は › と 完了 の間に寄せる(360px: 44+8+30+8+112.5+8+44 = 254.5 ≤ 内幅 336 − 完了 52) */
.edit-title { display: grid; grid-template-columns: 44px 30px minmax(0, 7.5em) 44px; column-gap: 8px; align-items: center; min-width: 0; }
.edit-title .edit-title-badge { justify-self: center; }

/* テンポ変化の Switch 行: ラベル(+ 方向タグ)を左、Switch を右。section-label 既定の上下マージンは行側で持つ */
.tc-switch-row { margin-top: 14px; }
.tc-switch-row .section-label { margin: 0; flex: 1; min-width: 0; }
.tc-switch-row .section-label .tag { margin-left: 2px; }
.switch[role="switch"] { padding: 0; }

/* テンポ変化ブロック内の見出し */
.tc-end-label { margin-top: 10px; }
.tc-heading { font-size: var(--fs-caption); color: var(--text-dim); margin-bottom: 6px; }
.tc-panel .curve-chips { margin-bottom: 4px; }
.tc-panel .check-row { cursor: pointer; }

/* 🔗 揃えるリンク(B24): 結果を事前表示する長い文なので、溢れたら省略(伸ばして行を崩さない)。
   開始テンポの「前と揃える」は c02-13 で等式チップに置き換えた(c02-14 の「次と揃える」がこの部品を使う) */
.link-btn { max-width: 100%; }
.link-btn .link-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link-btn[disabled] { cursor: default; }

/* 前のセクションと揃える(c02-13): 見出し 16px(11px --text-dim)+ 等式チップ 104px 固定 ×最大 3 を 1 行に。
   チップの枚数(1〜3)で高さも位置も変わらない。104px に入らない文言(「♩.=2分 → 2分=120」など)だけ、行ごと 11px → 10px に下げる
   (edit-sheet.js の fitMatchChips。チップ間で字の大きさをそろえる)。10px でも入らない稀な値は省略記号 */
.match-block { margin-top: 6px; }
.match-heading { height: 16px; line-height: 16px; margin-bottom: 4px; font-size: var(--fs-caption); color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match-chips { flex-wrap: nowrap; }
.match-text { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match-chips.fit-11 .chip { font-size: var(--fs-caption); }
.match-chips.fit-10 .chip { font-size: var(--fs-axis); }

/* グルーピングチップ列とアクセントドット列の間 */
.grouping-row { margin-bottom: 8px; }
.accent-dot { padding: 0; }
.accent-dot:focus-visible { outline-offset: 1px; }

/* セクション操作の下余白 24(§3.4)は sheet-body の padding-bottom が持つ */
.section-ops .ops-btn[disabled] { cursor: default; }

/* テンポの換算行(c02-05 / c03-01): 値箱の直下に 16px × 2 行 = 32px 固定の読み取り専用。
   幅で中身を変えない(溢れたら省略)。主拍の項だけ --text で濃くする */
.tempo-equiv { height: 32px; margin-top: 4px; font-size: var(--fs-sub); line-height: 16px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.tempo-equiv-line { height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tempo-equiv .eq-strong { color: var(--text); }

/* 単位チップ行(分母 8/16 のみ)と「主拍の間」: SliderRow と同じ「56px ラベル + 部品」の 40px 行 */
.unit-row { margin-bottom: 4px; }
.subdiv-row { margin-bottom: 4px; }
/* 「主拍の間」は chip-64 ×3(c07-10 (a) / X06)。「主拍のみ」(12px w600 × 4 字 ≈ 48.6px)は左右 10px の余白では 70px に伸びて
   [通常][小さく] の 64px とそろわないので、余白を 6px にして 3 個とも幅 64px に固定する(選択でも文言でも幅を変えない A14) */
.subdiv-row .chip-64 { width: 64px; padding: 0 6px; flex: none; }

/* テンポの値箱(開始・終了): 「≈ ♩.=133」「→ ♩.=60」のように長くなるので、✎ の 20px を除いた領域の中央に置く。
   それでも ✎ に掛かるとき(360px の「→ ≈ ♩.=133」)だけ stepper.js が .tight で 16px にする */
.stepper-tempo .stepper-value.editable { padding: 0 20px 0 4px; }
.stepper-tempo .stepper-value.editing { padding: 0; }
.stepper-value.tight { font-size: var(--fs-input); }

/* 単位を切り替えたとき、値箱の記号と数字の差し替えを 120ms でなじませる(§3-5) */
.stepper-value.unit-fade .stepper-text { animation: unit-fade var(--t-color) ease-out 1; }
@keyframes unit-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .stepper-value.unit-fade .stepper-text { animation: none; } }