/* 値は 25h デザインマスタの生成物を引く — **写さない**。
   tokens.css は `python3 03_works/systems/design/tokens-to-css.py --write` が置く (手で書かない)。 */
@import url("tokens.css?v=2");

/* 道標 — 滲テーマ (25h brand: Sumi + Ruri + Washi)
   vessel の変数系を継承。依存ゼロ、単一ファイル。 */

/* 役の名前はマスタのもの (tokens.css) をそのまま使う — 別名を立てない。
   別名を立てると、マスタが値を変えても製品に届かない (2026-07-28 実バグ: --fs-body の
   手写し 0.95rem がマスタの 16px を上書きし、--step-* の梯子ごと殺していた)。
   昼夜の切替も tokens.css が持つ (ここで再宣言しない)。 */

/* ---------- 器 (--shell) — 「画面にあった大きさ」を一箇所で決める ----------
   **器と、読む幅は、別のもの。** 手の中では同じ (器 = 一行幅) だが、広い窓では分かれる。
   - 器 `--shell` = 面が占める幅。広い窓では `measure-wide` (マスタが「レイアウトの器。
     本文の一行幅ではない」と宣言している役)。`uses/saas.md` が「`measure-wide` へ移すのは
     **表と一覧が主役になった時**」と書いており、道の面は札 78 枚 = 一覧が主役なので、その時。
   - 読む幅 `measure-tool` = 一行 34 字。**器が広がっても、ここは動かさない** (硬さ 3)。
   **器の左端に揃えるので、道と詳細で文章の列が動かない** (2026-08-13 の是正と同じ規律)。
   境目は `side-nav` のものを流用する — **breakpoint を増やさない**。 */
:root { --shell: var(--measure-tool); }

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* OS 既定の灰色フラッシュを消し、応答は :active の沈み込みで返す (静かな触感) */
  -webkit-tap-highlight-color: transparent;
}

/* キーボードで辿る人にも現在地を — 静かな瑠璃の輪 (マウス/タップでは出ない) */
:focus-visible {
  outline: 2px solid var(--ruri);
  outline-offset: 2px;
}

/* 動きを抑えたい人には動きを消す — 階調と構造だけで同じ情報が伝わる設計を保つ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* 道具の面は下線を持たない (DESIGN.md link.tool、2026-10-01)。`<a>` はブラウザ既定で下線を持つので、ここで止める。
   読むページ (item / legal) は item.css が別に持つ */
a { text-decoration: none; }

body {
  margin: 0;
  padding: 0 1.25rem 5rem;
  background: var(--washi);
  color: var(--sumi);
  font-family: var(--gothic);
  font-size: 16px;
  line-height: 1.85;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

/* ---------- header ---------- */

.head {
  max-width: var(--shell);
  margin: 0 auto;
  /* 左揃え・罫なし・余白で区切る (app-frame、2026-07-29 Noēs 裁定 C)。
     中央に置くと一枚の表紙になり、下に続く一覧との関係が切れる。 */
  padding: calc(2.2rem + env(safe-area-inset-top)) 0 1.6rem;
  text-align: left;
}

/* 画面題は「場で --fs-body を宣言し、段がその比で降りる」= マスタの梯子の使い方。
   1.6rem を直に書くと段の外に出る (実 DOM 監査が検出、2026-07-28)。 */
.head { --fs-body: 1.39rem; }

.head h1 {
  margin: 0;
  font-size: var(--step-title);
  font-weight: 500;
  letter-spacing: 0.32em;
  /* 中央揃えを外したので、字間の最後の一つ分を右へ逃がす indent は要らない */
}

.tagline {
  margin: 0.7rem 0 0;
  font-size: var(--step-sub);
  color: var(--muted);
  letter-spacing: 0.08em;
}

/* ---------- セットアップ (タップだけで進む) ---------- */

.setup-inner {
  max-width: var(--measure-tool);
  margin: 0 auto;
}

.setup-lead {
  max-width: 34em; /* 一行 34 字 — measure は文字を置く要素に em で (2026-07-26) */
  margin: 0 0 2.75rem;
  padding-bottom: 1.3rem;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--step-sub);
  line-height: 2;
  color: var(--muted);
}

.step-q {
  margin: 0 0 0.5rem;
  font-size: var(--step-title);
  font-weight: 500;
  line-height: 1.7;
}

.step-hint {
  margin: 0 0 1.6rem;
  font-size: var(--step-support);
  color: var(--muted);
  line-height: 1.8;
}

.step-q + .choices { margin-top: 1.6rem; }

.step-note {
  margin: 1.2rem 0 0;
  font-size: var(--step-sub);
  color: var(--muted);
  line-height: 1.8;
}

.choices {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.choices.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), 1fr);
}

.choice {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  width: 100%;
  /* 押せるものの的は density.row を割らない (実 DOM 監査が 39px を検出、2026-07-28) */
  min-height: var(--row);
  justify-content: center;
  padding: 0.95rem 1.15rem;
  background: var(--surface);
  color: var(--sumi);
  /* 操作できるものの境界は 4 役から選ぶ・既定は line (hairline は区切り専用) */
  border: var(--sw-hairline) solid var(--line);
  border-radius: var(--r-app-sm);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease);
}

.choices.grid .choice {
  text-align: center;
  align-items: center;
  padding: 0.85rem 0.5rem;
}

.choice:hover { border-color: var(--ruri); }
.choice:active { transform: scale(0.99); }

.choice[aria-pressed="true"] {
  background: var(--ruri);
  border-color: var(--ruri);
  color: var(--washi); /* 白でなく washi — 夜の瑠璃上の白は 2.5:1 (裁定 D、2026-07-27) */
}

.choice-label {
  font-size: var(--step-body);
  letter-spacing: 0.03em;
}

.choice-note {
  font-size: var(--step-support);
  color: var(--muted);
}

/* 押下中の副文は親の washi を継ぐ — 階層は大きさ (--step-support) で既に付いており、
   マスタは色の 2 段目を持たない。薄める手 (opacity/混色) は文字に使わない (2026-08-01) */

.setup-foot {
  margin-top: 2rem;
  text-align: center;
}

.back {
  background: none;
  border: none;
  color: var(--muted);
  font-family: inherit;
  font-size: var(--step-support);
  cursor: pointer;
  padding: 0.5rem;
  /* 的は 44px。**実測 35px だった** — 規格の下限 24px は満たすので実 DOM 監査は通るが、
     この製品は入力の的を 44px と決めていて (`.id-input`)、押す物だけがそこから外れていた。
     戻る・ログアウト・あとにする が全部この役 (2026-08-13 実測) */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 確認 */

.confirm-head {
  margin: 0 0 1.75rem;
  font-size: var(--step-title);
  font-weight: 500;
}

.confirm-list {
  margin: 0 0 2rem;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* 一行そのものが「その項目を変える」ボタン */
.sum-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 0 1.2rem;
  width: 100%;
  padding: 0.7rem 0.2rem;
  background: none;
  border: none;
  border-bottom: 1px solid var(--hairline);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

/* hover の塗りは持たない — マスタ §States「道具は hover に依存しない」(answer-row.hover 退役 9/17) */

.sum-q {
  font-size: var(--step-support);
  color: var(--muted);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.sum-v {
  font-size: var(--step-body);
  font-weight: 500;
  color: var(--sumi);
}

.sum-edit {
  font-size: var(--step-min);
  color: var(--ruri);   /* 押せる語 = 瑠璃・下線なし (DESIGN.md edit-row.edit-word。道具は下線を持たない) */
  letter-spacing: 0.04em;
  white-space: nowrap;
}

#confirm .back { display: block; margin: 1rem auto 0; }

.go {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.9rem;
  background: var(--fill); /* 墨 → 瑠璃 (Noēs 2026-07-26「瑠璃が CTA と差の色。白に黒は強すぎる」) */
  color: var(--washi);
  border: none;
  border-radius: var(--r-app-sm);
  font-family: inherit;
  font-size: var(--step-body);
  letter-spacing: 0.12em;
  cursor: pointer;
}

.go:disabled {
  opacity: 0.28;
  cursor: default;
}

/* ---------- 道 ---------- */

.road {
  max-width: var(--shell);
  margin: 0 auto;
}

.road-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--hairline);
}

.where {
  margin: 0;
  font-size: var(--step-sub);
  color: var(--muted);
}

.where strong {
  color: var(--sumi);
  font-weight: 500;
}

/* 現在地の二行 — 主文 (いま → 次) が立ち、従属 (時期・形・業種) は静かに */
.where-main {
  display: block;
  font-size: var(--step-body);
  line-height: 1.8;
}
.where-sub {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--step-support);
  line-height: 1.8;
  color: var(--muted);
}

