/* Metatron Health Discovery v4 — graph-only additions. */
.hero-discovery-meta {
  display: flex;
  align-items: baseline;
  gap: .55rem 1rem;
  flex-wrap: wrap;
  max-width: 700px;
  margin-top: .75rem;
  font-size: .75rem;
}

.hero-discovery-meta a {
  color: var(--forest);
  font-weight: 700;
}

.hero-discovery-meta span {
  color: var(--ink-2);
}

.graph-explorer {
  margin: 0 clamp(1rem, 9vw, 10rem) var(--space-13);
  border-top: 1px solid var(--line);
  scroll-margin-top: 84px;
}

.graph-head {
  display: grid;
  grid-template-columns: minmax(240px, .8fr) minmax(300px, 1.2fr);
  gap: 1rem 6vw;
  align-items: end;
  padding: var(--space-5) 0;
}

.graph-head h2 {
  margin: .1em 0 .25em;
  font: clamp(2rem, 4vw, 3.8rem)/1 var(--serif);
  letter-spacing: -.04em;
}

.graph-head p {
  max-width: 700px;
  margin: 0;
  color: var(--ink-2);
}

.graph-tools {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: .75rem;
  align-items: center;
  padding: .8rem 0;
  border-block: 1px solid var(--line);
}

.graph-filter {
  min-height: 42px;
  border: 1px solid var(--forest);
  background: var(--white);
  color: var(--ink);
  padding: .65rem .8rem;
}

.graph-stats,
.graph-legend {
  display: flex;
  gap: .65rem 1rem;
  flex-wrap: wrap;
  align-items: center;
  color: var(--ink-2);
  font-size: .72rem;
}

.graph-legend {
  padding: .7rem 0;
}

.graph-legend span::before {
  display: inline-block;
  width: .62rem;
  height: .62rem;
  margin-right: .38rem;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.graph-legend .entity-key { color: var(--forest); }
.graph-legend .claim-key { color: var(--amber); }
.graph-legend .source-key { color: #697b72; }

.graph-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, .36fr);
  border: 1px solid var(--line);
  background: var(--white);
}

.graph-viewport {
  min-width: 0;
  overflow-x: auto;
  background:
    linear-gradient(90deg, rgba(23, 63, 53, .035) 1px, transparent 1px),
    linear-gradient(rgba(23, 63, 53, .035) 1px, transparent 1px);
  background-size: 32px 32px;
}

.evidence-graph {
  display: block;
  width: 100%;
  min-width: 780px;
  height: 570px;
}

.graph-edge {
  stroke: #bac5be;
  stroke-width: 1.2;
  transition: opacity 160ms ease, stroke 160ms ease;
}

.graph-node {
  cursor: pointer;
  outline: none;
}

.graph-node circle {
  fill: var(--paper);
  stroke-width: 2;
  pointer-events: all;
  transition: fill 160ms ease, r 160ms ease, opacity 160ms ease;
}

.graph-node.entity circle { stroke: var(--forest); }
.graph-node.claim circle { stroke: var(--amber); }
.graph-node.source circle { stroke: #697b72; }
.graph-node text {
  fill: var(--ink);
  font: 12px var(--sans);
  pointer-events: all;
}

.graph-node:hover circle,
.graph-node:focus circle,
.graph-node.is-selected circle {
  fill: var(--forest);
}

.graph-node:hover text,
.graph-node:focus text,
.graph-node.is-selected text {
  font-weight: 700;
}

.graph-node.is-muted,
.graph-edge.is-muted {
  opacity: .24;
}

.graph-detail {
  min-height: 570px;
  padding: 1.25rem;
  border-left: 1px solid var(--line);
  background: var(--paper-deep);
}

.graph-detail .eyebrow {
  margin-bottom: .65rem;
}

.graph-detail h3 {
  margin: 0 0 .7rem;
  font: clamp(1.45rem, 2.4vw, 2rem)/1.1 var(--serif);
}

.graph-detail p {
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.graph-detail dl {
  margin: 1rem 0;
  border-top: 1px solid var(--line);
}

.graph-detail dl div {
  padding: .65rem 0;
  border-bottom: 1px solid var(--line);
}

.graph-detail dt {
  color: var(--ink-2);
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.graph-detail dd {
  margin: .2rem 0 0;
}

.graph-empty {
  padding: 1.25rem;
  color: var(--red);
}

@media (max-width: 1000px) {
  .graph-head,
  .graph-layout {
    grid-template-columns: 1fr;
  }
  .graph-detail {
    min-height: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

@media (max-width: 640px) {
  .graph-tools { grid-template-columns: 1fr; }
  .evidence-graph { height: 520px; }
}

@media (prefers-reduced-motion: reduce) {
  .graph-edge,
  .graph-node circle {
    transition: none;
  }
}