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

/* 上部の常時表示入力欄 */
.idea-composer {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
}
.idea-composer textarea {
  width: 100%;
  min-height: 80px;
  background: transparent;
  border: none;
  resize: vertical;
  color: var(--fg-base);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  padding: 0;
}
.idea-composer textarea:focus { outline: none; }
.idea-composer .composer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}

/* タイムライン(PC/タブで 2 列、狭幅で 1 列に自動復帰) */
.idea-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
/* E-1: 760→767 に正規化(同ファイルの .idea-actions も 767px。孤立値を解消) */
@media (max-width: 767px) {
  .idea-list {
    grid-template-columns: 1fr;
  }
}
.idea-card {
  position: relative;
  /* 地色・境界線は components.css のカード共通土台(E-2)へ集約 */
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: border-color var(--transition-fast);
}
.idea-card:hover { border-color: var(--border-strong); }
/* B-1: 検索結果からアンカー遷移した時、どのカードがヒットか分かるよう強調(点滅なし=reduced-motion安全) */
.idea-card:target { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.idea-card.is-used { opacity: 0.6; }

.idea-card .idea-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}
/* アイデア本文の共通スタイル (マクロ render_idea_content から出力) */
.idea-content {
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--fg-base);
  font-family: var(--font-sans);
}
.idea-content a { color: var(--accent); }
.idea-content a:hover { color: var(--accent-hover); }

/* clamp バリアント (ダッシュボードのカード等で3行省略) */
.idea-content--clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* clamp は pre-wrap と相性が悪いので normal に上書き */
  white-space: normal;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* idea-card 内ではフォントを大きめに(個別の本文ビュー用) */
.idea-card .idea-content {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}
.idea-card .idea-meta {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--fg-subtle);
  letter-spacing: var(--tracking-wide);
}

.idea-card .idea-actions {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: flex;
  gap: var(--space-1);
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.idea-card:hover .idea-actions,
.idea-card:focus-within .idea-actions { opacity: 1; }

@media (max-width: 767px) {
  .idea-card .idea-actions { opacity: 1; }
}

/* ============================================================
   ピン留め
   ============================================================ */

/* セクションヘッダー */
.ideas-section { margin-bottom: var(--space-6); }
.ideas-section--pinned { margin-bottom: var(--space-8); }
.ideas-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--fg-base);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.ideas-section-title i { color: var(--accent); font-size: 18px; }
.ideas-section-count {
  color: var(--fg-subtle);
  font-size: var(--text-sm);
  font-weight: 400;
  font-family: var(--font-mono);
  margin-left: var(--space-1);
}

/* ピン済カードの強調 (微細に左 2px ボーダー + 内側に少し余白) */
.idea-card.is-pinned {
  border-left: 2px solid var(--accent);
  /* 残り3辺は通常のborder。border-leftの増加分だけ右に詰まらないよう
     padding-leftを少し増やしてもよいが、余白の繊細さを保ちたいので
     現状の var(--space-5) のまま (左1px→2pxの差分は1pxなので無視できる) */
}

/* ピン留めボタン: 常時表示、右上の最も角寄り */
.idea-pin-form {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  margin: 0;
  z-index: 2;
}
.idea-pin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--fg-subtle);
  cursor: pointer;
  transition: background var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast),
              transform var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}
.idea-pin-btn:hover {
  background: var(--hover-overlay);
  color: var(--fg-base);
  border-color: var(--border);
}
.idea-pin-btn:disabled { cursor: progress; opacity: 0.5; }

/* ピン済み: アクセント塗りつぶし + accent-fg のアイコン色で
   どのカード背景・どのテーマでも明確に視認できる */
.idea-pin-btn.is-pinned {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}
.idea-pin-btn.is-pinned:hover {
  background: var(--accent-hover);
  color: var(--accent-fg);
  border-color: var(--accent-hover);
}
.idea-pin-btn.is-pinned:active {
  background: var(--accent-active);
  border-color: var(--accent-active);
}
.idea-pin-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.idea-pin-btn i { font-size: 18px; transition: transform var(--transition-fast); }
.idea-pin-btn.is-pinned i { transform: rotate(-12deg); }

/* 既存の .idea-actions は右上にピンが居座るため、その左へずらす */
.idea-card .idea-actions {
  /* もとの位置: top right space-3。ピン (32px) + space-1 ぶん左へ */
  right: calc(var(--space-3) + 32px + var(--space-1));
}

/* クイック入力の最近の入力でのピン強調 */
.quick-recent-item.is-pinned {
  color: var(--fg-base);
  border-left: 2px solid var(--accent);
  padding-left: var(--space-2);
  margin-left: calc(var(--space-2) * -1);
}
.quick-recent-pin {
  color: var(--accent);
  font-size: 12px;
  margin-right: var(--space-1);
  vertical-align: middle;
}

/* ダッシュボードのピン強調 */
.dash-card.is-pinned {
  border-left: 2px solid var(--accent);
}
.dash-card-pin { color: var(--accent); font-size: 12px; }

/* ============================================================
   アイデアタイプタグ (アイコン付き) + 未来構想 (vision) スタイル
   ============================================================ */
.idea-type-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.idea-type-tag i {
  font-size: 12px;
  opacity: 0.85;
}

/* 未来構想は中長期の構想を示す控えめな色合い (--accent ではなく --fg-muted) */
.tag.idea-type-vision,
.chip.idea-type-vision {
  color: var(--fg-muted);
  border-color: var(--border);
  background: var(--bg-surface-2);
}
.tag.idea-type-vision i,
.chip.idea-type-vision i {
  color: var(--fg-muted);
}
.chip.idea-type-vision:hover {
  color: var(--fg-base);
  border-color: var(--border-strong);
}

/* 8-I.5: アイデア一覧のメタ行に「この日の日記」リンク */
.idea-meta-journal-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.idea-meta-journal-link i {
  font-size: 11px;
  opacity: 0.7;
}