/* 設定への入口 — タブでなく右上の歯車 (調査 4 ソースで設定タブの実例ゼロ、頻度基準でタブ外) */
.head { position: relative; }
.head-gear {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  background: none;
  border: none;
  color: var(--muted);
  padding: 0.5rem;
  cursor: pointer;
  /* 的は density.row を割らない (見た目は 21px のアイコンのまま) */
  min-width: var(--row);
  min-height: var(--row);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.head-gear svg { width: 21px; height: 21px; display: block; }
.head-gear:hover { color: var(--ruri); }

/* 設立日の確定 + 期限の書き出し — 現在地の直下に静かに置く。
   road-head は flex 行なので、全幅に落として現在地を圧迫しない (スマホで文字が縦落ちする) */
.anchor-day { flex-basis: 100%; margin-top: 0.5rem; font-size: var(--step-support); }
.road-head { flex-wrap: wrap; }
.anchor-day-row { display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: baseline; }
.anchor-day .day-pick { margin-top: 0.7rem; }
/* 一行幅は文字を置く要素に当てる (`.unrec-note` と同じ規律)。**器が広い面でだけ 42 字まで伸びていた**
   — 折り返していない 1 行なので、実 DOM 監査の `行数 >= 2` の門をくぐって出なかった (2026-08-13 実測)。 */
.anchor-day .day-hint { font-size: var(--step-support); line-height: 1.8; color: var(--muted); margin: 0.3rem 0;
                        max-width: var(--measure-tool); }
.anchor-day .choices.grid { margin-top: 0.5rem; }
.anchor-day .choice { padding: 0.55rem 0.2rem; }
.anchor-day .day-unset { display: block; margin-top: 0.7rem; }

/* 期限タブ — 概算の断りと、書き出しの一行 */
/* 一行幅を**この要素に**当てる — 直上の `.day-hint` (359 行) と同じ型で、8/13 にそちらだけ
   直してここが残っていた。器を継承すると 41 字入るのに、置いている文は 50 字ある
   (2026-08-15 に check-ui 軸 7 が静的に検出) */
.kigen-note { font-size: var(--step-support); line-height: 1.8; color: var(--muted); margin-top: 0.6rem;
              max-width: var(--measure-tool); }
.kigen-ics { display: block; margin-top: 1.6rem; }


/* 収録できていない段階 */

.empty {
  /* 空状態は箱で囲わない — 空白は誘い。文字 + 小声ボタンが 3 つ (状態/何が現れうるか/始める道) を担う
     (DESIGN.md empty-box: 枠が先に在る場所の空だけ箱。ここは頁そのものの空なので裸、2026-07-26 P4) */
  padding: 2rem 0.25rem;
}

.empty-head {
  margin: 0 0 1rem;
  font-size: var(--step-body);
  font-weight: 500;
}

.empty-body {
  margin: 0 0 0.9rem;
  font-size: var(--step-sub);
  color: var(--muted);
  line-height: 1.95;
}

.empty-body:last-child { margin-bottom: 0; }

/* これから歩く道 — 縦に流れる。急かさず、位置だけを見せる */

.map { margin-bottom: 3.5rem; }

.map h2 {
  margin: 0;
  font-size: var(--step-body);
  font-weight: 500;
}

.map-why {
  margin: 0.4rem 0 1.5rem;
  font-size: var(--step-support);
  color: var(--muted);
}

.map-list {
  margin: 0;
  padding: 0 0 0 1.4rem;
  list-style: none;
  border-left: 1px solid var(--hairline);
}

.node {
  position: relative;
  padding-bottom: 1.7rem;
}

.node:last-child { padding-bottom: 0; }

/* 道の上の点 */
.node::before {
  content: "";
  position: absolute;
  left: -1.75rem;
  top: 0.42em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--washi);
  border: 1px solid var(--hairline);
}

.node.past::before { background: var(--hairline); border-color: var(--hairline); }
.node.here::before {
  background: var(--ruri);
  border-color: var(--ruri);
  box-shadow: 0 0 0 4px var(--glow);   /* 正典の役 (mixes.glow = 瑠璃 18%) — 同値の手写しを畳んだ */
}
.node.next::before { border-color: var(--ruri); }

.node-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.node-title {
  font-size: var(--step-body);
  letter-spacing: 0.02em;
}

.node.past .node-title { color: var(--muted); }
.node.here .node-title { color: var(--ruri); }

.node-when {
  font-size: var(--step-support);
  color: var(--muted);
}

.node-tag {
  margin: 0.25rem 0 0;
  font-size: var(--step-min);
  letter-spacing: 0.14em; /* label 規定 (P2 還流 2026-07-27) */
  color: var(--ruri);
}

.node-lead {
  margin: 0.45rem 0 0;
  font-size: var(--step-sub);
  color: var(--muted);
  line-height: 1.9;
}

.node-todo {
  margin: 0.45rem 0 0;
  font-size: var(--step-support);
  color: var(--muted);
}

/* 取り返せないもの */

/* 節そのものは飾らない — 赤の信号はカード側 (.ccard.irr) の一本だけに集約する
   (外枠+カードの二重色枠は Noēs 2026-07-22 指摘で撤去) */
.urgent {
  margin-bottom: 3.5rem;
}

.urgent h2 {
  margin: 0;
  font-size: var(--step-body);
  font-weight: 500;
  /* 見出しは墨。**言葉が既に言っていることを、色でもう一度言わない** —
     原則「静けさは倫理・警告文も平静に」(2026-08-31 是正) */
  color: var(--sumi);
}

.urgent-why {
  /* 一行 34 字 — measure は文字を置く要素に em で (2026-07-26 の作法)。
     広い画面で 41 字まで伸びて実 DOM 監査が落ちていた (2026-08-10 に実機で発覚)。
     直すのは文でなく器 — 文字数を削ると、削る理由が読み手の側に無い */
  max-width: 34em;
  margin: 0.4rem 0 1.3rem;
  font-size: var(--step-support);
  color: var(--muted);
}

/* 時系列 */

/* 棚 (shelf) 基底 — details>summary・OS マーカーは消す (DESIGN.md shelf。4 実装の二重宣言を統合、2026-07-27 P4 後半)。
   各棚 (.stage/.todo/.q-guide/.unrec) は声と包みの差分だけ持つ */
details.shelf > summary {
  cursor: pointer;
  list-style: none;
  /* 開閉も押せるもの — 的の下限を割らない (実 DOM 監査 2026-07-29) */
  min-height: var(--row);
  display: flex;
  align-items: center;
}
details.shelf > summary::-webkit-details-marker { display: none; }

.stage {
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--hairline);
}

.stage-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 0;
  font-size: var(--step-body);
  font-weight: 500;
}

.stage-title::before {
  content: "＋";
  color: var(--muted);
  font-weight: 400;
  margin-right: 0.6em;
  font-size: 0.85em;
}

.stage[open] .stage-title::before { content: "−"; }

.stage-count {
  flex: none;
  font-size: var(--step-support);
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.06em;
}

.stage-when {
  margin: -0.3rem 0 1.4rem;
  padding-left: 1.55em;
  font-size: var(--step-support);
  color: var(--muted);
  letter-spacing: 0.04em;
}

.stage > .item { padding-left: 1.55em; }
.stage > .item:last-child { padding-bottom: 1.6rem; }

/* 項目 */

.item {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--hairline);
}

.item:last-child { border-bottom: none; }

/* チェックはタイトルの行にだけ — 左一列を空けない (2026-07-22 夜)。旧 .item-top 2 カラムは廃止 */
.item-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.check {
  flex: none;
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: 0.28rem;
  /* 縁は hairline より一段立てる — ダークで沈んで見えない (Noēs 実走 fb 2026-07-22 夜)。
     2026-08-01 マスタへ寄せた: 正典 checkbox.border = {stroke.raised} solid {colors.line}。
     手写しの混色は昼 2.77 で 3:1 を割っていた (line は昼 3.39 / 夜 3.48 で通る) */
  border: var(--sw-raised) solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}

.check[aria-pressed="true"] {
  background: var(--ruri);
  border-color: var(--ruri);
}

.check::after {
  content: "";
  position: absolute;
  inset: 0;
  /* ✓ は SVG マスク (マスタ DESIGN.md checkbox.mark、2026-07-27 是正 — 旧 border 回転は左下に沈む
     ズレを実機検分で確認し退役)。色は washi — 夜の瑠璃上の白は 2.5:1 で 3:1 を割るため夜は暗い ✓
     (button-primary の文字と同じ規則) */
  background: var(--washi);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpolyline points='6,11 10,15 17,6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpolyline points='6,11 10,15 17,6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform: scale(0.5);
  opacity: 0;
  transition: opacity var(--motion-base) var(--ease), transform var(--motion-base) var(--ease);
}

.check[aria-pressed="true"]::after {
  opacity: 1;
  transform: scale(1);
}

.item-body { margin-top: 0.1rem; }

.item-title {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: var(--step-body);
  font-weight: 500;
  line-height: 1.6;
}

.item.done .item-title {
  color: var(--muted); /* 沈める文字は役で — opacity は AA を割る */
  text-decoration: line-through;
  text-decoration-color: var(--hairline);
}

.item.done .item-meta,
.item.done .item-risk { color: var(--muted); }

.item-meta {
  margin: 0.35rem 0 0;
  font-size: var(--step-support);
  color: var(--muted);
}

.item-meta .due {
  color: var(--sumi);
  font-weight: 500;
}

.item-meta .due.soon { color: var(--alert); }

.item-meta .sep { margin: 0 0.5em; }

/* 期限・時期・窓口は行で分ける (「|」の紐にしない、2026-07-22 夜) */
.item-meta .meta-row {
  margin: 0 0 0.2rem;
  line-height: 1.7;
}
.item-meta .meta-row:last-child { margin-bottom: 0; }
.item-meta .meta-k {
  color: var(--muted);
  margin-right: 0.6em;
  font-size: var(--step-min);
  letter-spacing: 0.06em;
}

.item-risk {
  margin: 0.45rem 0 0;
  font-size: var(--step-support);
  color: var(--alert);
  line-height: 1.7;
}

.item-value {
  margin: 0.45rem 0 0;
  font-size: var(--step-support);
  color: var(--ruri);
  line-height: 1.7;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.55rem;
}

.badge {
  font-size: var(--step-min);
  letter-spacing: 0.05em;
  padding: 0.14rem 0.5rem;
  border-radius: 4px;
  border: 1px solid var(--hairline);
  color: var(--muted);
}

.badge.gap { border-color: var(--alert); color: var(--alert); }
.badge.blocking { border-color: var(--ruri); color: var(--ruri); }
.badge.unverified { color: var(--muted); }

