/* 決算ウォッチのUI。モダンなカード型デザインシステム。
   方針:
     - カードは .card 基底(大きめ角丸 + 多層シャドウ)に集約し、個別クラスは差分だけ持つ
     - アクセントはインディゴ→スカイのグラデーション。プライマリ操作と「今日」に使う
     - ヘッダーは sticky + 背景ブラーのガラス質感
     - 数値は必ず tabular-nums で桁を揃える
     - セマンティックカラーは日本流(上振れ = 赤 --pos / 下振れ = 緑 --neg)。
       エラー・破壊的操作は --danger(アンバー)で、業績の赤緑とは意味を分ける
     - 文字サイズ・行間・文字色の濃度は必ずトークンを介す(生値・生 color-mix を書かない)
     - ダークモードは prefers-color-scheme でトークンだけ差し替える */

:root {
  color-scheme: light dark;

  --color-bg: #f3f5fa;
  --color-surface: #ffffff;
  --color-text: #1b1e28;
  --color-accent: #5a6cff;
  --color-accent-sky: #38bdf8;
  --gradient-accent: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-sky) 100%);

  /* 文字色の濃度スケール。soft は本文寄りの弱調、muted は補足、subtle は最弱(フッター等)。 */
  --color-text-soft: color-mix(in srgb, var(--color-text) 75%, transparent);
  --color-text-muted: color-mix(in srgb, var(--color-text) 55%, transparent);
  --color-text-subtle: color-mix(in srgb, var(--color-text) 50%, transparent);

  /* 枠線は3段階: divider(区切りの標準)> border-row(行区切り)> border(カード輪郭)。 */
  --color-divider: color-mix(in srgb, #1b1e28 10%, transparent);
  --color-border-row: color-mix(in srgb, var(--color-text) 7%, transparent);
  --color-border: color-mix(in srgb, var(--color-text) 6%, transparent);

  /* ホバーの薄塗り。row は行(アクセント寄り)、ui は中立な操作要素。 */
  --color-hover-row: color-mix(in srgb, var(--color-accent) 4%, transparent);
  --color-hover-ui: color-mix(in srgb, var(--color-text) 5%, transparent);
  --color-hover-accent: color-mix(in srgb, var(--color-accent) 10%, transparent);

  /* 同じ明度スケールで作った濃淡。役割が違っても同じ番号なら見た目の重さが揃う。 */
  --color-neutral-100: #f3f4f8;
  --color-neutral-200: #e9ebf1;
  --color-neutral-300: #d8dbe4;
  --color-neutral-400: #b8bcc9;
  --color-neutral-500: #969bab;
  --color-neutral-600: #787d8c;
  --color-neutral-700: #5c6070;
  --color-neutral-800: #414553;
  --color-neutral-900: #2b2e3a;

  --color-accent-100: #eef0ff;
  --color-accent-200: #dfe4ff;
  --color-accent-300: #c2cbff;
  --color-accent-400: #97a3ff;
  --color-accent-600: #4a5bf0;
  --color-accent-700: #3f4bd4;
  --color-accent-800: #303c9f;

  /* ビート・上方修正 = 赤、ミス・下方修正 = 緑(日本の株式表示の慣習)。 */
  --pos: oklch(0.55 0.17 25);
  --pos-deep: oklch(0.42 0.14 25);
  --pos-bg: oklch(0.95 0.03 25);
  --neg: oklch(0.52 0.11 170);
  --neg-deep: oklch(0.40 0.09 170);
  --neg-bg: oklch(0.95 0.03 170);

  /* エラー・警告・破壊的操作。赤は「上振れ(良い知らせ)」に予約しているため、
     赤(hue 25)からも緑(hue 170)からも離れたアンバーを使う。 */
  --danger: oklch(0.60 0.14 65);
  --danger-deep: oklch(0.45 0.12 65);
  --danger-bg: oklch(0.95 0.04 80);

  /* チャートのカテゴリカル配色(ポートフォリオ分析などの多系列用)。
     業績の赤緑・エラーのアンバーと衝突しない5色 + あふれた分の Other。
     並び順は隣接ペアの色覚多様性(CVD)検証を通した順で固定し、循環させない。 */
  --chart-1: #5a6cff;
  --chart-2: #0d9488;
  --chart-3: #c026d3;
  --chart-4: #65a30d;
  --chart-5: #7c3aed;
  --chart-other: var(--color-neutral-400);

  --font-sans: "Inter", "Noto Sans JP", system-ui, sans-serif;

  /* タイポスケール。中間の生値は最寄りの段に寄せる。 */
  --text-2xs: 10px;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 13px;
  --text-base: 14px;
  --text-body: 15px;
  --text-xl: 19px;
  --text-2xl: 24px;
  --text-display: 27px;
  --text-3xl: 30px;
  --text-4xl: 40px;

  --leading-none: 1.1;
  --leading-tight: 1.12;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-body: 1.55;
  --leading-relaxed: 1.7;

  --space-1: 4px;
  --space-2: 7px;
  --space-3: 10px;
  --space-4: 14px;
  --space-6: 20px;
  --space-8: 28px;
  --space-10: 40px;

  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2e3a 8%, transparent);
  --shadow-md: 0 2px 6px color-mix(in srgb, #2b2e3a 6%, transparent),
    0 8px 24px -8px color-mix(in srgb, #2b2e3a 12%, transparent);
  --shadow-lg: 0 4px 12px color-mix(in srgb, #2b2e3a 8%, transparent),
    0 16px 40px -12px color-mix(in srgb, #2b2e3a 20%, transparent);
  --shadow-accent: 0 4px 14px color-mix(in srgb, var(--color-accent) 35%, transparent);

  --transition: 160ms ease;

  /* 「夜の面」。ランディングのヒーローと未ログイン時のヘッダーに使う。
     ライト/ダークどちらの配色でも同じ色にするので、テーマトークンとは別に持つ。 */
  --night: #0f1226;
  --night-deep: #090b18;
  --on-night: #ffffff;
  --on-night-soft: rgba(255, 255, 255, 0.74);
  --on-night-muted: rgba(255, 255, 255, 0.56);
  --night-surface: rgba(255, 255, 255, 0.06);
  --night-border: rgba(255, 255, 255, 0.12);

  /* ヘッダーとモバイルのタブバーの高さ。本文の余白計算で参照する。 */
  --header-height: 58px;
  --tab-bar-height: 62px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #10121c;
    --color-surface: #1a1d2b;
    --color-text: #e7e9f0;
    --color-accent: #8b96ff;
    --color-accent-sky: #5cc9f5;
    --color-divider: rgba(231, 233, 240, 0.12);

    --color-neutral-100: #232636;
    --color-neutral-200: #2b2f42;
    --color-neutral-300: #3a3f55;
    --color-neutral-400: #787d8c;
    --color-neutral-500: #969bab;
    --color-neutral-600: #aab0be;
    --color-neutral-700: #c6cbd7;
    --color-neutral-800: #dde1ea;
    --color-neutral-900: #edeef4;

    --color-accent-100: #262c4e;
    --color-accent-200: #303865;
    --color-accent-300: #454f8f;
    --color-accent-400: #6a78e8;
    --color-accent-600: #a6aeff;
    --color-accent-700: #c3c9ff;
    --color-accent-800: #dfe2ff;

    --pos: oklch(0.72 0.14 25);
    --pos-deep: oklch(0.85 0.08 25);
    --pos-bg: oklch(0.32 0.06 25);
    --neg: oklch(0.74 0.1 170);
    --neg-deep: oklch(0.86 0.06 170);
    --neg-bg: oklch(0.3 0.05 170);

    --danger: oklch(0.75 0.13 70);
    --danger-deep: oklch(0.85 0.09 75);
    --danger-bg: oklch(0.32 0.06 65);

    /* 同じ5色相をダーク面(明度 0.48–0.67)に合わせて再ステップしたもの。 */
    --chart-1: #7885fa;
    --chart-2: #0d9d8e;
    --chart-3: #d946ef;
    --chart-4: #6ba410;
    --chart-5: #9a70f8;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.35), 0 8px 24px -8px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4), 0 16px 40px -12px rgba(0, 0, 0, 0.6);
    --shadow-accent: 0 4px 14px color-mix(in srgb, var(--color-accent) 30%, transparent);
  }
}

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 0 48px;
  /* ランディングのオーラ(::before)が両脇にはみ出すので、横スクロールを生まないよう切り落とす。
     hidden ではなく clip にするのは、スクロールコンテナ化して sticky ヘッダーを壊さないため。 */
  overflow-x: clip;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  margin: 0;
}
/* h1 はヘッダーのブランド(.brand)。h2 は銘柄名、h3 は各セクションの見出し。 */
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); }

