/*
 * main.css — SDP MAUD component styles (T-011)
 * Mobile-first: base styles target 375px, then 768 / 1024 / 1440 breakpoints.
 * References tokens.css custom properties only — no hardcoded brand colors.
 */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px; /* never smaller — prevents iOS auto-zoom-on-focus */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sdp-font-family);
  color: var(--sdp-text-primary);
  background: var(--sdp-background);
  line-height: 1.6;
}

/* T-073. The intake pages opt into the canvas wash; marketing and the
 * staff dashboards keep flat white. Scoped to a class rather than applied
 * to `body` globally so /admin does not inherit a patient-funnel
 * treatment. min-height + fixed attachment stop the gradient banding or
 * repeating on a short page. */
body.intake-canvas {
  background: var(--sdp-canvas-gradient);
  background-attachment: fixed;
  min-height: 100vh;
}

h1, h2, h3, p, ul, ol, fieldset { margin: 0 0 var(--sdp-space-4) 0; padding: 0; }

img { max-width: 100%; display: block; }

a { color: var(--sdp-primary); }

/* skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--sdp-primary);
  color: var(--sdp-text-on-primary);
  padding: var(--sdp-space-2) var(--sdp-space-4);
  z-index: 1000;
  border-radius: 0 0 var(--sdp-radius-sm) 0;
}
.skip-link:focus {
  left: 0;
}

/* focus visibility — 2px outline, meets 3:1+ contrast against background */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--sdp-focus-ring-color);
  outline-offset: 2px;
}

.container {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--sdp-space-4);
}
.container--wide { max-width: 1200px; }
.container--reading { max-width: 720px; }

/* header / footer
 *
 * T-075 — the funnel header is the /get-started header, declaration for
 * declaration: brand lockup left, bordered Back pill right, white bar with
 * a 0.5px hairline. Same class names as templates/pages/get-started.php so
 * drift between the two funnels shows up as a diff. */
.custom-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: #fff;
  border-bottom: 0.5px solid rgba(27, 58, 107, .1);
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
/* The lockup carries its own 32px mark, 10px gap and 16px type, so the bar
 * only decides the height it is drawn at — 32px, the reference's row. */
.logo-lockup {
  display: block;
  height: 32px;
  width: auto;
}
.nav-back {
  padding: 8px 16px;
  border-radius: 8px;
  background: transparent;
  color: var(--sdp-navy);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  border: 0.5px solid rgba(27, 58, 107, .25);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  /* The reference page resets line-height globally; this stylesheet does
   * not, and the inherited 1.55 made the bar 7px taller than the header it
   * is copied from. Pinned so the pill is the reference's 33px row. */
  line-height: 1.2;
}
.nav-back:hover { background: var(--sdp-navy-light); }

.site-footer {
  background: var(--sdp-secondary-tint);
  color: var(--sdp-text-secondary);
  padding: var(--sdp-space-8) var(--sdp-space-4);
  font-size: var(--sdp-font-size-sm);
}
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--sdp-space-4); margin-bottom: var(--sdp-space-4); }
.site-footer__links a { color: var(--sdp-text-secondary); }

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--sdp-space-4);
  font-family: inherit;
  font-size: var(--sdp-font-size-base);
  font-weight: 600;
  border-radius: var(--sdp-radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--sdp-duration-fast) var(--sdp-ease-standard),
              border-color var(--sdp-duration-fast) var(--sdp-ease-standard);
}
.btn--block { width: 100%; }
.btn--lg { min-height: 52px; font-size: var(--sdp-font-size-lg); }

.btn--primary {
  background: var(--sdp-primary);
  color: var(--sdp-text-on-primary);
  border-color: var(--sdp-primary);
}
.btn--primary:hover { background: var(--sdp-primary-hover); border-color: var(--sdp-primary-hover); }
.btn--primary:disabled,
.btn--primary[aria-disabled="true"] {
  background: #9CB4E8;
  border-color: #9CB4E8;
  color: #FFFFFF;
  cursor: not-allowed;
}

