/*
  共通の部品の見た目（設計書 5 章）。値は css/tokens.css の変数だけを使う（直書きしない）。
  ・押せる物は〔面／枠／太さ〕で押せない物と描き分ける（ui-design 16-4.5）。
  ・押している状態は --press の地（地との明るさの比 1.2:1 以上。16-4.8）。フォーカスは --focus の 2px の枠を 2px 離す。
*/

*, *::before, *::after { box-sizing: border-box; }
/* 文字の大きさの元（rem）: 17px。iPhone は端末の文字の大きさの設定に追う（報告書 2-11・3-15） */
html { font-size: 17px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@supports (font: -apple-system-body) { html { font: -apple-system-body; font-family: var(--font); } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--fw-normal);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-headline);
  line-break: strict;
  overflow-wrap: anywhere;
  -webkit-tap-highlight-color: transparent;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
/* 押した瞬間に変え、離したら --dur-1 で戻す（報告書 3-11） */
button:active, .row-main:active { transition-duration: 0ms !important; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
a { color: var(--text); text-decoration: underline; text-underline-offset: 0.2em; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--text-3); font-size: var(--fs-small); line-height: var(--lh-small); margin: 0; }
.icon { display: block; flex: none; }

/* ---------- ボタン（iOS の作法: 文字ボタンは強調の色の字、大きいボタンは高さ 50・角 12） ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--hit-min);
  min-width: var(--hit-min);
  padding: 0 var(--sp-4);
  border-radius: var(--r-btn);
  border: 0;
  background: transparent;
  font-size: var(--fs-body);
  font-weight: var(--fw-normal);
  line-height: var(--lh-ui);
  white-space: nowrap;
  transition: background-color var(--dur-1) linear, filter var(--dur-1) linear;
}
.btn:disabled { opacity: 0.4; cursor: default; }
.btn-icon { display: inline-flex; }
/* 強いボタン（塗り。一画面に一つ以下。16-4.1） */
.btn-strong { background: var(--accent-fill); color: var(--on-accent); min-height: var(--btn-h); font-weight: var(--fw-bold); padding: 0 var(--sp-5); }
.btn-strong:active:not(:disabled) { filter: brightness(0.82); }
/* 普通のボタン（灰の面〔tertiarySystemFill〕に強調の色の字。報告書 3-6 の gray） 字は面の上で 明 5.10 以上／暗 4.95 以上 */
.btn-normal { background: var(--fill-3); color: var(--accent); font-weight: var(--fw-bold); }
.btn-normal:active:not(:disabled) { filter: brightness(0.88); }
/* 文字ボタン（帯の中。強調の色の字） */
.btn-quiet { color: var(--accent); padding: 0 var(--sp-2); }
.btn-quiet:active:not(:disabled) { background: var(--press-bg); }
.btn-quiet .btn-label { font-weight: var(--fw-normal); }
.btn-danger { color: var(--danger); }
.btn-danger:active:not(:disabled) { background: var(--press); }
.btn-danger-fill { background: var(--danger-fill); color: var(--on-danger-fill); min-height: var(--btn-h); font-weight: var(--fw-bold); }
.btn-danger-fill:active:not(:disabled) { filter: brightness(0.85); }
.btn-small { min-height: var(--hit-min); padding: 0 var(--sp-3); font-size: var(--fs-small); }
.btn-large { min-height: var(--btn-h); padding: 0 var(--sp-5); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--hit-min);
  height: var(--hit-min);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--accent);
  flex: none;
}
.icon-btn:active { background: var(--press-bg); }

/* 道具の帯の一つ（印の下に言葉。強調の色） */
.tool-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--hit);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0;
  border-radius: var(--r-m);
  background: transparent;
  color: var(--accent);
  padding: var(--sp-1) 0;
}
.tool-btn:active { background: var(--press-bg); }
.tool-label { font-size: var(--fs-caption); line-height: 1.2; white-space: nowrap; }

