/* 筋トレメモ — 素の CSS 1 ファイル + CSS 変数。ライブラリなし。 */

:root {
  /* ★ UA が描くものをテーマに追従させる（adr/ux/declare-color-scheme-for-ua-widgets.md）。下の
     `button, input { color: inherit }` は UA の ButtonText を上書きするが、
     UA が描く**背景**（ButtonFace ≈ #efefef）はこの宣言が無いとライトのまま
     取り残される。ダークでは文字が --text = #eceef1 になり、コントラストが
     1.01:1 になって消える。効く先は自前で色を持たないもの全部 —
     select のネイティブピッカーとスクロールバー。自前で background を持つ入力欄
     （.text-input / .cond-fields input / .target-select）は見た目が変わらない。
     ★ input[type=file] の「ファイルを選択」も受益者だったが、書き出し / 読み込みの
     input を隠してボタンから開く形にしたので外れた
     （adr/ux/hidden-file-input-behind-a-button.md）。宣言自体は残りの 2 つに要る。 */
  color-scheme: light dark;

  --bg: #f7f7f8;
  --surface: #ffffff;
  --text: #16171a;
  --muted: #6b7280;
  --line: #e3e4e8;
  --accent: #2f6fd0;
  --accent-text: #ffffff;
  --warn: #b4560c;
  --hero: #101114;

  /* 経過の濃淡。★ 部位カラー × 経過濃淡の二重符号化は色から意味が読めないので
     チップは単色系に統一し、濃さだけで新しさを示す */
  --chip-0: #dfe6f2;
  --chip-1: #c6d4ea;
  --chip-2: #aec2e2;
  --chip-3: #93aed8;
  --chip-none: #eceef1;

  --tabbar: 56px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0b0c;
    --surface: #17181b;
    --text: #eceef1;
    --muted: #9aa0aa;
    --line: #2a2c31;
    --accent: #6fa4ec;
    --accent-text: #0b0b0c;
    --warn: #e2a06a;
    --hero: #ffffff;

    --chip-0: #23303f;
    --chip-1: #2b3f57;
    --chip-2: #34506f;
    --chip-3: #3d6188;
    --chip-none: #1e1f23;
  }
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: contain;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  /* ボトムタブに本文が隠れないぶんの余白 */
  padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom));
}

button,
input {
  font: inherit;
  color: inherit;
  touch-action: manipulation;
}

/* ★ 16px 未満だとフォーカス時に iOS がページごとズームする */
input {
  font-size: 16px;
}

/* ★ フォーカスリングを明示する。既定のリングが保証するのは「地の色に対して見えること」
   だけで、このアプリには --accent / --warn でベタ塗りしたコントロール
   （.primary / .opt.on / .seg-btn.active / .notice の ✕）があり、その上では塗りに沈む。

   :focus ではなく :focus-visible にするのは、指でタップしただけの要素にリングを出さない
   ため（Safari はボタンをタップしてもフォーカスを与えないが、Chromium は与える）。
   ★ ただし <dialog> の show_modal() だけは例外で、UA が能動的に中の先頭へフォーカスを
   与える。**WebKit はそれを :focus-visible と判定する**ので、指で開いただけのシートに
   リングが出ていた（adr/ux/native-dialog-for-sheets.md に実測表がある）。

   :where() で包んで詳細度を 0 にしてある。個別の上書き（下の各ブロック）が
   クラス 1 個で勝てるようにするため。

   ★ `outline: none` はこのファイルに 2 か所だけある。.sheet（<dialog> 自身＝押せない器）と
   .icon-btn（同じ節のすぐ下でグリフ側に出し直している）で、**操作できる要素からは
   1 つも消していない**。他所では書かないこと。 */
:where(button, a:any-link, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 塗りの上ではリングを地色側で抜く。--accent-text は「強い塗りの上に載せる色」として
   モード間で反転するトークン（.notice のコメントに実測値がある）。
   offset を負にして塗りの内側へ入れるのは、外側に出すと --accent 同士が接して
   境界が消えるため */
.primary:focus-visible,
.opt.on:focus-visible,
.seg-btn.active:focus-visible {
  outline-color: var(--accent-text);
  outline-offset: -4px;
}

/* ★ .segmented は overflow: hidden で、.seg-btn は親の content box を隙間なく埋める。
   外側（+2px）に出したリングは親の外なので**上下の辺が丸ごとクリップされ**、隣のボタンに
   重なった縦棒だけが残る。.active は既に内側（-4px）なので無事だった。非 active も揃える */
.seg-btn:focus-visible {
  outline-offset: -4px;
}

/* ★ アイコンボタンだけはリングを**箱ではなくグリフ**に出す。
   .icon-btn は 44px 角（タップ標的の規約値。縮めない）なのに中身は 20px の .icon なので、
   箱に沿わせると offset 2 + 幅 2 で外形 52px の角ばった四角になり、グリフの四辺に 12px の
   空白を挟んでリングが立つ。しかも 44px の箱は親にぴったり収める前提で置かれているので、
   その外へ 4px 出た時点でどこかを突き抜ける（シートの ✕ は上辺が .sheet の角丸の外＝
   黒幕の上に出て、**上だけ長い**線に見えていた。セット行の ✕ は区切り線と padding で
   グリフが箱の中心からずれており、リングとの間隔が左右で食い違う）。

   グリフ基準にすると、どの箱に入っていても 20px の中心に外形 32px の円が出る。
   32px = 44 - 6*2 なので 44px の標的の内側に必ず 6px 余り、親からはみ出しようがない。
   箱の padding にも .set-row の区切り線にも影響されない。

   ★ box-shadow ではなく outline のまま出す。強制カラーモードで色を差し替えてもらえるのが
     outline だから（adr/ux/focus-ring-and-heading-order.md が box-shadow の二重リングを
     見送ったのと同じ理由）。
   ★ :has(> .icon) で門番する。中身が .icon でない .icon-btn が将来現れたときに
     outline: none だけが残って**リングが消える**のを防ぐ。門番から外れた側は上の既定
     （箱の 52px 角リング）に戻るだけで、無い状態にはならない。 */
.icon-btn:has(> .icon):focus-visible {
  outline: none;
}

.icon-btn:focus-visible > .icon {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  /* .icon は背景も枠も持たないので、この角丸はリングの形だけを決める */
  border-radius: 50%;
}

/* ★ 通知の ✕ だけはリングが --warn のベタ塗りの上に載る。--accent は --warn の上で
   コントラスト light 1.01 / dark 1.16（＝見えない）。上の .primary と同じ理屈で地色側へ抜く。
   --accent-text × --warn の実測値は .notice のコメントにある（light 4.91 / dark 8.58）。
   offset を負にする必要は無い。リングはグリフ側にあって塗りの内側に収まっている */
.notice .icon-btn:focus-visible > .icon {
  outline-color: var(--accent-text);
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
}

.muted {
  color: var(--muted);
}

/* ── 画面の外枠 ─────────────────────────────────────────────────────────── */

.screen {
  padding: 12px 14px 24px;
  max-width: 640px;
  margin: 0 auto;
}

/* ── ボトムタブ ─────────────────────────────────────────────────────────── */

/* ★ position: fixed / sticky の要素は z-index を省くと重なり順が **DOM 順**で決まる。
   後に来る <nav class="bottom-tabs"> が前面に出て、実際に 2 つ壊れていた:
   1. シート下端がタブバーに隠れ、「種目を追加」の最後の種目（レッグレイズ）が
      押せない。利用者には「体幹の種目は 3 つしかない」ように見える
   2. inset:0 の backdrop もタブバーを覆えず、シート表示中にタブが押せる。
      隠れた種目を狙ったタップが別タブへの遷移になり、入力を見失う（こちらが重症）

   シートは adr/ux/native-dialog-for-sheets.md でネイティブ <dialog> + show_modal() に移したので、この綱渡りから
   降りている。top layer は z-index の外側にあって常に通常フローより前面に出るし、
   背景は UA が inert にするので 2 の「裏のタブが押せる」も構造的に起きない。
   残る fixed / sticky にだけ明示的に値を置く。将来また fixed 要素を足すときは、
   まずこの一覧に並べて順序を決めること。

   現在の重なり順:
     [data-drag="lift"]    1  … ドラッグ中のカード / セット行 / メニューの「選択中」。
                                兄弟より前へ出るだけで、sticky の帯より下なのが正しい
     .add-wrap（sticky）   9  … タブバーより下
     .bottom-tabs         10
     .sheet（<dialog>）   top layer … z-index を持たない（持っても効かない）

   ★ シートの中は <dialog> が作る別の重なり文脈なので、上の並びとは勝ち負けしない。
     その中だけの順:
     [data-drag="lift"]    1  … ドラッグ中の「選択中」の行
     .rtn-save（sticky）   2  … メニュー編集シートの保存帯。**掴んだ行より上**。
                                ここを 1 のままにすると DOM 順（.rtn-save が後ろ）に
                                頼ることになり、どちらが上かが「たまたま」で決まる。
                                帯の下へ潜るのが正しい向きなのは .add-wrap と同じで、
                                下端へ運ぶ指は帯に届く前に端の自動スクロールに入る */
.bottom-tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-btn {
  flex: 1;
  min-height: 44px;
  height: var(--tabbar);
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 12px;
}

.tab-btn.active {
  color: var(--accent);
  font-weight: 600;
}

/* ★ iOS のキーボード表示中は position:fixed 要素が入力欄に被る（standalone では
   interactive-widget=resizes-visual が無視される既知バグ）。最小で確実な対策として
   入力フォーカス中はタブバーごと隠す。DevTools では再現しない項目。 */
.kb-open .bottom-tabs {
  display: none;
}

/* ★ タブ切替に演出は置かない。トレ中に毎回 0.2s の横スライドを見るのが煩わしく、
   方向つき View Transition は入れた当日に撤去した。切替は即時が最速で最良。
   経緯は adr/ux/directional-tab-transitions.md（破棄）*/

/* ── 通知・注意書き ─────────────────────────────────────────────────────── */

/* ★ .notice と .install-hint で規則を共有しない。前者は「閉じられる一時通知」で
   ベタ塗り、後者は「常駐する警告」で枠線と、役割もトーンも別物。まとめると
   一方を触った次の人がもう一方の見た目を無言で変える */
.notice {
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 14px 0;
  background: var(--warn);
  /* ★ #fff 直書きだとダークで破綻する。--warn はライトが濃橙 #b4560c、ダークが
     淡橙 #e2a06a と明度が反転するため、白固定では実測 light 4.91 / dark 2.22 になる。
     --accent-text は「強い塗りの上に載せる文字色」でモード間で反転するトークンなので、
     ここに使うと light 4.91（据え置き）/ dark 8.58 になる。 */
  color: var(--accent-text);
}

.notice span {
  flex: 1;
}

/* 記録タブ末尾の警告バナー。押すと手順シートが開く。
   ★ 本文を --warn にしない。ダークの --warn は淡橙 #e2a06a で、輝度比だけなら
     #0b0b0c 上で約 8.9 あるが、13px の日本語を橙一色で 2 行流すと読みづらい。
     警告であることは枠線と CTA の色で示し、文字は --text / --muted に任せる。
   ★ .notice のようなベタ塗りにもしない。塗りは「閉じられる一時通知」の側に残す。 */
.install-hint {
  /* 箱は <div>。中身のボタン（シートを開く）と ✕（今後表示しない）を横に並べる。
     ✕ を上端に寄せるので align-items は flex-start */
  display: flex;
  align-items: flex-start;
  margin: 16px 0 0;
  padding: 4px 4px 4px 12px;
  border: 1px solid var(--warn);
  border-radius: 10px;
  font-size: 13px;
}

/* 押すと手順シートが開くほう。こちらが <button> なので UA 既定の枠・中央寄せ・
   shrink-to-fit を打ち消す（枠は箱側が持つ）。appearance:none は付けない
   （WebKit の UA テーマ問題は select の menulist 固有で、素の button +
   background + border-radius は .primary / .pick などで通っている）。
   ★ 横並びにしない。iPhone 幅では見出しと「追加のしかた ›」が横幅を取り合って
     見出しが 2 行に折り返す。縦に積んで CTA だけ右寄せにすると 3 行で収まる
     （320px 幅までいくと 4 行になるが実害は無いので許容する） */
.install-hint-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-height: 44px;
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--muted);
  text-align: left;
}

