/* Cali-Graf — новый экран калькулятора (?ui=2), визуальный язык концепта C2.
   Грузится ПОСЛЕ styles.css и kit.css: перекрашивает компоненты styles.css (их рисует app.js) токенами кита
   и задаёт раскладку «меню слева — выбранный раздел справа целиком». Всплывающее окно одно — «что оставить» при несовместимом оборудовании. */

:root {
  /* цвета, шрифты, скругления, тени — в kit.css; здесь только раскладка экрана */
  --u-rail: 344px;
  --map-h: 520px;
}

body.u2 { background: var(--u-bg); color: var(--u-on-surface); font: var(--u-t-body-m); }
.u2 .muted { color: var(--u-muted); }

/* ---------- Иконки и кнопки ---------- */
.u2-i { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* кнопки, поля, списки, меню — компоненты в kit.css */
.u2-row:focus-visible, .u2-eq:focus-visible, .u2-house__thumb:focus-visible {
  outline: var(--u-focus); outline-offset: 2px;
}

.u2 .life-rate { gap: 8px 12px; font: var(--u-t-body-m); }

/* ---------- Верхняя строка ---------- */
/* бренд — вверху левого меню */
.u2-brand { display: flex; align-items: center; gap: 12px; padding: 8px; margin-bottom: 8px; color: inherit; text-decoration: none; }
a.u2-brand { align-self: flex-start; }   /* в калькуляторе «Cali-Graf» — ссылка в кабинет */
a.u2-brand:focus-visible { outline: var(--u-focus); outline-offset: 2px; }
.u2-brand__mark { width: 32px; height: 32px; flex: none; }
/* надпись логотипа Cali-Graf — компонент кита (kit.css, «Логотип») */
.u2-search {
  display: flex; align-items: center; gap: 8px; max-width: 720px; padding: 0 6px 0 16px; color: var(--u-on-surface-variant);
  transition: background-color var(--u-dur) var(--u-ease), box-shadow var(--u-dur) var(--u-ease);
}
.u2-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; font: var(--u-t-body-l); color: var(--u-on-surface); }
/* подсказки адреса (address-suggest.js) — под полем */
.u2-search { position: relative; }

/* ---------- Раскладка ---------- */
.u2-app {
  max-width: 1560px; margin: 0 auto; padding: 16px 24px;
  display: grid; grid-template-columns: var(--u-rail) minmax(0, 1fr); gap: 12px; align-items: start;
}
.u2-sheet { min-width: 0; }                                  /* лист — компонент поверхности в kit.css */