/* ---------- 行（iOS の inset grouped: 角 10 の面にまとめ、行の間は左を 16 空けた細い線） ---------- */
.group {
  margin: 0 0 var(--group-gap);
  border-radius: var(--r-group);
  background: var(--surface);
  overflow: hidden;
}
:root[data-list-style="plain"] .group { background: transparent; border-radius: 0; overflow: visible; }
.row {
  position: relative;
  display: flex;
  align-items: stretch;
  background: inherit;
  touch-action: pan-y;
}
.row + .row::after, .row + .list-sentinel + .row::after {
  content: "";
  position: absolute;
  top: 0;
  left: var(--cell-x);
  right: 0;
  height: 1px;
  transform: scaleY(0.5);
  transform-origin: top;
  background: var(--line);
  z-index: 1;
}
.row-main {
  position: relative;
  z-index: 2;
  flex: 1;
  min-width: 0;
  display: block;
  text-align: left;
  border: 0;
  background: inherit;
  padding: var(--row-pad) var(--cell-x);
  min-height: var(--cell-h);
  transition: transform var(--dur-snappy) var(--ease-snappy), background-color var(--dur-1) linear;
  -webkit-user-select: none;
  user-select: none;
}
.group .row-main { background: var(--surface); }
:root[data-list-style="plain"] .group .row-main { background: var(--bg); }
.row-main:active, .row.is-selected .row-main { background: var(--press) !important; }
.row.is-dragging .row-main { transition: none; }
.row-lead {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--hit);
  min-height: var(--hit);
  border: 0;
  background: inherit;
  color: var(--accent);
}
.row-body { display: flex; flex-direction: column; gap: 2px; }
.row-title {
  font-size: var(--fs-headline);
  font-weight: var(--fw-bold);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-headline);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.row-pin { display: inline-flex; vertical-align: -2px; margin-right: var(--sp-1); color: var(--text-3); }
.row-sub {
  color: var(--text-3);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: var(--ls-small);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.row-when { color: var(--text-2); font-variant-numeric: tabular-nums; margin-right: var(--sp-2); }
.row-meta { color: var(--text-3); font-size: var(--fs-small); line-height: var(--lh-small); font-variant-numeric: tabular-nums; }
.row-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-1); }
/* 区別の色の印（設定「グループの色の印」） */
.row.has-mark .row-main::before {
  content: "";
  position: absolute;
  left: 6px;
  top: var(--sp-3);
  bottom: var(--sp-3);
  width: 3px;
  border-radius: var(--r-pill);
  background: var(--mark, var(--g-none));
}
:root[data-group-mark="dot"] .row.has-mark .row-main::before { width: 8px; height: 8px; left: 4px; bottom: auto; top: 19px; }
:root[data-group-mark="none"] .row.has-mark .row-main::before { display: none; }

/* 行を滑らせて出す操作（押すまで何も起きない） */
.row-swipe { position: absolute; top: 0; right: 0; bottom: 0; z-index: 1; display: flex; }
.swipe-btn {
  width: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0;
  background: var(--press);
  color: var(--text);
  font-size: var(--fs-caption);
}
.swipe-btn + .swipe-btn { box-shadow: inset 1px 0 0 var(--line); }
.swipe-btn.is-danger { color: var(--danger); }
.swipe-btn:active { filter: brightness(0.9); }

/* 小見出し（iOS の inset grouped の見出し: Footnote、控えめの字、面の外の左 16） */
.section-title {
  margin: 0;
  padding: var(--sp-2) var(--cell-x) 6px;
  font-size: var(--fs-small);
  font-weight: var(--fw-normal);
  line-height: var(--lh-ui);
  color: var(--text-3);
}
.section-count { margin-left: var(--sp-2); font-variant-numeric: tabular-nums; }

/* ---------- 札（タグ） ---------- */
.chip-wrap { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  max-width: 100%;
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--soft, var(--g-none-soft));
  color: var(--text);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  border: 1px solid transparent;
}
.chip-text { overflow-wrap: anywhere; }
.chip-dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--mark, var(--g-none)); flex: none; }
.chip-toggle, .chip-removable { min-height: var(--hit-min); padding: 0 var(--sp-3); font-size: var(--fs-body); }
.chip-toggle:active { filter: brightness(0.9); }
.chip-toggle.is-on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); font-weight: var(--fw-bold); }
.chip-check { display: inline-flex; }
.chip-removable { padding-right: 0; }
.chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--hit-min);
  height: var(--hit-min);
  margin: calc(-1 * var(--sp-1)) 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text);
}
.chip-x:active { background: var(--press); }

