/* ==========================================================================
   Blackburn Retirement Income Planner — Stylesheet
   Calm, warm, trustworthy, spacious. Designed for adults 55+.
   No external font dependencies — uses the system font stack.
   ========================================================================== */

:root {
  /* Blackburn brand palette — deep navy, warm slate, and soft gold on warm
     white and sand backgrounds. Calm and sophisticated; deliberately avoids
     bright "financial industry" blue/gray and anything cold or high-contrast. */
  --color-bg: #FAF8F4;             /* Warm White */
  --color-surface: #FFFFFF;
  --color-surface-alt: #F3EEE3;    /* Very Light Sand */
  --color-surface-soft: #EAE4D8;   /* Soft Gray */
  --color-border: #DDD4C2;
  --color-text: #262A32;
  --color-text-muted: #5C6570;     /* Warm Slate */
  --color-primary: #1F3252;        /* Deep Navy */
  --color-primary-dark: #15233A;
  --color-primary-light: #E7EBF1;
  --color-accent: #8A6A22;         /* Soft Gold, deepened for AA text contrast */
  --color-accent-light: #F2E9D8;
  --color-success: #6E8763;        /* Muted Sage Green */
  --color-surplus: #6E8763;
  --color-gap: #9B6A46;
  --color-balanced: #6B6560;
  --color-focus: #1F3252;

  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-card: 0 10px 30px rgba(21, 35, 58, 0.10), 0 2px 6px rgba(21, 35, 58, 0.05);
  --shadow-soft: 0 4px 14px rgba(21, 35, 58, 0.08);

  --max-width: 760px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-base);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-primary);
  color: #fff;
  padding: 12px 20px;
  z-index: 200;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

/* ---------- Focus states ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* ---------- Header / Footer ---------- */
.site-header {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.header-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.brand-mark {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-primary-dark);
  letter-spacing: 0.01em;
}
.privacy-pill {
  font-size: 0.85rem;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.site-footer {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 24px 60px;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  text-align: center;
}

/* ---------- Layout ---------- */
main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 32px 20px 80px;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 44px 40px;
}

@media (max-width: 600px) {
  .card {
    padding: 28px 20px;
  }
  body {
    font-size: 17px;
  }
}

h1, h2, h3 {
  color: var(--color-primary-dark);
  line-height: 1.28;
  font-weight: 700;
  letter-spacing: -0.01em;
}
h1 {
  font-size: 2.1rem;
  margin: 0 0 18px;
}
h2 {
  font-size: 1.5rem;
  margin: 0 0 14px;
}
h3 {
  font-size: 1.18rem;
  margin: 28px 0 12px;
}

p {
  margin: 0 0 18px;
}

/* ---------- Intro screen ---------- */
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  color: var(--color-accent);
  font-weight: 700;
  margin: 0 0 10px;
}
.lede {
  font-size: 1.1rem;
  color: var(--color-text-muted);
}
.callout {
  background: var(--color-primary-light);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin: 24px 0;
}
.callout p {
  margin: 0;
}
.callout-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-top: 6px !important;
}
.meta-line {
  color: var(--color-text-muted);
  font-weight: 600;
}
.privacy-note {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-top: 28px;
}
.reassurance-note {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: 12px;
  margin-bottom: 0;
}

/* ---------- Buttons ---------- */
.btn {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 999px;
  padding: 14px 28px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.05s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  min-height: 48px;
}
.btn:active {
  transform: scale(0.98);
}
.btn-primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover {
  background: var(--color-primary-dark);
  box-shadow: 0 6px 18px rgba(21, 35, 58, 0.16);
}
.btn-secondary {
  background: var(--color-surface);
  color: var(--color-primary-dark);
  border-color: var(--color-border);
}
.btn-secondary:hover {
  background: var(--color-surface-alt);
  border-color: var(--color-primary);
}
.btn-text {
  background: transparent;
  color: var(--color-text-muted);
  border: none;
  text-decoration: underline;
  padding: 10px 12px;
}
.btn-large {
  font-size: 1.1rem;
  padding: 18px 32px;
  width: 100%;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------- Progress bar ---------- */
.progress-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 24px 20px 0;
}
.progress-track {
  height: 8px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  border-radius: 999px;
  transition: width 0.3s ease;
  width: 0%;
}
.progress-label {
  margin: 12px 0 0;
  font-size: 0.88rem;
  color: var(--color-text-muted);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ---------- Sections / steps ---------- */
.screen[hidden] {
  display: none;
}
.section-marker {
  display: inline-block;
  background: var(--color-accent-light);
  color: var(--color-accent);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.step-intro {
  color: var(--color-text-muted);
}

/* ---------- Form fields ---------- */
.field {
  margin-bottom: 26px;
}
label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--color-text);
}
legend {
  font-weight: 700;
  padding: 0;
  margin-bottom: 10px;
}
.optional-tag {
  font-weight: 400;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}
