/* ============================================================
   mayurkakade.dev — case-study pipeline scenes
   Two animated pipelines: Lending Automation, VAPT Automation.
   All classes prefixed cs- (zero collision with styles.css / hero.css).
   Requires styles.css to be loaded first (design tokens).

   DEFAULT DOM STATE = COMPLETED REST FRAME.
   JS adds .cs-anim to the scene root, which MUTES the not-yet-fired
   pieces so a timeline can bring them in one at a time. No JS, no
   IntersectionObserver, reduced motion, or mobile => the finished
   frame is simply what the markup already renders.
   ============================================================ */

/* ---- scene-local tokens (NOT added to styles.css) ---- */
.cs-scene {
  --cs-crit:        #E5484D;   /* severity: critical */
  --cs-crit-tint:   #FDECEC;
  --cs-crit-border: #F7C7C8;
  --cs-high:        #E8912B;   /* severity: high     */
  --cs-high-tint:   #FDF1E1;
  --cs-high-border: #F6D9AE;
  --cs-med:         #C9A227;   /* severity: medium   */
  --cs-med-tint:    #FBF5E1;
  --cs-med-border:  #EDE0AE;
  --cs-low:         #6B84A8;   /* severity: low      */
  --cs-low-tint:    #EEF2F8;
  --cs-low-border:  #D3DDEC;

  --cs-fail:        #C0555A;   /* honest failure marker */
  --cs-fail-tint:   #FBEEEF;

  /* per-scene flow colour, overridden below */
  --cs-flow:        var(--accent);
  --cs-flow-tint:   var(--accent-tint);
  --cs-flow-border: var(--accent-border);

  position: relative;
  margin-top: 22px;
}

/* Lending resolves in the site's green. VAPT runs on severity amber. */
.cs-scene--lending {
  --cs-flow: var(--green);
  --cs-flow-tint: var(--green-tint);
  --cs-flow-border: #BEEBD4;
}
.cs-scene--vapt {
  --cs-flow: var(--cs-high);
  --cs-flow-tint: var(--cs-high-tint);
  --cs-flow-border: var(--cs-high-border);
}

/* ============================================================
   Rail: the record that enters the pipeline + replay control
   ============================================================ */
.cs-rail {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.cs-record {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 12.5px; color: var(--text-3);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 7px 15px; box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.cs-record b { color: var(--text); font-weight: 700; letter-spacing: 0.02em; }
.cs-record__dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--cs-flow);
  box-shadow: 0 0 0 4px var(--cs-flow-tint);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}
/* while the record is still travelling it reads as in-flight (orange) */
.cs-anim .cs-record__dot:not(.cs-on) {
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-tint);
}

.cs-replay {
  margin-left: auto;
  font-family: var(--mono); font-size: 12px; color: var(--text-3);
  background: none; border: 0; padding: 6px 4px; cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s ease, color 0.2s ease;
}
.cs-replay.cs-show { opacity: 1; pointer-events: auto; }
.cs-replay:hover { color: var(--accent); }

/* ============================================================
   Flow: five stages + four connectors
   ============================================================ */
.cs-flow { display: flex; align-items: stretch; gap: 0; }

.cs-stage {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 13px 12px 14px;
  box-shadow: var(--shadow-sm);
  transition: opacity 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}
/* rest frame: every stage has run. during play, the unreached ones recede.
   INVARIANT: every "finished" style lives in a base rule; .cs-anim …:not(.cs-on)
   only MUTES it. Nothing is ever *added* by .cs-on alone — that guarantees the
   post-animation frame is pixel-identical to the no-JS default frame. */
.cs-anim .cs-stage:not(.cs-on) { opacity: 0.38; }

