/* mail-draft のデザインシステム。
 *
 * 毎日開く業務アプリとして作る。スマホが主、PCが従。
 * 骨格は同じモノレポの travelmaker に合わせた:
 *   - スマホは下タブ、PC（1024px以上）は左サイドバー
 *   - カードで区切る
 * 色と角丸は業務ツール寄りに締めてある（濃紺・角丸10px）。
 * travelmaker のインディゴをそのまま使うと消費者向けアプリの見え方になり、
 * 白文字を乗せた際に 4.47:1 でAA未達でもあった。
 *
 * ⚠️ 色は必ず **RGBの三値** で持つこと。
 *    Tailwind 側が `rgb(var(--ink-rgb) / <alpha-value>)` として読むため、
 *    `#1E293B` のような形に戻すと `text-ink/80` のような不透明度つきの
 *    クラスが全部壊れ、ダークモードの切り替えも効かなくなる。
 *
 * ⚠️ コントラストは tests/test_tokens_contrast.py が明暗の両方で検査する。
 *    色を変えたらテストを走らせること。travelmaker の #6366F1 は
 *    白文字を乗せると 4.47:1 でAA未達なので、そのままは使っていない。
 */

:root {
  /* 面。3層で持つ（実在のSaaSと同じ構造）。
   *   shell   … 骨格（サイドバー・下タブ）。少し沈んだ面
   *   paper   … 本文のキャンバス。ほぼ白
   *   paper-2 … カード。純白
   *
   * ⚠️ 以前は「地を濃くしてカードを浮かせる」方式（差 1.22:1）だったが、
   *    画面全体が灰色がかって古い業務ソフトの見え方になっていた。
   *    いまは**白いキャンバスに罫線で輪郭を描く**方式。
   *    そのぶん .card / .rows の罫線を消さないこと。罫線が輪郭の全てになる。 */
  --shell-rgb: 241 243 247;
  --paper-rgb: 249 250 251;
  --paper-2-rgb: 255 255 255;

  /* 文字 */
  --ink-rgb: 28 33 43;         /* 本文・見出し。白地なので少し締める */
  --muted-rgb: 85 94 112;      /* 補助テキスト。paper上で 6.3:1 */

  /* 線。白いキャンバスでは罫線が輪郭の全て。薄くしないこと */
  --rule-rgb: 205 212 224;

  /* 主色。操作の色。業務ツールとして落ち着かせるため濃紺にする。
     travelmaker の #6366F1 は白文字で 4.47:1（AA未達）なので使わない。 */
  --primary-rgb: 27 58 98;         /* #1B3A62。白文字で 11.49:1 */
  --primary-soft-rgb: 232 238 247; /* 主色の淡い面。自分の発言・選択中の背景 */
  --on-primary-rgb: 255 255 255;

  /* 意味を持つ色 */
  /* 校正赤。【要確認】専用。
     #C2352B は 4.48:1 とAAをわずかに割った（tests/test_tokens_contrast.py が検出）。 */
  --proof-rgb: 178 45 36;      /* 地 5.2:1 / カード 6.3:1 */
  --settled-rgb: 43 88 87;     /* 送信済み・確定 */

  /* --------------------------------------------------------------------
   * 道しるべの5色。機能ごとに色を固定する（freee / SmartHR と同じ考え方）。
   * 初心者は文字を読む前に色と形で「どの話か」を見分ける。
   *
   * 使ってよいのは**アイコンチップの地と絵**だけ。本文・ボタン・枠に
   * 使わないこと（画面が数だけ塗られて、色の意味が消える）。
   * ⚠️ 色だけに頼らない。チップには必ずアイコンが入り、隣に語がある。
   * ⚠️ 赤系は使わない。赤は校正赤（【要確認】）だけの色。
   * -------------------------------------------------------------------- */
  --tint-mail-bg-rgb: 224 233 246;   /* メール＝藍。主色と同じ家系 */
  --tint-mail-fg-rgb: 30 64 124;
  --tint-cal-bg-rgb: 214 237 232;    /* 予定＝青緑 */
  --tint-cal-fg-rgb: 21 90 84;
  --tint-task-bg-rgb: 219 238 222;   /* タスク＝緑 */
  --tint-task-fg-rgb: 32 96 56;
  --tint-team-bg-rgb: 247 235 210;   /* 人＝琥珀。赤とは離す */
  --tint-team-fg-rgb: 128 86 16;
  --tint-proj-bg-rgb: 233 230 246;   /* プロジェクト＝菫 */
  --tint-proj-fg-rgb: 84 63 149;

  --ink: rgb(var(--ink-rgb));
  --shell: rgb(var(--shell-rgb));
  --paper: rgb(var(--paper-rgb));
  --paper-2: rgb(var(--paper-2-rgb));
  --rule: rgb(var(--rule-rgb));
  --muted: rgb(var(--muted-rgb));
  --primary: rgb(var(--primary-rgb));
  --primary-soft: rgb(var(--primary-soft-rgb));
  --on-primary: rgb(var(--on-primary-rgb));
  --proof: rgb(var(--proof-rgb));
  --settled: rgb(var(--settled-rgb));

  /* 角丸は2種類だけ。締めるほど業務ソフトの見え方になる */
  --radius: 10px;
  --radius-sm: 6px;

  /* 影は1段だけ。段階を増やすと画面が散らかる */
  --elevation: 0 1px 2px rgb(15 23 42 / 0.06), 0 1px 1px rgb(15 23 42 / 0.04);

  --tabbar-height: 62px;
  --sidebar-width: 224px;
}

