/* ============================================================================
   SQUADLAB OS — COMMAND CENTER  ·  the mothership bridge  (v3 — fleet formation)
   A faux-3D capital ship in open space, humming gently, with the service
   vessels docked at free-floating platforms in a symmetric V formation.
   Restrained glow: thin strokes, small lights; the life is in the motion.
   Deep-space "Venture Command Console" lineage (ADR 0015/0016/0029).
   Strict-CSP: no inline styles; dynamic values via CSSOM at runtime only.
   ============================================================================ */
.cc, .cc *, .cc *::before, .cc *::after { box-sizing: border-box; }

.cc {
  /* grounds */
  --abyss:#010206; --void:#03050c; --black:#060a14; --steel:#101d2c; --steel-hi:#1b2c3e;
  --hull:#0b1420; --hull-hi:#122033; --panel:rgba(9,17,29,.55); --glass:rgba(10,20,34,.42);
  /* lines */
  --line:rgba(110,160,205,.20); --line-hi:rgba(150,205,245,.45); --line-holo:rgba(95,240,255,.34);
  /* ink */
  --text:#c7d8ea; --bright:#eaf5ff; --ice:#ffffff; --dim:#7d94ac; --faint:rgba(150,185,215,.3);
  /* accents */
  --holo:#5ff0ff; --holo-2:#37c8ff; --violet:#a678ff; --gold:#ffcf6b;
  /* semantic status */
  --go:#35f2ac; --amber:#ffb638; --red:#ff5a70; --dark:#54687d;
  /* restrained fx */
  --glow-soft:0 0 8px -2px rgba(95,240,255,.3);
  --text-glow:0 0 7px rgba(95,240,255,.28);
  --lift:0 18px 50px -20px rgba(0,0,0,.85);
  --scanline:repeating-linear-gradient(to bottom,rgba(120,220,255,.016) 0 1px,transparent 1px 3px);
  --dur-fast:150ms; --dur-mid:340ms; --ease:cubic-bezier(.16,1,.3,1);
  --radius:3px;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono','Cascadia Code','Roboto Mono',monospace;
  --display:'Orbitron','Chakra Petch','Eurostile','Bahnschrift','DIN Condensed',ui-monospace,'SF Mono',monospace;

  position:fixed; inset:0; overflow:hidden;
  background:var(--abyss); color:var(--text); font-family:var(--mono);
  font-size:clamp(13px,.5vw + 11px,15px); line-height:1.5; -webkit-font-smoothing:antialiased;
}
.cc [data-st="nominal"]{ --st:var(--go); }
.cc [data-st="degraded"]{ --st:var(--amber); }
.cc [data-st="critical"]{ --st:var(--red); }
.cc [data-st="standby"]{ --st:var(--holo); }
.cc [data-st="dark"]{ --st:var(--dark); }

/* ============ deep space =================================================== */
.cc__space{ position:absolute; inset:-8%; z-index:0; pointer-events:none; will-change:transform;
  transition:transform 500ms cubic-bezier(.2,.9,.2,1); }
.cc__space-fill{ position:absolute; inset:0;
  background:
    radial-gradient(140% 100% at 50% 40%, #091223 0%, #04091a 45%, #010206 78%),
    radial-gradient(70% 55% at 14% 4%, rgba(58,150,255,.13), transparent 70%),
    radial-gradient(66% 52% at 88% 10%, rgba(166,120,255,.12), transparent 70%),
    radial-gradient(90% 60% at 50% 118%, rgba(53,242,172,.05), transparent 70%); }
.cc__stars{ position:absolute; inset:-20%; background-repeat:repeat;
  background-image:
    radial-gradient(1px 1px at 25% 15%,rgba(255,255,255,.95),transparent 60%),
    radial-gradient(1px 1px at 70% 45%,rgba(190,225,255,.9),transparent 60%),
    radial-gradient(1.5px 1.5px at 50% 80%,rgba(255,255,255,.8),transparent 60%),
    radial-gradient(1px 1px at 85% 22%,rgba(255,255,255,.6),transparent 60%),
    radial-gradient(1px 1px at 12% 62%,rgba(150,200,255,.75),transparent 60%),
    radial-gradient(2px 2px at 40% 35%,rgba(255,255,255,.55),transparent 60%);
  background-size:290px 290px,250px 250px,330px 330px,210px 210px,270px 270px,380px 380px;
  animation:cc-drift-a 220s linear infinite; opacity:.8; }
.cc__stars.b{ background-size:520px 520px,470px 470px,600px 600px; opacity:.5; animation:cc-drift-b 340s linear infinite; }
.cc__stars.c{ filter:blur(.4px); opacity:.24; animation:cc-twinkle 7s ease-in-out infinite alternate, cc-drift-a 280s linear infinite; }
@keyframes cc-drift-a{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-240px,-160px,0)} }
@keyframes cc-drift-b{ from{transform:translate3d(0,0,0)} to{transform:translate3d(170px,-110px,0)} }
@keyframes cc-twinkle{ from{opacity:.16} to{opacity:.34} }