.help-text {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: -4px 0 10px;
}
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
select,
textarea {
  width: 100%;
  font-size: 1.05rem;
  font-family: inherit;
  padding: 14px 16px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  min-height: 52px;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-primary);
}
textarea {
  resize: vertical;
  line-height: 1.5;
}

/* Short, non-required free-text follow-ups (Retirement Vision / Retirement
   Concerns "in your own words" questions). Kept quiet and secondary — the
   counter should be readable but never compete with the question itself. */
.char-counter {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-align: right;
  margin: 6px 0 0;
}
.dollar-input {
  position: relative;
  display: flex;
  align-items: center;
}
.dollar-prefix {
  position: absolute;
  left: 16px;
  color: var(--color-text-muted);
  font-weight: 700;
  pointer-events: none;
}
.dollar-input input {
  padding-left: 32px;
}

.error-message {
  color: #A1442A;
  font-size: 0.9rem;
  font-weight: 600;
  margin: 8px 0 0;
  min-height: 1.2em;
}
.field.has-error input,
.field.has-error select {
  border-color: #A1442A;
}

/* Radio tiles */
.radio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.radio-grid.two-col {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 520px) {
  .radio-grid {
    grid-template-columns: 1fr;
  }
}
.radio-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  cursor: pointer;
  font-weight: 500;
  background: var(--color-surface);
  min-height: 48px;
}
.radio-tile input {
  width: 20px;
  height: 20px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}
.radio-tile:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-weight: 400;
  cursor: pointer;
}
.checkbox-row input {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}

.conditional-field {
  border-left: 3px solid var(--color-accent);
  padding-left: 16px;
  margin-left: 2px;
}

/* ---------- Screen 1: subsections, spouse block, choice cards, info callout ----------
   Everything in this block is deliberately scoped to #step-1 (or to classes
   used exclusively by Step 1's JS-rendered lists) so it cannot change the
   look of Steps 2–8, which share base classes like .field and .radio-tile. */

#step-1 .card {
  padding-top: 44px;
  padding-bottom: 44px;
}
#step-1 .field {
  margin-bottom: 30px;
}
#step-1 .radio-tile {
  padding: 18px 18px;
  min-height: 56px;
  font-size: 1.02rem;
}

.subsection-heading {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
  font-size: 1.2rem;
}
.subsection-heading:first-of-type {
  margin-top: 28px;
  padding-top: 0;
  border-top: none;
}
.subsection-heading.small {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  font-size: 1.02rem;
  color: var(--color-accent);
}

.field-question {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-text);
  margin: 0 0 6px;
}

.personalization-note {
  font-size: 0.95rem;
  color: var(--color-primary-dark);
  background: var(--color-primary-light);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin: 4px 0 30px;
  font-style: italic;
}

.spouse-block {
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
  padding: 26px 24px 6px;
  margin-top: 16px;
}

