/* v3 の追加スタイル(c07-07)。色は style.css のトークンを var() で使い、#16 進を直書きしない(A19)。
   寸法は、同じ値で役割の合うトークンがあるものだけ var() にした(--sp-* / --fs-* / --bw / --dock-h。見た目は変わらない)。
   残る px・w650・.45 と入力欄の角丸 8 は、寄せると値が変わるので c07-12 / c07-13 の置換表で扱う。
   フォーカス枠は style.css の全体規則 :focus-visible(--ink 2px)に任せ、v3 側では上書きしない。
   test/style-tokens.test.mjs が「styles/*.css に #16 進の色が無い」「未定義の var(--x) が無い」を確かめる */
.app-title small { font-size: var(--fs-sub); color: var(--text-dim); font-weight: 500; }
/* 状態行(c08-01 / X01、practice-bar.js): 旧練習バー(約 130px・3 行)の後継。ヘッダー直下の 1 行で、タップ域 44px(≤699 は 40、--status-h)・文字の箱 28px、
   12px tabular-nums・左寄せ。各スロットが 1 つの button。区切りの「・」や行頭の記号は置かず、間 8px で分ける。
   内幅 328 = 倍率 76 + 範囲 86 + 終わり方・進み 62 + 1周・時間 80 + 間 8×3。
   幅は状態(停止 / カウントイン / 再生、既定 / 既定外)で変えず、375 / 430 / 600px でも伸ばさない(余りは右に残す)。
   X01 の配分 64 / 96 / 64 / 80 を実測で配り直した(決定 3 の見直す条件 4。12px、ヘッドレス Chrome の字形):
   速度アップの「100→150%」は w700 で 64 に入らない。c08-01 では 72 / 88 / 64 / 80 にしたが、c04-01 で倍率スロットを枠 1px の chip に
   したので文字域は幅 − 2。76(文字域 74)にし、範囲から 2px、終わり方から 2px 移した。あわせてスロットの字間を −0.03em(12px で −0.36px)
   詰めた(4 スロットとも同じ字間。倍率ポップの中は詰めない)。字間込みの実測: 倍率「100→150%」69.3(枠の内側に左右 2.3px)、
   「70→100%」61.3。範囲 86 は 2 桁の小節番号どうしの「↻ B 12〜C 10」82.0、最長の「↻ H 99〜H 99」84.1 まで入る。
   終わり方 62 は既定の「止めるまで」59.3 が入る幅。はみ出しは切らず(ellipsis も出さない)間の 8px に逃がす
   (100 周以上の再生中「100/999 周」w700 67.4 は 5.4px はみ出し、次の文字まで 2.6px 空く。字間を詰める前は 70.7 で次の文字に接した)。
   「1周 ≈ 15.0 秒」は 75.9、「残り ≈ 99:59」は 73.0 で 80 に入る(右端は NowCard の右端なので、ここは削らない)。
   範囲 86 は c01-03 の ↻ チップ(96 − 枠 1×2 − 左右 4×2 = 文字域 86、同じ formatLoopRange の短形・同じ字間)の文字域と同じ幅。
   c03-15 などでセクション名が I 以降に増えるときは、両方の幅を実測し直す。幅 360 未満(内幅 < 328)は対象外で、時間スロットが右端で切れる(README「縦の予算」)。
   濃淡(c06-09): 既定値は --text-faint(情報ではなく位置を保つために残す)、既定と違う設定は --ink w700、
   設定ではない値(1 周の時間・残り・経過)は --text-dim。倍率スロットの chip の文字も同じ規則(X01) */
.status-line { display: flex; align-items: center; gap: var(--sp-2); height: var(--status-h); min-width: 0; position: relative; }
.status-slot {
  flex: none; height: var(--status-h); display: flex; align-items: center; text-align: left;
  font-size: var(--fs-chip); font-weight: 400; font-variant-numeric: tabular-nums; color: var(--text-faint);
  letter-spacing: -0.03em;
}
/* 倍率スロット(c04-01 / X01、2026-10-14 決定 3): 押すと倍率ポップを開くので、ここだけ button.chip(高さ 28、枠 1px --line を常設、
   角丸 8)にして、押すとシートが開く他の 3 スロット(枠なしの文字)と描き分ける。塗りは無し(本番 c04-31 が ON の間だけ --ink で塗る)。
   タップ域はスロットの高さ(--status-h)まで ::before で広げる。ポップが開いている間は音量ピル(.dock-pill.open)と同じく枠を --ink に */
