/* ——— Base / Typography ——— */

* { box-sizing: border-box; }
  html, body { height: 100%; }
  html { scroll-behavior: smooth; }
  body {
  margin: 0;
  background: #ecf0f1;
  font-family: 'Open Sans', Arial, sans-serif;
  color: #2c3e50;
  overflow-x: auto;      /* horizontal movement */
  overflow-y: hidden;    /* vertical scroll happens inside slides */
  }

/* ——— Horizontal track ——— */
/* Width + gradient are injected by JS to match slide count */
ul#slides {
position: absolute;
height: 100%;
left: 0; top: 0;
margin: 0; padding: 0;
list-style: none;
}

/* Each slide spans the viewport; width is injected by JS */
ul#slides > li {
display: inline-block;
float: left;
height: 100vh;
padding: 1.2em 1.2em 128px; /* bottom space so buttons clear the fixed footer */
overflow-y: auto;
transform-style: preserve-3d;

/* Per-slide color variables (set via JS) */
--fg: #ffffff;                 /* primary text on this slide */
--muted: rgba(255,255,255,.85);/* secondary text on this slide */
}

/* ——— Question block (NO colored/shadow panel) ——— */
fieldset { border: 0; margin: 0; padding: 0; }
.qa-card {
background: transparent;   /* no fill */
border: 0;                 /* no stroke */
padding: 0;                /* slide controls spacing */
border-radius: 0;          /* no rounded box */
box-shadow: none;          /* no shadow */
backdrop-filter: none;     /* no blur/saturation */
margin: 0 0 12px;
}

.big-question {
color: var(--fg);
font-size: clamp(24px, 3.2vw, 40px);
font-weight: 700;          /* bold question */
display: block;
width: 94%;
margin: .2em 0 1.6em;
line-height: 1.3;
}

.options { display: grid; gap: 10px; }

/* Fully clickable options (label wraps the input) */
.opt {
display: grid;
grid-template-columns: 22px 1fr;
align-items: center;
gap: 12px;
padding: 10px 2px;         /* minimal padding, no colored row */
border-radius: 8px;
background: transparent;
cursor: pointer;
user-select: none;
outline: none;
}
.opt:hover { background: transparent; }
.opt:focus-within { outline: 2px solid var(--muted); outline-offset: 3px; }

/* Hide native control; the label carries the click target */
.opt > input {
position: absolute;
opacity: 0;
pointer-events: none;
}

/* Custom bullet */
.opt .bullet {
width: 18px; height: 18px;
border-radius: 50%;
box-shadow: inset 0 0 0 2px var(--muted);
transition: box-shadow .18s ease;
}

/* Option text */
.opt .text {
color: var(--muted);
font-size: 26px;
line-height: 1.4;
letter-spacing: .2px;
}

/* Checked state */
.opt > input:checked + .bullet { box-shadow: inset 0 0 0 10px var(--fg); }
.opt > input:checked ~ .text { color: var(--fg); font-weight: 600; }

