/* Сброс, типографика, служебные классы.
 *
 * Ни одного цвета и ни одного размера значением: всё из `tokens.css`.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-14) / 1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
  letter-spacing: var(--track-tight);
}

/* Ссылка не красится акцентом. В макете акцент отдан одному действию на экране
 * и метке «здесь и сейчас»; названия городов, отелей и переездов набраны тушью.
 * Ссылками здесь оформлены целые карточки и строки — нажимаемость им сообщает
 * наведение и рамка, а не цвет. Пока правило красило каждую `<a>`, экран этапа
 * читался стеной синего: подсвечено всё, значит не подсвечено ничего. */
a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Фокус видимый и одинаковый на всём.
 *
 * `:focus-visible`, а не `:focus`: обводка после щелчка мышью выглядит поломкой,
 * а после Tab — единственный способ понять, где ты. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r1);
}

/* --- служебное ------------------------------------------------------------- */

.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* Капслок-подпись: ею в макете набрано всё, что объясняет соседний блок.
 * Моноширинная и с широким трекингом — так она читается как метка, а не как текст. */
/* Трекинг взят у макета — 0,14em. Широкая ступень (0,16em) осталась токеном
 * для мест, где подпись стоит одна и её надо растянуть; здесь она печаталась
 * на каждой подписи веба и расходилась со всеми семью артбордами. */
.caps {
  font: 600 var(--t-11) / 1 var(--mono);
  letter-spacing: var(--track-caps);
  color: var(--ink-4);
  text-transform: uppercase;
}

.soft {
  color: var(--ink-4);
}

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

.row {
  display: flex;
  align-items: center;
  gap: var(--s4);
}

.col {
  display: flex;
  flex-direction: column;
}

/* Обрезка в одну строку. Нужна почти всюду, где есть название: длинное имя
 * отеля иначе выдавливает соседей за край. */
.clip {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Шиммер вместо надписи «загружаю»: пустой прямоугольник на месте будущего
 * содержимого честнее слова, потому что показывает и форму. */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--fill);
  border-radius: var(--r3);
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

/* --- полосы прокрутки ------------------------------------------------------ */

/* Полос не видно, прокрутка остаётся. Решение владельца: экран собран
 * из панелей, и серая полоса вдоль каждой из них рисует лишние границы там,
 * где макет их не проводит.
 *
 * Отменяется только вид — колесо, тачпад, клавиши и перетаскивание работают
 * как работали. Оба объявления нужны: `scrollbar-width` понимают Firefox
 * и Safari 18+, псевдоэлемент — Chrome и WebKit постарше. */
* {
  scrollbar-width: none;
}
*::-webkit-scrollbar {
  width: 0;
  height: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}