/* ---------- Левая колонка: дом + меню ---------- */
.u2-rail { padding: 12px; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.u2-house { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; align-items: center; padding: 4px 4px 12px; }
.u2-house__thumb {
  display: block; width: 104px; height: 84px; padding: 0; border: 0; border-radius: var(--u-r-m); overflow: hidden; cursor: pointer;
  background: var(--u-img-placeholder) center / cover no-repeat;
}
.u2-house__thumb.is-empty { background: var(--u-img-placeholder) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 84'%3E%3Cpath d='M22 44 52 20l30 24' fill='none' stroke='%23a9b3a2' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M30 38v26h44V38' fill='none' stroke='%23a9b3a2' stroke-width='3'/%3E%3C/svg%3E") center / cover no-repeat; }
/* высота — сразу на всё содержимое загруженного дома (3 плашки: энергокомпания, город, снимок; ссылка на редактор):
   пока они появляются по очереди при загрузке, карточка и меню под ней не прыгают. Адреса в карточке нет — он
   в строке поиска; строка .u2-house__street — только «No house yet» / «Finding the house…» */
.u2-house__text { min-width: 0; min-height: calc(2px + 3 * 24px + 2 * 4px + 4px + 32px); }
.u2-house__street { font: var(--u-t-title-m); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u2-house__chips.chips { flex: none; gap: 4px; margin-top: 2px; }
.u2-house__chips .chip b { color: inherit; font-weight: 500; }
.u2-house .u2-btn--text { height: 32px; padding: 0 8px; margin: 4px 0 0 -8px; }
.u2-div { height: 1px; border: 0; background: var(--u-hairline); margin: 0 8px 8px; }

.u2-nav { display: flex; flex-direction: column; gap: 2px; }
.u2-row {
  position: relative; width: 100%; min-height: 60px;
  display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 12px;
  padding: 8px 16px; border: 0; border-radius: var(--u-r-xl); background: none;
  text-align: left; cursor: pointer; color: var(--u-on-surface-variant);
  transition: background-color var(--u-dur) var(--u-ease);
}
.u2-row[aria-current="page"] { background-color: var(--u-secondary-container); color: var(--u-on-secondary-container); }
.u2-row__text { display: flex; flex-direction: column; min-width: 0; }
.u2-row__title { font: var(--u-t-label-l); color: var(--u-on-surface); }
.u2-row__value { font: var(--u-t-body-m); color: var(--u-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.u2-row[aria-current="page"] .u2-row__title, .u2-row[aria-current="page"] .u2-row__value { color: var(--u-on-secondary-container); }
.u2-row.has-error::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--u-error); }
.u2-sep { height: 1px; border: 0; background: var(--u-hairline); margin: 8px 16px; }

/* Строка «Result»: заметная, у неё свои состояния */
.u2-row--result { min-height: 72px; background-color: var(--u-surface-cont); }
.u2-row--result .u2-row__value { font: var(--u-t-title-m); color: var(--u-on-surface); }
.u2-row--result .u2-row__value b { font: var(--u-t-title-l); }
.u2-row--result[data-r="none"] { background-color: var(--u-primary-container); color: var(--u-primary); }
.u2-row--result[data-r="none"] .u2-row__value { color: var(--u-primary); }
.u2-row--result[data-r="stale"] { background-color: var(--u-warning-container); color: var(--u-warning); }
.u2-row--result[data-r="stale"] .u2-row__value { color: var(--u-warning); }
.u2-row--result[data-r="busy"] .u2-row__value { color: var(--u-on-surface-variant); }
.u2-row--result[aria-current="page"] { background-color: var(--u-secondary-container); }
.u2-row .spinner { width: 14px; height: 14px; border-width: 2px; display: inline-block; vertical-align: -2px; margin-right: 6px; }

/* ---------- Главная область ---------- */
.u2-canvas { --u-canvas-x: 48px; position: relative; min-height: calc(100vh - 32px); padding: 0 var(--u-canvas-x) 48px; }
/* шапка раздела (заголовок, подпись, поиск) стоит на месте — прокручивается только то, что под ней */
.u2-pane__top {
  position: sticky; top: 0; z-index: 5; margin: 0 calc(-1 * var(--u-canvas-x)); padding: 32px var(--u-canvas-x) 0;
  background: var(--u-surface); transition: box-shadow var(--u-dur) var(--u-ease);
}
.is-scrolled > .u2-pane__top { box-shadow: 0 1px 0 var(--u-hairline); }        /* под шапкой прокрутили — тонкая линия */
.u2-progress { position: sticky; top: 0; z-index: 6; height: 4px; margin: 0 calc(-1 * var(--u-canvas-x)) -4px; background: var(--u-primary-container); overflow: hidden; border-radius: var(--u-r-xl) var(--u-r-xl) 0 0; }
.u2-progress::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: var(--u-primary); border-radius: var(--u-r-full); animation: u2indet 1.4s var(--u-ease) infinite; }
@keyframes u2indet { from { left: -40%; } to { left: 100%; } }
.u2-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
.u2-title { font: var(--u-t-headline-l); letter-spacing: -.2px; }
.u2-sub { font: var(--u-t-body-l); color: var(--u-on-surface-variant); margin-top: 4px; }
.u2-sub:empty { display: none; }
.u2-narrow { max-width: 360px; }

/* поля — контурные, как в Material 3 */
/* поля ввода и выпадающие списки — одно скругление на всех экранах (--u-r-m; редактор — design2.css) */
.u2 .field-label { font: var(--u-t-label-m); color: var(--u-on-surface-variant); }
.u2 .field-hint { font: var(--u-t-body-s); color: var(--u-muted); }
.u2 .step-error { margin-top: 16px; }
.u2 .note { margin-top: 16px; max-width: 760px; }

/* ---------- Roof ---------- */
.u2-map.map { border-radius: var(--u-r-l); overflow: hidden; height: min(560px, calc(100vh - 280px)); min-height: 360px; }
.u2 .map-foot { border-top: 0; padding: 12px 4px 0; font: var(--u-t-body-s); }

/* ---------- Usage ---------- */
/* переключатель Bills / Yearly total / Green Button — сегментная кнопка M3 (у выбранного галочка) */
.u2-tabs.tabs { margin: 0 0 24px; }                          /* сегменты — kit.css */
.u2-tabs .tab { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 176px; min-width: 0; }
/* галочка — у левого края, вне потока: название стоит на месте */
.u2-tabs .tab[aria-selected="true"]::before { content: ""; position: absolute; left: 14px; top: 10px; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5 9.5 17 19 7.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%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 24 24'%3E%3Cpath d='M5 12.5 9.5 17 19 7.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.u2-row-fields.sce-options { max-width: 560px; align-items: center; margin-bottom: 24px; }
/* галочки — тумблеры Google (M3 switch), тот же вид, что Shade analysis; тумблер справа от подписи */
.u2 .check { font: var(--u-t-body-l); }                      /* строка с переключателем — kit.css */
/* переключатель — kit.css */

/* счета: период · ползунок · цифра; ползунки в одном масштабе читаются как график по месяцам */
.u2-bills { max-width: 880px; }
.u2 .bills td { padding: 6px 8px; border-bottom: 1px solid var(--u-hairline); }
.u2 .bills th { font: var(--u-t-label-m); color: var(--u-on-surface-variant); }
.u2 .bills td.period { width: 1%; white-space: nowrap; padding-right: 24px; font: var(--u-t-body-l); color: var(--u-on-surface); font-variant-numeric: tabular-nums; }
.u2 .bills td.bar-cell { padding: 6px 24px 6px 8px; }
.u2 .bills .kwh-cell { width: 140px; }
.u2 .bills .dates { gap: 8px; white-space: nowrap; }
.u2 .bills .dates span { color: var(--u-muted); }
.u2-total.usage-total { max-width: 880px; align-items: baseline; margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--u-hairline); font: var(--u-t-body-l); color: var(--u-on-surface-variant); }
.u2-total.usage-total b { font: var(--u-t-headline-s); color: var(--u-on-surface); }

/* ползунок M3: закрашенная часть дорожки — --fill (ставит app.js setRange) */
/* ползунок — kit.css */

/* Yearly total: год = месяц, ползунок под ними */
.u2-year { max-width: 760px; }
.u2-year__fields { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 16px; max-width: 600px; }
.u2-year__eq { height: 48px; display: grid; place-items: center; font: var(--u-t-title-l); line-height: 1; color: var(--u-muted); }
.u2-range--lg { margin-top: 32px; }
.u2-range-scale { display: flex; justify-content: space-between; margin-top: 6px; font: var(--u-t-body-s); color: var(--u-muted); font-variant-numeric: tabular-nums; }

/* Green Button: зона — перетащить файл или выбрать кнопкой */
.u2-drop {
  display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 760px; padding: 32px 24px;
  border: 1.5px dashed var(--u-outline-variant); border-radius: var(--u-r-l); background: var(--u-surface-low);
  text-align: center; cursor: pointer; transition: border-color var(--u-dur) var(--u-ease), background-color var(--u-dur) var(--u-ease);
}
.u2-drop:hover, .u2-drop.is-over { border-color: var(--u-primary); background: var(--u-hover-primary); }
.u2-drop:focus-within { outline: var(--u-focus); outline-offset: 2px; }
.u2-drop__icon { width: 32px; height: 32px; margin-bottom: 4px; color: var(--u-primary); }
.u2-drop__title { font: var(--u-t-title-m); color: var(--u-on-surface); overflow-wrap: anywhere; }
.u2-drop__sub { margin-bottom: 12px; font: var(--u-t-body-m); color: var(--u-muted); }
.u2-drop__status { max-width: 760px; margin-top: 12px; font: var(--u-t-body-m); color: var(--u-on-surface-variant); }
.u2-drop__status:empty { display: none; }
.u2-drop__status.is-error { color: var(--u-error); }

/* выпадающий список (ui2.js fancySelect) — поле как у остальных, меню как «Operating mode» */

/* поле даты и календарь (datepicker.js) — вместо системного календаря браузера */
.u2-cal { position: fixed; z-index: 1000; width: 312px; padding: 8px 12px 12px; font-family: var(--u-font); }
.u2-cal__head { display: flex; align-items: center; gap: 2px; padding: 0 0 4px 12px; }
.u2-cal__title { flex: 1; font: var(--u-t-label-l); color: var(--u-on-surface); }
.u2-cal__grid { display: grid; grid-template-columns: repeat(7, 40px); justify-content: center; row-gap: 2px; }
.u2-cal__wd { height: 36px; display: grid; place-items: center; font: var(--u-t-label-m); color: var(--u-on-surface-variant); }
.u2-cal__day { width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; font: var(--u-t-body-m); color: var(--u-on-surface); font-variant-numeric: tabular-nums; cursor: pointer; }
.u2-cal__day:focus-visible { outline: var(--u-focus); outline-offset: -2px; }
.u2-cal__day.is-today { box-shadow: var(--u-line-focus); color: var(--u-primary); }
.u2-cal__day[aria-selected="true"] { background-color: var(--u-primary); color: var(--u-on-primary); box-shadow: none; }

/* ---------- Карточки оборудования: фото + название + техданные ---------- */
/* сетка карточек, как витрина товаров: фото сверху, название, техданные */
.u2-eq-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 16px; }
@media (max-width: 640px) { .u2-eq-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.u2-eq {
  position: relative; width: 100%;
  display: flex; flex-direction: column; align-items: stretch;
  padding: 12px 12px 16px; text-align: left; cursor: pointer; color: inherit; font: inherit;
  transition: box-shadow var(--u-dur) var(--u-ease), background-color var(--u-dur) var(--u-ease);
}
.u2-eq__photo { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--u-r-m); background: var(--u-surface-cont); display: grid; place-items: center; overflow: hidden; }
.u2-eq__photo img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.u2-eq__photo .u2-i { width: 48px; height: 48px; stroke-width: 1.4; color: var(--u-muted); }
.u2-eq__main { display: flex; flex-direction: column; min-width: 0; padding: 12px 4px 0; }
.u2-eq__top { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-height: 22px; }
.u2-eq__brand { font: var(--u-t-body-m); color: var(--u-muted); }
.u2-eq__name { font: var(--u-t-body-l); color: var(--u-on-surface); margin-top: 2px; }
.u2-eq__specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--u-hairline); }
.u2-eq__spec { display: flex; flex-direction: column; min-width: 0; }
.u2-eq__spec span { font: var(--u-t-body-s); color: var(--u-muted); }
.u2-eq__spec b { font: var(--u-t-body-m); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.u2-eq__spec:first-child b { font-weight: 500; }
/* низ выбранной карточки батареи: «− N +», итог, режим */
.u2-eq__foot { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; margin: 12px 4px 0; padding-top: 12px; border-top: 1px solid var(--u-hairline); cursor: default; }
.u2-qty { display: inline-flex; align-items: center; height: 40px; border: 1px solid var(--u-outline-variant); border-radius: var(--u-r-full); background: var(--u-surface); }
.u2-qty__btn { width: 40px; height: 38px; border: 0; background: none; border-radius: var(--u-r-full); font: var(--u-t-title-l); line-height: 1; color: var(--u-on-surface); cursor: pointer; }
.u2-qty__btn:disabled { color: var(--u-disabled-fg); cursor: default; }
.u2-qty__val { min-width: 24px; text-align: center; font: var(--u-t-title-m); font-variant-numeric: tabular-nums; }
.u2-qty__total { justify-self: end; font: var(--u-t-title-m); font-variant-numeric: tabular-nums; }
.u2 #bat-opts { display: none !important; }                /* количество — на карточке, режим — справа сверху */

/* режим батареи — выпадающий список справа сверху, в том же виде, что списки поиска */
.u2-dd { position: relative; display: grid; justify-items: end; gap: 4px; align-self: center; }
.u2-dd[hidden], .u2-dd__menu[hidden] { display: none; }
.u2-dd__label { font: var(--u-t-label-m); letter-spacing: .1px; color: var(--u-on-surface-variant); }
.u2-dd__btn { padding: 0 12px 0 20px; }                    /* стрелка справа — справа отступ меньше */
.u2-dd__chev { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--u-dur) var(--u-ease); }
.u2-dd__btn[aria-expanded="true"] .u2-dd__chev { transform: rotate(180deg); }
.u2-dd__menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; width: max-content; min-width: 300px; }
.u2-dd__opt-text { flex: 1; display: grid; }
.u2-dd__opt-title { font: var(--u-t-body-l); }
.u2-dd__opt-desc { font: var(--u-t-body-m); color: var(--u-muted); }
.u2-dd__opt .u2-i { stroke: var(--u-primary); stroke-width: 2; }