/* --------------------------------------------------------------------------
 * ダークモード — **設定で選んだ人にだけ**適用する（既定はライト）。
 *
 * 端末の設定（prefers-color-scheme: dark）には**追随しない**。
 * 端末がダークなだけの利用者に「暗い紺のカード＋水色ボタン」＝
 * AI製ダッシュボードの典型が見えていて、そこが「AI感」の正体だった。
 * 日本の初心者向け業務SaaS（freee / SmartHR）と同じくライトを既定にし、
 * 好みで選んだ人にだけ暗色を出す（user_settings.theme・設定画面の「見た目」）。
 *
 * ⚠️ この節を @media で包み直さないこと。端末準拠に戻り、選択が無視される。
 *    （上の行の「prefers-color-scheme: dark」という文字列は
 *    tests/test_tokens_contrast.py が明・暗の分割印に使っている。消さない）
 * -------------------------------------------------------------------------- */
:root[data-theme="dark"] {
    /* 暗色でも3層。shell が最も沈み、カードが最も浮く */
    --shell-rgb: 10 12 16;
    --paper-rgb: 14 16 21;
    --paper-2-rgb: 28 32 42;
    --ink-rgb: 230 233 239;
    --muted-rgb: 157 166 183;
    --rule-rgb: 52 60 75;
    --primary-rgb: 156 192 238;      /* 暗い面では明るい側に振る（9.81:1） */
    --primary-soft-rgb: 29 39 55;
    --on-primary-rgb: 16 18 24;      /* 明るい主色の上に置く文字 */
    --proof-rgb: 242 133 124;
    --settled-rgb: 111 168 162;

    /* 道しるべの5色（暗色）。地を沈め、絵を明るくする */
    --tint-mail-bg-rgb: 27 39 60;
    --tint-mail-fg-rgb: 150 185 232;
    --tint-cal-bg-rgb: 19 45 42;
    --tint-cal-fg-rgb: 123 198 189;
    --tint-task-bg-rgb: 22 44 28;
    --tint-task-fg-rgb: 131 200 148;
    --tint-team-bg-rgb: 52 41 17;
    --tint-team-fg-rgb: 226 182 110;
    --tint-proj-bg-rgb: 39 34 63;
    --tint-proj-fg-rgb: 180 164 232;

    --elevation: 0 1px 2px rgb(0 0 0 / 0.3), 0 1px 3px rgb(0 0 0 / 0.24);
}

/* --------------------------------------------------------------------------
 * 土台
 * -------------------------------------------------------------------------- */
body {
  background: var(--paper);
  color: var(--ink);
  /* 日本語は英字より少し大きめ。行間は広めに取る（メールという疲れる対象を扱うため） */
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}

/* 見出し。書体は変えず、太さと字間で作る。
 * `palt` は和文の詰め。大きい文字ほど効く。 */
.font-display {
  font-feature-settings: "palt" 1;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
 * 見出しの段。
 *
 * ⚠️ **セクション見出しを本文より小さくしないこと。**（実際にそうなっていた）
 *    見出し15px・本文17px で階層が逆転し、5つの塊が全部同じ重さに見えて
 *    「どこを見ればいいのか分からない」と言われた。
 *
 * 段は3つだけ。28 / 17 / 12。間を詰めると段に見えなくなる。
 * -------------------------------------------------------------------------- */
.h-page {
  /* スマホは22px。26pxだと1文の見出しが「ませ ん。」のような
     みっともない位置で折り返す（実際にそうなった） */
  font-size: 22px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.02em;
  font-feature-settings: "palt" 1;
  overflow-wrap: anywhere;
}

@media (min-width: 640px) {
  .h-page {
    font-size: 28px;
    line-height: 1.35;
  }
}

.h-section {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.01em;
  font-feature-settings: "palt" 1;
}

.h-section svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
 * アイコンの線の太さ。
 *
 * Lucide の既定は stroke-width:2 で、小さく置くと線が潰れて
 * 「どこかで見たアイコン」に見える。1.75 に落とし、端を丸めると
 * 書体（IBM Plex Sans JP）の柔らかさと釣り合う。
 * ⚠️ 太さは1種類だけ。画面ごとに変えると、そこだけ借り物に見える。
 * （CSSの stroke-width は、Lucideが書き出す属性より優先される）
 * -------------------------------------------------------------------------- */
svg.lucide {
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
 * アイコンチップ — 見出しの頭に置く色つきの角丸。
 *
 * 初心者は文字を読む前に**色と形**で「どの話か」を見分ける。
 * メール＝藍 / 予定＝青緑 / タスク＝緑 / 人＝琥珀 / プロジェクト＝菫。
 * 全画面で同じ対応を守ること。1画面でも崩すと道しるべではなくなる。
 * -------------------------------------------------------------------------- */
.icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
}

.h-section .icon-chip svg,
.icon-chip svg {
  width: 15px;
  height: 15px;
}

.icon-chip--mail { background: rgb(var(--tint-mail-bg-rgb)); }
.icon-chip--mail svg { color: rgb(var(--tint-mail-fg-rgb)); }
.icon-chip--cal { background: rgb(var(--tint-cal-bg-rgb)); }
.icon-chip--cal svg { color: rgb(var(--tint-cal-fg-rgb)); }
.icon-chip--task { background: rgb(var(--tint-task-bg-rgb)); }
.icon-chip--task svg { color: rgb(var(--tint-task-fg-rgb)); }
.icon-chip--team { background: rgb(var(--tint-team-bg-rgb)); }
.icon-chip--team svg { color: rgb(var(--tint-team-fg-rgb)); }
.icon-chip--proj { background: rgb(var(--tint-proj-bg-rgb)); }
.icon-chip--proj svg { color: rgb(var(--tint-proj-fg-rgb)); }

/* 数字の帯に置く小さな絵。チップの地は敷かず、絵の色だけで対応づける */
.stat__icon svg {
  width: 15px;
  height: 15px;
}

.stat__icon--mail svg { color: rgb(var(--tint-mail-fg-rgb)); }
.stat__icon--task svg { color: rgb(var(--tint-task-fg-rgb)); }
.stat__icon--team svg { color: rgb(var(--tint-team-fg-rgb)); }
.stat__icon--proj svg { color: rgb(var(--tint-proj-fg-rgb)); }

/* 入力欄やデータの上に置くラベル。見出しではなく注記の段。
   ⚠️ 12pxまで下げないこと。この字が読めないと、何を入力する欄か分からない。 */
.section-label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
 * 塊の切り分け＝「機能1つ＝カード1枚」。
 *
 * ⚠️ 以前は主役と数字だけ箱で、下のセクションは裸の行だった。
 *    素材が3種類混ざって「まとまりがない・アプリ感がない」と言われた。
 *    **全部おなじカードにする。** 目立たせたい主役は .lead（左の太い罫）で
 *    1枚だけ区別する。カードの中にカードを入れないこと（面が三重になる）。
 *
 * ⚠️ .panel 同士の間隔は margin ではなく親の gap / mb-* で取ること。
 *    `+ 結合子で margin-top` を足すと、2列グリッドの右列だけが
 *    押し下げられて**隣どうしの見出しの高さがずれた**（実際に起きた）。
 *
 * ⚠️ クラス名を `.block` にしないこと。（実際に事故を起こした）
 *    Tailwind の display ユーティリティ `block` と衝突し、
 *    `class="block"` を使う**全ラベルにカードの枠が付いた**。
 * -------------------------------------------------------------------------- */
.panel {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--elevation);
  overflow: hidden;
}

