/* ============================================================
   Dashboard ページ専用スタイル
   ============================================================ */

.dash-section {
  margin-bottom: var(--space-10);
}
.dash-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}
.dash-grid-6 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
}

.dash-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color var(--transition-fast);
}
.dash-card:hover { border-color: var(--border-strong); color: inherit; }
.dash-card .dash-title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--fg-base);
  margin-bottom: var(--space-2);
  font-weight: 500;
}
.dash-card .dash-meta {
  font-size: var(--text-xs);
  color: var(--fg-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.dash-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}
.stat-cell {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.stat-cell .stat-label {
  font-size: var(--text-xs);
  color: var(--fg-subtle);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.stat-cell .stat-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-2xl);
  color: var(--fg-base);
  font-weight: 500;
}


/* ====== Home画面 (セッション 11.5 / Phase 2 集大成) ====== */

/* ヘッダーの日付・挨拶 */
.home-header { gap: var(--space-3); }
.home-subtitle {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--text-base);
  color: var(--fg-muted);
  margin-top: var(--space-1);
}
.home-date {
  font-weight: 500;
  color: var(--fg-base);
}
.home-greeting { color: var(--fg-muted); }

/* ====== カードグリッド (セクション 1, 2 共通) ====== */
.home-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.home-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.home-card:hover { border-color: var(--accent); }
.home-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.home-card-icon {
  font-size: 18px;
  color: var(--accent);
}
.home-card-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--fg-base);
  letter-spacing: var(--tracking-tight);
}
.home-card-body {
  flex: 1 1 auto;
  font-size: var(--text-sm);
  color: var(--fg-base);
  line-height: var(--leading-relaxed);
}
.home-card-foot {
  margin-top: auto;
}
.home-card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--accent);
  text-decoration: none;
}
.home-card-link:hover { text-decoration: underline; }

/* 今日の日記プレビュー */
.home-journal-preview {
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--fg-base);
}

/* 直近の予定 */
.home-upcoming-title {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--fg-base);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.home-upcoming-title a {
  color: var(--fg-base);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.home-upcoming-title a:hover { border-bottom-color: var(--accent); }
.home-upcoming-today {
  display: inline-block;
  padding: 2px var(--space-2);
  background: var(--accent);
  color: var(--accent-fg);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
}
.home-upcoming-meta {
  font-size: var(--text-sm);
  color: var(--fg-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.home-upcoming-days {
  font-size: var(--text-md);
  color: var(--fg-base);
  font-weight: 500;
}

/* 進捗バー (Home 画面の小型) */
.home-progress-bar {
  flex: 1 1 80px;
  min-width: 60px;
  height: var(--space-1);
  background: var(--bg-surface-2);
  border-radius: 1px;
  overflow: hidden;
  margin-top: var(--space-1);
}
.home-progress-bar-fill {
  height: 100%;
  background: var(--accent);
  transition: width var(--transition-slow);
}

/* リリース前タスク / 集客準備 リスト */
.home-release-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.home-release-list a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.home-release-list a:hover .home-release-title { color: var(--accent); }
.home-release-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}
.home-release-title {
  color: var(--fg-base);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: color var(--transition-fast);
}
.home-release-count {
  color: var(--fg-muted);
  font-size: var(--text-xs);
  flex: 0 0 auto;
}
.home-release-sub {
  font-size: var(--text-xs);
  margin-top: var(--space-1);
}
.home-release-sub .dot { margin: 0 var(--space-1); color: var(--fg-subtle); }

/* 月次データ */
.home-monthly-status {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.home-monthly-value {
  font-size: var(--text-2xl);
  font-weight: 500;
  color: var(--fg-base);
}

/* ====== セクション形式 (3, 4, 5) ====== */
.home-section { margin-top: var(--space-6); }
.home-section-note {
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}

/* C-1: SECTION 3/5 が空でも消さず、淡い1行を残してレイアウトを安定させる。
   督促圧を出さない中立な説明文(設計原則15)。控えめな破線・muted 色。 */
.home-section-placeholder {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  color: var(--fg-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
}
.home-section-placeholder i { font-size: 18px; }

/* セクション3: 振り返り */
.home-recap-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}
.home-recap-label {
  font-size: var(--text-xs);
  color: var(--fg-subtle);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  min-width: 120px;
}
.home-recap-value {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--fg-base);
  font-variant-numeric: tabular-nums;
}
.home-recap-delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--text-sm);
}
.home-recap-delta.is-up { color: var(--success); }
.home-recap-delta.is-down { color: var(--error); }
.home-recap-link {
  margin-left: auto;
  font-size: var(--text-sm);
  color: var(--accent);
}
.home-recap-content { flex: 1 1 auto; min-width: 0; }
.home-recap-title {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--fg-base);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.home-recap-title:hover { border-bottom-color: var(--accent); }
.home-recap-meta {
  font-size: var(--text-sm);
  margin-top: var(--space-1);
}
.home-recap-meta .dot { margin: 0 var(--space-1); color: var(--fg-subtle); }
.home-recap-meta .is-up { color: var(--success); }
.home-recap-meta .is-down { color: var(--error); }
.home-recap-quote {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  padding-left: var(--space-3);
  border-left: 2px solid var(--border-strong);
  font-style: italic;
}

