/* Digital twin page (agents.html) — page-scoped so site.css needs no bump. */
.twin-stage{position:relative;height:min(72vh,640px);min-height:420px;border-radius:18px;overflow:hidden;
  background:radial-gradient(120% 120% at 50% 20%,#122B46 0%,#0A1B2E 60%);border:1px solid rgba(201,162,39,.25);
  transition:border-color .7s,box-shadow .7s}
.twin-stage.alert{border-color:rgba(224,74,74,.6);box-shadow:inset 0 0 90px rgba(224,74,74,.16),0 0 26px rgba(224,74,74,.14)}
.twin-stage.allclear{border-color:rgba(46,204,113,.55);box-shadow:inset 0 0 90px rgba(46,204,113,.12),0 0 26px rgba(46,204,113,.12)}
.twin-poster{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity .8s}
.twin-poster svg{width:min(88%,560px);height:auto}
.twin-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .8s;touch-action:pan-y;cursor:grab}
.twin-canvas:active{cursor:grabbing}
.twin-stage.live .twin-canvas{opacity:1}
.twin-stage.live .twin-poster{opacity:0;pointer-events:none}

/* stat chips */
.twin-chips{position:absolute;top:14px;inset-inline:14px;display:flex;flex-wrap:wrap;gap:8px;z-index:3;pointer-events:none}
.twin-chip{background:rgba(10,27,46,.72);backdrop-filter:blur(6px);border:1px solid rgba(201,162,39,.35);
  border-radius:999px;padding:7px 15px;color:#fff;font-size:12.5px;display:inline-flex;align-items:center;gap:7px}
.twin-chip b{font-family:'Montserrat',sans-serif;font-weight:800;color:#C9A227;font-size:14.5px}
.twin-hint{position:absolute;bottom:12px;inset-inline-end:16px;color:rgba(255,255,255,.45);font-size:11.5px;z-index:3;pointer-events:none}

/* agent side card */
.twin-card{position:absolute;top:64px;inset-inline-end:14px;width:min(320px,calc(100% - 28px));z-index:4;
  background:rgba(10,27,46,.88);backdrop-filter:blur(10px);border:1px solid rgba(201,162,39,.4);border-radius:15px;
  padding:20px 22px;color:#fff;display:none}
.twin-card.show{display:block;animation:twin-in .25s ease}
@keyframes twin-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.twin-card h3{color:#C9A227;font-size:19px;margin-bottom:2px}
.twin-card .role{color:rgba(255,255,255,.75);font-size:12.5px;font-weight:700;letter-spacing:.4px;margin-bottom:10px}
.twin-card p{color:rgba(255,255,255,.82);font-size:13.5px;line-height:1.7}
.twin-card .meaning{color:rgba(201,162,39,.85);font-size:12px;font-style:italic;margin:-4px 0 10px}
.twin-heritage a{color:var(--gold,#C9A227);font-weight:700}
.twin-heritage a:hover{text-decoration:underline}
.twin-card .close{position:absolute;top:10px;inset-inline-start:12px;background:none;border:none;color:rgba(255,255,255,.6);
  font-size:18px;cursor:pointer;line-height:1;padding:4px}
.twin-card .close:hover{color:#fff}

.twin-note{color:var(--steel);font-size:12.5px;text-align:center;margin-top:14px}

/* event caption toast (live-operations simulation) */
.twin-toast{position:absolute;bottom:14px;inset-inline-start:16px;max-width:min(480px,74%);z-index:4;
  background:rgba(10,27,46,.88);backdrop-filter:blur(8px);border:1px solid rgba(201,162,39,.4);border-radius:13px;
  padding:11px 16px;color:#fff;font-size:13.5px;line-height:1.55;display:flex;align-items:flex-start;gap:10px;
  opacity:0;transform:translateY(12px);transition:.35s;pointer-events:none}
.twin-toast.show{opacity:1;transform:none}
.twin-toast .dot{width:9px;height:9px;border-radius:50%;margin-top:7px;flex:none;
  background:#C9A227;color:#C9A227;box-shadow:0 0 10px currentColor}
.twin-toast.acc-red .dot{background:#e04a4a;color:#e04a4a}
.twin-toast.acc-amber .dot{background:#f0a500;color:#f0a500}
.twin-toast.acc-green .dot{background:#2ecc71;color:#2ecc71}
body.kiosk .twin-toast{font-size:17.5px;padding:16px 22px;max-width:600px;bottom:28px}

/* kiosk mode (?kiosk=1): full-bleed stage for big screens */
body.kiosk header.nav,body.kiosk footer,body.kiosk .page-hero,body.kiosk .twin-note,
body.kiosk #how,body.kiosk #cta{display:none}
body.kiosk .twin-sec{padding:0}
body.kiosk .twin-sec .wrap{max-width:none;padding:0}
body.kiosk .twin-stage{height:100vh;min-height:100vh;border-radius:0;border:none}
body.kiosk .twin-chip{padding:10px 20px;font-size:15px}
body.kiosk .twin-chip b{font-size:19px}

@media(max-width:700px){
  .twin-stage{height:min(64vh,520px);min-height:380px}
  .twin-card{top:auto;bottom:0;inset-inline:0;width:100%;border-radius:15px 15px 0 0;max-height:55%;overflow:auto}
  .twin-chips{gap:6px}
  .twin-chip{padding:5px 11px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  .twin-poster,.twin-canvas{transition:none}
}