/* Interactive Visuals — shared diagram engine styles (light mode).
   Everything is scoped under .iv-widget so nothing leaks into the theme.

   Palette:
     --iv-blue    brand primary (#0074FF) — controls, acceleration layer, links
     --iv-orange  brand secondary (#FF9167) — AI-related traffic/badges
     --iv-good    green  — healthy / calm / positive state
     --iv-warn    amber  — mid / cautionary state
     --iv-bad     red    — strained / negative state
   Each has a "-soft" tint (pale background fill) for use behind its main color. */

.iv-widget, .iv-widget *{box-sizing:border-box;}
.iv-widget{
  --iv-blue:#0074FF;
  --iv-blue-soft:#eaf3ff;
  --iv-orange:#FF9167;
  --iv-orange-deep:#e05a26;
  --iv-orange-soft:#fff1ea;
  --iv-good:#15803d;
  --iv-good-soft:#eafaf0;
  --iv-warn:#b45309;
  --iv-warn-soft:#fdf3e3;
  --iv-bad:#dc2626;
  --iv-bad-soft:#fdecec;
  --iv-ink:#1c2438;
  --iv-ink-dim:#5b6478;
  --iv-ink-faint:#8a93a8;
  --iv-card:#ffffff;
  --iv-card-border:#e2e8f0;
  --iv-node-bg:#f5f8fc;
  --iv-node-border:#dbe4f0;
  --iv-track-bg:#e6ebf3;
  --iv-track-border:#dde3ec;
  --iv-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--iv-card);
  color:var(--iv-ink);
  border:1px solid var(--iv-card-border);
  border-radius:14px;
  padding:22px 18px 16px;
  margin:28px 0;
  line-height:1.5;
  box-shadow:0 1px 3px rgba(15,23,42,.06),0 8px 24px rgba(15,23,42,.05);
  -webkit-font-smoothing:antialiased;
}
.iv-widget a{color:var(--iv-blue);}

/* ---------- Diagram stage (schematic canvas with a faint dot grid) ---------- */