/* пояснение по утилите — простой подписью под всеми карточками */
.u2-note { margin: 16px 4px 0; font: var(--u-t-body-m); color: var(--u-muted); }
.u2-note[hidden] { display: none; }
.u2-eq[aria-checked="true"] { cursor: default; }
/* отметка выбора — в углу фото */
.u2-eq__radio { position: absolute; top: 20px; right: 20px; }   /* отметка выбора — kit.css */

/* ОДНА строка поиска наверху главной области: адрес · панели CEC · инверторы CEC · батареи (по разделу) */
.u2-searchbar { display: flex; align-items: center; gap: 16px; max-width: 880px; margin: 0 0 24px; }
.u2-searchbar > .u2-search { flex: 1; min-width: 0; }
.u2-search--combo { padding-right: 8px; }
.u2-search--combo .combo { flex: 1; min-width: 0; }
.u2 .u2-search--combo .combo .input { height: 48px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font: var(--u-t-body-l); }
.u2 .u2-search--combo #module-open, .u2 .u2-search--combo .combo__clear { display: none; }
/* выпадающие списки — ОДИН вид для адресов и для каталога CEC: во всю ширину строки поиска, под ней */
.u2 .u2-search--combo { position: relative; }
.u2 .u2-search--combo .combo { position: static; }
.u2-searchbar .suggest, .u2-searchbar .combo__list {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 50; margin: 0; list-style: none; max-height: 380px; overflow-y: auto;
}
.u2-searchbar .suggest__pin { display: none; }
.u2-searchbar .suggest__item b { font-weight: 500; color: var(--u-on-surface); }
.u2-searchbar .suggest__item { color: var(--u-on-surface-variant); }
.u2-searchbar .combo__opt-name { flex: 1; min-width: 0; }
.u2-searchbar .combo__opt-w { font: var(--u-t-body-m); color: var(--u-muted); }
.u2-searchbar .combo__empty { padding: 10px 20px; font: var(--u-t-body-m); color: var(--u-muted); }
.u2-search input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
.u2-hint { font: var(--u-t-body-m); color: var(--u-muted); }
.u2-hint.is-warn { color: var(--u-warning); }
.u2 .combo__list { border-radius: var(--u-r-m); }

