/* ============================================================================
   Примитивы дизайн-системы. Каждому классу соответствует компонент из src/components.
   Стили здесь, а не в CSS-модулях: те же классы понадобятся публичному сайту
   и CMS-блокам, которые собираются не React'ом.
   ========================================================================= */

/* ---------- Кнопки ---------- */

.kn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border-radius: var(--kn-r-sm);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  background: var(--kn-surface);
  color: var(--kn-ink);
  border: 1px solid var(--kn-line-2);
  box-shadow: var(--kn-sh-xs);
  transition:
    transform var(--kn-t-fast) var(--kn-ease),
    box-shadow var(--kn-t-base) var(--kn-ease),
    background var(--kn-t-base) var(--kn-ease),
    border-color var(--kn-t-base) var(--kn-ease),
    color var(--kn-t-base);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.kn-btn:hover:not(:disabled) {
  transform: translateY(-1.5px);
  box-shadow: var(--kn-sh-md);
}

.kn-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.985);
  box-shadow: var(--kn-sh-xs);
  transition-duration: 0.08s;
}

.kn-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  box-shadow: none;
}

.kn-btn--gold {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #d2b26b 0%, var(--kn-gold) 55%, var(--kn-gold-2) 100%);
  color: #2a2008;
  border-color: var(--kn-gold-2);
  font-weight: 600;
  box-shadow: var(--kn-sh-gold);
}

.kn-btn--gold:hover:not(:disabled) {
  box-shadow: 0 12px 30px rgba(201, 169, 97, 0.42);
}

/* Блик, проходящий по золоту при наведении, — фирменное движение прототипа.
   Кнопка входа единственная золотая на экране, и без блика она выглядит
   обычной заливкой. */
.kn-btn--gold::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 20%,
    rgba(255, 255, 255, 0.55) 48%,
    transparent 70%
  );
  transform: translateX(-130%);
  transition: transform 0.75s var(--kn-ease);
}

.kn-btn--gold:hover:not(:disabled)::after {
  transform: translateX(130%);
}

.kn-btn--ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--kn-ink-soft);
}

.kn-btn--ghost:hover:not(:disabled) {
  background: var(--kn-surface-2);
  box-shadow: none;
  transform: translateY(0);
}

.kn-btn--sm {
  height: 34px;
  padding: 0 13px;
  font-size: 13px;
  border-radius: var(--kn-r-xs);
}

.kn-btn--lg {
  height: 50px;
  font-size: 15px;
}

.kn-btn--block {
  width: 100%;
}

/* Кружок ожидания вместо подписи: кнопка не должна менять размер,
   иначе форма прыгает при каждой отправке. */
.kn-btn__spinner {
  width: 17px;
  height: 17px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: kn-spin 0.7s linear infinite;
}

@keyframes kn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Поля ввода ---------- */

.kn-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.kn-field__label {
  padding-left: 2px;
}

.kn-field__control {
  position: relative;
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 14px;
  background: var(--kn-surface);
  border: 1.5px solid var(--kn-line-2);
  border-radius: var(--kn-r-sm);
  transition:
    border-color var(--kn-t-base) var(--kn-ease),
    box-shadow var(--kn-t-base) var(--kn-ease);
}

.kn-field__control:focus-within {
  border-color: var(--kn-gold);
  box-shadow: 0 0 0 4px rgba(201, 169, 97, 0.16);
}

.kn-field__control--invalid {
  border-color: var(--kn-red);
  box-shadow: 0 0 0 4px rgba(188, 94, 60, 0.12);
}

.kn-field__lead,
.kn-field__trail {
  display: inline-flex;
  flex: none;
  color: var(--kn-muted);
}

.kn-field__trail {
  padding: 4px;
  margin-right: -4px;
  border-radius: 6px;
  transition:
    color var(--kn-t-base),
    background var(--kn-t-base);
}

.kn-field__trail:hover {
  color: var(--kn-ink);
  background: var(--kn-surface-2);
}

.kn-field__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 12px;
  border: none;
  background: none;
  outline: none;
  font-size: 15px;
  color: var(--kn-ink);
  letter-spacing: 0.2px;
}

.kn-field__input::placeholder {
  color: var(--kn-faint);
}

/* Многострочный ввод растёт вместе с текстом, поэтому фиксированная высота
   строки ввода здесь снимается — модификатором, а не через :has(), чтобы
   правило не зависело от поддержки селектора браузером. */
.kn-field__control--area {
  height: auto;
  padding: 10px 14px;
  align-items: stretch;
}

.kn-field__textarea {
  height: auto;
  min-height: 88px;
  padding: 0;
  line-height: 1.55;
  font-family: inherit;
  /* Только по высоте: горизонтальное растягивание ломает строй формы */
  resize: vertical;
}

/* Счётчик знаков рядом с подписью: предел WhatsApp виден до того, как текст
   в него упрётся, а не после отказа при сохранении */
