/* ======================================================================
   HERO · THE AGENT RUN · namespace .rha-*

   Replaces the full-application hero this page used to open with: a
   9-item sidebar, a topbar, five tabs, a composer, a four-stage stepper,
   a behavioral-twin graph and a learned-reference table, whose first beat
   typed "Hi, I took a test drive" one character at a time. A reader met
   seven information regions before they met one claim.

   What runs instead is one agent, with its working on screen:

     0  idle       composer empty
     1  typing     the sentence arrives
     2  asked      symptom lands, origin starts spinning
     3  twin       the behavioral twin draws in, unit by unit
     4  reference  96 runs replay, learned ranges grow from nothing
     5  compare    this run's values land; two are outside
     6  trace      the path runs backwards, symptom to origin
     7  answer     origin fills, both deviations get their cause, HOLD

   Only SYMPTOM and ORIGIN exist. Function and Signal were two more boxes
   to read on the one screen that has to be understood without reading,
   and the chain they carried survives inside the finding.

   Controller: /js/blocks/rca-hero.js
   ====================================================================== */
/* ---------- hero shell ------------------------------------------------ */
.rha-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.rha-hero h1 { margin: 0 0 16px; }
.rha-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
@media (max-width: 960px) { .rha-hero { grid-template-columns: minmax(0, 1fr); } }

/* ---------- the product surface ---------------------------------------
   Authored dark, not token-flipped: this is a screen inside the page, not
   a band of the page, so it keeps its own colours at every band. */
.rha {
  --ink: #eef2f7;
  --ink-dim: #8397ad;
  --ink-faint: #56697f;
  --rule: rgba(255, 255, 255, 0.09);
  --rule-strong: rgba(255, 255, 255, 0.16);
  --tealx: #4ecdc4;
  --orangex: #ef8354;

  position: relative;
  padding: 10px;
  border-radius: 16px;
  background: linear-gradient(150deg, #16273d 0%, #101b2e 55%, #0c1626 100%);
  box-shadow: 0 24px 64px rgba(12, 22, 38, 0.32);
}
.rha__frame {
  padding: clamp(14px, 2.2vw, 20px);
  border: 1px solid var(--rule);
  border-radius: 11px;
  background: #0c1626;
}

.rha__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.rha__bar b { color: var(--tealx); font-weight: 600; }
.rha__bar-sp { margin-left: auto; }

/* ---------- composer --------------------------------------------------
   Fixed min-height, so the sentence arriving cannot move anything below
   it. That is the whole reason a typing beat is affordable here. */
.rha__ask { margin-top: 14px; }
.rha__field {
  display: block;
  min-height: 3.3em;
  padding: 12px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  background: #0a1220;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink);
}
.rha__caret {
  display: none;
  width: 2px;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: -0.18em;
  background: var(--tealx);
  animation: rha-blink 1s steps(1, end) infinite;
}
.rha[data-step="1"] .rha__caret { display: inline-block; }
@keyframes rha-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.rha__ask-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.rha__run {
  padding: 4px 10px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
}
.rha__send {
  margin-left: auto;
  padding: 7px 18px;
  border-radius: 999px;
  background: rgba(239, 131, 84, 0.18);
  border: 1px solid rgba(239, 131, 84, 0.42);
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orangex);
  transition: background 0.2s ease, transform 0.12s ease;
}
/* The one moment the button is the subject: it is pressed, and everything
   after it is consequence. */
.rha[data-step="2"] .rha__send { background: var(--orangex); color: #0c1626; transform: scale(0.96); }

/* ---------- symptom → origin -------------------------------------------
   Two boxes, and the arrow between them is the whole question. ORIGIN is
   the same size empty as it is full, so the answer lands into a space the
   reader has already been looking at. */
.rha__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  margin-top: 18px;
}
.rha__box {
  min-height: 76px;
  padding: 11px 13px;
  border: 1px solid var(--rule);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.022);
  opacity: 0.32;
  transition: opacity 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}
