/* Габариты ТТ ГРУПП — стили страницы. Все правила под .gab (стоит рядом с .rsk:
   токены цветов, кнопки, карточки, листы раскладки — из css/raskladka.css 000-17).
   Своё — форма шагов, карточка «12 × 36 × 5», блоки результата, подсказки «?».
   Тёмная тема — те же токены: .rsk[data-theme=dark] задаёт их в raskladka.css. */

/* Обёртка страницы в теме: шапка сайта fixed, как у раскладки и 3D. */
.gabariti-lp { padding-top: clamp(4.25rem, 1.887vw + 3.8rem, 5.5rem); }

.gab .wrap { max-width: 1080px; }

/* --- Шапка сайта: только логотип (v2, Тимур 14.10). Файл подключается только
   на этой странице (bootstrap.php), поэтому правила без привязки к body-классу —
   у <body> темы классов нет. Меню, поиск, кнопки и телефон — прячем. */
.header .header__container > :not(.header__logo):not(.header__button):not(.header__actions), .header-search { display: none !important; }
/* …кроме «Кабинет / Мой кабинет» (Тимур, 19.10.2026: вошёл — кабинет в шапке, и при прокрутке он
   наверху; шапка fixed). Из кнопок шапки остаётся только она: на ПК ссылка, на телефоне значок.
   Когда показывать какую — решают правила темы (_header.scss: .header__cabinet-link/.header__cabinet). */
.header .header__button > :not(.header__cabinet-link), .header .header__actions > :not(.header__cabinet) { display: none !important; }

/* Сцена hero шире колонки страницы (100vw) — без горизонтальной прокрутки.
   clip, а не hidden: hidden сделал бы body контейнером прокрутки и убил sticky. */
html, body { overflow-x: clip; }

/* Высота fixed-шапки сайта — от неё считаются top у карточек стопкой. На стенде шапки нет. */
.gab .gab-wrap { --gab-verh: 0px; }
.gabariti-lp .gab .gab-wrap { --gab-verh: clamp(4.25rem, 1.887vw + 3.8rem, 5.5rem); }

/* ===================== Экран 1: три карточки стопкой ===================== */
/* Фирменные цвета ТТ ГРУПП — из css/style.css темы (--green, --accent, --red и
   кнопка «Прайсы» .btn--prices): зелёный #98C03C с тёмным текстом #242424. */