/* настройки под выбранным оборудованием и раздел Settings */
.u2-opts { margin-top: 16px; padding: 4px 24px; max-width: 980px; }
.u2-opts.field { padding: 16px 24px; gap: 8px; }
.u2-num { max-width: 120px; }
.u2-set { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 8px 0; border-top: 1px solid var(--u-hairline); flex-wrap: wrap; }
.u2-set:first-child { border-top: 0; }
.u2-set__label { font: var(--u-t-body-l); }
.u2-set__sub { font: var(--u-t-body-m); color: var(--u-muted); }
.u2-set__value { font: var(--u-t-body-l); font-variant-numeric: tabular-nums; }
/* рост тарифа: поле прямо в строке (как настройки Google), слева от него «Reset to 3.4%», если значение своё */
.u2-esc { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.u2-esc__reset { position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); white-space: nowrap; }
.u2-esc__reset[hidden] { display: none; }
.u2-esc__field { width: 132px; }
.u2 .u2-esc__field .input { padding-right: 56px; font-variant-numeric: tabular-nums; }
.u2-select { max-width: 360px; }
.u2-settings { max-width: 760px; }

/* ---------- Result ---------- */
.u2-calc { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.u2-calc .calc-status { font: var(--u-t-body-m); color: var(--u-on-surface-variant); }
.u2-calc.is-quiet { display: none; }                         /* свежий результат: кнопка и строка «Savings …» не нужны — есть крупный итог */
.u2-hero { margin-bottom: 8px; }
.u2-hero__label { font: var(--u-t-title-m); color: var(--u-on-surface-variant); }
.u2-hero__value { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.u2-hero__num { font: var(--u-t-display); letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.u2-hero__unit { font: var(--u-t-title-l); color: var(--u-muted); }
.u2-hero__sub { margin-top: 8px; font: var(--u-t-body-l); color: var(--u-on-surface-variant); }
.u2-pill { margin-right: 8px; }                                /* плашка — kit.css */
.u2-compare { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; margin: 32px 0 8px; }
.u2-compare > div + div { border-left: 1px solid var(--u-hairline); padding-left: 48px; }
.u2-k-label { font: var(--u-t-label-l); color: var(--u-on-surface-variant); margin-bottom: 12px; }
.u2-bar-row { display: grid; grid-template-columns: 132px minmax(0, 1fr) 96px; align-items: center; gap: 16px; height: 40px; }
.u2-bar-row__name { font: var(--u-t-body-m); color: var(--u-on-surface-variant); white-space: nowrap; }
.u2-bar-track { height: 12px; border-radius: var(--u-r-full); background: var(--u-surface-cont); overflow: hidden; }
.u2-bar-fill { display: block; height: 100%; border-radius: var(--u-r-full); }
.u2-bar-row__val { font: var(--u-t-title-m); text-align: right; font-variant-numeric: tabular-nums; }
.u2-k-big { font: var(--u-t-headline-l); font-variant-numeric: tabular-nums; }
.u2-k-big small { font: var(--u-t-body-l); color: var(--u-muted); }
.u2-meter { height: 12px; border-radius: var(--u-r-full); background: var(--u-surface-cont); overflow: hidden; margin: 12px 0 8px; }
.u2-meter span { display: block; height: 100%; background: var(--u-chart-prod); border-radius: var(--u-r-full); }
.u2-k-sub { font: var(--u-t-body-m); color: var(--u-on-surface-variant); }
.u2-results.results { display: block; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--u-hairline); }
.u2-results.results.is-stale .u2-chart, .u2-results.results.is-stale .u2-exps { opacity: .5; }
.u2-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.u2-seg button { min-width: 112px; }                          /* сегменты — kit.css */
.u2-chart.u2-off { display: none; }
.u2-chart__sub { font: var(--u-t-body-m); margin: 8px 0; }
.u2-chart.life-card { margin-top: 0; }
.u2 .chart { min-height: 272px; }
.u2-exps { margin-top: 24px; border-top: 1px solid var(--u-hairline); }
/* вид раскрывашки .u2-exp — в kit.css (компонент кита); здесь — только её раскладка в результате */
.u2-exp .kpis { gap: 12px; }
/* техническая строка под заголовком Result (кВт, панели, тень, время расчёта, период прогноза) — не показываем:
   всё это есть в Details; app.js продолжает её заполнять */
.u2 #res-meta, .u2 #res-forecast { display: none; }

/* ---------- Вид списков оборудования: строки (по умолчанию) или карточки ---------- */
.u2-view { flex: none; }
.u2-view__btn { width: 52px; display: grid; place-items: center; padding: 0; color: var(--u-on-surface-variant); }
.u2-view__btn .u2-i { width: 20px; height: 20px; }

/* строка: маленькое фото · бренд и название · характеристики в линию · (у батареи «− N +») · ⓘ и отметка справа */
[data-eq-view="list"] .u2-eq-list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
[data-eq-view="list"] .u2-eq {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; column-gap: 20px;
  min-height: 88px; padding: 8px 104px 8px 8px;
}
[data-eq-view="list"] .u2-eq__photo { width: 96px; border-radius: var(--u-r-s); }
[data-eq-view="list"] .u2-eq__photo img { padding: 6px; }
[data-eq-view="list"] .u2-eq__photo .u2-i { width: 28px; height: 28px; }
[data-eq-view="list"] .u2-eq__main { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(0, 2fr); column-gap: 24px; align-items: center; padding: 0; }
[data-eq-view="list"] .u2-eq__top, [data-eq-view="list"] .u2-eq__name { grid-column: 1; }
[data-eq-view="list"] .u2-eq__top { min-height: 0; }
[data-eq-view="list"] .u2-eq__name { margin: 0; }
[data-eq-view="list"] .u2-eq__specs { grid-column: 2; grid-row: 1 / span 2; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; border: 0; }
/* у выбранной батареи «− N +» — второй линией под названием, характеристики не сжимаются */
[data-eq-view="list"] .u2-eq__foot { grid-column: 2; grid-template-columns: auto auto; justify-content: start; gap: 16px; margin: 8px 0 4px; padding: 0; border: 0; }
[data-eq-view="list"] .u2-eq__radio { top: 50%; right: 24px; transform: translateY(-50%); }
[data-eq-view="list"] .u2-eq__info { top: 50%; left: auto; right: 60px; transform: translateY(-50%); background-color: transparent; }
@media (max-width: 1100px) {
  [data-eq-view="list"] .u2-eq__main { grid-template-columns: minmax(0, 1fr); }
  [data-eq-view="list"] .u2-eq__specs { grid-column: 1; grid-row: auto; margin-top: 6px; }
}
@media (max-width: 640px) {
  [data-eq-view="list"] .u2-eq-list { grid-template-columns: minmax(0, 1fr); }
  /* телефон: фото 64px, ⓘ и отметка — в правом верхнем углу (справа больше не держим 104px), характеристики 2 × 2 */
  [data-eq-view="list"] .u2-eq { grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 12px; }
  [data-eq-view="list"] .u2-eq__photo { width: 64px; }
  [data-eq-view="list"] .u2-eq__top, [data-eq-view="list"] .u2-eq__name { padding-right: 76px; }
  [data-eq-view="list"] .u2-eq__radio { top: 16px; right: 12px; transform: none; }
  [data-eq-view="list"] .u2-eq__info { top: 12px; right: 44px; transform: none; }
  [data-eq-view="list"] .u2-eq__specs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
  [data-eq-view="list"] .u2-eq__foot { grid-column: 1; }
}

/* ---------- Кнопка ⓘ на карточке и страница модели (движок renderSchema в ui2.js) ---------- */
.u2-eq__info {
  position: absolute; top: 16px; left: 16px; width: 32px; height: 32px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: var(--u-surface); color: var(--u-on-surface-variant); cursor: pointer;
  transition: background-color var(--u-dur) var(--u-ease), color var(--u-dur) var(--u-ease);
}
.u2-eq__info:focus-visible { outline: var(--u-focus); outline-offset: 2px; }
.u2-eq__info .u2-i { stroke-width: 1.6; }

.u2-pane.is-info > :not(.u2-info) { display: none !important; }   /* страница модели вместо шапки и карточек */
.u2-info[hidden] { display: none; }
.u2-info__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 16px; }
.u2-info__back { margin-left: -12px; }
.u2-info__back .u2-i { width: 20px; height: 20px; stroke-width: 2; }
.u2-info__chosen { cursor: default; }                         /* «выбрано» — не кнопка: вид тональной пилюли */
.u2-info__chosen .u2-i { width: 18px; height: 18px; stroke-width: 2.2; }
.u2-info__body { display: grid; grid-template-columns: minmax(220px, 380px) minmax(0, 1fr); gap: 48px; align-items: start; padding-top: 8px; }
.u2-info__photo { aspect-ratio: 1; border-radius: var(--u-r-l); background: var(--u-surface-cont); display: grid; place-items: center; overflow: hidden; }
.u2-info__photo img { width: 100%; height: 100%; object-fit: contain; padding: 24px; }
.u2-info__photo .u2-i { width: 96px; height: 96px; stroke-width: 1.2; color: var(--u-muted); }   /* фото нет — значок */
.u2-info__main { max-width: 720px; }
.u2-info__main .u2-title { margin-top: 4px; }
.u2-info__lead { margin: 12px 0 0; font: var(--u-t-body-l); color: var(--u-on-surface-variant); }
.u2-info__lead:empty { display: none; }
.u2-info__sec { margin-top: 32px; }
.u2-info__h { margin: 0 0 4px; font: var(--u-t-title-m); color: var(--u-on-surface); }
.u2-info__sec.u2-exp { border-top: 1px solid var(--u-hairline); }
.u2-info__sec.u2-exp .u2-specs { padding-bottom: 8px; }
.u2-specs { margin: 0; }
.u2-specs__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--u-hairline); }
.u2-specs__row dt { font: var(--u-t-body-m); color: var(--u-on-surface-variant); }
.u2-specs__row dd { margin: 0; font: var(--u-t-label-l); color: var(--u-on-surface); font-variant-numeric: tabular-nums; }
.u2-specs__hint { display: block; margin-top: 2px; font: var(--u-t-body-s); color: var(--u-muted); }
.u2-info__src { margin: 32px 0 0; font: var(--u-t-body-s); color: var(--u-muted); }

