/* ==========================================================
   Black Pearl Automation - Offline Repository page
   Loaded only by /products/offline-repository/, after site.css and products.css.
   No frameworks, no external requests.
   ========================================================== */

/* ---------------- Demo stage ---------------- */
.ostage{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px;align-items:stretch}
.ostage .net{grid-column:1;grid-row:1}
.ostage .vstat{grid-column:1;grid-row:2}
.ostage .chat{grid-column:2;grid-row:1 / span 2}
.ostage .chat-body{min-height:380px}
.ostage svg{display:block;width:100%;height:auto}
.ostage svg text{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif}
.vchips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.vchips .tagchip b{font-size:.98rem}
.tagchip.ok{border-color:#1f5b3a}.tagchip.ok b{color:#4ade80}
.pill.ok{background:#12301f;color:#4ade80}
@media (max-width:900px){
  .ostage{grid-template-columns:minmax(0,1fr)}
  .ostage .net,.ostage .vstat,.ostage .chat{grid-column:1;grid-row:auto}
  .ostage .net{order:1}.ostage .chat{order:2}.ostage .vstat{order:3}
  .ostage .chat-body{height:270px;min-height:0;flex:none}
  .vchips{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* network diagram states (set on #odemo as data-state) */
#od-net .wire{stroke:#2b7f90;stroke-width:2.5;fill:none}
#od-net .flow{stroke:#5fd3e6;stroke-width:2.5;fill:none;stroke-dasharray:5 9;opacity:0;transition:opacity .4s ease}
#od-net .cut{opacity:0;transition:opacity .4s ease}
#od-net .infect{opacity:0;transition:opacity .4s ease}
#od-net .lan{stroke:#2b7f90;stroke-width:2;fill:none}
#od-net .lanflow{stroke:#8fe3f2;stroke-width:2;fill:none;stroke-dasharray:4 8;opacity:0;transition:opacity .4s ease}
#od-net .vault-body{fill:#0e3a45;stroke:#35c6dc;stroke-width:1.6;transition:stroke .4s ease,fill .4s ease}
#od-net .shield{opacity:0;transition:opacity .4s ease}
#od-net .cloud-fill{fill:#12303a;stroke:#2b7f90;transition:fill .4s ease,stroke .4s ease}

[data-state="sync"] #od-net .flow{opacity:1;animation:oflow 1s linear infinite}
[data-state="down"] #od-net .up-wire{stroke:#5b2a2a;stroke-dasharray:3 6}
[data-state="down"] #od-net .cut{opacity:1}
[data-state="down"] #od-net .cloud-fill,[data-state="attack"] #od-net .cloud-fill{fill:#2a1717;stroke:#7a2b2b}
[data-state="down"] #od-net .lanflow,[data-state="ok"] #od-net .lanflow{opacity:1;animation:oflow 1s linear infinite reverse}
[data-state="attack"] #od-net .infect{opacity:1}
[data-state="attack"] #od-net .up-wire{stroke:#7a2b2b}
[data-state="attack"] #od-net .vault-body{stroke:#f8c510;fill:#2b2a12}
[data-state="attack"] #od-net .shield,[data-state="ok"] #od-net .shield{opacity:1}
@keyframes oflow{from{stroke-dashoffset:14}to{stroke-dashoffset:0}}

/* ---------------- What goes on it ---------------- */
.scope{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:44px}
.scope-col{background:#fff;border:1px solid var(--line);border-top:5px solid var(--accent);border-radius:var(--radius);padding:26px 24px}
.scope-col.mid{border-top-color:var(--gold)}
.scope-col.off{border-top-color:#c0392b}
.scope-col h3{font-size:1.2rem;margin-bottom:.25em}
.scope-col .for{font-size:.93rem;margin-bottom:14px}
.scope-col ul{margin:0;padding-left:1.15em}
.scope-col li{margin:0 0 6px;font-size:.95rem}
.scope-note{max-width:860px;margin:28px auto 0}


@media (prefers-reduced-motion:reduce){
  #od-net .flow,#od-net .lanflow{animation:none!important}
}