/* アプリ本体のスタイル。
   階層は影ではなく面の明度差（--loam / --seam）で表す。
   タップ対象は最小44×44px（iOSのヒット領域基準）。 */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  /* 下部ナビの高さ + iPhone のホームバー領域のぶんだけ内容を空ける */
  padding-bottom: calc(62px + env(safe-area-inset-bottom));
  background: var(--loam);
  color: var(--bone);
  font-family: var(--jp);
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

/* 数値は等幅で見せる */
.num { font-family: var(--mono); }

/* ---- 地層 ---- */

/* 下端をナビの上端に合わせる。ナビは 62px + ホームバー領域なので、
   そのぶんを calc で引く。モックアップは 62px 固定で safe-area を見ていない。 */
#strata {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: calc(62px + env(safe-area-inset-bottom));
  overflow: hidden;
  /* 背景なのでタップを奪わない */
  pointer-events: none;
  z-index: 0;
}

/* 過去帯。閉じた期を等分して並べる。
   高さは期数によらず固定。区画の合計に任せると、閉じた期が0件のとき
   高さ0になって空の土台が出ない。 */
.strata-past {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--strata-past-height);
  display: flex;
  flex-direction: column;
}

/* 外側は高さと境目の罫線だけを持つ。
   不透明度と同居させると罫線まで薄くなり、古い期ほど境目が消える。 */
/* 区画の高さは比率で決める。flex-grow は JS が期ごとに入れる。
   flex-basis を 0 にしてあるので、帯の高さがそのまま比率どおりに配られる。 */
.strata-past-slot {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 0;
  min-height: 0;
  position: relative;
}

/* 期の境目の罫線。border ではなく重ねて描く。
   border にすると、その1pxが flex の配分から外れて境界が小数になる
   （128px・3期で 43.31 / 42.34 / 42.34）。重ねれば 44 / 42 / 42 のまま。
   区画の外側に置くので、内側の opacity には巻き込まれない。 */
.strata-past-slot + .strata-past-slot::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--rule);
}

/* 内側がパターンと不透明度。
   朱系が9px周期、基層が6px周期で噛み合っていないが、これは直さない。
   過去帯は本数を表さないので、周期のずれが意味の誤りにならない。
   現在の期の節目線（7px周期に揃える必要がある）とは事情が違う。 */
.strata-past-fill {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to top,
      var(--strata-past-accent) 0, var(--strata-past-accent) 1.5px,
      transparent 1.5px, transparent 9px),
    repeating-linear-gradient(to top,
      var(--strata-past-base) 0, var(--strata-past-base) 2px,
      var(--seam) 2px, var(--seam) 6px);
}

/* 1期目。これから埋まる土台として、堆積のパターンは描かない。 */
.strata-past-empty { position: absolute; inset: 0; background: var(--strata-past-empty); }

/* 過去帯全体にかける幕。下ほど濃い。 */
.strata-past-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26, 22, 19, .55), rgba(26, 22, 19, 0) 60%);
}

/* 現在の期。to top は要素の下端が起点なので、伸びても本1の位置は動かない。
   1本 = 明3px + 暗4px。8本ごとに明の帯を --ochre に置き換える。
   これは装飾ではなく、積み重ねの目盛りそのもの。

   節目の位置と周期は strata.js から変数で受け取る。繰り返し幅は最初と最後の
   ストップの距離になるので、period を 7px の倍数にしないと節目が少しずつずれる。

   一番上の朱の筋（--strata-accent）は10px周期で、1本=7px と噛み合わない。
   これは直さない。噛み合わないことが「本数の目盛りではない」という担保になる。
   本数を数えるのは8本ごとの節目線のほうで、そちらだけ7pxに揃える。 */
.strata-stack {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--strata-past-height);
  background-image:
    repeating-linear-gradient(to top,
      var(--strata-accent) 0, var(--strata-accent) 2px,
      transparent 2px, transparent 10px),
    repeating-linear-gradient(to top,
      transparent 0,
      transparent var(--strata-milestone-start),
      var(--ochre) var(--strata-milestone-start),
      var(--ochre) var(--strata-milestone-end),
      transparent var(--strata-milestone-end),
      transparent var(--strata-milestone-period)),
    repeating-linear-gradient(to top,
      var(--strata-light) 0, var(--strata-light) 3px,
      var(--strata-dark) 3px, var(--strata-dark) 7px);
}

