/* ------------------------------------------------------------------
   СЕКЦИЯ КОНТАКТОВ · написана ПО ЭТАЛОНУ, а не собрана зеркалом кита.

   Решение владельца 06.09.2026: пакет Claude Design обобщил девять живых
   раскладок в девять абстрактных обёрток с гнёздами, которые нечем
   заполнить, - отсюда пустые колонки и «шахматный порядок» на экране.
   Источником правды стал сам эталон; числа сняты живьём, каждое с
   указанием набора: docs/konkurent/kontakty-zhivyom.md.

   Цена решения названа вслух: правило проекта «стили секции - зеркало,
   руками не правятся» для ЭТОЙ секции снято, `tools/adopt-contacts.php`
   из цепочки выведен. Значит правку этого файла больше не перетирает
   пересборка - но и защиты от расхождения с макетом больше нет.

   Схем три, и они закрывают все девять наборов:
     row   - две колонки 50/50, медиа во всю высоту   (наборы 1, 2, 8)
     grid  - колонки равные или неравные              (наборы 4, 5, 7)
     stack - шапка сверху, тело под ней               (наборы 3, 6, 9)
   Плюс оболочка `card`: снимок фоном секции, содержимое в карточке (5).

   RTL: только логические свойства, физических нет ни одного.
   ------------------------------------------------------------------ */

