/* Calculator stays inside the existing white portfolio panel. */
.savings { color-scheme: light; scroll-margin-top: 100px; }
.savings [hidden] { display: none !important; }
.savings .savings-heading { max-width: 820px; }
.savings .savings-heading h2 { max-width: 23ch; }
.savings .savings-heading p { max-width: 64ch; margin-top: 18px; font-size: 17px; line-height: 1.6; }
.savings-layout { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.savings-form { min-width: 0; }
.savings-form-intro { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; margin-bottom: 22px; }
.savings .savings-form-intro p { font-size: 13px; line-height: 1.5; }
.savings-reset { padding: 4px 0; border: 0; background: transparent; color: #344657; font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.savings-group { border-top: 1px solid #dfe4e8; }
.savings-group:last-child { border-bottom: 1px solid #dfe4e8; }
.savings-group > summary { display: flex; align-items: center; gap: 14px; padding: 22px 0; list-style: none; cursor: pointer; }
.savings-group > summary::-webkit-details-marker, .savings-method > summary::-webkit-details-marker { display: none; }
.savings-group > summary > .icon { width: 25px; height: 25px; flex: 0 0 25px; color: #435566; }
.savings-group summary strong { display: block; color: #101820; font-size: 20px; font-weight: 700; line-height: 1.3; }
.savings-group summary small { display: block; margin-top: 5px; color: #65717c; font-size: 13px; line-height: 1.5; }
.savings-chevron { margin-left: auto; padding-left: 8px; font-size: 27px; font-weight: 400; line-height: 1; color: #435566; }
.savings-group[open] > summary .savings-chevron { transform: rotate(45deg); }
.savings-group-body { display: grid; gap: 28px; padding: 4px 0 28px; }
.savings-field { min-width: 0; }
.savings-field-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 8px; }
.savings-field label, .savings-choice legend { color: #192634; font-size: 15px; line-height: 1.4; font-weight: 600; }
.savings-number { display: inline-flex; flex: 0 0 auto; align-items: baseline; justify-content: flex-end; gap: 5px; padding: 8px 11px; background: #f4f6f7; border: 1px solid #dde3e7; border-radius: 9px; white-space: nowrap; }
.savings-number input { appearance: textfield; -moz-appearance: textfield; width: 6ch; max-width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #102b3b; font: inherit; font-size: 19px; font-weight: 700; line-height: 1.5; text-align: right; font-variant-numeric: tabular-nums; }
.savings-number input::-webkit-inner-spin-button, .savings-number input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.savings-number > span { font-size: 12px; color: #53626e; }
.savings-range { --range-progress: 0%; display: block; appearance: none; -webkit-appearance: none; width: 100%; height: 32px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.savings-range::-webkit-slider-runnable-track { height: 5px; border-radius: 9px; background: linear-gradient(to right, var(--chosen-accent, #102b3b) var(--range-progress), #e0e5e8 var(--range-progress)); }
.savings-range::-moz-range-track { height: 5px; border-radius: 9px; background: linear-gradient(to right, var(--chosen-accent, #102b3b) var(--range-progress), #e0e5e8 var(--range-progress)); }
.savings-range::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; height: 23px; width: 23px; margin-top: -9px; border: 3px solid #fff; border-radius: 50%; background: var(--chosen-accent, #102b3b); box-shadow: 0 0 0 1px #abb7c1, 0 2px 6px #102b3b22; }
.savings-range::-moz-range-thumb { height: 17px; width: 17px; border: 3px solid #fff; border-radius: 50%; background: var(--chosen-accent, #102b3b); box-shadow: 0 0 0 1px #abb7c1, 0 2px 6px #102b3b22; }
.savings .savings-hint { color: #65717c; font-size: 12px; line-height: 1.55; }
.savings-assumption { padding: 17px; border-radius: 12px; background: #f4f6f7; }
.savings-assumption .savings-number { background: #fff; }
.savings-choice { margin: 0; padding: 0; border: 0; min-width: 0; }
.savings-choice legend { margin-bottom: 12px; padding: 0; }
.savings-choice > div { display: flex; gap: 10px; }
.savings-choice label { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 90px; min-height: 44px; padding: 8px 14px; border: 1px solid #cdd6dd; border-radius: 10px; color: #263847; cursor: pointer; font-size: 15px; }
.savings-choice label:has(input:checked) { border-color: #53626e; background: #f0f4f6; }
.savings-choice input { width: 17px; height: 17px; margin: 0; accent-color: #102b3b; }
.savings-results { position: sticky; top: 108px; min-width: 0; }
.savings-result-card { padding: 28px; border: 1px solid #dce3e8; border-radius: 20px; background: #f4f7f8; }
.savings .savings-result-label { font-size: 15px; font-weight: 600; color: #354b59; }
.savings-main-metric { margin-top: 12px; }
.savings-main-metric strong, .savings-money-metric strong { display: block; color: #102b3b; font-size: clamp(36px, 3.9vw, 58px); font-weight: 700; line-height: 1.12; letter-spacing: -.045em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.savings-main-metric > span, .savings-money-metric > span { display: block; margin-top: 5px; color: #50616c; font-size: 14px; line-height: 1.4; }
.savings-money-metric { margin-top: 21px; }
.savings-money-metric strong { font-size: clamp(30px, 3.2vw, 46px); }
.savings .savings-annual { display: grid; gap: 5px; margin-top: 20px; color: #50616c; font-size: 13px; line-height: 1.5; }
.savings-annual strong { color: #172f3e; font-size: clamp(28px, 3vw, 40px); line-height: 1.12; letter-spacing: -.035em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.savings-annual strong { display: inline-block; width: fit-content; padding: 1px 6px 3px; background: var(--chosen-highlight, #ffe600); color: var(--chosen-highlight-ink, #1a1500); }
.savings-workload { display: grid; gap: 7px; margin-block: 24px; }
.savings-bar-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px; color: #50616c; }
.savings-bar-label strong { color: #243d4b; font-weight: 600; }
.savings-bar { height: 7px; border-radius: 5px; background: #e0e6e9; overflow: hidden; margin-bottom: 7px; }
.savings-bar span { display: block; height: 100%; max-width: 100%; border-radius: inherit; background: var(--chosen-accent, #102b3b); transition: width .18s ease; }
.savings-bar [data-bar="before"] { background: #aab8c2; }
.savings-breakdown { margin: 0; padding-top: 20px; border-top: 1px solid #dce3e8; }
.savings-breakdown > div, .savings-hours-detail > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 11px; font-size: 13px; line-height: 1.45; }
.savings-breakdown dt, .savings-hours-detail dt { color: #52636e; }
.savings-breakdown dd, .savings-hours-detail dd { margin: 0; color: #183243; font-weight: 700; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.savings .savings-result-note, .savings .savings-cta-note { color: #596974; font-size: 12px; line-height: 1.55; }
.savings .savings-result-note { margin-top: 17px; }
.savings .savings-negative { color: #6b3b17; font-size: 13px; line-height: 1.5; margin-top: 15px; }
.savings-missed { border-top: 1px solid #dce3e8; margin-top: 18px; padding-top: 18px; }
.savings-missed strong { color: #263b49; font-size: 13px; line-height: 1.5; }
.savings .savings-missed p { margin-top: 5px; color: #596974; font-size: 12px; line-height: 1.55; }
.savings .savings-missed .savings-missed-note { margin-top: 10px; color: #71808a; font-style: italic; }
.savings-call-risk { margin-top: 20px; padding-top: 18px; border-top: 1px solid #dce3e8; color: #304a59; font-size: 13px; line-height: 1.6; }
.savings-call-risk strong { color: #102b3b; }
.savings-cta { display: flex; justify-content: center; align-items: center; gap: 12px; min-height: 50px; padding: 12px 16px; margin-top: 24px; border-radius: 999px; background: var(--chosen-accent, #102b3b); color: var(--chosen-on, #fff); text-decoration: none; font-size: 15px; font-weight: 700; }
.savings-cta:hover { background: var(--chosen-hover, #071c28); }
.savings-cta .icon { width: 20px; height: 20px; flex: 0 0 auto; }
.savings .savings-cta-note { margin-top: 9px; text-align: center; }
.savings-method { margin-top: 18px; }
.savings-method > summary { display: flex; gap: 12px; justify-content: space-between; padding: 7px 0; list-style: none; color: #344b5a; font-size: 14px; font-weight: 600; cursor: pointer; }
.savings-method > summary > span { font-size: 20px; line-height: 1; }
.savings-method[open] > summary > span { transform: rotate(45deg); }
.savings .savings-method p { color: #5c6b76; font-size: 13px; line-height: 1.65; margin-top: 12px; }
.savings-hours-detail { margin-block: 16px; }
.savings-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html[data-theme="portfolio"] .savings :is(button, a, summary, input):focus-visible { outline: 3px solid #536b7b; outline-offset: 4px; }
@media (max-width: 1100px) {
  .savings-layout { gap: 24px; }
  .savings-result-card { padding: 23px; }
}
@media (max-width: 850px) {
  .savings-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .savings-results { position: static; }
  .savings-main-metric strong { font-size: 48px; }
  .savings-money-metric strong { font-size: 40px; }
}
@media (max-width: 520px) {
  html[data-theme="portfolio"] .portfolio-panel .savings.section { padding: 40px 16px; }
  .savings .savings-heading h2 { font-size: 31px !important; line-height: 1.1; }
  .savings .savings-heading p { font-size: 15px; margin-top: 16px; }
  .savings-field-top { gap: 10px; }
  .savings-field label, .savings-choice legend { font-size: 14px; }
  .savings-number { padding: 8px; gap: 4px; }
  .savings-number input { font-size: 17px; width: 5.5ch; }
  .savings-number > span { font-size: 11px; }
  .savings-assumption { padding: 14px; }
  .savings-group summary strong { font-size: 19px; }
  .savings-group > summary { padding: 20px 0; }
  .savings-group summary small { font-size: 12px; }
  .savings-result-card { padding: 22px 18px; border-radius: 17px; }
  .savings-main-metric strong { font-size: 44px; }
  .savings-money-metric strong { font-size: 35px; }
  .savings-breakdown > div { font-size: 12px; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .savings-bar span { transition: none; }
}