/* KATSUMOKU Risk Regime Signal styles */
/* Accent: teal/cyan for "radar/monitoring" feel (vs MAGS indigo) */

:root {
  --accent: #2DD4BF;
  --accent-dim: rgba(45, 212, 191, 0.15);
  --green: #10B981;
  --yellow: #F59E0B;
  --red: #EF4444;
  --gray-border: #374151;
}

/* === Score Gauge === */
.score-gauge {
  position: relative;
  width: 180px;
  height: 100px;
  margin: 0 auto;
}

.gauge-svg {
  width: 100%;
  height: 100%;
}

.gauge-bg {
  fill: none;
  stroke: #374151;
  stroke-width: 12;
  stroke-linecap: round;
}

.gauge-fill {
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s ease-in-out;
}

.gauge-text {
  font-size: 2.5rem;
  font-weight: 700;
  text-anchor: middle;
}

/* === Regime Badge === */
.regime-badge {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  display: inline-block;
  text-align: center;
}
.regime-GREEN {
  background-color: rgba(16, 185, 129, 0.12);
  color: #10B981;
  border: 2px solid #10B981;
}
.regime-YELLOW {
  background-color: rgba(245, 158, 11, 0.12);
  color: #F59E0B;
  border: 2px solid #F59E0B;
}
.regime-RED {
  background-color: rgba(239, 68, 68, 0.12);
  color: #EF4444;
  border: 2px solid #EF4444;
  animation: pulse-glow-red 2s ease-in-out infinite;
}
.regime-NA {
  background-color: rgba(107, 114, 128, 0.12);
  color: #6B7280;
  border: 2px solid #6B7280;
}

/* RED pulse glow */
@keyframes pulse-glow-red {
  0%, 100% { box-shadow: 0 0 8px rgba(239, 68, 68, 0.2); }
  50% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.5); }
}

/* YELLOW subtle glow */
.regime-YELLOW {
  animation: pulse-glow-yellow 3s ease-in-out infinite;
}
@keyframes pulse-glow-yellow {
  0%, 100% { box-shadow: 0 0 6px rgba(245, 158, 11, 0.1); }
  50% { box-shadow: 0 0 14px rgba(245, 158, 11, 0.3); }
}

/* Header live dot */
.header-dot-GREEN { background-color: #10B981; animation: dot-pulse 2s ease-in-out infinite; }
.header-dot-YELLOW { background-color: #F59E0B; animation: dot-pulse 2s ease-in-out infinite; }
.header-dot-RED { background-color: #EF4444; animation: dot-pulse 1.2s ease-in-out infinite; }
@keyframes dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* === Subscore Cards === */
.subscore-card {
  border-left: 4px solid #374151;
  transition: border-color 0.3s, transform 0.2s;
}
.subscore-card:hover {
  transform: translateY(-1px);
}
.subscore-card-GREEN { border-left-color: #10B981; }
.subscore-card-YELLOW { border-left-color: #F59E0B; }
.subscore-card-RED { border-left-color: #EF4444; }

.subscore-bar {
  height: 8px;
  border-radius: 4px;
  background-color: #374151;
  overflow: hidden;
}
.subscore-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.8s ease-in-out;
}

/* === Driver Panel === */
.driver-row {
  transition: background-color 0.2s;
}
.driver-row:hover {
  background-color: rgba(45, 212, 191, 0.06);
}

/* === Chart Containers === */
.chart-container {
  position: relative;
  height: 200px;
}
.chart-container-lg {
  position: relative;
  height: 280px;
}

/* === Guide Panel === */
#guide-chevron.rotate-180 {
  transform: rotate(180deg);
}
#guide-body {
  transition: max-height 0.3s ease;
}
#guide-toggle {
  border-color: #374151;
}
#guide-toggle:hover {
  border-color: rgba(45, 212, 191, 0.3);
}

/* === Links === */
a.teal-link {
  color: var(--accent);
}
a.teal-link:hover {
  color: #5EEAD4;
}

/* === Tooltip for drivers === */
.driver-tooltip {
  position: relative;
}
.driver-tooltip .driver-tip-text {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #1F2937;
  color: #D1D5DB;
  font-size: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid #374151;
  white-space: nowrap;
  max-width: 280px;
  white-space: normal;
  z-index: 20;
  transition: opacity 0.15s, visibility 0.15s;
  pointer-events: none;
}
.driver-tooltip:hover .driver-tip-text {
  visibility: visible;
  opacity: 1;
}