.conversation-map {
  --map-critical: #9c3f37;
  --map-constructive: #23766f;
  border-block: 2px solid var(--ink);
  padding-block: 24px;
}
.map-heading { display: grid; gap: 12px; }
.map-kicker { margin: 0 0 3px; color: var(--muted); font: 700 .72rem/1 sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.map-status { margin: 0; max-width: 42rem; color: var(--muted); font-size: .88rem; }
.map-dek { margin: 0; max-width: 48rem; }
.map-legend { display: flex; flex-wrap: wrap; gap: 7px 15px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: .78rem; }
.map-legend li::before { content: ""; display: inline-block; width: .72rem; height: .72rem; margin-right: 5px; border-radius: 50%; vertical-align: -.05rem; background: var(--accent); }
.map-legend .topic-public-safety::before { background: #d27a63; }
.map-legend .topic-government::before { background: #d5ad54; }
.map-legend .topic-economy::before { background: #6da493; }
.map-legend .topic-community::before { background: #7f91b8; }
.map-frame { overflow-x: auto; border: 1px solid var(--line); background: var(--surface); }
.map-frame svg { display: block; width: 100%; min-height: 390px; }
.map-axis { stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 4 5; }
.axis-label { fill: var(--muted); font: 700 13px/1 sans-serif; letter-spacing: .03em; }
.quadrant-label { fill: var(--muted); opacity: .72; font: 600 11px/1 sans-serif; letter-spacing: .025em; }
.holding-title { fill: var(--ink); font: 700 13px/1 sans-serif; letter-spacing: .1em; }
.holding-note { fill: var(--muted); font: 500 12px/1 sans-serif; }
.bubble-leader { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; }
.bubble-anchor { fill: var(--ink); }
.map-bubble circle { fill: color-mix(in srgb, var(--accent) 72%, white); stroke: var(--surface); stroke-width: 3; transition: opacity .16s ease, stroke .16s ease; }
.map-bubble text { fill: var(--ink); font: 700 12px/1 sans-serif; pointer-events: none; }
.map-bubble.topic-public-safety circle { fill: #d27a63; }
.map-bubble.topic-government circle { fill: #d5ad54; }
.map-bubble.topic-economy circle { fill: #6da493; }
.map-bubble.topic-community circle { fill: #7f91b8; }
.map-bubble:hover circle, .map-bubble:focus circle, .map-bubble.is-active circle { stroke: var(--ink); stroke-width: 5; }
.map-bubble:focus { outline: none; }
.map-selection { margin: 0; color: var(--muted); font-size: .82rem; }
.map-evidence-grid { display: grid; gap: 10px; }
.map-evidence { scroll-margin-top: 16px; padding: 14px; border-left: 4px solid var(--accent); background: var(--surface); }
.map-evidence.is-active { box-shadow: 0 0 0 2px var(--ink); }
.map-evidence h3, .map-evidence p { margin: 0; }
.map-evidence p { color: var(--muted); font-size: .82rem; }
.map-evidence ul { margin: 10px 0 0; padding-left: 18px; }
.map-evidence li { margin-block: 5px; }
.map-evidence li span { display: block; color: var(--muted); font-size: .76rem; }
.map-evidence a { color: var(--ink); }
.map-method { margin: 0; color: var(--muted); font-size: .8rem; }
@media (min-width: 700px) {
  .map-heading { grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr); align-items: end; }
  .map-evidence-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .map-frame { margin-inline: -20px; border-inline: 0; }
  .map-frame svg { min-width: 520px; }
}
@media (prefers-reduced-motion: reduce) {
  .map-bubble circle { transition: none; }
}