/* S10 設定（担当G）と、文書・はじめての設定でも使う行の部品（.set-*。js/screens/settings/parts.js）。
   iOS の「設定」アプリの形: 角の丸い面（.group）の中に、高さ 44 以上の行。行の間は左を 16 空けた細い線。
   右に今の値（控えめの字）と ›。値は tokens.css の変数だけを使う（直書きしない）。 */

.settings-body { padding-bottom: var(--sp-7); }
.set-block { margin: 0 0 var(--sp-5); }
.set-block > .group { margin-bottom: 0; }
.set-block > .section-title { padding-left: var(--cell-x); }

.set-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: var(--cell-h);
  padding: var(--row-pad) var(--cell-x);
  border: 0;
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-body);
  line-height: var(--lh-ui);
  text-align: left;
}
:root[data-list-style="plain"] .set-row { background: var(--bg); }
.set-group > * + *::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--cell-x);
  right: 0;
  height: 1px;
  transform: scaleY(0.5);
  transform-origin: top;
  background: var(--line);
}
.set-group > * { position: relative; }
button.set-row { cursor: pointer; transition: background-color var(--dur-1) linear; }
button.set-row:active:not(:disabled) { background: var(--press); }
button.set-row:disabled { color: var(--text-3); cursor: default; }
.set-label { flex: 1; min-width: 0; }
/* 名前は少なくとも 4 割を取り、値は 6 割まで（短い値なら名前が広がる。長い値は値の側で折り返す） */
.set-row .set-label { min-width: 40%; }
.set-value { flex: 0 1 auto; min-width: 0; max-width: 60%; color: var(--text-3); text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.set-value[data-level="error"] { color: var(--danger); }
.set-chevron { flex: none; display: inline-flex; color: var(--text-3); margin-right: calc(-1 * var(--sp-1)); }
.set-action { color: var(--accent); }
.set-action.is-danger { color: var(--danger); }
.set-foot { margin: 0; padding: var(--sp-2) var(--cell-x) 0; color: var(--text-3); font-size: var(--fs-footnote); line-height: var(--lh-small); }
.set-foot[hidden] { display: none; }

/* スイッチの行（kit の toggle を面の中の行にする） */
.set-switch { border-radius: 0; min-height: var(--cell-h); padding: var(--sp-2) var(--cell-x); background: var(--surface); }
:root[data-list-style="plain"] .set-switch { background: var(--bg); }
.set-switch .switch-label { line-height: var(--lh-ui); }
.set-switch .switch-desc { margin-top: 2px; }

/* 選ぶ行（ラジオ）の面 */
.set-choices { margin: 0; }
:root[data-list-style="plain"] .set-choices { background: transparent; border-radius: 0; }

/* 使っている量の棒（4GB のうち何%） */
.set-usage { flex-wrap: wrap; row-gap: var(--sp-2); }
.set-meter { flex-basis: 100%; height: 6px; border-radius: var(--r-pill); background: var(--press); overflow: hidden; }
.set-meter-fill { display: block; height: 100%; background: var(--accent-fill); }

/* 中央の窓のボタンが3つのときは、縦に並べる（iOS の作法。字が大きくても切れない）。共通の部品に上げたい（報告に書いた） */
.dialog-buttons:has(> .btn:nth-child(3)) { flex-direction: column; }
.dialog-buttons:has(> .btn:nth-child(3)) .btn + .btn { box-shadow: inset 0 1px 0 var(--line); }