/* PM-197 Insights - deep-space skin. ADDITIVE layer over the Bee Smart DS tokens
   (azure ramp + navy + status colors recolored onto a cosmos ground). CSS/SVG
   only; no JS animation loops. Used by Mission Control (full-bleed) and as glow
   accents on the four insight Shell pages. Delete this file + Insights.jsx and
   the canon reverts cleanly (reversibility per Project Law 6). */

/* full-viewport cosmos ground: DS deep-azure -> near-black ramp + two nebula glows */
.cosmos{
  position:fixed; inset:0; overflow:auto; color:#E6EEF9;
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  background:
    radial-gradient(ellipse 70% 40% at 28% -8%, rgba(20,71,155,0.32) 0%, transparent 55%),
    radial-gradient(ellipse 60% 45% at 82% 108%, rgba(21,181,222,0.10) 0%, transparent 60%),
    linear-gradient(180deg,#0B1830 0%,#070F1F 55%,#05080F 100%);
}
/* CSS-only starfield: tiny radial-gradient sprites tiled at two parallax scales */
.starfield,.starfield2{position:fixed; inset:0; pointer-events:none; background-repeat:repeat;}
.starfield{
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(230,238,249,0.65), transparent),
    radial-gradient(1px 1px at 90px 140px, rgba(174,196,230,0.5), transparent),
    radial-gradient(1.6px 1.6px at 160px 60px, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 230px 190px, rgba(174,196,230,0.45), transparent),
    radial-gradient(1.2px 1.2px at 300px 100px, rgba(230,238,249,0.4), transparent);
  background-size:340px 240px;
}
.starfield2{
  background-image:
    radial-gradient(1px 1px at 40px 80px, rgba(174,196,230,0.33), transparent),
    radial-gradient(1px 1px at 140px 20px, rgba(230,238,249,0.27), transparent),
    radial-gradient(1.3px 1.3px at 240px 150px, rgba(255,255,255,0.33), transparent);
  background-size:420px 300px;
  /* Drift via transform (GPU-composited), NOT background-position (main-thread
     repaint of a full-viewport layer - battery/jank on kiosk hardware). The layer
     is oversized top-left by more than one drift period so edges never show, and
     one period (420x300) == one tile, so the infinite-loop restart is seamless. */
  inset:-320px 0 0 -440px;
  animation:cosmosDrift 240s linear infinite;
}
@keyframes cosmosDrift{to{transform:translate3d(420px,300px,0);}}

/* translucent instrument card on the cosmos ground */
.cosmos-card{
  background:rgba(14,28,51,0.55);
  border:1px solid rgba(174,196,230,0.18);
  border-radius:14px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

/* glow text tones = DS status tokens with a soft halo */
.glow-ok{color:#2FA968; text-shadow:0 0 12px rgba(47,169,104,0.5);}
.glow-warn{color:#C77D12; text-shadow:0 0 12px rgba(199,125,18,0.5);}
.glow-crit{color:#C8402B; text-shadow:0 0 12px rgba(200,64,43,0.6);}

/* constellation stars: glow via drop-shadow on the node's own status color */
.star-node{filter:drop-shadow(0 0 6px currentColor); cursor:pointer;}
/* one-shot pulse ring when a device's reading arrived in the latest poll */
.pulse-ring{
  animation:nodePulse 1.8s ease-out 1 forwards;
  transform-origin:center; transform-box:fill-box; pointer-events:none;
}
@keyframes nodePulse{
  0%{opacity:0.85; transform:scale(1);}
  60%{opacity:0.25; transform:scale(2.1);}
  100%{opacity:0; transform:scale(2.6);}
}

/* kiosk mode (?kiosk=1): hide the exit affordance, enlarge instrument type */
.cosmos.kiosk .mc-exit{display:none !important;} /* !important: the button carries an inline display */
.cosmos.kiosk{font-size:118%;}
.cosmos.kiosk .mc-title{font-size:26px !important;}
.cosmos.kiosk .mc-radials{transform:scale(1.12); transform-origin:bottom center;}

/* alert ticker rail entries */
.mc-tick{border-left:3px solid; border-radius:8px; padding:8px 10px;
  background:rgba(14,28,51,0.65); margin-bottom:8px;}

@media (max-width: 900px){
  .mc-grid{grid-template-columns:1fr !important;}
  .mc-rail{max-height:240px;}
}

/* vestibular safety: the cosmos drift + pulse rings are ambient-only - drop them
   entirely for reduced-motion users (first persistent animation in the canon) */
@media (prefers-reduced-motion: reduce){
  .starfield2{animation:none;}
  .pulse-ring{animation:none; opacity:0;}
}

/* ===== PM-198 Mission Control ops console ===== */
/* Four-quadrant grid, one viewport: no page scroll at desktop/kiosk widths.
   290px = topbar + prototype ribbon + main padding + Back button + PageTitle;
   sized for the LOCAL preview (ribbon present); prod (no ribbon) under-fills by
   ~35px which keeps the no-scroll guarantee. Verified by the Task 17
   no-page-scroll Playwright assert - adjust the constant there if it fails. */
.mops-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:14px;height:calc(100vh - 290px);min-height:480px}
.mops-quad{min-height:0;display:flex;flex-direction:column;overflow:hidden}
.mops-quad-body{flex:1;min-height:0;overflow-y:auto}
/* Mobile (390px class): quadrants stack and the page scrolls (owner-accepted). */
@media (max-width: 900px){
  .mops-grid{height:auto;grid-template-columns:1fr;grid-template-rows:none}
  .mops-quad{min-height:220px;overflow:visible}
  .mops-quad-body{overflow-y:visible}
}