/* ============================================================
   SHARED SIM UI TOKENS — common design primitives across
   com/sim, emc/sim, eletromag/sim. Load BEFORE each sim's own
   stylesheet so sim-specific rules keep overriding as before.

   Only id/class-agnostic primitives live here (colors, fonts,
   buttons, popover, tooltip, scrollbar). No layout/grid rules,
   no #app/#library/#sidebar ids — those differ per sim.
   ============================================================ */

:root{
  --sim-bg:#070a12;
  --sim-panel:#0e1524;
  --sim-line:rgba(148,163,184,.13);
  --sim-line-hot:rgba(103,232,249,.32);
  --sim-text:#f1f5f9;
  --sim-muted:#94a3b8;
  --sim-dim:#5f6e84;
  --sim-cyan:#67e8f9;
  --sim-blue:#38bdf8;
  --sim-green:#34d399;
  --sim-red:#fb7185;
  --sim-amber:#fbbf24;
  --sim-font:"DM Sans",system-ui,sans-serif;
  --sim-mono:"JetBrains Mono",monospace;

  /* Semantic accent split: cyan = interactive/action, amber = measured/computed value.
     Use --sim-value for anything the sim computed and is reporting back (readouts,
     metrics, formula results) so it reads as distinct from things the user can click/drag. */
  --sim-value:var(--sim-amber);
  --sim-action:var(--sim-cyan);

  /* Type scale — one ramp shared by all 3 sims instead of ad-hoc px/rem per file. */
  --sim-fs-3xs:.5rem;   /* 8px  eyebrow/kbd */
  --sim-fs-2xs:.5625rem;/* 9px  micro labels */
  --sim-fs-xs:.625rem;  /* 10px small controls */
  --sim-fs-sm:.6875rem; /* 11px body small */
  --sim-fs-base:.8125rem;/* 13px default body */
  --sim-fs-md:.875rem;  /* 14px */
  --sim-fs-lg:1rem;     /* 16px section head */
  --sim-fs-xl:1.375rem; /* 22px stat/metric numbers */

  /* Spacing scale */
  --sim-sp-1:4px;--sim-sp-2:7px;--sim-sp-3:10px;--sim-sp-4:14px;--sim-sp-5:20px;

  /* Radius scale */
  --sim-r-sm:7px;--sim-r-md:10px;--sim-r-lg:14px;

  /* Motion */
  --sim-ease:cubic-bezier(.4,0,.2,1);
  --sim-fast:.15s;--sim-med:.22s;
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ===== BUTTONS / TOOLBAR ===== */
.toolbar button,
.toolbar .primary,
.btn{
  font-family:var(--sim-font);
}
.toolbar .primary,
.btn.primary{
  border-color:transparent;
  color:#061018;
  background:linear-gradient(135deg,var(--sim-cyan),var(--sim-blue));
  box-shadow:0 7px 20px rgba(56,189,248,.15);
}
.btn.danger{
  color:#fecdd3;
  border-color:rgba(251,113,133,.24);
  background:rgba(251,113,133,.08);
}

/* ===== POPOVER ===== */
.popover{
  border-radius:14px;
  box-shadow:0 20px 50px rgba(0,0,0,.5);
}
.popover button:hover{background:#1d293c}

/* ===== TOOLTIP ===== */
.tooltip{
  border:1px solid var(--sim-line-hot);
  border-radius:10px;
  background:rgba(14,21,36,.96);
  backdrop-filter:blur(12px);
  box-shadow:0 12px 32px rgba(0,0,0,.4);
  color:var(--sim-text);
  font-size:.68rem;
  line-height:1.5;
  pointer-events:none;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .2s,transform .2s;
}
.tooltip.show{opacity:1;transform:translateY(0);pointer-events:auto}
.tooltip h4{margin:0 0 6px;color:var(--sim-cyan);font-size:.72rem;font-weight:600}
.tooltip p{margin:0 0 8px;color:var(--sim-muted)}
.tooltip .concept{
  padding:6px 8px;
  background:rgba(34,211,238,.06);
  border-radius:6px;
  border-left:2px solid var(--sim-cyan);
  font-size:.65rem;
  color:var(--sim-text);
}

/* ===== SCROLLBAR ===== */
.library,.inspector,#library,#sidebar{
  scrollbar-width:thin;
  scrollbar-color:#26334b transparent;
}

/* ===== FOCUS RING ===== */
button:focus-visible,select:focus-visible,input:focus-visible{
  outline:2px solid var(--sim-cyan);
  outline-offset:2px;
}

/* ===== LIVE DOT ===== */
.live-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--sim-green);
  box-shadow:0 0 10px var(--sim-green);
}

