/* 営業担当者の画面（eigyo-user）のデザイントークン（§18）
 *
 * 管理画面（tokens.css・点検台帳）とは別の顔。「今日の作業が一目で終わる道具」。
 *   - 3層の面: shell（骨格）/ paper（キャンバス）/ paper-2（カード）。輪郭は罫線、影は1段だけ
 *   - 主色は1つ。意味色（ok / warn / danger / phone）は必ず文字を伴うバッジにしか使わない
 *   - 角丸は 12px と 999（ピル）の2つだけ。8pxグリッド。タップ領域は44px
 *   - 自動ダークモードは付けない（端末がダークなだけの利用者に「紺のカード＋水色ボタン」＝
 *     AI製ダッシュボードの典型が見える。mail-draft で実証済み）
 *
 * ⚠️ 色は **3つのRGB整数** で持つ。Tailwind CDN 側が rgb(var(--x-rgb) / <alpha-value>) を
 *    参照するので、16進を直書きすると text-ink/70 のような指定が壊れる。
 * ⚠️ 本文は muted でも白の上で 6.0:1、shell の上で 5.4:1（tests/test_user_tokens.py が見る）。
 */
:root {
  --shell-rgb: 243 244 246;      /* #F3F4F6 サイドバー・タブバーの地 */
  --paper-rgb: 249 250 251;      /* #F9FAFB キャンバス */
  --paper-2-rgb: 255 255 255;    /* カード */
  --ink-rgb: 17 24 39;           /* #111827 くっきりした黒 */
  --muted-rgb: 75 85 99;         /* #4B5563 白上 7.1:1 */
  --rule-rgb: 229 231 235;       /* #E5E7EB */

  /* ★ 主色は SaaS の青。淡くしない。白文字で 4.9:1 */
  --primary-rgb: 37 99 235;      /* #2563EB */
  --primary-soft-rgb: 219 234 254; /* #DBEAFE */
  --primary-deep-rgb: 29 78 216; /* #1D4ED8 hover */

  /* 意味色。文字は濃く、地は淡く。どれも白の上で 4.8:1 以上 */
  --ok-rgb: 21 128 61;           /* #15803D 送れる・送信済み・承認済み */
  --ok-soft-rgb: 220 252 231;    /* #DCFCE7 */
  --warn-rgb: 146 64 14;         /* #92400E 確認・承認待ち */
  --warn-soft-rgb: 254 243 199;  /* #FEF3C7 */
  --danger-rgb: 185 28 28;       /* #B91C1C 不可・止めてある */
  --danger-soft-rgb: 254 226 226;/* #FEE2E2 */
  --phone-rgb: 29 78 216;        /* #1D4ED8 電話で当たる */
  --phone-soft-rgb: 219 234 254; /* #DBEAFE */

  --ink: rgb(var(--ink-rgb));
  --muted: rgb(var(--muted-rgb));
  --rule: rgb(var(--rule-rgb));
  --shell: rgb(var(--shell-rgb));
  --paper: rgb(var(--paper-rgb));
  --paper-2: rgb(var(--paper-2-rgb));
  --primary: rgb(var(--primary-rgb));

  --radius: 12px;
  --radius-pill: 999px;
  --elevation: 0 1px 2px rgb(17 24 39 / 0.06), 0 1px 1px rgb(17 24 39 / 0.04);
  --sidebar-width: 232px;
  --tabbar-height: 62px;
}

html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper); color: var(--ink);
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 16px; line-height: 1.75;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
}

/* 数字は本文と同じ書体。桁は揃える（等幅は「カクカク」で不採用・§12.8） */
.num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }

/* 見出しは3段だけ。節見出しを本文より小さくしない */
.h-page { font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.h-section { font-size: 17px; font-weight: 700; line-height: 1.4; }
.label { font-size: 13px; font-weight: 500; color: var(--muted); }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 16px; z-index: 100; background: var(--paper-2); padding: 8px 12px; border-radius: var(--radius); }

:where(a, button, [tabindex], input, select, textarea):focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* --- 骨格 ------------------------------------------------------------------- */
.app { min-height: 100vh; min-height: 100dvh; display: flex; }
.app-main { flex: 1; min-width: 0; padding: 16px 16px calc(var(--tabbar-height) + 24px); }
.app-row { max-width: 1040px; margin: 0 auto; }
@media (min-width: 1024px) {
  .app-main { padding: 32px 40px 48px; }
}

