/* Dark + Spectrum: enforce black/white UI for CTAs and active states on /assessment. */

html[data-theme="dark"][data-color-theme="spectrum"],
body[data-theme="dark"][data-color-theme="spectrum"] {
  --accent-primary: #ffffff;
  --accent-secondary: #cbd5e1;
  --text-on-accent: #0f172a;
  --accent-color: #ffffff;
  --accent-color-rgb: 255, 255, 255;
}

/* Tiebreaker rank pill (ordinal) */
.tiebreaker-rank {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-primary);
  background: var(--bg-secondary);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 2px 8px;
  line-height: 1.2;
  white-space: nowrap;
}

html[data-theme="dark"][data-color-theme="spectrum"] .tiebreaker-rank,
body[data-theme="dark"][data-color-theme="spectrum"] .tiebreaker-rank {
  background: #ffffff;
  color: #0f172a;
  border-color: rgba(255, 255, 255, 0.7);
}

/* Navigation buttons (Start, Next) */
html[data-theme="dark"][data-color-theme="spectrum"] .nav-button:not(.secondary),
body[data-theme="dark"][data-color-theme="spectrum"] .nav-button:not(.secondary) {
  background: #ffffff;
  color: #0f172a;
}

/* Onboarding progress dot glow should not be blue in dark+spectrum */
html[data-theme="dark"][data-color-theme="spectrum"] .progress-dot.active,
body[data-theme="dark"][data-color-theme="spectrum"] .progress-dot.active {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18);
}

/* Quick clarification (tiebreaker) selected state should not look blue */
html[data-theme="dark"][data-color-theme="spectrum"] .tiebreaker-option:hover,
body[data-theme="dark"][data-color-theme="spectrum"] .tiebreaker-option:hover {
  border-color: #ffffff;
}

html[data-theme="dark"][data-color-theme="spectrum"] .tiebreaker-option.option-selected,
body[data-theme="dark"][data-color-theme="spectrum"] .tiebreaker-option.option-selected {
  border-color: #ffffff;
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.14);
}

html[data-theme="dark"][data-color-theme="spectrum"] .tiebreaker-option.option-selected .tiebreaker-content,
body[data-theme="dark"][data-color-theme="spectrum"] .tiebreaker-option.option-selected .tiebreaker-content {
  border-left-color: #ffffff;
}