/* セクション4: 気になるアイデア */
.home-idea-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}
.home-idea-card {
  display: block;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-fast);
}
.home-idea-card:hover { border-color: var(--border-strong); text-decoration: none; color: inherit; }
.home-idea-card.is-pinned { border-left: 2px solid var(--accent); }
.home-idea-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.home-idea-pin { color: var(--accent); font-size: 14px; }
.home-idea-body {
  font-size: var(--text-sm);
  color: var(--fg-base);
  line-height: var(--leading-relaxed);
  white-space: pre-wrap;
}

/* セクション4続き: 動きがない楽曲 */
.home-stale-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.home-stale-list a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-fast);
}
.home-stale-list a:hover {
  border-color: var(--border-strong);
  text-decoration: none;
  color: inherit;
}
.home-stale-title {
  flex: 1 1 auto;
  color: var(--fg-base);
  font-size: var(--text-base);
}
.home-stale-status { font-size: var(--text-xs); }
.home-stale-days {
  font-size: var(--text-xs);
  color: var(--fg-muted);
}

/* セクション5: アクティビティ */
.home-activity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
}
.home-activity-tile {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.home-activity-tile:hover {
  border-color: var(--border-strong);
  background: var(--bg-surface);
  text-decoration: none;
  color: inherit;
}
.home-activity-icon {
  font-size: 22px;
  color: var(--accent);
  flex: 0 0 auto;
}
.home-activity-content { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.home-activity-label {
  font-size: var(--text-xs);
  color: var(--fg-subtle);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.home-activity-value {
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--fg-base);
  font-variant-numeric: tabular-nums;
}
.home-activity-sub {
  font-size: var(--text-xs);
}

/* visually-hidden ユーティリティ (aria-labelledby 用) */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

@media (max-width: 480px) {
  .home-cards { grid-template-columns: 1fr; }
  .home-recap-row { flex-direction: column; align-items: flex-start; }
  .home-recap-link { margin-left: 0; }
}

/* ============================================================
   Phase 3.x 3.x-5: SECTION 構成と展開式入力欄
   ============================================================ */

/* SECTION 間のリズム (見出しなし・区切り線なし、余白で分離)
   通常のカード間隔 (--space-4) より一段大きい --space-8 で SECTION 境界を表現 */
.home-section { margin-bottom: var(--space-8); }
.home-section + .home-section { margin-top: 0; }
.home-section:last-child { margin-bottom: 0; }

/* SECTION 4 内のサブ見出し付きブロック間の余白 (SECTION 境界より一段小さく) */
.home-subsection { margin-bottom: var(--space-6); }
.home-subsection:last-child { margin-bottom: 0; }

/* SECTION 2: 今日の入力 (左右2列) */
.home-today-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 720px) {
  .home-today-grid { grid-template-columns: 1fr; }
}

/* 展開式入力カード */
.home-inline-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  position: relative;
}
.home-inline-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  color: var(--fg-base);
}
.home-inline-icon {
  font-size: var(--text-md);
  color: var(--accent, var(--fg-muted));
}
.home-inline-title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
}