/* 見出しの帯。中身とは罫線で分ける（.lead__head と同じ寸法） */
.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
}

/* カードの中の「何も無い」表示と補足行 */
.panel .empty {
  padding: 16px;
}

.panel__note {
  padding: 10px 16px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
}

/* 「すべて見る」など、見出しの右に置く小さな導線 */
/* ⚠️ 文字のリンクは字の高さしか無い（実測20px）。見た目を変えずに
      当たり判定だけ44pxへ。負のマージンで見出し行は高くしない */
.panel__more {
  flex-shrink: 0;
  display: inline-block;
  padding-block: 12px;
  margin-block: -12px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

/* 本文中の文字リンクにも同じ手当てを（プロジェクト名など） */
.tap-tall {
  display: inline-block;
  padding-block: 11px;
  margin-block: -11px;
}

.panel__more:hover {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
 * いちばん見てほしい塊（ホームのメール）。
 *
 * ここだけ面を1段持ち上げ、左に太い罫を立てる。
 * **色ではなく面と罫で主役を示す**（校正赤は【要確認】専用のため）。
 * -------------------------------------------------------------------------- */
.lead {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--elevation);
  overflow: hidden;
}

/* 主役であることは**見出しの面**で示す。
 * ⚠️ 左端の帯（border-left: 3px）に戻さないこと。あの様式は
 *    「カードの左に色の棒を立てる」だけで、意味を持たない飾りに見える。
 *    しかも文が折り返すほど、棒と本文の対応が読めなくなる。
 *    面なら見出しの語とぴったり同じ幅を占めるので、何が主役かがずれない。 */
.lead__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--primary-soft);
  border-bottom: 1px solid var(--rule);
}

/* --------------------------------------------------------------------------
 * 一覧の1行。
 *
 * 高さは44px以上（タップ領域）。行の中は
 *   主（件名・題名）→ 従（差出人・日付）→ 印
 * の3段で、主だけを本文の大きさにする。
 * -------------------------------------------------------------------------- */
.row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 16px;
  color: inherit;
  text-decoration: none;
  transition: background-color 120ms ease-out;
}

a.row:hover,
button.row:hover {
  background: var(--primary-soft);
}

/* 行末の矢印。ホバーで2pxだけ進む。「押すと開く」ことが手に伝わる。
 * transformのみ・120ms。reduced-motion では全体の打ち消しが効く。 */
.row .lucide-chevron-right {
  transition: transform 120ms ease-out;
}

a.row:hover .lucide-chevron-right {
  transform: translateX(2px);
}

.row__main {
  min-width: 0;
  flex: 1;
}

.row__title {
  display: block;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row__meta {
  display: block;
  margin-top: 2px;
  /* 補助でも13px。社長世代が読む字を12px台にしない */
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ⚠️ 読ませる文（一言のやり取りなど）は折り返す。一覧の1行と違って
      途中で切ると意味が伝わらない（.checklist__item と同じ考え方）。
      pre-wrap にしているのは、利用者が入れた改行を残すため。
      normal だと「ありがとうございます！\n取り掛かります」が1行に潰れる。 */
.row__meta--wrap {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow: visible;
}

/* 行を仕切る罫線。上下ではなく**間だけ**に引く（枠にしない） */
.rows > * + * {
  border-top: 1px solid var(--rule);
}

/* 何も無いときの1行。字だけ沈める（.panel の中では padding 16px が付く） */
.empty {
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

/* 読ませる文章の幅。1行が長いと目が戻る位置を見失う。
   全角で35文字前後に収まる。 */
.prose {
  max-width: 34em;
}

/* 数値（件数・時刻）を等幅にすると、更新時のガタつきが消える。
   これは装飾ではなく実用上の理由による選択。 */
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --------------------------------------------------------------------------
 * アプリの骨格
 *
 * スマホ: 上に細いヘッダ、下にタブ。
 * PC(1024px〜): 左にサイドバー、下タブは消す。
 * -------------------------------------------------------------------------- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 30;
  /* キャンバスと同じ色。ヘッダを別の面にすると層が1枚増えて見える */
  background: rgb(var(--paper-rgb) / 0.88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rule);
}

@media (prefers-reduced-transparency: reduce) {
  .app-header {
    background: var(--paper-2);
    backdrop-filter: none;
  }
}

/* 骨格の余白。**ここに Tailwind の px-4 / py-5 を重ねないこと。**
 * 同じ詳細度なので読み込み順しだいで負け、サイドバーぶんの余白が消える
 * （PCの全画面で本文がサイドバーの下に潜り込んでいた）。 */
.app-main {
  /* 下タブに隠れないよう、タブの高さぶんと端末の下端を空ける */
  padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom) + 24px);
}

