/* ════════════════════════════════════════════════════════════
   VEHICLE MODE — the platform's folded travel form.
   Robot Mode = the full operational UI. Vehicle Mode = one
   compact cockpit: every critical readout on a single screen,
   no scroll, no detail. Toggling modes IS the transformation.
════════════════════════════════════════════════════════════ */

/* ── header toggle ── */
.vm-toggle{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--bg-surface-2,#16161B);border:1px solid var(--border-strong,#2A2A30);
  color:var(--text-secondary,#888880);font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;padding:7px 12px;cursor:pointer;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  transition:transform .12s steps(2,end),color .1s linear,border-color .1s linear;
}
.vm-toggle:hover{color:var(--cyan,#18BFFF);border-color:var(--cyan,#18BFFF);transform:translateY(-1px);}
.vm-toggle:active{transform:translateY(1px);transition:none;}
.vm-toggle kbd{
  font-family:var(--font-mono);font-size:8.5px;color:var(--text-muted,#5A5A56);
  border:1px solid var(--border,#1E1E24);padding:1px 4px;border-radius:2px;
}
.vm-toggle:focus-visible{outline:2px solid var(--cyan,#18BFFF);outline-offset:-3px;}

/* ── the cockpit overlay ── */
.vm-cockpit{
  position:fixed;inset:0;z-index:55;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:22px;
  background:
    radial-gradient(ellipse 70% 46% at 50% -6%,rgba(24,191,255,.10),transparent 60%),
    linear-gradient(180deg,#07080B 0%,#09090C 100%);
  padding:34px 26px;
}
.vm-cockpit.open{display:flex;}

/* faint HUD graticule, barely there */
.vm-cockpit::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background:
    repeating-linear-gradient(0deg,transparent 0 47px,rgba(24,191,255,.028) 47px 48px),
    repeating-linear-gradient(90deg,transparent 0 47px,rgba(24,191,255,.028) 47px 48px);
}

/* masthead */
.vm-head{display:flex;flex-direction:column;align-items:center;gap:8px;z-index:1;}
.vm-ring{
  width:44px;height:44px;border-radius:50%;border:1.5px solid var(--cyan,#18BFFF);
  position:relative;box-shadow:0 0 22px rgba(24,191,255,.45),inset 0 0 12px rgba(24,191,255,.2);
}
.vm-ring::after{
  content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px;
  border-radius:50%;background:var(--cyan,#18BFFF);box-shadow:0 0 14px var(--cyan,#18BFFF);
}
.vm-kicker{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--cyan,#18BFFF);
}
.vm-sub{font-size:12px;color:var(--text-muted,#5A5A56);}

/* plate grid */
.vm-grid{
  display:grid;grid-template-columns:repeat(3,minmax(240px,300px));gap:14px;
  width:min(960px,100%);z-index:1;
}
.vm-plate{
  background:linear-gradient(165deg,var(--bg-surface,#111115),var(--bg-inset,#0C0C0F));
  border:1px solid var(--border-strong,#2A2A30);padding:16px 18px 15px;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  min-height:118px;display:flex;flex-direction:column;gap:9px;
}
.vm-plate-label{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-muted,#5A5A56);display:flex;justify-content:space-between;align-items:center;
}
.vm-plate-label i{
  width:6px;height:6px;background:var(--cyan,#18BFFF);border-radius:1px;
  box-shadow:0 0 8px rgba(24,191,255,.7);font-style:normal;
}
.vm-plate-label i.warn{background:var(--amber,#C8A45A);box-shadow:0 0 8px rgba(200,164,90,.7);}
.vm-plate-label i.crit{background:var(--red,#B5605A);box-shadow:0 0 8px rgba(181,96,90,.8);}

.vm-big{font-size:19px;font-weight:700;color:var(--text-primary,#E8E8EC);letter-spacing:.02em;}
.vm-dim{font-size:11px;color:var(--text-secondary,#888880);line-height:1.5;}
.vm-mono{font-family:var(--font-mono);}

/* operations: 4 metric cells */
.vm-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.vm-metric{text-align:center;}
.vm-metric strong{display:block;font-size:19px;font-weight:700;color:var(--amber,#C8A45A);font-family:var(--font-mono);}
.vm-metric label{display:block;font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted,#5A5A56);margin-top:3px;}

/* signals: compact rows, clickable */
.vm-signal{
  display:flex;align-items:baseline;gap:8px;font-size:11.5px;color:var(--text-secondary,#888880);
  cursor:pointer;padding:3px 4px;border-left:2px solid transparent;
  background:none;border-top:none;border-right:none;border-bottom:none;
  text-align:left;width:100%;font-family:var(--font-sans);
}
.vm-signal:hover{color:var(--text-primary,#E8E8EC);border-left-color:var(--cyan,#18BFFF);}
.vm-signal .t{margin-left:auto;font-family:var(--font-mono);font-size:9px;color:var(--text-muted,#5A5A56);flex-shrink:0;}

/* energon cells: capacity drains in discrete units */
.vm-cells{display:flex;gap:4px;margin-top:2px;}
.vm-cell{
  flex:1;height:16px;background:var(--bg-inset,#0C0C0F);border:1px solid var(--border,#1E1E24);
  clip-path:polygon(3px 0,100% 0,100% calc(100% - 3px),calc(100% - 3px) 100%,0 100%,0 3px);
}
.vm-cell.full{
  background:linear-gradient(180deg,#4ACFFF,#1490CC);border-color:rgba(24,191,255,.5);
  box-shadow:0 0 8px rgba(24,191,255,.3);
}
.vm-cell.low{background:linear-gradient(180deg,#D9B36A,#A5823E);border-color:rgba(200,164,90,.5);box-shadow:0 0 8px rgba(200,164,90,.3);}

/* transform-back control */
.vm-return{
  margin-top:4px;z-index:1;
  background:var(--amber,#C8A45A);border:none;color:#1A140A;font-weight:700;font-size:12px;
  font-family:var(--font-sans);letter-spacing:.04em;padding:12px 26px;cursor:pointer;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  transition:transform .12s steps(2,end),background .1s linear;
}
.vm-return:hover{background:#D4B36C;transform:translateY(-1px);}
.vm-return:active{transform:translateY(1px);transition:none;}
.vm-return:focus-visible{outline:2px solid var(--cyan,#18BFFF);outline-offset:-3px;}
.vm-hint{font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;color:var(--text-muted,#5A5A56);text-transform:uppercase;}

/* fold-out (exit) reuses the unfold keyframes in reverse */
.vm-cockpit .tfx-fold{
  animation:tfx-unfold 240ms var(--tfx-snap,cubic-bezier(.7,0,.2,1)) reverse both;
  animation-delay:calc(var(--tfx-i,0) * 22ms);
}

@media (max-width:900px){
  .vm-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .vm-grid{grid-template-columns:1fr;}
  .vm-toggle span{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .vm-cockpit .tfx-fold{animation:none;}
}

/* ════════════════════════════════════════════════════════════
   MATRIX CORE — the nav logo is the system's heart.
   Cyan pulse = nominal · gold = attention · red = core fault.
   Clicking the core opens the chest (Vehicle Mode).
════════════════════════════════════════════════════════════ */
.nav-logo.mx-nominal{animation:mx-pulse 3.2s ease-in-out infinite;}
.nav-logo.mx-attn{border-color:var(--amber,#C8A45A);animation:mx-pulse-attn 1.8s ease-in-out infinite;}
.nav-logo.mx-attn::after{background:var(--amber,#C8A45A);box-shadow:0 0 12px var(--amber,#C8A45A);}
.nav-logo.mx-crit{border-color:var(--red,#B5605A);animation:mx-pulse-crit .9s steps(2,end) infinite;}
.nav-logo.mx-crit::after{background:var(--red,#B5605A);box-shadow:0 0 12px var(--red,#B5605A);}
@keyframes mx-pulse{
  0%,100%{box-shadow:0 0 14px rgba(24,191,255,.28),inset 0 0 8px rgba(24,191,255,.12);}
  50%{box-shadow:0 0 26px rgba(24,191,255,.55),inset 0 0 12px rgba(24,191,255,.22);}
}
@keyframes mx-pulse-attn{
  0%,100%{box-shadow:0 0 12px rgba(200,164,90,.3);}
  50%{box-shadow:0 0 24px rgba(200,164,90,.6);}
}
@keyframes mx-pulse-crit{
  0%,100%{box-shadow:0 0 10px rgba(181,96,90,.4);}
  50%{box-shadow:0 0 30px rgba(181,96,90,.85);}
}
@media (prefers-reduced-motion:reduce){
  .nav-logo.mx-nominal,.nav-logo.mx-attn,.nav-logo.mx-crit{animation:none;}
}