/*!
 * Budget Planner - frontend styles
 *
 * Scoped under .lmcu-budget-planner so nothing leaks into the host theme.
 * All colours, shadows and radii are CSS custom properties you can
 * override from your own stylesheet - see TECHNICAL_SPEC.md section 5.
 */

/* =============================================================
 *  Plugin CSS begins here. In production this lives in
 *  assets/css/lmcu-budget-planner.css, scoped to .lmcu-budget-planner.
 *
 *  THEMING:
 *    Override any of the --lmcu-bp-* variables below from your own
 *    stylesheet (site-wide, or scoped to .lmcu-budget-planner) to
 *    restyle the plugin without touching its code.
 *
 *    Sensible defaults only — no heavy shadows, no brand colors.
 *    Fonts and text color inherit from the surrounding page.
 * ============================================================= */
/* The CSS custom-property scope intentionally covers the planner shell
 * AND the overlays that live as DOM siblings of it (modal, toast, print
 * root). Without this, those overlays would resolve var(--lmcu-bp-surface)
 * to nothing and render with transparent backgrounds. */
.lmcu-budget-planner,
.lmcu-bp-modal,
.lmcu-bp-toast,
.lmcu-bp-print-root,
body > .lmcu-bp-modal,
body > .lmcu-bp-toast,
body > .lmcu-bp-print-root {
  /* ------------------------------------------------------------------
   * Defaults wire to LMCU's Automatic.css (ACSS) palette tokens. Each
   * value falls back to the previous neutral default if ACSS isn't
   * loaded — the planner remains usable even if ACSS is disabled,
   * uninstalled, or breaks.
   *
   * ACSS mapping summary:
   *   Primary action  ←  --secondary  (LMCU navy)
   *   Quieter action  ←  --base-dark  (LMCU charcoal)
   *   Danger          ←  --primary    (LMCU red — already an alert)
   *   Info            ←  --tertiary-semi-dark (sky blue, dark enough for type)
   *   Focus           ←  --accent     (LMCU lime) + --base inset
   *   Surface tint    ←  --tertiary-trans-30 (subtle sky-blue panel)
   *   Borders         ←  --border-color-light / --border-color-dark
   *   Radii           ←  --radius-xs / --radius / --radius-l
   *
   * Success and warning kept as semantic green/amber — ACSS doesn't
   * ship those by default, and they're functional signals (surplus /
   * "stretched") that mustn't drift to brand colours.
   * ---------------------------------------------------------------- */

  /* --- Typography (inherits from the host page by default) --- */
  --lmcu-bp-font-family: inherit;
  --lmcu-bp-font-size:   16px;

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

  /* --- Text --- */
  --lmcu-bp-text:       inherit;
  --lmcu-bp-text-muted: var(--base-semi-dark, #4a5568);
  --lmcu-bp-text-faint: var(--base-trans-70,  rgba(39, 45, 55, .7));

  /* --- Borders --- */
  --lmcu-bp-border:        var(--border-color-light, #e2e8f0);
  --lmcu-bp-border-strong: var(--border-color-dark,  #cbd5e1);

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

  /* --- Semantic colour palette --- */

  /* Primary — dominant action: buttons, header bar, active pill, active tab */
  --lmcu-bp-primary:            var(--secondary,        #0b3954);
  --lmcu-bp-primary-hover:      var(--secondary-hover,  #0d4463);
  --lmcu-bp-primary-contrast:   var(--white,            #ffffff);

  /* Secondary — quieter actions and supporting accents */
  --lmcu-bp-secondary:          var(--base-dark,        #353d4b);
  --lmcu-bp-secondary-hover:    var(--base-ultra-dark,  #15181e);
  --lmcu-bp-secondary-contrast: var(--white,            #ffffff);

  /* Success — surplus, "within typical range". Hardcoded; ACSS ships
   * no --success token. Override here if you add one to your stack. */
  --lmcu-bp-success:            #059669;
  --lmcu-bp-success-bg:         #ecfdf5;
  --lmcu-bp-success-contrast:   #ffffff;

  /* Warning — amber band, "stretched" indicators. Same note as above. */
  --lmcu-bp-warning:            #d97706;
  --lmcu-bp-warning-bg:         #fffbeb;
  --lmcu-bp-warning-contrast:   #ffffff;

  /* Danger — shortfall, "severely stretched", problem-debt thresholds.
   * LMCU's brand red doubles as the planner's alert colour. */
  --lmcu-bp-danger:             var(--primary,              #dc2626);
  --lmcu-bp-danger-bg:          var(--primary-ultra-light,  #fef2f2);
  --lmcu-bp-danger-contrast:    var(--white,                #ffffff);

  /* Info — supportive resource panels (help signposts, callouts). */
  --lmcu-bp-info:               var(--tertiary-semi-dark,   #0891b2);
  --lmcu-bp-info-bg:            var(--tertiary-ultra-light, #ecfeff);
  --lmcu-bp-info-contrast:      var(--white,                #ffffff);

  /* Focus — GDS-style high-contrast pair: lime outline + dark inner
   * stroke. Visible on any background (the inner stroke ensures
   * contrast against the lime itself on light surfaces; the lime
   * provides contrast against dark surfaces). */
  --lmcu-bp-focus:              var(--accent, #ffdd00);
  --lmcu-bp-focus-text:         var(--base,   #0b0c0c);

  /* --- Radii (use ACSS scale; fallback to flat) --- */
  --lmcu-bp-radius-sm: var(--radius-xs, 0);
  --lmcu-bp-radius-md: var(--radius,    0);
  --lmcu-bp-radius-lg: var(--radius-l,  0);

  /* --- Elevation ---
   * Subtle soft shadow for shade-driven structure (no 1px borders).
   * `shadow-overlay` detaches the sticky summary bar from scrolling
   * content; negative spread keeps it tight rather than diffuse. */
  --lmcu-bp-shadow-card:    var(--box-shadow-m, none);
  --lmcu-bp-shadow-overlay: 0 -8px 16px -8px rgba(15, 23, 42, .08);

  /* --- Chart palette — brand-derived for visual continuity --- */
  --lmcu-bp-chart-1: var(--secondary,          #475569);  /* navy   */
  --lmcu-bp-chart-2: var(--tertiary-semi-dark, #0891b2);  /* teal   */
  --lmcu-bp-chart-3: var(--tertiary-dark,      #059669);  /* dark teal */
  --lmcu-bp-chart-4: var(--accent,             #d97706);  /* lime   */
  --lmcu-bp-chart-5: var(--primary,            #7c3aed);  /* red    */
  --lmcu-bp-chart-6: var(--accent-semi-dark,   #db2777);  /* olive  */
  --lmcu-bp-chart-7: var(--base-semi-light,    #0d9488);  /* warm grey */

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

/* Shell-only properties — must NOT cascade onto modal/toast siblings,
 * which would constrain their width and clip their overflow. */
.lmcu-budget-planner {
  font-family: var(--lmcu-bp-font-family);
  font-size:   var(--lmcu-bp-font-size);
  color:       var(--lmcu-bp-text);
  background:  var(--lmcu-bp-surface);
  border-radius: var(--lmcu-bp-radius-lg);
  box-shadow:    var(--lmcu-bp-shadow-card);
  max-width: var(--lmcu-bp-max-width);
  margin: 0 auto;
  overflow: hidden;
}

/* Same scope as the variable declarations above — modal and toast
 * live as DOM siblings of .lmcu-budget-planner, so their descendants need
 * box-sizing too or width:100% inputs overflow. */
:where(.lmcu-budget-planner, .lmcu-bp-modal, .lmcu-bp-toast, .lmcu-bp-print-root) *,
:where(.lmcu-budget-planner, .lmcu-bp-modal, .lmcu-bp-toast, .lmcu-bp-print-root) *::before,
:where(.lmcu-budget-planner, .lmcu-bp-modal, .lmcu-bp-toast, .lmcu-bp-print-root) *::after {
  box-sizing: border-box;
}
/* :where() drops the specificity to (0,0,1) so class-based colour rules
 * (.lmcu-bp-btn--primary, .lmcu-bp-welcome__cta etc.) actually take effect. Without
 * it this would be (0,1,1) and the `color: inherit` would override every
 * explicit-coloured button inside the planner. */
:where(.lmcu-budget-planner) button { font: inherit; cursor: pointer; color: inherit; }
.lmcu-budget-planner input, .lmcu-budget-planner select, .lmcu-budget-planner textarea {
  font: inherit;
  color: inherit;
}

/* ---------- Header ---------- */
.lmcu-bp-top {
  padding: calc(env(safe-area-inset-top) + 14px) 18px 14px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  background: var(--lmcu-bp-primary);
  color: var(--lmcu-bp-primary-contrast);
}
.lmcu-bp-top__brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600;
}
.lmcu-bp-top__logo {
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(255,255,255,.15);
  display: grid; place-items: center;
  font-weight: 700;
}
.lmcu-bp-top__help {
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  opacity: .9;
}

/* ---------- Top-level tabs (Your details / Your summary) ----------
 * Persistent two-way switch between the data-entry view and the
 * summary view. Sits above the section pills inside the planner
 * shell. Hidden on the welcome screen.
 */
.lmcu-bp-tabs {
  display: flex;
  background: var(--lmcu-bp-surface);
  /* The active-tab 2px primary underline carries the structure;
   * no full-width baseline rule needed. */
  padding: 0 8px;
  gap: 0;
}
.lmcu-bp-tab {
  flex: 1;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 14px 8px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--lmcu-bp-text-muted);
  cursor: pointer;
  transition: color var(--lmcu-bp-transition), border-color var(--lmcu-bp-transition), background var(--lmcu-bp-transition);
  min-height: 48px;
}
.lmcu-bp-tab:hover {
  color: var(--lmcu-bp-text);
  background: var(--lmcu-bp-surface-muted);
}
.lmcu-bp-tab[aria-current="page"] {
  color: var(--lmcu-bp-text);
  font-weight: 600;
  border-bottom-color: var(--lmcu-bp-primary);
}

/* ---------- Progress pills ---------- */
.lmcu-bp-pills {
  position: sticky; top: 0; z-index: 5;
  background: var(--lmcu-bp-surface);
  padding: 10px 12px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}
.lmcu-bp-pills::-webkit-scrollbar { display: none; }
.lmcu-bp-pills__row { display: flex; gap: 6px; min-width: max-content; }
.lmcu-bp-pill {
  background: var(--lmcu-bp-surface-muted);
  border: 0;
  color: var(--lmcu-bp-text-muted);
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--lmcu-bp-transition), color var(--lmcu-bp-transition);
  display: inline-flex; align-items: center; gap: 6px;
}
.lmcu-bp-pill:hover { background: var(--lmcu-bp-surface-inset); color: var(--lmcu-bp-text); }
.lmcu-bp-pill[aria-current="step"] {
  background: var(--lmcu-bp-primary);
  color: var(--lmcu-bp-primary-contrast);
}
.lmcu-bp-pill[data-complete="true"]:not([aria-current="step"]) {
  background: var(--lmcu-bp-surface-inset);
  color: var(--lmcu-bp-text);
}
.lmcu-bp-pill__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .45;
}
.lmcu-bp-pill__check {
  width: 14px; height: 14px;
  display: none;
  color: var(--lmcu-bp-success);
}
/* Switch dot → check when the pill represents a section the user
 * has put values into. Active pill keeps the check but flips it to
 * white (currentColor on the primary background). */
.lmcu-bp-pill[data-complete="true"] .lmcu-bp-pill__dot   { display: none; }
.lmcu-bp-pill[data-complete="true"] .lmcu-bp-pill__check { display: inline-block; }
.lmcu-bp-pill[aria-current="step"] .lmcu-bp-pill__check  { color: currentColor; }

/* ---------- Main content ---------- */
.lmcu-bp-main { padding: 20px; padding-bottom: 180px; }

.lmcu-bp-section-head { margin: 0 0 20px; }
.lmcu-bp-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--lmcu-bp-text-muted);
}
.lmcu-bp-eyebrow .lmcu-bp-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.lmcu-bp-section-head h1 {
  margin: 8px 0 6px;
  font-size: 22px; line-height: 1.25; font-weight: 700;
  color: var(--lmcu-bp-text);
}
.lmcu-bp-section-head p { margin: 0; color: var(--lmcu-bp-text-muted); font-size: 15px; }

/* ---------- Category groups ----------
 * Tinted panels rather than outlined cards — structure comes from the
 * background shade against the planner shell, not a 1px border. */
.lmcu-bp-cat {
  background: var(--lmcu-bp-surface-muted);
  border-radius: var(--lmcu-bp-radius-md);
  margin-bottom: 12px;
  overflow: hidden;
}
.lmcu-bp-cat__head {
  width: 100%;
  background: transparent; border: 0;
  padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  text-align: left;
  font-size: 15px; font-weight: 600;
  transition: background var(--lmcu-bp-transition);
}
.lmcu-bp-cat__head:hover { background: var(--lmcu-bp-surface-inset); }
.lmcu-bp-cat__meta {
  display: flex; align-items: center; gap: 10px;
  color: var(--lmcu-bp-text-muted); font-size: 13px; font-weight: 500;
}
.lmcu-bp-cat__total { font-variant-numeric: tabular-nums; color: var(--lmcu-bp-text); font-weight: 600; }
.lmcu-bp-cat__chev {
  width: 20px; height: 20px;
  transition: transform var(--lmcu-bp-transition);
  color: var(--lmcu-bp-text-faint);
}
.lmcu-bp-cat[data-open="true"] .lmcu-bp-cat__chev { transform: rotate(180deg); }
.lmcu-bp-cat__body { display: none; padding: 0 16px 12px; }
.lmcu-bp-cat[data-open="true"] .lmcu-bp-cat__body { display: block; }

/* ---------- Field row ----------
 * Mobile (<481px): label on top, inputs below filling the row.
 * Tablet+ (≥481px): label on the left, money+freq cluster anchored
 * to the right with the money input at a fixed 140px (enough for
 * £999,999 — wider than that and you have bigger problems than
 * input width). The visual gain: less wasted whitespace on
 * desktop, and the input no longer over-promises by suggesting
 * "we expect a much bigger number than you'll typically enter". */
.lmcu-bp-field {
  padding: 12px 0;
  /* Within a tinted category panel the field separators read clearly
   * as a slight tone shift rather than a 1px line. */
  box-shadow: inset 0 1px 0 var(--lmcu-bp-surface-inset);
}
.lmcu-bp-field:first-child { box-shadow: none; }
.lmcu-bp-field__label {
  display: block;
  font-size: 14px; font-weight: 500;
  margin-bottom: 8px;
}
.lmcu-bp-field__help {
  display: block;
  color: var(--lmcu-bp-text-muted);
  font-size: 13px; font-weight: 400;
  margin-top: 2px;
}
.lmcu-bp-field__inputs {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lmcu-bp-field__row {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.lmcu-bp-field__hint {
  font-size: 12px;
  color: var(--lmcu-bp-text-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding-right: 2px;
}

@media (min-width: 481px) {
  .lmcu-bp-field {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 16px;
  }
  .lmcu-bp-field__label { margin-bottom: 0; }
}

.lmcu-bp-money {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
}
@media (min-width: 481px) {
  .lmcu-bp-money { flex: 0 0 140px; }
}
.lmcu-bp-money__prefix {
  position: absolute; left: 14px;
  color: var(--lmcu-bp-text-muted);
  font-weight: 500;
  pointer-events: none;
}
.lmcu-bp-money input {
  width: 100%;
  height: 48px;
  padding: 0 14px 0 28px;
  /* Inputs keep a border for affordance, but lighter than the previous
   * `border-strong` so they don't compete with the now-tinted panel. */
  border: 1px solid var(--lmcu-bp-border);
  border-radius: var(--lmcu-bp-radius-sm);
  background: var(--lmcu-bp-surface);
  font-variant-numeric: tabular-nums;
  text-align: right;
  transition: border-color var(--lmcu-bp-transition), box-shadow var(--lmcu-bp-transition);
}
.lmcu-bp-money input:hover { border-color: var(--lmcu-bp-border-strong); }
.lmcu-bp-money input::placeholder { color: var(--lmcu-bp-text-faint); }
.lmcu-bp-money input:focus {
  outline: 3px solid var(--lmcu-bp-focus);
  outline-offset: 0;
  box-shadow: inset 0 0 0 2px var(--lmcu-bp-focus-text);
}

.lmcu-bp-freq {
  height: 48px;
  padding: 0 30px 0 12px;
  border: 1px solid var(--lmcu-bp-border);
  border-radius: var(--lmcu-bp-radius-sm);
  background: var(--lmcu-bp-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 10px center;
  -webkit-appearance: none;
  appearance: none;
  font-size: 14px;
  color: var(--lmcu-bp-text-muted);
  min-width: 110px;
}
.lmcu-bp-freq:focus {
  outline: 3px solid var(--lmcu-bp-focus);
  outline-offset: 0;
  box-shadow: inset 0 0 0 2px var(--lmcu-bp-focus-text);
}

/* ---------- Sticky summary bar ---------- */
.lmcu-bp-sticky {
  position: sticky; bottom: 0;
  background: var(--lmcu-bp-surface);
  /* Detached from scrolling content via shadow only — no top border. */
  box-shadow: var(--lmcu-bp-shadow-overlay);
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  font-variant-numeric: tabular-nums;
}
.lmcu-bp-sticky__cell { text-align: center; }
.lmcu-bp-sticky__label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--lmcu-bp-text-faint);
}
.lmcu-bp-sticky__value { font-size: 16px; font-weight: 700; margin-top: 2px; }
.lmcu-bp-sticky__value.income   { color: var(--lmcu-bp-success); }
.lmcu-bp-sticky__value.outgoing { color: var(--lmcu-bp-text); }
.lmcu-bp-sticky__value.balance.positive { color: var(--lmcu-bp-success); }
.lmcu-bp-sticky__value.balance.negative { color: var(--lmcu-bp-danger); }

/* ---------- Actions ---------- */
.lmcu-bp-actions {
  padding: 12px 16px calc(env(safe-area-inset-bottom) + 12px);
  background: var(--lmcu-bp-surface);
  /* Filled buttons carry the visual weight; no top border needed. */
  display: flex;
  gap: 10px;
}
.lmcu-bp-btn {
  flex: 1;
  height: 48px;
  border-radius: var(--lmcu-bp-radius-md);
  border: 1px solid transparent;
  font-size: 15px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  transition: background var(--lmcu-bp-transition), transform 60ms ease, border-color var(--lmcu-bp-transition);
}
.lmcu-bp-btn:active { transform: scale(.98); }
.lmcu-bp-btn--primary { background: var(--lmcu-bp-primary); color: var(--lmcu-bp-primary-contrast); }
.lmcu-bp-btn--primary:hover { background: var(--lmcu-bp-primary-hover); }
.lmcu-bp-btn--ghost {
  background: var(--lmcu-bp-surface-muted);
  border-color: transparent;
  color: var(--lmcu-bp-text);
}
.lmcu-bp-btn--ghost:hover { background: var(--lmcu-bp-surface-inset); }
.lmcu-bp-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* (.lmcu-bp-skip-row / .lmcu-bp-skip-summary removed — the top-level
 * "Your summary" tab handles bailing out of the wizard. The
 * Back/Next pair stays in the footer for adjacent-step nav.) */

/* ---------- Summary ---------- */
.lmcu-bp-hero {
  background: var(--lmcu-bp-surface-muted);
  padding: 20px;
  border-radius: var(--lmcu-bp-radius-md);
  margin-bottom: 20px;
  text-align: center;
}
.lmcu-bp-hero__label {
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--lmcu-bp-text-muted);
}
.lmcu-bp-hero__value {
  font-size: 34px; font-weight: 700;
  margin: 6px 0 4px;
  font-variant-numeric: tabular-nums;
}
.lmcu-bp-hero__value.positive { color: var(--lmcu-bp-success); }
.lmcu-bp-hero__value.negative { color: var(--lmcu-bp-danger); }
.lmcu-bp-hero__verdict { font-size: 14px; color: var(--lmcu-bp-text-muted); }

/* ---------- Donut chart ---------- */
/* .lmcu-bp-donut-wrap and .lmcu-bp-compare are now <details class="lmcu-bp-acc"> —
 * the container styling lives on .lmcu-bp-acc above. These class hooks stay
 * for theme overrides if anyone wants to target them individually. */
.lmcu-bp-donut {
  position: relative;
  width: 220px; max-width: 100%;
  aspect-ratio: 1;
  margin: 0 auto 20px;
}
.lmcu-bp-donut svg { width: 100%; height: 100%; display: block; }
.lmcu-bp-donut__seg {
  fill: none;
  stroke-width: 22;
  transition: stroke-dasharray var(--lmcu-bp-transition);
}
.lmcu-bp-donut__track {
  fill: none;
  stroke: var(--lmcu-bp-surface-inset);
  stroke-width: 22;
}
.lmcu-bp-donut__center {
  position: absolute; inset: 0;
  display: grid; place-content: center;
  text-align: center;
  pointer-events: none;
}
.lmcu-bp-donut__center-label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--lmcu-bp-text-faint);
}
.lmcu-bp-donut__center-value {
  font-size: 20px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.lmcu-bp-donut__center-sub { font-size: 12px; color: var(--lmcu-bp-text-muted); margin-top: 2px; }
.lmcu-bp-legend {
  list-style: none;
  margin: 0; padding: 0;
  display: grid; gap: 2px;
}
.lmcu-bp-legend__item {
  display: grid;
  grid-template-columns: 14px 1fr auto 42px;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  /* Soft inset row separator instead of a 1px line. */
  box-shadow: inset 0 1px 0 var(--lmcu-bp-surface-inset);
  font-size: 14px;
}
.lmcu-bp-legend__item:first-child { box-shadow: none; }
.lmcu-bp-legend__swatch {
  width: 10px; height: 10px; border-radius: 2px;
}
.lmcu-bp-legend__value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.lmcu-bp-legend__pct {
  color: var(--lmcu-bp-text-muted);
  font-size: 13px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- Household step controls ---------- */
.lmcu-bp-stepper {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-start;
}
.lmcu-bp-stepper__btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--lmcu-bp-surface-muted);
  font-size: 20px; font-weight: 600;
  color: var(--lmcu-bp-text);
  display: grid; place-items: center;
  line-height: 1;
  transition: background var(--lmcu-bp-transition);
}
.lmcu-bp-stepper__btn:hover { background: var(--lmcu-bp-surface-inset); }
.lmcu-bp-stepper__btn:active { transform: scale(.95); }
.lmcu-bp-stepper__value {
  min-width: 52px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--lmcu-bp-text);
}
.lmcu-bp-select {
  width: 100%;
  height: 48px;
  padding: 0 40px 0 14px;
  border: 1px solid var(--lmcu-bp-border);
  border-radius: var(--lmcu-bp-radius-sm);
  background: var(--lmcu-bp-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 14px center;
  -webkit-appearance: none;
  appearance: none;
  color: var(--lmcu-bp-text);
}
.lmcu-bp-select:focus {
  outline: 3px solid var(--lmcu-bp-focus);
  outline-offset: 0;
  box-shadow: inset 0 0 0 2px var(--lmcu-bp-focus-text);
}

/* ---------- Help signposts ----------
 * Shown on the summary when the user has a shortfall or any red
 * headline indicator. Visually distinct from the donut/compare
 * cards — uses the info tint so it reads as "supportive resource"
 * not "data". Tone is opt-in: "if you'd like a hand", not "you
 * need help".
 */
.lmcu-bp-help {
  background: var(--lmcu-bp-info-bg);
  border: 1px solid color-mix(in srgb, var(--lmcu-bp-info) 20%, transparent);
  border-radius: var(--lmcu-bp-radius-md);
  padding: 18px 20px;
  margin: 16px 0 20px;
}
.lmcu-bp-help__title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--lmcu-bp-text);
  line-height: 1.3;
}
.lmcu-bp-help__lede {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--lmcu-bp-text-muted);
  line-height: 1.5;
}
.lmcu-bp-help__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.lmcu-bp-help__item {
  /* White card sitting on the info-tinted help panel — natural shade
   * differentiation, no outline needed. */
  background: var(--lmcu-bp-surface);
  border-radius: var(--lmcu-bp-radius-sm);
  padding: 12px 14px;
}
.lmcu-bp-help__name {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: var(--lmcu-bp-info);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lmcu-bp-help__name:hover { color: color-mix(in srgb, var(--lmcu-bp-info) 80%, var(--lmcu-bp-text)); }
.lmcu-bp-help__desc {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--lmcu-bp-text);
  line-height: 1.45;
}
.lmcu-bp-help__phone {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--lmcu-bp-text-muted);
}
.lmcu-bp-help__phone a {
  color: var(--lmcu-bp-text);
  font-weight: 600;
  text-decoration: none;
}
.lmcu-bp-help__phone a:hover { text-decoration: underline; }

/* ---------- Accordions ----------
 * Built on native <details>/<summary> for keyboard a11y (free Enter/Space
 * toggle, native screen-reader behaviour). Native disclosure marker is
 * hidden; we render our own chevron that rotates on open.
 *
 * The body open/close is allowed to snap — animating <details> reliably
 * across browsers needs interpolate-size + ::details-content (Chrome 129+
 * only) or JS-driven height transitions. The chevron rotation provides
 * the feedback without the cross-browser pain.
 */
.lmcu-bp-acc {
  /* Tinted panel — same treatment as category groups. Structure
   * comes from the shade against the planner shell. */
  background: var(--lmcu-bp-surface-muted);
  border-radius: var(--lmcu-bp-radius-md);
  margin-bottom: 12px;
  overflow: hidden;
}
.lmcu-bp-acc__head {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--lmcu-bp-text-muted);
  transition: background var(--lmcu-bp-transition);
}
.lmcu-bp-acc__head::-webkit-details-marker { display: none; }
.lmcu-bp-acc__head:hover { background: var(--lmcu-bp-surface-inset); }
/* Title is now an <h3> for screen-reader heading navigation. Reset
 * default heading typography so it inherits from the summary head. */
.lmcu-bp-acc__title {
  flex: 1;
  margin: 0;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
}
.lmcu-bp-acc__chev {
  width: 16px; height: 16px;
  color: var(--lmcu-bp-text-muted);
  transition: transform var(--lmcu-bp-transition);
  flex-shrink: 0;
}
.lmcu-bp-acc[open] .lmcu-bp-acc__chev { transform: rotate(180deg); }
.lmcu-bp-acc__body {
  padding: 4px 20px 20px;
}

/* ---------- How you compare panel ---------- */
.lmcu-bp-compare__lede {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--lmcu-bp-text-muted);
  line-height: 1.5;
}
/* .lmcu-bp-compare class hook is preserved for theme overrides; the surface
 * styling now comes from .lmcu-bp-acc above. The old .lmcu-bp-compare__head was
 * an internal title — the title is now the <summary>, so those rules
 * are no longer needed. */

.lmcu-bp-indicators {
  display: grid;
  gap: 8px;
  margin-bottom: 20px;
}
@media (min-width: 481px) {
  .lmcu-bp-indicators { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
.lmcu-bp-headline {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-radius: var(--lmcu-bp-radius-md);
  /* Tinted tile + a single accent edge in the status colour — the
   * left edge stays since it's a data signal (green/amber/red), not
   * a structural border. */
  background: var(--lmcu-bp-surface-muted);
  border-left: 3px solid var(--lmcu-bp-border-strong);
}
.lmcu-bp-headline__label {
  font-size: 13px; font-weight: 500;
}
.lmcu-bp-headline__ratio {
  font-size: 13px;
  color: var(--lmcu-bp-text);
  margin-top: 4px;
  font-weight: 500;
}
.lmcu-bp-headline__note {
  font-size: 12px; color: var(--lmcu-bp-text-muted); margin-top: 4px;
}
.lmcu-bp-headline__value {
  font-size: 16px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.lmcu-bp-headline.green  { border-left-color: var(--lmcu-bp-success); }
.lmcu-bp-headline.amber  { border-left-color: var(--lmcu-bp-warning); }
.lmcu-bp-headline.red    { border-left-color: var(--lmcu-bp-danger); }
.lmcu-bp-headline.green  .lmcu-bp-headline__value { color: var(--lmcu-bp-success); }
.lmcu-bp-headline.amber  .lmcu-bp-headline__value { color: var(--lmcu-bp-warning); }
.lmcu-bp-headline.red    .lmcu-bp-headline__value { color: var(--lmcu-bp-danger); }

.lmcu-bp-cmp-row {
  padding: 12px 0;
  /* Soft inset divider rather than a 1px line. */
  box-shadow: inset 0 1px 0 var(--lmcu-bp-surface-inset);
}
.lmcu-bp-cmp-row:first-of-type { box-shadow: none; padding-top: 14px; margin-top: 8px; }
.lmcu-bp-cmp-row__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: baseline;
  font-size: 14px; font-weight: 600;
  margin-bottom: 6px;
}
.lmcu-bp-cmp-row__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--lmcu-bp-border-strong);
}
.lmcu-bp-cmp-row.green  .lmcu-bp-cmp-row__dot { background: var(--lmcu-bp-success); }
.lmcu-bp-cmp-row.amber  .lmcu-bp-cmp-row__dot { background: var(--lmcu-bp-warning); }
.lmcu-bp-cmp-row.red    .lmcu-bp-cmp-row__dot { background: var(--lmcu-bp-danger); }
.lmcu-bp-cmp-row__amount {
  font-variant-numeric: tabular-nums;
  color: var(--lmcu-bp-text);
}
.lmcu-bp-cmp-row__meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--lmcu-bp-text-muted);
  margin-top: 4px;
}
.lmcu-bp-cmp-bar {
  position: relative;
  height: 8px;
  background: var(--lmcu-bp-surface-inset);
  border-radius: 999px;
  overflow: hidden;
}
.lmcu-bp-cmp-bar__fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--lmcu-bp-border-strong);
  border-radius: 999px;
  transition: width var(--lmcu-bp-transition);
}
.lmcu-bp-cmp-row.green .lmcu-bp-cmp-bar__fill { background: var(--lmcu-bp-success); }
.lmcu-bp-cmp-row.amber .lmcu-bp-cmp-bar__fill { background: var(--lmcu-bp-warning); }
.lmcu-bp-cmp-row.red   .lmcu-bp-cmp-bar__fill { background: var(--lmcu-bp-danger); }

/* "Looks lower than typical" callout — gentle warning tint, not red.
 * Encourages the user to re-check rather than implying they're wrong. */
.lmcu-bp-cmp-row__hint {
  margin: 10px 0 2px;
  padding: 10px 12px;
  background: var(--lmcu-bp-warning-bg);
  border-left: 3px solid var(--lmcu-bp-warning);
  font-size: 13px;
  line-height: 1.45;
  color: var(--lmcu-bp-text);
}
.lmcu-bp-cmp-row__hint strong { display: block; margin-bottom: 2px; font-weight: 600; }
.lmcu-bp-cmp-bar__benchmark {
  position: absolute;
  top: -2px; bottom: -2px;
  width: 2px;
  background: var(--lmcu-bp-text-muted);
  opacity: .6;
}

.lmcu-bp-compare__source {
  margin-top: 16px;
  padding-top: 12px;
  /* Soft inset divider rather than a dashed line. */
  box-shadow: inset 0 1px 0 var(--lmcu-bp-surface-inset);
  font-size: 11px;
  color: var(--lmcu-bp-text-muted);
  line-height: 1.5;
}
.lmcu-bp-compare__source a { color: inherit; }

.lmcu-bp-compare__empty {
  font-size: 13px;
  color: var(--lmcu-bp-text-muted);
  padding: 8px 0;
}

/* ---------- Export buttons (Print / Save as PDF) ---------- */
.lmcu-bp-export {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 24px;
}
.lmcu-bp-export__btn {
  min-height: 44px;
  background: var(--lmcu-bp-surface-muted);
  border: 1px solid transparent;
  border-radius: var(--lmcu-bp-radius-md);
  padding: 10px 14px;
  font-size: 14px; font-weight: 500;
  color: var(--lmcu-bp-text);
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  transition: background var(--lmcu-bp-transition), border-color var(--lmcu-bp-transition);
}
.lmcu-bp-export__btn:hover {
  background: var(--lmcu-bp-surface-inset);
}
.lmcu-bp-export__btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.lmcu-bp-export__hint {
  font-size: 12px;
  color: var(--lmcu-bp-text-muted);
  margin: -16px 0 24px;
  text-align: center;
}

/* ---------- Welcome splash ----------
 * Pre-wizard reassurance card. Shown on cold start only — anyone
 * resuming a draft (URL token, hash, or localStorage) skips it
 * because they've already started.
 *
 * Designed for users who may be anxious about engaging with a
 * financial tool: "no wrong answers", "save any time", "private".
 */
.lmcu-bp-welcome {
  padding: 28px 20px 20px;
  text-align: center;
}
@media (min-width: 481px) {
  .lmcu-bp-welcome { padding: 40px 32px 28px; }
}
.lmcu-bp-welcome h1 {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 12px;
  line-height: 1.2;
  color: var(--lmcu-bp-text);
}
.lmcu-bp-welcome__lede {
  font-size: 16px;
  color: var(--lmcu-bp-text-muted);
  margin: 0 auto 28px;
  line-height: 1.5;
  max-width: 38ch;
}
.lmcu-bp-welcome__points {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 8px;
  text-align: left;
}
.lmcu-bp-welcome__points li {
  padding: 14px 16px;
  background: var(--lmcu-bp-surface-muted);
  border-radius: var(--lmcu-bp-radius-md);
  font-size: 14px;
  line-height: 1.45;
  color: var(--lmcu-bp-text-muted);
}
.lmcu-bp-welcome__points li strong {
  display: block;
  font-weight: 600;
  font-size: 15px;
  color: var(--lmcu-bp-text);
  margin-bottom: 2px;
}
.lmcu-bp-welcome__cta {
  background: var(--lmcu-bp-primary);
  color: var(--lmcu-bp-primary-contrast);
  border: 0;
  border-radius: var(--lmcu-bp-radius-md);
  padding: 0 28px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  max-width: 320px;
  min-height: 52px;
  transition: background var(--lmcu-bp-transition), transform 60ms ease;
}
.lmcu-bp-welcome__cta:hover { background: var(--lmcu-bp-primary-hover); }
.lmcu-bp-welcome__cta:active { transform: scale(.98); }

/* "Welcome back" two-button row: Start over (ghost) + Pick up (primary).
 * Stacks on mobile, side-by-side on tablet+. Primary is wider so it
 * reads as the recommended action without crowding the secondary. */
.lmcu-bp-welcome__cta-pair {
  display: grid;
  gap: 10px;
  margin: 0 auto 8px;
  max-width: 420px;
}
@media (min-width: 481px) {
  .lmcu-bp-welcome__cta-pair { grid-template-columns: auto 1fr; }
}
.lmcu-bp-welcome__cta-pair .lmcu-bp-btn { min-height: 52px; font-size: 15px; }
.lmcu-bp-welcome__resume {
  display: block;
  margin: 14px auto 0;
  background: transparent;
  border: 0;
  color: var(--lmcu-bp-text-muted);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}
.lmcu-bp-welcome__resume:hover { color: var(--lmcu-bp-text); }
.lmcu-bp-welcome__trust {
  margin: 28px 0 0;
  padding-top: 20px;
  /* Soft inset divider above the trust line. */
  box-shadow: inset 0 1px 0 var(--lmcu-bp-surface-inset);
  font-size: 12px;
  color: var(--lmcu-bp-text-faint);
  line-height: 1.5;
}

/* ---------- Recipient selector (Send a copy to:) ---------- */
.lmcu-bp-recipients {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}
@media (min-width: 481px) {
  .lmcu-bp-recipients { grid-template-columns: repeat(4, 1fr); }
}
.lmcu-bp-recipient-btn {
  min-height: 44px;
  padding: 10px 12px;
  background: var(--lmcu-bp-surface-muted);
  border: 1px solid transparent;
  border-radius: var(--lmcu-bp-radius-sm);
  color: var(--lmcu-bp-text);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  transition: background var(--lmcu-bp-transition), border-color var(--lmcu-bp-transition), transform 60ms ease;
}
.lmcu-bp-recipient-btn:hover { background: var(--lmcu-bp-surface-inset); }
.lmcu-bp-recipient-btn:active { transform: scale(.98); }
.lmcu-bp-recipient-btn.active {
  background: var(--lmcu-bp-primary);
  color: var(--lmcu-bp-primary-contrast);
  border-color: var(--lmcu-bp-primary);
}

/* ---------- Send-a-copy CTA + form-actions row ---------- */
.lmcu-bp-send-cta {
  width: 100%;
  height: 56px;
  font-size: 16px;
  margin: 16px 0 8px;
}
.lmcu-bp-send-cta:hover { background: var(--lmcu-bp-primary-hover); }

.lmcu-bp-send-form { margin-top: 0; }
.lmcu-bp-form__actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.lmcu-bp-form__actions .lmcu-bp-btn { flex: 1; min-height: 48px; }

/* ---------- Step-change transition ----------
 * Subtle fade-in on the main content as the wizard advances or the
 * summary appears. Triggered fresh on each render() by the JS pulsing
 * the lmcu-bp-main--enter class. Honours prefers-reduced-motion below. */
.lmcu-bp-main--enter {
  animation: lmcu-bp-main-enter 220ms ease-out;
}
@keyframes lmcu-bp-main-enter {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Form ---------- */
.lmcu-bp-form { margin-top: 20px; }
.lmcu-bp-form h2 {
  font-size: 14px; font-weight: 600;
  margin: 0 0 12px;
  color: var(--lmcu-bp-text-muted);
  text-transform: uppercase; letter-spacing: .06em;
}
.lmcu-bp-form-field { margin-bottom: 12px; }
.lmcu-bp-form-field label {
  display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px;
}
.lmcu-bp-form-field input, .lmcu-bp-form-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--lmcu-bp-border);
  border-radius: var(--lmcu-bp-radius-sm);
  background: var(--lmcu-bp-surface);
}
.lmcu-bp-form-field input:focus, .lmcu-bp-form-field textarea:focus {
  outline: 3px solid var(--lmcu-bp-focus);
  outline-offset: 0;
  box-shadow: inset 0 0 0 2px var(--lmcu-bp-focus-text);
}
/* Inline validation error styling. The aria-invalid attribute drives
 * the visual state so it stays in lockstep with the screen-reader
 * cue. Colour-only is not enough for WCAG, so we also bump border
 * weight and add a left bar on the error message. */
.lmcu-bp-form-field input[aria-invalid="true"],
.lmcu-bp-form-field textarea[aria-invalid="true"],
#lmcu-bp-member[aria-invalid="true"] {
  border-color: var(--lmcu-bp-danger);
  border-width: 2px;
}
.lmcu-bp-field__error {
  margin: 6px 0 0;
  padding: 6px 0 6px 10px;
  border-left: 3px solid var(--lmcu-bp-danger);
  font-size: 13px;
  line-height: 1.4;
  color: var(--lmcu-bp-danger);
  font-weight: 500;
}
.lmcu-bp-form-field textarea { min-height: 80px; resize: vertical; }
.lmcu-bp-checkbox {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13px; color: var(--lmcu-bp-text-muted);
  padding: 8px 0;
}
.lmcu-bp-checkbox input { margin-top: 3px; }

/* ---------- Top-bar save controls ---------- */
.lmcu-bp-top__actions { display: flex; align-items: center; gap: 8px; }
.lmcu-bp-top__saved {
  font-size: 12px;
  color: currentColor;
  opacity: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity 260ms ease;
  pointer-events: none;
}
.lmcu-bp-top__saved.show { opacity: .8; }
.lmcu-bp-top__saved::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.lmcu-bp-top__save {
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  opacity: .9;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lmcu-bp-top__save svg { width: 14px; height: 14px; }

/* (The .lmcu-bp-banner styles for the old in-page resume banner have been
 * removed. Resume / start-fresh now lives inside the welcome splash
 * itself — see .lmcu-bp-welcome__cta-pair above.) */

/* ---------- Save modal ---------- */
.lmcu-bp-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: grid; place-items: end center;
  z-index: 200;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--lmcu-bp-transition);
}
.lmcu-bp-modal.show { opacity: 1; pointer-events: auto; }
@media (min-width: 641px) {
  .lmcu-bp-modal { place-items: center; padding: 24px; }
}
.lmcu-bp-modal__card {
  background: var(--lmcu-bp-surface);
  width: 100%;
  max-width: 480px;
  border-radius: var(--lmcu-bp-radius-lg) var(--lmcu-bp-radius-lg) 0 0;
  padding: 20px;
  padding-bottom: calc(env(safe-area-inset-bottom) + 20px);
  transform: translateY(20px);
  transition: transform var(--lmcu-bp-transition);
}
.lmcu-bp-modal.show .lmcu-bp-modal__card { transform: translateY(0); }
@media (min-width: 641px) {
  .lmcu-bp-modal__card {
    border-radius: var(--lmcu-bp-radius-lg);
    padding-bottom: 20px;
  }
}
.lmcu-bp-modal__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 14px;
}
.lmcu-bp-modal__head h2 { margin: 0; font-size: 18px; font-weight: 700; }
.lmcu-bp-modal__close {
  border: 0; background: transparent; cursor: pointer;
  color: var(--lmcu-bp-text-muted); padding: 0;
  width: 32px; height: 32px;
  border-radius: var(--lmcu-bp-radius-sm);
  display: grid; place-items: center;
}
.lmcu-bp-modal__close:hover { background: var(--lmcu-bp-surface-muted); color: var(--lmcu-bp-text); }
.lmcu-bp-modal__close svg { width: 18px; height: 18px; }
.lmcu-bp-modal__intro {
  color: var(--lmcu-bp-text-muted);
  font-size: 14px;
  margin: 0 0 16px;
}

.lmcu-bp-linkbox {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.lmcu-bp-linkbox input {
  flex: 1; min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--lmcu-bp-border);
  border-radius: var(--lmcu-bp-radius-sm);
  background: var(--lmcu-bp-surface-muted);
  font-size: 13px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.lmcu-bp-linkbox button {
  padding: 10px 14px;
  border: 1px solid var(--lmcu-bp-border);
  border-radius: var(--lmcu-bp-radius-sm);
  background: var(--lmcu-bp-surface);
  font-weight: 600;
  font-size: 13px;
}
.lmcu-bp-linkbox button:hover { background: var(--lmcu-bp-surface-muted); }
.lmcu-bp-linkbox button.copied {
  color: var(--lmcu-bp-success);
  border-color: var(--lmcu-bp-success);
}

.lmcu-bp-modal__divider {
  position: relative;
  text-align: center;
  margin: 16px 0;
  color: var(--lmcu-bp-text-faint);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.lmcu-bp-modal__divider::before,
.lmcu-bp-modal__divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 30px);
  height: 1px;
  background: var(--lmcu-bp-border);
}
.lmcu-bp-modal__divider::before { left: 0; }
.lmcu-bp-modal__divider::after { right: 0; }

/* ---------- Send-modal success state ----------
 * Replaces the form contents after a successful submission. Stays
 * visible until the user closes the modal — replaces the transient
 * toast that previously gave the only confirmation. */
.lmcu-bp-modal--success .lmcu-bp-modal__intro { display: none; }

.lmcu-bp-send-success {
  text-align: center;
  padding: 4px 4px 8px;
}
.lmcu-bp-send-success__icon {
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--lmcu-bp-success-bg);
  color: var(--lmcu-bp-success);
  display: grid; place-items: center;
}
.lmcu-bp-send-success__icon svg { width: 28px; height: 28px; }
.lmcu-bp-send-success__lede {
  margin: 0 auto 20px;
  max-width: 36ch;
  color: var(--lmcu-bp-text-muted);
  font-size: 14px;
  line-height: 1.5;
}
.lmcu-bp-send-success__close {
  width: 100%;
  max-width: 240px;
  min-height: 48px;
}

/* ---------- Toast ---------- */
.lmcu-bp-toast {
  position: fixed;
  left: 50%; top: 20px;
  transform: translateX(-50%) translateY(-10px);
  background: var(--lmcu-bp-primary);
  color: var(--lmcu-bp-primary-contrast);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px; font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--lmcu-bp-transition), transform var(--lmcu-bp-transition);
  z-index: 100;
}
.lmcu-bp-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
 * Print-only layout
 * ============================================================
 * Rendered into the DOM by renderPrintRoot(). Hidden on screen;
 * becomes the only visible content when the user prints or
 * "saves as PDF" via the browser's print dialog.
 * ============================================================ */
.lmcu-bp-print-root { display: none; }

@media print {
  @page { size: A4; margin: 16mm; }

  /* Use the classic visibility trick — keeps DOM positions stable
     and avoids fighting with third-party theme print styles. */
  body * { visibility: hidden !important; }
  .lmcu-bp-print-root, .lmcu-bp-print-root * { visibility: visible !important; }
  .lmcu-bp-print-root {
    display: block !important;
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    background: #fff;
    color: #000;
    font-family: var(--lmcu-bp-font-family, sans-serif);
    font-size: 10.5pt;
    line-height: 1.35;
  }

  /* Neutralise any shadow/background from host theme */
  .lmcu-bp-print-root * {
    box-shadow: none !important;
    background: transparent !important;
  }
}

/* Print-only layout styles (applied both on-screen for debugging
   if you toggle display, and in print). */
.lmcu-bp-print-root header {
  border-bottom: 1px solid #000;
  padding-bottom: 10pt;
  margin-bottom: 14pt;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.lmcu-bp-print-root header h1 {
  font-size: 16pt;
  margin: 0;
  font-weight: 700;
}
.lmcu-bp-print-root header .lmcu-bp-print-meta {
  font-size: 9pt;
  color: #555;
  text-align: right;
}
.lmcu-bp-print-root header .lmcu-bp-print-meta strong { color: #000; }

/* Blocks — INCOME / EXPENDITURE, each with its subtotal at the end */
.lmcu-bp-print-block {
  margin-bottom: 18pt;
}
.lmcu-bp-print-block__head {
  font-size: 11pt;
  font-weight: 700;
  margin: 0 0 8pt;
  padding-bottom: 4pt;
  border-bottom: 1pt solid #000;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lmcu-bp-print-block__total {
  display: flex;
  justify-content: space-between;
  font-size: 11pt;
  font-weight: 700;
  margin-top: 10pt;
  padding: 6pt 0 4pt;
  border-top: 1pt solid #000;
  border-bottom: 3pt double #000;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  break-inside: avoid;
}

/* Sections (only rendered when the block has more than one) */
.lmcu-bp-print-section {
  break-inside: avoid-page;
  margin: 8pt 0 10pt;
}
.lmcu-bp-print-section__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 10pt;
  font-weight: 600;
  margin: 0 0 4pt;
  padding-bottom: 2pt;
  border-bottom: 0.5pt solid #999;
  font-variant-numeric: tabular-nums;
}

/* Categories and line items */
.lmcu-bp-print-cat {
  margin: 6pt 0 8pt;
  break-inside: avoid;
}
.lmcu-bp-print-cat__head {
  display: flex;
  justify-content: space-between;
  font-size: 9.5pt;
  font-weight: 600;
  color: #333;
  padding: 2pt 0;
  font-variant-numeric: tabular-nums;
}
.lmcu-bp-print-lines {
  list-style: none;
  margin: 0 0 0 12pt;
  padding: 0;
}
.lmcu-bp-print-line {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14pt;
  padding: 2pt 0;
  font-size: 9.5pt;
  font-variant-numeric: tabular-nums;
  break-inside: avoid;
}
.lmcu-bp-print-line__raw { color: #666; font-size: 8.5pt; min-width: 80pt; text-align: right; }
.lmcu-bp-print-line__monthly { min-width: 55pt; text-align: right; }

/* Final surplus / shortfall row — strongest visual weight */
.lmcu-bp-print-balance {
  display: flex;
  justify-content: space-between;
  font-size: 13pt;
  font-weight: 700;
  padding: 10pt 14pt;
  border: 1.5pt solid #000;
  margin-top: 18pt;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  break-inside: avoid;
}
.lmcu-bp-print-balance.positive { color: #047857; border-color: #047857; }
.lmcu-bp-print-balance.negative { color: #b91c1c; border-color: #b91c1c; }

.lmcu-bp-print-root footer {
  margin-top: 14pt;
  padding-top: 8pt;
  border-top: 0.5pt solid #999;
  font-size: 8pt;
  color: #666;
  display: flex;
  justify-content: space-between;
}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  :where(.lmcu-budget-planner, .lmcu-bp-modal, .lmcu-bp-toast) *,
  :where(.lmcu-budget-planner, .lmcu-bp-modal, .lmcu-bp-toast) *::before,
  :where(.lmcu-budget-planner, .lmcu-bp-modal, .lmcu-bp-toast) *::after {
    transition: none !important;
    animation: none !important;
  }
}
/* GDS-style focus ring. The outer outline gives visibility against any
 * background; the inset dark stroke ensures the focused element is
 * readable against the outline itself on light surfaces. */
:where(.lmcu-budget-planner, .lmcu-bp-modal, .lmcu-bp-toast) :focus-visible {
  outline: 3px solid var(--lmcu-bp-focus);
  outline-offset: 0;
  box-shadow: inset 0 0 0 2px var(--lmcu-bp-focus-text);
}

/* Forced-colors mode (Windows High Contrast). System colours replace
 * our palette, so we use Highlight/CanvasText to keep state changes
 * legible. Charts opt out via forced-color-adjust so segment colours
 * survive — losing them would lose the data semantics. */
@media (forced-colors: active) {
  :where(.lmcu-budget-planner, .lmcu-bp-modal, .lmcu-bp-toast) :focus-visible {
    outline-color: Highlight;
    box-shadow: inset 0 0 0 2px CanvasText;
  }
  .lmcu-bp-tab[aria-current="page"] {
    border-bottom-color: Highlight;
  }
  .lmcu-bp-pill[aria-current="step"],
  .lmcu-bp-recipient-btn.active,
  .lmcu-bp-btn--primary {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
  .lmcu-bp-pill[data-complete="true"] .lmcu-bp-pill__check { color: Highlight; }
  .lmcu-bp-headline.green  { border-left-color: CanvasText; }
  .lmcu-bp-headline.amber  { border-left-color: CanvasText; }
  .lmcu-bp-headline.red    { border-left-color: Mark; }
  .lmcu-bp-cmp-row__hint   { border-left-color: Mark; }
  .lmcu-bp-field__error    { border-left-color: Mark; color: Mark; }
  .lmcu-bp-donut__seg, .lmcu-bp-cmp-bar__fill, .lmcu-bp-legend__swatch {
    forced-color-adjust: none;
  }
}