/* Section calculator, every variant: inputs the formulas build from the section lists (js/blocks/calculator/_axes.js) —
   picture cards of a choice (sources) and steppers of the items (loads); the battery gauge (.et-battery — elbuz_theme.css). */
[data-section="calculator"] .et-calc__cards { display: grid; gap: var(--et-seam, 0.5rem); }
[data-section="calculator"] .et-calc__cards label { position: relative; display: grid; grid-template-columns: 4rem 1fr; align-items: center; gap: 0.75rem; margin: 0; padding: 0.625rem; border-radius: var(--et-radius-sm); background: var(--et-surface-2); cursor: pointer; }
[data-section="calculator"] .et-calc__cards label:not(:has(img)) { grid-template-columns: 1fr; }
[data-section="calculator"] .et-calc__cards input { position: absolute; opacity: 0; }
[data-section="calculator"] .et-calc__cards img { width: 4rem; height: 4rem; object-fit: contain; filter: var(--et-media-filter); }
[data-section="calculator"] .et-calc__cards span { display: grid; font-weight: 600; font-size: var(--et-text-sm); }
[data-section="calculator"] .et-calc__cards small { font: 500 var(--et-text-xs) var(--et-font-mono); color: var(--et-text-muted); }
/* a note of a segmented option (lux of a purpose, the fee of a payment plan): apart from the label */
[data-section="calculator"] .et-calc__seg span small { margin-left: 0.4em; font: 500 var(--et-text-xs) var(--et-font-mono, inherit); opacity: 0.75; }
[data-section="calculator"] .et-calc__cards label:has(input:checked) { background: var(--et-surface); box-shadow: inset 0 0 0 calc(var(--et-border-width) * 1.5) var(--et-text); }
[data-section="calculator"] .et-calc__cards label:has(input:focus-visible) { outline: 2px solid var(--et-text); outline-offset: 2px; }

[data-section="calculator"] .et-calc__item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.5rem; min-height: 3.5rem; margin: 0; padding: 0.5rem 0.5rem 0.5rem 0.875rem; border-radius: var(--et-radius-sm); background: var(--et-surface-2); }
[data-section="calculator"] .et-calc__field.et-calc__item + .et-calc__item { margin-top: 0; }
[data-section="calculator"] .et-calc__item.is-on { background: color-mix(in srgb, var(--et-accent) 22%, var(--et-surface-2)); }
[data-section="calculator"] .et-calc__item-name b { display: block; font-weight: 500; font-size: var(--et-text-sm); }
[data-section="calculator"] .et-calc__item-name small { font: 500 var(--et-text-xs) var(--et-font-mono); color: var(--et-text-muted); }
[data-section="calculator"] .et-calc__stepper { display: flex; align-items: center; border-radius: var(--et-radius-sm); background: var(--et-surface); box-shadow: inset 0 0 0 var(--et-border-width) var(--et-border); }
[data-section="calculator"] .et-calc__stepper button { width: 2.25rem; height: 2.5rem; border: 0; border-radius: var(--et-radius-sm); background: none; color: var(--et-text); font: 600 1.1rem var(--et-font-mono); cursor: pointer; }
[data-section="calculator"] .et-calc__stepper button:hover { background: var(--et-surface-2); }
[data-section="calculator"] .et-calc__stepper input { width: 2.25rem; border: 0; background: none; color: var(--et-text); font: 600 0.9375rem var(--et-font-mono); text-align: center; -moz-appearance: textfield; }
[data-section="calculator"] .et-calc__stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
[data-section="calculator"] .et-calc__out .et-battery { width: 100%; height: 2.75rem; margin: 0; }
[data-section="calculator"] .et-calc__out .et-battery[hidden] { display: none; }
/* pack grid of the formula course: a row of cells per pack, the taken cells filled with the accent */
[data-section="calculator"] .et-calc__cells { display: grid; gap: 0.375rem; margin: 0.75rem 0 0; }
[data-section="calculator"] .et-calc__cells:empty { display: none; }
[data-section="calculator"] .et-calc__pack { display: flex; flex-wrap: wrap; gap: 3px; padding: 0.5rem; border-radius: var(--et-radius-sm); background: var(--et-surface-2); }
[data-section="calculator"] .et-calc__pack i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--et-surface); box-shadow: inset 0 0 0 1px var(--et-border); }
[data-section="calculator"] .et-calc__pack i.is-on { background: var(--et-accent); box-shadow: none; }
/* tints (settings.tints): colour chips under the inputs; the pressed one repaints the page accent (js/blocks/calculator/_axes.js) */
[data-section="calculator"] .et-calc__tints { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin: 1rem 0 0; }
[data-section="calculator"] .et-calc__tints-label { flex: 1 0 100%; margin-bottom: 0.125rem; font-weight: 600; font-size: var(--et-text-sm); color: var(--et-text-secondary); }
[data-section="calculator"] .et-calc__tint { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.375rem 0.875rem 0.375rem 0.5rem; border: var(--et-border-width) solid var(--et-border); border-radius: var(--et-radius-sm); background: var(--et-surface); color: var(--et-text); font: 600 var(--et-text-sm)/1.2 var(--et-font-mono, inherit); cursor: pointer; }
[data-section="calculator"] .et-calc__tint i { flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--et-tint); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15), 0 0 calc(10px * var(--et-glow-k, 0)) var(--et-tint); }
[data-section="calculator"] .et-calc__tint[aria-pressed="true"] { border-color: var(--et-text); box-shadow: inset 0 0 0 1px var(--et-text); }
[data-section="calculator"] .et-calc__tint:focus-visible { outline: 2px solid var(--et-text); outline-offset: 2px; }