.btn--secondary {
  background: transparent;
  color: var(--sdp-secondary);
  border-color: var(--sdp-secondary);
}
.btn--secondary:hover { background: var(--sdp-secondary-tint); }

.btn[aria-busy="true"] { opacity: 0.85; cursor: progress; }

/* cards */
.card {
  background: var(--sdp-surface);
  border: 1px solid var(--sdp-border);
  border-radius: var(--sdp-radius-md);
  box-shadow: var(--sdp-shadow-sm);
  padding: var(--sdp-space-6);
}

/* form fields */
.form-field { margin-bottom: var(--sdp-space-6); }
.form-label {
  display: block;
  font-weight: 600;
  font-size: var(--sdp-font-size-sm);
  margin-bottom: var(--sdp-space-2);
  color: var(--sdp-text-primary);
}
.form-hint {
  font-size: var(--sdp-font-size-xs);
  color: var(--sdp-text-muted);
  margin-top: var(--sdp-space-1);
}
.form-error {
  font-size: var(--sdp-font-size-sm);
  color: var(--sdp-error);
  margin-top: var(--sdp-space-1);
}

.form-input,
.form-select {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: var(--sdp-space-2) var(--sdp-space-3);
  font-family: inherit;
  font-size: var(--sdp-font-size-base); /* never smaller — prevents iOS zoom */
  color: var(--sdp-text-primary);
  background: var(--sdp-surface);
  border: 1px solid var(--sdp-border);
  border-radius: var(--sdp-radius-sm);
}
.form-input:hover, .form-select:hover { border-color: var(--sdp-border-strong); }
.form-input:focus, .form-select:focus {
  border-color: var(--sdp-primary);
  outline: 2px solid var(--sdp-focus-ring-color);
  outline-offset: 1px;
}
.form-input[aria-invalid="true"], .form-select[aria-invalid="true"] {
  border-color: var(--sdp-error);
  border-width: 1.5px;
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--sdp-space-3) center;
  padding-right: var(--sdp-space-8);
}

/* radio / checkbox groups */
.form-radio-group,
.form-checkbox-group {
  border: none;
  padding: 0;
  margin: 0 0 var(--sdp-space-6) 0;
}
.form-radio-group legend,
.form-checkbox-group legend {
  font-weight: 600;
  font-size: var(--sdp-font-size-lg);
  padding: 0;
  margin-bottom: var(--sdp-space-3);
  color: var(--sdp-text-primary);
}

/* T-073 — the intake column.
 *
 * Centred question, centred answers, narrower measure. Scoped to
 * `.intake-canvas` so nothing outside the patient funnel is re-centred:
 * the consult drawer and admin tables are data, and centring data is
 * hostile to scanning it.
 *
 * The measure is deliberately tighter than .container's 640px. A single
 * centred question wants a short line; long centred prose does not, which
 * is why the intro paragraph and the material terms keep their own
 * alignment below. */
.intake-canvas .form-radio-group legend {
  text-align: center;
  display: block;
  width: 100%;
  margin-bottom: var(--sdp-space-4);
}
.intake-canvas main .container {
  max-width: 560px;
}
.intake-canvas main h1,
.intake-canvas main h2 {
  text-align: center;
}
/* At a 560px measure the default h1 size orphans the last word of
 * "Let's see if this treatment is a good fit" onto its own line. Two
 * fixes, both cheap: come down one step on the scale, and let the browser
 * even out the lines. text-wrap: balance is a progressive enhancement —
 * where it is unsupported the heading simply wraps as before, so nothing
 * depends on it. */
.intake-canvas main h1 {
  font-size: var(--sdp-font-size-2xl);
  line-height: 1.25;
}
.intake-canvas main h1,
.intake-canvas main h2,
.intake-canvas .form-radio-group legend {
  text-wrap: balance;
}
/* The lede directly under the h1 is part of the heading block, so it is
 * centred with it. Hints attached to a field are not — those stay left,
 * next to the thing they describe. */
