/* AMUDEA / Phase 6 — Design tokens ＋ App shell（B案「作業台」）
 *
 * ⭐⭐ 決定は D-018（2026-08-07・本人）＝**B案「作業台」／正本は内部ターゲット**。
 * 承認済み Figma は存在しないので、*在るかのように参照しない*。
 *
 * ⚠️ CSP は `style-src 'self'` なので **インライン style は書けない**
 *    （契約テスト `test_p3_02r_amudea_screen_contract.py` が全画面を見張っている）。
 * ⚠️ 旧 `app.css` は**触らない**。AMUDEA の見た目はこのファイルだけに置く
 *    （`CLAUDE.md` の禁止事項「全CSS/全Templateの一括置換」）。
 *
 * 禁止（`00_UI_REFRESH_MASTER.md`）: gradient / glow / glassmorphism /
 * 巨大角丸カード / card everything / 巨大見出し / 意味のないダッシュボード。
 */

/* ---------------------------------------------------------------------------
 * Tokens
 * ⭐ 値を直接書かず、**すべてここを経由**する（Phase 7 の7画面が同じ語彙で書ける）。
 * ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

/* 🔴 P8-02 の幾何の実測で見つけた＝**すべてが 8px ずれていた**（`x: 8, y: 8`）。
   ブラウザ既定の `body { margin: 8px }` が残っていたので、左のレールが
   **窓の端まで届いていなかった**。⚠️ 見た目は「なんとなく余白がある」だけなので
   目では気づきにくい——⭐**幾何を数字で見て初めて分かる種類の欠陥**。 */
body { margin: 0; }

:root {
  /* 🎨 D-031（2026-09-28・本人）＝**静かなモダン**：青みを抜いた無彩色（値は設計書
     `2026-09-28-quiet-modern-design.md` §2・`test_p7_61_quiet_modern.DECIDED` が固定する）。
     ⭐ 意味を運ぶのは今までどおり濃さと重さ（主ボタン・リンク・フォーカスは墨）。
     以下は 2026-08-08 の経緯（形の考え方はそのまま生きている）。
     色 — **参考17枚（`docs/design-refs/`）の配色**。決定は本人（2026-08-08）。
     ⚠️ ここは `CLAUDE.md` §6 の "Warm Neutral / Deep Teal" を**本人判断で置き換えた**。
     ⭐⭐ 参考の画面クロムには**彩度がほとんど無く**、主ボタンさえブランド色ではなく
     *いちばん濃いインク*だった——**実質モノトーンに、わずかな青みを足した配色**。
     ⭐ 色を使わずに階層が立っているから、色を出したときに意味が伝わる（DESIGN.md §1）。
     ⚠️ AI を表す紫/青の**グラデーション**は使わない（禁止事項）——これは*単色の青み*。 */
  --amu-bg:            #fafafa;  /* ページの地・左のメニューの地（D-031 で青みを抜いた淡い灰） */
  --amu-surface:       #ffffff;
  --amu-surface-sunk:  #f4f4f5;  /* 左レールなど、一段引っ込む面 */
  --amu-ink:           #18181b;  /* 本文・主ボタンの地。⚠️ 純黒にしない（D-031 で青みも抜いた墨） */
  --amu-ink-soft:      #52525b;  /* ラベル・補助。実測 7.03:1（沈んだ面の上）・7.73:1（白） */
  /* 🔴 かつて `#8a817b` にしていて、実測で **3.33:1**（WCAG AA は小さい文字で
     4.5:1 が要る）。⭐ *落ち着いた灰色*のつもりが、**読めない灰色**だった——
     色は目で決めず、**比で決める**（`test_p7_01_accessibility.py` が実測する）。 */
  /* 🔴 D-031 の見本の `#71717a` は沈んだ面の上で 4.40:1 に落ちた＝`#66666e`（どの面でも 5 以上）。 */
  --amu-ink-faint:     #66666e;  /* 実測 5.18:1（沈んだ面）／5.45:1（左の地）／5.69:1（白） */
  --amu-line:          #e4e4e7;  /* ⭐ 階層は影ではなく、この罫線と余白で作る */
  /* ⭐ 入力欄の枠も**見えなければ枠ではない**。WCAG 1.4.11（非文字の 3:1）を満たす
     ところまで濃くした（D-031 の `#85858e` で白地に **3.66:1**）。⚠️ 以前の `#c9c0b6` は 1.69:1 で、
     *どの番人も測っていなかった*——配色を入れ替えるついでに直した。 */
  --amu-line-strong:   #85858e;
  /* ⚠️ **名前は「アクセント」だが、参考にならって色相を持たせない。**
     この枠は *強調に使ってよい唯一の色* という**席**で、いまは最も濃いインクが座る。
     ⭐ 出てよいのは4つだけ＝リンク／フォーカス／選択中／確定済み（DESIGN.md §1）。 */
  --amu-accent:        #18181b;
  --amu-accent-soft:   #f4f4f5;  /* 選択中の地 */
  --amu-accent-ink:    #09090b;
  /* ⚠️⚠️ **参考17枚には「注意」に当たる色がほぼ無い。** だから色相を足さず、
     *濃さ*と*反転*で注意を運ぶ（DESIGN.md §6）。⭐ 足りなければ**ここだけ**
     1色（琥珀）を入れる余地は残してある——参考にも状態バッジの色は在った。 */
  --amu-warn:          #18181b;
  --amu-warn-soft:     #f1f1f3;

  /* ハイライト（引用の裏取り）。⭐ 参考に該当する色は無いので、**反転**
     （濃い地に白文字）にした。⚠️ *前後を読むための画面*なので、
     周りの本文の読みやすさは落とさない——反転は抜粋の1本だけに効く。 */
  --amu-mark:          #18181b;

  /* 余白 — 4px 刻み。⭐ Dense but breathable＝密度は上げるが、詰めない。
     🆕 `--amu-space-8`（64px）を足した＝**節と節の間**。
     ⭐ 参考17枚から採ったいちばん効く1つ＝*節の間は本文行間の 1.6 倍以上*。
     ⚠️ ここを 16px にした瞬間、画面全体が「フォームの羅列」に見える。 */
  --amu-space-1: 0.25rem;
  --amu-space-2: 0.5rem;
  --amu-space-3: 0.75rem;
  --amu-space-4: 1rem;
  --amu-space-5: 1.5rem;
  --amu-space-6: 2rem;
  --amu-space-7: 3rem;
  --amu-space-8: 4rem;

  /* 文字 — 日本語優先。⚠️ 見出しは「大きさ」ではなく罫線と余白で立てる。
     🆕 本文を 15px → **16px** に上げた（DESIGN.md §2）。和文は欧文より
     字面が詰まるので、同じ px でも小さく見える。⚠️ これで全画面の幾何が動くので
     `baseline-geometry.json` は作り直して**一緒にコミット**する。 */
  --amu-font: system-ui, -apple-system, "Hiragino Kaku Gothic ProN",
              "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  --amu-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --amu-text-xs: 0.75rem;      /* 12px メタ（件数・日付・原価） */
  --amu-text-sm: 0.875rem;     /* 14px 補助・ボタン・入力欄 */
  --amu-text-base: 1rem;       /* 16px 本文 */
  --amu-text-lg: 1.125rem;     /* 18px h3 */
  /* 🔴 最初 1.375rem(22px) にしたが、**実測で h1 26px との差が 4px しかなく**、
     しかも両方が罫を持っていたので「同格の見出しが2つ」に見えた。
     ⭐ 参考の節見出し÷ページ題は 0.73 前後——20px にして 0.77 に寄せる。 */
  --amu-text-xl: 1.25rem;      /* 20px h2 */
  --amu-text-2xl: 1.625rem;    /* 26px ⭐ h1 でもここまで（巨大見出しは禁止） */

  /* 行間 — ⭐ 和文は欧文より広く取る。 */
  --amu-leading-tight: 1.45;
  --amu-leading-ui: 1.7;   /* 🆕 ボタン・ラベルなど、折り返さない短い文 */
  --amu-leading: 1.85;

  /* 角丸 — **2種類＋丸**（D-031）＝部品 8px・カードと浮く一覧 12px・小札だけ丸。
     ⚠️「巨大角丸カード」は禁止（カードは 12px まで＝`test_p6_01` が見張る）。 */
  --amu-radius: 8px;
  --amu-radius-lg: 12px;
  /* 🆕 D-031（2026-09-28・本人）: **丸は小札とタブの数字だけ**（面には使わない）。 */
  --amu-radius-pill: 999px;
  /* 🆕 D-031: 影は**浮いている「…」の一覧だけ**（白い画面の上の白い一覧を本文から離す）。
     ⚠️ 光る影（glow）ではない＝薄い墨を下へ少し落とすだけ。 */
  --amu-shadow-pop: 0 4px 16px rgb(24 24 27 / 8%);

  /* 動き — ⭐ **押したことが分かるための最短のフィードバックだけ**。
     ⚠️ 位置・大きさ・透明度は動かさない（DESIGN.md §5）。 */
  --amu-motion: 120ms ease-out;

  /* 寸法 */
  --amu-rail: 15rem;         /* 左レール */
  --amu-measure: 42rem;      /* ⭐ 本文の1行を長くしすぎない */
  /* 🆕 ボタン・入力欄の高さ。⭐ **WCAG 2.2 の 24px は下限であって目標ではない。**
     🔴 実機で「聞くがおせない」「左のメニューの聞くがおせない」が2回出たのは、
     的が 17〜22px しか無かったから。参考17枚はどの画面も 40px 前後だった。 */
  --amu-control-h: 2.5rem;
  /* 🆕 総ざらいで見つけた「規則を持つ数字」をトークンにした
     （⚠️ 数字が散らばると、規則が**数字の集まり**に化けて誰も守れなくなる）。 */
  --amu-target-min: 24px;    /* WCAG 2.2 の 2.5.8＝**下限**。文中リンク等の最低保証 */
  --amu-row-h: 2.75rem;      /* 一覧の行（44px）。⭐ 行そのものも触る的 */
  --amu-nav-h: 2.25rem;      /* レールの項目（36px） */
  --amu-page: 64rem;         /* ページの最大幅（⚠️ 本文の1行は `--amu-measure`） */
  --amu-focus: 2px;          /* フォーカスリングの太さ。⚠️ 細くしない */
  --amu-editor-h: 18rem;     /* 長文を書く欄だけの高さ（原稿の本文） */
}