/* ============================================================
   GLASSMORPHISM LAYER — shared across all 3 sims
   Load after base tokens; all glass components pull from these.
   ============================================================ */

/* --- Elevation layers (z-depth via layered shadows) --- */
:root{
  --glass-blur:18px;
  --glass-blur-strong:28px;
  --glass-blur-popover:32px;

  /* Glass surface layers — each adds depth + highlight */
  --glass-surface:rgba(14,20,36,.62);
  --glass-surface-hover:rgba(20,30,50,.72);
  --glass-surface-strong:rgba(24,36,58,.78);

  /* Inner highlight: simulates light catching the top edge of glass */
  --glass-highlight:rgba(255,255,255,.06);
  --glass-highlight-strong:rgba(255,255,255,.1);

  /* Shadow layers — stack for depth */
  --glass-shadow-sm:0 2px 8px rgba(0,0,0,.2),0 1px 2px rgba(0,0,0,.15);
  --glass-shadow-md:0 8px 24px rgba(0,0,0,.25),0 2px 8px rgba(0,0,0,.15),inset 0 1px var(--glass-highlight);
  --glass-shadow-lg:0 20px 48px rgba(0,0,0,.3),0 8px 20px rgba(0,0,0,.2),inset 0 1px var(--glass-highlight);
  --glass-shadow-xl:0 32px 80px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.25),inset 0 1px var(--glass-highlight-strong);

  /* Hover lift */
  --glass-lift:translateY(-2px);
  --glass-lift-hover:translateY(-3px);

  /* Accent gradient — used on active/highlight elements */
  --glass-gradient:linear-gradient(135deg,rgba(34,211,238,.15),rgba(99,102,241,.12));
  --glass-gradient-border:linear-gradient(135deg,rgba(34,211,238,.25),rgba(129,140,248,.18));

  /* Animated canvas background */
  --glass-canvas-bg1:#0a1020;
  --glass-canvas-bg2:#070c18;
  --glass-canvas-glow:radial-gradient(ellipse 60% 50% at 50% 40%,rgba(34,211,238,.04),transparent);
}

/* --- Reusable glass classes --- */

/* Frosted glass panel */
.glass-panel{
  background:var(--glass-surface);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid rgba(148,163,184,.1);
  border-top-color:rgba(255,255,255,.08);
  border-radius:inherit;
  box-shadow:var(--glass-shadow-md);
  transition:background var(--sim-fast) var(--sim-ease),box-shadow var(--sim-fast) var(--sim-ease),border-color var(--sim-fast) var(--sim-ease),transform var(--sim-fast) var(--sim-ease);
}
.glass-panel:hover{
  background:var(--glass-surface-hover);
  box-shadow:var(--glass-shadow-lg);
  transform:var(--glass-lift-hover);
}

/* Frosted glass card (library items, result cards, etc.) */
.glass-card{
  background:rgba(16,22,38,.55);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(148,163,184,.08);
  border-radius:var(--sim-r-md);
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  transition:background var(--sim-fast) var(--sim-ease),box-shadow var(--sim-fast) var(--sim-ease),border-color var(--sim-fast) var(--sim-ease),transform var(--sim-fast) var(--sim-ease);
}
.glass-card:hover{
  background:rgba(22,32,52,.65);
  border-color:rgba(103,232,249,.18);
  box-shadow:0 6px 18px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.04);
  transform:var(--glass-lift);
}

