/* InTech Solutions — ONYX operations journey.
   Adapted from "ONYX Operations Journey.html" in THE ONYX/DOCS: same flow and animation,
   scoped to .onyx-flow so it cannot leak into the page or the other two diagrams. */
.onyx-flow {
  /* --bg is the ink the gold Play button prints its label in, not just a backdrop,
     so it has to stay a real dark colour. The container itself is painted below. */
  --bg: #0b1524;
  --surface: #0f1c31;
  --pop: #16253f;
  --ink: #e9f1fb;
  --muted: #93a9c6;
  --line: rgba(146, 180, 226, .20);
  --gold: #e0b64a;
  --sell: #e0b64a;
  --buy: #7c8cf8;
  --rec: #4ec98d;
  --sell-band: rgba(224, 182, 74, .08);
  --buy-band: rgba(124, 140, 248, .08);
  --rec-band: rgba(78, 201, 141, .08);
  --chip-off: rgba(146, 180, 226, .16);
  --pop-shadow: rgba(0, 0, 0, .55);
  color: var(--ink);
  background: transparent;
}

/* The node glyphs live inside <symbol>, and <use> copies them into a shadow tree that
   descendant selectors cannot reach — so scoping ".icon" to ".onyx-flow .icon" stopped
   it matching and the paths fell back to solid black. The symbols now carry their own
   presentation attributes, and colour arrives through currentColor, which does inherit
   across the shadow boundary from the <use> element the page can still select. */
.onyx-flow .node use { color: var(--muted); transition: color .3s; }
.onyx-flow .node.sell.active use, .onyx-flow .node.sell.done use { color: var(--sell); }
.onyx-flow .node.buy.active  use, .onyx-flow .node.buy.done  use { color: var(--buy); }
.onyx-flow .node.rec.active  use, .onyx-flow .node.rec.done  use { color: var(--rec); }
.onyx-flow use.t-icon { color: var(--gold); }

.onyx-flow * { margin: 0; padding: 0; box-sizing: border-box; }
.onyx-flow {
    background: var(--bg);
    color: var(--ink);
    font-family: 'Figtree', 'Segoe UI', system-ui, sans-serif;
    padding: 40px 18px 70px;
  }
.onyx-flow .wrap { max-width: 1280px; margin: 0 auto; }
.onyx-flow .brandline { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; }
.onyx-flow .brandline .mark {
    font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 15px;
    letter-spacing: 6px; color: var(--ink);
  }
.onyx-flow .brandline .tag {
    font-size: 12px; letter-spacing: 2.6px; text-transform: uppercase; color: var(--gold);
  }
.onyx-flow h1 {
    font-family: 'Archivo', sans-serif; color: var(--ink);
    font-size: clamp(26px, 4vw, 38px); letter-spacing: -0.4px; text-wrap: balance;
  }
.onyx-flow .sub { color: var(--muted); margin-top: 8px; max-width: 78ch; font-size: 16px; }
.onyx-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;
  }
.onyx-flow .caption-bar .stepno {
    font-family: 'Archivo', sans-serif; font-weight: 700; color: var(--gold);
    font-size: 13px; letter-spacing: 1.5px; white-space: nowrap;
  }
.onyx-flow .caption-bar .cap { font-size: 16.5px; font-weight: 500; }
.onyx-flow .stage-box {
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    padding: 14px 10px 8px; overflow-x: auto;
  }
.onyx-flow svg.stage { display: block; min-width: 1060px; max-width: 100%; height: auto; margin: 0 auto; }
.onyx-flow .band { rx: 12; }
.onyx-flow .band.sell { fill: var(--sell-band); }
.onyx-flow .band.buy { fill: var(--buy-band); }
.onyx-flow .band.rec { fill: var(--rec-band); }
.onyx-flow .lane-label {
    font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 700;
    letter-spacing: 2.4px; fill: var(--muted);
  }
.onyx-flow .lane-label.sell { fill: var(--sell); }
.onyx-flow .lane-label.buy { fill: var(--buy); }
.onyx-flow .lane-label.rec { fill: var(--rec); }
.onyx-flow #oj-tenant rect.frame {
    fill: var(--surface); stroke: var(--line); stroke-width: 1.5; rx: 12;
    transition: stroke .4s, stroke-width .4s;
  }
.onyx-flow #oj-tenant.active rect.frame { stroke: var(--gold); stroke-width: 2.5; }
.onyx-flow #oj-tenant text.mark {
    font-family: 'Archivo', sans-serif; font-size: 12px; font-weight: 700;
    letter-spacing: 3.4px; fill: var(--gold);
  }
