/* ===================================================================
   Orion Live Ops — shared simulated deployment graph
   Namespaced .olo-*  ·  reused by demos-v2.html and portal-v2.html
   Uses existing Orion tokens with self-contained fallbacks.
   =================================================================== */
.olo{--olo-gold:var(--gold,#C9A84C);--olo-gold2:var(--gold2,#E2C97E);--olo-cream:var(--cream,#F0E8D5);--olo-muted:rgba(240,232,213,0.48);--olo-red:#E0685C;--olo-green:#5FBF7A;
  color:var(--olo-cream);font-family:-apple-system,BlinkMacSystemFont,'Montserrat',sans-serif}
.olo *{box-sizing:border-box}

/* Honesty banner */
.olo-banner{display:flex;gap:12px;align-items:flex-start;background:rgba(201,168,76,0.07);border:1px solid rgba(201,168,76,0.28);border-radius:12px;padding:14px 18px;margin-bottom:28px}
.olo-banner-badge{flex-shrink:0;font-size:8px;letter-spacing:0.18em;text-transform:uppercase;font-weight:700;color:var(--olo-gold);background:rgba(201,168,76,0.12);border:1px solid rgba(201,168,76,0.3);border-radius:100px;padding:5px 11px;margin-top:1px}
.olo-banner-text{font-size:12px;line-height:1.65;color:rgba(240,232,213,0.72);font-weight:300}
.olo-banner-text strong{color:var(--olo-cream);font-weight:600}

/* How this works — 3-step strip */
.olo-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(240,232,213,0.06);border:1px solid rgba(240,232,213,0.06);border-radius:12px;overflow:hidden;margin-bottom:28px}
.olo-step{background:rgba(8,8,14,0.6);padding:18px 20px;display:flex;gap:13px;align-items:flex-start}
.olo-step-n{flex-shrink:0;width:24px;height:24px;border-radius:50%;border:1px solid rgba(201,168,76,0.4);color:var(--olo-gold);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:'Cinzel',serif}
.olo-step-t{font-size:12px;font-weight:600;color:var(--olo-cream);margin-bottom:3px;letter-spacing:0.02em}
.olo-step-d{font-size:11px;line-height:1.55;color:var(--olo-muted);font-weight:300}

/* Main layout: graph + feed */
.olo-main{display:grid;grid-template-columns:1fr 280px;gap:16px;align-items:stretch}
.olo-graph-col{min-width:0;display:flex;flex-direction:column;gap:16px}
.olo-graphwrap{position:relative;background:rgba(6,6,12,0.55);border:1px solid rgba(201,168,76,0.12);border-radius:14px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.olo-svg{display:block;width:100%;min-width:680px;height:auto}

/* SVG node/edge classes */
.olo-edge{stroke:rgba(201,168,76,0.22);stroke-width:1.5;fill:none}
.olo-edge-tel{stroke:rgba(201,168,76,0.14);stroke-width:1;fill:none;stroke-dasharray:2 6}
.olo-node-rect{fill:rgba(12,12,20,0.92);stroke:rgba(201,168,76,0.28);stroke-width:1;rx:11}
.olo-node-rect.gate{stroke:rgba(201,168,76,0.5);stroke-width:1.4}
.olo-node-rect.exception{stroke:var(--olo-red);stroke-width:1.6}
.olo-node-title{fill:var(--olo-cream);font-size:11.5px;font-weight:600;font-family:-apple-system,'Montserrat',sans-serif}
.olo-node-sub{fill:rgba(240,232,213,0.42);font-size:8.5px;font-weight:400;font-family:-apple-system,'Montserrat',sans-serif}
.olo-node-count{fill:var(--olo-gold);font-size:15px;font-weight:700;font-family:'Cinzel',serif}
.olo-node-countlab{fill:rgba(240,232,213,0.4);font-size:7.5px;letter-spacing:0.1em;font-family:-apple-system,'Montserrat',sans-serif;text-transform:uppercase}
.olo-gate-badge{fill:var(--olo-gold);font-size:7.5px;font-weight:700;letter-spacing:0.12em;font-family:-apple-system,'Montserrat',sans-serif;text-transform:uppercase}
.olo-gate-pill{fill:rgba(201,168,76,0.12);stroke:rgba(201,168,76,0.4);stroke-width:1}
.olo-dot-active{fill:var(--olo-green)}
.olo-dot-processing{fill:var(--olo-gold)}
.olo-dot-exception{fill:var(--olo-red)}
.olo-packet{fill:var(--olo-gold2)}
.olo-packet-ex{fill:var(--olo-red)}
.olo-held-ring{fill:none;stroke:var(--olo-red);stroke-width:1.5;opacity:0}

/* Human-gate plain-language callout under graph */
.olo-gatenote{display:flex;gap:10px;align-items:center;background:rgba(201,168,76,0.05);border:1px solid rgba(201,168,76,0.2);border-radius:10px;padding:11px 15px;font-size:11.5px;line-height:1.5;color:rgba(240,232,213,0.7);font-weight:300}
.olo-gatenote svg{flex-shrink:0}
.olo-gatenote strong{color:var(--olo-cream);font-weight:600}

/* Counters */
.olo-counters{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:rgba(240,232,213,0.06);border:1px solid rgba(240,232,213,0.06);border-radius:12px;overflow:hidden}
.olo-counter{background:rgba(8,8,14,0.6);padding:16px 12px;text-align:center}
.olo-counter-val{font-family:'Cinzel',serif;font-size:clamp(18px,2vw,24px);font-weight:600;color:var(--olo-gold);line-height:1;display:block;margin-bottom:6px}
.olo-counter-lab{font-size:7.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--olo-muted);line-height:1.4}

