/* ============================================================================
   SEP-137 Coding-System Cockpit — LOOK C: "AURORA OBSERVATORY"
   Loads AFTER cockpit.css. Complete [data-theme="aurora"] variable override
   plus extra rules. Night-sky observatory: indigo-to-black sky, CSS starfield,
   glassmorphism node cards, luminous ribbon connectors, bioluminescent pulse
   orbs, slowly shifting teal/violet/green aurora accents. Failure motifs read
   as weather/nature phenomena; SYSTEM DISTRESS turns the whole sky into a
   slow red aurora. Motion is weather, not alarms. No JS changes beyond the
   documented one-line fixture forcing in cockpit.js.
   ========================================================================= */

[data-theme="aurora"] {
  color-scheme: dark;

  /* ---- colors: surfaces ---- */
  --c-bg: #06061a;
  --c-bg-grad-a: #181344;            /* deep indigo zenith */
  --c-bg-grad-b: #020208;            /* near-black horizon */
  --c-panel: rgba(19, 23, 51, 0.58);
  --c-panel-2: rgba(30, 36, 72, 0.62);
  --c-node-bg: rgba(22, 27, 58, 0.40);
  --c-line: rgba(146, 164, 255, 0.16);
  --c-line-strong: rgba(168, 186, 255, 0.32);
  --c-node-line: rgba(156, 176, 255, 0.20);
  --c-placeholder-line: rgba(146, 164, 255, 0.14);
  --c-shadow: 0 24px 64px rgba(2, 3, 18, 0.62);

  /* ---- colors: text ---- */
  --c-text: #eef1ff;
  --c-muted: #a9b3da;
  --c-faint: #69739f;

  /* ---- colors: semantic ---- */
  --c-accent: #6fe8d8;               /* aurora teal */
  --c-on-accent: #04221f;
  --c-gold: #e9d08c;
  --c-green: #8af0b4;                /* aurora green */
  --c-amber: #ffc66e;                /* warm ember amber */
  --c-red: #ff8f9a;
  --c-blue: #93b9ff;

  /* ---- colors: flow / motion ---- */
  --c-connector: rgba(132, 230, 216, 0.34);
  --c-connector-dim: rgba(146, 164, 255, 0.10);
  --c-pulse: #b1f6e9;
  --c-glow-amber: rgba(255, 198, 110, 0.42);
  --c-glow-red: rgba(255, 143, 154, 0.38);
  --c-glow-accent: rgba(111, 232, 216, 0.42);

  /* ---- colors: chips / badges ---- */
  --c-chip-ok-bg: rgba(138, 240, 180, 0.10);
  --c-chip-warn-bg: rgba(255, 198, 110, 0.10);
  --c-chip-bad-bg: rgba(255, 143, 154, 0.12);
  --c-chip-info-bg: rgba(147, 185, 255, 0.11);
  --c-chip-neutral-bg: rgba(169, 179, 218, 0.08);
  --c-distress-bg: rgba(255, 110, 124, 0.09);

  /* ---- colors: tiers ---- */
  --c-tier-hard: #ff8f9a;
  --c-tier-soft: #8af0b4;
  --c-tier-none: #a9b3da;
  --c-tier-unknown: #69739f;

  /* ---- durations: everything slowed — motion reads as weather ---- */
  --d-pulse-cycle: 8.4s;             /* orbs drift, not dart */
  --d-pulse-stagger: calc(var(--d-pulse-cycle) * 0.12);
  --d-shake: 4.6s;                   /* lock: slow strained sway */
  --d-gears: 6.2s;                   /* gears: long attempt-and-slip */
  --d-tide: 7.5s;                    /* tide: genuine rolling swell */
  --d-flame: 2.3s;                   /* ember breathing, not strobe */
  --d-robot: 5.6s;                   /* robot: slow weary droop */
  --d-glow: 3.6s;                    /* amber halo breathes like a lantern */
  --d-enter: 0.8s;
  --d-changed: 1.3s;
  --d-ticker: 64s;
  --d-distress: 5.5s;                /* distress banner: slow red breathe */
  --d-chip-pulse: 3.4s;
  --d-panel: 0.32s;

  /* ---- easings: all soft, nothing snaps ---- */
  --e-standard: cubic-bezier(0.45, 0, 0.22, 1);
  --e-enter: cubic-bezier(0.22, 1, 0.36, 1);
  --e-pulse: cubic-bezier(0.37, 0, 0.63, 1);   /* sine-like drift for orbs */
  --e-linear: linear;
  --e-soft: ease-in-out;
  --e-flame: ease-in-out;            /* no stepping — embers waver smoothly */

  /* ---- layout: airier, rounder ---- */
  --chain-w: 236px;
  --chain-gap: 16px;
  --group-gap: 34px;
  --conn-h: 26px;
  --row-h: 88px;
  --row-issue-h: 96px;
  --cell-h: calc(var(--conn-h) + var(--row-h));
  --rail-w: 88px;
  --radius: 14px;
  --panel-w: min(430px, 92vw);

  /* ---- typography / misc ---- */
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fs-base: 0.86rem;
  --fs-small: 0.74rem;
  --fs-rail: 0.62rem;
  --placeholder-opacity: 0.34;
}

