/* InTech Solutions — eCommerce order journey.
   Adapted from the "Intech Commerce Journey" artifact: same flow and animation, re-themed
   to the brand palette and scoped to .comm-flow. Success green and ticket amber are kept
   because they carry meaning (paid / delivered vs. support raised). */
.comm-flow {
  --bg: transparent;
  --surface: #0f1c31;
  --ink: #e9f1fb;
  --muted: #93a9c6;
  --line: rgba(146, 180, 226, .20);
  --brand: #a8dcf5;
  --act: #3eb9f0;
  --act-soft: rgba(62, 185, 240, .20);
  --ok: #4ec98d;
  --warn: #f0be58;
  --warn-soft: rgba(240, 190, 88, .20);
  --admin-band: rgba(168, 220, 245, .07);
  --cust-band: rgba(62, 185, 240, .08);
  --gate-band: rgba(147, 162, 180, .07);
  --tkt-band: rgba(240, 190, 88, .09);
  --shadow: 0 1px 2px rgba(0, 0, 0, .32), 0 10px 28px rgba(0, 0, 0, .40);
  color: var(--ink);
}

.comm-flow * { margin: 0; padding: 0; box-sizing: border-box; }
.comm-flow {
    color: var(--ink);
    font-family: 'Figtree', 'Segoe UI', system-ui, sans-serif;
  }
.comm-flow .wrap { max-width: 1060px; margin: 0 auto; }
.comm-flow h1 {
    font-family: 'Archivo', sans-serif; color: var(--brand);
    font-size: clamp(26px, 4vw, 38px); letter-spacing: -0.4px; text-wrap: balance;
  }
.comm-flow .sub { color: var(--muted); margin-top: 8px; max-width: 70ch; font-size: 16px; }
.comm-flow .caption-bar {
    margin: 26px 0 14px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
    padding: 14px 20px; display: flex; align-items: baseline; gap: 16px; min-height: 58px;
  }
.comm-flow .caption-bar .stepno {
    font-family: 'Archivo', sans-serif; font-weight: 700; color: var(--act);
    font-size: 13px; letter-spacing: 1.5px; white-space: nowrap;
  }
.comm-flow .caption-bar .cap { font-size: 16.5px; font-weight: 500; }
.comm-flow .stage-box {
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    padding: 14px 10px 6px; overflow-x: auto;
  }
.comm-flow .stage-inner { position: relative; }
.comm-flow svg.stage { display: block; min-width: 760px; width: 100%; height: auto; margin: 0 auto; }
.comm-flow .band { rx: 10; }
.comm-flow .band.admin { fill: var(--admin-band); }
.comm-flow .band.gate { fill: var(--gate-band); }
.comm-flow .band.cust { fill: var(--cust-band); }
.comm-flow .band.tkt { fill: var(--tkt-band); }
.comm-flow .lane-label.tkt { fill: var(--warn); }
.comm-flow .lane-label {
    font-family: 'Archivo', sans-serif; font-size: 11.5px; font-weight: 700;
    letter-spacing: 2.4px; fill: var(--muted);
  }
.comm-flow .edge { stroke: var(--line); stroke-width: 2.5; fill: none; transition: stroke .4s; }
.comm-flow .edge.lit { stroke: var(--act); }
.comm-flow .edge.branch.lit { stroke: var(--warn); }
.comm-flow .edge-label { font-size: 11.5px; fill: var(--muted); }
.comm-flow .edge-glow {
    stroke: var(--act); stroke-width: 4; fill: none;
    stroke-linecap: round; opacity: .85; pointer-events: none;
  }
.comm-flow .edge-glow.branch { stroke: var(--warn); }
.comm-flow .node { cursor: pointer; }
.comm-flow .node rect.box {
    fill: var(--surface); stroke: var(--line); stroke-width: 2; rx: 12;
    transition: stroke .3s;
  }
.comm-flow .node text.lbl { font-size: 13.5px; font-weight: 600; fill: var(--ink); }
.comm-flow .node text.sublbl { font-size: 11px; fill: var(--muted); }
.comm-flow .node circle.badge { fill: var(--line); transition: fill .3s; }
.comm-flow .node text.badge-t {
    font-family: 'Archivo', sans-serif; font-size: 12.5px; font-weight: 700;
    fill: var(--surface);
  }