/* 見出しだけ 1 行取って本文色にする。2 行目は理由なので --muted のまま流す */
.install-hint-text strong {
  display: block;
  color: var(--text);
}

.install-hint-cta {
  align-self: flex-end;
  color: var(--warn);
  font-weight: 600;
}

/* ── 新機能のお知らせバナー ─────────────────────────────────────────────── */

/* ★ .notice / .install-hint と規則を共有しない（styles.css 冒頭の判断と同じ理由。
   .lbl-* が .opt を共有しなかったのもこれ）。前者は「閉じられる一時通知」で
   ベタ塗り、後者は「常駐する警告」で --warn の枠線。こちらは警告でも一時通知でも
   ない「お知らせ」なので、色もトーンも別に持つ。.install-hint を出発点に
   トーンだけ差し替えてある。 */
.whatsnew {
  display: flex;
  align-items: center;
  /* ★ 幅は .screen の列に揃える: max-width 640px + auto で中央寄せ。.notice の
     margin（10px 14px 0、全幅）をそのまま真似ると PC で「全幅の帯の下に 640px の
     列」という不揃いになる。.notice は例外時にしか出ないので今まで誰も気にして
     いないが、こちらは全利用者が次のリリースで必ず見る */
  max-width: 640px;
  margin: 10px auto 0;
  padding: 4px 4px 4px 10px;
  /* ★ --warn ではなく --surface 地 + --accent の左罫線にする。警告ではなくお知らせ
     なので警告色を使うと意味を読み違えられる。「薄い accent 地」に使える既存
     トークンは無い（--chip-0..3 は経過濃淡の意味を持ち、color-mix はファイル内
     0 件）ので、地色は既存の --surface に任せ、意味は罫線だけに持たせる */
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  font-size: 13px;
}

.whatsnew-body {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  /* ★ min-width: 0 が無いと flex item は内容の幅より縮まないので、
     .whatsnew-text の text-overflow: ellipsis が効かない */
  min-width: 0;
  /* ★ 高さは 1 行に固定する。件数や文言の長さでバナーの高さが変わると、記録タブの
     縦を必要以上に食う（他タブより記録タブでの縦の余白が貴重なため優先した） */
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  text-align: left;
}

.whatsnew-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.whatsnew-cta {
  flex-shrink: 0;
  color: var(--accent);
  font-weight: 600;
}

/* ── 記録タブ（選択日の入力欄） ─────────────────────────────────────────── */

/* カレンダーと入力欄の境。上に月フッタ、下に日付見出しが来る */
.day {
  display: block;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

/* h1 ではなく h2。1 画面に載るカレンダーの月見出しが h1 を持つ（adr/ux/focus-ring-and-heading-order.md） */
.day-head h2 {
  font-size: 18px;
}

.day-head.past h2 {
  color: var(--warn);
}

.badge {
  font-size: 12px;
  color: var(--muted);
}

.past-banner {
  margin: 6px 0 0;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--warn);
  color: var(--warn);
  font-size: 12px;
}

/* ★ 経過と部位チップは常時 1 行。カレンダーが上に載って縦が伸びたので、
   以前の 34px ヒーロー + 中央寄せチップを置く余地は無い。
   出し分け（トレ前 / トレ中）もやめて 1 形態に統一してある */
.hero {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 2px 0 10px;
  font-size: 12px;
  color: var(--muted);
}

.hero-elapsed {
  white-space: nowrap;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  background: var(--chip-none);
  /* ★ --muted ではなく --text。--muted は「--bg / --surface の上に置く」前提の色なので、
     チップの塗り（--chip-0..3）の上では日数側のコントラストが足りない。
     実測: --muted は chip-3 の上で dark 2.45 / light 2.14（いずれも 4.5 未満）。
     --text にすると dark 5.54 / light 7.93 になり両モードとも基準を満たす。
     「胸 3d」の 3d は眺めるための実データなので、ここは読めないと困る。
     部位名との階層は .chip b の font-weight で保つ。 */
  color: var(--text);
}

.chip b {
  font-weight: 600;
  color: var(--text);
}

.chip[data-recency="fresh"] {
  background: var(--chip-3);
}
.chip[data-recency="recent"] {
  background: var(--chip-2);
}
.chip[data-recency="stale"] {
  background: var(--chip-1);
}
.chip[data-recency="old"] {
  background: var(--chip-0);
}

.chip i {
  font-style: normal;
}

/* ── コンディション ─────────────────────────────────────────────────────── */

.condition {
  margin: 4px 0 12px;
}

.cond-fields {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.cond-fields label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}

.cond-fields .note {
  flex: 1;
}

.cond-fields input {
  min-height: 44px;
  width: 5.5em;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.cond-fields .note input {
  width: 100%;
}

/* ── 種目カード ─────────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
  scroll-margin-top: 12px;
}

.card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-head h3 {
  flex: 1;
  font-size: 16px;
}

.group-name {
  font-size: 12px;
  color: var(--muted);
}

/* ★ **3 列を全エントリで揃える。** 日付は "8/3 (月)" と "8/17 (月)" で幅が違うので、
   エントリごとに flex で組むとセット列の開始位置が行ごとにずれ、
   **縦に数字を読む**という履歴の目的が崩れる（日付表記にしたのはそのためだった）。
   列の実体を親が 1 つ持ち、各エントリは subgrid でそれを借りる。
   ★ subgrid は Baseline widely available（Safari 16 / Chrome 117）なので
   フォールバックを持たない（adr/architecture/browser-support-policy.md）。
   ★ row-gap で行間を作るので `.last-row` 側に margin を持たせない。
   gap は「間だけ」に入るので、件数 1（既定）のときは 1px も増えない */
.last-rows {
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  row-gap: 8px;
  margin-top: 4px;
}

.last-row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: baseline;
  column-gap: 10px;
  font-size: 12px;
  color: var(--muted);
}

/* ★ 日付は**左**を揃える（右揃えにするとブロックの左端がぎざぎざになる）。
   桁数のぶんの差は日付列の右側に出て、セット列の開始位置は動かない */
.last-row .when {
  font-variant-numeric: tabular-nums;
}

