/* Savings slider vs the 2036 target (web/savings.js). Uses the forecast card's head and "how" styles. */
.sv { --sv-c: var(--green); --sv-t: var(--blue); }
.sv-ctl { display: grid; grid-template-columns: 1fr; gap: 2px; margin: 14px 0 2px; }
.sv-ctl label { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-weight: 600; color: var(--ink2); }
.sv-ctl label b { font-size: 20px; color: var(--ink); white-space: nowrap; }
.sv-ctl input[type="range"] { width: 100%; min-width: 0; accent-color: var(--accent); height: 32px; margin: 0; }
.sv-btns { margin: 8px 0 4px; }
.sv-btns button.goal { border-color: var(--sv-t); }
.sv-sent { font-size: 16px; margin: 12px 0 10px; }
.sv-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sv-stat { background: var(--soft); border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; border-inline-start: 4px solid var(--sv-c); }
.sv-v { font-size: 26px; line-height: 1.2; }
.sv-l { font-size: 13px; color: var(--ink2); font-weight: 600; }
.sv-r { font-size: 12px; color: var(--ink3); }
.sv-chip { align-self: flex-start; margin-top: 4px; font-size: 13px; font-weight: 600; padding: 2px 10px; border-radius: 999px; }
.sv-chip.ok { background: #2F7D4F; color: #fff; }
.sv-chip.maybe { background: #E3A31A; color: #2A1F00; }
.sv-chip.no { background: #B83A26; color: #fff; }
.sv-bar { position: relative; height: 18px; background: var(--line); border-radius: 9px; margin: 34px 0 2px; }
.sv-band { position: absolute; top: 0; bottom: 0; background: var(--sv-c); opacity: .25; border-radius: 9px; }
.sv-fill { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; background: var(--sv-c); border-radius: 9px; transition: width .15s; }
.sv-tgt { position: absolute; top: -6px; bottom: -6px; width: 0; border-inline-start: 2px dashed var(--sv-t); }
.sv-tgt span { position: absolute; bottom: calc(100% + 2px); transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--blue-ink); }
[dir="rtl"] .sv-tgt span { transform: translateX(50%); }
.sv-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink3); }
.sv-need { margin: 10px 0 4px; }
.sv-base { margin: 4px 0; }
.sv-src { margin: 4px 0; padding-inline-start: 18px; }
.sv-src li { margin: 3px 0; }
@media (max-width: 640px) {
  .sv-stats { grid-template-columns: 1fr; }
  .sv-v { font-size: 22px; }
}