/* ---------- Price & settings: группы полей ---------- */
.u2-group { margin: 40px 0 16px; font: var(--u-t-title-m); color: var(--u-on-surface); }
.u2-head + .u2-group { margin-top: 8px; }
.u2-form.pdf-grid { max-width: 820px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.u2-form.pdf-grid > .field { margin-top: 0; }   /* в сетке поля стоят вровень: отступ «поле за полем» из старого экрана не нужен */
.u2-total { max-width: 820px; margin-top: 16px; font: var(--u-t-body-l); color: var(--u-on-surface-variant); font-variant-numeric: tabular-nums; }
.u2-total:empty { display: none; }

/* ---------- Result: Save PDF и цена с окупаемостью ---------- */
.u2 #pdf-status { margin: -8px 0 16px; }
.u2 #pdf-error { margin: -8px 0 16px; }
.u2-money { margin: 24px 0 8px; padding: 16px 24px 20px; transition: opacity var(--u-dur) var(--u-ease); }
.u2-money.is-busy { opacity: .55; }
.u2-money--note { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 24px; font: var(--u-t-body-m); color: var(--u-on-surface-variant); }
.u2-money--note .u2-btn { margin-left: auto; }
.u2-money__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -4px -12px 8px 0; }
.u2-money__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.u2-tile__num { margin-top: 4px; font: var(--u-t-headline-m); font-variant-numeric: tabular-nums; }

