/*
 * SunAmpRV RV Battery Calculator. Built on the SunAmpRV theme: its colours (--cell navy, --sun yellow,
 * --frame, --wire, --ink, --slate, --link), fonts (--font-ui Overpass, --font-read Source Serif 4),
 * buttons (.sa-btn) and focus rings. The layout follows the calculator's own width:
 *   steps  (under 640 px)  one step per screen with Back and Next, for one-handed use on a phone
 *   flow   (640-1039 px)   every step on one page, results below, a summary bar along the bottom
 *   wide   (1040 px up)    the steps beside a summary that follows you down the page
 */

/* ---------- Page head and article ---------- */
.sacalc-page__head { padding-top: 22px; }
.sacalc-page__head h1 { font-weight: 800; font-size: 32px; line-height: 1.08; letter-spacing: -0.02em; margin-top: 12px; }
.sacalc-page__lead { margin-top: 10px; max-width: 62ch; font-size: 17px; line-height: 1.5; color: var(--slate); }
.sacalc-page__free { color: var(--ink); font-weight: 600; }
.sacalc-page__app { margin-top: 18px; }
.sacalc-page__article { margin-top: 56px; padding-bottom: 72px; border-top: 1px solid var(--wire); }
.sacalc-article { margin-top: 8px; }
.sacalc-article h2:first-child { margin-top: 1.4em; }
.sacalc-article .sacalc-source-note { display: block; margin-top: 4px; font-weight: 400; color: var(--slate); font-size: 14px; }
@container sa (min-width: 640px) {
	.sacalc-page__head h1 { font-size: 42px; }
	.sacalc-page__lead { font-size: 18px; }
}

/* ---------- The calculator ---------- */
.sacalc { container: sacalc / inline-size; --bad: #b42318; --bad-soft: #fef3f2; --ok: #1f7a3d; --ok-soft: #ecf7ef; --warn: #9a5b00; --warn-soft: #fff6e5; position: relative; }
.sacalc [hidden] { display: none !important; }
/* Grids never grow wider than the screen; the rules further down add columns where there's room. */
.sacalc-blocks, .sacalc-cards, .sacalc-starts, .sacalc-picker, .sacalc-picker ul, .sacalc-together__list, .sacalc-options, .sacalc-bars { grid-template-columns: minmax(0, 1fr); }
.sacalc-noscript { padding: 16px 18px; border: 1px solid var(--wire); border-radius: var(--radius); background: var(--frame); }
/* While the script draws the calculator, its place is kept, so the text below it doesn't jump. If the
   script is slow, a short note fades in. */
.sacalc-loading { display: none; }
@media (scripting: enabled) {
	.sacalc:not(.is-ready) { min-height: 100vh; }
	.sacalc:not(.is-ready) .sacalc-loading { display: block; margin: 0; padding: 16px 0; color: var(--slate); font-family: var(--font-ui); font-size: 16px; opacity: 0; animation: sacalc-late 0.3s ease-out 1.5s forwards; }
}
@keyframes sacalc-late { to { opacity: 1; } }
.sacalc button { font-family: var(--font-ui); }
.sacalc-label { font-weight: 700; font-size: 15px; line-height: 1.35; color: var(--ink); }
.sacalc-help { margin-top: 6px; font-size: 14.5px; line-height: 1.45; color: var(--slate); }
.sacalc-small { margin-top: 10px; font-size: 14.5px; line-height: 1.5; color: var(--slate); }
.sacalc-muted { color: var(--slate); font-weight: 400; }
.sacalc-link { background: none; border: 0; padding: 6px 0; color: var(--link); font-weight: 700; font-size: 15.5px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sacalc-link:hover { color: var(--cell); }
.sacalc-optional { font-weight: 400; color: var(--slate); }
.sacalc-tag { display: inline-flex; align-items: center; padding: 3px 8px 2px; border-radius: 4px; background: var(--sun-soft); color: var(--cell); font-size: 12.5px; font-weight: 800; line-height: 1.3; white-space: nowrap; }

/* Progress */
.sacalc-progress ol { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 0 14px; overflow-x: auto; scrollbar-width: none; }
.sacalc-progress ol::-webkit-scrollbar { display: none; }
.sacalc-progress li { flex: 1 1 0; min-width: 0; }
.sacalc-progress a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px 8px; border-radius: 6px; color: var(--slate); text-decoration: none; font-size: 12.5px; font-weight: 700; line-height: 1.2; text-align: center; }
.sacalc-progress a:hover { color: var(--cell); background: var(--frame); }
.sacalc-progress__n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--wire-strong); background: var(--day); color: var(--ink); font-size: 14.5px; font-weight: 800; }
.sacalc-progress .is-done .sacalc-progress__n { border-color: var(--cell); background: var(--cell); color: #fff; }
.sacalc-progress .is-current .sacalc-progress__n { border-color: var(--sun); background: var(--sun); color: var(--cell); }
.sacalc-progress .is-current a { color: var(--cell); }
.sacalc[data-layout="wide"] .sacalc-progress { display: none; }
.sacalc[data-layout="flow"] .sacalc-progress a { flex-direction: row; justify-content: center; gap: 8px; font-size: 14px; }
.sacalc[data-layout="flow"] .sacalc-progress__n { width: 26px; height: 26px; font-size: 13px; }

/* Layout */
.sacalc-layout { display: block; }
.sacalc[data-layout="wide"] .sacalc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 352px; gap: 28px; align-items: start; }
.sacalc-inputs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }

/* A step */
.sacalc-step { min-width: 0; padding: 20px 18px 22px; border: 1px solid var(--wire); border-radius: 12px; background: var(--day); scroll-margin-top: 16px; }
.sacalc-step__count { font-size: 13.5px; font-weight: 700; color: var(--slate); }
.sacalc-step__head h2 { margin-top: 2px; font-weight: 800; font-size: 23px; line-height: 1.2; }
.sacalc-step__head h2:focus { outline: none; }
.sacalc-step__head h2:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.sacalc-step__lead { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--ink); }
.sacalc-step > * + * { margin-top: 16px; }
.sacalc-step > .sacalc-step__lead { margin-top: 8px; }
@container sacalc (min-width: 640px) {
	.sacalc-step { padding: 24px 26px 26px; }
}

/* Example picker */
.sacalc-starts { display: grid; gap: 10px; }
.sacalc-start { display: grid; gap: 4px; width: 100%; padding: 14px 16px 13px 18px; border: 1.5px solid var(--wire-strong); border-radius: 10px; background: var(--day); text-align: left; cursor: pointer; color: var(--ink); position: relative; transition: border-color .15s, background-color .15s; }
.sacalc-start:hover { border-color: var(--cell); }
.sacalc-start__name { font-weight: 800; font-size: 17px; line-height: 1.25; }
.sacalc-start__blurb { font-size: 14.5px; line-height: 1.4; color: var(--slate); }
.sacalc-start[aria-pressed="true"] { border: 2px solid var(--cell); padding: 13.5px 15.5px 12.5px 17.5px; background: var(--frame); }
.sacalc-start[aria-pressed="true"]::before { content: ""; position: absolute; left: -2px; top: -2px; bottom: -2px; width: 6px; border-radius: 10px 0 0 10px; background: var(--sun); }
.sacalc-start[aria-pressed="true"] .sacalc-start__name::after { content: "Selected"; margin-left: 8px; padding: 2px 7px 1px; border-radius: 4px; background: var(--cell); color: #fff; font-size: 12px; font-weight: 800; vertical-align: 2px; }
.sacalc-start--plain .sacalc-start__name { font-weight: 700; }
@container sacalc (min-width: 560px) {
	.sacalc-starts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sacalc-start--plain { grid-column: span 1; }
	.sacalc-starts .sacalc-start--plain:first-of-type { grid-column: 1 / 2; }
}
.sacalc-confirm { padding: 14px 16px; border-radius: 10px; background: var(--sun-soft); }
.sacalc-confirm p { font-weight: 600; }
.sacalc-confirm__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.sacalc-origin { font-size: 14.5px; color: var(--slate); }
.sacalc-origin:empty { display: none; }

/* Choice buttons */
.sacalc-choices__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.sacalc-chip { display: grid; align-content: center; gap: 2px; min-height: 52px; padding: 9px 10px; border: 1.5px solid var(--wire-strong); border-radius: 8px; background: var(--day); color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.2; text-align: center; cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; }
.sacalc-chip strong { font-weight: 800; font-size: 15.5px; }
.sacalc-chip span { font-weight: 400; font-size: 13px; color: var(--slate); }
.sacalc-chip:hover { border-color: var(--cell); }
.sacalc-chip[aria-pressed="true"] { border-color: var(--cell); background: var(--cell); color: #fff; }
.sacalc-chip[aria-pressed="true"] span { color: var(--on-dark-muted); }
.sacalc-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sacalc-modes .sacalc-chip { min-height: 46px; }

/* Number fields */
.sacalc-field { display: grid; gap: 6px; min-width: 0; }
.sacalc-field > label { font-weight: 700; font-size: 15px; line-height: 1.35; }
.sacalc-input { position: relative; display: flex; align-items: stretch; min-width: 0; }
.sacalc-input input, .sacalc-input select { width: 100%; min-width: 0; height: 48px; padding: 0 12px; border: 1.5px solid var(--wire-strong); border-radius: 8px; background: var(--day); color: var(--ink); font-family: var(--font-ui); font-size: 17px; font-weight: 600; }
.sacalc-input[style*="--u"] input { padding-right: calc(var(--u) * 0.62em + 24px); }
.sacalc-input input::placeholder { color: #7a8794; font-weight: 400; }
.sacalc-unit { position: absolute; right: 12px; top: 0; bottom: 0; display: flex; align-items: center; color: var(--slate); font-size: 14.5px; font-weight: 600; pointer-events: none; white-space: nowrap; }
.sacalc-input--select select { appearance: none; -webkit-appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23536170' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 18l12 12 12-12'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; font-size: 16px; }
.sacalc-input--unit input { padding-right: 12px; border-radius: 8px 0 0 8px; }
.sacalc-input--unit select { flex: 0 0 auto; width: auto; max-width: 52%; margin-left: -1.5px; border-radius: 0 8px 8px 0; padding: 0 30px 0 10px; appearance: none; -webkit-appearance: none; background: var(--frame) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23536170' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 18l12 12 12-12'/%3E%3C/svg%3E") no-repeat right 9px center / 14px; font-size: 15px; font-weight: 700; }
.sacalc-input :is(input, select):focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; position: relative; z-index: 1; }
.sacalc-input input[aria-invalid="true"] { border-color: var(--bad); background: var(--bad-soft); }
.sacalc-err { font-size: 14.5px; font-weight: 700; line-height: 1.4; color: var(--bad); }
.sacalc-err:empty { display: none; }
.sacalc-err::before { content: ""; display: inline-block; width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'%3E%3Ccircle cx='24' cy='24' r='19'/%3E%3Cpath d='M24 14v12M24 33v.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'%3E%3Ccircle cx='24' cy='24' r='19'/%3E%3Cpath d='M24 14v12M24 33v.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.sacalc-field:is([data-wrap="days"], [data-wrap="sunHours"], [data-wrap="idleHours"], [data-wrap="reservePct"], [data-wrap="sharePct"], [data-wrap="lossesPct"], [data-wrap="dodPct"], [data-wrap="invEffPct"], [data-wrap="convEffPct"], [data-wrap="bmsA"], [data-wrap="bmsPeakA"], [data-wrap="panelW"], [data-wrap="roofW"], [data-wrap="existingW"], [data-wrap="alwaysOnW"], [data-wrap="idleW"], [data-wrap="measuredWh"], [data-wrap="measuredPeakW"], [data-wrap="measuredStartW"], [data-wrap="measuredMotorW"]) .sacalc-input { max-width: 280px; }
.sacalc-step [data-solar-fields] > * + *, .sacalc-step [data-show-mode] > * + *, .sacalc-idle { margin-top: 16px; }

/* Collapsible extras */
.sacalc-more { border-top: 1px solid var(--frame-2); padding-top: 4px; }
.sacalc-more > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; font-size: 15.5px; color: var(--cell); cursor: pointer; list-style: none; }
.sacalc-more > summary::-webkit-details-marker { display: none; }
.sacalc-more > summary::before { content: ""; width: 9px; height: 9px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; margin-right: 4px; }
.sacalc-more[open] > summary::before { transform: rotate(45deg); }
.sacalc-more > .sacalc-field, .sacalc-more > .sacalc-help { margin-top: 12px; }
.sacalc-more > .sacalc-field + .sacalc-field { margin-top: 18px; }
.sacalc-more > :last-child { margin-bottom: 8px; }

/* Solar switch and plain checkboxes */
.sacalc-switch, .sacalc-check { display: flex; align-items: center; gap: 10px; }
.sacalc-switch input, .sacalc-check input, .sacalc-together__list input { width: 22px; height: 22px; margin: 0; accent-color: var(--cell); flex: none; }
.sacalc-switch label { font-weight: 800; font-size: 17px; }
.sacalc-check label { font-size: 15px; font-weight: 600; }

/* Devices */
.sacalc-total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 12px 16px; border-radius: 10px; background: var(--cell); color: #fff; }
.sacalc-total__label { font-size: 14.5px; font-weight: 700; color: var(--on-dark-muted); }
.sacalc-total__value { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sacalc-total.is-paused .sacalc-total__value { color: var(--sun); font-size: 17px; }
.sacalc[data-layout="steps"] .sacalc-step[data-step="2"] .sacalc-total { position: sticky; top: 0; z-index: 3; }
.sacalc-devices { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 0; }
.sacalc-dev { min-width: 0; padding: 12px 14px 14px; border: 1px solid var(--wire); border-radius: 10px; background: var(--day); }
.sacalc-dev.is-typical { background: linear-gradient(to right, var(--sun-soft) 0, var(--sun-soft) 4px, var(--day) 4px); }
.sacalc-dev__head { display: flex; align-items: center; gap: 8px; }
.sacalc-dev__name { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 8px; margin-left: -8px; border: 1.5px solid transparent; border-radius: 6px; background: transparent; color: var(--ink); font-family: var(--font-ui); font-size: 17px; font-weight: 800; }
.sacalc-dev__name:hover { border-color: var(--wire); }
.sacalc-dev__name:focus-visible { border-color: var(--wire-strong); outline: 3px solid var(--focus); outline-offset: 1px; background: var(--day); }
.sacalc-dev__remove { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 6px; background: transparent; color: var(--slate); cursor: pointer; }
.sacalc-dev__remove svg { width: 18px; height: 18px; }
.sacalc-dev__remove:hover { background: var(--frame); color: var(--bad); }
.sacalc-dev__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 10px; margin-top: 8px; align-items: start; }
.sacalc-dev__grid .sacalc-seg, .sacalc-dev__grid .sacalc-field--power, .sacalc-dev__grid .sacalc-field--wide, .sacalc-dev__grid .sacalc-check, .sacalc-dev__grid .sacalc-field--start, .sacalc-dev__grid .sacalc-field--run { grid-column: 1 / -1; }
.sacalc-dev__grid .sacalc-field > label { font-size: 13.5px; color: var(--slate); }
.sacalc-dev__grid .sacalc-help { margin-top: 0; font-size: 13.5px; }
.sacalc-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1.5px solid var(--wire-strong); border-radius: 8px; overflow: hidden; }
.sacalc-seg button { min-height: 40px; border: 0; background: var(--day); color: var(--ink); font-weight: 700; font-size: 14.5px; cursor: pointer; }
.sacalc-seg button + button { border-left: 1.5px solid var(--wire-strong); }
.sacalc-seg button[aria-pressed="true"] { background: var(--cell); color: #fff; }
.sacalc-seg button:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.sacalc-dev__out { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; font-size: 14px; line-height: 1.45; }
.sacalc-dev__wh { font-weight: 700; color: var(--cell); }
.sacalc-dev__wh:empty { display: none; }
.sacalc-dev__note { color: var(--slate); }
.sacalc-dev .sacalc-err { margin-top: 6px; }
.sacalc-kind { font-weight: 700; color: var(--ink); }
@container sacalc (min-width: 560px) {
	.sacalc-dev__grid { grid-template-columns: 172px minmax(0, 1.4fr) 92px minmax(0, 0.9fr); }
	.sacalc-dev__grid .sacalc-seg { grid-column: auto; align-self: end; }
	.sacalc-dev__grid .sacalc-field--power { grid-column: auto; }
	.sacalc-dev__grid .sacalc-field--run, .sacalc-dev__grid .sacalc-field--start { grid-column: span 2; }
	.sacalc-dev__grid .sacalc-seg button { min-height: 48px; }
}
.sacalc[data-layout="wide"] .sacalc-dev__grid { grid-template-columns: 150px minmax(0, 1.4fr) 84px minmax(0, 0.9fr); }
.sacalc-empty { padding: 18px; border: 1.5px dashed var(--wire-strong); border-radius: 10px; color: var(--slate); text-align: center; }
.sacalc-add { display: grid; gap: 10px; }
.sacalc-add__btn { justify-self: start; }
.sacalc-add__btn::before { content: "+"; font-size: 22px; line-height: 1; margin-top: -2px; }
.sacalc-picker { display: grid; gap: 16px; padding: 14px; border: 1px solid var(--wire); border-radius: 10px; background: var(--frame); }
.sacalc-picker ul { list-style: none; display: grid; gap: 6px; padding: 0; margin-top: 8px; }
.sacalc-pick { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--wire); border-radius: 8px; background: var(--day); color: var(--ink); font-size: 15px; font-weight: 700; text-align: left; cursor: pointer; }
.sacalc-pick:hover { border-color: var(--cell); }
.sacalc-pick__v { flex: none; color: var(--slate); font-weight: 600; font-size: 14px; }
.sacalc-pick--own { justify-content: flex-start; color: var(--link); }
.sacalc-pick--own::before { content: "+"; font-size: 19px; line-height: 1; }
@container sacalc (min-width: 640px) {
	.sacalc-picker { grid-template-columns: 1fr 1fr; }
}

/* What runs together */
.sacalc-together { margin: 0; padding: 16px; border: 1px solid var(--wire); border-radius: 10px; min-width: 0; }
.sacalc-together legend { padding: 0 6px; margin-left: -6px; font-weight: 800; font-size: 16.5px; }
.sacalc-together__list { list-style: none; display: grid; gap: 4px; padding: 0; margin-top: 10px; }
.sacalc-together__list li { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.sacalc-together__list label { font-weight: 700; font-size: 15.5px; line-height: 1.35; }
.sacalc-together__sum { margin-top: 10px; font-weight: 700; font-size: 15px; color: var(--cell); }

/* Step bar (phones) */
.sacalc-stepbar { position: sticky; bottom: 0; z-index: 4; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 0 -2px; padding: 10px 2px calc(10px + env(safe-area-inset-bottom)); background: var(--day); border-top: 1px solid var(--wire); box-shadow: 0 -6px 14px -10px rgba(16, 39, 61, .35); }
.sacalc-stepbar .sa-btn { min-height: 50px; padding: 12px 18px; }
.sacalc-stepbar__next { grid-column: 3; }
.sacalc-stepbar__live { grid-column: 2; font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--slate); text-align: center; overflow: hidden; font-variant-numeric: tabular-nums; }
.sacalc[data-step="1"] .sacalc-stepbar__live { visibility: hidden; }
@container sacalc (max-width: 359.98px) {
	.sacalc-stepbar__live { display: none; }
	.sacalc-stepbar { grid-template-columns: 1fr 1fr; }
	.sacalc-stepbar__next { grid-column: 2; }
	.sacalc[data-step="1"] .sacalc-stepbar__next { grid-column: 1 / -1; }
}

/* ---------- The system: summary beside the form and at the top of the results ---------- */
.sacalc-summary { display: none; }
.sacalc[data-layout="wide"] .sacalc-summary { display: block; position: sticky; top: 16px; padding: 18px 18px 20px; border-radius: 14px; background: var(--cell); color: var(--on-dark); --focus: var(--sun); }
.sacalc-summary__title { font-weight: 800; font-size: 16px; color: #fff; }
.sacalc-summary__use { margin-top: 12px; font-size: 14.5px; line-height: 1.45; color: var(--on-dark-muted); }
.sacalc-summary__use strong { color: #fff; }
.sacalc-summary__go { width: 100%; margin-top: 14px; }
.sacalc-summary__paused p + p { margin-top: 8px; }
.sacalc-summary__paused p:not(.sacalc-summary__title) { font-size: 15px; line-height: 1.45; color: var(--on-dark-muted); }
/* Tablet: the summary is a bar along the bottom */
.sacalc[data-layout="flow"] .sacalc-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; position: sticky; bottom: 0; z-index: 4; margin-top: 16px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border-radius: 12px 12px 0 0; background: var(--cell); color: var(--on-dark); --focus: var(--sun); }
.sacalc[data-layout="flow"] .sacalc-summary .sacalc-sys, .sacalc[data-layout="flow"] .sacalc-summary__title { display: none; }
.sacalc[data-layout="flow"] .sacalc-summary__use { flex: 1 1 260px; margin: 0; font-size: 15.5px; }
.sacalc[data-layout="flow"] .sacalc-summary__go { width: auto; margin: 0; min-height: 44px; padding: 10px 18px; }
.sacalc[data-layout="flow"] .sacalc-summary__paused { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.sacalc[data-layout="flow"] .sacalc-summary__paused .sacalc-summary__title { display: block; color: var(--sun); }
.sacalc[data-layout="flow"] .sacalc-summary__paused p + p { margin-top: 0; }

.sacalc-sys { position: relative; margin-top: 30px; --wire-on: #5b7997; }
.sacalc-sys__sun { position: absolute; top: -26px; right: 14px; width: 40px; height: 40px; z-index: 1; }
.sacalc-sys__list { list-style: none; display: grid; gap: 22px; padding: 0; margin: 0; }
.sacalc-sys__node { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; border: 1.5px solid #3d5d7b; border-radius: 10px; background: var(--cell-2); }
.sacalc-sys__node + .sacalc-sys__node::before { content: ""; position: absolute; left: 34px; top: -23.5px; height: 22px; width: 2px; background: var(--wire-on); }
.sacalc-sys__node + .sacalc-sys__node::after { content: ""; position: absolute; left: 33.5px; top: -23.5px; height: 22px; width: 3px; background: repeating-linear-gradient(to bottom, var(--sun) 0 5px, transparent 5px 13px); background-size: 3px 18px; animation: sacalc-flow 1.1s linear infinite; }
.sacalc-sys[data-live="off"] .sacalc-sys__node + .sacalc-sys__node::after { display: none; }
.sacalc-sys__node.is-off { border-style: dashed; background: transparent; }
.sacalc-sys__node.is-off + .sacalc-sys__node::after, .sacalc-sys__node.is-off::after { display: none; }
.sacalc-sys__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 8px; background: rgba(255, 255, 255, .06); color: var(--sun); }
.sacalc-sys__icon svg { width: 30px; height: 30px; }
.sacalc-sys__node.is-off .sacalc-sys__icon { color: var(--on-dark-muted); }
.sacalc-sys__text { display: grid; min-width: 0; }
.sacalc-sys__name { font-size: 13px; font-weight: 700; color: var(--on-dark-muted); line-height: 1.3; }
.sacalc-sys__value { font-size: 19px; font-weight: 800; color: #fff; line-height: 1.25; font-variant-numeric: tabular-nums; }
.sacalc-sys__sub { font-size: 13px; line-height: 1.35; color: var(--on-dark-muted); }
.sacalc-sys__days { display: inline-block; margin-left: 4px; padding: 1px 7px 0; border-radius: 4px; background: var(--sun); color: var(--cell); font-weight: 800; font-size: 12.5px; }
.sacalc-sys__node--loads .sacalc-sys__value { font-size: 15px; line-height: 1.4; }
@keyframes sacalc-flow { from { background-position: 0 -18px; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .sacalc-sys__node + .sacalc-sys__node::after { animation: none; } }

/* ---------- Results ---------- */
.sacalc-results { margin-top: 28px; scroll-margin-top: 12px; }
.sacalc-results__head h2 { font-weight: 800; font-size: 28px; line-height: 1.15; }
.sacalc-results__back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-bottom: 4px; }
.sacalc-results__back::before { content: ""; width: 9px; height: 9px; border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); }
.sacalc-results__head h2:focus { outline: none; }
.sacalc-results__head h2:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.sacalc[data-layout="steps"] .sacalc-results { margin-top: 0; padding-bottom: 8px; }
.sacalc-paused { margin-top: 14px; padding: 18px; border: 2px solid var(--bad); border-radius: 12px; background: var(--bad-soft); }
.sacalc-paused__title { font-weight: 800; font-size: 18px; color: var(--bad); }
.sacalc-paused p + p { margin-top: 8px; }
.sacalc-answer { margin-top: 14px; padding: 18px 20px; border-left: 6px solid var(--sun); border-radius: 0 12px 12px 0; background: var(--frame); }
.sacalc-answer__text { font-family: var(--font-read); font-size: 19px; line-height: 1.55; color: var(--ink); }
.sacalc-answer__typ { margin-top: 10px; font-size: 14.5px; line-height: 1.45; color: var(--slate); }
.sacalc-answer__check { margin-top: 12px; padding: 10px 12px; border-left: 4px solid var(--warn); border-radius: 0 8px 8px 0; background: var(--warn-soft); font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.sacalc-results__sys { margin-top: 16px; padding: 4px 16px 18px; border-radius: 14px; background: var(--cell); }
.sacalc-results__sys .sacalc-sys { margin-top: 34px; }
.sacalc[data-layout="wide"] .sacalc-results__sys { display: none; }
@container sacalc (min-width: 640px) {
	.sacalc-results__sys .sacalc-sys__list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
	.sacalc-results__sys .sacalc-sys__node { grid-template-columns: 1fr; align-content: start; padding: 12px; }
	.sacalc-results__sys .sacalc-sys__node + .sacalc-sys__node::before { left: -15.5px; top: 34px; width: 14px; height: 2px; }
	.sacalc-results__sys .sacalc-sys__node + .sacalc-sys__node::after { left: -15.5px; top: 33.5px; width: 14px; height: 3px; background: repeating-linear-gradient(to right, var(--sun) 0 5px, transparent 5px 13px); background-size: 18px 3px; animation-name: sacalc-flow-x; }
	.sacalc-results__sys .sacalc-sys__sun { top: 2px; right: 0; }
}
@keyframes sacalc-flow-x { from { background-position: -18px 0; } to { background-position: 0 0; } }

.sacalc-cards { display: grid; gap: 14px; margin-top: 16px; align-items: start; }
@container sacalc (min-width: 820px) {
	.sacalc-cards { grid-template-columns: 1fr 1fr; }
}
.sacalc-card { padding: 18px 18px 20px; border: 1px solid var(--wire); border-radius: 12px; background: var(--day); min-width: 0; }
.sacalc-card h3 { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; }
.sacalc-card h3 svg { width: 28px; height: 28px; flex: none; color: var(--cell); }
.sacalc-card > p, .sacalc-card > ul, .sacalc-card > div { margin-top: 10px; }
.sacalc-card p { font-size: 15.5px; line-height: 1.5; }
.sacalc-big { font-size: 17px !important; color: var(--ink); }
.sacalc-big strong { font-size: 25px; font-weight: 800; color: var(--cell); font-variant-numeric: tabular-nums; }
.sacalc-options { list-style: none; display: grid; gap: 6px; padding: 0; }
.sacalc-options li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 12px; border-radius: 8px; background: var(--frame); font-size: 15px; line-height: 1.35; }
.sacalc-options__what { font-weight: 800; }
.sacalc-options__cap { grid-row: 2; color: var(--slate); }
.sacalc-options__days { grid-row: 1 / 3; grid-column: 2; align-self: center; font-weight: 800; color: var(--cell); white-space: nowrap; }
.sacalc-options .is-pick { background: var(--sun-soft); box-shadow: inset 4px 0 0 var(--sun); }
.sacalc-options .is-short { background: transparent; border: 1px dashed var(--wire-strong); }
.sacalc-options .is-short .sacalc-options__days { color: var(--slate); }
.sacalc-note { position: relative; padding: 10px 12px 10px 14px; border-left: 4px solid var(--wire-strong); border-radius: 0 8px 8px 0; background: var(--frame); font-size: 14.5px !important; line-height: 1.5; }
.sacalc-note--warn { border-left-color: var(--warn); background: var(--warn-soft); }
.sacalc-note--ok { border-left-color: var(--ok); background: var(--ok-soft); }
.sacalc-card__links { padding-top: 12px; border-top: 1px solid var(--frame-2); margin-top: 14px !important; }
/* Need / have / buy: the same three rows on every card */
.sacalc-tiers { display: grid; gap: 0; margin-top: 12px; border: 1px solid var(--wire); border-radius: 10px; overflow: hidden; }
.sacalc-tiers__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 12px; }
.sacalc-tiers__row + .sacalc-tiers__row { border-top: 1px solid var(--wire); }
.sacalc-tiers dt { font-size: 12.5px; font-weight: 800; letter-spacing: .02em; color: var(--slate); }
.sacalc-tiers dd { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--ink); font-variant-numeric: tabular-nums; }
.sacalc-tiers dd strong { font-weight: 800; color: var(--cell); }
.sacalc-tiers__row--pick { background: var(--sun-soft); box-shadow: inset 4px 0 0 var(--sun); }
.sacalc-tiers__row--have { background: var(--frame); }
@container sacalc (min-width: 480px) {
	.sacalc-tiers__row { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: baseline; }
}
.sacalc-others { margin-top: 10px; padding-left: 1.1em; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.sacalc-others li + li { margin-top: 3px; }
.sacalc-current { margin-top: 14px !important; padding-top: 12px; border-top: 1px solid var(--frame-2); }
.sacalc-current > * + * { margin-top: 8px; }
.sacalc-amps { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.35; font-variant-numeric: tabular-nums; }
.sacalc-amps th, .sacalc-amps td { padding: 7px 0 7px 10px; border-bottom: 1px solid var(--frame-2); text-align: right; vertical-align: baseline; }
.sacalc-amps th[scope="row"] { padding-left: 0; text-align: left; font-weight: 600; color: var(--ink); }
.sacalc-amps thead th { padding-top: 0; font-size: 12.5px; font-weight: 800; letter-spacing: .02em; color: var(--slate); }
.sacalc-amps td { font-weight: 800; color: var(--cell); white-space: nowrap; }
.sacalc-card__next { margin-top: 14px !important; padding-top: 12px; border-top: 1px solid var(--frame-2); }
.sacalc-card__next a { font-weight: 800; }
.sacalc-read__cols { display: grid; gap: 14px; margin-top: 12px; }
.sacalc-read__h { font-weight: 800; font-size: 14px; color: var(--slate); }
.sacalc-read__count { font-weight: 600; font-size: 15px; color: var(--slate); }
.sacalc-read > .sacalc-small { margin-top: 0; }
.sacalc-read ul { list-style: none; display: grid; gap: 5px; padding: 0; margin-top: 6px; }
.sacalc-read li { font-size: 15px; line-height: 1.45; }
@container sacalc (min-width: 820px) {
	.sacalc-read__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sacalc-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 420px; }
.sacalc-pair .sacalc-field { margin-top: 0; }
.sacalc-more > .sacalc-pair { margin-top: 12px; }
.sacalc-pair + .sacalc-field { margin-top: 18px; }
.sacalc-subgroup { margin-top: 18px; padding: 14px 14px 4px; border: 1px dashed var(--wire-strong); border-radius: 10px; }
.sacalc-subgroup > .sacalc-help { margin-top: 4px; }
.sacalc-card__links { display: grid; gap: 10px; }
.sacalc-card__links ul { list-style: none; display: grid; gap: 4px; padding: 0; margin-top: 4px; }
.sacalc-card__links li { font-size: 14.5px; line-height: 1.45; }
.sacalc-card__lk { font-weight: 800; font-size: 13px !important; color: var(--slate); }

.sacalc-blocks { display: grid; gap: 14px; margin-top: 14px; }
.sacalc-block { padding: 18px 18px 20px; border: 1px solid var(--wire); border-radius: 12px; min-width: 0; }
.sacalc-block h3 { font-weight: 800; font-size: 19px; }
.sacalc-block--now { border-color: var(--cell); }
.sacalc-bars { list-style: none; display: grid; gap: 10px; padding: 0; margin-top: 12px; }
.sacalc-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; font-size: 14.5px; }
.sacalc-bars__name { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.sacalc-bars__val { color: var(--slate); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sacalc-bars__bar { grid-column: 1 / -1; height: 10px; border-radius: 5px; background: var(--frame); overflow: hidden; }
.sacalc-bars__bar span { display: block; height: 100%; border-radius: 5px; }
.sacalc-bars__bar .is-dc { background: var(--cell); }
.sacalc-bars__bar .is-ac { background: repeating-linear-gradient(135deg, var(--link) 0 6px, #3b75b3 6px 9px); }
.sacalc-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 12px; font-size: 13.5px; color: var(--slate); }
.sacalc-legend span { display: inline-block; width: 22px; height: 10px; border-radius: 5px; }
.sacalc-legend__dc { background: var(--cell); }
.sacalc-legend__ac { margin-left: 8px; background: repeating-linear-gradient(135deg, var(--link) 0 6px, #3b75b3 6px 9px); }
.sacalc-checks { list-style: none; display: grid; gap: 8px; padding: 0; margin-top: 10px; }
.sacalc-checks li { position: relative; padding: 10px 12px 10px 40px; border-radius: 8px; font-size: 15.5px; line-height: 1.45; }
.sacalc-checks li::before { content: ""; position: absolute; left: 12px; top: 12px; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.sacalc-checks .is-ok { background: var(--ok-soft); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 25l9 9 21-21'/%3E%3C/svg%3E"); }
.sacalc-checks .is-ok::before { color: var(--ok); }
.sacalc-checks .is-short { background: var(--warn-soft); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M24 8v22M24 39v.5'/%3E%3C/svg%3E"); }
.sacalc-checks .is-short::before { color: var(--warn); }
.sacalc-ok-line { margin-top: 10px; font-weight: 800; color: var(--ok); }
.sacalc-block .sacalc-field--select { margin-top: 12px; max-width: 520px; }
.sacalc-tablewrap { margin-top: 14px; overflow-x: auto; }
.sacalc-cmp { width: 100%; min-width: 460px; border-collapse: separate; border-spacing: 0; font-size: 14.5px; line-height: 1.4; }
.sacalc-cmp th, .sacalc-cmp td { padding: 9px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--wire); }
.sacalc-cmp thead th { background: var(--cell); color: #fff; font-size: 13.5px; }
.sacalc-cmp tbody th { font-weight: 700; color: var(--slate); width: 32%; }
.sacalc-cmp .is-diff td:last-child { background: var(--sun-soft); font-weight: 700; }
.sacalc-diff { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 4px; background: var(--cell); color: #fff; font-size: 11.5px; font-weight: 800; vertical-align: 1px; }
.sacalc-cmp__say { margin-top: 12px; font-size: 15.5px; line-height: 1.5; font-weight: 600; }

.sacalc-math { margin-top: 14px; border: 1px solid var(--wire); border-radius: 12px; }
.sacalc-math > summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px; font-weight: 800; font-size: 17px; cursor: pointer; list-style: none; }
.sacalc-math > summary::-webkit-details-marker { display: none; }
.sacalc-math > summary::before { content: ""; width: 9px; height: 9px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.sacalc-math[open] > summary::before { transform: rotate(45deg); }
.sacalc-math > :not(summary) { margin-left: 18px; margin-right: 18px; }
.sacalc-math > :last-child { margin-bottom: 18px; }
.sacalc-math dl { display: grid; gap: 10px; margin-top: 4px; }
.sacalc-math dt { font-weight: 800; font-size: 14.5px; color: var(--cell); }
.sacalc-math dd { margin: 2px 0 0; font-size: 15px; line-height: 1.55; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sacalc-assume, .sacalc-sources { margin-top: 8px; padding-left: 1.2em; font-size: 15px; line-height: 1.5; }
.sacalc-assume li + li, .sacalc-sources li + li { margin-top: 4px; }
.sacalc-sources { font-size: 14px; color: var(--slate); }
.sacalc-next { list-style: none; display: grid; gap: 6px; padding: 0; margin-top: 10px; }
.sacalc-next a { font-weight: 700; }
@container sacalc (min-width: 640px) {
	.sacalc-next { grid-template-columns: 1fr 1fr; }
}
.sacalc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--wire); }
.sacalc-share-note { flex-basis: 100%; font-size: 14.5px; color: var(--ok); font-weight: 700; overflow-wrap: anywhere; }
.sacalc-share-note:empty { display: none; }
.sacalc-print { display: none; }

/* ---------- Print or save as PDF ---------- */
@media print {
	.sa-calculator-page .sa-header, .sa-calculator-page .sa-footer, .sa-calculator-page .sa-crumbs, .sa-calculator-page .sacalc-page__lead, .sa-calculator-page .sacalc-page__article,
	.sacalc-progress, .sacalc-inputs, .sacalc-summary, .sacalc-actions, [data-results-back], .sacalc-loading, .sacalc-card__links, .sacalc-card__next, .sacalc-read, .sacalc-block .sacalc-field--select, [data-compare-keep], #wpadminbar, .cmplz-cookiebanner { display: none !important; }
	.sacalc .sacalc-results { display: block !important; margin-top: 0; }
	.sacalc .sacalc-step[data-step] { display: none !important; }
	.sacalc-print { display: block; margin-top: 14px; font-size: 11pt; }
	.sacalc-print tr, .sacalc-print__title { break-inside: avoid; break-after: avoid; }
	.sacalc-print tr { break-after: auto; }
	.sacalc-math > summary { break-after: avoid; }
	.sacalc-print p { margin: 0; }
	.sacalc-print__title { font-family: var(--font-ui); font-weight: 800; font-size: 13pt; margin-bottom: 2px !important; }
	.sacalc-print table { width: 100%; margin-top: 8px; border-collapse: collapse; }
	.sacalc-print td { padding: 4px 6px; border-bottom: 1px solid #c6d0d9; vertical-align: top; }
	.sacalc-print td:last-child { text-align: right; white-space: nowrap; }
	.sacalc-print__link { margin-top: 8px !important; font-size: 10pt; }
	.sacalc :focus, .sacalc :focus-visible { outline: none !important; box-shadow: none !important; }
	.sacalc .sacalc-results__sys { display: block !important; }
	/* On paper the comparison only makes sense once a change is chosen. */
	.sacalc-compare:not(:has([data-compare-out] table)) { display: none !important; }
	.sacalc-results__sys { background: #fff !important; border: 1px solid #10273d; }
	.sacalc-results__sys .sacalc-sys__node { background: #fff !important; border-color: #10273d !important; }
	.sacalc-sys__value { color: #10273d !important; }
	.sacalc-sys__name, .sacalc-sys__sub { color: #536170 !important; }
	.sacalc-sys__node + .sacalc-sys__node::after { display: none !important; }
	/* Long cards may continue on the next page; their tables, notes and rows stay whole. */
	.sacalc-block { break-inside: avoid; }
	.sacalc-tiers, .sacalc-tiers__row, .sacalc-note, .sacalc-amps, .sacalc-others, .sacalc-big, .sacalc-card h3, .sacalc-math dd, .sacalc-results__sys, .sacalc-answer { break-inside: avoid; }
	.sacalc-card h3, .sacalc-label, .sacalc-math dt { break-after: avoid; }
	/* Colours that carry meaning print even with "Background graphics" off. */
	.sacalc-bars__bar, .sacalc-bars__bar span, .sacalc-legend span, .sacalc-tiers__row--pick, .sacalc-tiers__row--have, .sacalc-note, .sacalc-answer, .sacalc-answer__check, .sacalc-sys__days, .sacalc-cmp thead th, .sacalc-cmp .is-diff td, .sacalc-diff { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	/* Plain figures and plain line breaking on paper: some PDF viewers can't read tabular figures back as text, and
	   balanced headings can be cut off in Firefox's print layout. */
	.sa-calculator-page, .sa-calculator-page * { font-variant-numeric: normal !important; text-wrap: wrap !important; }
	.sacalc-sources { columns: 2; column-gap: 20px; font-size: 8.5pt; }
	.sacalc-sources li { break-inside: avoid; }
	.sacalc-cards { grid-template-columns: 1fr 1fr !important; }
	.sacalc-results__sys .sacalc-sys__list { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
	.sacalc-results__sys .sacalc-sys__node { grid-template-columns: 1fr !important; }
	.sacalc-results__sys .sacalc-sys__node + .sacalc-sys__node::before { display: none !important; }
	.sacalc-math > summary::before { display: none; }
	a[href]::after { content: none !important; }
}