.rha__box-kind {
  margin: 0 0 5px;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.rha__box-what { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.rha__box-sub { margin: 4px 0 0; font-family: var(--mono); font-size: 0.66rem; color: var(--ink-dim); }

.rha[data-step="2"] .rha__box--symptom,
.rha[data-step="3"] .rha__box--symptom,
.rha[data-step="4"] .rha__box--symptom,
.rha[data-step="5"] .rha__box--symptom,
.rha[data-step="6"] .rha__box--symptom,
.rha[data-step="7"] .rha__box--symptom {
  opacity: 1;
  border-color: var(--rule-strong);
  background: rgba(78, 205, 196, 0.07);
}

.rha__arrow {
  align-self: center;
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--ink-faint);
  transition: color 0.4s ease;
}
.rha[data-step="6"] .rha__arrow,
.rha[data-step="7"] .rha__arrow { color: var(--orangex); }

/* ORIGIN, unresolved: a spinner and one honest word. It is opacity 1 from
   the moment the question is asked — the box is not dim, its ANSWER is
   missing, and those are different things. */
.rha[data-step="2"] .rha__box--origin,
.rha[data-step="3"] .rha__box--origin,
.rha[data-step="4"] .rha__box--origin,
.rha[data-step="5"] .rha__box--origin,
.rha[data-step="6"] .rha__box--origin { opacity: 1; border-color: var(--rule-strong); }

.rha__wait { display: none; align-items: center; gap: 9px; margin: 2px 0 0; }
.rha[data-step="2"] .rha__wait,
.rha[data-step="3"] .rha__wait,
.rha[data-step="4"] .rha__wait,
.rha[data-step="5"] .rha__wait,
.rha[data-step="6"] .rha__wait { display: flex; }
.rha__spin {
  width: 13px;
  height: 13px;
  flex: none;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-top-color: var(--tealx);
  border-radius: 50%;
  animation: rha-spin 0.85s linear infinite;
}
@keyframes rha-spin { to { transform: rotate(360deg); } }
.rha__wait span { font-family: var(--mono); font-size: 0.68rem; color: var(--ink-dim); }

.rha__found { display: none; }
.rha[data-step="7"] .rha__found { display: block; }
.rha[data-step="7"] .rha__box--origin {
  opacity: 1;
  border-color: rgba(239, 131, 84, 0.5);
  background: rgba(239, 131, 84, 0.09);
}
.rha[data-step="7"] .rha__box--origin .rha__box-what { color: var(--orangex); }

/* ---------- the working area ------------------------------------------
   Two panels, because the answer rests on exactly two things: a model of
   what the system is, and a reference for how it normally behaves. Each
   one is drawn as it is loaded, in the beat that loads it. */
.rha__work {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 14px;
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid var(--rule);
}
@media (max-width: 620px) { .rha__work { grid-template-columns: minmax(0, 1fr); } }

.rha__panel-label {
  margin: 0 0 9px;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* --- the twin --- */
.rha__twin { width: 100%; height: auto; display: block; }
.rha__unit rect {
  fill: rgba(255, 255, 255, 0.04);
  stroke: var(--rule-strong);
  stroke-width: 1;
}
.rha__unit text {
  fill: var(--ink-dim);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.04em;
}
/* Units arrive one at a time on beat 3. The stagger is the point: a model
   that appears all at once looks like a picture, one that builds looks
   like something being read. */
.rha__unit, .rha__link { opacity: 0; transition: opacity 0.45s ease; }
.rha[data-step="3"] .rha__unit,
.rha[data-step="4"] .rha__unit, .rha[data-step="5"] .rha__unit,
.rha[data-step="6"] .rha__unit, .rha[data-step="7"] .rha__unit { opacity: 1; }
.rha[data-step="3"] .rha__link,
.rha[data-step="4"] .rha__link, .rha[data-step="5"] .rha__link,
.rha[data-step="6"] .rha__link, .rha[data-step="7"] .rha__link { opacity: 1; }
.rha[data-step="3"] .rha__unit:nth-of-type(1) { transition-delay: 0.05s; }
.rha[data-step="3"] .rha__unit:nth-of-type(2) { transition-delay: 0.22s; }
.rha[data-step="3"] .rha__unit:nth-of-type(3) { transition-delay: 0.39s; }
.rha[data-step="3"] .rha__unit:nth-of-type(4) { transition-delay: 0.56s; }
.rha[data-step="3"] .rha__link { transition-delay: 0.7s; }
.rha__link { stroke: var(--rule-strong); stroke-width: 1.4; fill: none; }

/* The backwards trace. Drawn right to left with a dash offset, and dashed
   rather than solid because it is an inference, not a message that
   travelled. */
.rha__trace {
  stroke: var(--orangex);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 5 4;
  stroke-dashoffset: 300;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.rha[data-step="6"] .rha__trace,
.rha[data-step="7"] .rha__trace {
  opacity: 1;
  animation: rha-draw 1.1s ease forwards;
}
@keyframes rha-draw { to { stroke-dashoffset: 0; } }
.rha__origin-ring { opacity: 0; transition: opacity 0.4s ease 0.9s; }
.rha[data-step="6"] .rha__origin-ring,
.rha[data-step="7"] .rha__origin-ring { opacity: 1; }
/* The origin is marked by outlining the unit, not by dropping a circle on
   top of it — the first version put a ring straight through the label. */
.rha__origin-ring rect {
  fill: rgba(239, 131, 84, 0.08);
  stroke: var(--orangex);
  stroke-width: 1.4;
}
.rha__arrowhead { fill: var(--orangex); }

/* --- the measurements --- */
.rha__mk { padding: 6px 0; border-top: 1px solid var(--rule); }
.rha__mk:first-of-type { border-top: none; }
.rha__mk-head { display: flex; align-items: baseline; gap: 8px; }
.rha__mk-name { margin: 0; font-size: 0.76rem; color: var(--ink); min-width: 0; }
.rha__mk-val {
  margin: 0 0 0 auto;
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ink-dim);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.rha[data-step="5"] .rha__mk-val, .rha[data-step="6"] .rha__mk-val,
.rha[data-step="7"] .rha__mk-val { opacity: 1; }
.rha[data-step="5"] .rha__mk.is-out .rha__mk-val,
.rha[data-step="6"] .rha__mk.is-out .rha__mk-val,
.rha[data-step="7"] .rha__mk.is-out .rha__mk-val { color: var(--orangex); }

.rha__track {
  position: relative;
  height: 7px;
  margin-top: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}
/* The learned band grows out of its own centre on beat 4: a range being
   BUILT from runs, rather than a bar that was always there. */
.rha__band {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--lo);
  width: calc(var(--hi) - var(--lo));
  border-radius: 999px;
  background: var(--tealx);
  opacity: 0.5;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.55s cubic-bezier(.2,.8,.3,1);
}
.rha[data-step="4"] .rha__band, .rha[data-step="5"] .rha__band,
.rha[data-step="6"] .rha__band, .rha[data-step="7"] .rha__band { transform: scaleX(1); }
.rha[data-step="4"] .rha__mk:nth-of-type(2) .rha__band { transition-delay: 0.1s; }
.rha[data-step="4"] .rha__mk:nth-of-type(3) .rha__band { transition-delay: 0.2s; }
.rha[data-step="4"] .rha__mk:nth-of-type(4) .rha__band { transition-delay: 0.3s; }

/* This run's value travels in from the band it should have been in. */
.rha__dot {
  position: absolute;
  top: 50%;
  left: var(--lo);
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--tealx);
  opacity: 0;
  transition: left 0.6s cubic-bezier(.3,.7,.2,1), opacity 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.rha[data-step="5"] .rha__dot, .rha[data-step="6"] .rha__dot,
.rha[data-step="7"] .rha__dot { opacity: 1; left: var(--v); }
.rha[data-step="5"] .rha__mk.is-out .rha__dot,
.rha[data-step="6"] .rha__mk.is-out .rha__dot,
.rha[data-step="7"] .rha__mk.is-out .rha__dot {
  background: var(--orangex);
  box-shadow: 0 0 0 4px rgba(239, 131, 84, 0.2);
}
.rha__mk-range {
  margin: 5px 0 0;
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--ink-faint);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.rha[data-step="4"] .rha__mk-range, .rha[data-step="5"] .rha__mk-range,
.rha[data-step="6"] .rha__mk-range, .rha[data-step="7"] .rha__mk-range { opacity: 1; }

/* Every deviation carries its cause, not just the headline one. Two rows
   are outside the learned normal and both resolve to the same unit —
   which is the finding, stated by the data rather than about it. */
.rha__cause {
  display: inline-block;
  margin: 6px 0 0;
  padding: 2px 8px;
  border: 1px solid rgba(239, 131, 84, 0.4);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  color: var(--orangex);
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.rha[data-step="7"] .rha__cause { opacity: 1; transform: none; }
.rha[data-step="7"] .rha__mk:nth-of-type(2) .rha__cause { transition-delay: 0.12s; }

/* ---------- sources: the receipt --------------------------------------
   "Where does this come from" answered as things being consumed, with the
   counts attached. A claim about provenance would have cost one sentence
   and proved nothing. */
.rha__src { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); }
.rha__src-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rha__src-item {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--ink-faint);
  transition: color 0.4s ease;
}
.rha__src-item b { font-weight: 400; color: inherit; }
.rha__src-item i { margin-left: auto; font-style: normal; }
.rha__tick {
  width: 13px;
  height: 13px;
  flex: none;
  align-self: center;
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  position: relative;
  transition: border-color 0.4s ease, background 0.4s ease;
}
.rha__tick::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 1px;
  width: 4px;
  height: 7px;
  border: solid #0c1626;
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(42deg) scale(0);
  transition: transform 0.28s cubic-bezier(.2,1.4,.4,1);
}
.rha__src-item.is-on { color: var(--ink-dim); }
.rha__src-item.is-on .rha__tick { background: var(--tealx); border-color: var(--tealx); }
.rha__src-item.is-on .rha__tick::after { transform: rotate(42deg) scale(1); }

/* ---------- status line + controls ------------------------------------ */
.rha__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid var(--rule);
}
.rha__status {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  min-height: 1.5em;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
}
.rha__pulse {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--tealx);
  animation: rha-pulse 1.3s ease-in-out infinite;
}
.rha[data-step="7"] .rha__pulse { animation: none; background: var(--orangex); }
@keyframes rha-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.rha__replay {
  margin-left: auto;
  padding: 6px 15px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: transparent;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  cursor: pointer;
}
.rha__replay:hover { color: var(--ink); border-color: var(--tealx); }
.rha__synth {
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

@media (prefers-reduced-motion: reduce) {
  .rha *, .rha *::after { animation: none !important; transition: none !important; }
}