/* ==========================================================================
   Guardian Recovery Screening — quiz engine UI
   ========================================================================== */

.quiz-page { background: var(--surface-alt); min-height: 100vh; }

/* ---------- Quiz hero (compact, service-line tinted) ---------- */

.quiz-hero {
  position: relative; overflow: hidden;
  background: var(--accent-50);
  border-bottom: 1px solid var(--accent-200);
  padding-block: var(--sp-6) var(--sp-6);
}
.quiz-hero::after {
  content: ''; position: absolute; inset: 0;
  background-image: url('../img/pattern.svg');
  background-size: 164px 164px; opacity: 0.045; pointer-events: none;
}
.quiz-hero > * { position: relative; z-index: 1; }
.quiz-hero h1 { margin-bottom: var(--sp-3); }
.quiz-hero .lead { max-width: 54ch; }
.quiz-hero__back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.875rem; font-weight: 500; color: var(--accent-text);
  text-decoration: none; margin-bottom: var(--sp-4);
}
.quiz-hero__back:hover { text-decoration: underline; }
.quiz-hero__back svg { width: 14px; height: 14px; }

/* ---------- Progress ---------- */

.progress-bar {
  position: sticky; top: 68px; z-index: 90;
  background: rgba(252, 253, 255, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-soft);
  padding-block: var(--sp-3);
}
.progress-bar[hidden] { display: none; }
.progress-bar__inner {
  display: flex; align-items: center; gap: var(--sp-4);
}
.progress-track {
  flex: 1; height: 7px; border-radius: var(--r-pill);
  background: var(--gr-sand); overflow: hidden;
}
.progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent-fill), var(--accent-400));
  border-radius: var(--r-pill);
  transition: width 0.32s var(--ease);
}
.progress-label {
  flex: none; font-size: var(--fs-caption); font-weight: 600;
  color: var(--accent-text); font-variant-numeric: tabular-nums;
  min-width: 8.5rem; text-align: right;
}

/* ---------- Panels ---------- */

.quiz-main { padding-block: var(--sp-6) var(--sp-8); }

.panel {
  background: #fff; border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  padding: var(--sp-6);
}
@media (max-width: 34rem) { .panel { padding: var(--sp-5) var(--sp-4); border-radius: var(--r-md); } }
.panel + .panel { margin-top: var(--sp-5); }

.panel__intro-meta {
  display: grid; gap: var(--sp-3); margin: var(--sp-5) 0;
  grid-template-columns: repeat(2, 1fr);
}
.meta-chip {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-alt); border-radius: var(--r-md);
}
@media (max-width: 26rem) { .panel__intro-meta { grid-template-columns: 1fr; } }
.meta-chip svg { width: 18px; height: 18px; flex: none; color: var(--accent-fill); margin-top: 2px; }
.meta-chip__label { font-size: var(--fs-caption); color: var(--text-mute); display: block; }
.meta-chip__value { font-size: 0.9375rem; font-weight: 600; color: var(--gr-midnight); line-height: 1.35; }

/* ---------- Step / questions ---------- */