/* canopy vignette — looking out of the observation deck */
.cc__canopy{ position:absolute; inset:0; z-index:24; pointer-events:none;
  background:
    radial-gradient(125% 105% at 50% 44%, transparent 56%, rgba(1,2,6,.66) 100%),
    linear-gradient(180deg, rgba(1,2,6,.5) 0%, transparent 11% 89%, rgba(1,2,6,.56) 100%),
    var(--scanline); }
.cc__canopy::after{ content:''; position:absolute; inset:0; box-shadow:inset 0 0 180px rgba(0,0,0,.62); }

/* ============ scene layers (faux-3D parallax) ============================== */
.cc__scene{ position:absolute; inset:0; z-index:10; }
.cc-l{ position:absolute; inset:0; pointer-events:none; will-change:transform; transition:transform 380ms cubic-bezier(.2,.9,.2,1); }
.cc-l--far{ z-index:2; } .cc-l--main{ z-index:4; } .cc-l--near{ z-index:6; }
.cc-lplane{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

/* ============ the mothership =============================================== */
.cc-ms{ position:absolute; transform:translate(-50%,-50%); width:var(--msw,420px); pointer-events:none; }
.cc-ms__art{ position:relative; width:100%; animation:cc-msbob 9s ease-in-out infinite; }
.cc-ms__art svg{ display:block; width:100%; height:auto; overflow:visible; }
@keyframes cc-msbob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
/* engine idle wash + heart light hum */
.cc-ms__wash{ animation:cc-hum 5s ease-in-out infinite; transform-origin:50% 88%; }
.cc-ms__heart{ animation:cc-hum 3.8s ease-in-out infinite; }
@keyframes cc-hum{ 0%,100%{opacity:.45} 50%{opacity:.95} }
/* blinking lights (staggered via CSSOM --bd) */
.cc-blink{ animation:cc-blink 3.2s ease-in-out infinite; animation-delay:var(--bd,0s); }
@keyframes cc-blink{ 0%,88%,100%{opacity:.15} 92%,96%{opacity:1} }
.cc-blink--slow{ animation-duration:5.2s; }
/* saucer rim lights firing in sequence — the rotating-mothership illusion */
.cc-rim{ animation:cc-rimblink 2.8s linear infinite; animation-delay:var(--bd,0s); }
@keyframes cc-rimblink{ 0%,80%,100%{opacity:.14} 85%,93%{opacity:1} }
/* integrity readout on the core */
.cc-ms__core{ position:absolute; left:50%; top:46.5%; transform:translate(-50%,-50%); text-align:center; }
.cc-ms__core b{ display:block; font-family:var(--display); color:var(--ice); font-size:calc(var(--msw,420px) * .040); line-height:1; font-variant-numeric:tabular-nums; text-shadow:var(--text-glow); }
.cc-ms__core small{ display:block; margin-top:2px; font-size:calc(var(--msw,420px) * .0135); letter-spacing:.32em; color:var(--holo-2); text-transform:uppercase; }
/* callsign plate under the ship */
.cc-ms__plate{ position:absolute; left:50%; top:97%; transform:translateX(-50%); text-align:center; white-space:nowrap; }
.cc-ms__plate b{ font-family:var(--display); font-size:.6rem; letter-spacing:.34em; color:var(--dim); text-transform:uppercase; }

/* ============ docked service vessels ====================================== */
.cc-vessel{ position:absolute; transform:translate(-50%,-50%); background:none; border:none; padding:10px;
  cursor:pointer; color:inherit; font:inherit; pointer-events:auto; }
.cc-vessel__inner{ position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; }
.cc-vessel__glyph{ position:relative; width:var(--gw,52px); aspect-ratio:6/5; display:grid; place-items:center;
  animation:cc-shipbob 6.5s ease-in-out infinite; animation-delay:var(--bd,0s);
  filter:drop-shadow(0 0 4px color-mix(in oklab,var(--st,var(--holo)),transparent 70%));
  transition:transform var(--dur-fast) var(--ease); }
.cc-vessel__glyph svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
@keyframes cc-shipbob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.cc-vessel__name{ font-family:var(--display); font-size:.5rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--bright); white-space:nowrap; text-shadow:0 1px 3px #000; }
.cc-vessel__vital{ font-size:.5rem; color:var(--st,var(--dim)); font-variant-numeric:tabular-nums; white-space:nowrap; text-shadow:0 1px 2px #000; }
.cc-vessel:hover .cc-vessel__glyph,.cc-vessel:focus-visible .cc-vessel__glyph{ transform:scale(1.14); }
.cc-vessel:focus-visible{ outline:none; }
.cc-vessel:focus-visible .cc-vessel__inner{ outline:1px solid var(--holo); outline-offset:6px; border-radius:var(--radius); }
.cc-vessel[data-st="dark"] .cc-vessel__glyph{ filter:none; opacity:.55; animation:none; }
.cc-vessel[data-st="dark"] .cc-vessel__name{ color:var(--dim); }

/* signals pip — notifications attached to the ship */
.cc-vessel__pips{ position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%);
  display:flex; align-items:center; gap:4px; padding:2px 7px 2px 5px; border-radius:100px;
  border:1px solid color-mix(in oklab,var(--pip,var(--holo)),transparent 45%);
  background:rgba(4,9,17,.85); white-space:nowrap; }
.cc-vessel__pips::after{ content:''; position:absolute; top:100%; left:50%; width:1px; height:7px;
  background:color-mix(in oklab,var(--pip,var(--holo)),transparent 45%); }
.cc-vessel__pips i{ width:5px; height:5px; border-radius:50%; background:var(--pip,var(--holo)); }
.cc-vessel__pips b{ font-size:.54rem; font-weight:700; color:var(--pip,var(--holo)); font-variant-numeric:tabular-nums; }
.cc-vessel__pips.is-crit{ animation:cc-pippulse 2s ease-in-out infinite; }
@keyframes cc-pippulse{ 0%,100%{box-shadow:0 0 0 0 rgba(255,90,112,0)} 50%{box-shadow:0 0 9px 0 rgba(255,90,112,.5)} }

/* selection brackets (static, quiet) */
.cc-reticle{ position:absolute; z-index:8; pointer-events:none; opacity:0; transition:opacity var(--dur-mid), left var(--dur-mid) var(--ease), top var(--dur-mid) var(--ease); }
.cc-reticle.is-on{ opacity:1; }
.cc-reticle.is-on.is-hover{ opacity:.72; }
.cc-reticle__b{ position:absolute; width:12px; height:12px; border:1.5px solid var(--holo); }
.cc-reticle__b.tl{ left:0; top:0; border-right:none; border-bottom:none; }
.cc-reticle__b.tr{ right:0; top:0; border-left:none; border-bottom:none; }
.cc-reticle__b.bl{ left:0; bottom:0; border-right:none; border-top:none; }
.cc-reticle__b.br{ right:0; bottom:0; border-left:none; border-top:none; }

/* hail dash animation (alerting ship → bridge), drawn in layer SVG */
.cc-hail{ stroke-dasharray:2 6; animation:cc-hailflow 1.6s linear infinite; }
@keyframes cc-hailflow{ to{ stroke-dashoffset:-32; } }

/* ============ top HUD ====================================================== */
.cc__hud{ position:absolute; inset:0; z-index:30; pointer-events:none; }
.cc__hud > *{ pointer-events:auto; }
.cc__top{ position:absolute; top:0; left:0; right:0; display:flex; align-items:flex-start; gap:14px;
  padding:clamp(12px,1.6vw,20px) clamp(14px,2vw,26px); }
.cc__brand{ display:flex; align-items:center; gap:11px; min-width:0; flex:1 1 0; }
.cc__mark{ width:32px; height:32px; flex:0 0 auto; color:var(--holo); filter:drop-shadow(0 0 5px rgba(95,240,255,.35)); }
.cc__brand b{ font-family:var(--display); font-weight:700; letter-spacing:.2em; color:var(--ice); font-size:.84rem; text-transform:uppercase; white-space:nowrap; text-shadow:var(--text-glow); display:block; }
.cc__brand span{ display:block; font-size:.5rem; letter-spacing:.4em; color:var(--holo-2); text-transform:uppercase; margin-top:2px; }
.cc__switch{ display:inline-flex; gap:2px; padding:3px; border:1px solid var(--line-holo); border-radius:100px;
  background:rgba(6,12,22,.62); backdrop-filter:blur(8px); }
.cc__switch button{ position:relative; display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:.6rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--dim); background:transparent; border:none; border-radius:100px;
  padding:.6em 1.05em; cursor:pointer; transition:color var(--dur-fast); white-space:nowrap; }