/* サイドバー（lg以上）。現在地は太さと左の罫線で示す（色だけにしない） */
.sidebar {
  display: none; position: sticky; top: 0; height: 100vh; height: 100dvh;
  width: var(--sidebar-width); flex: none; flex-direction: column;
  background: var(--shell); border-right: 1px solid var(--rule);
}
@media (min-width: 1024px) { .sidebar { display: flex; } }
.sidebar__brand { padding: 20px 20px 12px; }
.sidebar__brand-name { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.sidebar__brand-sub { font-size: 12.5px; color: var(--muted); }
.sidebar__nav { flex: 1; padding: 8px 12px; }
.sidebar__item {
  display: flex; align-items: center; gap: 12px;
  min-height: 46px; padding: 0 12px; margin: 2px 0;
  border-radius: var(--radius);
  color: var(--muted); font-size: 15.5px; font-weight: 500;
  transition: background .15s ease-out, color .15s ease-out;
}
.sidebar__item:hover { background: var(--paper-2); color: var(--ink); }
/* 現在地は下地と太さで示す。
   ⚠️ 左端のアクセント帯（border-left）は使わない。 */
.sidebar__item[aria-current="page"] {
  background: rgb(var(--primary-soft-rgb)); color: rgb(var(--primary-deep-rgb)); font-weight: 700;
}
.sidebar__item svg { flex: none; }
.account { padding: 12px 20px 20px; border-top: 1px solid var(--rule); }
.account__name { font-size: 14px; font-weight: 500; }
.account__mail { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account__logout {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-size: 13.5px; color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer;
}
.account__logout:hover { color: var(--ink); }

/* モバイルの上の帯 */
.app-header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 0 16px;
  background: rgb(var(--paper-rgb) / 0.94); border-bottom: 1px solid var(--rule);
}
@media (min-width: 1024px) { .app-header { display: none; } }
.app-header__title { font-size: 16px; font-weight: 700; }
/* 画面名の隣に下タブと同じ絵を置く。絵と名前が結びつくと、タブの絵だけでも現在地が読める */
.app-header__icon { display: inline-flex; margin-right: -4px; color: rgb(var(--primary-deep-rgb)); }

/* モバイルの下タブ。4つ＋「その他」（5つまでの規則） */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--tabbar-height) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--paper-2); border-top: 1px solid var(--rule);
}
@media (min-width: 1024px) { .tabbar { display: none; } }
.tabbar__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 44px; color: var(--muted); font-size: 11px; font-weight: 500;
  border: 0; text-decoration: none; cursor: pointer; background: none;
}
/* ★ 現在地は「アイコンを青い錠剤で塗る」。
   ⚠️ 上端の細い罫線だけにしない（2026-09-06 実機で見えなかった）。
      線は帯の端に付くので、指で押す場所からいちばん遠いところが光る。
   ⚠️ 色だけに頼らない（§12.3）。塗り＝形の変化・白抜きのアイコン・
      太字のラベルの3つが同時に効くので、白黒でも現在地が分かる。 */