/* 控え (この端末の中だけ) */

.keep { margin-top: 0.7rem; }

.kept-row {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-bottom: 0.5rem;
}

.kept-at {
  margin: 0;
  font-size: var(--step-support);
  color: var(--ruri);
  letter-spacing: 0.04em;
}

/* 戻せることが見えている、が肝。控えめだが埋もれない位置に置く */
/* 小声ボタン基底 = .q (DESIGN.md button-ghost。知己 button.q と同じ語彙、2026-07-27 P4 後半で改名完遂)。
   個別クラス (.undo/.ask/.keep-add/.rec-add/.fork-d/.wipe/.dlg-keep) は差分だけ持つ。
   .ask/.keep-add/.rec-add/.fork-d = 破線変種 (足す声)、.wipe = danger 変種。新ボタンは class="q x" で足す */
.q {
  background: none;
  /* 操作の境界は罫 (hairline = 区切り専用) でなく線の役で引く (実 DOM 監査 2026-07-29) */
  border: var(--sw-hairline) solid var(--line);
  border-radius: var(--r-app-sm);
  color: var(--muted);
  font-family: inherit;
  letter-spacing: 0.04em;
  cursor: pointer;
}
/* 「AI に聞く文をコピー」等、本文中の押せるものも的の下限を割らない */
.q.ask { min-height: var(--row); }
.undo { padding: 0.15rem 0.55rem; min-height: var(--row); font-size: var(--step-min); }

.undo:hover { border-color: var(--ruri); color: var(--ruri); }

.acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* 文字色を宣言しないと OS 既定 (夜は白) が入り、役を経由しない色になる
   — 実 DOM 監査が `button.ask.pro` を rgb(255,255,255) で捕まえた (2026-07-29) */
.ask {
  padding: 0.4rem 0.8rem;
  min-height: var(--row);
  border: var(--sw-hairline) solid var(--line);
  border-style: dashed;
  color: var(--sumi);
  background: none;
  border-radius: var(--r-app-sm);
  font-family: inherit;
  font-size: var(--step-support);
  cursor: pointer;
}

.ask:hover { border-color: var(--ruri); color: var(--ruri); }

.ask.copied {
  border-style: solid;
  border-color: var(--ruri);
  color: var(--ruri);
}

.keep-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

/* 添付の一件 = 塗りの帯 (DESIGN.md file-band、2026-07-26)。罫で囲わない — 帯そのものが
   境界。的が 2 つ (開く / 消す) あるので帯全体は押せない = カードにできない一件。
   Carbon の file uploader が同じ作法 ($field 地・通常状態に罫なし)。 */
.chip {
  display: flex;
  align-items: center;
  background: var(--surface);
  border: none;
  border-radius: var(--r-app-sm);
  overflow: hidden;
  max-width: 100%;
  margin-bottom: 0.35rem;
}

.chip-view {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0.6rem;
  background: none;
  border: none;
  font-family: inherit;
  color: var(--sumi);
  cursor: pointer;
  text-align: left;
}

/* hover はマスタ §States「罫と文字が瑠璃に灯る」— 淡い地を敷くのは規律の外 (2026-08-01) */
.chip-view:hover { color: var(--ruri); }

.chip-thumb {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 4px;
  /* 帯 (面) の上なので地色に沈める — 面の中に面を重ねない (2026-07-26) */
  background: var(--washi);
  border: 1px solid var(--hairline);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.chip-thumb.doc {
  font-size: var(--step-min);
  letter-spacing: 0.06em;
  color: var(--muted);
}

.chip-name { display: flex; flex-direction: column; min-width: 0; }

.chip-file {
  font-size: var(--step-support);
  line-height: 1.4;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip-date { font-size: var(--step-min); color: var(--muted); }

/* 種別を直す — 控えの帯の中に静かに置く (押せる的は下限を守る) */
.chip-fix {
  flex: none;
  align-self: center;
  min-height: var(--row);
  margin-inline-end: 0.2rem;
  padding: 0.3rem 0.6rem;
  font-size: var(--step-min);
  border-style: dashed;
}

/* × はフォントのサブセットに無く別の記号に化けるため、線で描く */
.chip-del {
  flex: none;
  position: relative;
  /* 的の下限を割らない (実 DOM 監査で 11×2 と判明 — 事実上押せなかった) */
  width: 2.3rem;
  min-width: var(--row);
  min-height: var(--row);
  align-self: stretch;
  background: none;
  border: none;   /* 仕切り罫は置かない — 帯に罫は無い (2026-07-26) */
  color: var(--muted);
  cursor: pointer;
}

.chip-del::before,
.chip-del::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 1.5px;
  background: currentColor;
}

.chip-del::before { transform: translate(-50%, -50%) rotate(45deg); }
.chip-del::after { transform: translate(-50%, -50%) rotate(-45deg); }

.chip-del:hover { color: var(--alert); }

.keep-add {
  padding: 0.4rem 0.8rem;
  /* 押せるものの的は density.row を割らない (実 DOM 監査 2026-07-29) */
  min-height: var(--row);
  border-style: dashed;
  font-size: var(--step-support);
}

/* 選んでいる札は、選んでいると分かる形にする — 色だけでなく枠の実線化も併せる
   (dashed → solid + 瑠璃。押した状態が読めないと、絞り込みの現在地が分からない) */
.q[aria-pressed="true"] {
  border-style: solid;
  border-color: var(--ruri);
  color: var(--ruri);
}

/* 控えを引く面 — 手続きの題と控えを 1 行に (既存の部品の組み合わせ、新しい語彙は足さない) */
.find-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--hairline);
}
.find-from {
  align-self: flex-start;
  max-width: 100%;
  min-height: var(--row);
  padding: 0.3rem 0.7rem;
  font-size: var(--step-min);
  text-align: left;
  border-style: dashed;
}
.set-block .id-input { width: 100%; margin: 0.6rem 0 0.2rem; }

/* 控えの場での断り書き — 面の上には置かないので muted で読める */
.keep-note {
  margin: 0.4rem 0 0.6rem;
  font-size: var(--step-support);
  color: var(--muted);
  line-height: 1.7;
  /* 同上。器を継承すると 41 字、置いている断り書き (電子帳簿保存法の但し書き) は 56 字 */
  max-width: var(--measure-tool);
}

.keep-add:hover { border-color: var(--ruri); color: var(--ruri); }

.item.done .keep { opacity: 1; }

/* やること (手順と一次情報) */

details.todo {
  margin-top: 0.7rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r-app-sm);
  background: var(--washi-panel);
}

details.todo > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.8rem;
  /* 開閉も押せるもの — 的の下限を割らない (実 DOM 監査 2026-07-29) */
  min-height: var(--row);
  font-size: var(--step-support);
  color: var(--ruri);
}

.todo-label { flex: none; }

.todo-count {
  flex: none;
  padding: 0 0.45rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: var(--step-min);
  font-variant-numeric: tabular-nums;
}

/* 進み具合。細い帯にとどめる — 割合で急かさない */
.todo-bar {
  flex: 1;
  max-width: 8rem;
  height: 2px;
  background: var(--hairline);
  border-radius: 2px;
  overflow: hidden;
}

.todo-fill {
  display: block;
  height: 100%;
  background: var(--ruri);
  transition: width var(--motion-base) var(--ease);
}

details.todo.all-done > summary { color: var(--ruri); }
details.todo.all-done .todo-count { opacity: 1; }

.todo-scope {
  margin: 0.2rem 0 0.7rem;
  font-size: var(--step-support);
  /* 面の上に muted を置かない (実 DOM 監査 2026-07-29、昼 4.39) */
  color: var(--sumi);
}

/* 概要 — 選択を誤らないための 1-2 行 (常時表示の第一層) */
.item-gist {
  margin: 0.5rem 0 0.2rem;
  font-size: var(--step-sub);
  line-height: 1.8;
  color: var(--sumi);
}

/* 推奨 — 比較表を出して黙らないための場所。**判断の項目では、選択肢より先に立つ**。
   既にある部品の組み合わせ (面 + 罫 + ラベル) で作る。新しい見た目の語彙は足さない。 */
.item-recommend {
  margin: 0.7rem 0 0.2rem;
  padding: 0.7rem 0.85rem;
  background: var(--washi-panel);
  border-radius: var(--r-app-sm);
  border-inline-start: var(--sw-voice) solid var(--ruri);
}
/* 面の上に muted を置かない (マスタの禁則。実 DOM 監査が昼 4.39 で落とした)。
   階層は色の薄さでなく、大きさと余白で作る。 */
.item-recommend .rec-type {
  margin: 0 0 0.35rem;
  font-size: var(--step-min);
  color: var(--sumi);
  letter-spacing: 0.06em;
}
.item-recommend .rec-body {
  margin: 0;
  font-size: var(--step-sub);
  line-height: 1.85;
  color: var(--sumi);
}
.item-recommend .rec-against {
  margin: 0.5rem 0 0;
  font-size: var(--step-support);
  line-height: 1.75;
  color: var(--sumi);
}
/* 判断の軸 — **どちらが正解かは言わない**ので、番号でなく点で並べる (順位に読ませない)。
   既存の ul をそのまま使い、面の中の余白だけ詰める。新しい語彙は足さない。 */
.item-recommend .rec-axes-head { margin: 0.55rem 0 0; }
.item-recommend .rec-axes {
  margin: 0.15rem 0 0;
  padding-inline-start: 1.15rem;
  font-size: var(--step-support);
  line-height: 1.75;
  color: var(--sumi);
}
.item-recommend .rec-axes li { margin: 0 0 0.3rem; }
.item-recommend .rec-axes li:last-child { margin-bottom: 0; }
.item-recommend .label {
  display: block;
  font-size: var(--step-min);
  color: var(--sumi);
  letter-spacing: 0.06em;
  margin-bottom: 0.15rem;
}