/* ---------------------------------------------------------------------------
 * App shell — B案「作業台」
 * ⭐⭐ **ナビは1つだけ。** 監査の実測＝画面ごとに自前のナビを持つ構造が、
 *    すでに3回「辿り着けない画面」を生んだ（IR-041 / P3-02R F-6 / P3-08R）。
 *    その都度直しても**構造としては直っていない**——ここで1つにする。
 * ------------------------------------------------------------------------ */
.amu {
  /* ⚠️ 実測で **200% 相当のとき横に 2px はみ出していた**（入力欄の幅 100% ＋
     padding が親を超える）。⭐ 箱の勘定を borderーbox に揃えて閉じる。 */
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--amu-rail) minmax(0, 1fr);
  background: var(--amu-bg);
  color: var(--amu-ink);
  font-family: var(--amu-font);
  font-size: var(--amu-text-base);
  line-height: var(--amu-leading);
}

/* 🔴 本人の実機指摘（2026-08-08）＝**右が長い画面だと、左下のログアウトが
   ずっと下へ行ってしまい、スクロールしないと見えない**。
   ⭐ 原因は grid の行の高さ＝*本文の長さ*で、レールがそれに合わせて伸びていたこと
   （`margin-top: auto` の足元は「レールの下端」＝本文の下端だった）。
   ⭐ レールの高さを**窓に固定**する＝本文がどれだけ長くても、レールは常に一画面ぶん。
   ⚠️ レール自身が窓より高いときは**レールの中だけがスクロール**する
   （`overflow-y: auto`）——*画面外に押し出して隠す*ことはしない。
   ⚠️ 狭い画面ではレールが**本文の上**に来る1カラムなので、この固定は外す（下の media）。 */
.amu__rail {
  /* ⭐ D-031: 左のメニューはページの地（`--amu-bg`）＝今の項目だけ丸い沈んだ面で示す。 */
  background: var(--amu-bg);
  border-right: 1px solid var(--amu-line);
  padding: var(--amu-space-5) var(--amu-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--amu-space-5);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

/* 🔴 **同じ罠の6回目**（総ざらいで見つけた）＝`.amu__brand` は (0,1,0) なので
   `.amu a { color: var(--amu-accent) }` (0,1,1) に負け、**宣言した
   `--amu-accent-ink`（#0a4444）ではなく `--amu-accent`（#0f5c5c）で描かれていた**。
   ⚠️ 近い色なので**目でもスクショでも分からない**——⭐ *1つずつ偶然見つける*のをやめて、
   `amu__*` の単独クラス規則を**全画面で総ざらいして測った**ときに初めて出た。 */
.amu .amu__brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--amu-target-min);
  font-size: var(--amu-text-lg);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--amu-accent-ink);
  text-decoration: none;
}

.amu__tagline {
  font-size: var(--amu-text-xs);
  color: var(--amu-ink-faint);
  margin-top: var(--amu-space-1);
}

/* ⭐ 中心操作「取り込む → 聞く → 作る」を**そのまま並べる**。
   監査の指摘＝製品の言葉と導線の名前が一致していなかった。 */
.amu__nav {
  display: flex;
  flex-direction: column;
  gap: var(--amu-space-1);
}

/* 🔴🔴 **書いたつもりの規則が、一度も効いていなかった。**
   `.amu__nav a` と、下のほうに在る `.amu a { color: var(--amu-accent) }` は
   **詳細度が同じ (0,1,1)** なので、**後に書かれたほうが勝つ**——実測すると
   レールの4項目すべてが `rgb(15,92,92)`（アクセント）だった。
   ⚠️ *レール全体がアクセント色*だと、**アクセントが何も意味しなくなる**
   （DESIGN.md §1＝アクセントが出てよいのはリンク／フォーカス／選択中／確定済み）。
   ⭐ 見て気づいたのではなく、**計算値を測って**分かった（[[reading-code-is-not-running-it]]）。
   ⭐ 直し方は綴り直しではなく**詳細度を1段上げる**（`.amu` を1つ足す）。 */
.amu .amu__nav a {
  /* ⭐ WCAG 2.2 の **24×24 CSS px**（2.5.8 Target Size Minimum）は**下限**。
     🔴 実測で 17〜22px しか無く、押しにくい的が並んでいた。
     ⭐ 参考のレールはどれも 36〜40px あったので **36px** を確保する。 */
  /* ⚠️ これは**下限**であって実寸ではない——いまは余白と行の高さで 40px 前後に
     なるので binding していない。⭐ *余白を詰めた日に効く*ために残す
     （🔴 変異バッテリの M7 が「生き残った」ときに、この事実に気づいた）。 */
  min-height: var(--amu-nav-h);
  display: flex;
  /* 🔴 ここに `align-items` が2回書いてあり、先に書いた `center` が
     後の `baseline` に黙って上書きされていた＝**書いたつもりの規則が効いていない**。 */
  align-items: center;
  gap: var(--amu-space-2);
  padding: var(--amu-space-2) var(--amu-space-3);
  border-radius: var(--amu-radius);
  color: var(--amu-ink-soft);
  text-decoration: none;
  font-size: var(--amu-text-sm);
  line-height: var(--amu-leading-ui);
  transition: background-color var(--amu-motion), color var(--amu-motion);
}

.amu__nav a:hover {
  /* 🔴 独立レビュー（I-2）: 地が `--amu-bg` になり、白のホバーは地と 1.04:1 で見えなかった。
     ⭐ 見本 A と同じ沈んだ面（今の項目は太字＋濃い文字で見分ける）。 */
  background: var(--amu-surface-sunk);
  color: var(--amu-ink);
}

.amu__nav a[aria-current="page"] {
  background: var(--amu-accent-soft);
  color: var(--amu-accent-ink);
  font-weight: 600;
}

/* ⚠️ `.amu__nav-count`（レールの件数）は **2026-08-08 に廃止**（本人指示）。
   ⭐ 出さないものを数え続けるのは *見えないところで払い続ける代金*——
   テンプレートと context の両方から消したので、規則も残さない。 */

