/* ===== IntentTale Quiz — MD3 Expressive (structure unchanged) ===== */
:root{
  /* Brand seeds */
  --purple:#4a154b; --blue:#64c3eb;
  --ink:#0e0f12; --ring:#e8ebf1;

  /* MD3 roles (light) */
  --md-surface:#fafbfc;
  --md-surface-bright:#ffffff;
  --md-surface-container:#edf0f5;
  --md-on-surface:#111316;
  --md-on-surface-variant:#3e424a;
  --md-outline:#c3c8d1;
  --md-outline-variant:#dbe0e8;

  --md-primary: var(--purple);
  --md-primary-alt: var(--blue);
  --md-on-primary:#ffffff;
  --md-primary-container:#EADDFF;
  --md-on-primary-container:#21005D;

  /* MD3 success/error */
  --md-success:#2e7d32;
  --md-success-container:#dff0d8;
  --md-error:#b3261e;
  --md-error-container:#fbeaea;

  /* Elevation */
  --elev-0:none;
  --elev-1:0 2px 4px rgba(0,0,0,.10), 0 1px 1px rgba(0,0,0,.04);
  --elev-2:0 8px 18px rgba(0,0,0,.12), 0 3px 8px rgba(0,0,0,.06);

  /* State layers */
  --state-hover:.10;
  --state-press:.14;

  /* Radii */
  --radius:18px;
  --chip-radius:999px;
}

/* Dark scheme */
@media (prefers-color-scheme: dark){
  :root{
    --md-surface:#101214; --md-surface-bright:#16181c; --md-surface-container:#181b1f;
    --md-on-surface:#e7eaee; --md-on-surface-variant:#c7ccd6;
    --md-outline:#454a52; --md-outline-variant:#2e3238;

    --md-primary: color-mix(in oklab, var(--purple) 70%, var(--blue) 30%);
    --md-on-primary:#ffffff;
    --md-primary-container:#3a2a4a; --md-on-primary-container:#f0eaf7;

    --md-success:#7bd487; --md-success-container:#23402a;
    --md-error:#ffb4ab; --md-error-container:#3b0907;

    --elev-1:0 2px 4px rgba(0,0,0,.55);
    --elev-2:0 12px 28px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35);
  }
}

/* ===== Wrapper card ===== */
.quiz-wrapper{
  display:flex; flex-wrap:wrap; max-width:900px; margin:40px auto;
  background:var(--md-surface-bright);
  border:1px solid var(--md-outline-variant);
  border-radius:22px;
  box-shadow:var(--elev-2);
  overflow:hidden;
  font-family:"Fields Light",system-ui,-apple-system,sans-serif;
  color:var(--md-on-surface);
}

/* ===== Columns ===== */
.quiz-left,.quiz-right{ box-sizing:border-box; padding:28px 20px }
.quiz-left{ width:40%; background:var(--md-surface-bright); border-right:1px solid var(--md-outline-variant) }
.quiz-right{ width:60%; padding:30px; background:var(--md-surface-bright) }

.quiz-left h3{ font-size:1.3rem; margin:0 0 1rem; color:var(--md-on-surface) }
.quiz-left p,.quiz-feedback,.quiz-step-btn,.quiz-option,.quiz-result{ font-family:"Fields Light",system-ui,-apple-system,sans-serif }

