:root { --discovery-h: 320px; }
.discovery { height: var(--discovery-h); display: flex; flex-direction: column; gap: 8px; padding: 16px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper);
  color: var(--ink); font-family: var(--sans); text-align: left; min-width: 0; }
.discovery-title { min-height: 24px; font-size: var(--fs-17); font-weight: 500; line-height: 1.5; }
.discovery-status { height: 48px; flex: none; font-size: var(--fs-15); line-height: 1.5; color: var(--ink-soft); }
/* the bar fills as each source reports and fades once the last one has; it
   keeps its 4px either way, so nothing under it moves */
.discovery-meter { height: 4px; flex: none; background: var(--line); overflow: hidden; border-radius: var(--r-sm);
  opacity: 1; transition: opacity var(--t-page) var(--ease); }
.discovery-meter.is-done { opacity: 0; }
.discovery-fill { height: 100%; width: 0; background: var(--accent); transition: width var(--t-reveal) var(--ease); }
.discovery-body { flex: 1; min-height: 0; overflow: auto; scrollbar-gutter: stable;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.discovery-body::-webkit-scrollbar { width: 10px; height: 10px; }
.discovery-body::-webkit-scrollbar-track { background: transparent; }
.discovery-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-lg); }
.discovery-body::-webkit-scrollbar-thumb:hover { background: var(--accent); }
.discovery-body p { font-size: var(--fs-15); line-height: 1.5; margin: 0 0 8px; overflow-wrap: anywhere; }
.discovery-body a { color: var(--accent); text-decoration: underline; transition: color var(--t-hover) var(--ease); }
.discovery-body a:hover, .discovery-body a.is-hot { color: var(--accent-deep); }
.discovery-choice, .discovery-apply { display: block; width: 100%; min-height: 44px; margin-bottom: 4px;
  padding: 8px; text-align: left; cursor: pointer; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: var(--fs-15); line-height: 1.5;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: background-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease); }
.discovery-choice:hover, .discovery-choice.is-hot, .discovery-choice[aria-pressed="true"],
.discovery-apply:hover, .discovery-apply.is-hot { background: var(--paper-deep); border-color: var(--accent); color: var(--accent); }
/* Every fact is a card with its own icon, landing as it arrives (Wolf,
   2026-09-23). Facts sit in a grid; the observations under them take one line
   each, the full text on hover and in the profile. */
/* with a canopy the body is two columns: the sphere holds its place on the
   left for the whole collection, the cards arrive on the right */
.discovery-body.has-orb { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: start; }
.dv-orb { position: sticky; top: 0; width: 200px; aspect-ratio: 1 / 1; }
.dv-orb canvas { display: block; width: 100%; height: 100%; }
.dv-feed { min-width: 0; }
@media (max-width: 600px) {
  .discovery-body.has-orb { grid-template-columns: 1fr; }
  .dv-orb { position: static; width: 160px; margin-inline: auto; }
}
.dv-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.dv-evidence-list { margin-top: 8px; display: grid; gap: 8px; }
.dv-card {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; align-items: start;
  padding: 12px; background: var(--paper-deep); border: 1px solid var(--line); border-radius: var(--r-sm);
  opacity: 1; transform: none;
  transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease);
}
.dv-card.is-new { opacity: 0; transform: translateY(8px); }
.dv-icon { grid-row: 1 / span 2; color: var(--accent); }
.dv-label { font-size: var(--fs-13); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft); line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }
.dv-value { font-size: var(--fs-17); line-height: 1.5; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.dv-evidence .dv-value { font-size: var(--fs-15); color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) {
  .discovery *, .dv-card.is-new { animation: none; transition: none; }
  .dv-card.is-new { opacity: 1; transform: none; }
}
/* On the profile the collected data is one card that never scrolls: the
   primary facts and the first observations, and Learn More opening the rest
   in a dialog (Wolf, 2026-09-23). The card grows with what it holds. */
.discovery.discovery-summary { height: auto; gap: 12px; }
.discovery-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.discovery-summary .discovery-status { height: auto; min-height: 24px; }
.discovery-summary .discovery-apply { margin-bottom: 0; }
.discovery-summary .dv-evidence-list { margin-top: 0; }
/* the dialog: every field and every observation, whole */
.ld-body { margin-top: 24px; display: grid; gap: 16px; }
.ld-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.ld-evidence { display: grid; gap: 8px; }
.ld-card > :not(.dv-icon) { grid-column: 2; }
.ld-text { font-size: var(--fs-15); line-height: 1.5; color: var(--ink); min-width: 0; overflow-wrap: anywhere; max-width: 75ch; }
.ld-meta { font-size: var(--fs-15); line-height: 1.5; color: var(--ink-soft); min-width: 0; overflow-wrap: anywhere; }
.ld-src { justify-self: start; font-size: var(--fs-15); line-height: 1.5; color: var(--accent);
  text-decoration: underline; text-underline-offset: 4px; transition: color var(--t-hover) var(--ease); }
.ld-src:hover, .ld-src.is-hot { color: var(--accent-deep); }
.ld-body + .modal-actions { margin-top: 32px; }
@media (max-width: 600px) {
  .discovery-head { flex-wrap: wrap; }
}