.cs-stage__head { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 11px; }
.cs-stage__num {
  flex: none; width: 22px; height: 22px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  background: var(--cs-flow-tint); color: var(--cs-flow);
  transition: background 0.4s ease, color 0.4s ease;
}
.cs-anim .cs-stage:not(.cs-on) .cs-stage__num { background: var(--bg-2); color: var(--text-3); }
.cs-stage__t { min-width: 0; }
.cs-stage__t h4 {
  font-family: var(--display); font-weight: 800; font-size: 13px;
  line-height: 1.2; margin: 2px 0 0; color: var(--text);
}
.cs-stage__t p {
  font-family: var(--mono); font-size: 10px; line-height: 1.4;
  color: var(--text-3); margin: 3px 0 0;
}
.cs-stage__body { flex: 1; display: flex; flex-direction: column; gap: 8px; }

/* connectors */
.cs-conn { flex: none; width: 30px; display: flex; align-items: center; justify-content: center; }
.cs-conn svg { width: 30px; height: 22px; overflow: visible; }
.cs-conn__line, .cs-conn__head {
  fill: none; stroke: var(--cs-flow); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke 0.45s ease;
}
.cs-anim .cs-conn:not(.cs-on) .cs-conn__line,
.cs-anim .cs-conn:not(.cs-on) .cs-conn__head { stroke: var(--border-2); }
.cs-conn__dot { fill: var(--accent); opacity: 0; transform-box: fill-box; transform-origin: center; }
.cs-anim .cs-conn.cs-on .cs-conn__dot { animation: cs-travel 0.62s cubic-bezier(0.45, 0.05, 0.35, 1) forwards; }
@keyframes cs-travel {
  0%   { opacity: 0; transform: translateX(0); }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(22px); }
}
/* connector variants for the hub topology (spokes + vertical feed/exit) */
.cs-conn--rev svg { transform: scaleX(-1); }      /* right-side spokes point inward */
.cs-conn--down   { align-self: center; }
.cs-conn--down svg { transform: rotate(90deg); }  /* feed-in / exit-out arrows */

/* ============================================================
   Hub layout: a central orchestrator/planner core with the
   modules arranged around it. Replaces the linear .cs-flow row.
   Grid on desktop; collapses to a single column on mobile.
   Every child is placed via an inline `grid-area`; connectors
   are decorative and drop out on mobile.
   ============================================================ */
.cs-hub { display: grid; gap: 10px; align-items: stretch; }
.cs-hub .cs-conn { width: auto; }

.cs-scene--lending .cs-hub {
  grid-template-columns: 1fr 30px minmax(150px, 1.05fr) 30px 1fr;
  grid-template-areas:
    ".    .    feed .    ."
    ".    .    fc   .    ."
    "m2   c2   orch c4   m4"
    "m3   c3   orch c5   m5"
    "ec   ec   ec   ec   ec"
    "exit exit exit exit exit";
}
.cs-scene--vapt .cs-hub {
  grid-template-columns: 1fr 30px minmax(150px, 1.05fr) 42px 1.05fr;
  grid-template-areas:
    "feed feed feed feed feed"
    "fc   fc   fc   fc   fc"
    "m1   c1   core gate expl"
    "m2   c2   core gate expl"
    "ec   ec   ec   ec   ec"
    "exit exit exit exit exit";
}

/* ============================================================
   Shared animation gating primitives
   ============================================================ */
.cs-fade { transition: opacity 0.4s ease, transform 0.4s ease; }
.cs-anim .cs-fade:not(.cs-on) { opacity: 0; transform: translateY(4px); }

.cs-pop { transform-box: fill-box; transform-origin: center; }
.cs-anim .cs-pop:not(.cs-on) { opacity: 0; }
.cs-anim .cs-pop.cs-on { animation: cs-pop 0.42s var(--ease-spring) both; }
@keyframes cs-pop { from { opacity: 0; transform: scale(0.62); } to { opacity: 1; transform: scale(1); } }

/* vertical bar growth (distribution) */
.cs-bar { transform-box: fill-box; transform-origin: center bottom; transition: transform 0.55s var(--ease-spring); }
.cs-anim .cs-bar:not(.cs-on) { transform: scaleY(0.02); }