/* ⭐⭐ **英語の見出しの下に、薄く小さく日本語**（2026-08-08・本人指示）。
   ⚠️ `CLAUDE.md` §3 の中心操作は日本語の3語（取り込む／聞く／作る）なので、
   **英語は見出し、日本語は意味**——*製品の言葉を消さずに、見た目を英語にする*。
   ⚠️ 薄くするのは色だけ（`--amu-ink-faint` は実測 5.26:1／5.50:1 で AA を満たす）
   ——⭐ *小さいから読めなくてよい* にはしない。 */
/* ⚠️ `.amu__nav-ja`（レールの日本語）は **2026-08-08 に廃止**（本人指示）。
   ⭐ 画面の題の側（`.amu__page-sub`）は残す——*どこに居るか*は題で分かればよく、
   レールは短い語が並ぶほうが読みやすい。 */
.amu__page-sub {
  display: block;
  font-size: var(--amu-text-xs);
  font-weight: 400;
  line-height: var(--amu-leading-ui);
  letter-spacing: 0;
  color: var(--amu-ink-faint);
}

.amu__page-sub { margin-top: var(--amu-space-1); }

/* 🔴🔴 ここには `.amu .amu__nav a` の**2つ目のブロック**が在った（2行組にするため）。
   ⚠️ そのせいで変異バッテリの M14（同じセレクタを探す）が **「対象が2件」で
   武装解除**されていた——⭐ *同じセレクタを2箇所に書くと、綴りで探す番人が死ぬ*。
   ⭐ レールの日本語を外した（本人指示）ので2行組は不要になり、上の1つに統合した。 */

/* ⭐ 中心操作（取り込む/聞く/作る）は**主**、その手段は**副**。
   ⚠️ 見出しに見せない——**押せるものは押せる見た目**にする
   （実機で「押せない」と言われたのは、押せそうな見出しを置いていたから）。 */
/* 🔴 **同じ穴の2つ目。** ここの `font-size` も一度も効いていなかった——
   `.amu__nav-main` は (0,1,0) で、`.amu__nav a` の (0,1,1) に負けていた。
   実測: 中心操作の3語も「調べる」も**すべて 14px** で、大きさの差はゼロだった。
   ⚠️ *中心操作を主にする*ために書いた行が、**主にしていなかった**。
   ⭐ 詳細度をそろえる（`.amu .amu__nav` を前に付ける）。 */
.amu .amu__nav .amu__nav-main {
  font-size: var(--amu-text-base);
  font-weight: 600;
  margin-top: var(--amu-space-3);
}

/* ⚠️ `.amu__nav-sub`（手段を副として字下げする規則）は **D-021 で役目を終えた**ので
   削除した——レールに並ぶのは中心操作の3つだけになり、副の項目が存在しない。
   ⭐ *使われないクラスを残さない*＝在るのに使われていない語彙が増えると、
   `DESIGN.md` と実態がずれ、次に読む人が「使ってよい部品」と誤解する。 */

/* ⭐ レールの下側の導線も 24px を確保する（的が小さいのは*ここ*が多い）。 */
.amu__rail-foot a,
.amu__rail-foot button {
  display: inline-flex;
  align-items: center;
  min-height: var(--amu-target-min);
}

/* 🔴 実測で下部の3行が **x=16 / 16 / 36** とバラバラで、ナビの 28 とも
   揃っていなかった（ログアウトだけボタンの左 padding 16px ぶん右へずれていた）。
   ⭐ 左端をナビにそろえる＝*同じ列に並ぶものは、同じ線から始まる*。 */
.amu__rail-foot > a,
.amu__rail-foot > span { padding-left: var(--amu-space-3); }
.amu .amu__rail-foot button { padding: var(--amu-space-1) var(--amu-space-3); }

.amu__rail-foot {
  margin-top: auto;
  font-size: var(--amu-text-xs);
  color: var(--amu-ink-faint);
  border-top: 1px solid var(--amu-line);
  padding-top: var(--amu-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--amu-space-2);
}

.amu__main {
  /* ⭐ 下を厚くする＝**最後の要素が窓の底に貼りつかない**（参考はどの画面も
     本文の下に大きな空きがあり、それが「ここで終わり」と言っていた）。 */
  padding: var(--amu-space-6) var(--amu-space-6) var(--amu-space-8);
  min-width: 0;
}

.amu__page {
  max-width: var(--amu-page);
}

/* ---------------------------------------------------------------------------
 * 見出しと本文
 * ------------------------------------------------------------------------ */
/* ⭐ 参考17枚すべてでページ題の下に**罫が1本**あり、それが題を紙に留めていた。
   ⚠️ テンプレートを触らずに同じ形にするため、罫は h1 自身が持つ。 */
.amu h1 {
  font-size: var(--amu-text-2xl);
  line-height: var(--amu-leading-tight);
  /* ⭐ 600 → **700**。参考は本文 400・ラベル 600・題 700 で、
     **ウェイト差が 300 無いと階層が死ぬ**（DESIGN.md §2）。 */
  font-weight: 700;
  margin: 0 0 var(--amu-space-6);
  padding-bottom: var(--amu-space-4);
  border-bottom: 1px solid var(--amu-line);
  /* ⭐ D-031: 見出しを少し締める（今らしさ・大きさは変えない）。 */
  letter-spacing: -0.01em;
}

/* 🔴 節見出しにも罫を引いていたので、ページ題と**同じ形**になり、実測で
   26px/700＋罫 と 22px/600＋罫 が並んで「同格の見出しが2つ」に見えていた。
   ⭐ 参考17枚を見直すと、**罫はページ題の下にだけ在り、節見出しには無い**
   （16.jpg の "Your integrations"・11.jpg の "Copy link" いずれも罫なし）。
   ⭐ 節の区切りは**罫ではなく 48px の余白**が担う。 */
.amu h2 {
  font-size: var(--amu-text-xl);
  line-height: var(--amu-leading-tight);
  font-weight: 600;
  /* ⭐ 節の間は 48px。⚠️ ここを 16px にすると全部が「フォームの羅列」に見える。 */
  margin: var(--amu-space-7) 0 var(--amu-space-4);
}

/* ⭐ 最初の節だけは、h1 の罫との間に二重の空きを作らない。 */
.amu h1 + h2 { margin-top: 0; }

.amu h3 {
  font-size: var(--amu-text-lg);
  font-weight: 600;
  margin: var(--amu-space-5) 0 var(--amu-space-2);
}

/* ⭐ 群のラベル（参考の「FORM」「BRANDING」に当たる）。
   ⚠️ **見出しではない**ので、押せるものにも大きくも見せない。
   ⚠️ 和文は大文字が無いので、**字間**で「小さいラベル」だと分からせる。 */
