/* Базовые стили — ТЗ 4.2, 4.3.
 *
 * Запрещено и не используется: градиенты, backdrop-blur, мягкие большие
 * тени, скругления более 2px, сгенерированные ИИ-изображения и 3D,
 * эмодзи-иконки.
 *
 * Логотип Организации — не нарушение, а то, что ТЗ прямо ждёт: герб
 * присылает заказчик, и в нём ровно два цвета — те же, что в палитре.
 * Вёрстка его не перекрашивает и не перерисовывает.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  /* Страница — колонка из трёх частей: шапка, содержимое, подвал.
     Содержимое растягивается на всю свободную высоту, и на коротких
     страницах (уведомления, «Мои компании») подвал остаётся у нижнего
     края окна, а не висит сразу под коротким текстом. */
  display: flex;
  flex-direction: column;
  /* Название компании — одно неразрывное слово: «ООО «Проверка-6028-А»»,
     ИНН, адрес сайта. Переноса по умолчанию у таких кусков нет, и в
     карточке каталога шириной 280px длинное название выходило за рамку.
     break-word рвёт слово только тогда, когда иначе оно не влезает
     целиком, поэтому короткие названия не трогает. */
  overflow-wrap: break-word;
}

/* Содержимое растёт на всю свободную высоту — подвал прижат к низу. */
main {
  flex: 1 0 auto;
}

h1,
h2,
h3 {
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(2rem, 6vw, 4.5rem);
  font-weight: 800;
}

h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
}

/* Акцент в заголовке: одно слово курсивом в --accent — ТЗ 4.2. */
em,
.accent {
  color: var(--accent);
  font-style: italic;
  font-weight: 800;
}

/* Моноширинные подписи, номера секций, теги — ТЗ 4.2. */
.mono,
.label,
.tag,
.badge {
  font-family: "JetBrains Mono", "Consolas", ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
}

/* Ряд тегов — плашки подряд.
 *
 * Без этого правила теги стояли друг за другом вплотную, и слова слипались
 * в одно: «ОпытОмфастоворкинг». Рядом с переносом строка ещё и рвалась
 * посередине слова. Здесь каждый тег — элемент ряда: зазор задаёт сам ряд,
 * а подпись внутри плашки не рвётся.
 *
 * Тот же приём уже стоит в подборе партнёров (.connect-result__tags). */
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}

.tag-row .tag {
  white-space: nowrap;
}

.muted {
  color: var(--fg-muted);
}

a {
  color: var(--fg);
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--accent);
}

/* Ссылка-призыв с стрелкой ↗ — ТЗ 4.3. */
.cta::after {
  content: "\2197";
  margin-left: 0.4em;
  color: var(--accent);
}

/* Тонкие рамки 1px в --accent вместо карточек со скруглениями — ТЗ 4.3. */
.box {
  border: 1px solid var(--accent);
  padding: 1.5rem;
  background: var(--surface);
}

/* Прямые углы: скругления не более 2px — ТЗ 4.3. */
.btn,
input,
select,
textarea {
  border-radius: 0;
}

.btn {
  /* Кнопки в ряду обязаны быть одной высоты, но не обязательно одной
     ширины. Раньше ширину задавал .btn-row > .btn { flex: 1 1 auto }: он
     делил контейнер пополам, и короткая подпись вроде «Смотреть карту»
     лежала в плашке шириной 575px — это и выглядело некрасиво. Теперь
     ширина по содержимому, а одинаковую высоту по-прежнему даёт сам ряд:
     он flex, поэтому соседи одной строки равны по высоте (align-items:
     stretch по умолчанию).

     Здесь же стоял white-space: nowrap, но одинакового вида он не давал —
     он запрещал кнопке стать уже собственной подписи. В колонке каталога
     партнёров ширина карточки 280px, а подпись «Войдите, чтобы предложить
     партнёрство» — 466px, и кнопка выходила за рамку .box на 200 с
     лишним пикселей; в узком .btn-row тот же запрет выдавливал подпись
     за рамку самой кнопки. Теперь подпись переносится по словам там,
     где иначе пришлось бы вылезти за границу. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 48px;
  padding: 0.85rem 1.75rem;
  background: transparent;
  color: var(--fg);
  /* Кнопка — не ссылка, даже когда это <a>. Правило `a` ниже задаёт
     подчёркиванию цвет --accent, но само подчёркивание не отменяет, и
     подпись в рамке оказывалась подчёркнутой. На залитой кнопке
     подчёркивание совпадало по цвету с фоном и его не было видно —
     дефект был заметен только на прозрачных кнопках. */
  text-decoration: none;
  border: 1px solid var(--accent);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}

/* Ряд кнопок: общая высота, перенос на узких экранах. Ширину не делит —
   каждая кнопка занимает столько, сколько нужно её подписи. */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.btn-row > .btn {
  /* 1 1 auto делил ряд пополам; 0 1 auto — ширина по содержимому, но при
     нехватке места кнопка по-прежнему сжимается и переносит подпись. */
  flex: 0 1 auto;
  min-width: 13rem;
}

