/* DFS / BFS / Topological sort page — extends maxflow.css */

.traversal-page { /* alias for suite-page */
  display: grid;
  grid-template-columns: 1fr 380px;
  height: calc(100vh - 38px);
}
.traversal-canvas {
  position: relative;
  background:
    radial-gradient(circle at 1px 1px, oklch(0.85 0.01 80) 1px, transparent 1px) 0 0/24px 24px,
    var(--bg);
  overflow: hidden;
}
.traversal-canvas svg {
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
}
.traversal-canvas.running svg { cursor: default; }

/* Reuse node styles from maxflow.css; add state classes specific to DFS */
.node.gray circle { fill: var(--cool-soft); stroke: var(--cool); stroke-width: 2; }
.node.black circle { fill: oklch(0.25 0.02 80); stroke: oklch(0.25 0.02 80); }
.node.black text { fill: white; }
.node.start circle { stroke: var(--good); stroke-width: 2.5; }

/* Time labels next to nodes */
.time-label {
  font-family: 'system-ui', monospace;
  font-size: 9.5px;
  fill: var(--ink-soft);
  text-anchor: middle;
  pointer-events: none;
}

/* Edge kinds */
.edge.tree-edge .line { stroke: var(--good); stroke-width: 2.5; }
.edge.back-edge .line { stroke: oklch(0.55 0.18 25); stroke-width: 2.5; stroke-dasharray: 6 4; }
.edge.forward-edge .line { stroke: var(--cool); stroke-width: 2; stroke-dasharray: 2 4; }
.edge.cross-edge .line { stroke: oklch(0.55 0.12 290); stroke-width: 2; stroke-dasharray: 2 4; }
.edge.active-edge .line { stroke: var(--accent); stroke-width: 3; }

/* Stack / queue display */
.frontier-display {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.frontier-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  font-family: 'system-ui', monospace;
  font-size: 12px;
}
.frontier-row .label {
  font-family: 'system-ui', sans-serif;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 600;
  width: 56px;
}
.frontier-chip {
  background: var(--cool-soft);
  border: 1px solid var(--cool);
  color: oklch(0.32 0.1 245);
  border-radius: 5px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 500;
}
.frontier-chip.front { background: var(--cool); color: white; }
.frontier-chip.top { background: var(--cool); color: white; }
.frontier-arrow {
  font-size: 10px;
  color: var(--muted);
}

/* Discovery / finish table */
.times-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'system-ui', monospace;
  font-size: 11.5px;
  margin-top: 4px;
}
.times-table th, .times-table td {
  text-align: center;
  padding: 4px 6px;
  border-bottom: 1px solid var(--line);
}
.times-table th {
  font-family: 'system-ui', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 600;
  border-bottom: 1px solid var(--line-strong);
}
.times-table td.empty { color: var(--muted); }
.times-table tr.current { background: var(--accent-soft); }

/* Topo order chips */
.topo-display {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  align-items: center;
  font-family: 'system-ui', monospace;
  font-size: 12px;
}
.topo-chip {
  background: var(--good-soft);
  border: 1px solid var(--good);
  color: oklch(0.32 0.1 145);
  border-radius: 5px;
  padding: 2px 8px;
  font-weight: 500;
}

/* (algo-chip / dir-toggle moved to maxflow.css for sharing) */