/* ============================================================
   ASP DRIVE OPEN — intro overlay + DAY/NIGHT switch
   ============================================================ */
.drive-open{
  position:fixed; inset:0; z-index:9000; background:#05070b;
  opacity:0; transition:opacity .5s ease;
}
.drive-open.in{ opacity:1; }
.drive-open.out{ opacity:0; }
.drive-open[hidden]{ display:none; }
.drive-open-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .4s ease; background:#05070b;
}
.drive-open-video.show{ opacity:1; }
.drive-open-skip,
.drive-open-unmute{
  position:absolute; bottom:28px; z-index:2;
  background:rgba(10,14,22,.55); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid #c0c4cc; color:#e8ecf2; cursor:pointer;
  font:500 12px/1 "IBM Plex Mono", monospace; letter-spacing:.12em;
}
.drive-open-skip{ left:28px; padding:12px 18px; border-radius:999px; text-transform:uppercase; }
.drive-open-unmute{ right:28px; width:48px; height:48px; border-radius:50%; display:grid; place-items:center; }
.drive-open-unmute svg{ width:22px; height:22px; fill:none; stroke:#e8ecf2; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.drive-open-unmute svg path:first-child{ fill:#e8ecf2; stroke:none; }
.drive-open-unmute .w{ display:none; }
.drive-open-unmute.on .w{ display:inline; }
.drive-open-unmute.on .x{ display:none; }
.drive-open-skip:focus-visible,
.drive-open-unmute:focus-visible,
.drive-switch:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* ---------- switch ---------- */
.drive-switch{
  position:fixed; top:40px; right:40px; z-index:9100;
  width:170px; height:58px; padding:0 14px; box-sizing:border-box;
  display:none; align-items:center; justify-content:space-between; gap:6px;
  background:rgba(10,14,22,.55); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid #c0c4cc; border-radius:999px; color:#e8ecf2; cursor:pointer;
  font:600 11px/1 "IBM Plex Mono", monospace; letter-spacing:.14em;
}
/* visible on the dashboard and during the intro only */
body.on-dashboard .drive-switch,
body.drive-open-active .drive-switch{ display:flex; }
/* after the intro, sit below the page header so the connection badge stays readable */
body.on-dashboard:not(.drive-open-active) .drive-switch{ top:72px; right:28px; }

.ds-label{ opacity:.45; transition:opacity .4s ease-in-out, color .4s ease-in-out; }
.drive-switch[aria-checked="false"] .ds-day{ opacity:1; color:#fff4e0; }
.drive-switch[aria-checked="true"] .ds-night{ opacity:1; color:#a9b8ff; }
.ds-track{ position:relative; width:52px; height:30px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(192,196,204,.5); flex:none; }
.ds-knob{
  position:absolute; top:2px; left:2px; width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; background:#1a2030; border:1px solid #c0c4cc;
  transition:transform .4s ease-in-out;
}
.drive-switch[aria-checked="true"] .ds-knob{ transform:translateX(22px); }
.ds-knob svg{ width:16px; height:16px; position:absolute; transition:opacity .4s ease-in-out; }
.ds-sun{ fill:#fff4e0; stroke:#fff4e0; stroke-width:1.6; stroke-linecap:round; }
.ds-moon{ fill:#a9b8ff; opacity:0; }
.drive-switch[aria-checked="true"] .ds-sun{ opacity:0; }
.drive-switch[aria-checked="true"] .ds-moon{ opacity:1; }

@media (max-width:480px){
  .drive-switch, body.on-dashboard:not(.drive-open-active) .drive-switch{ top:16px; right:16px; }
  body.on-dashboard:not(.drive-open-active) .drive-switch{ top:64px; }
}
@media (prefers-reduced-motion: reduce){
  .drive-open, .drive-open-video, .ds-knob, .ds-knob svg, .ds-label{ transition:none; }
}
/* theme follows the switch */
.cockpit, .drive-panel{ transition:background-color .4s, color .4s, border-color .4s; }