/* Keep solar calculator content inside its cards, including narrow phones. */
.solar-shell > *,
.solar-shell .solar-grid,
.solar-shell .solar-grid > *,
.solar-shell .solar-visual,
.solar-shell .solar-visual > .glass-card,
.solar-shell .results-card,
.solar-shell .metric,
.solar-shell .battery-visual,
.solar-shell .battery-meta > span,
.solar-shell .battery-meta > span > span { min-width: 0; max-width: 100%; }
.solar-shell .tax-card > *,
.solar-shell .tax-head > div { min-width: 0; }
.solar-shell .tax-head { overflow-wrap: anywhere; }
.solar-shell .battery-help,
.solar-shell h1,
.solar-shell .results-note,
.solar-shell .result-summary,
.solar-shell .metric span,
.solar-shell .assumptions-info-strip strong { overflow-wrap: anywhere; }
.solar-shell .battery-meta > span > span:last-child { flex: 1; }
.solar-shell .flow-icon { flex-shrink: 0; }
.solar-shell .goal-scale input { left: 0; top: 0; width: 1px; height: 1px; margin: 0; padding: 0; }
.solar-shell .goal-scale input:focus-visible + .goal-scale-option { outline: 2px solid #F5F1E7; outline-offset: 2px; }
@media (max-width: 780px) {
  .solar-shell .solar-grid { grid-template-columns: minmax(0, 1fr); }
  .solar-shell .solar-visual { padding: 0; overflow: visible; }
  .solar-shell .solar-visual > .glass-card { box-sizing: border-box; width: 100%; grid-template-columns: minmax(0, 1fr); }
  .solar-shell .results-card,
  .solar-shell .metric-grid,
  .solar-shell .assumptions-info-strip { grid-template-columns: minmax(0, 1fr); }
  .solar-shell .battery-meta { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .solar-shell .battery-shell { width: 100%; min-width: 0; box-sizing: border-box; grid-template-columns: minmax(0, .68fr) 7px minmax(0, .32fr); }
  .solar-shell .battery-visual-head { flex-wrap: wrap; }
  .solar-shell .slider-wrap { height: auto; min-height: 0; }
  .solar-shell .slider-head { flex-wrap: wrap; margin-bottom: 6px; }
  .solar-shell .slider-wrap input[type="range"] { display: block; width: 100%; margin: 8px 0; }
  .solar-shell .slope-field { display: flex; flex-direction: column; gap: 8px; }
}
@media (max-width: 360px) {
  .solar-shell .goal-scale { grid-template-columns: minmax(0, 1fr); }
}