a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent); }
p { margin: 0 0 var(--space-3); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
::selection { background: color-mix(in srgb, var(--color-accent) 25%, transparent); }

.text-muted { color: var(--color-text-muted); }

/* 数値は常に桁を揃える。金額の比較が一覧で効かなくなるため例外を作らない。 */
.code,
.today,
.numeric,
.numeric-body,
.day-number,
.flat-date,
.metric-value,
.metric-line { font-variant-numeric: tabular-nums; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- カード基底 ------------------------------------------------------------ */
/* 面で浮かせる要素はすべてこのクラスを併用し、個別クラスでは差分だけ書く。 */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.card-interactive { transition: box-shadow var(--transition), transform var(--transition); }
.card-interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* --- ボタン・入力 ---------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-base);
  line-height: var(--leading-none);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  box-shadow: var(--shadow-sm);
  transition: background var(--transition), border-color var(--transition),
    box-shadow var(--transition), transform var(--transition);
}
.btn svg { display: block; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: var(--gradient-accent);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-accent);
}
.btn-primary:hover { filter: brightness(1.08); box-shadow: var(--shadow-accent), var(--shadow-md); }
.btn-secondary:hover { background: var(--color-hover-ui); }
.btn-ghost {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--color-text-muted);
}
.btn-ghost:hover {
  background: var(--color-hover-accent);
  color: var(--color-accent-700);
  box-shadow: none;
}
.btn-compact { font-size: var(--text-sm); padding: 4px 12px; border-radius: var(--radius-full); }

/* 追加・削除ボタンは押した直後から反応を返し、二重送信も防ぐ。 */
.btn.htmx-request { opacity: 0.5; pointer-events: none; }

.input {
  width: 100%;
  min-height: 40px;
  padding: 6px 12px;
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
  caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 30%, transparent); }
.input:focus-visible {
  border-color: var(--color-accent);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent);
}

/* --- タグ ------------------------------------------------------------------ */

.tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-700); }
.tag-outline {
  border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
  color: var(--color-accent-700);
}

/* --- ヘッダー -------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--header-height);
  padding: 0 28px;
  background: color-mix(in srgb, var(--color-bg) 78%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--color-divider);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand-mark { flex: none; display: block; }
.brand-name {
  font-weight: 700;
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* 主要ページのナビ。現在地だけアクセントの淡い面で示す。 */
.site-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: var(--space-3);
}
.site-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: var(--radius-full);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.site-nav-link:hover { background: var(--color-hover-ui); color: var(--color-text); text-decoration: none; }
.site-nav-link.is-active { background: var(--color-accent-100); color: var(--color-accent-800); font-weight: 600; }
.site-header-tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}
.today {
  font-size: var(--text-md);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  margin-right: var(--space-2);
}
.push-button { font-size: var(--text-md); }
.account-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 240px;
  padding: 4px 10px 4px 4px;
  border-radius: var(--radius-full);
  font-size: var(--text-md);
  color: var(--color-text-soft);
  text-decoration: none;
  transition: background var(--transition);
}
.account-link:hover { background: var(--color-hover-ui); text-decoration: none; }
.account-link-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* アバターはメールアドレスの頭文字。画像は持たない。 */
.avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  background: var(--gradient-accent);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
}

/* 未ログインのホームでは、ヒーローの夜の面と地続きにする。 */
.site-header.is-night {
  color: var(--on-night);
  background: color-mix(in srgb, var(--night) 82%, transparent);
  border-bottom-color: var(--night-border);
}
.site-header.is-night .site-nav-link { color: var(--on-night-soft); }
.site-header.is-night .site-nav-link:hover { color: var(--on-night); background: var(--night-surface); }
/* アンカーで飛んだとき、固定ヘッダーの下に見出しが隠れないようにする。 */
.landing section[id] { scroll-margin-top: calc(var(--header-height) + var(--space-4)); }

/* モバイルのタブバー。ログイン後だけ出し、デスクトップではヘッダーのナビに委ねる。 */
.tab-bar { display: none; }