.amu__eyebrow {
  font-size: var(--amu-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: var(--amu-leading-ui);
  color: var(--amu-ink-faint);
  margin: var(--amu-space-5) 0 var(--amu-space-2);
}

.amu p { margin: 0 0 var(--amu-space-3); max-width: var(--amu-measure); }

/* ⚠️⚠️ **モノトーンでは、色でリンクだと分からせられない。**
   ⭐ だから**下線を必ず引く**（ブラウザ既定に任せず、明示して固定する）——
   *色を落とした結果リンクが本文に埋もれる*のは、モノトーン化のいちばんありがちな事故。
   ⚠️ レールとボタンは別途 `text-decoration: none` を持っている（そちらは形で分かる）。 */
.amu a {
  color: var(--amu-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ⭐ 抜粋は引用罫で本文と区別する＝**根拠が本文と混ざらない**ことを視覚でも保証。 */
.amu blockquote {
  margin: var(--amu-space-2) 0;
  padding: var(--amu-space-1) 0 var(--amu-space-1) var(--amu-space-4);
  border-left: 2px solid var(--amu-line-strong);
  color: var(--amu-ink-soft);
  font-size: var(--amu-text-sm);
  max-width: var(--amu-measure);
}

/* ---------------------------------------------------------------------------
 * 一覧は「行」（⚠️ カードにしない＝ card everything は禁止）
 * ------------------------------------------------------------------------ */
/* 🔴 実測（`document_detail`）＝一覧の最後の行の罫のすぐ下に次の節の導線が来て、
   **リンクが一覧の一部に見えた**。⭐ 一覧の後ろには息継ぎが要る。 */
.amu__rows { list-style: none; margin: 0 0 var(--amu-space-5); padding: 0; }

/* ⭐ 一覧の行の中のリンクも、押せる高さを確保する。 */
.amu__rows > li > a,
.amu__rows a {
  display: inline-flex;
  align-items: center;
  min-height: var(--amu-target-min);
}

.amu__rows > li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--amu-space-4);
  padding: var(--amu-space-3) 0;
  /* ⭐ 行そのものも「触る的」。参考の一覧はどれも 44px 以上あった。 */
  min-height: var(--amu-row-h);
  border-bottom: 1px solid var(--amu-line);
}

/* パネル（D-022・節はすべて1枚の面に載せる）は D-030 で引退（2026-09-28）。
   節は箱なし（`.amu .amu__section`）＝区切りは見出しと余白。経緯は DESIGN.md §6。 */

/* ---------------------------------------------------------------------------
 * カード — ⚠️ **「見せるものがある一覧」だけ**（本人決定・2026-08-08）
 *
 * ⭐⭐ 参考17枚を数えると、**カードは 02.jpg のテンプレ一覧ただ1つ**で、
 *    そこだけ各項目に**サムネイル（見せるもの）が在った**。
 *    14/16/11.jpg の一覧はすべて**行＋罫**。⭐ 参考の使い分けは
 *    *「見せるものがあるときだけ枠で囲う」*——これをそのまま採った。
 *
 * ⚠️ `CLAUDE.md` §6 の禁止は **"card everything"**＝*全部をカードにすること*。
 *    ここは中身のある4つ（要点／論点／記事案／検索結果）に**限定**しているので
 *    抵触しない。⚠️ 題だけの一覧（トピック・原稿・情報）は**行のまま**——
 *    *中身より枠のほうが目に入る*状態を作らない。
 *
 * ⚠️ 禁止事項の「3カラム均等のフィーチャーカードグリッド」とも別物＝
 *    あれは*宣伝で機能を3つ並べる枠*。ここは**件数が可変のデータの一覧**で、
 *    列数は幅で決まる（狭い画面では1列）。
 * ------------------------------------------------------------------------ */
.amu__cards {
  list-style: none;
  margin: 0 0 var(--amu-space-5);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: var(--amu-space-4);
}

.amu__cards > li {
  background: var(--amu-surface);
  border: 1px solid var(--amu-line);
  border-radius: var(--amu-radius-lg);
  padding: var(--amu-space-4);
  min-width: 0;
}

/* ⭐ カードの中の最後の要素の下に、余分な空きを作らない。 */
.amu__cards > li > :last-child { margin-bottom: 0; }

/* ⚠️ カードの幅は 20rem 前後なので、中の本文まで `--amu-measure`（42rem）で
   縛る必要が無い。⭐ 縛ったままだと**入れ子の max-width が効かない**わけではないが、
   *どこで折り返すか*をカードの幅に任せたほうが素直。 */
.amu__cards > li p,
.amu__cards > li blockquote { max-width: none; }

.amu__row-meta {
  color: var(--amu-ink-faint);
  font-size: var(--amu-text-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ⭐ 状態を1語で示す。⚠️ **状態が2つ以上ありうる所にだけ**置く（飾りにしない）。 */
.amu__chip {
  display: inline-flex;
  align-items: center;
  font-size: var(--amu-text-xs);
  line-height: var(--amu-leading-ui);
  padding: 0.125rem var(--amu-space-2);
  border: 1px solid var(--amu-line);
  /* ⭐ D-031: 小札は丸（見本の「今らしさ」の多くはここから・本人確認済み）。 */
  border-radius: var(--amu-radius-pill);
  background: var(--amu-surface-sunk);
  color: var(--amu-ink-soft);
  white-space: nowrap;
}

/* ⚠️ 確定済みは**静か**（枠だけ）。 */
.amu__chip--confirmed {
  background: var(--amu-surface);
  border-color: var(--amu-line-strong);
  color: var(--amu-ink);
}

/* ⚠️ 「まだ確かめていない／下書き／失敗」。⭐ ここを飾りに使うと、
   *測っていないことを測ったように見せない* という中心の約束が視覚から崩れる。
   ⭐ モノトーンなので**反転**で示す＝小さくても見落とせない。 */
.amu__chip--unverified {
  background: var(--amu-ink);
  border-color: var(--amu-ink);
  color: var(--amu-surface);
}

/* ⭐ 読み取り専用の値（URL・書き出したパス・スニペット）。
   ⚠️ **枠を付けない**——枠を付けると入力欄に見え、*編集できる*という嘘になる。 */
.amu__code {
  display: block;
  font-family: var(--amu-font-mono);
  font-size: var(--amu-text-sm);
  line-height: var(--amu-leading-ui);
  background: var(--amu-surface-sunk);
  border-radius: var(--amu-radius-lg);
  padding: var(--amu-space-3) var(--amu-space-4);
  margin: var(--amu-space-3) 0;
  max-width: var(--amu-measure);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ---------------------------------------------------------------------------
 * 状態 — ⭐ 空・断り・失敗・「まだ確かめていない」に一貫した見た目を与える。
 *    Phase 3 の各波が足してきた文言は、これで**同じ強さ**で出る。
 * ------------------------------------------------------------------------ */
.amu__empty {
  color: var(--amu-ink-faint);
  padding: var(--amu-space-5) 0;
}

/* ⭐ 参考の空状態は例外なく **題（強）→ 説明（弱）→ ボタン（最も濃い）** の3層。
   🔴 実測でホームは3段落が**同じ強さ**で、しかも押せるものが*説明文より弱い*
   テキストリンク2本だった——⚠️ *この画面で進めたいこと*が視覚的に最下位。
   ⚠️ 文言は `06_SCREEN_AND_STATE_SPECIFICATIONS.md` の正本と機械照合されているので
   **1文字も変えない**。変えるのは**見た目の強さ**だけ。 */
.amu__empty-title {
  font-size: var(--amu-text-lg);
  font-weight: 600;
  line-height: var(--amu-leading-tight);
  color: var(--amu-ink);
  margin: 0 0 var(--amu-space-2);
}

/* ⭐ **段落に単独で置かれたリンクは「主な操作」**なので、24px の的を確保する
   （WCAG 2.2 の 2.5.8）。⚠️ *文中*のリンクは Inline 例外に当たるので変えない——
   `:only-child` がその2つをちょうど分ける。

   🔴 これは fixture を直したときに出てきた＝空のホームでは
   「トピックをすべて見る」が**描かれていなかった**ので、番人の視界に入っていなかった。
   ⭐ *測りたい枝が走る状態*を作ると、隠れていた欠陥が出る。 */
.amu__empty a,
.amu__page p > a:only-child {
  display: inline-flex;
  align-items: center;
  min-height: var(--amu-target-min);
}

/* ⭐⭐ **`note` と `notice` を見た目で分ける。**
   🔴 どちらも「白地＋枠＋左3px」で**まったく同じ顔**だったので、
   *いま知らないと困ること*（notice）と*背景の説明*（note）が同じ強さで並び、
   実測でホームは**説明文が画面でいちばん濃い塊**になっていた
   ——⚠️ *進めたい操作*より*但し書き*が目立つ画面は、読む順を間違えさせる。
   ⭐ `note` は地に沈める（枠を持たない）。`notice` は白地に残して前へ出す。 */
.amu__note {
  font-size: var(--amu-text-sm);
  line-height: var(--amu-leading);
  color: var(--amu-ink-soft);
  background: var(--amu-surface-sunk);
  border-left: 3px solid var(--amu-line-strong);
  border-radius: 0 var(--amu-radius) var(--amu-radius) 0;
  padding: var(--amu-space-3) var(--amu-space-4);
  margin: var(--amu-space-5) 0;
  max-width: var(--amu-measure);
}

.amu__notice {
  font-size: var(--amu-text-sm);
  line-height: var(--amu-leading);
  color: var(--amu-ink-soft);
  background: var(--amu-surface);
  border: 1px solid var(--amu-line);
  border-left: 3px solid var(--amu-line-strong);
  border-radius: var(--amu-radius);
  padding: var(--amu-space-3) var(--amu-space-4);
  margin: var(--amu-space-3) 0;
  max-width: var(--amu-measure);
}

/* ⚠️ 「まだ確かめていない」は**警告色**で出す——*測っていないことを、
   測ったように見せない*というこの製品の中心の約束の、見た目の側。 */
/* ⭐⭐ **モノトーンでは、意味を運ぶのは色相ではなく「濃さ」。**
   ⚠️ ここを取り違えると *測っていないことを測ったように見せない* という
   この製品の中心の約束が、視覚の側から崩れる。
   ⭐ 規則は1つ＝**注意が要るものほど濃く、良い知らせは静かに**。

   | 状態 | 左の罫 | 地 |
   |---|---|---|
   | 背景の説明（note） | 中間グレー | 沈んだ面 |
   | **未検証・下書き・失敗** | **いちばん濃いインク** | 注の地（`--amu-warn-soft`）＝沈んだ面と**ほぼ同じ**（D-031 で 1.03:1）。⭐ **区別は左の 3px の墨の罫が運ぶ** |
   | 確定済み | 中間グレー | 白（＝静か） |
*/
.amu__unverified {
  border-left-color: var(--amu-ink);
  background: var(--amu-warn-soft);
  color: var(--amu-ink);
}

.amu__draft {
  border-left-color: var(--amu-ink);
  background: var(--amu-warn-soft);
}

/* ⚠️ **確定済みを目立たせない。** 良い知らせは静かでよく、
   *強い見た目*は「まだ確かめていない」のほうに取っておく。 */
.amu__confirmed {
  border-left-color: var(--amu-line-strong);
  background: var(--amu-surface);
  color: var(--amu-ink);
}

/* ---------------------------------------------------------------------------
 * 入力とボタン
 * ------------------------------------------------------------------------ */
.amu input[type="text"],
.amu input[type="url"],
.amu input[type="search"],
.amu input[type="email"],
.amu input[type="password"],
.amu input[type="file"],
.amu select,
.amu textarea {
  font-family: inherit;
  font-size: var(--amu-text-base);
  line-height: var(--amu-leading);
  color: var(--amu-ink);
  background: var(--amu-surface);
  border: 1px solid var(--amu-line-strong);
  border-radius: var(--amu-radius);
  padding: var(--amu-space-2) var(--amu-space-3);
  width: 100%;
  max-width: var(--amu-measure);
}

/* ⭐ 1行の入力欄だけ 40px を確保する。
   ⚠️⚠️ **`textarea` を含めてはいけない。** 🔴 実機で「聞く」が押せなくなったのは、
   原稿用の高さ指定が**全部の textarea に効いて**送信ボタンを画面外へ押し出したから
   （y=1057・表示領域 800px）。⭐ 高さは `rows` 属性に任せる。 */
.amu input[type="text"],
.amu input[type="url"],
.amu input[type="search"],
.amu input[type="email"],
.amu input[type="password"],
.amu input[type="file"],
.amu select {
  min-height: var(--amu-control-h);
}

/* ⭐ ファイル選択は素の見た目だと**その画面だけ OS の顔**になる。
   ⚠️ 隠して自前ボタンに差し替えることはしない（キーボード操作を壊しやすい）——
   枠と高さだけ他の入力欄に合わせる。 */
.amu input[type="file"] {
  padding: var(--amu-space-2);
  cursor: pointer;
}

.amu input::placeholder,
.amu textarea::placeholder { color: var(--amu-ink-faint); }

/* 🔴 実機で「聞く」が押せなくなった＝ここに `min-height: 18rem`（288px）と
   書いていたので、**3行のはずの質問欄まで 288px になり**、送信ボタンが
   画面の外（y=1057・表示領域 800px）へ押し出されていた。
   ⭐ *原稿を書く画面のために書いた規則*が、**全部の textarea に効いていた**——
   ⚠️ 要素セレクタは「その画面だけ」とは限らない。
   ⭐ 高さは **`rows` 属性**（テンプレートが画面ごとに決めている）に任せる。 */
.amu textarea { line-height: var(--amu-leading); }

/* ⭐ 長い文章を書く欄**だけ**を高くする（原稿の本文）。 */
.amu textarea[name="body"] { min-height: var(--amu-editor-h); }

/* ⭐ P7-40（E）: 貼り付ける Markdown の欄。
   ⚠️ **畳むのに `display: none` を使わない**——失敗して出したときに
   *選択できない*ことがあるうえ、読み上げからも消える。⭐ 高さ 0 に畳む。
   ⚠️⚠️ 詳細度を既存に合わせる（`.amu …`）。合わせないと **正しい規則が黙って負ける**
   ——エラーも警告も出ず、見た目でも分からない（P7-13 で実際に起きた形）。 */
.amu .amu__copy { margin-block: var(--amu-space-4); }

.amu .amu__copy--folded > label,
.amu .amu__copy--folded > textarea {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ⭐ 失敗を告げる行だけ、目に留まる強さにする（成功はふつうの `amu__note`）。 */
.amu .amu__copy [data-amu-copied="0"] { color: var(--amu-warn); }

/* ⚠️ 選択のチェックボックスも「触る的」。⭐ 24px を下回らせない。 */
.amu input[type="checkbox"] {
  width: var(--amu-target-min);
  height: var(--amu-target-min);
  accent-color: var(--amu-accent);
}

/* ⭐⭐ **主操作の地は「いちばん濃いインク」で、アクセントではない。**
   参考17枚すべてで主ボタンはその製品のブランド色ではなく near-black だった。
   ⚠️ アクセントを主ボタンに使うと、**アクセントが「押せる」という意味になり**、
   リンク・選択中・確定済みと**区別がつかなくなる**（DESIGN.md §1）。
   🔴 実際いまの画面では**いちばん彩度が高いのが「ログアウト」**だった。 */
/* 🔴🔴🔴 **同じ罠の4回目——今度は読めない文字を作った。**
   `.amu__button` を (0,1,0) で書いたので、`<a class="amu__button">` には
   下のほうの `.amu a { color: var(--amu-accent) }` (0,1,1) が勝ち、
   **濃いインクの地に Deep Teal の文字＝実測 2.08:1**（要 4.5:1）になっていた。
   ⚠️⚠️ *画面でいちばん押してほしいボタン*が、いちばん読めなかった。
   ⚠️ `p7_01` の判定器はこれを**違反として返す**のに、テストは緑だった——
   種は `setUp` が Source と Topic を作るので**ホームが空にならず**、
   空状態のボタンが**一度も描かれていなかった**から（→ 空状態を測る番人を足した）。 */
.amu button,
.amu .amu__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--amu-control-h);
  font-family: inherit;
  font-size: var(--amu-text-sm);
  line-height: var(--amu-leading-ui);
  color: var(--amu-surface);
  background: var(--amu-ink);
  border: 1px solid var(--amu-ink);
  border-radius: var(--amu-radius);
  padding: var(--amu-space-2) var(--amu-space-4);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--amu-motion), border-color var(--amu-motion),
              color var(--amu-motion);
}

.amu button:hover,
.amu .amu__button:hover { background: var(--amu-ink-soft); border-color: var(--amu-ink-soft); }

/* ⚠️⚠️ **種別（modifier）は、素の要素セレクタより詳細度を上げないと効かない。**
   `.amu button` は (0,1,1)、`.amu__button--ghost` は (0,1,0) なので、
   クラスを付けただけでは**地の色が上書きされず、見た目は主ボタンのまま**になる。
   🔴 このファイルの中だけで**同じ罠を3回**踏んだ（レールの色／中心操作の大きさ／
   ここ）——⭐ *書いたつもりの規則が効いていない*のは、**目で見ても分からない**。
   ⭐ だから `.amu` を1つ前に付けて (0,2,0) にし、**実測で確かめる**。 */

/* 併記される操作（戻る・別の入口）。⭐ 主操作は1画面に1つ。 */
.amu .amu__button--secondary {
  color: var(--amu-ink);
  background: var(--amu-surface);
  border-color: var(--amu-line-strong);
}
.amu .amu__button--secondary:hover {
  background: var(--amu-surface-sunk);
  border-color: var(--amu-line-strong);
  color: var(--amu-ink);
}

/* 行の中の小さな操作・退出。⚠️ 枠を持たないぶん、**押せる高さは必ず確保する**。 */
.amu .amu__button--ghost {
  color: var(--amu-ink-soft);
  background: transparent;
  border-color: transparent;
}
.amu .amu__button--ghost:hover {
  background: var(--amu-surface-sunk);
  border-color: transparent;
  color: var(--amu-ink);
}

/* ⭐ フォーカスは**必ず見える**（a11y）。⚠️ outline: none を書かない。 */
.amu a:focus-visible,
.amu button:focus-visible,
.amu input:focus-visible,
.amu summary:focus-visible,
.amu .amu__revision-body:focus-visible,
.amu textarea:focus-visible {
  outline: var(--amu-focus) solid var(--amu-accent);
  outline-offset: var(--amu-focus);
}

.amu__form { display: flex; flex-direction: column; gap: var(--amu-space-2);
             margin: var(--amu-space-4) 0; max-width: var(--amu-measure); }

/* 🔴 ラベルが 13px の薄い灰色だったので、**補助の文と見分けがつかなかった**。
   ⭐ 参考はどの画面もラベルが**本文と同じ濃さで 600**——*何を入れる欄か*は
   入力欄より先に読まれるので、そこを弱くすると読む順が壊れる。 */
.amu__form label {
  font-size: var(--amu-text-sm);
  font-weight: 600;
  line-height: var(--amu-leading-ui);
  color: var(--amu-ink);
}

/* ⭐ ラベル＋入力欄は**1つのかたまり**、ボタンは**別のかたまり**。
   ⚠️ 隙間が全部 8px だと、どこで意味が切れるのか読めない。 */
.amu__form button { align-self: flex-start; margin-top: var(--amu-space-2); }

.amu__inline-form { display: inline-flex; gap: var(--amu-space-2); align-items: center;
                    flex-wrap: wrap; }

/* ⭐ ボタンを横に並べる場所。⚠️ 主操作は左（読む順）。 */
.amu__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--amu-space-3);
  align-items: center;
  margin: var(--amu-space-4) 0;
}

