/* Idea record page (U8) — one page per graduated idea, a reduced view for the rest.

   THE THREE ABSENCES ARE STYLED APART ON PURPOSE (R32). `withheld`, `unavailable` and `absent` are
   three different next actions — ask for access, go and find the source, accept there was never
   anything there — so they never share a colour and never render as an em dash. A reader who cannot
   tell them apart at a glance will chase the wrong one, which is the whole failure this page exists
   to prevent. */

.ideas-view {
  min-width: 0;
  padding: 0;
  background: #fbfbf8;
}

.idea-view-header {
  max-width: 1120px;
  margin: 0 auto;
  padding: 36px 28px 8px;
}

.idea-view-header h1 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.01em;
}

.idea-view-header p {
  margin: 6px 0 0;
  color: #6b7280;
  font-size: 13px;
}

.idea-view-body {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 24px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px 28px 48px;
  align-items: start;
}

@media (max-width: 860px) {
  .idea-view-body { grid-template-columns: minmax(0, 1fr); }
}

.idea-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.idea-list-button {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  font: inherit;
}

.idea-list-item-selected .idea-list-button {
  border-color: #111827;
  box-shadow: 0 1px 0 #111827;
}

.idea-list-label { font-size: 14px; }

.idea-list-status,
.idea-list-reduced {
  font-size: 11px;
  color: #6b7280;
  text-transform: lowercase;
}

.idea-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.idea-page-header h2 {
  margin: 0;
  font-size: 20px;
}

.idea-page-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 12px;
  color: #6b7280;
}

.idea-page-note {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
}

.idea-section {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px 16px;
}

.idea-section-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.idea-section-header h3 {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.01em;
}

.idea-statements {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.idea-statement {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  line-height: 1.45;
}

/* A statement with a decision behind it carries the drill-down; a narrative one carries no
   affordance at all (R29). The left rule is the visible half of that difference. */
.idea-statement-backed { border-left: 2px solid #111827; padding-left: 8px; }
.idea-statement-narrative { border-left: 2px solid transparent; padding-left: 8px; color: #374151; }

.idea-drill {
  border: 1px solid #d1d5db;
  background: #f9fafb;
  border-radius: 999px;
  font-size: 11px;
  padding: 1px 8px;
  cursor: pointer;
}

.idea-absence {
  font-size: 11px;
  border-radius: 999px;
  padding: 1px 8px;
  border: 1px solid;
  white-space: nowrap;
}

.idea-absence-withheld { color: #92400e; border-color: #fcd34d; background: #fffbeb; }
.idea-absence-unavailable { color: #9a3412; border-color: #fdba74; background: #fff7ed; }
.idea-absence-absent { color: #4b5563; border-color: #d1d5db; background: #f3f4f6; }

.idea-absence-reason {
  font-size: 11px;
  color: #6b7280;
}

.idea-decision {
  border-top: 1px solid #f3f4f6;
  padding-top: 10px;
  margin-top: 10px;
}

.idea-decision-header {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: #6b7280;
}

.idea-decision-detail { display: none; }
.idea-decision-open .idea-decision-detail { display: block; }

.idea-decision-detail h4 {
  margin: 10px 0 4px;
  font-size: 12px;
  color: #374151;
}

.idea-quote {
  margin: 8px 0;
  padding: 6px 10px;
  border-left: 3px solid #d1d5db;
  color: #374151;
  font-size: 13px;
  white-space: pre-wrap;
}

.idea-source,
.idea-empty,
.idea-origin {
  margin: 6px 0 0;
  font-size: 12px;
  color: #6b7280;
}

.idea-error {
  margin: 0 auto;
  max-width: 1120px;
  padding: 8px 28px;
  color: #b91c1c;
  font-size: 13px;
}

.idea-lineage-chain,
.idea-lineage-descendants,
.idea-people {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}

.idea-lineage-level {
  font-size: 11px;
  color: #6b7280;
  margin-right: 8px;
}

.idea-lineage-opaque { color: #6b7280; }

.idea-lineage-truncated {
  margin: 6px 0 0;
  font-size: 12px;
  color: #6b7280;
}