.cc__switch button svg{ width:14px; height:14px; }
.cc__switch button:hover{ color:var(--text); }
.cc__switch button[aria-current="true"]{ color:var(--black); background:linear-gradient(180deg,var(--holo),var(--holo-2)); font-weight:600; }
.cc__switch .cc__dot{ position:absolute; top:5px; right:8px; width:6px; height:6px; border-radius:50%; background:var(--red); }
.cc__readout{ display:flex; flex-direction:column; align-items:flex-end; gap:5px; text-align:right; flex:1 1 0; min-width:0; }
.cc__rollup{ display:flex; align-items:center; gap:12px; }
.cc__roll{ display:flex; align-items:baseline; gap:5px; white-space:nowrap; }
.cc__roll b{ font-family:var(--display); color:var(--st,var(--bright)); font-size:.94rem; font-variant-numeric:tabular-nums; }
.cc__roll small{ font-size:.46rem; letter-spacing:.2em; color:var(--dim); text-transform:uppercase; }
.cc__subline{ display:flex; align-items:center; gap:10px; }
.cc__chip{ display:inline-flex; align-items:center; gap:6px; padding:.3em .6em; border:1px solid color-mix(in oklab,var(--amber),transparent 55%);
  color:var(--amber); font-size:.5rem; letter-spacing:.22em; text-transform:uppercase; border-radius:var(--radius);
  background:color-mix(in oklab,var(--amber),transparent 90%); white-space:nowrap; }