/* Card-style multi-select buttons (Retirement Vision / Retirement Concerns) */
.choice-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
@media (min-width: 700px) {
  .choice-card-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (max-width: 520px) {
  .choice-card-grid {
    grid-template-columns: 1fr;
  }
}
.choice-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px 44px 18px 20px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.98rem;
  background: var(--color-surface);
  min-height: 56px;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.choice-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-soft);
}
.choice-card:active {
  transform: scale(0.99);
}
.choice-card input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.choice-card-label {
  color: var(--color-text);
}
.choice-card-check {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
}
.choice-card:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}
.choice-card:has(input:checked) .choice-card-check {
  border-color: var(--color-primary);
  background: var(--color-primary);
}
.choice-card:has(input:checked) .choice-card-check::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.choice-card:has(input:focus-visible) {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}
.choice-card.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* "Did You Know?" educational card — calm and inviting, not an alert */
.info-callout {
  margin-top: 32px;
  padding: 24px 26px;
  border-radius: var(--radius-lg);
  background: var(--color-accent-light);
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.info-callout-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.info-callout-title {
  font-weight: 700;
  color: var(--color-accent);
  font-size: 1rem;
  margin: 0 0 6px;
}
.info-callout-body {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin: 0;
}
@media (max-width: 520px) {
  .info-callout {
    padding: 20px;
  }
}

/* ---------- Milestone (positive transition) screen ---------- */
.milestone-card {
  text-align: center;
  padding: 56px 40px;
}
@media (max-width: 600px) {
  .milestone-card {
    padding: 40px 24px;
  }
}
.milestone-card .eyebrow {
  text-align: center;
}
.milestone-card h1 {
  font-size: 2rem;
}
.milestone-body {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  max-width: 560px;
  margin: 0 auto 32px;
}
.milestone-card .btn-large {
  width: auto;
  min-width: 220px;
}

/* ---------- Repeated income/expense/savings rows ---------- */
.source-row {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 16px;
  background: var(--color-surface-alt);
}
.source-row-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.source-row-title {
  font-weight: 700;
  font-size: 1.02rem;
}
.source-row-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: end;
}
@media (max-width: 560px) {
  .source-row-grid {
    grid-template-columns: 1fr;
  }
}
.source-row-note {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 6px 0 0;
}
.freq-toggle {
  display: flex;
  gap: 8px;
}
.freq-toggle button {
  flex: 1;
  padding: 10px;
  font-size: 0.9rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text-muted);
}
.freq-toggle button.active {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
  background: var(--color-primary-light);
}
.status-select {
  font-size: 0.95rem;
  padding: 10px 12px;
  min-height: 44px;
}

.running-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-primary-light);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  margin-top: 20px;
  flex-wrap: wrap;
  gap: 8px;
}
.running-total-label {
  font-weight: 700;
  color: var(--color-primary-dark);
}
.running-total-value {
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--color-primary-dark);
}

/* ---------- Step 4 comparison ---------- */
.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 520px) {
  .comparison-grid {
    grid-template-columns: 1fr;
  }
}
.comparison-box {
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: center;
}
.comparison-label {
  display: block;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-bottom: 6px;
}
.comparison-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-primary-dark);
}

.position-result {
  border-radius: var(--radius-md);
  padding: 22px 24px;
  background: var(--color-accent-light);
  border-left: 5px solid var(--color-accent);
}
.position-title {
  font-weight: 800;
  font-size: 1.15rem;
  margin: 0 0 8px;
  color: var(--color-primary-dark);
}
.position-detail {
  margin: 0;
  color: var(--color-text-muted);
}
.disclaimer-note {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-top: 18px;
  font-style: italic;
}

/* ---------- Step 5 former accounts ---------- */
.former-accounts-block {
  border-top: 1px solid var(--color-border);
  margin-top: 24px;
  padding-top: 8px;
}

/* ---------- Progressive disclosure: financial screens (Steps 2, 3, 5) ----------
   Shared, generic classes — not scoped to any single step, reused wherever a
   financial screen needs a gentle "it's okay to estimate" note, a grouped
   sub-heading, a Yes/No/Not sure existence gate, or an end-of-screen
   progress acknowledgment. */

.estimate-reassurance {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: -8px;
  margin-bottom: 28px;
}

.progress-note {
  font-size: 0.98rem;
  color: var(--color-primary-dark);
  background: var(--color-primary-light);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin: 24px 0 0;
  text-align: center;
  font-style: italic;
}

/* A named group of related fields within a financial screen — e.g. "Social
   Security" within Income, or a savings category. */
.financial-group {
  margin-bottom: 28px;
}
.financial-group-heading {
  font-size: 1.1rem;
  color: var(--color-primary-dark);
  margin: 0 0 14px;
}

/* Owner heading (Savings step): marks the start of one person's block of
   retirement-account categories in a married/partnered household, so it
   reads as a clear section break rather than just another category. */
.owner-heading {
  font-size: 1.25rem;
  margin: 36px 0 18px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
  color: var(--color-primary-dark);
}
.owner-heading:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* Existence gate: "Do you expect to receive X? Yes / No / Not sure."
   Deliberately larger than the compact .pill-choice used in Step 6, since
   these gate a screen's core question and benefit from bigger touch targets. */