/* 上限を超えたぶん。明の帯を --ochre に置き換える。
   節目線は乗せない。明帯を丸ごと ochre で塗るため目盛りが埋もれるうえ、
   超過は「あと N回」を超えた先の話で、目盛りで数える場面ではない。 */
.strata-over {
  position: absolute;
  left: 0;
  right: 0;
  background-image:
    repeating-linear-gradient(to top,
      var(--ochre) 0, var(--ochre) 3px,
      var(--strata-dark) 3px, var(--strata-dark) 7px);
}

/* 上限位置の罫線。超過したときだけ見せる。
   超過分と同じく要素は常に置いておき、opacity で出し入れする。
   hidden で出し入れすると、超過の1本目だけ瞬時に出て動きが揃わない。 */
.strata-limit {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--rule);
  opacity: 0;
}

/* 稜線。色と発光は進捗に応じて JS から指定する。 */
.strata-crest { position: absolute; left: 0; right: 0; height: 2px; }

/* 稜線より上の暗部。下端は稜線に追従する。 */
.strata-veil {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top,
    rgba(19, 16, 14, 0) 0,
    var(--strata-veil) 60px,
    var(--strata-veil) 100%);
}

/* 完了直後の1回だけ、堆積・超過・稜線・暗部・ラベルを同時に動かす。
   常時 transition を掛けると、タブを移動して戻るたびに地層が伸び縮みする。
   稜線に追従して動くもの（暗部・ラベル）も必ずここに入れる。
   1つでも漏らすと、その要素だけ最終位置へ飛んで見える。 */
#strata.is-animating .strata-stack { transition: height 400ms ease-out, bottom 400ms ease-out; }
/* 超過したぶんは過去帯が縮んで吸う。過去帯の高さ・堆積の下端・上限罫線の位置が
   同時に7pxずつ下がり、稜線は動かない。どれか1つでも漏らすと段差が出る。 */
#strata.is-animating .strata-past { transition: height 400ms ease-out; }
#strata.is-animating .strata-over {
  transition: height 400ms ease-out, bottom 400ms ease-out;
}
/* 1pxなので伸び縮みはしないが、超過分がじわっと伸びる横で罫線だけ瞬時に出ると、
   1つの動きとして読めない。同じ400msで濃くする。 */
#strata.is-animating .strata-limit {
  transition: opacity 400ms ease-out, bottom 400ms ease-out;
}
#strata.is-animating .strata-crest {
  transition: bottom 400ms ease-out, background-color 400ms ease-out;
}
#strata.is-animating .strata-veil { transition: bottom 400ms ease-out; }
#strata.is-animating .strata-label {
  transition: bottom 400ms ease-out, color 400ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  #strata.is-animating .strata-stack,
  #strata.is-animating .strata-past,
  #strata.is-animating .strata-over,
  #strata.is-animating .strata-limit,
  #strata.is-animating .strata-crest,
  #strata.is-animating .strata-veil,
  #strata.is-animating .strata-label { transition: none; }
}

/* 残回数ラベル。稜線の直上に接地させる。台座は置かない。
   日本語混じりなので全体は --jp のまま。数字だけ .num で等幅にする。 */
.strata-label {
  position: absolute;
  right: 22px;
  line-height: 20px;
  font-size: 11px;
  letter-spacing: .02em;
}

/* ---- 画面の共通枠 ---- */