.tabbar__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 28px; max-width: 100%;
  border-radius: var(--radius-pill);
  transition: background .15s ease-out, color .15s ease-out;
}
.tabbar__item[aria-current] { color: rgb(var(--primary-deep-rgb)); font-weight: 700; }
.tabbar__item[aria-current] .tabbar__icon { background: var(--primary); color: #fff; }
.tabbar__item svg { flex: none; }
/* 「その他」は <details>。summary の見た目をタブに揃える */
.tabbar__more { position: relative; }
.tabbar__more > summary { list-style: none; height: 100%; }
.tabbar__more > summary::-webkit-details-marker { display: none; }
.sheet {
  position: absolute; right: 8px; bottom: calc(100% + 8px); min-width: 200px;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgb(27 36 48 / 0.12); padding: 6px; z-index: 50;
}
.sheet__item {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px;
  border-radius: 8px; font-size: 15px; color: var(--ink); text-decoration: none;
  background: none; border: 0; width: 100%; cursor: pointer; text-align: left;
}
.sheet__item:hover { background: var(--shell); }
/* 畳んだ先も現在地を塗る。⚠️ 太字だけにしない（開いた瞬間には比べる相手がいない） */
.sheet__item[aria-current="page"] {
  background: rgb(var(--primary-soft-rgb)); color: rgb(var(--primary-deep-rgb)); font-weight: 700;
}
.sheet__now { margin-left: auto; flex: none; }

/* --- 「今日」の帯（唯一の見せ場） ------------------------------------------ */
.figures {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 768px) { .figures { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat {
  display: block; padding: 14px 16px; background: var(--paper-2); text-decoration: none; color: inherit;
  min-height: 88px; transition: background .15s ease-out;
}
a.stat:hover { background: rgb(var(--primary-soft-rgb) / 0.6); }
.stat__label { display: block; font-size: 13px; color: var(--muted); }
.stat__value { display: block; font-size: 30px; font-weight: 700; line-height: 1.15; margin-top: 4px; letter-spacing: -0.01em; }
.stat__unit { font-size: 14px; font-weight: 500; color: var(--muted); margin-left: 2px; }
.stat--attention { background: rgb(var(--primary-soft-rgb) / 0.55); }
.stat--attention .stat__value { color: rgb(var(--primary-deep-rgb)); }
.stat--off .stat__value { color: rgb(var(--danger-rgb)); font-size: 20px; }

/* セグメント（ピルの切り替え） */
/* ⚠️ **画面の外にはみ出させない。** 商品が増えると横に伸びて、スマホで
      右端が切れていた（2026-09-06 実機）。横スクロールは**この帯の中だけ**に
      閉じ込める（本体を横スクロールさせない・§12.6） */
.segment {
  display: flex; padding: 3px; gap: 2px; max-width: 100%;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  background: var(--shell); border: 1px solid var(--rule); border-radius: var(--radius-pill);
}
.segment::-webkit-scrollbar { display: none; }
.segment__item {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill); font-size: 14.5px; font-weight: 500; color: var(--muted);
  text-decoration: none; white-space: nowrap; transition: background .15s ease-out, color .15s ease-out;
}
.segment__item:hover { color: var(--ink); }
.segment__item[aria-current="true"] { background: var(--primary); color: #fff; font-weight: 700; }
.segment__item[aria-current="true"] .segment__count { color: rgb(255 255 255 / 0.85); }
.segment__count { font-size: 12.5px; color: var(--muted); }

/* --- 面 ------------------------------------------------------------------- */
.panel {
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--elevation);
}
.panel__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 14px 16px 0; }
.panel__body { padding: 14px 16px 16px; }
.panel__note { font-size: 13.5px; color: var(--muted); }

/* 行リスト。表ではなく行。1行1相手 */
.rows { list-style: none; margin: 0; padding: 0; }
.row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start;
  padding: 12px 16px; border-top: 1px solid var(--rule);
}
.row:first-child { border-top: 0; }
.row:hover { background: rgb(var(--primary-soft-rgb) / 0.35); }
.row--done { color: var(--muted); }
.row__main { min-width: 0; }
.row__title { font-size: 16px; font-weight: 500; line-height: 1.4; }
.row__title a { color: inherit; text-decoration: none; }
.row__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.row__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.row__aside { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.row--selected { background: rgb(var(--primary-soft-rgb) / 0.55); }
/* 狭い幅ではバッジを名前の下に回す。右に置くと名前が細切れに折れる（375pxで実測） */
@media (max-width: 640px) {
  .row { grid-template-columns: auto minmax(0, 1fr); }
  .row__aside { grid-column: 2; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
}

/* チェックボックス。44px の当たり判定を label で確保する */
.check { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -10px -8px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--primary); cursor: pointer; }
.check--empty { width: 44px; }

/* --- バッジ・ピル ----------------------------------------------------------- */
/* ⚠️ 色だけで意味を出さない。必ず文字を伴う。塗るのは1行に1つまで */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px;
  border-radius: var(--radius-pill); font-size: 13px; font-weight: 500; line-height: 1.6;
  white-space: nowrap; border: 1px solid var(--rule); color: var(--muted); background: var(--paper-2);
}
.badge svg { flex: none; }
.badge--ok { color: rgb(var(--ok-rgb)); background: rgb(var(--ok-soft-rgb)); border-color: transparent; }
.badge--warn { color: rgb(var(--warn-rgb)); background: rgb(var(--warn-soft-rgb)); border-color: transparent; }
.badge--danger { color: rgb(var(--danger-rgb)); background: rgb(var(--danger-soft-rgb)); border-color: transparent; }
.badge--phone { color: rgb(var(--phone-rgb)); background: rgb(var(--phone-soft-rgb)); border-color: transparent; }
.badge--sent { color: #fff; background: rgb(var(--ok-rgb)); border-color: transparent; font-weight: 700; }
/* 当たれる手段のアイコン。丸い地に線のアイコン。3つ並んでも読める大きさ */
.channels { display: inline-flex; gap: 6px; }
.channel {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius-pill); text-decoration: none;
  border: 1px solid transparent;
}
.channel--mail { color: rgb(var(--ok-rgb)); background: rgb(var(--ok-soft-rgb)); }
.channel--phone { color: rgb(var(--phone-rgb)); background: rgb(var(--phone-soft-rgb)); }
.channel--phone:hover { background: rgb(var(--primary-rgb)); color: #fff; }
.channel--postal { color: var(--muted); background: var(--shell); border-color: var(--rule); }

.pill {
  display: inline-block; padding: 0 8px; border-radius: var(--radius-pill);
  border: 1px solid var(--rule); font-size: 12.5px; line-height: 1.7; color: var(--muted);
}
.pill--a { border-color: transparent; background: rgb(var(--primary-rgb)); color: #fff; font-weight: 700; }

/* 絞り込みのチップ（返信の読み分けなど） */
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px;
  border-radius: var(--radius-pill); border: 1px solid var(--rule); background: var(--paper-2);
  font-size: 14px; color: var(--ink); text-decoration: none;
}
.chip:hover { background: var(--shell); }
.chip[aria-current="true"] { border-color: var(--primary); background: var(--primary); color: #fff; font-weight: 700; }

/* --- ボタン ----------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 18px; border-radius: var(--radius);
  font-size: 15.5px; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap;
  border: 1px solid var(--rule); background: var(--paper-2); color: var(--ink);
  transition: background .15s ease-out, transform .1s ease-out, opacity .15s ease-out;
}
.btn:hover { background: var(--shell); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn--primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn--primary:hover { background: rgb(var(--primary-deep-rgb)); border-color: rgb(var(--primary-deep-rgb)); }
.btn--ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn--ghost:hover { color: var(--ink); background: var(--shell); }
/* 承認前に戻す・削除など。**主色と並べても主張しすぎない**縁取りだけの赤 */
.btn--danger { color: rgb(var(--danger-rgb)); border-color: rgb(var(--danger-rgb) / .45); }
.btn--danger:hover { background: rgb(var(--danger-rgb) / .08); border-color: rgb(var(--danger-rgb)); }
.btn--sm { min-height: 40px; padding: 0 14px; font-size: 14px; }
.btn--block { width: 100%; }

/* 一覧の下に貼り付く操作の帯。モバイルではタブバーの上に乗る */
.actionbar {
  position: sticky; bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom) + 8px); z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 12px; padding: 10px 12px;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: 0 6px 20px rgb(27 36 48 / 0.10);
}
@media (min-width: 1024px) { .actionbar { bottom: 16px; } }

