/*
 * Кирпич · формы.
 *
 * Форма собрана как список строк: у поля нет рамки, есть разделительная
 * линия снизу, и оно читается как строка, в которую пишут. Рамки вокруг
 * каждого поля превращают форму в таблицу и занимают вдвое больше места.
 *
 * Подпись стоит плейсхолдером внутри поля, а не отдельной строкой над
 * ним, поэтому строка формы по высоте равна строке списка.
 *
 *   form.form > ul > li > i > svg + input
 *
 * Значок стоит в теге i первым ребёнком строки, как в списках: он
 * говорит, что вводить, и в форме из трёх полей делает это лучше
 * порядкового номера.
 *
 * Согласие на обработку данных и кнопка лежат вне списка: это не поля,
 * а условие и действие.
 */
.form {
    margin: 0;
}

.form ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * Строка поля. Место под значок держит поле слева, а не отступ у input:
 * значок стоит вне потока, и без запаса он налезал бы на текст.
 *
 * Разделитель рисуется фоном, как в списках: у первой строки он
 * снимается, поэтому верхний край формы остаётся чистым.
 */
.form li {
    position: relative;
    padding-left: calc(var(--icon-size) + var(--icon-space));
    background: var(--separator-line) 0 0 / 100% var(--hairline) no-repeat;
}

.form li:first-child {
    background: none;
}

/*
 * Значок поля. Квадрат со скруглением тех же размеров, что значок в
 * строке списка: форма и список стоят на одной странице, и разный
 * размер у одинаковых по смыслу квадратов сразу заметен.
 *
 * Позиционируется от верха, а не по центру строки: поле бывает
 * многострочным, и в нём значок уезжал бы к середине текста.
 */
.form li > i:first-child {
    position: absolute;
    top: var(--step);
    left: 0;
    display: flex;
    width: var(--icon-size);
    height: var(--icon-size);
    align-items: center;
    justify-content: center;
    border-radius: var(--icon-radius);
    background: var(--color-surface);
    color: var(--color-muted);
}

/*
 * Внутри может лежать и картинка, и готовый svg: иконки набором отдают
 * второе, и подменять их на img ради стилей неправильно.
 *
 * Свои размеры svg при этом снимаются: набор проставляет их атрибутами,
 * и значок вылезал бы за квадрат.
 */
.form li > i:first-child > img,
.form li > i:first-child > svg {
    display: block;
    width: auto;
    height: auto;
    max-width: 60%;
    max-height: 60%;
}

/*
 * Поле ввода. Без рамки и фона: линию рисует строка, а собственная
 * рамка поля сложилась бы с ней в двойную.
 *
 * Кегль вынесен в переменную и не может быть мельче 16px: Safari на
 * телефоне увеличивает страницу при фокусе в мелкое поле, и после
 * выхода из него вёрстка остаётся увеличенной.
 */
.form input,
.form textarea {
    box-sizing: border-box;
    width: 100%;
    padding: var(--step) 0;
    border: none;
    background: none;
    color: var(--color-title);
    font-family: var(--font);
    font-size: var(--field-text);
    line-height: var(--line);
}

/*
 * Многострочное поле: растёт вниз, ручка изменения размера остаётся.
 * Горизонтально не тянется — иначе ломает колонку.
 *
 * Блок, а не строчный элемент: у textarea по умолчанию базовая линия
 * лежит на нижней строке, из-за чего поле съезжало вниз относительно
 * своего значка, и между строками формы повисал лишний просвет.
 */
.form textarea {
    display: block;
    min-height: calc(var(--line) * 3);
    resize: vertical;
}

/*
 * Подпись поля. Приглушена так же, как второстепенный текст: она
 * подсказка, а не значение, и после ввода исчезает.
 */
.form ::placeholder {
    color: var(--color-muted);
    opacity: 1;
}

/*
 * Рамки фокуса нет, потому что нет и самой рамки: место ввода показывает
 * курсор.
 *
 * Значок при фокусе не подсвечивается, хотя место для этого напрашивается:
 * он служебный и говорит, что вводить, а не где стоит курсор. Крашеная
 * плашка в момент набора спорит с текстом, который человек в это время
 * пишет, и расходится со значком в списке, где краска не меняется никогда.
 */
.form input:focus,
.form textarea:focus {
    outline: none;
}

/*
 * Согласие на обработку персональных данных.
 *
 * Флажок обязателен на любой форме, которая собирает имя, почту или
 * телефон, и по умолчанию он снят: постановка галочки — действие
 * пользователя, а не заготовка в разметке. Отмеченный заранее чекбокс
 * согласием не считается.
 *
 *   label.agree > input[type=checkbox] + Отправляя форму…
 *
 * Выравнивание по верху: текст согласия занимает две-три строки, и по
 * центру флажок уезжал бы к их середине.
 */
.form .agree {
    display: flex;
    align-items: flex-start;
    gap: var(--field-space);
    padding: var(--gap) 0;
    color: var(--color-muted);
    font-size: var(--text-small);
    line-height: var(--line-small);
}

.form .agree input {
    width: var(--check-size);
    height: var(--check-size);
    flex: none;
    /* Сдвиг к первой строке текста: у флажка своя высота, у строки своя. */
    margin-top: 1px;
    padding: 0;
    accent-color: var(--color-accent);
}

.form .agree a {
    color: var(--color-accent);
}

/*
 * Кнопка отправки: таблетка во всю ширину.
 *
 * Скругление заведомо больше половины высоты, поэтому торцы остаются
 * полукруглыми при любом росте кнопки и высоту не нужно повторять в
 * скруглении.
 *
 * Вес чуть выше обычного: на сплошной заливке текст нормального веса
 * выглядит бледнее, чем на белом фоне.
 */
.form button {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: var(--button-height);
    border: none;
    border-radius: var(--button-radius);
    background: var(--color-accent);
    color: #fff;
    font-family: var(--font);
    font-size: var(--text);
    font-weight: 500;
    cursor: pointer;
}

/*
 * Заблокированная кнопка: согласие не отмечено. Курсор меняется вместе
 * с краской, иначе кнопка выглядит рабочей и клик по ней остаётся без
 * ответа.
 */
.form button:disabled {
    background: var(--color-muted);
    cursor: not-allowed;
}