/* 前景は地層の上に置く。幅は640pxのままにする。 */
.view { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
.screen { padding: 16px 16px 32px; }

.screen-title { margin: 8px 0 16px; font-size: 1.25rem; }

.section-title {
  margin: 24px 0 8px;
  font-size: 0.9rem;
  color: var(--ash);
}

.note { color: var(--ash); font-size: 0.9rem; }

/* ---- カード（行の入れ物）---- */

.card {
  background: var(--seam);
  border: 1px solid var(--rule);
  border-radius: 13px;
  overflow: hidden;
}

.card + .card { margin-top: 8px; }

.card-empty { padding: 16px; color: var(--ash); }

/* ---- 行 ---- */

.row {
  display: flex;
  align-items: stretch;
  min-height: 44px;
  border-top: 1px solid var(--rule);
}
.row:first-child { border-top: none; }

/* 行の本体（タップで移動する部分） */
.row-main {
  flex: 1;
  display: block;
  min-height: 44px;
  padding: 10px 12px;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.row-main:active { background: var(--loam); }

.row-name { display: block; }
.row-sub { display: block; font-size: 0.85rem; color: var(--ash); }

/* 行末の並べ替えボタン */
.row-tools { display: flex; align-items: center; padding-right: 6px; }

.icon-button {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--bone);
  font-size: 1rem;
  cursor: pointer;
}
.icon-button:disabled { color: var(--rule); cursor: default; }
.icon-button:not(:disabled):active { background: var(--loam); }

/* ---- ボタン ---- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--seam);
  color: var(--bone);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.button:active { background: var(--loam); }

.button-wide { display: flex; width: 100%; margin-top: 8px; }

.button-quiet {
  border-color: transparent;
  background: transparent;
  color: var(--ash);
}

.button-row { display: flex; gap: 8px; margin-top: 24px; }
.button-row .button { flex: 1; }

/* ---- フォーム ---- */

.field { margin-top: 16px; }
.field-label { display: block; margin-bottom: 6px; font-size: 0.9rem; color: var(--ash); }

.input, .select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--loam);
  color: var(--bone);
  /* 16px を下回ると iPhone で画面が勝手に拡大するため下げない */
  font-size: 16px;
  font-family: var(--jp);
}
.input-num { font-family: var(--mono); }

.field-inline { display: flex; align-items: center; gap: 8px; }
.field-inline .input { width: 6em; }
.select-narrow { width: auto; }

/* フォーム上部のメッセージ（alert は使わない） */
.form-message {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--seam);
  font-size: 0.9rem;
}
.form-message:empty { display: none; }

/* ---- アーカイブ済みの折りたたみ ---- */

.archived-block { margin-top: 24px; }
.archived-summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  color: var(--ash);
  cursor: pointer;
  list-style: none;
}
.archived-summary::-webkit-details-marker { display: none; }
.archived-block[open] .archived-summary { border-radius: 8px 8px 0 0; }
.archived-list { border: 1px solid var(--rule); border-top: none; border-radius: 0 0 8px 8px; }

/* ---- 下部ナビ ---- */

.nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--seam);
  border-top: 1px solid var(--rule);
  padding-bottom: env(safe-area-inset-bottom);
  /* 前景(.view)より手前。指定しないと .view の z-index: 1 に負けて、
     画面をスクロールしたときに内容がナビの上に重なって見える。
     地層=0 / 前景=1 / ナビ=2 / ダイアログ=10 の順にする。 */
  z-index: 2;
}

.nav-inner { display: flex; height: 62px; max-width: 640px; margin: 0 auto; }

.tab {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ash);
  font-size: 0.8rem;
  text-decoration: none;
}

/* 選択中の印（上辺の2px×22px）。色はタブごとに変える。 */
.tab::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 2px;
  background: transparent;
}
.tab[aria-current="page"] { color: var(--bone); }
.tab[aria-current="page"]::before { background: var(--ochre); }
.tab[data-tab="measure"][aria-current="page"]::before { background: var(--ember); }

/* ---- ホームの前景 ---- */

/* 余白はホーム専用のクラスで上書きする。.screen(16px) を直接変えると
   種目マスタなど他の画面にも波及する。 */
.screen-home { padding: 26px 22px 16px; }

/* 今日のメニューカードをナビの直上に置くため、画面の高さいっぱいに広げる。
   引くのは ナビ62px + ホームバー領域 + .screen-home の上下(26+16)。 */
.home {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 62px - 42px);
  min-height: calc(100dvh - 62px - env(safe-area-inset-bottom) - 42px);
}

/* --- 今週の試合日 --- */

/* バーの場所は表示モードの1行ぶん（44px）で固定する。
   編集モードはここに重ねて出し、下の前景を押し下げない（.game-edit）。 */
.game-bar { position: relative; min-height: 44px; margin-bottom: 20px; }

/* 行の中に入れるとき（設定画面）は行の余白に合わせる */
.row-block { display: block; padding: 10px 12px; }
.row-block .game-bar { margin-bottom: 0; }

