/* Поле ввода: иконка слева, текст, действие справа. */

.field {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--control);
  padding: 0 var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease),
              background var(--fast) var(--ease);
}

/* В фокусе — золотая рамка и мягкое кольцо вокруг неё.
   Собственную подсветку браузера убираем: она синяя и чужая. */
.field:focus-within {
  border-color: var(--accent-dim);
  background: var(--surface-2);
  box-shadow:
    0 0 0 3px var(--focus-ring),
    0 0 30px var(--focus-glow);
}

.field--error,
.field--error:focus-within {
  border-color: var(--danger);
  box-shadow: none;
}

/* Иконка слева — подсказка о том, что за поле. Тонкая, приглушённая,
   в фокусе подхватывает золото. */
.field__icon {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--text-faint);
  transition: color var(--fast) var(--ease);
}

.field:focus-within .field__icon { color: var(--accent-text); }

.field__icon .icon {
  width: var(--fs-lg);
  height: var(--fs-lg);
}

.field__prefix {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-faint);
}

.field__input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: .12em;
}

.field__input::placeholder {
  color: var(--text-faint);
  letter-spacing: .12em;
}

/* ── Поле с подписью внутри ──────────────────────────────────── */

/* Подпись живёт внутри рамки, над значением, и никуда не уезжает.
   Так форма из пяти полей помещается в экран целиком: внешняя строка
   подписи стоила по 36 пикселей на поле, а это 180 — ровно та высота,
   которой не хватало кнопке.

   Плавающую подпись, которая при вводе превращается в placeholder,
   не берём намеренно: она прячет названия полей, и по форме из пяти
   строк уже нельзя пробежать глазами, не тыкая в каждую. */
.field--stack {
  align-items: stretch;
  /* Ниже обычного поля: подпись и значение стоят вплотную, и высота
     в 66 давала бы пустоту сверху и снизу. 58 — всё ещё уверенная
     цель для пальца, ниже опускаться нельзя. */
  min-height: 14.9cqw;
  padding: var(--sp-2) var(--sp-5);
}

.field--stack .field__icon { align-self: center; }

.field__stack {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4cqw;
}

/* Строка подписи: слева название поля, справа — действие, если оно
   к полю относится. «Забыли?» стоит именно здесь, а не отдельной
   строкой над полем: так подпись и выход из тупика читаются одним
   взглядом и не занимают лишней высоты. */
.field__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}

.field__name {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-faint);
  transition: color var(--fast) var(--ease);
}

.field--stack:focus-within .field__name { color: var(--accent-text); }

.field--error .field__name { color: var(--danger); }

/* Подсказка внутри поля появляется только в фокусе: пока человек
   не начал вводить, её место занимает подпись, и две серые строки
   одна под другой спорили бы между собой. */
.field--stack .field__input::placeholder {
  opacity: 0;
  transition: opacity var(--fast) var(--ease);
}

.field--stack:focus-within .field__input::placeholder { opacity: 1; }

/* Глаз у поля пароля. Кнопку добавляет ui/password-field.js. */
.field__toggle {
  flex: none;
  width: var(--sp-8);
  height: var(--sp-8);
  margin-right: calc(var(--sp-2) * -1);
  display: grid;
  place-items: center;
  background: none;
  border: none;
  border-radius: var(--r-sm);
  color: var(--text-faint);
  cursor: pointer;
  transition: background var(--fast) var(--ease),
              color var(--fast) var(--ease);
}

.field__toggle:hover { color: var(--accent-text); }

.field__toggle:active { background: var(--surface-2); }

.field__toggle[aria-pressed="true"] { color: var(--accent-text); }

.field__toggle .icon {
  width: var(--fs-lg);
  height: var(--fs-lg);
}

/* Точки маскировки крупнее обычного текста — иначе их почти не видно.
   Селектор с .field, чтобы перебить правило .field--text ниже. */
.field .field__input[type="password"] {
  letter-spacing: .18em;
  font-size: var(--fs-lg);
}

/* Обычный текстовый ввод: логин, пароль, имя.

   Не меньше 16px — это не вкус, а условие iOS: при фокусе в поле
   с текстом мельче Safari приближает страницу и обратно уже не
   отдаляет. На узком телефоне доля ширины даёт 15px, поэтому берём
   что больше. */
.field--text .field__input,
.field--text .field__input::placeholder {
  font-family: var(--font);
  font-size: max(16px, var(--fs-md));
  font-weight: 500;
  letter-spacing: normal;
}