.ls-contacts {
  /* Мера и поля контейнера - замер эталона: 1536 при поле 24. */
  --ls-c-max: 1536px;
  --ls-c-gut: 24px;
  /* Зазор схемы печатает PHP из реестра: 96, 72, 48 или 0. */
  --ls-c-gap: 96px;

  /* Форма. Числа замерены у эталона на бумаге 1655: поле 696x62. */
  --ls-c-field-h: 62px;
  --ls-c-field-r: calc(16px * var(--ls-r-k, 1));
  --ls-c-field-pad: 18px 30px;
  --ls-c-field-gap: 16px;
  --ls-c-label-gap: 6px;
  --ls-c-area-h: 240px;
  --ls-c-btn-h: 56px;

  /* Типографика. Заголовок 61.04/70.19 w600, подпись поля 12.8/17.92 w400. */
  --ls-c-title: 61px;
  --ls-c-title-lh: 1.15;
  --ls-c-body: 16px;
  --ls-c-label: 12.8px;
  --ls-c-label-lh: 1.4;

  /* Линия поля идёт СВЕТЛОЙ ролью, а не чернилами: у эталона это
     rgb(238,244,236) на тёмной плоскости - то есть роль «линия», а не
     текст. Кит велел вести контур чернилами, и на экране это давало
     жирные чёрные коробки - первое, на что показал владелец.

     С 07.09.2026 первой идёт РАМКА ОРГАНА (`--ls-edge`), а не разделитель.
     Разница не косметическая: у разделителя порог видимости 1.2 по договору
     палитр, и при своём цвете человека поле переставало быть заметным вовсе.
     `--ls-edge` считается той же арифметикой, но до 3:1, и это САМАЯ ТИХАЯ
     видимая доля, а не чернило - жирные коробки не возвращаются. Запас на
     `--ls-line` оставлен для установки, где палитру печатает прежний код. */
  --ls-c-line: var(--ls-edge, var(--ls-line, rgba(0, 0, 0, .14)));
  --ls-c-ink: var(--ls-ink, #23201c);
  --ls-c-muted: var(--ls-muted, #6d675f);

  position: relative;
  padding-block: clamp(64px, 7vw, 112px);
  background: var(--ls-paper, #f7f4ef);
  color: var(--ls-c-ink);
}

.ls-contacts__wrap {
  position: relative;
  box-sizing: border-box;
  max-inline-size: var(--ls-c-max);
  margin-inline: auto;
  padding-inline: var(--ls-c-gut);
}

/* ------------------------------------------------------------------
   СХЕМА 1 · РЯД. Две колонки 50/50, зазор из реестра, медиа тянется по
   высоте формы. Замер: контейнер 1536, колонки 696, зазор 96.
   ------------------------------------------------------------------ */
.ls-contacts[data-shape="row"] .ls-contacts__wrap {
  display: flex;
  flex-direction: row;
  gap: var(--ls-c-gap);
}

.ls-contacts[data-shape="row"] .ls-contacts__col {
  flex: 1 1 50%;
  /* Без этого колонка грида распирается до min-content своего содержимого -
     записанная грабля проекта, стоившая раскладки дважды. */
  min-inline-size: 0;
}

/*
 * КОЛОНКА МЕДИА ТЯНЕТ СВОЙ КАДР ДО НИЗА - замер эталона: у него медиа `basis-1/2` и высота
 * равна колонке с формой. Без этого кадр брал свою минимальную меру, и под снимком оставалась
 * белая полоса - видно на витрине у набора 2.
 */
.ls-contacts[data-shape="row"] .ls-contacts__col--media {
  display: flex;
}

.ls-contacts[data-shape="row"] .ls-contacts__col--media > .ls-contacts__media {
  flex: 1 1 auto;
}

.ls-contacts[data-shape="row"] .ls-contacts__col--main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 48px;
}

/* ------------------------------------------------------------------
   СХЕМА 2 · СЕТКА. `even` - равные колонки (замер: 732 и 732 при зазоре
   ноль), `split` - узкая и широкая (576 и 672 при зазоре 48).
   ------------------------------------------------------------------ */
.ls-contacts[data-shape="grid"] .ls-contacts__wrap {
  display: grid;
  gap: var(--ls-c-gap);
  align-items: start;
}

.ls-contacts[data-shape="grid"][data-cols="even"] .ls-contacts__wrap {
  grid-template-columns: 1fr 1fr;
}

.ls-contacts[data-shape="grid"][data-cols="split"] .ls-contacts__wrap {
  /* Пропорция взята замером (576 и 672), а не выдумана; в долях она
     переживает смену меры контейнера, чего постоянное число не умеет. */
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
}

.ls-contacts[data-shape="grid"] .ls-contacts__col {
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Набор 7: зазора нет вовсе, колонки разделены линией правой половины.
   Линия горизонтальная - в RTL не зеркалится и не должна. */
.ls-contacts[data-shape="grid"][data-cols="even"] .ls-contacts__col--form {
  border-block: 1px solid var(--ls-c-line);
  padding-block: 48px;
  padding-inline-start: 48px;
  justify-content: center;
}

.ls-contacts[data-shape="grid"][data-cols="even"] .ls-contacts__col--head {
  padding-block: 48px;
}

/* ------------------------------------------------------------------
   СХЕМА 3 · КОЛОНКА. Шапка сверху, тело под ней. Тело бывает трёх видов
   и выбирается ОДНИМ полем реестра.
   ------------------------------------------------------------------ */
.ls-contacts[data-shape="stack"] .ls-contacts__wrap {
  display: flex;
  flex-direction: column;
  gap: var(--ls-c-gap);
}

.ls-contacts__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.ls-contacts__body > .ls-contacts__col {
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Форма во всю ширину: сетки нет вовсе, тело - одна колонка. */
.ls-contacts__body[data-body="form-wide"] {
  display: flex;
  flex-direction: column;
  /* Контакты стоят ОТДЕЛЬНЫМ блоком: без зазора они прилипали к кнопке отправки -
     видно на витрине у набора 6, замечено глазами. */
  gap: 40px;
}

/* Ряд «контакты и снимок»: снимок шире контактов - замер 576 против 816. */
.ls-contacts__body[data-body="links-shot"] {
  grid-template-columns: minmax(0, 41fr) minmax(0, 59fr);
}

/* ------------------------------------------------------------------
   ОБОЛОЧКА · снимок фоном секции, содержимое в карточке с рамкой.
   Замер набора 5: карточка 1488x970, скругление 16, полоска 54, линия 1.
   ------------------------------------------------------------------ */
.ls-contacts[data-shell="card"] .ls-contacts__wrap {
  display: block;
}

.ls-contacts__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.ls-contacts__bg img,
.ls-contacts__bg .ls-contacts__frame {
  inline-size: 100%;
  block-size: 100%;
}

.ls-contacts__bg img {
  object-fit: cover;
}

.ls-contacts__card {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  border: 1px solid var(--ls-c-line);
  border-radius: calc(16px * var(--ls-r-k, 1));
  background: var(--ls-paper, #f7f4ef);
  overflow: hidden;
}

.ls-contacts__card-top {
  padding: 12px 16px;
}

.ls-contacts__card-line {
  block-size: 1px;
  background: var(--ls-c-line);
}

.ls-contacts__card-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.ls-contacts__card-body > .ls-contacts__col {
  min-inline-size: 0;
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ------------------------------------------------------------------
   ЗАГОЛОВОЧНЫЙ БЛОК · три меры, каждая замерена у эталона.
   ------------------------------------------------------------------ */
.ls-contacts__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ls-contacts__head[data-head="narrow"] {
  max-inline-size: 896px;
}

/* Заголовок и текст рядом: замер набора 6 - две колонки по 726, зазор 24. */
.ls-contacts__head[data-head="pair"] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
  max-inline-size: none;
}

.ls-contacts__eyebrow {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: var(--ls-c-label);
  line-height: var(--ls-c-label-lh);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ls-c-muted);
}

/* Черта рядом с надстрочной - замер эталона: линия справа от слова. */
.ls-contacts__eyebrow::after {
  content: "";
  flex: 0 0 40px;
  block-size: 1px;
  background: currentColor;
  opacity: .5;
}

.ls-contacts__title {
  margin: 0;
  font-family: var(--ls-head-face, inherit);
  font-size: clamp(34px, 3.8vw, var(--ls-c-title));
  line-height: var(--ls-c-title-lh);
  font-weight: 600;
  letter-spacing: -.02em;
}

.ls-contacts__lede {
  margin: 0;
  font-size: var(--ls-c-body);
  line-height: 1.55;
  color: var(--ls-c-muted);
  max-inline-size: 62ch;
}

/* ------------------------------------------------------------------
   ФОРМА · числа замерены на бумаге 1655: поле 696x62, зазор полей 16,
   подпись 12.8/17.92 обычного веса, рамка светлая в одну точку.
   ------------------------------------------------------------------ */
.ls-contacts__form {
  display: flex;
  flex-direction: column;
  gap: var(--ls-c-field-gap);
  inline-size: 100%;
}

.ls-contacts__field {
  display: flex;
  flex-direction: column;
  gap: var(--ls-c-label-gap);
}

.ls-contacts__label {
  font-size: var(--ls-c-label);
  line-height: var(--ls-c-label-lh);
  font-weight: 400;
  color: var(--ls-c-ink);
}

.ls-contacts__req {
  margin-inline-start: 2px;
  color: var(--ls-c-muted);
}

.ls-contacts__input,
.ls-contacts__area,
.ls-contacts__select {
  box-sizing: border-box;
  inline-size: 100%;
  font: inherit;
  font-size: var(--ls-c-body);
  color: inherit;
  background: transparent;
  border: 1px solid var(--ls-c-line);
  border-radius: var(--ls-c-field-r);
  padding: var(--ls-c-field-pad);
}

.ls-contacts__input,
.ls-contacts__select {
  block-size: var(--ls-c-field-h);
}

.ls-contacts__area {
  block-size: var(--ls-c-area-h);
  resize: vertical;
}

.ls-contacts__input:hover,
.ls-contacts__area:hover,
.ls-contacts__select:hover {
  border-width: 2px;
}

/* Рамка правимого текста обязана оставаться голубой - правило проекта;
   поэтому фокус называет СВОЙ узел и не ловит `.sc-se__edit`. */
/* Отступа у кольца нет: оно идёт РОВНО по контуру поля, и скругление наследует от него же.
   Стояло `2px`, и кольцо выходило шире поля - жалоба владельца 09.09.2026 дословно: «он
   должен точно попасть в его очертания, не больше, не меньше». */
.ls-contacts__input:focus-visible,
.ls-contacts__area:focus-visible,
.ls-contacts__select:focus-visible {
  outline: 2px solid var(--ls-acc, #1f4f6b);
  outline-offset: 0;
}

.ls-contacts__field[data-invalid="1"] .ls-contacts__input,
.ls-contacts__field[data-invalid="1"] .ls-contacts__area,
.ls-contacts__field[data-invalid="1"] .ls-contacts__select {
  border-width: 3px;
}

.ls-contacts__radios {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ls-contacts__radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--ls-c-line);
  border-radius: var(--ls-r-pill, 999px);
  cursor: pointer;
  font-size: var(--ls-c-body);
}

.ls-contacts__radio input {
  position: absolute;
  opacity: 0;
  inline-size: 1px;
  block-size: 1px;
}

.ls-contacts__radio-dot {
  inline-size: 14px;
  block-size: 14px;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.ls-contacts__radio input:checked + .ls-contacts__radio-dot {
  background: currentColor;
  box-shadow: inset 0 0 0 3px var(--ls-paper, #f7f4ef);
}

.ls-contacts__radio:has(input:checked) {
  border-width: 2px;
}

.ls-contacts__submit {
  box-sizing: border-box;
  align-self: flex-start;
  min-block-size: var(--ls-c-btn-h);
  padding-inline: 32px;
  border: 0;
  border-radius: calc(12px * var(--ls-r-k, 1));
  background: var(--ls-acc, #1f4f6b);
  color: var(--ls-acc-on, #fff);
  font: inherit;
  font-size: var(--ls-c-body);
  font-weight: 500;
  cursor: pointer;
}

/*
 * КНОПКА ВО ВСЮ ШИРИНУ КОЛОНКИ - У ДВУХ НАБОРОВ, И ОБА НАЗВАНЫ ЗАМЕРОМ.
 *
 * `kontakty-zhivyom.md` про набор 7: «кнопка отправки во всю ширину колонки»; про набор 5:
 * «кнопка "Send message" ВО ВСЮ ШИРИНУ колонки». Замерено у нас 06.09.2026: 207 точек при
 * колонке 743 и 744, то есть 28 процентов вместо ста.
 *
 * Условие спрашивает СХЕМУ И КОЛОНКИ, а не номер набора: `even` у сетки сегодня ровно у этих
 * двух, а список номеров пришлось бы помнить пополнять. Набор 4 сюда не подпадает - у него
 * `split`, и у эталона кнопка там своей ширины.
 */
.ls-contacts[data-shape="grid"][data-cols="even"] .ls-contacts__submit {
  inline-size: 100%;
}

.ls-contacts__submit:disabled {
  cursor: default;
  opacity: .7;
}

/*
 * СТРОКА СОГЛАСИЯ ПОД КНОПКОЙ (02.10.2026). Своего замера у эталона нет - у него этой строки
 * нет вовсе, - поэтому чисел своих не заводится: кегль и интерлиньяж взяты у подписи поля
 * (`--ls-c-label`), цвет - приглушённая роль секции. Строка служебная и не должна спорить с
 * кнопкой над ней; мера ограничена той же 62ch, что держит колонку чтения.
 *
 * Узкой ветки у неё нет намеренно: значения переменных, которые она читает, узкая ветка уже
 * не трогает, а форма - колонка, то есть строка и так занимает её ширину на любой бумаге.
 */
.ls-contacts__consent {
  margin: 0;
  max-inline-size: 62ch;
  font-size: var(--ls-c-label);
  line-height: var(--ls-c-label-lh);
  color: var(--ls-c-muted);
  text-wrap: pretty;
}

/* Текст и ссылка - строчные части одной строки; у текста своих значений нет, класс нужен
   правке (адрес `content.privacy_note`) и сторожу «у напечатанного класса есть правило». */
.ls-contacts__consent-text {
  /* нет своих значений: оформление несёт строка целиком */
}

/* Ссылка отличается от текста подчёркиванием, а не только цветом: смысл не держится на
   цвете (правило 4.3 свода), и на своей плоскости секции цвет мог бы совпасть. */
.ls-contacts__consent-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ls-contacts__consent-link:hover {
  color: var(--ls-c-ink);
}

/* ------------------------------------------------------------------
   КОНТАКТЫ · строки и ссылки.
   ------------------------------------------------------------------ */
.ls-contacts__facts,
.ls-contacts__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: var(--ls-c-body);
  line-height: 1.5;
}

.ls-contacts__fact {
  display: flex;
  align-items: center;
  gap: 10px;
  font-style: normal;
  color: var(--ls-c-muted);
}

.ls-contacts__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.ls-contacts__link:hover {
  text-decoration-thickness: 3px;
}

.ls-contacts__hours-dot {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: currentColor;
}

/* ------------------------------------------------------------------
   МЕДИА · в схеме `row` тянется по высоте колонки; отдельно стоящий
   снимок держит пропорцию 4:3 (замер набора 9: 816x576).
   ------------------------------------------------------------------ */
.ls-contacts__media {
  inline-size: 100%;
  block-size: 100%;
}

.ls-contacts__frame {
  position: relative;
  overflow: hidden;
  border-radius: calc(16px * var(--ls-r-k, 1));
  block-size: 100%;
  min-block-size: 320px;
  background: var(--ls-band, #eae4da);
}

.ls-contacts__body[data-body="links-shot"] .ls-contacts__frame {
  aspect-ratio: 4 / 3;
  block-size: auto;
}

/*
 * СЛОЙ ПРАВКИ МЕЖДУ КАДРОМ И СНИМКОМ ВЫСОТЫ НЕ ИМЕЕТ - и потому снимок её терял.
 *
 * `sc_site_v2_photo()` печатает вокруг `<img>` свою обёртку (она несёт плашку правки), а у
 * обёртки высота `auto`: замерено на витрине - кадр 658, картинка внутри 522, под ней белая
 * полоса. Это записанная грабля проекта, и лечится она здесь, а не в общем печатнике: высота
 * нужна ровно там, где кадр её задаёт.
 */
.ls-contacts__frame > * {
  block-size: 100%;
}

.ls-contacts__frame img,
.ls-contacts__frame iframe {
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  object-fit: cover;
  display: block;
}

.ls-contacts__invite {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-block-size: 220px;
  color: var(--ls-c-muted);
}

/* ------------------------------------------------------------------
   УЗКАЯ БУМАГА · порог 700 по ширине БУМАГИ, а не окна. Все схемы
   схлопываются в одну колонку; медиа встаёт первым - замер эталона.
   ------------------------------------------------------------------ */
@container ls (width <= 700px) {
  .ls-contacts {
    --ls-c-gap: 40px;
    --ls-c-field-h: 54px;
    --ls-c-area-h: 196px;
    --ls-c-title: 46px;
  }

  .ls-contacts[data-shape="row"] .ls-contacts__wrap,
  .ls-contacts[data-shape="grid"] .ls-contacts__wrap {
    display: flex;
    flex-direction: column;
  }

  /*
   * ПРИЗНАК `data-body` ЗДЕСЬ ОБЯЗАТЕЛЕН, И ЭТО НЕ УКРАШЕНИЕ СЕЛЕКТОРА.
   *
   * Одиночный класс даёт специфичность (0,1,0) и проигрывает правилу
   * `.ls-contacts__body[data-body="links-shot"]` (0,2,0), объявленному выше; контейнерный
   * запрос специфичность НЕ поднимает. Замерено на витрине 06.09.2026 при бумаге 390: набор 9
   * оставался двухколоночным, снимок ужимался до 123x92 при контактах 177 - то есть узкая
   * ветка молча не срабатывала ровно у того набора, где вся тяжесть на снимке и контактах.
   * Это записанная грабля проекта «правило, написанное одиночным классом, проигрывает правилу
   * из двух»; `[data-body]` уравнивает вес, а побеждает порядок объявления.
   *
   * Тело печатается с этим признаком ВСЕГДА (`sc_site_contacts_stack()`), поэтому ни один
   * набор из-под правила не выпадает.
   */
  .ls-contacts__body[data-body],
  .ls-contacts__card-body,
  .ls-contacts__head[data-head="pair"] {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .ls-contacts[data-shape="row"] .ls-contacts__col--media,
  .ls-contacts__body[data-body="links-shot"] .ls-contacts__col--media {
    order: -1;
  }

  .ls-contacts__frame {
    aspect-ratio: 4 / 3;
    block-size: auto;
    min-block-size: 0;
  }

  .ls-contacts[data-shape="grid"][data-cols="even"] .ls-contacts__col--form {
    border-block: 0;
    padding-inline-start: 0;
    padding-block: 0;
  }

  .ls-contacts__card-body > .ls-contacts__col {
    padding: 24px;
  }

  .ls-contacts__submit {
    align-self: stretch;
    text-align: center;
  }
}

@container ls (width <= 480px) {
  .ls-contacts {
    --ls-c-field-h: 52px;
    --ls-c-area-h: 168px;
    --ls-c-title: 40px;
  }

  .ls-contacts__frame {
    aspect-ratio: 1 / 1;
  }
}

/* ------------------------------------------------------------------
   СОСТОЯНИЯ ФОРМЫ · шесть, и у каждого не меньше двух признаков, один
   из которых слово. Красного в ролях нет вовсе - ошибку несёт текст.
   ------------------------------------------------------------------ */
.ls-contacts__err {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: var(--ls-c-label);
  line-height: var(--ls-c-label-lh);
  color: var(--ls-c-ink);
}

.ls-contacts__field[data-invalid="1"] .ls-contacts__err {
  display: flex;
}

.ls-contacts__bar,
.ls-contacts__wait,
.ls-contacts__alert,
.ls-contacts__reply {
  display: none;
}

.ls-contacts__form[data-state="sending"] .ls-contacts__wait {
  display: flex;
  font-size: var(--ls-c-body);
  color: var(--ls-c-muted);
}

.ls-contacts__form[data-state="sending"] .ls-contacts__bar {
  display: block;
  block-size: 2px;
  background: var(--ls-acc, #1f4f6b);
  animation: ls-c-bar 1.2s linear infinite;
}

/*
 * ЗНАК ИНЛАЙНОВОЙ ОСИ - `--ls-mirror`, И ХОЗЯИН У НЕГО ОДИН НА ТЕМУ.
 *
 * Первая редакция завела своё имя `--ls-c-mirror` и своё зеркало на `[dir="rtl"]` - то есть
 * ВТОРОЕ ИМЯ живого значения, которое обложка объявляет с 403-й строки `hero.css`. Это
 * записанный класс проекта: два хозяина расходятся при первой правке, и расходится тот, кого
 * сегодня никто не открывает.
 *
 * Заодно ушёл `translate3d` с ненулевым X: линтер ловит его по построению, а оговоркой
 * `rtl-ok` он закрывался бы ПОСТРОЧНО - вторая строка кадра осталась бы без якоря. Свойство
 * `translate` тот же ход пишет короче, и обложка уже ходит им.
 */
@keyframes ls-c-bar {
  from { translate: calc(-100% * var(--ls-mirror, 1)) 0; }
  to { translate: calc(300% * var(--ls-mirror, 1)) 0; }
}

.ls-contacts { --ls-mirror: 1; }

[dir="rtl"] .ls-contacts { --ls-mirror: -1; }

.ls-contacts__form[data-state="failed"] .ls-contacts__alert--failed,
.ls-contacts__form[data-state="repeat"] .ls-contacts__alert--repeat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  border: 3px solid var(--ls-c-ink);
  border-radius: calc(16px * var(--ls-r-k, 1));
  padding: 20px 24px;
}

.ls-contacts__form[data-state="repeat"] .ls-contacts__alert--repeat {
  border-width: 1px;
}

.ls-contacts__form[data-state="sending"] .ls-contacts__submit,
.ls-contacts__form[data-state="repeat"] .ls-contacts__submit {
  background: transparent;
  color: var(--ls-c-ink);
  border: 1px dashed var(--ls-c-ink);
}

/* Отправлено: форма ЗАМЕНЯЕТСЯ ответом на своём месте, страница не
   прыгает. Правило написано селектором дочерности, поэтому ответ обязан
   быть прямым потомком формы - это стережёт проверка набора. */
.ls-contacts__form[data-state="sent"] > *:not(.ls-contacts__reply) {
  display: none;
}

.ls-contacts__form[data-state="sent"] .ls-contacts__reply {
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
  border: 1px solid var(--ls-c-ink);
  border-radius: calc(18px * var(--ls-r-k, 1));
  padding: 32px;
}

.ls-contacts__reply:focus-visible {
  outline: 3px solid var(--ls-acc, #1f4f6b);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------
   ОСТАЛЬНЫЕ ОРГАНЫ · подложка карты, обёртка списка, модификаторы ссылок.
   Каждый из них ПЕЧАТАЕТ рендерер, и правило обязано быть: класс без
   правила не даёт ни ошибки, ни следа - записанная грабля проекта.
   ------------------------------------------------------------------ */
/*
 * КАДР КАРТЫ ЗАНИМАЕТ ГНЕЗДО ЦЕЛИКОМ. У `iframe` есть браузерная рамка, и без сброса она
 * рисует вокруг карты серую линию поверх скругления кадра.
 */
.ls-contacts__map {
  inline-size: 100%;
  block-size: 100%;
  display: block;
  border: 0;
}

.ls-contacts__select-wrap {
  position: relative;
  display: block;
}

/* Модификаторы ссылок различают телефон и почту для кита и для правки;
   собственных значений у них сегодня нет, и объявлены они пустыми
   намеренно - лишнее правило врало бы о различии, которого нет. */
.ls-contacts__link--phone,
.ls-contacts__link--mail {
  /* нет своих значений: различие несёт схема ссылки, а не оформление */
}

/* ------------------------------------------------------------------
   СЛУЖЕБНАЯ СТРОКА СЛОЯ - «эти пустые места видите только вы».

   Печатает её общий хозяин `sc_site_v2_gap_note()`; без объявления она
   была бы напечатана и невидима - записанная грабля проекта, стоившая
   целого захода. Значения взяты у соседних китов (обложка, предложение,
   показатели) ПОБАЙТОВО: узел общий на весь слой, и вторая редакция
   разошлась бы с первой молча.

   Признак спрашивается у страницы И у обёртки секции: обёртку печатает
   не каждая секция, а `.ls-page` есть всегда.
   ------------------------------------------------------------------ */
.ls-only-edit{display:none}
.ls-w[data-edit] .ls-only-edit,.ls-page[data-edit] .ls-only-edit{display:flex;align-items:center;gap:8px;background:color-mix(in oklab,#fff 88%,transparent);color:#3f4650;
  margin-block-start:20px;padding-block:8px;padding-inline:12px;
  border-inline-start:2px solid var(--ls-line,rgba(0,0,0,.14));
  font-size:var(--ls-sm,14px);color:var(--ls-muted,#666);text-wrap:pretty}
.ls-only-edit .sc-icon{flex:none;font-size:18px;opacity:.7}

/* Служебная строка не участвует в раскладке колонок: у `row` контейнер флексовый,
   у `grid` - сеточный, и без этого правила она встала бы ЕЩЁ ОДНОЙ колонкой рядом с
   формой. Оба свойства нужны вместе - какое из них сработает, решает форма раскладки. */
.ls-contacts__wrap > .ls-only-edit{grid-column:1 / -1;flex-basis:100%}