.cc__chip::before{ content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
.cc__chip[data-uplink="live"]{ color:var(--go); border-color:color-mix(in oklab,var(--go),transparent 55%); background:color-mix(in oklab,var(--go),transparent 90%); }
.cc__chip[data-uplink="pending"]{ color:var(--dim); border-color:var(--line); background:transparent; }
.cc__chip[data-uplink="lost"]{ color:var(--red); border-color:color-mix(in oklab,var(--red),transparent 55%); background:color-mix(in oklab,var(--red),transparent 90%); }
.cc__clock{ font-variant-numeric:tabular-nums; color:var(--holo-2); font-size:.66rem; letter-spacing:.1em; white-space:nowrap; }

/* ============ bottom bar: legend | priority transmission | state ========== */
.cc__bottom{ position:absolute; left:0; right:0; bottom:0; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px;
  padding:9px clamp(14px,2vw,26px); background:linear-gradient(0deg, rgba(2,5,12,.72), transparent); border-top:1px solid var(--line); }
.cc__legend{ display:flex; flex-wrap:wrap; gap:5px 12px; justify-self:start; }
.cc__legend span{ display:inline-flex; align-items:center; gap:5px; font-size:.5rem; letter-spacing:.1em; color:var(--dim); text-transform:uppercase; }
.cc__legend i{ width:7px; height:7px; border-radius:50%; }
.cc__state{ justify-self:end; display:flex; align-items:center; gap:14px; }
.cc__state-live{ display:flex; align-items:center; gap:7px; font-size:.54rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--st,var(--go)); }
.cc__state-live i{ width:6px; height:6px; border-radius:50%; background:var(--st,var(--go)); animation:cc-pulse 2.2s ease-in-out infinite; }
@keyframes cc-pulse{ 0%,100%{opacity:.5; transform:scale(.85)} 50%{opacity:1; transform:scale(1.15)} }
.cc__mtoggle{ display:inline-flex; align-items:center; gap:6px; padding:.38em .7em; border:1px solid var(--line); border-radius:100px;
  background:transparent; color:var(--dim); font-family:var(--mono); font-size:.5rem; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; }
.cc__mtoggle:hover{ color:var(--text); border-color:var(--line-hi); }
.cc__mtoggle svg{ width:12px; height:12px; }

