/*
 * Drošības spilvena kalkulators (2026-10-20): tikai tas, ko calc.css nedod —
 * pamata izvēle (izdevumi / ienākumi), mēnešu izvēle ar "citu", progresa josla
 * ar iedaļām katram mēnesim, uzkrājuma līkne un starpposmi.
 */
.sp-calc .cx-seg { margin-bottom: 4px; }
.sp-seg3 { grid-template-columns: repeat(3, 1fr); }
.sp-hint { font-size: 13px; color: var(--text-3); line-height: 1.45; }
.sp-hint b { color: var(--text-2); font-weight: 600; }
.cx-field[hidden], .sp-mo-box[hidden], #sp-ch-box[hidden] { display: none; }
.sp-mo-box { margin-top: 6px; }
.sp-pair { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; }
.sp-pair .cx-field { margin-bottom: 0; }

.sp-bar { position: relative; height: 14px; border-radius: var(--r-full); background: var(--surface-2);
  border: 1px solid var(--line); overflow: hidden; margin-top: 18px; }
.sp-fill { position: absolute; inset: 0 auto 0 0; background: var(--g-saving); border-radius: var(--r-full); transition: width .25s ease; }
.sp-bar i { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--surface-1); opacity: .9; }
.sp-have { margin: 8px 0 0; font-size: 14px; color: var(--text-2); }
.sp-have b { color: var(--text); font-variant-numeric: tabular-nums; }

.sp-area { fill: color-mix(in srgb, var(--g-saving) 16%, transparent); }
.sp-line { fill: none; stroke: var(--g-saving); stroke-width: 2.5; stroke-linejoin: round; }
.sp-goal { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 4; }
.sp-goal-t { fill: var(--accent); font-size: 11px; font-weight: 700; paint-order: stroke; stroke: var(--surface-1); stroke-width: 4px; }
.sp-dot { fill: var(--surface-1); stroke: var(--g-saving); stroke-width: 2; }
.sp-dot-t { fill: var(--text-2); font-size: 11px; font-weight: 700; paint-order: stroke; stroke: var(--surface-1); stroke-width: 4px; }

.sp-ms { list-style: none; padding: 0; margin: 0; }
.sp-ms li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.sp-ms li b { color: var(--text); font-weight: 600; }
.sp-ms li em { font-style: normal; color: var(--text-2); text-align: right; font-variant-numeric: tabular-nums; }
.sp-ms li span { grid-column: 1 / -1; color: var(--text-3); font-size: 13px; }
.sp-ms li span.ok { color: var(--state-good); font-weight: 600; }
.sp-ms li.goal b { color: var(--accent); }

@media (max-width: 640px) {
  .sp-pair { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .sp-fill { transition: none; }
}