/*!
 * LMCU Assessments — frontend styles
 *
 * Scoped under .lmcu-assessment so nothing leaks into the host theme.
 * Visual language deliberately mirrors lmcu-budget-planner: a single
 * elevated shell, tinted-panel inner structure, soft shadows over
 * 1px borders, ACSS-flat radii fallbacks. Colour and radius tokens
 * cascade through to LMCU's Automatic.css when it's loaded; neutral
 * defaults keep the plugin usable when it isn't.
 *
 * Mobile-first.
 */

.lmcu-assessment,
.lmcu-asmt-modal,
.lmcu-asmt-toast,
body > .lmcu-asmt-modal,
body > .lmcu-asmt-toast {
  /* ---- Typography ---- */
  --lmcu-asmt-font-family: inherit;
  --lmcu-asmt-font-size:   16px;

  /* ---- Surfaces ---- */
  --lmcu-asmt-surface:        var(--white,                #ffffff);
  --lmcu-asmt-surface-muted:  var(--tertiary-trans-30,    #f8fafc);
  --lmcu-asmt-surface-inset:  var(--tertiary-trans-50,    #f1f5f9);

  /* ---- Text ----
   * Body text inherits from the host page. Muted/faint values are
   * kept dark enough to feel readable on a low-contrast screen — the
   * assessment is sometimes opened by users already under stress and
   * shouldn't feel washed out. */
  --lmcu-asmt-text:        inherit;
  --lmcu-asmt-text-muted:  var(--base-semi-dark, #2d3748);
  --lmcu-asmt-text-faint:  var(--base-trans-80,  #475569);

  /* ---- Borders ---- */
  --lmcu-asmt-border:        var(--border-color-light, #cbd5e1);
  --lmcu-asmt-border-strong: var(--border-color-dark,  #94a3b8);

  /* ---- Layout ---- */
  --lmcu-asmt-max-width: min(100%, 720px);

  /* ---- Semantic palette ----
   * Mirrors budget planner: primary = LMCU navy, secondary =
   * charcoal, danger = LMCU red (kept for genuine error states),
   * urgent = LMCU brand yellow (used for urgent signpost cards —
   * important but supportive), info = sky blue, focus = LMCU lime +
   * dark inner stroke. */
  --lmcu-asmt-primary:          var(--secondary,        #0b3954);
  --lmcu-asmt-primary-hover:    var(--secondary-hover,  #0d4463);
  --lmcu-asmt-primary-contrast: var(--white,            #ffffff);

  --lmcu-asmt-secondary:          var(--base-dark,        #353d4b);
  --lmcu-asmt-secondary-hover:    var(--base-ultra-dark,  #15181e);
  --lmcu-asmt-secondary-contrast: var(--white,            #ffffff);

  --lmcu-asmt-success:    #047857;
  --lmcu-asmt-success-bg: #ecfdf5;

  --lmcu-asmt-danger:    var(--primary,              #b91c1c);
  --lmcu-asmt-danger-bg: var(--primary-ultra-light,  #fef2f2);

  /* Urgent signposting — important but supportive. Wired to ACSS
   * --accent (LMCU brand yellow) rather than --primary (red) so the
   * urgent screen reads as "free help is available" rather than "you
   * are in crisis". Kept distinct from --lmcu-asmt-danger so danger
   * remains available for genuine error states (form validation etc.). */
  --lmcu-asmt-urgent:      var(--accent,             #f59e0b);
  --lmcu-asmt-urgent-bg:   var(--accent-ultra-light, #fef3c7);
  --lmcu-asmt-urgent-text: var(--accent-contrast,    #1a1a1a);

  --lmcu-asmt-info:    var(--tertiary-semi-dark,   #0891b2);
  --lmcu-asmt-info-bg: var(--tertiary-ultra-light, #ecfeff);

  /* Segment hero — dark surface, light text. Differentiates the
   * "where you are" answer (the headline result) from the lighter
   * blue tip cards and signposts that surround it. Wired to ACSS
   * --secondary so it picks up LMCU's secondary brand colour
   * automatically. */
  --lmcu-asmt-segment-bg:   var(--secondary,          #353d4b);
  --lmcu-asmt-segment-text: var(--secondary-contrast, #ffffff);

  --lmcu-asmt-warning:    #d97706;
  --lmcu-asmt-warning-bg: #fff7ed;

  --lmcu-asmt-focus:      var(--accent, #ffdd00);
  --lmcu-asmt-focus-text: var(--base,   #0b0c0c);

  /* ---- Radii ----
   * ACSS-flat fallbacks (matches budget planner). When ACSS sets
   * actual radii, they cascade through; without ACSS, the assessment
   * shell renders as crisp rectangles rather than rounded cards. */
  --lmcu-asmt-radius-sm: var(--radius-xs, 0);
  --lmcu-asmt-radius-md: var(--radius,    0);
  --lmcu-asmt-radius-lg: var(--radius-l,  0);

  /* ---- Elevation ----
   * Subtle shadow for the outer shell — structure inside comes from
   * tonal shifts (surface / surface-muted / surface-inset) rather
   * than 1px borders. */
  --lmcu-asmt-shadow-card:    var(--box-shadow-m, 0 4px 12px rgba(15, 23, 42, .08), 0 1px 3px rgba(15, 23, 42, .04));
  --lmcu-asmt-shadow-overlay: 0 -8px 16px -8px rgba(15, 23, 42, .08);

  /* ---- Motion ---- */
  --lmcu-asmt-transition: 150ms ease;
}

/* =============================================================
 * Outer shell — the assessment is a single elevated card. Inner
 * screens are flow content, not nested cards.
 * ============================================================= */
.lmcu-assessment {
  font-family: var(--lmcu-asmt-font-family);
  font-size:   var(--lmcu-asmt-font-size);
  color:       var(--lmcu-asmt-text);
  background:  var(--lmcu-asmt-surface);
  border-radius: var(--lmcu-asmt-radius-lg);
  box-shadow:    var(--lmcu-asmt-shadow-card);
  max-width: var(--lmcu-asmt-max-width);
  margin: 0 auto;
  overflow: hidden;
  line-height: 1.55;
}

/* Mobile: break out of the ACSS section gutter and drop the card
 * chrome so the assessment uses the full viewport width. Gutter +
 * card padding stack to ~64px of wasted horizontal space on a 380px
 * phone — which kills option-card legibility and forces awkward
 * line-wraps in long question text. `grid-column: full` is ACSS's
 * standard breakout (the named line in the section's
 * grid-template-columns). The shortcode usually lives 2–3 nodes
 * deep inside .brxe-section (section > container > shortcode-wrap >
 * .lmcu-assessment), so we use :has() to push every Bricks wrapper
 * between the section and the assessment to grid-column: full and
 * strip their horizontal padding. Modern browsers only; on browsers
 * without :has() support the existing gutter behaviour persists,
 * which is the same as v0.1.8 (graceful degradation). */
@media (max-width: 478px) {
  /* Safety net — contain any residual horizontal overflow caused by
   * Bricks wrappers with intrinsic min-width that don't shrink to
   * fit. `clip` is preferred over `hidden` so it doesn't break
   * position: sticky/fixed on descendants. */
  .brxe-section:has(.lmcu-assessment) {
    overflow-x: clip;
  }

  /* Push the section-grid item (the direct .brxe-* child of the
   * section) to full grid width — escapes the section's gutter
   * columns. */
  .brxe-section:has(.lmcu-assessment) > .brxe-container,
  .brxe-section:has(.lmcu-assessment) > .brxe-block,
  .brxe-section:has(.lmcu-assessment) > .brxe-shortcode,
  .brxe-section:has(.lmcu-assessment) > .brxe-div {
    grid-column: full;
  }

  /* Neutralise every Bricks wrapper between the section and the
   * assessment. `display: block` is the key — it cancels any nested
   * ACSS content-grid pattern that would re-impose `--full` gutter
   * columns inside the breakout (the doubled-`--full` symptom).
   * Combined with `padding-inline: 0` to drop wrapper padding and
   * `min-width: 0` so children can shrink below their content's
   * intrinsic min-content size. */
  .brxe-section:has(.lmcu-assessment) .brxe-container,
  .brxe-section:has(.lmcu-assessment) .brxe-block,
  .brxe-section:has(.lmcu-assessment) .brxe-shortcode,
  .brxe-section:has(.lmcu-assessment) .brxe-div {
    display: block;
    padding-inline: 0;
    min-width: 0;
    max-width: 100%;
  }

  .lmcu-assessment {
    border-radius: 0;
    box-shadow: none;
    min-width: 0;
    max-width: 100%;
  }
  .lmcu-asmt-main {
    padding: 16px;
  }
}

/* Match budget planner's box-sizing scope so inputs that go to
 * width:100% don't overflow the modal/toast siblings. */
:where(.lmcu-assessment, .lmcu-asmt-modal, .lmcu-asmt-toast) *,
:where(.lmcu-assessment, .lmcu-asmt-modal, .lmcu-asmt-toast) *::before,
:where(.lmcu-assessment, .lmcu-asmt-modal, .lmcu-asmt-toast) *::after {
  box-sizing: border-box;
}
:where(.lmcu-assessment) button { font: inherit; cursor: pointer; color: inherit; }
:where(.lmcu-assessment) input,
:where(.lmcu-assessment) select,
:where(.lmcu-assessment) textarea { font: inherit; color: inherit; }

.lmcu-asmt-error {
  padding: 20px;
  background: var(--lmcu-asmt-surface-muted);
  color: var(--lmcu-asmt-text-muted);
}
.lmcu-asmt-noscript {
  padding: 16px 20px;
  border-left: 3px solid var(--lmcu-asmt-warning);
  background: var(--lmcu-asmt-warning-bg);
}

/* =============================================================
 * Header — slim band that holds the progress bar. Sits flush
 * against the shell edge, no separator (the tonal step from
 * surface to surface-muted carries the divide).
 * ============================================================= */
.lmcu-asmt-header {
  background: var(--lmcu-asmt-surface);
}
.lmcu-asmt-header:has(#lmcu-asmt-progress:not([hidden])) {
  padding: 14px 20px 12px;
  background: var(--lmcu-asmt-surface-muted);
}
.lmcu-asmt-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Author-CSS class rules outrank the user-agent `[hidden] {
 * display: none }` default, so without this override the bar would
 * stay displayed (as a thin tinted strip) when JS sets the hidden
 * attribute. Same trap applies to any element we toggle via the
 * hidden attribute that also has its own display rule. */
.lmcu-asmt-progress[hidden] { display: none; }
.lmcu-asmt-progress__label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--lmcu-asmt-text-muted);
  font-variant-numeric: tabular-nums;
}
.lmcu-asmt-progress__bar {
  height: 6px;
  background: var(--lmcu-asmt-surface-inset);
  border-radius: 999px;
  overflow: hidden;
}
.lmcu-asmt-progress__fill {
  height: 100%;
  width: 0;
  background: var(--lmcu-asmt-primary);
  transition: width .25s ease-out;
  border-radius: 999px;
}

/* =============================================================
 * Main content
 * ============================================================= */
.lmcu-asmt-main {
  padding: 20px;
  outline: none;
}
.lmcu-asmt-main:focus,
.lmcu-asmt-main:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* `.lmcu-asmt-screen` is the per-screen flow wrapper (intro,
 * question, result, urgent). No chrome — visual structure comes
 * from the outer shell + tinted inner panels. The class is named
 * `screen` rather than `card` to dodge ACSS's broad
 * `[class*="card"]:hover` utility, which would otherwise apply an
 * unwanted hover effect. */
.lmcu-asmt-screen {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* =============================================================
 * Typography
 * ============================================================= */
.lmcu-asmt-h1 {
  font-size: 22px;
  line-height: 1.25;
  margin: 0 0 10px;
  font-weight: 700;
  color: var(--lmcu-asmt-text);
}
.lmcu-asmt-h1--question { color: var(--lmcu-asmt-text); }
/* Headings receive programmatic focus on screen transition for a11y
 * (so screen readers announce the new screen). They are not interactive,
 * so the visible focus ring is suppressed for sighted users. !important
 * defends against ACSS / theme rules that paint a global focus ring on
 * any focused element. */
.lmcu-asmt-h1:focus,
.lmcu-asmt-h1:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.lmcu-asmt-h2 {
  font-size: 18px;
  line-height: 1.3;
  margin: 24px 0 8px;
  font-weight: 700;
  color: var(--lmcu-asmt-text);
}

.lmcu-asmt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--lmcu-asmt-text-muted);
  margin-bottom: 8px;
}

.lmcu-asmt-lede {
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 16px;
  color: var(--lmcu-asmt-text-muted);
}
.lmcu-asmt-lede--small {
  font-size: 14px;
  margin-bottom: 12px;
}
.lmcu-asmt-helper {
  font-size: 14px;
  margin: 0 0 12px;
  color: var(--lmcu-asmt-text-muted);
}
.lmcu-asmt-fineprint {
  font-size: 13px;
  line-height: 1.55;
  margin: 14px 0 0;
  color: var(--lmcu-asmt-text-faint);
}
.lmcu-asmt-fineprint--center { text-align: center; }
.lmcu-asmt-fineprint a { color: var(--lmcu-asmt-primary); }

/* =============================================================
 * Pillars (intro three-up: "Where you are", etc.)
 * Plain numbered list — no card chrome, so they don't look like
 * clickable options. The numbered badge keeps the "step" feel
 * without the affordance ambiguity.
 * ============================================================= */
.lmcu-asmt-pillars {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--content-gap, 10px);
}
@media (min-width: 560px) {
  .lmcu-asmt-pillars { grid-template-columns: repeat(3, 1fr); gap: var(--gutter, 14px); }
}
.lmcu-asmt-pillar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  background: transparent;
}
.lmcu-asmt-pillar__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--lmcu-asmt-primary);
  color: var(--lmcu-asmt-primary-contrast);
  border-radius: 50%;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
  /* Subtle ring gives the badge a touch of dimension without making
   * the pillar look like a clickable card again. */
  box-shadow: 0 0 0 4px var(--neutral-trans-5, rgba(0, 0, 0, 0.04));
}
.lmcu-asmt-pillar__label {
  font-size: 15px;
  font-weight: 600;
  color: var(--lmcu-asmt-text);
  line-height: 1.35;
}

/* =============================================================
 * Form inputs
 * ============================================================= */
.lmcu-asmt-prefill {
  margin: 16px 0 20px;
  padding: 14px 16px;
  background: var(--lmcu-asmt-surface-muted);
  border-radius: var(--lmcu-asmt-radius-md);
}
.lmcu-asmt-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0;
}
.lmcu-asmt-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--lmcu-asmt-text);
}
.lmcu-asmt-input {
  height: 48px;
  padding: 0 14px;
  background: var(--lmcu-asmt-surface);
  border: 1px solid var(--lmcu-asmt-border);
  border-radius: var(--lmcu-asmt-radius-sm);
  width: 100%;
  transition: border-color var(--lmcu-asmt-transition), box-shadow var(--lmcu-asmt-transition);
}
.lmcu-asmt-input:hover { border-color: var(--lmcu-asmt-border-strong); }
.lmcu-asmt-input::placeholder { color: var(--lmcu-asmt-text-faint); }
.lmcu-asmt-input:focus {
  outline: 3px solid var(--lmcu-asmt-focus);
  outline-offset: 0;
  box-shadow: inset 0 0 0 2px var(--lmcu-asmt-focus-text);
}

.lmcu-asmt-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--lmcu-asmt-text-muted);
  padding: 8px 0;
  cursor: pointer;
}
.lmcu-asmt-consent input { margin-top: 4px; flex-shrink: 0; }

/* =============================================================
 * Options (single + multi select) — full-width tappable rows on
 * a tinted track, primary-coloured indicator when selected.
 * ============================================================= */
.lmcu-asmt-options {
  list-style: none;
  margin: 16px 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs, 8px);
}
.lmcu-asmt-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  font-size: 16px;
  padding: 14px 16px;
  background: var(--lmcu-asmt-surface-muted);
  border: 0;
  border-radius: var(--lmcu-asmt-radius-md);
  color: var(--lmcu-asmt-text);
  min-height: 56px;
  transition: background var(--lmcu-asmt-transition), box-shadow var(--lmcu-asmt-transition);
}
.lmcu-asmt-option:hover { background: var(--lmcu-asmt-surface-inset); }
.lmcu-asmt-option:active { transform: scale(.99); }
.lmcu-asmt-option:focus-visible {
  outline: 3px solid var(--lmcu-asmt-focus);
  outline-offset: 2px;
}
.lmcu-asmt-option.is-selected {
  background: var(--lmcu-asmt-info-bg);
  box-shadow: inset 0 0 0 2px var(--lmcu-asmt-primary);
}
.lmcu-asmt-option__indicator {
  width: 22px;
  height: 22px;
  border: 2px solid var(--lmcu-asmt-border-strong);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  background: var(--lmcu-asmt-surface);
}
.lmcu-asmt-option[role="checkbox"] .lmcu-asmt-option__indicator { border-radius: 4px; }
.lmcu-asmt-option.is-selected .lmcu-asmt-option__indicator {
  background: var(--lmcu-asmt-primary);
  border-color: var(--lmcu-asmt-primary);
}
.lmcu-asmt-option.is-selected .lmcu-asmt-option__indicator::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 7px;
  border-left: 2.5px solid var(--lmcu-asmt-primary-contrast);
  border-bottom: 2.5px solid var(--lmcu-asmt-primary-contrast);
  transform: translate(-55%, -65%) rotate(-45deg);
}
.lmcu-asmt-option__label { flex: 1; line-height: 1.4; }

/* =============================================================
 * Buttons — primary/secondary delegated to ACSS button system
 * (btn btn--m btn--primary / btn--secondary). Plugin only adds:
 *   1. A tactile press (transform: scale(.98)) inside the
 *      shortcode container — ACSS doesn't ship this by default.
 *   2. A consistent disabled state — ACSS leaves [disabled]
 *      visual treatment up to the host theme.
 *   3. A custom "ghost" variant (.lmcu-asmt-ghost-btn) for
 *      low-emphasis tertiary actions (Back, Prefer not to say,
 *      Start again, Cancel). Named to avoid ACSS's substring
 *      match `[class*="btn--"]` so it stays under our control.
 *      Uses ACSS button vars + neutral-trans for hover so it
 *      visually inherits site theming.
 * ============================================================= */
.lmcu-assessment .btn:active { transform: scale(.98); }
.lmcu-assessment .btn[disabled],
.lmcu-assessment .btn:disabled { opacity: .5; cursor: not-allowed; }

.lmcu-asmt-ghost-btn {
  /* Match ACSS button geometry so a ghost button lines up with
   * its .btn siblings in flex rows. ACSS exposes these as CSS
   * vars; we fall back to plugin tokens when ACSS isn't loaded.
   * A translucent border at rest gives the button a clear edge —
   * on a busy page background, a borderless transparent button
   * reads as plain text rather than an interactive control. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-block: var(--btn-padding-block, 12px);
  padding-inline: var(--btn-padding-inline, 20px);
  border: var(--btn-border-width, 1px) solid var(--neutral-trans-20, var(--lmcu-asmt-border));
  border-radius: var(--btn-radius, var(--lmcu-asmt-radius-md));
  font-size: var(--btn-font-size, 15px);
  font-weight: var(--btn-font-weight, 600);
  font-family: var(--btn-font-family, inherit);
  line-height: var(--btn-line-height, 1.2);
  background: transparent;
  color: var(--lmcu-asmt-text, currentColor);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background var(--btn-transition-duration, 200ms) ease,
              border-color var(--btn-transition-duration, 200ms) ease,
              transform 60ms ease;
}
.lmcu-asmt-ghost-btn:hover:not(:disabled) {
  background: var(--neutral-trans-10, var(--lmcu-asmt-surface-muted));
  border-color: var(--neutral-trans-30, var(--lmcu-asmt-border-strong));
}
.lmcu-asmt-ghost-btn:focus-visible {
  outline: 3px solid var(--focus-color, var(--lmcu-asmt-focus));
  outline-offset: 2px;
}
.lmcu-asmt-ghost-btn:active { transform: scale(.98); }
.lmcu-asmt-ghost-btn[disabled],
.lmcu-asmt-ghost-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Forward-arrow icon, used on Start and Next buttons. Em-relative
 * sizing so it scales with the button's font-size; fill: currentcolor
 * via the SVG attribute so it adopts the button's text colour
 * (light on accent, etc). Slight rightward animation on hover gives
 * a subtle "go" cue. */
.lmcu-asmt-icon-arrow {
  width: 0.875em;
  height: 0.875em;
  flex-shrink: 0;
  transition: transform 200ms ease;
}
.btn:hover .lmcu-asmt-icon-arrow,
.lmcu-asmt-ghost-btn:hover .lmcu-asmt-icon-arrow {
  transform: translateX(2px);
}

/* =============================================================
 * Question nav (back / prefer-not / next)
 * ============================================================= */
.lmcu-asmt-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, 8px);
  align-items: center;
  margin-top: 4px;
}
.lmcu-asmt-nav__spacer { flex: 1; }
.lmcu-asmt-nav .btn,
.lmcu-asmt-nav .lmcu-asmt-ghost-btn { min-width: 110px; }

/* Skip affordance for optional questions. Rendered between options
 * and nav, styled as a quiet text link rather than a third button —
 * sits visually closer to the question it relates to and frees up
 * the (mobile-fixed) nav bar for Back/Next only. */
.lmcu-asmt-skip {
  display: block;
  margin: 12px auto 0;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 14px;
  color: var(--lmcu-asmt-text-muted, #6b7280);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  cursor: pointer;
  border-radius: var(--lmcu-asmt-radius-sm);
}
.lmcu-asmt-skip:hover {
  color: var(--lmcu-asmt-text);
  text-decoration-thickness: 2px;
}
.lmcu-asmt-skip:focus-visible {
  outline: 3px solid var(--focus-color, var(--lmcu-asmt-focus));
  outline-offset: 2px;
  text-decoration: none;
}

/* Single-button primary action wrapper used on the intro screen.
 * Same chrome as .lmcu-asmt-nav on mobile so Start visually matches
 * Next on subsequent question screens — both pin to viewport bottom
 * with identical surface, border and shadow. On desktop the wrapper
 * sits in the natural left-aligned column rhythm of the intro so
 * the button reads as a deliberate next-step rather than a floating
 * centred element among left-aligned siblings. A min-width gives it
 * presence even at btn--m size. */
.lmcu-asmt-screen-cta {
  display: block;
  margin-top: 4px;
}
@media (min-width: 479px) {
  .lmcu-asmt-screen-cta {
    margin-top: 16px;
  }
  .lmcu-asmt-screen-cta .btn {
    min-width: 180px;
  }
}

/* Mobile: pin primary actions (intro Start, question nav) to the
 * viewport bottom. These are the only screens long enough to warrant
 * scroll-pinned CTAs; result/urgent/gate stay in flow because their
 * actions either follow short content (urgent), require keyboard
 * (gate text inputs), or are multi-button affordances that would be
 * heavy as a fixed bar (result page). Matches the GOV.UK / Money
 * Helper / mobile-banking convention and keeps the primary action
 * thumb-reachable across the journey. */
@media (max-width: 478px) {
  .lmcu-asmt-nav .btn,
  .lmcu-asmt-nav .lmcu-asmt-ghost-btn { min-width: 0; flex: 1; }
  .lmcu-asmt-screen-cta .btn { width: 100%; }

  /* Spacer's job on desktop is to balance [Back] [···] [Prefer] [Next]
   * with primary actions right-anchored. On mobile every nav child has
   * flex: 1, so the spacer becomes a 4th equal-width slot that
   * squeezes the actual buttons (especially "Prefer not to answer"
   * with its 19-character label). Hide it. */
  .lmcu-asmt-nav__spacer { display: none; }

  .lmcu-asmt-nav,
  .lmcu-asmt-screen-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--lmcu-asmt-surface, #fff);
    border-top: 1px solid var(--neutral-trans-15, rgba(0, 0, 0, 0.08));
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04);
    z-index: 10;
  }

  /* Reserve space at the bottom of long screens so content isn't
   * hidden behind the fixed action bar. ~76px bar + safe area. */
  .lmcu-asmt-question,
  .lmcu-asmt-intro,
  .lmcu-asmt-result,
  .lmcu-asmt-urgent {
    padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  }
}

/* =============================================================
 * Result page — three layers, with a tinted "where you are" hero
 * (matches the budget planner summary hero pattern).
 * ============================================================= */
.lmcu-asmt-segment {
  background: var(--lmcu-asmt-segment-bg);
  color: var(--lmcu-asmt-segment-text);
  padding: 20px;
  border-radius: var(--lmcu-asmt-radius-md);
  margin: 0 0 18px;
}
/* Segment hero is the result-page anchor. H1, lede and eyebrow inherit
 * the segment's light text colour so they flip white on dark without
 * per-element overrides everywhere. The eyebrow gets a slight opacity
 * dial-back so it reads as a label rather than competing with the
 * headline. */
.lmcu-asmt-segment .lmcu-asmt-h1 {
  margin-top: 6px;
  color: inherit;
}
.lmcu-asmt-segment .lmcu-asmt-lede {
  color: inherit;
}
.lmcu-asmt-segment .lmcu-asmt-eyebrow {
  color: inherit;
  opacity: 0.75;
}

.lmcu-asmt-priorities__list {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap, 10px);
  margin-top: 12px;
}
.lmcu-asmt-cards {
  display: grid;
  grid-template-columns: 1fr;
  /* row-gap col-gap — vertical follows content rhythm,
   * horizontal follows site gutter. */
  gap: var(--content-gap, 10px) var(--gutter, 10px);
  margin-top: 12px;
}
@media (min-width: 640px) {
  .lmcu-asmt-cards { grid-template-columns: 1fr 1fr; }
}
.lmcu-asmt-empty {
  font-size: 14px;
  color: var(--lmcu-asmt-text-muted);
  margin: 8px 0;
}

/* Score detail (collapsed) */
.lmcu-asmt-details {
  margin-top: 14px;
  padding: 0 14px;
  background: var(--lmcu-asmt-surface);
  border-radius: var(--lmcu-asmt-radius-sm);
}
.lmcu-asmt-details summary {
  padding: 10px 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--lmcu-asmt-primary);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lmcu-asmt-details summary::-webkit-details-marker { display: none; }
.lmcu-asmt-details summary::before {
  content: '+';
  display: inline-block;
  width: 14px;
  text-align: center;
  font-weight: 700;
}
.lmcu-asmt-details[open] summary::before { content: '–'; }
.lmcu-asmt-domain-list {
  list-style: none;
  margin: 0;
  padding: 0 0 12px;
}
.lmcu-asmt-domain-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 14px;
  color: var(--lmcu-asmt-text-muted);
  box-shadow: inset 0 1px 0 var(--lmcu-asmt-surface-inset);
}
.lmcu-asmt-domain-row:first-child { box-shadow: none; }
.lmcu-asmt-domain-row__score {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--lmcu-asmt-text);
}

/* =============================================================
 * Tip cards ("Worth thinking about") — tinted panel, no border,
 * with a primary accent stripe. Distinct shape from signpost
 * cards (which always carry an external contact).
 * ============================================================= */
.lmcu-asmt-tip {
  padding: 16px 18px;
  background: var(--lmcu-asmt-surface-muted);
  border-radius: var(--lmcu-asmt-radius-md);
  position: relative;
}
.lmcu-asmt-tip::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--lmcu-asmt-primary);
  border-top-left-radius: var(--lmcu-asmt-radius-md);
  border-bottom-left-radius: var(--lmcu-asmt-radius-md);
}
.lmcu-asmt-tip__title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--lmcu-asmt-text);
}
.lmcu-asmt-tip__body {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--lmcu-asmt-text);
}
.lmcu-asmt-tip__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lmcu-asmt-tip__links a {
  color: var(--lmcu-asmt-primary);
  font-weight: 600;
}
.lmcu-asmt-tip__links a:focus-visible {
  outline: 3px solid var(--lmcu-asmt-focus);
  outline-offset: 2px;
}