/* store goods (R44): four and more source cards — two columns; the goods of a result (data.goods: what carries the load, the chosen
   source, the payback kit) — photo, name and price, a headroom bar with a note, the cart button; out of stock — dimmed */
@media (min-width: 576px) { [data-section="calculator"] .et-calc__cards:has(label:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
[data-section="calculator"] .et-calc__goods { display: grid; gap: var(--et-seam, 0.5rem); margin: 0.75rem 0 0; padding: 0; list-style: none; }
[data-section="calculator"] .et-calc__goods[hidden] { display: none; }
[data-section="calculator"] .et-calc__good { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.5rem 0.75rem; padding: 0.5rem 0.625rem; border-radius: var(--et-radius-sm); background: var(--et-surface); color: var(--et-text); }
[data-section="calculator"] .et-calc__good.is-out { opacity: 0.7; }
[data-section="calculator"] .et-calc__good-link { display: flex; align-items: center; gap: 0.625rem; min-height: 2.75rem; color: inherit; text-decoration: none; }
[data-section="calculator"] .et-calc__good-link img { flex: none; width: 3.5rem; height: 3.5rem; object-fit: contain; border-radius: var(--et-radius-sm); background: var(--et-surface-2); }
[data-section="calculator"] .et-calc__good-name { display: grid; gap: 0.125rem; font-size: var(--et-text-sm); font-weight: 500; line-height: 1.3; }
[data-section="calculator"] .et-calc__good-name b { font: 600 var(--et-text-base) var(--et-font-mono, inherit); }
[data-section="calculator"] .et-calc__good-link:hover .et-calc__good-name { text-decoration: underline; }
[data-section="calculator"] .et-calc__good-meter { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(4rem, 1fr) auto; align-items: center; gap: 0.5rem; }
[data-section="calculator"] .et-calc__good-meter i { height: 0.375rem; border-radius: var(--et-radius-full); background: linear-gradient(90deg, var(--et-accent) calc(var(--v, 0) * 100%), var(--et-surface-2) 0); }
[data-section="calculator"] .et-calc__good-meter small, [data-section="calculator"] .et-calc__good-out { font: 500 var(--et-text-xs) var(--et-font-mono, inherit); color: var(--et-text-muted); }
@media (min-width: 576px) { [data-section="calculator"] .et-calc__good-meter { grid-column: 1; } }
/* bars of a result (payback): savings per year against the kit line */
[data-section="calculator"] .et-calc__chart { display: block; width: 100%; height: auto; margin: 0.75rem 0 0; overflow: visible; }
[data-section="calculator"] .et-calc__chart[hidden] { display: none; }
[data-section="calculator"] .et-calc__chart rect { fill: color-mix(in srgb, var(--et-text) 22%, transparent); }
[data-section="calculator"] .et-calc__chart rect.is-plus { fill: var(--et-success, var(--et-accent)); }
[data-section="calculator"] .et-calc__chart-mark { stroke: var(--et-text); stroke-width: 1.5; stroke-dasharray: 5 4; }
[data-section="calculator"] .et-calc__chart text { font: 500 11px var(--et-font-mono, inherit); fill: currentColor; }

/* settings.group: the tab bar before neighbour calculators (js/blocks/calculator/_axes.js); a grouped section hides its own heading */
.et-calc-tabs { margin-top: var(--et-section-gap, 3rem); }
.et-calc-tabs .et-section__header { margin-bottom: var(--space-md, 1rem); }
.et-calc-tabs__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--et-seam, 0.5rem); }
.et-calc-tabs__tab { display: grid; gap: 0.125rem; min-height: 3.25rem; padding: 0.75rem 1rem; border: var(--et-border-width) solid var(--et-border); border-radius: var(--et-radius-sm); background: var(--et-surface); color: var(--et-text); text-align: start; font: inherit; cursor: pointer; }
.et-calc-tabs__tab b { font-weight: 700; font-size: var(--et-text-sm); }
.et-calc-tabs__tab small { font-size: var(--et-text-xs); color: var(--et-text-muted); }
.et-calc-tabs__tab[aria-selected="true"] { border-color: var(--et-accent); background: var(--et-accent); color: var(--et-accent-contrast); }
.et-calc-tabs__tab[aria-selected="true"] small { color: inherit; opacity: 0.85; }
.et-calc-tabs__tab:focus-visible { outline: 2px solid var(--et-text); outline-offset: 2px; }
.et-calc-tabs + .et-section, .et-section[role="tabpanel"] + .et-section[role="tabpanel"] { margin-top: var(--et-seam, 0.75rem); padding-top: 0; }
.et-section[role="tabpanel"][hidden] { display: none; }
[data-section="calculator"] .et-calc.is-grouped .et-calc__inputs > .et-section__header,
[data-section="calculator"] .et-calc.is-grouped > .container > .et-section__header,
[data-section="calculator"] .et-calc.is-grouped > .container > .et-section__subtitle { display: none; }