.gate-question {
  font-weight: 700;
  margin-bottom: 10px;
}
.gate-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.gate-choice {
  position: relative;
  border: 2px solid var(--color-border);
  border-radius: 999px;
  padding: 12px 22px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  background: var(--color-surface);
  color: var(--color-text-muted);
}
.gate-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.gate-choice:has(input:checked) {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.gate-choice:has(input:focus-visible) {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* A single income source or savings category block: gate question up top,
   detail fields revealed underneath once the answer is Yes. */
.reveal-block {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 14px;
  background: var(--color-surface-alt);
}
.reveal-block-title {
  font-weight: 700;
  font-size: 1.02rem;
  margin: 0 0 12px;
}
.reveal-block-detail {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--color-border);
}
.reveal-block-collapsed-note {
  margin-top: 10px;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

/* A debt block nested inside another reveal-block — used for HOA/community
   fees, shown directly underneath the housing detail fields once a
   homeowner (with or without a mortgage) is selected. Slightly recessed so
   it reads as "part of Housing" rather than a fully separate block. */
.nested-reveal-block {
  margin-top: 14px;
  background: var(--color-surface);
}

/* Info icon + tooltip: hover reveals on desktop, click/tap toggles a
   persistent open state (also works for touch and keyboard users). */
.info-icon-wrap {
  position: relative;
  display: inline-flex;
}
.info-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--color-text-muted);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  font-style: italic;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.info-icon:hover,
.info-icon:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.info-tooltip {
  display: none;
  position: absolute;
  z-index: 20;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  background: var(--color-primary-dark);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.4;
  padding: 10px 12px;
  border-radius: 10px;
  text-align: left;
  box-shadow: 0 6px 18px rgba(21, 35, 58, 0.22);
}
.info-icon-wrap:hover .info-tooltip,
.info-icon-wrap.is-open .info-tooltip {
  display: block;
}
@media (max-width: 520px) {
  .info-tooltip {
    left: auto;
    right: -8px;
    transform: none;
  }
}

/* Optional payoff timeline select shown beside debt line items */
.payoff-field {
  margin-top: 12px;
}
.payoff-field label {
  font-weight: 500;
  font-size: 0.92rem;
}

/* ---------- Step 6/7 topic rows ---------- */
.topic-row, .confidence-row {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 16px;
  background: var(--color-surface-alt);
}
.topic-row-title, .confidence-row-title {
  font-weight: 700;
  margin-bottom: 12px;
  display: block;
}
.pill-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pill-choice {
  border: 2px solid var(--color-border);
  border-radius: 999px;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  background: var(--color-surface);
  color: var(--color-text-muted);
}
.pill-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pill-choice:has(input:checked) {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.pill-choice {
  position: relative;
}

.scale-choices {
  display: flex;
  gap: 8px;
  justify-content: space-between;
}
.scale-choice {
  flex: 1;
  text-align: center;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 4px;
  cursor: pointer;
  background: var(--color-surface);
  position: relative;
}
.scale-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.scale-choice .scale-num {
  display: block;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--color-primary-dark);
}
.scale-choice .scale-word {
  display: block;
  font-size: 0.72rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.scale-choice:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}
@media (max-width: 560px) {
  .scale-choices { flex-wrap: wrap; }
  .scale-choice { flex-basis: 30%; }
}

/* ---------- Navigation ---------- */
.planner-nav {
  max-width: var(--max-width);
  margin: 28px auto 0;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---------- Results screen ---------- */
.results-card {
  padding: 44px 40px;
}
@media (max-width: 600px) {
  .results-card {
    padding: 28px 20px;
  }
}
.results-section {
  border-top: 1px solid var(--color-border);
  padding-top: 24px;
  margin-top: 24px;
}
.results-section:first-of-type {
  border-top: none;
  margin-top: 8px;
}
.fact-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
  margin: 0;
}
.fact-list dt {
  color: var(--color-text-muted);
  font-weight: 600;
}
.fact-list dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
}
@media (max-width: 520px) {
  .fact-list {
    grid-template-columns: 1fr;
  }
  .fact-list dd {
    text-align: left;
    margin-bottom: 8px;
  }
}
.results-total {
  text-align: right;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--color-primary-dark);
  margin-top: 14px;
}

/* ---------- Snapshot (Results screen) ----------
   Deliberately avoids red/green pass-fail colors, gauges, and scores
   anywhere — every visual here uses the same two brand colors (navy and
   gold) regardless of whether the household has a gap or a surplus. The
   difference is communicated through the numbers themselves, not through
   judgment-coded color. */
.snapshot-header {
  margin-bottom: 8px;
}
.snapshot-prepared-for {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin: 4px 0 14px;
}
.snapshot-intro {
  color: var(--color-text-muted);
  font-size: 1.02rem;
  max-width: 62ch;
}

