/* Explanatory diagrams for the AI offering pages:
   Agentic IT Operations, Local AI & Sovereign Inference, and Unified AI/ML Platform.
   Load after offering-visuals.css. Every class here carries the ova- prefix; the
   shared ov- classes and colours come from offering-visuals.css. */

/* --- shared diagram pieces ------------------------------------------------ */

/* Scoping hook and the flow gap these diagrams align their connectors to. */
.ova-board { --ova-gap: 32px; }

/* Flows and input rows are real lists; the diagram carries the numbering. */
ol.ova-steps,
ol.ova-inputs {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Step number above the node title. */
.ova-board .ov-index { margin-bottom: 10px; }

/* Lane label above a flow row. */
.ova-lane-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  margin-bottom: 16px;
}
.ova-lane-note {
  font: 11px/1.6 Protomono, monospace;
  letter-spacing: .04em;
  color: var(--ov-muted, #b4c0c7);
}

/* Vertical connector between stacked rows: dashed line, accent arrowhead. */
.ova-connect {
  position: relative;
  width: 0;
  height: 30px;
  margin: 6px auto;
  border-left: 1px dashed #ffffff59;
}
.ova-connect::after {
  content: "";
  position: absolute;
  left: -4px;
  bottom: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 7px solid var(--ov-accent, #86a8ff);
}

/* The same connector, dropped under a chosen column of a two-node flow. */
.ova-drop {
  position: relative;
  width: 0;
  height: 34px;
  border-left: 1px dashed #ffffff59;
}
.ova-drop--col2 { margin-left: calc(100% - (100% - var(--ova-gap)) / 4); }
.ova-drop::after {
  content: "";
  position: absolute;
  left: -4px;
  bottom: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 7px solid var(--ov-accent, #86a8ff);
}

/* Approval boundary: dashed accent rules around a full-width band. */
.ova-gate {
  margin: 6px 0;
  padding: 20px 22px;
  border-top: 1px dashed var(--ov-accent, #86a8ff);
  border-bottom: 1px dashed var(--ov-accent, #86a8ff);
  background: #ffffff05;
}
.ova-gate strong { display: block; color: #f3f6f7; font: 600 18px/1.25 Arial, sans-serif; }
.ova-gate > span { display: block; margin-top: 9px; color: var(--ov-muted, #b4c0c7); font: 12px/1.6 Protomono, monospace; }

/* Decision band and the two outcomes below it. */
.ova-fork {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px var(--ova-gap);
}
.ova-fork > .ova-gate { grid-column: 1 / -1; margin: 0; }
.ova-branch { position: relative; }
.ova-branch::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -44px;
  height: 36px;
  border-left: 1px dashed #ffffff59;
}
.ova-branch::after {
  content: "";
  position: absolute;
  left: calc(50% - 4px);
  top: -8px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 7px solid var(--ov-accent, #86a8ff);
}
.ova-branch > .ov-tag { margin-bottom: 12px; }

/* Perimeter map. */
.ova-map { --ova-map-pad: 20px; }
.ova-perimeter {
  padding: var(--ova-map-pad);
  border: 1px dashed var(--ov-accent, #86a8ff);
  background: #ffffff03;
}
.ova-perimeter-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  margin-bottom: 18px;
}
.ova-outside { padding: 0 var(--ova-map-pad); }
.ova-egress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ova-gap);
}
.ova-egress-line { grid-column: 2; position: relative; height: 52px; }
.ova-egress-line::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  border-left: 1px dashed var(--ov-accent, #86a8ff);
}
.ova-egress-line::after {
  content: "";
  position: absolute;
  left: calc(50% - 4px);
  bottom: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 7px solid var(--ov-accent, #86a8ff);
}
.ova-egress-label {
  grid-column: 3 / 5;
  margin: 0;
  padding-top: 10px;
  font: 11px/1.7 Protomono, monospace;
  color: var(--ov-muted, #b4c0c7);
}
.ova-cloud { margin-top: 4px; }
.ov-node.ova-cloud-node { max-width: 620px; border-style: dashed; }

/* Sovereignty spectrum: a track with four stops, A to D. */
.ova-spectrum-axis {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 22px;
  font: 10px/1.5 Protomono, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ov-muted, #b4c0c7);
}
.ova-spectrum-axis strong { color: var(--ov-accent, #86a8ff); font-weight: 400; }
.ova-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ova-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ova-track::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 18px;
  height: 1px;
  background: var(--ov-accent, #86a8ff);
  opacity: .45;
}
.ova-stop { position: relative; }
.ova-stop-letter {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--ov-accent, #86a8ff);
  background: #111719;
  color: var(--ov-accent, #86a8ff);
  font: 12px/1 Protomono, monospace;
}
.ova-stop strong { display: block; margin-top: 14px; color: #f3f6f7; font: 600 17px/1.25 Arial, sans-serif; }
.ova-stop > span { display: block; margin-top: 8px; color: var(--ov-muted, #b4c0c7); font: 12px/1.6 Protomono, monospace; }
.ova-track > .ova-stop:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 9px;
  right: -28px;
  color: var(--ov-accent, #86a8ff);
  font: 18px/1 Arial, sans-serif;
}
.ova-stop--end .ova-stop-letter { background: var(--ov-accent, #86a8ff); color: #111719; }
.ova-stop--end strong { color: var(--ov-accent, #86a8ff); }

/* Inputs converging into one platform. */
.ova-inputs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ova-gap);
}
.ova-merge {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ova-gap);
  height: 56px;
}
.ova-merge > div { position: relative; }
.ova-merge > div::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 7px;
  border-left: 1px dashed #ffffff59;
}
.ova-merge > div::after {
  content: "";
  position: absolute;
  left: calc(50% - 4px);
  bottom: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 7px solid var(--ov-accent, #86a8ff);
}
.ova-platform { padding: 24px; }
.ov-node.ova-gpu { border-style: dashed; }

/* --- small screens: the same diagrams, stacked ----------------------------- */

@media (max-width: 1100px) {
  .ova-steps.ov-flow { grid-auto-flow: row; grid-auto-columns: auto; }
  .ova-steps.ov-flow > .ov-node:not(:last-child)::after { content: "↓"; top: auto; right: 50%; bottom: -28px; transform: translateX(50%); }
  .ova-drop--col2 { margin-left: 50%; }
  .ova-fork { gap: 40px 12px; }
  .ova-branch::before { top: -40px; height: 32px; }
  .ova-map { --ova-map-pad: 14px; }
  .ova-egress { grid-template-columns: 1fr; gap: 0; }
  .ova-egress-line { grid-column: 1; height: 44px; }
  .ova-egress-label { grid-column: 1; padding: 10px 0 8px; }
  .ova-spectrum-axis { display: block; }
  .ova-spectrum-axis .ova-axis-end,
  .ova-spectrum-axis .ova-axis-arrow { display: none; }
  .ova-track { grid-template-columns: 1fr; gap: 34px; }
  .ova-track::before { display: none; }
  .ova-track > .ova-stop:not(:last-child)::after {
    content: "↓";
    top: auto;
    bottom: -27px;
    right: auto;
    left: 8px;
  }
  .ova-inputs { grid-template-columns: 1fr; gap: 20px; }
  .ova-merge { grid-template-columns: 1fr; height: 48px; }
  .ova-merge > div:not(:first-child) { display: none; }
}