.amu__pager {
  display: flex;
  gap: var(--amu-space-4);
  align-items: baseline;
  padding: var(--amu-space-4) 0;
  font-size: var(--amu-text-sm);
  color: var(--amu-ink-faint);
}

.amu .errorlist {
  list-style: none;
  margin: var(--amu-space-2) 0;
  padding: var(--amu-space-2) var(--amu-space-3);
  border-left: 3px solid var(--amu-warn);
  background: var(--amu-warn-soft);
  color: var(--amu-warn);
  font-size: var(--amu-text-sm);
}

.amu__messages { list-style: none; margin: 0 0 var(--amu-space-4); padding: 0; }
.amu__messages li {
  border: 1px solid var(--amu-line);
  border-left: 3px solid var(--amu-accent);
  border-radius: var(--amu-radius);
  background: var(--amu-surface);
  padding: var(--amu-space-2) var(--amu-space-4);
  margin-bottom: var(--amu-space-2);
  font-size: var(--amu-text-sm);
  max-width: var(--amu-measure);
}
.amu__messages li.error,
.amu__messages li.warning { border-left-color: var(--amu-warn); color: var(--amu-warn); }

.amu__cite { font-size: var(--amu-text-xs); color: var(--amu-ink-faint); }

.amu__skip {
  position: absolute;
  left: -9999px;
}
.amu__skip:focus {
  left: var(--amu-space-4);
  top: var(--amu-space-4);
  background: var(--amu-surface);
  padding: var(--amu-space-2) var(--amu-space-3);
  border: 1px solid var(--amu-accent);
  border-radius: var(--amu-radius);
  z-index: 10;
}