main {
  /* 余白はトークンにしておく。ランディングのヒーローがこれを打ち消して全幅に広がる。 */
  --main-pad-y: 28px;
  --main-pad-x: 28px;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--main-pad-y) var(--main-pad-x);
}

.site-footer {
  max-width: 1200px;
  margin: var(--space-10) auto 0;
  padding: var(--space-8) 28px var(--space-8);
  border-top: 1px solid var(--color-divider);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}
.site-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--space-8);
}
.site-footer-brand { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.site-footer-brand .brand-name { font-size: var(--text-base); }
.site-footer-tagline { margin: 0; color: var(--color-text-muted); }
.site-footer-heading {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.site-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.site-footer-links a {
  color: var(--color-text-muted);
  text-decoration: none;
}
.site-footer-links a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}
.site-footer-disclaimer {
  max-width: 72em;
  margin: var(--space-8) 0 0;
  color: var(--color-text-subtle);
}
.site-footer-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
  color: var(--color-text-subtle);
}
.site-footer-copyright { font-variant-numeric: tabular-nums; }

/* --- ログイン・アカウント -------------------------------------------------- */

.login-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
  max-width: 960px;
  margin: 24px auto 0;
  /* ヒーローとして1画面に収まる高さの範囲で縦センターに置く。 */
  min-height: min(640px, calc(100dvh - 300px));
}
/* 唯一の公開ページなので、アクセント2色の淡いオーラで空気を作る(コンテンツには重ねない)。 */
.login-layout::before {
  content: "";
  position: absolute;
  inset: -140px -200px auto;
  height: 620px;
  background:
    radial-gradient(560px 300px at 25% 10%, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 65%),
    radial-gradient(480px 280px at 78% 28%, color-mix(in srgb, var(--color-accent-sky) 13%, transparent), transparent 65%);
  z-index: -1;
  pointer-events: none;
}
.login-eyebrow { margin-bottom: var(--space-3); }
.login-headline {
  font-size: var(--text-4xl);
  line-height: 1.28;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-6);
}
.login-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-soft);
}
.login-features strong { color: var(--color-text); }
.login-features li { display: flex; align-items: flex-start; gap: var(--space-3); }
.login-feature-icon { flex: none; margin-top: 4px; color: var(--color-accent); }

/* プロダクトの縮図(装飾)。実物の day-chip / verdict をそのまま並べる。 */
.login-preview {
  margin-top: var(--space-6);
  padding: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.preview-rows { flex: 1; min-width: 0; }
.preview-row { display: flex; align-items: center; gap: var(--space-3); padding: 8px 4px; }
.preview-row + .preview-row { border-top: 1px solid var(--color-border-row); }
.preview-row .name {
  flex: 1;
  font-size: var(--text-base);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.login-card-icon { color: var(--color-accent); }
.login-card,
.account-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}
.login-card { box-shadow: var(--shadow-lg); }
.login-card-title { font-size: var(--text-xl); }
.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.form-error {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--danger-bg);
  color: var(--danger-deep);
}
.account-layout {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.account-layout h2 { font-size: var(--text-2xl); }
.account-card { padding: var(--space-6); }
.account-card h3 { font-size: var(--text-body); }
.account-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-weight: 500;
}
.account-danger { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.btn-danger { color: var(--danger-deep); align-self: flex-start; }
.btn-danger:hover { background: var(--danger-bg); color: var(--danger-deep); }

/* --- ダッシュボード -------------------------------------------------------- */

.dashboard-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: var(--space-8);
  align-items: start;
}

.search-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: sticky;
  top: 84px;
}
.section-kicker {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}

.search-field { position: relative; }
.search-field .input { padding-left: 34px; }
.search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-neutral-500);
  pointer-events: none;
}

/* 検索中のスピナー。htmx が .htmx-request を付け外しして表示を切り替える。 */
.spinner {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 2px solid var(--color-divider);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2s; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* ページ遷移をクロスフェード(対応ブラウザのみ、JSなしの段階的強化)。 */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* 検索カラムのまとめ枠。入力・候補・取り込みを1枚のパネルに載せる。 */
.search-panel {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.search-results { padding: 0 4px; }
.search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}
.search-row + .search-row {
  border-top: 1px solid var(--color-border-row);
}
.search-row .name { flex: 1; font-size: var(--text-base); }
.search-row .name.is-watched { opacity: 0.55; }

.code {
  font-size: var(--text-md);
  color: var(--color-neutral-500);
  width: 44px;
  flex: none;
}
.segment {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ホーム右カラム: 資産サマリーバンド + ウォッチリスト。 */
.content-column { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.content-column > * { min-width: 0; }

/* ホーム。ポートフォリオが主役で、各機能へのナビカードを挟む。 */
.home {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.home > * { min-width: 0; }
.nav-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
/* メニュー項目。統計カード(影つきの白カード+大きな数字)と見分けがつくよう、
   アイコンチップ+説明+矢印の「行」として描き、影は付けない。 */
.nav-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--transition), background var(--transition);
}
.nav-card:hover {
  color: var(--color-text);
  border-color: var(--color-accent-300);
  background: var(--color-hover-accent);
}
.nav-card-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--color-accent-100);
  color: var(--color-accent-700);
}
.nav-card-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nav-card-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: var(--text-md);
}
.nav-card-desc { font-size: var(--text-sm); color: var(--color-text-muted); }
.nav-card-arrow { flex: none; margin-left: auto; color: var(--color-neutral-400); }
.nav-card:hover .nav-card-arrow { color: var(--color-accent); }

.watchlist { display: flex; flex-direction: column; gap: var(--space-6); }
/* ウォッチリストの見出し行。行間は親の gap に任せる。 */
.watchlist-heading { margin-bottom: calc(-1 * var(--space-2)); }
.watchlist-title { font-size: var(--text-xl); }

.group-heading {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}
.unit-note { margin-left: auto; font-size: var(--text-xs); }

.day-list { display: flex; flex-direction: column; gap: var(--space-3); }
.day-row { display: flex; gap: var(--space-4); }
.day-row.is-past { opacity: 0.55; }

.day-chip {
  width: 58px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 7px 0 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.day-chip.is-today {
  background: var(--gradient-accent);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-accent);
}
.day-chip.is-tomorrow {
  border: 1.5px solid var(--color-accent);
  color: var(--color-accent-700);
}
.day-weekday { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.14em; }
.day-number { font-weight: 700; font-size: var(--text-display); line-height: 1.05; }
.day-note { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.14em; margin-top: 2px; }

