/**
 * Spectrum simulator — global styles only.
 * Class prefix: ss- (avoid collisions, grep-friendly).
 * Palette mirrors lib/constants.js (C) — keep in sync when rebranding.
 */

/* -------------------------------------------------------------------------- */
/* Tokens                                                                     */
/* -------------------------------------------------------------------------- */

:root {
  --ss-bg: #0a0a0c;
  --ss-card: #141416;
  --ss-border: #2d2a26;
  --ss-text: #e4e4e7;
  --ss-text-muted: #71717a;
  --ss-accent: #3b82f6;
  --ss-gold: #c9a227;

  --ss-gradient-cyan: #22d3ee;
  --ss-gradient-violet: #a855f7;
  --ss-gradient-orange: #ff8c00;

  --ss-range-thumb-size: 14px;
  --ss-glow-radius: 13px;
  --ss-glow-size: 1.5px;
}

/* -------------------------------------------------------------------------- */
/* Native controls (scoped to simulator root)                                 */
/* -------------------------------------------------------------------------- */

.ss-root input[type="range"] {
  touch-action: none;
}

.ss-root input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--ss-range-thumb-size);
  height: var(--ss-range-thumb-size);
  border-radius: 50%;
  background: var(--ss-accent);
  border: 2px solid var(--ss-bg);
  cursor: pointer;
  box-shadow: 0 0 8px #3b82f644;
}

.ss-root input[type="range"]::-moz-range-thumb {
  width: var(--ss-range-thumb-size);
  height: var(--ss-range-thumb-size);
  border-radius: 50%;
  background: var(--ss-accent);
  border: 2px solid var(--ss-bg);
  cursor: pointer;
}

.ss-root input[type="number"]::-webkit-inner-spin-button,
.ss-root input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.ss-root input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.ss-root select option {
  background: var(--ss-card);
  color: var(--ss-text);
}

/* -------------------------------------------------------------------------- */
/* Scrollbars (scoped to simulator root)                                      */
/* -------------------------------------------------------------------------- */

.ss-root ::-webkit-scrollbar {
  width: 6px;
}

.ss-root ::-webkit-scrollbar-track {
  background: var(--ss-bg);
}

.ss-root ::-webkit-scrollbar-thumb {
  background: var(--ss-gold);
  border-radius: 3px;
}

/** Hide scrollbars but keep overflow scroll (chart toolbars). */
.ss-no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ss-no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* -------------------------------------------------------------------------- */
/* Utilities                                                                  */
/* -------------------------------------------------------------------------- */

/** Entrance animation for main panels (pair with inline animationDelay). */
.ss-fade-in {
  animation: ss-keyframes-fade-in 0.4s ease-out both;
}

/** Rainbow gradient wordmark (e.g. “Spectrum” in header). */
.ss-text-gradient {
  background: linear-gradient(
    90deg,
    var(--ss-gradient-cyan),
    var(--ss-gradient-violet),
    var(--ss-gradient-orange)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ss-keyframes-spectrum-hue 12s ease-in-out infinite;
  will-change: filter;
}

/** Temporary highlight on Help (driven by React state). */
.ss-help-pulse {
  animation: ss-keyframes-help-pulse 0.8s ease-in-out 3;
}

/** Conic-gradient glow halo; desktop scenario dock only.
 *  ::before/::after are full gradient fills placed behind the inner card
 *  (z-index: -1). The card's opaque background covers the centre —
 *  only the blurred edges bleed through as a visible glow. */
.ss-glow-border {
  --glow-angle: 0deg;
  position: relative;
  border-radius: var(--ss-glow-radius);
  animation: ss-keyframes-glow-spin 3s linear infinite;
}

/* Lift the inner card above the glow pseudo-elements */
.ss-glow-border > * {
  position: relative;
  z-index: 1;
}

.ss-glow-border::before,
.ss-glow-border::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--glow-angle),
    var(--ss-gold),
    var(--ss-gradient-cyan),
    var(--ss-gradient-violet),
    var(--ss-gradient-orange),
    var(--ss-gold)
  );
  filter: blur(10px);
  pointer-events: none;
}