/* 先に済ませるもの (順序の札 — 触れなくはしない) */
.dep-note, .ccard-dep {
  font-size: var(--step-min);
  color: var(--muted);
  margin: 0.3rem 0 0;
}
.dep-note::before, .ccard-dep::before { content: "↑ "; }

/* 待ちの手順 — 自分の作業でなく、相手の処理を待つ段 */
/* **面 (washi-panel) の上に muted を置かない** — マスタの禁則。この札は `details.todo` の
   中に居るので面の上に乗る (昼 4.39・夜も禁則、実 DOM 監査 2026-08-13)。
   階層は色の薄さでなく、**大きさと余白**で作る (`.item-recommend .rec-type` と同じ処置)。 */
.wait-mark {
  display: inline-block;
  margin-left: 0.45rem;
  vertical-align: 0.08em;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: var(--step-min);
  letter-spacing: 0.06em;
  color: var(--sumi);
  white-space: nowrap;
}

/* タップ域の拡張 — 見た目は変えず、押せる範囲だけ指のサイズへ (44px 基準) */
.check, .step-check { position: relative; }
.check::before, .step-check::before {
  content: "";
  position: absolute;
  inset: -12px;
}
/* radio は縦に隣り合うので、広げるのは行の高さちょうどまで (22 + 11×2 = 44)。
   -12px にすると上下の的が 1px ずつ重なる — 的が重なると押し間違いが増える
   (マスタ「横に隣り合うものは縦だけ広げる」の、縦並びに当てた形) */
.radio::before {
  content: "";
  position: absolute;
  inset: -11px;
}

/* 記録 — 済ませたことが日付と控えとともに積む場所 (設定タブ) */
.rec-row {
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--hairline);
}
.rec-row:last-child { border-bottom: none; }
.rec-head {
  display: block;
  width: 100%;
  /* 的の下限を割らない (実測 43.99px で落ちていた) */
  min-height: var(--row);
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}
.rec-date {
  display: block;
  font-size: var(--step-min);
  color: var(--muted);
  margin-bottom: 0.15rem;
}
.rec-title {
  font-size: var(--step-sub);
  color: var(--sumi);
  line-height: 1.7;
}
.rec-add {
  margin-top: 0.45rem;
  min-height: var(--row);
  padding: 0.3rem 0.7rem;
  border-style: dashed;
  font-size: var(--step-min);
}
.rec-add:hover { border-color: var(--ruri); color: var(--ruri); }

/* 別で済ませていた人の一括 — 静かな脇道 (主動線の一つずつチェックと競わせない) */
.bulk-done {
  display: block;
  margin-top: 0.8rem;
  padding: 0.35rem 0;
  min-height: var(--row);
  background: none;
  border: none;
  font-family: inherit;
  font-size: var(--step-min);
  color: var(--sumi);
  cursor: pointer;
}

/* 済んだ項目では、次の行動を促すボタンは一歩引く (消さない — 後から控えを足す・聞き直す自由は残す) */
.item.done .acts button { color: var(--muted); }
.item.done .acts button:hover, .item.done .acts button:focus-visible { opacity: 1; }

/* 決めたことを残す (詳細内の入力) — 静かな受け皿。
   2026-08-10: 自由入力を廃止し、2〜4 択の単一選択へ (マスタ components.radio)。
   商号・住所・金額・取引先を受け取る器そのものを持たない (設計 2026-08-08 §4)。 */
.cap-block {
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--hairline);
}
.cap-field {
  margin: 0;
  padding: 0;
  border: none;   /* 束を罫で囲わない — 囲うと補足の箱に見える (edit-row と同じ規律) */
}
.cap-legend {
  padding: 0;
  font-size: var(--step-support);
  color: var(--muted);
}
.cap-opt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--row);   /* 触る面は密度の行の高さ (横断規律。見た目は太らせない) */
  cursor: pointer;
}
.cap-opt-label {
  font-size: var(--step-sub);
  line-height: 1.5;
}
/* マスタ components.radio — 22px / stroke.raised / 瑠璃塗り + washi の内点 8px。
   丸いことだけが checkbox との差で、寸法の 2 段目は持たない */
.radio {
  flex: none;
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: var(--sw-raised) solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
  position: relative;
  transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
.radio:checked {
  background: var(--ruri);
  border-color: var(--ruri);
}
.radio::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  /* 内点は washi — 夜の瑠璃の上の白は 3:1 を割る (✓ と同じ規則) */
  background: var(--washi);
  transform: scale(0.5);
  opacity: 0;
  transition: opacity var(--motion-base) var(--ease), transform var(--motion-base) var(--ease);
}
.radio:checked::after { opacity: 1; transform: scale(1); }
/* 的は行の高さまで (横断規律 44px)。radio の的とは縦に離すので、擬似要素で広げず
   実寸で持つ — 上に隣り合う radio の的 (下へ 11px) と重ねない */
.cap-clear {
  margin-top: 0.35rem;
  min-height: var(--row);
  padding-inline: 0.6rem;
}

/* 手引きの記事行 — 題 + 読了 + しるし (★)。既読としるしは端末内 */
.art-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--hairline);
}
.art-row:last-child { border-bottom: none; }
.art-t {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  text-align: left;
  background: none;
  border: none;
  padding: 0.85rem 0;
  font-family: inherit;
  font-size: var(--step-body);
  color: var(--sumi);
  line-height: 1.7;
  cursor: pointer;
}
.art-t.read { color: var(--muted); }
.art-read {
  flex: none;
  font-size: var(--step-min);
  color: var(--muted);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0 0.4rem;
}
.art-star {
  flex: none;
  background: none;
  border: none;
  /* しるしの的も下限を割らない (実測 22×40。★の見た目は変えず、押せる面だけ広げる) */
  min-width: var(--row);
  min-height: var(--row);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--step-body);
  color: var(--muted);
  cursor: pointer;
  padding: 0.5rem 0.2rem;
}
.art-star.on { color: var(--ruri); opacity: 1; }

/* 最初の選択でつまづく人への手引き (セットアップの質問の下、静かに畳む) */
.q-guide {
  margin-top: 1.4rem;
}
.q-guide > summary {
  font-size: var(--step-support);
  color: var(--ruri);
}
.q-guide > p {
  margin: 0.6rem 0 0;
  font-size: var(--step-support);
  line-height: 1.9;
  color: var(--muted);
}

/* 一行の入力 (決めたことの記入・設問の自由入力)。
   もとは「名乗りと宛名」のための形だったが、その節は 2026-08-07 に廃止した。
   残しているのは他の入力がこの形を引いているから (.pro-pair / .pro-who は使い手が消えたので落とした)。 */
.id-field {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0.45rem 0;
}
.id-label {
  flex: none;
  width: 9.5em;
  font-size: var(--step-support);
  color: var(--muted);
}
.id-input {
  flex: 1;
  min-width: 0;
  min-height: 44px; /* input 規律 44px (P2 還流 2026-07-27) */
  padding: 0.45rem 0.6rem;
  font-family: inherit;
  font-size: var(--step-sub);
  color: var(--sumi);
  background: var(--surface);
  /* 操作の境界は罫 (区切り専用) でなく線の役で引く (実 DOM 監査 2026-07-29) */
  border: var(--sw-hairline) solid var(--line);
  border-radius: var(--r-app-sm);
}
.id-input:focus { outline: none; border-color: var(--ruri); }
/* **仮の字にも役を当てる。** 宣言しないとブラウザ既定の `rgb(117,117,117)` になり、
   夜の `--surface` (#282833) の上で **3.16 < 4.5** を割っていた (2026-08-13 実測)。
   実 DOM 監査は擬似要素の色を測らないので、ここは黙って通っていた。 */
.id-input::placeholder, .mem-input::placeholder { color: var(--muted); opacity: 1; }

/* 道標タブから記録への静かな入口 */
.see-record {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: var(--ruri);
  cursor: pointer;
  /* 行の中の押せる語。行送りを崩さずに的だけ広げる (.check と同じ手) */
  position: relative;
}
/* 的を density.row まで広げる。**新しい値を発明せず --row だけで書く**
   (上下に何 px 足すかを数えると、行の高さが変わった日に段の外の値が残る) */
.see-record::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: var(--row);
}

/* 住所への静かな案内 (1 情報 1 箇所 — 重複の代わりに置く一行) */
/* 種の本文 — 読み物なので行長を担保する (下の cross-note と同じ理由) */
.seed-body {
  margin: 0.2rem 0 0.9rem;
  font-size: var(--step-body);
  max-width: var(--measure-tool);
}

/* 段階の塊 (AI にやらせること) — ボタン列の直後に次の仕事の見出しが詰まる。
   仕事ごとの区切りを余白で作る (罫を足さない) */
.stage > .seed-body { margin-top: 1rem; }

/* 読み物は行長で担保する — 文言を短く書いて回避すると、次に文が伸びた時にまた越える
   (2026-08-04: cross-note が 41 字で実 DOM 監査に落ちた。源は「幅の指定が無い」側) */
.cross-note {
  margin: 1.2rem 0 2rem;
  font-size: var(--step-support);
  color: var(--muted);
  max-width: var(--measure-tool);
}

/* 手順は一つずつ。細かいほど、始めやすく、途中で止めやすい */
.todo-steps { list-style: none; padding-left: 0; }

/* しおり — どこまで来たかは文字でなく濃淡で語る (2026-07-23、「ここから」ピルは廃止)。
   地図の「歩いている道を濃く、まだの道を淡く」と同じ視覚言語。
   始める前 (.started なし) は全行ふつうの濃さ = まず全体量を見せる */