.day-entries {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.day-entries.is-today {
  border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
  box-shadow: var(--shadow-accent), var(--shadow-md);
}

.entry-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 8px 14px;
  transition: background var(--transition);
}
.entry-row:hover { background: var(--color-hover-row); }
.entry-row + .entry-row {
  border-top: 1px solid var(--color-border-row);
}
.day-entries.is-today .entry-row + .entry-row {
  border-top-color: color-mix(in srgb, var(--color-accent) 20%, transparent);
}
.day-entries.is-today .code { color: var(--color-accent-700); }
.day-entries.is-today .name { font-weight: 700; }
.day-entries.is-today .segment { color: var(--color-accent-800); }

.entry-row .name,
.flat-row .name {
  flex: 1;
  font-size: var(--text-body);
  font-weight: 500;
  text-decoration: none;
}
.entry-row .name:hover,
.flat-row .name:hover { text-decoration: underline; }
.entry-row .segment { flex: none; }
.quarter { flex: none; }
.remove { flex: none; }

/* 「外す」は破壊的操作なので、ホバーが使える環境では行に触れたときだけ見せる。
   タッチ環境とキーボード操作(focus-within)では常に見える。 */
@media (hover: hover) and (pointer: fine) {
  .entry-row .remove,
  .flat-row .remove { opacity: 0; transition: opacity var(--transition); }
  .entry-row:hover .remove,
  .entry-row:focus-within .remove,
  .flat-row:hover .remove,
  .flat-row:focus-within .remove { opacity: 1; }
}

.tail-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
/* 「それ以降」「未定・予定なし」の片方しか無いときは全幅に広げる(右半分の空きを防ぐ)。 */
.tail-groups > :only-child { grid-column: 1 / -1; }
.flat-card { padding: 4px 14px; }
.flat-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 9px 4px;
  border-bottom: 1px solid var(--color-border-row);
  transition: background var(--transition);
}
.flat-card .flat-row:last-child { border-bottom: none; }
.flat-row:hover { background: var(--color-hover-row); }
.flat-date {
  width: 72px;
  flex: none;
  font-weight: 600;
  font-size: var(--text-base);
}
.flat-date .weekday { font-weight: 400; color: var(--color-neutral-500); }
/* 「未定」「予定なし」は行ごとに繰り返されるので、枠で囲わず静かなテキストにする。 */
.flat-date.is-undecided {
  font-weight: 400;
  font-size: var(--text-sm);
  color: var(--color-neutral-500);
}
.flat-row .name { font-size: var(--text-base); font-weight: 400; }

/* --- 空状態 ---------------------------------------------------------------- */
/* 空状態はこの1系統だけ。1行で済む場所は -compact を併用する。 */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: 32px 16px;
  background: var(--color-surface);
  border: 1px dashed var(--color-neutral-400);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--color-neutral-500);
}
.empty-state-title { margin: 0; font-size: var(--text-base); font-weight: 500; color: var(--color-text); }
.empty-state p:last-child { margin: 0; font-size: var(--text-sm); }

.empty-state-compact {
  display: block;
  margin: 12px 0 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  text-align: left;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.hint {
  margin: 12px 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* --- ファイル取り込み(ポートフォリオ表からの一括追加) ---------------------- */

.import-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-neutral-400);
}
.import-button { cursor: pointer; }
.import-button:has(:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
/* 検索欄のスピナーは入力欄内に絶対配置だが、ここはボタンの隣に並べる。 */
.import-form .import-spinner { position: static; margin: 0; }
.import-form .import-hint { flex-basis: 100%; margin: 0; }
/* 取り込み中はボタンを押せなくして二重送信を防ぐ(送信元は form なのでボタンには .htmx-request が付かない)。 */
.import-form.htmx-request .import-button { opacity: 0.5; pointer-events: none; }

.import-result {
  margin-top: 10px;
  padding: 10px 14px;
  font-size: var(--text-sm);
  line-height: 1.6;
}
.import-result p { margin: 0; }
.import-result p + p { margin-top: 4px; }
.import-result-main { font-size: var(--text-md); font-weight: 600; }
.import-result-detail { color: var(--color-text-muted); }
/* 注意書き。赤・緑は業績のビート/ミスに予約しているので、警告色(アンバー)で区別する。 */
.import-result-warn { color: var(--danger-deep); }

/* --- 銘柄詳細 -------------------------------------------------------------- */

.detail { display: flex; flex-direction: column; gap: var(--space-8); }
/* 直近決算+業績推移のポーリング枠。.detail 直下と同じ縦リズムを保つ。 */
.detail-reports { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.detail-reports > * { min-width: 0; }

.detail-heading {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-md);
  text-decoration: none;
  margin-right: var(--space-2);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  transition: background var(--transition);
}
.back-link:hover { background: var(--color-hover-accent); }
.detail-code {
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--color-neutral-500);
  font-variant-numeric: tabular-nums;
}
.next-schedule { margin-left: auto; font-size: var(--text-sm); }

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
.metric-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}
.metric-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.card-kicker {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}
.metric-value {
  font-weight: 700;
  font-size: var(--text-display);
  line-height: var(--leading-none);
  letter-spacing: -0.02em;
}
.metric-unit { font-size: var(--text-base); font-weight: 400; color: var(--color-neutral-500); }
.metric-line { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--text-sm); }

/* 進捗バー: 塗りが「今回の進捗」、目盛りが「例年の同時期」。 */
.progress {
  position: relative;
  height: 8px;
  margin-top: var(--space-1);
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
  border-radius: var(--radius-full);
}
.progress-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: var(--gradient-accent);
  border-radius: var(--radius-full);
}
.progress-fill.is-muted { background: var(--color-neutral-400); }
.progress-mark {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--color-text);
  border-radius: var(--radius-full);
}

