/* ============================================================
   SIGNAL → ACTION — one governed journey, end to end
   ------------------------------------------------------------
   Nine stages, each backed by a field that exists in the public API response
   for a governed Intelligence Product. Consent is deliberately NOT a stage:
   the string "consent" does not appear anywhere in this record, so drawing it
   would be inventing an edge. The stages shown are the ones the data carries.

   Uses the design authority for every colour, space and motion value.
   ============================================================ */

.visignal { display: grid; gap: var(--space-4, 1rem); }
.visignal * { min-width: 0; }

/* ---- transport ---- */
.visignal-transport { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.visignal-play {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .85rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink);
  font: inherit; font-size: .82rem; font-weight: 650;
}
.visignal-play:focus-visible { outline: var(--focus-ring, 2px solid var(--accent)); outline-offset: 2px; }
.visignal-progress { flex: 1 1 12rem; height: 3px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.visignal-progress > i { display: block; height: 100%; width: 0; background: var(--accent); }
.visignal-count { font-size: .76rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* ---- the rail ---- */
.visignal-rail {
  display: grid; grid-auto-flow: column; gap: .35rem;
  overflow-x: auto; scrollbar-width: thin; padding-bottom: .35rem;
  grid-auto-columns: minmax(6.6rem, 1fr);
}
.visignal-stage {
  display: grid; gap: .35rem; justify-items: center; text-align: center;
  padding: .6rem .35rem; border: 1px solid var(--border); border-radius: var(--radius-sm, 6px);
  background: var(--surface); color: var(--text-muted); cursor: pointer;
  font: inherit; font-size: .7rem; line-height: 1.3;
  transition: border-color var(--motion-base, .18s ease), background var(--motion-base, .18s ease), color var(--motion-base, .18s ease);
}
.visignal-stage:hover { border-color: var(--accent-text); color: var(--accent-text); }
.visignal-stage:focus-visible { outline: var(--focus-ring, 2px solid var(--accent)); outline-offset: 2px; }
.visignal-stage .visignal-dot {
  width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--border-strong); color: var(--text-dim); background: var(--surface);
}
.visignal-stage .visignal-dot svg { width: 15px; height: 15px; }
/* ORDER MATTERS HERE, AND IT BIT ONCE.
   A stage that is CURRENT is also SEEN, so both rules match it. With the seen
   rule written last it won, and the current stage rendered its icon in
   --accent-text on an --accent fill: emerald on emerald, 1:1, invisible. The
   seen rule is therefore declared FIRST and the current rule last, so the
   stronger state is the one that survives the cascade. */
.visignal-stage[data-seen="true"] .visignal-dot { border-color: var(--accent); color: var(--accent-text); }
.visignal-stage[aria-current="true"] { border-color: var(--accent); background: var(--surface-2); color: var(--text); }
.visignal-stage[aria-current="true"] .visignal-dot { border-color: var(--accent); color: var(--accent-ink); background: var(--accent); }
.visignal-stage b { font-weight: 650; font-size: .72rem; }

/* ---- the panel ---- */
.visignal-panel {
  border: 1px solid var(--border); border-radius: var(--radius-sm, 6px);
  background: var(--surface); padding: 1rem 1.1rem; display: grid; gap: .7rem;
}
.visignal-panel h3 { margin: 0; font-size: 1.05rem; line-height: 1.35; color: var(--text); }
.visignal-kicker {
  margin: 0; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--accent-text);
}
.visignal-what { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--text-muted); }

/* the record itself — the human voice stays the visual centre */
.visignal-value {
  padding: .7rem .9rem; border-left: 3px solid var(--accent);
  background: var(--surface-champagne-soft, var(--surface-2));
  border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0;
  font-size: .92rem; line-height: 1.62; color: var(--text);
}
html[data-theme="dark"] .visignal-value { background: var(--surface-2); }
.visignal-value cite { display: block; margin-top: .4rem; font-style: normal; font-size: .74rem; color: var(--text-dim); }

.visignal-facts { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.visignal-facts > li { display: grid; grid-template-columns: minmax(7rem, 9rem) 1fr; gap: .25rem .9rem; font-size: .8rem; line-height: 1.55; }
.visignal-facts .k { color: var(--text-dim); font-weight: 600; }
.visignal-facts .v { color: var(--text); }

.visignal-authority {
  display: flex; flex-wrap: wrap; gap: .4rem .7rem; align-items: baseline;
  padding-top: .6rem; border-top: 1px solid var(--border);
  font-size: .74rem; color: var(--text-dim);
}
.visignal-authority b { color: var(--text-muted); font-weight: 650; }
.visignal-next { margin: 0; font-size: .78rem; color: var(--text-dim); }

.visignal-note {
  font-size: .74rem; line-height: 1.55; color: var(--text-dim);
  padding: .55rem .75rem; border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm, 6px);
}

.visignal-state { padding: 1.4rem 1rem; text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm, 6px); color: var(--text-muted); font-size: .86rem; }
.visignal-state[data-tone="error"] { border-style: solid; border-color: var(--danger); color: var(--danger); }

@media (max-width: 720px) {
  .visignal-rail { grid-auto-columns: minmax(5.4rem, 1fr); }
  .visignal-stage { font-size: .64rem; }
  .visignal-stage b { font-size: .66rem; }
  .visignal-facts > li { grid-template-columns: 1fr; gap: .1rem; }
}

/* REDUCED MOTION: the progress bar stops animating and auto-advance is turned
   off in script. Nothing about comprehension depends on movement — every stage
   remains reachable by click and by keyboard. */
@media (prefers-reduced-motion: reduce) {
  .visignal-progress > i { transition: none !important; }
  .visignal-stage { transition: none; }
}