/* ---------------------------------------------------------------------------
 * 狭い画面 — ⭐ 左レールが畳まれ、1カラムになる（B案の約束）。
 * ⚠️ desktop-only completion は禁止事項。
 * ------------------------------------------------------------------------ */
@media (max-width: 60rem) {
  .amu {
    grid-template-columns: minmax(0, 1fr);
    /* 🔴 P10-10 で**実測して分かった**（見て気づいたのではない）。1列になると
       行は2つ（rail / main）になり、`min-height: 100vh` の余りが `align-content`
       の既定（`normal` ＝ grid では `stretch`）で **2行に等分**される——つまり
       *本文が短い画面ほど、上のナビ帯に大きな空白が生えて* 見出しが下がる。
       実測: 同じ tablet で rail の高さが **476px（ホーム）／312px（取り込む）**
       と、中身の 264px を大きく超えて画面ごとに違っていた。
       ⚠️ これは見た目だけの話ではない——**視覚の基準が本文の長さに揺さぶられる**
       ので、何かを1つ足すたびに無関係な画面の基準まで動く。
       ⭐ 行を中身に沿わせる。余りは下に残り、`--amu-bg` が最後まで塗る。 */
    align-content: start;
  }

  .amu__rail {
    border-right: none;
    border-bottom: 1px solid var(--amu-line);
    padding: var(--amu-space-4);
    gap: var(--amu-space-3);
    /* ⚠️ 1カラムではレールが**本文の上**に来るので、窓に貼りつけない。
       ⭐ 貼りつけたままだと、狭い画面で*本文より先に一画面ぶんのナビ*が居座る。 */
    position: static;
    height: auto;
    overflow-y: visible;
  }

  .amu__nav { flex-direction: row; flex-wrap: wrap; }
  /* ⚠️ 狭い画面でも**中心操作は隠さない**（横に並ぶ）。 */
  .amu__nav-main { margin-top: 0; }
  .amu__nav-sub { padding-left: 0; }
  .amu__rail-foot { margin-top: var(--amu-space-2); }
  .amu__main { padding: var(--amu-space-5) var(--amu-space-4) var(--amu-space-6); }
}

/* ---------------------------------------------------------------------------
 * Loading — ⭐ 押したことが**見える**。⚠️ アニメーションは付けない
 *    （`prefers-reduced-motion` を気にする必要がないほうが安全で、
 *      この製品には「待たせて楽しませる」理由が無い）。
 * ------------------------------------------------------------------------ */
/* 🔴 以前は地も文字も明るく、**白文字が地に溶けて 1.9:1** しか無かった
   （`:disabled` は WCAG のコントラスト要件の対象外なので**どの番人も赤くしない**——
   ⭐ *測られないところは、測られないというだけで正しくはならない*）。
   ⭐ 沈んだ面＋薄い文字にして 6.3:1 を確保しつつ、押せないことは形で分かる。 */
.amu button:disabled {
  background: var(--amu-surface-sunk);
  border-color: var(--amu-line-strong);
  color: var(--amu-ink-faint);
  cursor: progress;
}

.amu [aria-busy="true"] {
  opacity: 0.85;
}

/* ⭐ 押す前に「時間がかかる」と書いておく場所。 */
.amu__takes-time {
  font-size: var(--amu-text-xs);
  color: var(--amu-ink-faint);
}

/* ---------------------------------------------------------------------------
 * 根拠を確かめる（P10-08）
 * ⭐ ハイライトは**目立つが、読める**こと——前後を読むための画面なので、
 *    抜粋だけが浮き上がって周りが読めなくなっては本末転倒。
 * ------------------------------------------------------------------------ */
/* ⭐ モノトーンなので**反転**で示す（淡いグレーの下地は地に溶けて見えない）。
   ⚠️ `mark` は `.amu` の子孫なので (0,1,1)——**トークンの色が確実に効く**ように
   `.amu` を1つ前に付けておく（このファイルで6回踏んだ罠の予防）。 */
.amu mark {
  background: var(--amu-mark);
  color: var(--amu-surface);
  padding: 0.1em 0.15em;
  border-radius: var(--amu-radius);
}

/* 🔴 実測（`evidence`）＝原文が `.amu blockquote` の既定（14px・`ink-soft`）のままで、
   **この画面でいちばん読ませたいものが、いちばん読みにくかった**。
   ⚠️ `blockquote` は普通「本文の脇の引用」だが、**この画面では原文が主役**——
   ⭐ *その要素が何であるか*ではなく、*その画面で何を担っているか*で決める。 */