/* horizontal fill growth (meters, lanes, severity) */
.cs-grow { transform-origin: left center; transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.cs-anim .cs-grow:not(.cs-on) { transform: scaleX(0); }

/* stroke-drawn svg edges (recon tree).
   Paths carry pathLength="100", so one dash length works for any geometry. */
.cs-edge {
  fill: none; stroke: var(--border-2); stroke-width: 1.4; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease;
}
.cs-anim .cs-edge:not(.cs-on) { stroke-dashoffset: 100; }

/* ============================================================
   Micro-visual components
   ============================================================ */
.cs-viz { width: 100%; height: auto; display: block; overflow: visible; }
.cs-viz text { font-family: var(--mono); user-select: none; }

.cs-caption {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--text-3); margin: 0;
}

/* --- stage 1 (lending): propensity score badge + cohort bars --- */
.cs-scorebadge {
  display: flex; align-items: baseline; gap: 8px;
  background: var(--green-tint); border: 1px solid #BEEBD4;
  border-radius: 10px; padding: 8px 11px;
  transition: background 0.4s ease, border-color 0.4s ease;
}
.cs-anim .cs-stage:not(.cs-on) .cs-scorebadge { background: var(--bg-2); border-color: var(--border); }
.cs-score {
  font-family: var(--mono); font-size: 22px; font-weight: 700;
  line-height: 1; color: var(--green); font-variant-numeric: tabular-nums;
}
.cs-anim .cs-stage:not(.cs-on) .cs-score { color: var(--text-3); }
.cs-scoretag {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  color: var(--green); white-space: nowrap;
}
.cs-barfill  { fill: var(--border-2); }
.cs-barfill--me { fill: var(--green); }
.cs-viz .cs-me { fill: var(--green); font-size: 7.5px; font-weight: 700; }
.cs-baseline { stroke: var(--border); stroke-width: 1; }

/* --- stage 2 (lending): call status + waveform + transcript --- */
.cs-callstatus {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--text-2);
}
.cs-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--green); box-shadow: 0 0 0 3px var(--green-tint);
}
.cs-anim .cs-stage:not(.cs-on) .cs-dot { background: var(--border-2); box-shadow: 0 0 0 3px var(--bg-2); }

.cs-wavebar { fill: var(--green); transform-box: fill-box; transform-origin: center; }
.cs-anim .cs-wave:not(.cs-on) .cs-wavebar { fill: var(--border-2); }
.cs-wave.cs-live .cs-wavebar { animation: cs-wave 0.9s ease-in-out infinite; }
@keyframes cs-wave {
  0%, 100% { transform: scaleY(0.35); }
  50%      { transform: scaleY(1); }
}
.cs-wave.cs-live .cs-wavebar:nth-child(2n)  { animation-delay: 0.12s; }
.cs-wave.cs-live .cs-wavebar:nth-child(3n)  { animation-delay: 0.26s; }
.cs-wave.cs-live .cs-wavebar:nth-child(5n)  { animation-delay: 0.38s; }

.cs-bubble {
  font-family: var(--body); font-size: 10.5px; line-height: 1.35;
  border-radius: 9px; padding: 6px 9px; max-width: 92%;
}
.cs-bubble--in {
  align-self: flex-start;
  background: var(--bg-2); border: 1px solid var(--border);
  color: var(--text-2); border-bottom-left-radius: 3px;
}
.cs-bubble--out {
  align-self: flex-end;
  background: var(--green-tint); border: 1px solid #BEEBD4;
  color: var(--text); border-bottom-right-radius: 3px; font-weight: 500;
}

/* --- stage 3 (lending): transcript lines + sentiment + tags --- */
.cs-lines { display: flex; flex-direction: column; gap: 6px; }
.cs-line { display: flex; align-items: center; gap: 6px; }
.cs-line i {
  width: 5px; height: 5px; border-radius: 50%; flex: none;
  background: var(--border-2);
}
.cs-line--them i { background: var(--text-3); }
.cs-line span {
  height: 6px; border-radius: 3px; background: var(--bg-2);
  border: 1px solid var(--border); display: block;
}