/* ============================ the night sky ============================ */

[data-theme="aurora"] body {
  background:
    linear-gradient(180deg,
      #1a1448 0%,
      #110d36 26%,
      #090822 55%,
      #040412 80%,
      #010107 100%);
  background-attachment: fixed;
}

/* starfield — three dot layers tiled at offset sizes; faint slow twinkle */
[data-theme="aurora"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 22px 34px, rgba(255, 255, 255, 0.85) 50%, transparent 51%),
    radial-gradient(1px 1px at 156px 122px, rgba(216, 227, 255, 0.6) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 308px 58px, rgba(255, 255, 255, 0.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 92px 204px, rgba(190, 209, 255, 0.5) 50%, transparent 51%),
    radial-gradient(2px 2px at 244px 232px, rgba(244, 248, 255, 0.45) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 366px 168px, rgba(214, 235, 255, 0.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 50px 130px, rgba(255, 255, 255, 0.35) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 200px 20px, rgba(226, 236, 255, 0.5) 50%, transparent 51%);
  background-size: 420px 280px;
  background-repeat: repeat;
  opacity: 0.5;
  animation: aurora-twinkle 11s var(--e-soft) infinite alternate;
}
@keyframes aurora-twinkle {
  from { opacity: 0.34; }
  to   { opacity: 0.62; }
}

/* aurora veil — blurred teal/violet/green curtains near the zenith,
   drifting and hue-shifting very slowly */
[data-theme="aurora"] body::after {
  content: "";
  position: fixed;
  left: -12%;
  right: -12%;
  top: -24%;
  height: 72vh;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(55% 62% at 16% 30%, rgba(111, 232, 216, 0.17), transparent 70%),
    radial-gradient(50% 66% at 52% 16%, rgba(167, 139, 250, 0.15), transparent 70%),
    radial-gradient(46% 56% at 86% 32%, rgba(138, 240, 180, 0.13), transparent 70%);
  filter: blur(36px) saturate(125%);
  transform-origin: 50% 0;
  animation: aurora-drift 38s var(--e-soft) infinite alternate;
}
@keyframes aurora-drift {
  from { transform: translateX(-4%) scaleY(1);    filter: blur(36px) saturate(125%) hue-rotate(0deg); }
  50%  { transform: translateX(2%)  scaleY(1.08); filter: blur(40px) saturate(135%) hue-rotate(16deg); }
  to   { transform: translateX(5%)  scaleY(0.95); filter: blur(36px) saturate(125%) hue-rotate(30deg); }
}

/* SYSTEM DISTRESS — the whole sky turns to a slow red aurora.
   (cockpit.css already suppresses every individual motif loop in distress.) */
[data-theme="aurora"] body[data-distress="1"]::after {
  background:
    radial-gradient(58% 64% at 18% 28%, rgba(255, 99, 122, 0.22), transparent 72%),
    radial-gradient(52% 68% at 54% 14%, rgba(255, 62, 86, 0.17), transparent 72%),
    radial-gradient(46% 56% at 86% 30%, rgba(255, 140, 110, 0.15), transparent 72%);
  animation: aurora-distress-sky 14s var(--e-soft) infinite alternate;
}
@keyframes aurora-distress-sky {
  from { transform: translateX(-3%) scaleY(1);    opacity: 0.72; filter: blur(36px) saturate(130%); }
  to   { transform: translateX(4%)  scaleY(1.12); opacity: 1;    filter: blur(42px) saturate(150%); }
}
[data-theme="aurora"] body[data-distress="1"]::before {
  opacity: 0.28; /* stars recede behind the red veil */
}

/* ====================== glassmorphism observatory cards ====================== */

[data-theme="aurora"] .node,
[data-theme="aurora"] .hchip,
[data-theme="aurora"] .chip,
[data-theme="aurora"] .banner,
[data-theme="aurora"] .brand-mark,
[data-theme="aurora"] .panel-close,
[data-theme="aurora"] .signin-card {
  backdrop-filter: blur(10px) saturate(135%);
  -webkit-backdrop-filter: blur(10px) saturate(135%);
}

[data-theme="aurora"] .node {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),       /* glass top edge */
    inset 0 0 24px rgba(150, 190, 255, 0.05),      /* soft inner glow */
    0 10px 28px rgba(2, 5, 22, 0.40);
}
[data-theme="aurora"] .node:hover {
  border-color: rgba(111, 232, 216, 0.48);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 0 26px rgba(140, 220, 230, 0.08),
    0 10px 30px rgba(2, 5, 22, 0.45),
    0 0 16px rgba(111, 232, 216, 0.12);
}
[data-theme="aurora"] .node.placeholder {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  background: rgba(146, 164, 255, 0.025);
}
[data-theme="aurora"] .issue-node {
  border-top: 1px solid rgba(111, 232, 216, 0.36);  /* aurora-lit crown */
}
[data-theme="aurora"] .hchip {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 6px 18px rgba(2, 5, 22, 0.32);
}
[data-theme="aurora"] .drill-panel {
  background: rgba(11, 14, 36, 0.74);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-left-color: rgba(168, 186, 255, 0.24);
}
[data-theme="aurora"] .stage-rail {
  background: linear-gradient(90deg, rgba(4, 4, 18, 0.92) 68%, transparent);
}
[data-theme="aurora"] .ticker-wrap {
  border-top-color: rgba(146, 164, 255, 0.14);
}

/* ================= slowly shifting aurora accents (healthy state) ================= */

@keyframes aurora-shift {
  from { background-position: 0% 40%; }
  to   { background-position: 100% 60%; }
}

[data-theme="aurora"] .banner[data-level="ok"] {
  color: #bdf5dd;
  border: 1px solid rgba(138, 240, 200, 0.18);
  background:
    linear-gradient(100deg,
      rgba(111, 232, 216, 0.13),
      rgba(167, 139, 250, 0.13),
      rgba(138, 240, 180, 0.13),
      rgba(111, 232, 216, 0.13));
  background-size: 320% 100%;
  animation: aurora-shift 26s var(--e-soft) infinite alternate;
}

[data-theme="aurora"] .brand-mark {
  border-color: rgba(150, 222, 232, 0.34);
  background:
    linear-gradient(140deg,
      rgba(111, 232, 216, 0.18),
      rgba(167, 139, 250, 0.18),
      rgba(138, 240, 180, 0.18));
  background-size: 240% 240%;
  box-shadow: 0 0 18px rgba(111, 232, 216, 0.14);
  animation: aurora-shift 18s var(--e-soft) infinite alternate;
}

/* multi-PR joiner reads as a horizontal aurora band */
[data-theme="aurora"] .chains[data-multi="1"]::before {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(111, 232, 216, 0.34),
    rgba(167, 139, 250, 0.34),
    rgba(111, 232, 216, 0.34));
}