/* Hero comparison bar */
.snapshot-hero {
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  margin: 20px 0 8px;
}
.snapshot-bar-row + .snapshot-bar-row {
  margin-top: 18px;
}
.snapshot-bar-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 6px;
}
.snapshot-bar-value {
  font-weight: 800;
  font-size: 1.1rem;
}
.snapshot-bar-track {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  height: 16px;
  overflow: hidden;
}
.snapshot-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s ease;
}
.snapshot-bar-need { background: var(--color-primary); }
.snapshot-bar-spendable { background: var(--color-accent); }
.snapshot-hero-result {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
  text-align: center;
}
.snapshot-hero-result-label {
  font-weight: 700;
  color: var(--color-text-muted);
  margin: 0 0 4px;
}
.snapshot-hero-result-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-primary-dark);
  margin: 0;
}

/* Retirement Paycheck Target */
/* Sprint 3.1: the hero above already shows the two big numbers at full
   size, so this heading is deliberately modest — a light label over the
   card row, not a competing section title. */
.snapshot-cards-heading {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  font-weight: 700;
  margin: 0 0 10px;
}
.snapshot-three-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}
@media (max-width: 700px) {
  .snapshot-three-cards {
    grid-template-columns: 1fr;
  }
}
.snapshot-summary-card {
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: 18px 16px;
  text-align: center;
}
.snapshot-summary-card-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-text-muted);
  margin: 0 0 6px;
}
.snapshot-summary-card-value {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-primary-dark);
  margin: 0;
}

/* Income sources / owner groupings reuse .financial-group-heading and
   .owner-heading, already defined for Step 3 and Step 5. */
.snapshot-owner-total {
  text-align: right;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin: 4px 0 18px;
}
/* Resource categories (Retirement Accounts / Cash & Bank Savings /
   Brokerage & Other Resources) nested inside each owner's block. */
.snapshot-resource-group-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  font-weight: 700;
  margin: 14px 0 8px;
}
.snapshot-resource-subtotal {
  text-align: right;
  font-weight: 600;
  color: var(--color-text-muted);
  margin: 2px 0 10px;
  padding-top: 4px;
  border-top: 1px solid var(--color-border);
}

/* Tax breakdown */
.snapshot-tax-breakdown {
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}
.snapshot-tax-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}
.snapshot-tax-row + .snapshot-tax-row {
  border-top: 1px solid var(--color-border);
}
.snapshot-tax-row-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-text-muted);
  font-weight: 600;
}
.snapshot-tax-row-value {
  font-weight: 700;
  color: var(--color-primary-dark);
  white-space: nowrap;
}
.snapshot-tax-row-total {
  padding-top: 14px;
}
.snapshot-tax-row-total .snapshot-tax-row-label,
.snapshot-tax-row-total .snapshot-tax-row-value {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-primary-dark);
}
.snapshot-tax-disclaimer {
  margin-top: 14px;
}

/* Still to Account For / Income Currently Accounted For */
.snapshot-difference-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-primary-dark);
  margin: 4px 0;
}

/* Future spending timeline */
.snapshot-timeline-step {
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}
.snapshot-timeline-arrow {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 1.2rem;
  margin: 6px 0;
}
.snapshot-timeline-when {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-accent);
  margin: 0 0 8px;
}
.snapshot-timeline-event {
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 6px;
}
.snapshot-timeline-label {
  color: var(--color-text-muted);
  font-weight: 600;
  margin: 10px 0 2px;
}
.snapshot-timeline-value {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--color-primary-dark);
  margin: 0 0 8px;
}
.snapshot-timeline-compare {
  margin: 0;
}

/* What You Told Us Matters — priority cards */
.snapshot-priority-card {
  background: var(--color-surface-alt);
  border-left: 5px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin-bottom: 14px;
}
.snapshot-priority-card h3 {
  margin: 0 0 8px;
  color: var(--color-primary-dark);
  font-size: 1.05rem;
}
.snapshot-priority-quote {
  font-style: italic;
  color: var(--color-text);
  margin: 0 0 8px;
}

/* What's Already Taking Shape */
.snapshot-organized-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.snapshot-organized-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.snapshot-check {
  color: var(--color-accent);
  font-weight: 800;
  flex-shrink: 0;
}

/* Snapshot at a Glance */
.snapshot-glance {
  background: var(--color-primary-light);
  border-radius: var(--radius-lg);
  padding: 24px 24px 8px;
}
.snapshot-glance-list dt {
  color: var(--color-primary-dark);
}