/* 読み物としての幅。骨格の余白とは別の要素で持つ。 */
.app-row {
  margin-inline: auto;
  padding-inline: 16px;
}

@media (min-width: 640px) {
  .app-row {
    padding-inline: 24px;
  }
}

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  height: calc(var(--tabbar-height) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgb(var(--shell-rgb) / 0.94);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--rule);
}

@media (prefers-reduced-transparency: reduce) {
  .tabbar {
    background: var(--paper-2);
    backdrop-filter: none;
  }
}

.tabbar__item {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  /* タップ領域を確保する。文字だけ小さくして枠は縮めない */
  min-height: var(--tabbar-height);
  padding: 6px 1px;
  color: var(--muted);
  /* ⚠️ 11.5pxまで下げないこと。下タブは一番よく見るのに一番小さかった。
     ただし12.5pxにすると375pxで「プロジェクト」が2行に折れる（実際に折れた）。
     6文字が5つ並ぶ幅に収める上限が12px＋わずかな詰め。
     ⚠️ 折り返しは禁止。1文字だけ次の行に落ちると、ひどく素人くさい。 */
  font-size: 12px;
  letter-spacing: -0.03em;
  white-space: nowrap;
  line-height: 1.25;
  text-decoration: none;
  transition: color 120ms ease-out;
}

.tabbar__item[aria-current="page"] {
  color: var(--primary);
  font-weight: 600;
}

/* 現在地を色だけで示さない（色覚特性・暗所で消える）。上に印を立てる。 */
.tabbar__item[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 26px;
  height: 2px;
  margin-left: -13px;
  border-radius: 0 0 2px 2px;
  background: var(--primary);
}

.tabbar__item svg {
  width: 22px;
  height: 22px;
}

.sidebar {
  display: none;
}

@media (min-width: 1024px) {
  .tabbar {
    display: none;
  }

  .app-main {
    padding-bottom: 48px;
    padding-left: var(--sidebar-width);
  }

  .app-header {
    padding-left: var(--sidebar-width);
  }

  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    width: var(--sidebar-width);
    padding: 14px 10px;
    /* 骨格は沈んだ面。本文の白いキャンバスが1段浮いて見える */
    background: var(--shell);
    border-right: 1px solid var(--rule);
  }

  /* アプリのしるし。PWAのアイコンをそのまま使う（別の絵を増やさない） */
  .sidebar__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin-bottom: 10px;
    padding: 0 10px;
    text-decoration: none;
    color: var(--ink);
  }

  .sidebar__brand img {
    width: 26px;
    height: 26px;
    border-radius: 7px;
  }

  .sidebar__brand-name {
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 42px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: 14.5px;
    text-decoration: none;
    transition: background-color 120ms ease-out, color 120ms ease-out;
  }

  .sidebar__item:hover {
    background: var(--paper);
    color: var(--ink);
  }

  /* 現在地は**面を反転**させる。
   * ⚠️ 左の太い罫（::before の3px）に戻さないこと。細いうえ、
   *    以前は淡い面＋3pxの棒で、白い骨格との差がほとんど無かった。
   * ⚠️ 色だけに頼らない（色覚特性・暗所で色は消える）ための担保は、
   *    棒ではなく**面の反転そのもの**が持つ。白黒にしても濃い塊が1つ残る。 */
  .sidebar__item[aria-current="page"] {
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 600;
  }

  .sidebar__item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  /* --------------------------------------------------------------------
   * サイドバー最下段のアカウント欄。
   * 「誰でログインしているか」が常に見えること。ログアウトはここに置く
   * （ナビの項目に混ぜると、押し間違いが仕事の一覧の隣で起きる）。
   * -------------------------------------------------------------------- */
  .account {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 10px;
    border-top: 1px solid var(--rule);
  }

  .account__main {
    min-width: 0;
    flex: 1;
  }

  .account__name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .account__mail {
    display: block;
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .account__out {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    color: var(--muted);
    transition: background-color 120ms ease-out, color 120ms ease-out;
  }

  .account__out:hover {
    background: var(--paper);
    color: var(--ink);
  }

  .account__out svg {
    width: 16px;
    height: 16px;
  }
}

/* シェル（サイドバー・下タブ）を出さない画面。
 * ランディング・ログインと、はじめかたのウィザード。
 *
 * ⚠️ **上の 1024px ブロックより後ろに置くこと。**
 *    `.app-main` と詳細度が同じなので、前に置くと padding-left を
 *    打ち消せない。テンプレート側で Tailwind の `lg:pl-0` を足すのも
 *    同じ理由で駄目（CDNの読み込み順で負ける。実際に事故を起こした罠）。 */
.app-main--plain {
  padding-bottom: 48px;
}

@media (min-width: 1024px) {
  .app-main--plain {
    padding-left: 0;
  }
}

/* --------------------------------------------------------------------------
 * はじめかた。
 *
 * ウィザードの進み具合と、ホームに残るチェックリスト。
 *
 * ⚠️ 未完了の印に校正赤（--proof）を使わないこと。あれは【要確認】専用。
 *    未完了は色ではなく「輪郭だけの丸」と語で示す。
 *    「まだやっていない」は警告ではないので、赤で急かす対象ではない。
 * -------------------------------------------------------------------------- */
.wizard__steps {
  display: flex;
  gap: 4px;
}

/* 点ではなく短い棒にする。残りがどれだけあるかが幅で読める。 */
.wizard__step {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--rule);
}

.wizard__step--done {
  background: var(--primary);
}

.checklist__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 2px;
}

/* 済み・未済の印。大きさを変えないので、行の頭が揃ったまま状態だけ変わる。 */
.checklist__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 999px;
  border: 1.5px solid var(--rule);
  color: var(--muted);
}

.checklist__mark svg {
  width: 14px;
  height: 14px;
}