.comm-flow .node.active rect.box { stroke: var(--act); stroke-width: 3; }
.comm-flow .node.active circle.badge { fill: var(--act); }
.comm-flow .node.done rect.box { stroke: var(--ok); }
.comm-flow .node.done circle.badge { fill: var(--ok); }
.comm-flow .node.tkt.active rect.box { stroke: var(--warn); }
.comm-flow .node.tkt.active circle.badge { fill: var(--warn); }
.comm-flow .node.tkt.done rect.box { stroke: var(--warn); }
.comm-flow .node.tkt.done circle.badge { fill: var(--warn); }
.comm-flow .node.active rect.box { animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe {
    0%, 100% { stroke-width: 2.6; }
    50%      { stroke-width: 4; }
  }
.comm-flow .node.pop { animation: pop .55s cubic-bezier(.34, 1.56, .64, 1); transform-box: fill-box; transform-origin: center; }
@keyframes pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.06); }
    100% { transform: scale(1); }
  }
.comm-flow .pulse-ring { fill: none; stroke: var(--act); stroke-width: 2; opacity: 0; }
.comm-flow .node.active .pulse-ring { animation: ring 1.2s ease-out infinite; }
.comm-flow .node.tkt.active .pulse-ring { stroke: var(--warn); }
@keyframes ring {
    0% { opacity: .7; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.12); }
  }
.comm-flow .node .pulse-ring { transform-origin: center; transform-box: fill-box; }
.comm-flow .ripple {
    fill: none; stroke: var(--act); stroke-width: 2.5; opacity: 0;
    transform-box: fill-box; transform-origin: center; pointer-events: none;
  }
.comm-flow .ripple.branch { stroke: var(--warn); }
.comm-flow .ripple.go { animation: ripplefx .9s ease-out; }
.comm-flow .ripple.go.d2 { animation-delay: .16s; }
@keyframes ripplefx {
    0%   { opacity: .7; transform: scale(.3); }
    100% { opacity: 0;  transform: scale(1.7); }
  }
