/* Cali-Graf — UI-кит: ВСЕ значения внешнего вида в одном месте.
   Цвет, шрифт, скругление, тень, высота элемента — только отсюда. Поменял токен здесь — поменялось на всех экранах
   (кабинет, вход, калькулятор, редактор крыши, обучение). Страница со всеми элементами — /kit.

   Порядок загрузки на страницах: styles.css (старый базовый слой) → kit.css → styles2.css / design2.css / guide.css.
   Старые экраны (калькулятор ?ui=1, редактор без ui=2) этот файл не грузят и выглядят по-старому.
   Телефон — свой кит позже (Армен: мобильная версия станет приложением): в @media для телефона значения
   пока свои, кит их не трогает.

   Разделы:
   1. Фирменное — главный цвет, тональный цвет, солнце, шрифт: с них начинать «примерку» бренда.
      Оттенки наведения, нажатия, выбора, фон подсказок обучения считаются из них сами (color-mix).
   2. Цвета по ролям (Material 3): фон, поверхности, текст, обводки, статусы, слои состояний.
   3. Данные: графики и карта.
   4. Шрифт: роли (заголовки, текст, подписи) — значения для `font:`.
   5. Скругления.  6. Тени и обводки.  7. Движение.
   8. Токены старого слоя (styles.css) → на токены кита. */