.checklist__item--done .checklist__mark {
  border-color: var(--settled);
  color: var(--settled);
}

/* 済んだ項目は沈める。残っているものだけが目に入るように。 */
.checklist__item--done .checklist__title {
  color: var(--muted);
}

/* ⚠️ 説明は折り返す。一覧の行と違って、ここは読ませる文なので
      「返信の1行目に、決めた文をそ…」と切ると意味が伝わらない。 */
.checklist__item .row__meta {
  white-space: normal;
  overflow: visible;
}

/* --------------------------------------------------------------------------
 * ヘッダのメニュー（スマホ）。
 *
 * 下タブに入らない画面（履歴・設定）への入口。<details> を使い、
 * 開閉と ESC はブラウザに任せる。外側クリックで閉じる処理だけ app.js。
 * -------------------------------------------------------------------------- */
.menu {
  position: relative;
}

.menu > summary {
  list-style: none;
}

.menu > summary::-webkit-details-marker,
.menu > summary::marker {
  display: none;
  content: "";
}

.menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 60;
  min-width: 11rem;
  padding: 6px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--elevation);
}

.menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 14px;
  text-decoration: none;
}

.menu__item:hover {
  background: var(--paper);
}

.menu__item[aria-current="page"] {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
}

.menu__item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
 * 折りたたみ（直す・この人の設定・この案件の設定）。
 *
 * 「読む行」と「直す道具」を分けるための部品。
 *
 * ⚠️ 行の操作を常時ぜんぶ開かないこと。（実際に「ボタンが多くて使いづらい」と
 *    言われた）タスク1行に チェック／担当▾／案件▾／期限／カレンダー／削除 の
 *    6つが常に出ていて、20件で120個。眺めたいだけの人にも毎回
 *    6つの選択肢が突きつけられていた。既定は閉じ、押したときだけ出す。
 *
 * <details> を使うのは、開閉状態の読み上げ・キーボード操作・ESC を
 * ブラウザに任せられるため。JSが無くても動く。
 *
 * ⚠️ summary には必ず「語」を入れること。三角や歯車だけにしない。
 *    絵の意味が伝わらない人がいる（年配・非IT層の決まり）。
 * -------------------------------------------------------------------------- */
.disclosure > summary {
  list-style: none;
}

.disclosure > summary::-webkit-details-marker,
.disclosure > summary::marker {
  display: none;
  content: "";
}

/* ⚠️ ここは、その行で唯一の編集手段になる。小さい版でも指の的は44px確保する
      （見た目の字と余白は .btn--sm のまま） */
.disclosure > summary.btn--sm {
  min-height: 44px;
}

/* 開いていることを語だけでなく向きでも示す。色には頼らない */
.disclosure__caret {
  transition: transform 120ms ease-out;
}

.disclosure[open] > summary .disclosure__caret {
  transform: rotate(180deg);
}

/*
  中身は一段沈ませる。面は増やさない（shell / paper / paper-2 の3層のうち
  paper を使い回す）。⚠️ カードの中にカードを入れない
*/
/*
  語だけの静かな折りたたみ（「時刻・重み・プロジェクトも決める」など）。
  ⚠️ 三角の印は消さないこと。ここでは枠のあるボタンにしていないので、
     押せることを示しているのが三角しかない（display を変えると marker が消える）。
  高さだけ44pxに揃える。.disclosure（枠つき）と大きさが2種類あると、
  同じ「折りたたみ」なのに押せる大きさが違うことになる。
*/
.fold > summary {
  min-height: 44px;
  padding-block: 10px;
  cursor: pointer;
}

.disclosure__body {
  margin-top: 10px;
  padding: 12px;
  background: var(--paper);
  border-radius: var(--radius-sm);
}

.disclosure__body > * + * {
  margin-top: 12px;
}

/* 取り消せない操作は、畳んだ先でも枠のあるボタンのまま。罫線で区切って離す */
.disclosure__danger {
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}

@media (prefers-reduced-motion: reduce) {
  .disclosure__caret {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
 * メールの状態タブ（送信したか／していないか）。
 *
 * 楽楽自動応対のような「状態＋件数」の帯。5つは排他で、足すと全件になる。
 *
 * ⚠️ **現在地を色だけで示さないこと。** 色覚特性・暗所で色は消える。
 *    下の太い罫（::after）と `aria-current` を必ず併用する。
 * ⚠️ **件数は0でも出す。** 出し入れすると数字の位置が毎回変わり、
 *    読む場所を探すことになる（数字の帯と同じ考え方）。
 * -------------------------------------------------------------------------- */
.state-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--rule);
}

.state-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}

.state-tab:hover {
  color: var(--ink);
}

.state-tab__count {
  min-width: 1.5em;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--rule);
  font-size: 12px;
  text-align: center;
}

.state-tab[aria-current="page"] {
  color: var(--primary);
  font-weight: 600;
}

/* 色だけに頼らないための印。タブの下に太い罫 */
.state-tab[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset: auto 8px -1px 8px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--primary);
}

.state-tab[aria-current="page"] .state-tab__count {
  background: var(--primary-soft);
  border-color: transparent;
  color: var(--primary);
}

/* --------------------------------------------------------------------------
 * 数字の帯。ダッシュボードの一段目。
 *
 * ⚠️ 4つを大きな箱で並べないこと。（以前そうしていた）
 *    ほとんど 0 と出る数字のために画面の一段まるごとを使っていて、
 *    その下の**本命（メールの下書き）が折り目の下に押し出されていた**。
 *    数字は縦の罫線で仕切った帯にして、1行に収める。
 *
 * ⚠️ 危ない数字を校正赤で塗らないこと。あの色は【要確認】専用。
 *    目を引かせたい数字は太さと語（「要フォロー」）で作る。
 * -------------------------------------------------------------------------- */
.figures {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-2);
  overflow: hidden;
}