/* 区別の色の読み替え（js/kit/colors.js の key） */
[data-look="sora"], [data-mark="sora"] { --mark: var(--g-sora); --soft: var(--g-sora-soft); }
[data-look="dai"], [data-mark="dai"] { --mark: var(--g-dai); --soft: var(--g-dai-soft); }
[data-look="midori"], [data-mark="midori"] { --mark: var(--g-midori); --soft: var(--g-midori-soft); }
[data-look="fuji"], [data-mark="fuji"] { --mark: var(--g-fuji); --soft: var(--g-fuji-soft); }
[data-look="ki"], [data-mark="ki"] { --mark: var(--g-ki); --soft: var(--g-ki-soft); }
[data-look="aomidori"], [data-mark="aomidori"] { --mark: var(--g-aomidori); --soft: var(--g-aomidori-soft); }
[data-look="momo"], [data-mark="momo"] { --mark: var(--g-momo); --soft: var(--g-momo-soft); }
[data-look="cha"], [data-mark="cha"] { --mark: var(--g-cha); --soft: var(--g-cha-soft); }
[data-look="none"], [data-mark="none"] { --mark: var(--g-none); --soft: var(--g-none-soft); }

/* ---------- 切り替え・選ぶ行・スイッチ ---------- */
.seg { display: flex; gap: var(--sp-2); padding: var(--sp-1); border-radius: var(--r-m); background: var(--press-bg); }
/* 項目の間は 8px（隣の的と 8px 離す。16-4.6）、字は 15px（一画面の文字の組み合わせを増やさない。16-5.4。統合で直した） */
.seg-item {
  flex: 1;
  min-width: 0;
  min-height: var(--hit-min);
  border: 0;
  border-radius: var(--r-s);
  background: transparent;
  color: var(--text);
  font-size: var(--fs-small);
  font-weight: var(--fw-normal);
  line-height: var(--lh-ui);
  padding: var(--sp-1) var(--sp-2);
  overflow-wrap: anywhere;
}
.seg-item:active { background: var(--press); }
/* 選んだ所: iOS は白い面で浮かせる。色だけに頼らず太字も添える（16-6.9） */
.seg-item[aria-checked="true"] { background: var(--surface); font-weight: var(--fw-bold); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), inset 0 0 0 1px var(--line-strong); }

.choices { display: flex; flex-direction: column; border-radius: var(--r-group); background: var(--surface); overflow: hidden; }
.choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--cell-h);
  padding: var(--row-pad) var(--cell-x);
  border: 0;
  background: transparent;
  text-align: left;
  line-height: var(--lh-ui);
}
.choice + .choice::before { content: ""; position: absolute; top: 0; left: var(--cell-x); right: 0; height: 1px; transform: scaleY(0.5); background: var(--line); }
.choice:active { background: var(--press); }
.choice-mark { color: var(--accent); }
.choice-text { flex: 1; display: flex; flex-direction: column; }
.choice-desc { color: var(--text-3); font-size: var(--fs-small); line-height: var(--lh-small); }
.choice-mark { width: 24px; height: 24px; flex: none; }
.choice[aria-checked="true"] .choice-label { font-weight: var(--fw-bold); }

.switch-row { position: relative; display: flex; align-items: center; gap: var(--sp-3); min-height: var(--hit); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-m); cursor: pointer; }
.switch-row:active { background: var(--press); }
.switch-text { flex: 1; display: flex; flex-direction: column; }
.switch-desc { color: var(--text-3); font-size: var(--fs-small); line-height: var(--lh-small); }
.switch-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { width: 51px; height: 31px; flex: none; border-radius: var(--r-pill); background: var(--press); box-shadow: inset 0 0 0 1px var(--line-strong); position: relative; transition: background-color var(--dur-2) var(--ease); }
.switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: var(--r-pill); background: #ffffff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); transition: transform var(--dur-2) var(--ease); }
.switch-input:checked + .switch-track { background: var(--switch-on); box-shadow: none; }
.switch-input:checked + .switch-track::after { transform: translateX(20px); }
.switch-input:focus-visible + .switch-track { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- 入力欄 ---------- */
.field { display: flex; flex-direction: column; gap: var(--sp-1); }
.field-label { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--text-2); }
.field-input, .search-input {
  width: 100%;
  min-height: var(--hit);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  background: var(--surface);
  font-size: max(16px, var(--fs-body));
  line-height: var(--lh-ui);
}
.field-input::placeholder, .search-input::placeholder { color: var(--text-3); opacity: 1; }
.field-input:focus, .search-input:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.field-error { margin: 0; color: var(--danger); font-size: var(--fs-small); }
.search-field { position: relative; display: flex; align-items: center; }
.search-mark { position: absolute; left: var(--sp-3); color: var(--text-3); pointer-events: none; }
.search-input { padding-left: calc(var(--sp-3) + 20px + var(--sp-2)); -webkit-appearance: none; appearance: none; }