/* the priority transmission line (centered) */
.cc-banner{ display:inline-flex; align-items:center; gap:9px; max-width:min(760px,72vw);
  background:rgba(5,10,19,.78); border:1px solid color-mix(in oklab,var(--st,var(--line-hi)),transparent 55%);
  border-radius:100px; padding:.5em 1em .5em .6em; cursor:pointer; color:inherit; font:inherit; text-align:left; }
.cc-banner:hover{ border-color:var(--st,var(--line-hi)); background:rgba(8,16,28,.85); }
.cc-banner__sev{ flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; padding:.24em .6em; border-radius:100px;
  font-size:.5rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--black); background:var(--st,var(--holo)); }
.cc-banner__src{ flex:0 0 auto; font-family:var(--display); font-size:.56rem; letter-spacing:.1em; color:var(--bright); text-transform:uppercase; }
.cc-banner__msg{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.68rem; color:var(--text); }
.cc-banner__age{ flex:0 0 auto; font-size:.54rem; color:var(--dim); }
.cc-banner__more{ flex:0 0 auto; font-size:.52rem; color:var(--st,var(--dim)); letter-spacing:.1em; font-variant-numeric:tabular-nums; }
.cc-banner--quiet{ border-color:var(--line); color:var(--dim); cursor:default; }
.cc-banner--quiet:hover{ border-color:var(--line); background:rgba(5,10,19,.78); }
.cc-banner--quiet .cc-banner__msg{ color:var(--dim); }
.cc-banner.is-swap .cc-banner__msg,.cc-banner.is-swap .cc-banner__src,.cc-banner.is-swap .cc-banner__sev{ animation:cc-bannerin var(--dur-mid) var(--ease); }
@keyframes cc-bannerin{ from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:translateY(0)} }

/* ============ content panels (Manifest / Artifacts) ======================= */
.cc__panelwrap{ position:absolute; inset:clamp(70px,9.5vh,100px) clamp(14px,2vw,26px) clamp(52px,6.5vh,66px); z-index:12; overflow:auto; }
.cc-holo{ border:1px solid var(--line-holo); border-radius:var(--radius); background:var(--glass); backdrop-filter:blur(10px); box-shadow:var(--lift); }
.cc-head{ display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; padding:clamp(14px,1.8vw,22px) clamp(16px,2vw,26px) 4px; }
.cc-head__eyebrow{ font-size:.54rem; letter-spacing:.36em; color:var(--holo); text-transform:uppercase; margin:0 0 6px; }
.cc-head__title{ font-family:var(--display); font-weight:700; letter-spacing:.08em; color:var(--ice); font-size:clamp(1.2rem,2.2vw,1.7rem); text-transform:uppercase; margin:0; line-height:1; text-shadow:var(--text-glow); }
.cc-head__sub{ color:var(--dim); font-size:.76rem; max-width:58ch; margin:2px 0 0; }

