/* ==========================================================================
Hawkeye 画面モックアップ（Rails 版）スタイル
- body 直下にアプリシェルを置き、各画面をフルスクリーンで表示する
- サイドバーのアイコンは href ではなく data-icon で引く（Rails のパスに依存させない）
- ドロップダウン・モーダル・トグル・スパークラインなど、Stimulus が動かす部品を持つ
デザイントークンは DESIGN.md「Verdana Health デザインシステム」に一致させている。
========================================================================== */
:root {
/* --- ブランドカラー（DESIGN.md「カラー」） --- */
/* ライトテーマ（既定）：モノトーン。アクセントは黒系。ダークは下の :root[data-theme="dark"] で反転 */
--c-primary: #16181F; /* プライマリ 黒系：主要アクション（黒ボタン＋白文字） */
--c-primary-hover: #2C313F;
--c-on-primary: #FFFFFF; /* primary 面に乗る文字（ライト=白 / ダーク=濃色） */
--c-slate: #64748B; /* セカンダリ スレート：補助テキスト・ボーダー */
--c-sage: #16181F; /* アクセント（本文側の図形・グラフ・トグル等）。変数名は据え置き */
--c-sage-text: #16181F; /* リンク等（黒） */
--c-sage-hover: #000000;
--c-sidebar-accent: #CDD2DD; /* 常時暗いサイドバー上のアクセント（アクティブ印・Pro タグ）。両テーマ共通の明色 */
--c-bg: #F9FAFB; /* ページ背景：中立の白ベース（ほぼ白） */
--c-surface: #FFFFFF; /* カード背景 */
--c-success: #22C55E;
--c-warning: #EAB308;
--c-error: #EF4444;
--c-info: #0EA5E9;
/* 面塗り（15% ティント）と、その上で十分な視認性を持つ前景色。
前景色はティント地（≒白）に対して 4.5:1 以上を満たす値に落としてある。 */
--c-success-bg: #22C55E15; --c-success-fg: #15803D; /* 5.0:1 */
--c-warning-bg: #EAB30815; --c-warning-fg: #A16207; /* 4.9:1 */
--c-error-bg: #EF444415; --c-error-fg: #DC2626; /* 4.8:1 */
--c-info-bg: #0EA5E915; --c-info-fg: #0369A1; /* 5.9:1 */
--c-line: #E2E8F0; /* 標準ボーダー */
--c-line-soft: #F1F5F9; /* リスト区切り線 */
--c-line-strong: #CBD5E1; /* 強めのボーダー（チェックボックス枠・トグル軌道・破線など） */
--c-text: #0F172A; /* 本文 */
--c-text-2: #475569; /* ヘルパー・説明文 */
/* 黒サイドバー面上の補助テキスト（ニュートラルな明色）。--c-slate は濃地では AA 未達のため別に持つ。 */
--c-on-navy-2: #AEB4C0; /* 黒サイド（#14161E）上で読める中立グレー */
/* フォーカスリング。面に応じて色を切り替える */
--c-focus: #16181F; /* 白地で黒のリング */
--c-focus-on-navy: #E2E8F0;
/* テーブル用のスレート淡色。ページ背景（--c-bg）を流用すると
ヘッダーが背景と同化し、白い行のホバーも判別できなくなるため別に持つ。 */
--c-table-head: #E8EDF4; /* 見出し行：ページ背景より 1 段暗い */
--c-row-hover: #EDF2F8; /* 行ホバー：白い行の上ではっきり分かる濃さ */
/* --- エレベーション（拡散・低不透明。Don't #9「重い影を使わない」） --- */
--sh-sm: 0 1px 3px rgba(15, 23, 42, .03);
--sh: 0 2px 6px rgba(15, 23, 42, .05);
--sh-md: 0 4px 16px rgba(15, 23, 42, .07);
--sh-lg: 0 8px 32px rgba(15, 23, 42, .10);
/* --- 角丸 --- */
--r-sm: 4px; /* バッジ・タグ */
--r: 8px; /* ボタン・カード・入力欄 */
--r-md: 12px; /* モーダル・ドロップダウンパネル */
--r-lg: 16px; /* 大型コンテナ */
--r-full: 9999px;
/* --- タイポグラフィ（ローカルにあれば指定フォント、なければ OS 標準を使う） --- */
--f-latin: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--f-jp: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
--f-head: "Plus Jakarta Sans", "Noto Sans JP", var(--f-latin), var(--f-jp);
--f-body: "DM Sans", "Noto Sans JP", var(--f-latin), var(--f-jp);
--f-mono: "Fira Code", "Noto Sans Mono CJK JP", ui-monospace, SFMono-Regular,
Menlo, Consolas, monospace;
/* --- wf-* はワイヤーフレーム由来の名前。クラス語彙を保つため据え置き --- */
--wf-border: var(--c-line);
--wf-bg: var(--c-bg);
--wf-box: var(--c-line-soft);
--wf-dark: var(--c-primary);
--wf-text: var(--c-text);
--wf-muted: var(--c-slate);
--wf-note: var(--c-info);
--wf-up: var(--c-success);
--wf-down: var(--c-error);
--wf-pending: var(--c-slate);
/* サイドバー（左メニュー）は黒＝近黒の中立色。コンテンツは白。
ライト/ダークとも左メニューは暗いままで、切り替わるのは主にコンテンツ側（白／暗色）。 */
--wf-sidebar: #14161E;
--wf-sidebar-active: rgba(255, 255, 255, .14);
}
/* ============================================================================
ダークテーマ（Indigo Night）。 で適用。
初期属性は shared/_theme_init の先読みスクリプトが OS 設定 / localStorage から立てる。
ライトの各トークンをここで上書きする（面・文字・境界を暗く、ブランドは淡インディゴへ）。
============================================================================ */
:root[data-theme="dark"] {
--c-primary: #E6E8F2; /* 主要アクション：白系（暗地・濃文字で潰れない） */
--c-primary-hover: #FFFFFF;
--c-on-primary: #16181F; /* 白系ボタンに乗る濃文字 */
--c-sage: #CDD2DD; /* アクセント（淡色） */
--c-sage-text: #CDD2DD; /* リンク（淡色） */
--c-sage-hover: #FFFFFF;
/* 硬さを抑えるため、背景は純黒でなく少し持ち上げ、文字は純白でなく柔らかいオフホワイトにする */
--c-bg: #191C24; /* ページ背景（近黒より一段明るいダークスレート） */
--c-surface: #20242F; /* カード・入力欄・モーダル */
--c-line: #2C3140; /* 標準ボーダー */
--c-line-soft: #242834; /* 区切り線 */
--c-line-strong: #3B4152; /* 強めのボーダー */
--c-text: #CDD2DD; /* 本文：純白を避けた柔らかいオフホワイト（背景に約 11:1） */
--c-text-2: #939AAC; /* ヘルパー・説明文 */
--c-slate: #868DA0; /* 補助・プレースホルダ */
--c-table-head: #242835; /* テーブル見出し行 */
--c-row-hover: #232732; /* 行ホバー */
--wf-sidebar: #14161E; /* サイドバー：近黒の中立色（ライトと同じ） */
--c-on-navy-2: #AEB4C0;
--c-focus: #CDD2DD; /* 暗地で見えるフォーカスリング（淡色） */
/* ステータス文字は暗地で読める明るい版に（面塗りは 15% ティントのまま） */
--c-success-fg: #4ADE80;
--c-warning-fg: #FCD34D;
--c-error-fg: #F87171;
--c-info-fg: #7DD3FC;
/* 影は暗地では黒を強めて存在感を出す */
--sh-sm: 0 1px 3px rgba(0, 0, 0, .30);
--sh: 0 2px 6px rgba(0, 0, 0, .38);
--sh-md: 0 4px 16px rgba(0, 0, 0, .48);
--sh-lg: 0 8px 32px rgba(0, 0, 0, .58);
}
/* サイドバーのテーマ切替トグル（両テーマとも暗いサイド地の上に載る） */
.wf-theme { padding: 2px 8px 6px; }
.wf-theme-toggle {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 9px 12px; border-radius: var(--r);
background: transparent; border: 0; cursor: pointer; text-align: left;
color: var(--c-on-navy-2); font-size: 13px; font-family: var(--f-body);
transition: background .15s, color .15s;
}
.wf-theme-toggle:hover { background: rgba(255, 255, 255, .06); color: #E2E8F0; }
.wf-theme-toggle:focus-visible { outline: 2px solid var(--c-focus-on-navy); outline-offset: -2px; }
.wf-theme-toggle .ic-emoji { font-size: 14px; width: 20px; text-align: center; }
* { box-sizing: border-box; margin: 0; padding: 0; }
/* フォーカスリング（全体既定）。ブランドの淡いリング（#065F4618 = 9%）は
緑のボタン上でほぼ見えないため、実線のアウトラインを基準にする。 */
:focus-visible {
outline: 2px solid var(--c-focus);
outline-offset: 2px;
border-radius: var(--r-sm);
}
/* スクリーンリーダー専用テキスト（色だけに意味を持たせないため） */
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* 本文へスキップ（キーボード利用者。フォーカス時のみ可視化） */
.skip-link {
position: absolute; left: 8px; top: -100px;
z-index: 100;
background: var(--c-surface);
color: var(--c-primary);
border: 1px solid var(--c-line);
border-radius: var(--r);
box-shadow: var(--sh-md);
padding: 10px 16px;
font-size: 14px; font-weight: 500;
text-decoration: none;
transition: top .15s;
}
.skip-link:focus-visible { top: 8px; color: var(--c-primary); }
/* モーション低減の要求に従う（アニメーションは一律で無効化） */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
body {
font-family: var(--f-body);
background: var(--c-bg);
color: var(--c-text); /* 本文は #0F172A。--c-text-2 はヘルパー用に明示指定する */
font-size: 16px; /* Body 16px / 1.75（和文のため行間を広く） */
font-weight: 500; /* 400 は Noto Sans JP で細く見えるため 500 を基準にする */
line-height: 1.75;
/* antialiased（グレースケール）は Mac で字画が細って見えるため使わない。
既定の subpixel/auto に任せて字画をしっかり描く。 */
text-rendering: optimizeLegibility;
}
/* 数値は等幅で桁を揃える（Do #10） */
.num, .wf-kv td.v, table td, .badge.method, code {
font-variant-numeric: tabular-nums;
}
/* 注釈（仕様メモ）— 情報カラーのコールアウト -------------------------------- */
.note {
font-size: 12px;
line-height: 1.6;
color: var(--c-info-fg);
background: var(--c-info-bg);
border: none;
border-left: 3px solid var(--c-info);
border-radius: 0 var(--r) var(--r) 0;
padding: 10px 14px;
margin-top: 16px;
}
/* プレースホルダ箱 --------------------------------------------------------- */
.box {
background: var(--c-bg);
border: 1px solid var(--c-line);
border-radius: var(--r);
display: flex;
align-items: center;
justify-content: center;
color: var(--c-slate);
text-align: center;
padding: 16px;
font-size: 14px;
line-height: 1.7;
}
.box.dashed {
border-style: dashed;
border-color: var(--c-line-strong);
background: transparent;
}
/* ボタン ------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 42px; /* md サイズ */
padding: 10px 22px;
border: 1px solid var(--c-primary);
background: var(--c-primary);
color: var(--c-on-primary);
border-radius: var(--r);
font-family: var(--f-body);
font-weight: 500;
font-size: 14px;
line-height: 1.4;
text-align: center;
text-decoration: none;
white-space: nowrap; /* ラベルは折り返さない（「テスト送/信」のような分断を防ぐ） */
cursor: pointer;
box-shadow: var(--sh-sm);
transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn:hover { background: var(--c-primary-hover); border-color: var(--c-primary-hover); color: var(--c-on-primary); }
.btn:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
/* Secondary */
.btn.ghost {
background: transparent;
color: var(--c-primary);
border-color: var(--c-primary);
box-shadow: none;
}
.btn.ghost:hover { background: #4F46E50A; border-color: var(--c-primary); color: var(--c-primary); }
/* Destructive */
.btn.danger {
background: var(--c-error);
border-color: var(--c-error);
color: #fff;
}
.btn.danger:hover { background: #DC2626; border-color: #DC2626; color: #fff; }
/* sm サイズ */
.btn.sm { min-height: 32px; padding: 6px 14px; font-size: 14px; }
.btn.block { display: flex; width: 100%; }
.btn[disabled], .btn.disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
/* モックアップで未接続のボタン。見た目は活きたボタンのまま、支援技術には
「利用不可」と伝え、ポインタでも「押せる」と約束しない（title で理由を出す）。
disabled にすると opacity が落ち、完成後の見た目を確認できなくなるため使わない。 */
.btn[aria-disabled="true"] { cursor: default; }
/* 暗い面（LP 最終 CTA）のボタン。インライン style で色を上書きすると
詳細度で :hover の背景色に勝ってしまい、ホバーの反応が消える。 */
.btn.on-dark { background: #fff; color: #16181F; border-color: #fff; }
.btn.on-dark:hover { background: #E6E8F2; color: #16181F; border-color: #E6E8F2; }
.btn.on-dark:focus-visible { outline-color: var(--c-focus-on-navy); }
/* button_to が生成する form をボタン並びで崩さない */
form.button_to { display: inline-block; }
/* ただし .btn.block を包むときは form も全幅にする。inline-block のままだと
ボタンの width: 100% が form の内容幅までしか効かず、隣に並ぶ
と幅が食い違う（招待承諾画面）。 */
form.button_to:has(> .btn.block) { display: block; width: 100%; }
/* 見出し ------------------------------------------------------------------- */
h1, h2, h3, h4 {
font-family: var(--f-head);
color: var(--c-text); /* 見出しは本文と同じ濃色。ブランド色は面・操作系に限定する */
letter-spacing: 0.01em;
}
h1 { font-size: 32px; font-weight: 700; line-height: 1.3; }
h2 { font-size: 24px; font-weight: 600; line-height: 1.4; }
h3 { font-size: 20px; font-weight: 600; line-height: 1.45; }
h4 { font-size: 16px; font-weight: 500; line-height: 1.5; }
h2.center { text-align: center; margin-bottom: 12px; }
.lead { margin-bottom: 32px; font-size: 18px; line-height: 1.8; color: var(--c-text-2); }
.lead.center { text-align: center; }
/* リンク：セージはインタラクティブ要素とポジティブな状態のみ（Do #1）。
テキストとしては --c-sage-text（AA 達成）を使う。 */
a { color: var(--c-sage-text); }
a:hover { color: var(--c-sage-hover); }
/* グリッド ----------------------------------------------------------------- */
.grid { display: grid; gap: 24px; }
.cols-2 { grid-template-columns: 1fr 1fr; }
.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
/* テーブル ----------------------------------------------------------------- */
/* border-collapse: collapse だと th の背景がテーブルの境界まで届かず、
角丸クリップとの隙間にテーブルの白背景が 1px 覗いてしまう。
separate + border-spacing: 0 なら罫線は各セルが持つので、角丸と背景が噛み合う。 */
table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 14px;
background: var(--c-surface);
border: 1px solid var(--c-line);
border-radius: var(--r);
overflow: hidden;
}
th, td {
border: none;
border-bottom: 1px solid var(--c-line-soft);
padding: 12px 16px;
text-align: center;
line-height: 1.7;
}
th {
background: var(--c-table-head);
font-family: var(--f-body);
font-size: 12px;
font-weight: 600;
color: var(--c-text-2);
letter-spacing: 0.03em;
border-bottom: 1px solid var(--c-line-strong);
}
tbody tr:last-child td { border-bottom: none; }
td { color: var(--c-text); }
td.y { font-weight: 500; color: var(--c-sage-text); }
/* 長い URL やメールアドレスは分割不能な 1 トークンなので、そのままだと表の
最小幅が親を超えて突き抜ける（横スクロール化は 768px 以下でしか効かない）。
途中で折ることで、どの幅でも表が親に収まる。 */
table:not(.wf-kv) td { overflow-wrap: anywhere; }
/* 見出しは折らない。折ると「最終チ／ェック」のように分断される。 */
table:not(.wf-kv) th { white-space: nowrap; }
/* URL や要約のような長い単一値。折り返すと行が 10 行を超えて一覧が読めなくなるので
1 行に省略する。全文は title 属性と、行リンク先の詳細画面で参照できる。 */
table.data-left td.truncate {
max-width: 34ch;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* アプリ内データテーブル（左寄せ・行ホバー） */
table.data-left th, table.data-left td { text-align: left; }
table.data-left th.right, table.data-left td.right { text-align: right; }
/* 操作列。 と button_to の