/* デザイントークン（CLAUDE.md §12.2）
 *
 * ⚠️ 色は **3つのRGB整数** で持つ。Tailwind CDN 側が
 *    rgb(var(--ink-rgb) / <alpha-value>) を参照しているので、
 *    ここに16進を直接書くと text-ink/80 のような指定が壊れる。
 *
 * ⚠️ --muted と --state-pending は §12.2 の値から**わずかに暗くしてある**。
 *    元の #6B7671 は paper 上で 4.42:1、#B07D2B は 3.39:1 で、
 *    本文に必要な 4.5:1 に届かない。§12.6 の品質フロア（WCAG AA）は
 *    省略不可なので、そちらを優先した。色相は変えていない。
 */
:root {
  --ink-rgb: 27 36 48;         /* #1B2430  paper上 14.69:1 */
  --paper-rgb: 247 248 246;    /* #F7F8F6  わずかに緑を含む紙 */
  --surface-rgb: 255 255 255;
  --rule-rgb: 216 220 214;     /* #D8DCD6 */
  --muted-rgb: 95 106 101;     /* #5F6A65  5.28:1（§12.2 は #6B7671＝4.42:1） */
  --accent-rgb: 47 93 80;      /* #2F5D50  深い松葉色。単一アクセント */

  /* 状態色は装飾ではなく意味を持つ。§12.3 以外で使わない */
  --state-sendable-rgb: 47 93 80;    /* #2F5D50 送信可 */
  --state-pending-rgb: 138 97 32;    /* #8A6120 確認待ち（§12.2 は #B07D2B＝3.39:1） */
  --state-blocked-rgb: 140 47 57;    /* #8C2F39 送信不可 */
  /* メールが取れないが電話は分かる＝テレアポで当たる。paper上 8.53:1。
     松葉色と同じ「暗く彩度の低い」系列に揃えてある（明るい青を置かない） */
  --state-phone-rgb: 44 74 110;      /* #2C4A6E */
  /* 郵送。到達手段の最後の砦だが、単価も速度も一番悪いので**静かな色**にする。
     新しい色相を足さず --muted と同値。5.28:1 */
  --state-postal-rgb: 95 106 101;    /* #5F6A65 */

  --ink: rgb(var(--ink-rgb));
  --paper: rgb(var(--paper-rgb));
  --surface: rgb(var(--surface-rgb));
  --rule: rgb(var(--rule-rgb));
  --muted: rgb(var(--muted-rgb));
  --accent: rgb(var(--accent-rgb));

  --radius: 6px;   /* 角丸は2種類まで */
  --radius-lg: 10px;
}

body { background: var(--paper); color: var(--ink); }

/* 数字。桁は縦に揃える（`tabular-nums`）が、**等幅書体は使わない**。
 *
 * ⚠️ 初版は Roboto Mono だった。等幅の数字は字面が角ばっていて、
 *    14〜15pxだと「カクカクして読みにくい」（実際にそう指摘された）。
 *    本文と同じ Noto Sans JP に戻し、桁揃えだけ OpenType の tnum で取る。
 *    ラテン数字の字幅はもともと揃っているので、台帳の縦の揃いは崩れない。
 * ⚠️ 等幅が要るのはコマンド名や環境変数名（`ENABLE_GMAIL_SEND`）だけ。
 *    そちらは `font-mono` を使う。数字に等幅を使わない。
 */
.num {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: 0.01em;
}

.h-display { font-family: "BIZ UDPGothic", "Noto Sans JP", sans-serif; }

/* 台帳の罫線。白いキャンバスでは罫線が輪郭の全て。薄くしすぎない */
.ledger { border-collapse: separate; border-spacing: 0; }
.ledger th, .ledger td { border-bottom: 1px solid var(--rule); }
.ledger thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--paper);
  border-bottom: 2px solid rgb(var(--ink-rgb) / 0.35);
  /* 見出しは灰色にしない。列の意味が読めないと数字の意味も読めない */
  color: rgb(var(--ink-rgb) / 0.78);
  font-size: 13px;
  letter-spacing: 0.02em;
}
/*
 * 1行おきの下地。30万件を横に目で追う台帳なので、行の切れ目が
 * 罫線だけだと隣の列とずれて読む。**濃さは罫線より薄く**（縞が主役になると
 * 数字が読みにくくなる）。
 */
.ledger tbody tr:nth-child(even) { background: var(--paper); }
.ledger tbody tr:hover { background: rgb(var(--accent-rgb) / 0.06); }
.ledger tbody tr:last-child td { border-bottom: none; }

/* 行の高さ。詰めすぎると読めず、空けすぎると1画面の件数が減る */
.ledger tbody :is(th, td) { padding-top: 10px; padding-bottom: 10px; }