@media (min-width: 640px) {
  .figures {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  color: inherit;
  text-decoration: none;
  transition: background-color 120ms ease-out;
}

/* 仕切りは境界にだけ引く。箱にすると数字より枠が目に入る。 */
.figures > .stat + .stat {
  border-left: 1px solid var(--rule);
}

@media (max-width: 639px) {
  .figures > .stat:nth-child(odd) {
    border-left: none;
  }
  .figures > .stat:nth-child(n + 3) {
    border-top: 1px solid var(--rule);
  }
}

a.stat:hover {
  background: var(--primary-soft);
}

.stat__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--muted);
}

.stat__value {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.stat__unit {
  margin-left: 2px;
  font-size: 13px;
  color: var(--muted);
}

/* 見に行くべき数字。色ではなくラベルの色と太さで示す */
.stat--attention .stat__label {
  color: var(--ink);
}

/* --------------------------------------------------------------------------
 * 予定の色えらび。
 *
 * Googleカレンダーの11色。利用者は色に自分の呼び名を付けていることがあるので、
 * **色そのものを主役**にし、名前は title 属性の手掛かりに留める。
 * ラジオの丸は消すが、押せる範囲は44px確保する（見た目の丸だけ小さくする）。
 * -------------------------------------------------------------------------- */
.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.swatch__dot {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgb(15 23 42 / 0.25);
  transition: transform 120ms ease-out;
}

/* 選択中は輪で示す。色だけで示すと、色覚特性や暗所で分からなくなる */
.swatch:has(input:checked) .swatch__dot {
  box-shadow: 0 0 0 3px var(--paper-2), 0 0 0 5px var(--ink);
}

.swatch:has(input:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* 「色なし」。斜線で「付けない」ことを示す */
.swatch__dot--none {
  background: var(--paper-2);
  background-image: linear-gradient(
    45deg,
    transparent 45%,
    var(--muted) 45%,
    var(--muted) 55%,
    transparent 55%
  );
}

/* 一覧に出す小さな色の丸 */
.color-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgb(15 23 42 / 0.25);
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
 * 社員のしるし。名前の頭文字を丸で囲むだけ。
 * 写真を扱うと管理が増えるうえ、10人前後では文字のほうが早く読める。
 * -------------------------------------------------------------------------- */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--primary-soft);
  border: 1px solid rgb(var(--primary-rgb) / 0.28);
  color: var(--primary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

.avatar--sm {
  width: 22px;
  height: 22px;
  font-size: 11px;
}

/* 本人のGoogleアカウントの写真。頭文字より先に、本人の顔が出る */
.avatar--img {
  overflow: hidden;
  padding: 0;
  background: var(--paper);
}

.avatar--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
 * カード。面を1段持ち上げて、関係のあるものをまとめる。
 * 影は1段だけ。段階を増やすと画面が散らかる。
 * -------------------------------------------------------------------------- */
.card {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--elevation);
}

.card--flat {
  box-shadow: none;
}

/* --------------------------------------------------------------------------
 * 通知（つながっていない・送信した・確認が要る）。`.card` に重ねて使う。
 *
 * ⚠️ **左端の帯（border-l-4）で意味を出さないこと。** 以前は8箇所すべてが
 *    `card border-l-4 border-l-proof` で、同じ棒を貼るだけの様式だった。
 *    棒はカードの左端にしか無いので、文が2行3行に折れるほど
 *    「何が赤いのか」が本文から離れていく。
 *    意味は**枠の色**と**アイコンの形**で出す。地は白のまま（この画面は
 *    「白いキャンバスに罫線で輪郭を描く」方式で、面を塗ると層が1枚増える）。
 * ⚠️ 赤を増やさない。塗るのは1pxの枠と18pxのアイコンだけ。
 * -------------------------------------------------------------------------- */
.notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.notice__body {
  min-width: 0;
  flex: 1;
}

.notice__icon {
  flex: none;
  margin-top: 2px;
}

/* 人の確認が要るもの。校正赤は【要確認】と同じ意味なのでここでだけ使う */
.notice--attention {
  border-color: rgb(var(--proof-rgb) / 0.45);
}

.notice--attention .notice__icon {
  color: var(--proof);
}

/* 済んだこと（送信しました） */
.notice--done {
  border-color: rgb(var(--settled-rgb) / 0.45);
}

.notice--done .notice__icon {
  color: var(--settled);
}

/* 押せるカード。一覧の行に使う */
a.card,
button.card {
  display: block;
  width: 100%;
  text-align: left;
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms ease-out, background-color 120ms ease-out;
}

a.card:hover,
button.card:hover {
  border-color: var(--primary);
}

/* --------------------------------------------------------------------------
 * スレッドの表示。
 *
 * どちらが書いたものかを **位置と面の色の両方** で分ける。
 * 色だけで区別すると、色覚特性や暗所で見分けられなくなる。
 * 自分＝右寄せ・主色の淡い面、相手＝左寄せ・通常のカード面。
 *
 * 校正赤は使わない（【要確認】専用のため）。
 * -------------------------------------------------------------------------- */
.msg {
  max-width: 88%;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.msg--them {
  margin-right: auto;
  background: var(--paper-2);
  /* 吹き出しの向きを角丸で示す */
  border-bottom-left-radius: 2px;
}

.msg--me {
  margin-left: auto;
  background: var(--primary-soft);
  border-color: rgb(var(--primary-rgb) / 0.28);
  border-bottom-right-radius: 2px;
}

.msg__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.msg__who {
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msg--me .msg__who {
  color: var(--primary);
}

@media (max-width: 480px) {
  .msg {
    max-width: 94%;
  }
}

/* --------------------------------------------------------------------------
 * ボタン。3種類だけ。増やさない。
 * タップ領域は44px以上（min-height）。
 * -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease-out, border-color 120ms ease-out,
    color 120ms ease-out, opacity 120ms ease-out;
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.btn:disabled:active {
  transform: none;
}

.btn svg {
  width: 18px;
  height: 18px;
}

.btn--primary {
  background: var(--primary);
  color: var(--on-primary);
  /* 上端の細い光。面がフラットなぶん、押せる面であることを1pxで示す */
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.09), var(--elevation);
}

.btn--primary:hover:not(:disabled) {
  filter: brightness(1.12);
}

.btn--secondary {
  background: var(--paper-2);
  border-color: var(--rule);
  color: var(--ink);
  box-shadow: var(--elevation);
}

.btn--secondary:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
}