.kn-field__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.kn-field__counter {
  color: var(--kn-faint);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* Код из аутентификатора: шесть цифр читаются в разрядку заметно легче */
.kn-field__input--code {
  font-family: var(--kn-font-mono);
  font-size: 22px;
  letter-spacing: 0.42em;
  text-align: center;
}

/* Выпадающий список живёт в том же контейнере, что и ввод: иначе в одной
   форме соседствовали бы поля разной высоты. Системный вид снят — он разный
   в Safari и Chrome и ломает строй формы */
.kn-field__select {
  appearance: none;
  padding-right: 30px;
  cursor: pointer;
}

/* Стрелка не перехватывает клик: он должен доходить до самого списка */
.kn-field__chevron {
  position: absolute;
  right: 14px;
  width: 16px;
  height: 16px;
  color: var(--kn-muted);
  pointer-events: none;
}

.kn-field__hint {
  padding-left: 2px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--kn-muted);
}

.kn-field__error {
  padding-left: 2px;
  font-size: 13px;
  color: var(--kn-red-deep);
}

/* ---------- Сообщения ---------- */

.kn-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--kn-r-sm);
  font-size: 13.5px;
  font-weight: 500;
  border: 1px solid transparent;
}

/* Отступ у плашки — её собственный, а не забота того, кто её ставит.

   Это чинится здесь, потому что здесь и ломалось. Плашку показывают
   в полусотне мест, своих полей у неё не было, и всякий раз она вставала
   вплотную к тому, что над ней. Правка на месте вызова закрывала один экран
   и оставляла остальные — заказчик возвращался с тем же замечанием снова
   и снова. Ошибка была не в экранах, а в том, что общий блок не отвечал
   за себя сам.

   `:not(:first-child)` — чтобы плашка, стоящая в блоке первой, не отодвигала
   собой всё содержимое: отбиваться ей там не от чего. Поле только сверху:
   нижнее пришлось бы гасить у каждой плашки в конце карточки, а карточка
   и так заканчивается своим отступом. */
.kn-alert:not(:first-child) {
  margin-top: 14px;
}

/* Колонка настроек добавку не берёт: 18px ей уже даёт `gap`, и 32px
   читались бы как разрыв в разделе. Правило одно и стоит здесь же —
   искать его по экранам не придётся */
.kn-settings > .kn-alert {
  margin-top: 0;
}

.kn-alert--error {
  background: var(--kn-red-pale);
  border-color: #ebc9bf;
  color: var(--kn-red-deep);
}

.kn-alert--info {
  background: var(--kn-surface-2);
  border-color: var(--kn-line);
  color: var(--kn-ink-soft);
}

.kn-alert--success {
  background: var(--kn-green-pale);
  border-color: #cfdcc9;
  color: var(--kn-green-deep);
}

.kn-alert__icon {
  flex: none;
}

/* ---------- Карточка ---------- */

.kn-card {
  background: var(--kn-surface);
  border: 1px solid var(--kn-line);
  border-radius: var(--kn-r-lg);
  box-shadow: var(--kn-sh-sm);
}

.kn-card--pad {
  padding: 22px 24px;
}

/* ---------- Выпадающее меню ---------- */

.kn-menu {
  position: relative;
  flex: none;
}

.kn-menu__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--kn-r-sm);
  background: none;
  color: var(--kn-muted);
  cursor: pointer;
  transition:
    background var(--kn-t-base) var(--kn-ease),
    color var(--kn-t-base);
}

.kn-menu__trigger:hover,
.kn-menu__trigger[aria-expanded='true'] {
  background: var(--kn-surface-2);
  color: var(--kn-ink);
}

.kn-menu__items {
  position: absolute;
  top: 36px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--kn-line);
  border-radius: var(--kn-r-md);
  background: var(--kn-surface);
  box-shadow: var(--kn-sh-md);
}

.kn-menu__items--end {
  right: 0;
}

.kn-menu__items--start {
  left: 0;
}

.kn-menu__item {
  padding: 8px 10px;
  border: none;
  border-radius: var(--kn-r-sm);
  background: none;
  color: var(--kn-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--kn-t-base) var(--kn-ease);
}

.kn-menu__item:hover:not(:disabled) {
  background: var(--kn-surface-2);
}

.kn-menu__item:disabled {
  color: var(--kn-faint);
  cursor: default;
}

.kn-menu__item--danger {
  color: var(--kn-red-deep);
}

/* ---------- Иконки и знак марки ---------- */

.kn-icon {
  width: 18px;
  height: 18px;
  flex: none;
}

.kn-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.kn-logo__mark {
  width: 42px;
  height: 42px;
  flex: none;
  color: var(--kn-gold-2);
}

.kn-logo__name {
  font-family: var(--kn-font-serif);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.12em;
  line-height: 1;
}

/* Полный локап бренда: файл отдаёт приложение, размер задаём здесь,
   чтобы логотип везде был одной высоты. `align-self` обязателен: в колонке
   flex картинку иначе растягивает во всю ширину и знак уезжает в середину */
.kn-logo-full {
  display: block;
  align-self: flex-start;
  width: auto;
  max-width: 100%;
  height: 54px;
}