.progress-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (max-width: 520px) {
  .progress-summary-grid { grid-template-columns: 1fr; }
}
.progress-summary-item {
  border-radius: var(--radius-md);
  padding: 14px 16px;
  background: var(--color-surface-alt);
  font-size: 0.92rem;
}
.progress-summary-item .psi-topic {
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
}
.psi-badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}
.psi-addressed { background: var(--color-primary-light); color: var(--color-primary-dark); }
.psi-partially { background: var(--color-accent-light); color: var(--color-accent); }
.psi-not_yet   { background: #F1E4DD; color: var(--color-gap); }
.psi-unsure    { background: #ECE8E0; color: var(--color-text-muted); }
.psi-na        { background: #ECE8E0; color: var(--color-text-muted); }

/* ---------- Retirement Feelings questions (Step 7) ----------
   Seven standalone topic questions, each presented as its own card with
   large, easy-to-tap answer choices. Deliberately avoids anything that
   reads as a score, gauge, or quiz — no bars, no color grading. */
.feeling-block {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 16px;
  background: var(--color-surface-alt);
}
.feeling-question-number {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}
.feeling-question {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--color-text);
}
.feeling-answer-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.feeling-answer {
  position: relative;
  display: flex;
  align-items: center;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  min-height: 48px;
  background: var(--color-surface);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.feeling-answer input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.feeling-answer:has(input:checked) {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.feeling-answer:has(input:focus-visible) {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.questions-list {
  padding-left: 22px;
  margin: 0;
}
.questions-list li {
  margin-bottom: 12px;
}

.closing-section p {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  font-style: italic;
}

.results-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.results-actions .btn {
  flex: 1 1 auto;
}
.results-footer-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
  flex-wrap: wrap;
}

/* ---------- Modals ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(21, 35, 58, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 300;
}
.modal-overlay[hidden] {
  display: none;
}
.modal-box {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 32px;
  max-width: 460px;
  width: 100%;
  box-shadow: var(--shadow-card);
}
.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 20px;
}

/* ---------- Step 4: Debts — number + unit "time until paid off" field,
   repeatable debt rows (Vehicle Loans, Student Loans) ---------- */
.term-input-row {
  display: flex;
  gap: 10px;
}
.term-input-row .term-number {
  flex: 1;
  min-width: 0;
}
.term-input-row .term-unit {
  flex: 1;
  min-width: 0;
}
.debt-item-row .source-row-header {
  align-items: center;
}
.debt-remove-btn {
  font-size: 0.85rem;
  padding: 4px 10px;
  min-height: auto;
}
.btn-add-item {
  margin-top: 4px;
}

/* Sprint 2: the contact-step name-display styles were removed along with the
   pre-Snapshot Contact Information step they belonged to. */

/* ---------- Review & Edit screen ----------
   A central review hub: one calm card per section, each with an Edit
   button that jumps back to the step that collected it. Deliberately
   reuses the existing card / fact-list / button language rather than
   introducing a new visual system. */
.review-card-shell {
  padding: 44px 40px;
}
@media (max-width: 600px) {
  .review-card-shell {
    padding: 28px 20px;
  }
}
.review-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  margin-bottom: 18px;
  background: var(--color-surface-alt);
}
.review-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.review-card-header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--color-primary-dark);
}
.review-edit-btn {
  flex-shrink: 0;
  padding: 6px 14px;
  min-height: auto;
  font-size: 0.9rem;
}
.review-card .fact-list {
  margin-top: 6px;
}
.review-card .help-text {
  margin: 10px 0 0;
}
.review-debt-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.review-debt-item {
  border-top: 1px dashed var(--color-border);
  padding-top: 12px;
}
.review-debt-item:first-child {
  border-top: none;
  padding-top: 0;
}
.review-debt-title {
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--color-text);
}
.review-debt-line {
  margin: 0 0 2px;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}
.review-cta {
  border-top: 1px solid var(--color-border);
  margin-top: 8px;
  padding-top: 28px;
  text-align: center;
}
.review-cta h2 {
  margin-bottom: 8px;
}
.review-cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}
.review-cta-actions .btn-large {
  width: auto;
  min-width: 300px;
}
@media (max-width: 520px) {
  .review-cta-actions .btn-large {
    width: 100%;
    min-width: 0;
  }
}

/* ==========================================================================
   Sprint 5 — Consumer Next-Step / Conversion Layer.
   Deliberately reuses existing brand colors, radii, shadows, buttons, and
   form-field styles verbatim — no new palette, no red/green qualification
   indicators, no bright "sales" colors, no countdown/urgency treatment.
   Should read as a natural continuation of the Snapshot, not a separate
   marketing page bolted onto the end of it.
   ========================================================================== */
