/*
 * Базовые элементы интерфейса: карточки, кнопки, чипы, поля, скелетоны, шторки.
 *
 * Обработка поверхностей выбрана одна и держится везде: плоская заливка
 * --c-surface на подложке --c-page, без теней и обводок. Разделяет не тень,
 * а волосяная линия внутри списка и воздух между блоками.
 */

.card {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  padding: var(--s4);
}

.card--tap {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  cursor: pointer;
  /* отклик на палец: короткое сжатие, ничего больше */
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur) var(--ease);
}

.card--tap:active {
  transform: scale(0.985);
  background-color: color-mix(in srgb, var(--c-hint) 8%, var(--c-surface));
}

.list {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.list__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: var(--tap);
  padding: var(--s3) var(--s4);
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}

/* Линия начинается от текста, а не от края: строки читаются как один блок. */
.list__item + .list__item::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--s4);
  right: 0;
  height: 1px;
  background: var(--c-separator);
}

.list__item:active {
  background-color: var(--c-soft);
}

/* Список обрезает содержимое, поэтому кольцо фокуса уводим внутрь строки. */
.list__item:focus-visible {
  outline-offset: -2px;
}

.list__item--static {
  cursor: default;
}

.list__item--static:active {
  background-color: transparent;
}

.list__body {
  flex: 1;
  min-width: 0;
}

.list__title {
  font-weight: 600;
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
}

.list__sub {
  color: var(--c-hint);
  font-size: var(--fs-footnote);
  line-height: var(--lh-snug);
}

/* Шеврон — самый тихий знак строки: подсказка о переходе, не акцент. */
.list__chevron {
  color: var(--c-hint);
  font-size: var(--fs-body);
}

.icon.list__chevron {
  --icon-size: 17px;
  opacity: 0.75;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: var(--tap);
  padding: 0 var(--s4);
  border: 0;
  border-radius: var(--r-md);
  background: var(--c-soft);
  color: var(--c-text);
  font-size: var(--fs-callout);
  line-height: var(--lh-snug);
  font-weight: 600;
  letter-spacing: var(--tr-tight);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}

.btn:active {
  transform: scale(0.97);
}

.btn[disabled] {
  opacity: 0.4;
  cursor: default;
  transform: none;
}

.btn--primary {
  background: var(--c-accent);
  color: var(--c-accent-text);
}

.btn--primary:active {
  background-color: color-mix(in srgb, var(--c-accent) 88%, var(--c-text));
}

.btn--ghost {
  background: transparent;
  color: var(--c-accent-ink);
  padding: 0 var(--s2);
}

.btn--ghost:active {
  background-color: var(--c-accent-soft);
}

.btn--danger {
  background: var(--c-danger-soft);
  color: var(--c-danger-ink);
}

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

.btn--sm {
  min-height: 36px;
  padding: 0 var(--s3);
  font-size: var(--fs-footnote);
}

.btn > .icon {
  --icon-size: 18px;
}

.icon-btn {
  min-width: var(--tap);
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-soft);
  color: var(--c-text);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}

.icon-btn:active {
  transform: scale(0.94);
}

.icon-btn[disabled] {
  opacity: 0.4;
  cursor: default;
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover:not([disabled]) {
    background-color: color-mix(in srgb, var(--c-hint) 18%, transparent);
  }

  .btn--primary:hover:not([disabled]) {
    background-color: color-mix(in srgb, var(--c-accent) 90%, var(--c-text));
  }

  .btn--ghost:hover:not([disabled]) {
    background-color: var(--c-accent-soft);
  }

  .btn--danger:hover:not([disabled]) {
    background-color: color-mix(in srgb, var(--c-danger) 22%, transparent);
  }

  .icon-btn:hover:not([disabled]) {
    background-color: var(--c-soft-strong);
  }

  .list__item:hover:not(.list__item--static) {
    background-color: var(--c-soft);
  }
}

/* --- Чипы --- */

.chips {
  display: flex;
  gap: var(--s2);
  overflow-x: auto;
  scrollbar-width: none;
  padding: var(--s1) var(--s4) var(--s3);
  margin: 0 calc(-1 * var(--s4));
}

.chips::-webkit-scrollbar {
  display: none;
}

/*
 * Фильтр не должен весить больше контента, поэтому чип ниже кнопки — 38px.
 * Тап-таргет добирается до 44px невидимой областью, а не высотой плашки.
 */
.chip {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 var(--s4);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-soft);
  color: var(--c-text);
  font-size: var(--fs-callout);
  line-height: 1;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.chip::after {
  content: '';
  position: absolute;
  inset: -3px 0;
}

.chip:active {
  transform: scale(0.96);
}

.chip[aria-selected='true'] {
  background: var(--c-accent);
  color: var(--c-accent-text);
}

.chip[disabled] {
  opacity: 0.4;
  cursor: default;
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .chip:hover:not([disabled]):not([aria-selected='true']) {
    background-color: var(--c-soft-strong);
  }
}

