#budget-planner{--budget-blue:#0062ff;max-width:1180px;margin:auto}#budget-planner .page-head{margin-bottom:16px}#budget-planner h1{font-size:clamp(30px,3.5vw,46px);letter-spacing:-1.7px}#budget-planner .metrics{padding:24px 0;margin:20px 0 30px}#budget-planner .metric strong{font-size:clamp(28px,3.2vw,42px);font-weight:500}#budget-planner section{margin-top:36px}#budget-planner section:first-of-type{margin-top:0}#budget-planner svg{display:block;width:100%;height:auto;font-family:inherit;background:linear-gradient(180deg,#f8fbff 0%,white 100%)}#budget-planner .section-head{align-items:baseline}#budget-planner h2{font-size:23px;letter-spacing:-.6px}#budget-planner input:not([type=checkbox]),#budget-planner select{width:100%;min-width:0;padding:10px 2px;border:0;border-bottom:1px solid #cdd5e0;border-radius:0;background:transparent;color:#171717;font-size:15px;outline-offset:3px}#budget-planner input:focus,#budget-planner select:focus{border-color:#0062ff}#budget-planner label{font-size:12px;color:#626b78;display:grid;gap:4px}.budget-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;padding:20px 0 12px}.budget-goal .budget-controls{grid-template-columns:1.5fr repeat(3,1fr)}.budget-row{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 30px;align-items:center;gap:24px;padding:20px 0;border-bottom:1px solid #e7ebf0;font-variant-numeric:tabular-nums}.budget-labels{font-size:11px;color:#626b78;text-transform:uppercase;letter-spacing:.04em;padding-bottom:10px}.budget-bars{display:grid;gap:4px;margin-top:8px}.budget-bars span{display:block;height:4px;background:#0062ff;border-radius:3px}.budget-upcoming{display:grid;grid-template-columns:90px 1.6fr 1.2fr 1fr 30px;gap:20px;padding:18px 0;border-bottom:1px solid #e7ebf0;align-items:center}.budget-goal{border-top:2px solid #0062ff;padding-top:10px}.budget-goal progress{appearance:none;display:block;width:100%;height:9px;margin:24px 0 12px;border:0;background:#edf1f6;border-radius:10px;overflow:hidden}.budget-goal progress::-webkit-progress-bar{background:#edf1f6}.budget-goal progress::-webkit-progress-value{background:linear-gradient(90deg,#0062ff,#5da8ff)}.budget-goal progress::-moz-progress-bar{background:#0062ff}#budget-planner .budget-whatif{display:flex;align-items:center;gap:12px;margin:28px 0 10px;color:#171717;font-size:16px;font-weight:550}.budget-whatif input{appearance:none;width:38px;height:22px;border-radius:20px;background:#cdd5e0;position:relative;cursor:pointer;flex:none}.budget-whatif input:before{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;background:white;border-radius:50%}.budget-whatif input:checked{background:#0062ff}.budget-whatif input:checked:before{left:19px}#budget-planner .small{line-height:1.55}#budget-planner .inline-disclosure{margin-top:30px}#budget-planner .text-button:disabled{opacity:.25;cursor:not-allowed}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:800px){.budget-controls,.budget-goal .budget-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.budget-table{overflow-x:auto}.budget-row{min-width:620px}.budget-upcoming{min-width:620px}#budget-planner .section-head{align-items:flex-start;flex-wrap:wrap}#budget-planner .page-head{align-items:flex-start;flex-direction:column}#budget-planner .metrics{gap:15px}#budget-planner .metric strong{font-size:25px}#budget-planner svg{min-width:550px}#budget-planner .budget-chart{overflow-x:auto}}
@media(prefers-reduced-motion:no-preference){#budget-planner progress{transition:all .2s ease}}

#budget-planner .page-actions{display:flex;gap:8px;flex-wrap:wrap}#budget-planner button:disabled{opacity:.5;cursor:wait}#budget-planner .budget-controls>div{display:flex;gap:10px;align-items:end;flex-wrap:wrap}

#budget-planner .budget-comparison{border-top:2px solid #0062ff;padding-top:20px}.comparison-legend{display:flex;flex-wrap:wrap;gap:12px 24px;margin:26px 0 10px}.comparison-legend span{display:flex;align-items:center;gap:8px;font-size:13px;overflow-wrap:anywhere}.comparison-legend i{display:inline-block;flex:none;width:28px;border-top:3px solid}.comparison-table{overflow-x:auto;margin-top:24px}.comparison-table table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}.comparison-table th,.comparison-table td{text-align:right;vertical-align:top;padding:16px 12px;border-bottom:1px solid #e7ebf0;min-width:160px}.comparison-table th{font-size:13px;font-weight:600;overflow-wrap:anywhere}.comparison-table th:first-child{text-align:left;min-width:210px}.comparison-table tbody tr:first-child td{font-size:25px;font-weight:550;color:#0062ff}.comparison-table small{display:block;font-size:11px;color:#626b78;margin-top:5px}.comparison-source{margin-top:24px}.comparison-chart{overflow-x:auto}#budget-planner .comparison-chart svg{min-width:550px}.budget-comparison .text-button{color:#0062ff;background:none;border:0;font:inherit;cursor:pointer}

/* Compact layouts keep forms readable without sideways page scrolling. */
@media(max-width:650px){
 #budget-planner .metrics{grid-template-columns:1fr;gap:20px}
 #budget-planner .metric{min-width:0}
 #budget-planner .budget-controls,#budget-planner .budget-goal .budget-controls{grid-template-columns:1fr}
 #budget-planner input:not([type=checkbox]),#budget-planner select{font-size:16px;min-height:44px}
 #budget-planner .page-actions{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 #budget-planner .page-actions .btn{min-width:0;white-space:normal;text-align:center}
 #budget-planner .budget-labels{display:none}
 #budget-planner .budget-row{min-width:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;padding-block:20px}
 #budget-planner .budget-row>label{grid-column:1/-1}
 #budget-planner .budget-row>span:before{content:'Actual: ';font-size:12px;color:#626b78}
 #budget-planner .budget-upcoming{min-width:0;grid-template-columns:1fr;gap:12px}
 #budget-planner .budget-upcoming label{min-width:0}
 #budget-planner .budget-chart,#budget-planner .comparison-chart,#budget-planner .comparison-table{max-width:100%;overscroll-behavior-x:contain}
 #budget-planner .budget-chart:after,#budget-planner .comparison-chart:after{content:'Swipe chart to see all days';display:block;font-size:12px;color:#626b78;margin-top:8px}
 #budget-planner .comparison-table:after{content:'Swipe table to compare all plans';display:block;font-size:12px;color:#626b78;margin-top:8px}
 #budget-planner .budget-row>.text-button,#budget-planner .budget-upcoming>.text-button{min-width:44px;min-height:44px;justify-self:end}
}