/* =============================================================
 * Signpost cards — external contact cards. Use info-bg as the
 * tint and a primary border-left accent for affordance.
 * ============================================================= */
.lmcu-asmt-signpost {
  padding: 14px 16px;
  background: var(--lmcu-asmt-info-bg);
  border-radius: var(--lmcu-asmt-radius-md);
  position: relative;
}
.lmcu-asmt-signpost::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--lmcu-asmt-info);
  border-top-left-radius: var(--lmcu-asmt-radius-md);
  border-bottom-left-radius: var(--lmcu-asmt-radius-md);
}
.lmcu-asmt-signpost--urgent {
  background: var(--lmcu-asmt-urgent-bg);
}
.lmcu-asmt-signpost--urgent::before {
  background: var(--lmcu-asmt-urgent);
}

/* Urgent screen hero — mirrors the result-screen segment hero
 * pattern but in accent (LMCU brand yellow) rather than secondary
 * (charcoal). Wraps the urgent screen's h1 and lede so the
 * "important help is available" signal reads as a confident
 * editorial standfirst rather than just plain text floating above
 * a row of cards. */
.lmcu-asmt-urgent-hero {
  background: var(--lmcu-asmt-urgent);
  color: var(--lmcu-asmt-urgent-text);
  padding: 20px;
  border-radius: var(--lmcu-asmt-radius-md);
  margin: 0 0 18px;
}
.lmcu-asmt-urgent-hero .lmcu-asmt-h1 {
  margin-top: 0;
  color: inherit;
}
.lmcu-asmt-urgent-hero .lmcu-asmt-lede {
  color: inherit;
}
.lmcu-asmt-signpost__title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--lmcu-asmt-text);
}
.lmcu-asmt-signpost__summary {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--lmcu-asmt-text-muted);
}
.lmcu-asmt-signpost__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-size: 14px;
}
.lmcu-asmt-signpost__phone {
  color: var(--lmcu-asmt-primary);
  text-decoration: none;
  font-weight: 700;
}
.lmcu-asmt-signpost__phone:focus-visible {
  outline: 3px solid var(--lmcu-asmt-focus);
  outline-offset: 2px;
}
.lmcu-asmt-signpost__hours { color: var(--lmcu-asmt-text-muted); }
.lmcu-asmt-signpost__link {
  color: var(--lmcu-asmt-primary);
  font-weight: 600;
}
.lmcu-asmt-signpost__link:focus-visible {
  outline: 3px solid var(--lmcu-asmt-focus);
  outline-offset: 2px;
}