/* ---------- Экран-приложение (как Gmail): страница стоит на месте ----------
   Меню слева не двигается; прокручивается только правая область (и меню — само, если не влезает по высоте).
   Только у экранов с пометкой body.u2-appscreen (калькулятор, кабинет): обычные страницы (вход, Terms, Privacy, /kit)
   прокручиваются целиком */
@media (min-width: 861px) {
  body.u2-appscreen { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
  .u2-app { flex: 1; min-height: 0; width: 100%; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .u2-rail { position: static; top: auto; max-height: none; min-height: 0; }
  /* раздел = шапка (стоит на месте, вне прокрутки) + область под ней (прокручивается только она) */
  .u2-canvas { min-height: 0; padding: 0; overflow: hidden; overflow: clip; display: flex; flex-direction: column; }
  .u2-canvas > .u2-pane:not([hidden]), .u2-canvas .u2-info:not([hidden]) { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .u2-pane__top { position: relative; flex: none; margin: 0; padding-bottom: 24px; }
  .u2-pane__top > :last-child { margin-bottom: 0; }
  .u2-pane__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--u-canvas-x) 48px; }
  .u2-progress { position: absolute; left: 0; right: 0; top: 0; margin: 0; }
  /* страница модели: слева фото стоит на месте, справа прокручиваются только таблицы */
  .u2-info__body { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; padding: 8px var(--u-canvas-x) 0; }
  .u2-info__photo { align-self: start; }
  .u2-info__main { max-width: none; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 48px; }
  .u2-info__main > * { max-width: 720px; }                 /* полоса прокрутки — у края области, текст — ровной колонкой */
}

/* ---------- Адаптив ---------- */
@media (max-width: 1360px) {
  :root { --u-rail: 320px; }
  .u2-canvas { --u-canvas-x: 32px; }
  .u2-compare { gap: 32px; }
  .u2-compare > div + div { padding-left: 32px; }
}
@media (max-width: 1100px) {
  :root { --u-rail: 288px; }
  .u2-canvas { --u-canvas-x: 24px; }
  .u2-pane__top { padding-top: 24px; }
  .u2-compare { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .u2-compare > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--u-hairline); padding-top: 24px; }
  .u2-form.pdf-grid { grid-template-columns: minmax(0, 1fr); }
  .u2 .bills td.bar-cell { padding: 6px 12px 6px 4px; }
  .u2-money__tiles { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  /* узко: фото над таблицами, прокручивается вся страница модели */
  .u2-info__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; align-items: start; gap: 24px; overflow-y: auto; }
  .u2-info__photo { max-width: 320px; }
  .u2-info__main { overflow: visible; }
}
@media (max-width: 860px) {
  .u2-app { grid-template-columns: minmax(0, 1fr); }
  .u2-rail { position: static; max-height: none; overflow: visible; }
  .u2-nav { flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; }
  .u2-row { flex: none; width: auto; min-width: 176px; max-width: 240px; }
  .u2-sep { display: none; }
  .u2-canvas { min-height: 0; }
  .u2-pane__top { border-radius: var(--u-r-xl) var(--u-r-xl) 0 0; }   /* шапка с фоном не срезает скругление карточки */
}
@media (max-width: 640px) {
  /* телефон: от края экрана до карточек 10px — как в кабинете и редакторе крыши; внутри карточки 16px */
  .u2-app { padding: 10px; gap: 10px; }
  .u2-rail { padding: 8px; }
  .u2-canvas { --u-canvas-x: 16px; }
  .u2-tabs.tabs { display: flex; }                           /* переключатель «Bills / Yearly total» — во всю ширину */
  .u2-tabs .tab { flex: 1 1 0; width: auto; padding: 0 6px; font-size: 13px; white-space: nowrap; }
  .u2-tabs .tab[aria-selected="true"]::before { display: none; }   /* узко: выбранный — заливкой, без галочки */
  .u2-title { font: var(--u-t-headline-s); }
  .u2-hero__num { font-size: 44px; line-height: 52px; }
  .u2-bar-row { grid-template-columns: 96px minmax(0, 1fr) 80px; gap: 12px; }
}

