/* プリセット / 共有 / 設定シート固有の追記(Stage B2 が排他的に書く)。共通部品の CSS は style.css にある */

/* トーストはシート(z 60)の上に出す: 保存 / コピー / 解釈失敗など、シートを開いたまま出す通知があるため */
.toast { z-index: 70; }

/* ---------- プリセットシート ---------- */
.preset-form input:focus-visible { border-color: var(--ink); outline: none; }
.preset-main:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: var(--r-block); }
.preset-more { font-size: 18px; line-height: 1; letter-spacing: 1px; }
.preset-row.expanded .preset-more { color: var(--text); }
/* 収縮中(高さ 0 → 消えるまでの 200ms)は中身を触れないようにする */
.preset-row.removing { pointer-events: none; }
/* 上書き 2 度タップの待ち状態: 文言だけ変わる(幅は min-width 152 で不変)。枠で「待ち」を示す */
.preset-ops .btn.overwrite[data-armed="1"] { border-color: var(--ink); }

/* ---------- 共有シート ---------- */
.share-input { text-overflow: ellipsis; }
.share-textarea:focus-visible { border-color: var(--ink); outline: none; }
.share-textarea.error, .share-textarea.error:focus-visible { border-color: var(--danger); }
.share-textarea::placeholder, .share-input::placeholder, .preset-form input::placeholder { color: var(--text-dim); } /* 読ませる文字なので --text-dim(5.5:1) */

/* ---------- 設定シート ---------- */
.sound-chips { margin-top: 2px; }
/* 保存と履歴の行(c08-04 / c06-19): 別のシートを開く 44px の行。題は左寄せ、値(件数・最終バックアップ)と › は右端。
   件数は 2 桁の固定幅(2ch)+ tabular-nums で、0〜30 件のどれでも「件」と › の位置が動かない */
.setting-row, .latency-summary { height: 44px; justify-content: flex-start; margin: 6px 0 0; padding: 0 10px 0 14px; }
.setting-row-label { flex: 1 1 auto; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; }
.setting-row-value { flex: none; font-size: var(--fs-sub); font-weight: 500; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.setting-row-count { display: inline-block; min-width: 2ch; text-align: right; }
.setting-row .icon, .latency-summary .icon { color: var(--text-dim); }

/* 音と光のずれ補正(GAP3-02): 閉じた details 1 行(.setting-row と同じ 44px の形)。値「+30 ms」は 72px 固定の右寄せスロットで、
   ± を押しても › の位置は動かない。› は開くと ⌄。開いた中身は 1 文・補正(HoldStepper、値箱 96px 固定)・合計行・合わせ方 */
.latency-summary { list-style: none; cursor: pointer; }
.latency-summary::-webkit-details-marker { display: none; }
.latency-summary::marker { content: ''; }
.latency-value { width: 72px; text-align: right; }
.latency-chevron { transition: transform var(--t-move); }
.latency[open] .latency-chevron { transform: rotate(90deg); }
.latency-body { padding: 2px 0 4px; }
.latency-row { display: flex; align-items: center; gap: var(--sp-2); margin: 6px 0; }
.latency-label { flex: none; width: 28px; font-size: var(--fs-sub); color: var(--text-dim); }
.latency-row .stepper { flex: none; }
/* 値箱 96px 固定。✎(右 8px・幅 12px)の分だけ右を空け(文字の箱 72px = 左 2 + 右 22)、最長の「−450 ms」「+300 ms」
   (16px では 78.6px)が ✎ に掛からない 14px にする(実測 68.8px、✎ との間 2.6px) */
.latency-row .stepper-value { flex: none; width: 96px; min-width: 96px; font-size: var(--fs-body); padding: 0 22px 0 2px; }
.latency-row .stepper-value.editing { padding: 0; }
.latency-row .stepper-btn { font-size: var(--fs-input); } /* 「−10」「+10」を値(14px)より目立たせない */
.latency-total { margin: 6px 0; min-height: 18px; font-size: var(--fs-sub); color: var(--text); font-variant-numeric: tabular-nums; }
.latency-try { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: var(--sp-3); align-items: start; margin-top: var(--sp-2); }
.latency-how .setting-desc { margin: 0 0 4px; line-height: 1.6; }
.latency-box-col { display: flex; flex-direction: column; align-items: center; gap: 2px; }
/* 64×64 の拍番号の箱(数字 40px w800)。拍ごとに即時点灯し 70ms で消える(A20。NowCard の拍番号と同じ playhead・同じ時刻) */
.latency-box {
  width: 64px; height: 64px; box-sizing: border-box; border-radius: var(--r-ctl); border: var(--bw) solid var(--line); background: var(--bg);
  display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 800; line-height: 1;
  color: var(--text-faint); font-variant-numeric: tabular-nums;
}
.latency-box.on { color: var(--text); }
.latency-box.flash { animation: latency-flash var(--t-off) ease-out 1; }
@keyframes latency-flash { from { background-color: var(--line); border-color: var(--ink); } to { background-color: var(--bg); border-color: var(--line); } }
.latency-vol { min-height: 16px; margin: 0; font-size: var(--fs-caption); line-height: 16px; color: var(--text-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .latency-chevron { transition: none; } }

/* ---------- 広告(Android アプリ版、ui/ads.js、2026-10-17) ----------
   ⚙・プリセット・共有・編集履歴のシートを開いている間(body.ad-on)だけ、画面のいちばん上に AdMob のバナーが重なる。
   重なる場所(状態バーの下からバナーの高さまで = --ad-top)は中身の無い帯 .ad-slot にして、シートの上端もその下 8px までに収める
   (広告をアプリの中身やボタンに重ねない)。--ad-h は ads.js がバナーの高さ(届くまでは見込みの 60px)を入れる */
/* --safe-area-inset-top はアプリ版で Capacitor が html に書き込む状態バーの高さ(古い WebView でも正しい値)。無い Web 版は env() */
:root { --safe-area-inset-top: env(safe-area-inset-top, 0px); }
body.ad-on { --ad-top: calc(var(--safe-area-inset-top) + var(--ad-h, 0px)); }
.ad-slot { display: none; }
body.ad-on .ad-slot { display: block; position: fixed; z-index: 55; left: 0; right: 0; top: 0; height: var(--ad-top); background: var(--bg); }
body.ad-on .sheet { max-height: min(92dvh, calc(100dvh - var(--ad-top) - 8px)); }
body.ad-on .sheet.sizing-tall { height: min(78dvh, calc(100dvh - var(--ad-top) - 8px)); max-height: calc(100dvh - var(--ad-top) - 8px); }
body.ad-on .sheet.sizing-tall.expanded { height: calc(100dvh - var(--ad-top) - 8px); }