/* 「−」の理由。数字と同じ場所に置くが、読み物なので細字・低コントラストにする。 */
.metric-note {
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.assessment-notes { margin-top: var(--space-3); }

/* 同四半期の推移(スパークライン)と前年同期比。値の直下に置く。 */
.metric-trend {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: -2px 0 2px;
}
.metric-yoy { font-size: var(--text-sm); white-space: nowrap; }
.metric-yoy .change { font-size: var(--text-sm); }

/* --- チャート(サーバー生成 SVG) --------------------------------------------- */
/* 単一系列 + 強調の2色だけで塗る。目盛りやテキストは地の色のトークンで、系列色は使わない。
   多系列(ポートフォリオ分析など)は --chart-1〜5 + --chart-other を並び順どおりに使う。 */

.chart { display: block; overflow: visible; }
/* viewBox 比で拡大されるので、1列表示でも棒と目盛り文字が太らないよう幅に上限を付ける。 */
.chart-columns { width: 100%; max-width: 320px; height: auto; }
.chart-baseline { stroke: var(--color-divider); stroke-width: 1; }
.chart-hit { fill: transparent; }
.chart-bar { fill: var(--color-neutral-400); transition: fill var(--transition); }
.chart-column.is-emphasis .chart-bar { fill: var(--color-accent); }
.chart-column:hover .chart-bar { fill: var(--color-accent-700); }
.chart-tick {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  fill: var(--color-text-muted);
}
.chart-sparkline { flex: none; }
.spark-line { fill: none; stroke: var(--color-accent-400); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
/* 直近の点だけアクセント。地色のリングで線と重なっても読める。 */
.spark-dot { fill: var(--color-accent); stroke: var(--color-surface); stroke-width: 2; }

.trend-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4) var(--space-6);
  margin-bottom: var(--space-4);
}
.trend {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
}

.verdict {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.verdict-beat { background: var(--pos-bg); color: var(--pos-deep); }
.verdict-miss { background: var(--neg-bg); color: var(--neg-deep); }
/* 据え置き(変化率0)と判定不能は、どちらも上下どちらでもないので中立色を共有する。 */
.verdict-flat,
.verdict-neutral { background: var(--color-neutral-100); color: var(--color-neutral-700); }

.change { font-weight: 700; font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
/* サマリーカードの主数値に色を付ける用途では、サイズは値のまま色だけ継ぐ。 */
.metric-value .change { font-size: inherit; font-weight: inherit; }
.change-beat { color: var(--pos); }
.change-miss { color: var(--neg); }
.change-flat,
.change-neutral { color: var(--color-text-muted); }
.metric-line .change { font-size: var(--text-sm); }

.ai-comment {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-6);
  display: flex;
  gap: var(--space-4);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-accent) 8%, var(--color-surface)) 0%,
    color-mix(in srgb, var(--color-accent-sky) 8%, var(--color-surface)) 100%);
  border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.ai-icon { flex: none; margin-top: 2px; color: var(--color-accent-700); }
.ai-body { flex: 1; }
.ai-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 6px; }
.ai-title {
  font-weight: 700;
  font-size: var(--text-base);
  letter-spacing: 0.02em;
  color: var(--color-accent-700);
}
.llm-comment { margin: 0; font-size: var(--text-base); line-height: var(--leading-relaxed); }

/* --- ポートフォリオ分析 ------------------------------------------------------ */

/* 入力・スケジュールのページ枠。見出しと本文の縦リズム。 */
.portfolio-input,
.schedule-page { display: flex; flex-direction: column; gap: var(--space-8); }
/* 分析はデータの重いセクションが並ぶので、縦リズムを一段広く取る。 */
.portfolio { display: flex; flex-direction: column; gap: var(--space-10); }
.portfolio > *,
.portfolio-input > *,
.schedule-page > * { min-width: 0; }
.portfolio-summary { grid-template-columns: repeat(4, 1fr); }

/* 業種配分: 100%積み上げバー + 凡例。塗りは --chart-1〜5、あふれた分は --chart-other。 */
.sector-card {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.sector-bar {
  display: flex;
  gap: 2px;
  height: 14px;
  border-radius: var(--radius-full);
  overflow: hidden;
}
.sector-bar-segment { min-width: 3px; }
.chart-slot-1 { background: var(--chart-1); }
.chart-slot-2 { background: var(--chart-2); }
.chart-slot-3 { background: var(--chart-3); }
.chart-slot-4 { background: var(--chart-4); }
.chart-slot-5 { background: var(--chart-5); }
.chart-slot-0 { background: var(--chart-other); }
/* 凡例の%がラベルから離れすぎないよう、列幅に上限を付けて左に寄せる。 */
.sector-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 340px));
  gap: var(--space-2) var(--space-8);
}
.sector-legend li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-md); }
.sector-dot { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.sector-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sector-weight { font-weight: 600; }

/* 株数・取得単価のインライン編集。テーブルセル内とカード内の両方で使う。 */
.input-holding {
  width: 6.5em;
  min-height: 32px;
  padding: 4px 8px;
  font-size: var(--text-sm);
  text-align: right;
}
.holding-edit {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
}
.editor { display: flex; flex-direction: column; }
.editor-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-sm);
}
.editor-card p { margin: 0; }
.editor-card .holding-edit { margin: 0; padding: 6px 0; }
.editor-card .holding-edit a { flex: 1; min-width: 8em; }
.editor-card .holding-edit + .holding-edit { border-top: 1px solid var(--color-border-row); }
.editor-value { font-size: var(--text-sm); white-space: nowrap; }
.cautions { display: flex; flex-direction: column; gap: var(--space-1); }
.cautions p { margin: 0; font-size: var(--text-md); }

/* AIコメントのスピナーは見出しの横に置く(入力欄用の絶対配置を解除)。 */
.ai-head .spinner { position: static; margin: 0; }
.advice-error { display: flex; align-items: center; gap: var(--space-3); }
.advice-error p { margin: 0; }

/* --- 表 -------------------------------------------------------------------- */

/* 狭い画面でも表が潰れないよう、表だけを横スクロールさせる(本文は横スクロールしない)。
   flex/grid の子は既定の min-width:auto だと中身の幅まで広がって overflow-x が効かないため、
   スクロール枠とその祖先で min-width を 0 に落としておく。 */
.table-scroll {
  overflow-x: auto;
  min-width: 0;
  padding: var(--space-2) var(--space-4);
}
.dashboard-layout > *,
.detail > *,
.watchlist > * { min-width: 0; }