/* 名前は行の主役。ここだけ一段大きくする */
.ledger .subject { font-size: 15.5px; font-weight: 500; line-height: 1.5; }
.ledger .subject-cell { min-width: 18rem; }
/* 連絡先は行の目的そのもの。狭いと2行に折れて読み違える */
.ledger .contact-cell { min-width: 14rem; }
.ledger .sub { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
/* 数字のセルは本文よりわずかに太く。細いと桁の並びが目で追えない */
.ledger td.num, .ledger th.num { font-weight: 500; }
/* 0 は「無い」であって強調するものではない。静かに置く */
.ledger .zero { color: var(--muted); font-weight: 400; }

/* キーボード操作を見失わせない（§12.6） */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* 並べ替えボタンは見出しいっぱいをクリック領域にする */
.sortbtn {
  display: flex; align-items: center; gap: 4px;
  white-space: nowrap;   /* 「都道府県」「Aランク」を途中で折り返さない */
  width: 100%; min-height: 44px; padding: 0 2px;
  background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit;
}
.sortbtn--num { justify-content: flex-end; }
.sortbtn__mark { color: var(--muted); font-size: 11px; }
th[aria-sort="ascending"] .sortbtn__mark::after { content: "▲"; }
th[aria-sort="descending"] .sortbtn__mark::after { content: "▼"; }
th[aria-sort="none"] .sortbtn__mark::after { content: "△"; opacity: .35; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* --- 送信可否チップ（§12.3 のシグネチャー要素）------------------------------
 *
 * このアプリで唯一「記憶に残るべき」要素。本質は「法的に送ってよい相手にしか
 * 送れない」ことなので、その状態が一目で読み違えようがないことが機能そのもの。
 *
 * ⚠️ 色だけで区別しない。必ずテキストラベルを併記する（色覚特性・印刷対応）。
 */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 2px 8px 2px 0; white-space: nowrap;
  font-size: 13.5px; font-weight: 600;
}
.chip::before {
  content: ""; display: block; width: 4px; height: 20px; border-radius: 1px;
  background: currentColor;
}
.chip--sendable { color: rgb(var(--state-sendable-rgb)); }
.chip--checking { color: rgb(var(--state-pending-rgb)); }
.chip--blocked  { color: rgb(var(--state-blocked-rgb)); }
.chip--phone    { color: rgb(var(--state-phone-rgb)); }
.chip--postal   { color: rgb(var(--state-postal-rgb)); }

/* 根拠はホバーとフォーカスの両方で出す（キーボードだけでも読める） */
.proof { position: relative; }
.proof__panel {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 20;
  min-width: 260px; max-width: 380px; padding: 10px 12px;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); box-shadow: 0 4px 12px rgb(27 36 48 / 0.10);
  font-size: 12.5px; line-height: 1.6; color: var(--ink);
  display: none;
}
.proof:hover .proof__panel,
.proof:focus-within .proof__panel { display: block; }

/* --- 送信状況（もう当たったか）-----------------------------------------------
 *
 * ⚠️ **到達手段のチップ（.chip）と別の形にする。** 同じ形にすると
 *    「送信可（まだ送っていない）」と「送信済み」が一目で混ざる。
 *    到達手段は左端の縦バー、送信状況は囲みのタグ。形で区別する。
 */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--rule); color: var(--muted);
  font-size: 13px; line-height: 1.6;
}
.tag svg { flex: none; }
/* 送信済みだけは塗る。「もう当たった」は一覧で最初に目に入るべき事実 */
.tag--sent {
  border-color: rgb(var(--accent-rgb) / 0.35);
  background: rgb(var(--accent-rgb) / 0.08);
  color: rgb(var(--accent-rgb)); font-weight: 600;
}
.tag--waiting, .tag--review {
  border-color: rgb(var(--state-pending-rgb) / 0.40);
  color: rgb(var(--state-pending-rgb));
}
.tag--failed {
  border-color: rgb(var(--state-blocked-rgb) / 0.45);
  color: rgb(var(--state-blocked-rgb)); font-weight: 600;
}

.pill {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  border: 1px solid var(--rule); font-size: 12.5px; line-height: 1.7;
}
.pill--a { border-color: rgb(var(--accent-rgb) / 0.45); color: rgb(var(--accent-rgb)); font-weight: 600; }

/* 絞り込み行。**ラベルは項目の上に置く**（プレースホルダをラベル代わりにしない） */
.filters select, .filters input {
  min-height: 42px; padding: 0 10px;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 15px;
}
.filters label {
  display: block; margin-bottom: 3px;
  font-size: 12.5px; color: rgb(var(--ink-rgb) / 0.72);
}

/* --- サイドナビ（§12.1 の固定サイドナビ）------------------------------------
 *
 * モバイルは左からの引き出し、lg以上は常時表示。
 * ⚠️ transform を Tailwind のクラスで書くと、data-[open] と lg: の
 *    どちらが後に出るかが生成順まかせになり、デスクトップで隠れることがある。
 *    ここで決め切って順序依存を消す。
 */
.sidenav { transform: translateX(-100%); transition: transform .18s ease-out; }
.sidenav[data-open="true"] { transform: translateX(0); }

@media (min-width: 1024px) {
  .sidenav {
    transform: none;
    height: 100vh;
    height: 100dvh;
  }
}

/* --- 通知（flash）------------------------------------------------------------
 *
 * ⚠️ **左端の帯（border-left: 4px）で意味を出さない。**
 *    以前は6つのテンプレートに同じ `border-l-4 border-blocked` を書き写していた。
 *    帯は行の左端にしか無いので、文が2行3行に折れると**意味の手掛かりが本文から
 *    離れていく**。しかも同じ形の帯をカードにも使い始めると、どれが警告で
 *    どれがただの飾りなのか読めなくなる。
 *    意味は「囲み＋淡い地＋アイコンの形」で出す。
 * ⚠️ 本文は --ink のまま。地を淡くしてあるので、文字まで色を付けると
 *    長い文が読みにくくなる。色を持つのはアイコンだけ（§12.3）。
 */
.notice {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  font-size: 14px; line-height: 1.7;
}
.notice svg { flex: none; margin-top: 4px; }
.notice--ok {
  border-color: rgb(var(--state-sendable-rgb) / 0.4);
  background: rgb(var(--state-sendable-rgb) / 0.07);
}
.notice--ok svg { color: rgb(var(--state-sendable-rgb)); }
.notice--error {
  border-color: rgb(var(--state-blocked-rgb) / 0.4);
  background: rgb(var(--state-blocked-rgb) / 0.07);
}
.notice--error svg { color: rgb(var(--state-blocked-rgb)); }