/* Поле с подписью внутри рамки: подпись, счётчик и значение
   в одном прямоугольнике.

   Так форма из пяти полей помещается в экран целиком: внешняя строка
   подписи стоила по 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 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-faint);
  transition: color var(--fast) var(--ease);
}

/* Счётчик знаков — на строке подписи, справа. Отдельной строкой
   под полем он стоил 26 пикселей и повторял то, что и так видно
   в поле: сколько уже набрано. Здесь он не занимает высоты вовсе. */
.field__count {
  flex: none;
  font-size: var(--fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}

/* Замок стоит на месте счётчика: у закрытого поля считать нечего,
   и место освободилось ровно под знак запрета. Отдельной колонки
   слева ему не нужно — она стоила бы 32 пикселя ширины у каждого
   поля формы, а длинные названия и так режутся по краю. */
.field__lock {
  flex: none;
  align-self: center;
  display: grid;
  place-items: center;
  color: var(--text-faint);
}

.field__lock .icon {
  width: var(--fs-sm);
  height: var(--fs-sm);
}

/* Значение из двух частей: неизменяемая приставка и сам ввод.
   Адрес страницы без «levelq.ru/u/» перед ним — просто слово,
   и человек не понимает, что именно он правит. */
.field__line {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  min-width: 0;
}

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

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

/* Закрытое поле не загорается золотом даже в фокусе: подпись
   остаётся серой, иначе рамка обещает правку, которой не будет.
   Стоит после правила выше — вес у них одинаковый. */
.field--locked:focus-within .field__name { color: var(--text-faint); }

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

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