.intake-canvas main h1 + .form-hint {
  text-align: center;
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
}
/* Centred headings, but NOT centred body copy. A centred paragraph forces
 * the eye to hunt for each line start; it is fine for one short question
 * and bad for three lines of billing terms. */
.intake-canvas .form-hint,
.intake-canvas .checkbox-option,
.intake-canvas .alert,
.intake-canvas details {
  text-align: left;
}

/* Progress row under the header (T-075), matching /get-started: white
 * band, 580px inner, `Step n of N` left, percentage right, 5px rounded
 * teal rail. Width is set inline from the server, so a patient with JS off
 * still sees real progress rather than a bar stuck at zero. */
.progress-wrap {
  background: #fff;
  border-bottom: 0.5px solid rgba(27, 58, 107, .08);
  padding: 1rem 2rem;
}
.progress-inner {
  max-width: 580px;
  margin: 0 auto;
}
.progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .6rem;
}
.progress-label {
  font-size: 13px;
  color: var(--sdp-text-secondary);
}
.progress-step {
  font-size: 13px;
  font-weight: 500;
  color: var(--sdp-navy);
}
.progress-bar {
  height: 5px;
  background: rgba(27, 58, 107, .1);
  border-radius: 10px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--sdp-teal);
  border-radius: 10px;
  transition: width .4s ease;
}

/* Disabled primary action — the greyed Next in the reference.
 * Both :disabled and [aria-disabled] so it looks the same whether the
 * button is truly disabled or held open for screen-reader announcement. */
.btn:disabled,
.btn[disabled],
.btn[aria-disabled="true"] {
  background: var(--sdp-disabled-surface);
  border-color: var(--sdp-disabled-surface);
  color: var(--sdp-disabled-text);
  box-shadow: none;
  cursor: not-allowed;
}
/* T-073 — answer cards.
 *
 * A single-choice answer is now a raised card whose whole surface is the
 * hit target, and the radio dot is gone. The reference does this and it
 * reads much lighter on a ten-question form.
 *
 * The dot going away is a real accessibility risk, so it is handled
 * rather than ignored:
 *   - the input is CLIPPED, not `display: none` and not `visibility:
 *     hidden`. Either of those removes it from the accessibility tree and
 *     from the tab order, which would make the form unusable by keyboard
 *     and invisible to a screen reader. Clipped, it is still a real
 *     focusable radio with a real accessible name.
 *   - selection is never colour alone. The selected card gets a tick
 *     glyph, a heavier border and a tint, so it survives greyscale and
 *     the common forms of colour blindness (WCAG 1.4.1).
 *   - :focus-within keeps a visible ring on the card, because the thing
 *     that would normally show focus is the control we just hid.
 *
 * `.checkbox-option` deliberately does NOT get this treatment — see
 * below. */
.radio-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 56px;
  padding: var(--sdp-space-4) var(--sdp-space-10);
  background: var(--sdp-surface);
  border: 1px solid var(--sdp-border);
  border-radius: var(--sdp-radius-lg);
  box-shadow: var(--sdp-shadow-card);
  margin-bottom: var(--sdp-space-3);
  cursor: pointer;
  transition:
    box-shadow var(--sdp-duration-fast) var(--sdp-ease-standard),
    border-color var(--sdp-duration-fast) var(--sdp-ease-standard),
    transform var(--sdp-duration-fast) var(--sdp-ease-standard);
}
.radio-option:hover {
  border-color: var(--sdp-border-strong);
  box-shadow: var(--sdp-shadow-card-hover);
}
/* Clipped, not hidden. Removing it from the a11y tree would break the
 * form for keyboard and screen-reader users. */