.next-step-section {
  border-top: 1px solid var(--color-border);
  padding-top: 24px;
  margin-top: 24px;
}
.next-step-accomplishment {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  font-style: italic;
  margin: 0 0 14px;
}
.next-step-cta-card,
.next-step-contact-card,
.next-step-confirmation-card {
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
}
@media (max-width: 600px) {
  .next-step-cta-card,
  .next-step-contact-card,
  .next-step-confirmation-card {
    padding: 20px 18px;
  }
}
.next-step-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  color: var(--color-accent);
  font-weight: 700;
  margin: 0 0 10px;
}
.next-step-headline {
  color: var(--color-primary-dark);
  margin: 0 0 14px;
}
.next-step-body-text {
  color: var(--color-text);
}
.next-step-cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.next-step-cta-actions .btn-large {
  width: auto;
  min-width: 320px;
}
@media (max-width: 520px) {
  .next-step-cta-actions .btn-large {
    width: 100%;
    min-width: 0;
  }
}
.next-step-supporting-text {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  text-align: center;
  margin: 4px 0 0;
}

/* Contact-collection card — shared by Paths A, B, and C */
.next-step-contact-headline {
  color: var(--color-primary-dark);
  margin: 0 0 8px;
}
.next-step-personalized-line {
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 8px;
}
.next-step-contact-fields {
  margin-top: 18px;
}
/* The Sprint 5 consent placeholder rule was retired here. Its markup was
   replaced by the plain-English disclosure block required at the moment of
   an affirmative choice (architecture §7.4); the rules for it, and for the
   rest of the Phase 3 pathway components, are grouped at the end of this
   file. */
.next-step-contact-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.next-step-contact-actions .btn-large {
  width: auto;
  min-width: 280px;
}
@media (max-width: 520px) {
  .next-step-contact-actions .btn-large {
    width: 100%;
    min-width: 0;
  }
}

/* Confirmation card — Path B / Path C text confirmations, and the shell
   the Path A scheduling placeholder card below sits inside */
.next-step-confirmation-card h3 {
  color: var(--color-primary-dark);
  margin: 0 0 10px;
}
.next-step-appointment-name {
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 18px;
}

/* Path A — scheduling placeholder. A clearly-marked development stand-in,
   not a real calendar embed — see the CALENDAR INTEGRATION PLACEHOLDER
   comment above buildSchedulingPlaceholder() in planner.js. Styled as a
   calm dashed panel so it reads as "not finished yet" without looking
   broken or alarming. */
.calendar-placeholder {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: 28px 20px;
  text-align: center;
  background: var(--color-surface);
}
.calendar-placeholder-label {
  font-weight: 700;
  color: var(--color-primary-dark);
  margin: 0 0 8px;
}
.calendar-placeholder-text {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* ---------- Print styles ---------- */
@media print {
  .site-header, .site-footer, .progress-wrap, .planner-nav,
  .results-actions, .results-footer-actions, .modal-overlay, .skip-link,
  .next-step-section {
    display: none !important;
  }
  body {
    background: #fff;
    font-size: 13px;
  }
  .card {
    box-shadow: none;
    border: none;
    padding: 0;
  }
  main {
    padding: 0;
    max-width: 100%;
  }
}

/* Sprint 2 (architecture §6.3): the prototype's development-only internal
   inspection panel styles were removed from the shipped stylesheet, together
   with the JavaScript that created the panel and the URL flag that activated
   it. No such panel exists in the production DOM under any circumstance. The
   removed selectors are deliberately not named here — §6.3's acceptance test
   is a text search of the deployed build. See docs/planner/PLANNER_NOTES.md. */


/* ---------- Sprint 2 additions ----------
   Three small components introduced by Sprint 2. None of them sit inside the
   Snapshot's own content: the save prompt lives inside .results-actions and
   the post-conversion block inside .next-step-section, both of which the
   existing @media print rules already hide, so printed Snapshot content and
   layout are untouched. */

/* Returning-visitor acknowledgment on the intro screen (§6.4). */
.resume-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin: 0 0 20px;
}
/* Follows the existing .screen[hidden] / .modal-overlay[hidden] pattern: a
   class-level `display` beats the [hidden] UA default on specificity, so the
   attribute has to be honoured explicitly or the element never hides. */
.resume-notice[hidden] {
  display: none;
}
.resume-notice-text {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-text);
}

/* Strengthened print/save prompt at the Snapshot (§14.3). */
.snapshot-save-prompt {
  flex: 1 1 100%;
  margin: 0 0 4px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text);
}
.results-actions-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex: 1 1 100%;
}
.results-actions-buttons .btn {
  flex: 1 1 auto;
}