/* 🔴🔴🔴 **同じ罠の5回目——しかも今度は「直したつもりの修正」が効いていなかった。**
   `.amu-evidence__body` は (0,1,0) なので `.amu blockquote` (0,1,1) に負け、
   **書き足した `font-size` も `color` も1つも効いていなかった**（実測 14px・薄い色）。
   ⚠️⚠️ さらに怖いのは**変異バッテリが「番人が居ない」と読めた**こと——
   *効いていない行を消す変異*は**何も変えない**ので、
   「守られていない」と「そもそも動いていない」が**同じ顔で出る**。
   ⭐ 捕まえたのは、直後に書いた**性質を測る番人**だけだった。 */
.amu .amu-evidence__body {
  white-space: pre-wrap;
  max-width: var(--amu-measure);
  font-size: var(--amu-text-base);
  color: var(--amu-ink);
  line-height: var(--amu-leading);
}

/* ---------------------------------------------------------------------------
 * 動きを減らす設定を尊重する
 * ⚠️ **必須**（`09_ACCESSIBILITY_REQUIREMENTS.md` / DESIGN.md §5）。
 * ⭐ いま入っている動きは**色と地の 120ms だけ**だが、*後から誰かが動きを足した日に*
 *    この1本が既に在ることが効く——**規則は、破られる前に置く。**
 * ⚠️ ここは `!important` を使ってよい唯一の場所（利用者の設定が最後に勝つ）。
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .amu *,
  .amu *::before,
  .amu *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---------------------------------------------------------------------------
 * 入る前の1枚（P7-41）＝ログイン・パスワード再設定・登録。
 *
 * 🔴 実測（2026-08-12・本番）＝入る前の3画面が**別々の顔**をしていた
 *    （旧「AI編集部」／404／**Django サイト管理**）。
 * ⭐ ここはレールを持たない**1枚もの**。まだ入っていない人には
 *    「取り込む／聞く／作る」のどれも行き先が無いため。
 * ⚠️ 新しいトークンは足していない（`DESIGN.md` に無い値を勝手に作らない）。
 * ⚠️ 詳細度は既存に合わせる（`.amu …`）——合わせないと**正しい規則が黙って負ける**。
 * ------------------------------------------------------------------------ */
/* 🔴 実測（スクリーンショット）＝カードが**左端に細長く貼りついていた**。
   `.amu` は App shell のための **2列グリッド**（`--amu-rail` と本文）なので、
   入る前の1枚の `<main>` が *レールの列* に入っていた——⚠️ 幅も配置も
   こちらの指定より**親のグリッドが勝つ**。
   ⭐⭐ *コードを読んで正しそう* と *画面で見て正しい* は別
   （[[real-machine-check-finds-what-code-cannot]]）——**撮って初めて分かった**。
   ➡️ 入る前は列を持たない1枚に戻す。 */
.amu.amu--public {
  display: block;
  grid-template-columns: none;
  background: var(--amu-bg);
  color: var(--amu-ink);
  font-family: var(--amu-font);
  min-height: 100vh;
}

/* ⭐ 中央に寄せるが、**縦は上寄り**。⚠️ 完全中央にすると、入力欄が増える画面
   （登録）で下がはみ出し、送信ボタンが画面外へ出る——原稿欄で一度やった形。 */
.amu .amu__gate {
  display: flex;
  justify-content: center;
  padding: var(--amu-space-7) var(--amu-space-4) var(--amu-space-8);
}

.amu .amu__gate-card {
  width: 100%;
  max-width: 26rem;
  background: var(--amu-surface);
  border: 1px solid var(--amu-line);
  border-radius: var(--amu-radius-lg);
  padding: var(--amu-space-6);
}

/* ⭐ 名乗りは静かに。⚠️ 巨大見出しは禁止（`00_UI_REFRESH_MASTER.md`）。 */
.amu .amu__gate-head { margin-bottom: var(--amu-space-6); }

.amu .amu__gate-brand {
  margin: 0;
  font-size: var(--amu-text-lg);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--amu-ink);
}

.amu .amu__gate-tagline {
  margin: var(--amu-space-1) 0 0;
  font-size: var(--amu-text-sm);
  line-height: var(--amu-leading-ui);
  color: var(--amu-ink-soft);
}

/* ⚠️ 見出しは `--amu-ink`（白地に対して実測 AA を満たす側）。
   `test_a11y` が**本物のブラウザで**この h1 の比を測っている。 */
.amu .amu__gate-title {
  margin: 0 0 var(--amu-space-5);
  font-size: var(--amu-text-xl);
  line-height: var(--amu-leading-tight);
  color: var(--amu-ink);
}

.amu .amu__gate-field { margin: 0 0 var(--amu-space-4); }

.amu .amu__gate-field label {
  display: block;
  margin-bottom: var(--amu-space-1);
  font-size: var(--amu-text-sm);
  color: var(--amu-ink-soft);
}

/* ⚠️ この欄は幅いっぱいでよい（`--amu-measure` は本文の1行のための上限）。 */
.amu .amu__gate-card input[type="text"],
.amu .amu__gate-card input[type="email"],
.amu .amu__gate-card input[type="password"] { max-width: none; }

/* ⚠️ 誤りは**色だけで運ばない**（モノトーンなので色相が使えない）。
   ⭐ 左の罫と濃さで運ぶ＝この製品の状態表現の規則そのもの。 */
.amu .amu__gate-errors,
.amu .amu__gate-field-error {
  display: block;
  margin: var(--amu-space-2) 0 0;
  padding: var(--amu-space-2) var(--amu-space-3);
  border-left: 3px solid var(--amu-warn);
  background: var(--amu-warn-soft);
  font-size: var(--amu-text-sm);
  line-height: var(--amu-leading-ui);
  color: var(--amu-ink);
}

.amu .amu__gate-errors { list-style: none; }

/* ⭐ 補助説明は本文より静かに（罫線も地も足さない＝*説明はカードではない*）。 */
.amu .amu__gate-help {
  display: block;
  margin-top: var(--amu-space-1);
  font-size: var(--amu-text-xs);
  line-height: var(--amu-leading-ui);
  color: var(--amu-ink-faint);
}

.amu .amu__gate-aside {
  margin: var(--amu-space-4) 0 0;
  font-size: var(--amu-text-sm);
  line-height: var(--amu-leading-ui);
  color: var(--amu-ink-soft);
}

/* ⭐ P7-43: AI の提案の差分。
   ⚠️⚠️ **色だけで意味を運ばない**——参考17枚にならって彩度を持たない配色なので、
   *赤／緑* は最初から使えない。⭐ 左の罫と地の濃さ、そして**語**（足す／消す）で運ぶ
   （この製品の状態表現の規則そのもの）。
   ⚠️ 詳細度は既存に合わせる（`.amu …`）。 */
.amu .amu__diff {
  margin: var(--amu-space-3) 0;
  padding: 0;
  list-style: none;
  font-family: var(--amu-font-mono);
  font-size: var(--amu-text-sm);
  line-height: var(--amu-leading-ui);
  border: 1px solid var(--amu-line);
  border-radius: var(--amu-radius);
  overflow-x: auto;
}

.amu .amu__diff li {
  padding: var(--amu-space-1) var(--amu-space-3);
  border-left: 3px solid transparent;
  white-space: pre-wrap;
}

.amu .amu__diff--added {
  border-left-color: var(--amu-accent);
  background: var(--amu-accent-soft);
}

.amu .amu__diff--removed {
  border-left-color: var(--amu-line-strong);
  background: var(--amu-surface-sunk);
  text-decoration: line-through;
}

/* ⭐ 印は小さく、しかし**読み上げにも出る語**として置く。 */
.amu .amu__diff-mark {
  display: inline-block;
  min-width: 4rem;
  margin-right: var(--amu-space-2);
  font-size: var(--amu-text-xs);
  color: var(--amu-ink-soft);
}

/* ⭐ P7-45: 束ね先の提案。⚠️ **AI の出力だと分かる見た目**にする——
   *確かめた抜粋*は引用として、提案そのものは沈んだ面に置く。
   ⚠️ 新しいトークンは足していない。詳細度は既存に合わせる（`.amu …`）。 */
.amu .amu__suggestion {
  margin-top: var(--amu-space-4);
  padding: var(--amu-space-4);
  background: var(--amu-surface-sunk);
  border-left: 3px solid var(--amu-accent);
  border-radius: var(--amu-radius);
}