/* 既存の今日の日記プレビュー (展開ボタンの上に出す) */
.home-inline-preview {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.home-inline-preview .home-journal-preview {
  font-size: var(--text-sm);
  color: var(--fg-base);
  line-height: 1.6;
  margin-bottom: var(--space-2);
}
.home-inline-hint {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--text-sm);
}

/* トリガーボタン (展開前) */
.home-inline-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-3);
  background: transparent;
  color: var(--fg-muted);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md, var(--radius-lg));
  font-size: var(--text-sm);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.home-inline-trigger:hover {
  border-color: var(--border-strong);
  color: var(--fg-base);
  background: var(--bg-elevated, transparent);
}
.home-inline-trigger i {
  font-size: var(--text-md);
}

/* 展開後フォーム */
.home-inline-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.home-inline-type-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.home-inline-type-label {
  font-size: var(--text-xs);
  color: var(--fg-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.home-inline-type {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, var(--radius-sm));
  background: var(--bg-base);
  color: var(--fg-base);
  font-size: var(--text-sm);
  font-family: inherit;
}
.home-inline-textarea {
  width: 100%;
  min-height: 4.5em;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, var(--radius-sm));
  background: var(--bg-base);
  color: var(--fg-base);
  font-size: var(--text-sm);
  font-family: inherit;
  line-height: 1.6;
  resize: vertical;
  box-sizing: border-box;
}
.home-inline-textarea:focus {
  outline: none;
  border-color: var(--border-strong);
}
.home-inline-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}
.home-inline-status {
  font-size: var(--text-xs);
  padding: var(--space-1) 0;
}
.home-inline-status.is-error  { color: var(--danger, #c0392b); }
.home-inline-status.is-success { color: var(--fg-muted); }

/* 保存完了フラッシュ (カード右上にふわっと表示) */
.home-inline-flash {
  position: absolute;
  top: var(--space-2);
  right: var(--space-3);
  font-size: var(--text-xs);
  color: var(--fg-muted);
  background: var(--bg-elevated, var(--bg-surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-md, var(--radius-sm));
  padding: var(--space-1) var(--space-2);
  opacity: 1;
  transition: opacity 0.4s ease;
}
.home-inline-flash.is-fading { opacity: 0; }


/* ====== Step 81.7: オンボーディングタスクリスト (右下に固定) ======
   控えめな補助。督促色は使わず、完了済みは薄く + チェックで残す。
   position: fixed なので Home 本文のレイアウトには影響しない。 */
.home-onboarding {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  width: 300px;
  max-width: calc(100vw - var(--space-8));
  /* フラッシュ(9999)・モバイル下部タブ(100)より下、本文より上 */
  z-index: 90;
}

/* ---- 展開パネル ---- */
.home-onboarding-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  /* 画面が低くてもはみ出さない */
  max-height: calc(100vh - var(--space-16));
  overflow-y: auto;
}
.home-onboarding.is-collapsed .home-onboarding-panel { display: none; }

.home-onboarding-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.home-onboarding-head-main {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}
.home-onboarding-head-icon {
  color: var(--fg-muted);
  font-size: 16px;
}
.home-onboarding-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--fg-base);
  letter-spacing: var(--tracking-tight);
}
.home-onboarding-progress {
  font-size: var(--text-xs);
  color: var(--fg-subtle);
}
.home-onboarding-controls {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 0 0 auto;
}
.home-onboarding-dismiss-form { margin: 0; }
.home-onboarding-btn {
  background: transparent;
  border: none;
  padding: var(--space-1);
  cursor: pointer;
  color: var(--fg-subtle);
  font-size: 15px;
  line-height: 1;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.home-onboarding-btn:hover {
  color: var(--fg-muted);
  background: var(--hover-overlay);
}

.home-onboarding-note {
  font-size: var(--text-sm);
  color: var(--fg-muted);
  margin: 0 0 var(--space-3);
  line-height: var(--leading-relaxed);
}
.home-onboarding-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.home-onboarding-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--fg-base);
  transition: background var(--transition-fast);
}
.home-onboarding-link:hover {
  background: var(--hover-overlay);
  color: var(--fg-base);
}
.home-onboarding-icon {
  flex: 0 0 auto;
  font-size: 18px;
  color: var(--fg-muted);
  display: inline-flex;
}
.home-onboarding-label {
  flex: 1 1 auto;
  font-size: var(--text-sm);
}
.home-onboarding-go {
  flex: 0 0 auto;
  color: var(--fg-subtle);
  font-size: 14px;
}
/* 完了済みタスク: 薄く残す + チェックは穏やかな success 色 */
.home-onboarding-item.is-done .home-onboarding-label {
  color: var(--fg-subtle);
  text-decoration: line-through;
  text-decoration-color: var(--fg-subtle);
}
.home-onboarding-item.is-done .home-onboarding-icon {
  color: var(--success);
}
.home-onboarding-item.is-done .home-onboarding-link:hover {
  background: transparent;
  cursor: default;
}