/* =============================================================
 * Result actions footer + wellbeing callout
 * ============================================================= */
.lmcu-asmt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  padding-top: 16px;
  box-shadow: inset 0 1px 0 var(--lmcu-asmt-surface-inset);
}
.lmcu-asmt-actions .btn,
.lmcu-asmt-actions .lmcu-asmt-ghost-btn { min-width: 110px; }
.lmcu-asmt-callout {
  margin-top: 16px;
  padding: 16px 18px;
  background: var(--lmcu-asmt-info-bg);
  border-radius: var(--lmcu-asmt-radius-md);
  position: relative;
}
.lmcu-asmt-callout::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--lmcu-asmt-info);
  border-top-left-radius: var(--lmcu-asmt-radius-md);
  border-bottom-left-radius: var(--lmcu-asmt-radius-md);
}
.lmcu-asmt-callout .lmcu-asmt-h2 { margin-top: 0; }

/* =============================================================
 * Gate (lead capture) — shown between the last question and the
 * result when the assessment has gate.enabled. Visually similar
 * to the prefill block but full-page rather than a tinted panel.
 * ============================================================= */
.lmcu-asmt-gate__form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}
.lmcu-asmt-gate__consents {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  padding: 12px 14px;
  background: var(--lmcu-asmt-surface-muted);
  border-radius: var(--lmcu-asmt-radius-md);
}
.lmcu-asmt-gate__form .btn,
.lmcu-asmt-gate__form .lmcu-asmt-ghost-btn {
  margin-top: 8px;
  width: 100%;
}
.lmcu-asmt-label__optional {
  font-weight: 400;
  color: var(--lmcu-asmt-text-muted);
  font-size: 13px;
}