.radio-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.radio-option:has(input:checked) {
  border-color: var(--sdp-primary);
  border-width: 2px;
  background: var(--sdp-primary-tint);
  font-weight: 600;
}
/* The non-colour half of the selected state. */
.radio-option:has(input:checked)::after {
  content: "";
  position: absolute;
  right: var(--sdp-space-4);
  top: 50%;
  width: 6px;
  height: 11px;
  margin-top: -7px;
  border: solid var(--sdp-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.radio-option:focus-within {
  outline: 2px solid var(--sdp-focus-ring-color);
  outline-offset: 2px;
}

/* Checkboxes keep a VISIBLE box on purpose.
 *
 * Distinct from the answer cards: a checkbox is a deliberate opt-in, and
 * the visible control is the affordance that says so. Left-aligned,
 * visible box, normal weight. (T-076 removed the last consent checkbox
 * with the /checkout interstitial; the class is still used by the screener
 * and the waitlist form.) */
.checkbox-option {
  display: flex;
  align-items: center;
  gap: var(--sdp-space-3);
  min-height: 44px;
  padding: var(--sdp-space-3) var(--sdp-space-4);
  background: var(--sdp-surface);
  border: 1px solid var(--sdp-border);
  border-radius: var(--sdp-radius-md);
  margin-bottom: var(--sdp-space-2);
  cursor: pointer;
}
.checkbox-option:hover { border-color: var(--sdp-border-strong); }
.checkbox-option input {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--sdp-primary);
}
.checkbox-option:has(input:checked) {
  border-color: var(--sdp-primary);
  border-width: 1.5px;
  background: var(--sdp-primary-tint);
}
.checkbox-option:focus-within {
  outline: 2px solid var(--sdp-focus-ring-color);
  outline-offset: 2px;
}

/* alerts */
.alert {
  display: flex;
  gap: var(--sdp-space-3);
  padding: var(--sdp-space-4);
  border-radius: var(--sdp-radius-md);
  border: 1px solid transparent;
  margin-bottom: var(--sdp-space-4);
}
.alert--info { background: var(--sdp-info-tint); border-color: var(--sdp-info); color: var(--sdp-text-primary); }
.alert--warning { background: var(--sdp-warning-tint); border-color: var(--sdp-warning-border); color: var(--sdp-warning); }
.alert--error { background: var(--sdp-error-tint); border-color: var(--sdp-error); color: var(--sdp-error); }
.alert__title { font-weight: 600; margin-bottom: var(--sdp-space-1); }

/* accordion (FAQ) */
.accordion-item { border-bottom: 1px solid var(--sdp-border); }
.accordion-header {
  width: 100%;
  min-height: 56px;
  background: transparent;
  border: none;
  text-align: left;
  font-size: var(--sdp-font-size-base);
  font-weight: 600;
  padding: var(--sdp-space-4) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: var(--sdp-text-primary);
}
.accordion-panel {
  padding: 0 0 var(--sdp-space-4) 0;
  color: var(--sdp-text-secondary);
}
.accordion-panel[hidden] { display: none; }
.accordion-icon { transition: transform var(--sdp-duration-base) var(--sdp-ease-standard); }
.accordion-header[aria-expanded="true"] .accordion-icon { transform: rotate(180deg); }

/* sr-only utility */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* screen-out resource cards */
.resource-card {
  display: block;
  border: 1px solid var(--sdp-border);
  border-radius: var(--sdp-radius-md);
  padding: var(--sdp-space-4);
  margin-bottom: var(--sdp-space-3);
  text-decoration: none;
  color: var(--sdp-text-primary);
}
.resource-card:hover { border-color: var(--sdp-primary); background: var(--sdp-primary-tint); }
.resource-card__title { font-weight: 600; }
.resource-card__detail { color: var(--sdp-text-secondary); font-size: var(--sdp-font-size-sm); }

/* ---- desktop 1024px ---- */
@media (min-width: 1024px) {
  .site-header .container { max-width: 1200px; }
  .btn--lg { width: auto; }
  /* T-073 — inside the funnel the primary action keeps the answer cards'
   * width at every breakpoint, so the column reads as one stack instead
   * of a stack plus a small button. Overrides the rule above, which
   * exists for marketing pages. */
  .intake-canvas .btn--lg { width: 100%; }
}

/* ---- wide 1440px ---- */
@media (min-width: 1440px) {
  .container--wide { max-width: 1320px; }
}

/* =====================================================================
 * §quiz — the /get-started funnel card, ported for the MAUD screener
 * (T-075).
 *
 * Every declaration here is the one templates/pages/get-started.php
 * declares inline, with raw hex swapped for the token of the same value
 * (--sdp-navy #1B3A6B, --sdp-teal #3ECBA0, --sdp-teal-dark #29A882,
 * --sdp-teal-light #E6F9F3, --sdp-navy-light #EEF2F9). Sizes stay in px
 * rather than the rem scale on purpose: the target is that page, not this
 * stylesheet's own type ramp.
 *
 * Class names are the reference's names, so "has the screener drifted from
 * the psych funnel" is answerable with a diff.
 * ===================================================================== */
body.quiz-canvas {
  background: var(--sdp-navy-light);
  color: var(--sdp-navy);
  min-height: 100vh;
}
/* The reference page carries no footer. We keep the legal links — this
 * page collects PHI and privacy/terms/support have to be reachable — but
 * they stop being a tinted band and sit quietly on the canvas. */
.quiz-canvas .site-footer {
  background: transparent;
  padding-top: var(--sdp-space-4);
  font-size: 13px;
}

.quiz-wrap {
  max-width: 580px;
  margin: 2.5rem auto;
  padding: 0 1.5rem 4rem;
}
.quiz-card {
  background: #fff;
  border-radius: 18px;
  border: 0.5px solid rgba(27, 58, 107, .1);
  overflow: hidden;
}

/* One question per card. `display:none` is safe because the layout's
 * <noscript> block un-hides every step — see base.php. */
.step {
  display: none;
  padding: 2rem;
}
.step.active { display: block; }

.step-eyebrow {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--sdp-teal-dark);
  margin-bottom: .6rem;
}
.step h2 {
  font-size: 22px;
  font-weight: 500;
  color: var(--sdp-navy);
  margin: 0 0 .5rem;
  line-height: 1.3;
  text-align: left;
}
/* Focus lands on the question when a step is shown, so a screen reader
 * reads the new card instead of staying where the button was. It is a
 * heading, not a control, so it does not draw a ring. */