.last-row .sets {
  font-variant-numeric: tabular-nums;
}

/* 指標は右端で**桁を揃える**。列幅は max-content なので、揃えるには終端寄せが要る */
.last-row .metric {
  justify-self: end;
  font-variant-numeric: tabular-nums;
}

.copy {
  margin-top: 8px;
}

.sets-editor {
  margin-top: 8px;
}

.set-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* ★ 行内の折り返し（.warn / メモ）を上の行に寄せる。行間は padding 3px+3px = 6px
     なので、折り返し行の gap を 6px のままにすると、その行が上下どちらの set-row に
     属するか等距離で読めない。.warn にも潜在していた問題が、メモ欄を足して実害になった */
  gap: 2px 6px;
  padding: 3px 0;
}

/* ★ この番号が行を掴むハンドルでもある（adr/ux/drag-to-reorder-in-record-tab.md）。
   専用のグリップを足さないための選択で、「番号 ＝ 順番」なので意味も一致する。
   見た目は 1px も変えていない — 変えると 3 行ぶんの装飾が入力欄と競合する。 */
.set-no {
  position: relative;
  width: 1.4em;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* ★ 1.4em @12px = 16.8px は指で掴むには細い。**レイアウトを 1px も動かさずに**
   ヒット領域だけ広げる（position:relative は flex アイテムの配置に影響しない）。
   左 -8px はカードの内側余白側、右 -4px は gap 6px（.set-row）の内側なので重量欄に
   食い込まない。上下 -14px は、行が 44px の入力欄で決まる高さの中で中央に来ている
   ぶんを外へ広げる。.warn / .set-note が 2 行目へ折り返しても、この箱は .set-no
   自身が基準なので隣の行のハンドルとは重ならない。 */
.set-no::before {
  content: "";
  position: absolute;
  inset: -14px -4px -14px -8px;
}

.set-row .num {
  width: 4.2em;
  min-height: 44px;
  padding: 4px 8px;
  text-align: right;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  font-variant-numeric: tabular-nums;
}

.set-row .unit,
.set-row .times {
  font-size: 13px;
  color: var(--muted);
}

/* ★ 削除は入力欄と地続きにしない。margin-left:auto で右端へ寄せたうえで、
   区切り線と内側余白を足して回数欄から離す。
   auto を外して margin-left を固定値にすると ✕ が回数欄の直後（gap 6px ＋ 余白）に
   来てしまい、離すつもりが今より押しやすくなる。 */
.set-row .icon-btn {
  margin-left: auto;
  padding-left: 12px;
  border-left: 1px solid var(--line);
}

.warn {
  flex-basis: 100%;
  padding-left: 1.9em;
  font-size: 11px;
  color: var(--warn);
}

/* ── セットメモ（adr/ux/exercise-and-set-notes-behind-one-toggle.md）───────────
   .warn と同じ手（flex-basis で 1 行占有して 2 行目に落とす）。左を 23px 空けるのは
   .set-no（1.4em @12px = 16.8px）+ gap 6px = 22.8px で決まる重量欄の左端に合わせるため。
   ★ 薄字と入力欄で同じ値を使うので、開閉しても文字の左端が動かない（e2e が両者の x を
   1px 以内で固定している）。em にしないのは入力欄が 16px 固定（iOS のズーム閾値）で
   1.9em が 30.4px になり薄字と揃わないから。 */
.set-note-read,
.set-row .set-note {
  flex-basis: calc(100% - 23px);
  margin-left: 23px;
}

/* ★ 薄さを opacity で作らない（このファイル後半「体重（第2軸）」の節と同じ理由 —
   非テキストの 3:1 を割り、ダークで消える）。--muted・12px・字下げの 3 つで作る。
   12px は .last-row（前回の記録）と同じ段で、どちらも「本文ではない利用者のデータ」。
   長いメモは折り返す。1 行省略にしないのは、静止時にメモを隠すと
   「閉じていても読める」という前提そのものが崩れるから。 */
.set-note-read {
  font-size: 12px;
  color: var(--muted);
}

/* 同じ行の数値欄（.set-row .num）に枠をそろえる。地色を --bg にすると
   カードの --surface の上で凹んで見える */
.set-row .set-note {
  min-height: 44px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
}

/* ── ドロップセットの段（adr/ux/drop-sets-as-a-box-under-the-main-set.md）─────
   ★ 段を足す口は**1 行目の余白**に置く。iPhone 幅（390px）で回数欄の右端から
     ✕ の左端まで 94px 空いているので、44px + gap 6px が収まって**縦は 1px も
     増えない**。メモのトグルに相乗りさせないのは、メモを開かずに段を足せる必要が
     あるため。
   ★ 絵は 2 つに分ける。メインセット行は `arrow-down-wide-narrow`（ドロップを始める）、
     段の行は `plus`（同じドロップに段を継ぎ足す）。同じ絵にすると押した結果が同じだと
     読めてしまう。
   ★ `.icon-btn` を継ぐので当たり判定は 44px。ただし ✕ の
     `margin-left: auto` / 区切り線 / 内側余白は打ち消す — あれは「削除を右端へ
     逃がす」ための装飾で、＋ は回数欄の隣に居てほしい（auto を残すと右端へ飛んで
     ✕ と隣り合う）。 */
.set-row .icon-btn.drop-add {
  margin-left: 0;
  padding-left: 0;
  border-left: none;
  color: var(--muted);
}

/* 段の入力欄。**段があるときだけ出る**ので、この 1 行ぶんの縦は実際の中身が払う。
   ★ **1 段 = 1 行。** メインセットの行と同じ組み方（重量 kg × 回数 ＋ …… ✕）にして、
     `.set-row .icon-btn` の margin-left:auto をそのまま効かせる。これで **✕ が
     メインセットの ✕ と縦 1 列に並ぶ**（横に流して折り返す形だと、✕ が段ごとに
     違う x に来てどの行のものか読めない）。
   ★ 字下げは 44px。セットメモ（23px）より深くして、メインセットの下に**入っている**
     ことを位置で読ませる（23px だとメインセットの重量欄と左端が揃って、
     番号の無いもう 1 本のセット行に見える）。
   ★ ラベル文字を持たない。段だと分かる手掛かりは 3 つあって足りている — 回数欄の隣の
     ＋、メインセットより狭い入力欄、セット番号を持たないこと。 */
.drop-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-basis: calc(100% - 44px);
  margin-left: 44px;
}

/* ★ **枠は `.set-row .num` を継ぐ。** `.drop-row` は `.set-row` の**中**にあるので
   同詳細度で既に当たっており、ここに書くのは差分だけでよい（枠・角丸・地色・
   tabular-nums・44px を書き直すと、入力欄の見た目が 2 箇所で決まる）。
   ★ 狭くするのは、字下げ 44px のぶん右に寄るので 4.2em だと iPhone 幅で
   ＋ と ✕ が押し出されるから。 */
.drop-row .num {
  width: 3.4em;
  padding: 4px 6px;
}

.add-set-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

/* ── 種目メモ ─────────────────────────────────────────────────────────────────
   ★ セット行群の**下**に置く。.last-row（前回の記録）の直下に置くと 12px --muted の
     行が 2 本続き「前回の記録の続き」に読める（--muted は 1 つしか無いので色で
     分けられない）。カードの読み順「名前 → 前回 → セット → 合計」に割り込ませない。
   ★ 字下げしないことが「行のメモ（23px 字下げ）」との唯一の差。ラベル文字を足さずに
     スコープを読ませるための対比なので、字下げを付けないこと。 */
.ex-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
}

.ex-note input {
  flex: 1;
  min-height: 44px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  /* ラベルの --muted を継がせない（button, input { color: inherit } があるため）。
     編集中の値はセット欄と同じ --text で読めること */
  color: var(--text);
}

.ex-note-read {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted);
}

/* ── マシンのピン（adr/ux/machine-pins-on-the-exercise.md）───────────────────
   マシンのシート高・バー位置。種目メモの**真上**、セット行群の下に置く
   （DOM もその順）。開閉は種目メモと同じトグル 1 つに相乗りしていて、
   カード内に新しい 44px のタップ標的は 1 つも増えていない。
   ★ ドロップの段を足す `↓`（.drop-add）だけは標的を持つが、**1 行目の余白に入るので
     行の高さは変わらない**（adr/ux/drop-sets-as-a-box-under-the-main-set.md 決定 1）。 */

/* 閉じていても読める薄字。`.ex-note-read` と同じ 12px + --muted の段
   （.last-row と同じ「本文ではない利用者のデータ」）。
   ★ 薄さを opacity で作らない — 非テキストの 3:1 を割り、ダークで消える。
   ★ 字下げしない。すぐ下の `.ex-note-read`（種目メモ）と左端が揃い、両方
     出ていても段が乱れない。2 つを分けているのは先頭の「ピン」ラベルだけで、
     種目メモ側はラベルを持たないという対比になっている。 */
.pin-read {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted);
}

/* 開いた状態。ラベルの段は `.ex-note`（種目メモ）と揃える。
   チップは折り返す（393px 幅で 2〜3 個 / 行）。 */