.status-slot.chip { height: 28px; min-width: 0; padding: 0; background: transparent; justify-content: center; }
.status-slot.chip::before { top: calc((28px - var(--status-h)) / 2); bottom: calc((28px - var(--status-h)) / 2); }
.status-slot.chip .status-text { height: 26px; line-height: 26px; text-align: center; border-radius: 0; }
.status-slot.chip.open { border-color: var(--ink); }
.status-slot.set { color: var(--ink); font-weight: 700; }
.status-slot.info { color: var(--text-dim); }
.status-text { display: block; width: 100%; height: 28px; line-height: 28px; white-space: nowrap; border-radius: var(--r-chip); }
/* 押せることは押下中の背景で示す(枠・下線・chevron は付けない。決定 10)。背景は文字の箱の外へ 4px(間 8 の半分)広げる。
   倍率の chip は枠の内側を塗る(枠の外へは広げない) */
button.status-slot:not(.chip):active .status-text { background: var(--panel-2); box-shadow: 0 0 0 var(--sp-1) var(--panel-2); } /* 時間スロット(span、押せない)には付けない */
.status-slot.chip:active { background: var(--panel-2); }
@media (hover: hover) {
  button.status-slot:not(.chip):hover .status-text { background: var(--panel-2); box-shadow: 0 0 0 var(--sp-1) var(--panel-2); }
  .status-slot.chip:hover { background: var(--panel-2); }
}
.slot-rate { width: 76px; } .slot-range { width: 86px; } .slot-end { width: 62px; } .slot-time { width: 80px; }
/* 倍率ポップ(c04-01 / X01): 状態行の下端に接して開き、左右端は状態行(= NowCard の左右端)にそろえる。高さ 92(360px 幅で 328×92)。
   中身は左寄せの倍率部品 304 + 左右余白 12(360px 幅でちょうど 328)。下へ開くので、閉じた位置は上へ 8px(音量ポップは下から) */
.rate-pop { position: absolute; top: 100%; left: 0; right: 0; height: 92px; padding: 0 var(--sp-3); display: flex; align-items: center; transform: translateY(-8px); }
/* 倍率部品(rate-control.js。倍率ポップと練習設定の速さ群で共用、X08): 総幅 304 固定の 2 行(間 6)。
   1 行目 = HoldStepper 224(44 + 6 + 値箱 124 + 6 + 44)+ 間 8 + 結果 72。2 行目 = chip-48 ×4(間 6)、右端は [本番](c04-31)の場所 */
.rate-control { width: 304px; flex: none; display: flex; flex-direction: column; gap: 6px; }
.rate-row { display: flex; align-items: center; gap: var(--sp-2); }
.rate-row .stepper { flex: none; width: 224px; }
.rate-row .stepper-value { min-width: 0; }
/* 結果「→ ♩=96」: 右 72px 固定・右寄せ・14px w700。値は 400 × 150% = 600 まで出る。14px で入らないのは分母 2 の「2分」だけで
   (「→ 2分=600」81.3)、その単位のセクションでは rate-control.js が値を 3 桁に置いた幅で測って .tight の 12px にする(69.7。
   値の桁では大きさを変えない。幅 72 は変えない)。他の単位の最長は「→ ♪.=200」71.8・「→ ♬=600」70.1・「→ ♩.=200」69.5・
   「→ ♪=600」66.5・「→ ♩=600」64.2(14px のまま) */
.rate-result { width: 72px; flex: none; text-align: right; font-size: var(--fs-body); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text); }
.rate-result.tight { font-size: var(--fs-chip); }
.rate-chips { flex-wrap: nowrap; }
/* chip-48 の min-width だけだと「100%」(12px w600 37.1 + 余白 20)が 59px に膨らむので、余白 0・幅 48 に固定する(4 個とも同じ幅) */
.rate-chips .chip { width: 48px; min-width: 48px; padding: 0; }
.v3-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.v3-actions .btn { min-height: 40px; }
/* ボタン 4 階層(c07-11): primary = .btn.primary(シートに 1 個)/ secondary = .btn + SVG 14 / danger = .btn.danger(右端)/
   択一・ON/OFF = .chip.ink(倍率 ×4、お気に入り)。新しい部品は作らず既存の .btn / .chip に寄せる */
