#finance-planner { --plan-teal: #08777a; --plan-navy: #192c43; }
.plan-storage-note { color: #46596c; font-size: 14px; margin: -4px 0 23px; max-width: 880px; }
.plan-storage-note strong { color: var(--plan-navy); }
.plan-storage-note p { margin-top: 8px; }
.plan-saved { padding: 20px 24px; margin-bottom: 24px; }
.plan-saved-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.plan-saved-head h2 { font-size: 19px; }
.plan-saved-head h2 span { color: #607387; font-size: 16px; margin-left: 5px; }
.plan-saved-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.plan-saved-item { display: flex; align-items: center; gap: 3px; border: 1px solid #d8e2e8; border-radius: 7px; padding: 6px; min-width: 0; }
.plan-saved-item.is-active { border-color: #398f91; background: #edf7f5; }
.plan-saved-item > button:first-child { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--plan-navy); text-align: left; padding: 8px; cursor: pointer; }
.plan-saved-item strong { display: block; font-weight: 600; overflow-wrap: anywhere; }
.plan-saved-item span { display: block; font-size: 13px; color: #46596c; }
.plan-saved-item .button { font-size: 13px; padding: 8px; }
.plan-workspace { display: grid; grid-template-columns: minmax(270px, 350px) minmax(0,1fr); gap: 24px; align-items: start; }
.plan-inputs { padding: 25px; }
.plan-inputs h2 { font-size: 23px; margin-bottom: 23px; }
.plan-inputs .form-row { grid-template-columns: 1fr 1fr; }
.plan-inputs .field { min-width: 0; }
.plan-inputs input,.plan-inputs select { min-width: 0; width: 100%; }
.plan-inputs .field-help { margin: 0 0 17px; color: #546778; }
.plan-events { min-width: 0; border: 0; border-top: 1px solid #dce5eb; padding: 18px 0 14px; margin-top: 18px; }
.plan-events legend { font-size: 17px; font-weight: 600; padding-right: 12px; }
.plan-events > .button { width: 100%; }
.plan-event-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; border-bottom: 1px solid #e6edf2; margin-bottom: 13px; }
.plan-event-row .field { margin-bottom: 6px; }
.plan-event-row > .button { grid-column: 1/-1; justify-self: end; margin-bottom: 8px; }
.plan-form-actions { display: flex; gap: 9px; flex-wrap: wrap; margin: 12px 0; }
.plan-results { min-width: 0; padding: 25px; }
.plan-result-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 21px; }
.plan-result-heading h2 { font-size: 23px; }
.plan-result-heading p { color: #546778; font-size: 14px; margin-top: 6px; }
.plan-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.plan-metrics .stat { padding: 17px 13px; min-width: 0; }
.plan-metrics .stat-label { font-size: 13px; }
.plan-metrics .stat-number { font-size: clamp(18px,1.75vw,27px); margin-top: 9px; overflow-wrap: anywhere; }
.plan-total { color: #46596c; font-size: 14px; line-height: 1.6; margin: 18px 0; }
.plan-results .callout { margin: 15px 0; }
.plan-results .callout ul { margin: 8px 0; padding-left: 20px; }
.plan-results .callout li+li { margin-top: 5px; }
.plan-chart { margin: 26px 0 25px; }
.plan-chart h3 { font-size: 18px; }
.plan-chart p { color: #546778; font-size: 13px; margin-top: 7px; }
.plan-chart svg { width: 100%; display: block; margin: 20px 0 8px; overflow: visible; }
.plan-chart text { fill: #46596c; font: 13px Barlow,sans-serif; }
.plan-axis { stroke: #b9c6d3; stroke-width: 1; }
.plan-balance-line { stroke: #08777a; stroke-width: 3; fill: none; }
.plan-interest-line { stroke: #78501c; stroke-width: 3; stroke-dasharray: 7 5; fill: none; }
.plan-legend { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; font-size: 13px; color: #46596c; }
.plan-legend span { display: inline-flex; align-items: center; gap: 7px; }
.plan-legend i { width: 22px; height: 0; border-top: 3px solid #08777a; }
.plan-legend .plan-interest-key { border-color: #78501c; border-top-style: dashed; }
.plan-table-details { border-top: 1px solid #dce5eb; padding-top: 20px; }
.plan-table-details summary,.plan-assumptions summary { cursor: pointer; color: #07696e; font-weight: 600; min-height: 44px; }
.plan-table-scroll { overflow-x: auto; max-height: 560px; }
.plan-table { border-collapse: collapse; font-size: 13px; width: 100%; font-variant-numeric: tabular-nums; }
.plan-table caption { text-align: left; color: #546778; padding: 12px 0; }
.plan-table th,.plan-table td { padding: 11px 10px; white-space: nowrap; text-align: right; border-bottom: 1px solid #e2e9ee; }
.plan-table th:first-child { text-align: left; }
.plan-table thead th { position: sticky; top: 0; background: #edf3f6; color: var(--plan-navy); }
.plan-table tbody th { font-weight: 500; }
.plan-assumptions { padding: 23px 0; max-width: 950px; }
.plan-assumptions p { margin: 0 0 14px; color: #546778; font-size: 14px; line-height: 1.6; }
#finance-planner :focus-visible { outline: 3px solid #08777a; outline-offset: 3px; }
@media(max-width:1200px) { .plan-workspace { grid-template-columns: minmax(250px,310px) minmax(0,1fr); gap: 16px; } .plan-results,.plan-inputs { padding: 21px; } .plan-metrics { grid-template-columns: 1fr; } .plan-metrics .stat { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .plan-metrics .stat-number { margin: 0; font-size: 25px; } .plan-saved-list { grid-template-columns: 1fr; } }
@media(max-width:900px) { .plan-workspace { grid-template-columns: 1fr; } .plan-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); } .plan-metrics .stat { display: block; } .plan-metrics .stat-number { margin-top: 8px; } }
@media(max-width:600px) { .plan-results,.plan-inputs,.plan-saved { padding: 20px 17px; } .plan-metrics { grid-template-columns: 1fr; } .plan-metrics .stat { display: flex; } .plan-metrics .stat-number { margin: 0; font-size: 25px; } .plan-saved-item { flex-wrap: wrap; } .plan-saved-item > button:first-child { flex-basis: 100%; } .plan-saved-item .button { flex: 1; } .plan-result-heading .button { width: 100%; } .plan-storage-note { font-size: 13px; } }
.plan-chart text { stroke: none; }

.plan-chart svg{height:auto;stroke:none}.plan-event-row{grid-template-columns:1fr}.plan-event-row .field{margin-bottom:10px}
.plan-payoff{background:#edf7f5;border:1px solid #b6dad3;border-radius:12px;padding:24px;margin-bottom:24px}.plan-payoff>span{display:block;color:#316462;font-weight:600;font-size:16px}.plan-payoff>strong{display:block;font-size:clamp(30px,3.8vw,46px);line-height:1.15;letter-spacing:-.025em;color:#123d3c;margin:9px 0 13px;overflow-wrap:anywhere}.plan-payoff p{font-size:15px;line-height:1.6;color:#345c5b;margin:0}.plan-payoff.is-incomplete{background:#fff7e8;border-color:#ecd4a9}.plan-payoff.is-incomplete>strong{color:#674818}.plan-extra{border-top:1px solid #dce5eb;border-bottom:1px solid #dce5eb;padding:7px 0;margin:8px 0 18px}.plan-extra>summary{cursor:pointer;min-height:44px;display:list-item;padding:12px 0;color:#07696e;font-weight:600;font-size:14px}.plan-save-fields{margin-top:22px;padding-top:18px;border-top:1px solid #dce5eb}.plan-save-fields .field{margin-bottom:10px}.plan-form-actions>.primary{width:100%;min-height:48px}.plan-inputs .button,.plan-saved .button{min-height:44px}.plan-results{scroll-margin-top:24px}.plan-saved{margin-top:24px}.plan-chart-scroll{overflow-x:auto;overscroll-behavior-inline:contain}.plan-chart-scroll svg{min-width:560px;min-height:230px}.plan-chart-scroll:focus-visible{outline-offset:-3px!important}
@media(max-width:600px){.plan-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.plan-metrics .stat{display:block;padding:14px 11px}.plan-metrics .stat-number{font-size:22px;margin-top:8px}.plan-metrics .stat:first-child{grid-column:1/-1;display:flex}.plan-metrics .stat:first-child .stat-number{margin-top:0}.plan-payoff{padding:21px 17px}.plan-payoff>strong{font-size:34px}.plan-result-heading .button{width:auto;min-height:44px}.plan-storage-note{margin-bottom:16px}.plan-chart-scroll svg{margin-top:10px}.plan-workspace{gap:16px}}