.iv-diagram{
  display:flex;align-items:center;gap:0;min-height:170px;
  padding:20px 16px;
  border:1px solid #edf1f7;
  border-radius:12px;
  background:
    radial-gradient(circle at 1px 1px,#e3eaf4 1px,transparent 1.4px) 0 0/18px 18px,
    linear-gradient(180deg,#fcfdff 0%,#f7f9fc 100%);
}

.iv-node-col{display:flex;flex-direction:column;gap:10px;flex:0 0 auto;}
.iv-node-col.iv-sources{width:174px;}
.iv-node-col.iv-target{width:160px;align-items:flex-end;}

.iv-col-label{
  font-family:var(--iv-mono);
  font-size:9px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--iv-ink-faint);
  margin-bottom:-2px;
}

/* ---------- Nodes ---------- */

.iv-node{
  display:flex;align-items:center;gap:9px;
  background:linear-gradient(180deg,#ffffff 0%,#f7fafd 100%);
  border:1px solid var(--iv-node-border);
  border-radius:11px;
  padding:9px 11px;
  font-size:12px;font-weight:500;
  color:var(--iv-ink);
  box-shadow:0 1px 2px rgba(15,23,42,.05);
  transition:opacity .4s ease,border-color .4s ease,background .4s ease,
             transform .25s ease,box-shadow .25s ease,filter .4s ease;
}
.iv-node .iv-node-label{line-height:1.35;}
.iv-node.iv-source:hover{transform:translateY(-1px);box-shadow:0 3px 9px rgba(15,23,42,.09);}
.iv-node.iv-dim{opacity:.45;filter:saturate(.25);}

/* Icon chips */
.iv-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;flex:0 0 auto;
  border-radius:6px;
  background:var(--iv-blue-soft);color:var(--iv-blue);
  transition:background .35s ease,color .35s ease;
}
.iv-ico svg{display:block;}
.iv-node.iv-source.iv-ai{border-color:rgba(255,145,103,.55);}
.iv-node.iv-source.iv-ai .iv-ico{background:var(--iv-orange-soft);color:var(--iv-orange-deep);}

/* "AI" / teaser badge on the AI Agents node */
.iv-node .iv-badge{
  display:none;
  font-family:var(--iv-mono);
  font-size:8.5px;font-weight:700;letter-spacing:.06em;
  background:var(--iv-orange-soft);
  color:#c2410c;
  border:1px solid rgba(255,145,103,.55);
  padding:1.5px 6px;border-radius:20px;
  margin-left:6px;vertical-align:1px;
}

/* ERP / system-of-record node with a small load meter */
.iv-node.iv-erp{
  flex-direction:column;align-items:flex-end;gap:8px;
  width:100%;
  font-size:12.5px;font-weight:600;text-align:right;
  border-radius:12px;padding:13px 13px 11px;
}
.iv-erp-top{display:flex;align-items:center;gap:8px;}
.iv-node.iv-erp .iv-ico{background:#ffffff;border:1px solid var(--iv-node-border);color:var(--iv-ink-dim);}
.iv-node.iv-erp.iv-calm{border-color:rgba(21,128,61,.4);background:linear-gradient(180deg,#ffffff 0%,var(--iv-good-soft) 100%);}
.iv-node.iv-erp.iv-calm .iv-ico{color:var(--iv-good);border-color:rgba(21,128,61,.3);}
.iv-node.iv-erp.iv-strained{border-color:rgba(220,38,38,.5);background:linear-gradient(180deg,#ffffff 0%,var(--iv-bad-soft) 100%);animation:iv-shake .5s infinite;}
.iv-node.iv-erp.iv-strained .iv-ico{color:var(--iv-bad);border-color:rgba(220,38,38,.35);}

.iv-load{display:flex;gap:3px;align-items:flex-end;height:12px;}
.iv-load i{display:block;width:4px;border-radius:2px;background:#d9e1ec;transition:background .35s ease;}
.iv-load i:nth-child(1){height:6px;}
.iv-load i:nth-child(2){height:9px;}
.iv-load i:nth-child(3){height:12px;}
.iv-erp.iv-calm .iv-load i:nth-child(1){background:var(--iv-good);}
.iv-erp.iv-strained .iv-load i{background:var(--iv-bad);animation:iv-load-pulse .6s ease-in-out infinite alternate;}
.iv-erp.iv-strained .iv-load i:nth-child(2){animation-delay:.15s;}
.iv-erp.iv-strained .iv-load i:nth-child(3){animation-delay:.3s;}

/* Acceleration Layer node — expands into the flow when activated */
.iv-node.iv-middle{
  --iv-mid-w:158px;
  display:block;width:0;opacity:0;margin:0;padding:0;
  overflow:hidden;white-space:nowrap;
  border-radius:12px;text-align:center;
  border-color:rgba(0,116,255,.45);
  background:linear-gradient(180deg,#ffffff 0%,var(--iv-blue-soft) 100%);
  transition:width .6s cubic-bezier(.2,.8,.2,1),opacity .5s ease,margin .6s ease,box-shadow .5s ease;
  flex:0 0 auto;
}
.iv-node.iv-middle.iv-active{width:var(--iv-mid-w);opacity:1;margin:0 6px;box-shadow:0 0 0 4px rgba(0,116,255,.07),0 2px 8px rgba(0,116,255,.12);}
.iv-mid-inner{
  display:inline-flex;flex-direction:column;align-items:center;gap:5px;
  width:var(--iv-mid-w);padding:13px 12px;
  white-space:normal;vertical-align:middle;
}
.iv-node.iv-middle .iv-ico{width:26px;height:26px;border-radius:8px;background:var(--iv-blue);color:#ffffff;box-shadow:0 2px 6px rgba(0,116,255,.35);}
.iv-mid-title{font-size:12px;font-weight:700;letter-spacing:-.01em;}
.iv-node.iv-middle .iv-sub{display:block;font-weight:400;color:var(--iv-ink-dim);font-size:10px;line-height:1.45;}

@keyframes iv-shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-1.5px);}75%{transform:translateX(1.5px);}}
@keyframes iv-load-pulse{from{opacity:1;}to{opacity:.35;}}

/* ---------- Tracks (request pipelines) ---------- */

.iv-track{position:relative;flex:1 1 auto;height:2px;background:var(--iv-track-bg);margin:0 5px;min-width:24px;transition:opacity .4s ease;}
.iv-track::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(91,100,120,.3) 0 6px,transparent 6px 13px);
  animation:iv-dash 1.2s linear infinite;
}
.iv-track::after{
  content:'';position:absolute;right:0;top:50%;
  width:6px;height:6px;
  border-top:1.5px solid #b3bfd1;border-right:1.5px solid #b3bfd1;
  transform:translateY(-50%) rotate(45deg);
}
.iv-track.iv-collapsed{flex:0 0 0;min-width:0;width:0;margin:0;opacity:0;overflow:hidden;}

.iv-track .iv-dot{
  position:absolute;top:50%;z-index:2;
  width:8px;height:8px;border-radius:50%;
  color:var(--iv-blue);background:currentColor;
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 3px color-mix(in srgb,currentColor 15%,transparent);
  animation-timing-function:linear;animation-iteration-count:infinite;
}
.iv-track .iv-dot::before{
  content:'';position:absolute;right:100%;top:50%;transform:translateY(-50%);
  width:16px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,currentColor);
  opacity:.4;
}
.iv-track .iv-dot.iv-good{color:var(--iv-good);}
.iv-track .iv-dot.iv-warn{color:var(--iv-warn);}
.iv-track .iv-dot.iv-bad{color:var(--iv-bad);}
.iv-track .iv-dot.iv-ai{color:#f97646;width:7px;height:7px;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 22%,transparent);}

@keyframes iv-dash{to{background-position:13px 0;}}
@keyframes iv-flow{from{left:-3%;}to{left:103%;}}
@keyframes iv-flowDrop{0%{left:-3%;opacity:1;}55%{opacity:1;}62%{left:58%;}78%{opacity:0;left:62%;}100%{opacity:0;left:62%;}}

/* ---------- Controls ---------- */

.iv-controls{margin-top:18px;padding-top:16px;border-top:1px dashed var(--iv-card-border);}
.iv-control-label{
  font-family:var(--iv-mono);
  font-size:9.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--iv-ink-faint);
  margin-bottom:9px;
}
.iv-control-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;color:var(--iv-ink);font-size:14px;}

/* Instrument-panel stat readout */
.iv-readout{margin-left:auto;display:flex;gap:16px;align-items:stretch;}
.iv-stat{display:flex;flex-direction:column;gap:4px;align-items:flex-end;text-align:right;}
.iv-stat + .iv-stat{border-left:1px solid #e9edf3;padding-left:16px;}
.iv-stat-label{
  font-family:var(--iv-mono);
  font-size:9px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--iv-ink-faint);white-space:nowrap;
}
.iv-stat-value{
  display:flex;align-items:baseline;gap:3px;
  font-family:var(--iv-mono);
  font-size:20px;font-weight:700;line-height:1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  color:var(--iv-ink);white-space:nowrap;
  transition:color .3s ease;
}
.iv-stat-value i{font-style:normal;font-size:11px;font-weight:600;letter-spacing:0;color:var(--iv-ink-faint);}
.iv-stat-good{color:var(--iv-good) !important;}
.iv-stat-warn{color:var(--iv-warn) !important;}
.iv-stat-bad{color:var(--iv-bad) !important;}

/* Small comparison chip next to a stat (e.g. "12× baseline") */
.iv-delta{
  display:inline-flex;
  font-family:var(--iv-mono);
  font-size:9.5px;font-weight:700;letter-spacing:.04em;
  padding:2px 7px;border-radius:12px;
  background:#f1f4f9;border:1px solid var(--iv-card-border);
  color:var(--iv-ink-dim);
  transition:background .3s ease,border-color .3s ease,color .3s ease;
}
.iv-delta.iv-hot{background:var(--iv-orange-soft);border-color:rgba(255,145,103,.55);color:#c2410c;}

/* Legacy range input (kept for custom visuals that still use a slider) */
.iv-widget input[type=range]{-webkit-appearance:none;appearance:none;width:220px;height:4px;background:var(--iv-track-bg);border:1px solid var(--iv-track-border);border-radius:4px;outline:none;}
.iv-widget input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--iv-blue);cursor:pointer;box-shadow:0 0 0 4px rgba(0,116,255,.18);}
.iv-widget input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--iv-blue);cursor:pointer;border:none;box-shadow:0 0 0 4px rgba(0,116,255,.18);}

