/* ============================================================================
   Annotated flowchart — adapted from
   ~/claude/design-templates/patterns/05-illustrations/annotated-flowchart.md
   ============================================================================ */

.canvas {
  border: var(--border);
  border-radius: var(--radius-panel);
  background: var(--white);
  padding: 28px;
  overflow-x: auto;
}

svg.flow {
  display: block;
  width: 100%;
  height: auto;
}

.flow text {
  font-family: var(--mono);
  font-size: 12px;
  fill: var(--slate);
  pointer-events: none;
}
.flow text.sub { font-size: 10px; fill: var(--gray-500); }
.flow text.lbl { font-size: 10px; fill: var(--gray-500); }
.flow text.lbl-no { fill: var(--rust); }
.flow text.lbl-yes { fill: var(--olive); }

/* node base */
.node { cursor: pointer; transition: transform 120ms ease; }
.node:hover { transform: translateY(-1px); }
.node:focus { outline: none; }

/* node shapes */
.node rect       { fill: var(--white); stroke: var(--gray-300); stroke-width: 1.5; rx: 8; }
.node.term rect  { fill: var(--gray-150); stroke: var(--gray-300); rx: 22; }
.node.gate path  { fill: var(--white); stroke: var(--gray-300); stroke-width: 1.5; }
.node.ok rect    { fill: rgba(120,140,93,0.12); stroke: var(--olive); }
.node.bad rect   { fill: rgba(176,74,63,0.10); stroke: var(--rust); }
.node.human rect { fill: rgba(217,119,87,0.08); stroke: var(--clay); stroke-dasharray: 0; }

/* approval gate variant — diamond stroke clay to flag human approval */
.node.gate.approval path { stroke: var(--clay); }

/* active state */
.node.active rect,
.node.active path {
  stroke: var(--clay);
  stroke-width: 2.5;
}
.node.active rect { fill: rgba(217,119,87,0.05); }

/* edges */
.edge {
  stroke: var(--gray-500);
  stroke-width: 1.5;
  fill: none;
  marker-end: url(#arrow);
}
.edge.no  { stroke: var(--rust);  stroke-dasharray: 4 4; marker-end: url(#arrow-rust); }
.edge.yes { stroke: var(--olive); marker-end: url(#arrow-olive); }

/* legend */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 18px;
  font-size: 12px;
  color: var(--gray-700);
  font-family: var(--sans);
}
.legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.chip {
  width: 22px;
  height: 14px;
  border: 1.5px solid var(--gray-300);
  border-radius: 4px;
  background: var(--white);
}
.chip.gate { transform: rotate(45deg); width: 12px; height: 12px; border-radius: 2px; }
.chip.ok   { background: rgba(120,140,93,0.12); border-color: var(--olive); }
.chip.bad  { background: rgba(176,74,63,0.10); border-color: var(--rust); }
.chip.human { background: rgba(217,119,87,0.08); border-color: var(--clay); }
.chip.approval { transform: rotate(45deg); width: 12px; height: 12px; border-radius: 2px; border-color: var(--clay); }

/* aside detail panel */
aside.panel {
  position: sticky;
  top: 88px;
  border: var(--border);
  border-radius: var(--radius-panel);
  background: var(--white);
  padding: 20px 22px 22px;
}
aside.panel .hint {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-500);
  margin-bottom: 14px;
}
aside.panel h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.005em;
  margin-bottom: 6px;
}
aside.panel .meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gray-500);
  margin-bottom: 14px;
}
aside.panel .body {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--gray-700);
  margin-bottom: 14px;
}
aside.panel .body code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--gray-150);
  padding: 1px 4px;
  border-radius: 4px;
}
aside.panel pre {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.55;
  background: var(--gray-150);
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  padding: 10px 12px;
  white-space: pre-wrap;
  color: var(--slate);
  margin-bottom: 12px;
  overflow-x: auto;
}
aside.panel .policy-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  background: var(--oat);
  color: var(--slate);
  padding: 3px 8px;
  border-radius: 4px;
  margin-top: 4px;
}

/* keyboard focus ring on the canvas */
.canvas:focus-within {
  outline: 2px solid var(--clay);
  outline-offset: 2px;
}
.node:focus-visible rect,
.node:focus-visible path {
  stroke: var(--clay);
  stroke-width: 2.5;
}