:root {
  /* ---------- 1. Фирменное: палитра «Небо и солнце» (с 01.10.2026, выбрал Армен: «успокаивающий, но сдержанный»).
     Принцип — изолированный акцент: поверхности чисто нейтральные, насыщенный цвет только у действия и выбора;
     синий = доверие и точность для цифр пропозала; солнце — только энергия и выработка, предупреждения — оранжевые.
     Синий держать в оттенке 210–215°: светлее и с меньшей долей зелёного он уходит в сиреневый. ---------- */
  --brand-primary: #0b65d8;                   /* синий неба 214°: кнопки, ссылки, выбранное, фокус (белый текст 5.4:1) */
  --brand-tonal: #d6e9ff;                     /* тот же оттенок, светлый: выбранный пункт меню, тональные кнопки, плашки */
  --brand-on-tonal: #08305f;                  /* текст на тональном (10.6:1) */
  --brand-sun: #ffb020;                       /* солнце: логотип, выработка — не текст и не предупреждение */
  --brand-font: "Google Sans Flex", "Google Sans", "Google Sans Text", Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* ---------- 2. Цвета по ролям ---------- */
  --u-primary: var(--brand-primary);
  --u-primary-hover: color-mix(in srgb, var(--u-primary), #000 8%);
  --u-on-primary: #ffffff;
  --u-primary-container: color-mix(in srgb, var(--u-primary) 18%, #fff);
  --u-secondary-container: var(--brand-tonal);
  --u-secondary-container-hover: color-mix(in srgb, var(--u-secondary-container), var(--u-on-secondary-container) 8%);
  --u-on-secondary-container: var(--brand-on-tonal);

  /* поверхности — нейтральные холодно-серые, без подкраски в синий: не спорят с акцентом */
  --u-bg: #f3f4f6;
  --u-surface: #ffffff;
  --u-surface-low: #f9fafb;
  --u-surface-cont: #f3f4f6;
  --u-surface-high: #eaecf0;
  --u-surface-highest: #dfe2e7;
  --u-on-surface: #111827;                    /* текст — чернила, 16:1 на фоне */
  --u-on-surface-variant: #4b5563;
  --u-muted: #5f6672;                         /* вспомогательный текст: ≥ 4.5:1 на белом, cont и high */
  --u-outline: #6b7280;                       /* контролы ≥ 3:1 */
  --u-outline-variant: #d0d5dd;               /* рамка поля — лёгкая: не спорит с акцентом */
  --u-hairline: #e5e7eb;

  /* статусы: экономия — зелёный, внимание — оранжевый (не солнечный), ошибка — красный */
  --u-success: #0e7a3e;
  --u-success-container: #d8f3e2;
  --u-on-success-container: #0a4f29;
  --u-warning: #a14600;
  --u-warning-container: #ffe6d1;
  --u-on-warning-container: #5e2700;
  --u-error: #c62828;
  --u-on-error: #ffffff;
  --u-error-container: #fde3e1;
  --u-on-error-container: #601410;
  --u-sun: var(--brand-sun);
  --u-logo-sky: color-mix(in srgb, var(--brand-primary) 80%, #fff);   /* дефис в надписи логотипа */

  --u-inverse-surface: #1d2230;               /* всплывающее сообщение (снэкбар): чернила */
  --u-inverse-on-surface: #f3f4f6;
  --u-inverse-primary: color-mix(in srgb, var(--u-primary) 40%, #fff);   /* действие на тёмной строке («Undo»)  */
  --u-scrim: rgba(0, 0, 0, .32);              /* затемнение под окном */
  --u-selected: color-mix(in srgb, var(--u-primary) 3%, #fff);         /* фон выбранной карточки */
  --u-selected-error: color-mix(in srgb, var(--u-error) 2%, #fff);     /* выбранная, но несовместимая */
  --u-img-placeholder: #e6e8eb;               /* место под снимок дома, пока его нет */

  /* слои состояний (Material 3): наведение 8%, нажатие 14%, недоступно 12% / 38% */
  --u-hover: color-mix(in srgb, var(--u-on-surface) 8%, transparent);
  --u-hover-primary: color-mix(in srgb, var(--u-primary) 8%, transparent);
  --u-press-primary: color-mix(in srgb, var(--u-primary) 14%, transparent);
  --u-disabled-bg: color-mix(in srgb, var(--u-on-surface) 12%, transparent);
  --u-disabled-fg: color-mix(in srgb, var(--u-on-surface) 38%, transparent);

  /* подсказки обучения — свой цвет, оранжевый: синий подсказки сливался с синим интерфейсом и снимком (Армен, 02.10).
     Яркий — метки (кольцо, стрелки, линия к углу, рамка); тёмный — кнопки обучения (белый текст на нём 5.2:1) */
  --u-coach-accent: #f97316;
  --u-coach-strong: #c2410c;
  --u-coach: color-mix(in srgb, var(--u-coach-accent) 9%, #fff);              /* фон карточки и плашки */
  --u-coach-line: color-mix(in srgb, var(--u-coach-accent) 60%, #fff);        /* их рамка */
  --u-coach-glow: color-mix(in srgb, var(--u-coach-accent) 24%, transparent);  /* ореол кольца */

  /* ---------- 3. Данные: графики и карта (палитра графиков проверена на дальтонизм) ---------- */
  --u-chart-before: #eb6834;                  /* счёт без солнца */
  --u-chart-solar: #2a78d6;                   /* с солнцем */
  --u-chart-battery: #1baf7a;                 /* с батареей */
  --u-chart-usage: #4a3aa7;                   /* расход дома */
  --u-chart-prod: var(--u-sun);               /* выработка */
  --u-chart-import: #9aa3af;                  /* взято из сети (пропозал: «From the grid») */
  --u-chart-grid: #eceef2;
  --u-chart-axis: #d5dae1;
  --u-map-hover: rgba(255, 255, 255, .14);    /* скат крыши под мышью на снимке */

  /* ---------- 4. Шрифт: роли (font: var(--u-t-…)) ---------- */
  --u-font: var(--brand-font);
  --u-t-display: 400 57px/64px var(--u-font);       /* главная цифра Result */
  --u-t-headline-l: 400 32px/40px var(--u-font);    /* заголовок раздела */
  --u-t-headline-m: 400 28px/36px var(--u-font);    /* крупные суммы */
  --u-t-headline-s: 400 24px/32px var(--u-font);    /* заголовок окна, цифры сводок */
  --u-t-title-l: 400 22px/28px var(--u-font);       /* название приложения, заголовок панели */
  --u-t-title-m: 500 16px/24px var(--u-font);       /* заголовок карточки и группы */
  --u-t-body-l: 400 16px/24px var(--u-font);        /* поля ввода, строки списков */
  --u-t-body-m: 400 14px/20px var(--u-font);        /* основной текст */
  --u-t-body-s: 400 12px/16px var(--u-font);        /* пояснения, подписи под цифрами */
  --u-t-label-l: 500 14px/20px var(--u-font);       /* кнопки, чипы, подписи строк */
  --u-t-label-m: 500 12px/16px var(--u-font);       /* подписи полей, плашки */

  /* ---------- 5. Скругления ---------- */
  --u-r-xs: 6px;                              /* маленькие плашки (до 24px высотой), клавиши */
  --u-r-s: 8px;
  --u-r-m: 12px;                              /* поля ввода и списки */
  --u-r-l: 16px;                              /* карточки, меню */
  --u-r-xl: 28px;                             /* листы и окна */
  --u-r-full: 999px;                          /* кнопки-пилюли, переключатели */

  /* ---------- 6. Тени и обводки ---------- */
  --u-shadow: 0 0.5px 1px rgba(0, 0, 0, .025), 0 2px 6px rgba(0, 0, 0, .03);   /* ЕДИНСТВЕННАЯ тень */
  --u-shadow-pop: var(--u-shadow), 0 0 0 1px var(--u-hairline);              /* всплывающее и поверх снимка */
  --u-shadow-high: 0 8px 28px rgba(0, 0, 0, .16), 0 2px 6px rgba(0, 0, 0, .10);  /* поверх всего: подсказка обучения, меню на телефоне */
  --u-line: inset 0 0 0 1px var(--u-hairline);                               /* тонкая обводка карточки */
  --u-line-strong: inset 0 0 0 1px var(--u-outline-variant);
  --u-line-focus: inset 0 0 0 1px var(--u-primary);                          /* поле в фокусе (вторая линия к рамке) */
  --u-line-error: inset 0 0 0 1px var(--u-error);
  --u-line-selected: inset 0 0 0 2px var(--u-primary);                       /* выбранная карточка */
  --u-line-selected-error: inset 0 0 0 2px var(--u-error);
  --u-focus: 2px solid var(--u-primary);                                     /* outline при управлении с клавиатуры */

  /* ---------- 7. Движение (Material 3): только прозрачность и сдвиг; появление дольше исчезновения ---------- */
  --u-ease: cubic-bezier(.2, 0, 0, 1);              /* стандартная: смена состояния на месте */
  --u-ease-in: cubic-bezier(.05, .7, .1, 1);        /* появление — быстро стартует, мягко садится */
  --u-ease-out: cubic-bezier(.3, 0, .8, .15);       /* исчезновение — уходит с ускорением */
  --u-dur: 200ms;                                   /* смена цвета и рамки */
  --u-dur-s: 150ms;                                 /* наведение, закрытие меню */
  --u-dur-m: 250ms;                                 /* меню, окна, разделы, смена страниц */
  --u-dur-l: 400ms;                                 /* раскрывашки, перелёт подсказки обучения */
  --u-dur-xl: 700ms;                                /* момент «награды»: сумма экономии, волна панелей */

  /* ---------- 8. Токены старого слоя (styles.css) → кит ---------- */
  --shadow: var(--u-shadow);
  --font: var(--u-font);
  --bg: var(--u-bg);
  --surface: var(--u-surface);
  --surface-2: var(--u-surface-low);
  --surface-3: var(--u-surface-high);
  --border: var(--u-hairline);
  --border-strong: var(--u-outline-variant);
  --text: var(--u-on-surface);
  --text-2: var(--u-on-surface-variant);
  --text-3: var(--u-muted);
  --accent: var(--u-primary);
  --accent-hover: var(--u-primary-hover);
  --accent-soft: color-mix(in srgb, var(--u-primary) 10%, #fff);
  --accent-ring: color-mix(in srgb, var(--u-primary) 28%, transparent);
  --pv: #2f62c8;
  --sun: var(--u-sun);
  --good: var(--u-success);
  --good-soft: var(--u-success-container);
  --warn: var(--u-warning);
  --warn-soft: #fff4dc;
  --warn-border: #f2d49b;
  --danger: var(--u-error);
  --danger-soft: var(--u-error-container);
  --danger-border: #f2b8b5;
  --c-before: var(--u-chart-before);
  --c-solar: var(--u-chart-solar);
  --c-battery: var(--u-chart-battery);
  --c-usage: var(--u-chart-usage);
  --c-prod: var(--u-chart-prod);
  --c-grid: var(--u-chart-grid);
  --c-axis: var(--u-chart-axis);
  --r-sm: var(--u-r-s);
  --r-md: var(--u-r-m);
  --r-lg: var(--u-r-l);
  --r-pill: var(--u-r-full);
  /* размеры шрифта старых блоков (карточки «All numbers», таблицы, подписи графиков) — на шкалу кита: 13 → 12, 20 → 22,
     26 → 28, 34 → 32; полужирного 600 в ките нет — 500 */
  --fs-xs: 12px;
  --fs-sm: 12px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 32px;
  --fw-medium: 500;
  --fw-semi: 500;
}


/* =====================================================================
   КОМПОНЕНТЫ. Каждый элемент описан один раз; классы экранов, которые им являются, перечислены в селекторе.
   Новый элемент собирать из официальных классов кита — они первые в каждом селекторе: .u2-btn (+ --filled/--tonal/
   --neutral/--outlined/--text/--danger, --sm/--lg), .u2-icon-btn, .u2 .input, .u2-pick, .u2-search, .u2-menu, .u2-seg,
   переключатель (чекбокс внутри .u2), .u2-tag (+ --info/--success/--warning/--error), .u2-chip, .u2-range, .u2-radio,
   .u2-sheet, .u2-card (+ --outlined), .u2-notice (+ тона), .u2-dlg, .u2-snackbar, ссылка в тексте .u2-link, текст
   документа .u2-prose, логотип .u2-logo__*; плотное место — .u2-dense. Свои не заводить.
   На экранах (styles2.css, design2.css, guide.css, кабинет) остаётся только раскладка: где стоит, какой ширины.
   ===================================================================== */

/* ---------- Кнопка-значок: круг 40 (маленькая — 32), значок 20 ---------- */
.u2-icon-btn, .gd-help, .gd-card__x, .u2-cal__nav, .u2 .dz-icon-btn, .u2 .dz-undo .dz-tool--icon, .u2-eq__info {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: none; 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-icon-btn--sm, .gd-card__x, .u2-eq__info { width: 32px; height: 32px; }
.u2-icon-btn:hover, .gd-help:hover, .gd-card__x:hover, .u2-cal__nav:hover, .u2 .dz-icon-btn:hover,
.u2 .dz-undo .dz-tool--icon:hover:not(:disabled), .u2-eq__info:hover { color: var(--u-on-surface); }   /* фон — общее наведение ниже */
.u2-icon-btn:focus-visible, .gd-help:focus-visible, .gd-card__x:focus-visible, .u2-cal__nav:focus-visible,
.u2 .dz-icon-btn:focus-visible, .u2 .dz-undo .dz-tool--icon:focus-visible, .u2-eq__info:focus-visible { outline: var(--u-focus); outline-offset: 2px; }
.u2-icon-btn svg, .gd-help svg, .gd-card__x svg, .u2-cal__nav svg, .u2 .dz-icon-btn svg, .u2 .dz-undo .dz-tool--icon svg,
.u2-eq__info svg { width: 20px; height: 20px; flex: none; }

/* ---------- Кнопка-пилюля. Варианты: filled (главная) · tonal · neutral · outlined · text · danger.
   Высота: 40; sm — 36; lg — 48 (главное действие экрана) ---------- */
.u2-btn, .u2 .btn, .gd-btn, .u2 .link-btn, .u2-dd__btn, .u2-info__chosen {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 24px; border: 0; border-radius: var(--u-r-full);
  font: var(--u-t-label-l); letter-spacing: .1px; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color var(--u-dur) var(--u-ease), box-shadow var(--u-dur) var(--u-ease);
}
.u2-btn--sm, .u2 .btn--sm, .gd-btn, .u2 .link-btn { height: 36px; padding: 0 16px; }
.u2-btn--lg { height: 48px; padding: 0 24px; font: var(--u-t-title-m); }
.u2-btn--tonal, .u2 .btn--ghost, .u2-info__chosen { background: var(--u-secondary-container); color: var(--u-on-secondary-container); }
.u2-btn--tonal:hover:not(:disabled), .u2 .btn--ghost:hover:not(:disabled) { background: var(--u-secondary-container-hover); }
.u2-btn--neutral, .u2-dd__btn { background: var(--u-surface-high); color: var(--u-on-surface); }
.u2-btn--neutral:hover:not(:disabled), .u2-dd__btn:hover { background: var(--u-surface-highest); color: var(--u-on-surface); }
.u2-dd__btn[aria-expanded="true"] { background: var(--u-secondary-container); color: var(--u-on-secondary-container); }
.u2-btn--outlined, .gd-btn--tonal { background: var(--u-surface); color: var(--u-primary); box-shadow: var(--u-line-strong); }
.u2-btn--text, .gd-btn, .u2 .link-btn, .u2 .dz-hist-btn { background: none; color: var(--u-primary); padding: 0 12px; }
.u2-btn--text:hover:not(:disabled), .u2 .link-btn:hover:not(:disabled), .u2 .dz-hist-btn:hover:not(:disabled),
.gd-btn:not(.gd-btn--fill):hover:not(:disabled), .u2-link:hover { background: var(--u-hover-primary); }
.u2-btn--filled, .u2 .btn--primary, .gd-btn--fill { background: var(--u-primary); color: var(--u-on-primary); }
.gd-btn--fill { padding: 0 16px; }                         /* кнопка обучения — малая (36), не текстовая */
.u2-btn--filled:hover:not(:disabled), .u2 .btn--primary:hover:not(:disabled), .gd-btn--fill:hover {
  background: var(--u-primary-hover); box-shadow: var(--u-shadow);
}
.u2-btn--danger { background: var(--u-error); color: var(--u-on-error); }
/* обучение: в карточке и плашке «главный цвет» — оранжевый обучения; кнопки берут его из тех же токенов
   (производные токены пересчитаны здесь же — у корня они посчитаны от синего) */
.gd-card, .gd-bar {
  --u-primary: var(--u-coach-strong);
  --u-primary-hover: color-mix(in srgb, var(--u-coach-strong), #000 8%);
  --u-hover-primary: color-mix(in srgb, var(--u-coach-strong) 8%, transparent);
  --u-press-primary: color-mix(in srgb, var(--u-coach-strong) 14%, transparent);
  --u-focus: 2px solid var(--u-coach-strong);
}
/* плотное место (панель редактора — как у полей): у пилюль отступ 16, длинная надпись влезает в узкую панель */
.u2 .dz-side .btn:not(.btn--icon) { padding: 0 16px; }
.u2 .dz-side .dz-seg button { padding: 0 4px; }            /* сегменты панели делят ширину поровну (flex: 1) — отступ минимальный, слово не режется */
.u2-btn:disabled, .u2 .btn:disabled, .gd-btn:disabled {
  background: var(--u-disabled-bg); color: var(--u-disabled-fg); box-shadow: none; opacity: 1; cursor: not-allowed;
}
.u2-btn--text:disabled, .u2 .link-btn:disabled, .u2 .dz-hist-btn:disabled, .gd-btn:not(.gd-btn--fill):disabled { background: none; }   /* текстовая — без заливки */
.u2-btn:focus-visible, .u2 .btn:focus-visible, .gd-btn:focus-visible, .u2 .link-btn:focus-visible, .u2-dd__btn:focus-visible {
  outline: var(--u-focus); outline-offset: 2px; box-shadow: none;       /* у старого слоя — своё кольцо; здесь одна обводка */
}

/* .link-btn («Edit dates», «Change», «Back to measured», «See results», «Edit» у графика 25 лет) — не ссылка, а действие:
   текстовая кнопка 36 (выше в группах). Подчёркивание при наведении из старого слоя — убрано. */
.u2 .link-btn:hover { text-decoration: none; }

/* ---------- Поле: текст, число, выпадающий список, дата. Высота 48; в плотных местах (таблица счетов,
   панель редактора, строки настроек) — 40: место задаёт --u-field-h ---------- */
.u2-dense, .u2 .bills, .u2 .dz-side, .u2-esc__field, .u2 .life-rate, .u2-date, .u2 .dz-pa__num, .u2 .dz-pe__angle { --u-field-h: 40px; }
.u2 .input, .u2-pick, .u2-date, .u2 .dz-pa__num input, .u2 .dz-pe__angle input {
  box-sizing: border-box; height: var(--u-field-h, 48px);
  border: 1px solid var(--u-outline-variant); border-radius: var(--u-r-m); background: var(--u-surface);
  font: var(--u-t-body-l); color: var(--u-on-surface);
  transition: border-color var(--u-dur) var(--u-ease), box-shadow var(--u-dur) var(--u-ease);
}
.u2 .input { padding-left: 16px; }
.u2-pick, .u2-date { padding: 0 12px 0 16px; }
.u2 .input:hover, .u2-pick:hover:not(:disabled), .u2-date:hover,
.u2 .dz-pa__num input:hover, .u2 .dz-pe__angle input:hover { border-color: var(--u-on-surface); }
.u2 .input:focus, .u2 .input:focus-visible, .u2-pick:focus-visible, .u2-pick[aria-expanded="true"], .u2-date:focus-visible,
.u2-date[aria-expanded="true"], .u2 .dz-pa__num input:focus, .u2 .dz-pe__angle input:focus {
  outline: none; border-color: var(--u-primary); box-shadow: var(--u-line-focus);
}
.u2 .input.is-invalid, .u2 .input.is-invalid:focus { border-color: var(--u-error); box-shadow: var(--u-line-error); }   /* неверное значение */

/* выпадающий список (select2.js): поле-кнопка со стрелкой */
.u2-pick-wrap { position: relative; }
.u2-pick { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; cursor: pointer; }
.u2-pick:disabled { color: var(--u-muted); cursor: default; }
.u2-pick__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u2-pick .u2-i { width: 20px; height: 20px; color: var(--u-on-surface-variant); stroke-width: 2; transition: transform var(--u-dur) var(--u-ease); }
.u2-pick[aria-expanded="true"] .u2-i { transform: rotate(180deg); }
/* меню списка всплывает поверх страницы (select2.js ставит top/left/min-width) — край панели его не обрезает */
.u2-dd__menu.u2-pick__menu { position: fixed; top: 0; left: 0; right: auto; z-index: 1000; width: max-content; min-width: 0; max-width: min(560px, calc(100vw - 16px)); max-height: 360px; overflow-y: auto; }

/* поле даты (datepicker.js) */
.u2-date { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 148px; font-variant-numeric: tabular-nums; cursor: pointer; }
.u2-date svg, .u2-cal__nav svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.u2-date svg { width: 20px; height: 20px; flex: none; color: var(--u-on-surface-variant); }

/* ---------- Поиск: пилюля 48 с серой заливкой; в фокусе — белая с тенью ---------- */
.u2-search, .u2 .combo .input { height: 48px; border-radius: var(--u-r-full); background: var(--u-surface-high); }
.u2 .combo .input { padding-left: 20px; border-color: transparent; }
.u2-search:focus-within, .u2 .combo .input:focus { background: var(--u-surface); box-shadow: var(--u-shadow-pop); }
.u2 .combo .input:focus { border-color: transparent; }

/* ---------- Всплывающее меню: список подсказок, выпадающий список, меню аккаунта, история версий, календарь ---------- */
.u2-menu, .u2-dd__menu, .u2-searchbar .suggest, .u2-searchbar .combo__list, .u2-cal {
  background: var(--u-surface); border: 0; border-radius: var(--u-r-l); box-shadow: var(--u-shadow-pop);
}
.u2-menu, .u2-dd__menu, .u2-searchbar .suggest, .u2-searchbar .combo__list { padding: 8px 0; }
.u2-menu__item, .u2-dd__opt, .u2-searchbar .suggest__item, .u2-searchbar .combo__opt {
  display: flex; align-items: center; gap: 16px; width: 100%; min-height: 44px; box-sizing: border-box; padding: 10px 24px;
  border: 0; border-radius: 0; background: none; text-align: left; font: var(--u-t-body-l); color: var(--u-on-surface); cursor: pointer;
}
.u2-menu__item:focus-visible, .u2-dd__opt:focus-visible { outline: none; }   /* фон — общее наведение ниже */
.u2-dd__opt .u2-i, .u2-menu__item .u2-i { width: 20px; height: 20px; flex: none; color: var(--u-on-surface-variant); }

/* ---------- Сегменты: переключатель из 2–4 вариантов в общей рамке-пилюле (выбранный — тональный) ---------- */
.u2-seg, .u2-tabs.tabs, .u2 .dz-seg, .u2-view {
  display: inline-flex; gap: 0; padding: 0; border: 1px solid var(--u-outline); border-radius: var(--u-r-full);
  background: none; overflow: hidden;
}
.u2-seg button, .u2-tabs .tab, .u2 .dz-seg button, .u2-view__btn {
  height: 38px; padding: 0 16px; border: 0; border-radius: 0; background: none; box-shadow: none;   /* + рамка 1px = 40, как у кнопок */
  font: var(--u-t-label-l); color: var(--u-on-surface); cursor: pointer;
  transition: background-color var(--u-dur) var(--u-ease);
}
.u2-seg button + button, .u2-tabs .tab + .tab, .u2-view__btn + .u2-view__btn { border-left: 1px solid var(--u-outline); }
.u2 .dz-seg button { border-right-color: var(--u-outline); }                 /* у сегментов редактора линия справа */
.u2-seg button[aria-selected="true"], .u2-tabs .tab[aria-selected="true"], .u2 .dz-seg button.is-on,
.u2 .dz-seg button[aria-pressed="true"], .u2-view__btn[aria-pressed="true"] {
  background: var(--u-secondary-container); color: var(--u-on-secondary-container); font-weight: 500;
}
.u2-seg button:focus-visible, .u2-tabs .tab:focus-visible, .u2 .dz-seg button:focus-visible, .u2-view__btn:focus-visible {
  outline: var(--u-focus); outline-offset: -2px;
}

/* ---------- Переключатель (M3 switch) 36 × 20: два вида разметки — голый чекбокс и .switch с дорожкой ---------- */
.u2 input[type="checkbox"]:not(.switch > input) {
  -webkit-appearance: none; appearance: none; flex: none; position: relative; box-sizing: border-box;
  width: 36px; height: 20px; margin: 0; border: 2px solid var(--u-outline); border-radius: var(--u-r-full);
  background: var(--u-surface-highest); cursor: pointer;
  transition: background-color var(--u-dur) var(--u-ease), border-color var(--u-dur) var(--u-ease);
}
.u2 input[type="checkbox"]:not(.switch > input)::before {
  content: ""; position: absolute; top: 50%; left: 3px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--u-outline); transform: translateY(-50%);
  transition: left var(--u-dur) var(--u-ease), width var(--u-dur) var(--u-ease), height var(--u-dur) var(--u-ease), background-color var(--u-dur) var(--u-ease);
}
.u2 input[type="checkbox"]:not(.switch > input):checked { background: var(--u-primary); border-color: var(--u-primary); }
.u2 input[type="checkbox"]:not(.switch > input):checked::before { left: 17px; width: 14px; height: 14px; background: var(--u-on-primary); }
.u2 input[type="checkbox"]:not(.switch > input):disabled { opacity: .38; cursor: default; }
.u2 input[type="checkbox"]:not(.switch > input):focus-visible { outline: var(--u-focus); outline-offset: 2px; }
.u2 .switch { width: 36px; height: 20px; }
.u2 .switch__track { background: var(--u-surface-highest); border: 2px solid var(--u-outline); }
.u2 .switch__track::after { top: 3px; left: 3px; width: 10px; height: 10px; background: var(--u-outline); box-shadow: none; transition: left var(--u-dur) var(--u-ease), top var(--u-dur) var(--u-ease), width var(--u-dur) var(--u-ease), height var(--u-dur) var(--u-ease); }
.u2 .switch input:checked + .switch__track { background: var(--u-primary); border-color: var(--u-primary); }
.u2 .switch input:checked + .switch__track::after { transform: none; left: 17px; top: 1px; width: 14px; height: 14px; background: var(--u-on-primary); }
/* строка «подпись — переключатель справа» */
.u2 .check, .u2 .dz-sb__check { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 16px; color: var(--u-on-surface); }

/* ---------- Плашка (статус, метка): 24, маленькое скругление. Тона: нейтральный · info · success · warning · error ---------- */
.u2-tag, .u2 .badge, .u2-house__chips .chip, .u2-eq__badge, .u2-fit, .u2-pill {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border: 0; border-radius: var(--u-r-xs);
  font: var(--u-t-label-m); white-space: nowrap; background: var(--u-surface-high); color: var(--u-on-surface-variant);
}
.u2-tag--info, .u2-house__chips .chip--util, .u2-eq__badge { background: var(--u-secondary-container); color: var(--u-on-secondary-container); }
.u2-tag--success, .u2-fit--ok, .u2-pill { background: var(--u-success-container); color: var(--u-on-success-container); }
.u2-tag--warning, .u2 .badge--warn, .u2-house__chips .chip--warn, .u2-fit--warn { background: var(--u-warning-container); color: var(--u-on-warning-container); }
.u2-tag--error, .u2-house__chips .chip--danger, .u2-fit--no { background: var(--u-error-container); color: var(--u-on-error-container); }

/* ---------- Чип выбора: 32, обводка; выбранный — тональный без обводки (уклон ската, тип линии) ---------- */
.u2-chip, .u2 .dz-chip, .u2 .dz-ee__type {
  height: 32px; border: 1px solid var(--u-outline-variant); border-radius: var(--u-r-s); background: none;
  font: var(--u-t-label-l); color: var(--u-on-surface-variant);
}
.u2-chip[aria-pressed="true"], .u2 .dz-chip[aria-checked="true"], .u2 .dz-ee__type.is-on, .u2 .dz-ee__type[aria-pressed="true"] {
  border-color: transparent; background-color: var(--u-secondary-container); color: var(--u-on-secondary-container); font-weight: 500;
}
.u2-chip:focus-visible, .u2 .dz-chip:focus-visible, .u2 .dz-ee__type:focus-visible { outline: var(--u-focus); outline-offset: 2px; }
.u2-chip { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; cursor: pointer; }   /* официальный чип: раскладка (у чипов редактора — своя) */

/* ---------- Ползунок M3: закрашенная часть дорожки — --fill (ставит app.js setRange) ---------- */
.u2-range { --fill: 0%; -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 24px; margin: 0; background: transparent; cursor: pointer; }
.u2-range:focus-visible { outline: none; }
.u2-range::-webkit-slider-runnable-track { height: 8px; border-radius: var(--u-r-full); background: linear-gradient(to right, var(--u-primary) var(--fill), var(--u-surface-highest) var(--fill)); }
.u2-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; margin-top: -6px; border: 0; border-radius: 50%; background: var(--u-primary);
  box-shadow: 0 0 0 0 var(--u-hover-primary); transition: box-shadow var(--u-dur) var(--u-ease);
}
.u2-range:hover::-webkit-slider-thumb { box-shadow: 0 0 0 8px var(--u-hover-primary); }
.u2-range:focus-visible::-webkit-slider-thumb, .u2-range:active::-webkit-slider-thumb { box-shadow: 0 0 0 10px var(--u-press-primary); }
.u2-range.is-empty::-webkit-slider-thumb { background: var(--u-outline); }
.u2-range::-moz-range-track { height: 8px; border-radius: var(--u-r-full); background: var(--u-surface-highest); }
.u2-range::-moz-range-progress { height: 8px; border-radius: var(--u-r-full); background: var(--u-primary); }
.u2-range::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--u-primary); }

/* ---------- Отметка выбора (круг 24 в углу карточки; выбрано — заливка с галочкой) ---------- */
.u2-radio, .u2-eq__radio { width: 24px; height: 24px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--u-outline); background: var(--u-surface); display: grid; place-items: center; }
.u2-radio[aria-checked="true"], .u2-eq[aria-checked="true"] .u2-eq__radio { background: var(--u-primary); border-color: var(--u-primary); }
.u2-radio[aria-checked="true"]::after, .u2-eq[aria-checked="true"] .u2-eq__radio::after { content: ""; width: 10px; height: 5px; border-left: 2.5px solid var(--u-on-primary); border-bottom: 2.5px solid var(--u-on-primary); transform: translateY(-1px) rotate(-45deg); }
.u2-eq.is-no[aria-checked="true"] .u2-eq__radio { background: var(--u-error); border-color: var(--u-error); }

/* ---------- Поверхности ----------
   лист — крупная белая область экрана (меню слева, раздел, рейка и панель редактора, карточка входа);
   карточка — мягкая серая группа внутри листа; карточка с обводкой — белая, выбираемая или список */
.u2-sheet, .u2 .dz-rail, .u2 .dz-side, .lg__card { background: var(--u-surface); border: 0; border-radius: var(--u-r-xl); box-shadow: var(--u-shadow); }
.u2 .dz-stage { border-radius: var(--u-r-xl); box-shadow: var(--u-shadow); }     /* холст редактора — лист со снимком */
.u2-card, .u2-opts, .u2-money, .u2-roofstats { border-radius: var(--u-r-l); background: var(--u-surface-low); box-shadow: none; }
.u2-card--outlined, .u2-eq { border: 0; border-radius: var(--u-r-l); background: var(--u-surface); box-shadow: var(--u-line); }
.u2-eq:hover { box-shadow: var(--u-line-strong), var(--u-shadow); }
.u2-eq[aria-checked="true"] { background: var(--u-selected); box-shadow: var(--u-line-selected); }
.u2-eq.is-no[aria-checked="true"] { background: var(--u-selected-error); box-shadow: var(--u-line-selected-error); }

/* ---------- Сообщение в потоке страницы: 12 · 16, скругление 12. Тона: нейтральный · info · warning · error ---------- */
.u2-notice, .u2 .note, .u2-result-note, .u2 .legacy-design, .u2 .step-error, .lg__err, .u2-dlg__reasons, .u2-conflict, .u2 .dz-banner {
  padding: 12px 16px; border: 0; border-radius: var(--u-r-m); box-shadow: none; font: var(--u-t-body-m);
  background: var(--u-surface-cont); color: var(--u-on-surface-variant);
}
.u2-notice--info, .u2 .legacy-design { background: var(--u-secondary-container); color: var(--u-on-secondary-container); }
.u2-notice--warning, .u2-result-note.is-warn, .u2 .dz-banner, .u2-stat__warn { background: var(--u-warning-container); color: var(--u-on-warning-container); }
.u2-notice--error, .u2 .step-error, .lg__err, .u2-dlg__reasons, .u2-conflict { background: var(--u-error-container); color: var(--u-on-error-container); }

/* ---------- Окно (диалог): лист 28 поверх затемнения; заголовок 24, текст 14 ---------- */
.u2-dlg, .gd-dlg__card, .u2 .dz-dialog__card { background: var(--u-surface); color: var(--u-on-surface); border-radius: var(--u-r-xl); }
.u2-dlg::backdrop, .gd-dlg::backdrop { background: var(--u-scrim); }
.u2 .dz-dialog { background: var(--u-scrim); }
.u2-dlg__title, .gd-dlg__title, .u2 .dz-dialog__title { font: var(--u-t-headline-s); color: var(--u-on-surface); }
.u2-dlg__text, .gd-dlg__text, .u2 .dz-dialog__text { font: var(--u-t-body-m); color: var(--u-on-surface-variant); }

/* ---------- Всплывающая строка (снэкбар): тёмная, 14 · 16 ---------- */
.u2-snackbar, .u2 .toast, .gd-toast, .u2 .dz-flash {
  padding: 14px 16px; border: 0; border-radius: var(--u-r-s); background: var(--u-inverse-surface); color: var(--u-inverse-on-surface);
  font: var(--u-t-body-m); box-shadow: var(--u-shadow);
}
/* с действием («Moved to Trash · Undo»): текст и справа текстовая кнопка светлого главного цвета; наведение — слой
   12 % её цвета (на тёмном 8 % главного не видно) */
.u2-snackbar:has(> .u2-snackbar__action) { display: flex; align-items: center; gap: 12px; padding-right: 8px; }
.u2-snackbar__action {
  flex: none; height: 36px; margin: -8px 0; padding: 0 12px; border: 0; border-radius: var(--u-r-full); background: none;
  color: var(--u-inverse-primary); font: var(--u-t-label-l); cursor: pointer; transition: background-color var(--u-dur) var(--u-ease);
}
.u2-snackbar__action:hover { background: color-mix(in srgb, var(--u-inverse-primary) 12%, transparent); }
.u2-snackbar__action:focus-visible { outline: 2px solid var(--u-inverse-primary); outline-offset: 2px; }

/* ---------- Ссылка в тексте: главный цвет, без подчёркивания (как везде в ките); наведение — слой 8 % главного
   (в группе текстовых кнопок выше). Отличается от текста цветом: главный против чернил — 3:1 и больше ---------- */
.u2-link { color: var(--u-primary); text-decoration: none; border-radius: var(--u-r-xs); margin: 0 -2px; padding: 0 2px;
  transition: background-color var(--u-dur) var(--u-ease); }
.u2-link:focus-visible { outline: var(--u-focus); outline-offset: 1px; }

/* ---------- Текст документа (Terms, Privacy): заголовок 32, разделы 22, абзацы и списки 16 · 24 для чтения
   подряд; ширину колонки задаёт страница ---------- */
.u2-prose { font: var(--u-t-body-l); color: var(--u-on-surface-variant); }
.u2-prose h1 { margin: 0 0 8px; font: var(--u-t-headline-l); color: var(--u-on-surface); }
.u2-prose h2 { margin: 40px 0 12px; font: var(--u-t-title-l); color: var(--u-on-surface); }
.u2-prose h3 { margin: 24px 0 8px; font: var(--u-t-title-m); color: var(--u-on-surface); }
.u2-prose p, .u2-prose ul { margin: 0 0 16px; }
.u2-prose ul { padding-left: 24px; }
.u2-prose li + li { margin-top: 8px; }
.u2-prose strong { font-weight: 500; color: var(--u-on-surface); }
.u2-prose__meta { margin: 0 0 32px; font: var(--u-t-body-m); color: var(--u-muted); }

/* =====================================================================
   НАВЕДЕНИЕ — одна логика на весь продукт (подчёркиваний нет нигде):
   1. Нейтральное — значки, пункты меню, строки списков и меню слева, сегменты, чипы, кнопки на снимке и «− +»,
      дни календаря, раскрывашки, логотип: слой 8% цвета текста ПОВЕРХ своего фона (background-image) — на прозрачном
      это серый, на выбранном или цветном (строка Result) — тот же цвет чуть темнее, а не перекраска в серый.
      Слой проявляется за --u-dur-s: его плотность — зарегистрированное свойство --u-state (раздел «Движение»).
   2. Действие цветом главного — текстовые кнопки и кнопки-ссылки, зона файла: 8% главного (в группах кнопок выше).
   3. Залитые кнопки (filled, tonal, neutral): свой фон темнее.   4. «Удалить» (корзины, крестики): красный контейнер.
   5. Выбираемая карточка: обводка сильнее + тень.   6. Поле: рамка темнее.   7. Переключатель и ползунок: ореол у ручки.
   Новый нажимаемый элемент — в один из списков ниже, своего наведения не заводить.
   ===================================================================== */
/* 1а. прозрачные в покое: слой + сброс цветного наведения старого слоя */
.u2-icon-btn:hover, .gd-help:hover, .gd-card__x:hover, .u2-cal__nav:hover, .u2 .dz-icon-btn:hover,
.u2 .dz-undo .dz-tool--icon:hover:not(:disabled),
.u2-menu__item:hover, .u2-menu__item:focus-visible, .u2-dd__opt:hover, .u2-dd__opt:focus-visible,
.u2-searchbar .suggest__item:hover, .u2-searchbar .suggest__item.is-active, .u2-searchbar .combo__opt:hover,
.u2-searchbar .combo__opt.is-active, .u2 .dz-hist__item:hover, .cb__link:hover,
.u2-seg button:hover:not([aria-selected="true"]), .u2-tabs .tab:hover:not([aria-selected="true"]),
.u2 .dz-seg button:hover:not(.is-on):not([aria-pressed="true"]), .u2-view__btn:hover:not([aria-pressed="true"]),
.u2-chip:hover:not([aria-pressed="true"]), .u2 .dz-chip:hover:not([aria-checked="true"]),
.u2 .dz-ee__type:hover:not(.is-on):not([aria-pressed="true"]),
.u2 .dz-zoom__btn:hover, .u2 .dz-pn-bar button:hover:not([aria-pressed="true"]), .u2-qty__btn:hover:not(:disabled),
.u2-exp summary:hover, .u2 .dz-more > summary:hover, a.u2-brand:hover, .u2 .dz-brand:hover {
  background-color: transparent; --u-state: 8%;
  background-image: linear-gradient(color-mix(in srgb, var(--u-on-surface) var(--u-state), transparent), color-mix(in srgb, var(--u-on-surface) var(--u-state), transparent));
}
/* 1б. со своим фоном в покое или выбранные: только слой поверх фона */
.u2-row:hover, .u2 .dz-face-row:hover, .u2 .dz-pp__row:hover, .u2-cal__day:hover, .u2-eq__info:hover,
.u2-chip[aria-pressed="true"]:hover, .u2 .dz-chip[aria-checked="true"]:hover, .u2 .dz-ee__type.is-on:hover,
.u2 .dz-ee__type[aria-pressed="true"]:hover {
  --u-state: 8%;
  background-image: linear-gradient(color-mix(in srgb, var(--u-on-surface) var(--u-state), transparent), color-mix(in srgb, var(--u-on-surface) var(--u-state), transparent));
}
/* 1в. рейка инструментов редактора (как навигационная рейка M3): кнопка не заливается, слой — на «таблетке» значка */
.u2 .dz-tool:hover:not(:disabled) { background: none; color: var(--u-on-surface); }
.u2 .dz-tool:hover:not(:disabled) svg {
  --u-state: 8%;
  background-image: linear-gradient(color-mix(in srgb, var(--u-on-surface) var(--u-state), transparent), color-mix(in srgb, var(--u-on-surface) var(--u-state), transparent));
}
.u2 .dz-undo .dz-tool--icon:hover:not(:disabled) svg { background-image: none; }   /* Undo / Redo — круглые значки, слой на кнопке */
/* 4. «удалить»: корзины надбавок и панелей, удаление ската и препятствия */
.u2-icon-btn--danger:hover, .u2 .extra-row__del:hover, .u2 .dz-icon-btn.is-danger:hover, .u2 .dz-pn-bar button.is-danger:hover,
.u2 .dz-face-row__del:hover { background-color: var(--u-error-container); background-image: none; color: var(--u-error); }
/* 7. переключатель: ореол вокруг (как у ручки ползунка); наведение на всю строку с подписью — тоже */
.u2 input[type="checkbox"]:not(.switch > input):hover:not(:disabled), .u2 .check:hover input[type="checkbox"]:not(:disabled),
.u2 .dz-sb__check:hover input[type="checkbox"]:not(:disabled), .u2 .switch:hover .switch__track { box-shadow: 0 0 0 6px var(--u-hover); }
.u2 input[type="checkbox"]:not(.switch > input):checked:hover:not(:disabled), .u2 .check:hover input[type="checkbox"]:checked:not(:disabled),
.u2 .dz-sb__check:hover input[type="checkbox"]:checked:not(:disabled),
.u2 .switch:hover input:checked + .switch__track { box-shadow: 0 0 0 6px var(--u-hover-primary); }
/* ---------- Раскрывашка .u2-exp: строка-вопрос с уголком, ответ под ней (перенесено из styles2.css) ---------- */
.u2-exp { border-bottom: 1px solid var(--u-hairline); }
.u2-exp summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 4px; font: var(--u-t-label-l); }
.u2-exp summary::-webkit-details-marker { display: none; }
.u2-exp summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--u-muted); border-bottom: 2px solid var(--u-muted); transform: rotate(45deg); transition: transform var(--u-dur) var(--u-ease); margin-right: 8px; }
.u2-exp[open] summary::after { transform: rotate(-135deg); }
.u2-exp > div { padding: 0 4px 24px; }

/* раскрывашки и логотип: форма для слоя (без сдвига раскладки) */
.u2-exp summary { border-radius: var(--u-r-m); }
.u2 .dz-more > summary { margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: var(--u-r-s); }
a.u2-brand, .u2 .dz-brand { border-radius: var(--u-r-m); }
.u2 .dz-brand { margin: -4px; padding: 4px; }

/* ---------- Логотип (вариант B, выбрал Армен 02.10.2026): круг светлого фирменного, сетка панелей 2×2 в наклоне —
   верхний ряд залит (тёмный и главный), нижний пунктиром («дорисуй крышу»); надпись Cali-Graf тех же цветов.
   Разметка знака в страницах — с цветами по умолчанию в атрибутах (старый вид без кита); здесь — фирменные токены ---------- */
.u2-logo__bg { fill: var(--brand-tonal); }
.u2-logo__panel { fill: var(--brand-on-tonal); stroke: var(--brand-on-tonal); }
.u2-logo__panel--2 { fill: var(--brand-primary); stroke: var(--brand-primary); }
.u2-logo__dash { stroke: var(--brand-on-tonal); }
.u2-brand__name { font: 700 22px/28px var(--u-font); letter-spacing: -.3px; color: var(--brand-on-tonal); white-space: nowrap; }
.u2-brand__hy { color: var(--u-logo-sky); }
.u2-brand__graf { color: var(--brand-primary); }


/* =====================================================================
   ДВИЖЕНИЕ — коротко (100–400 мс, «награда» до 700), только прозрачность и сдвиг: не тормозит на слабых ноутбуках
   и ни одно движение не задерживает работу. Включено «Уменьшить движение» в системе — всё ниже выключено
   (декоративное — только внутри prefers-reduced-motion: no-preference). Скрипт motion.js — то, что нельзя стилями:
   волна от нажатия, набегание суммы, смена чисел, заглушки загрузки, каскад при входе в раздел.
   ===================================================================== */
@property --u-state { syntax: "<percentage>"; inherits: false; initial-value: 0%; }   /* плотность слоя наведения */

/* переход между страницами (кабинет, калькулятор, редактор, вход, кит): плавная смена вместо белой вспышки, знак на месте */
@view-transition { navigation: auto; }
.u2-brand__mark { view-transition-name: u2-logo; }

@keyframes u2-fade-in { from { opacity: 0; } }
@keyframes u2-fade-out { to { opacity: 0; } }
@keyframes u2-rise { from { opacity: 0; translate: 0 8px; } }
@keyframes u2-pop { from { opacity: 0; scale: .85; } }
@keyframes u2-grow-x { from { scale: 0 1; } }
@keyframes u2-num { from { opacity: .25; translate: 0 4px; } }
@keyframes u2-shimmer { from { translate: -100% 0; } to { translate: 100% 0; } }
@keyframes u2-ripple { from { scale: 0; opacity: 1; } to { scale: 1; opacity: 0; } }

/* заглушка загрузки: серый блок, по нему проходит светлая полоса (вместо пустоты и «Loading…»). Двигается только полоса
   (translate — силами видеокарты), сам блок каждый кадр не перерисовывается: на слабых машинах кадры не теряются.
   Тот же перелив — у фото оборудования, пока оно грузится, и у снимка дома, пока дом ищется */
.u2-skel { display: block; position: relative; overflow: hidden; border-radius: var(--u-r-s); color: transparent; background: var(--u-surface-high); }
.u2-skel::after, .u2-motion :is(.u2-eq__photo, .u2-info__photo):has(> img:not(.is-loaded))::after, .u2-house__thumb.is-loading::after {
  content: ""; position: absolute; inset: 0; translate: -100% 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--u-surface) 65%, transparent), transparent);
}
.u2-motion :is(.u2-eq__photo, .u2-info__photo):has(> img:not(.is-loaded)), .u2-house__thumb.is-loading { position: relative; overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: var(--u-dur-s) var(--u-ease-out) both u2-fade-out; }
  ::view-transition-new(root) { animation: var(--u-dur-m) var(--u-ease-in) both u2-fade-in; }
  ::view-transition-group(u2-logo) { animation-duration: var(--u-dur-m); animation-timing-function: var(--u-ease); }

  /* наведение: слой проявляется. «:root» впереди — чтобы этот список переходов был сильнее переходов экранов */
  :root :is(.u2-icon-btn, .gd-help, .gd-card__x, .u2-cal__nav, .u2 .dz-icon-btn, .u2 .dz-undo .dz-tool--icon,
  .u2-menu__item, .u2-dd__opt, .u2-searchbar .suggest__item, .u2-searchbar .combo__opt, .u2 .dz-hist__item, .cb__link,
  .u2-row, .u2 .dz-face-row, .u2 .dz-pp__row, .u2-cal__day, .u2-eq__info, .u2-chip, .u2 .dz-chip, .u2 .dz-ee__type,
  .u2-seg button, .u2-tabs .tab, .u2 .dz-seg button, .u2-view__btn, .u2 .dz-zoom__btn, .u2 .dz-pn-bar button, .u2-qty__btn,
  .u2-exp summary, .u2 .dz-more > summary, a.u2-brand, .u2 .dz-brand, .u2 .dz-tool svg) {
    transition: --u-state var(--u-dur-s) linear, background-color var(--u-dur) var(--u-ease), color var(--u-dur) var(--u-ease),
      box-shadow var(--u-dur) var(--u-ease), border-color var(--u-dur) var(--u-ease);
  }

  /* раздел калькулятора и страница модели появляются сразу, без проявления (Армен: «лишнее дёрганье») */

  /* всплывающие меню: раскрываются от кнопки, закрываются быстрее */
  .u2-menu, .u2-dd__menu, .u2-searchbar .suggest, .u2-searchbar .combo__list, .u2-cal {
    transform-origin: top center;
    transition: opacity var(--u-dur-s) var(--u-ease-in), scale var(--u-dur-s) var(--u-ease-in), translate var(--u-dur-s) var(--u-ease-in),
      display var(--u-dur-s) allow-discrete;
  }
  .u2-menu[hidden], .u2-dd__menu[hidden], .u2-searchbar .suggest[hidden],
  .u2-searchbar .combo__list[hidden] { opacity: 0; scale: .98; transition-duration: 100ms; transition-timing-function: var(--u-ease-out); }
  @starting-style {
    .u2-menu:not([hidden]), .u2-dd__menu:not([hidden]), .u2-searchbar .suggest:not([hidden]), .u2-searchbar .combo__list:not([hidden]),
    .u2-cal { opacity: 0; scale: .96; translate: 0 -4px; }
  }

  /* окна: всплывают, затемнение проявляется */
  .u2-dlg, .gd-dlg {
    transition: opacity var(--u-dur-m) var(--u-ease-in), translate var(--u-dur-m) var(--u-ease-in), scale var(--u-dur-m) var(--u-ease-in),
      overlay var(--u-dur-m) allow-discrete, display var(--u-dur-m) allow-discrete;
  }
  .u2-dlg:not([open]), .gd-dlg:not([open]) { opacity: 0; translate: 0 8px; scale: .98; transition-duration: var(--u-dur-s); }
  @starting-style { .u2-dlg[open], .gd-dlg[open] { opacity: 0; translate: 0 8px; scale: .98; } }
  .u2-dlg::backdrop, .gd-dlg::backdrop {
    transition: background-color var(--u-dur-m) var(--u-ease), overlay var(--u-dur-m) allow-discrete, display var(--u-dur-m) allow-discrete;
  }
  @starting-style { .u2-dlg[open]::backdrop, .gd-dlg[open]::backdrop { background-color: transparent; } }
  .u2 .dz-dialog { transition: opacity var(--u-dur-m) var(--u-ease-in), display var(--u-dur-m) allow-discrete; }
  .u2 .dz-dialog[hidden] { opacity: 0; transition-duration: var(--u-dur-s); }
  @starting-style { .u2 .dz-dialog:not([hidden]) { opacity: 0; } .u2 .dz-dialog:not([hidden]) .dz-dialog__card { translate: 0 8px; scale: .98; } }
  .u2 .dz-dialog__card { transition: translate var(--u-dur-m) var(--u-ease-in), scale var(--u-dur-m) var(--u-ease-in); }

  /* всплывающая строка: выезжает снизу, гаснет */
  .u2-snackbar, .u2 .toast, .gd-toast, .u2 .dz-flash {
    transition: opacity var(--u-dur-m) var(--u-ease-in), translate var(--u-dur-m) var(--u-ease-in), display var(--u-dur-m) allow-discrete;
  }
  .u2-snackbar[hidden], .u2 .toast[hidden], .gd-toast[hidden], .u2 .dz-flash[hidden] {
    opacity: 0; translate: 0 8px; transition-duration: var(--u-dur-s); transition-timing-function: var(--u-ease-out);
  }
  @starting-style {
    .u2-snackbar:not([hidden]), .u2 .toast:not([hidden]), .gd-toast:not([hidden]), .u2 .dz-flash:not([hidden]) { opacity: 0; translate: 0 16px; }
  }

  /* раскрывашки: плавно по высоте (браузеры без ::details-content — сразу, как раньше) */
  .u2-exp, .u2 .dz-more { interpolate-size: allow-keywords; }
  .u2-exp::details-content, .u2 .dz-more::details-content {
    block-size: 0; overflow-y: clip;
    transition: block-size var(--u-dur-m) var(--u-ease), content-visibility var(--u-dur-m) allow-discrete;   /* высота — перекладка каждый кадр: коротко */
  }
  .u2-exp[open]::details-content, .u2 .dz-more[open]::details-content { block-size: auto; }

  /* каскад: первые 8 элементов списка появляются по очереди (список расчётов; карточки — при входе в раздел, motion.js) */
  .u2-stagger > * { animation: u2-rise var(--u-dur-m) var(--u-ease-in) backwards; }
  .u2-stagger > :nth-child(2) { animation-delay: 30ms; }
  .u2-stagger > :nth-child(3) { animation-delay: 60ms; }
  .u2-stagger > :nth-child(4) { animation-delay: 90ms; }
  .u2-stagger > :nth-child(5) { animation-delay: 120ms; }
  .u2-stagger > :nth-child(6) { animation-delay: 150ms; }
  .u2-stagger > :nth-child(7) { animation-delay: 180ms; }
  .u2-stagger > :nth-child(8) { animation-delay: 210ms; }
  .u2-stagger > :nth-child(n+9) { animation: none; }

  .u2-skel::after, .u2-motion :is(.u2-eq__photo, .u2-info__photo):has(> img:not(.is-loaded))::after,
  .u2-house__thumb.is-loading::after { animation: u2-shimmer 1.4s linear infinite; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- движение, которое ведёт motion.js ---------- */
/* волна от нажатия: круг цвета текста 12% расходится от точки нажатия и гаснет */
.u2-ripple { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.u2-ripple__dot { position: absolute; border-radius: 50%; background: color-mix(in srgb, currentColor 12%, transparent);
  animation: u2-ripple 450ms var(--u-ease-out) forwards; }
@media (prefers-reduced-motion: no-preference) {
  /* смена числа (итог цены, сводка крыши, число батарей, «Solar covers»): проявляется с лёгким подъёмом */
  .u2-num-change { animation: u2-num var(--u-dur-m) var(--u-ease-in); }
  /* результат: полоски счетов вырастают слева, плашка «−N% bill» появляется, плитки цены — по очереди */
  .is-reveal .u2-bar-fill, .is-reveal .u2-meter span { transform-origin: left center; animation: u2-grow-x var(--u-dur-xl) var(--u-ease-in) backwards; }
  .is-reveal .u2-bar-row:nth-child(3) .u2-bar-fill { animation-delay: 80ms; }    /* 1-й ребёнок — подпись «Electric bill per year» */
  .is-reveal .u2-bar-row:nth-child(4) .u2-bar-fill { animation-delay: 160ms; }
  .is-reveal .u2-meter span { animation-delay: 120ms; }
  .is-reveal .u2-pill { animation: u2-pop var(--u-dur-m) var(--u-ease-in) 350ms backwards; }
  .is-reveal .u2-money__tiles > * { animation: u2-rise var(--u-dur-m) var(--u-ease-in) backwards; }
  .is-reveal .u2-money__tiles > :nth-child(2) { animation-delay: 60ms; }
  .is-reveal .u2-money__tiles > :nth-child(3) { animation-delay: 120ms; }
  /* фото оборудования: пока грузится — перелив, потом картинка проявляется (класс u2-motion ставит motion.js) */
  .u2-motion :is(.u2-eq__photo, .u2-info__photo) > img { opacity: 0; transition: opacity var(--u-dur-m) var(--u-ease); }
  .u2-motion :is(.u2-eq__photo, .u2-info__photo) > img.is-loaded { opacity: 1; }
  /* редактор: другой инструмент — панель справа проявляется */
  .u2 .dz-side.is-switch > * { animation: u2-fade-in var(--u-dur-m) var(--u-ease-in) backwards; }
  /* редактор: после Fill roof панели появляются волной (задержку каждой ставит design.js) */
  .u2 .dz-panel.is-new { transform-box: fill-box; transform-origin: center; animation: u2-pop 260ms var(--u-ease-in) backwards; }
}