/* 編集モードを重ねて出すのはホームだけ。
   バーの高さが前景全体を下へ押し出すと、期の終わりに地層が累計の数字へ届く。
   週メーターと総重量の上半分が隠れるが、隠れること自体が「先に答える」圧になり、
   確定するまで出し続けるという方針とも合う。
   表示モードは常設なので押し出したままにする（隠れると逆に困る）。

   重ねるかどうかは置き場所の都合で、部品の性質ではない。
   部品側（.game-edit）に持たせると設定画面にも付いてまわり、
   カード（overflow: hidden）から曜日チップがはみ出して押せなくなる。 */
.screen-home .game-edit {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  /* 下の前景が透けないように地の色で塞ぐ */
  background: var(--loam);
  /* 週メーターを最後まで覆いきる高さにする。
     2行(44+8+44=96px)だけだと、バーの枠(44+下余白20)を足した先で
     週メーターのバー(95〜99px)に3pxだけ届かず、細い線が下から覗く。
     途中で切れると、覗いたぶんが曜日チップの一部に見えて壊れて映る。
     20pxにすると総重量の字にかかるので16pxにしてある。 */
  padding-bottom: 16px;
}

.game-head { display: block; font-size: 12.5px; color: var(--ash); }

.game-chips { display: flex; gap: 4px; margin-top: 8px; }

/* 曜日のボタン。7個を等分し、44pxの高さを確保する。 */
.game-chip {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--seam);
  color: var(--ash);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
/* 選んだ曜日。--ochre は「積み重ね」の色なので使わない。面の明度で示す。 */
.game-chip.is-on {
  background: var(--bone);
  border-color: var(--bone);
  color: var(--loam);
}

/* 編集モードの1行目。見出しを左、ボタンを右に置く。
   見出しを独立した行にすると3行=148pxになり、期末の地層が累計の数字に届く。 */
.game-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
}

.game-buttons { display: flex; flex: none; gap: 8px; }

/* 上下のパディングを外して44pxに揃える。
   padding: 10px と行間1.6 のままだと 25.6 + 20 + 枠2 = 48px になる。 */
.game-actions .button { padding: 0 16px; }

/* --- 表示モード --- */

/* 行全体がタップ対象。試合が無い週も行ごと残す。 */
.game-view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.game-view:active { opacity: .7; }

.game-view .game-chips { margin-top: 0; flex: none; }

/* 表示モードの曜日。週の見出しに合わせて 12.5px / --ash。
   モックアップに無い要素なので寸法の根拠がなく、隣の週メーターに揃える。
   試合日の印だけ --bone。台座は置かない（地層のラベルと同じ方針）。 */
.game-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  font-size: 12.5px;
  color: var(--ash);
}
.game-day.is-on { color: var(--bone); font-weight: 600; }

/* --- 週メーター --- */

.week-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12.5px;
  color: var(--ash);
}

/* 下余白はモックアップの28pxから詰めてある。
   期末に地層が累計の数字へ届くため、前景の高さを削る必要があった。
   他の余白（総重量まわり、累計3項目）は寸法として決めた値なので触らない。 */
.week-bars { display: flex; gap: 5px; margin: 11px 0 16px; }

.week-bar { flex: 1; height: 4px; border-radius: 2px; background: var(--rule); }
/* 消化したぶん。--ochre は「積み重ね」の色。 */
.week-bar.is-filled { background: var(--ochre); }

/* --- 累積値 --- */

/* ホームの数字には .num（等幅）を当てない。等幅は「桁を揃えて読み比べる」ための
   規約で、一覧や記録画面のためのもの。ここは比較対象が無いので利点が無く、
   書体が変わるぶん見た目だけが崩れる。 */
.total-main {
  font-size: 82px;
  /* 600 より上げない。iPhone の Hiragino Sans は W3 と W6 の2段しか持たず、
     700・800 を指定すると足りないぶんを機械的に太らせるため、にじんで見える。 */
  font-weight: 600;
  line-height: .84;
  letter-spacing: -.045em;
}

/* 単位だけ --ochre。総重量は「積み重ね（増える数字）」そのもの。 */
.total-unit {
  margin-left: 6px;
  font-size: 29px;
  font-weight: 600;
  letter-spacing: normal;
  color: var(--ochre);
}

.total-caption { margin-top: 10px; font-size: 12.5px; color: var(--ash); }

/* 3項目は横並び。数字が上、ラベルが下。 */
.total-subs {
  display: flex;
  gap: 22px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}