.btn--ghost {
  background: transparent;
  color: var(--muted);
}

/* ⚠️ 透明なままにしないこと。押せる場所だと気づけない人がいる。
      触れたら面が出る（＝ここは押せる）ことを必ず見せる。 */
.btn--ghost:hover:not(:disabled) {
  background: var(--primary-soft);
  color: var(--primary);
}

/*
  ⚠️ 見た目36pxのまま、指の的だけ44pxにする。
     小さいボタンは行の中に置くためのもので、見た目を44pxにすると
     一覧が間延びする。透明の当たり判定を上下に4pxずつ足して44pxを満たす。
     （隣り合うボタンの間隔は gap-2 = 8px なので、判定は重ならない）
*/
.btn--sm {
  position: relative;
  min-height: 36px;
  padding: 0 12px;
  font-size: 13px;
}

.btn--sm::after {
  content: "";
  position: absolute;
  inset: -4px 0;
}

/* 折りたたみの入口はすでに44pxあるので広げない */
.disclosure > summary.btn--sm::after {
  content: none;
}

/* --------------------------------------------------------------------------
 * 入力
 * -------------------------------------------------------------------------- */
.field {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}

/* ⚠️ 1行の入力は高さを**固定**する。（実際に事故を起こした）
 *    min-height だけだと、日付入力（input[type=date]）がブラウザ固有の
 *    内部部品ぶんだけ膨らみ、**期限の枠だけ1つ大きい**画面になる。
 *    複数行が要る textarea だけ auto に戻す。 */
input.field,
select.field {
  height: 48px;
  padding-top: 0;
  padding-bottom: 0;
  appearance: none;
  -webkit-appearance: none;
}

textarea.field {
  height: auto;
}

/* selectの矢印。appearance:none で消えるぶん、自前で1つだけ描く */
select.field {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}

/* 日付入力の中身もほかの欄と同じ字の大きさ・高さに揃える */
input.field::-webkit-datetime-edit {
  font-size: 16px;
  line-height: 46px;
  padding: 0;
}

input.field::-webkit-calendar-picker-indicator {
  opacity: 0.55;
}

/* 入力欄の並び。
 *
 * ⚠️ 固定の列数（grid-cols-3 / 4）にしないこと。
 *    項目の数は文脈で変わる（社員が0名なら「担当」欄は出ない）ので、
 *    列数を決め打つと**空の列が残って幅がちぐはぐに見える**。
 *    auto-fit なら、何個並んでも行がぴったり埋まる。
 * 高さは .field が揃えるので、ここでは幅と間隔だけを持つ。
 */
.form-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  align-items: end;
}

.form-grid > label {
  display: block;
  min-width: 0;
}

/* 並びの中に置いたボタンは中身ぶんの幅にする。
   列いっぱいに伸ばすと、入力欄より目立って主役が入れ替わる。 */
.form-grid > .btn {
  justify-self: start;
}

/* ⚠️ 日付と時刻を1つの枠に押し込まないこと。
      どちらの入力も中身ぶんの最小幅を持っているので、1列に2つ入れると
      日付側が数十pxまで潰れて読めなくなる（実際にそうなった）。
      「期限」と「何時まで」で**別の項目**として隣に並べる。

   日付・時刻の入力は、Safari/Chrome で高さが本文書体に引きずられる。
   高さ48px固定＋行の高さで中身を上下中央に置く（並べたときの段差を消す）。 */
.field::-webkit-date-and-time-value {
  text-align: left;
  line-height: 46px;
}

.field::placeholder {
  color: var(--muted);
}

/* --------------------------------------------------------------------------
 * チェックボックス。
 * ブラウザ既定のままだと画面ごとに顔が違い、そこだけ借り物に見える。
 *
 * ⚠️ **大きさと指の的は別物。**（実際に測って気づいた）
 *    20pxのままでは「最低44px」の決まりを満たさない。しかもタスクの完了
 *    チェックは**このアプリで一番よく押す物**で、1画面に20個並ぶ。
 *    見た目は22pxに留め、当たり判定は .check で44pxまで広げる。
 * -------------------------------------------------------------------------- */
input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

/*
  チェックボックスの当たり判定。負のマージンで見た目の位置は動かさない。
  （周りを <label class="min-h-11"> で囲ってある箇所は、そちらが44pxを持つ）
*/
.check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  /*
    ⚠️ 上下左右とも負のマージンで打ち消すこと。左だけだと**題名が右へ13pxずれる**
       （実際にそうなった）。上下は -10px で、チェックの中心が題名の1行目の
       中心に来る。⚠️ ここに Tailwind の mt-* を重ねないこと。詳細度が同じで
       読み込み順に負け、チェックだけ下にずれる（これも実際に起きた）。
  */
  margin: -10px -11px;
  flex-shrink: 0;
}

.field:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgb(var(--primary-rgb) / 0.16);
}

/* キーボード操作で必ず見えること（§10.9） */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
 * 設定画面。
 *
 * 入力欄を1枚ずつカードにすると、面が増えて「どこまでが一区切りか」が
 * 読めなくなる。カードは意味のまとまり（節）にだけ使い、
 * 中は罫線と余白で分ける。
 * -------------------------------------------------------------------------- */