.cc-manifest{ padding:14px clamp(16px,2vw,26px) clamp(16px,2vw,26px); }
.cc-table{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.cc-row{ display:grid; grid-template-columns:minmax(150px,1.5fr) 90px minmax(96px,.8fr) 84px minmax(130px,1.2fr) 96px; gap:12px; align-items:center;
  width:100%; text-align:left; color:inherit; font:inherit; cursor:pointer; background:transparent;
  padding:12px 14px; border-bottom:1px solid var(--line); transition:background var(--dur-fast); }
.cc-row:last-child{ border-bottom:none; }
.cc-row:hover{ background:rgba(95,240,255,.05); }
.cc-row--head{ cursor:default; background:rgba(16,30,48,.5); }
.cc-row--head span{ font-size:.52rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); }
.cc-row__name{ display:flex; align-items:center; gap:10px; min-width:0; }
.cc-row__name b{ font-family:var(--display); color:var(--bright); font-size:.8rem; letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-row__name span{ color:var(--dim); font-size:.6rem; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-dot{ width:9px; height:9px; border-radius:50%; background:var(--st,var(--dim)); flex:0 0 auto; }
.cc-stpill{ display:inline-flex; align-items:center; gap:6px; font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; color:var(--st,var(--dim)); }
.cc-mode{ font-size:.54rem; letter-spacing:.14em; text-transform:uppercase; padding:.28em .5em; border:1px solid var(--line); border-radius:var(--radius); color:var(--dim); white-space:nowrap; }
.cc-mode[data-mode="LIVE"]{ color:var(--go); border-color:color-mix(in oklab,var(--go),transparent 60%); }
.cc-mode[data-mode="PARTIAL"]{ color:var(--amber); border-color:color-mix(in oklab,var(--amber),transparent 60%); }
.cc-mode[data-mode="SIM"]{ color:var(--dim); }
.cc-sigchip{ display:inline-flex; align-items:center; gap:5px; font-size:.56rem; font-variant-numeric:tabular-nums;
  color:var(--pip,var(--dim)); }
.cc-sigchip i{ width:6px; height:6px; border-radius:50%; background:var(--pip,var(--steel-hi)); }
.cc-row__vital{ font-size:.7rem; color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-row__vital span{ color:var(--dim); font-size:.58rem; }
.cc-row__go{ justify-self:end; }
@media (max-width:760px){ .cc-row{ grid-template-columns:1fr auto; } .cc-row--head{ display:none; } .cc-row__mode-c,.cc-row__vital,.cc-row__sig{ grid-column:1 / -1; } }

.cc-arch{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); padding:14px clamp(16px,2vw,26px) clamp(16px,2vw,26px); }
.cc-arch__card{ display:flex; flex-direction:column; gap:8px; padding:15px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--panel); cursor:pointer; text-align:left; color:inherit; font:inherit;
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast),transform var(--dur-fast); }
.cc-arch__card:hover{ border-color:var(--line-holo); box-shadow:var(--glow-soft); transform:translateY(-2px); }
.cc-arch__ic{ width:32px; height:32px; color:var(--holo); }
.cc-arch__card b{ font-family:var(--display); color:var(--bright); font-size:.82rem; letter-spacing:.04em; }
.cc-arch__card p{ margin:0; color:var(--dim); font-size:.7rem; line-height:1.45; }
.cc-arch__card code{ font-size:.6rem; color:var(--holo-2); }

/* ============ shared ======================================================= */
.cc-btn{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text); background:rgba(16,30,48,.5); border:1px solid var(--line); border-radius:var(--radius); padding:.6em .9em; cursor:pointer;
  transition:border-color var(--dur-fast),background var(--dur-fast),color var(--dur-fast); }
.cc-btn:hover{ border-color:var(--line-hi); background:rgba(20,42,64,.55); }
.cc-btn svg{ width:15px; height:15px; }
.cc-btn--warp{ color:var(--black); border-color:transparent; background:linear-gradient(180deg,var(--holo),var(--holo-2)); font-weight:600; }
.cc-btn--warp:hover{ color:#000; box-shadow:var(--glow-soft); }
.cc-btn--sm{ padding:.42em .66em; font-size:.6rem; }
.cc-empty{ padding:24px; text-align:center; color:var(--dim); font-size:.74rem; }

/* ============ drawer (vessel dossier) ===================================== */
.cc__scrim{ position:absolute; inset:0; z-index:70; background:rgba(1,3,8,.55); backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity var(--dur-mid); }
.cc__scrim.is-open{ opacity:1; pointer-events:auto; }
.cc__drawer{ position:absolute; top:0; right:0; bottom:0; z-index:71; width:min(440px,94vw);
  background:linear-gradient(200deg, rgba(10,20,34,.94), rgba(4,9,18,.97)); border-left:1px solid var(--line-holo);
  box-shadow:-40px 0 90px rgba(0,0,0,.7);
  transform:translateX(100%); transition:transform var(--dur-mid) var(--ease); display:flex; flex-direction:column; }
.cc__drawer.is-open{ transform:translateX(0); }
.cc__drawer-head{ display:flex; align-items:center; gap:12px; padding:16px; border-bottom:1px solid var(--line); }
.cc__drawer-glyph{ width:52px; flex:0 0 auto; }
.cc__drawer-glyph svg{ display:block; width:100%; height:auto; overflow:visible; }
.cc__drawer-id b{ font-family:var(--display); letter-spacing:.06em; color:var(--ice); font-size:1rem; display:block; }
.cc__drawer-id span{ font-size:.62rem; color:var(--dim); letter-spacing:.08em; }
.cc__x{ margin-left:auto; width:28px; height:28px; display:grid; place-items:center; background:transparent; border:1px solid var(--line); border-radius:2px; color:var(--dim); cursor:pointer; }
.cc__x:hover{ border-color:var(--line-holo); color:var(--holo); }
.cc__drawer-body{ padding:16px; overflow:auto; flex:1; }
.cc-doss__sec{ margin:0 0 18px; }
.cc-doss__sec h5{ font-size:.52rem; letter-spacing:.22em; text-transform:uppercase; color:var(--holo); margin:0 0 9px; }
.cc-doss__stat{ display:flex; align-items:center; gap:9px; margin-bottom:7px; }
.cc-doss__stat .cc-dot{ width:11px; height:11px; }
.cc-doss__stat b{ font-family:var(--display); color:var(--st,var(--bright)); letter-spacing:.06em; text-transform:uppercase; font-size:.82rem; }
.cc-metric{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); }
.cc-metric:last-child{ border-bottom:none; }
.cc-metric__b{ flex:1; min-width:0; }
.cc-metric__b b{ display:block; color:var(--bright); font-family:var(--display); font-size:1rem; font-variant-numeric:tabular-nums; }
.cc-metric__b span{ display:block; color:var(--dim); font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; }
.cc-spark{ width:98px; height:28px; flex:0 0 auto; }
.cc-tx{ display:block; width:100%; text-align:left; color:inherit; font:inherit; position:relative;
  border:none; border-left:2px solid var(--st,var(--line-hi)); border-radius:0 var(--radius) var(--radius) 0;
  background:linear-gradient(90deg, color-mix(in oklab,var(--st,var(--holo)),transparent 90%), transparent 70%);
  padding:8px 10px; margin-bottom:6px; }