/* Pulsing glow — heartbeat, hides on hover */
.ss-glow-border::before {
  animation: ss-keyframes-glow-heartbeat 8s ease-in-out infinite;
  transition: opacity 0.6s ease;
}

/* !important needed to override the running keyframe value */
.ss-glow-border:hover::before {
  opacity: 0 !important;
}

/* Steady glow — hidden by default, shown on hover */
.ss-glow-border::after {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.ss-glow-border:hover::after {
  opacity: 1;
}

/* -------------------------------------------------------------------------- */
/* Keyframes                                                                  */
/* -------------------------------------------------------------------------- */

@keyframes ss-keyframes-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ss-keyframes-spectrum-hue {
  0% {
    filter: hue-rotate(0deg);
  }
  50% {
    filter: hue-rotate(-40deg);
  }
  100% {
    filter: hue-rotate(0deg);
  }
}

@keyframes ss-keyframes-help-pulse {
  0%,
  100% {
    border-color: var(--ss-border);
    color: var(--ss-text-muted);
    box-shadow: none;
  }
  25%,
  75% {
    border-color: var(--ss-gold);
    color: var(--ss-gold);
    box-shadow: 0 0 12px #c9a22744;
  }
  50% {
    border-color: var(--ss-gold);
    color: var(--ss-gold);
    box-shadow: 0 0 16px #c9a22766;
  }
}

@property --glow-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: true;
}

@keyframes ss-keyframes-glow-spin {
  to {
    --glow-angle: 360deg;
  }
}

@keyframes ss-keyframes-glow-heartbeat {
  0%,
  100% {
    opacity: 0;
  }
  8% {
    opacity: 0.45;
  }
  20% {
    opacity: 0.45;
  }
  32% {
    opacity: 0;
  }
}

/* -------------------------------------------------------------------------- */
/* Surplus bar — rotating conic-gradient glow (same palette as scenario panel)*/
/* -------------------------------------------------------------------------- */

/* Allow the glow to bleed outside the chart SVG */
[data-testid="apy-chart"] svg.recharts-surface {
  overflow: visible;
}

.ss-surplus-glow {
  --glow-angle: 0deg;
  position: relative;
  animation: ss-keyframes-glow-spin 3s linear infinite;
}

.ss-surplus-glow::before,
.ss-surplus-glow::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  background: conic-gradient(
    from var(--glow-angle),
    var(--ss-gold),
    var(--ss-gradient-cyan),
    var(--ss-gradient-violet),
    var(--ss-gradient-orange),
    var(--ss-gold)
  );
  pointer-events: none;
}

/* Blurred copy = the visible glow halo */
.ss-surplus-glow::before {
  inset: -4px;
  filter: blur(8px);
  opacity: 0.8;
}

/* Crisp copy = the sharp border ring */
.ss-surplus-glow::after {
  inset: -1.5px;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  padding: 1.5px;
  opacity: 0.9;
}

/* -------------------------------------------------------------------------- */
/* Reduced motion                                                             */
/* -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ss-text-gradient,
  .ss-help-pulse {
    animation: none;
  }

  .ss-glow-border,
  .ss-glow-border::before {
    animation: none;
  }

  .ss-surplus-glow {
    animation: none;
  }
}

/* -------------------------------------------------------------------------- */
/* Header button hover states (CSS instead of JS DOM mutation)                */
/* -------------------------------------------------------------------------- */

.ss-preset-btn:not(.ss-preset-btn--active):hover {
  border-color: var(--ss-text-muted) !important;
  color: var(--ss-text) !important;
}

.ss-action-btn--export:hover {
  border-color: #10b981 !important;
  color: #10b981 !important;
}

.ss-action-btn--import:hover {
  border-color: var(--ss-accent) !important;
  color: var(--ss-accent) !important;
}

.ss-action-btn--help:hover {
  border-color: var(--ss-gold) !important;
  color: var(--ss-gold) !important;
}