/* Форма внутри ряда кнопок — например «Повторить» в журнале рассылки.
   Правило ширины выше действует только на прямых потомков, поэтому кнопка
   в форме получалась уже соседей. Форма становится flex-контейнером, а её
   кнопка — таким же элементом ряда, как и остальные. */
.btn-row > form {
  display: flex;
  margin: 0;
}

.btn-row > form > .btn {
  /* Как и у .btn-row > .btn: ширина по содержимому, а не половина ряда. */
  flex: 0 1 auto;
  min-width: 13rem;
}

.btn:hover {
  background: var(--accent);
  color: var(--fg);
}

.btn--accent {
  background: var(--accent);
  color: var(--fg);
}

.btn--accent:hover {
  background: transparent;
  color: var(--accent);
}

/* Стрелка `.cta` на залитой кнопке. Общее правило `.cta::after` красит её
   в --accent, а фон залитой кнопки — тоже --accent, и стрелка пропадала
   на «Вступить» и «Стать партнёром». Здесь она берёт цвет подписи. */
.btn--accent.cta::after {
  color: var(--fg);
}

input,
select,
textarea {
  width: 100%;
  /* Та же минимальная высота, что у кнопок: в строке поиска поле и кнопка
     стояли рядом и отличались по высоте на несколько пикселей. */
  min-height: 48px;
  padding: 0.75rem 0.9rem;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid rgba(255, 255, 255, .25);
  font-family: inherit;
  font-size: 1rem;
}

/* Флажок и переключатель минимальной высоты не получают: квадрат 48×48
   рядом с подписью выглядит как ошибка вёрстки. Ширина им тоже не нужна —
   она задаётся у меток-обёрток. */
input[type="checkbox"],
input[type="radio"] {
  width: auto;
  min-height: 0;
  padding: 0;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  outline: none;
}

label,
.field--group legend {
  display: block;
  margin-bottom: 0.35rem;
  font-family: "JetBrains Mono", "Consolas", ui-monospace, monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-muted);
}

/* Набор флажков — fieldset без рамки: рамка здесь была бы лишней
   границей вокруг обычного поля формы. */
.field--group {
  min-width: 0;
  border: 0;
}

/* Флажок и его подпись — в одну строку.
 *
 * Подпись здесь обычный текст, а не моноширинная надпись, как у остальных
 * полей: в согласии на обработку персональных данных слов много, и
 * моноширинный верхний регистр такой текст читается тяжело.
 *
 * Согласие с документами (строка согласия перед кнопкой) оформлено тем же
 * правилом: два согласия в одной форме должны читаться одинаково, иначе
 * видно, что второе добавлено позже. Отличается только цвет — сноска
 * приглушена. */
.field__check,
.consent__check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0;
  font-family: inherit;
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.55;
  cursor: pointer;
}

.field__check {
  color: var(--fg);
}

/* Размер флажка — один для всех форм.
 *
 * Раньше размер задавался в двух местах, и квадратики в согласии на
 * обработку персональных данных и в плашке согласия с политикой
 * выглядели по-разному. Теперь правило одно: квадрат в согласии всегда
 * такого же размера, как и в форме «Написать нам». */
.field__check input[type="checkbox"],
.consent__check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
  accent-color: var(--accent);
}

.errorlist {
  list-style: none;
  margin-top: 0.35rem;
  color: var(--accent);
  font-size: 0.875rem;
}

.badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--accent);
  color: var(--accent);
}

/* Плашка-ссылка — действие в карточке («Редактировать»).
 *
 * Раньше это была обычная подчёркнутая ссылка 16px: в карточке, где всё
 * остальное — мелкие моноширинные плашки, она выбивалась и перетягивала
 * взгляд на себя. Теперь это плашка того же вида, что «ОДОБРЕНА» и теги,
 * отдельной строкой под ними. Подчёркивание у ссылки-плашки не нужно:
 * рамка и есть её граница, а на заливке при наведении стрелка-призыв
 * должна остаться видимой — иначе она тонет в фоне. */
a.badge {
  text-decoration: none;
}

a.badge:hover,
a.badge:focus-visible {
  background: var(--accent);
  color: var(--fg);
}

a.badge:hover::after,
a.badge:focus-visible::after {
  color: var(--fg);
}

/* Согласие с документами перед кнопкой отправки.
 *
 * Это обычная строка согласия, а не выделенный блок: ни полосы, ни
 * затемнения. Плашка с оранжевой линией и тёмной подложкой выглядела
 * отдельным элементом управления, а согласие — это сноска к кнопке.
 * От блока осталось только то, что нужно: флажок слева, текст с
 * ссылками справа и отступ от предыдущей строки, чтобы флажки не
 * примыкали друг к другу.
 *
 * Размер строки — общий с флажками полей (см. .field__check выше). */
.consent {
  margin-top: 1.75rem;
}

.consent__check {
  color: var(--fg-muted);
}

/* Кнопка отправки под строкой согласия.
 *
 * Отступ обычный: согласие больше не блок с рамкой, и прилипать к нему
 * кнопка не должна. */
.form-submit {
  margin-top: 1.5rem;
  width: 100%;
}