/* ==================== connectors: smooth luminous ribbons ==================== */

[data-theme="aurora"] .connector::before {
  width: 5px;
  margin-left: -2.5px;
  border-radius: 999px;
  background: linear-gradient(180deg,
    rgba(111, 232, 216, 0.06),
    rgba(111, 232, 216, 0.44) 30%,
    rgba(167, 139, 250, 0.40) 70%,
    rgba(167, 139, 250, 0.06));
  background-size: 100% 260%;
  box-shadow: 0 0 10px rgba(140, 224, 232, 0.18);
  animation: aurora-ribbon 16s var(--e-soft) infinite alternate;
}
@keyframes aurora-ribbon {
  from { background-position: 50% 0%; }
  to   { background-position: 50% 100%; }
}
/* unreached stages: faint dotted trace, no glow, no motion */
[data-theme="aurora"] .cell[data-reached="0"] .connector::before {
  width: 2px;
  margin-left: -1px;
  border-radius: 0;
  background: repeating-linear-gradient(180deg,
    rgba(146, 164, 255, 0.18) 0 3px, transparent 3px 9px);
  box-shadow: none;
  animation: none;
}

/* ============ pulses: bioluminescent orbs drifting down with gentle easing ============ */

[data-theme="aurora"] .chain[data-active="1"] .cell[data-flow="1"] .connector::after {
  width: 10px;
  height: 10px;
  margin-left: -5px;
  background: radial-gradient(circle,
    #eafffb 0%,
    var(--c-pulse) 38%,
    rgba(177, 246, 233, 0) 74%);
  box-shadow:
    0 0 14px 4px rgba(177, 246, 233, 0.50),
    0 0 30px 9px rgba(167, 139, 250, 0.22);
}
/* longer, softer trip: orb fades in, drifts, dissolves — no hard pops */
@keyframes pulse-travel {
  0%   { top: -4px;               opacity: 0; }
  7%   {                          opacity: 0.95; }
  20%  { top: calc(100% - 8px);   opacity: 0.95; }
  27%  { top: calc(100% - 8px);   opacity: 0; }
  100% { top: calc(100% - 8px);   opacity: 0; }
}