.table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.table tbody tr:last-child td { border-bottom: none; }
.table th {
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
  white-space: nowrap;
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-border-row);
}
.table tbody tr { transition: background var(--transition); }
.table tbody tr:hover { background: var(--color-hover-row); }
.table .numeric { text-align: right; white-space: nowrap; }
.table .period { font-weight: 500; white-space: nowrap; }
.table .nowrap { white-space: nowrap; }
.table tfoot th,
.table tfoot td { border-top: 1px solid var(--color-divider); border-bottom: none; }

/* リスク寄与のバー(進捗バーを流用)。数字は必ず併記し、バーは補助にとどめる。 */
.contribution-cell { min-width: 9em; }
.contribution-cell .progress { min-width: 5em; margin: 0 0 var(--space-1); }

/* 相関行列: 行・列の見出しはコードだけにして横幅を詰め、枠内では横だけスクロールさせる
   (縦は本文と一緒にスクロールする。枠内に縦スクロールを作ると、表を見るのにページと枠の
   2段階のスクロールが要る)。先頭列は sticky で固定し、横に送ってもどの行か分かるようにする。
   帯色は数値の補助で、色だけに意味を持たせない(セルには必ず数値を書く)。 */
.corr-table th,
.corr-table td { padding: var(--space-1) var(--space-2); font-size: var(--text-xs); min-width: 3.4em; }
.corr-table th:first-child,
.corr-table td:first-child {
  position: sticky;
  left: 0;
  background: var(--color-surface);
  z-index: 1;
  text-align: left;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: normal;
}
.corr-self { color: var(--color-text-muted); }
.corr-high { background: color-mix(in srgb, var(--chart-1) 40%, transparent); }
.corr-mid { background: color-mix(in srgb, var(--chart-1) 16%, transparent); }
.corr-negative { background: color-mix(in srgb, var(--chart-2) 22%, transparent); }

/* 操作結果の通知。地の色を反転した濃色チップを共通の土台にし、左縁の色で
   成否を示す(エラー = アンバー、成功 = スカイ)。エラーに赤を使わないのは、
   この配色では赤が「上振れ(良い知らせ)」に予約されているため。 */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  max-width: min(520px, calc(100vw - 28px));
  padding: var(--space-3) var(--space-4);
  background: var(--color-neutral-900);
  color: var(--color-bg);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  border-left: 3px solid var(--danger);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.toast-success { border-left-color: var(--color-accent-sky); }
.toast[hidden] { display: none; }

/* --- エラーページ(404/500) ------------------------------------------------- */

.error-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin: 64px auto 0;
  max-width: 480px;
  text-align: center;
}
.error-status {
  margin: 0;
  font-weight: 700;
  font-size: var(--text-3xl);
  letter-spacing: 0.04em;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.error-layout .btn { margin-top: var(--space-3); }

.legend {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
  font-size: var(--text-sm);
}

/* --- スマホ ---------------------------------------------------------------- */
/* 決算日の確認はスマホで行うことが多いので、重要度の低い列から落としてタップ領域を確保する。 */

@media (max-width: 900px) {
  .dashboard-layout { grid-template-columns: 1fr; gap: var(--space-6); }
  .search-column { position: static; }
  .metric-grid,
  .trend-grid { grid-template-columns: repeat(2, 1fr); }
  .tail-groups { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  main { --main-pad-y: 16px; --main-pad-x: 14px; }
  .site-header { padding: 0 14px; gap: var(--space-2); }
  .site-nav,
  .today,
  .push-button-label,
  .account-link-label { display: none; }
  .push-button { padding: 0; width: 36px; height: 36px; }
  .account-link { padding: 4px; }
  /* ナビはタブバーに移し、本文とトーストがその分だけ下に隠れないようにする。 */
  body.has-tab-bar { padding-bottom: calc(var(--tab-bar-height) + var(--space-4)); }
  body.has-tab-bar .toast { bottom: calc(var(--tab-bar-height) + var(--space-3)); }
  .tab-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    padding: 6px var(--space-2) calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--color-bg) 85%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    border-top: 1px solid var(--color-divider);
  }
  .tab-bar-link {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 0 4px;
    border-radius: var(--radius-md);
    font-size: var(--text-2xs);
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
  }
  .tab-bar-link svg { width: 20px; height: 20px; }
  .tab-bar-link.is-active { color: var(--color-accent-700); font-weight: 600; }
  .site-footer { padding: var(--space-6) 14px; }
  .site-footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .login-layout { grid-template-columns: 1fr; margin-top: 8px; gap: var(--space-6); min-height: 0; }
  .login-headline { font-size: var(--text-2xl); }
  /* スマホではフォームを先に見せたいので、装飾のプレビューは出さない。 */
  .login-preview { display: none; }
  .login-card, .account-card { padding: var(--space-6); }

  h2 { font-size: var(--text-2xl); }
  .metric-grid,
  .trend-grid,
  .portfolio-summary { grid-template-columns: 1fr; }
  .sector-legend { grid-template-columns: 1fr; }
  .next-schedule { margin-left: 0; flex-basis: 100%; }
  .unit-note { margin-left: 0; }

  .home { gap: var(--space-6); }
  .nav-grid { grid-template-columns: 1fr; gap: var(--space-2); }
  .nav-card { padding: var(--space-2) var(--space-3); }
  .nav-card-desc { display: none; }

  .day-chip { width: 46px; padding: 5px 0 4px; }
  .day-number { font-size: var(--text-xl); }
  .day-weekday { font-size: var(--text-2xs); }
  .day-note { font-size: var(--text-2xs); }
  .day-row { gap: var(--space-3); }
  .entry-row { gap: var(--space-2); padding: 6px 10px; min-height: 44px; }
  .entry-row .segment,
  .search-row .segment { display: none; }
  .flat-row { min-height: 44px; }
  .flat-date { width: 62px; font-size: var(--text-md); }
  .code { width: 38px; font-size: var(--text-sm); }
  .entry-row .name,
  .flat-row .name { font-size: var(--text-base); }
  .table { font-size: var(--text-sm); }
  /* ホームの保有一覧は詳細列を落とし、銘柄・評価額・損益・次回発表に絞る。 */
  .table .col-detail { display: none; }
  .ai-comment { padding: var(--space-3); gap: var(--space-2); }
}

/* --- ランディング(未ログインのホーム) -------------------------------------- */
/* 方針: スクリーンショットを使わず、実物のコンポーネント(metric-card / sector-bar / corr-table /
   day-chip / verdict)でプロダクトの縮図を組む。トークンを共有するのでダークモードにも自動で追従する。
   ヒーローだけは配色にかかわらず「夜の面」に固定し、その上に実物のカードを浮かべて製品を主役にする。
   動きはヒーローの初回表示(縮図が浮かび上がり、数値が集計されて出てくる)の1回だけに絞る。 */