.cc-tx__top{ display:flex; align-items:center; gap:8px; margin-bottom:3px; }
.cc-tx__sev{ font-size:.48rem; letter-spacing:.14em; text-transform:uppercase; color:var(--st,var(--dim)); font-weight:700; }
.cc-tx__time{ margin-left:auto; font-size:.54rem; color:var(--dim); white-space:nowrap; }
.cc-tx__msg{ font-size:.7rem; color:var(--text); line-height:1.42; }
.cc-tx.is-read{ opacity:.5; }
.cc-doss__acts{ display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.cc-doss__url{ font-size:.62rem; color:var(--holo-2); padding:8px 10px; border:1px solid var(--line); border-radius:var(--radius); word-break:break-all; }

/* ============ boot ========================================================= */
.cc__boot{ position:absolute; inset:0; z-index:200; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  background:radial-gradient(circle at 50% 46%, #05101e, #010206 72%); cursor:pointer; overflow:hidden; }
.cc__boot.is-gone{ opacity:0; pointer-events:none; transition:opacity .6s ease; }
.cc__boot-scan{ position:absolute; left:0; right:0; height:1.5px; top:0; background:linear-gradient(90deg,transparent,var(--holo),transparent);
  opacity:.6; animation:cc-bootscan 2.6s var(--ease) infinite; }
.cc__boot-mark{ width:130px; height:130px; color:var(--holo); filter:drop-shadow(0 0 10px rgba(95,240,255,.35)); animation:cc-bootmark 2.8s var(--ease) both; }
.cc__boot-txt{ text-align:center; }
.cc__boot-txt b{ font-family:var(--display); font-weight:700; letter-spacing:.32em; text-transform:uppercase; color:var(--ice); font-size:1rem; text-shadow:var(--text-glow); }
.cc__boot-txt span{ display:block; margin-top:9px; font-size:.54rem; letter-spacing:.34em; color:var(--holo); text-transform:uppercase; }
.cc__boot-bar{ width:230px; height:2px; background:var(--steel); border-radius:2px; overflow:hidden; }
.cc__boot-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--holo),var(--go)); animation:cc-bootbar 2.4s var(--ease) forwards; }
.cc__boot-skip{ position:absolute; bottom:24px; font-size:.52rem; letter-spacing:.24em; color:var(--dim); text-transform:uppercase; }
@keyframes cc-bootmark{ 0%{transform:translateY(26px) scale(.6); opacity:0} 45%{transform:translateY(0) scale(1); opacity:1} 100%{transform:scale(1); opacity:1} }
@keyframes cc-bootbar{ from{width:0} to{width:100%} }
@keyframes cc-bootscan{ 0%{top:0; opacity:0} 10%{opacity:.6} 90%{opacity:.6} 100%{top:100%; opacity:0} }

/* ============ warp transitions (docs/warp-transition.md) =================== */
/* departure curtain — fades the bridge to black before the same-tab navigation */
.cc__curtain{ position:fixed; inset:0; z-index:400; background:#010206; opacity:0;
  transition:opacity .42s ease-in; pointer-events:none; display:grid; place-items:center; }
