/* Concentric prototype map: polar transitions and contribution radii, with local SVG. */
#view-graph { height:100%; min-height:380px; }
.graph-view {
  --graph-ink: var(--fg);
  --graph-muted: var(--muted);
  --graph-line: var(--line);
  color: var(--graph-ink);
  position:relative;
  height:100%;
  width:100%;
  margin:0;
  min-width: 0;
  padding:0;
}
.graph-view [hidden] { display: none !important; }
.graph-tools { position:absolute; top:10px; left:12px; right:12px; z-index:1; align-items:center; display:flex; gap:10px; }
.graph-weights { position:absolute; left:14px; bottom:12px; z-index:1; display:flex; align-items:center; gap:5px; margin:0; }
.graph-weights > span { color:var(--graph-muted); font-size:.72rem; margin-right:4px; }
.graph-weights .graph-weight { font-size:.72rem; padding:0; width:28px; height:28px; border-color:var(--line); border-radius:50%; }
.graph-weights .graph-weight[aria-pressed="true"], .graph-weights .graph-weight[aria-pressed="true"]:hover:not(:disabled) { color:var(--neu-0); background:var(--kirigami-600); border-color:var(--kirigami-600); }
.graph-search-label {
  align-items: center;
  background: var(--neu-0);
  border: 1px solid var(--graph-line);
  border-radius: 8px;
  display: flex;
  flex:1;
  max-width:185px;
  gap:8px;
  min-width: 0;
  padding: 0 12px;
}
.graph-search-label svg { color: var(--neu-400); fill: none; flex-shrink: 0; stroke: currentColor; stroke-width: 1.6; }
.graph-search-label:focus-within { border-color: var(--kirigami-500); box-shadow: 0 0 0 3px var(--kirigami-100); }
.graph-search-label .graph-search {
  background: none;
  border: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  font-size: .82rem;
  margin: 0;
  min-width: 0;
  outline: 0;
  padding:8px 0;
  width: 100%;
}
.graph-reset { margin-left:auto; background:var(--neu-0); border: 0; color: var(--kirigami-600); cursor: pointer; flex-shrink: 0; font: inherit; font-size: .8rem; padding: 10px 2px; }
.graph-map { position:absolute; inset:8px; }
.graph-svg { position:absolute; inset:0; display:block; width:100%; height:100%; overflow:visible; }
.graph-backdrop { fill: var(--neu-0); }
.graph-reading-ring { transform-origin:380px 380px; animation:graph-reading 4s linear infinite; pointer-events:none; }
.graph-reading-ring path { fill:none; stroke:var(--kirigami-500); stroke-width:10; }
.graph-reading-label { fill:var(--kirigami-700); font-size:27px; font-weight:600; }
.graph-proposal-marker { fill:var(--kirigami-700); stroke:var(--neu-0); stroke-width:1.5; pointer-events:none; }
.graph-node.has-proposal .graph-segment { stroke-width:1.6; stroke-opacity:1; }
@keyframes graph-reading { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .graph-reading-ring { animation:none; } }
.graph-node {
  --node-ink: var(--purple-ink);
  --node-color: var(--purple);
  --node-light: var(--purple-bg);
  cursor: pointer;
  outline: none;
  transition: opacity 160ms ease;
}
.graph-tone-1 { --node-ink: var(--tree-ink); --node-color: var(--tree); --node-light: var(--tree-bg); }
.graph-tone-2 { --node-ink: var(--kirigami-700); --node-color: var(--kirigami-500); --node-light: var(--kirigami-100); }
.graph-tone-3 { --node-ink: var(--beach-ink); --node-color: var(--beach); --node-light: var(--beach-bg); }
.graph-tone-4 { --node-ink: var(--coral-ink); --node-color: var(--coral); --node-light: var(--coral-bg); }
.graph-node-input { --node-ink: var(--kirigami-700); --node-color: var(--kirigami-500); --node-light: var(--kirigami-100); }
.graph-segment { fill: var(--node-light); stroke: var(--node-color); stroke-width: .8; transition: fill 160ms ease, stroke-width 160ms ease; }
.graph-state-waiting .graph-segment, .graph-state-empty .graph-segment { fill: var(--neu-0); stroke-opacity: .7; }
.graph-state-sent .graph-segment, .graph-state-fresh .graph-segment { fill: var(--node-color); }
.graph-state-sent .graph-node-label, .graph-state-fresh .graph-node-label { fill: var(--neu-0); }
.graph-state-outdated_answer .graph-segment, .graph-state-outdated_method .graph-segment, .graph-state-changed .graph-segment { stroke-dasharray: 4 3; stroke-width: 1.8; }
.graph-state-failed .graph-segment { fill: var(--coral-bg); stroke: var(--coral-ink); stroke-width: 1.8; }
.graph-state-locked .graph-segment { stroke-dasharray: 2 2; stroke-width: 2; }
.graph-node-label { fill: var(--node-ink); font-family: inherit; font-size: 11.5px; font-weight: 500; pointer-events: none; }
.graph-node.is-selected .graph-segment, .graph-node:hover .graph-segment, .graph-node:focus-visible .graph-segment { stroke: var(--node-ink); stroke-opacity: 1; stroke-width: 3; }
.graph-node:focus-visible .graph-segment { stroke-dasharray: 5 2; }
.graph-node.is-dimmed { opacity: .18; }
.graph-edge { fill: none; opacity: .055; pointer-events: none; stroke: var(--kirigami-600); stroke-width: .8; transition: opacity 160ms ease; }
.graph-edge.is-optional { stroke-dasharray: 4 4; }
.graph-edge.is-context { stroke-dasharray: 1 4; }
.graph-edge.is-connected { opacity: .6; stroke-width: 1.7; }
.graph-edge.is-dimmed { opacity: .015; }
.graph-flow { fill:none; stroke:var(--kirigami-500); stroke-width:2.5; stroke-linecap:round; stroke-dasharray:1 15; opacity:0; pointer-events:none; }
.graph-edge.is-connected + .graph-flow { opacity:.8; animation:graph-flow 1.8s linear 3; }  /* D90: shows the way, then stops */
.graph-node.is-updated .graph-segment { animation:graph-arrival 900ms ease-out; }
@keyframes graph-flow { to { stroke-dashoffset:-32; } }
@keyframes graph-arrival { 0% { stroke-width:4; stroke:var(--kirigami-500); } }
.graph-paused *, .graph-paused .graph-edge.is-connected + .graph-flow { animation-play-state:paused !important; }
@media (prefers-reduced-motion:reduce) {
  .graph-edge.is-connected + .graph-flow { animation:none; opacity:0; }
  .graph-node.is-updated .graph-segment { animation:none; }
}
.graph-summary { pointer-events: none; text-anchor: middle; transition:opacity 240ms ease; }
.graph-has-selection .graph-summary { opacity: .13; }
.graph-summary-count { fill: var(--kirigami-700); font-size: 36px; font-weight: 600; }
.graph-summary-total { fill: var(--neu-300); font-size: 24px; font-weight: 400; }
.graph-summary-label { fill: var(--graph-muted); font-size: 14px; }
.graph-summary-progress { fill: var(--graph-muted); font-size: 11px; }
.graph-key, .graph-help { color: var(--graph-muted); font-size: .73rem; line-height: 1.5; margin: 0; text-align: center; }
.graph-help { margin-top: 6px; }
.graph-mode-name { font-size:.72rem; background:var(--neu-0); padding:3px; }
.graph-no-matches { position:absolute; top:42px; left:12px; z-index:1; background:var(--neu-0); color: var(--graph-muted); font-size: .83rem; padding: 8px 0; }
.graph-view button:focus-visible, .graph-view a:focus-visible { outline: 2px solid var(--kirigami-600); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .graph-node, .graph-segment, .graph-edge, .graph-summary { transition: none; } }
@media (max-width: 480px) {
  .graph-map { inset:5px; }
  .graph-search-label { max-width:180px; }
  .graph-tools { gap: 8px; }
  .graph-search-label { padding: 0 9px; }
  .graph-search-label .graph-search { font-size: .72rem; }
  .graph-search-label svg { height: 16px; width: 16px; }
  .graph-reset { font-size: .72rem; }
  .graph-key { font-size: .65rem; }
}