.pin-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* 列間 10px は「✕ がどのチップのものか」を間隔だけで読ませるため。
     チップ内（入力欄 ↔ ✕）の 2px と 5 倍差をつける */
  gap: 6px 10px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
}

.pin-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* 箱は `.set-row .num` / `.ex-note input` をなぞる。`.num` を共有しないのは、
   あちらが `.set-row` スコープで width: 4.2em を持つため。
   ★ 削除の ✕ は `.icon-btn` の 44px のまま縮めない。静かにするのは色と文字
     サイズだけで、当たり判定ではない
     （adr/ux/destructive-affordance-quiet-at-rest.md）。 */
.pin-num,
.interval-num,
.pct-box .num {
  width: 2.9em;
  min-height: 44px;
  padding: 4px 8px;
  text-align: right;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  /* ラベルの --muted を継がせない（`.ex-note input` と同じ事情） */
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* 落とし幅は `12.5` の 4 文字が入る。2.9em だと右端が切れる */
.pct-box .num {
  width: 5em;
}

/* 「＋」。カードでいちばん彩度の高い色を、めったに使わない追加に与えない
   （`.card-foot .note-toggle` と同じ規則）。詳細度の事情も同じで、
   .link-btn（0,1,0）と同詳細度では上書きできないので子孫セレクタ（0,2,0）。 */
.pin-box .pin-add {
  min-width: 44px;
  color: var(--muted);
}

/* ── インターバル（adr/ux/interval-seconds-on-the-exercise.md）───────────────
   ピンの真下に置く。値の性質（種目に貼り付く設定）が同じなので、寸法もトークンも
   `.pin-*` と揃える — 段が変わると「その日のメモ」と同じ列に見えてしまう。
   ★ 薄さを opacity で作らない。非テキストの 3:1 を割り、ダークで消える
     （`.pin-read` / `.ex-note-read` と同じ規則。e2e が opacity: 1 で固定している）。 */
.interval-read {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted);
}

/* ラベル・入力欄・単位の 1 行。`.pin-box` と同値だが、あちらはチップが折り返す前提の
   flex-wrap を持つ。こちらは 3 要素固定なので折り返さない。
   ★ 設定タブの落とし幅（`.pct-box`）も同じ 3 要素の 1 行なので共有する。設定タブの
     他の節は `.segmented` だが、刻みは人によって違う（10 / 12.5 / 20 …）ので
     選択肢を先に決めると必ず外れる。自由入力にした
     （adr/ux/drop-sets-as-a-box-under-the-main-set.md 決定 4）。 */
.interval-box,
.pct-box {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
}

/* 入力欄そのものは `.pin-num` とセレクタを共有している（同じ見た目の同じ部品）。
   単位の「秒」はラベルと同じ --muted / 13px を継ぐので専用ルールは持たない。
   ★ gap は `.pin-box` の列間 10px と同値。数値と「秒」が詰まって
     「90秒」という 1 トークンに見えると、入力欄の縁が読めなくなる。 */

.card-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}

.card-foot strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ── ドラッグで並び替える（adr/ux/drag-to-reorder-in-record-tab.md）───────────
   掴む場所はセット行の番号（.set-no）と種目カードの見出し行（.card-head）、それに
   メニュー編集シートの「選択中」の行（.rtn-grab、
   adr/ux/routine-editor-drag-and-accordion.md）。どれも既にある要素で、新しいボタンは
   1 つも足していない。 */

/* ★ この 4 つは**ハンドルにだけ**当てる。入力欄まで広げないこと。
   - touch-action: none … これが無いとドラッグの途中でブラウザがスクロールを始める。
     styles.css 冒頭の `button, input { touch-action: manipulation }` とは対象が違う
     （こちらは <span> と <header> と <div>）ので競合しない。**代償として、この 3 か所
     からはスクロールを始められなくなる**（.rtn-grab はシートの中のスクロール、他は
     ページ）。**帯が広い .card-head と .rtn-grab は長押しにする** — 即時開始だと
     スクロールのつもりのフリックが画面を動かさないまま並びを変える。細い .set-no
     （約 29px 幅）だけは縦フリックの起点になりにくいので待たせていない
     （views/drag.rs の PRESS_DELAY_CARD）
   - -webkit-touch-callout: none … 無いと長押しで「コピー / 調べる」が出て
     pointercancel が飛び、掴んだ手が離れる
   - user-select … 掴んで動かすたびに種目名が選択されるのを止める。継承するので
     .card-head / .rtn-grab 1 か所で中の <h3> や種目名まで効く
   - tap-highlight … 掴むたびに青い矩形が光るのを消す */