.gab { --tt-green: #98C03C; --tt-green-hover: #7fa132; --tt-green-ink: #242424; --tt-blue: #2CB5EB; --tt-orange: #F55824; }

/* Все карточки одной высоты (--gab-h): тогда верхняя накрывает нижнюю целиком,
   и от нижней виден только кантик сверху (--gab-kant). На ПК стопка стоит по
   центру экрана по вертикали. */
.gab .gab-start { max-width: 820px; margin: 0 auto; position: relative;
  --gab-h: min(540px, calc(100svh - var(--gab-verh) - 60px)); --gab-kant: 7px;
  --gab-t: calc(var(--gab-verh) + (100svh - var(--gab-verh) - var(--gab-h)) / 2); }
.gab .gab-stopka { padding: max(40px, calc((100svh - var(--gab-verh) - var(--gab-h)) / 2 - 16px)) 0 6vh; }

/* Карточка прилипает, следующая наезжает сверху (sticky stacking cards). Без библиотек. */
.gab .gab-karta { position: sticky; top: var(--gab-t);
  display: flex; flex-direction: column; gap: 14px; box-sizing: border-box;
  height: var(--gab-h); margin: 0; padding: 26px 32px 28px; overflow: visible;
  border-radius: 22px; border: 1px solid rgba(255,255,255,.08); color: var(--ink);
  box-shadow: 0 -16px 40px rgba(0,0,0,.5); transition: filter .35s ease; }
/* Расстояние между карточками — margin-top следующей, а не margin-bottom
   предыдущей: нижний отступ входит в «коробку» sticky-карточки, и когда
   приезжает последняя, контейнер выталкивает предыдущие вверх на 30vh. */
.gab .gab-karta + .gab-karta { margin-top: 30vh; }
/* Свой оттенок у каждой карточки — фирменные синий, зелёный, оранжевый ТТ ГРУПП. */
.gab .gab-karta--1 { background:
  radial-gradient(110% 80% at 100% 0%, rgba(44,181,235,.30), transparent 62%),
  radial-gradient(90% 70% at 0% 100%, rgba(44,181,235,.10), transparent 60%), #1a2229; }
.gab .gab-karta--2 { top: calc(var(--gab-t) + var(--gab-kant)); background:
  radial-gradient(110% 80% at 50% 0%, rgba(152,192,60,.30), transparent 62%),
  radial-gradient(90% 70% at 100% 100%, rgba(152,192,60,.10), transparent 60%), #1d2320; }
.gab .gab-karta--3 { top: calc(var(--gab-t) + 2 * var(--gab-kant)); height: auto; min-height: var(--gab-h); background:
  radial-gradient(100% 70% at 0% 0%, rgba(245,88,36,.22), transparent 60%),
  radial-gradient(100% 80% at 100% 100%, rgba(152,192,60,.20), transparent 60%), #211f1d; }
.gab .gab-karta.nakryta { filter: brightness(.7); }
/* Кантик накрытой карточки переливается зелёным: видно, что под верхней есть ещё. */
.gab .gab-karta.nakryta::before { content: ''; position: absolute; z-index: 2; left: 18px; right: 18px; top: 1px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, transparent 0%, var(--tt-green) 25%, #d6ef8f 50%, var(--tt-green) 75%, transparent 100%);
  background-size: 200% 100%; animation: gab-perelivy 2.2s linear infinite; filter: brightness(1.45); }
@keyframes gab-perelivy { from { background-position: 200% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .gab .gab-karta.nakryta::before { animation: none; } }

.gab .gab-karta__verh { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
/* Счётчик шагов: три ступеньки-полоски и «Шаг N из 3». */
.gab .gab-shagi { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px 5px 10px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
.gab .gab-shagi i { width: 18px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.16); }
.gab .gab-shagi i.on { background: var(--tt-green); box-shadow: 0 0 8px rgba(152,192,60,.55); }
.gab .gab-shagi b { white-space: nowrap; margin-left: 6px; font-size: 12px; font-weight: 600; letter-spacing: .03em; color: var(--tusklo); }
.gab .gab-karta h1, .gab .gab-karta h2 { margin: 0; font-size: clamp(26px, 4.2vw, 40px); line-height: 1.12; font-weight: 700; }
.gab .gab-karta h1 .hint, .gab .gab-karta h2 .hint { vertical-align: middle; }
.gab .gab-karta__pod { margin: -4px 0 0; font-size: 16px; color: var(--tusklo); }
.gab .gab-tel { display: none; }
@media (hover: none) { .gab .gab-tel { display: inline; } .gab .gab-pk { display: none; } }
.gab .gab-karta__melko { margin: 0; font-size: 13px; color: var(--dim); }
.gab .nowrap { white-space: nowrap; }
.gab .gab-tur-knopka { white-space: nowrap; font: inherit; font-size: 13px; color: var(--tusklo); background: none; border: 1px solid var(--liniya); border-radius: 999px; padding: 5px 12px; cursor: pointer; }

/* Зелёные фирменные кнопки: «Дальше» и «Показать расчёт». */
.gab .gab-dalshe, .gab .gab-karta .gab-pokazat { font: inherit; font-weight: 700; color: var(--tt-green-ink); background: var(--tt-green);
  border: 0; border-radius: 14px; cursor: pointer; box-shadow: 0 6px 18px rgba(152,192,60,.28); transition: background .2s, transform .1s; }
.gab .gab-dalshe { align-self: center; margin-top: auto; min-height: 52px; min-width: 240px; padding: 12px 28px; font-size: 17px; }
/* Низ карточки 1: «Дальше» по центру. «без регистрации и телефона» с 4-го раунда —
   под надписью hero, не в углу карточки. */
.gab .gab-karta__niz { margin-top: auto; display: flex; justify-content: center; }
.gab .gab-karta__niz .gab-dalshe { margin-top: 0; }
/* Наведение — только там, где есть мышь: на телефоне :hover «залипает» после тапа. */
@media (hover: hover) { .gab .gab-dalshe:hover, .gab .gab-karta .gab-pokazat:hover { background: var(--tt-green-hover); } }
.gab .gab-dalshe:active, .gab .gab-karta .gab-pokazat:active { transform: translateY(1px); }
.gab .gab-dalshe:focus-visible, .gab .gab-karta .gab-pokazat:focus-visible { outline: 3px solid rgba(152,192,60,.5); outline-offset: 2px; }

/* Габариты: три крупных поля. Число правится двойным тапом (readonly до него). */
.gab .gab-razmery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 6px; }
.gab .gab-razmer { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 14px; background: rgba(0,0,0,.28); border: 1px solid var(--liniya); transition: border-color .2s, box-shadow .2s; }
.gab .gab-razmer.vvod { border-color: var(--tt-green); box-shadow: 0 0 0 3px rgba(152,192,60,.2); }
.gab .gab-razmer__t { font-size: 15px; color: var(--tusklo); }
.gab .gab-razmer__ryad { display: flex; align-items: baseline; gap: 6px; }
.gab .gab-razmer input[type="number"] { width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--ink);
  font-size: clamp(36px, 5vw, 48px); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; -moz-appearance: textfield;
  touch-action: manipulation; }
.gab .gab-razmer input[readonly] { cursor: pointer; user-select: none; -webkit-user-select: none; caret-color: transparent; }
.gab .gab-razmer.vvod input[type="number"] { color: var(--tt-green); }
.gab .gab-razmer input[type="number"]::-webkit-inner-spin-button, .gab .gab-razmer input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.gab .gab-razmer input[type="number"]:focus { outline: none; }
.gab .gab-razmer__m { font-size: 20px; color: var(--tusklo); }
.gab .gab-razmer input[type="range"] { width: 100%; accent-color: var(--tt-green); height: 28px; margin: 0; padding: 0; border: 0; background: transparent; }
.gab .gab-itog-razmer { margin: 0; font-size: 17px; color: var(--tusklo); }
.gab .gab-itog-razmer b { color: var(--ink); font-size: 20px; margin-right: 8px; font-variant-numeric: tabular-nums; }

/* Город: текст и поле по центру, живой поиск, любой город принимается */
.gab .gab-karta--2 { text-align: center; align-items: center; }
.gab .gab-karta--2 .gab-karta__verh { align-self: stretch; justify-content: flex-start; }   /* счётчик — в левый верхний угол, как у 1 и 3 */
.gab .gab-gorod { position: relative; margin-top: 6px; width: 100%; max-width: 560px; }
.gab .gab-gorod__pole { width: 100%; min-height: 64px; padding: 10px 18px; border-radius: 14px; font-size: clamp(22px, 3vw, 28px); font-weight: 600; text-align: center;
  background: rgba(0,0,0,.28); }
.gab .gab-gorod__pole:focus { outline: none; border-color: var(--tt-green); box-shadow: 0 0 0 3px rgba(152,192,60,.2); }
.gab .gab-gorod__pole.oshibka { border-color: var(--bad); }
.gab .gab-gorod__spisok { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; text-align: left;
  max-height: min(300px, 40svh); overflow-y: auto; border-radius: 14px; border: 1px solid var(--liniya); background: var(--card); box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.gab .gab-gorod__spisok li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; cursor: pointer; font-size: 17px; }
.gab .gab-gorod__spisok li b { color: var(--tt-green); font-weight: 700; }
.gab .gab-gorod__spisok li small { font-size: 13px; color: var(--tusklo); }
.gab .gab-gorod__spisok li:hover, .gab .gab-gorod__spisok li.aktiv { background: rgba(152,192,60,.14); }
.gab .gab-gorod__spisok li.net { cursor: default; color: var(--tusklo); font-size: 14px; }
.gab .gab-gorod__region { margin: 0; font-size: 15px; color: var(--tusklo); min-height: 1.4em; }
.gab .gab-gorod__region.oshibka { color: var(--bad); }
.gab .gab-karta--2 .gab-karta__melko { max-width: 600px; }

/* Что получите: плашки, крупные цифры, пункты с галочками (текст Тимура). */
.gab .gab-chto__vnimanie { margin: 0; padding: 10px 14px 10px 40px; position: relative; border-radius: 12px; font-size: 15px; line-height: 1.45;
  background: rgba(44,181,235,.12); border: 1px solid rgba(44,181,235,.28); color: #bfe9fa; }
.gab .gab-chto__vnimanie::before { content: 'i'; position: absolute; left: 13px; top: 11px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font: 700 12px/1 Georgia, serif; font-style: italic; background: var(--tt-blue); color: #0f1216; }
.gab .gab-chto__cifry { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gab .gab-chto__cifra { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(152,192,60,.16), rgba(152,192,60,.04)); border: 1px solid rgba(152,192,60,.3); }
.gab .gab-chto__cifra b { flex: none; font-size: clamp(30px, 4vw, 40px); line-height: 1; font-weight: 800; color: var(--tt-green); font-variant-numeric: tabular-nums; }
.gab .gab-chto__cifra span { font-size: 13px; line-height: 1.35; color: var(--ink); }
.gab .gab-chto__spisok { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.gab .gab-chto__spisok li { position: relative; padding-left: 28px; font-size: 14px; line-height: 1.4; color: var(--tusklo); }
.gab .gab-chto__spisok li b { color: var(--ink); font-weight: 600; }
.gab .gab-chto__spisok li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 6px;
  display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--tt-green); color: var(--tt-green-ink); }
.gab .gab-karta .gab-pokazat { margin-top: auto; width: 100%; min-height: 60px; font-size: 20px; }
.gab .gab-karta .gab-status { margin: 0; min-height: 1.3em; text-align: center; }
.gab .gab-karta .gab-status:empty { display: none; }

@media (max-width: 640px) {
  .gab .gab-start { --gab-h: calc(100svh - var(--gab-verh) - 92px); --gab-kant: 6px; --gab-t: calc(var(--gab-verh) + 10px); }
  .gab .gab-stopka { padding-top: 0; }
  .gab .gab-karta { padding: 16px 16px 18px; border-radius: 18px; gap: 10px; }
  .gab .gab-karta + .gab-karta { margin-top: 22vh; }
  .gab .gab-karta--3 { gap: 8px; }
  .gab .gab-karta--3 h2 { font-size: 24px; }
  .gab .gab-karta__pod { font-size: 14px; margin-top: -6px; }
  .gab .gab-razmery { grid-template-columns: 1fr; gap: 8px; margin-top: 0; }
  .gab .gab-razmer { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 12px; padding: 6px 14px 4px; border-radius: 12px; }
  .gab .gab-razmer__t { grid-column: 1; }
  .gab .gab-razmer__ryad { grid-column: 2; justify-content: flex-end; }
  .gab .gab-razmer input[type="number"] { font-size: 30px; text-align: right; width: 5ch; }
  .gab .gab-razmer__m { font-size: 17px; }
  .gab .gab-razmer input[type="range"] { grid-column: 1 / -1; height: 22px; }
  .gab .gab-itog-razmer { font-size: 15px; }
  .gab .gab-itog-razmer b { font-size: 18px; }
  .gab .gab-dalshe { align-self: stretch; min-width: 0; min-height: 50px; }
  .gab .gab-karta__niz .gab-dalshe { flex: 1 1 auto; min-width: 0; }
  /* Замечания 7: без пустоты между «10 × 25 × 4 м» и «Дальше: город» —
     высота карточки 1 по содержимому. Карточка 2 выше неё и всё равно
     накрывает её целиком. */
  .gab .gab-karta--1 { height: auto; }
  .gab .gab-karta--1 .gab-karta__niz { margin-top: 4px; }
  /* «Во всю ширину» (замечания 7): стопка — по ширине окна с полями 16 px,
     вровень с сеткой фактов; иначе её сужали отступы контейнера темы и обёртки. */
  .gab .gab-stopka { margin-left: calc((100% - (100vw - 32px)) / 2); margin-right: calc((100% - (100vw - 32px)) / 2); }
  /* Кнопка обучалки — значком: иначе «Шаг 1 из 3 · Габариты ТТ» не влезает. */
  .gab .gab-tur-knopka__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .gab .gab-tur-knopka { padding: 4px 10px; }
  .gab .gab-gorod__pole { min-height: 56px; font-size: 22px; }
  .gab .gab-chto__vnimanie { font-size: 12.5px; line-height: 1.35; padding: 7px 10px 7px 34px; }
  .gab .gab-chto__vnimanie::before { left: 10px; top: 9px; }
  .gab .gab-tur-knopka { font-size: 12px; padding: 4px 10px; }
  .gab .gab-shagi { padding: 4px 10px 4px 8px; }
  .gab .gab-shagi i { width: 14px; }
  .gab .gab-chto__cifry { grid-template-columns: 1fr; gap: 6px; }
  .gab .gab-chto__cifra { gap: 12px; padding: 5px 12px; }
  .gab .gab-chto__cifra b { font-size: 26px; min-width: 74px; }
  .gab .gab-chto__cifra span { font-size: 12px; }
  .gab .gab-chto__spisok { grid-template-columns: 1fr; gap: 3px; }
  .gab .gab-chto__spisok li { font-size: 13px; line-height: 1.3; padding-left: 26px; }
  .gab .gab-chto__spisok li::before { width: 18px; height: 18px; font-size: 11px; }
  .gab .gab-karta .gab-pokazat { min-height: 54px; font-size: 18px; }
}

/* ===================== Hero над карточками (замечания 3) =====================
   Образец — главная редизайна (стенд 8091, тема ttgroup-v2: hero.php, _hero.scss,
   ttg-hero-scene.js); скилл hero-ekran-ttg. Доска 1440×600, координаты образца
   через --u (на 1440 px — пиксель в пиксель, уже — масштаб одним числом).
   Статичная раскладка — по умолчанию (телефон, «меньше движения», до скрипта):
   надпись над карточкой 1, факты сеткой 2×2 под стопкой, как у образца на
   телефоне. Сцена — только под .is-scena (её ставит app.js на ПК). */
.gab .gab-start { display: flex; flex-direction: column; }
.gab .gab-stopka { order: 1; }
.gab .gab-hero, .gab .gab-hero__doska { display: contents; }
.gab .gab-hero__fon { position: absolute; z-index: 0; left: 0; right: 0; top: 0; height: 560px; border-radius: 22px; pointer-events: none;
  background-size: cover; background-position: center 30%; opacity: .55;
  -webkit-mask-image: linear-gradient(#000 30%, transparent); mask-image: linear-gradient(#000 30%, transparent); }
.gab .gab-stopka, .gab .gab-hero__nadpis, .gab .gab-hero__fakty { position: relative; z-index: 1; }
.gab .gab-hero__nadpis { order: 0; margin: 14px 0 16px; text-align: center; }
.gab .gab-hero__nadpis p { margin: 0; }
/* Имя сервиса — первая ступень «Габаритов ТТ» (замечания 4). */
.gab .gab-hero__servis { font-size: 14px; color: var(--tusklo); letter-spacing: .01em; }
.gab .gab-hero__servis b { color: var(--ink); font-weight: 700; }
.gab .gab-hero__oblozhka { margin: 10px 0 9px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
/* «ТТ ГРУПП» — цветами логотипа (переменные темы: --accent #2CB5EB, --green #98C03C). */
.gab .gab-hero__tt, .gab .gab-hero__grupp { display: inline-block; font-size: 28px; }
.gab .gab-hero__tt { color: var(--tt-blue); margin-right: .22em; }
.gab .gab-hero__grupp { color: var(--tt-green); }
.gab .gab-hero__akcent { display: inline-block; margin-left: 6px; padding: 5px 12px; background: var(--tt-blue); color: #fff; font-size: 21px; vertical-align: 3px; }
.gab .gab-hero__bez { font-size: 15px; color: var(--tusklo); }
.gab .gab-hero__bez::before { content: '✓ '; color: var(--tt-green); font-weight: 700; }
.gab .gab-shagi__servis { color: var(--dim); font-weight: 500; }
.gab .gab-hero__fakty { order: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; margin: 34px 0 10px; }
/* Карточка-факт: заголовок → линия с острыми концами → подзаголовок (две строки
   всегда) → фото одной высоты в зелёной рамке. Всё по центру. Ссылок нет. */
.gab .gab-fakt { text-align: center; color: #fff; pointer-events: none; }
.gab .gab-fakt__t { display: flex; align-items: flex-end; justify-content: center; min-height: 2.2em; font-size: 17px; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; }
.gab .gab-fakt__liniya { display: block; height: 3px; margin: 8px 0 9px; background: var(--tt-blue);
  clip-path: polygon(0 50%, 18px 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 18px 100%); }
.gab .gab-fakt__d { display: block; min-height: 4.05em; margin-bottom: 10px; font-size: 12.5px; line-height: 1.35; color: rgba(255,255,255,.72); }
.gab .gab-fakt__foto { position: relative; display: block; border: 2px solid var(--tt-green); border-radius: 6px; overflow: hidden;
  box-shadow: 2px 2px 4px rgba(0,0,0,.5), 8px 16px 30px rgba(0,0,0,.42); }
.gab .gab-fakt__foto img { display: block; width: 100%; height: 92px; object-fit: cover; }
.gab .gab-fakt__strelka { position: absolute; right: 7px; bottom: 7px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--tt-green); color: #1A2308; box-shadow: 0 6px 14px rgba(0,0,0,.5); }

/* ---- Сцена (ПК) ---- */
.gab .gab-start.is-scena {
  /* flow-root: иначе отрицательный margin-top слоя схлопывается с формой и
     поднимает её саму — на следующем замере --gab-t0 выходил 0. */
  display: flow-root;
  /* Привязка прокрутки: браузер «держал» карточку на месте и сам прокручивал
     страницу на --gab-t0, когда слой поднимался. Здесь она только мешает. */
  overflow-anchor: none;
  --u: min(1px, calc((100vw - 40px) / 1440));
  /* --hp — прогресс 0…1 (app.js). Фазы, как у образца: 0–0,2 всё стоит и
     читается; факты разъезжаются 0,05–0,55; карточка растёт 0,2–0,8;
     подложка гаснет последней, 0,55–0,9. */
  --hp: 0;
  --razlet: clamp(0, calc((var(--hp) - 0.05) / 0.5), 1);
  --rost: clamp(0, calc((var(--hp) - 0.2) / 0.6), 1);
}
.gab .is-scena .gab-hero { display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  /* Слой занимает окно целиком с первого кадра: поднят на отступ формы от
     верха страницы (--gab-t0, меряет app.js), в потоке — ноль высоты. */
  position: sticky; top: 0; z-index: 0; height: 100vh;
  margin-top: calc(-1 * var(--gab-t0, 0px)); margin-bottom: calc(var(--gab-t0, 0px) - 100vh);
  width: 100vw; margin-left: calc(50% - 50vw); padding-top: var(--gab-verh); pointer-events: none; }
.gab .is-scena .gab-hero__doska { display: block; position: relative; flex: none; width: calc(1440 * var(--u)); height: calc(600 * var(--u)); }
.gab .is-scena .gab-hero__fon { top: calc(19 * var(--u)); left: calc(120 * var(--u)); right: auto; width: calc(1200 * var(--u)); height: calc(561 * var(--u));
  border-radius: calc(24 * var(--u)); background-color: #1D2124; -webkit-mask-image: none; mask-image: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
  overflow: hidden; opacity: clamp(0, calc((0.9 - var(--hp)) / 0.35), 1); }
.gab .is-scena .gab-hero__fon::after { content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 52% 46% at 50% 34%, rgba(44,181,235,.10), transparent 70%),
    radial-gradient(ellipse 85% 80% at 50% 45%, transparent 40%, rgba(16,18,20,.88) 100%),
    linear-gradient(180deg, rgba(16,18,20,.25) 0%, transparent 30%, rgba(16,18,20,.55) 100%); }
/* Надпись — над центральной колонкой (410…1030), в стиле обложки образца. */
.gab .is-scena .gab-hero__nadpis { position: absolute; margin: 0; top: calc(34 * var(--u)); left: calc(410 * var(--u)); width: calc(620 * var(--u));
  opacity: clamp(0, calc((0.22 - var(--hp)) / 0.16), 1); transform: translateY(calc(var(--hp) * -60 * var(--u))); }
.gab .is-scena .gab-hero__servis { font-size: calc(14 * var(--u)); }
.gab .is-scena .gab-hero__oblozhka { margin: calc(9 * var(--u)) 0 calc(8 * var(--u)); }
.gab .is-scena .gab-hero__tt, .gab .is-scena .gab-hero__grupp { font-size: calc(36 * var(--u)); }
.gab .is-scena .gab-hero__akcent { margin-left: calc(8 * var(--u)); padding: calc(6 * var(--u)) calc(14 * var(--u)); font-size: calc(27 * var(--u)); vertical-align: calc(4 * var(--u)); }
.gab .is-scena .gab-hero__bez { font-size: calc(15 * var(--u)); }
.gab .is-scena .gab-hero__fakty { display: contents; }
.gab .is-scena .gab-fakt { position: absolute; z-index: 2; width: calc(250 * var(--u));
  opacity: clamp(0, calc((0.55 - var(--hp)) / 0.4), 1);
  transform: translateX(calc(var(--napr) * var(--razlet) * 320 * var(--u))) rotate(calc(var(--napr) * var(--razlet) * 6deg));
  animation: gab-fakt-vhod .9s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: var(--zad); }
/* Координаты карточек — образца: 69 / 313 сверху, 140 / 1050 слева. */
.gab .is-scena .gab-fakt--1 { top: calc(69 * var(--u)); left: calc(140 * var(--u)); --napr: -1; --zad: .12s; --vh-x: -40px; }
.gab .is-scena .gab-fakt--2 { top: calc(313 * var(--u)); left: calc(140 * var(--u)); --napr: -1; --zad: .30s; --vh-x: -40px; }
.gab .is-scena .gab-fakt--3 { top: calc(69 * var(--u)); left: calc(1050 * var(--u)); --napr: 1; --zad: .20s; --vh-x: 40px; }
.gab .is-scena .gab-fakt--4 { top: calc(313 * var(--u)); left: calc(1050 * var(--u)); --napr: 1; --zad: .40s; --vh-x: 40px; }
/* Вход лесенкой — своим свойством translate: transform занят прокруткой. */
@keyframes gab-fakt-vhod { from { opacity: 0; translate: var(--vh-x) 0; } }
.gab .is-scena .gab-fakt__t { display: block; min-height: 0; font-size: calc(21 * var(--u)); white-space: nowrap; }
.gab .is-scena .gab-fakt__liniya { height: calc(3 * var(--u)); margin: calc(9 * var(--u)) 0 calc(10 * var(--u)); }
.gab .is-scena .gab-fakt__d { min-height: calc(36 * var(--u)); margin-bottom: calc(12 * var(--u)); font-size: calc(13.5 * var(--u)); }
.gab .is-scena .gab-fakt__foto { border-width: calc(2 * var(--u)); }
.gab .is-scena .gab-fakt__foto img { height: calc(122 * var(--u)); }
.gab .is-scena .gab-fakt__strelka { width: calc(32 * var(--u)); height: calc(32 * var(--u)); right: calc(9 * var(--u)); bottom: calc(9 * var(--u)); }
/* Карточка 1 — центр сцены: на старте вписана в центральную колонку доски
   (масштаб --gab-s0 и сдвиг --gab-dx0/--gab-dy0 считает app.js), к концу
   фазы — обычная карточка стопки. Живая: ползунки работают и уменьшенными. */
.gab .is-scena .gab-karta--1 { z-index: 1; transform-origin: 50% 50%; will-change: transform;
  transform: translate(calc(var(--gab-dx0, 0px) * (1 - var(--rost))), calc(var(--gab-dy0, 0px) * (1 - var(--rost))))
    scale(calc(var(--gab-s0, 1) + (1 - var(--gab-s0, 1)) * var(--rost))); }
.gab .is-scena .gab-karta--2, .gab .is-scena .gab-karta--3 { z-index: 2; }
/* Сцене нужен свой путь прокрутки до прихода карточки 2: 110vh. */
.gab .is-scena .gab-karta--2 { margin-top: calc(30vh + 110vh); }
@media (prefers-reduced-motion: reduce) { .gab .is-scena .gab-fakt { animation: none; } }
/* Подсказка «?» у имени сервиса живая, хотя слой сцены клики не ловит.
   Контейнер стопки в сцене лежит прозрачным слоем поверх hero и перехватывал
   наведение и щелчок по этой «?» (замечания 6: «верхняя подсказка прячется») —
   он кликов не ловит, ловят только сами карточки. */
.gab .gab-hero__nadpis .hint { pointer-events: auto; }
.gab .is-scena .gab-stopka { pointer-events: none; }
.gab .is-scena .gab-karta { pointer-events: auto; }

/* Телефон — после базовых правил hero, иначе они перебивают каскадом.
   Статичная колонка (только при «меньше движения»): надпись, стопка, факты под ней. */
@media (max-width: 640px) {
  .gab .gab-hero__nadpis { margin: 4px 0 12px; }
  .gab .gab-hero__servis { font-size: 12px; }
  .gab .gab-hero__oblozhka { margin: 7px 0; white-space: nowrap; }
  .gab .gab-hero__tt, .gab .gab-hero__grupp { font-size: 22px; }
  .gab .gab-hero__akcent { font-size: 16px; padding: 4px 9px; vertical-align: 2px; }
  .gab .gab-hero__bez { font-size: 13px; }
}

/* ---- Сцена на телефоне (замечания 5 и 7) ----
   С 7-го раунда порядок: надпись → четыре факта сеткой 2×2 целиком (заголовок,
   линия, подзаголовок, фото без обрезки) → карточка шага 1 во всю ширину под
   ними. При прокрутке факты разъезжаются (левая пара влево, правая вправо) и
   гаснут, карточка поднимается на своё место — первой в стопке. Ниже —
   описание раунда 5, координаты фактов переписаны. ----
   Своя доска 375×600 единиц: надпись сверху, над карточкой шага 1 два факта,
   под ней ещё два (заголовок, линия, фото — подзаголовок в сцене не влезает),
   карточка вписана между рядами (считает app.js). При прокрутке те же фазы:
   факты разъезжаются в стороны и гаснут, карточка растёт до обычной. */
@media (max-width: 640px) {
  .gab .gab-start.is-scena { --u: min(calc(100vw / 375), calc((100svh - var(--gab-verh)) / 600)); }
  /* Высота доски — всё окно под шапкой: на высоких телефонах (360×780) не
     остаётся пустых полос; нижний ряд фактов прижат к низу. */
  .gab .is-scena .gab-hero__doska { width: calc(375 * var(--u)); height: calc(100svh - var(--gab-verh)); }
  .gab .is-scena .gab-hero__fon { top: calc(6 * var(--u)); left: calc(8 * var(--u)); width: calc(359 * var(--u)); height: auto; bottom: calc(6 * var(--u)); border-radius: calc(18 * var(--u)); }
  .gab .is-scena .gab-hero__nadpis { top: calc(16 * var(--u)); left: calc(12 * var(--u)); width: calc(351 * var(--u)); }
  .gab .is-scena .gab-hero__servis { font-size: calc(11 * var(--u)); white-space: nowrap; }
  .gab .is-scena .gab-hero__oblozhka { margin: calc(7 * var(--u)) 0 calc(6 * var(--u)); }
  .gab .is-scena .gab-hero__tt, .gab .is-scena .gab-hero__grupp { font-size: calc(23 * var(--u)); }
  .gab .is-scena .gab-hero__akcent { margin-left: calc(6 * var(--u)); padding: calc(4 * var(--u)) calc(9 * var(--u)); font-size: calc(17 * var(--u)); vertical-align: calc(3 * var(--u)); }
  .gab .is-scena .gab-hero__bez { font-size: calc(12 * var(--u)); }
  .gab .is-scena .gab-fakt { width: calc(165 * var(--u)); }
  /* 2×2: левая колонка — 1 и 2 (уезжают влево), правая — 3 и 4 (вправо). */
  .gab .is-scena .gab-fakt--1 { top: calc(98 * var(--u)); left: calc(18 * var(--u)); }
  .gab .is-scena .gab-fakt--3 { top: calc(98 * var(--u)); left: calc(192 * var(--u)); }
  .gab .is-scena .gab-fakt--2 { top: calc(294 * var(--u)); left: calc(18 * var(--u)); }
  .gab .is-scena .gab-fakt--4 { top: calc(294 * var(--u)); left: calc(192 * var(--u)); }
  /* Inter Tight жирный на дробном кегле ~13 px «съедает» пробел: «Наболтах». */
  .gab .is-scena .gab-fakt__t { font-size: calc(13 * var(--u)); word-spacing: .14em; letter-spacing: 0; }
  .gab .is-scena .gab-fakt__liniya { height: calc(2 * var(--u)); margin: calc(5 * var(--u)) 0 calc(6 * var(--u)); }
  /* Подзаголовок — как на ПК, всегда три строки высотой: фото в ряду на одной линии. */
  .gab .is-scena .gab-fakt__d { display: block; min-height: calc(3 * 1.3 * 11.5 * var(--u)); margin-bottom: calc(7 * var(--u)); font-size: calc(11.5 * var(--u)); line-height: 1.3; }
  /* Фото целиком: рамка одной пропорции (как у трёх из четырёх кадров, 16:10),
     кадр «Полный цикл» (960×488) вписан без обрезки — поля тёмные, как его фон. */
  .gab .is-scena .gab-fakt__foto { background: #0d0f11; }
  .gab .is-scena .gab-fakt__foto img { height: auto; aspect-ratio: 16 / 10; object-fit: contain; }
  .gab .is-scena .gab-fakt__strelka { width: calc(22 * var(--u)); height: calc(22 * var(--u)); right: calc(6 * var(--u)); bottom: calc(6 * var(--u)); }
  .gab .is-scena .gab-fakt__strelka svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
  .gab .is-scena .gab-karta--2 { margin-top: calc(22vh + 110vh); }
}

/* ===================== Подвал сайта — короткий, только на этой странице =====================
   Замечания 5: оставить строку о компании, политику и пользовательское соглашение
   (и строку © с ИНН/ОГРН — реквизиты официального сайта). Файл css/gabariti.css
   подключается только на этой странице (bootstrap.php), поэтому правила не задевают
   остальной сайт; footer.php темы не тронут. Через body_class сделать нельзя: у
   <body> темы класс жёстко пустой. :has — по содержимому колонок, а не по их
   номеру: порядок колонок в footer.php может поменяться. */
.footer .footer__logo,
.footer .footer__col:has(.footer__menu),
.footer .footer__col:has(.footer__list),
.footer .footer__col:has(.footer__logo),
.footer .footer__bottom-links { display: none !important; }
.footer .footer__row { display: flex; flex-direction: column; gap: 12px; }
.footer .footer__col:has(.footer__text), .footer .footer__col:has(.footer__submenu) { width: auto; max-width: 760px; flex: none; margin: 0; }

/* ===================== Экран 2: расчёт ===================== */
.gab .gab-rezultat:not(.est) > :not(#gab-svodka) { display: none; }
.gab .gab-rezultat.ustarelo .gab-bloki, .gab .gab-rezultat.ustarelo #gab-bloki, .gab .gab-rezultat.ustarelo .gab-varianty { opacity: .55; }
.gab .kratko { color: var(--tusklo); font-size: 13px; font-weight: 400; margin-left: 8px; }

/* Править данные */
.gab .gab-pravka > summary { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; cursor: pointer; list-style: none; }
.gab .gab-pravka > summary::-webkit-details-marker { display: none; }
.gab .gab-pravka > summary h2 { margin: 0; font-size: 18px; }
.gab .gab-pravka > summary h2::before { content: '✎ '; color: var(--brand-blue-text); }
.gab .gab-pravka[open] > summary { margin-bottom: 14px; }
.gab .gab-polya { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 18px; }
.gab .gab-pole { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gab .gab-pole__t { font-size: 13px; color: var(--tusklo); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.gab .gab-pole__ryad { display: flex; align-items: center; gap: 10px; }
.gab .gab-pole input[type="number"], .gab .gab-pole input[type="text"], .gab .gab-pole select { min-height: 42px; padding: 6px 10px; border-radius: 6px; }
.gab .gab-pole__pod { font-size: 12px; color: var(--dim); }
.gab .gab-radio { display: flex; flex-wrap: wrap; gap: 6px 14px; min-height: 42px; align-items: center; }
.gab .gab-radio label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.gab .gab-radio input { accent-color: var(--akcent); width: 16px; height: 16px; }
.gab .gab-radio label.nelzya { opacity: .5; }
.gab .gab-pole--vorota .gab-pole__ryad input[type="number"] { width: 72px; }
.gab .gab-pole--vorota select { flex: 1 1 auto; min-width: 0; }
.gab .gab-mesta input { width: 100%; min-width: 0; }
.gab .gab-mesta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gab .gab-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; align-self: flex-start;
  border: 1px solid var(--liniya); background: var(--pole); cursor: pointer; font-size: 14px; min-height: 42px; user-select: none; }
.gab .gab-chip input { accent-color: var(--akcent); width: 16px; height: 16px; margin: 0; }
.gab .gab-pro { margin-top: 14px; padding: 10px 12px; border: 1px solid var(--liniya); border-radius: 8px; }
.gab .gab-pro[open] { padding-bottom: 16px; }
.gab .gab-pro > summary h3 { font-size: 15px; }
.gab .gab-polya--pro { margin-top: 12px; }
.gab .gab-pole--mk.skryto { display: none; }
.gab .gab-deistviya { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.gab .gab-deistviya .btn.big { background: var(--akcent); color: var(--akcent-ink); min-width: 220px; }
.gab .gab-status { font-size: 14px; color: var(--tusklo); }
.gab .gab-status.schitaem::before { content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px;
  border: 2px solid var(--brand-blue); border-right-color: transparent; border-radius: 50%; animation: gab-krug .8s linear infinite; }
@keyframes gab-krug { to { transform: rotate(360deg); } }
@media (max-width: 640px) {
  .gab .gab-deistviya .btn.big { flex: 1 1 auto; min-width: 0; }
  .gab .gab-mesta { grid-template-columns: 1fr; }
}

/* v3: группы «Править данные» */
.gab .gab-gruppa { margin: 0 0 14px; padding: 12px 14px 14px; border: 1px solid var(--liniya); border-radius: 10px; }
.gab .gab-gruppa h3 { margin: 0 0 10px; font-size: 15px; display: flex; align-items: center; }
.gab .gab-gruppa__pod { margin: 8px 0 0; font-size: 12px; color: var(--dim); }
.gab .gab-gruppa__telo--gabarity { display: grid; grid-template-columns: minmax(0, 3fr) minmax(220px, 2fr); gap: 14px 18px; align-items: start; }
.gab .gab-mesto--gorod { display: flex; flex-direction: column; gap: 6px; }
/* Узлы шага 1/2 в правке: поля габаритов мельче, город — обычное поле со списком. */
.gab .gab-pravka .gab-razmery { grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; }
.gab .gab-pravka .gab-razmer { padding: 8px 12px; gap: 4px; }
.gab .gab-pravka .gab-razmer input[type="number"] { font-size: 26px; }
.gab .gab-pravka .gab-razmer__m { font-size: 15px; }
.gab .gab-pravka .gab-razmer input[type="range"] { height: 22px; }
.gab .gab-pravka .gab-gorod { margin: 0; max-width: none; }
.gab .gab-pravka .gab-gorod__pole { min-height: 42px; padding: 6px 12px; font-size: 16px; font-weight: 500; text-align: left; border-radius: 6px; }
.gab .gab-pravka .gab-gorod__region { font-size: 13px; min-height: 1.2em; }
.gab .gab-pole--shir { grid-column: 1 / -1; }
.gab .gab-ssylka-knopka { font: inherit; font-size: 12px; color: var(--brand-blue-text); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.gab .gab-pole--tv select:disabled { opacity: .5; }
.gab .gab-pole--mesta { margin-top: 6px; }
/* v4, п. 5–7: подгруппы, кнопки вариантов каркаса, фильтр, радио-кнопки, «скоро», сообщение о воротах безфермерного. */
.gab .gab-podgruppa { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--liniya); }
.gab .gab-podgruppa:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.gab .gab-podgruppa h4 { margin: 0 0 8px; font-size: 14px; }
.gab .gab-gruppa__deistviya { margin: 10px 0 0; }
.gab .gab-skryto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; }
.gab .gab-varknopki { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.gab .gab-varknopka { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 8px 14px; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); background: var(--pole); border: 1px solid var(--liniya); transition: border-color .15s, background .15s; }
.gab .gab-varknopka:hover:not(:disabled), .gab .gab-varknopka:focus-visible { border-color: var(--tt-green); outline: none; }
.gab .gab-varknopka.tek { border-color: var(--tt-green); background: rgba(152,192,60,.16); box-shadow: inset 0 0 0 1px var(--tt-green); }
.gab .gab-varknopka:disabled { cursor: default; opacity: .5; }
.gab .gab-varknopka small { font-weight: 400; color: var(--tusklo); font-size: 12px; }
.gab .gab-varknopka .hint { pointer-events: auto; }
.gab .gab-filtr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 12px; font-size: 13px; color: var(--tusklo); }
.gab .gab-filtr__t { display: inline-flex; align-items: center; }
.gab .gab-filtr__kn { font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--liniya); background: transparent; color: var(--ink); cursor: pointer; }
.gab .gab-filtr__kn:hover, .gab .gab-filtr__kn:focus-visible { border-color: var(--brand-blue); outline: none; }
.gab .gab-filtr__kn.tek { border-color: var(--brand-blue); color: var(--brand-blue-text); background: rgba(43,123,214,.14); }
.gab .gab-knopki-vybor { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.gab .gab-knopki-vybor label { position: relative; display: inline-flex; align-items: center; min-height: 42px; padding: 6px 12px; border-radius: 10px; cursor: pointer;
  font-size: 14px; border: 1px solid var(--liniya); background: var(--pole); }
.gab .gab-knopki-vybor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gab .gab-knopki-vybor label:has(input:checked) { border-color: var(--tt-green); background: rgba(152,192,60,.16); box-shadow: inset 0 0 0 1px var(--tt-green); }
.gab .gab-knopki-vybor label:has(input:focus-visible) { outline: 2px solid var(--tt-green); outline-offset: 2px; }
.gab .gab-knopki-vybor label.skoro { opacity: .5; cursor: default; }
.gab .gab-knopki-vybor label.skoro .metka { margin-left: 6px; }
.gab .gab-skoro { margin-top: 10px; padding: 8px 12px; border-radius: 8px; border: 1px dashed var(--liniya); font-size: 13px; color: var(--tusklo); opacity: .75; }
.gab .gab-skoro b { color: var(--ink); font-weight: 600; }
.gab .gab-pro--skoro { opacity: .7; }
.gab .gab-pro > summary { cursor: pointer; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gab .gab-bf-vorota { margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; border: 1px solid #e0a54a; background: rgba(224,165,74,.1); font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.gab .gab-bf-vorota[hidden] { display: none; }
.gab .gab-bf-vorota p { margin: 0; flex: 1 1 320px; }
.gab .gab-kletki__sbros { margin: 4px 0 0; }
/* v4, п. 16: свой размер у каждых ворот. */
.gab .gab-razmery-vorot { margin-top: 10px; }
.gab .gab-razmery-vorot[hidden] { display: none; }
.gab .gab-razmery-vorot__spisok { display: grid; gap: 6px; margin-top: 6px; }
.gab .gab-razmer-vorot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; }
.gab .gab-razmer-vorot__t { min-width: 180px; color: var(--tusklo); }
.gab .gab-razmer-vorot input[type="number"] { width: 72px; min-height: 36px; padding: 4px 8px; border-radius: 6px; }
.gab .gab-kletki__sbros:empty { display: none; }
.gab .gab-variant__primech { margin: 4px 0 0; font-size: 12px; color: #e0a54a; line-height: 1.35; }
/* v4, п. 11–12: «исправить →» у предупреждений, подсветка настройки, плашка «на пределе» у карточки. */
.gab .gab-ispravit { font: inherit; font-size: 12px; font-weight: 600; color: var(--brand-blue-text); background: rgba(43,123,214,.12); border: 1px solid rgba(43,123,214,.35); border-radius: 999px; padding: 2px 10px; cursor: pointer; white-space: nowrap; vertical-align: 1px; }
.gab .gab-ispravit:hover, .gab .gab-ispravit:focus-visible { background: rgba(43,123,214,.24); outline: none; }
.gab .gab-podsvet { box-shadow: 0 0 0 3px var(--tt-green), 0 0 18px rgba(152,192,60,.5); border-radius: 10px; transition: box-shadow .3s; }
.gab .gab-variant__predel { margin: 6px 0 0; padding: 7px 10px; border-radius: 8px; border: 1px solid #e0a54a; background: rgba(224,165,74,.12); font-size: 12px; color: #f0c674; line-height: 1.35; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.gab .gab-variant__predel .hint { margin-left: 3px; }
.gab .gab-variant.na-predele { border-color: rgba(224,165,74,.5); }
/* Клетки мест ворот (классы .bf-pro__* — темы, как в калькуляторах 000-7). */
.gab .gab-kletki { margin-top: 6px; }
.gab .gab-kletki .bf-pro__row { margin-bottom: 8px; }
.gab .gab-kletki .bf-pro__name { color: var(--ink); }
.gab .gab-kletki .bf-pro__cell { color: var(--ink); border-color: var(--liniya); }
.gab .gab-kletki .bf-pro__cell.is-on { color: #242424; }
.gab .gab-kletki .bf-pro__cell.is-svyaz:not(.is-on) { background-color: transparent; }
.gab .gab-kletki.tolko-chtenie .bf-pro__cell { cursor: default; }
.gab .gab-kletki .mk-field__hint { font-size: 12px; color: var(--tusklo); }
.gab .bf-pro__legend { color: var(--tusklo); }
.gab .gab-kletki__pod { margin: 6px 0 0; font-size: 12px; color: var(--dim); min-height: 1.2em; }
.gab .gab-kletki__pod:empty { display: none; }
@media (max-width: 640px) {
  .gab .gab-gruppa { padding: 10px 12px 12px; }
  .gab .gab-gruppa__telo--gabarity { grid-template-columns: 1fr; }
  .gab .gab-pravka .gab-razmery { grid-template-columns: 1fr; gap: 6px; }
  .gab .gab-pravka .gab-razmer input[type="number"] { font-size: 24px; }
  .gab .gab-kletki .bf-pro__cell { min-width: 2.9rem; padding: .45rem .3rem; }
}

/* v3: форма заявки */
.gab .gab-zayavka__shapka { display: flex; align-items: center; gap: 10px; }
.gab .gab-zayavka h2 { margin: 0 0 8px; font-size: 20px; display: flex; align-items: center; }
.gab .gab-zayavka__x { margin-left: auto; width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--pole); color: var(--ink); font: 400 24px/1 sans-serif; cursor: pointer; }
.gab .gab-zayavka__forma { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; max-width: 760px; }
.gab .gab-zayavka__forma input[type="text"], .gab .gab-zayavka__forma input[type="tel"], .gab .gab-zayavka__forma textarea { min-height: 42px; padding: 8px 10px; border-radius: 6px; font: inherit; }
.gab .gab-zayavka__forma textarea { resize: vertical; background: var(--pole); color: var(--ink); border: 1px solid var(--liniya); }
.gab .gab-zayavka__forma textarea::placeholder { color: var(--dim); }
.gab .gab-zayavka__forma input.oshibka { border-color: var(--bad); }
.gab .gab-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.gab .gab-zayavka__niz { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.gab .gab-zayavka__niz .btn.big { background: var(--tt-green); color: var(--tt-green-ink); min-width: 200px; }
.gab .gab-zayavka__soglasie { margin: 0; font-size: 12px; color: var(--dim); max-width: 420px; }
.gab .gab-zayavka__soglasie a { color: var(--tusklo); }
.gab .gab-zayavka__msg { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--tusklo); min-height: 1.2em; }
.gab .gab-zayavka__msg.oshibka { color: var(--bad); }
.gab .gab-zayavka__spasibo { padding: 14px 16px; border-radius: 10px; background: rgba(152,192,60,.14); border: 1px solid rgba(152,192,60,.4); font-size: 16px; }
.gab .gab-zayavka__spasibo small { display: block; margin-top: 4px; font-size: 12px; color: var(--tusklo); }
@media (max-width: 640px) {
  .gab .gab-zayavka__forma { grid-template-columns: 1fr; }
  /* Из нижней панели — форма на весь экран. */
  .gab .gab-zayavka.polnyi { position: fixed; inset: 0; z-index: 10045; margin: 0; border-radius: 0; overflow-y: auto; padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .gab .gab-zayavka.polnyi .gab-zayavka__x { display: block; }
  .gab .gab-zayavka.polnyi .gab-zayavka__niz .btn.big { width: 100%; }
}
/* v4, п. 8: всплывающая панель телефона — только ≤ 640 px, только пока показана (body.gab-est-niz). */
.gab .gab-niz { display: none; }
@media (max-width: 640px) {
  .gab .gab-niz:not([hidden]) { display: block; position: fixed; z-index: 10030; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; padding: 10px 44px 10px 12px;
    border-radius: 12px; background: var(--card); border: 1px solid var(--liniya); box-shadow: 0 -8px 24px rgba(0,0,0,.45); animation: gab-niz-vhod .25s ease; }
  @keyframes gab-niz-vhod { from { transform: translateY(20px); opacity: 0; } }
  .gab .gab-niz__x { position: absolute; top: 4px; right: 4px; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: 400 22px/1 sans-serif; cursor: pointer; }
  .gab .gab-niz__t { margin: 0 0 6px; font-size: 12px; color: var(--tusklo); }
  .gab .gab-niz__knopki { display: flex; gap: 8px; }
  .gab .gab-niz__knopki .btn { flex: 1 1 0; min-height: 40px; font-size: 14px; padding: 6px 10px; }
  body.gab-est-niz { --gab-niz-h: 112px; }
  body.gab-est-niz .gab .gab-rezultat { padding-bottom: calc(var(--gab-niz-h) + 8px); }
  body.gab-est-niz .gab .gab-tost { bottom: calc(var(--gab-niz-h) + 12px); }
  /* Баннер cookies темы (.rgpd, fixed снизу) — над панелью, иначе «Принять» не нажать. */
  body.gab-est-niz .rgpd { bottom: calc(var(--gab-niz-h) + 8px); }
  body.gab-kabinet-otkryt .gab .gab-niz, body.gab-zayavka-polnyi .gab .gab-niz { display: none; }
}

/* Быстрый просмотр — плитки (v4, п. 13): карточка со значком, номером, «?»; тап
   раскрывает панель под плитками только с её содержимым. Склад блоков #gab-bloki скрыт. */
.gab .gab-bystro h2, .gab .gab-varianty h2 { margin: 0 0 12px; font-size: 20px; display: flex; align-items: center; }
.gab #gab-bloki { display: none; }
.gab .gab-bystro__spisok { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; counter-reset: p; }
.gab .gab-bystro__spisok li { position: relative; min-width: 0; display: flex; }
.gab .gab-bystro__spisok > .gab-bystro__panel { grid-column: 1 / -1; margin-top: 0; }
.gab .gab-plitka { width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 12px 36px 12px 12px; text-align: left;
  font: inherit; color: var(--ink); background: var(--pole); border: 1px solid var(--liniya); border-radius: 12px; min-height: 68px; transition: border-color .15s, background .15s; }
button.gab-plitka { cursor: pointer; }
.gab button.gab-plitka:hover, .gab button.gab-plitka:focus-visible { border-color: var(--tt-green); outline: none; }
.gab .gab-plitka.aktiv { border-color: var(--tt-green); background: rgba(152,192,60,.14); box-shadow: inset 0 0 0 1px var(--tt-green); }
.gab .gab-plitka .n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: rgba(43,123,214,.18); color: var(--brand-blue-text); }
.gab .gab-plitka .ik { flex: none; font-size: 20px; line-height: 1; }
.gab .gab-plitka .t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gab .gab-plitka .t b { font-size: 14px; font-weight: 600; line-height: 1.25; }
.gab .gab-plitka .t small { font-size: 11.5px; color: var(--tusklo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gab .gab-plitka .strelka { flex: none; color: var(--tusklo); font-size: 14px; }
.gab .gab-plitka.aktiv .strelka { transform: rotate(180deg); color: var(--tt-green); }
.gab .gab-plitka__hint { position: absolute; top: 8px; right: 8px; z-index: 1; }
.gab .gab-bystro li.skoro .gab-plitka { opacity: .5; cursor: default; }
.gab .gab-bystro li.skoro .n { background: rgba(127,127,127,.2); color: var(--tusklo); }
/* Панель с содержимым плитки: блок внутри без своей шапки и рамки карточки. */
.gab .gab-bystro__panel { margin-top: 12px; }
.gab .gab-bystro__panel[hidden] { display: none; }

.gab .gab-blok.v-panel { border-color: var(--tt-green); }
.gab .gab-blok.v-panel .gab-blok__shapka { display: none; }
.gab .gab-blok.v-panel .gab-blok__telo { padding-top: 14px; }
/* v4, п. 17: карточки-ссылки одного размера — тип крупно и цветом, превью/обложка,
   строка о чём, кнопка «Открыть →». Ряд на ПК, лента со свайпом на телефоне. */
.gab .gab-kartochki-vse { margin: 14px 0 0; display: grid; gap: 12px; }
.gab .gab-kartochki__t { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--tusklo); text-transform: uppercase; letter-spacing: .04em; }
.gab .gab-kartochki__ryad { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.gab .gab-kartochki__eshche { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--brand-blue-text); text-decoration: none; }
.gab .gab-kartochki__eshche:hover { text-decoration: underline; }
.gab .gab-kart { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; border: 1px solid var(--liniya); background: var(--pole); color: var(--ink); text-decoration: none; transition: border-color .15s, transform .1s; min-height: 100%; box-sizing: border-box; }
.gab .gab-kart:hover, .gab .gab-kart:focus-visible { border-color: var(--brand-blue); outline: none; }
.gab .gab-kart__foto { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 8px; background: #0d0f11 center / cover no-repeat; overflow: hidden; }
.gab .gab-kart__foto--img { background: var(--liniya); }
.gab .gab-kart__foto--img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gab .gab-kart__foto--ik { display: grid; place-items: center; background: linear-gradient(135deg, rgba(43,123,214,.25), rgba(43,123,214,.05)); }
.gab .gab-kart--kalk .gab-kart__foto--ik { background: linear-gradient(135deg, rgba(152,192,60,.28), rgba(152,192,60,.06)); }
.gab .gab-kart--video .gab-kart__foto--ik { background: linear-gradient(135deg, rgba(245,88,36,.28), rgba(245,88,36,.06)); }
.gab .gab-kart__ik { font-size: 30px; line-height: 1; }
.gab .gab-kart__play { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; color: #fff; background: rgba(0,0,0,.55); border: 2px solid rgba(255,255,255,.8); }
.gab .gab-kart__dlit { position: absolute; right: 6px; bottom: 6px; padding: 2px 6px; border-radius: 4px; font-size: 11px; font-weight: 600; color: #fff; background: rgba(0,0,0,.7); }
.gab .gab-kart__tip { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-blue-text); }
.gab .gab-kart--kalk .gab-kart__tip { color: var(--tt-green); }
.gab .gab-kart--video .gab-kart__tip { color: var(--tt-orange); }
.gab .gab-kart__t { font-size: 14px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gab .gab-kart__opis { font-size: 12px; color: var(--tusklo); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gab .gab-kart__kn { margin-top: auto; align-self: flex-start; padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--tt-green-ink); background: var(--tt-green); }
.gab .gab-kart--video .gab-kart__kn { background: var(--tt-orange); color: #fff; }
.gab .gab-kart--statya .gab-kart__kn { background: var(--brand-blue); color: #fff; }
@media (max-width: 640px) {
  .gab .gab-kartochki__ryad { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; margin: 0 -14px; padding: 0 14px 6px; scroll-padding: 0 14px; }
  .gab .gab-kart { flex: 0 0 72%; scroll-snap-align: start; }
}
/* Кнопки «Раскрыть / Показать полностью» в блоках — одинаковые, как кнопки сервиса, со стрелкой. */
.gab .gab-blok details.skladnoy > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; margin: 6px 0; padding: 8px 14px; border-radius: 10px;
  border: 1px solid var(--liniya); background: var(--pole); font-size: 14px; font-weight: 600; color: var(--ink); transition: border-color .15s; }
.gab .gab-blok details.skladnoy > summary::-webkit-details-marker { display: none; }
.gab .gab-blok details.skladnoy > summary h3 { margin: 0; font-size: 14px; font-weight: 600; }
.gab .gab-blok details.skladnoy > summary::after { content: '↓'; color: var(--brand-blue-text); font-weight: 700; }
.gab .gab-blok details.skladnoy[open] > summary::after { content: '↑'; }
.gab .gab-blok details.skladnoy > summary:hover { border-color: var(--brand-blue); }
/* п. 22: блок «Форма КП» как сервис. */
.gab .gab-kp h2 { font-size: 20px; margin: 0 0 6px; display: flex; align-items: center; flex-wrap: wrap; }
.gab .gab-kp__lid { max-width: 820px; font-size: 15px; }
.gab .gab-kp__kolonki { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; margin: 8px 0 14px; }
.gab .gab-kp__kol h3 { margin: 0 0 6px; font-size: 14px; color: var(--tusklo); text-transform: uppercase; letter-spacing: .04em; }
.gab .gab-kp__spisok, .gab .gab-kp__plyusy { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 14px; }
.gab .gab-kp__spisok li { position: relative; padding-left: 20px; }
.gab .gab-kp__spisok li::before { content: '✓'; position: absolute; left: 0; color: var(--tt-green); font-weight: 800; }
.gab .gab-kp__shagi { margin: 0; padding-left: 20px; display: grid; gap: 5px; font-size: 14px; }
.gab .gab-kp__plyusy li { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--liniya); background: var(--pole); }
.gab .gab-kp__plyusy b { color: var(--tt-green); }
.gab .gab-kp__niz { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.gab .gab-kp__kn { background: var(--tt-green); color: var(--tt-green-ink); }
.gab .gab-kp__pod { margin: 0; font-size: 12px; color: var(--dim); }
@media (max-width: 640px) { .gab .gab-kp__kolonki { grid-template-columns: 1fr; } }
/* п. 23: список калькуляторов внизу. */
.gab .gab-kalkulyatory[hidden] { display: none; }
.gab .gab-kalkulyatory > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.gab .gab-kalkulyatory > summary::-webkit-details-marker { display: none; }
.gab .gab-kalkulyatory > summary h2 { margin: 0; font-size: 18px; display: inline-flex; align-items: center; }
.gab .gab-kalkulyatory > summary h2::before { content: '▸ '; color: var(--brand-blue-text); }
.gab .gab-kalkulyatory[open] > summary h2::before { content: '▾ '; }
.gab .gab-kalkulyatory__spisok { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; margin-top: 12px; }
.gab .gab-kalk { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--liniya); background: var(--pole); color: var(--ink); text-decoration: none; }
.gab .gab-kalk:hover { border-color: var(--tt-green); }
.gab .gab-kalk__ik { flex: none; width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: rgba(152,192,60,.18); font-size: 18px; }
.gab .gab-kalk__t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gab .gab-kalk__t b { font-size: 14px; font-weight: 600; line-height: 1.3; }
.gab .gab-kalk__t small { font-size: 12px; color: var(--tusklo); line-height: 1.35; }
.gab .gab-kalk__kn { flex: none; font-size: 13px; font-weight: 700; color: var(--brand-blue-text); }
/* Мини-карусель листов плитки и фирменная кнопка PDF. */
.gab .gab-mini { margin: 0 0 12px; }
.gab .gab-mini .bf-shema { background: #222222; color: #F0F0F0; border-radius: 8px; padding: 10px 12px; }
.gab .gab-mini__kn { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.gab .gab-pdf-mini { background: var(--tt-green); color: var(--tt-green-ink); font-weight: 700; }
.gab .gab-mini__pod { flex-basis: 100%; font-size: 12px; color: var(--dim); }
/* п. 19, 25: живая 3D-сцена в плитке с меню студии (разметка и стили — 000-18, только под .v3d;
   data-theme="dark" — тёмные карточки колонки под нашу страницу). */
.gab .gab-3d { margin: 0 0 12px; min-height: 120px; border-radius: 10px; }
.gab .gab-3d .bok .card:last-child { margin-bottom: 0; }
.gab .gab-3d[hidden] { display: none; }
.gab .gab-3d.v3d-vstroen { min-height: 0; }
/* п. 21: встроенный калькулятор темы — в тёмной подложке, как фрагменты. */
.gab .gab-vstroen { margin: 12px 0 0; }
.gab .gab-vstroen__t { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--tusklo); text-transform: uppercase; letter-spacing: .04em; }
.gab .gab-vstroen .calculator__mount { background: #222222; color: #F0F0F0; border-radius: 8px; padding: 14px 16px; }
.gab .gab-vstroen .ka-calc__btn-submit, .gab .gab-vstroen .ka-calc__lead { display: none !important; }
/* п. 18: кнопка «вписать целиком» в полноэкранном просмотре темы. */
.bf-lb__fit { font-size: 18px !important; }
.gab .gab-pdf-mini:disabled { opacity: .6; }
.gab .metka { flex: none; display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.gab .metka.skoro { background: rgba(127,127,127,.22); color: var(--tusklo); }
.gab .metka.tek { background: rgba(43,123,214,.2); color: var(--brand-blue-text); }
.gab .metka.ek { background: rgba(76,194,124,.18); color: var(--brand-green-text); }
@media (min-width: 641px) and (max-width: 899px) { .gab .gab-bystro__spisok { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .gab .gab-bystro__spisok { grid-template-columns: 1fr; gap: 8px; } .gab .gab-plitka { min-height: 60px; } .gab .gab-bystro__panel { margin-left: -4px; margin-right: -4px; } }

/* Варианты каркаса: карточки; на телефоне — лента с прокруткой вбок */
.gab .gab-varianty__ryad { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.gab .gab-variant { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 12px; border: 1px solid var(--liniya); background: var(--pole); min-width: 0; }
.gab .gab-variant.tek { border-color: var(--brand-blue); box-shadow: inset 0 0 0 1px var(--brand-blue); }
/* v4: карточка — кнопка целиком (тап перестраивает листы и расчёт). */
.gab .gab-variant[data-deistvie] { cursor: pointer; transition: border-color .15s, transform .1s; }
.gab .gab-variant[data-deistvie]:hover, .gab .gab-variant[data-deistvie]:focus-visible { border-color: var(--tt-green); outline: none; }
.gab .gab-variant[data-deistvie]:active { transform: translateY(1px); }
.gab .gab-variant.net { opacity: .62; }
.gab .gab-variant.skoro { opacity: .45; }
.gab .gab-variant__metki { display: flex; flex-wrap: wrap; gap: 4px; min-height: 20px; }
.gab .gab-variant h3 { margin: 0; font-size: 15px; line-height: 1.3; min-height: 2.6em; }
.gab .gab-variant__cena { margin: 0; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gab .gab-variant__pod { margin: -4px 0 0; font-size: 12px; color: var(--tusklo); }
.gab .gab-variant dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; margin: 4px 0 6px; font-size: 13px; }
.gab .gab-variant dt { color: var(--tusklo); }
.gab .gab-variant dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.gab .gab-variant .btn { margin-top: auto; width: 100%; font-size: 14px; }
.gab .gab-variant__net { margin: 0; font-size: 13px; color: var(--tusklo); line-height: 1.45; }
@media (max-width: 1100px) { .gab .gab-varianty__ryad { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .gab .gab-varianty__ryad { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -18px; padding: 0 18px 6px; scroll-padding: 0 18px; }
  .gab .gab-variant { flex: 0 0 76%; scroll-snap-align: start; }
}

/* Всплывашка «Ссылка скопирована» */
.gab .gab-tost { position: fixed; z-index: 60; left: 50%; bottom: 20px; transform: translate(-50%, 20px); max-width: calc(100vw - 32px);
  padding: 10px 16px; border-radius: 10px; background: var(--ink); color: var(--card); font-size: 14px; opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s; overflow-wrap: anywhere; }
.gab .gab-tost.vidno { opacity: 1; transform: translate(-50%, 0); }

.gab .gab-oshibka { border-left: 4px solid var(--bad); white-space: pre-line; }
.gab .gab-oshibka b { color: var(--bad); }

/* --- Результат ------------------------------------------------------------ */
.gab .gab-svodka h2 { font-size: 20px; margin: 0 0 4px; }
.gab .gab-svodka .gab-svodka__pod { color: var(--tusklo); font-size: 14px; margin: 0 0 12px; }
.gab .gab-svodka .gab-svodka__gorod { color: var(--dim); font-size: 12px; margin: -8px 0 12px; }
/* v4, п. 3: шесть плашек — Металл, Панели, Стоимость, Нужно ещё каркасу, Нужно ещё
   под ключ, Оптимально. ПК: три в первом ряду, две во втором, «Оптимально» справа
   на два ряда, крупная. Телефон: Металл и Панели рядом, Стоимость на обе, Нужно ещё
   ×2 рядом, Оптимально на всю ширину. Вторая строка значения (.v2) — цена под тоннами и мм. */
.gab .gab-svodka .plitki { margin: 0 0 12px; }
.gab .gab-svodka .plitka { display: flex; flex-direction: column; justify-content: center; }
.gab .gab-svodka .plitka .v { font-size: 22px; line-height: 1.2; }
.gab .gab-svodka .plitka .v2 { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
.gab .gab-svodka .plitka.ek .v { font-size: 28px; }
@media (min-width: 900px) {
  .gab .gab-svodka .plitki { grid-template-columns: repeat(6, minmax(0, 1fr)) minmax(0, 2.3fr); grid-auto-rows: 1fr; }
  .gab .gab-svodka .plitka:nth-child(-n+3) { grid-column: span 2; }
  .gab .gab-svodka .plitka:nth-child(4), .gab .gab-svodka .plitka:nth-child(5) { grid-column: span 3; }
  .gab .gab-svodka .plitka.ek { grid-column: 7; grid-row: 1 / 3; background: linear-gradient(135deg, rgba(76,194,124,.14), rgba(76,194,124,.03)); }
  .gab .gab-svodka .plitka.ek .v { font-size: 34px; }
}
@media (min-width: 641px) and (max-width: 899px) {
  .gab .gab-svodka .plitki { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .gab .gab-svodka .plitki { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .gab .gab-svodka .plitka { padding: 10px 12px; }
  .gab .gab-svodka .plitka .v { font-size: 18px; white-space: nowrap; }
  .gab .gab-svodka .plitka .v2 { font-size: 15px; }
  .gab .gab-svodka .plitka:nth-child(3), .gab .gab-svodka .plitka.ek { grid-column: 1 / -1; }
  .gab .gab-svodka .plitka.ek .v { font-size: 26px; }
  .gab .gab-svodka .plitka .k .hint { margin-left: 3px; }
  .gab .gab-svodka h2 { font-size: 18px; }
}
/* v4, п. 3: липкая шапка — мини-плашки и «Пересчитать». Поверх страницы под шапкой
   сайта; кнопка тёмная (disabled), пока данные не менялись, красная после правки,
   плашки при этом блекнут. Телефон — две строки по три. */
.gab .gab-lipko { position: fixed; z-index: 10020; left: 0; right: 0; top: 0; box-sizing: border-box; padding: 8px 12px;
  display: flex; align-items: stretch; gap: 8px; justify-content: center;
  background: rgba(18,21,27,.96); border-bottom: 1px solid var(--liniya); box-shadow: 0 8px 24px rgba(0,0,0,.4); backdrop-filter: blur(6px);
  animation: gab-lipko-vhod .2s ease; }
@keyframes gab-lipko-vhod { from { transform: translateY(-100%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gab .gab-lipko { animation: none; } }
.gab .gab-lipko[hidden] { display: none; }
.gab .gab-lipko__plitki { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; flex: 1 1 auto; max-width: 900px; }
.gab .gab-lipko__plitka { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; padding: 5px 10px; border-radius: 8px;
  border: 1px solid var(--liniya); background: var(--pole); transition: opacity .2s; }
.gab .gab-lipko__plitka .k { font-size: 10px; color: var(--tusklo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gab .gab-lipko__plitka .v { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gab .gab-lipko__plitka .d { font-size: 10px; color: var(--tusklo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gab .gab-lipko__plitka.ek .v { color: var(--brand-green-text); font-size: 16px; }
.gab .gab-lipko__plitka.gab .v { font-size: 13px; }
.gab .gab-lipko__plitka.gab { cursor: pointer; user-select: none; -webkit-user-select: none; }
/* ?novyj=1 — короткий ввод из кабинета: шаги 1–2, «Что вы получите» не показываем (app.js korotkiiVvod). */
.gab-wrap--novyj #gab-karta-3 { display: none; }
.gab-wrap--novyj #gab-karta-2 .gab-dalshe { background: var(--akcent, #e0384f); color: #fff; }
.gab .gab-lipko__plitka.gab::after { content: 'два раза — править'; font-size: 9px; color: var(--dim); }
/* Наведение на «Габариты» (Тимур, 19.10.2026): плитка подсвечивается, под ней — «Щелчок 2 раза». */
@media (hover: hover) {
  .gab .gab-lipko__plitka.gab { position: relative; transition: opacity .2s, border-color .15s, background .15s, box-shadow .15s; }
  .gab .gab-lipko__plitka.gab:hover { border-color: var(--tt-green); background: rgba(150,190,60,.12); box-shadow: 0 0 0 2px rgba(150,190,60,.25); }
  .gab .gab-lipko__plitka.gab:hover .v { color: var(--brand-green-text); }
  .gab .gab-lipko__plitka.gab::before { content: 'Щелчок 2 раза — изменить габариты'; position: absolute; left: 50%; top: calc(100% + 8px); transform: translate(-50%, -4px);
    padding: 5px 10px; border-radius: 6px; background: var(--tt-green); color: #12151b; font-size: 12px; font-weight: 700; white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 1; }
  .gab .gab-lipko__plitka.gab:hover::before { opacity: 1; transform: translate(-50%, 0); }
}
.gab .gab-lipko__knopka { flex: none; min-width: 130px; padding: 6px 14px; border-radius: 8px; border: 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700;
  color: #fff; background: var(--akcent, #e0384f); transition: background .2s, color .2s, opacity .2s; }
.gab .gab-lipko__knopka:disabled { cursor: default; color: var(--tusklo); background: rgba(127,127,127,.18); }
/* Данные изменились: кнопка горит, плашки блекнут — цифры устарели. */
.gab .gab-rezultat.ustarelo .gab-lipko__plitka { opacity: .45; }
.gab .gab-rezultat.ustarelo .gab-lipko__knopka:not(:disabled) { box-shadow: 0 0 0 3px rgba(224,56,79,.35); }
/* 19.10 (Тимур): свернуть — значок справа вверху «Оптимально ▾» (класс svernuto, app.js lipko()). */
.gab .gab-lipko__svernut { flex: none; align-self: center; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--liniya); background: var(--pole);
  color: var(--tusklo); font: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
.gab .gab-lipko__svernut:hover { color: var(--ink); border-color: var(--tusklo); }
.gab .gab-lipko__znachok { display: none; }
.gab .gab-lipko.svernuto { left: auto; right: 12px; padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; animation: none; }
.gab .gab-lipko.svernuto > :not(.gab-lipko__znachok) { display: none; }
.gab .gab-lipko.svernuto .gab-lipko__znachok { display: flex; gap: 6px; align-items: stretch; }
.gab .gab-lipko__razvernut { display: flex; align-items: baseline; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--liniya);
  background: rgba(18,21,27,.96); color: var(--ink); font: inherit; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.4); white-space: nowrap; }
.gab .gab-lipko__razvernut .k { font-size: 11px; color: var(--tusklo); }
.gab .gab-lipko__razvernut b { font-size: 15px; color: var(--brand-green-text); font-variant-numeric: tabular-nums; }
.gab .gab-lipko__razvernut .str { font-size: 12px; color: var(--tusklo); }
.gab .gab-lipko__razvernut:hover { border-color: var(--tt-green); }
/* В значке «Пересчитать» — только когда данные устарели. */
.gab .gab-lipko__knopka--mini { display: none; min-width: 0; border-radius: 999px; padding: 6px 12px; font-size: 13px; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.gab .gab-rezultat.ustarelo .gab-lipko__knopka--mini { display: block; }
.gab .gab-rezultat.ustarelo .gab-lipko__razvernut b { color: var(--tusklo); }
@media (max-width: 640px) {
  /* Телефон: одна строка «Оптимально · Пересчитать · ▴» (около 50 px), тап по «Оптимально» — все плашки (класс vse). */
  .gab .gab-lipko { flex-wrap: wrap; gap: 6px; padding: 6px 8px; }
  .gab .gab-lipko__plitki { flex: 1 1 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .gab .gab-lipko:not(.vse) .gab-lipko__plitka:not(.ek) { display: none; }
  .gab .gab-lipko__plitka.ek { cursor: pointer; }
  .gab .gab-lipko__plitka.ek .k::after { content: ' · все цифры ▾'; }
  .gab .gab-lipko.vse .gab-lipko__plitka.ek .k::after { content: ' · свернуть ▴'; }
  .gab .gab-lipko.vse .gab-lipko__plitki { flex-basis: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gab .gab-lipko.vse .gab-lipko__plitka.ek { grid-column: span 2; }
  .gab .gab-lipko.vse .gab-lipko__knopka { flex: 1 1 auto; }
  .gab .gab-lipko__plitka { padding: 4px 7px; }
  .gab .gab-lipko__plitka .v { font-size: 12px; }
  .gab .gab-lipko__plitka.ek .v { font-size: 14px; }
  .gab .gab-lipko__plitka.gab .v { font-size: 11px; }
  .gab .gab-lipko__knopka { min-width: 0; padding: 6px 10px; font-size: 13px; }
  .gab .gab-lipko.svernuto { right: 8px; }
  .gab .gab-lipko__razvernut b { font-size: 14px; }
}

/* «Подробнее» под плашками: каркас, проёмы (ворота количеством, оси внутри), площади, машины. */
.gab .gab-svodka__knopki .btn.ghost { min-height: 38px; padding: 6px 12px; font-size: 13px; }
/* v4, п. 1: листы чертежей — первой карточкой экрана расчёта (ПК и телефон). */
.gab .gab-listy-pdf[hidden] { display: none; }
.gab .gab-listy__t { margin: 0 0 8px; font-size: 16px; font-weight: 700; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.gab .gab-listy__t small { font-weight: 400; font-size: 12px; color: var(--tusklo); }
.gab .gab-listy__kakoi { font-weight: 600; color: var(--brand-blue-text); }
.gab .gab-listy-pdf { scroll-margin-top: calc(var(--gab-verh) + 12px); }
/* Класс .gab-listy занят списком листов раскладки (display: grid) — у карусели свой, иначе она растягивается по содержимому. */
/* Якорь из подсказки «?» (ссылка на блок) — под шапкой сайта. */
.gab .gab-varianty, .gab .gab-pravka, .gab .gab-gruppa, .gab .gab-zayavka { scroll-margin-top: calc(var(--gab-verh) + 12px); }
.gab .gab-predupr { margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; border: 1px solid #e0a54a; background: rgba(224,165,74,.1); font-size: 14px; }
.gab .gab-predupr ul, .gab .gab-otkaz ul { margin: 4px 0 0; padding-left: 18px; }
.gab .gab-otkaz { margin: 10px 0 0; font-size: 14px; color: var(--tusklo); }
.gab .gab-svodka__knopki { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.gab .gab-svodka__knopki .btn { font-size: 14px; }
.gab .gab-soobshch { font-size: 13px; color: var(--brand-green-text); margin: 8px 0 0; min-height: 1em; }

/* Блок результата */
.gab .gab-blok { padding: 0; overflow: hidden; }
.gab .gab-blok__shapka { display: flex; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer; flex-wrap: wrap; }
.gab .gab-blok__shapka h2 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 4px; }
.gab .gab-blok__kratko { color: var(--tusklo); font-size: 13px; flex: 1 1 auto; }
.gab .gab-blok__pokazat { margin-left: auto; font: inherit; font-size: 13px; color: var(--brand-blue-text); background: none; border: 0; cursor: pointer; white-space: nowrap; min-height: 34px; }
.gab .gab-blok { scroll-margin-top: calc(var(--gab-verh) + 12px); }
.gab .gab-blok__telo { padding: 0 18px 14px; }
.gab .gab-blok__niz { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--liniya); }
.gab .gab-blok__deistvie { font: inherit; font-size: 13px; color: var(--tusklo); background: none; border: 0; padding: 4px 0; cursor: pointer; }
.gab .gab-blok__deistvie:hover { color: var(--brand-blue-text); }
.gab .gab-blok[data-svernut="1"] .gab-blok__telo { display: none; }
.gab .gab-blok__stati { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 0 18px 14px; font-size: 13px; }
.gab .gab-blok__stati a { color: var(--tusklo); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.gab .gab-blok__stati a:hover { color: var(--brand-blue-text); }
.gab .gab-blok__stati a::before { content: '📖'; font-size: 12px; }
.gab .gab-blok__knopki { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.gab .gab-blok__knopki .btn { font-size: 14px; }
.gab .gab-tekst { font-size: 14px; color: var(--tusklo); margin: 0 0 10px; max-width: 780px; }

/* Фрагменты калькуляторов внутри (их классы — в style.css темы) свёрстаны под
   тёмный сайт (текст #F0F0F0 от body) — подложка всегда тёмная, как у
   страниц калькуляторов, и в светлой теме тоже. */
.gab .gab-fragment { background: #222222; color: #F0F0F0; border-radius: 8px; padding: 14px 16px; }
.gab .gab-fragment .bf-btn--more, .gab .gab-fragment .mk-btn--send, .gab .gab-fragment .mk-cta,
.gab .gab-fragment .mk-extra__cta, .gab .gab-fragment #bfc-shema-lead, .gab .gab-fragment .mk-plus__btn { display: none !important; }
.gab .gab-fragment .bf-more, .gab .gab-fragment .mk-fold { display: block !important; }
.gab .gab-fragment .bf-more[hidden], .gab .gab-fragment .mk-fold[hidden] { display: block !important; }
.gab .gab-fragment .ka-calc__cons-row { font-size: 14px; }
.gab .gab-fragment--listy { padding: 0; background: transparent; }

/* Раскладка: листы 000-17 в своей разметке (.rsk .list из raskladka.css). */
.gab .gab-listy { display: grid; gap: 14px; }
.gab .gab-listy .list { margin: 0; }
.gab .gab-listy-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.gab .gab-listy-nav button { font: inherit; font-size: 13px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--liniya); background: var(--pole); color: var(--ink); cursor: pointer; }
.gab .gab-listy-nav button.aktiv { border-color: var(--brand-blue); color: var(--brand-blue-text); }

/* Теплотехника: документ расчёта в разметке теплотехники 000-7 (классы .ttr-doc__*) */
.gab .ttr-doc__title { font-size: 17px; margin: 0 0 4px; }
.gab .ttr-doc__sub { color: var(--tusklo); font-size: 13px; margin: 0 0 10px; }
.gab .ttr-doc__meta { display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; font-size: 13px; margin: 0 0 10px; }
.gab .ttr-doc__meta dt { color: var(--tusklo); }
.gab .ttr-doc__meta dd { margin: 0; }
.gab .ttr-doc__h { font-size: 15px; margin: 14px 0 6px; }
.gab .ttr-doc p { font-size: 14px; margin: 0 0 6px; }
.gab .ttr-doc__f { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; color: var(--brand-blue-text); padding-left: 10px; }
.gab .ttr-doc__small, .gab .ttr-doc__note { font-size: 12px; color: var(--dim); }
.gab .ttr-doc__verdict { font-weight: 700; }
.gab .ttr-doc__verdict.is-ok { color: var(--brand-green-text); }
.gab .ttr-doc__verdict.is-bad { color: var(--bad); }
.gab .ttr-doc__tw { overflow-x: auto; margin: 0 0 8px; }
.gab .ttr-doc__table { border-collapse: collapse; font-size: 13px; width: 100%; }
.gab .ttr-doc__table th, .gab .ttr-doc__table td { border: 1px solid var(--liniya); padding: 5px 8px; text-align: left; }
.gab .ttr-doc ul { font-size: 14px; padding-left: 18px; }

/* Таблица машин/денег своя */
.gab .gab-tablica { border-collapse: collapse; width: 100%; font-size: 14px; }
.gab .gab-tablica th, .gab .gab-tablica td { padding: 6px 8px; border-bottom: 1px solid var(--liniya); text-align: left; }
.gab .gab-tablica td.r, .gab .gab-tablica th.r { text-align: right; font-variant-numeric: tabular-nums; }
.gab .gab-tablica tr.itog td { font-weight: 700; }

/* ===================== v3: шапка рабочего стола, кабинет, вход =====================
   Шапка над сводкой: имя сервиса слева, справа «Пользователь: …» и «Личный
   кабинет» (панель справа). На телефоне — одна строка, кабинет значком. */
.gab .gab-shapka { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin: 0 0 12px; padding: 8px 14px; border-radius: 12px;
  border: 1px solid var(--liniya); background: var(--pole); font-size: 14px; }
.gab .gab-shapka__servis { font-weight: 700; }
.gab .gab-shapka__polz { margin-left: auto; color: var(--tusklo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.gab .gab-shapka__polz.voshel { color: var(--brand-green-text); }
.gab .gab-shapka__kabinet { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 6px 14px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--tt-green-ink); background: var(--tt-green); border: 0; white-space: nowrap; }
@media (hover: hover) { .gab .gab-shapka__kabinet:hover { background: var(--tt-green-hover); } }
.gab .gab-shapka__kabinet[aria-expanded="true"] { box-shadow: 0 0 0 3px rgba(152,192,60,.3); }
.gab .gab-shapka__ikonka { font-size: 15px; line-height: 1; }
@media (max-width: 640px) {
  .gab .gab-shapka { flex-wrap: nowrap; gap: 8px; padding: 6px 10px; font-size: 13px; }
  .gab .gab-shapka__servis { white-space: nowrap; }
  .gab .gab-shapka__polz { font-size: 12px; }
  .gab .gab-shapka__kabinet { padding: 6px 10px; min-width: 38px; justify-content: center; }
  .gab .gab-shapka__kabinet-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Панель кабинета: выезжает справа поверх страницы, под ней затемнение. */
.gab .gab-kabinet__fon { position: fixed; inset: 0; z-index: 10040; background: rgba(0,0,0,.55); }
.gab .gab-kabinet { position: fixed; z-index: 10041; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); box-sizing: border-box; overflow-y: auto;
  padding: 18px 20px 24px; background: var(--card); color: var(--ink); border-left: 1px solid var(--liniya); box-shadow: -16px 0 40px rgba(0,0,0,.45);
  animation: gab-kabinet-vhod .25s ease; }
@keyframes gab-kabinet-vhod { from { transform: translateX(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gab .gab-kabinet { animation: none; } }
.gab .gab-kabinet[hidden], .gab .gab-kabinet__fon[hidden] { display: none; }
.gab .gab-kabinet__shapka { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.gab .gab-kabinet__shapka h2 { margin: 0; font-size: 20px; display: flex; align-items: center; }
/* 44 px — тап-зона (было 40; отчёт 000-22, 19.10). */
.gab .gab-kabinet__x { margin-left: auto; width: 44px; height: 44px; border: 0; border-radius: 10px; background: var(--pole); color: var(--ink); font: 400 24px/1 sans-serif; cursor: pointer; }
.gab .gab-kabinet__x:hover, .gab .gab-kabinet__x:focus-visible { background: rgba(127,127,127,.25); outline: none; }
.gab .gab-kabinet__deistviya { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.gab .gab-kabinet__h3 { margin: 18px 0 0; font-size: 15px; }
/* 44 px — тап-зона «Сохранить этот расчёт» / «Ссылка на расчёт» в кабинете (было 36; отчёт 000-22, 19.10). */
.gab .btn.malaya { min-height: 44px; padding: 6px 12px; font-size: 13px; }
/* Строка-приглашение под сводкой: фраза, поле почты, «Войти» в одну строку. */
.gab .gab-priglas { padding: 10px 14px; }
.gab .gab-priglas[hidden] { display: none; }
.gab .gab-vhod__forma--kratko { align-items: center; }
.gab .gab-vhod__forma--kratko .gab-vhod__t { flex: 1 1 320px; font-size: 14px; color: var(--tusklo); }
.gab .gab-vhod__forma--kratko input[type="email"] { flex: 1 1 180px; min-height: 38px; }
@media (max-width: 640px) { .gab .gab-vhod__forma--kratko .gab-vhod__t { flex-basis: 100%; font-size: 13px; } .gab .gab-vhod__forma--kratko input[type="email"] { flex: 1 1 120px; } }

/* Аккаунт */
.gab .gab-akkaunt h2 { font-size: 17px; }
.gab .gab-vhod__forma { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.gab .gab-vhod__forma input[type="email"] { flex: 1 1 220px; min-height: 42px; padding: 6px 10px; border-radius: 6px; }
.gab .gab-vhod__msg { font-size: 14px; margin: 8px 0 0; color: var(--tusklo); }
.gab .gab-vhod__msg a { color: var(--brand-blue-text); }
/* Простой вход (19.10.2026): код из письма на странице, подсказка при опечатке в почте. */
.gab .gab-vhod__forma input.gab-vhod__kod { flex: 0 1 190px; min-height: 42px; padding: 6px 12px; border-radius: 6px; font-size: 22px; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.gab .gab-vhod__eshche { font-size: 13px; margin: 8px 0 0; color: var(--tusklo); }
.gab .gab-vhod__forma input.gab-vhod__kod::placeholder { font-size: 15px; letter-spacing: normal; }
.gab .gab-vhod__ssylka, .gab .gab-vhod__podskazka { display: inline; width: auto; min-height: 0; margin: 0; background: none; border: 0; padding: 0; font: inherit; color: var(--brand-blue-text); text-decoration: underline; cursor: pointer; }
.gab .gab-vhod__podskazka { font-weight: 600; margin-left: 4px; }
/* Согласие на обработку ПД — своей строкой под полем и кнопкой. */
.gab .gab-vhod__soglasie { flex: 1 1 100%; display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.4; color: var(--tusklo); cursor: pointer; }
.gab .gab-vhod__forma .gab-vhod__soglasie input[type="checkbox"] { -webkit-appearance: checkbox; appearance: auto; flex: 0 0 18px; width: 18px; height: 18px; min-width: 0; min-height: 0; padding: 0; margin: 0; border-radius: 3px; accent-color: var(--brand-blue-text); }
.gab .gab-vhod__soglasie a { color: var(--brand-blue-text); }
.gab .gab-vhod__kto { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 14px; }
.gab .gab-moi { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.gab .gab-moi li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 14px; padding: 8px 10px; border: 1px solid var(--liniya); border-radius: 8px; }
/* Ссылка расчёта — на всю строку, не ниже 44 px (было 21; отчёт 000-22, 19.10): отрицательные поля съедают отступ
   строки, так что нажимается вся её левая часть, а «удалить» и дата остаются своими. */
.gab .gab-moi a { color: var(--brand-blue-text); text-decoration: none; flex: 1 1 12em; display: flex; align-items: center; min-height: 44px; margin: -8px 0 -8px -10px; padding: 8px 0 8px 10px; border-radius: 8px 0 0 8px; }
.gab .gab-moi a:focus-visible { outline: 2px solid var(--tt-green); outline-offset: -2px; }
.gab .gab-moi .kogda { color: var(--dim); font-size: 12px; margin-left: auto; }
/* Тап-зона «удалить» — не меньше 44 px (было 18; отчёт 000-22, 19.10): поле вокруг, текст тот же. */
.gab .gab-moi button { font: inherit; font-size: 12px; background: none; border: 0; color: var(--bad); cursor: pointer; min-height: 44px; min-width: 44px; padding: 0 10px; margin: -10px -10px -10px 0; }

/* --- «?» с расшифровкой (образец poryadok/hint-block.html) --------------- */
.gab .hint { position: relative; display: inline-grid; place-items: center; vertical-align: 1px;
  width: 17px; height: 17px; margin-left: 5px; border-radius: 50%;
  background: rgba(127,127,127,.18); color: var(--tusklo); font: 700 11px/1 inherit; cursor: help; font-family: inherit; }
.gab .hint:hover, .gab .hint:focus { background: var(--brand-blue); color: #fff; outline: none; }
/* Текст «?» внутри значка не показывается: его показывает одна всплывашка
   в <body> (src/podskazki.js, замечания 6) — её не перекрывают сцена и карточки. */
.gab .hint-txt { display: none; }
.gab h2 .hint, .gab h3 .hint { font-weight: 700; }
/* «?» — крупнее цель для пальца, сам значок прежний. */
@media (hover: none) { .gab .hint { position: relative; } .gab .hint::after { content: ''; position: absolute; inset: -12px; } }
@media (min-width: 601px) { .gab .tablica, .gab .gab-blok { overflow: visible; } }


/* Печать — без формы и шапки */
@media print { .gab .gab-start, .gab .gab-pravka, .gab .gab-bystro, .gab .gab-blok__niz, .gab .gab-akkaunt, .gab .gab-blok__pokazat { display: none !important; } .gab .gab-blok__telo { display: block !important; } }

/* Оформление 16.10 (план 2026-10-16-oformlenie-gabariti-v1): «Форма КП» — отдельный сервис,
   выделен синим ТТ ГРУПП (градиент и рамка); «Оставить заявку» — тёплый оранжевый ТТ ГРУПП:
   заявка менеджеру, не часть расчёта. Цвета разные, чтобы блоки не путались между собой. */
.gab .gab-kp { position: relative; border: 1px solid rgba(44,181,235,.45);
  background: radial-gradient(120% 140% at 100% 0%, rgba(44,181,235,.20) 0%, rgba(44,181,235,.06) 45%, transparent 75%), #1b2029;
  box-shadow: 0 0 0 1px rgba(44,181,235,.08), 0 14px 40px -18px rgba(44,181,235,.55); }
.gab .gab-kp__metka, .gab .gab-zayavka__metka { display: inline-block; margin: 0 0 8px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.gab .gab-kp__metka { background: rgba(44,181,235,.16); color: #7fd3f5; border: 1px solid rgba(44,181,235,.4); }
.gab .gab-kp h2 { font-size: 24px; }
.gab .gab-kp__obeshch { margin: 4px 0 6px; font-size: 18px; font-weight: 700; color: #fff; max-width: 820px; }
.gab .gab-kp__kol h3 { color: #7fd3f5; }
.gab .gab-kp__plyusy li { border-color: rgba(44,181,235,.28); background: rgba(44,181,235,.07); }
.gab .gab-kp__kn { min-width: 260px; font-size: 18px; box-shadow: 0 8px 24px -10px rgba(152,192,60,.8); }
.gab .gab-kp__pod { font-size: 13px; color: var(--tusklo); }

.gab .gab-zayavka { border: 1px solid rgba(245,88,36,.45); border-left: 4px solid var(--tt-orange);
  background: linear-gradient(135deg, rgba(245,88,36,.13) 0%, rgba(245,88,36,.03) 55%, transparent 80%), #1b2029; }
.gab .gab-zayavka h2 { flex-wrap: wrap; gap: 0 8px; }
.gab .gab-zayavka__metka { flex-basis: 100%; width: max-content; max-width: max-content; background: rgba(245,88,36,.16); color: #ff9d7a; border: 1px solid rgba(245,88,36,.45); }
.gab .gab-zayavka__niz .btn.big { background: var(--tt-orange); color: #fff; }
.gab .gab-zayavka__niz .btn.big:hover { background: #d9481a; }
.gab .gab-zayavka.polnyi { border-left-width: 1px; }

/* Листы: плитки «Раскладка» и «3D» под каруселью (.bf-prodolzhenie, 000-7) в Габаритах не нужны —
   эти блоки есть ниже. Сами слайды с a[data-dop-go] остаются: на них держатся kListu и лист 3D. */
.gab #gab-listy .bf-prodolzhenie { display: none; }
.gab .gab-svodka__knopki { align-items: center; }
/* Строка «Скачать PDF» карусели: справа «Поделиться» и красная «Править данные» (bloki.js, listyVverhu). */
.gab #gab-listy .gab-cta-pravka { border-color: #e2473b; background-color: #d7392d; color: #fff; }
.gab #gab-listy .gab-cta-pravka:hover { background-color: #b92c22; }
/* Перетаскивание мышью (app.js, listyListanie): курсор-рука, текст не выделяется. */
@media (pointer: fine) {
  .gab .bf-shema__track { cursor: grab; }
  .gab .bf-shema__track.tyanem { cursor: grabbing; scroll-snap-type: none; user-select: none; }
  .gab .bf-shema__track.tyanem .bf-shema__zoom { cursor: grabbing; }
}
/* Пустая полоса под подписью листа (оркестратор, 16.10): лента тянет все слайды до самого высокого,
   а у листов «Раскладка» и «3D» под чертежом кнопка-продолжение (.bf-shema__go-wrap, 44–66 px).
   Кладём её поверх листа (ПК — левый нижний угол, там пусто; телефон — над подписью) — слайды одной высоты, полосы нет; ссылка и kListu (a[data-dop-go]) целы. */
.gab #gab-listy .bf-shema__slide { position: relative; }
.gab #gab-listy .bf-shema__go-wrap { position: absolute; left: 0; right: 0; bottom: 44px; margin: 0; padding: 0 4%; display: flex; justify-content: flex-start; pointer-events: none; }
.gab #gab-listy .bf-shema__go-wrap .bf-shema__go { pointer-events: auto; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
@media (max-width: 640px) {
  /* Стрелки ‹ › на телефоне сжимались до 9 px краем ленты: листают свайп и точки. */
  .gab .bf-shema__nav .bf-shema__arrow { display: none; }
  .gab #gab-listy .bf-shema__go-wrap { bottom: 52px; padding: 0; justify-content: center; }
  .gab #gab-listy .bf-shema__go-wrap .bf-shema__go { font-size: 13px; padding: 6px 12px; }
  .gab .gab-kp h2 { font-size: 20px; }
  .gab .gab-kp__obeshch { font-size: 16px; }
  .gab .gab-kp__kn { width: 100%; min-width: 0; }
  .gab #gab-listy .bf-shema__cta .bf-btn { flex: 1 1 100%; min-height: 44px; }
}

/* 19.10 (Тимур): две карточки сервисов — «Форма КП» (синяя) и «CRM для вашего бизнеса» (фиолетовая) —
   рядом на ПК, одна под другой на телефоне. Одной высоты, кнопка — внизу каждой. */
.gab .gab-servisy { display: grid; gap: 16px; margin: 0 0 16px; }
.gab .gab-servisy > .card { margin: 0; }
@media (min-width: 1024px) {
  .gab .gab-servisy { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .gab .gab-servisy > .card { display: flex; flex-direction: column; }
  .gab .gab-servisy .gab-kp__kolonki { grid-template-columns: 1fr; gap: 12px; }
  .gab .gab-servisy .gab-kp h2, .gab .gab-servisy .gab-crm h2 { font-size: 22px; }
  .gab .gab-servisy .gab-kp__niz, .gab .gab-servisy .gab-crm__niz { margin-top: auto; padding-top: 12px; }
}
.gab .gab-servisy > .gab-crm[hidden] { display: none; }

.gab .gab-crm { position: relative; border: 1px solid rgba(155,107,255,.5);
  background: radial-gradient(120% 140% at 100% 0%, rgba(155,107,255,.22) 0%, rgba(155,107,255,.07) 45%, transparent 75%), #1b2029;
  box-shadow: 0 0 0 1px rgba(155,107,255,.08), 0 14px 40px -18px rgba(155,107,255,.6); }
.gab .gab-crm__metka { display: inline-block; margin: 0 0 8px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(155,107,255,.16); color: #c7b0ff; border: 1px solid rgba(155,107,255,.45); }
.gab .gab-crm h2 { font-size: 24px; margin: 0 0 6px; display: flex; align-items: center; flex-wrap: wrap; }
.gab .gab-crm__obeshch { margin: 4px 0 12px; font-size: 18px; font-weight: 700; color: #fff; }
.gab .gab-crm__spisok { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.gab .gab-crm__spisok li { position: relative; padding-left: 22px; }
.gab .gab-crm__spisok li::before { content: '✓'; position: absolute; left: 0; color: #b996ff; font-weight: 800; }
.gab .gab-crm__spisok b { color: #fff; }
.gab .gab-crm__spisok li.gab-crm__skoro { color: var(--tusklo); }
.gab .gab-crm__spisok li.gab-crm__skoro::before { content: '◷'; color: var(--tusklo); font-weight: 400; }
.gab .gab-crm__spisok li.gab-crm__skoro b { color: var(--tusklo); }
.gab .gab-crm__metka-skoro { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: rgba(255,255,255,.08); color: #e6e9ef; border: 1px dashed rgba(255,255,255,.35); vertical-align: 1px; }
.gab .gab-crm__plyusy { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; font-size: 14px; }
.gab .gab-crm__plyusy li { padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(155,107,255,.3); background: rgba(155,107,255,.08); }
.gab .gab-crm__plyusy b { color: #c7b0ff; }
.gab .gab-crm__niz { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.gab .gab-crm__kn { min-width: 260px; font-size: 18px; text-align: center; text-decoration: none; background: #8b5cf6; color: #fff; box-shadow: 0 8px 24px -10px rgba(139,92,246,.9); }
.gab .gab-crm__kn:hover { background: #7646e8; color: #fff; }
.gab .gab-crm__pod { font-size: 13px; color: var(--tusklo); }

/* «Личный кабинет»: две кнопки-перехода наверху панели — CRM (фиолетовая) и «Форма КП» (синяя), цветами карточек. */
.gab .gab-kabinet__servisy { display: grid; gap: 8px; margin: 0 0 14px; }
.gab .gab-kabinet__servis { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px; text-decoration: none; color: #fff; }
.gab .gab-kabinet__servis[hidden] { display: none; }
.gab .gab-kabinet__servis b { font-size: 16px; }
.gab .gab-kabinet__servis small { font-size: 12px; color: rgba(255,255,255,.75); }
.gab .gab-kabinet__servis--crm { background: linear-gradient(135deg, #8b5cf6, #6d3fd8); box-shadow: 0 8px 22px -12px rgba(139,92,246,.9); }
.gab .gab-kabinet__servis:hover { filter: brightness(1.08); color: #fff; }
@media (max-width: 640px) {
  .gab .gab-crm h2 { font-size: 20px; }
  .gab .gab-crm__obeshch { font-size: 16px; }
  .gab .gab-crm__plyusy { grid-template-columns: 1fr; }
  .gab .gab-crm__kn { width: 100%; min-width: 0; }
}

/* 19.10 (-2e): на телефоне сцена 3D в раскрытой плитке получала 243 px из 375 — вложенные отступы
   (#gab-bystro 18 + тело плитки 18 с каждой стороны). Панель — до краёв карточки, у тела плитки 10 px. */
@media (max-width: 640px) {
  .gab .gab-bystro__panel { margin-left: -18px; margin-right: -18px; }
  .gab .gab-bystro__panel .gab-blok__telo { padding-left: 10px; padding-right: 10px; }
}

/* 19.10 (Тимур): мини-карточки калькуляторов — вертикальные. Сверху картинка 16:9 во всю ширину
   (страница калькуляторов, uploads/calc/cards), название до 2 строк, описание до 3, «Открыть калькулятор →»
   прижата к низу; вся карточка — ссылка. Ряд одной высоты. ПК — 3 колонки, ≤ 900 px — 2, телефон — 1. */
.gab .gab-kalkulyatory__spisok { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
@media (max-width: 900px) { .gab .gab-kalkulyatory__spisok { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gab .gab-kalkulyatory__spisok { grid-template-columns: 1fr; } }
.gab .gab-kalk { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; border-radius: 12px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.gab .gab-kalk:hover, .gab .gab-kalk:focus-visible { transform: translateY(-3px); border-color: var(--tt-green); box-shadow: 0 12px 28px -14px rgba(0,0,0,.7); outline: none; }
.gab .gab-kalk__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #12151b; border-bottom: 1px solid var(--liniya); }
.gab .gab-kalk__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.gab .gab-kalk:hover .gab-kalk__img img { transform: scale(1.03); }
.gab .gab-kalk__img.pusto { display: grid; place-items: center; background: linear-gradient(135deg, rgba(152,192,60,.16), rgba(44,181,235,.10)); }
.gab .gab-kalk__img.pusto .gab-kalk__ik { width: 56px; height: 56px; font-size: 30px; }
.gab .gab-kalk__nazv { margin: 12px 14px 0; font-size: 15px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gab .gab-kalk__opis { margin: 6px 14px 0; font-size: 13px; line-height: 1.45; color: var(--tusklo); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gab .gab-kalk .gab-kalk__kn { margin: auto 14px 0; padding: 12px 0 14px; font-size: 14px; }

/* ===================== Паспорт здания над листами (19.10.2026, план okno-parametrov-v2) =====================
   Плашки с текущими значениями; тап — окошко под плашкой (ПК) или шторка снизу на полэкрана (≤640).
   Пишут в #gab-forma (app.js, модуль pasport), пересчёт сам через 600 мс. */
.gab .gab-rezultat { position: relative; }
.gab .gab-pasport { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.gab .gab-pasport__pl { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 7px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--liniya); background: var(--card); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.gab .gab-pasport__pl .s { color: var(--tusklo); font-size: 11px; transition: transform .15s; }
.gab .gab-pasport__pl:focus-visible { border-color: var(--tt-green); outline: none; }
.gab .gab-pasport__pl.otkryta { border-color: var(--tt-green); box-shadow: inset 0 0 0 1px var(--tt-green); }
.gab .gab-pasport__pl.otkryta .s { transform: rotate(180deg); }
/* Ждём пересчёт: вместо «▾» — маленький круговой индикатор. */
.gab .gab-pasport__pl.zhdu .s { width: 12px; height: 12px; font-size: 0; border: 2px solid var(--liniya); border-top-color: var(--tt-green); border-radius: 50%; animation: gab-krug .8s linear infinite; }
@keyframes gab-krug { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gab .gab-pasport__pl.zhdu .s { animation: none; border-color: var(--tt-green); } }
/* На время запроса цифры сводки и шапки бледнеют. */
.gab .gab-rezultat.schitaem .gab-svodka .plitki, .gab .gab-rezultat.schitaem .gab-varianty__ryad, .gab .gab-rezultat.schitaem .gab-svodka__deshevle { opacity: .45; transition: opacity .2s; }

.gab .gab-pop { position: absolute; z-index: 60; width: min(380px, calc(100% - 0px)); max-height: min(70vh, 560px); overflow: auto; padding: 16px 16px 14px;
  background: var(--card); color: var(--ink); border: 1px solid var(--liniya); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.28); }
.gab .gab-pop[hidden] { display: none; }
.gab .gab-pop h3 { margin: 0 32px 10px 0; font-size: 16px; }
.gab .gab-pop__x { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; border: 0; background: none; color: var(--tusklo); font-size: 24px; line-height: 1; cursor: pointer; border-radius: 8px; }
.gab .gab-pop__x:hover { color: var(--ink); }
.gab .gab-pop__ryad { margin: 0 0 12px; }
.gab .gab-pop__t { margin: 0 0 6px; font-size: 12px; color: var(--tusklo); text-transform: uppercase; letter-spacing: .04em; }
.gab .gab-pop__knopki { display: flex; flex-wrap: wrap; gap: 6px; }
.gab .gab-pop__kn { min-height: 44px; min-width: 44px; padding: 6px 12px; border-radius: 10px; cursor: pointer; font: inherit; font-size: 14px;
  border: 1px solid var(--liniya); background: var(--pole); color: var(--ink); }
.gab .gab-pop__kn:focus-visible { border-color: var(--tt-green); outline: none; }
.gab .gab-pop__kn.tek { border-color: var(--tt-green); background: rgba(152,192,60,.16); box-shadow: inset 0 0 0 1px var(--tt-green); font-weight: 700; }
.gab .gab-pop__kn--skat { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 16px; flex: 1 1 0; }
.gab .gab-pop__kn--skat svg { width: 64px; height: 40px; }
.gab .gab-pop__pod { margin: 6px 0 0; font-size: 13px; color: var(--tusklo); line-height: 1.4; }
.gab .gab-pop__chislo { display: grid; grid-template-columns: 1fr 44px 86px 44px 22px; align-items: center; gap: 6px; margin: 0 0 8px; }
.gab .gab-pop__chislo .gab-pop__t { margin: 0; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); }
.gab .gab-pop__pm { height: 44px; border-radius: 10px; border: 1px solid var(--liniya); background: var(--pole); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.gab .gab-pop__pm:focus-visible { border-color: var(--tt-green); outline: none; }
.gab .gab-pop__chislo input { height: 44px; width: 100%; box-sizing: border-box; text-align: center; font: inherit; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums;
  border: 1px solid var(--liniya); border-radius: 10px; background: var(--pole); color: var(--ink); -moz-appearance: textfield; }
.gab .gab-pop__chislo input::-webkit-inner-spin-button, .gab .gab-pop__chislo input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.gab .gab-pop__m { color: var(--tusklo); font-size: 13px; }
.gab .gab-pop__svoi[hidden] { display: none; }
.gab .gab-pop__dalshe { margin: 10px 0 0; }
.gab .gab-pop__gorod .gab-gorod__pole { width: 100%; box-sizing: border-box; }
/* Город в окошке: список подсказок — в потоке окошка, а не поверх края. */
.gab .gab-pop__gorod .gab-gorod__spisok { position: static; max-height: 40vh; }

@media (max-width: 640px) {
  .gab .gab-pasport { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 10px; padding: 0 16px; scroll-padding: 0 16px; }
  .gab .gab-pasport::-webkit-scrollbar { display: none; }
  .gab .gab-pasport__pl { min-height: 44px; flex: 0 0 auto; }
  /* Шторка на половину экрана: листы остаются видны сверху. */
  /* z-index выше баннера cookies темы (.rgpd, 300): иначе он закрывает низ шторки. */
  .gab .gab-pop { z-index: 310; position: fixed; left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; max-height: 52vh; border-radius: 16px 16px 0 0;
    padding-bottom: calc(14px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px rgba(0,0,0,.35); }
  .gab .gab-pop__chislo { grid-template-columns: 1fr 48px 80px 48px 22px; }
}

/* Правка с листа «Общий вид»: прозрачные зоны поверх строк «Описания объекта» (app.js, zony).
   Слой вне SVG — в «Увеличить» и PDF зон нет; лист под ними листается и открывается как раньше. */
.gab .bf-shema__slide { position: relative; }
.gab .gab-zony { position: absolute; pointer-events: none; z-index: 2; }
.gab .gab-zona { position: absolute; pointer-events: auto; margin: 0; padding: 0; border: 0; border-radius: 4px; background: transparent; cursor: pointer; }
.gab .gab-zona:focus-visible { background: rgba(152,192,60,.22); box-shadow: inset 0 0 0 1.5px var(--tt-green); outline: none; }
.gab .gab-zona[data-pl="opisanie"] { box-shadow: inset 0 0 0 1.5px rgba(152,192,60,.7); }
.gab .gab-pop__spisok { display: flex; flex-direction: column; gap: 6px; }
.gab .gab-pop__kn--stroka { display: flex; justify-content: space-between; gap: 12px; text-align: left; }
.gab .gab-pop__kn--stroka span { color: var(--tusklo); }

/* Варианты каркаса (19.10): разница с тем, что на экране, — дешевле зелёным, дороже серым; строка под сводкой. */
.gab .gab-variant__delta { margin: -2px 0 6px; font-size: 14px; font-weight: 700; color: var(--tusklo); font-variant-numeric: tabular-nums; }
.gab .gab-variant__delta.deshevle { color: var(--brand-green-text, #23804a); }
.gab .gab-svodka__deshevle { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--brand-green-text, #23804a); }
.gab .gab-svodka__deshevle .gab-ssylka-knopka { font-weight: 700; }

/* Подсветка наведением — только у мыши: на тач-экране :hover залипает на последней нажатой кнопке. */
@media (hover: hover) {
  .gab .gab-pasport__pl:hover, .gab .gab-pop__kn:hover, .gab .gab-pop__pm:hover { border-color: var(--tt-green); }
  .gab .gab-zona:hover { background: rgba(152,192,60,.22); box-shadow: inset 0 0 0 1.5px var(--tt-green); }
}

/* 20.10 (отчёт 000-22): цена в окошке параметра — на телефоне шторка закрывает сводку. Справа место под «×». */
.gab .gab-pop__itog { margin: -4px 44px 10px 0; padding: 0 0 8px; border-bottom: 1px solid var(--liniya); font-size: 13px; }
.gab .gab-pop__itog .k { color: var(--tusklo); }
.gab .gab-pop__cena { font-size: 17px; color: var(--brand-green-text); font-variant-numeric: tabular-nums; transition: opacity .2s; }
.gab .gab-pop__itog.zhdu .gab-pop__cena { opacity: .45; }
.gab .gab-pop__itog.zhdu .k::after { content: ' · считаем…'; }
.gab .gab-pop__smena { margin: 6px 0 0; padding: 6px 8px; border-radius: 6px; background: rgba(245,166,35,.12); color: var(--ink); font-size: 12px; line-height: 1.4; }
.gab .gab-pop__smena[hidden] { display: none; }