/* 通り過ぎた道 — 行ごと薄く (チェックの塗りと実行日も一緒に沈む) */
.todo.started .step.done { color: var(--muted); }

/* まだの道 — 淡い */
.todo.started .step .step-text { color: var(--muted); }

/* いまここ — 濃い。チェックの縁も瑠璃で呼応 (列を上から辿っても見つかる) */
.todo.started .step.next .step-text { color: var(--sumi); }
.step.next .step-check { border-color: var(--ruri); }

/* 手順の行に限定して flex — 素の .step はセットアップの質問ブロックも使っており、
   scope を絞らないと質問と選択肢が横並びに潰れる (2026-07-22 実機で崩れた実バグ) */
.todo-steps .step {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.55rem;
}

.step-check {
  flex: none;
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: 0.28em;
  padding: 0;
  position: relative;
  /* マスタ checkbox.border (2026-08-01)。手写しの混色は 3:1 を割っていた */
  border: var(--sw-raised) solid var(--line);
  border-radius: 4px;
  /* **面の上の入力は地色に沈める** (マスタの禁則。`line` の罫が `washi-panel` の上で
     昼 2.82 = 3:1 を割る)。この升は `details.todo` の中に居るので必ず面の上に乗る。
     `surface` だと面との差が足りず、罫だけで立とうとして落ちていた
     (2026-08-13 実測。7 個ぜんぶ同じ理由)。 */
  background: var(--washi);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}

.step-check[aria-pressed="true"] {
  background: var(--ruri);
  border-color: var(--ruri);
}

.step-check::after {
  content: "";
  position: absolute;
  inset: 0;
  /* ✓ は同じ SVG マスクが縮尺で追従 (マスタ checkbox.mark — 18px 専用座標は退役、二重管理消滅) */
  background: var(--washi);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpolyline points='6,11 10,15 17,6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpolyline points='6,11 10,15 17,6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform: scale(0.5);
  opacity: 0;
  transition: opacity var(--motion-base) var(--ease), transform var(--motion-base) var(--ease);
}

.step-check[aria-pressed="true"]::after {
  opacity: 1;
  transform: scale(1);
}

.step-main { flex: 1; min-width: 0; }

.step-text { transition: color var(--motion-base) var(--ease); }
.step.done .step-text { color: var(--muted); }

.step-date {
  display: block;
  font-size: var(--step-min);
  color: var(--muted);
  margin-top: 0.1rem;
}

.step-finish {
  margin-top: 0.6rem;
  padding: 10px 18px; /* button-quiet 規定 (P2 還流 2026-07-27) */
  background: var(--surface);
  border: 1px solid var(--sumi);
  border-radius: var(--r-app-sm);
  color: var(--sumi);
  font-family: inherit;
  font-size: var(--step-support);
  letter-spacing: 0.04em;
  cursor: pointer;
}

.todo-body {
  padding: 0 0.9rem 0.9rem;
  font-size: var(--step-sub);
  line-height: 1.95;
}

.todo-steps {
  margin: 0.2rem 0 0;
  /* padding-left は上の定義 (0) に任せる — 1.3rem の字下げ復活が本文幅を奪っていた */
}

.todo-steps li { margin-bottom: 0.5rem; }

.todo-head {
  margin: 1rem 0 0.2rem;
  font-size: var(--step-min);
  letter-spacing: 0.1em;
  /* 面の上に muted を置かない (マスタの禁則、実 DOM 監査 2026-07-29) */
  color: var(--sumi);
}

.todo-docs,
.todo-links {
  margin: 0;
  padding-left: 1.1rem;
}

.todo-docs li,
.todo-links li { margin-bottom: 0.35rem; }

/* 段階の塊の中の箇条書きは、道具の行幅で折る (広い画面で一行が 40 字を超えていた) */
.stage > .todo-docs,
.stage > .todo-links { max-width: var(--measure-tool); }

.todo-links a {
  color: var(--ruri);
}

.link-note {
  display: block;
  font-size: var(--step-support);
  /* 面の上に muted を置かない (実 DOM 監査 2026-07-29) */
  color: var(--sumi);
  line-height: 1.7;
}

/* 同上 — 面の上なので muted を置かない。小ささで階層を作る */
.todo-caveat {
  margin: 0.7rem 0 0;
  font-size: var(--step-support);
  color: var(--sumi);
}

/* 詳細の本文 — 畳まない (最下部の読むだけの本文に開閉は仕事をしない、2026-07-22)。
   囲わない — 読み物を箱に入れると読みづらい。仕切りは細い線一本 (Noēs 実走 fb 2026-07-22 夜) */

.more { margin-top: 1rem; }

.more-body {
  margin-top: 0.6rem;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--hairline);
  font-size: var(--step-sub);
  line-height: 1.9;
}

.more-body p { margin: 0 0 0.9rem; }
.more-body p:last-child { margin-bottom: 0; }
.more-body ul { margin: 0.3rem 0 0.7rem; padding-left: 1.1rem; }
.more-body li { margin-bottom: 0.45rem; }
.more-body dt { font-weight: 500; margin-top: 0.6rem; }
.more-body dd { margin: 0.1rem 0 0; color: var(--muted); }
.more-body .label {
  font-size: var(--step-min);
  color: var(--muted);
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 0.15rem;
  margin-top: 1.5rem;
}
.more-body > p:first-child .label,
.more-body > :first-child .label { margin-top: 0; }
.more-body .uncertain {
  color: var(--muted);
  font-size: var(--step-support);
  padding-top: 0.6rem;
  border-top: 1px dashed var(--hairline);
}

/* 「見出し — 本文」を開いた段落 (bullet に段落をぶら下げない) */
.prose-item { margin: 0 0 1rem; }
.prose-item:last-child { margin-bottom: 0; }
.prose-head {
  font-weight: 500;
  margin: 0 0 0.15rem;
}
.prose-body {
  margin: 0;
  color: var(--muted);
}

/* 決めること */

.opt-row {
  padding: 0.6rem 0;
  border-bottom: 1px dotted var(--hairline);
}
.opt-row:last-child { border-bottom: none; }
.opt-label { font-weight: 500; }
.opt-eff { color: var(--ruri); }
.opt-side { color: var(--muted); }

/* 閉じ */

.closing {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hairline);
}

.progress-note {
  margin: 0 0 1.5rem;
  font-size: var(--step-sub);
  color: var(--muted);
}

.unrec summary {
  font-size: var(--step-support);
  color: var(--muted);
}

.unrec ul {
  margin: 0.8rem 0 0;
  padding-left: 1.2rem;
  font-size: var(--step-support);
  color: var(--muted);
}

/* 器が広い面では、この一覧が器いっぱいに伸びて一行 77 字になっていた (1440 実測)。
   一覧に見えるが中身は文なので、**文字を置く要素の側に一行幅を当てる**。 */
.unrec li { margin-bottom: 0.4rem; max-width: var(--measure-tool); }

.unrec-note {
  margin: 1rem 0 0;
  font-size: var(--step-support);
  color: var(--muted);
  line-height: 1.8;
  /* **一行幅を当てる。** 器が広い面 (PC の詳細) では 41 字まで伸び、正典の下限 40 字
     (WCAG 1.4.8) を割っていた — 幅 1440 の実 DOM 監査で検出 (2026-08-13)。
     文字を置く要素なので em で当てる (rem だと文字サイズを変えた時に字数が変わる)。 */
  max-width: var(--measure-tool);
}

@media (max-width: 480px) {
  body { padding: 0 1rem 4rem; }
  .head { padding: 2.5rem 0 2rem; }
}

/* ================= アプリ骨格 (下タブ4枚、2026-07-22 本移植) ================= */

/* 下タブが足元に居座る分、本文の底を空ける */
.road { padding-bottom: 5.5rem; }

/* 下タブ = .bottom-nav (2026-07-27 P4 統一 — マスタ名 + 知己と同型。active は aria-current="page" の意味属性で示し CSS が飾る。z は貼りつく帯 = 10) */
.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 10;
  background: var(--washi);
  border-top: 1px solid var(--hairline);
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  justify-content: center;
}

.bottom-nav > button {
  flex: 1;
  max-width: 8rem;
  background: none;
  border: none;
  padding: 0.5rem 0 0.65rem;
  font-family: inherit;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  font-size: var(--step-min);
  letter-spacing: 0.02em;
}

.bottom-nav svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.bottom-nav button[aria-current="page"] { color: var(--ruri); }

/* ---------- PC (992px 〜) = side-nav。markup も aria-current もそのまま、幅で入れ替える ----------
   992 は Ant lg・M3 expanded 840dp・Carbon 1056px が重なる帯から採った (DESIGN.md side-nav)。
   主戦場が PC に移る面なので、下に貼る帯でなく左に立てる。折りたたまない。 */