.cs-meterwrap { margin-top: 2px; }
.cs-meter {
  height: 8px; border-radius: 5px; background: var(--bg-2);
  border: 1px solid var(--border); overflow: hidden; margin-top: 4px;
}
.cs-meter__fill {
  height: 100%; width: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #7FD9AF, var(--green));
}

.cs-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
.cs-tag {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  color: var(--text-2); background: var(--surface);
  border: 1px solid var(--border-2); border-radius: 999px; padding: 3px 8px;
  white-space: nowrap;
}
.cs-tag b { color: var(--green); font-weight: 700; }
.cs-tag--hi {
  color: var(--green); background: var(--green-tint); border-color: #BEEBD4;
}

/* --- stage 4 (lending): rules + APPROVED stamp --- */
.cs-rules { display: flex; flex-direction: column; gap: 6px; }
.cs-rule {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 10px; color: var(--text-2);
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 7px; padding: 5px 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-check {
  flex: none; width: 12px; height: 12px; border-radius: 4px;
  background: var(--green-tint); border: 1px solid #BEEBD4;
  position: relative;
}
.cs-check::after {
  content: ""; position: absolute; left: 3.5px; top: 1px;
  width: 3px; height: 6px; border: solid var(--green);
  border-width: 0 1.6px 1.6px 0; transform: rotate(42deg);
}

.cs-stampwrap { margin-top: auto; padding-top: 10px; display: flex; justify-content: center; }
.cs-stamp {
  font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 1.6px;
  color: var(--green); border: 2px solid var(--green);
  border-radius: 8px; padding: 5px 12px;
  transform: rotate(-4deg);
  background: rgba(232, 248, 240, 0.75);
  box-shadow: 0 4px 14px rgba(18, 183, 106, 0.18);
}
.cs-anim .cs-stamp:not(.cs-on) { opacity: 0; }
.cs-anim .cs-stamp.cs-on { animation: cs-stamp 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes cs-stamp {
  from { opacity: 0; transform: rotate(-16deg) scale(1.9); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: rotate(-4deg) scale(1); }
}

/* --- stage 5 (lending): CRM row + scheduled follow-up --- */
.cs-crm {
  border: 1px solid var(--border); border-radius: 9px; overflow: hidden;
  background: var(--surface);
}
.cs-crm__bar {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--text-3);
  background: var(--bg-2); border-bottom: 1px solid var(--border);
  padding: 4px 8px;
}
.cs-crm__row {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 5px 8px; font-family: var(--mono); font-size: 10px;
  border-bottom: 1px solid var(--border);
}
.cs-crm__row:last-child { border-bottom: 0; }
.cs-crm__k { color: var(--text-3); flex: none; }
.cs-crm__v {
  color: var(--text); font-weight: 600; text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cs-crm__v--ok { color: var(--green); }

.cs-sched {
  display: flex; align-items: center; gap: 7px; margin-top: auto;
  font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--text-2);
  background: var(--green-tint); border: 1px solid #BEEBD4;
  border-radius: 8px; padding: 6px 9px;
}
.cs-sched svg { flex: none; width: 13px; height: 13px; }
.cs-sched svg * { stroke: var(--green); fill: none; stroke-width: 1.6; }

/* ============================================================
   VAPT micro-visuals
   ============================================================ */

/* --- stage 1 (vapt): recon asset tree --- */
.cs-viz .cs-treebox { fill: var(--surface); stroke: var(--border-2); stroke-width: 1.2; }
.cs-viz .cs-treeroot { fill: var(--navy); stroke: var(--navy); }
.cs-viz .cs-troot-t { fill: #FFFFFF; font-size: 8.5px; font-weight: 600; }
.cs-viz .cs-tnum { fill: var(--text); font-size: 15px; font-weight: 700; }
.cs-viz .cs-tlabel { fill: var(--text-3); font-size: 7.5px; font-weight: 500; }
.cs-anim .cs-stage:not(.cs-on) .cs-tnum { fill: var(--text-3); }

/* --- stage 2 (vapt): parallel tool lanes --- */
.cs-lane { display: flex; align-items: center; gap: 7px; }
.cs-lane__name {
  flex: none; width: 42px;
  font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--text-2);
}
.cs-lane__bar {
  flex: 1; height: 7px; border-radius: 4px;
  background: var(--bg-2); border: 1px solid var(--border); overflow: hidden;
}
.cs-lane__fill {
  height: 100%; width: 100%; border-radius: 3px; background: var(--cs-high);
}
.cs-lane--b .cs-lane__fill { background: #C98A3E; }
.cs-lane--c .cs-lane__fill { background: var(--cs-low); }
.cs-lane__pid {
  flex: none; font-family: var(--mono); font-size: 8.5px; color: var(--text-3);
}

.cs-findings {
  display: flex; align-items: baseline; gap: 6px; margin-top: auto;
  font-family: var(--mono); font-size: 10px; color: var(--text-3);
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 9px;
}
.cs-findings b {
  font-size: 17px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.cs-parallel {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.5px;
  color: var(--cs-high); text-transform: uppercase;
}

/* --- stage 3 (vapt): exploitation attempts (some land, some don't) --- */
.cs-attempt {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  font-family: var(--mono); font-size: 10px;
  border-radius: 7px; padding: 5px 8px;
  border: 1px solid var(--border); background: var(--bg-2); color: var(--text-2);
  white-space: nowrap; overflow: hidden;
}
.cs-attempt span { flex: none; font-weight: 700; }
.cs-attempt--ok {
  background: var(--cs-crit-tint); border-color: var(--cs-crit-border); color: #8E3236;
}
.cs-attempt--ok span { color: var(--cs-crit); }
.cs-attempt--fail { color: var(--text-3); }
.cs-attempt--fail span { color: var(--cs-fail); opacity: 0.75; }
.cs-attempt em {
  font-style: normal; overflow: hidden; text-overflow: ellipsis;
}

/* --- stage 4 (vapt): severity buckets + CVE badges --- */
.cs-sev { display: flex; align-items: center; gap: 6px; }
.cs-sev__k {
  flex: none; width: 44px;
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.3px; text-transform: uppercase;
}
.cs-sev__bar {
  flex: 1; height: 6px; border-radius: 3px; background: var(--bg-2);
  border: 1px solid var(--border); overflow: hidden;
}
.cs-sev__bar i { display: block; height: 100%; border-radius: 3px; }
.cs-sev__n {
  flex: none; width: 12px; text-align: right;
  font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.cs-sev--crit .cs-sev__k { color: var(--cs-crit); }
.cs-sev--crit .cs-sev__bar i { background: var(--cs-crit); }
.cs-sev--high .cs-sev__k { color: var(--cs-high); }
.cs-sev--high .cs-sev__bar i { background: var(--cs-high); }
.cs-sev--med  .cs-sev__k { color: var(--cs-med); }
.cs-sev--med  .cs-sev__bar i { background: var(--cs-med); }
.cs-sev--low  .cs-sev__k { color: var(--cs-low); }
.cs-sev--low  .cs-sev__bar i { background: var(--cs-low); }

.cs-cves { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; padding-top: 6px; }
.cs-cve {
  font-family: var(--mono); font-size: 9px; font-weight: 600;
  border-radius: 5px; padding: 3px 6px;
  background: var(--cs-crit-tint); border: 1px solid var(--cs-crit-border);
  color: #8E3236; white-space: nowrap;
}
.cs-cve--high { background: var(--cs-high-tint); border-color: var(--cs-high-border); color: #8A5716; }

/* --- stage 5 (vapt): report assembling page by page --- */
.cs-viz .cs-pagerect { fill: var(--surface); stroke: var(--border-2); stroke-width: 1.2; }
.cs-viz .cs-page--front { filter: drop-shadow(0 5px 12px rgba(23, 35, 59, 0.12)); }
.cs-viz .cs-pageline { stroke: var(--border); stroke-width: 2.6; stroke-linecap: round; }
.cs-viz .cs-pagehead { fill: var(--navy); }
.cs-viz .cs-pagetitle { fill: #FFFFFF; font-size: 7px; font-weight: 700; letter-spacing: 0.4px; }
.cs-viz .cs-pagedot--crit { fill: var(--cs-crit); }
.cs-viz .cs-pagedot--high { fill: var(--cs-high); }
.cs-viz .cs-pagedot--med  { fill: var(--cs-med); }

.cs-reportdone {
  display: flex; align-items: center; gap: 6px; margin-top: auto;
  font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--text-2);
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 9px;
}
.cs-reportdone i {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--cs-high); box-shadow: 0 0 0 3px var(--cs-high-tint);
}

/* ============================================================
   HUB COMPONENTS — orchestrator / planner core, gate, spokes
   ============================================================ */

/* central core card (orchestrator n8n / planner CrewAI) */
.cs-core {
  background: linear-gradient(180deg, var(--surface), var(--cs-flow-tint));
  border-color: var(--cs-flow-border);
  box-shadow: var(--shadow);
}
/* The core spans the full height of the two stacked side cards (so its top/bottom
   align with them). Its node graph grows to fill the middle and centres itself,
   so the extra height reads as a balanced hub — not a dead zone. */
.cs-core .cs-viz { flex: 1 1 auto; min-height: 170px; }
.cs-core .cs-stage__num { background: var(--cs-flow); color: #fff; }
.cs-anim .cs-core:not(.cs-on) { opacity: 0.38; }
.cs-anim .cs-core:not(.cs-on) .cs-stage__num { background: var(--bg-2); color: var(--text-3); }
.cs-coremark {
  margin-top: auto; text-align: center;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.4px;
  color: var(--cs-flow); font-weight: 600;
}
.cs-coreio {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 8.5px; color: var(--text-3); margin-top: 4px;
}

/* small node-graph inside the core */
.cs-viz .cs-gnode { fill: var(--surface); stroke: var(--cs-flow-border); stroke-width: 1.2; }
.cs-viz .cs-gnode--c { fill: var(--cs-flow); stroke: var(--cs-flow); }
.cs-viz .cs-gnode-t  { fill: var(--text-2); font-size: 7px; font-weight: 700; }
.cs-viz .cs-gnode-t--c { fill: #fff; font-size: 7.5px; font-weight: 700; }
.cs-viz .cs-gedge {
  fill: none; stroke: var(--border-2); stroke-width: 1.3; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 0;
}
.cs-anim .cs-viz .cs-gedge:not(.cs-on) { stroke-dashoffset: 100; }
.cs-viz .cs-gedge.cs-on { stroke: var(--cs-flow); transition: stroke-dashoffset 0.5s ease, stroke 0.4s ease; }

/* --- lending: call-analysis role tabs + five detected signals --- */
.cs-roles { display: flex; gap: 4px; margin-bottom: 4px; }
.cs-role {
  font-family: var(--mono); font-size: 8.5px; font-weight: 600;
  padding: 3px 6px; border-radius: 6px; white-space: nowrap;
  background: var(--bg-2); border: 1px solid var(--border); color: var(--text-3);
}
.cs-role--on { color: var(--green); background: var(--green-tint); border-color: #BEEBD4; }

.cs-signals { display: flex; flex-direction: column; gap: 4px; }
.cs-signal {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  font-family: var(--mono); font-size: 9.5px;
  border-bottom: 1px dashed var(--border); padding-bottom: 3px;
}
.cs-signal:last-child { border-bottom: 0; }
.cs-signal__k { color: var(--text-3); flex: none; }
.cs-signal__v { color: var(--text); font-weight: 700; text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-signal__v--ok  { color: var(--green); }
.cs-signal__v--warn { color: var(--cs-high); }

/* --- lending: WhatsApp doc submission --- */
.cs-docs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.cs-doc {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 9px; font-weight: 600; color: var(--text-2);
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 3px 7px;
}
.cs-doc::before {
  content: ""; width: 8px; height: 10px; flex: none; border-radius: 1.5px;
  background: var(--surface); border: 1px solid var(--border-2);
}

/* --- lending: IDP compact flow steps --- */
.cs-steps { display: flex; flex-direction: column; gap: 5px; }
.cs-step {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 9px; line-height: 1.3; color: var(--text-2);
}
.cs-step__n {
  flex: none; width: 14px; height: 14px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 700;
  background: var(--cs-flow-tint); color: var(--cs-flow);
}
.cs-step em { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-conf  { color: var(--green); font-weight: 700; }
.cs-flag  { color: var(--cs-high); font-weight: 700; }

/* --- feed-in / exit-out strips (top propensity input, bottom Camunda/Results) --- */
.cs-strip {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  border-radius: 10px; padding: 8px 12px;
  background: var(--cs-flow-tint); border: 1px solid var(--cs-flow-border); color: var(--cs-flow);
  text-align: center;
}
.cs-strip b { font-weight: 800; }
.cs-strip--in {
  background: var(--surface); border-color: var(--border); color: var(--text-2);
}

/* feed card (Propensity) now sits in the centre column above the orchestrator
   at normal card size, so its body stacks vertically: score badge, then a
   height-capped cohort chart. */
.cs-feedbody { flex-direction: column !important; align-items: stretch; gap: 12px; }
.cs-feedbody > * { min-width: 0; }
.cs-feedbody .cs-viz { width: 100%; height: 96px; }

/* --- VAPT: human-approval gate (vertical, between planner and exploit) --- */
.cs-gate {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.cs-anim .cs-gate:not(.cs-on) { opacity: 0.5; }
.cs-gatekey {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--green-tint); border: 1px solid #BEEBD4;
  transition: background 0.4s ease, border-color 0.4s ease;
}
.cs-gatekey svg { width: 15px; height: 15px; }
.cs-gatekey svg * { stroke: var(--green); fill: none; stroke-width: 1.7; }
.cs-anim .cs-gate:not(.cs-on) .cs-gatekey { background: var(--bg-2); border-color: var(--border-2); }
.cs-anim .cs-gate:not(.cs-on) .cs-gatekey svg * { stroke: var(--text-3); }
.cs-gate__lock { display: none; }
.cs-anim .cs-gate:not(.cs-on) .cs-gate__lock { display: block; }
.cs-anim .cs-gate:not(.cs-on) .cs-gate__ok  { display: none; }
.cs-gate__t {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--mono); font-size: 8px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--cs-flow);
}
.cs-anim .cs-gate:not(.cs-on) .cs-gate__t { color: var(--text-3); }

/* --- VAPT: detection rows + detected stack chip --- */
.cs-det {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 9.5px; color: var(--text-2);
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 7px; padding: 5px 8px;
}
.cs-det i {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--cs-high); box-shadow: 0 0 0 3px var(--cs-high-tint);
}
.cs-det b { color: var(--text); font-weight: 700; }
.cs-stackpill {
  align-self: flex-start;
  font-family: var(--mono); font-size: 8.5px; font-weight: 600; color: var(--cs-low);
  background: var(--cs-low-tint); border: 1px solid var(--cs-low-border);
  border-radius: 6px; padding: 3px 7px; white-space: nowrap;
}

/* --- VAPT: SearchSploit / modernize pills --- */
.cs-xpill {
  font-family: var(--mono); font-size: 8.5px; font-weight: 600; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 6px; padding: 3px 7px; white-space: nowrap;
}
.cs-xpill b { color: var(--cs-high); font-weight: 700; }

/* --- VAPT: Interactive Code Writer terminal loop --- */
.cs-cw {
  margin-top: 4px;
  background: var(--navy-2); border-radius: 8px; padding: 7px 9px;
  display: flex; flex-direction: column; gap: 3px;
}
.cs-cw__cap {
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.5px; text-transform: uppercase;
  color: #8EA3C0; margin-bottom: 1px;
}
.cs-cw__ln {
  font-family: var(--mono); font-size: 8.5px; line-height: 1.4; color: #CBD5E1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-cw__ln--err { color: #F1A9AC; }
.cs-cw__ln--fix { color: #F3C57E; }
.cs-cw__ln--ok  { color: #7FD9AF; font-weight: 600; }

/* ============================================================
   Summary strip (rest-frame payoff) + FACTUAL STRIP
   ============================================================ */
.cs-summary {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 18px;
}
.cs-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  border-radius: 999px; padding: 5px 12px;
  background: var(--cs-flow-tint); border: 1px solid var(--cs-flow-border);
  color: var(--cs-flow);
}
.cs-pill i {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none;
}
.cs-sevchip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  border-radius: 999px; padding: 5px 12px;
}
.cs-sevchip b { font-weight: 700; font-variant-numeric: tabular-nums; }
.cs-sevchip--crit { background: var(--cs-crit-tint); border: 1px solid var(--cs-crit-border); color: #8E3236; }
.cs-sevchip--high { background: var(--cs-high-tint); border: 1px solid var(--cs-high-border); color: #8A5716; }
.cs-sevchip--med  { background: var(--cs-med-tint);  border: 1px solid var(--cs-med-border);  color: #7A6414; }
.cs-sevchip--low  { background: var(--cs-low-tint);  border: 1px solid var(--cs-low-border);  color: #4E637F; }

.cs-sumsep { width: 1px; height: 18px; background: var(--border-2); margin: 0 2px; }

/* ---- FACTUAL STRIP: real stack chips + true one-liners only.
        NO invented performance numbers. Aspirational targets are marked
        with .cs-chip--goal (dashed) and labelled "objective". ---- */
.cs-oneliner {
  font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  color: var(--text); letter-spacing: 0.2px;
}
.cs-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cs-chip {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  color: var(--text-2); background: var(--surface);
  border: 1px solid var(--border-2); border-radius: 999px;
  padding: 4px 10px; white-space: normal; max-width: 100%;
}
.cs-chip--flow {
  color: var(--cs-flow); background: var(--cs-flow-tint); border-color: var(--cs-flow-border);
}
.cs-chip--fact { color: var(--text); }
.cs-chip--fact b { color: var(--cs-flow); font-weight: 800; }
/* an ASPIRATIONAL target, never an achieved result — dashed to read as a goal */
.cs-chip--goal {
  border-style: dashed; color: var(--text-3); background: var(--surface);
}
.cs-chip--goal b { color: var(--text-2); }

/* ============================================================
   Reduced motion: land on the finished frame, no movement at all.
   (JS also skips the timeline entirely — this is belt and braces.)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cs-stage, .cs-fade, .cs-bar, .cs-grow, .cs-conn__line, .cs-conn__head,
  .cs-record__dot, .cs-stage__num, .cs-scorebadge, .cs-score, .cs-dot {
    transition: none !important;
  }
  .cs-pop.cs-on, .cs-stamp.cs-on, .cs-conn.cs-on .cs-conn__dot,
  .cs-wave.cs-live .cs-wavebar {
    animation: none !important;
  }
}

/* ============================================================
   Mobile (<=760px): static completed frame, stacked vertically.
   Never a horizontal scrollbar — the flow becomes a column and
   the cramped secondary sub-labels drop out.
   ============================================================ */
@media (max-width: 760px) {
  .cs-flow { flex-direction: column; }
  /* the hub grid collapses to a single reading-order column */
  .cs-hub {
    display: flex; flex-direction: column;
    grid-template-columns: none; grid-template-areas: none;
  }
  .cs-hub > * { grid-area: auto !important; }
  .cs-hub .cs-conn { display: none; }         /* decorative spokes drop out */
  .cs-feedbody { flex-direction: column !important; align-items: stretch; }
  .cs-stage { padding: 14px 14px 16px; }
  .cs-core { padding: 14px 14px 16px; }
  .cs-stage__t h4 { font-size: 14px; }
  .cs-stage__t p { display: none; }          /* secondary sub-labels off */
  /* gate becomes a normal horizontal row when stacked */
  .cs-gate { flex-direction: row; gap: 10px; padding: 8px; }
  .cs-gate__t { writing-mode: horizontal-tb; }
  .cs-replay { display: none; }
  .cs-record { font-size: 12px; }
  .cs-summary { margin-top: 16px; }
  .cs-scene { margin-top: 16px; }
}