/* Overrides for the "choice" hero on top of hero-story.css. */

/* Lane tags at every fork: MISOKI above, YOURS below; white halo so waves
   and packets passing underneath don't break the letters. */
.lbl-lane {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round;
}
.lbl-lane--a { fill: #0089AD; }
.lbl-lane--b { fill: #5A3FE0; }
.lbl-api { font-family: var(--font-sans); font-size: 7.5px; letter-spacing: .04em; font-weight: 600; fill: #5A3FE0; }

/* Lane chip sitting on the thread (integration, etc.). */
.chip-line { fill: #fff; stroke: #8A93A6; stroke-width: 1; }

/* Compact dashboard card in the decision scene. */
.fo-card--sm { padding: 12px 14px 11px; }
.fo-card--sm .fo-title { font-size: 15px; }
.fo-card--sm .fo-row { margin-top: 8px; font-size: 12.5px; }
.fo-wo { padding-top: 8px; border-top: 1px solid var(--border); }
.fo-wo__k { font-size: 11.5px; font-weight: 600; color: var(--violet-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fo-card--sm .fo-tag { white-space: nowrap; }
.badge--ok { background: var(--ok-soft); color: var(--ok); }

/* "Your system" window the same decision lands in through the API. */
.fo-sys {
  background: #fff; border: 1px solid var(--border-strong); border-radius: 10px;
  box-shadow: 0 8px 16px -12px rgba(10, 11, 16, .35); overflow: hidden; font-size: 12.5px;
}
.fo-sys__bar {
  display: flex; align-items: center; gap: 5px; padding: 7px 12px;
  background: var(--bg-soft); border-bottom: 1px solid var(--border);
}
.fo-sys__bar .fo-tag { color: var(--text-muted); margin-right: auto; }
.fo-sys__bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); }
.fo-sys__row { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-bottom: 1px solid var(--border); }
.fo-sys__row:last-child { border-bottom: 0; }
.fo-sys__ph { display: inline-block; height: 7px; width: 140px; border-radius: 4px; background: #E3E7EE; }
.fo-sys__ph--s { width: 54px; }
.fo-sys__row--wo { color: var(--text); }
.fo-sys__row--wo .badge { margin-left: auto; }

/* Header: the demo button sits next to "Open dashboard". Same gradient as the
   block buttons, but a tighter halo so the bar stays quiet. */
.nav__right { gap: 12px; }
.nav__right .nav__lang { margin-right: 4px; }
.nav .btn--primary { box-shadow: 0 1px 3px -1px rgba(90, 63, 224, 0.3), 0 8px 18px -6px rgba(124, 92, 255, 0.45); }
.nav .btn--primary:hover { transform: none; box-shadow: 0 1px 3px -1px rgba(90, 63, 224, 0.35), 0 10px 22px -6px rgba(124, 92, 255, 0.55); }

/* Finale recap board: the story's four choices as two rows of pictograms,
   Misoki's on top and the client's below. A thread runs through the chosen
   ones and re-routes every few seconds; the rest of the nodes stay dim. */
.recap-title { font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; fill: #0A0B10; }
.recap-h { font-family: var(--font-sans); font-size: 10.5px; font-weight: 600; fill: #7B8497; }
.recap-node { opacity: .38; transition: opacity .45s ease; }
.recap-node.is-on { opacity: 1; }
.recap-node__bg { fill: #fff; stroke: rgba(10, 11, 16, 0.18); stroke-width: 1; transition: fill .45s ease, stroke .45s ease; }
.recap-node.is-on--a .recap-node__bg { fill: #DDF6FD; stroke: #0089AD; stroke-width: 1.2; }
.recap-node.is-on--b .recap-node__bg { fill: #ECE7FF; stroke: #5A3FE0; stroke-width: 1.2; }
.recap-cap { font-family: var(--font-sans); font-size: 10.5px; font-weight: 500; fill: #0A0B10; }
.recap-route { fill: none; stroke-width: 2; stroke-linecap: round; }
.recap-hub { font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; fill: #0A0B10; }