.setting {
  padding: 18px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.setting__field {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}

.setting__field:first-of-type {
  border-top: none;
}

/* 選択肢。ラジオの丸を消し、枠と面で選択中を示す（タップ領域も広くなる）。 */
.choice {
  display: block;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 120ms ease-out, background-color 120ms ease-out;
}

.choice:hover {
  border-color: var(--primary);
}

.choice__title {
  display: block;
  font-size: 14px;
  font-weight: 600;
}

.choice__note {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

.choice:has(input:checked) {
  background: var(--primary-soft);
  border-color: var(--primary);
}

.choice:has(input:checked) .choice__title {
  color: var(--primary);
}

/* キーボード操作で現在地が見えること */
.choice:has(input:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
 * 印
 * -------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  white-space: nowrap;
}

/* 絞り込みの切替に使う印。押せるので、タップ領域を確保する。 */
a.chip {
  min-height: 34px;
  padding: 0 12px;
  text-decoration: none;
  transition: border-color 120ms ease-out, color 120ms ease-out,
    background-color 120ms ease-out;
}

a.chip:hover {
  border-color: var(--primary);
  color: var(--primary);
}

a.chip[aria-current="page"] {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}

/*
  押せるチップ（担当の絞り込み）は44px。
  ⚠️ .chip は「要確認」「編集済み」のような**押せない印**にも使っている。
     そちらまで大きくすると、印が押せる物に見える。a にだけ効かせること。
*/
a.chip {
  min-height: 44px;
  padding-block: 4px;
}

.chip--settled {
  border-color: var(--settled);
  color: var(--settled);
}

.chip--proof {
  border-color: var(--proof);
  color: var(--proof);
}

/* --------------------------------------------------------------------------
 * 校正赤 — このアプリで唯一「意味を持つ色」
 *
 * 【要確認】＝人間の確認が必要な箇所にだけ使う。
 * ボタンの装飾や汎用アクセントには絶対に使わない（仕様書 §17-5）。
 * 主色をインディゴにしたのは、赤を意味専用に空けておくためでもある。
 * -------------------------------------------------------------------------- */
.proof-mark {
  background: transparent;
  color: var(--proof);
  border-bottom: 1.5px solid var(--proof);
  padding-bottom: 1px;
  font-weight: 500;
}

/* 赤入れ表示。校正記号としての取り消し線と下線。 */
.redline-del {
  color: var(--proof);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  opacity: 0.75;
}

.redline-add {
  color: var(--proof);
  border-bottom: 1.5px solid var(--proof);
}

/* --------------------------------------------------------------------------
 * 横スクロールに逃がす並び（下タブ・日付の選択肢など）。
 * 折り返すと押しにくくなるため。
 * -------------------------------------------------------------------------- */
.nav-scroll {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.nav-scroll::-webkit-scrollbar {
  display: none;
}

/* --------------------------------------------------------------------------
 * モーション — 動くのは2箇所だけ（§10.7）
 *   1. 下書き一覧の初回ロード時、カードが上から順に現れる
 *   2. 送信完了時、カードが静かに畳まれて消える
 * ホバーは色の変化のみ。拡大・浮き上がりはさせない。
 * -------------------------------------------------------------------------- */
@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.card-in {
  animation: card-in 160ms ease-out both;
  /* stagger は 40ms 刻み。合計200ms以内に収めるため上限を160msで止める。 */
  animation-delay: calc(min(var(--i, 0) * 40, 160) * 1ms);
}

@keyframes card-out {
  to {
    opacity: 0;
    max-height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
  }
}

.card-out {
  overflow: hidden;
  animation: card-out 220ms ease-in forwards;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }

  .btn:active {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
 * 元メールの本文。等幅ではなく本文書体のまま、改行だけ活かす。
 * -------------------------------------------------------------------------- */
.mail-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  /* 読む対象なので詰めない。UIの行間(1.7)より広く取る */
  line-height: 1.85;
}

/* --------------------------------------------------------------------------
 * 進捗バー。
 *
 * --proof（校正赤）は「人間の確認が必要な箇所」専用なので、遅延を赤で
 * 塗ることはしない。代わりに予定位置に目盛りを立てて、実績との差を
 * そのまま見せる。色を増やすより情報量が多く、規約とも衝突しない。
 * -------------------------------------------------------------------------- */
.bar {
  position: relative;
  height: 8px;
  background: var(--rule);
  border-radius: 999px;
  overflow: hidden;
}

.bar__fill {
  height: 100%;
  background: var(--primary);
  border-radius: 999px;
}

.bar__fill--done {
  background: var(--settled);
}

/* 予定進捗の位置。バーの上に立てる細い目盛り。 */
.bar__tick {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--paper-2);
  border-left: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
}

/* --------------------------------------------------------------------------
 * タスク。完了したものは沈ませる。
 * -------------------------------------------------------------------------- */
.task--done .task__title {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* --------------------------------------------------------------------------
 * 送信の確認ダイアログ。
 * ネイティブの <dialog> を使い、フォーカストラップとESCはブラウザに任せる。
 * -------------------------------------------------------------------------- */
.confirm-dialog {
  width: min(32rem, calc(100vw - 2rem));
  padding: 24px;
  background: var(--paper-2);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.confirm-dialog::backdrop {
  background: rgb(15 23 42 / 0.5);
}

/* 編集用テキストエリア。 */
.editor {
  white-space: pre-wrap;
  line-height: 1.9;
  resize: vertical;
  min-height: 16rem;
  font-size: 15px;
}

/* --------------------------------------------------------------------------
 * 切替（完成形 / 赤入れ）。
 * 丸いピルは消費者向けアプリの見え方になるので、枠付きの角ばった切替にする。
 * -------------------------------------------------------------------------- */
.segmented {
  display: inline-flex;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.segmented__item {
  min-height: 34px;
  padding: 0 14px;
  background: var(--paper-2);
  border: none;
  border-right: 1px solid var(--rule);
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 120ms ease-out, color 120ms ease-out;
}

.segmented__item:last-child {
  border-right: none;
}

.segmented__item[aria-selected="true"] {
  background: var(--primary);
  color: var(--on-primary);
}