.step { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.step__legend {
  display: block; padding: 0; margin-bottom: var(--sp-5);
  font-family: var(--font-head); font-size: var(--fs-h3);
  color: var(--gr-midnight); line-height: 1.3;
}
.step__hint {
  font-family: var(--font-body); font-size: 0.9375rem; font-weight: 400;
  color: var(--text-soft); margin-top: var(--sp-2); display: block; line-height: 1.5;
}
.step__stem {
  font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600;
  color: var(--accent-text); background: var(--accent-50);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  margin-bottom: var(--sp-5); line-height: 1.5;
}

.q-list { display: grid; gap: var(--sp-5); }

.q-item { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.q-item + .q-item { padding-top: var(--sp-5); border-top: 1px solid var(--line-soft); }
.q-item__legend {
  display: block; padding: 0; margin-bottom: var(--sp-3);
  font-size: 1.0625rem; font-weight: 500; color: var(--text); line-height: 1.45;
}
.q-item__num {
  font-size: var(--fs-caption); font-weight: 600; color: var(--text-mute);
  font-variant-numeric: tabular-nums; margin-right: var(--sp-2);
}
.q-item--flag .q-item__legend { color: var(--gr-midnight); }

/* Stacked options (default) */
.opts { display: grid; gap: var(--sp-2); }

.opt {
  position: relative; display: flex; align-items: center; gap: var(--sp-3);
  min-height: 52px; padding: var(--sp-3) var(--sp-4);
  background: #fff; border: 1.5px solid var(--line);
  border-radius: var(--r-md); cursor: pointer;
  font-size: 1rem; line-height: 1.4; color: var(--text);
  transition: border-color 0.14s var(--ease), background-color 0.14s var(--ease), box-shadow 0.14s var(--ease);
}
.opt:hover { border-color: var(--accent-400); background: var(--accent-50); }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt__mark {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--gr-cadet); background: #fff;
  display: grid; place-items: center;
  transition: border-color 0.14s var(--ease), background-color 0.14s var(--ease);
}
.opt__mark::after {
  content: ''; width: 10px; height: 10px; border-radius: 50%;
  background: #fff; transform: scale(0);
  transition: transform 0.14s var(--ease);
}
.opt--check .opt__mark { border-radius: var(--r-sm); }
.opt--check .opt__mark::after { border-radius: 2px; }

.opt:has(input:checked) {
  border-color: var(--accent-fill);
  background: var(--accent-50);
  box-shadow: inset 0 0 0 1px var(--accent-fill);
}
.opt:has(input:checked) .opt__mark { border-color: var(--accent-fill); background: var(--accent-fill); }
.opt:has(input:checked) .opt__mark::after { transform: scale(1); }
.opt:has(input:focus-visible) { outline: 3px solid var(--gr-gambodge); outline-offset: 2px; }
.opt__text { flex: 1; }
/* Segmented (Likert) layout for short 3–4 point scales */
@media (min-width: 46rem) {
  .opts--segmented { grid-template-columns: repeat(var(--n, 3), 1fr); gap: var(--sp-2); }
  .opts--segmented .opt {
    flex-direction: column; justify-content: center; text-align: center;
    gap: var(--sp-2); min-height: 76px; padding: var(--sp-3);
    font-size: 0.9375rem;
  }
}

/* ---------- Nav ---------- */

.quiz-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin-top: var(--sp-6);
  padding-top: var(--sp-5); border-top: 1px solid var(--line-soft);
}
.quiz-nav__spacer { flex: 1; }
@media (max-width: 30rem) {
  .quiz-nav { flex-direction: column-reverse; align-items: stretch; }
  .quiz-nav .btn { width: 100%; }
}

.step-error {
  display: none; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  background: var(--status-high-bg); color: var(--status-high);
  border-radius: var(--r-md); font-size: 0.9375rem; font-weight: 500;
}
.step-error[data-show='1'] { display: flex; }

/* ---------- Results ---------- */

.result-head { display: flex; gap: var(--sp-5); align-items: center; flex-wrap: wrap; }
.result-dial { flex: none; position: relative; width: 128px; height: 128px; }
.result-dial svg { transform: rotate(-90deg); }
.result-dial__track { stroke: var(--gr-sand); }
.result-dial__val { transition: stroke-dashoffset 0.8s var(--ease); }
.result-dial__center {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
}
.result-dial__num {
  font-family: var(--font-head); font-size: 2.25rem; line-height: 1;
  color: var(--gr-midnight); font-variant-numeric: tabular-nums;
}
.result-dial__den { font-size: var(--fs-caption); color: var(--text-mute); }
.result-head__text { flex: 1; min-width: 16rem; }
.result-head__text h2 { font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem); }
.result-band {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 6px var(--sp-3);
  border-radius: var(--r-pill); margin-bottom: var(--sp-3);
}
.result-band[data-level='low']  { background: var(--status-low-bg);  color: var(--status-low); }
.result-band[data-level='mild'] { background: var(--status-mild-bg); color: var(--status-mild); }
.result-band[data-level='mod']  { background: var(--status-mod-bg);  color: var(--status-mod); }
.result-band[data-level='high'] { background: var(--status-high-bg); color: var(--status-high); }
.result-head__text h2 { margin-bottom: var(--sp-2); }

