/* tools.css — the four calculators (budget-planner, car-affordability, * home-affordability, financial-checkup) on top of refined.css. * * Editorial precision, 2026-08-29: every value is a refined.css token, corners * are square, colours come from the palette (the green/red callouts reuse the * .form-msg.ok/.err values), green is the accent and --caution the middle tier. The * hero, header, footer and page rhythm come from refined.css — the pages carry * `.gf` on and `band band--alt tool-section` on the calculator section. * Loaded only by the four calculator pages (tools/index.html does not use it). Results DOM below the form is built by each page's * script after "Calculate"; those classes are styled here too. * * Structure (2026-08-29) is the onboarding page's: a paper hero (eyebrow · h1 * · .page-sub), then an alt band holding one centred column of white panels, * each headed by a small label on a hairline. The inputs fill the first panel * (the checkup keeps three), the primary button sits inside that panel under its * fields, and the results arrive in the panel after it. The page closes with * the service pages' band: h2 + Get Started / See our services. */ /* ── section + column ───────────────────────────────────────────────────── */ .tool-section{position:relative} .tool-container{width:100%;max-width:calc(var(--col-form) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)} /* A white panel on the alt band, the same surface as .bk (the booking card). */ .tool-panel{background:var(--paper);box-shadow:var(--shadow);padding:var(--s6) var(--s5) var(--s5)} .tool-panel+.tool-panel{margin-top:var(--s5)} /* Panel label on a hairline: the mono kicker (numbers dropped, owner 2026-08-29). */ .panel-head{padding-bottom:var(--s3);border-bottom:var(--hairline);margin-bottom:var(--s5)} .panel-title{font-family:var(--mono);font-size:var(--t-label);font-weight:600;letter-spacing:var(--track-label);line-height:var(--lh-label);text-transform:uppercase;color:var(--ink)} /* The submit lives inside the input panel, under its fields, on a hairline — the site form pattern. */ .tool-submit{margin-top:var(--s5);padding-top:var(--s5);border-top:var(--hairline)} .tool-submit .btn{min-width:var(--btn-min)} /* ── form ───────────────────────────────────────────────────────────────── */ .tool-form-group{margin-bottom:var(--s5)} .tool-form-group:last-child{margin-bottom:0} .tool-form-row{display:flex;gap:var(--s5);flex-wrap:wrap;margin-bottom:var(--s5)} .tool-form-row:last-child{margin-bottom:0} .tool-form-row .tool-form-group{flex:1;min-width:200px;margin-bottom:0} /* Field label: the onboarding form's bold body label; the help text sits under the control. */ .tool-label{display:block;font-family:var(--body);font-size:var(--t-sm);font-weight:600;line-height:var(--lh-body);color:var(--ink);margin-bottom:var(--s2)} .tool-hint{font-size:var(--t-meta);line-height:var(--lh-body);color:var(--ink-faint);margin:var(--s1) 0 0} /* The same control as .field input in refined.css, with room for the $ prefix; fills its column like the onboarding fields. */ .tool-input{width:100%;font-family:var(--body);font-size:var(--t-body);color:var(--ink);background:var(--paper);border:1px solid var(--rule-mid);border-radius:0;padding:.85rem .95rem .85rem 1.8rem;box-sizing:border-box;font-variant-numeric:tabular-nums;transition:border-color .15s} .tool-input:focus{outline:none;border-color:var(--green)} .tool-input::placeholder{color:var(--ink-faint)} .tool-input-sm{padding-left:.95rem;padding-right:2rem} .tool-input-plain{padding-left:.95rem} .input-wrapper,.input-wrapper-sm{position:relative;display:block;width:100%} .input-prefix,.input-suffix{position:absolute;top:50%;transform:translateY(-50%);color:var(--ink-faint);font-size:var(--t-body);font-variant-numeric:tabular-nums;pointer-events:none} .input-prefix{left:.85rem} .input-suffix{right:.85rem;font-size:var(--t-sm)} /* Toggles: a ruled segmented control; the active segment is ink on paper. */ .income-toggle,.term-toggle{display:flex;gap:0;border:var(--hairline-mid)} .income-toggle{margin-bottom:var(--s5)} .income-toggle button,.term-toggle button{flex:1;min-height:44px;padding:.7rem .5rem;white-space:nowrap;background:transparent;color:var(--ink-mute);border:0;font-family:var(--mono);font-size:var(--t-sm);font-weight:500;line-height:1.4;cursor:pointer;transition:background .18s,color .18s} .income-toggle button+button,.term-toggle button+button{border-left:var(--hairline-mid)} .income-toggle button.active,.term-toggle button.active{background:var(--ink);color:var(--paper);font-weight:600} /* ── results (shared) ───────────────────────────────────────────────────── */ /* #resultsSection is the hidden/visible switch (its className is rewritten by the page script); the panel sits inside it. */ .results-section{display:none;margin-top:var(--s5)} .results-section.visible{display:block} /* The headline figure directly under the panel head needs no second rule. */ .panel-head+.result-big .result-big-label{border-top:0;padding-top:0} .results-header{margin-bottom:var(--s5)} .results-title{font-family:var(--disp);font-size:var(--t-h3);font-weight:600;line-height:var(--lh-h3);letter-spacing:var(--track-h3);color:var(--ink);margin-bottom:var(--s1)} .results-net{font-size:var(--t-body);color:var(--ink-mute);font-variant-numeric:tabular-nums} .tax-tier-info{font-size:var(--t-sm);color:var(--green);margin-top:var(--s2);min-height:1.2em;font-variant-numeric:tabular-nums} /* The headline figure: display size, tight, tabular, on an ink kicker. */ .result-big{margin-bottom:var(--s6)} .result-big-label{font-family:var(--mono);font-size:var(--t-label);font-weight:500;letter-spacing:var(--track-label);line-height:var(--lh-label);text-transform:uppercase;color:var(--ink-faint);padding-top:var(--s3);border-top:var(--hairline-ink);margin-bottom:var(--s2)} .result-big-value{font-family:var(--disp);font-size:var(--t-display);font-weight:600;line-height:var(--lh-display);letter-spacing:var(--track-figure);color:var(--ink);font-variant-numeric:tabular-nums} .result-big-sub{font-size:var(--t-body);color:var(--ink-mute);margin-top:var(--s2)} /* Ruled cells instead of boxed cards. */ .breakdown-card,.gauge-card,.ratio-card,.metric-card,.overall-score-card{background:transparent;border:0;border-top:var(--hairline-ink);border-radius:0;padding:var(--s4) 0 0;margin-bottom:var(--s5)} .breakdown-title,.gauge-label,.ratio-label,.overall-score-label{font-family:var(--mono);font-size:var(--t-label);font-weight:500;letter-spacing:var(--track-label);line-height:var(--lh-label);text-transform:uppercase;color:var(--ink-faint);margin-bottom:var(--s3)} .gauge-value,.ratio-value,.conservative-value,.metric-value,.overall-score-value{font-family:var(--disp);font-size:var(--t-figure);font-weight:600;line-height:var(--lh-display);letter-spacing:var(--track-figure);color:var(--ink);font-variant-numeric:tabular-nums;margin-bottom:var(--s1)} .gauge-limit,.ratio-limit{font-size:var(--t-meta);color:var(--ink-faint);font-variant-numeric:tabular-nums} /* State as text colour, palette only: --green (safe), --caution (middle tier), the warning red. --caution is a burnt amber, NOT the retired gold — gold left the brand on 2026-08-31 and must not creep back in through this scale under a new name. Collapsing caution into green would merge two tiers the calculators actually compute. */ .gauge-value.safe,.ratio-value.safe,.metric-value.green,.overall-score-value.green{color:var(--green)} .gauge-value.caution,.ratio-value.caution,.metric-value.yellow{color:var(--caution)} .gauge-value.warning,.ratio-value.warning,.metric-value.red{color:#7a2b2b} /* ── car + home: breakdown, gauges/ratios, callouts ─────────────────────── */ .breakdown-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);padding:var(--s2) 0;border-bottom:var(--hairline)} .breakdown-row:last-child{border-bottom:0} .breakdown-row-label{font-size:var(--t-sm);color:var(--ink-mute)} .breakdown-row-value{font-size:var(--t-sm);font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums} .breakdown-row-total{padding-top:var(--s3);margin-top:var(--s1);border-top:var(--hairline-mid)} .breakdown-row-total .breakdown-row-label{color:var(--ink);font-weight:600} .breakdown-row-total .breakdown-row-value{font-size:var(--t-body);font-weight:600;color:var(--ink)} .gauge-grid,.ratio-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s6);margin-bottom:var(--s3)} /* ── budget-planner: rows and bars ──────────────────────────────────────── */ .budget-row{display:flex;align-items:center;padding:var(--s3) 0;border-bottom:var(--hairline)} .budget-row:first-child{border-top:var(--hairline-ink)} .budget-category{width:180px;flex-shrink:0} .budget-category-name{font-size:var(--t-sm);font-weight:500;color:var(--ink)} .budget-category-detail{font-size:var(--t-meta);color:var(--ink-faint);margin-top:2px} .budget-bar-wrapper{flex:1;margin:0 var(--s4)} .budget-bar{height:8px;background:var(--ink-mute);transition:width .6s ease} .budget-bar.savings{background:var(--green)} .budget-amount{width:100px;text-align:right;flex-shrink:0} .budget-amount-value{font-size:var(--t-body);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums} .budget-amount-pct{font-size:var(--t-meta);color:var(--ink-faint);font-variant-numeric:tabular-nums} /* ── financial-checkup: metrics ─────────────────────────────────────────── */ .metric-header{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s2)} .metric-dot{width:8px;height:8px;flex-shrink:0} .metric-dot.green{background:var(--green)} .metric-dot.yellow{background:var(--caution)} .metric-dot.red{background:#7a2b2b} .metric-name{font-size:var(--t-body);font-weight:600;color:var(--ink)} .metric-benchmark{font-size:var(--t-meta);line-height:var(--lh-body);color:var(--ink-faint)} .metric-detail{font-size:var(--t-sm);line-height:var(--lh-body);color:var(--ink-mute);margin-top:var(--s2)} .overall-score-desc{font-size:var(--t-sm);line-height:var(--lh-body);color:var(--ink-mute)} /* ── callouts ───────────────────────────────────────────────────────────── */ .savings-callout,.conservative-callout,.value-warning,.term-warning,.pmi-callout,.expert-note,.emergency-note,.self-employed-note{margin-top:var(--s5);padding:var(--s4);border:var(--hairline);border-radius:0;font-size:var(--t-sm);line-height:var(--lh-body);color:var(--ink-body);background:var(--paper-alt)} .self-employed-note{margin-top:0;margin-bottom:var(--s5);max-width:var(--measure);color:var(--ink-mute)} .term-warning,.pmi-callout,.conservative-callout,.value-warning{margin-top:0;margin-bottom:var(--s5)} .savings-callout,.conservative-callout{background:var(--green-tint);border-color:var(--green-line);color:var(--green)} .savings-callout-title,.conservative-title{font-size:var(--t-sm);font-weight:600;color:var(--green);margin-bottom:var(--s1)} .savings-callout-text,.conservative-text{font-size:var(--t-sm);line-height:var(--lh-body);color:var(--green)} .value-warning{background:#fbeeee;border-color:#dcb3b3;color:#7a2b2b} .value-warning strong{color:#7a2b2b} .term-warning strong,.pmi-callout strong{color:var(--caution)} .expert-note-title,.emergency-note-title{font-family:var(--mono);font-size:var(--t-label);font-weight:500;letter-spacing:var(--track-label);line-height:var(--lh-label);text-transform:uppercase;color:var(--ink-faint);margin-bottom:var(--s2)} .expert-note-text,.emergency-note-text{font-size:var(--t-sm);line-height:var(--lh-body);color:var(--ink-mute)} /* ── disclaimer ─────────────────────────────────────────────────────────── */ .tool-disclaimer{margin-top:var(--s6);padding-top:var(--s4);border-top:var(--hairline);font-size:var(--t-meta);line-height:var(--lh-body);color:var(--ink-faint)} .tool-disclaimer a{color:var(--ink-mute);border-bottom:1px solid var(--rule-mid)} .tool-disclaimer a:hover{color:var(--ink);border-bottom-color:var(--ink)} /* ── phones ─────────────────────────────────────────────────────────────── */ @media(max-width:768px){ .tool-panel{padding:var(--s5) var(--s4)} .tool-submit .btn{width:100%} .tool-form-row{flex-direction:column;gap:0} .tool-form-row .tool-form-group{min-width:0;margin-bottom:var(--s5)} .tool-form-row .tool-form-group:last-child{margin-bottom:0} .gauge-grid,.ratio-grid{grid-template-columns:1fr} .budget-row{flex-wrap:wrap;gap:var(--s1)} .budget-category{width:100%;display:flex;justify-content:space-between;align-items:baseline} .budget-bar-wrapper{width:100%;margin:0;order:3} .budget-amount{width:auto} .budget-amount-pct{display:inline;margin-left:var(--s1)} }