/* ═══════════════════════════════════════════════════════════════════
   Nova AI Ops — Blog in-post sims.
   Patterned after product/service-map's .sim-panel widgets, scoped to
   the blog article body so they never leak into the main-site chrome.
   Each sim is a tiny animated dashboard that makes the post's topic
   feel tangible: SLO burn-rate, incident timeline, alert heatmap, etc.
   ═══════════════════════════════════════════════════════════════════ */

.blog-sim{
  margin:32px 0 40px;padding:0;
  background:rgba(4,8,12,0.72);
  border:1px solid rgba(88,217,0,0.22);
  border-radius:16px;overflow:hidden;
  box-shadow:0 28px 72px -32px rgba(0,0,0,0.7),
             0 0 42px -18px rgba(88,217,0,0.28),
             inset 0 1px 0 rgba(255,255,255,0.04);
  position:relative;
}
.blog-sim::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(88,217,0,0.65),transparent);
  pointer-events:none;
}
.bsim-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 18px;
  border-bottom:1px solid rgba(88,217,0,0.15);
  background:linear-gradient(180deg,rgba(10,22,16,0.6),rgba(4,12,7,0.5));
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
.bsim-title{
  color:#9fe870;font-size:10.5px;font-weight:800;
  letter-spacing:0.14em;text-transform:uppercase;
}
.bsim-badge{
  display:inline-flex;align-items:center;gap:7px;
  color:#9fe870;font-size:10px;font-weight:700;letter-spacing:0.08em;
}
.bsim-badge .dot{
  width:6px;height:6px;border-radius:50%;background:#58d900;
  box-shadow:0 0 0 0 rgba(88,217,0,0.7);
  animation:bsim-live-pulse 1.6s ease-out infinite;
}
@keyframes bsim-live-pulse{
  0%{box-shadow:0 0 0 0 rgba(88,217,0,0.7);}
  70%{box-shadow:0 0 0 8px rgba(88,217,0,0);}
  100%{box-shadow:0 0 0 0 rgba(88,217,0,0);}
}
.bsim-body{padding:18px 20px;}
.bsim-row{display:flex;align-items:center;gap:14px;margin:10px 0;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;}
.bsim-row .l{color:rgba(226,232,240,0.55);font-size:10.5px;width:120px;flex-shrink:0;letter-spacing:0.02em;text-transform:uppercase;font-weight:700;}
.bsim-row .v{color:#f5f9ef;font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums;}
.bsim-row .v.ok{color:#9fe870;}
.bsim-row .v.warn{color:#fbbf24;}
.bsim-row .v.err{color:#ff7a87;}

/* ─── Shared primitives ─── */
.bsim-bar{position:relative;height:7px;flex:1;border-radius:4px;background:rgba(255,255,255,0.05);overflow:hidden;}
.bsim-bar-fill{position:absolute;top:0;left:0;bottom:0;width:60%;border-radius:4px;background:linear-gradient(90deg,#3ba800,#9fe870);box-shadow:0 0 10px rgba(88,217,0,0.5);}
.bsim-bar-fill.warn{background:linear-gradient(90deg,#d97706,#fbbf24);box-shadow:0 0 10px rgba(251,191,36,0.45);}
.bsim-bar-fill.err{background:linear-gradient(90deg,#b91c1c,#ff7a87);box-shadow:0 0 10px rgba(239,68,68,0.5);}
.bsim-bar::after{
  content:"";position:absolute;top:0;bottom:0;width:25%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
  animation:bsim-slide 2.4s linear infinite;
}
@keyframes bsim-slide{0%{transform:translateX(-100%);}100%{transform:translateX(400%);}}

/* ═══ 1. Best Practices — SLO dashboard ═══════════════════════════ */
.blog-sim-practices .bsim-body{display:grid;grid-template-columns:1.3fr 1fr;gap:22px;align-items:center;}
.blog-sim-practices .bsim-slo-bars{display:flex;flex-direction:column;gap:11px;}
.blog-sim-practices .bsim-slo-row{display:grid;grid-template-columns:110px 1fr 62px;align-items:center;gap:12px;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;}
.blog-sim-practices .bsim-slo-name{color:rgba(226,232,240,0.72);font-size:10.5px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;}
.blog-sim-practices .bsim-slo-val{color:#9fe870;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;text-align:right;}
.blog-sim-practices .bsim-slo-val.warn{color:#fbbf24;}
.blog-sim-practices .bsim-slo-val.err{color:#ff7a87;}
.blog-sim-practices .bsim-slo-row:nth-of-type(1) .bsim-bar-fill{width:99.94%;animation:bp-fill-a 6s ease-in-out infinite;}
.blog-sim-practices .bsim-slo-row:nth-of-type(2) .bsim-bar-fill{width:99.5%;animation:bp-fill-b 6s ease-in-out infinite;}
.blog-sim-practices .bsim-slo-row:nth-of-type(3) .bsim-bar-fill{width:97.1%;animation:bp-fill-c 6s ease-in-out infinite;}
@keyframes bp-fill-a{0%,100%{width:99.94%;}50%{width:99.87%;}}
@keyframes bp-fill-b{0%,100%{width:99.50%;}50%{width:99.21%;}}
@keyframes bp-fill-c{0%,100%{width:97.1%;}50%{width:96.4%;}}
.blog-sim-practices .bsim-gauge{position:relative;width:140px;height:140px;margin:0 auto;}
.blog-sim-practices .bsim-gauge svg{width:100%;height:100%;transform:rotate(-90deg);}
.blog-sim-practices .bsim-gauge .track{fill:none;stroke:rgba(255,255,255,0.05);stroke-width:10;}
.blog-sim-practices .bsim-gauge .arc{fill:none;stroke:url(#bp-gauge-grad);stroke-width:10;stroke-linecap:round;stroke-dasharray:314;stroke-dashoffset:94;animation:bp-gauge 6s ease-in-out infinite;filter:drop-shadow(0 0 8px rgba(159,232,112,0.55));}
@keyframes bp-gauge{0%,100%{stroke-dashoffset:94;}50%{stroke-dashoffset:141;}}
.blog-sim-practices .bsim-gauge-val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:ui-monospace,monospace;}
.blog-sim-practices .bsim-gauge-num{font-size:24px;font-weight:900;color:#9fe870;letter-spacing:-0.02em;text-shadow:0 0 12px rgba(159,232,112,0.5);}
.blog-sim-practices .bsim-gauge-lbl{font-size:9px;color:rgba(226,232,240,0.55);letter-spacing:0.12em;text-transform:uppercase;margin-top:2px;}

/* ═══ 2. Buyer's Guide — vendor scorecard ═════════════════════════ */
.blog-sim-buyer .bsim-vendor{display:grid;grid-template-columns:100px 1fr 50px 22px;align-items:center;gap:14px;padding:8px 0;font-family:ui-monospace,monospace;border-bottom:1px dotted rgba(255,255,255,0.05);}
.blog-sim-buyer .bsim-vendor:last-child{border-bottom:none;}
.blog-sim-buyer .bsim-vendor-name{color:rgba(226,232,240,0.78);font-size:12px;font-weight:700;}
.blog-sim-buyer .bsim-vendor-score{color:#9fe870;font-size:12px;font-weight:800;text-align:right;}
.blog-sim-buyer .bsim-vendor-win{color:#c6f58e;opacity:0;transform:scale(0.5);animation:bb-win 7s ease-out infinite;}
.blog-sim-buyer .bsim-vendor:nth-of-type(1) .bsim-bar-fill{width:92%;animation:bb-grow-a 7s cubic-bezier(.2,.7,.2,1) infinite;}
.blog-sim-buyer .bsim-vendor:nth-of-type(2) .bsim-bar-fill{width:74%;animation:bb-grow-b 7s cubic-bezier(.2,.7,.2,1) infinite;}
.blog-sim-buyer .bsim-vendor:nth-of-type(3) .bsim-bar-fill{width:61%;animation:bb-grow-c 7s cubic-bezier(.2,.7,.2,1) infinite;}
.blog-sim-buyer .bsim-vendor:nth-of-type(4) .bsim-bar-fill{width:38%;background:linear-gradient(90deg,#64748b,#94a3b8);animation:bb-grow-d 7s cubic-bezier(.2,.7,.2,1) infinite;}
@keyframes bb-grow-a{0%{width:0;}25%,100%{width:92%;}}
@keyframes bb-grow-b{0%{width:0;}25%,100%{width:74%;}}
@keyframes bb-grow-c{0%{width:0;}25%,100%{width:61%;}}
@keyframes bb-grow-d{0%{width:0;}25%,100%{width:38%;}}
@keyframes bb-win{0%,32%{opacity:0;transform:scale(0.5);}45%,100%{opacity:1;transform:scale(1);}}

/* ═══ 3. Comparisons — two-column head-to-head ═══════════════════ */
.blog-sim-compare .bsim-body{display:grid;grid-template-columns:1fr 64px 1fr;gap:16px;align-items:stretch;padding:18px 20px 22px;}
.blog-sim-compare .bsim-col{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:10px;background:rgba(15,23,42,0.55);border:1px solid rgba(88,217,0,0.2);}
.blog-sim-compare .bsim-col.right{border-color:rgba(100,116,139,0.3);background:rgba(10,15,25,0.5);}
.blog-sim-compare .bsim-col h5{margin:0 0 6px;font-size:10.5px;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;color:#9fe870;font-family:ui-monospace,monospace;}
.blog-sim-compare .bsim-col.right h5{color:rgba(148,163,184,0.9);}
.blog-sim-compare .bsim-metric{display:flex;justify-content:space-between;align-items:center;font-family:ui-monospace,monospace;}
.blog-sim-compare .bsim-metric-k{color:rgba(226,232,240,0.5);font-size:10px;text-transform:uppercase;letter-spacing:0.06em;}
.blog-sim-compare .bsim-metric-v{color:#f5f9ef;font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums;animation:bc-v-glow 5s ease-in-out infinite;}
.blog-sim-compare .bsim-col.right .bsim-metric-v{color:rgba(226,232,240,0.62);}
@keyframes bc-v-glow{0%,100%{text-shadow:0 0 0 transparent;}50%{text-shadow:0 0 10px rgba(159,232,112,0.55);}}
.blog-sim-compare .bsim-vs{display:flex;align-items:center;justify-content:center;}
.blog-sim-compare .bsim-vs-medal{width:46px;height:46px;border-radius:50%;background:#04140a;border:1.5px solid #9fe870;display:flex;align-items:center;justify-content:center;font-family:ui-monospace,monospace;font-weight:900;font-size:13px;color:#9fe870;letter-spacing:1px;animation:bc-medal 2.8s ease-in-out infinite;}
@keyframes bc-medal{0%,100%{box-shadow:0 0 0 0 rgba(159,232,112,0.5);transform:scale(1);}50%{box-shadow:0 0 0 8px rgba(159,232,112,0);transform:scale(1.08);}}

/* ═══ 4. SRE Tools — live toolchain ══════════════════════════════ */
.blog-sim-tools .bsim-body{padding:16px 20px 20px;}
.blog-sim-tools .bsim-tool-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;}
.blog-sim-tools .bsim-tool{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px 10px;border-radius:9px;background:rgba(10,22,16,0.55);border:1px solid rgba(88,217,0,0.18);font-family:ui-monospace,monospace;}
.blog-sim-tools .bsim-tool svg{width:18px;height:18px;color:#9fe870;opacity:0.5;transition:opacity 0.4s;}
.blog-sim-tools .bsim-tool .name{font-size:9px;color:rgba(226,232,240,0.55);font-weight:700;letter-spacing:0.04em;}
.blog-sim-tools .bsim-tool .pulse{position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:rgba(88,217,0,0.3);}
.blog-sim-tools .bsim-tool:nth-of-type(1) .pulse,.blog-sim-tools .bsim-tool:nth-of-type(1) svg{animation:bt-wake 5s 0s infinite;}
.blog-sim-tools .bsim-tool:nth-of-type(2) .pulse,.blog-sim-tools .bsim-tool:nth-of-type(2) svg{animation:bt-wake 5s 0.5s infinite;}
.blog-sim-tools .bsim-tool:nth-of-type(3) .pulse,.blog-sim-tools .bsim-tool:nth-of-type(3) svg{animation:bt-wake 5s 1s infinite;}
.blog-sim-tools .bsim-tool:nth-of-type(4) .pulse,.blog-sim-tools .bsim-tool:nth-of-type(4) svg{animation:bt-wake 5s 1.5s infinite;}
.blog-sim-tools .bsim-tool:nth-of-type(5) .pulse,.blog-sim-tools .bsim-tool:nth-of-type(5) svg{animation:bt-wake 5s 2s infinite;}
.blog-sim-tools .bsim-tool:nth-of-type(6) .pulse,.blog-sim-tools .bsim-tool:nth-of-type(6) svg{animation:bt-wake 5s 2.5s infinite;}
@keyframes bt-wake{0%,70%,100%{opacity:0.3;background:rgba(88,217,0,0.25);}15%,40%{opacity:1;background:#9fe870;box-shadow:0 0 10px rgba(159,232,112,0.8);}}

/* ═══ 5. Incident Response (MTTR) — timeline ═════════════════════ */
.blog-sim-mttr .bsim-timeline{position:relative;padding:18px 20px 14px;}
.blog-sim-mttr .bsim-track{position:relative;height:3px;background:rgba(255,255,255,0.06);border-radius:2px;margin:30px 0 10px;}
.blog-sim-mttr .bsim-track-fill{position:absolute;top:0;left:0;bottom:0;width:0;border-radius:2px;background:linear-gradient(90deg,#b91c1c 0%,#f97316 30%,#fbbf24 55%,#9fe870 100%);box-shadow:0 0 10px rgba(159,232,112,0.4);animation:bm-fill 7s linear infinite;}
@keyframes bm-fill{0%{width:0;}85%,100%{width:100%;}}
.blog-sim-mttr .bsim-marker{position:absolute;top:-8px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:#04140a;border:2px solid rgba(88,217,0,0.3);z-index:2;transition:border-color 0.3s,box-shadow 0.3s;}
.blog-sim-mttr .bsim-marker.on{border-color:#9fe870;box-shadow:0 0 12px rgba(159,232,112,0.7);background:#9fe870;}
.blog-sim-mttr .bsim-marker-1{left:0%;animation:bm-mk 7s 0s infinite;}
.blog-sim-mttr .bsim-marker-2{left:25%;animation:bm-mk 7s 1.4s infinite;}
.blog-sim-mttr .bsim-marker-3{left:50%;animation:bm-mk 7s 2.8s infinite;}
.blog-sim-mttr .bsim-marker-4{left:75%;animation:bm-mk 7s 4.2s infinite;}
.blog-sim-mttr .bsim-marker-5{left:100%;animation:bm-mk 7s 5.6s infinite;}
@keyframes bm-mk{0%,15%{background:#04140a;border-color:#b91c1c;box-shadow:0 0 8px rgba(185,28,28,0.6);}30%,100%{background:#9fe870;border-color:#9fe870;box-shadow:0 0 12px rgba(159,232,112,0.7);}}
.blog-sim-mttr .bsim-labels{display:flex;justify-content:space-between;font-family:ui-monospace,monospace;font-size:9.5px;color:rgba(226,232,240,0.55);text-transform:uppercase;letter-spacing:0.08em;font-weight:700;padding:0 2px;}
.blog-sim-mttr .bsim-eta{text-align:center;margin-top:22px;font-family:ui-monospace,monospace;font-size:10.5px;color:rgba(226,232,240,0.58);letter-spacing:0.08em;text-transform:uppercase;}
.blog-sim-mttr .bsim-eta strong{color:#9fe870;font-size:14px;font-weight:900;margin-left:6px;}

/* ═══ 6. Alert Management — heatmap ═══════════════════════════════ */
.blog-sim-alerts .bsim-body{padding:18px 20px 22px;}
.blog-sim-alerts .bsim-heatmap{display:grid;grid-template-columns:repeat(16,1fr);gap:3px;max-width:480px;margin:0 auto;}
.blog-sim-alerts .bsim-cell{aspect-ratio:1/1;border-radius:2px;background:rgba(88,217,0,0.12);}
.blog-sim-alerts .bsim-cell.e1{background:rgba(239,68,68,0.22);}
.blog-sim-alerts .bsim-cell.e2{background:rgba(239,68,68,0.45);}
.blog-sim-alerts .bsim-cell.e3{background:rgba(239,68,68,0.7);animation:ba-hot 2.2s ease-in-out infinite;}
.blog-sim-alerts .bsim-cell.w1{background:rgba(251,191,36,0.25);}
.blog-sim-alerts .bsim-cell.w2{background:rgba(251,191,36,0.45);}
.blog-sim-alerts .bsim-cell.ok{background:rgba(88,217,0,0.28);animation:ba-ok 3.6s ease-in-out infinite;}
@keyframes ba-hot{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0);}50%{box-shadow:0 0 8px rgba(239,68,68,0.8);}}
@keyframes ba-ok{0%,100%{background:rgba(88,217,0,0.28);}50%{background:rgba(88,217,0,0.55);box-shadow:0 0 6px rgba(159,232,112,0.5);}}
.blog-sim-alerts .bsim-legend{display:flex;gap:14px;margin-top:14px;justify-content:center;font-family:ui-monospace,monospace;font-size:9.5px;color:rgba(226,232,240,0.55);letter-spacing:0.06em;}
.blog-sim-alerts .bsim-legend span{display:flex;align-items:center;gap:5px;}
.blog-sim-alerts .bsim-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;}

/* ═══ 7. Kubernetes — pod grid with live states ═══════════════════ */
.blog-sim-k8s .bsim-body{padding:16px 20px 20px;}
.blog-sim-k8s .bsim-pods{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;}
.blog-sim-k8s .bsim-pod{position:relative;aspect-ratio:1.4/1;border-radius:8px;background:linear-gradient(180deg,rgba(15,42,23,0.6),rgba(8,20,12,0.8));border:1px solid rgba(88,217,0,0.25);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-family:ui-monospace,monospace;overflow:hidden;}
.blog-sim-k8s .bsim-pod::before{content:"";position:absolute;top:5px;right:6px;width:7px;height:7px;border-radius:50%;background:#58d900;box-shadow:0 0 8px rgba(88,217,0,0.7);}
.blog-sim-k8s .bsim-pod.restart::before{background:#fbbf24;animation:bk-warn 1.1s ease-in-out infinite;}
.blog-sim-k8s .bsim-pod.crash::before{background:#ef4444;animation:bk-crash 0.9s ease-in-out infinite;}
@keyframes bk-warn{0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,0.7);}50%{box-shadow:0 0 10px rgba(251,191,36,0.9);}}
@keyframes bk-crash{0%,100%{opacity:0.5;}50%{opacity:1;box-shadow:0 0 10px rgba(239,68,68,0.9);}}
.blog-sim-k8s .bsim-pod .name{font-size:8.5px;color:rgba(226,232,240,0.7);font-weight:700;letter-spacing:0.04em;}
.blog-sim-k8s .bsim-pod .cpu{font-size:10px;color:#9fe870;font-weight:800;font-variant-numeric:tabular-nums;}
.blog-sim-k8s .bsim-pod.restart .cpu{color:#fbbf24;}
.blog-sim-k8s .bsim-pod.crash .cpu{color:#ff7a87;}

/* ═══ 8. Agentic / AI & ML — agent queue ════════════════════════ */
/* The agent-row sim is shipped on EVERY blog post (regardless of cat),
   so style its parts on .blog-sim itself rather than .blog-sim-agentic. */
.blog-sim .bsim-body{padding:18px 20px 22px;}
.blog-sim .bsim-agent{display:grid;grid-template-columns:28px 1fr 70px 90px;align-items:center;gap:12px;padding:9px 0;font-family:ui-monospace,monospace;border-bottom:1px dotted rgba(255,255,255,0.05);}
.blog-sim .bsim-agent:last-child{border-bottom:none;}
.blog-sim .bsim-agent-avatar{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#c6f58e,#58d900);display:flex;align-items:center;justify-content:center;color:#04140a;font-weight:900;font-size:10px;-webkit-user-select:none;user-select:none;}
.bsim-agent-avatar::before{content:attr(data-letter);}
.blog-sim .bsim-agent-name{color:rgba(226,232,240,0.75);font-size:11px;font-weight:700;letter-spacing:0.02em;}
.blog-sim .bsim-agent-status{font-size:9.5px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;text-align:center;padding:2px 8px;border-radius:999px;border:1px solid;background:rgba(88,217,0,0.1);color:#9fe870;border-color:rgba(88,217,0,0.35);}
.blog-sim .bsim-agent-status.queued{background:rgba(251,191,36,0.1);color:#fbbf24;border-color:rgba(251,191,36,0.35);}
.blog-sim .bsim-agent-status.idle{background:rgba(148,163,184,0.1);color:#94a3b8;border-color:rgba(148,163,184,0.25);}
.blog-sim .bsim-agent:nth-of-type(1) .bsim-bar-fill{width:82%;animation:bg-work-a 5s ease-in-out infinite;}
.blog-sim .bsim-agent:nth-of-type(2) .bsim-bar-fill{width:64%;animation:bg-work-b 5s ease-in-out infinite;}
.blog-sim .bsim-agent:nth-of-type(3) .bsim-bar-fill{width:41%;animation:bg-work-c 5s ease-in-out infinite;}
.blog-sim .bsim-agent:nth-of-type(4) .bsim-bar-fill{width:12%;background:linear-gradient(90deg,#64748b,#94a3b8);}
@keyframes bg-work-a{0%,100%{width:82%;}50%{width:96%;}}
@keyframes bg-work-b{0%,100%{width:64%;}50%{width:78%;}}
@keyframes bg-work-c{0%,100%{width:41%;}50%{width:58%;}}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion:reduce){
  .blog-sim *{animation:none !important;}
  .blog-sim .bsim-bar::after{display:none !important;}
}

/* ─── Responsive ─── */
@media(max-width:720px){
  .blog-sim-practices .bsim-body{grid-template-columns:1fr;}
  .blog-sim-compare .bsim-body{grid-template-columns:1fr;}
  .blog-sim-compare .bsim-vs{justify-content:flex-start;padding:4px 0;}
  .blog-sim-tools .bsim-tool-grid{grid-template-columns:repeat(3,1fr);}
  .blog-sim-k8s .bsim-pods{grid-template-columns:repeat(3,1fr);}
  .blog-sim-alerts .bsim-heatmap{grid-template-columns:repeat(12,1fr);}
  .blog-sim .bsim-agent{grid-template-columns:24px 1fr 60px;}
  .blog-sim .bsim-agent .bsim-bar-wrap{display:none;}
}