/* Clear control on the Review screen (§6.4). */
.review-footer-actions {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* Clear control shown once the household has converted (§6.4). */
.next-step-post-conversion-clear {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
  text-align: center;
}
.next-step-post-conversion-clear .next-step-body-text {
  margin-bottom: 12px;
}

/* Supporting note inside the clear-confirmation modal. */
.modal-note {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* ---------- Phase 3 — post-Snapshot pathway components (architecture v1.3)
   Every selector below sits inside .next-step-section, which the existing
   @media print rule already hides, so the printed Snapshot's own content and
   layout are untouched. No new palette, no new radii, no red/green
   indicators, no urgency treatment — these reuse the existing brand tokens
   so the section still reads as a continuation of the Snapshot. */

/* Both participants, shown back rather than re-asked (§8.6). */
.next-step-household-confirm {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin: 18px 0 4px;
}
.next-step-household-label {
  margin: 0 0 4px;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}
.next-step-household-names {
  margin: 0;
  font-weight: 700;
  color: var(--color-text);
}
.next-step-household-edit {
  padding-left: 0;
  padding-right: 0;
  font-size: 0.9rem;
}

/* Plain-English disclosure at the moment of an affirmative choice (§7.4). */
.next-step-disclosure {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin: 18px 0 4px;
}
.next-step-disclosure-lead {
  margin: 0 0 8px;
  font-weight: 700;
  color: var(--color-text);
  font-size: 0.95rem;
}
.next-step-disclosure-list {
  margin: 0;
  padding-left: 20px;
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.55;
}
.next-step-disclosure-list li {
  margin-bottom: 6px;
}
.next-step-disclosure-list li:last-child {
  margin-bottom: 0;
}
.next-step-disclosure-note {
  margin: 12px 0 0;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

/* Educational topics, derived from answers already given. */
.next-step-topics {
  margin: 18px 0 4px;
}
.next-step-topics-lead {
  margin: 0 0 8px;
  font-weight: 700;
  color: var(--color-text);
  font-size: 0.95rem;
}
.next-step-topics-list {
  margin: 0;
  padding-left: 20px;
  color: var(--color-text);
  line-height: 1.55;
}
.next-step-topics-list li {
  margin-bottom: 4px;
}

/* Secondary offer — a legitimate alternative, not a lesser option (§3.2).
   Separated by a rule so it reads as its own choice, and styled with the
   same weight as everything else on the card: no de-emphasis, no "if you're
   not ready" framing, nothing that suggests a step down. */
.next-step-secondary-offer {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}
.next-step-secondary-lead {
  margin: 0 0 12px;
  color: var(--color-text);
  text-align: center;
}
.next-step-secondary-actions {
  display: flex;
  justify-content: center;
}
.next-step-secondary-offer .btn-secondary {
  min-width: 320px;
}
@media (max-width: 520px) {
  .next-step-secondary-offer .btn-secondary {
    width: 100%;
    min-width: 0;
  }
}

/* Phase 4 — scheduling handoff and review-request states. Same tokens, same
   weights; the only visually distinct element is the no-booking notice, which
   is deliberately the plainest thing on the panel rather than an alarm. */
.next-step-handoff-list {
  margin: 16px 0 20px;
  padding-left: 20px;
  color: var(--color-text);
  line-height: 1.6;
}
.next-step-handoff-list li {
  margin-bottom: 8px;
}
.next-step-handoff-list li:last-child {
  margin-bottom: 0;
}
.next-step-no-booking {
  margin: 14px 0 0;
  font-weight: 700;
  color: var(--color-text);
  font-size: 0.95rem;
}
.next-step-review-state {
  margin-top: 18px;
}
/* Phase 4B — the scheduling link. An anchor carrying .btn, so it needs the
   two properties an <a> does not get from the button rules. */
.scheduling-actions {
  display: flex;
  justify-content: center;
  margin: 18px 0 4px;
}
a.scheduling-link {
  display: inline-block;
  text-decoration: none;
  text-align: center;
  min-width: 320px;
}
@media (max-width: 520px) {
  a.scheduling-link {
    width: 100%;
    min-width: 0;
  }
}
/* Where a connected scheduling provider renders itself. Intentionally an
   empty, unstyled box: the Planner does not impose a layout on a provider it
   has not met. */
.scheduling-mount {
  margin-top: 4px;
}

/* Declining is a real outcome and needs a real control (§3.2, §10.6). */
.next-step-decline {
  margin-top: 18px;
  text-align: center;
}
.next-step-decline-actions {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}