/* --- Бейджи статусов --- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 3px var(--s2);
  border-radius: var(--r-pill);
  background: var(--c-soft);
  color: var(--c-hint);
  font-size: var(--fs-caption);
  line-height: 1.2;
  letter-spacing: var(--tr-caption);
  font-weight: 600;
  white-space: nowrap;
}

.badge > .icon {
  --icon-size: 13px;
}

/* Текст на мягкой плашке — «чернильный» тон: он держит контраст в обеих темах. */
.badge--ok {
  background: var(--c-ok-soft);
  color: var(--c-ok-ink);
}

.badge--warn {
  background: var(--c-warn-soft);
  color: var(--c-warn-ink);
}

.badge--error {
  background: var(--c-danger-soft);
  color: var(--c-danger-ink);
}

.badge--accent {
  background: var(--c-accent-soft);
  color: var(--c-accent-ink);
}

/* --- Поля --- */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.field__label {
  font-size: var(--fs-footnote);
  line-height: var(--lh-snug);
  font-weight: 600;
  color: var(--c-hint);
}

.input,
.textarea,
.select {
  width: 100%;
  min-height: var(--tap);
  padding: var(--s3);
  border: 1px solid var(--c-separator);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: var(--fs-body);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  appearance: none;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--c-hint);
}

/* Обводку снимаем, но взамен даём кольцо — фокус остаётся видимым. */
.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}

.input[disabled],
.textarea[disabled],
.select[disabled] {
  opacity: 0.5;
  cursor: default;
}

.textarea {
  min-height: 140px;
  resize: vertical;
  line-height: var(--lh-body);
}

.switch {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: var(--tap);
  cursor: pointer;
}

.switch input {
  width: 20px;
  height: 20px;
  accent-color: var(--c-accent);
}

/* --- Скелетоны --- */

/*
 * Пульс цвета вместо бегущего градиента: он сообщает ровно одно — «данные
 * ещё едут», и не притворяется бликом на стекле.
 */
.skeleton {
  border-radius: var(--r-sm);
  background-color: var(--c-skeleton);
  animation: skeleton 1s var(--ease) infinite alternate;
}

@keyframes skeleton {
  to {
    background-color: var(--c-skeleton-hi);
  }
}

.skeleton-card {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

/* --- Пустые состояния и ошибки --- */

/*
 * Ритм задан не общим gap, а группировкой: знак и заголовок стоят близко,
 * действие отбито заметно дальше — глаз читает их как разные уровни.
 */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--s7) var(--s4);
  text-align: center;
}

.empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--s4);
  border-radius: var(--r-pill);
  background: var(--c-soft);
  color: var(--c-hint);
}

.empty__title {
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  letter-spacing: var(--tr-title);
  font-weight: 700;
}

.empty__text {
  color: var(--c-hint);
  font-size: var(--fs-callout);
  line-height: var(--lh-body);
  margin-top: var(--s1);
  /* мера строки: 45–75 знаков, здесь короткий абзац по центру */
  max-width: 32ch;
}

.empty .btn {
  margin-top: var(--s5);
}

.error-box {
  background: var(--c-danger-soft);
  color: var(--c-danger-ink);
  border-radius: var(--r-md);
  padding: var(--s3);
  font-size: var(--fs-footnote);
  line-height: var(--lh-snug);
}

/* --- Тосты --- */

.toasts {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--safe-bottom) + var(--s6));
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  pointer-events: none;
  padding: 0 var(--s4);
}

.toast {
  max-width: 32rem;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--c-text) 90%, transparent);
  color: var(--c-page);
  font-size: var(--fs-callout);
  line-height: var(--lh-snug);
  font-weight: 500;
  /* приходит снизу, оттуда же, где живёт таббар: направление объясняет источник */
  animation: toast-in var(--dur) var(--ease);
}

.toast--error {
  background: var(--c-danger);
  color: #fff;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --- Шторка/диалог --- */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: color-mix(in srgb, #000 40%, transparent);
  animation: fade-in var(--dur) var(--ease);
}

.sheet {
  width: 100%;
  max-width: 34rem;
  background: var(--c-page);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: var(--s5) var(--s4) calc(var(--safe-bottom) + var(--s4));
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  max-height: 88vh;
  overflow-y: auto;
  /* выезжает на свою высоту от нижнего края — по тому же пути, что и уходит */
  animation: sheet-in var(--dur-slow) var(--ease-drawer);
}

.sheet__title {
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  letter-spacing: var(--tr-title);
  font-weight: 700;
}

.sheet__text {
  color: var(--c-hint);
  font-size: var(--fs-callout);
  line-height: var(--lh-body);
  margin-top: calc(-1 * var(--s1));
}

.sheet__actions {
  display: flex;
  gap: var(--s2);
  padding-top: var(--s1);
}

.sheet__actions .btn {
  flex: 1;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes sheet-in {
  from {
    transform: translateY(100%);
  }
  to {
    transform: none;
  }
}

/* --- Прогресс --- */

.progress {
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--c-soft-strong);
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--c-accent);
  transition: width var(--dur) var(--ease);
}