/* Diagrams for the SOC as a Service (site/soc.html) and Agentic AI for Cortex XSOAR
   (site/agentic-ai-xsoar.html) offering pages.
   Loaded after css/offering-visuals.css, which owns the shared ov- classes.
   Everything here is namespaced ovs- so it cannot collide with the Webflow shell. */

/* Board heading. offering-visuals.css styles .ov-board-top as 11px mono,
   so the heading resets the browser's h3 defaults. */
.ovs-head {
  margin: 0;
  color: #f3f6f7;
  font: 400 11px/1.6 Protomono, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Lanes. The label column holds the owner or the stage; the body holds the diagram.
   The concept flows, the lock band and the timeline rows all share this template. */
.ovs-lane,
.ovs-axis-row {
  display: grid;
  grid-template-columns: minmax(140px, 190px) minmax(0, 1fr);
  gap: 0 24px;
}

.ovs-lane { margin-top: 26px; }
.ovs-axis-row { margin-bottom: 14px; }
/* The axis row has no lane label, so its body sits in the second column too. */
.ovs-axis-row > .ovs-lane-body { grid-column: 2; }
.ovs-lane-head { padding-left: 12px; border-left: 2px solid var(--ov-accent, #5ae082); }
.ovs-lane-head .ov-index { display: block; margin-bottom: 6px; }

.ovs-lane-name {
  display: block;
  color: #f3f6f7;
  font: 11px/1.5 Protomono, monospace;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.ovs-lane-sub {
  display: block;
  margin-top: 6px;
  color: var(--ov-muted, #b4c0c7);
  font: 11px/1.6 Protomono, monospace;
}

.ovs-lane-body { min-width: 0; }

.ovs-lane-foot {
  max-width: 82ch;
  margin: 14px 0 0;
  color: var(--ov-muted, #b4c0c7);
  font: 12px/1.7 Protomono, monospace;
}

/* Vertical connector from one band to the next, centred in the body column. */
.ovs-lane--connector { align-items: center; height: 40px; margin-top: 0; }

.ovs-connector {
  grid-column: 2;
  justify-self: center;
  position: relative;
  width: 1px;
  height: 38px;
  background: #ffffff38;
}

.ovs-connector::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 8px;
  height: 8px;
  border-right: 1px solid var(--ov-accent, #5ae082);
  border-bottom: 1px solid var(--ov-accent, #5ae082);
  transform: translate(-50%, 1px) rotate(45deg);
}

/* Three parallel sources converging into one platform. The funnel assumes the
   same 32px gap as .ovs-sources, so it lines up with the three node centres. */
.ovs-sources {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.ovs-funnel { position: relative; height: 44px; }

.ovs-funnel::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc((100% - 64px) / 6);
  right: calc((100% - 64px) / 6);
  height: 1px;
  background: #ffffff38;
}

.ovs-funnel-drop {
  position: absolute;
  top: 0;
  width: 1px;
  height: 16px;
  background: #ffffff38;
}

.ovs-funnel-drop:nth-child(1) { left: calc((100% - 64px) / 6); }
.ovs-funnel-drop:nth-child(2) { left: 50%; }
.ovs-funnel-drop:nth-child(3) { right: calc((100% - 64px) / 6); }

.ovs-funnel-stem {
  position: absolute;
  top: 0;
  bottom: 8px;
  left: 50%;
  width: 1px;
  background: #ffffff38;
}

.ovs-funnel-tip {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 8px;
  height: 8px;
  border-right: 1px solid var(--ov-accent, #5ae082);
  border-bottom: 1px solid var(--ov-accent, #5ae082);
  transform: translateX(-50%) rotate(45deg);
}

/* Boundary bands: the access line and the approval line. */
.ovs-gate {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin-top: 26px;
  padding: 14px 18px;
  border: 1px dashed #ffffff3d;
  border-left: 2px solid var(--ov-accent, #5ae082);
  background: #ffffff05;
}

.ovs-gate-chip {
  color: var(--ov-accent, #5ae082);
  font: 11px/1.6 Protomono, monospace;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ovs-gate-note {
  max-width: 82ch;
  color: var(--ov-muted, #b4c0c7);
  font: 12px/1.7 Protomono, monospace;
}

/* Two independent checks either side of an AND gate. */
.ovs-checks {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}

.ovs-and {
  padding: 6px 10px;
  border: 1px solid var(--ov-accent, #5ae082);
  color: var(--ov-accent, #5ae082);
  font: 11px/1.5 Protomono, monospace;
  letter-spacing: .16em;
}

/* Lock band: the three gates every write passes. */
.ovs-lane--locks {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px dashed var(--ov-accent, #5ae082);
}

.ovs-locks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ovs-lock { padding: 14px; border: 1px solid var(--ov-accent, #5ae082); background: #ffffff08; }
.ovs-lock strong { display: block; color: var(--ov-accent, #5ae082); font: 600 14px/1.35 Arial, sans-serif; }
.ovs-lock span { display: block; margin-top: 6px; color: var(--ov-muted, #b4c0c7); font: 11px/1.65 Protomono, monospace; }

/* Permission chips inside a lane. */
.ovs-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.ovs-chip { padding: 9px 12px; border: 1px solid #ffffff2e; background: #1b2429; }
.ovs-chip strong { display: block; color: #f3f6f7; font: 600 13px/1.35 Arial, sans-serif; }

.ovs-chip span {
  display: block;
  margin-top: 4px;
  color: var(--ov-muted, #b4c0c7);
  font: 10px/1.5 Protomono, monospace;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.ovs-chip--write { border-color: var(--ov-accent, #5ae082); background: #ffffff08; }
.ovs-chip--write strong { color: var(--ov-accent, #5ae082); }

/* Timeline: the week axis and the lane segments under it.
   The axis and the track share one column template so the marks line up.
   Segments carry their own week text, so the stacked phone layout still reads. */
.ovs-axis,
.ovs-track {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .62fr) minmax(0, 1fr) minmax(0, .62fr);
  gap: 10px;
}

.ovs-tick {
  color: var(--ov-muted, #b4c0c7);
  font: 11px/1.6 Protomono, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ovs-tick--mark {
  padding-left: 10px;
  border-left: 1px dashed var(--ov-accent, #5ae082);
  color: var(--ov-accent, #5ae082);
}

.ovs-seg { padding: 14px; border: 1px solid #ffffff24; background: #ffffff05; }
.ovs-seg strong { display: block; color: #f3f6f7; font: 600 14px/1.35 Arial, sans-serif; }
.ovs-seg span { display: block; margin-top: 7px; color: var(--ov-muted, #b4c0c7); font: 11px/1.65 Protomono, monospace; }
.ovs-seg--wait { border-style: dashed; }
.ovs-seg--live, .ovs-seg--end { border-color: var(--ov-accent, #5ae082); background-color: #ffffff0a; }
.ovs-seg--live strong, .ovs-seg--end strong { color: var(--ov-accent, #5ae082); }

.ovs-seg--from-week-4 { grid-column: 2 / -1; }
.ovs-seg--weeks-1-to-7 { grid-column: 1 / 4; }
.ovs-seg--week-8 { grid-column: 4 / -1; }
.ovs-seg--full { grid-column: 1 / -1; }

/* Tablet: the lane label moves above the body so the flows keep their width. */
@media (max-width: 991px) {
  .ovs-lane,
  .ovs-axis-row { grid-template-columns: minmax(0, 1fr); gap: 14px; }

  .ovs-lane--connector { height: 34px; }
  .ovs-connector { grid-column: 1; height: 32px; }
  .ovs-axis-row > .ovs-lane-body { grid-column: 1; }
}

/* Phone: every band stacks, and each segment carries its own week label. */
@media (max-width: 767px) {
  .ovs-lane { margin-top: 22px; }
  .ovs-lane-head { padding-left: 10px; }
  .ovs-gate { padding: 12px 14px; }

  .ovs-sources { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ovs-funnel { height: 26px; }
  .ovs-funnel::before,
  .ovs-funnel-drop { display: none; }

  .ovs-checks { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ovs-and { justify-self: center; }

  .ovs-locks { grid-template-columns: minmax(0, 1fr); }

  .ovs-axis { display: flex; flex-wrap: wrap; }
  .ovs-axis .ovs-tick:not(:last-child)::after { content: "\00b7"; margin: 0 8px; color: #ffffff3d; }
  .ovs-tick--mark { padding-left: 0; border-left: 0; }

  .ovs-track { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ovs-seg--from-week-4,
  .ovs-seg--weeks-1-to-7,
  .ovs-seg--week-8,
  .ovs-seg--full { grid-column: auto; }
}