/* ===== Info banner (tonal) ===== */
.quiz-feedback{
  display:none; margin-top:1rem; font-size:.95rem;
  color:var(--md-on-primary-container);
  background: color-mix(in oklab, var(--md-primary-container) 72%, #fff);
  border-left:4px solid var(--md-primary);
  padding:12px 12px 12px 14px; border-radius:12px;
}

/* ===== Step bullets (chips) ===== */
.quiz-nav{ display:flex; gap:8px; justify-content:center; margin-top:1.5rem; flex-wrap:wrap }

.quiz-step-btn{
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  font:700 14px/1 "Fields Light",system-ui,-apple-system,sans-serif;
  color:var(--md-on-surface);
  background:var(--md-surface-bright);
  border:1.5px solid transparent;
  border-radius:var(--chip-radius);
  box-shadow:var(--elev-1);
  cursor:pointer;
  transition: transform .18s cubic-bezier(.2,0,.2,1),
              box-shadow .18s cubic-bezier(.2,0,.2,1),
              border-color .18s, background-color .18s, color .18s, filter .18s;
}
.quiz-step-btn:hover{
  transform:translateY(-1px);
  box-shadow:var(--elev-2);
  border-color:var(--md-primary);
  background: color-mix(in oklab, var(--md-primary-container) calc(var(--state-hover)*100%), transparent);
}
.quiz-step-btn:focus-visible{
  outline:3px solid var(--md-primary-container);
  outline-offset:2px;
}

.quiz-step-btn.active{
  color:var(--md-on-primary) !important;
  background:linear-gradient(100deg, var(--md-primary), color-mix(in oklab, var(--md-primary-alt) 75%, var(--md-primary) 25%));
  background-size:200% 200%;
  border:1.5px solid color-mix(in oklab, var(--md-primary) 30%, transparent);
  box-shadow:0 12px 26px color-mix(in oklab, var(--md-primary) 28%, transparent);
  animation:quiz-grad-shift 8s ease-in-out infinite;
}
.quiz-step-btn.disabled{ pointer-events:none; opacity:.45 }

/* ===== Q/A visibility ===== */
.quiz-question{ display:none }
.quiz-question.active{ display:block }

/* ===== Options (tonal cards) ===== */
.quiz-option{
  border:1.5px solid var(--md-outline-variant);
  border-radius:var(--radius);
  background:var(--md-surface-bright);
  padding:16px; margin-bottom:18px;
  cursor:pointer; font-size:1.05rem; color:var(--md-on-surface);
  transition: background .18s cubic-bezier(.2,0,.2,1),
              border-color .18s cubic-bezier(.2,0,.2,1),
              box-shadow .18s cubic-bezier(.2,0,.2,1),
              transform .18s cubic-bezier(.2,0,.2,1);
  box-shadow:var(--elev-0);
}
.quiz-option:hover{
  border-color:var(--md-primary);
  background: color-mix(in oklab, var(--md-primary-container) calc(var(--state-hover)*100%), transparent);
  box-shadow:var(--elev-1);
  transform:translateY(-1px);
}
.quiz-option:focus-visible{
  outline:3px solid var(--md-primary-container);
  outline-offset:2px;
}

/* Feedback states */
.quiz-option.correct{
  border:2px solid var(--md-success);
  background: var(--md-success-container);
  color: color-mix(in oklab, var(--md-success) 40%, var(--md-on-surface));
}
.quiz-option.incorrect{
  border:2px solid var(--md-error);
  background: var(--md-error-container);
  color: color-mix(in oklab, var(--md-error) 36%, var(--md-on-surface));
}

/* ===== Next button (expressive primary) ===== */
.next-btn{
  display:none; margin-top:10px;
  padding:10px 16px; border:none; border-radius:var(--chip-radius);
  font-size:1rem; font-weight:800; letter-spacing:.02em;
  color:var(--md-on-primary);
  background:linear-gradient(100deg, var(--md-primary), color-mix(in oklab, var(--md-primary-alt) 75%, var(--md-primary) 25%));
  background-size:200% 200%;
  box-shadow:0 12px 26px color-mix(in oklab, var(--md-primary) 28%, transparent);
  cursor:pointer;
  transition: transform .18s cubic-bezier(.2,0,.2,1),
              box-shadow .18s cubic-bezier(.2,0,.2,1),
              filter .18s cubic-bezier(.2,0,.2,1);
}
.next-btn:hover{
  transform:translateY(-1px);
  box-shadow:var(--elev-2);
  filter:saturate(112%);
}
.next-btn:active{ transform:translateY(0) scale(.99) }
.next-btn:focus-visible{
  outline:3px solid var(--md-primary-container);
  outline-offset:2px;
}

/* ===== Results ===== */
.quiz-result{
  display:none; font-size:1rem; line-height:1.6;
  border-top:1px solid var(--md-outline-variant); padding-top:20px;
  color:var(--md-on-surface);
}
.quiz-result li{
  margin-bottom:14px;
  background: var(--md-surface-container);
  padding:12px;
  border-left:4px solid var(--md-primary-alt);
  border-radius:12px;
  box-shadow:var(--elev-1);
}

/* ===== Responsive ===== */
@media (max-width:768px){
  .quiz-wrapper{ flex-direction:column }
  .quiz-left,.quiz-right{ width:100% }
}

/* ===== Animations & motion ===== */
@keyframes quiz-grad-shift{
  0%{ background-position:0% 50% }
  50%{ background-position:100% 50% }
  100%{ background-position:0% 50% }
}
@media (prefers-reduced-motion:reduce){
  .quiz-step-btn,.quiz-option,.next-btn{ transition:none }
  .quiz-step-btn.active,.next-btn{ animation:none }
}

/* ===== High-contrast fallback ===== */
@media (forced-colors:active){
  .quiz-wrapper, .quiz-option, .next-btn, .quiz-step-btn{ border:1px solid CanvasText; box-shadow:none }
  .next-btn, .quiz-step-btn.active{ background:CanvasText; color:Canvas }
}