/* плашка «взять сохранённую крышу» — в стиле нового экрана */
.u2 .legacy-design { margin: 0 0 12px; }
.u2 .legacy-design .btn { height: 36px; }

/* ---------- Совместимость оборудования (ui2.js): значок на карточке, плашка в разделе, окно «что оставить»,
   колонка «Works with» под фото на странице модели ---------- */
.u2-eq__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; }
.u2-fit { max-width: 100%; height: auto; min-height: 24px; padding: 2px 8px 2px 6px; white-space: normal; }   /* длинная — переносится */
.u2-fit .u2-i { width: 16px; height: 16px; stroke-width: 2.4; }
[data-eq-view="list"] .u2-eq__chips { grid-column: 1 / -1; margin-top: 6px; }   /* строкой во всю ширину — плашки в один ряд */
/* выбранное, но не работает с остальным — красная рамка вместо синей */
.u2-eq.is-no[aria-checked="true"] { background: var(--u-selected-error); box-shadow: var(--u-line-selected-error); }

.u2-conflicts:empty { display: none; }
.u2-conflict { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.u2-conflict > .u2-i { width: 24px; height: 24px; margin-top: 2px; color: var(--u-error); stroke-width: 2.2; }
.u2-conflict__text { flex: 1; min-width: 0; font: var(--u-t-body-m); }
.u2-conflict__text b { display: block; margin-bottom: 2px; font: var(--u-t-title-m); }
.u2-conflict .u2-btn { flex: none; align-self: center; }
@media (max-width: 640px) { .u2-conflict { flex-wrap: wrap; } .u2-conflict .u2-btn { margin-left: 40px; } }

.u2-dlg { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; box-shadow: var(--u-shadow); }
.u2-dlg__card { padding: 24px; }
.u2-dlg__card > .u2-i { display: block; margin: 0 auto 16px; color: var(--u-error); }
.u2-dlg__title { margin: 0 0 16px; text-align: center; }
.u2-dlg__text { margin: 0; }
.u2-dlg__reasons { margin: 12px 0 0; list-style: none; }
.u2-dlg__reasons li + li { margin-top: 8px; }
.u2-dlg__q { margin: 24px 0 4px; font: var(--u-t-title-m); color: var(--u-on-surface); }
.u2-dlg__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 24px; }

.u2-info__side { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.u2-info__side > .u2-info__photo { flex: none; align-self: stretch; }
.u2-ww__h { margin: 0; font: var(--u-t-title-m); color: var(--u-on-surface); }
.u2-ww__sub { margin: 16px 0 4px; font: var(--u-t-label-m); letter-spacing: .1px; color: var(--u-on-surface-variant); }
.u2-ww__list { margin: 4px 0 0; padding: 0; list-style: none; }
.u2-ww__sub + .u2-ww__list { margin-top: 0; }
.u2-ww__item { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--u-hairline); font: var(--u-t-body-m); color: var(--u-on-surface); }
.u2-ww__item > .u2-i { width: 20px; height: 20px; stroke-width: 2.2; }
.u2-ww__item--ok > .u2-i { color: var(--u-success); }
.u2-ww__item--warn > .u2-i { color: var(--u-warning); }
.u2-ww__hint { grid-column: 2; margin-top: 2px; font: var(--u-t-body-s); color: var(--u-muted); }
.u2-ww__cur { margin-left: 8px; font: var(--u-t-label-m); color: var(--u-primary); }
.u2-ww__none { margin: 8px 0 0; font: var(--u-t-body-m); color: var(--u-muted); }
@media (min-width: 1101px) {
  /* широко: фото стоит на месте; под ним, с тем же отступом 24px, заголовок «Works with» и прокручиваемый список */
  .u2-info__side { align-self: stretch; min-height: 0; overflow: hidden; }
  .u2-ww { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .u2-ww__h { flex: none; padding-bottom: 8px; border-bottom: 1px solid var(--u-hairline); }
  .u2-ww__scroll > .u2-ww__list:first-child > .u2-ww__item:first-child { border-top: 0; }
  .u2-ww__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 48px; }
}
.u2-ww__scroll > .u2-ww__sub:first-child { margin-top: 8px; }

/* ---------- Надбавки пропозала построчно (строки рисует app.js renderExtras): «сумма · что за работа · удалить» ---------- */
.u2 .pdf-extras { grid-column: 1 / -1; }                  /* во всю ширину сетки цены */
.pdf-extras__list { display: grid; gap: 12px; }
.extra-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 12px 24px; }
.extra-row__right { display: flex; align-items: center; gap: 8px; }
.u2 .extra-row__amount { width: auto; min-width: 0; }
.extra-row__right .extra-row__note { flex: 1 1 auto; min-width: 0; }
.u2 .pdf-extras__add { align-self: flex-start; margin: 2px 0 0 -12px; padding: 0 16px 0 12px; }
.u2 .pdf-extras__add .u2-i { width: 20px; height: 20px; stroke-width: 2; }
.u2 .pdf-extras__add:disabled { background: none; }
@media (max-width: 640px) {
  .extra-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }   /* узко: сумма, под ней «за что» и «удалить» */
}