@media (min-width: 992px) {
  .bottom-nav {
    top: 0; bottom: 0; right: auto;
    width: 256px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0.15rem;
    padding: 1.6rem 0 0;
    border-top: none;
    border-right: var(--sw-hairline) solid var(--hairline);
    z-index: var(--z-sticky);
  }
  .bottom-nav > button {
    flex: none;
    max-width: none;
    min-height: var(--row);
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.7rem;
    padding: 0 1.25rem;
    font-size: var(--step-support);
    letter-spacing: 0.04em;
    /* 現在地の縦線は場所を先に取っておく (現れる時に文字がずれない) */
    border-left: var(--sw-voice) solid transparent;
  }
  .bottom-nav > button[aria-current="page"] { border-left-color: var(--ruri); }

  /* 設定はレールの下端へ。**右上の歯車をやめる** (2026-08-14) — 手の中では歯車のまま */
  .bottom-nav > .rail-foot { margin-top: auto; margin-bottom: 1.2rem; }
  .head-gear { display: none; }

  /* **広い窓では器を広げる。** 読む幅 (`measure-tool`) は動かさない — 広がるのは器だけ。
     `measure-wide` はマスタが「レイアウトの器。本文の一行幅ではない」と宣言している役。
     器は `max-width` なので、992〜1024 の帯では**残りの幅ぶんに縮む** (段差にならない)。 */
  :root { --shell: var(--measure-wide); }

  /* 本体を右へ寄せる。ナビが立っている時だけ (setup 中は全幅のまま) */
  body:has(#tabbar:not(.hidden)) { padding-left: 256px; }
  .road { padding-bottom: 2.5rem; }

  /* **潜った先も、同じ座標に置く。** 詳細は `position: fixed` なので body の余白が効かず、
     本文が**窓の中央**に寄っていた — 道の本文はレールを除いた領域の中央なので、
     開いた瞬間に文字の列が 118px 横へ飛ぶ (幅 1440 の実測、2026-08-13)。
     **同じ文章の列が、面をまたいで動かない**ことが読む場の最低条件。 */
  body:has(#tabbar:not(.hidden)) .detail-view { left: 256px; }

  /* ---------- 道標の面だけ二段組 = 道 + 読む場 (2026-08-14、`components.path`) ----------
     **モバイルは触らない。** ここは `side-nav.breakpoint` の内側だけ。境目は増やさない。
     なぜ: 幅 1440 で札が 1024px の帯になり、中身が 962px を 1 行で横断していた =
     モバイルの行を引き伸ばした形。PC の強みは「並べて見えること」なので、
     一覧を失わずに右で読む (Noēs 2026-08-14「まだ APP に引っ張られている」)。
     **既定は空** — 押されるまで右は開かない (視界に置き続けるのは急かしと同じ軸)。 */
  :root {
    --road-gap: 2rem;
    /* **読む場を固定し、道に余りを吸わせる。** list-detail の定番は「片方を固定・片方を流動」で、
       固定するのは**文字の側** (読む場は一行幅 34rem が正典の天井なので、そもそも広げられない)。
       余りは一覧の側が取る — 札の題は最長 34 字なので、道も 34rem で頭打ちにする。
       ⚠️ **`--pair` は必ず `--road-col` と同じ式から導く。** 22rem 固定で書いていた時、
       道が `28vw` で 22rem 未満になる帯 (1184〜1257px) だけ式が食い違い、**読む場が 560px =
       正典の 544 を 16px はみ出していた** (2026-08-15 実測)。窓を広げると読む場が
       426→504→**560**→546→544 と一度膨らんで縮む = 「広げたり閉じたりすると崩れる」の正体。 */
    --road-col: clamp(17rem, calc(100vw - 256px - var(--road-gap) - 34rem), 34rem);
    --pair: calc(var(--road-col) + var(--road-gap) + 34rem);
    --pair-pad: max(0rem, (100vw - 256px - var(--pair)) / 2);
  }

  /* **レールも塊に入れて中央へ寄せる。** 窓に貼りつけたままだと、大きい画面で
     レールと内容の間に空白が開き (2560px で 592px)、ナビが内容から切り離されて浮く。
     寄せ幅は組と同じ `--pair-pad` — レール + 道 + 読む場 が一つの塊として中央に来る。
     992 付近では 0 に落ちて窓の左端に戻る (狭い側の挙動は変えない)。 */
  #tabbar { left: var(--pair-pad); }

  /* 左 = 道。**この面だけ**器を狭める (他のタブは今までどおり `--shell` いっぱい) */
  body:has(#pane-signpost:not(.hidden)) .road {
    max-width: var(--road-col); margin-left: var(--pair-pad); margin-right: 0;
  }
  /* **題も同じ列に揃える。** 器だけ狭めると、題が広い器の中央に残って道から離れる
     (2026-08-14 の実測で 63px ずれた)。同じ面の物は同じ左端から始める */
  body:has(#tabbar:not(.hidden)):has(#pane-signpost:not(.hidden)) .head {
    max-width: var(--road-col); margin-left: var(--pair-pad); margin-right: 0;
  }

  /* 右 = 読む場。`position: fixed` のまま右半分に置く — 覆いをやめると
     焦点・inert・hash の機構を全部作り直すことになる。**置き場所だけを変える** */
  body:has(#tabbar:not(.hidden)):has(#pane-signpost:not(.hidden)) .detail-view {
    /* ⚠️ **中央寄せの余白を足し忘れると、道の上に覆いかぶさる** (2026-08-14 実機で再現 —
       道が消えたように見えた)。左端は「レール + 寄せ + 道 + 隙間」で、4 つとも要る */
    left: calc(256px + var(--pair-pad) + var(--road-col) + var(--road-gap));
    border-left: var(--sw-hairline) solid var(--hairline);
  }
  /* 二段組の時は戻る札を出さない — 一覧が左に在るので、戻る先が消えていない。
     **札が持っていた上の余白を、読む物の側で引き受ける** (消しただけだと題が窓の上端に貼りつく) */
  body:has(#tabbar:not(.hidden)):has(#pane-signpost:not(.hidden)) .detail-view .d-back { display: none; }
  body:has(#tabbar:not(.hidden)):has(#pane-signpost:not(.hidden)) .detail-view .d-body {
    padding-top: calc(2.2rem + env(safe-area-inset-top));   /* 題の上端と同じ高さから始める */
  }
  /* 右の欄の器も組の幅に合わせる (窓が広くても読む幅より広げない) */
  body:has(#tabbar:not(.hidden)):has(#pane-signpost:not(.hidden)) .detail-view {
    right: var(--pair-pad);
  }

  /* **枠の文は右へ移したので、左では畳む** — 二重に持たない。
     一覧は一覧だけになり、縦も詰まる */
  body:has(#pane-signpost:not(.hidden)) #urgent > h2,
  body:has(#pane-signpost:not(.hidden)) .urgent-why,
  body:has(#pane-signpost:not(.hidden)) #progress-note { display: none; }

  /* 待っている側の欄。**声を落とす** — ここは案内であって、読ませる本文ではない */
  .rest-pane { --ladder: reading; max-width: var(--measure-reading); }
  .rest-pane .rest-head {
    margin: 0 0 0.8rem;
    font-size: var(--read-h3);
    font-weight: 500;
    color: var(--sumi);
  }
  .rest-pane .rest-why,
  .rest-pane .rest-note {
    margin: 0 0 1rem;
    font-size: var(--read-caption);
    line-height: var(--lh-reading);
    color: var(--muted);
  }
}

.pane-lead {
  margin: 0.2rem 0 1.4rem;
  font-size: var(--step-sub);
  color: var(--muted);
  line-height: 1.9;
  /* 器が広い面でも読む文は据える (最長 59 字。器に任せると広い窓でだけ 34 字を越える) */
  max-width: var(--measure-tool);
}

/* ---------- 道標: 三分割の見出し ---------- */

.cat { margin: 2.75rem 0 0.2rem; }
.cat:first-child { margin-top: 0.4rem; }

.cat-h {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: var(--step-body);
  font-weight: 500;
}

.cat-tag {
  font-size: var(--step-min);
  color: var(--muted);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0 0.45rem;
}

.cat-note {
  margin: 0.2rem 0 0.7rem;
  font-size: var(--step-support);
  color: var(--muted);
  max-width: var(--measure-tool);
}

.sub-h {
  font-size: var(--step-min);
  color: var(--muted);
  letter-spacing: 0.08em;
  margin: 2.2rem 0 0.5rem;
}

/* 手引きの棚ラベル — まとまり (棚) は小さな見出し + 線、記事名は大きな行。
   階層の差を サイズ・色・仕切り の三つで作る (文字サイズだけにしない、2026-07-22 夜) */
.shelf-label {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  font-size: var(--step-min);
  color: var(--muted);
  letter-spacing: 0.1em;
  margin: 2.2rem 0 0.3rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--hairline);
}
.shelf-label:first-child { margin-top: 1rem; }
.shelf-sub {
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* ---------- 軽いカード (一覧用) ---------- */

/* 押すと詳細へ飛ぶ一件 = 箱 (DESIGN.md `card`)。輪郭は昼=影・夜=面の段差で作り、
   罫で囲わない (罫の箱は入力欄と同形になり「押す」より「書く」に見える)。2026-07-26 */
.ccard {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--surface);
  border: none;
  border-radius: var(--r-app-sm);
  box-shadow: var(--shadow);
  padding: 0.85rem 1rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
  font-family: inherit;
}

/* **札の中身は、入るなら横に並び、入らなければ折り返す。**
   これが「画面にあった大きさ」の実体 — 器が広がったぶんだけ、縦に積んでいた添え物
   (いつ / やること) が題の横へ上がり、**縦が縮む**。実在した痛みは横の余りでなく
   縦の長さだった (道の面は 1440×900 で 6.7 画面ぶん、2026-08-13 実測)。
   **breakpoint を持たない** — 中身の量と器の幅だけで決まるので、どの窓幅でも連続に効く。
   手の中では題が器いっぱいを取るので、添え物は下へ回り、**今までと同じ積み方に戻る**。 */
.ccard-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 1.2rem;
  row-gap: 0.22rem;
}
/* 題は読む文 — 器がいくら広くても 34 字で切る (硬さ 3)。基点も 34 字にすることで、
   器が狭いときは題だけで一行を使い切り、添え物が自然に下へ落ちる。 */
.ccard-body > .ccard-t { flex: 1 1 var(--measure-tool); max-width: var(--measure-tool); }
/* **「いつ」は題のすぐ隣に置く。** 中身が札ごとに違う文なので、右端へ飛ばすと
   目が題から遠くへ往復する (揃わない列は、揃っているふりだけが残る)。 */
.ccard-body > .ccard-due { max-width: var(--measure-tool); margin-top: 0; }
/* **「やること N つ」は右端に据える。** こちらは札をまたいで同じ形なので、
   列として縦に読める — 揃うものだけを揃える。 */
.ccard-body > .ccard-prog { margin-top: 0; margin-left: auto; padding-left: 1rem; }

/* 方向の合図 — 「押すと次の場所へ飛ぶ」を静止画で言い切る (icon-cue 16px) */
.cue {
  flex: none;
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  color: var(--muted);
}
.ccard:hover .cue { color: var(--ruri); opacity: 1; }

/* hover は合図が灯るだけ (道具は hover に依存しない — touch-first) */
/* タップの応答 — 紙が僅かに沈む (tap-highlight を消した分、ここで返す) */
.ccard:active { transform: scale(0.995); }
.art-t:active, .step-finish:active, .bulk-done:active,
.keep-add:active, .ask:active, .rec-head:active { opacity: var(--op-press, 0.92); }
/* 取り返せないものは「点」で言う — 正典 path.mark「取り返せないものだけ 5px の円を
   表題の前に」+ card「罫を足さない」。3px の左罫は帯になり、4 枚並ぶと画面の下半分が
   赤の帯になっていた (2026-08-31 実測: 視野の 52%)。「塗った箱に赤字を置くと見出しより
   大きな声になる」は正典が既に書いていた。 */
.ccard.irr .ccard-t::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--alert);
  margin-right: 0.5em;
  vertical-align: 0.15em;
}
.ccard.done .ccard-t { color: var(--muted); }

.ccard-t { font-size: var(--step-body); color: var(--sumi); line-height: 1.6; }

/* 行送りを書く。**書かないと `normal` になり、実測 1.44 倍で硬さ 3 の下限 (1.5) を割る**
   — 隣の `.ccard-t` は 1.6 を持っていて、ここだけ落ちていた。`normal` は実 DOM 監査の
   `parseFloat` が NaN になるので黙って通る (2026-08-13 に別の物差しで実測)。 */
/* 表題の補足 — 名前の下に小さく (2026-08-31)。一覧では名前だけを読ませ、
   「何のことか」の一行はここに落とす。段は support (注記の役) */
.road-tools { margin-top: 2rem; }
.ccard-note {
  font-size: var(--step-support);
  color: var(--muted);
  line-height: 1.65;
  margin-top: 0.2rem;
}
.ccard-due { font-size: var(--step-min); color: var(--muted); margin-top: 0.22rem; line-height: 1.6; }
/* 期限は情報として静かに積む。赤で言うと、点と二重に言うことになる (一つの語彙で言う) */
.ccard-due.soon { color: var(--muted); }
.ccard-due.ok { color: var(--ruri); }

.ccard-prog {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--step-min);
  color: var(--ruri);
  margin-top: 0.32rem;
}

.cbar {
  width: 3.2rem;
  height: 2px;
  background: var(--hairline);
  border-radius: 2px;
  overflow: hidden;
}

.cbar > span { display: block; height: 100%; background: var(--ruri); }

.ccard-flag {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: var(--step-min);
  color: var(--muted);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0 0.45rem;
  color: var(--muted);
}

/* stage (折りたたみ) の中のカードに少し呼吸を */
.stage > .ccard { margin-left: 0.2rem; margin-right: 0.2rem; }
.stage > .ccard:last-child { margin-bottom: 1.2rem; }

/* ---------- 詳細 (潜り込み) ---------- */

.detail-view {
  position: fixed;
  inset: 0;
  z-index: 100; /* 全画面 (マスタの重なり 4 段: 0/10/100) */
  background: var(--washi);
  display: none;
  flex-direction: column;
}

.detail-view.on { display: flex; }

.d-back {
  flex: none;
  background: none;
  border: none;
  color: var(--ruri);
  font-family: inherit;
  font-size: var(--step-sub);
  text-align: left;
  padding: 1.1rem 1.2rem 0.5rem;
  cursor: pointer;
  max-width: var(--shell);
  margin: 0 auto;
  width: 100%;
}

.d-body {
  --d-inset: 1.2rem;   /* 詰めは一箇所だけに書く — 下の読み物の幅がこれを引くので、二重に持たない */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.4rem var(--d-inset) 3rem;
  max-width: var(--shell);
  margin: 0 auto;
  width: 100%;
}

/* **潜った先は読み物。器は道と同じでも、文字は据える。**
   器 (`--shell`) の左端に揃えて `measure-tool` で切る — 道の札と同じ左端に立つので、
   開いても文章の列が動かない。直下の子に当てれば中の要素は幅を継ぐので、
   **要素ごとに数え上げない** (数え上げる表は、要素が増えた日に古くなる)。 */
.d-body > * { max-width: calc(var(--measure-tool) - 2 * var(--d-inset)); }

/* **詳細の読む文だけを、読む場の段に上げる** (2026-08-14、Noēs「文字の大きさにも統一感がない」)。
   同じ中身の静的ページ (`item/*` 247 枚) は本文 20px、アプリの詳細は道具の梯子のまま 16px で、
   **面をまたぐと跳ねていた** (実測)。上げるのは**散文だけ** — 期限の行・操作子・押せる語は
   道具のままにする (一括で `.item-body` に当てると、的の文字まで太って行が崩れる)。
   **値は書かない。場が `--ladder` を名乗り、値はマスタの生成物から引く。** */
.d-body .item-gist,
.d-body .item-value,
.d-body .item-risk {
  --ladder: reading;
  font-size: var(--read-body-ja);
  line-height: var(--lh-reading);
  letter-spacing: var(--ls-reading);
  max-width: var(--measure-reading);
}

/* 詳細の中では item の左チェック列をそのまま使う */
.d-body .item { border-bottom: none; }

/* ---------- 地図: 分岐 ---------- */

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

.fork {
  margin: 0.45rem 0 0;
  font-size: var(--step-support);
  color: var(--muted);
}

.fork b { color: var(--sumi); font-weight: 500; }
.fork b.off { font-weight: 400; color: var(--muted); }

.branch-note {
  margin: 0.4rem 0 0;
  padding: 0.45rem 0.65rem;
  font-size: var(--step-support);
  color: var(--muted);
  border: 1px dashed var(--hairline);
  border-radius: var(--r-app-sm);
}

.fork-d {
  margin-top: 0.5rem;
  padding: 0.35rem 0.7rem;
  border-style: dashed;
  color: var(--ruri);
  font-size: var(--step-support);
  text-align: left;
}

/* ---------- 手引き ---------- */

.trap-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: var(--step-sub);
  color: var(--muted);
  line-height: 1.9;
}