/* --- 入力 ------------------------------------------------------------------- */
.field { display: block; }
.field > .label { display: block; margin-bottom: 4px; }
.field__hint { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.field input, .field select, .field textarea, .input {
  width: 100%; min-height: 46px; padding: 0 12px;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-2);
  color: var(--ink); font: inherit; font-size: 16px;
}
.field textarea { padding: 10px 12px; line-height: 1.7; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--primary); }
.field--inline { display: inline-block; width: auto; }
.field--inline input, .field--inline select { width: auto; }
/* 横並びの中で、余った幅をもらう欄。
   ⚠️ メールアドレスは長い。375px で `field--inline` にすると placeholder が切れて
      「どこ宛に飛ぶのか」が読めなくなる（実描画で確認した） */
.field--grow { flex: 1 1 260px; }
.required::after { content: " *"; color: rgb(var(--danger-rgb)); }
.choice { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; cursor: pointer; }
.choice input { width: 20px; height: 20px; accent-color: var(--primary); }
.form-grid { display: grid; gap: 14px; }
@media (min-width: 768px) { .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- 通知・空状態 ----------------------------------------------------------- */
.notice {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px;
  border-radius: var(--radius); border: 1px solid var(--rule); background: var(--paper-2);
  font-size: 15px;
}
.notice svg { flex: none; margin-top: 3px; }
.notice--ok { border-color: rgb(var(--ok-rgb) / 0.35); background: rgb(var(--ok-soft-rgb)); }
.notice--error { border-color: rgb(var(--danger-rgb) / 0.35); background: rgb(var(--danger-soft-rgb)); }
.notice--warn { border-color: rgb(var(--warn-rgb) / 0.35); background: rgb(var(--warn-soft-rgb)); }
.empty { padding: 32px 20px; text-align: center; }
.empty__title { font-size: 17px; font-weight: 700; }
.empty__text { margin-top: 6px; color: var(--muted); font-size: 15px; }

/* 折りたたみ（条件指定の一括作成など）。summary は必ず言葉を持つ */
.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary svg { transition: transform .15s ease-out; }
.fold[open] > summary svg { transform: rotate(90deg); }

/* 承認の行。会社名の横の「＞」で開き、本文をその場で読んで直す */
/* 承認の1行。**選ぶ／開く／1件だけ承認する** を兄弟に並べる。
   ⚠️ チェックボックスと承認ボタンを <summary> の中に入れないこと。
      Safari では summary の中のフォーム部品が押せず、チェックが入らないため
      一括のボタンが無効のままになる（2026-09-06 に実際に起きた）。 */
.draft-row {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr);
  align-items: start; gap: 0 4px;
  border-top: 1px solid var(--rule); padding-left: 12px;
}
.draft-row:first-child { border-top: 0; }
.draft-row > .check { margin: 12px 0 0; }
.draft-row > .draft { grid-column: 3; }
.draft-row > form { display: none; }

/* 1行ぶんの実行。開かなくても押せる。
   ⚠️ 破壊的ではない（承認しても送信はされない）のでここに置いてよい。
      送信の実行ボタンは行の中に置かない（§12.6）。 */
.row-go {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin-top: 10px;
  border: 1px solid var(--rule); border-radius: var(--radius-pill);
  background: var(--paper-2); color: var(--muted); cursor: pointer;
  transition: background .15s ease-out, color .15s ease-out, border-color .15s ease-out;
}
.row-go:hover { background: rgb(var(--primary-soft-rgb)); color: rgb(var(--primary-deep-rgb)); border-color: var(--primary); }
.row-go:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.draft { border-top: 0; }
.draft:first-child { border-top: 0; }
.draft > summary { list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 16px; cursor: pointer; }
.draft > summary::-webkit-details-marker { display: none; }
.draft > summary:hover { background: rgb(var(--primary-soft-rgb) / 0.35); }
.draft[open] > summary { background: rgb(var(--primary-soft-rgb) / 0.45); }
.draft__toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-pill); color: var(--muted); transition: transform .15s ease-out; }
.draft[open] .draft__toggle { transform: rotate(90deg); color: rgb(var(--primary-deep-rgb)); }
.draft__body { padding: 4px 16px 16px 58px; background: rgb(var(--paper-rgb)); border-top: 1px solid var(--rule); }
@media (max-width: 640px) { .draft__body { padding-left: 16px; } }
.draft__preview { white-space: pre-wrap; font-size: 15px; line-height: 1.8; padding: 12px 14px; background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius); }

