/* The access-path node canvas + ambient layer bar (2026-07-22 rebuild).
   Node states: .ghost (unvisited, low opacity) -> .active (pulsing) ->
   .visited (evidence landed, undecided) -> .cleared / .implicated / .untested
   (verdict snap). Status is never color alone: verdict glyphs ride each node
   and the results trace keeps its marks. */

.pw-canvas {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 8px 18px 26px;
}
/* The connector: one continuous line the dots sit on. */
.pw-canvas::before {
  content: "";
  position: absolute;
  left: 33px;
  top: 30px;
  bottom: 30px;
  width: 2px;
  background: linear-gradient(var(--copy-border), var(--copy-border));
  border-radius: 2px;
}

.pw-node {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 10px;
  border-radius: var(--card-radius-sm);
  cursor: pointer;
  transition: opacity 0.25s ease, background 0.2s ease;
}
.pw-node.ghost { opacity: var(--ghost-opacity); }
.pw-node:hover, .pw-node:focus-visible { opacity: 1; background: rgba(255, 255, 255, 0.03); outline: none; }
.pw-node:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.pw-node.filter-on { background: rgba(74, 222, 128, 0.07); }

.pw-node-dot {
  width: 16px; height: 16px; flex: none;
  border-radius: 50%;
  border: 2px solid var(--layer-untested);
  background: var(--app-bg);
  z-index: 1;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.pw-node.active .pw-node-dot {
  border-color: var(--accent);
  animation: pw-pulse var(--pulse-ms) ease-in-out infinite;
}
.pw-node.visited { opacity: 1; }
.pw-node.visited .pw-node-dot { border-color: var(--console-text); }
.pw-node.cleared { opacity: 1; }
.pw-node.cleared .pw-node-dot { border-color: var(--layer-cleared); background: rgba(74, 222, 128, 0.25); }
.pw-node.implicated { opacity: 1; }
.pw-node.implicated .pw-node-dot { border-color: var(--layer-implicated); background: rgba(251, 191, 36, 0.3); }
.pw-node.untested .pw-node-dot { border-color: var(--layer-untested); }

.pw-node-label {
  font-family: var(--font-heading);
  font-size: 13px;
  color: var(--plain-emph);
  min-width: 90px;
}
.pw-node.cleared .pw-node-label { color: var(--layer-cleared); }
.pw-node.implicated .pw-node-label { color: var(--layer-implicated); font-weight: 700; }

/* Evidence cells: the honeycomb in miniature. */
.pw-node-cells { display: flex; flex-wrap: wrap; gap: 3px; max-width: 220px; }
.pw-cell {
  width: 9px; height: 9px; border-radius: 2px;
  animation: pw-cell-in 0.3s ease;
}
.pw-cell.ok { background: var(--layer-cleared); }
.pw-cell.bad { background: var(--layer-implicated); }

.pw-node-verdict {
  margin-left: auto;
  font-family: var(--font-heading);
  font-size: 13px;
}
.pw-node.cleared .pw-node-verdict { color: var(--layer-cleared); }
.pw-node.implicated .pw-node-verdict { color: var(--layer-implicated); }
.pw-node.untested .pw-node-verdict { color: var(--layer-untested); }

/* ---- ambient bar ---- */
.pw-layer-bar {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  border-top: 1px solid var(--bar-border);
  background: var(--panel);
  flex: none;
  overflow-x: auto;
}
.pw-lb-item {
  display: flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid transparent; border-radius: 999px;
  padding: 3px 10px; font-size: 11px; font-family: var(--font-heading);
  color: var(--muted); cursor: pointer;
}
.pw-lb-item.ghost { opacity: var(--ghost-opacity); }
.pw-lb-item:hover, .pw-lb-item:focus-visible { opacity: 1; border-color: var(--copy-border); outline: none; }
.pw-lb-item.filter-on { border-color: var(--accent); color: var(--plain-emph); }
.pw-lb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--layer-untested); flex: none; }
.pw-lb-item.active { opacity: 1; color: var(--plain-emph); }
.pw-lb-item.active .pw-lb-dot { background: var(--accent); animation: pw-pulse var(--pulse-ms) ease-in-out infinite; }
.pw-lb-item.visited { opacity: 1; }
.pw-lb-item.visited .pw-lb-dot { background: var(--console-text); }
.pw-lb-item.cleared { opacity: 1; }
.pw-lb-item.cleared .pw-lb-dot { background: var(--layer-cleared); }
.pw-lb-item.implicated { opacity: 1; color: var(--layer-implicated); }
.pw-lb-item.implicated .pw-lb-dot { background: var(--layer-implicated); }

@keyframes pw-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.45); }
  50% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
}
@keyframes pw-cell-in {
  from { transform: scale(0.3); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pw-node.active .pw-node-dot, .pw-lb-item.active .pw-lb-dot { animation: none; }
  .pw-cell { animation: none; }
}