.cc__curtain.is-in{ opacity:1; }
/* arrival — the page opens black and the ship flies in before the app reveals */
.cc__curtain.is-arrive{ transition:none; pointer-events:auto; }
.cc__curtain.is-arrive.is-gone{ transition:opacity .46s ease-out; opacity:0; pointer-events:none; }
.cc__curtain-ship{ width:120px; animation:cc-flyin .62s cubic-bezier(.18,.9,.28,1) both; }
.cc__curtain-mark{ width:100%; height:auto; color:var(--holo); filter:drop-shadow(0 0 12px rgba(95,240,255,.4)); }
.cc__curtain.is-gone .cc__curtain-ship{ animation:cc-flythrough .46s ease-in forwards; }
@keyframes cc-flyin{ from{ transform:translateY(46vh) scale(.5); opacity:0 } 60%{ opacity:1 } to{ transform:translateY(0) scale(1); opacity:1 } }
@keyframes cc-flythrough{ to{ transform:translateY(-18vh) scale(1.24); opacity:0 } }
/* the launching ship — climbs off its pad, accelerating */
.cc-vessel.is-launch{ z-index:80; pointer-events:none; }
.cc-vessel.is-launch .cc-vessel__inner{ animation:cc-launch .8s cubic-bezier(.55,-.05,.85,.5) forwards; }
.cc-vessel.is-launch .cc-vessel__pips{ display:none; }
.cc-vessel.is-launch .cc-vessel__name,.cc-vessel.is-launch .cc-vessel__vital{ animation:cc-launchfade .3s ease-out forwards; }
@keyframes cc-launch{ 12%{ transform:translateY(3px) } to{ transform:translateY(-108vh) scale(.6) } }
@keyframes cc-launchfade{ to{ opacity:0 } }
/* the jet-fuel trail left behind on the pad, stretching up after the ship */
.cc-trail{ position:absolute; width:3px; height:104vh; transform:translate(-50%,0) scaleY(0); transform-origin:top center;
  background:linear-gradient(0deg, rgba(141,243,255,.9), rgba(94,240,255,.5) 30%, rgba(94,240,255,.14) 70%, transparent);
  border-radius:2px; pointer-events:none; z-index:70;
  animation:cc-trailgrow .8s cubic-bezier(.55,-.05,.85,.5) forwards, cc-trailfade .5s .45s ease-out forwards; }
@keyframes cc-trailgrow{ 12%{ transform:translate(-50%,0) scaleY(0) } to{ transform:translate(-50%,-104vh) scaleY(1) } }
@keyframes cc-trailfade{ to{ opacity:0 } }

/* ============ toasts ======================================================= */
.cc__toasts{ position:absolute; left:50%; bottom:70px; z-index:120; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.cc-toast{ display:flex; align-items:center; gap:9px; padding:10px 15px; background:rgba(10,20,34,.94); border:1px solid var(--line-holo); border-radius:var(--radius);
  font-size:.72rem; color:var(--text); box-shadow:0 14px 40px rgba(0,0,0,.5); animation:cc-toastin var(--dur-mid) var(--ease); max-width:80vw; }
.cc-toast svg{ width:15px; height:15px; color:var(--holo); flex:0 0 auto; }
@keyframes cc-toastin{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:translateY(0)} }

/* ============ responsive =================================================== */
@media (max-width:820px){
  .cc__readout{ display:none; }
  .cc__switch button span{ display:none; }
  .cc__switch button{ padding:.6em .7em; }
  .cc__legend{ display:none; }
  .cc__bottom{ grid-template-columns:1fr; justify-items:center; row-gap:7px; }
  .cc__state{ justify-self:center; }
  .cc-banner{ max-width:100%; }
}
@media (max-width:560px){
  .cc__brand span{ display:none; }
  .cc-vessel__vital{ display:none; }
  .cc-vessel__name{ font-size:.44rem; letter-spacing:.12em; }
  .cc-ms__plate{ display:none; }
  .cc__mtoggle span{ display:none; }
}

/* ============ reduced motion — a still, legible bridge ==================== */
@media (prefers-reduced-motion: reduce){
  .cc *{ animation:none !important; transition:none !important; }
  .cc__boot{ display:none; }
}
.cc--nomotion *{ animation:none !important; }
.cc--nomotion .cc__space,.cc--nomotion .cc-l{ transform:none !important; }