/* Calculator-owned layout. Brand tokens and the shared `.shell` container
 * intentionally come from the Financial Freedom Block theme. The theme keeps
 * matching rules during the 0.4.0 migration so the public design cannot drift. */
.calculator-workspace { padding: 82px 0 100px; }
.calculator-layout { display: grid; grid-template-columns: .88fr 1.12fr; gap: 28px; align-items: start; }
.calculator-inputs { padding: 30px; scroll-margin-top: 116px; background: var(--soft); border-top: 4px solid var(--navy); }
.calculator-inputs h2 { font-size: 2rem; }
.calculator-input-heading > p:last-child { margin-top: 9px; color: var(--muted); font-size: .68rem; line-height: 1.55; }
.calculator-field-group { min-width: 0; margin: 27px 0 0; padding: 23px 0 0; border: 0; border-top: 1px solid #cbd5df; }
.calculator-field-group legend { display: flex; align-items: center; gap: 10px; padding: 0 10px 0 0; color: var(--ink); }
.calculator-field-group legend span { width: 27px; height: 27px; display: grid; place-items: center; color: var(--white); background: var(--navy); border-radius: 50%; font-size: .62rem; }
.calculator-field-group legend strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.03rem; }
.calculator-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 17px 14px; margin-top: 17px; }
.calculator-fields label { min-width: 0; color: var(--ink); font-size: .69rem; font-weight: 700; }
.calculator-fields label.wide { grid-column: 1 / -1; }
.calculator-fields input { width: 100%; margin-top: 7px; padding: 12px 13px; color: var(--ink); background: var(--white); border: 1px solid #b8c4d0; border-radius: 3px; font: inherit; font-size: .84rem; }
.calculator-fields input:focus { border-color: var(--navy); outline: 3px solid rgba(23, 58, 99, .12); }
.field-help { display: block; margin-top: 5px; color: var(--muted); font-size: .61rem; font-weight: 500; line-height: 1.45; }
.field-help a { color: var(--navy); }
.calculator-results { min-width: 0; padding: 34px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); }
.result-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.result-heading h2 { max-width: 600px; margin-top: 8px; font-size: 2.25rem; }
.assumption-badge { flex: 0 0 auto; padding: 8px 11px; color: var(--navy); background: var(--blue-soft); border-radius: 100px; font-size: .62rem; font-weight: 700; text-transform: uppercase; }
.primary-result { margin-top: 28px; padding: 26px; background: var(--deep); }
.primary-result span, .primary-result strong, .primary-result small { display: block; }
.primary-result span { color: #c2ceda; font-size: .72rem; }
.primary-result strong { margin-top: 4px; color: var(--gold); font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1.1; }
.primary-result small { margin-top: 8px; color: #aebdcb; font-size: .65rem; }
.result-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 1px; background: var(--line); border: 1px solid var(--line); }
.result-stats article { min-width: 0; padding: 19px; background: var(--white); }
.result-stats span, .result-stats strong, .result-stats small { display: block; }
.result-stats span { color: var(--muted); font-size: .64rem; }
.result-stats strong { margin-top: 6px; color: var(--navy); font-family: Georgia, "Times New Roman", serif; font-size: 1.3rem; overflow-wrap: anywhere; }
.result-stats small { margin-top: 5px; color: var(--muted); font-size: .57rem; line-height: 1.45; }
.result-stats strong.is-positive { color: #176044; }
.result-stats strong.is-negative { color: #a33b32; }
.sustainability-result { display: grid; grid-template-columns: 1.12fr .88fr; gap: 27px; margin-top: 28px; padding: 27px; color: var(--white); background: var(--navy); border-top: 4px solid var(--gold); }
.sustainability-result .eyebrow { color: #e1c58c; }
.sustainability-copy h3 { margin-top: 10px; color: var(--white); font-size: clamp(1.65rem, 2.5vw, 2.25rem); }
.sustainability-copy > p:last-child { margin-top: 12px; color: #ced9e4; font-size: .72rem; line-height: 1.65; }
.sustainability-stats { display: grid; align-content: center; gap: 1px; background: rgba(255,255,255,.16); }
.sustainability-stats article { padding: 15px 17px; background: rgba(8, 29, 51, .72); }
.sustainability-stats span, .sustainability-stats strong, .sustainability-stats small { display: block; }
.sustainability-stats span { color: #bfcddd; font-size: .58rem; }
.sustainability-stats strong { margin-top: 4px; color: var(--gold); font-family: Georgia, "Times New Roman", serif; font-size: 1.2rem; }
.sustainability-stats small { margin-top: 3px; color: #aebdcb; font-size: .53rem; line-height: 1.4; }
.projection-chart-wrap { margin-top: 30px; }
.projection-chart-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.projection-chart-head h3 { font-size: 1.55rem; }
.projection-chart-head p { color: var(--muted); font-size: .65rem; }
.projection-legend { display: flex; gap: 18px; margin-top: 12px; color: var(--muted); font-size: .66rem; }
.projection-legend span { display: inline-flex; align-items: center; gap: 7px; }
.projection-legend i { width: 20px; height: 4px; display: inline-block; }
.projection-chart { width: 100%; margin-top: 13px; padding: 10px; background: #f8fafc; border: 1px solid var(--line); }
.projection-chart .grid-line { stroke: #dfe6ed; stroke-width: 1; }
.projection-chart .capital-line, .projection-chart .target-line { fill: none; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.projection-chart .capital-line { stroke: var(--navy); }
.projection-chart .target-line { stroke: var(--gold); stroke-dasharray: 10 9; }
.projection-chart .income-start-marker { stroke: #92a2b3; stroke-width: 2; stroke-dasharray: 4 6; }
.projection-chart .axis-label { fill: #778492; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 13px; }
.calculator-interpretation { margin-top: 24px; padding: 20px 22px; background: var(--gold-soft); }
.calculator-interpretation strong { display: block; color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: 1.15rem; }
.calculator-interpretation p { margin-top: 5px; color: var(--muted); font-size: .75rem; }
.calculator-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 22px; }
.calculator-method { margin-top: 22px; color: var(--muted); font-size: .64rem; line-height: 1.65; }

@media (max-width: 1020px) {
  .calculator-layout { grid-template-columns: 1fr; }
  .calculator-inputs { position: static; }
  .sustainability-result { grid-template-columns: 1fr; }
  .result-heading { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 560px) {
  .calculator-workspace { padding-block: 68px; }
  .calculator-inputs, .calculator-results { padding: 24px 20px; }
  .calculator-fields { grid-template-columns: 1fr; }
  .calculator-fields label.wide { grid-column: auto; }
  .result-stats { grid-template-columns: 1fr; }
  .sustainability-result { padding: 24px 21px; }
  .calculator-actions, .calculator-actions .button { width: 100%; }
  .projection-chart-head { align-items: flex-start; flex-direction: column; }
}