.footer-pre { white-space: pre-line; font-size: 12.5px; color: var(--muted); }
.mail-pre { white-space: pre-wrap; font-size: 15px; line-height: 1.8; }

/* 小さな印。休止中・組み込みなど、行の意味を一言で添える。
   ⚠️ 色は付けず囲みだけで示す。色は状態（送信済み等）に取ってある */
.tag {
  display: inline-flex; align-items: center;
  padding: 1px 8px; border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em; line-height: 1.7;
  white-space: nowrap;
}
.tag--muted {
  background: var(--paper-2); color: var(--muted);
  border: 1px solid var(--rule);
}
/* 設定画面。**自分だけの設定か、全員共通か**を見出しの横で言う。
   ⚠️ 「あなただけ」を目立たせない。目を引くべきは**全員に及ぶほう**（事故はそちらで起きる） */
.tag--self { background: rgb(var(--primary-rgb) / .1); color: rgb(var(--primary-deep-rgb)); }
.tag--shared { background: rgb(var(--warn-soft-rgb)); color: rgb(var(--warn-rgb)); }

/* 入力欄の下に置く補足。ラベルより小さく、本文より静かに */
.hint { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }

/* 目には出さないが読み上げには要る文字（アイコンだけのボタンの名前など） */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 「送信済み」に添える商品名。バッジの中で一段静かに置く
   ⚠️ 商材が増えたので、どの商品を送ったのかが分からないと使えない（§17.2） */
.badge__what {
  margin-left: 4px; padding-left: 6px;
  border-left: 0;                 /* 左の帯は使わない（§12.9） */
  opacity: .82; font-weight: 500;
}
.badge__what::before { content: "／"; margin-right: 4px; opacity: .6; }

/* ============================================================
   ホーム（2026-09-06）
   ⚠️ 見せ場はアバターの吹き出し1箇所だけ。下の数字は静かに置く（§12.1）
   ============================================================ */

.greet {
  display: grid; gap: 16px; align-items: start;
  grid-template-columns: 1fr;
  padding: 18px; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper-2);
}
/* ⚠️ **2列にするのは 900px から**（2026-09-06 に実測して直した）。
      640px にしていたら、641〜900px で「アバター240px ＋ 潰れた本文」になり、
      質問の欄とボタン2つが横に押し出されて画面からはみ出していた。
      **アバターが 240px を占めるなら、本文側にも 500px 以上残る幅が要る。** */
@media (min-width: 900px) {
  .greet { grid-template-columns: 132px minmax(0, 1fr); }
  /* ホームのアバターは見せ場。ここだけ大きく出す（§12.1「大胆さは1箇所」） */
  .greet--big { grid-template-columns: 240px minmax(0, 1fr); gap: 24px; padding: 24px; }
  .greet--big .avatar-stage { max-width: 240px; }
}
/* 900px 未満は縦積み。アバターを上に置き、本文は幅いっぱい使う */
@media (max-width: 899px) {
  .greet--big { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px; }
  .greet--big .avatar-stage { max-width: min(70vw, 260px); width: min(70vw, 260px); }
  /* ⚠️ 入力とボタンを1行に並べない。並べると入力が潰れ、ボタンが押し出される */
  .ask { flex-wrap: wrap; }
  .ask .grow, .ask .field--grow { flex: 1 1 100%; }
  .ask__go { width: 100%; }
}

/* ⚠️ 枠の縦横比を動画（620x900）に合わせること。
      amane.js はキャンバスを枠いっぱいに広げるので、比が違うとキャラが伸びる */
.avatar-stage {
  width: 100%; max-width: 132px; aspect-ratio: 620 / 900;
  margin-inline: auto; cursor: pointer;
  border-radius: var(--radius); overflow: hidden;
}
.avatar-stage--empty {
  display: grid; place-items: center; cursor: default;
  background: rgb(var(--primary-soft-rgb) / 0.5); color: rgb(var(--primary-deep-rgb));
}
/* ⚠️ **動画がまだ無いときの空箱は小さくする。** 70vw の空欄が画面の頭を占めると、
   読みたい文が2画面目に行く。動画が入れば `--empty` が外れて本来の大きさに戻る。
   ⚠️ セレクタを弱くしないこと。`.greet--big .avatar-stage`（0,2,0）が後ろにあるので、
      同じ強さだと**あとに書いたほうが勝って 70vw のまま**になる。 */
.greet--big .avatar-stage.avatar-stage--empty { max-width: 132px; width: 132px; }
.avatar-stage__wait { opacity: .55; }

