/*
 * Формы: поле с подписью, ошибка поля, подсказка, кнопка «показать пароль», правила пароля, чекбокс.
 * Как в прототипе (AuthLogin, AuthRegister, AuthRecover): поле 48px, рамка 1.5px, в фокусе — индиго
 * и кольцо фокуса, с ошибкой — рамка 2px и значок справа.
 *
 *   <div class="field">
 *     <label class="field__label" for="email">E-mail</label>
 *     <span class="field__box"><span class="icon icon--mail field__icon"></span><input id="email">…</span>
 *   </div>
 * Ошибку ставит js/form.js (setFieldError): класс .field--invalid, aria-invalid, текст .field__error.
 */
.field { display: flex; flex-direction: column; gap: var(--space-1-5); }
.field__label { font-size: var(--font-size-label); line-height: var(--line-height-label); font-weight: var(--font-weight-label); }

.field__box {
  display: flex; align-items: center; gap: var(--space-2-5);
  height: var(--control-height-field); padding: 0 var(--space-3-5);
  background: var(--color-bg-surface);
  border: var(--border-width-field) solid var(--color-border-field); border-radius: var(--radius-field);
}
.field__box--action { padding-right: var(--space-1); } /* справа кнопка-иконка */
.field__box:focus-within {
  border-color: var(--color-border-field-focus);
  outline: var(--focus-ring-width) solid var(--color-focus-ring); outline-offset: var(--focus-ring-offset);
}
.field__box input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent;
  font-family: var(--font-text); font-size: var(--font-size-body-m); line-height: var(--line-height-body-m);
  color: var(--color-text);
}
.field__box input[type="tel"] { font-variant-numeric: tabular-nums; }
.field__box input::placeholder { color: var(--color-text-secondary); opacity: 1; }
.field__icon { color: var(--color-text-secondary); }
.field__alert { display: none; color: var(--color-error); }

.field--invalid .field__box { border: var(--border-width-button) solid var(--color-error); }
.field--invalid .field__box:focus-within { border-color: var(--color-error); }
.field--invalid .field__alert { display: block; }

.field__error, .field__hint {
  display: flex; gap: var(--space-1-5); align-items: flex-start;
  font-size: var(--font-size-helper); line-height: var(--line-height-helper);
}
.field__error { font-weight: var(--font-weight-helper); color: var(--color-error-text); }
.field__error a { font-weight: var(--font-weight-h4); color: inherit; }
.field__hint { font-weight: var(--font-weight-body); color: var(--color-text-secondary); }
.field--invalid .field__hint { display: none; }

/* Кнопка-иконка внутри поля: «Показать пароль» */
.icon-btn {
  width: var(--size-icon-button); height: var(--size-icon-button); flex: none; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: var(--radius-cell); background: transparent; color: var(--color-text-description);
  cursor: pointer; transition: background-color var(--duration-instant) var(--ease-standard);
}
.icon-btn:hover { background: var(--color-bg-muted); }
.icon-btn .icon--eye-off { display: none; }
.icon-btn[aria-pressed="true"] .icon--eye { display: none; }
.icon-btn[aria-pressed="true"] .icon--eye-off { display: block; }

/* Правила пароля: ждёт → выполнено (зелёный) или не выполнено после отправки (красный) */
.rules { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-1-5); }
.rule {
  display: flex; align-items: center; gap: var(--space-1-5);
  font-size: var(--font-size-helper); line-height: var(--line-height-helper); font-weight: var(--font-weight-helper);
  color: var(--color-text-secondary);
}
.rule .icon { display: none; }
.rule[data-state="wait"] .icon--circle,
.rule[data-state="ok"] .icon--circle-check,
.rule[data-state="bad"] .icon--triangle-alert { display: block; }
.rule[data-state="ok"] { color: var(--color-success-text); }
.rule[data-state="bad"] { color: var(--color-error-text); font-weight: var(--font-weight-h4); }

/* Чекбокс: настоящий input скрыт, рисуется квадрат */
.checkbox { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; }
.checkbox input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.checkbox__box {
  width: var(--size-checkbox); height: var(--size-checkbox); flex: none;
  display: grid; place-items: center;
  border: var(--border-width-button) solid var(--color-border-ink); border-radius: var(--radius-badge);
  background: var(--color-bg-surface); color: var(--color-text-on-brand);
  transition: background-color var(--duration-instant) var(--ease-standard);
}
.checkbox__box .icon { visibility: hidden; }
.checkbox input:checked + .checkbox__box { background: var(--color-button-primary-bg); }
.checkbox input:checked + .checkbox__box .icon { visibility: visible; }
.checkbox input:focus-visible + .checkbox__box { outline: var(--focus-ring-width) solid var(--color-focus-ring); outline-offset: var(--focus-ring-offset); }
.checkbox__text { padding-top: var(--space-0-5); font-size: var(--font-size-body-s); line-height: var(--line-height-body-s); color: var(--color-text); }
.checkbox__text a { font-weight: var(--font-weight-label); }
.field--invalid .checkbox__box { border-color: var(--color-error); }

/* Кнопка формы во всю ширину */
.btn--block { width: 100%; height: var(--control-height-field); }
.btn[aria-busy="true"] { cursor: progress; }

/* Пояснение под кнопкой */
.form-note {
  display: flex; align-items: center; justify-content: center; gap: var(--space-1-5); text-align: center;
  font-size: var(--font-size-helper); line-height: var(--line-height-helper); font-weight: var(--font-weight-helper);
  color: var(--color-text-description); font-variant-numeric: tabular-nums;
}
.form-note--small { font-size: var(--font-size-caption); line-height: var(--line-height-caption); color: var(--color-text-secondary); }
/* Пояснение не нужно, но место за ним остаётся: иначе кнопка и вся страница прыгают вверх (галочка согласия) */
.form-note--off { visibility: hidden; }