/* ======================== motif halo badges (glass moons) ======================== */

[data-theme="aurora"] .motif-icon {
  background: rgba(18, 23, 50, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 0 12px rgba(2, 5, 22, 0.5);
}

/* ---- shaking lock -> slow strained sway, soft but unmistakable ---- */
[data-theme="aurora"] [data-motif="shaking-lock"] .motif-icon {
  box-shadow: 0 0 14px rgba(255, 143, 154, 0.28);
}
[data-theme="aurora"] [data-motif="shaking-lock"] .motif-icon .icon {
  animation: motif-shake var(--d-shake) var(--e-soft) infinite;
}
@keyframes motif-shake {
  0%, 100% { transform: rotate(0deg); }
  18% { transform: rotate(-7deg) translateY(0.4px); }
  36% { transform: rotate(5deg); }
  54% { transform: rotate(-4deg); }
  72% { transform: rotate(2.5deg); }
  88% { transform: rotate(-1deg); }
}

/* ---- stalled gears -> long, weary attempt-and-slip ---- */
[data-theme="aurora"] [data-motif="stalled-gears"] .motif-icon {
  box-shadow: 0 0 14px rgba(255, 198, 110, 0.26);
}
@keyframes motif-gear-stall {
  0%   { transform: rotate(0deg); }
  32%  { transform: rotate(42deg); }
  46%  { transform: rotate(30deg); }
  66%  { transform: rotate(48deg); }
  80%  { transform: rotate(34deg); }
  100% { transform: rotate(0deg); }
}

/* ---- flame -> flickering ember: warm gradient core, smooth waver ---- */
[data-theme="aurora"] [data-motif="flame"] .motif-icon {
  background: radial-gradient(circle at 50% 72%,
    rgba(255, 178, 110, 0.92) 0%,
    rgba(255, 112, 80, 0.55) 45%,
    rgba(22, 14, 32, 0.88) 78%);
  border-color: rgba(255, 164, 112, 0.55);
  color: #fff1dd;
  box-shadow: 0 0 18px 4px rgba(255, 140, 90, 0.30);
}
[data-theme="aurora"] .hchip[data-motif="flame"] > .icon { color: #ffb27a; }
@keyframes motif-flame {
  0%, 100% { transform: scale(1);                 filter: drop-shadow(0 0 3px rgba(255, 150, 90, 0.65)); }
  28%      { transform: scale(1.12) rotate(-2deg); filter: drop-shadow(0 0 7px rgba(255, 176, 104, 0.9)); }
  52%      { transform: scale(0.94) rotate(2deg);  filter: drop-shadow(0 0 4px rgba(255, 120, 70, 0.7)); }
  76%      { transform: scale(1.06) rotate(-1deg); filter: drop-shadow(0 0 6px rgba(255, 192, 122, 0.85)); }
}

/* ---- sad robot -> slow weary droop under the night sky ---- */
[data-theme="aurora"] [data-motif="sad-robot"] .motif-icon {
  box-shadow: 0 0 14px rgba(255, 198, 110, 0.22);
}
@keyframes motif-robot {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50%      { transform: rotate(-8deg) translateY(1.8px); }
}

/* ---- wobbling tide -> genuinely wave-like: two SVG swell layers rolling
        at different speeds (parallax), with a gentle vertical bob ---- */
[data-theme="aurora"] .tide-strip {
  height: 16px;
  border-radius: 8px;
  opacity: 0.9;
  background-color: rgba(255, 198, 110, 0.07);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16' preserveAspectRatio='none'%3E%3Cpath d='M0 9 Q15 3 30 9 T60 9 T90 9 T120 9 V16 H0 Z' fill='%23ffc66e' fill-opacity='0.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 16' preserveAspectRatio='none'%3E%3Cpath d='M0 11 Q11.25 6 22.5 11 T45 11 T67.5 11 T90 11 V16 H0 Z' fill='%23e8a14b' fill-opacity='0.38'/%3E%3C/svg%3E");
  background-size: 120px 16px, 90px 16px;
  background-repeat: repeat-x, repeat-x;
  background-position: 0 1px, 0 4px;
  box-shadow: 0 0 14px rgba(255, 198, 110, 0.22);
  animation:
    motif-tide-roll var(--d-tide) var(--e-linear) infinite,
    motif-tide-wobble calc(var(--d-tide) * 0.55) var(--e-soft) infinite alternate;
}
@keyframes motif-tide-roll {
  from { background-position: 0 1px, 0 4px; }
  to   { background-position: 120px 1px, -90px 4px; }
}
@keyframes motif-tide-wobble {
  from { transform: translateY(-1.2px); }
  to   { transform: translateY(1.2px); }
}
/* the Drift chip's wave icon bobs like a buoy */
[data-theme="aurora"] .hchip[data-motif="wobbling-tide"] > .icon {
  color: var(--c-amber);
  animation: aurora-bob calc(var(--d-tide) * 0.55) var(--e-soft) infinite alternate;
}
@keyframes aurora-bob {
  from { transform: translateY(-1.2px) rotate(-3deg); }
  to   { transform: translateY(1.2px) rotate(3deg); }
}

/* ==================== stall glow: warm amber lantern halo ==================== */

@keyframes glow-amber {
  from {
    box-shadow:
      0 0 8px 1px var(--c-glow-amber),
      inset 0 0 14px rgba(255, 198, 110, 0.07);
  }
  to {
    box-shadow:
      0 0 26px 7px var(--c-glow-amber),
      inset 0 0 18px rgba(255, 198, 110, 0.13);
  }
}
@keyframes glow-red {
  from {
    box-shadow:
      0 0 8px 1px var(--c-glow-red),
      inset 0 0 14px rgba(255, 143, 154, 0.07);
  }
  to {
    box-shadow:
      0 0 26px 7px var(--c-glow-red),
      inset 0 0 18px rgba(255, 143, 154, 0.13);
  }
}

/* ==================== distress coordination ==================== */

/* the sky carries the alarm; banner breathes slowly instead of pulsing hard */
@keyframes distress-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--c-glow-red); opacity: 1; }
  50%      { box-shadow: 0 0 30px 6px var(--c-glow-red); opacity: 0.88; }
}
/* cockpit.css suppresses motif-icon ICON loops in distress; also still the
   halo containers this theme animates implicitly via gradients */
