/* ════════════════════════════════════════════════════════════════
   test-white.css — Light-theme color overrides for all test/report pages
   Load AFTER test.css. Overrides dark variables and hardcoded dark colors.
   ════════════════════════════════════════════════════════════════ */

/* ── Override legacy dark CSS variables with light values ─────── */
:root {
  --smoke:        #0a0a0a;
  --slate:        #555550;
  --ink:          #f5f5f0;
  --ghost:        #f8f8f4;
  --deep-glass:   #f0f0ea;
  --border:       #e0e0d8;
  --border-light: #e0e0d8;
  --brass:        #5a6e4a;
  --brass-dim:    #4a5e3a;
  --brass-glow:   #6a7e5a;
  --current:      #5a6e4a;
  --current-dim:  #4a5e3a;
  --sienna:       #8c3a2a;
  --mist:         #555550;
  --vault:        #f8f8f4;
}

/* ── Body & page backgrounds ──────────────────────────────────── */
body,
body.test-body,
body.report-body {
  background: #f5f5f0;
  color: #0a0a0a;
}

/* ── Navigation ───────────────────────────────────────────────── */
.nav,
.nav.scrolled {
  background: rgba(255,255,255,0.96);
  border-bottom: 1px solid #e0e0d8;
}

/* ── Intro page (applied to <main> element) ───────────────────── */
.intro-page {
  background: #f5f5f0;
}

/* ── Test header ──────────────────────────────────────────────── */
.test-header {
  background: rgba(255,255,255,0.96);
  border-bottom: 1px solid #e0e0d8;
}