/* предупреждение о неправдоподобном расходе дома (app.js usageWarning) */
.u2 .usage-warn { display: block; margin-bottom: 4px; color: var(--u-warning); font: var(--u-t-label-l); }

/* Result: заметки под итогом — система больше расхода (жёлтая), счета без городского налога (серая) */
.u2-result-notes { display: grid; gap: 8px; margin-top: 20px; }
.u2-result-note { margin: 0; }
.u2-result-note b { font-weight: 500; }

/* Раздел Roof: клик по крыше на снимке — в редактор (с вопросом, app.js askEditRoof); сводка крыши — столбиками под
   снимком (app.js renderRoofStats): подпись, крупная цифра, пояснение */
.design-map.is-editable .dm-face { pointer-events: all; cursor: pointer; }
.design-map.is-editable .dm-pv { cursor: pointer; }
.design-map.is-editable .dm-face:hover { fill: var(--u-map-hover); }
.u2-roofstats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 16px;
  overflow: hidden;
}
.u2-roofstats[hidden] { display: none; }
.u2-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 16px 20px; box-shadow: -1px 0 0 var(--u-outline-variant); }
.u2-stat__label { font: var(--u-t-label-m); letter-spacing: .06em; text-transform: uppercase; color: var(--u-on-surface-variant); }
.u2-stat__value { font: var(--u-t-headline-s); color: var(--u-on-surface); white-space: nowrap; }
.u2-stat__caption {                                                       /* до двух строк (длинное имя модели) */
  font: var(--u-t-body-s); color: var(--u-on-surface-variant);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
/* сводка видна — карта ниже на её высоту (сводка ~96 px + отступ): снимок, подпись и столбики — в одном экране */
.u2-pane__body:has(.u2-roofstats:not([hidden])) .u2-map.map { height: min(480px, calc(100vh - 392px)); min-height: 300px; }
.u2-stat__warn { grid-column: 1 / -1; padding: 10px 20px; font: var(--u-t-label-l); }
/* подсказки адреса — как остальные всплывающие меню */

/* ---------- Price & settings: четыре лёгкие карточки (как настройки Google): значок, заголовок, пояснение, поля ---------- */
.u2-card { box-sizing: border-box; padding: 20px 24px 24px; }   /* карточка — kit.css */
.u2-card + .u2-card { margin-top: 16px; }
.u2-head + .u2-card, .u2-pane__body > .u2-card:first-child { margin-top: 8px; }
.u2-card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.u2-card__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--u-secondary-container); color: var(--u-on-secondary-container); }
.u2-card__icon .u2-i { width: 20px; height: 20px; }
.u2-card__title { margin: 0; font: var(--u-t-title-m); color: var(--u-on-surface); }
.u2-card__sub { margin: 0; font: var(--u-t-body-s); color: var(--u-on-surface-variant); }
.u2-card .u2-form.pdf-grid { max-width: none; }
.u2-card__more:not(:has(> .field:not([hidden]))) { display: none; }   /* продукт и сумма кредита — только у кредита */
.u2-card__more { margin-top: 20px; }
.u2-card .u2-seg--pick { display: flex; width: fit-content; max-width: 100%; }
.u2-card .u2-seg--pick button { min-width: 0; padding: 0 20px; }
/* подвал «System price»: итог крупно рядом с подписью, из чего он сложился — под подписью */
.u2-card .u2-total {
  display: flex; align-items: center; justify-content: flex-start; gap: 24px; max-width: none;   /* сумма — рядом с подписью */
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--u-outline-variant);
}
.u2-card .u2-total:empty { display: none; }                               /* мощности ещё нет — итога нет, и черты тоже */
.u2-total__text { display: flex; flex-direction: column; min-width: 0; }
.u2-total__label { font: var(--u-t-label-l); color: var(--u-on-surface); }
.u2-total__parts { font: var(--u-t-body-s); color: var(--u-on-surface-variant); }
.u2-total__value { flex: none; font: var(--u-t-headline-m); color: var(--u-on-surface); font-variant-numeric: tabular-nums; }
.u2-card .u2-set { border-top-color: var(--u-outline-variant); }
/* суммы — узкие поля (цифрам много места не нужно), «за что» у надбавки — всё остальное место строки */
.u2-form--price.pdf-grid { display: flex; flex-wrap: wrap; gap: 20px 24px; }
.u2-form--price > .field { flex: 0 0 200px; min-width: 0; }
.u2-form--price > .pdf-extras { flex: 1 1 100%; }
.u2-form--price .extra-row { grid-template-columns: 200px minmax(0, 1fr); }
@media (max-width: 640px) {
  .u2-form--price > .field { flex: 1 1 100%; }
  .u2-form--price .extra-row { grid-template-columns: minmax(0, 1fr); }
}
/* визитка в карточке Proposal: подзаголовок и пояснение над полями */
.u2-card__subhead { margin: 24px 0 12px; padding-top: 20px; border-top: 1px solid var(--u-outline-variant); }
.u2-card__subtitle { font: var(--u-t-label-l); color: var(--u-on-surface); }
.u2-card__note { font: var(--u-t-body-s); color: var(--u-on-surface-variant); }
/* подсказка у суммы («$39,928 for 12.88 kW DC», «2 × IQ Battery 5P») — справа от поля в той же строке:
   появляется после загрузки и не сдвигает страницу */
.u2-form--price > .field:has(> .field-hint) {
  flex: 0 0 auto; display: grid; grid-template-columns: 200px minmax(0, 240px); column-gap: 12px; align-items: center;
}
.u2-form--price > .field:has(> .field-hint) > .field-label { grid-column: 1 / -1; }
.u2-form--price > .field > .field-hint { margin: 0; }
/* строки Calculation — не во всю ширину: переключатель и поле рядом с подписью */
.u2-card .u2-settings { max-width: 640px; }
/* Calculation: без черты между строками */
.u2-settings--plain .u2-set { border-top: 0; }