/* 吹き出し。左端の帯は使わない（§12.9）。三角のしっぽで向きを示す */
.bubble {
  position: relative; padding: 14px 16px; font-size: 15.5px; line-height: 1.75;
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: var(--radius);
}
/* しっぽは**アバターが左にあるときだけ**。縦積みのときに横向きの三角が出ると、
   何も無い方向を指すことになる。上の2列化と同じ 900px で切る */
@media (min-width: 900px) {
  .bubble::before, .bubble::after {
    content: ""; position: absolute; top: 22px; width: 0; height: 0;
    border-style: solid; border-width: 8px 10px 8px 0;
  }
  .bubble::before { left: -10px; border-color: transparent var(--rule) transparent transparent; }
  .bubble::after  { left: -9px;  border-color: transparent var(--paper-2) transparent transparent; }
}
.bubble__who { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.bubble--good { border-color: rgb(var(--primary-rgb) / 0.55); background: rgb(var(--primary-soft-rgb) / 0.45); }
.bubble--attention { border-color: rgb(var(--warn-rgb)); background: rgb(var(--warn-rgb) / 0.10); }

.ask { display: flex; gap: 8px; align-items: center; }
.ask .grow { flex: 1 1 auto; }
.answer {
  margin-top: 10px; padding: 12px 14px; font-size: 14.5px; line-height: 1.8;
  white-space: pre-wrap; background: var(--paper-2);
  border: 1px dashed var(--rule); border-radius: var(--radius);
}
.answer--bad { color: rgb(var(--danger-rgb)); border-color: rgb(var(--danger-rgb) / 0.45); }

/* 内訳の帯。色は帯と印にだけ置き、数字は地の色（§12.8） */
.meter { display: flex; height: 10px; border-radius: var(--radius-pill); overflow: hidden; background: var(--paper-2); }
.meter__part { display: block; }
.meter__part--good { background: var(--primary); }
.meter__part--normal { background: rgb(var(--primary-rgb) / 0.5); }
.meter__part--attention { background: rgb(var(--warn-rgb)); }
.meter__part--muted { background: var(--rule); }
.meter__part--bad { background: rgb(var(--danger-rgb)); }

.breakdown { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.breakdown__row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 2px; border-bottom: 1px solid var(--rule); font-size: 14px;
}
.breakdown__row:last-child { border-bottom: 0; }
.breakdown__label { flex: 1 1 auto; }
.breakdown__n { font-variant-numeric: tabular-nums; white-space: nowrap; }
.breakdown__n.zero { color: var(--muted); }
.dot { width: 9px; height: 9px; border-radius: var(--radius-pill); flex: none; }
.dot--good { background: var(--primary); }
.dot--normal { background: rgb(var(--primary-rgb) / 0.5); }
.dot--attention { background: rgb(var(--warn-rgb)); }
.dot--muted { background: var(--rule); }
.dot--bad { background: rgb(var(--danger-rgb)); }

/* 推移。⚠️ 動きが無かった日も0の柱で並べる（消すと「ずっと動いていた」に見える） */
.trend { display: flex; align-items: flex-end; gap: 4px; height: 120px; }
.trend__col {
  flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; gap: 3px; height: 100%; min-width: 0;
}
.trend__bar { width: 100%; min-height: 2px; background: rgb(var(--primary-rgb) / 0.55); border-radius: 2px 2px 0 0; }
.trend__dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--primary); }
.trend__day { font-size: 10px; color: var(--muted); white-space: nowrap; }

/* 返事が来る時間帯 */
.heat { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; }
.heat__cell {
  aspect-ratio: 1; border-radius: 2px;
  background: rgb(var(--primary-rgb) / calc(0.08 + var(--v, 0) * 0.82));
}
.heat__scale { display: flex; justify-content: space-between; margin-top: 5px; font-size: 10.5px; color: var(--muted); }

/* 承認画面の、その場で出す知らせ（画面を出し直さないため）
   ⚠️ `form=` 属性は Safari で当てにならない。チェックは本物のフォームの中に置き、
      実行は fetch で送っている（§19.3） */
.notice--inline {
  margin: 10px 16px 0; padding: 9px 12px; font-size: 14px;
  background: rgb(var(--primary-soft-rgb) / 0.6);
  border: 1px solid rgb(var(--primary-rgb) / 0.35);
  border-radius: var(--radius); color: rgb(var(--primary-deep-rgb));
}
.notice--inline.notice--bad {
  background: rgb(var(--danger-soft-rgb) / 0.6);
  border-color: rgb(var(--danger-rgb) / 0.35); color: rgb(var(--danger-rgb));
}