.step h2:focus { outline: none; }
.step .step-sub {
  font-size: 15px;
  color: var(--sdp-text-secondary);
  margin: 0 0 1.75rem;
  line-height: 1.6;
}

.options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 1.75rem;
  border: 0;
  padding: 0;
}
.options-grid.single { grid-template-columns: 1fr; }

/* The option card. A <label> wrapping a real radio rather than the
 * reference's <button>: same pixels, but arrow-key group navigation,
 * required-field semantics and the no-JS submit all come from the browser
 * instead of from us. */
.opt {
  border: 0.5px solid rgba(27, 58, 107, .15);
  border-radius: 12px;
  padding: .9rem 1rem;
  cursor: pointer;
  background: #fff;
  font-family: inherit;
  text-align: left;
  transition: border-color .15s, background-color .15s;
  display: flex;
  align-items: center;
  gap: 10px;
}
.opt:hover {
  border-color: var(--sdp-teal);
  background: var(--sdp-teal-light);
}
/* `.selected` is set by screen.js and server-rendered on a validation
 * re-render; `:has()` covers the same state without JS. Both, because the
 * class is what the reference toggles and :has() is what keeps a no-JS
 * page honest. */
.opt.selected,
.opt:has(.opt-input:checked) {
  border: 2px solid var(--sdp-teal);
  background: var(--sdp-teal-light);
  /* 2px border replaces 0.5px: pull the padding in so the row does not
   * grow by 1.5px when it is picked. */
  padding: calc(.9rem - 1.5px) calc(1rem - 1.5px);
}
/* Focus treatment matches the reference's own focus ring on its select —
 * a soft teal halo — rather than the stylesheet's default navy outline,
 * which drew a second border around an already-bordered card. */
