/* ═══════════════════════════════════════════════════════════════
   RAVEN AI FUSION — Expert Inputs styles (D2)
   frontend/css/expert_inputs.css  ?v=20260611p2

   Styles the threat-score slider, its band label/readout, and the
   inline reliability / SIDC hint text. Colours from tokens.css; font
   floor --rv-fs-xs (0.78rem). No layout animation (transform/opacity only).
   ═══════════════════════════════════════════════════════════════ */

/* ── Inline expert hints (reliability + SIDC) ────────────────────── */
.expert-hint {
  display: block;
  margin-top: var(--rv-space-1, 0.25rem);
  font-size: var(--rv-fs-xs, 0.78rem);
  line-height: 1.4;
  color: var(--rv-color-text-muted, #4e6070);
}
.expert-hint:empty { display: none; }

/* ── Threat-score slider row ──────────────────────────────────────── */
.expert-slider-row {
  display: flex;
  align-items: center;
  gap: var(--rv-space-3, 0.75rem);
}

.expert-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: var(--rv-r-full, 9999px);
  background: linear-gradient(
    90deg,
    var(--rv-color-sev-low, #00e676) 0%,
    var(--rv-color-sev-medium, #ffab40) 50%,
    var(--rv-color-sev-high, #ff6d00) 78%,
    var(--rv-color-sev-critical, #ff1744) 100%
  );
  outline: none;
  cursor: pointer;
}
.expert-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: var(--rv-r-full, 9999px);
  background: var(--rv-color-text-primary, #d8e4f0);
  border: 2px solid var(--rv-color-bg-root, #060810);
  box-shadow: 0 0 0 1px var(--rv-color-border-bright, rgba(255, 255, 255, 0.12));
  cursor: pointer;
  transition: transform var(--rv-dur-fast, 150ms) ease;
}
.expert-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.expert-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: var(--rv-r-full, 9999px);
  background: var(--rv-color-text-primary, #d8e4f0);
  border: 2px solid var(--rv-color-bg-root, #060810);
  cursor: pointer;
}
.expert-slider:focus-visible {
  box-shadow: 0 0 0 2px var(--rv-color-accent, #00e5ff);
}

.expert-slider-readout {
  min-width: 3ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: var(--rv-fs-sm, 0.857rem);
  font-weight: 600;
  color: var(--rv-color-text-primary, #d8e4f0);
}

/* ── Band label ───────────────────────────────────────────────────── */
.expert-slider-band {
  display: inline-block;
  margin-top: var(--rv-space-1, 0.25rem);
  font-size: var(--rv-fs-xs, 0.78rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1px var(--rv-space-2, 0.5rem);
  border-radius: var(--rv-r-sm, 2px);
  color: var(--rv-color-text-secondary, #8fa3bc);
}
.expert-slider-band.band-low {
  color: var(--rv-color-sev-low, #00e676);
  background: var(--rv-color-sev-low-bg, rgba(0, 230, 118, 0.12));
}
.expert-slider-band.band-moderate {
  color: var(--rv-color-sev-medium, #ffab40);
  background: var(--rv-color-sev-medium-bg, rgba(255, 171, 64, 0.12));
}
.expert-slider-band.band-high {
  color: var(--rv-color-sev-high, #ff6d00);
  background: var(--rv-color-sev-high-bg, rgba(255, 109, 0, 0.14));
}
.expert-slider-band.band-critical {
  color: var(--rv-color-sev-critical, #ff1744);
  background: var(--rv-color-sev-critical-bg, rgba(255, 23, 68, 0.14));
}