.trap-list li { margin-bottom: 0.45rem; }

/* ---------- 設定 ---------- */

.set-block { margin-top: 2rem; }
/* 記録の面の説明文。**器がどの幅でも一行 34 字で切る** — 級が小さいので、
   544 の器でも 41 字まで伸びて硬さ 3 を割っていた (改名前から在った。CI は
   この面を見ていないので、幅を変えて初めて表に出た。2026-08-13 実測)。 */
.set-block > p { max-width: var(--measure-tool); }

/* **利用者が入れた文字列だけは、途中でも折る。** 宛先には空白が無いので、長い宛先が
   そのまま一本の行になり、320 の画面で器を 242px 超えて**頁ごと横に広がる** (2026-08-13 実測:
   レイアウト幅が 320 → 546)。折り返しは器の側で守る — 表示する所を後から数え直さないため。
   `anywhere` を選ぶのは、`break-word` が器の測り幅に効かず溢れが残るため。 */
.mem-hint, .set-block > p, .mem-msg { overflow-wrap: anywhere; }

/* 読み上げにだけ届く領域。**見た目を持たない**ので部品ではない (面積 1px・切り抜きで消す)。
   `display: none` にすると読み上げからも消えるので、置き方はこの形でないといけない。 */
.live {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 退会の一段目と、二段目の二択。**名乗っていて定義が無い class を残さない** —
   `.mem-withdraw` は 2026-08-13 まで CSS を持たず、直上のログアウトと余白ゼロで接していた。
   二択の並べ方は `.dlg-acts` (すべて消す の確認) と同じ規律に揃える。 */
.mem-withdraw { margin-top: 1.4rem; padding-top: 1.2rem; border-top: var(--sw-hairline) solid var(--hairline); }
.mem-acts { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.9rem; }

/* 預かるもの・預からないものの一覧 — 詳細面の一覧と同じ扱いにする (新しい見た目を作らない) */
.set-block ul { margin: 0.3rem 0 0.7rem; padding-left: 1.1rem; }
/* 一行幅は**文字を置く要素に当てる**。器 (`.set-block > p`) にだけ当てて中の一覧に当てていなかったので、
   広い面 (992 以上) の設定で 44 字まで伸びていた — 歯車の面はこの便で初めて機械に載せた (2026-08-13 実測) */
.set-block li { margin-bottom: 0.4rem; max-width: var(--measure-tool); }
.set-block:first-of-type { margin-top: 0.6rem; }

.set-block h2 {
  font-size: var(--step-sub);
  font-weight: 500;
  letter-spacing: 0.06em;
  margin: 0 0 0.5rem;
}

.set-block p {
  font-size: var(--step-support);
  color: var(--muted);
  margin: 0.3rem 0;
  line-height: 1.9;
}

/* 会員の画面 (段 5)。**設定と同じ組み**を使う — 支払いの画面だけ別の見た目にしない */
.mem-field { display: block; margin: 0 0 1.1rem; }
.mem-label { display: block; font-size: var(--read-label); letter-spacing: var(--tr-label); margin: 0 0 0.35rem; }
.mem-input {
  display: block; width: 100%; padding: 0.7rem 0.8rem;
  font: inherit; font-size: var(--read-ui); color: var(--sumi);
  /* 操作の境界は罫 (hairline = 区切り専用) でなく線の役で引く。
     **`.id-input` (1319 行) が 2026-07-29 に直したのと同じ誤り**を、会員層で繰り返していた。
     会員層は一度も機械で測られていなかったので、8/13 に測るまで生き残った */
  background: var(--surface); border: var(--sw-hairline) solid var(--line);
  border-radius: var(--r-app-sm);
}
.mem-input:focus-visible { outline: var(--sw-voice) solid var(--ruri); outline-offset: 2px; }
/* 同上。退会の断り書きは `.mem-field` の外にも出るので、器でなくここで切る (992 で 55 字だった) */
.mem-hint { display: block; margin: 0.35rem 0 0; font-size: var(--read-caption); color: var(--muted);
            max-width: var(--measure-tool); }
.mem-list { margin: 0 0 1.4rem; padding-left: 1.2rem; }
.mem-list li { margin-bottom: 0.5rem; font-size: var(--read-caption); max-width: var(--measure-tool); }
.mem-agree {
  display: grid; grid-template-columns: auto 1fr; gap: 0 0.6rem; align-items: start;
  margin: 0 0 1.2rem; font-size: var(--read-caption); line-height: 1.8;
}
.mem-msg { margin: 0.9rem 0 0; font-size: var(--read-caption); }
.mem-note { color: var(--muted); }
.mem-warn { color: var(--alert); }
/* 最終確認 (特商法 12 条の 6)。**法が要る 5 つを、押す前に読める大きさで出す** */
.mem-terms { margin: 0 0 1.4rem; }
.mem-terms dt {
  font-size: var(--read-label); letter-spacing: var(--tr-label);
  color: var(--muted); margin: 0.9rem 0 0.2rem;
}
.mem-terms dd { margin: 0; font-size: var(--read-caption); line-height: 1.9; }

/* 取り決めの 3 枚への導線 (段 4)。**探させない** — 本文と同じ幅・同じ行に置く */
.set-legal {
  margin: 1.1rem 0 0;
  font-size: var(--read-caption);
  line-height: 2;
}
.set-legal a { color: var(--ruri); }

.set-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0 1.1rem;
  align-items: baseline;
  width: 100%;
  padding: 0.65rem 0.1rem;
  background: none;
  border: none;
  border-bottom: 1px solid var(--hairline);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}