/* ── Progress bar ─────────────────────────────────────────────── */
.progress-bar { background: #e0e0d8; height: 10px; }
.progress-bar__fill { background: #5a6e4a; }

/* ── Question rows (part-a Likert style) ──────────────────────── */
.question-row {

.question-row__num { color: #999999; }
.question-row__text { color: #0a0a0a; font-size: 1.4rem; }

/* ── Question blocks (part-b / risk-iq multiple-choice style) ─── */
.question-block {
  border-bottom: 1px solid #e0e0d8;
}

.question-block__num {
  color: #5a6e4a;
}

.question-block__text {
  color: #0a0a0a;
  font-size: 1.4rem;
}

/* ── Multiple choice options ──────────────────────────────────── */
.choice-opt {
  position: relative;
  border: 1px solid #e0e0d8;
  background: #ffffff;
  padding: 1.25rem 1.5rem;
  font-size: 1.05rem;
  min-height: 64px;
  display: flex;
  align-items: center;
}

/* Hide radio input inside choice-opt */
.choice-opt input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.choice-opt:hover {
  border-color: #5a6e4a;
  background: #f8f8f4;
}

.choice-opt--selected {
  border-color: #5a6e4a;
  background: rgba(90,110,74,.08);
}

.choice-opt__letter {
  color: #5a6e4a;
}

.choice-opt__text {
  color: #0a0a0a;
}

/* ── Likert buttons ───────────────────────────────────────────── */
.likert__btn {
  border: 1px solid #e0e0d8;
  background: #ffffff;
  color: #555550;
}

.likert__opt:hover .likert__btn,
.likert__opt:focus-within .likert__btn {
  border-color: #5a6e4a;
  color: #5a6e4a;
}

.likert__opt--selected .likert__btn {
  background: #5a6e4a;
  border-color: #5a6e4a;
  color: #ffffff;
}

.likert__label {
  background: #f8f8f4;
  color: #0a0a0a;
}

/* ── Scale legend ─────────────────────────────────────────────── */
.scale-legend {
  background: #f8f8f4;
  border-color: #e0e0d8;
}

/* ── Part intro ───────────────────────────────────────────────── */
.part-intro {
  border-bottom-color: #e0e0d8;
}

/* ── Form submit ──────────────────────────────────────────────── */
.form-submit {
  border-top-color: #e0e0d8;
}

/* ── Cards ────────────────────────────────────────────────────── */
.card {
  background: #ffffff;
  border-color: #e0e0d8;
}

/* ── Buttons ──────────────────────────────────────────────────── */
.btn--primary {
  background: #0a0a0a;
  color: #ffffff;
  border-color: #0a0a0a;
}

.btn--ghost {
  border-color: #e0e0d8;
  color: #0a0a0a;
  background: transparent;
}

.btn--ghost:hover { background: #f8f8f4; }

.btn--current {
  background: #5a6e4a;
  color: #ffffff;
}

.btn--ghost-brass {
  border-color: #5a6e4a;
  color: #5a6e4a;
  background: transparent;
}

/* ── Divider ──────────────────────────────────────────────────── */
.divider { border-color: #e0e0d8; }

/* ── Badges ───────────────────────────────────────────────────── */
.badge {
  background: #f8f8f4;
  border-color: #e0e0d8;
  color: #555550;
}

.badge--free {
  background: rgba(90,110,74,0.1);
  color: #5a6e4a;
  border-color: rgba(90,110,74,0.25);
}

.badge--paid {
  background: #5a6e4a;
  color: #ffffff;
}

.badge--category {
  background: #f8f8f4;
  color: #555550;
  border-color: #e0e0d8;
}

/* ── Intro feature boxes ──────────────────────────────────────── */
.intro__feature {
  background: #f8f8f4;
  border-color: #e0e0d8;
}

.intro__note {
  background: #f8f8f4;
  border-color: #e0e0d8;
}

/* ── Report cover ─────────────────────────────────────────────── */
.report-cover {
  background: #f8f8f4;
  border-bottom: 1px solid #e0e0d8;
}

/* ── Report sections ──────────────────────────────────────────── */
.report-section { border-top-color: #e0e0d8; }

.report-section__title { color: #0a0a0a; }
.report-section__sub   { color: #555550; }

.section-light { background: #f8f8f4; }
.section-light .report-section__title { color: #0a0a0a; }

/* ── Report footer ────────────────────────────────────────────── */
.report-footer {
  background: #f8f8f4;
  border-top-color: #e0e0d8;
}

/* ── Report share banner ──────────────────────────────────────── */
.report-share-banner {
  background: #f8f8f4;
  border-color: #e0e0d8;
}

.report-share-banner__text { color: #0a0a0a; }

/* ── Arch list ────────────────────────────────────────────────── */
.arch-list li { color: #0a0a0a; }

/* ── Bias blocks ──────────────────────────────────────────────── */
.bias-block {
  background: #f8f8f4;
  border-color: #e0e0d8;
}

.bias-group__name { border-bottom-color: #e0e0d8; }

.bias-block__advice {
  border-left-color: #5a6e4a;
  background: rgba(90,110,74,.05);
}

.bias-block__points li::before { color: #5a6e4a; }

/* ── Next steps ───────────────────────────────────────────────── */
.next-step {
  background: #f8f8f4;
  border-color: #e0e0d8;
}

/* ── Overview bars (report) ───────────────────────────────────── */
.overview-bar__track { background: #e0e0d8; }
.overview-bar__center { background: #cccccc; }

/* ── Gauge ────────────────────────────────────────────────────── */
.gauge__track { stroke: #e0e0d8; }

/* ── Score labels ─────────────────────────────────────────────── */
.label-very-high { color: #8c3a2a; }
.label-high      { color: #c87030; }
.label-above-avg { color: #5a6e4a; }
.label-below-avg { color: #3a6e8a; }
.label-low       { color: #3a6e8a; }
.label-very-low  { color: #3a6e8a; }

canvas { display: none !important; }

.choice-opt:has(input[type="radio"]:checked) {
  border-color: #5a6e4a !important;
  background: rgba(90,110,74,.08) !important;
}

.likert__btn:has(input[type="radio"]:checked) {
  border-color: #5a6e4a !important;
  background: rgba(90,110,74,.08) !important;
  color: #0a0a0a !important;
}

/* ── Bubble Scale (white-theme overrides) ──────────────────────── */
/* These rules load after test.css bubble CSS and after the         */
/* .likert__btn white-theme rules above, so they win definitively.  */

.bubble-scale .likert__btn {
  background: transparent !important;
  border: 2px solid #c8c8c0 !important;
  border-radius: 50% !important;
  font-size: 0 !important;
  color: transparent !important;
  padding: 0 !important;
}

.bubble-scale .likert__opt[data-v='5'] .likert__btn { width: 101px !important; height: 101px !important; }
.bubble-scale .likert__opt[data-v='4'] .likert__btn { width: 78px !important; height: 78px !important; }
.bubble-scale .likert__opt[data-v='3'] .likert__btn { width: 50px !important; height: 50px !important; }
.bubble-scale .likert__opt[data-v='2'] .likert__btn { width: 78px !important; height: 78px !important; }
.bubble-scale .likert__opt[data-v='1'] .likert__btn { width: 101px !important; height: 101px !important; }

.bubble-scale .likert__opt[data-v='5']:hover .likert__btn,
.bubble-scale .likert__opt[data-v='4']:hover .likert__btn,
.bubble-scale .likert__opt[data-v='5']:focus-within .likert__btn,
.bubble-scale .likert__opt[data-v='4']:focus-within .likert__btn {
  border-color: #5a6e4a !important;
}

.bubble-scale .likert__opt[data-v='3']:hover .likert__btn,
.bubble-scale .likert__opt[data-v='3']:focus-within .likert__btn {
  border-color: #aaa9a3 !important;
}

.bubble-scale .likert__opt[data-v='2']:hover .likert__btn,
.bubble-scale .likert__opt[data-v='1']:hover .likert__btn,
.bubble-scale .likert__opt[data-v='2']:focus-within .likert__btn,
.bubble-scale .likert__opt[data-v='1']:focus-within .likert__btn {
  border-color: #8c7b5e !important;
}

.bubble-scale .likert__opt--selected[data-v='5'] .likert__btn,
.bubble-scale .likert__opt--selected[data-v='4'] .likert__btn {
  background: #5a6e4a !important;
  border-color: #5a6e4a !important;
}

.bubble-scale .likert__opt--selected[data-v='3'] .likert__btn {
  background: #aaa9a3 !important;
  border-color: #aaa9a3 !important;
}

.bubble-scale .likert__opt--selected[data-v='2'] .likert__btn,
.bubble-scale .likert__opt--selected[data-v='1'] .likert__btn {
  background: #8c7b5e !important;
  border-color: #8c7b5e !important;
}

.bubble-scale .likert__label { display: none !important; }

.bubble-wrap__label {
  font-size: 1.12rem !important;
  font-weight: 600 !important;
  color: #555550 !important;
}

/* ── Bubble Scale Micro-interactions (white-theme) ─────────────── */
.bubble-scale .likert__opt--selected .likert__btn {
  transform: scale(1.08) !important;
}