.opt:has(.opt-input:focus-visible) {
  border-color: var(--sdp-teal);
  box-shadow: 0 0 0 3px rgba(62, 203, 160, .12);
}
/* The radio itself is off-screen, not display:none — it has to stay
 * focusable and readable by assistive tech. */
.opt-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.opt-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(27, 58, 107, .2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s, border-color .15s;
}
.opt.selected .opt-check,
.opt:has(.opt-input:checked) .opt-check {
  background: var(--sdp-teal);
  border-color: var(--sdp-teal);
}
.opt-check svg { display: none; }
.opt.selected .opt-check svg,
.opt:has(.opt-input:checked) .opt-check svg { display: block; }

.opt-text {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--sdp-navy);
  line-height: 1.3;
}
.opt.selected .opt-text,
.opt:has(.opt-input:checked) .opt-text { color: var(--sdp-teal-dark); }
.opt-sub {
  display: block;
  font-size: 12px;
  color: var(--sdp-text-secondary);
  margin-top: 2px;
  font-weight: 400;
}

.quiz-select {
  width: 100%;
  padding: 12px 14px;
  border: 0.5px solid rgba(27, 58, 107, .2);
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  color: var(--sdp-navy);
  background-color: #fff;
  margin-bottom: 1.75rem;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.quiz-select:focus {
  outline: none;
  border-color: var(--sdp-teal);
  box-shadow: 0 0 0 3px rgba(62, 203, 160, .12);
}

/* The conditional opioid follow-up (T-070). Hidden by screen.js while the
 * answer above is no; visible for everyone with JS off. */
.quiz-followup__label {
  display: block;
  font-size: 13px;
  color: var(--sdp-text-secondary);
  margin-bottom: 5px;
}

.quiz-error {
  font-size: 12px;
  color: #A32D2D;
  margin: -1.25rem 0 1.5rem;
}

.quiz-alert {
  margin: 2rem 2rem 0;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--sdp-warning-tint);
  border: 1px solid var(--sdp-warning-border);
  color: var(--sdp-warning);
  font-size: 14px;
  line-height: 1.55;
}
.quiz-alert__title { font-weight: 600; margin-bottom: 4px; }
.quiz-alert ul { margin: 0; padding-left: 1.25rem; }

.btn-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.btn-next {
  padding: 13px 28px;
  border-radius: 10px;
  background: var(--sdp-navy);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  border: none;
  cursor: pointer;
  transition: background-color .15s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.btn-next:hover { background: var(--sdp-navy-mid); }
.btn-next:disabled {
  opacity: .4;
  cursor: not-allowed;
  background: var(--sdp-navy);
}
.btn-back {
  padding: 13px 18px;
  border-radius: 10px;
  background: transparent;
  color: var(--sdp-text-secondary);
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  border: 0.5px solid rgba(27, 58, 107, .2);
  cursor: pointer;
}
.btn-back:hover { background: var(--sdp-navy-light); }

/* ---- the card at phone width ----
 * The reference's own breakpoint behaviour: the two-up option grid is the
 * only thing that cannot hold, so it stacks. */
@media (max-width: 520px) {
  .custom-header { padding: 1rem 1.25rem; }
  .progress-wrap { padding: 1rem 1.25rem; }
  .quiz-wrap { margin: 1.5rem auto; padding: 0 1rem 3rem; }
  .step { padding: 1.5rem 1.25rem; }
  .step h2 { font-size: 20px; }
  .options-grid { grid-template-columns: 1fr; }
  .quiz-alert { margin: 1.5rem 1.25rem 0; }
}