.set-no,
.rtn-grab,
.card-head {
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* マウスのある環境にだけ掴めることを見せる。指には何も伝わらないので、
   これ以上の装飾は足さない（静止時のカードは今までと 1px も変わらない） */
@media (hover: hover) {
  .set-no,
  .rtn-grab,
  .card-head {
    cursor: grab;
  }

  .set-no:active,
  .rtn-grab:active,
  .card-head:active {
    cursor: grabbing;
  }
}

/* ★ transition は「ドラッグ中の親」にだけ生やす。無条件に .card / .set-row へ置くと、
   指を離した瞬間に「<For> の DOM move」と「transform の除去」が同時に起きて、
   要素が 1 スロット飛んでから 120ms かけて滑って戻る（FLIP のジャンプ）。
   親の data-dragging は同じ反応フラッシュで外れるので、変化後のスタイルに
   transition-property が無く、遷移がそもそも開始されない。

   ★ **掴んでいる要素を :not() で外す。** `.set-row[data-drag="lift"] { transition: none }`
   を別に書く形では詰む — 親側のセレクタ（クラス 2 + 属性 1 = 詳細度 0,3,0）のほうが
   強いので打ち消せず、掴んだ要素まで 120ms 遅れて指について来る。ここで**そもそも
   一致させない**のが正しい。滑るのは押しのけられる側だけ、という意味がそのまま出る。 */
.sets-editor[data-dragging="true"] > .set-row:not([data-drag]),
.cards[data-dragging="true"] > .card:not([data-drag]),
.rtn-picked[data-dragging="true"] > li:not([data-drag]) {
  transition: transform 120ms ease-out;
}

/* ★ position + z-index が要る。transform だけでは兄弟の描画順は DOM 順のままなので、
   上へ動かすと直前のカードの下に潜る。値はこのファイル冒頭の重なり順の一覧を参照。 */
.set-row[data-drag="lift"],
.card[data-drag="lift"],
.rtn-picked > li[data-drag="lift"] {
  position: relative;
  z-index: 1;
}

/* 掴んでいることを見せる。**指が止まっていても掴めたと分かる**必要があるので、
   長押しで効き始める .card-head と .rtn-grab には必須（views/drag.rs の
   PRESS_DELAY_CARD）。影ではなく地色で作るのは、このファイルに box-shadow が
   1 つも無いため */
.card[data-drag="lift"] {
  border-color: var(--accent);
}

.set-row[data-drag="lift"],
.rtn-picked > li[data-drag="lift"] {
  background: var(--bg);
  border-radius: 8px;
}

/* ★ 「選択中」の行は静止時に枠を持たないので、地色だけでは .card と違って
   「掴めた」が弱い（長押しを入れた以上、指が止まったまま読める必要がある）。
   border ではなく outline なのは、静止時に無い枠を足すと 2px ぶん行が動くから。
   offset を負にして枠の内側へ引き、角丸も上の 8px に揃える */
.rtn-picked > li[data-drag="lift"] {
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}

/* ★ 動きを減らす設定では押しのけを瞬時にする。.sheet の 0.1s に揃えないのは、
   あちらが上下動をやめても黒幕のフェードが残るのに対し、こちらは**動きそのものが
   全部**だから。0s なら中点を越えた瞬間に入れ替わり、情報は何も失われない */
@media (prefers-reduced-motion: reduce) {
  .sets-editor[data-dragging="true"] > .set-row:not([data-drag]),
  .cards[data-dragging="true"] > .card:not([data-drag]),
  .rtn-picked[data-dragging="true"] > li:not([data-drag]) {
    transition-duration: 0s;
  }
}

/* 「今日 1,080」を 1 かたまりにして、フッタ左端を外す導線に空ける */
.foot-total {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

/* ★ 破壊的操作でも「静止時は警告色を持たない」。--warn は確認 UI（.warn-box）
   だけの持ち物で、入口は常に --muted。以前ここは 15px の --warn で、
   カード内で最も目立つ文字列だった（カードの枚数だけ橙の行が縦に並んでいた）。

   グリフまで行削除の ✕ にそろえるのは誤り。直上にある「行の ✕」と同じ列・同じ見た目に
   なり、1 セットとカード全体のどちらが消えるのか読めなくなる。そろえるのは
   「静かな入口 → 押したときだけ警告色の確認」という作法のほうで、見た目ではない。

   左端に置くのは、カードの右端が「行の ✕ → + セット → sticky の種目を追加」という
   動線の列だから。実測で + セットとは 41px しか離れておらず右端が完全一致、最後の
   カードでは追加ボタンと縦に 9px 重なり、横は 390px 幅で約 7.5px しかなかった
   （.add-wrap の帯は pointer-events:none なのでタップは下へ抜ける）。

   .link-btn（0,1,0）と同詳細度だと色を上書きできないので子孫セレクタ（0,2,0）で書く。
   ファイル末尾の .danger と同じ事情。min-height:44px はタップ標的なので縮めない。
   詳細は adr/ux/destructive-affordance-quiet-at-rest.md */
.card-foot .card-remove {
  color: var(--muted);
  font-size: 13px;
}

/* メモの入口。カードで 44px のタップ標的が既に予算されている行はフッタだけなので
   ここに畳む（他に置くと 44px × カード枚数だけ縦に純増する）。
   ★ .link-btn の --accent を --muted へ落とす。カードでいちばん彩度の高い色を
     「めったに使わない開閉」に与えない。静止時の主張については
     adr/ux/destructive-affordance-quiet-at-rest.md と同じ規則。
   詳細度の事情も .card-remove と同じ — .link-btn（0,1,0）と同詳細度では色を
   上書きできないので子孫セレクタ（0,2,0）で書く。
   横 padding は「＋ メモ」の文字幅が約 42px でタップ標的（44×44）を横で割るため。
   高さは .link-btn の min-height:44px が持つ。 */
.card-foot .note-toggle {
  color: var(--muted);
  font-size: 13px;
  padding: 0 8px;
}

/* ── ボタン ─────────────────────────────────────────────────────────────── */

.primary,
.secondary {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}

/* 「前回のメニューから始める」。その日が完全に空のときだけ出る。
   通常フローに置く（.add-wrap と違い sticky にしない）ので .kb-open で隠す必要はない。
   隠すとレイアウトが跳ねるだけで、キーボードに覆われて困る fixed 要素ではない。 */
.menu-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.menu-copy-label {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

/* カードと同じ面に見せる。行の中身は 2 段（日付・部位 / 種目名）。
   min-height は 2 行ぶんかつタップ領域 44px を確実に超える値 */
.menu-cand {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  min-height: 56px;
  padding: 10px 12px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: inherit;
  font: inherit;
}

.menu-cand .cand-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.menu-cand .cand-head b {
  font-size: 15px;
  font-weight: 600;
}

.menu-cand .cand-head i {
  font-style: normal;
  font-size: 13px;
  color: var(--muted);
}

/* 種目名は溢れても行を増やさない。行の高さが揃っていないと候補を読み比べられない */
.menu-cand .cand-names {
  font-size: 13px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ★「種目を追加」。カード列の末尾に置くと、カードが増えるほど下へ逃げる。
   探して下スクロールする途中にカードの削除導線があるので、追加しようとして
   削除する事故が起きていた。sticky で常に画面内へ留める。

   z-index はタブバー(10) より下の 9。シートは top layer なので勝ち負けの相手にならない。
   （styles.css 冒頭の重なり順コメントを参照。position:fixed / sticky 要素は
   z-index を省くと DOM 順で重なりが決まり、過去に押せない要素を作っている） */
.add-wrap {
  position: sticky;
  bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 8px);
  z-index: 9;
  display: flex;
  justify-content: center;
  padding: 16px 0 6px;
  /* 下のカードが透けるとボタンの文字と重なって読めなくなる。上端 14px だけぼかし、
     そこから下は地色で塗り切る（40% 指定だとボタン本体の高さまで半透明が残る） */
  background: linear-gradient(to bottom, transparent 0, var(--bg) 14px);
  /* ★ 透明な上端 14px は「見えているのに押せない帯」になる。帯自体はクリックを
     素通しし、ボタンだけが受け取るようにする（過去に z-index 欠落で押せない要素を
     作っているので、新設する overlay 状の要素では毎回これを確認する） */
  pointer-events: none;
}

.add-wrap > button {
  pointer-events: auto;
}


/* ★ キーボード表示中は隠す（bottom を詰めるのは誤り）。
   iOS standalone はキーボード表示時に layout viewport が縮まないので、
   sticky の貼り付き先である「下端」はキーボードの裏になる。bottom:8px にしても
   ボタンはキーボードに隠れたままで、しかも DevTools では再現しないので
   E2E でも目視でも検出できない。打ち込み中に追加ボタンは要らないので、
   タブバーと同じく消すのが adr/pwa/hide-tabs-when-keyboard-open.md の思想とも一貫する */
.kb-open .add-wrap {
  display: none;
}

/* 「この日をメニューにする」。★ sticky にしない（.add-wrap と違って通常フロー）ので
   .kb-open で隠す必要も無い — キーボードに覆われて困る fixed 要素ではないし、
   隠すとレイアウトが跳ねるだけ（.menu-copy と同じ判断）。
   ★ 上に余白を取って sticky の帯から離す。帯は上端 14px が透明なので、詰めると
   リンクが帯の透明部分と重なって「見えているのに押せない」ように錯覚する */
.day-foot {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}

/* 中身は .icon（20px の span）なので、UA ボタンの text-align 任せにせず
   自前で中央に置く。テキストのグリフを入れていた頃と見え方は変わらない。
   ★ この「中身は必ず .icon」はフォーカスリングの前提でもある。リングは 44px の箱では
     なく .icon に出している（ファイル冒頭の focus 節）ので、ここにテキストを直接入れると
     リングの出方が変わる */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: none;
  color: var(--muted);
}

/* ── アイコン ───────────────────────────────────────────────────────────────
   lucide の SVG（assets/icons/、ISC / 一部 MIT）。ファイル側は viewBox とパスの
   座標だけを持ち、線の色・太さ・端の丸めはここで与える。
   adr/architecture/help-figures-as-included-svg.md が図に対して決めた
   「座標は SVG、見た目は CSS」の分担をアイコンにも広げたもの
   （adr/architecture/lucide-icons-as-included-svg.md）。 */
.icon {
  display: inline-flex;
  flex: none;
  width: 20px;
  height: 20px;
}

/* ★ 寸法はラッパではなく <svg> 自身に効かせる。ラッパを縮めても <svg> の既定
   ボックスは縮まない（.hlp-fig > svg と同じ理由）。
   ★ stroke を currentColor にしてあるので、.icon-btn の --muted や .grp-toggle の
   --text がそのまま線色になる。ダーク対応は既存トークンだけで完結する */
.icon > svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.link-btn {
  min-height: 44px;
  border: 0;
  background: none;
  color: var(--accent);
  padding: 0;
}

/* アイコン付きのリンクボタン（今は「このメニューを削除」だけ）。
   ★ .icon-btn と同じ事情で inline-flex が要る。文字だけのボタンは UA の text-align:
     center で収まっていたが、20px の <span class="icon"> を混ぜると baseline 配置に
     なってアイコンだけ下がる（adr/architecture/lucide-icons-as-included-svg.md の
     「.icon-btn に display: inline-flex が必要になった」と同じ）。
   ★ :has() で絞るのは、アイコンを持たない .link-btn（「＋ 種目を追加」など多数）の
     レイアウトを 1px も動かさないため。同じ形が .icon-btn:has(> .icon) にある */
.link-btn:has(> .icon) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ── ボトムシート ───────────────────────────────────────────────────────── */

/* ★ ネイティブ <dialog> を show_modal() で開く（adr/ux/native-dialog-for-sheets.md）。top layer に載るので
   z-index は持たない。黒幕は ::backdrop が UA 側で生えるため、かつての
   <div class="sheet-backdrop"> は不要になった。

   ここは「閉じている状態」の定義も兼ねる。**display は [open] 側にだけ置くこと。**
   ここに display:flex を書くと UA の `dialog:not([open]) { display: none }` を
   打ち消してしまい、閉じているはずのシートが出たままになる。 */
.sheet {
  /* UA 既定（margin:auto / width:fit-content / max-width / border:2px groove /
     padding:1em / color:canvastext）を倒して下端に貼る */
  position: fixed;
  inset: auto 0 0;
  width: 100%;
  max-width: none;
  max-height: 78vh;
  margin: 0;
  padding: 0 0 env(safe-area-inset-bottom);
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 14px 14px 0 0;
  background: var(--surface);
  color: var(--text);
  /* 退場アニメーション。display と overlay は離散プロパティなので allow-discrete が要る
     （transition-behavior はショートハンドより後ろに置く）。overlay は Safari / Firefox
     未対応だが、未知の値として無視されるだけで害はない。Chromium では退出中にシートが
     top layer から早々に外れてクリップされるのを防ぐ */
  translate: 0 100%;
  transition-property: translate, display, overlay;
  transition-duration: 0.22s;
  transition-timing-function: ease-out;
  transition-behavior: allow-discrete;
}

/* ★ views::Sheet が show_modal() の直後に <dialog> 自身へ focus() を当てるので、ここに
   リングが載る。**WebKit では実際に載る**（Playwright / iPhone 15 Pro 実測で
   `.sheet:matches(':focus-visible')` が true。Chromium は false）。フォーカスの移動先を
   変えるだけでは「✕ の青枠」が「シート上辺の青線」に化けるだけなので、CSS 側が対で要る。

   消す理由は 2 つ。
   1. <dialog> は操作するものではない。リングが出ても「どこを押せるか」を何も伝えない
   2. .sheet は inset: auto 0 0 / width: 100% なので、出ると左右と下は画面端へ落ち、
      **上辺だけが横一文字の青線**として残る

   キーボード利用者の手掛かりは「シートがせり上がって画面を覆うこと」と、最初の Tab で
   ✕ にリングが出ることで足りている。**操作できる要素のリングは 1 つも消していない。**
   素の :focus でもリングを描くエンジンが見つかったら :focus へ広げる */
.sheet:focus-visible {
  outline: none;
}

.sheet[open] {
  display: flex;
  flex-direction: column;
  translate: 0 0;
}

/* 入場の開始値。★ .sheet[open] より後ろに置く（同詳細度なのでソース順で決まる） */
@starting-style {
  .sheet[open] {
    translate: 0 100%;
  }
}

.sheet::backdrop {
  background-color: rgba(0, 0, 0, 0);
  transition-property: background-color, display, overlay;
  transition-duration: 0.22s;
  transition-behavior: allow-discrete;
}

.sheet[open]::backdrop {
  background-color: rgba(0, 0, 0, 0.35);
}

@starting-style {
  .sheet[open]::backdrop {
    background-color: rgba(0, 0, 0, 0);
  }
}

/* ★ 動きを減らす設定では上下動をやめ、黒幕のフェードだけ残す。
   @starting-style 側も none にしないと入場だけ跳ねる */
@media (prefers-reduced-motion: reduce) {
  .sheet,
  .sheet[open] {
    translate: none;
    transition-duration: 0.1s;
  }

  .sheet::backdrop {
    transition-duration: 0.1s;
  }

  @starting-style {
    .sheet[open] {
      translate: none;
    }
  }
}

/* 右端の閉じるは .icon-btn（44px 角）なので、縦の余白はボタン自身が持つ。
   ここで 10px を足すと見出しだけ 64px になって間延びする。
   ★ フォーカスリングを収めるために足すのも不要。リングは 44px の内側に収まる
     （ファイル冒頭の focus 節） */
.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 6px 2px 14px;
  border-bottom: 1px solid var(--line);
}

.sheet-body {
  overflow-y: auto;
  padding: 8px 14px 16px;
  overscroll-behavior: contain;
}

/* 部位ブロックを折りたたむシート。**2 枚が共有する**（.grp-toggle + aria-expanded の
   フックは設定タブと同じ、開ける数だけが違う）。

   - メニュー編集シート — 複数同時に開ける
     （adr/ux/routine-editor-drag-and-accordion.md）
   - 記録タブの「種目を追加」シート — 同時に開くのは 1 つ
     （adr/ux/record-add-sheet-groups-as-single-open-accordion.md）

   ★ **クラス名は .rtn-group ではない。** 中身は「見出しを折りたたみ用に整える」規則
     だけで、メニュー編集シート固有のものは 1 つも無い。他の .rtn-*（.rtn-grab /
     .rtn-picked / .rtn-save）は本当にあの画面固有なので、共有すると接頭辞の意味が崩れる。
   ★ このコメントは以前「記録タブの『種目を追加』シートには当てない。あちらは 1 タップで
     1 種目を出す画面で、往復しないので畳む理由が無い」と書いていた。往復しないのは
     今も正しいが、**28 個のボタンから目で探すことと、行の位置が毎回違うこと**が
     問題だったので後に覆した（上の 2 本目の ADR）。 */
.fold-group {
  border-bottom: 1px solid var(--line);
}

/* ★ 最後の部位だけ線を持たない。記録タブの追加シートは .fold-group が .sheet-body の
   最終子になるので、シート下端の 16px 上に横線が浮いて残る。メニュー編集シートは
   .rtn-save（DOM 最後）が必ず後ろに来るのでここは当たらない */
.fold-group:last-child {
  border-bottom: 0;
}

/* .grp-toggle は設定タブでは flex アイテム（.card-head の中）なので flex: 1 で伸びるが、
   ここは <h3> の中の唯一の子。display: flex がブロックレベルにするので幅は足りているが、
   .grp-toggle 側の display が変わっても崩れないよう明示しておく。
   高さは 52px を継ぐ（閉じた 6 部位が 1 画面に収まる） */
.fold-group .grp-toggle {
  width: 100%;
}

/* 開いた中身の余白。閉じている間は 1px も持たない */
.fold-group > .pick-list {
  padding-bottom: 12px;
}

/* 見出しは中身が .grp-toggle 1 個なので、見出し自身は寸法も装飾も持たない。
   ★ ここに残る 2 つは**打ち消し先が今も生きている**もの。margin は冒頭の
     `h1, h2, h3 { margin: 0 }` が持つので要らない。
   ★ かつては色・余白・部位の丸（`.sheet-group h3` / `::before`）を打ち消す規則が
     ここにあったが、追加シートも折りたたみへ移って平坦な見出しの利用者が 0 になった
     ので、打ち消される側ごと消した
     （adr/ux/record-add-sheet-groups-as-single-open-accordion.md）。 */
.fold-group > h3 {
  /* 冒頭の `h1, h2, h3` は font-size を触らないので、UA の `h3 { font-size: 1.17em }`
     が生きている */
  font-size: inherit;
  /* 冒頭の `h1, h2, h3 { font-weight: 600 }` を外す。残すと件数（.grp-count）まで
     太くなり、設定タブの同じ行と見た目が食い違う。部位名だけが太いのは
     .grp-name 自身が 600 を持っているから */
  font-weight: inherit;
}

.pick-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pick {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
}

.pick.added {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── 推移タブ ───────────────────────────────────────────────────────────── */

.screen-title {
  font-size: 20px;
  margin-bottom: 10px;
}

.selectors {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

/* ★ 部位と種目は**横に並べる**。縦に積むと 44px + gap ぶんグラフが下がり、
   この改修の起点（下の項目が押しにくい）をセレクタ 1 本増やして作り直すことになる。 */
.target-row {
  display: flex;
  gap: 8px;
}

/* ★ min-width: 0 が要る。付けないと長い種目名（ラットプルダウン）が flex アイテムの
   最小内容幅を押し広げ、下の比率が崩れて部位側が潰れる。 */
.target-row > .target-select {
  min-width: 0;
  text-overflow: ellipsis;
}

/* 部位名は短く（胸 / 背中）、種目名は長い。等分より読みやすい */
.target-row > .target-select:first-child {
  flex: 2 1 0;
}

.target-row > .target-select:last-child {
  flex: 3 1 0;
}

.target-select {
  width: 100%;
  /* ★ WebKit（iOS Safari）のネイティブ menulist は UA テーマが min-height を 18px へ
     上書きするため、min-height だけでは 44px に届かず実測 23px になる。
     Chromium は min-height を尊重して 44px になるので、エンジン差で見逃しやすい。
     height を明示すると WebKit でも 44px になり、appearance は auto のままなので
     ネイティブの選択矢印と iOS のピッカー UI がそのまま残る。
     appearance:none でも 44px にはなるが矢印が消えてただの入力欄に見えるため採らない
     （代替の矢印を背景画像で描くと色をハードコードすることになり、ダークで破綻する）。
     min-height はタップターゲット規約の意図を残すために併記する。 */
  min-height: 44px;
  height: 44px;
  padding: 0 10px;
  font-size: 16px; /* 16px 未満だと iOS がフォーカス時にズームする */
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.segmented {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}

.seg-btn {
  flex: 1;
  min-height: 44px;
  border: 0;
  border-left: 1px solid var(--line);
  background: none;
  color: var(--muted);
  font-size: 13px;
}

.seg-btn:first-child {
  border-left: 0;
}

.seg-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}

/* ── グラフ ─────────────────────────────────────────────────────────────── */

.chart-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 8px 6px;
}

/* viewBox 320x160 + preserveAspectRatio 既定（meet）なので縦横比は保たれる */
.chart {
  display: block;
  width: 100%;
  height: auto;
}

.chart-grid {
  stroke: var(--line);
  stroke-width: 1;
}

.chart-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.chart-dot {
  fill: var(--accent);
}

.chart-dot.selected {
  fill: var(--surface);
  stroke: var(--accent);
  stroke-width: 2;
}

.chart-cursor {
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

/* ★ タップのヒット領域。fill:none のままでも拾えるよう pointer-events:all を明示する
   （既定の visiblePainted は塗りの有無に依存するので当てにしない） */
.chart-hit {
  fill: none;
  pointer-events: all;
  cursor: pointer;
}

.chart-label {
  fill: var(--muted);
  font-size: 10px;
}

/* ── 体重（第2軸）─────────────────────────────────────────────────────────
   ★ 控えめさは色では作れない。--muted と --accent のコントラスト比は実測で
     ほぼ同じ（ライト 4.83 vs 4.88、ダーク 6.75 vs 6.93）なので、「muted だから
     目立たない」は成立しない。従属性は線の細さ・破線・ドットを描かないこと・
     メイン線の背面に置くことで作る。
   ★ opacity は使わない。非テキストの 3:1 基準を割るうえ、ダークモードで消える。
   ★ .chart-label-weight は .chart-label と詳細度が同じ(0,1,0)なので、必ず後ろに置く
     （ソース順で font-size が決まる）。fill は .chart-label から効かせる */
.chart-label-weight {
  font-size: 9px;
}

.chart-line-weight {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.25; /* メインの chart-line は 2 */
  /* .chart-cursor の `3 3` と周期を変えて、縦のカーソル線と読み違えないようにする */
  stroke-dasharray: 6 4;
  stroke-linejoin: round;
}

.chart-dot-weight {
  fill: var(--muted);
}

.chart-dot-weight.selected {
  fill: var(--surface);
  stroke: var(--muted);
  stroke-width: 1.5;
}

.chart-empty {
  color: var(--muted);
  text-align: center;
  padding: 40px 0;
  margin: 0;
}

.chart-readout {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 6px 4px 0;
  font-size: 13px;
}

.chart-readout strong {
  font-variant-numeric: tabular-nums;
}

/* 指標と体重を右側に寄せて並べる（左は日付） */
.rd-values {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.rd-weight {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.progress .note {
  margin: 6px 0 0;
  font-size: 12px;
}

/* ── 統計 ───────────────────────────────────────────────────────────────── */

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0;
}

.stats > div {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  text-align: center;
}

.stats dt {
  font-size: 11px;
  color: var(--muted);
}

.stats dd {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── 記録テーブル ───────────────────────────────────────────────────────── */

.records {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.records th,
.records td {
  padding: 7px 6px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.records th {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}

.records .rec-date {
  white-space: nowrap;
}

.records .rec-detail {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.records .rec-metric {
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── カレンダータブ ─────────────────────────────────────────────────────── */

/* ★ この節はレイアウトを持たない。
   calendar.rs が S_NAV / S_WEEK / S_GRID / S_DOTS / S_ACTIONS などのインライン
   style 定数で display・grid-template-columns・flex の各軸を持っているため、
   ここで同じプロパティを書いてもインライン側が常に勝ち「効かない CSS」になる。
   この節が担当するのは色・境界線・角丸・余白・文字サイズだけ。
   calendar.rs 側のインライン定数を将来外すときは、あわせてレイアウトをここへ移すこと。 */

.calendar .stats {
  margin: 10px 0 12px;
}

.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.cal-nav .screen-title {
  margin: 0;
}

/* ★ 曜日見出しと日グリッドは同じ 7 列に揃える。日曜始まりなので
   Weekday::num_days_from_sunday() の 0..=6 と列番号が一致する。 */
.cal-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  padding-bottom: 4px;
  /* 曜日見出しと日グリッドの境。--line の 1px は .card-foot / .records と同じ区切り方 */
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}

.cal-wd {
  font-size: 11px;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding-top: 2px;
}

/* min-height はタップターゲット規約（44px）。 */
.cal-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 44px;
  padding: 2px 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

/* 選択状態と当日。`class:is-today` / `class:is-picked` で伝わる */
.cal-day.is-today {
  color: var(--accent);
  font-weight: 600;
}

.cal-day.is-picked {
  border-color: var(--accent);
  background: var(--chip-0);
}

.cal-num {
  font-size: 14px;
  line-height: 1.15;
}

/* 前月・翌月にはみ出す空きマス。列を保つためだけに置かれているので中身は無い */
.cal-blank {
  min-height: 44px;
}

/* ドットを子に持つ帯。高さを固定して、ドットの有無で日セルの高さが揺れないようにする。
   pointer-events:none はクリックの target を常に .cal-day 側にするため */
.cal-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 6px;
  pointer-events: none;
}

/* ★ background だけは calendar.rs がインラインで渡す。Group.color 由来のデータなので
   CSS では表現できない（ユーザーがカラーピッカーで変更できる）。
   形と大きさはここが持つ。flex:none は 6px が潰れないように */
.cal-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

/* ── 設定タブ ───────────────────────────────────────────────────────────── */

.settings > .settings-note {
  margin: 0 0 12px;
}

/* 見出しの 1 行。節の中では左端に「‹ 設定」（.icon-btn）が入る。
   space-between だった名残の justify-content は落としてある
   （右側に置いていた「プリセットを追加」ボタンを外したため）。
   ★ 戻るボタンは 44px 角なので、その分だけ左の余白を詰めて h1 の位置を
     トップ（戻るボタンが無い）と揃える */
.settings-head {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
  margin-left: -10px;
}

/* 戻るボタンが無いトップは、上の負マージンを打ち消して元の位置に戻す */
.settings-head:first-child {
  margin-left: 0;
}

/* ── 設定トップの節一覧 ─────────────────────────────────────────────────── */

/* ★ 設定タブの入口は**節の一覧**（adr/ux/settings-as-a-list-of-sections.md）。
   4 つを 1 画面に縦積みしていた頃は、メニューを 1 本足すのに 6 部位 28 種目の
   一覧を跨いでスクロールしていた。 */
.rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 節 1 行。カードと同じ面に見せる（.menu-cand と同じ作り）。
   ★ 高さはタップ標的の規約値 44px より大きく取る。行が 4 つしか無い画面なので、
     詰めるより押しやすさを取る */
.row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 10px 12px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: inherit;
  font: inherit;
}

.row-label {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
}

.row-count {
  flex: none;
  font-size: 13px;
}

/* シェブロンは「押すと先がある」ことだけを示すので、本文より弱く */
.row > .icon {
  flex: none;
  color: var(--muted);
}

/* ホーム画面ヘルプも同じ行に並べる（`.settings-help` の余白規則は使わない） */
.rows .settings-help {
  margin: 0;
}

/* h1 の UA 既定は 2em なので、今日タブ（.day-head h1）と同じ 20px に揃える */
.settings-head h1 {
  font-size: 20px;
}

.settings-note {
  margin: 6px 0;
  font-size: 12px;
}

/* 「トレーニングメニュー」「種目」の節見出し。h1 の下の 1 階層だけを立てる
   （adr/ux/focus-ring-and-heading-order.md）。上の余白を厚くして、直前の節の
   末尾ボタンと視覚的に切る */
.settings-section {
  margin: 20px 0 8px;
  font-size: 13px;
  color: var(--muted);
}

/* ── トレーニングメニュー（設定タブ） ───────────────────────────────────── */

/* メニュー 1 本。中身は行全体を占める 1 個のボタンだけなので、.grp と同じく
   .card の縦 padding を外してボタン側に持たせる */
.rtn {
  padding: 0 12px;
}

/* ★ 行全体が編集の入口。部位のように「開く」と「編集」を分けない（開いても中に
   操作が無いのでタップが 1 つ増えるだけ）。色は .grp-toggle と揃えて --text */
.rtn-open {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  min-height: 56px;
  padding: 10px 0;
  border: 0;
  background: none;
  color: var(--text);
  text-align: left;
}

.rtn-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.rtn-head b {
  font-size: 15px;
  font-weight: 600;
}

.rtn-head i {
  flex: none;
  font-style: normal;
  font-size: 13px;
}

/* 種目名は溢れても行を増やさない。行の高さが揃っていないとメニューを読み比べられない
   （.menu-cand .cand-names と同じ理由） */
.rtn-names {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 「記録タブに出ません」。出ない理由が画面から読めないと、作ったのに使えない
   メニューの原因を探しようがない */
.rtn-warn {
  font-size: 12px;
  color: var(--warn);
}

/* メニュー編集シートの保存帯。★ シート内で sticky にする。
   このシートは種目ピッカーが 6 部位ぶん伸びるので、通常フローだと「保存するには
   ピッカーを全部スクロールし切る」になる（他のエディタは入力欄 1 個なので不要）。

   ★ 貼り付け先は `.sheet-body`（`overflow-y: auto` のスクロール容器）の下端。
     `.sheet` 自体は `position: fixed` なので、ここは viewport ではなくシートの中に閉じる。
   ★ 上下左右の負マージンで `.sheet-body` の padding（8px 14px 16px）を打ち消し、
     帯を端まで塗る。塗り切らないと下を流れる種目ボタンが帯の脇から覗く。
   ★ `bottom` は 0 ではなく **-16px**。sticky は scrollport（= padding box）の下端に
     貼るので、0 だと `.sheet-body` の padding-bottom 16px が帯の**下**に残り、
     そこを種目ボタンが流れていくのが見える（実測で確認した）。 */
.rtn-save {
  position: sticky;
  bottom: -16px;
  /* 2 は「掴んだ行（1）より上」。冒頭の重なり順の一覧を参照 */
  z-index: 2;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px -14px -16px;
  padding: 10px 14px 12px;
  background: var(--surface);
  border-top: 1px solid var(--line);
}

/* 保存できない理由。ボタンの隣に出すので `.warn-box` の枠は要らない
   （枠を付けると帯の中に箱が入れ子になって、押す場所がぼやける） */
.rtn-invalid {
  flex: 1;
  margin: 0;
  font-size: 13px;
  color: var(--warn);
}

/* 編集シートの「選択中」。★ この並びがそのまま記録タブのカードの並びになるので、
   番号を出して順序を読めるようにし、**その番号を掴んで並べ替える**
   （adr/ux/routine-editor-drag-and-accordion.md）。

   ★ 番号は UA のリストマーカーではなく、行の中の <span>（.rtn-no）で出す。
     `li { display: flex }` は要素の display を list-item から変えるので**マーカーが
     消える**（実測: ::marker の content が normal のまま、テキストの左端が li の左端と
     一致する = 何も描かれていない）。
     かつては ::before + counter() で出していたが、ドラッグ中は模型の Vec を入れ替えず
     transform だけで見せるので、**counter では「中点を越えた瞬間に番号が入れ替わる」が
     表現できない**（counter は DOM 順でしか数えられない）。番号 = 順番という前提が
     指を離すまで嘘になるので、記録タブのセット番号と同じくテキストで描いている
     （routine.rs の `visual_index` を通す closure）。 */
.rtn-picked {
  margin: 10px 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rtn-picked li {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ★ **掴む場所は行のほぼ全部**（記録タブの .card-head と同じ考え方）。
   番号だけ（16px）をハンドルにしていた頃は、カードのドラッグと操作感が揃わなかった。

   ★ ✕ はこの中に**入れない**。兄弟に置くことで「外すつもりのタップでドラッグが
     始まる」が構造的に起きなくなる（.card-head に削除ボタンが 1 つも無いのと同じ）。
     行の高さ 44px は右の .icon-btn が決めているので、こちらにも同じ min-height を
     置いて**✕ の無い行でも帯が痩せない**ようにする。 */
.rtn-grab {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  /* 名前が長いとき ✕ を押し出さない（.rtn-name の省略が効くようにする） */
  min-width: 0;
}

/* 番号。幅を固定して種目名の左端を揃える（揃っていないと並びを縦に追えない） */
.rtn-no {
  flex: none;
  min-width: 16px;
  text-align: right;
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.rtn-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 部位ブロック。縦の余白はヘッダ（.grp-toggle の 52px）と各行（44px）が自前で持つ
   ので、.card の 12px を左右だけに絞る。閉じた 6 行がこれで 1 画面に収まる */
.grp {
  padding: 0 12px;
}

/* 部位ヘッダの開閉トグル。ヘッダ幅のほぼ全部を占める 1 個のボタンにして、隣接する
   44px 標的を右端の鉛筆だけにする（誤タップが構造的に消える）。
   ★ 色は --accent ではなく --text。これは「押すと開く」であって編集の入口では
     ないので、押せることはシェブロンの向きが示す */
.grp-toggle {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  text-align: left;
}

/* シェブロンは状態の目印なので、名前より弱く置く */
.grp-toggle > .icon {
  color: var(--muted);
}

/* ★ 鉛筆だけ .icon-btn の --muted を上書きして --accent にする。
   部位名が <button>（--accent）から <span> になり「押すと名前を変えられる」手掛かりが
   ヘッダから消えたので、それをこのボタンが引き受ける。件数テキストと同じ --muted の
   ままだと、改名したい人が名前を押し続けて編集にたどり着けない。
   破壊的操作ではないので adr/ux/destructive-affordance-quiet-at-rest.md
   （静止時に警告色を持たない）には触れない */
.grp-edit {
  color: var(--accent);
}

/* 開いている間だけ下向きにする。chevron-down を別ファイルで持たないための回転。
   ★ transition は付けない。ここは**押した結果が即座に出るべき状態表示**で、
     120ms でも「開いたか」が読めない時間ができる。
   （このコメントは以前「この CSS には transition が 1 つも無い」と書いていたが、
     .sheet の出入り 0.22s とドラッグの押しのけ 120ms が入った時点で嘘になっていた。
     prefers-reduced-motion のガードも両方に置いてある。付けない理由は
     「前例が無いから」ではなく、この要素にとって不要だから） */
.grp-toggle[aria-expanded="true"] > .icon {
  transform: rotate(90deg);
}

/* 部位カラーの丸。色は inline の --dot で受け取る */
.dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dot, var(--muted));
}

/* ★ 名前は <span>（かつては <button> で、ここが編集の入口だった）。
   押せる手掛かりは .grp-toggle 全体とシェブロンが持ち、編集の入口は右端の鉛筆へ
   移したので、名前だけを --accent で目立たせる理由がなくなった。
   色は .grp-toggle の --text を継ぐ */
.grp-name {
  flex: 1;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
}

.grp-count {
  font-size: 12px;
  white-space: nowrap;
}

.grp-foot {
  display: flex;
  border-top: 1px solid var(--line);
}

.ex-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  border-top: 1px solid var(--line);
}

.ex-name {
  flex: 1;
  min-height: 44px;
  text-align: left;
}

.ex-kind {
  font-size: 11px;
  white-space: nowrap;
}

/* アーカイブ済みは末尾の副次セクション。.card の面を与えず軽く置く */
.archived {
  margin-top: 18px;
}

.archived-head {
  font-size: 13px;
  color: var(--muted);
}

.archived-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}

/* ── 編集シートのフォーム ───────────────────────────────────────────────── */

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
}

.field > span {
  font-size: 12px;
  color: var(--muted);
}

/* シートの地は --surface なので、入力欄は --bg で沈める（.set-row .num と同じ考え方）。
   font-size は全体規則の 16px（iOS のフォーカス時ズーム対策）に任せる */
.text-input {
  width: 100%;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
}

.field input[type="color"] {
  width: 64px;
  min-height: 44px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
}

.opts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.opt {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
}

/* 選択中。推移タブの .seg-btn.active と同じ塗りに揃える */
.opt.on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}

.sheet-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

/* Kind 変更の「グラフの単位が変わります」など。枠の出し方は .past-banner に揃える */
.warn-box {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid var(--warn);
  border-radius: 10px;
  font-size: 13px;
  color: var(--warn);
}

.warn-box p {
  margin: 0 0 6px;
}

/* ── ホーム画面に追加のヘルプ ───────────────────────────────────────────────── */

/* 設定タブ冒頭の導線。.link-btn が 44px のタップ領域を自前で持つので、
   ここで上下の余白を足すと設定タブの頭だけ間延びする */
.settings-help {
  margin: 0 0 4px;
  font-size: 12px;
}

.hlp-why {
  margin: 10px 0 4px;
  font-size: 13px;
}

.hlp-step {
  margin: 16px 0 0;
}

.hlp-step h3 {
  font-size: 14px;
}

.hlp-note {
  margin: 6px 0 0;
  font-size: 13px;
}

.hlp-cap {
  margin: 14px 0 0;
  font-size: 12px;
}

/* ★ レスポンシブは <svg> 自身に効かせる。ラッパの max-width だけでは SVG の
   ボックスが縮まない（.chart が <svg> 側に width:100%/height:auto を持つのと同じ）。
   SVG ファイルは viewBox しか持たず width/height を書かないこと。 */
.hlp-fig {
  max-width: 200px;
  margin: 8px auto 0;
}

.hlp-fig > svg {
  display: block;
  width: 100%;
  height: auto;
}

/* 図の色。SVG 側は座標と class だけを持ち、色は全部ここで与える
   （fill="var(--accent)" は presentation attribute では解決されない）。

   ★ 端末の面は --surface にしない。シート地（.sheet）が --surface なので、同じ色だと
     面と背景が同一になり（light で 1.16:1）「下からシートが上がってきた」が絵として
     伝わらない。端末を --bg、その上に載るもの（共有シート・入力欄）を --surface に
     すると、ライトでもダークでも「上に載っているほうが明るい」向きで層が読める。 */
.hlp-panel {
  fill: var(--bg);
  stroke: var(--line);
  stroke-width: 1.5;
}

/* 端末の上に載るもの。面より一段手前に見せる */
.hlp-raised {
  fill: var(--surface);
  stroke: var(--line);
  stroke-width: 1.5;
}

.hlp-line {
  stroke: var(--line);
  stroke-width: 1;
}

.hlp-ghost {
  fill: var(--line);
}

.hlp-glyph {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hlp-mark {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hlp-mark-fill {
  fill: var(--accent);
}

.hlp-label {
  fill: var(--text);
  font-size: 8.5px;
}

/* ★ 塗りの上に載る文字。#fff 直書きはダークで破綻するので --accent-text を使う
   （根拠は .notice のコメントにある実測値） */
.hlp-label-on {
  fill: var(--accent-text);
  font-size: 8.5px;
  font-weight: 600;
}

/* 削除系。--danger トークンは無いので警告色を使う。
   .link-btn と同じ詳細度なので、色を上書きするにはこの位置（後方）である必要がある */
.danger {
  color: var(--warn);
}

/* ── データの書き出し / 読み込み ─────────────────────────────────────────── */

/* 視覚的に隠した <input type="file">。ボタンから click() で開く
   （adr/ux/hidden-file-input-behind-a-button.md）。

   ★ display:none にしない。iOS では「レイアウトツリーに無い input への click()」が
   無視された報告があり、しかも click() は成否を返さないので検知できない
   （<a download> を却下したのと同じ性質の危険）。1px 残せばこのリスクごと消える。
   Playwright の setInputFiles も attached しか要求しないので、隠したままで動く */
.file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* 書き出しと読み込みの境。1 画面に 2 つ並べるので、罫線 1 本で役割を分ける */
.backup-split {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* この画面のボタンは 1 行に 1 つなので、横幅いっぱいまで伸ばして押しやすくする。
   ★ アイコンと文字を並べるので inline-flex にする。既定の inline のままだと
   .icon（inline-flex の 20px 箱）がベースラインに載って文字と縦位置がずれる */
.sheet-actions .wide {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ★ 衝突メッセージは \n で連結される。.settings-note は white-space を指定していないので、
   これが無いと複数行が 1 行に潰れて読めない（取り込みが「足すだけ」固定になり、
   Conflict の全バリアントが常時ありうるようになったので、ここで効くようになった） */
.backup-note {
  white-space: pre-line;
}