/* オンボーディング内「てびき」リンク */
.home-onboarding-guide {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--accent);
  text-decoration: none;
}
.home-onboarding-guide:hover { text-decoration: underline; }

/* ---- 畳んだ時のピル ---- */
.home-onboarding-pill {
  display: none;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;            /* 右寄せ (コンテナは右端固定) */
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  color: var(--fg-base);
  font: inherit;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transition: border-color var(--transition-fast);
}
.home-onboarding-pill:hover { border-color: var(--accent); }
.home-onboarding-pill .ph { color: var(--fg-muted); font-size: 16px; }
.home-onboarding-pill-label { font-size: var(--text-sm); font-weight: 600; }
.home-onboarding-pill-progress { font-size: var(--text-xs); color: var(--fg-subtle); }
/* 畳んだ時: パネルを隠し、コンテナは中身幅に縮めてピルを表示 */
.home-onboarding.is-collapsed {
  width: auto;
  display: flex;
  justify-content: flex-end;
}
.home-onboarding.is-collapsed .home-onboarding-pill { display: inline-flex; }

/* ---- モバイル: 下部タブバーの上に逃がす ---- */
@media (max-width: 767px) {
  .home-onboarding {
    left: var(--space-4);
    right: var(--space-4);
    width: auto;
    bottom: calc(var(--bottom-tab-height) + env(safe-area-inset-bottom, 0px) + var(--space-3));
  }
  .home-onboarding.is-collapsed { left: auto; }
}

/* ============================================================
   Phase 1a 観測手帳 (2026-07-10): 新しい達成の静かな 1 行通知
   制約 §3-5 静か: モーダル / 音 / 紙吹雪なし. 淡い枠と背景で存在感を抑える.
   ============================================================ */
.achievement-notice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-surface-2);
}
.achievement-notice__icon {
  font-size: 1.5em;
  color: var(--accent);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}
.achievement-notice__body {
  flex: 1;
  min-width: 0;
}
.achievement-notice__title {
  font-weight: 500;
  font-size: var(--text-sm);
}
.achievement-notice__desc {
  font-size: var(--text-xs);
  margin-top: var(--space-1);
}
.achievement-notice__link {
  font-size: var(--text-xs);
  color: var(--fg-muted);
  text-decoration: underline;
  flex-shrink: 0;
}
.achievement-notice__link:hover,
.achievement-notice__link:focus-visible {
  color: var(--accent);
}