/* action-map.css · Halcyon candidate branch · role-lane flowchart.
   Layers the motion + interactive styling for the horizontal signal flowchart
   that action-map.js builds, on top of the shared Datum tokens in halcyon.css.
   The flowchart teaches one idea at a glance: a signal becomes one reviewed
   result through five steps — source pressure, failure mode, the assistant,
   the human gate, the result packet — and it replays per role lane.
   Every color is a token, so light and dark themes repaint for free. All
   motion is gated behind prefers-reduced-motion: no-preference with a fully
   drawn static fallback. Owns ONLY classes this surface introduces (am-*).

   ## Zero-trust — presentation only, no behavior, no network, no data path.
   ## Red-team — a stylesheet exposes no surface beyond visual emphasis;
      reduced motion removes all motion; gold stays reserved for the result. */

/* ---- the flowchart frame ------------------------------------------------- */
.am-flowchart {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 100% at 12% 0%, var(--accent-pale), transparent 55%),
    var(--surface-3);
  padding: var(--space-5) var(--space-4);
  margin-top: var(--space-4);
  overflow: hidden;
}
.am-flowchart svg {
  display: block;
  width: 100%;
  height: auto;
  /* hold an aspect ratio so the SVG has layout height before it is built
     (a zero-height SVG would defeat the IntersectionObserver reveal) */
  aspect-ratio: 880 / 200;
}

/* ---- the connecting rail + the traveling marker -------------------------- */
.am-rail {
  fill: none;
  stroke: var(--border);
  stroke-width: 2;
}
.am-rail-lit {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  opacity: 0.85;
}
.am-marker {
  fill: var(--accent);
}

/* ---- step nodes ---------------------------------------------------------- */
.am-step-box {
  fill: var(--surface);
  stroke: var(--border);
  stroke-width: 1.4;
  transition: stroke 0.2s ease, fill 0.2s ease;
}
.am-step.is-lit .am-step-box {
  stroke: var(--accent);
  fill: var(--accent-pale);
}
.am-step.is-result .am-step-box {
  stroke: var(--gold);
}
.am-step.is-result.is-lit .am-step-box {
  fill: var(--gold-pale);
  stroke: var(--gold);
}
.am-step-kicker {
  fill: var(--text-dimmer);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.am-step.is-result .am-step-kicker { fill: var(--gold); }
.am-step-label {
  fill: var(--text);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
}
.am-step-glyph {
  fill: none;
  stroke: var(--text-dim);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.am-step.is-lit .am-step-glyph { stroke: var(--accent); }
.am-step.is-result .am-step-glyph { stroke: var(--gold); }

/* the boundary marker between the assistant and the gate (records stay left) */
.am-boundary {
  stroke: var(--accent);
  stroke-width: 1.4;
  stroke-dasharray: 4 5;
  opacity: 0.7;
}
.am-boundary-label {
  fill: var(--text-dimmer);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ============================================================
   MOTION — only when the reader has not asked to reduce it.
   On a lane switch the rail lights, each step glows in sequence,
   a marker travels the chain, and the result lands gold.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .am-step {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
  }
  .am-step.is-revealing {
    animation: am-pop 0.42s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  .am-rail-lit {
    stroke-dasharray: var(--am-rail-len, 700);
    stroke-dashoffset: var(--am-rail-len, 700);
  }
  .am-rail-lit.is-drawing {
    animation: am-draw 1.4s cubic-bezier(0.33, 0, 0.2, 1) forwards;
  }
  .am-marker { opacity: 0; }
  .am-marker.is-traveling {
    animation: am-fade-marker 1.4s linear forwards;
  }
}

@keyframes am-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.94); }
  to { opacity: 1; transform: none; }
}
@keyframes am-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes am-fade-marker {
  0% { opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { opacity: 0; }
}

/* reduced motion: every step shown, rail fully lit, no marker travel */
@media (prefers-reduced-motion: reduce) {
  .am-step { opacity: 1 !important; transform: none !important; }
  .am-rail-lit { stroke-dashoffset: 0 !important; }
  .am-marker { opacity: 0 !important; }
}

/* ============================================================
   VIEW-MODE density. Guided keeps the full five step cards; Visual makes the
   flowchart the focus and collapses the cards to a compact one-line strip;
   Detailed reveals the full signals table (action-map.js un-hides it).
   ============================================================ */

/* small uppercase mono hint reused in the signals panel head */
.admin-hint {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-dimmer);
}

/* VISUAL · the chart leads. The detail step cards shrink to compact chips with
   the kicker + title only, prose hidden, so the diagram is the focus. */
.am-mode-visual .action-flow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.am-mode-visual .action-step {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
}
.am-mode-visual .action-step.is-result {
  border-color: var(--gold-soft);
  background: var(--gold-pale);
}
.am-mode-visual .action-step p,
.am-mode-visual .action-step h4 { display: none; }
.am-mode-visual .action-step .step-kicker { margin: 0; }

/* DETAILED · the lane summary stays, the step cards keep their full prose, and
   the signals table appears below (un-hidden by JS). Guided is the default and
   needs no extra rules. */

/* ---- the signals table (Detailed mode) ---------------------------------- */
.am-signals-wrap { overflow-x: auto; margin-top: var(--space-2); }
.am-signals-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.am-signals-cap {
  text-align: left;
  caption-side: top;
  font-size: 12.5px;
  color: var(--text-dim);
  margin-bottom: var(--space-3);
  line-height: 1.5;
}
.am-signals-table th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-dimmer);
  font-weight: 600;
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.am-signals-table td {
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-dim);
  vertical-align: middle;
}
.am-signals-table .am-td-name { color: var(--text); font-weight: 600; }
.am-signals-table .am-td-protected {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dimmer);
  white-space: nowrap;
}
.am-signals-table tr:last-child td { border-bottom: none; }

/* ---- narrow viewports: the flowchart scales via viewBox, labels shrink --- */
@media (max-width: 640px) {
  .am-flowchart { padding: var(--space-4) var(--space-2); }
  .am-step-label { font-size: 11px; }
  .am-boundary-label { font-size: 8px; }
}