/* Formula climate — the heat map of the room (js/elbuz_calc_draw.js): cells by the heat scale --et-heat-0…5 (cold → comfort → hot; tokens of
   the design, defaults below), walls and the unit in the text colour, the window light blue, flows white; the far corner off by > 2.5° — red plate.
   Formula boiler — the tank: hot water --et-heat-5 → --et-heat-3, the daily need line (red when over the top), showers in a row. */
[data-section="calculator"] .et-calc__heat { margin: 0.75rem 0 0; padding: 0.625rem; border-radius: var(--et-radius-sm); background: var(--et-surface-2); }
[data-section="calculator"] .et-heat { display: block; width: 100%; height: auto; overflow: visible; }
.et-heat__wall { fill: none; stroke: var(--et-text); stroke-width: 3; }
.et-heat__unit { fill: var(--et-surface); stroke: var(--et-text); stroke-width: 2.5; }
.et-heat__win { stroke: var(--et-heat-1, #27b5d9); stroke-width: 7; stroke-linecap: round; }
.et-heat__cap { fill: var(--et-text-muted); font: 600 13px var(--et-font); }
.et-heat__iso ellipse { fill: none; stroke: rgb(255 255 255 / 0.55); stroke-width: 1.2; stroke-dasharray: 2 5; }
.et-heat__flow path { fill: none; stroke: rgb(255 255 255 / 0.9); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 8 14; }
html:not([data-motion="none"]) .et-heat__flow path { animation: et-heat-flow 1.8s linear infinite; }
@keyframes et-heat-flow { to { stroke-dashoffset: -44; } }
.et-heat__sofa { fill: rgb(255 255 255 / 0.35); stroke: rgb(13 27 38 / 0.4); stroke-width: 1.5; }
.et-heat__t rect { fill: var(--et-surface); filter: drop-shadow(0 2px 4px rgb(var(--et-shadow-rgb, 0 0 0) / 0.3)); }
.et-heat__t text { fill: var(--et-text); font: 700 14px var(--et-font-display, var(--et-font)); }
.et-heat__t.is-bad rect { fill: var(--et-sale-bg, var(--et-danger)); }
.et-heat__t.is-bad text { fill: var(--et-sale-contrast, #fff); }
.et-heat__legend { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.375rem; font: 700 var(--et-text-xs) var(--et-font-display, var(--et-font)); color: var(--et-text-muted); }
.et-heat__legend i { flex: 1; height: 0.5rem; border-radius: 0.25rem;
  background: linear-gradient(90deg, var(--et-heat-0, #2b6cff), var(--et-heat-1, #27b5d9), var(--et-heat-2, #3dcc9b), var(--et-heat-3, #ffc247), var(--et-heat-4, #ff7a3d), var(--et-heat-5, #e23b3b)); }
[data-section="calculator"] .et-calc__good.is-weak { opacity: 0.78; }
[data-section="calculator"] .et-calc__good.is-weak .et-calc__good-meter small { color: var(--et-danger); font-weight: 600; }
[data-section="calculator"] .et-calc__tank { margin: 0.75rem 0 0; }
[data-section="calculator"] .et-tank { display: block; width: 100%; max-width: 22rem; height: auto; margin-inline: auto; overflow: visible; }
.et-tank__body { fill: none; stroke: var(--et-text); stroke-width: 3; }
.et-tank__cool { stop-color: var(--et-heat-3, #ffc247); }
.et-tank__hot { stop-color: var(--et-heat-5, #e23b3b); }
.et-tank__pipe { stroke: var(--et-text); stroke-width: 4; stroke-linecap: round; }
.et-tank__line { stroke: var(--et-text); stroke-width: 2; stroke-dasharray: 6 4; }
.et-tank__line.is-bad { stroke: var(--et-danger); }
.et-tank__mark { fill: var(--et-text); font: 700 13px var(--et-font); }
.et-tank__vol { fill: #fff; font: 800 26px var(--et-font-display, var(--et-font)); paint-order: stroke; stroke: rgb(0 0 0 / 0.25); stroke-width: 3px; }
.et-tank__deg { fill: #fff; font: 700 15px var(--et-font-display, var(--et-font)); }
.et-tank__shower path { fill: none; stroke: var(--et-accent); stroke-width: 2.2; stroke-linecap: round; }
@media (prefers-reduced-motion: reduce) { .et-heat__flow path { animation: none; } }