/* inputfield — строка «поле ввода + кнопка с иконкой».

   Само поле — однострочное; высоту и ширину задаёт строка. Квадрат
   кнопки рисует modules/iconbutton, здесь только их расстановка. */

.inputfield {
    display: flex;
    flex-direction: column;
}

.inputfield__row {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Координатная система для закреплённого начала поля. */
    position: relative;
}

/* Поле и подсказка-продолжение лежат друг на друге: подсказка должна
   стоять ровно там, где встал бы дописанный текст. */
.inputfield__field {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
}

.inputfield__input {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: 12px;
    /* В покое обводка — акцент, но разведённый тёмным: поле обещано
       той же краской, что и фокус, и при этом не должно выглядеть
       активным постоянно. */
    --ring-color: var(--color-border);
    /* Утопленное поле: тёмный, разбавленный панелью. */
    --fill: var(--color-surface-inset);

    background: linear-gradient(var(--fill), var(--fill)) padding-box,
                linear-gradient(var(--ring-color), var(--ring-color)) border-box;
    color: var(--color-ink);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    transition: border-color var(--motion-control-duration, 220ms) var(--motion-ease, ease);
}

.inputfield__input::placeholder {
    color: var(--color-text-muted);
}

/* Активное состояние включается только с курсором: без него фокус
   неотличим от покоя — обводка одна и та же, акцент, различается
   только плотность (разведённый тёмным против акцента целиком). */
.inputfield__input:focus {
    outline: none;
    --ring-color: var(--color-accent);
}

/* Поле вне правки выключено, а не только для чтения: отключённое не
   принимает ни клик, ни курсор — попасть в него можно лишь вместе
   с правкой. Цвет остаётся обычным: значение видно, но не редактируется,
   и выглядеть сломанным оно не должно. */
.inputfield__input:disabled {
    color: var(--color-ink);
    cursor: default;
}

/* ===== Закреплённое начало поля =====

   @ у тега: видно внутри поля и набрать его нельзя — часть значения,
   которую убрать нельзя. Лежит поверх поля, поэтому клик и выделение
   уходят в поле, а не в символ. Цвет основной, а не приглушённый:
   это не подсказка, а часть значения. */

.inputfield__prefix {
    position: absolute;
    left: 14px;              /* тот же отступ, что внутри поля */
    top: 50%;
    transform: translateY(-50%);
    /* Поле с подсказкой лежит в своей обёртке и рисуется поверх
       соседей: без этого начала не было бы видно за заливкой поля. */
    z-index: 1;
    color: var(--color-ink);
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
}

.inputfield__prefix[hidden] {
    display: none;
}

/* Набираемое начинается после закреплённого начала, а не под ним.
   38 = 14 (отступ внутри поля, тот же, что у начала слева) + около
   15 (ширина @ в шрифте 14px) + около 9 промежутка. Измерять ширину
   символа в скрипте нельзя: шаг, где стоит поле, на момент загрузки
   скрыт, и ширина была бы нулевой. */
.inputfield__prefix:not([hidden]) ~ .inputfield__field .inputfield__input {
    padding-left: 38px;
}

/* Подсказка повторяет отступы поля: иначе её хвост встал бы не туда,
   куда встал бы дописанный текст. */
.inputfield__prefix:not([hidden]) ~ .inputfield__field .inputfield__hint {
    padding-left: 38px;
}

/* Кнопки нет, если действие не задано: пустой action означает,
   что полю нечего делать по нажатию. Селектор по пустому значению —
   самый простой способ обойтись без условий в шаблоне. */
.inputfield__edit[data-inputfield-action=""] {
    display: none;
}

/* Иконка кнопки. Как и у строк настроек (tb), вид иконки задаёт
   владелец кнопки: без этого правила у карандаша не было бы маски,
   и он остался бы пустым квадратом. */
/* ===== Подсказка-продолжение =====

   Продолжение названия дописывается прямо в поле: набранное остаётся
   как есть, хвост ложится приглушённо, и его можно принять Tab, Enter
   или стрелкой вправо. Слой лежит поверх поля и повторяет его шрифт,
   отступы и высоту строки — иначе хвост встал бы не туда, куда встал
   бы дописанный текст. Набранная часть в нём прозрачная: текст поля
   виден сквозь неё, и буквы не задваиваются. */

.inputfield__hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    white-space: pre;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}

.inputfield__hint[hidden] {
    display: none;
}

.inputfield__hint-typed {
    color: transparent;
}

/* Хвост приглушён, но не исчезает: это ещё не значение, а обещание
   его. Полупрозрачный основной тон ложится на заливку поля сам. */
.inputfield__hint-rest {
    color: color-mix(in srgb, var(--color-ink) 45%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .inputfield__input {
        transition: none;
    }
}

/* Public contextual variant. */
.inputfield[data-variant="inline"],
.inputfield[data-variant="inline"] .inputfield__field {
    flex: 0 1 auto;
    min-width: 0;
}
.inputfield[data-variant="inline"] .inputfield__field {
    display: grid;
}
.inputfield[data-variant="inline"] .inputfield__input,
.inputfield[data-variant="inline"] .inputfield__hint {
    grid-area: 1 / 1;
}
.inputfield[data-variant="inline"] .inputfield__edit {
    --ib-size: 30px;
    --ib-icon: 16px;
    border-radius: 10px;
    margin-left: 6px;
}
.inputfield[data-variant="inline"] .inputfield__input {
    flex: 0 1 auto;
    min-width: 0;
    field-sizing: content;
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 14px;
    /* Та же высота строки, что у строки города: низ букв не подрезает
       ни поле, ни показ остальным. */
    line-height: 1.45;
}
.inputfield[data-variant="inline"] .inputfield__hint {
    position: static;
    width: max-content;
    padding: 4px 10px;
    font-size: 14px;
    line-height: 1.45;
}
.inputfield[data-variant="inline"] .inputfield__input:disabled {
    padding: 0 3px 2px 0;
    background: none;
    border-color: transparent;
    color: var(--color-text-muted);
}
.inputfield.is-invalid .inputfield__input { --ring-color: var(--color-danger); }

.inputfield.is-error-feedback { animation:inputfield-error-nudge 450ms ease-out; }
.inputfield.is-error-feedback .inputfield__input { --ring-color:var(--color-danger); }
@keyframes inputfield-error-nudge {
    0%, 100% { transform:translateX(0); }
    20% { transform:translateX(6px); }
    45% { transform:translateX(1px); }
    65% { transform:translateX(3px); }
}
@media(prefers-reduced-motion:reduce) {
    .inputfield.is-error-feedback { animation:none; }
}