.landing {
  /* セクション間。アプリ画面より広く取り、1画面1メッセージで読ませる。 */
  --landing-gap: 104px;
  /* 縮図を載せる「舞台」の角丸。カード(16px)より一段大きくして入れ子の階層を出す。 */
  --landing-stage-radius: 22px;
  /* ヒーローで決算検知のカードを舞台に食い込ませる量。舞台側は同じ分だけ下余白を足し、
     食い込むのは余白だけで中のカード(AI コメント)には被らないようにする。 */
  --landing-float-overlap: 26px;
  display: flex;
  flex-direction: column;
  gap: var(--landing-gap);
  max-width: 1120px;
  margin: 0 auto;
  padding-bottom: var(--space-10);
}

/* ヒーロー: main の余白を打ち消して全幅に広げ、内側で再びカラム幅に揃える。 */
.landing-hero {
  margin: calc(-1 * var(--main-pad-y)) calc(50% - 50vw) 0;
  padding: 72px 0 104px;
  color: var(--on-night);
  background:
    radial-gradient(720px 420px at 12% 0%, color-mix(in srgb, var(--color-accent) 38%, transparent), transparent 70%),
    radial-gradient(640px 400px at 92% 100%, color-mix(in srgb, var(--color-accent-sky) 26%, transparent), transparent 70%),
    linear-gradient(180deg, var(--night) 0%, var(--night-deep) 100%);
}
.landing-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--space-10);
  align-items: center;
  max-width: calc(1120px + var(--main-pad-x) * 2);
  margin: 0 auto;
  padding: 0 var(--main-pad-x);
}
.landing-lead {
  margin: 0 0 var(--space-4);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-accent-sky);
}
.landing-headline {
  font-size: clamp(var(--text-3xl), 3.6vw, 44px);
  line-height: 1.28;
  letter-spacing: -0.03em;
  margin: 0 0 var(--space-4);
}
.landing-sub {
  margin: 0 0 var(--space-6);
  max-width: 32em;
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--on-night-soft);
}
.landing-form {
  display: flex;
  gap: var(--space-3);
  max-width: 440px;
}
.landing-form .input { flex: 1; min-width: 0; }
.landing-form .btn { flex: none; white-space: nowrap; }
.landing-form-note {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.landing-hero .landing-form-note { color: var(--on-night-muted); }
/* 夜の面の上では入力欄の枠が沈むので、少し明るい枠にする。 */
.landing-hero .input { border-color: var(--night-border); box-shadow: none; }

/* 資産サマリーの縮図。半透明の舞台に実物のカードを載せ、決算検知のカードを手前に重ねる。
   重ねるカードは絶対配置にせず、通常フローに置いて負のマージンで食い込ませる
   (絶対配置だと Chrome で舞台の末尾行が描かれない描画不良が出た)。 */
.landing-replica-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.landing-replica {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) calc(var(--space-4) + var(--landing-float-overlap));
  border: 1px solid var(--night-border);
  border-radius: var(--landing-stage-radius);
  background: var(--night-surface);
  box-shadow: var(--shadow-lg);
}
.landing-replica-head,
.landing-replica-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.landing-replica-head { padding: 0 var(--space-1); }
.landing-replica-title { font-size: var(--text-base); font-weight: 600; }
.landing-replica-label { font-size: var(--text-md); font-weight: 600; }
.landing-replica-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.landing-replica-head .landing-replica-note { color: var(--on-night-muted); }
/* 縮図の中身は実物のカードなので、テーマの文字色に戻す。 */
.landing-replica .card,
.landing-replica .ai-comment { color: var(--color-text); }
/* 縮図は幅が半分なので 2×2 に畳み、主数値も一段小さく。 */
.landing-replica-metrics { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.landing-replica-metrics .metric-card { padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-sm); }
.landing-replica-metrics .metric-value { font-size: var(--text-2xl); }
.landing-replica-sectors {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-sm);
}
.landing-legend { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1) var(--space-4); font-size: var(--text-sm); }
.landing-ai { margin: 0; padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-sm); }
.landing-ai .ai-head { margin-bottom: 4px; }
.landing-ai-text {
  margin: 0;
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--color-text-soft);
}
.landing-float {
  position: relative;
  z-index: 1;
  margin: calc(-1 * var(--landing-float-overlap)) 0 0 -36px;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
}

/* 初回表示: 舞台が浮かび上がり、続いて決算検知のカードが手前に出る。数値の数え上げは app.js。 */
@media (prefers-reduced-motion: no-preference) {
  .landing-replica { animation: landing-rise 640ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
  .landing-float { animation: landing-rise 520ms cubic-bezier(0.2, 0.7, 0.2, 1) 560ms backwards; }
}
@keyframes landing-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* セクション見出し */
.landing-section-head { max-width: 40em; margin-bottom: var(--space-10); }
.landing-section-title {
  font-size: clamp(var(--text-2xl), 2.6vw, var(--text-3xl));
  letter-spacing: -0.025em;
  margin: 0 0 var(--space-3);
}
.landing-section-lead {
  margin: 0;
  line-height: var(--leading-relaxed);
  color: var(--color-text-soft);
}

/* 証券会社アプリとの比較表。カブウォッチ列だけアクセントの淡い面で立てる。 */
.landing-compare { padding: var(--space-3) var(--space-6) var(--space-4); overflow-x: auto; }
.landing-compare-table th,
.landing-compare-table td { padding: var(--space-3) var(--space-3); }
.landing-compare-table td:first-child { font-size: var(--text-base); font-weight: 500; }
.landing-compare-col {
  width: 11em;
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-sm);
}
.landing-compare-col.is-us { color: var(--color-accent-700); font-weight: 700; }
.landing-compare-table td.landing-compare-cell { text-align: center; }
.landing-compare-table td:last-child,
.landing-compare-table th:last-child { background: color-mix(in srgb, var(--color-accent) 7%, transparent); }
.landing-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
}
.landing-mark.is-yes { background: var(--gradient-accent); color: #fff; box-shadow: var(--shadow-accent); }
.landing-mark.is-partial { background: var(--color-neutral-100); color: var(--color-neutral-700); }
.landing-mark.is-no { color: var(--color-text-muted); font-size: var(--text-base); font-weight: 400; }
.landing-compare-note {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* 三つの機能: コピーと縮図を左右交互に並べる。 */
.landing-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
.landing-feature {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-10);
  align-items: center;
}
.landing-feature.is-flipped .landing-feature-copy { order: 2; }
.landing-feature-copy { display: flex; flex-direction: column; gap: var(--space-4); }
.landing-feature-verb {
  margin: 0;
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: var(--leading-tight);
}
.landing-feature-lead {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
}
.landing-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-soft);
}
.landing-checklist li { position: relative; padding-left: 22px; }
.landing-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 11px;
  height: 5px;
  border-left: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(-45deg);
}