/* 行間は body の 1.6 ではなく 1.2。
   1.6 だと 数字33.6px + 余白3px + ラベル18.4px = 約55px になり、
   累計行だけ間延びする。1.2 なら約46pxで、44pxのタップ領域も満たす。
   大きい数字は line-height: .84 を別に指定しているので影響しない。 */
.total-sub-value {
  display: block;
  margin-bottom: 3px;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
}

.total-sub-label {
  display: block;
  font-size: 11.5px;
  line-height: 1.2;
  color: var(--ash);
}

/* 体重セルだけタップできる。数字21px(=33.6px) + 余白3px + ラベル11.5px(=18.4px)
   で約55pxになるので、44pxのために縦へ伸ばす必要はない。 */
.weight-cell {
  /* 行間1.2だとセルは42pxにしかならない（25.2 + 3 + 13.8）ので、
     タップできるこのセルだけ44pxを確保する。横並びは伸びたほうに揃うため、
     3項目の高さは崩れない。 */
  min-height: 44px;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* 現在体重は measurements に入る測定値なので --ember。目標体重は --rust。 */
.weight-now { color: var(--ember); }
.weight-goal { color: var(--rust); }

/* --- 今日のメニュー --- */

/* 明るい面に地の色の文字を置く（モックアップの .today）。 */
/* カードは div。中に2つのボタン（本体とチップ）を入れるため。
   ボタンの中にボタンは置けない。 */
.today-card {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 14px 18px;
  border-radius: 13px;
  background: var(--bone);
  color: var(--loam);
}

/* カード本体。押すと記録画面へ。
   ホームから記録画面へ入る導線はこれ1つしかないので、測定日を過ぎていても塞がない。 */
.today-main {
  flex: 1;
  min-width: 0;
  display: block;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* 測定日を過ぎたときのチップ。押すとサイクル管理画面へ。
   .is-urgent（--rust の面）とは同時に出せない。文字も --rust なので消える。
   いまは「近い」と「過ぎている」が排他なので起きないが、
   両方が重なる状態を足すときはここを直すこと。
   面ごと --rust にはしない。--bone の面に --rust の文字で、目標体重と同じ扱い。
   タップ領域は44pxを確保する（カードは .total-subs より下なので、
   ここが伸びても目標回数の上限には影響しない）。 */
.today-close {
  flex: none;
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  border: none;
  background: transparent;
  color: var(--rust);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

.today-title { display: block; font-size: 15px; font-weight: 600; }

/* 明るい面の上の副文。--ash は暗い面に置く前提の色なので使えない。 */
.today-sub { display: block; margin-top: 3px; font-size: 11.5px; color: #6b6258; }

/* 所要時間。目標でも期限でもないので --rust は使わず、大きさと太さだけで立たせる。
   このカードは測定日が近いと面ごと --rust に反転するので、数字を常に --rust に
   すると反転したときの意味の差が消える。 */
.today-time { flex: none; font-size: 24px; font-weight: 600; line-height: 1; }

/* 測定日が近いとき。--rust の面に乗せる前提の文字色を直に置く。 */
.today-card.is-urgent { background: var(--rust); color: #fbeee9; }
.today-card.is-urgent .today-sub { color: #e7c4ba; }

/* ダイアログ内の入力エラー */
.dialog-error { color: var(--rust); }
.dialog-error:empty { display: none; }

/* ---- 記録画面 ---- */

/* 種目1つぶんの枠。中身は地の色のままにして、
   完了したセットだけを一段持ち上げて見せる。 */
.session-card {
  margin-top: 12px;
  border: 1px solid var(--rule);
  border-radius: 13px;
  overflow: hidden;
}

.exercise-head { padding: 10px 12px; }

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

/* 完了したセット。積み上がったぶんだけ面が持ち上がる。 */
.set-row.is-done { background: var(--seam); }

.set-no {
  width: 1.4em;
  color: var(--ash);
  font-family: var(--mono);
  font-size: 0.85rem;
}

.set-fields { flex: 1; display: flex; align-items: center; gap: 6px; }

.set-input, .set-select {
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--loam);
  color: var(--bone);
  /* 16px を下回ると iPhone で画面が勝手に拡大する */
  font-size: 16px;
  font-family: var(--mono);
}
.set-input { width: 4em; text-align: right; }

.set-unit { color: var(--ash); font-size: 0.85rem; }

.set-action {
  min-height: 44px;
  min-width: 44px;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.set-action:disabled { color: var(--ash); border-color: var(--rule); cursor: default; }
.set-action.is-undo { border-color: transparent; color: var(--ash); }

/* ---- 確認ダイアログ ---- */

.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  /* 背後を隠す暗幕。面の色ではなく黒の透過で暗くする */
  background: rgba(0, 0, 0, 0.6);
}

.dialog {
  width: 100%;
  max-width: 400px;
  padding: 16px;
  background: var(--seam);
  border: 1px solid var(--rule);
  border-radius: 13px;
}

.dialog-title { margin: 0 0 8px; font-size: 1.05rem; }
.dialog-line { margin: 4px 0; font-size: 0.95rem; }
.dialog-line .num { font-family: var(--mono); }

.dialog-buttons { display: flex; gap: 8px; margin-top: 16px; }
.dialog-buttons .button { flex: 1; }

/* 取り消せない操作の確認ボタン。--rust は目標・期限と共通で、
   「止まって考えるもの」を指す色として使う。 */
.button-danger {
  background: var(--rust);
  border-color: var(--rust);
  color: var(--bone);
}

/* ---- 寸法の読み出し ---- */

/* dev.html で切り替えたときだけ出る。ふだんは描かれない。
   実機の safe-area と Safari のバーは PC では測れないので、
   これが実測の唯一の手段になる。地層の寸法はすべてこの値から決めている。 */
.geometry-readout {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  padding: 6px 10px;
  background: rgba(0, 0, 0, .82);
  color: var(--bone);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
}

/* ---- サイクル管理 ---- */

.cycle-card { padding: 4px 12px 16px; }

/* 読み取り専用の行。押せる行（.row-main）と見た目を揃えるが、
   カーソルと押したときの反応は付けない。 */
.row-static { padding: 10px 12px; }

.cycle-summary { padding: 8px 0; }

.cycle-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 32px;
}

.cycle-row-name { flex: none; width: 3.5em; font-size: 0.85rem; color: var(--ash); }
.cycle-row-value { flex: 1; }
.cycle-row-note { flex: none; font-size: 0.85rem; color: var(--ash); }

/* 保存されている目標が上限を超えているときの注意。
   黙って直さないと決めているので、気づける場所に出す。 */
.cycle-warn {
  margin: 8px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--rust);
  border-radius: 8px;
  font-size: 0.85rem;
}
.cycle-warn span { display: block; }

/* 保存する前に出す「8週 × 週5回 = 40回」。 */
.cycle-preview { margin: 16px 0 0; font-size: 0.9rem; }

.cycle-error { margin: 8px 0 0; font-size: 0.85rem; color: var(--rust); }
.cycle-error:empty { display: none; }

/* 期を閉じるボタンは保存から離す。取り消せない操作なので、並べて押し間違えない。 */
.cycle-close-row { margin-top: 32px; }

.cycle-edit .note { margin: 8px 0 0; font-size: 0.8rem; }

/* ---- 測定 ---- */

/* 見出しの右端に前回差を出す。良し悪しで色を変えず、符号だけ。
   接地時間は短いほうが良く、RSI・CMJ・SJ は高いほうが良い。
   項目ごとに向きが違うので、色に意味を持たせると覚えられない。 */
.measure-diff {
  float: right;
  color: var(--ember);
  font-variant-numeric: tabular-nums;
}
.measure-diff:empty { display: none; }

/* EUR は入力欄を置かない。CMJ ÷ SJ で一意に決まる値を二重に持たない。 */
.measure-eur {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px dashed var(--rule);
  border-radius: 8px;
}

.measure-eur-value { font-size: 1.05rem; color: var(--ember); }
.measure-eur-note { font-size: 0.8rem; color: var(--ash); }

/* ---- 履歴 ---- */

/* 進行中の期の印。古い期を薄くする表現は持ち込まない。
   地層で薄くしているのは堆積の奥行きのためで、履歴は読むための画面。 */
.history-open {
  margin-left: 8px;
  font-size: 0.75rem;
  color: var(--ochre);
}

.history-measure { color: var(--ember); }

/* 削除は詳細の末尾。戻るボタンから離して置く。 */
.history-delete { margin-top: 32px; }

/* 差の比較相手。履歴は「前期比」、こちらは「前回の測定との差」で規則が違う。 */
.measure-base { margin: 8px 0 0; font-size: 0.8rem; color: var(--ash); }