/* 終わった行はその場で消す。出し直すと開いていた行が閉じ、位置も先頭に戻る */
.draft-row { transition: opacity .2s ease-out, transform .2s ease-out; }
.draft-row--gone { opacity: 0; transform: translateX(12px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .draft-row { transition: none; }
  .draft-row--gone { opacity: 0; transform: none; }
}

/* ============================================================
   スマホ幅の手直し（2026-09-06・375px で実描画して直したもの）
   ⚠️ 直したのは**実際に見て壊れていたところだけ**。飾りは足していない
   ============================================================ */

@media (max-width: 640px) {
  /* ★ 実害だったところ: 「送信済み ／ 商品名 2026/09/06」が
        カードの右にはみ出していた。折り返す */
  .badge { white-space: normal; max-width: 100%; }
  .badge__what { word-break: break-word; }
  /* 日付は二の次。狭いところでは落とす（商品名のほうが要る） */
  .badge--sent .num { display: none; }


  /* 「今日」の帯は4つで200px 使っていた。数字を一段小さく */
  .stat { padding: 10px 12px; }
  .stat__value { font-size: 24px; }
  .stat__label { font-size: 12px; }

  /* ホーム: アバターは**見せ場**なので大きく出す（指示・2026-09-06）。
     ⚠️ 縦積みと `.ask` の折り返しは 900px のブロックで面倒を見ている。
        ここに書き写さないこと（2箇所で同じことを言うと片方が古くなる） */
  .greet--big { padding: 14px; }
  .greet--big .avatar-stage { max-width: 70vw; width: 70vw; }
  .bubble { padding: 12px 14px; font-size: 15px; }
  .ask input { font-size: 15px; }

  /* 承認: チェック・✓・開く矢印が3つ並んで、会社名が2行に折れていた。
     ⚠️ 開く矢印は消す（行のどこを押しても開くので、無くても困らない）。
        チェックと ✓ は残す（どちらも仕事に要る） */
  .draft-row { grid-template-columns: auto auto minmax(0, 1fr); gap: 0 2px; padding-left: 8px; }
  .draft > summary { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 12px 12px 4px; }
  .draft__toggle { display: none; }
  .row-go { width: 34px; height: 34px; margin-top: 11px; }
  .check { width: 38px; }

  /* 内訳の行を詰める */
  .breakdown__row { padding: 6px 2px; font-size: 13.5px; }
  .trend { height: 96px; }
  .trend__day { font-size: 9px; }
}

/* 375px の実測でここまで。⚠️ これ以上詰めると当たり判定が44pxを割る（§12.6） */

/* 言葉で相手を探す（§19.4）。答えの下に「見る」「担当にする」を出す */
.ask__go { display: flex; gap: 8px; flex-wrap: wrap; }
.answer__act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
@media (max-width: 640px) {
  .ask__go { width: 100%; }
  .ask__go .btn { flex: 1 1 auto; }
}


/* ============================================================
   絞り込み（2026-09-06 に作り直し）
   ⚠️ ラベルを選択肢の中に入れない（「業種: すべて」と書かない）。
      5つ並ぶと全部が「◯◯: すべて」に見えて、**どれが効いているか
      一目で分からない**。ラベルは欄の上、選択肢には値だけ。
   ⚠️ 効いている条件には印をつける。色が無いと「何で絞った結果か」が読めない。
   ============================================================ */

.filters {
  /* ⚠️ **`margin-top` を付けないこと。** 親が `items-center` のフレックスなので、
        上マージンの半分だけ**下にずれる**（12px で 6px ずれていた・2026-09-06 実測）。
        間隔は親の `gap` で取る。 */
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper-2);
}
/* 開いたときは残りいっぱいに広げる（閉じているときは中身の幅） */
.filters[open] { flex: 1 1 100%; }
.filters__head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  min-height: 50px; padding: 0 14px; cursor: pointer; list-style: none;
  font-size: 14.5px; font-weight: 700;
}
.filters__head::-webkit-details-marker { display: none; }
.filters__title { display: inline-flex; align-items: center; gap: 8px; }
.filters__title svg { color: var(--muted); transition: transform .15s ease-out; }
.filters[open] .filters__title svg { color: rgb(var(--primary-deep-rgb)); }
.filters__count {
  margin-left: auto; padding: 2px 10px; border-radius: var(--radius-pill);
  font-size: 12.5px; font-weight: 700;
  background: rgb(var(--primary-soft-rgb)); color: rgb(var(--primary-deep-rgb));
}
.filters__hint { margin-left: auto; font-size: 12.5px; font-weight: 400; color: var(--muted); }

.filters__body {
  display: grid; gap: 10px; padding: 4px 14px 14px;
  border-top: 1px solid var(--rule); margin-top: -1px; padding-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* 1つの絞り込み。ラベルは上、値は下 */
.pick { display: grid; gap: 4px; min-width: 0; }
.pick__label { font-size: 12px; font-weight: 500; color: var(--muted); }
.pick select, .pick input {
  width: 100%; min-height: 44px; font-size: 14.5px;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: #fff; color: var(--ink); padding: 0 12px;
}
.pick input { padding: 0 12px; }
.pick select:focus-visible, .pick input:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 1px;
}
/* ★ 効いている条件。**色だけに頼らず**、太字と枠でも示す（§12.3） */
.pick.is-on .pick__label { color: rgb(var(--primary-deep-rgb)); font-weight: 700; }
.pick.is-on select, .pick.is-on input {
  border-color: var(--primary); background: rgb(var(--primary-soft-rgb) / 0.45);
  font-weight: 700;
}
.pick--wide { grid-column: 1 / -1; }