/* 縮図を載せる舞台。アクセントの淡い面に実物のカードを置く。 */
.landing-stage {
  padding: var(--space-6);
  border-radius: var(--landing-stage-radius);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--color-accent) 9%, transparent), transparent 70%),
    color-mix(in srgb, var(--color-surface) 40%, transparent);
  border: 1px solid var(--color-border);
}
.landing-table { font-size: var(--text-md); }
.landing-table th,
.landing-table td { padding: var(--space-2) var(--space-3); }
.landing-table td:first-child { font-weight: 500; white-space: nowrap; }
.landing-table .code { display: inline-block; width: auto; margin-right: var(--space-2); }
/* 縮図の表は狭い画面では横にスクロールさせ、ページ幅を押し広げない。 */
.landing-holdings,
.landing-corr { overflow-x: auto; }

.landing-risk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
}
.landing-risk-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
.landing-risk-tiles .metric-card { padding: var(--space-3); box-shadow: var(--shadow-sm); }
.landing-risk-tiles .metric-value { font-size: var(--text-2xl); }
.landing-corr,
.landing-contrib {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-sm);
}
.landing-corr .corr-table { font-size: var(--text-xs); }
.landing-corr .corr-table th:first-child { background: transparent; }
.landing-contrib { grid-column: 1 / -1; }
.landing-contrib-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 8em) minmax(0, 1fr) 3em 6.5em;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-md);
}
.landing-contrib-row .progress { margin: 0; }
.landing-contrib-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.landing-contrib-value { text-align: right; font-weight: 600; }
.landing-contrib-alt { text-align: right; font-size: var(--text-xs); color: var(--color-text-muted); }

.landing-alerts {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.landing-week {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.landing-week .day-chip { flex: 1; width: auto; }
.landing-moment {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.landing-moment-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md);
  background: var(--color-accent-100);
  color: var(--color-accent-700);
}
.landing-moment-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.landing-moment-meta {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.landing-moment-text { font-size: var(--text-base); line-height: var(--leading-body); }
.landing-moment-text .verdict { margin-left: var(--space-1); }

/* 始め方: 3つの手順を1本の線でつなぐ(カードにはしない)。 */
.landing-steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}
.landing-steps::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 30px;
  right: 30px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent-300), var(--color-accent-100));
}
.landing-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.landing-step p {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-soft);
}
.landing-step-number {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--gradient-accent);
  color: #fff;
  font-weight: 700;
  font-size: var(--text-md);
  box-shadow: 0 0 0 6px var(--color-bg), var(--shadow-accent);
}
.landing-step-title { margin: 0; font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.02em; }

/* 信頼の前提: 3列を縦罫で区切る。 */
.landing-promises {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}
.landing-promise { padding: var(--space-8) var(--space-8) var(--space-8) 0; }
.landing-promise + .landing-promise { padding-left: var(--space-8); border-left: 1px solid var(--color-divider); }
.landing-promise-title { margin: 0 0 var(--space-3); font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.02em; }
.landing-promise p {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-soft);
}

.landing-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  padding: var(--space-10) var(--space-8);
  background: linear-gradient(135deg, var(--color-accent-100), var(--color-surface) 60%);
}
.landing-cta-title {
  font-size: var(--text-2xl);
  letter-spacing: -0.02em;
}
.landing-cta .landing-form {
  width: 100%;
  max-width: 440px;
  justify-content: center;
}

@media (max-width: 900px) {
  .landing { --landing-gap: 72px; }
  .landing-hero { padding: 40px 0 64px; }
  .landing-hero-inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .landing-float { margin-left: var(--space-3); }
  .landing-feature,
  .landing-feature.is-flipped { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .landing-feature.is-flipped .landing-feature-copy { order: 0; }
  .landing-risk { grid-template-columns: minmax(0, 1fr); }
  .landing-steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .landing-steps::before { top: 30px; bottom: 30px; left: 15px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--color-accent-300), var(--color-accent-100)); }
  .landing-promises { grid-template-columns: minmax(0, 1fr); }
  .landing-promise { padding: var(--space-6) 0; }
  .landing-promise + .landing-promise { padding-left: 0; border-left: none; border-top: 1px solid var(--color-divider); }
}
@media (max-width: 600px) {
  .landing-form { flex-direction: column; max-width: none; }
  .landing-replica { padding: var(--space-3); }
  .landing-replica-metrics { grid-template-columns: 1fr 1fr; }
  .landing-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-stage { padding: var(--space-3); }
  .landing-compare { padding: var(--space-2) var(--space-3) var(--space-3); }
  .landing-compare-col { width: 7em; }
  .landing-contrib-row { grid-template-columns: 44px minmax(0, 1fr) 3em; }
  .landing-contrib-row .progress,
  .landing-contrib-alt { display: none; }
  .landing-table th:last-child,
  .landing-table td:last-child { display: none; }
}

/* --- フッターのリンク列と法的ページ ----------------------------------------- */

.legal {
  max-width: 720px;
  margin: 16px auto 0;
  line-height: var(--leading-relaxed);
}
.legal-title { font-size: var(--text-3xl); margin: var(--space-2) 0 var(--space-4); }
.legal-lead { margin: 0 0 var(--space-6); color: var(--color-text-soft); }
.legal section { margin-bottom: var(--space-6); }
.legal h3 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.legal p { margin: 0 0 var(--space-3); color: var(--color-text-soft); }
.legal ul {
  margin: 0 0 var(--space-3);
  padding-left: 1.4em;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--color-text-soft);
}
.legal strong { color: var(--color-text); }
.legal a { color: var(--color-accent-700); }
.legal-date {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}