/* Research: claims, evidence, identities, angles and run history. Tokens and base components live in
   /styles.css; follow ../DESIGN.md. Claims and sources are white cards; quotes sit in the cool tint
   with a thin navy rule; source links are accent navy; every verdict is a UI.badge pill. */

/* --- Claim, identity and angle cards --- */
.claim-card, .identity-card, .angle-card { margin-top: 12px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow-wrap: anywhere; }
.claim-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.claim-heading small { margin-left: auto; font-size: var(--fs-small); color: var(--text-2); }
.claim-heading h3 { font-size: var(--fs-lead); }
.claim-heading strong { font-size: var(--fs-lead); }
.claim-text { margin: 10px 0 0; font-size: var(--fs-lead); line-height: 1.6; color: var(--text); white-space: pre-wrap; }
.claim-card blockquote, .identity-card blockquote, .fact blockquote { margin: 12px 0 0; padding: 12px 16px; border-left: 3px solid var(--navy-600); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--surface-tint); color: var(--text); font-size: var(--fs-body); line-height: 1.65; white-space: pre-wrap; }
.claim-card .notice { margin: 12px 0 0; }
.claim-card .notice strong { display: block; margin-bottom: 4px; }
.claim-card .notice ul { margin: 0; padding-left: 18px; }
.validation-reason { margin-top: 12px; font-size: var(--fs-small); line-height: 1.6; color: var(--text-2); }
.claim-card .hint, .identity-card .hint, .angle-card .hint { margin-top: 8px; color: var(--text-2); }
.source-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-hair); font-size: var(--fs-small); }
.source-links a { color: var(--accent); font-weight: 600; }
.source-links:empty { display: none; }
.hypothesis-note { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 5px 10px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--status-warn-text); font-size: var(--fs-small); font-weight: 500; }
.hypothesis-note::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--status-warn-dot); box-shadow: var(--status-dot-ring); }
/* Angles: the conversation hook, marked with a thin navy rule (gold is reserved for selection). */
.angle-card { border-left: 3px solid var(--navy-600); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.angle-card p { margin-top: 8px; font-size: var(--fs-lead); line-height: 1.6; color: var(--text); }
.angle-card p.hint { font-size: var(--fs-small); }
.identity-card p { margin-top: 6px; font-size: var(--fs-body); color: var(--text-2); }
.identity-card .history { margin-top: 12px; }
.identity-card .fact { margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--border-hair); border-bottom: 0; }
.identity-card .fact:first-child { border-top: 0; padding-top: 0; }
.current-run { margin-top: 12px; }

/* --- Source captures: white cards with a disclosure header; the passage sits on the sunken surface --- */
.source-capture { margin-top: 12px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.source-capture > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 16px; list-style: none; cursor: pointer; font-size: var(--fs-body); font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.source-capture > summary::-webkit-details-marker { display: none; }
.source-capture > summary::before { content: ''; flex: none; width: 6px; height: 6px; border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: translateY(-1px) rotate(-45deg); }
.source-capture[open] > summary { border-bottom: 1px solid var(--border-hair); background: var(--surface-sunken); }
.source-capture[open] > summary::before { transform: translateY(-2px) rotate(45deg); }
.source-capture > summary:hover { background: var(--surface-sunken); }
.source-capture > summary .pill { margin-left: auto; }
.source-capture > :not(summary) { margin-left: 16px; margin-right: 16px; }
.source-capture > :not(summary):last-child { margin-bottom: 14px; }
.source-details { margin: 12px 16px 14px; font-size: var(--fs-small); }
.source-details .data-fields { margin-top: 10px; }
.source-details pre { margin-top: 10px; }
.source-capture > ul { padding-left: 18px; font-size: var(--fs-small); line-height: 1.6; }
.source-capture > ul li + li { margin-top: 8px; }
.source-capture > ul .hint { margin-top: 2px; }
.source-capture > .hint { margin-top: 10px; color: var(--text-2); }

/* --- Gaps: honest uncertainty, dashed like the landing page's error box --- */
.research-gaps { margin-top: 16px; padding: 14px 16px; border: 1px dashed var(--navy-400); border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--text-2); }
.research-gaps h3 { margin-bottom: 6px; font-size: var(--fs-body); }
.research-gaps ul { margin: 0; padding-left: 18px; font-size: var(--fs-small); line-height: 1.65; }

/* --- Run history: a compact table with a details row per run --- */
.run-table { margin-top: 12px; }
.run-table table { font-size: var(--fs-small); }
.run-table td { vertical-align: middle; }
.run-table td small { display: block; margin-top: 2px; color: var(--text-2); font: var(--fs-caption)/1.4 var(--font-body); font-variant-numeric: tabular-nums; }
.run-table tr.run-details > td { padding: 0 14px 12px; vertical-align: top; background: var(--surface-sunken); }
.run-table tbody tr.run-details:hover > td { background: var(--surface-sunken); }
.run-table .history { margin-top: 10px; padding: 10px 14px 12px; border: 1px solid var(--border-hair); border-radius: var(--radius-sm); background: var(--surface); }
.run-table .history .history { margin-top: 10px; padding: 0; border: 0; }
.run-table .history summary { font-size: var(--fs-small); }
.run-table .run-metrics { margin-top: 8px; font-size: var(--fs-small); }
.run-table .hint { margin-top: 6px; color: var(--text-2); }
.run-table .notice { margin: 10px 0 0; }
.run-table .search-trail { margin-top: 10px; }
.run-table .source-capture { margin-top: 10px; }
.run-metrics dd { color: var(--text); font-weight: 500; }

/* --- Pilot cards: counts as quiet chips --- */
.pilot-counts { gap: 6px 8px; padding: 12px 0 4px; }
.pilot-counts span { display: inline-flex; align-items: center; padding: 2px 10px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--text-2); font-size: var(--fs-caption); font-weight: 500; font-variant-numeric: tabular-nums; }
.pilot-card .angle-card { margin-top: 12px; }

@media (max-width: 720px) {
  .claim-card, .identity-card, .angle-card { padding: 14px; }
  .claim-heading small { margin-left: 0; flex-basis: 100%; }
  .source-capture > summary .pill { margin-left: 0; }
  .run-table tr.run-details > td { padding: 0 10px 10px; }
}