.amu .amu__quote {
  margin: var(--amu-space-2) 0 var(--amu-space-4);
  padding-left: var(--amu-space-4);
  border-left: 1px solid var(--amu-line-strong);
  color: var(--amu-ink);
  font-size: var(--amu-text-sm);
  line-height: var(--amu-leading);
}

/* ⭐ D-027（2026-09-26・本人の選択 A）: これまでの版は**その場で開いて読む**。
   🔴 画面は「版は読める」と約束していたのに、本文を出す所がどこにも無かった（P10-17）。
   ⭐ 開閉は `details`（ボタンも JS も要らない・閉じた状態が既定）。本文の面は
   §6「読み取り専用の値」と同じ作り＝**枠なし・沈んだ地**（枠を付けると入力欄に見える）。
   ⚠️ 長い本文でページが伸びきらないよう、面の高さは原稿の編集欄と同じ `--amu-editor-h` までで、
   中だけがスクロールする。⚠️ 新しいトークンは足していない。詳細度は既存に合わせる（`.amu …`）。 */
.amu .amu__revision { flex: 1; min-width: 0; }

.amu .amu__revision summary {
  min-height: var(--amu-target-min);
  cursor: pointer;
}

.amu .amu__revision-body {
  margin: var(--amu-space-3) 0 0;
  padding: var(--amu-space-3) var(--amu-space-4);
  max-width: var(--amu-measure);
  max-height: var(--amu-editor-h);
  overflow-y: auto;
  background: var(--amu-surface-sunk);
  border-radius: var(--amu-radius-lg);
  font-size: var(--amu-text-sm);
  line-height: var(--amu-leading);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ===========================================================================
 * 画面の刷新（D-030・2026-09-27・本人の選択＝C「タブで分ける」）
 *
 * 🔴 本人「もっと近代的に…要素が混雑しているので…わかりやすくつかいやすく」。
 *    13 画面を撮って測ると、どの節も同じ重さの白い箱（D-022）で縦に長く、
 *    主ボタンが 1 画面に 2〜3 個、説明の灰色の箱が多かった。
 * ⭐ 見出しの行（中身の名前）・タブ（1 つのタブに 1 つの仕事）・「…」・「詳しく」・
 *    箱なしの節。⚠️ 新しいトークンは足していない。詳細度は既存に合わせる（`.amu …`）。
 * ======================================================================== */

/* 本文の面は白（左のメニューは灰色の面のまま）。 */
.amu .amu__main { background: var(--amu-surface); }

.amu .amu__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--amu-space-4);
  margin: 0 0 var(--amu-space-4);
}
.amu .amu__head-main { min-width: 0; }
.amu .amu__head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--amu-space-2);
}
.amu .amu__crumbs {
  font-size: var(--amu-text-xs);
  color: var(--amu-ink-faint);
  margin: 0 0 var(--amu-space-1);
}
.amu .amu__crumbs a { color: var(--amu-ink-faint); }
/* ⚠️ 既存の `.amu h1` は下に罫と大きな余白を持つ。見出しの行ではタブが区切りを担う。 */
.amu .amu__title {
  margin: 0;
  padding: 0;
  border: 0;
  overflow-wrap: anywhere;
}
.amu .amu__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--amu-space-2);
  margin: var(--amu-space-2) 0 0;
}

/* ⭐ D-031（2026-09-28・本人）: タブは**切り替え式**＝沈んだ面の台の上で、今のタブだけ白く浮く。
   ⭐ 狭い画面では台ごと横にすべる（ページは横にスクロールしない・今のタブは JS が見える所へ）。
   ⚠️ 設計書の「台の内側 3px」はトークンだけの規則により `--amu-space-1`（4px）。 */
.amu .amu__tabs {
  display: flex;
  width: fit-content;
  max-width: 100%;
  gap: var(--amu-space-1);
  padding: var(--amu-space-1);
  background: var(--amu-surface-sunk);
  border-radius: var(--amu-radius-lg);
  margin: 0 0 var(--amu-space-5);
  overflow-x: auto;
}
.amu .amu__tab {
  display: inline-flex;
  align-items: center;
  min-height: var(--amu-nav-h);
  padding: 0 var(--amu-space-4);
  color: var(--amu-ink-soft);
  text-decoration: none;
  white-space: nowrap;
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: var(--amu-radius);
}
/* 🔴 独立レビュー（I-2）: タブの列は横にすべる枠＝**縦も切る枠**なので、外へ出る輪
   （2px＋2px）が上下左右で切られていた。⭐ タブだけ輪を内側に描く。 */
.amu .amu__tab:focus-visible { outline-offset: calc(-1 * var(--amu-focus)); }
.amu .amu__tab[aria-current="page"] {
  color: var(--amu-ink);
  font-weight: 600;
  background: var(--amu-surface);
  border-color: var(--amu-line);
}
.amu .amu__tab-badge {
  margin-left: var(--amu-space-1);
  font-size: var(--amu-text-xs);
  padding: 0 var(--amu-space-2);
  border-radius: var(--amu-radius-pill);
  background: var(--amu-line);
  color: var(--amu-ink-soft);
}

/* 「…」＝名前を直す・片付ける・コピー・書き出すなど、主でない操作。
   ⭐ `<details>`＝JS なしで開閉でき、キーボードで開ける。 */
.amu .amu__menu { position: relative; }
.amu .amu__menu > summary { list-style: none; }
.amu .amu__menu > summary::-webkit-details-marker { display: none; }
.amu .amu__menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + var(--amu-space-1));
  z-index: 2;
  width: max-content;
  max-width: var(--amu-measure);
  background: var(--amu-surface);
  border: 1px solid var(--amu-line);
  border-radius: var(--amu-radius-lg);
  /* ⭐ D-031: 影は浮いている物だけ＝ここだけ（`test_p6_01` が見張る）。 */
  box-shadow: var(--amu-shadow-pop);
  padding: var(--amu-space-2);
  display: flex;
  flex-direction: column;
  gap: var(--amu-space-2);
}

/* 🔴 狭い画面では見出しの行が折り返して「…」が左に来る。右にそろえた一覧は**画面の左外**へ
   開き、名前の欄とボタンが見えなかった（p7-60 の証跡で発見・左へのはみ出しは scrollWidth に出ない）。
   ⭐ 狭い画面では、一覧を見出しの行の幅いっぱいに、行のすぐ下へ開く。 */
@media (max-width: 60rem) {
  .amu .amu__head { position: relative; }
  .amu .amu__menu { position: static; }
  .amu .amu__menu-list {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
  }
}

/* 説明は 1 行の注。長い説明は「詳しく」を押したときだけ開く（文言は HTML に残る）。 */
.amu .amu__hint {
  font-size: var(--amu-text-sm);
  color: var(--amu-ink-faint);
  margin: var(--amu-space-2) 0;
  max-width: var(--amu-measure);
}
.amu .amu__fold > summary {
  cursor: pointer;
  font-size: var(--amu-text-sm);
  color: var(--amu-ink-faint);
  min-height: var(--amu-target-min);
}
.amu .amu__fold[open] > summary { margin-bottom: var(--amu-space-2); }

/* 箱なしの節（D-022 を置き換える）。区切りは見出しと余白（節の間 32px）。 */
.amu .amu__section { margin: 0 0 var(--amu-space-6); }
.amu .amu__section > h2 {
  margin: 0 0 var(--amu-space-3);
  /* ⭐ D-031: 16px の太字（600）＝見出しを軽くして本文を主役に（節は余白で区切る）。 */
  font-size: var(--amu-text-base);
}
.amu .amu__section > :last-child { margin-bottom: 0; }

/* 「まだ確かめていない」の注は細い帯で残す（見落とさせない・箱にはしない）。
   ⚠️ `.amu__unverified` の宣言した色（ink）がそのまま描かれること（test_p11_02）。 */
.amu .amu__hint.amu__unverified {
  color: var(--amu-ink);
  background: var(--amu-warn-soft);
  border-left: 3px solid var(--amu-ink);
  border-radius: 0 var(--amu-radius) var(--amu-radius) 0;
  padding: var(--amu-space-2) var(--amu-space-3);
}
.amu .amu__menu-list .amu__form { margin: 0; }