.panel > h3 { margin-top: var(--sp-6); }
.panel > .arch + h3, .panel > .eyebrow + h3 { margin-top: 0; }
.subscales { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
.subscale {
  display: grid; gap: var(--sp-2);
  padding: var(--sp-4); background: var(--surface-alt); border-radius: var(--r-md);
}
.subscale__top {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3);
}
.subscale__name { font-weight: 600; font-size: 0.9375rem; color: var(--gr-midnight); }
.subscale__score { font-size: 0.9375rem; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.subscale__track { height: 8px; border-radius: var(--r-pill); background: var(--gr-sand); position: relative; overflow: hidden; }
.subscale__fill { height: 100%; border-radius: var(--r-pill); background: var(--accent-fill); }
.subscale__fill[data-over='1'] { background: var(--status-mod); }
.subscale__note { font-size: var(--fs-caption); color: var(--text-mute); }

.next-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.next-steps li { display: flex; gap: var(--sp-3); font-size: 0.9375rem; line-height: 1.5; }
.next-steps li::before {
  content: ''; flex: none; width: 22px; height: 22px; margin-top: 1px;
  border-radius: 50%; background: var(--accent-50);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004860' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 13px; background-position: center; background-repeat: no-repeat;
}

/* CTA block */
.cta-panel {
  position: relative; overflow: hidden;
  background: linear-gradient(140deg, var(--gr-midnight) 0%, var(--gr-prussian) 100%);
  color: #fff; border-radius: var(--r-lg); padding: var(--sp-6);
}
.cta-panel::after {
  content: ''; position: absolute; inset: 0;
  background-image: url('../img/pattern-light.svg');
  background-size: 170px 170px; opacity: 0.10; pointer-events: none;
}
.cta-panel > * { position: relative; z-index: 1; }
.cta-panel h3 { color: #fff; }
.cta-panel p { color: rgba(255, 255, 255, 0.82); font-size: 0.9375rem; }
.cta-panel .btn--ghost { --btn-fg: #fff; --btn-bd: rgba(255,255,255,0.4); }
.cta-panel .btn--ghost:hover { --btn-bd: #fff; }
.cta-phone {
  display: inline-flex; align-items: baseline; gap: var(--sp-2);
  font-family: var(--font-head); font-size: 1.75rem; color: #fff; text-decoration: none;
}
.cta-phone:hover { color: var(--gr-gambodge); }

/* ---------- Lead form ---------- */

.lead-form { display: grid; gap: var(--sp-4); }
.field-grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr 1fr; }
@media (max-width: 34rem) { .field-grid { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; }
.field label { font-size: 0.875rem; font-weight: 600; color: var(--gr-midnight); }
.field .req { color: var(--status-high); }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--text);
  padding: var(--sp-3) var(--sp-4); min-height: 48px;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-md);
  transition: border-color 0.14s var(--ease);
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--accent-400); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent-fill); outline: 3px solid var(--gr-gambodge); outline-offset: 1px;
}
.field__help { font-size: var(--fs-caption); color: var(--text-mute); }
.field__err { font-size: var(--fs-caption); color: var(--status-high); font-weight: 500; display: none; }
.field[data-invalid='1'] input, .field[data-invalid='1'] select { border-color: var(--status-high); }
.field[data-invalid='1'] .field__err { display: block; }

.consent {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  font-size: var(--fs-caption); color: var(--text-soft); line-height: 1.5;
}
.consent input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--accent-fill); }

.form-status { font-size: 0.9375rem; font-weight: 500; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); }
.form-status[data-kind='ok']  { background: var(--status-low-bg); color: var(--status-low); }
.form-status[data-kind='err'] { background: var(--status-high-bg); color: var(--status-high); }

/* ---------- Fade between steps ---------- */

.fade-in { animation: fadeIn 0.28s var(--ease) both; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Citation ---------- */

.cite {
  font-size: var(--fs-caption); color: var(--text-mute); line-height: 1.55;
}
.cite strong { color: var(--text-soft); }