/* DEMO · pipe — styles added during the capability upgrade. Loaded after demos.css. */

/* stage + side column (toast above live log) — everything visible at once */
.d4-mid{display:grid;grid-template-columns:1.65fr 1fr;gap:22px;align-items:stretch}
@media(max-width:920px){.d4-mid{grid-template-columns:1fr}}
.d4-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.d4-mid .pipe-log{flex:1;max-height:none;min-height:200px}
#d4-toast .wa-toast{position:relative;right:auto;top:auto;width:100%}

/* live ops dashboard strip */
.d4-dash{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media(max-width:860px){.d4-dash{grid-template-columns:repeat(2,1fr)}}
.d4-stat{padding:14px 10px;text-align:center;transition:transform .3s,border-color .3s}
.d4-stat b{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:600;display:block;background:linear-gradient(120deg,#7c3aed,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent}
.d4-stat span{display:block;margin-top:3px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#9aa3c7}
@keyframes d4tick{35%{transform:scale(1.06);border-color:rgba(34,211,238,.55)}}
.d4-stat.d4-tick{animation:d4tick .5s ease}

/* LLM reasoning bubble (near the triage node) */
.d4-brain{position:absolute;left:54%;top:2.5%;transform:translateX(-50%);width:330px;max-width:48%;padding:12px 15px;border-radius:15px;background:rgba(18,14,44,.92);border:1px solid rgba(124,58,237,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 16px 40px rgba(0,0,0,.45),0 0 30px rgba(124,58,237,.25);z-index:5;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.d4-brain.on{opacity:1;visibility:visible}
.d4-brain::after{content:"";position:absolute;left:50%;bottom:-7px;width:12px;height:12px;transform:translateX(-50%) rotate(45deg);background:inherit;border-right:1px solid rgba(124,58,237,.55);border-bottom:1px solid rgba(124,58,237,.55)}
.d4-brain-h{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#c4b5fd;margin-bottom:6px}
.d4-brain-txt{font-family:'Space Grotesk',sans-serif;font-size:12px;line-height:1.55;color:#e0e7ff;min-height:18px}

/* human-in-the-loop approval card */
.d4-appr{position:absolute;left:18px;top:auto;bottom:14px;width:310px;max-width:46%;padding:16px 18px;border-radius:18px;background:rgba(42,24,8,.9);border:1px solid rgba(251,191,36,.5);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 18px 44px rgba(0,0,0,.5),0 0 34px rgba(251,191,36,.18);z-index:6}
.d4-appr-h{font-family:'Space Grotesk',sans-serif;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#fbbf24;margin-bottom:8px}
.d4-appr p{font-size:12.5px;color:#fde8c4;line-height:1.55;margin-bottom:13px}
.d4-appr p b{color:#fff}
.d4-appr-btns{display:flex;gap:10px;flex-wrap:wrap}
.d4-appr .d-btn{padding:10px 18px;font-size:13px}
.d4-appr-note{margin-top:9px;font-size:11px;color:rgba(253,232,196,.6)}

/* day summary card */
.d4-daysum{padding:20px 22px}
.d4-daysum h6{font-family:'Space Grotesk',sans-serif;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#34d399;margin-bottom:14px}
.d4-daysum-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:12px}
@media(max-width:860px){.d4-daysum-grid{grid-template-columns:repeat(2,1fr)}}
.d4-daysum-grid>div{text-align:center;padding:10px 4px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.d4-daysum-grid b{font-family:'Space Grotesk',sans-serif;font-size:23px;font-weight:600;display:block;background:linear-gradient(120deg,#34d399,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent}
.d4-daysum-grid span{display:block;margin-top:3px;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:#9aa3c7}