/*
 * Базовые стили всех страниц: сброс, шрифт, ссылки, кольцо фокуса, иконки, заглушки загрузки,
 * сообщения. Значения — только из tokens.css (подключается раньше этого файла).
 */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--color-bg-page);
  color: var(--color-text);
  font-family: var(--font-text);
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol { margin: 0; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

a { color: var(--color-text-link); text-decoration-thickness: var(--link-underline-thickness); text-underline-offset: var(--link-underline-offset); }
a:hover { color: var(--color-text-link-hover); }

/* Кольцо фокуса — обводка, только с клавиатуры (tokens.css, «Кольцо фокуса») */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Атрибут hidden сильнее display из стилей компонентов */
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Иконки ----------
   Lucide (как в прототипе: Icon.dc.html берёт lucide-static@0.460.0 с jsDelivr и рисует маской
   цветом текста). Имя иконки — класс .icon--<имя>, размер — .icon--xs/s/m/xl (tokens.css, «Размеры иконок»), по умолчанию l. */
.icon {
  --icon-size: var(--icon-size-l);
  display: block; flex: none;
  width: var(--icon-size); height: var(--icon-size);
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.icon--xs { --icon-size: var(--icon-size-xs); }
.icon--s { --icon-size: var(--icon-size-s); }
.icon--m { --icon-size: var(--icon-size-m); }
.icon--xl { --icon-size: var(--icon-size-xl); }

.icon--archive { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/archive.svg); }
.icon--archive-restore { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/archive-restore.svg); }
.icon--armchair { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/armchair.svg); }
.icon--arrow-left { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/arrow-left.svg); }
.icon--arrow-right { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/arrow-right.svg); }
.icon--ban { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/ban.svg); }
.icon--bell { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/bell.svg); }
.icon--calendar { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/calendar.svg); }
.icon--calendar-check { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/calendar-check.svg); }
.icon--calendar-clock { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/calendar-clock.svg); }
.icon--calendar-days { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/calendar-days.svg); }
.icon--calendar-off { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/calendar-off.svg); }
.icon--calendar-plus { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/calendar-plus.svg); }
.icon--calendar-x { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/calendar-x.svg); }
.icon--check { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/check.svg); }
.icon--chevron-down { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/chevron-down.svg); }
.icon--chevron-left { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/chevron-left.svg); }
.icon--chevron-right { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/chevron-right.svg); }
.icon--chevron-up { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/chevron-up.svg); }
.icon--circle { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/circle.svg); }
.icon--circle-alert { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/circle-alert.svg); }
.icon--circle-check { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/circle-check.svg); }
.icon--circle-help { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/circle-help.svg); }
.icon--circle-x { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/circle-x.svg); }
.icon--clock { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/clock.svg); }
.icon--coffee { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/coffee.svg); }
.icon--contact-round { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/contact-round.svg); }
.icon--eye { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/eye.svg); }
.icon--eye-off { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/eye-off.svg); }
.icon--globe { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/globe.svg); }
.icon--headset { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/headset.svg); }
.icon--history { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/history.svg); }
.icon--house { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/house.svg); }
.icon--hourglass { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/hourglass.svg); }
.icon--info { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/info.svg); }
.icon--layers { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/layers.svg); }
.icon--link-2-off { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/link-2-off.svg); }
.icon--loader { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/loader.svg); }
.icon--lock { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/lock.svg); }
.icon--log-in { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/log-in.svg); }
.icon--log-out { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/log-out.svg); }
.icon--mail { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/mail.svg); }
.icon--map-pin { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/map-pin.svg); }
.icon--menu { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/menu.svg); }
.icon--message-circle { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/message-circle.svg); }
.icon--minus { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/minus.svg); }
.icon--moon { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/moon.svg); }
.icon--mouse-pointer-click { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/mouse-pointer-click.svg); }
.icon--pencil { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/pencil.svg); }
.icon--phone { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/phone.svg); }
.icon--phone-off { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/phone-off.svg); }
.icon--plane { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/plane.svg); }
.icon--play { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/play.svg); }
.icon--plus { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/plus.svg); }
.icon--rotate-ccw { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/rotate-ccw.svg); }
.icon--scissors { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/scissors.svg); }
.icon--search { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/search.svg); }
.icon--search-x { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/search-x.svg); }
.icon--shield-alert { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/shield-alert.svg); }
.icon--shield-x { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/shield-x.svg); }
.icon--sparkles { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/sparkles.svg); }
.icon--sun { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/sun.svg); }
.icon--sunrise { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/sunrise.svg); }
.icon--tag { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/tag.svg); }
.icon--timer { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/timer.svg); }
.icon--trash-2 { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/trash-2.svg); }
.icon--triangle-alert { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/triangle-alert.svg); }
.icon--user { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/user.svg); }
.icon--user-round-x { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/user-round-x.svg); }
.icon--user-x { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/user-x.svg); }
.icon--users { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/users.svg); }
.icon--wallet { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/wallet.svg); }
.icon--x { --icon: url(https://cdn.jsdelivr.net/npm/lucide-static@0.460.0/icons/x.svg); }

/* ---------- Заглушка на время загрузки ----------
   Как «Таблица · загрузка» в дизайн-системе: полоса --color-border ↔ --color-bg-muted бежит слева направо.
   Длительность — --duration-skeleton. */
.skeleton {
  display: block;
  border-radius: var(--radius-badge);
  background: linear-gradient(90deg, var(--color-border) 0, var(--color-bg-muted) 120px, var(--color-border) 240px) 0 0 / 480px 100%;
  animation: skeleton-shimmer var(--duration-skeleton) linear infinite;
}
.skeleton--line { height: 12px; } /* строка текста — как в заглушках дизайн-системы */
@keyframes skeleton-shimmer { 0% { background-position: -240px 0; } 100% { background-position: 240px 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* ---------- Сообщения (ошибка, успех, информация, предупреждение) ---------- */
.message {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3-5) var(--space-4);
  border-radius: var(--radius-block);
  border: var(--border-width-field) solid;
}
.message > .icon { margin-top: 1px; } /* оптическая поправка: иконка по первой строке */
.message__body { flex: 1; display: flex; flex-direction: column; gap: var(--space-0-5); }
.message__title {
  font-size: var(--font-size-title-s); line-height: var(--line-height-title-s); font-weight: var(--font-weight-title-s);
}
.message__text { font-size: var(--font-size-body-s); line-height: var(--line-height-body-s); }

.message--error { background: var(--color-error-bg); border-color: var(--color-error-border); color: var(--color-error-body); }
.message--error > .icon { color: var(--color-error-text); }
.message--error .message__title { color: var(--color-error-title); }

.message--success { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success-body); }
.message--success > .icon { color: var(--color-success-text); }
.message--success .message__title { color: var(--color-success-title); }

.message--info { background: var(--color-info-bg); border-color: var(--color-info-border); color: var(--color-info-body); }
.message--info > .icon { color: var(--color-info-text); }
.message--info .message__title { color: var(--color-info-title); }

.message--warning { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning-body); }
.message--warning > .icon { color: var(--color-warning-text); }
.message--warning .message__title { color: var(--color-warning-title); }