.v3-actions .btn.danger { margin-left: auto; }
.v3-preset .btn.overwrite { min-width: 152px; }
/* お気に入りチップは名前の行の右端に置く(操作行は [共有][上書き 152]…[削除] の 300px で 360px 幅の内幅 328 に 1 行で収まる) */
.v3-preset-head { display: flex; align-items: flex-start; gap: var(--sp-2); } /* 名前が折り返してもチップは 1 行目の高さ(上 5 = (名前 40 − チップ 30) / 2)に固定 */
.v3-preset-head .v3-preset-load { min-width: 0; }
/* お気に入り: ☆(線画)/ ★(塗り)+ 固定文言。幅 100 = 文字 12×5 + SVG 14 + gap 4 + 左右 10×2 + 枠 1×2(ON/OFF で幅は変わらない)。
   ON の枠 --ink は既存の .chip.ink.selected(JS が付ける) */
.v3-fav { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); min-width: 100px; flex: none; margin: 5px 0 0 auto; }
.v3-fav[aria-pressed="true"] .icon { fill: currentColor; }
.v3-form { display: grid; gap: 14px; margin: var(--sp-4) 0; }
.v3-form label, .v3-file { display: grid; gap: 7px; font-size: 13px; line-height: 1.5; }
/* 入力欄は v2 の入力欄(.preset-form input / .share-input)と同じ色: 沈んだ地 --bg・枠 --line・文字 --text */
/* HoldStepper の ✎ 入力欄(.stepper-input、練習設定の倍率部品)は stepper の見た目のまま(この入力欄の枠・余白を当てない) */
.v3-form input:not([type=checkbox]):not(.stepper-input), .v3-form select, .v3-inline input, .v3-file input { width: 100%; min-width: 0; min-height: 44px; color: var(--text); background: var(--bg); border: var(--bw) solid var(--line); border-radius: 8px; padding: 10px var(--sp-3); font: inherit; box-sizing: border-box; }
.v3-form input:disabled, .v3-form select:disabled { opacity: .45; }
.v3-form h3 { margin: var(--sp-2) 0 0; font-size: var(--fs-title); }
.v3-form .v3-check { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.v3-check input { width: 20px; height: 20px; accent-color: var(--ink); } /* UI 色は無彩色(B7)。以前の青はセクション A・G の色と同系で紛らわしかった */
/* 🔖 の「お気に入りのみ」(c07-10 (b)): ON/OFF の 1 項目は Switch。部品は style.css の .switch-row(高さ 40)/ .switch(40×22)で
   テンポ変化の行と同じ。文字はこの欄の他のラベルと同じ 13px。ON 色はシートの --sec を --ink に差し替えて出す(preset-sheet.js) */
.v3-switch-row { gap: var(--sp-3); font-size: 13px; line-height: 1.5; color: var(--text); }
/* エラーは色で示さない(B8): ⚠ SVG 14px + 文字 --text の 1 行様式(c07-34 の様式に合わせる)。⚠ は JS が先頭に入れる */
.v3-error { color: var(--text); font-size: 13px; line-height: 1.6; display: flex; align-items: flex-start; gap: var(--sp-2); }
.v3-error .icon { flex: none; margin-top: 3px; } /* 14px の ⚠ を 1 行目(行高 20.8px)の中央に置く */
.v3-error:empty { display: none; }
/* 反映時機の固定 1 行(c06-06。c06-05 の編集シートと同じ部品): 11px・高 16・1 行。文言は formatApplyTiming の 2 種 */
.apply-timing { margin: 0; height: 16px; line-height: 16px; font-size: var(--fs-caption); color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 練習設定シートの sticky 固定部(編集シートの .edit-fixed を流用)。左に反映時機の 1 行、右端に [リセット](c06-09) */
.practice-fixed { padding-top: var(--sp-1); padding-bottom: var(--sp-2); display: flex; align-items: center; gap: var(--sp-2); }
.practice-fixed .apply-timing { flex: 1 1 auto; min-width: 0; }
/* [リセット]: 高さ 32(タップ域は ::before で 40)・12px。既定のときは消さずに押せない表示(.btn[aria-disabled] の .35)で位置を保つ */
.practice-reset { flex: none; position: relative; height: 32px; padding: 0 var(--sp-3); font-size: var(--fs-chip); }
.practice-reset::before { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
/* 状態行のスロットから開いたときの行き先の見出し(繰り返す範囲 / 終了条件): 1.2 秒だけ --panel-2 の地で明るくして消す */
/* 文字の位置は他の見出しと同じ(地の分だけ左右に張り出す)。.v3-form h3 の margin より強い指定にする */
.v3-form .practice-group-head { border-radius: var(--r-chip); margin: var(--sp-2) calc(-1 * var(--sp-2)) 0; padding: 2px var(--sp-2); }
.practice-group-head:focus { outline: none; }
.practice-group-head:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; }
.practice-group-head.practice-target { animation: practice-target 1200ms ease-out 1; }
@keyframes practice-target { from { background-color: var(--line); } to { background-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .practice-group-head.practice-target { animation: none; background-color: var(--panel-2); } }
/* 読み上げ専用の文字(画面には出さない)。状態行の時間スロット(押せない表示)の読み上げ文「1周 約 15.0 秒」に使う */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* 速度アップのライブ要約(c04-14): 速度アップの欄の直下に固定高 2 行(各 20px・12px・tabular-nums・1 行)。周ごと = 0 のときも
   空のまま高さ 40 を保つ。2 行目の「(A 基準)」は 10px。再生中は今の段の数字に --sec(基準セクションの色)の下線を引く
   (下線と文字色だけで、幅は変えない)。1 行に入らない値の組では、practice-sheet.js が入る形(1 行目は先頭の倍率・刻みを省く、
   2 行目は → の前後を詰める)を選ぶ。min-width: 0 はグリッドの列を長い 1 行で押し広げないため(はみ出しは ellipsis で切る) */
.ramp-summary { height: 40px; min-width: 0; }
.ramp-line { margin: 0; height: 20px; line-height: 20px; font-size: var(--fs-chip); color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.ramp-base { margin-left: var(--sp-1); font-size: var(--fs-axis); }
.ramp-tempo.now { color: var(--text); text-decoration: underline 2px var(--sec); text-underline-offset: 3px; }
.v3-inline { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0; }
.v3-inline input { flex: 1 1 180px; }
.v3-preset { border-top: var(--bw) solid var(--line); padding: 18px 0; }
.v3-preset-load { border: 0; background: transparent; color: var(--text); font: inherit; font-weight: 650; font-size: 16px; text-align: left; padding: var(--sp-2) 0; cursor: pointer; overflow-wrap: anywhere; }
.v3-preset summary, .v3-backup > summary { cursor: pointer; min-height: 44px; display: list-item; align-content: center; font-size: 13px; }
.v3-backup { border-top: var(--bw) solid var(--line); padding-top: var(--sp-1); } /* 🔖 末尾のバックアップ(書き出し・復元)。既定で閉じる(c08-04 / X11) */
.v3-preset details { margin-top: var(--sp-2); }
.v3-library .setting-desc { overflow-wrap: anywhere; }
/* 🔖 の空状態(c05-01)。全 0 件: 一覧の位置に高さ 160 固定の破線枠(AddButton .add-btn と同じ様式 = 破線 --line・角丸 14・文字 --text-dim 14px)。
   中身は説明 2 文(左寄せ。文ごとに行を改め、360・375・430px で 3 行、600px で 2 行)+ 中央の「例を 2 件読み込む」(.btn 高さ 40)。
   幅で行数が変わっても枠の高さは変えない。下のバックアップの上線に破線が接しないよう、下に 16px 空ける(上は保存フォームの余白 16px)。
   日本語の折り返しは文節で(word-break: auto-phrase、対応しないブラウザは通常の折り返し)。「1 件」は JS が改行しない空白でつなぐ */
.v3-preset-empty {
  height: 160px; margin-bottom: var(--sp-4); padding: 0 var(--sp-4); border: var(--bw) dashed var(--line); border-radius: 14px; color: var(--text-dim); font-size: var(--fs-body);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3);
}
.v3-preset-empty p { margin: 0; align-self: stretch; line-height: 1.6; word-break: auto-phrase; overflow-wrap: anywhere; }
.v3-preset-empty p span { display: block; }
/* 絞り込み 0 件: 一覧の位置に 1 行(条件を書いた文 + 右端の [絞り込みを解除])。プリセット行と同じ上線で、高さ 56 固定(条件が変わっても動かない)。
   文は以前の「該当するプリセットがありません。」(.setting-desc)と同じ 12px・--text-dim で、行高 18 の 2 行まで。
   ボタンは ≤420px で操作行の .btn と同じく 12px・左右 10(幅 107)にし、360px 幅の文字域を 213px(17 字 × 2 行)取る。
   長い語は format.js が切る(1 語 10 字、検索語と曲の 2 語なら各 5 字)ので、いちばん長い 3 条件
   「『吹奏楽コン…』の『あいうえお…』に一致するお気に入りはありません」(33 字)も 2 行に入る(tools/scenarios/29_c05-01.mjs で実測) */
.v3-preset-nomatch {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-2); align-items: center;
  height: 56px; padding: var(--sp-2) 0; border-top: var(--bw) solid var(--line); color: var(--text-dim); font-size: var(--fs-sub);
}
.v3-preset-nomatch p { margin: 0; min-width: 0; line-height: 18px; word-break: auto-phrase; max-height: 36px; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.v3-file { margin: var(--sp-5) 0; }
/* 流れ行(c07-18。section-row.js の renderFlowLine): プリセット要約・編集履歴の行・共有シートの副題の直下で同じ部品。
   12px・--text-far・tabular-nums、行高 20(badge-18 が収まる)。既定は 1 行 ellipsis(高さ 20 固定)。
   1 項(Badge + '4/4 ♩=120 ×8 →')は .flow-seg で折り返さず、区切りの矢印は前の項の末尾に付くので、折り返すのは矢印の後ろの空白だけ
   (2 行目が「→」「→ ↻」だけで始まらない。テンポ変化の → と区切りの → が行末で紛れない) */
.flow-line { display: block; margin: 6px 0; min-width: 0; height: 20px; line-height: 20px; font-size: var(--fs-sub); font-weight: 400; color: var(--text-far); text-align: left; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow-seg { white-space: nowrap; }
.flow-line .badge { vertical-align: middle; margin: -2px 3px 0 0; } /* middle だけだと Badge の中心が文字の中心より約 1px 下(実測)。上 −2px で差 0.3px 以内 */
/* 2 行まで(編集履歴の行): 1 行に入らなければ区切りで折り返し、2 行目の末尾を ellipsis(2026-10-14 決定 9)。高さは 20 か 40 で、行(64)の中で上下中央 */
.flow-line.two-lines { height: auto; max-height: 40px; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
/* 編集履歴の行(c07-18): 「時刻 56px 固定 + 流れ行」の 2 セル、高さ 64 固定(流れ行が 1 行でも 2 行でも、セクション数・テンポ変化の有無で変えない)。
   時刻は流れ行の 1 行目にそろえる(行高 20 の上揃え。中身のかたまりを行の上下中央に置く) */
.v3-history {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--sp-2); align-items: start; align-content: center; justify-content: stretch;
  width: 100%; height: 64px; margin: 10px 0; padding: 0 var(--sp-3); text-align: left; white-space: normal;
}
.v3-history .flow-line { margin: 0; }
.v3-history-time { line-height: 20px; font-size: var(--fs-sub); font-weight: 400; color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
/* 編集履歴の行のラベル(c05-24。共有の受信で残した「共有リンクを開く前」)。流れ行の先頭に置き、--text で流れ行(--text-far)より明るく。
   ラベル + 「 ·」は折り返さない 1 かたまり(折り返すのはその後ろの空白と、流れ行の項の間だけ) */
.v3-history-lead { white-space: nowrap; }
.v3-history-label { color: var(--text); font-weight: 600; }
/* 共有リンクで初めて開いた人への ▶ の縁取り(c05-24 の項 3、2026-10-14 決定 10。dock.js の cuePlay): ▶ の外側 8px(間 6 + 線 2、--ink)の輪を
   1 回だけ 120ms 点ける。点灯は即時、消灯は --t-off(style.css 冒頭の規則)。outline で描くのでレイアウトも .app のスクロール量も変わらない
   (疑似要素で描くと .app のスクロールできる高さが 8px 増える)。フォーカスの枠(:focus-visible)より強いので、出ている 120ms だけ置き換わる。
   ▶ はドック(72)と同じ高さで、下に safe-area の余白が無い端末では輪の下端(▶ の下 8px)は画面の外になる */
.play-btn.cue, .play-btn.cue-off { outline: 2px solid var(--ink); outline-offset: 6px; }
.play-btn.cue-off { outline-color: transparent; transition: transform 80ms, background-color var(--t-chip), outline-color var(--t-off); }
.v3-section-label { font-size: var(--fs-sub); color: var(--text-far); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 行の高さと間隔は style.css の .card-label(c01-16) */
/* NowCard のラベル行「名前 · 譜面 N小節」: 高さ 22px 固定(空でも確保し、どの段でも縮めない)・16px w700・左寄せ・1 行 ellipsis。
   高さは style.css の --now-h の内訳に含む(c01-17、X03・X09、ラベル行は 22px に揃える PM 決定)。主拍のテンポはテンポ行が出す(c03-02) */
.v3-now-label { flex: none; height: var(--now-label-row); line-height: var(--now-label-row); font-size: var(--fs-now-label); font-weight: 700; color: var(--text-far); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .v3-actions .btn, .v3-preset-nomatch .btn { padding-left: 10px; padding-right: 10px; font-size: var(--fs-chip); } }
/* メインの縦構造は style.css の .app(c07-23 主案 A: v2 と同じ grid、body はスクロールせず一覧だけがスクロール、ドックは最終行)。
   ここで上書きしない(以前の flex・body スクロール・ドック fixed・一覧 max-height 60dvh・下余白 88px は撤去した) */

.v3-export-preview textarea { width:100%; box-sizing:border-box; background:var(--bg); color:var(--text); padding:10px; border:var(--bw) solid var(--line); border-radius:8px; margin:10px 0; font:var(--fs-sub) monospace; }
.v3-export-preview summary { min-height:44px; align-content:center; cursor:pointer; }

/* 保存失敗の帯(c06-21 / c06-22、X10): ヘッダー直下に 2 行固定 48px。⚠ + 文字 + --line 枠(アンバー・赤は使わない B8)。
   文字域は 360px 幅で 328 − 枠 2 − 左右余白 13 − 間 8 − ボタン 64 = 241px(2 行目 17 字 × 13px = 221px が 1 行に収まる) */
.save-band {
  display: grid; grid-template-columns: minmax(0, 1fr) 64px; column-gap: var(--sp-2); align-items: center;
  height: 48px; padding: 0 3px 0 10px; border: var(--bw) solid var(--line); border-radius: var(--r-ctl);
  color: var(--text); font-size: 13px;
}
.save-band-text { margin: 0; min-width: 0; }
.save-band-line { display: block; height: 19px; line-height: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.save-band-line .icon { vertical-align: -2px; margin-right: var(--sp-2); } /* ⚠ 14px・文字との間 8px は他のエラー(.v3-error)と同じ */
.save-band-btn { width: 64px; padding: 0; }

/* ヘッダー直下の行(2026-10-14 決定 6、top-row.js): 保存失敗の帯と同じ grid の 2 行目を使い、同時に出すのは 1 本(帯が優先)。高さ 40 */
.app > .top-row { grid-row: 2; }
.top-row { height: 40px; display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
/* LINE の行(c05-28 の項 1): ⚠ + 文字(12px・2 行まで)+ [ブラウザで開く](104×40)。枠は --line(アンバー・赤は使わない B8) */
.top-row-line { box-shadow: inset 0 0 0 var(--bw) var(--line); border-radius: var(--r-ctl); padding-left: 10px; }
.top-row-text { flex: 1 1 auto; min-width: 0; margin: 0; display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sub); line-height: 16px; color: var(--text); }
.top-row-text span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.top-row-text .icon { flex: none; }
.top-row-btn { flex: none; width: 104px; height: 40px; padding: 0 6px; font-size: 13px; white-space: nowrap; }
/* ホーム画面追加の行(c05-30 の項 2): 行全体が 1 つの button(13px、--line 枠、⚠ なし)+ 右端の [×](44×40) */
.top-row-go {
  flex: 1 1 auto; min-width: 0; height: 40px; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: 0 var(--sp-3); border: var(--bw) solid var(--line); border-radius: var(--r-ctl); font-size: 13px; color: var(--text); text-align: left;
}
.top-row-go .icon { color: var(--text-dim); }
.top-row-go:active { background: var(--panel-2); }
.top-row-close { flex: none; width: 44px; height: 40px; color: var(--text-dim); }
@media (hover: hover) { .top-row-go:hover { background: var(--panel-2); } }
/* ⚙ › このアプリのホーム画面追加の案内(c05-30 の項 1) */
.a2hs-block { margin-top: var(--sp-3); }
.a2hs-block .btn { margin-top: var(--sp-1); }