/* ---------- Segmented control (2–N options, sliding tone-aware thumb) ---------- */

.iv-toggle{
  --iv-thumb:var(--iv-blue);
  --iv-thumb-glow:rgba(0,116,255,.3);
  position:relative;display:inline-flex;
  background:#eef1f6;
  border:1px solid #e0e6ee;border-radius:30px;padding:3px;
  cursor:pointer;user-select:none;-webkit-user-select:none;
  box-shadow:inset 0 1px 3px rgba(15,23,42,.06);
}
.iv-toggle.iv-tone-good{--iv-thumb:#159447;--iv-thumb-glow:rgba(21,128,61,.32);}
.iv-toggle.iv-tone-warn{--iv-thumb:#c47110;--iv-thumb-glow:rgba(180,83,9,.32);}
.iv-toggle.iv-tone-bad{--iv-thumb:#dc2626;--iv-thumb-glow:rgba(220,38,38,.32);}
.iv-toggle.iv-tone-ai{--iv-thumb:#ea580c;--iv-thumb-glow:rgba(255,145,103,.42);}

.iv-toggle .iv-opt{
  position:relative;z-index:2;
  flex:1 1 0;min-width:120px;
  text-align:center;padding:8px 14px;
  font-size:12.5px;font-weight:500;line-height:1.2;
  white-space:nowrap;
  border-radius:24px;color:var(--iv-ink-dim);
  transition:color .3s ease;
}
.iv-toggle .iv-opt:hover{color:var(--iv-ink);}
.iv-toggle .iv-opt.iv-on{color:#ffffff;font-weight:650;}
.iv-toggle .iv-opt.iv-on:hover{color:#ffffff;}
.iv-toggle .iv-opt:focus-visible{outline:2px solid var(--iv-blue);outline-offset:2px;}

/* Two-line option variant: name over a small mono value (latency speeds) */
.iv-toggle .iv-opt b{display:block;font-size:12px;font-weight:650;}
.iv-toggle .iv-opt small{
  display:block;margin-top:2px;
  font-family:var(--iv-mono);font-size:9.5px;letter-spacing:.02em;
  color:var(--iv-ink-faint);
  transition:color .3s ease;
}
.iv-toggle .iv-opt.iv-on small{color:rgba(255,255,255,.82);}

.iv-toggle .iv-thumb{
  position:absolute;top:3px;bottom:3px;left:3px;z-index:1;
  width:calc(50% - 3px);border-radius:24px;
  background:var(--iv-thumb);
  box-shadow:0 1px 4px var(--iv-thumb-glow),inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .4s cubic-bezier(.3,1.35,.4,1),background-color .35s ease,box-shadow .35s ease;
}

/* ---------- Status chip / caption ---------- */

.iv-status{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:14px;padding:5px 12px 5px 10px;
  border-radius:20px;border:1px solid transparent;
  font-size:11.5px;font-weight:600;letter-spacing:.01em;
  transition:color .35s ease,background .35s ease,border-color .35s ease;
}
.iv-status i{position:relative;width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:currentColor;}
.iv-status i::after{content:'';position:absolute;inset:0;border-radius:50%;background:currentColor;animation:iv-ping 1.8s ease-out infinite;}
.iv-status.iv-ok{color:var(--iv-good);background:var(--iv-good-soft);border-color:rgba(21,128,61,.28);}
.iv-status.iv-down{color:var(--iv-bad);background:var(--iv-bad-soft);border-color:rgba(220,38,38,.3);}

@keyframes iv-ping{0%{transform:scale(1);opacity:.55;}80%,100%{transform:scale(2.8);opacity:0;}}

.iv-caption{margin-top:14px;font-size:12px;color:var(--iv-ink-dim);line-height:1.55;}
.iv-caption strong{
  display:inline-block;
  font-family:var(--iv-mono);
  font-size:9px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--iv-ink-dim);
  background:#f1f4f9;border:1px solid #e4e9f0;border-radius:4px;
  padding:1.5px 6px;margin-right:2px;
  vertical-align:1px;
}

/* ---------- Responsive ---------- */

@media (max-width:640px){
  .iv-diagram{padding:14px 10px;}
  .iv-node-col.iv-sources{width:126px;}
  .iv-node-col.iv-target{width:114px;}
  .iv-node{font-size:10.5px;padding:8px 8px;gap:6px;}
  .iv-ico{width:18px;height:18px;border-radius:5px;}
  .iv-ico svg{width:11px;height:11px;}
  .iv-node.iv-middle{--iv-mid-w:118px;}
  .iv-node.iv-middle .iv-sub{font-size:9px;}
  .iv-track{margin:0 3px;min-width:14px;}
  .iv-toggle{width:100%;}
  .iv-toggle .iv-opt{min-width:0;padding:8px 8px;font-size:11.5px;}
  .iv-toggle .iv-opt b{font-size:11px;}
  .iv-toggle .iv-opt small{font-size:8.5px;}
  .iv-readout{margin-left:0;width:100%;justify-content:flex-start;}
  .iv-stat{align-items:flex-start;text-align:left;}
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion:reduce){
  .iv-track::before,
  .iv-status i::after,
  .iv-erp.iv-strained,
  .iv-erp.iv-strained .iv-load i{animation:none;}
  .iv-track .iv-dot{animation:none;}
  .iv-track .iv-dot:nth-child(3n+1){left:22%;}
  .iv-track .iv-dot:nth-child(3n+2){left:50%;}
  .iv-track .iv-dot:nth-child(3n){left:78%;}
}