.filters__act { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 640px) {
  .filters__body { grid-template-columns: 1fr 1fr; }
  .pick select, .pick input { font-size: 14px; padding: 0 10px; }
  .filters__act .btn { flex: 1 1 auto; }
}

@media (max-width: 640px) {
  /* 右に寄せない（狭いと宙に浮いて見える） */
  .segment.ml-auto, .fold.ml-auto { margin-left: 0; }
}

/* ============================================================
   返信を会話として見せる（2026-09-06・§19.5）
   ⚠️ どちらが書いたものかを、**寄せる向きと面の色の両方**で分ける。
      色だけで分けると、色覚特性や暗いところで見分けられない。
      自分と相手が同じ表示名になること（自分宛のテスト送信）があるので、
      名前だけに頼らせない。
   ============================================================ */

.row--open { display: block; padding: 0; }
.conv > summary {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px; cursor: pointer; list-style: none;
}
.conv > summary::-webkit-details-marker { display: none; }
.conv > summary:hover { background: rgb(var(--primary-soft-rgb) / 0.35); }
.conv[open] > summary { background: rgb(var(--primary-soft-rgb) / 0.45); }
.conv__main { display: grid; gap: 3px; min-width: 0; flex: 1 1 auto; }
.conv__aside { display: flex; align-items: center; gap: 8px; flex: none; }
.conv__toggle {
  display: inline-flex; color: var(--muted); transition: transform .15s ease-out;
}
.conv[open] .conv__toggle { transform: rotate(90deg); color: rgb(var(--primary-deep-rgb)); }

.conv__body { padding: 4px 16px 16px; border-top: 1px solid var(--rule); }
.conv__why { margin: 10px 0 12px; font-size: 13px; color: var(--muted); }
.conv__act { margin-top: 12px; }

.thread { display: flex; flex-direction: column; gap: 10px; }
/* 承認画面の中に置くとき。**返事の案より前に、何に対する返事かを見せる**（§20.8） */
.thread--inline {
  margin-bottom: 4px; padding: 12px; border-radius: var(--radius);
  background: var(--shell);
}
/* ⚠️ **やりとり全体に max-height を掛けないこと。** 掛けていたせいで、
   こちらが送った長い文が枠を埋め、**いちばん見たい相手の返事が枠の外に
   隠れていた**（実描画で発見・§20.10）。頭を押さえるのは
   **こちらが送ったほう**。相手の返事は必ず最後まで見えるようにする。 */
.thread--inline .msg--me .msg__body { max-height: 180px; overflow-y: auto; }
.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: 3px; }
.msg--me {
  margin-left: auto; background: rgb(var(--primary-soft-rgb));
  border-color: rgb(var(--primary-rgb) / 0.28); border-bottom-right-radius: 3px;
}
.msg__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 6px;
}
.msg__who {
  min-width: 0; font-size: 12.5px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msg--me .msg__who { color: rgb(var(--primary-deep-rgb)); }
.msg__at { flex: none; font-size: 11.5px; color: var(--muted); }
/* ⚠️ 改行をそのまま見せる。メール本文は改行に意味がある */
.msg__body { white-space: pre-wrap; font-size: 14.5px; line-height: 1.8; word-break: break-word; }

@media (max-width: 640px) {
  .msg { max-width: 94%; }
  .conv__aside { flex-direction: column; align-items: flex-end; gap: 4px; }
}

/* --- レーン（返信への返事 ／ 新規の営業）・§20.8 -----------------------------
   ⚠️ **セグメント（`.segment`）と同じ見た目にしない。** 選ぶ対象の粒が違う。
      セグメントは同じ箱の中の並べ替えで、レーンは**別の仕事**への行き先。
   ⚠️ 現在地は**面を塗る**（§19.6）。左端の帯は使わない。 */
.lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lane {
  display: flex; align-items: center; gap: 12px;
  min-height: 64px; padding: 10px 14px;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); text-decoration: none;
}
.lane:hover { background: var(--shell); }
.lane__icon {
  display: inline-flex; flex: none; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius-pill);
  background: var(--shell); color: var(--muted);
}
.lane__body { display: flex; min-width: 0; flex-direction: column; }
.lane__title { font-size: 15px; font-weight: 700; }
.lane__note { font-size: 12px; color: var(--muted); }
.lane__count { margin-left: auto; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lane[aria-current="true"] {
  border-color: var(--primary); background: var(--primary); color: #fff;
}
.lane[aria-current="true"] .lane__note { color: rgb(255 255 255 / .82); }
.lane[aria-current="true"] .lane__icon { background: rgb(255 255 255 / .18); color: #fff; }

@media (max-width: 640px) {
  /* 375px では2列に入らない。縦に積み、注記は残す（どちらの仕事か読めなくなる） */
  .lanes { grid-template-columns: 1fr; }
  .lane { min-height: 56px; }
}