/* ---------- 層（全画面・窓） ---------- */
.layer { position: fixed; inset: 0; z-index: 10; }
/* 全画面は右から押し出す（iOS の押し出しの動き。意味: 一段奥へ進んだ） */
.layer-screen {
  top: var(--app-top, 0px);
  height: var(--app-h, 100dvh);
  bottom: auto;
  background: var(--bg);
  transform: translateX(100%);
  transition: transform var(--dur-3) var(--ease), opacity var(--dur-3) var(--ease);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
}
.layer-screen.is-in { transform: none; }
.layer-screen.is-out { transform: translateX(100%); }
.scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity var(--dur-2) var(--ease); }
.layer-window.is-in .scrim { opacity: 1; }
.layer-window.is-modeless { pointer-events: none; }
.layer-window.is-modeless .sheet { pointer-events: auto; }

/* 下から出る窓（つまみ 36×5、題は真ん中、右に〔閉じる／完了〕。下へ払っても閉じる。報告書 3-7）
   中くらいの窓（sheet-auto）は左右と下に 8 の隙間を空けて浮かせ、角 32。全体の高さの窓（sheet-full）は端に付け、上の角 12 */
.sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  max-width: 640px;
  max-height: min(62dvh, 100%);
  display: flex;
  flex-direction: column;
  background: var(--sheet);
  border-radius: var(--r-l) var(--r-l) 0 0;
  box-shadow: var(--shadow);
  padding-bottom: var(--safe-b);
  transform: translateY(100%);
  transition: transform var(--dur-sheet) var(--ease);
}
.sheet-auto {
  left: var(--sheet-gap);
  right: var(--sheet-gap);
  bottom: calc(var(--sheet-gap) + var(--safe-b));
  max-height: min(62dvh, calc(100% - 2 * var(--sheet-gap)));
  border-radius: var(--r-sheet-float);
  padding-bottom: var(--sp-2);
  transform: translateY(calc(100% + var(--sheet-gap) + var(--safe-b)));
}
.sheet.is-dragging { transition: none; }
.sheet-full { max-height: calc(var(--app-h, 100dvh) - var(--sp-6)); height: calc(var(--app-h, 100dvh) - var(--sp-6)); }
.layer-window.is-in .sheet { transform: none; }
.sheet-grip { flex: none; width: var(--grabber-w); height: var(--grabber-h); margin: 5px auto 0; border-radius: var(--r-pill); background: var(--line-strong); opacity: 0.6; }
.sheet-head { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: var(--bar-h); padding: 0 var(--sp-2); touch-action: none; }
.sheet-head > :last-child { justify-self: end; }
.sheet-title { grid-column: 2; margin: 0; font-size: var(--fs-headline); font-weight: var(--fw-bold); line-height: var(--lh-ui); text-align: center; }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-2) var(--gutter) var(--sp-4); }
.sheet-stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.sheet-stack > .section-title { padding-bottom: 0; margin-bottom: calc(-1 * var(--sp-2)); }
.picker { display: flex; flex-direction: column; gap: var(--sp-4); }

/* 操作の一覧（窓の中の一つの面にまとめる） */
.action-list { display: flex; flex-direction: column; border-radius: var(--r-group); background: var(--surface); overflow: hidden; }
.action {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--cell-h);
  padding: var(--row-pad) var(--cell-x);
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  font-size: var(--fs-body);
  line-height: var(--lh-ui);
}
.action + .action::before { content: ""; position: absolute; top: 0; left: calc(var(--cell-x) + 22px + var(--sp-3)); right: 0; height: 1px; transform: scaleY(0.5); background: var(--line); }
.action-icon { color: var(--accent); }
.action:active { background: var(--press); }
.action.is-danger, .action.is-danger .action-icon { color: var(--danger); }
.action-groups { display: flex; flex-direction: column; gap: var(--sp-5); }
.action-divider { height: var(--sp-5); background: var(--sheet); }

