/* ===== «Придумать пароль» и предупреждение о раскладке ===================
   Предложенный пароль показан открыто и остаётся в обычном поле: кабинет
   предлагает, а не назначает. Звёздочки здесь были бы вредны — человек должен
   увидеть то, что ему предлагают записать. */

.pwgen { display: grid; gap: 10px; margin: -4px 0 12px; }
.pwgen__offer { justify-self: start; }
.pwgen__shown {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}
.pwgen__note { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.pwgen__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.pwgen__acts .btn { flex: none; width: auto; }

/* Показанный пароль набран моноширинным: так видно, где i, а где l, и
   переписать его на бумагу можно без догадок. */
input[data-password-maker="on"][type="text"] {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  letter-spacing: .02em;
}

.field-warn {
  margin: 6px 0 0;
  color: #d89a16;
  font-size: 13px;
  line-height: 1.4;
}
input.is-wrong { border-color: #d89a16; }