/* =============================================================
 * Modal / dialog — bottom sheet on mobile, centred dialog on
 * desktop. Mirrors the budget planner's modal pattern.
 * ============================================================= */
.lmcu-asmt-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, .55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  font-family: var(--lmcu-asmt-font-family);
  font-size: var(--lmcu-asmt-font-size);
  color: var(--lmcu-asmt-text);
}
@media (min-width: 560px) {
  .lmcu-asmt-modal {
    align-items: center;
    padding: 24px;
  }
}
.lmcu-asmt-modal__card {
  background: var(--lmcu-asmt-surface);
  width: 100%;
  max-width: 480px;
  border-radius: var(--lmcu-asmt-radius-lg) var(--lmcu-asmt-radius-lg) 0 0;
  padding: 22px;
  box-shadow: var(--lmcu-asmt-shadow-overlay);
  max-height: 92vh;
  overflow-y: auto;
}
@media (min-width: 560px) {
  .lmcu-asmt-modal__card { border-radius: var(--lmcu-asmt-radius-lg); }
}
.lmcu-asmt-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.lmcu-asmt-modal__head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--lmcu-asmt-text);
}
.lmcu-asmt-modal__close {
  background: none;
  border: 0;
  font-size: 26px;
  line-height: 1;
  color: var(--lmcu-asmt-text-muted);
  padding: 4px 10px;
}
.lmcu-asmt-modal__close:focus-visible {
  outline: 3px solid var(--lmcu-asmt-focus);
  outline-offset: 2px;
}
.lmcu-asmt-modal__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lmcu-asmt-modal__form .btn,
.lmcu-asmt-modal__form .lmcu-asmt-ghost-btn { width: 100%; }