.comm-flow #cj-marker { opacity: 0; pointer-events: none; }
.comm-flow #cj-marker .halo { fill: var(--act-soft); }
.comm-flow #cj-marker .coin { fill: var(--act); stroke: var(--surface); stroke-width: 1.6; }
.comm-flow #cj-marker .coin-in { fill: rgba(255, 255, 255, .55); }
.comm-flow #cj-marker .spark line { stroke: rgba(255, 255, 255, .92); stroke-width: 1.5; stroke-linecap: round; }
.comm-flow #cj-marker .spark { transform-origin: 0 0; animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.comm-flow #cj-marker.branch .halo { fill: var(--warn-soft); }
.comm-flow #cj-marker.branch .coin { fill: var(--warn); }
.comm-flow .trail-dot { fill: var(--act); pointer-events: none; }
.comm-flow .trail-dot.branch { fill: var(--warn); }
.comm-flow .resolved-badge { opacity: 0; transition: opacity .5s; }
.comm-flow .resolved-badge.show { opacity: 1; }
.comm-flow .resolved-badge rect { fill: var(--ok); rx: 9; }
.comm-flow .resolved-badge text { font-size: 11.5px; font-weight: 700; fill: #fff; }
.comm-flow .callout {
    position: absolute; z-index: 5; pointer-events: none; opacity: 0;
    background: var(--surface); border: 1.5px solid var(--act); border-radius: 12px;
    padding: 10px 13px; box-shadow: var(--shadow);
    font-size: 12.5px; line-height: 1.45; color: var(--muted);
  }
.comm-flow .callout.branch { border-color: var(--warn); }
.comm-flow .callout b {
    display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px;
    font-family: 'Figtree', sans-serif;
  }
.comm-flow .callout:not(.below) { transform: translateY(-100%); }
.comm-flow .callout.show { opacity: 1; animation: bubble .35s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes bubble { from { opacity: 0; scale: .88; } }
.comm-flow .callout::after {
    content: ""; position: absolute; left: calc(var(--px, 50%) - 6px);
    width: 11px; height: 11px; background: var(--surface);
    border: 1.5px solid var(--act); transform: rotate(45deg);
  }
.comm-flow .callout.branch::after { border-color: var(--warn); }
.comm-flow .callout:not(.below)::after { bottom: -7px; border-top: none; border-left: none; }
.comm-flow .callout.below::after { top: -7px; border-bottom: none; border-right: none; }
.comm-flow .controls { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.comm-flow .controls button {
    font: inherit; font-weight: 600; font-size: 14.5px;
    background: var(--surface); color: var(--ink);
    border: 1.5px solid var(--line); border-radius: 999px;
    padding: 9px 22px; cursor: pointer;
  }
.comm-flow .controls button:hover { border-color: var(--act); color: var(--act); }
.comm-flow .controls button:focus-visible { outline: 2px solid var(--act); outline-offset: 2px; }
.comm-flow .controls button.primary { background: var(--act); border-color: var(--act); color: #fff; }
.comm-flow .controls button.primary:hover { color: #fff; filter: brightness(1.08); }
.comm-flow .controls #cj-btn-sound[aria-pressed="true"] {
    border-color: var(--warn); color: var(--warn); background: var(--warn-soft);
  }
.comm-flow .legend { margin-left: auto; display: flex; gap: 18px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.comm-flow .legend span { display: inline-flex; align-items: center; gap: 7px; }
.comm-flow .legend i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.comm-flow .legend .l-act i { background: var(--act); }
.comm-flow .legend .l-ok i { background: var(--ok); }
.comm-flow .legend .l-warn i { background: var(--warn); }


/* The journey sits in one of the site's dark bands, so its section heading takes the
   dark-zone ink colours rather than the light-content ones. */
#commerce-journey .section-head h2 { color: var(--d-ink); }
#commerce-journey .section-head p { color: var(--d-muted); }
#commerce-journey .section-head .eyebrow { color: var(--blue); }

/* ---- controls, docked inside the diagram panel ------------------------- */
/* Matches the CCFS lifecycle: compact buttons floating in the panel's top-right. */
.comm-flow .stage-box { position: relative; }

.comm-flow .cj-controls-row {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
}
.comm-flow .cj-controls-row .controls { margin: 0; gap: 5px; display: flex; align-items: center; }

.comm-flow .cj-controls-row .controls button {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 7px;
  line-height: 1.5;
  min-width: 0;
}
.comm-flow .cj-controls-row .controls .primary { min-width: 62px; }
.comm-flow .cj-controls-row .controls #cj-btn-sound { min-width: 78px; }

/* the row left behind now carries only the legend */
.comm-flow .controls { justify-content: flex-start; }

@media (max-width: 720px) {
  .comm-flow .cj-controls-row {
    position: static;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }
}

/* ---- fit the diagram to the panel -------------------------------------- */
/* Same as the CCFS lifecycle: scale to the panel rather than forcing the card to
   scroll sideways; keep a legible floor (and horizontal scrolling) on phones. */
.comm-flow svg.stage { min-width: 0; width: 100%; }

/* No breakpoint re-enables scrolling: the SVG scales all the way down. */

/* Same gap between the docked buttons and the diagram as the Onyx journey. */
/* No extra padding: the SVG already carries ~95 units of headroom above the first
   band (room for a top-row callout), so the docked buttons sit in that space the
   way they do on the Onyx journey instead of adding a second gap on top of it. */
.comm-flow .stage-box { padding-top: 0; }

/* ---- static height, no scrolling ----------------------------------------
   Same as the Onyx journey: clip instead of scroll, and let the viewBox
   (1040 x 542) reserve the height so the panel never resizes mid-animation. */
.comm-flow .stage-box { overflow: hidden; }
.comm-flow svg.stage { aspect-ratio: 1040 / 514; height: auto; min-width: 0; }

/* ---- legend, docked inside the panel ------------------------------------
   Was a row under the panel, outside its border. It now sits bottom-left in the
   space the diagram leaves, opposite the playback buttons. The step dialog is
   opaque and stacks above it, so a dialog opening downwards simply covers it
   for the moment it is open. */
.comm-flow .legend-row {
  position: absolute;
  left: 18px;
  bottom: 12px;
  z-index: 1;
}
.comm-flow .legend-row .legend { margin: 0; }