/* 読むだけの行 (計測値の一覧)。押せる行と同じ組みだが、指は反応しない —
   押せそうに見えて何も起きないのは、壊れているのと区別がつかない */
.set-row.read { cursor: default; }

.set-q { font-size: var(--step-support); color: var(--muted); white-space: nowrap; }
/* 一行幅は文字を置く要素に当てる（この面で 4 度目の同じ型）。**利用者が文字間隔を広げた状態**
   (WCAG 1.4.12) の広い窓で 40 字を超えていた — 正典の工程は負荷を最も狭い幅にしか掛けないので、
   広い窓での破綻は誰も測っていなかった (2026-08-13 に幅を変えて掛けて実測、8 回)。
   `min-width: 0` は grid の列が縮めるようにするため (器は `auto 1fr auto`)。 */
.set-v { font-size: var(--step-body); font-weight: 500; color: var(--sumi);
         max-width: var(--measure-tool); min-width: 0; overflow-wrap: anywhere; }
.set-e { font-size: var(--step-min); color: var(--ruri); white-space: nowrap; }  /* 押せる語 = 瑠璃・下線なし (edit-word) */

.keep-owner {
  margin: 0.9rem 0 0.3rem;
  font-size: var(--step-support);
  color: var(--sumi);
}

.wipe {
  margin-top: 0.6rem;
  padding: 0.5rem 0.9rem;
  /* 押せるものの的は density.row を割らない (実 DOM 監査 2026-07-29)。
     .keep-add には入っていたのにここだけ抜けていて 37px で出ていた —
     **取り消せない操作の的がいちばん小さい**、といういちばん困る形の抜け (2026-07-30 R7) */
  min-height: var(--row);
  border-color: var(--alert);
  color: var(--alert);
  font-size: var(--step-support);
}

/* 確認 dialog — マスタ dialog 規律 (出すのは取り消せない操作だけ。window.confirm を置換、P2 還流 2026-07-27)。
   動詞で書く・既定選択を置かない・破壊側を primary にしない・対象と結果を具体に書く */
.confirm-dialog {
  background: var(--surface);
  color: var(--sumi);
  border: none;
  border-radius: var(--r-app-md);
  box-shadow: var(--shadow);
  max-width: 22rem;
  width: calc(100% - 2.4rem);
  padding: 1.2rem 1.3rem;
}
.confirm-dialog::backdrop { background: var(--scrim); }   /* 正典の役 (mixes.scrim) */
.confirm-dialog p { margin: 0 0 1.1rem; font-size: var(--step-sub); line-height: 1.8; }
.confirm-dialog .dlg-acts { display: flex; gap: 0.6rem; justify-content: flex-end; }
.dlg-keep { padding: 0.5rem 0.9rem; font-size: var(--step-support); }
.dlg-keep:hover, .dlg-keep:focus-visible { border-color: var(--ruri); color: var(--ruri); }
.confirm-dialog .wipe { margin-top: 0; }

/* ================= 紙に出す (P6) =================

   この製品は「やることの一覧」で、**紙に出して士業に渡す / 壁に貼る / チェックリストにする**
   需要が構造的にある。紙は押せないので、押すためだけの物を全部落とす。
   加えて **棚を全部開く** — 畳んだ棚は紙の上では「無い」のと同じで、
   一覧のつもりで出したものが歯抜けになる (紙は開き直せない)。

   出典 URL は紙面に残す (`href` を括弧で添える) — 紙に落ちた時点でリンクは押せないので、
   一次情報へ戻る道が本文から消える。この製品は「最後は公式の窓口で確かめて」を約束しているので、
   そこへ戻れない紙を配ることはできない。

   需要そのものは recordPrintUse (V5) が数える。**印刷できない状態で「印刷されているか」を
   測っても 0 しか出ない** ので、道具と計測を同じ便に入れた。 */
@media print {
  /* 押すためだけの物は出さない */
  .bottom-nav, .head-gear, .d-back, .back, .go, .relink, .see-record,
  .wipe, .confirm-dialog, .day-unset, .kigen-ics, #setup, #confirm {
    display: none !important;
  }

  /* **夜のまま刷ると読めない。** 実測: 地は白 / 文字は #E8E4DC で、紙の上でほぼ消えた。
     ただし**ここで役 (--sumi 等) を宣言し直してはいけない** — マスタの役を製品が上書きする形は
     逆流であり、製品側の適合監査が落とす (2026-08-07 に実際に 3 件で落ちた)。
     正しい手は**マスタ自身の昼夜機構に乗ること** — `data-scheme="day"` を立てれば
     夜の宣言 (`:root:not([data-scheme])`) が外れ、昼の役がそのまま降りてくる。
     立てるのは app.js の beforeprint (紙に出す時だけ、終わったら戻す)。
     地は印刷では既定で刷られない (背景色は紙に落ちない) ので、紙は白のまま —
     だから地の色をここで指定する必要はない (指定すると役を経由しない色になり、監査が落とす)。
     コメント中の #E8E4DC は**実測した壊れ方の記録**であって指定ではない。 */
  .road { padding-bottom: 0; }

  /* **棚は全部開く。** 畳んだ中身は紙の上では存在しない */
  details { display: block !important; }
  details > *:not(summary) { display: revert !important; }
  summary { list-style: none; font-weight: 500; }
  summary::-webkit-details-marker { display: none; }

  /* 畳まれた面も紙には出す — 画面は 1 面ずつでも、紙は一覧が要る */
  .pane { display: block !important; }
  .detail-view { position: static !important; display: block !important; }

  /* 一次情報へ戻る道を紙に残す (押せないので、宛先を文字で添える) */
  .todo-links a::after { content: " (" attr(href) ")"; font-size: 0.85em; color: var(--muted); }

  /* 項目の途中で紙が変わらないように */
  .todo, .shelf, .kigen-item, li { break-inside: avoid; page-break-inside: avoid; }
  h1, h2, h3, summary { break-after: avoid; page-break-after: avoid; }

  /* 影は消さない — 昼の `--shadow` は rgba 0.04〜0.06 で紙に出ても見えず、
     `box-shadow: none` を全称で当てると**役を経由しない指定**として監査が落とす。
     消す価値より、正典を経由しないものを増やさない方を採る。 */
}

/* 項目の住所をうつす口 (D6) — 本文の下に静かに。押せる語は .see-record を使う (新しい形は作らない) */
.share-row {
  margin-top: 2.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--hairline);
}
.share-url {
  display: block;
  width: 100%;
  margin-top: 0.7rem;
  padding: 0.6rem 0.7rem;
  min-height: var(--row);
  background: var(--surface);
  color: var(--sumi);
  border: var(--sw-hairline) solid var(--line);
  border-radius: var(--r-app-sm);
  font-family: inherit;
  font-size: var(--step-support);
}

/* データの強調 (`**…**` → strong)。**色は変えない** — 階層は太さと大きさで作る
   (マスタは文字色の 2 段目を持たない。Koku 退役 2026-07-26 と同じ理由)。
   和文で斜体は使わない (brand-tone) ので、太さだけが強調の手段。 */
strong { font-weight: 500; }