/* Share picker — radio list inside the share modal. Each entry is
 * a tinted row with the recipient label + a soft description. */
.lmcu-asmt-h3 {
  margin: 14px 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--lmcu-asmt-text);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.lmcu-asmt-share-recipients {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lmcu-asmt-share-recipient {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--lmcu-asmt-surface-muted);
  border-radius: var(--lmcu-asmt-radius-md);
  cursor: pointer;
  transition: background var(--lmcu-asmt-transition);
}
.lmcu-asmt-share-recipient:hover {
  background: var(--lmcu-asmt-surface-inset);
}
.lmcu-asmt-share-recipient input[type="radio"] {
  margin-top: 4px;
  flex-shrink: 0;
}
.lmcu-asmt-share-recipient input[type="radio"]:focus-visible {
  outline: 3px solid var(--lmcu-asmt-focus);
  outline-offset: 2px;
}
.lmcu-asmt-share-recipient__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lmcu-asmt-share-recipient__title {
  font-weight: 600;
  font-size: 15px;
  color: var(--lmcu-asmt-text);
}
.lmcu-asmt-share-recipient__desc {
  font-size: 13px;
  color: var(--lmcu-asmt-text-muted);
  line-height: 1.45;
}
.lmcu-asmt-share-recipient-email:not(:empty) {
  margin-top: 4px;
}

/* =============================================================
 * Toast
 * ============================================================= */
.lmcu-asmt-toast {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--lmcu-asmt-text);
  color: var(--lmcu-asmt-primary-contrast);
  padding: 10px 16px;
  border-radius: var(--lmcu-asmt-radius-md);
  font-size: 14px;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  max-width: 90vw;
  text-align: center;
}
.lmcu-asmt-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* =============================================================
 * Reduced motion
 * ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .lmcu-assessment *,
  .lmcu-asmt-modal *,
  .lmcu-asmt-toast {
    transition: none !important;
    animation: none !important;
  }
  .lmcu-assessment .btn:active,
  .lmcu-asmt-ghost-btn:active,
  .lmcu-asmt-option:active { transform: none; }
}