[data-theme="aurora"] body[data-distress="1"] .motif-icon { animation: none !important; }

/* ==================== look-switcher bar (Look C chrome) ==================== */

.look-switcher {
  position: fixed;
  right: 14px;
  bottom: 46px;            /* clears the activity ticker */
  z-index: 15;             /* below the drill panel (20) */
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px;
  border: 1px solid rgba(168, 186, 255, 0.24);
  border-radius: 999px;
  background: rgba(10, 12, 32, 0.74);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 8px 24px rgba(2, 4, 18, 0.5);
  font-size: 0.72rem;
  color: var(--c-muted);
  white-space: nowrap;
}
.look-switcher .lk-label {
  font-weight: 750;
  letter-spacing: 0.14em;
  color: var(--c-faint);
}
.look-switcher .lk-sep { color: rgba(168, 186, 255, 0.30); }
.look-switcher a {
  color: var(--c-accent);
  text-decoration: none;
  font-weight: 650;
}
.look-switcher a:hover { text-decoration: underline; }
.look-switcher a[data-state="warn"] { color: var(--c-amber); }
.look-switcher a[data-state="fail"] { color: var(--c-red); }
.look-switcher .lk-q {
  color: var(--c-faint);
  font-family: ui-monospace, Consolas, "Cascadia Mono", monospace;
  font-size: 0.62rem;
  font-weight: 400;
}

/* ==================== accessibility ==================== */

/* cockpit.css already zeroes all animation durations/delays under
   prefers-reduced-motion (universal !important block). Make the ambient sky
   layers explicitly static too, keeping their gradients visible. */
@media (prefers-reduced-motion: reduce) {
  [data-theme="aurora"] body::before,
  [data-theme="aurora"] body::after,
  [data-theme="aurora"] body[data-distress="1"]::after,
  [data-theme="aurora"] .connector::before,
  [data-theme="aurora"] .tide-strip,
  [data-theme="aurora"] .hchip[data-motif="wobbling-tide"] > .icon,
  [data-theme="aurora"] .banner[data-level="ok"],
  [data-theme="aurora"] .brand-mark {
    animation: none !important;
  }
}