/* ── Ideas: what Starman can do (js/views/ideas.js). Theme colours come from styles.css ── */
.ideas-page { max-width: 780px; margin: 0 auto; padding: 0 24px 80px; } /* the content area gives the top space */
.ideas-header h1 { margin: 0; font-size: 2.1rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-main); }
.ideas-header p { margin: 8px 0 0; font-size: 0.95rem; color: var(--text-muted); line-height: 1.5; }

.ideas-search {
  display: flex; align-items: center; gap: 10px; margin-top: 20px; padding: 10px 14px;
  background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 12px; color: var(--text-muted);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.ideas-search:focus-within { border-color: var(--accent-blue); box-shadow: 0 0 0 3px var(--hover-primary); }
.ideas-search svg { width: 18px; height: 18px; flex-shrink: 0; }
.ideas-search-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: inherit; font-size: 0.95rem; color: var(--text-main); }
.ideas-search-input::placeholder { color: var(--text-muted); }

.ideas-body { margin-top: 28px; }
.ideas-section + .ideas-section { margin-top: 28px; }
.ideas-section-title { margin: 0 0 8px; padding: 0 14px; font-size: 1.05rem; font-weight: 600; color: var(--text-main); }
.ideas-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

.idea-row {
  width: 100%; display: flex; align-items: flex-start; gap: 16px; padding: 12px 14px; border: none; border-radius: 14px;
  background: transparent; text-align: left; cursor: pointer; font: inherit; color: inherit;
  transition: background-color 150ms ease;
}
@media (hover: hover) and (pointer: fine) { .idea-row:hover { background: var(--bg-surface-hover); } }
.idea-row:active { background: var(--hover-tertiary); }
.idea-row:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
.idea-icon { width: 40px; height: 40px; flex-shrink: 0; margin-top: 2px; border-radius: 27%; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.08); }
.idea-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.idea-title { font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--text-main); }
.idea-desc { font-size: 0.9rem; line-height: 1.55; color: var(--text-muted); }

.ideas-status, .ideas-empty { padding: 0 14px; font-size: 0.92rem; color: var(--text-muted); }
.ideas-retry {
  margin-left: 8px; border: 1px solid var(--border-color); background: var(--bg-surface); color: var(--text-main);
  font: inherit; font-size: 0.85rem; font-weight: 600; padding: 4px 10px; border-radius: 8px; cursor: pointer;
  transition: transform 120ms var(--ease-out);
}
.ideas-retry:active { transform: scale(0.97); }

/* The rows ease in once, when the ideas arrive */
.ideas-list.is-entering > li { animation: idea-in 260ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 30ms); }
@keyframes idea-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .ideas-list.is-entering > li { animation-name: idea-fade; animation-delay: 0ms; }
  @keyframes idea-fade { from { opacity: 0; } }
}

@media (max-width: 600px) {
  .ideas-page { padding: 0 16px 64px; }
  .ideas-header h1 { font-size: 1.7rem; }
  .idea-row { gap: 12px; padding: 10px; }
  .idea-icon { width: 34px; height: 34px; }
}