/* 中央の窓（iOS の確かめ: 幅 270、角 14、題 17 太字、文 13、ボタンは字だけで下に並ぶ） */
.layer-dialog { display: flex; align-items: center; justify-content: center; padding: var(--sp-4); }
.dialog {
  position: relative;
  width: min(300px, 100%);
  border-radius: var(--r-alert);
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: center;
  overflow: hidden;
  transform: scale(1.1);
  opacity: 0;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) linear;
}
.layer-dialog.is-in .dialog { transform: none; opacity: 1; }
.dialog-title { margin: 0; padding: var(--sp-5) var(--sp-4) 0; font-size: var(--fs-headline); font-weight: var(--fw-bold); line-height: var(--lh-ui); }
.dialog-text { margin: 0; padding: var(--sp-1) var(--sp-4) 0; color: var(--text); font-size: var(--fs-footnote); line-height: var(--lh-small); }
.dialog-buttons { display: flex; margin-top: var(--sp-5); box-shadow: inset 0 1px 0 var(--line); }
.dialog-buttons .btn { flex: 1; border-radius: 0; min-height: var(--hit-min); background: transparent; color: var(--accent); filter: none; }
.dialog-buttons .btn + .btn { box-shadow: inset 1px 0 0 var(--line); }
.dialog-buttons .btn:active { background: var(--press); }
.dialog-buttons .btn-danger-fill, .dialog-buttons .btn-danger { color: var(--danger); font-weight: var(--fw-normal); }
.dialog-buttons .btn-strong { font-weight: var(--fw-bold); }

.grid-buttons { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--sp-2); }

/* ---------- お知らせ ---------- */
.toasts {
  position: fixed;
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: calc(var(--toast-bottom, var(--sp-4)) + var(--safe-b)); /* 実際の置き場は kit/toast.js の place() が決める */
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  max-width: 560px;
  width: 100%;
  min-height: var(--hit);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  border-radius: var(--r-alert);
  background: var(--toast-bg);
  color: var(--toast-text);
  box-shadow: var(--shadow);
  transform: translateY(16px);
  opacity: 0;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
.toast.is-in { transform: none; opacity: 1; }
.toasts.is-top { top: calc(var(--safe-t) + var(--sp-2)); bottom: auto !important; }
.toast-text { flex: 1; font-size: var(--fs-body); line-height: var(--lh-small); }
.toast-action {
  flex: none;
  min-height: var(--hit-min);
  padding: 0 var(--sp-3);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--toast-text);
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ---------- 空・読み込み中・進み具合・誤り ---------- */
.state { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); padding: var(--sp-7) var(--sp-4); text-align: center; color: var(--text-2); }
.state-title { margin: 0; font-size: var(--fs-body); }
.state-text { margin: 0; color: var(--text-3); font-size: var(--fs-small); }
.state-loading { flex-direction: row; justify-content: center; }
.spinner { width: 20px; height: 20px; border-radius: var(--r-pill); border: 2px solid var(--line-strong); border-top-color: var(--text); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.progress-bar { width: 100%; max-width: 320px; height: 6px; border-radius: var(--r-pill); background: var(--press); overflow: hidden; }
.progress-fill { display: block; height: 100%; background: var(--accent-fill); }
.state-error .state-title { color: var(--text); font-weight: var(--fw-bold); }

/* ---------- 本文（整えた表示） ---------- */
.md { font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-note-body); }
.md > :first-child { margin-top: 0; }
.md p, .md ul, .md ol, .md blockquote, .md pre, .md table { margin: 0 0 var(--sp-3); }
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { margin: var(--sp-5) 0 var(--sp-2); font-size: var(--fs-title); font-weight: var(--fw-heavy); line-height: var(--lh-ui); }
.md h3, .md h4, .md h5, .md h6 { font-size: var(--fs-body); }
.md ul, .md ol { padding-left: 1.5em; }
.md li { margin: var(--sp-1) 0; }
.md li:has(> input[type="checkbox"]) { list-style: none; margin-left: -1.5em; }
.md input[type="checkbox"], .task-line input { width: 22px; height: 22px; accent-color: var(--accent-fill); margin: 0 var(--sp-2) 0 0; vertical-align: -5px; accent-color: var(--accent-fill); }
.md blockquote { padding-left: var(--sp-3); border-left: 3px solid var(--line-strong); color: var(--text-2); }
.md code { font-family: var(--font-mono); font-size: 0.9em; padding: 0 var(--sp-1); border-radius: var(--r-s); background: var(--surface); }
.md pre { padding: var(--sp-3); border-radius: var(--r-m); background: var(--surface); overflow-x: auto; }
.md pre code { padding: 0; background: none; }
.md hr { border: 0; height: 1px; background: var(--line-strong); margin: var(--sp-5) 0; }
.md table { border-collapse: collapse; display: block; overflow-x: auto; }
.md th, .md td { border: 1px solid var(--line-strong); padding: var(--sp-1) var(--sp-2); }
.md img { max-width: 100%; height: auto; border-radius: var(--r-s); }
.md del { color: var(--text-2); }
.ext-media { font-size: var(--fs-small); }