/* Activity feed */
.olo-feed{background:rgba(6,6,12,0.55);border:1px solid rgba(201,168,76,0.12);border-radius:14px;display:flex;flex-direction:column;overflow:hidden}
.olo-feed-head{padding:14px 16px;border-bottom:1px solid rgba(240,232,213,0.06);display:flex;align-items:center;gap:8px;flex-shrink:0}
.olo-feed-live{width:7px;height:7px;border-radius:50%;background:var(--olo-green);box-shadow:0 0 8px rgba(95,191,122,0.7);animation:olo-blink 2s ease-in-out infinite}
.olo-feed-title{font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--olo-muted);font-weight:600}
.olo-feed-list{list-style:none;margin:0;padding:6px;overflow-y:auto;max-height:420px;display:flex;flex-direction:column;gap:2px}
.olo-feed-row{padding:9px 10px;border-radius:8px;font-size:11px;line-height:1.5;font-weight:300;color:rgba(240,232,213,0.7);background:rgba(240,232,213,0.02);animation:olo-rowin 0.4s ease}
.olo-feed-row.ex{background:rgba(224,104,92,0.07);border-left:2px solid rgba(224,104,92,0.5)}
.olo-feed-row.ok{border-left:2px solid rgba(95,191,122,0.35)}
.olo-feed-time{font-family:'DM Mono',monospace;font-size:9.5px;color:rgba(201,168,76,0.6);margin-right:4px}
.olo-feed-row strong{color:var(--olo-cream);font-weight:600}

/* Controls */
.olo-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:4px}
.olo-status{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.olo-status-item{display:flex;align-items:center;gap:6px;font-size:9px;letter-spacing:0.08em;text-transform:uppercase;color:var(--olo-muted);font-weight:500}
.olo-status-dot{width:6px;height:6px;border-radius:50%}
.olo-btn{background:transparent;border:1px solid rgba(201,168,76,0.3);color:var(--olo-gold);font-family:-apple-system,'Montserrat',sans-serif;font-size:9px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;padding:9px 18px;border-radius:100px;cursor:pointer;transition:background 0.25s,border-color 0.25s;display:inline-flex;align-items:center;gap:7px}
.olo-btn:hover{background:rgba(201,168,76,0.08);border-color:var(--olo-gold)}

/* Portal ROI summary (portal framing only) */
.olo-roi{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.olo-roi-card{background:rgba(201,168,76,0.04);border:1px solid rgba(201,168,76,0.16);border-radius:12px;padding:20px}
.olo-roi-val{font-family:'Cormorant Garamond',serif;font-size:30px;font-weight:700;color:var(--olo-gold);line-height:1;margin-bottom:6px}
.olo-roi-lab{font-size:9px;letter-spacing:0.14em;text-transform:uppercase;color:var(--olo-muted)}

/* Reduced-motion static note */
.olo-static-note{font-size:10px;color:var(--olo-muted);font-style:italic;margin-top:8px;text-align:center;font-weight:300}

@keyframes olo-blink{0%,100%{opacity:1}50%{opacity:0.35}}
@keyframes olo-rowin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ── Responsive ── */
@media(max-width:900px){
  .olo-main{grid-template-columns:1fr}
  .olo-feed-list{max-height:300px}
  .olo-counters{grid-template-columns:repeat(3,1fr)}
  .olo-counter:nth-child(4),.olo-counter:nth-child(5){grid-column:span 1}
}
@media(max-width:640px){
  .olo-steps{grid-template-columns:1fr}
  .olo-counters{grid-template-columns:1fr 1fr}
  .olo-roi{grid-template-columns:1fr}
  .olo-banner{flex-direction:column;gap:8px}
}

/* ── Reduced motion: kill component motion, keep it legible ── */
@media(prefers-reduced-motion:reduce){
  .olo-feed-live{animation:none}
  .olo-feed-row{animation:none}
  .olo-held-ring{opacity:0!important}
}

/* ── Portal preview framing (portal-v2.html) ── */
.olo-portal-preview{max-width:1100px;margin:0 auto;padding:40px 24px 64px}
.olo-pp-inner{background:rgba(8,8,14,0.6);border:1px solid rgba(201,168,76,0.14);border-radius:18px;padding:28px 30px}
.olo-pp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:8px}
.olo-pp-eyebrow{font-size:8px;letter-spacing:0.24em;text-transform:uppercase;color:rgba(201,168,76,0.6);font-weight:700;margin-bottom:8px}
.olo-pp-title{font-family:'Cormorant Garamond',serif;font-size:clamp(26px,3vw,38px);font-weight:600;color:var(--cream,#F0E8D5);line-height:1.1;margin:0}
.olo-pp-tag{flex-shrink:0;font-size:8px;letter-spacing:0.16em;text-transform:uppercase;font-weight:700;color:rgba(201,168,76,0.75);border:1px solid rgba(201,168,76,0.3);border-radius:100px;padding:6px 12px}
.olo-pp-caption{font-size:13px;line-height:1.7;color:rgba(240,232,213,0.55);font-weight:300;max-width:660px;margin:0 0 24px}
@media(max-width:640px){.olo-pp-inner{padding:20px 16px}.olo-pp-head{flex-direction:column}}