/* Frosted glass input */
.glass-input{
  background:rgba(10,15,26,.5);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(148,163,184,.12);
  border-radius:var(--sim-r-sm);
  transition:border-color var(--sim-fast) var(--sim-ease),box-shadow var(--sim-fast) var(--sim-ease),background var(--sim-fast) var(--sim-ease);
}
.glass-input:focus{
  border-color:rgba(103,232,249,.35);
  box-shadow:0 0 0 3px rgba(34,211,238,.08);
  background:rgba(12,18,30,.6);
}

/* --- Animated canvas background --- */
@keyframes glass-drift{
  0%{background-position:0% 0%}
  50%{background-position:100% 50%}
  100%{background-position:0% 0%}
}
@keyframes glass-pulse-glow{
  0%,100%{opacity:.3}
  50%{opacity:.6}
}

.glass-canvas-bg{
  background:
    var(--glass-canvas-glow),
    radial-gradient(circle at 30% 60%,rgba(99,102,241,.04),transparent 50%),
    radial-gradient(circle at 70% 30%,rgba(34,211,238,.03),transparent 50%),
    linear-gradient(160deg,var(--glass-canvas-bg1),var(--glass-canvas-bg2));
  background-size:200% 200%,100% 100%,100% 100%,100% 100%;
  animation:glass-drift 20s ease infinite;
}

/* --- Button glass style --- */
.toolbar button.glass-btn{
  background:rgba(18,26,42,.6);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(148,163,184,.12);
  border-radius:var(--sim-r-sm);
  transition:background var(--sim-fast) var(--sim-ease),border-color var(--sim-fast) var(--sim-ease),transform var(--sim-fast) var(--sim-ease),box-shadow var(--sim-fast) var(--sim-ease);
}
.toolbar button.glass-btn:hover{
  background:rgba(24,34,52,.7);
  border-color:rgba(103,232,249,.25);
  transform:var(--glass-lift);
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}

/* --- Glass popover --- */
.glass-popover{
  background:rgba(10,15,28,.75);
  backdrop-filter:blur(var(--glass-blur-popover));
  -webkit-backdrop-filter:blur(var(--glass-blur-popover));
  border:1px solid rgba(148,163,184,.12);
  border-top-color:rgba(255,255,255,.08);
  border-radius:var(--sim-r-lg);
  box-shadow:var(--glass-shadow-xl);
}

/* --- Glass modal overlay --- */
.glass-modal-bg{
  background:rgba(3,5,12,.7);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

/* --- Glass modal dialog --- */
.glass-modal-dialog{
  background:rgba(12,18,32,.82);
  backdrop-filter:blur(var(--glass-blur-strong));
  -webkit-backdrop-filter:blur(var(--glass-blur-strong));
  border:1px solid rgba(148,163,184,.12);
  border-top-color:rgba(255,255,255,.08);
  border-radius:var(--sim-r-lg);
  box-shadow:var(--glass-shadow-xl);
}

/* --- Scrollbar glass style --- */
.library::-webkit-scrollbar,.inspector::-webkit-scrollbar,#library::-webkit-scrollbar,#sidebar::-webkit-scrollbar{
  width:6px;
}
.library::-webkit-scrollbar-track,.inspector::-webkit-scrollbar-track,#library::-webkit-scrollbar-track,#sidebar::-webkit-scrollbar-track{
  background:transparent;
}
.library::-webkit-scrollbar-thumb,.inspector::-webkit-scrollbar-thumb,#library::-webkit-scrollbar-thumb,#sidebar::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.2);
  border-radius:99px;
}
.library::-webkit-scrollbar-thumb:hover,.inspector::-webkit-scrollbar-thumb:hover,#library::-webkit-scrollbar-thumb:hover,#sidebar::-webkit-scrollbar-thumb:hover{
  background:rgba(148,163,184,.35);
}