.onyx-flow #oj-tenant text.co { font-size: 14.5px; font-weight: 600; fill: var(--ink); }
.onyx-flow #oj-tenant .t-icon { stroke: var(--muted); transition: stroke .4s; }
.onyx-flow #oj-tenant.active .t-icon { stroke: var(--gold); }
.onyx-flow .chip rect { fill: var(--chip-off); rx: 13; transition: fill .45s; }
.onyx-flow .chip text { font-size: 11px; font-weight: 600; fill: var(--muted); transition: fill .45s; }
.onyx-flow #oj-tenant.active .chip rect { fill: color-mix(in srgb, var(--gold) 20%, transparent); }
.onyx-flow #oj-tenant.active .chip text { fill: var(--gold); }
.onyx-flow .chip { opacity: 0; transform: translateY(5px); transition: opacity .4s, transform .4s; }
.onyx-flow #oj-tenant.active .chip { opacity: 1; transform: translateY(0); }
.onyx-flow .edge { stroke: var(--line); stroke-width: 2.5; fill: none; transition: stroke .3s; }
.onyx-flow .edge.lit { stroke: var(--sell); }
.onyx-flow .edge.buy.lit { stroke: var(--buy); }
.onyx-flow .edge.rec.lit { stroke: var(--rec); }
.onyx-flow .edge-label { font-size: 11px; fill: var(--muted); }
.onyx-flow .icon { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.onyx-flow .node .icon { stroke: var(--muted); transition: stroke .3s; }
.onyx-flow .node.sell.active .icon,
.onyx-flow .node.sell.done .icon { stroke: var(--sell); }
.onyx-flow .node.buy.active  .icon,
.onyx-flow .node.buy.done  .icon { stroke: var(--buy); }
.onyx-flow .node.rec.active  .icon,
.onyx-flow .node.rec.done  .icon { stroke: var(--rec); }
.onyx-flow .node.done .icon { opacity: .75; }
.onyx-flow .node rect.box {
    fill: var(--surface); stroke: var(--line); stroke-width: 2; rx: 12;
    transition: stroke .3s, stroke-width .3s;
  }
.onyx-flow .node text.lbl { font-size: 12.5px; font-weight: 600; fill: var(--ink); }
.onyx-flow .node text.sublbl { font-size: 10px; fill: var(--muted); }
.onyx-flow .node circle.badge { fill: var(--line); transition: fill .3s; }
.onyx-flow .node text.badge-t {
    font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 700; fill: var(--surface);
  }
.onyx-flow .node.sell.active rect.box { stroke: var(--sell); stroke-width: 3; }
.onyx-flow .node.sell.active circle.badge { fill: var(--sell); }
.onyx-flow .node.buy.active rect.box { stroke: var(--buy);  stroke-width: 3; }
.onyx-flow .node.buy.active circle.badge { fill: var(--buy); }
.onyx-flow .node.rec.active rect.box { stroke: var(--rec);  stroke-width: 3; }
.onyx-flow .node.rec.active circle.badge { fill: var(--rec); }
.onyx-flow .node.done rect.box { stroke: var(--rec); }
.onyx-flow .node.done circle.badge { fill: var(--rec); }
.onyx-flow .pulse-ring { fill: none; stroke-width: 2; opacity: 0; }
.onyx-flow .node.sell .pulse-ring { stroke: var(--sell); }
.onyx-flow .node.buy  .pulse-ring { stroke: var(--buy); }
.onyx-flow .node.rec  .pulse-ring { stroke: var(--rec); }
.onyx-flow .node .pulse-ring { transform-origin: center; transform-box: fill-box; }
.onyx-flow .node.active .pulse-ring { animation: ring 1.2s ease-out infinite; }
@keyframes ring {
    0%   { opacity: .7; transform: scale(1); }
    100% { opacity: 0;   transform: scale(1.12); }
  }

.onyx-flow #oj-marker { opacity: 0; }
.onyx-flow #oj-marker .dot { fill: var(--sell); }
.onyx-flow #oj-marker.buy .dot { fill: var(--buy); }
.onyx-flow #oj-marker.rec .dot { fill: var(--rec); }
/* Fade only. Transitioning the transform made the first popup slide in from the
   SVG origin, so it appeared clipped against the top of the panel; moving it
   instantly and only fading keeps it inside its box, as the other two flows do. */
.onyx-flow #oj-popup { opacity: 0; transition: opacity .32s ease; pointer-events: none; }
.onyx-flow #oj-popup.show { opacity: 1; }
.onyx-flow #oj-popup rect.pbox {
    fill: var(--pop); stroke: var(--line); stroke-width: 1.5; rx: 10;
    filter: drop-shadow(0 6px 14px var(--pop-shadow));
  }