/* Navigation buttons */
.nav { margin-top: .8em; }
.button, .submit {
display: inline-block;
margin-top: 1em;
margin-right: .6em;
text-decoration: none;
cursor: pointer;
color: #0b1220;
background: #ecf0f1;
border: none;
border-radius: 8px;
padding: .65em 1.25em;
transition: .2s;
font-weight: 600;
}
.button:hover, .submit:hover { background: #dae2e4; transform: translateY(-1px); }
.submit { font-size: 1.05rem; }

/* ——— Footer (orange) + progress bar (red) ——— */
.form-header {
background: #ff7a00; /* solid orange */
position: fixed;
padding: .7em .9em;
color: #ffffff;
left: 0; right: 0; bottom: 0;
z-index: 10;
}
.form-header h2 { font-weight: 700; margin: 0 0 4px 0; }
.form-header blockquote { font-size: .9em; opacity: .9; margin: 0; }

.form-header-overlay {
width: 0px;
height: 100%;
position: absolute; top: 0; left: 0;
transition: width .45s ease;
background: rgba(255,0,0,.35); /* red progress */
z-index: 20;
}

/* ——— Results slide (colorful, high-contrast) ——— */
#results {
/* give the final slide a subtle colorful background under the white cards */
--results-bg: linear-gradient(135deg, #0ea5e91a 0%, #f973161a 50%, #16a34a1a 100%);
background: var(--results-bg);
}

.results-wrap {
max-width: 1120px;
margin: 0 auto;
background: #ffffff;       /* white surface for maximum chart contrast */
color: #0b1220;
border-radius: 16px;
padding: 22px 24px;
box-shadow: 0 18px 40px rgba(0,0,0,.22);
}

.results-title {
font-size: clamp(22px, 3vw, 36px);
margin: 0 0 6px;
font-weight: 700;
}
.results-sub { margin: 0 0 16px; color: #475569; font-size: clamp(22px, 3vw, 36px);}

/* Two colorful chart cards */
.results-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 900px) {
.results-grid { grid-template-columns: 1fr 1fr; }
}

/* Colorful backgrounds for the two chart cards with readable foreground */
.results-grid .card:nth-child(1) {
background: linear-gradient(135deg, #22c55e, #16a34a);
color: #ffffff;
border: none;
}
.results-grid .card:nth-child(2) {
background: linear-gradient(135deg, #60a5fa, #3b82f6);
color: #ffffff;
border: none;
}
.results-grid .card h4 { color: #ffffff; }

.card {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 14px;
padding: 14px;
}

/* Answer key */
.answer-key .row {
border-bottom: 1px dashed #e2e8f0;
padding: .45em 0;

}
.answer-key .row:last-child { border-bottom: none; }

/* Remove any legacy borders that could creep in */
tr, td, th { border: none; }


/* === RESULTS PAGE: full-bleed, colorful, no containers/shadows === */
#results {
  /* vibrant full background (tweak stops if you like) */
  background: radial-gradient(1200px 700px at 15% 20%, rgba(14,165,233,.25), transparent 60%),
              radial-gradient(1200px 700px at 85% 10%, rgba(249,115,22,.25), transparent 60%),
              radial-gradient(1200px 700px at 50% 85%, rgba(22,163,74,.25), transparent 60%),
              linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 50%, #f97316 100%);
  color: #ffffff; /* white foreground */
}

/* kill the white container and shadows; make it full width */
#results .results-wrap {
  max-width: none !important;
  margin: 0 !important;
  padding: 28px 28px 36px !important;
  background: transparent !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* no “cards/boxes” anywhere on results */
#results .card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* make headings/text readable on the colorful bg */
#results .results-title,
#results .results-grid .card h4 { color: #ffffff !important; }

#results .results-sub,
#results #scoreline,
#results #subline { color: rgba(255,255,255,.9) !important; }

/* answer key lines subtle on dark/bright bg */
#results .answer-key .row {
  border-bottom: 1px dashed rgba(255,255,255,.35) !important;
  color: rgba(255,255,255,.92) !important;
}

/* a bit more breathing room in the grid on the final page */
#results .results-grid { gap: 22px !important; }


/* --- Welcome slide --- */
#welcome {
  /* subtle colorful background */
  background:
    radial-gradient(1200px 700px at 15% 25%, rgba(14,165,233,.22), transparent 60%),
    radial-gradient(1200px 700px at 85% 15%, rgba(249,115,22,.22), transparent 60%),
    radial-gradient(1200px 700px at 50% 85%, rgba(22,163,74,.22), transparent 60%),
    linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 50%, #f97316 100%);
  color: #ffffff;
}

.welcome {
  max-width: 900px;
  margin: 8vh auto 0;
  padding: 24px;
}

.welcome-title {
  font-weight: 700;
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1.1;
  margin: 0 0 10px;
  color: #fff;
}

.welcome-sub {
  font-size: clamp(16px, 2.4vw, 20px);
  color: rgba(255,255,255,.92);
  margin: 0 0 14px;
}

.welcome-bullets {
  margin: 0 0 18px 1.2em;
  padding: 0;
  color: rgba(255,255,255,.92);
  font-size: clamp(15px, 2.2vw, 18px);
}
.welcome-bullets li { margin: 6px 0; }

/* Begin button */
a.button.begin {
  background: #fff;
  color: #0b1220;
  font-weight: 700;
  padding: .8em 1.4em;
  border-radius: 10px;
  display: inline-block;
}
a.button.begin:hover { transform: translateY(-1px); }