/* ---------- 動きを減らす（報告書 3-11）: 移動をやめ、フェードだけにする ---------- */
:root[data-motion="reduce"] .layer-screen, :root[data-motion="reduce"] .layer-screen.is-out { transform: none; opacity: 0; }
:root[data-motion="reduce"] .layer-screen.is-in { opacity: 1; }
:root[data-motion="reduce"] .sheet { transform: none; opacity: 0; transition: opacity var(--dur-3) var(--ease); }
:root[data-motion="reduce"] .layer-window.is-in .sheet { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="normal"]) .layer-screen, :root:not([data-motion="normal"]) .layer-screen.is-out { transform: none; opacity: 0; }
  :root:not([data-motion="normal"]) .layer-screen.is-in { opacity: 1; }
  :root:not([data-motion="normal"]) .sheet { transform: none; opacity: 0; transition: opacity var(--dur-3) var(--ease); }
  :root:not([data-motion="normal"]) .layer-window.is-in .sheet { opacity: 1; }
}

/* ---------- 設定「印のあるボタン」が「印だけ」のとき（言葉は読み上げのために残す） ----------
   強いボタン（その画面の主な操作）と、印の無いボタンは言葉のまま。 */
:root[data-icon-labels="off"] .tool-label,
:root[data-icon-labels="off"] .btn:not(.btn-strong):has(.btn-icon) .btn-label,
:root[data-icon-labels="off"] .tab-label,
:root[data-icon-labels="off"] .swipe-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- 月の暦（js/kit/month.js。統合で共通に上げた） ---------- */
.month { display: flex; flex-direction: column; gap: var(--sp-2); }
.month-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; }
.month-title { text-align: center; font-size: var(--fs-headline); font-weight: var(--fw-bold); line-height: var(--lh-ui); font-variant-numeric: tabular-nums; }
.month-nav { gap: 0; }
/* 日: 44px の的を上下左右とも 8px 空けて 7 列（7×44＋6×8＝356px。幅 360px の窓で左右の余白の外まで使う） */
.month-grid {
  display: grid;
  grid-template-columns: repeat(7, var(--hit-min));
  gap: var(--hit-gap);
  justify-content: center;
  margin: 0 calc(-1 * var(--gutter));
}
.month-wd { display: flex; align-items: center; justify-content: center; min-height: var(--sp-5); color: var(--text-3); font-size: var(--fs-caption); }
.month-day {
  position: relative;
  width: var(--hit-min);
  height: var(--hit-min);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text);
  font-size: var(--fs-body);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  padding: 0;
}
.month-day:active { background: var(--press-bg); }
.month-day.is-past { color: var(--text-3); }
.month-day.is-today { font-weight: var(--fw-heavy); box-shadow: inset 0 0 0 1px var(--line-strong); }
.month-day.is-on { background: var(--accent-fill); color: var(--on-accent); font-weight: var(--fw-heavy); box-shadow: none; }
.month-dot { position: absolute; bottom: 5px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: var(--r-pill); background: var(--text-2); visibility: hidden; }
.month-day.has-mark .month-dot { visibility: visible; }
.month-day.is-on .month-dot { background: var(--on-accent); }