.onyx-flow #oj-popup rect.paccent { rx: 2; fill: var(--gold); }
.onyx-flow #oj-popup.buy rect.paccent { fill: var(--buy); }
.onyx-flow #oj-popup.rec rect.paccent { fill: var(--rec); }
.onyx-flow #oj-popup .icon { stroke: var(--gold); }
.onyx-flow #oj-popup.buy .icon { stroke: var(--buy); }
.onyx-flow #oj-popup.rec .icon { stroke: var(--rec); }

.onyx-flow .audit-badge { opacity: 0; transition: opacity .5s; }
.onyx-flow .audit-badge.show { opacity: 1; }
.onyx-flow .audit-badge rect { fill: var(--rec); rx: 13; }
.onyx-flow .audit-badge text { font-size: 11.5px; font-weight: 700; fill: #ffffff; letter-spacing: .6px; }
.onyx-flow .audit-badge .icon { stroke: #ffffff; }
.onyx-flow .controls { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.onyx-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;
  }
.onyx-flow .controls button:hover { border-color: var(--gold); color: var(--gold); }
.onyx-flow .controls button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.onyx-flow .controls button.primary { background: var(--gold); border-color: var(--gold); color: var(--bg); }
.onyx-flow .controls button.primary:hover { color: var(--bg); filter: brightness(1.1); }
.onyx-flow .legend { margin-left: auto; display: flex; gap: 18px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.onyx-flow .legend span { display: inline-flex; align-items: center; gap: 7px; }
.onyx-flow .legend i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.onyx-flow .legend .l-sell i { background: var(--sell); }
.onyx-flow .legend .l-buy i { background: var(--buy); }
.onyx-flow .legend .l-rec i { background: var(--rec); }
.onyx-flow .footnote { margin-top: 18px; font-size: 13px; color: var(--muted); max-width: 80ch; }
@media (prefers-reduced-motion: reduce) {
.onyx-flow .node.active .pulse-ring { animation: none; opacity: 0; }
.onyx-flow .chip,
.onyx-flow #oj-popup { transition: none; }}


/* ---- controls, docked inside the diagram panel ------------------------- */
/* Matches the eCommerce order journey and the CCFS lifecycle: compact buttons
   floating in the panel's top-right rather than a full-width row beneath it. */
/* Headroom so the docked controls clear the tenant frame drawn at the top of the SVG. */
.onyx-flow .stage-box { position: relative; padding-top: 44px; }

.onyx-flow .oj-controls-row {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
}
.onyx-flow .oj-controls-row .controls { margin: 0; gap: 5px; }

.onyx-flow .oj-controls-row .controls button {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 7px;
  line-height: 1.5;
}
.onyx-flow .oj-controls-row .controls button.primary { min-width: 62px; }

/* the row left behind now carries only the legend */
.onyx-flow .controls { margin-top: 14px; }

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

/* ---- section heading on the dark band ---------------------------------- */
/* Without this the heading inherits the light-content ink and reads dark-on-dark. */
#onyx-journey .section-head h2 { color: var(--d-ink); }
#onyx-journey .section-head p { color: var(--d-muted); }
#onyx-journey .section-head .eyebrow { color: var(--blue); }

/* ---- fit to the panel, and a slightly larger hand -----------------------
   The stage was pinned wide enough to force the card to scroll sideways. The
   SVG has a viewBox, so it scales instead; the type is nudged up now that the
   tenant bar is gone and there is room for it. */
.onyx-flow .stage-box { overflow-x: visible; }
.onyx-flow svg.stage { min-width: 0; width: 100%; height: auto; }

/* The boxes no longer carry a glyph, so the label can use the full width. */
.onyx-flow .node text.lbl    { font-size: 17px; }
.onyx-flow .node text.sublbl { font-size: 12.5px; }
.onyx-flow .node text.badge-t { font-size: 13px; }
.onyx-flow .lane-label       { font-size: 14px; letter-spacing: 2.6px; }
.onyx-flow .edge-label       { font-size: 13px; }
.onyx-flow .caption-bar .cap { font-size: 17px; }

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

/* ---- step dialog, matched to the eCommerce callout ----------------------
   The SVG renders at ~0.66 scale, so 19 units lands at the same ~12.5px the
   eCommerce callout uses; the title carries weight rather than extra size,
   exactly as the callout's <b> does. */
.onyx-flow #oj-popup text.ptitle { font-size: 19px; font-weight: 600; fill: var(--ink); }
.onyx-flow #oj-popup text.pline  { font-size: 19px; fill: var(--muted); }

/* rounded and accent-bordered, like the callout */
.onyx-flow #oj-popup rect.pbox   { rx: 18; stroke: var(--gold); stroke-width: 2; }
.onyx-flow #oj-popup.buy rect.pbox { stroke: var(--buy); }
.onyx-flow #oj-popup.rec rect.pbox { stroke: var(--rec); }

/* ---- panel chrome -------------------------------------------------------
   Same card as the order journey and the CCFS lifecycle, so the three product
   flows present identically. */
.onyx-flow .stage-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 44px 14px 6px;
}

/* ---- static height, no scrolling ---------------------------------------
   The panel clips rather than scrolls, and the aspect ratio comes from the
   viewBox (1600 x 514) so the height is reserved before the diagram lays out
   and does not move while the animation runs. */
.onyx-flow .stage-box { overflow: hidden; }
.onyx-flow svg.stage { aspect-ratio: 1040 / 514; height: auto; min-width: 0; }

/* ---- the order journey's frame -----------------------------------------
   Redrawn in the same 1040-unit viewBox as the order journey, so these are its
   type sizes verbatim: at the same panel width they now render at the same
   number of pixels rather than at 79% of them. */
.onyx-flow .stage-inner { position: relative; }
.onyx-flow .node text.lbl     { font-size: 13.5px; font-weight: 600; }
.onyx-flow .node text.sublbl  { font-size: 11px; }
.onyx-flow .node text.badge-t { font-size: 12.5px; }
.onyx-flow .node circle.badge { r: 11; }
.onyx-flow .lane-label        { font-size: 11.5px; letter-spacing: 2.4px; }
.onyx-flow .edge-label        { font-size: 11.5px; }
.onyx-flow .node rect.box     { stroke-width: 2; rx: 12; }
.onyx-flow .band              { rx: 10; }
.onyx-flow .audit-badge text  { font-size: 11px; letter-spacing: 1.4px; }

/* ---- step dialog: the order journey's callout ---------------------------
   Was SVG text inside the diagram, which scaled with the viewBox. It is now the
   same HTML bubble the order journey uses — same type, border, arrow and
   bubble-in — tinted to whichever lane is in play. */
.onyx-flow .callout {
  position: absolute; z-index: 5; pointer-events: none; opacity: 0;
  background: var(--surface); border: 1.5px solid var(--sell); border-radius: 12px;
  padding: 10px 13px; box-shadow: var(--shadow);
  font-size: 12.5px; line-height: 1.45; color: var(--muted);
}
.onyx-flow .callout.buy { border-color: var(--buy); }
.onyx-flow .callout.rec { border-color: var(--rec); }
.onyx-flow .callout b {
  display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px;
  font-family: 'Figtree', sans-serif;
}
.onyx-flow .callout:not(.below) { transform: translateY(-100%); }
.onyx-flow .callout.show { opacity: 1; animation: bubble .35s cubic-bezier(.34, 1.56, .64, 1); }
.onyx-flow .callout::after {
  content: ""; position: absolute; left: calc(var(--px, 50%) - 6px);
  width: 11px; height: 11px; background: var(--surface);
  border: 1.5px solid var(--sell); transform: rotate(45deg);
}
.onyx-flow .callout.buy::after { border-color: var(--buy); }
.onyx-flow .callout.rec::after { border-color: var(--rec); }
.onyx-flow .callout:not(.below)::after { bottom: -7px; border-top: none; border-left: none; }
.onyx-flow .callout.below::after { top: -7px; border-bottom: none; border-right: none; }

/* ---- panel padding, matched to the order journey ------------------------
   Two earlier rules still put 44px above the diagram, which the docked buttons
   already occupy; and the side padding was 14px against the order journey's
   10px, which made this SVG render 44px narrower and its type correspondingly
   smaller. Both now match, so the two panels are the same width. */
.onyx-flow .stage-box { padding: 0 10px 6px; }

/* The artifact's own page padding (40px 18px 70px) was still wrapping the panel,
   making it 36px narrower than the order journey's and shrinking its type by the
   same ratio. The section already supplies the spacing. */
.onyx-flow { padding: 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. */
.onyx-flow .legend-row {
  position: absolute;
  left: 18px;
  bottom: 12px;
  z-index: 1;
}
.onyx-flow .legend-row .legend { margin: 0; }

/* The artifact painted its own page background on this wrapper, and the wrapper
   has no radius — so a square #0b1524 corner showed behind the panel's rounded
   one. The other two journeys keep their wrapper transparent and let the section
   band show through; this one now does the same. --bg stays defined: it is also
   the ink the gold Play button prints its label in. */
.onyx-flow { background: none; }