/* Structural rules shared by every skin. No color decisions here —
   each page defines --ink / --surface / --accent / --accent-2 / --muted / --line
   and these rules just consume them. */

.graph-wrap { width: 100%; max-width: 480px; }
.graph-wrap svg { width: 100%; height: auto; display: block; }

.gd-edge {
  stroke: var(--line, #999);
  stroke-width: 2;
  transition: stroke 0.2s ease, stroke-width 0.2s ease;
}
.gd-edge.path {
  stroke: var(--accent-2, var(--accent, #c33));
  stroke-width: 4;
}
.gd-arrowhead { fill: var(--line, #999); }
.gd-edge-label {
  font-size: 13px;
  font-weight: 600;
  fill: var(--ink-secondary, #666);
  text-anchor: middle;
  dominant-baseline: central;
  paint-order: stroke;
  stroke: var(--paper, #fff);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.gd-node circle {
  fill: var(--surface, #fff);
  stroke: var(--line, #999);
  stroke-width: 2;
  transition: fill 0.2s ease, stroke 0.2s ease;
}
.gd-node text {
  fill: var(--ink, #111);
  font-weight: 600;
  font-size: 15px;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
.gd-node.visited circle { fill: var(--muted, #ddd); }
.gd-node.current circle { stroke: var(--accent, #06c); stroke-width: 4; }
.gd-node.goal circle { stroke-dasharray: 4 3; }

.gd-controls {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin: 0.9rem 0;
  flex-wrap: wrap;
}
.gd-status { font-size: 0.9rem; min-height: 1.4em; }

.gd-table { border-collapse: collapse; font-variant-numeric: tabular-nums; width: 100%; max-width: 340px; }
.gd-table th, .gd-table td { padding: 0.3rem 0.7rem; text-align: left; }
.gd-table tr.current td { font-weight: 700; }

.mini-graphs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.25rem;
}
.mini-graph-card svg { width: 100%; height: auto; }