/* Переход между вкладками. Приложение многостраничное: каждая вкладка —
   отдельный запрос, и браузер по умолчанию гасит экран в белое и рисует
   новую страницу рывком. Эти две строки заменяют рывок плавным
   проявлением; браузеры, которые их не знают, просто рисуют как раньше.
   Шапка и нижняя панель на обеих страницах одни и те же, и названы так,
   чтобы браузер их не перерисовывал, а оставил на месте. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: .12s; }
::view-transition-new(root) { animation-duration: .14s; }

:root {
  /* Высота строки состояния телефона. На обычном экране — ноль. */
  --сверху: env(safe-area-inset-top, 0px);
  /* Цвета Ikat. Индиго — главный: им написаны действия и выбранное.
     Теал — «всё хорошо», икат-красный — «беда» и необратимое, тёплый
     фон держит всё вместе. Имена переменных остались прежними: они
     говорят о роли цвета, а не о его оттенке. */
  --фон: #f5f2ea;          /* тёплый фон */
  --карточка: #fffdf8;     /* бумага чуть теплее белого */
  --текст: #1c2435;
  --тихий: #6b6a63;
  --рамка: #ded7c6;
  --синий: #23335e;        /* индиго */
  --зелёный: #287e7b;      /* теал */
  --жёлтый: #8a5c00;
  --красный: #c8444b;      /* икат-красный */
  --индиго-светлый: #e7e9f0;
  --теал-светлый: #e3efed;
  --красный-светлый: #faeaea;
  /* Те же цвета, но притемнённые: мелкий текст на светлой подложке
     должен читаться, а фирменные оттенки для этого чуть светловаты.
     Заливки и крупное остаются фирменными. */
  --теал-текст: #1f6a67;
  --красный-текст: #a93c43;
}
* { box-sizing: border-box; }
/* Здешние фамилии бывают в сорок знаков одним словом. Без переноса
   такое слово раздвигает ячейку, и страница едет вбок — у приложения,
   которое держит экран телефона, горизонтальной прокрутки быть не
   должно вовсе. */
body, td, th, .карточка, label, p, h1, h2 { overflow-wrap: anywhere; }
/* Касание должно отзываться сразу. `manipulation` убирает ожидание
   второго касания (браузер иначе ждёт, не двойное ли это нажатие),
   а серый прямоугольник iOS заменяется собственной подсветкой: он
   появляется с задержкой и выглядит чужим. */
a, button, label, summary, select, input[type="submit"] {
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
body {
  margin: 0; background: var(--фон); color: var(--текст);
  font: 16px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* Подложка под строкой состояния телефона: без неё над шапкой висит
   серая полоса фона страницы, и верх выглядит обрезанным. Подложка
   того же цвета, что шапка, и лежит ПОД шапкой, а не поверх: иначе
   она закрывала бы её верхнюю строку. */
body::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; z-index: 4;
  height: var(--сверху);
  background: var(--карточка);
}
header {
  background: var(--карточка); border-bottom: 1px solid var(--рамка);
  padding: 12px 20px; display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap; position: sticky; top: 0; z-index: 5;
  view-transition-name: шапка;
}
header .логотип { font-weight: 700; }
header nav { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
header nav a { color: var(--тихий); text-decoration: none; }
header nav a:hover, header nav a.текущая { color: var(--синий); }
header .справа { margin-left: auto; color: var(--тихий); font-size: 14px; }
/* Значки нужны только на узком экране: на ноутбуке хватает слов. */
nav .значок { display: none; line-height: 0; }

/* «Ещё» — редкие разделы. Обычный <details>, без единой строки скрипта. */
details.ещё { position: relative; }
details.ещё summary {
  list-style: none; cursor: pointer; color: var(--тихий); user-select: none;
}
details.ещё summary::-webkit-details-marker { display: none; }
details.ещё[open] summary { color: var(--синий); }
details.ещё > div {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
  background: var(--карточка); border: 1px solid var(--рамка);
  border-radius: 12px; padding: 10px 14px; min-width: 170px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 10px 28px rgba(16, 22, 32, .14);
}
details.ещё > div a { font-size: 15px; }
/* Кнопка, которая выглядит как пункт меню. */
/* Ссылка, которая выглядит как кнопка. */
a.кнопка-ссылка {
  display: inline-block; margin-top: 12px; padding: 11px 18px;
  background: var(--синий); color: #fff; border-radius: 999px;
  text-decoration: none; font-weight: 600; min-height: 44px;
  line-height: 22px;
}
a.кнопка-ссылка:hover { opacity: .92; }
a.кнопка-ссылка svg { vertical-align: -6px; margin-right: 6px; }

button.как-ссылка {
  background: none; color: var(--тихий); border: 0; padding: 0; margin: 0;
  font-size: 15px; font-weight: 400; width: auto; min-height: 0;
  text-align: left; cursor: pointer;
}
button.как-ссылка:hover { color: var(--синий); }
main { max-width: 960px; margin: 0 auto; padding: 20px;
       padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)); }
h1 { font-size: 22px; margin: 0 0 16px; }
h2 { font-size: 17px; margin: 24px 0 10px; }
.карточка {
  background: var(--карточка); border: 1px solid var(--рамка);
  border-radius: 14px; padding: 16px; margin-bottom: 14px;
}
.тихо { color: var(--тихий); font-size: 14px; }

/* Надстрочник над заголовком: «IKAT TRAVEL • UZ» мелкими прописными —
   так подписан каждый экран прототипа. */
.надстрочник {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--зелёный); margin: 0 0 2px;
}

/* Полоска икат над карточкой: ромбы и косые кресты в два фирменных
   цвета. Рисуется узором, а не картинкой, — ничего не грузится. */
.икат {
  height: 12px; border-radius: 14px 14px 0 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='9' viewBox='0 0 44 9'><path d='M4 0.5 L7.5 4.5 L4 8.5 L0.5 4.5 Z' fill='%23c8444b'/><path d='M14 1 L19 8 M19 1 L14 8' stroke='%2323335e' stroke-width='1.6'/><path d='M26 0.5 L29.5 4.5 L26 8.5 L22.5 4.5 Z' fill='%23c8444b'/><path d='M36 1 L41 8 M41 1 L36 8' stroke='%2323335e' stroke-width='1.6'/></svg>");
  background-repeat: repeat-x; background-size: 44px 9px;
}

/* Пилюли: кнопки, метки и фильтры в прототипе скруглены полностью. */
.пилюля {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px; font-size: 13px;
  font-weight: 600; text-decoration: none; white-space: nowrap;
}
.пилюля.серая { background: #ece8dd; color: var(--тихий); }
.пилюля.хорошо { background: var(--теал-светлый); color: var(--теал-текст); }
.пилюля.плохо { background: #fbe9e9; color: var(--красный-текст); }

/* Срок заказа — главное число на экране заказа: заказ держит настоящие
   места настоящих людей и живёт считанные минуты. Цифры моноширинные,
   иначе строка дёргается на каждой секунде. */
.срок { margin: 6px 0 12px; font-size: 15px; font-weight: 600;
        color: var(--зелёный); }
.срок b, .срок .истёк { font-variant-numeric: tabular-nums; }
.срок .истёк, b.истёк { color: var(--красный-текст); }

/* Карточка целиком нажимается: на телефоне попасть в заголовок-ссылку
   пальцем труднее, чем в карточку. */
a.карточка { display: block; color: inherit; text-decoration: none; }
a.карточка:hover { border-color: var(--синий); opacity: 1; }
a.карточка h3 { margin: 6px 0 2px; font-size: 16px; }
.пусто { text-align: center; color: var(--тихий); padding: 28px 12px; }
.пилюля.синяя { background: var(--синий); color: #fff; }
.фильтры {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.фильтры::-webkit-scrollbar { display: none; }
.фильтры a {
  padding: 8px 16px; border-radius: 999px; font-size: 14px;
  font-weight: 600; text-decoration: none; border: 1px solid var(--рамка);
  background: var(--карточка); color: var(--текст);
  /* Пилюля не переносится: перенос по буквам, нужный длинным фамилиям,
     здесь ломает слово пополам. */
  white-space: nowrap; overflow-wrap: normal; flex: 0 0 auto;
}
.пилюля, .код, .метка { white-space: nowrap; overflow-wrap: normal; }
.фильтры a.выбран { background: var(--синий); color: #fff; border-color: var(--синий); }

/* Код заявки — моноширинным, как номер в билете. */
.код {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px; letter-spacing: .04em; background: #efebe0;
  color: var(--тихий); padding: 3px 9px; border-radius: 7px;
}

/* Маршрут: откуда — линия — куда, как в билете. */
.маршрут {
  display: flex; align-items: center; gap: 10px; margin: 8px 0 6px;
  font-size: 17px; font-weight: 700;
}
.маршрут .нить {
  flex: 1 1 auto; height: 1px; background: var(--рамка); position: relative;
  min-width: 18px;
}
.маршрут .нить::before, .маршрут .нить::after {
  content: ""; position: absolute; top: 50%; width: 7px; height: 7px;
  border-radius: 50%; transform: translateY(-50%);
}
.маршрут .нить::before { left: -2px; border: 1.6px solid var(--синий); background: var(--карточка); }
.маршрут .нить::after { right: -2px; background: var(--красный); }

/* Подвал карточки: сколько едет, какой класс, что просили. */
.подвал-карточки {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 14px; color: var(--тихий); padding-top: 8px;
  border-top: 1px solid var(--рамка);
}
.подвал-карточки .желание { margin-left: auto; color: var(--зелёный);
                            font-weight: 600; }
a { color: var(--синий); text-decoration-thickness: 1px;
    text-underline-offset: 3px; }
a:visited { color: var(--синий); }
a:hover { opacity: .85; }
label { display: block; margin: 12px 0 4px; font-size: 14px; color: var(--тихий); }
input, select, button {
  font: inherit; font-size: 16px; /* меньше 16 — Safari приближает экран */
  padding: 12px 14px; border: 1px solid var(--рамка); border-radius: 12px;
  border-radius: 8px; width: 100%; max-width: 100%; background: #fff;
  color: inherit; min-width: 0;
  min-height: 44px; /* палец попадает уверенно */
}
/* Safari рисует поле даты по-своему и не считается с шириной. */
input[type="date"] {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; max-width: 100%; min-width: 0;
}
button {
  background: var(--синий); color: #fff; border: 0; font-weight: 600;
  border-radius: 999px;
  cursor: pointer; margin-top: 16px;
}
button.тихая { background: var(--индиго-светлый); color: var(--синий);
               font-weight: 600; border-radius: 999px; }
button.опасная { background: var(--красный); color: #fff; }
button:hover { opacity: .92; }
.ряд { display: flex; gap: 12px; flex-wrap: wrap; }
/* min-width: 0 обязателен: без него поле не ужимается меньше своего
   содержимого и вылезает за край. На iPhone это особенно заметно с
   полями даты — у них своя внутренняя ширина с «дд.мм.гггг» и значком
   календаря, и они выезжали за карточку. */
.ряд > * { flex: 1 1 180px; min-width: 0; }
.ошибка {
  background: var(--красный-светлый); border: 1px solid #edc3c5;
  color: var(--красный-текст);
  padding: 12px; border-radius: 8px; margin-bottom: 14px;
}
.подсказка {
  background: #fbf3dd; border: 1px solid #e8d49a; color: var(--жёлтый);
  padding: 12px; border-radius: 8px; margin-bottom: 14px;
}
.удача {
  background: var(--теал-светлый); border: 1px solid #a9ccc8;
  color: var(--теал-текст);
  padding: 12px; border-radius: 8px; margin-bottom: 14px;
}
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--рамка); }
th { font-size: 13px; color: var(--тихий); font-weight: 600; }
.метка {
  display: inline-block; padding: 2px 8px; border-radius: 20px;
  font-size: 12px; font-weight: 600;
}
.метка.совпало { background: var(--теал-светлый); color: var(--теал-текст); }
.метка.почти   { background: #fbf3dd; color: var(--жёлтый); }
.метка.мимо    { background: #ece8dd; color: #5f5e57; }
.вход { max-width: 380px; margin: 8vh auto; }
.вход .карточка { padding: 24px; }

/* Плитки вместо выпадающих списков: на телефоне попасть пальцем
   в кнопку проще, чем вызывать список и крутить барабан. */
.плитки { display: flex; flex-wrap: wrap; gap: 8px; }
/* Переключатель прячем так, чтобы он не занимал места вовсе. Просто
   opacity:0 оставляет его шириной во всё поле, и страница становится
   шире экрана: на телефоне она ездит вбок при каждом касании. */
.плитки input {
  position: absolute; width: 1px; height: 1px; opacity: 0;
  margin: 0; padding: 0; border: 0; min-height: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  pointer-events: none;
}
.плитки label {
  display: flex; align-items: center; gap: 7px; margin: 0;
  padding: 10px 14px; border: 1px solid var(--рамка); border-radius: 10px;
  background: #fff; cursor: pointer; font-size: 15px; color: var(--текст);
  user-select: none; min-height: 44px;
}
.плитки label:active { transform: scale(.97); }
.плитки input:checked + label {
  border-color: var(--синий); background: #eef4ff; color: var(--синий);
  font-weight: 600;
}
.плитки svg { flex: none; }

/* Выбор снимка: две крупные кнопки вместо системного «файл не выбран».
   Само поле прячем — его вид не настраивается и на телефоне занимает
   строку надписью, которая ничего не говорит. */
.выбор-снимка input[type="file"] {
  position: absolute; width: 1px; height: 1px; opacity: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.выбор-снимка label {
  flex: 1 1 160px; justify-content: center; padding: 16px 14px;
  font-weight: 600;
}
.выбор-снимка input[type="file"]:focus + label {
  border-color: var(--синий); box-shadow: 0 0 0 3px rgba(31, 111, 235, .15);
}
/* Зона перетаскивания: на ноутбуке снимки бросают прямо сюда. */
.зона {
  border: 2px dashed var(--рамка); border-radius: 12px; padding: 14px;
  transition: border-color .15s ease, background-color .15s ease;
}
.зона.над { border-color: var(--синий); background: #eef4ff; }
.зона .только-мышь { margin: 10px 0 0; text-align: center; }
/* На телефоне перетаскивать нечем — и подсказка только мешает. */
@media (hover: none) { .только-мышь { display: none; } }
.выбранные {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.выбранные li {
  background: #f1f4f8; border-radius: 8px; padding: 8px 12px;
  font-size: 14px; color: var(--текст);
}
#сколько-выбрано { margin: 10px 0 0; }

/* Вырезка из документа над полем: то же место, откуда взято значение.
   Высота фиксирована, ширина по содержимому — полоска текста. */
img.оригинал {
  display: block; height: 30px; max-width: 100%; margin: 4px 0 2px;
  border: 1px solid var(--рамка); border-radius: 6px; background: #fff;
  object-fit: contain; object-position: left center; image-rendering: auto;
}
img.оригинал:hover { height: 56px; }
/* На телефоне наведения нет вовсе, а сверять мелкую полоску с полем
   надо именно там: вырезка увеличивается касанием. */
img.оригинал { cursor: zoom-in; }
img.оригинал.крупно { height: 150px; cursor: zoom-out; }
button[disabled] { opacity: .5; cursor: not-allowed; }
.плитки input:checked + label svg { color: var(--синий); }

/* Телефон. Главная беда узкого экрана — таблицы: они не помещаются
   и уезжают вбок. Поэтому на малых ширинах строки превращаются
   в карточки, где у каждого значения своя подпись. */
@media (max-width: 760px) {
  /* Телефон держит приложение, а не страницу: шапка и нижняя панель
     закреплены, прокручивается только середина.

     Так сделано не ради красоты. Когда прокручивается вся страница,
     Safari на iPhone прячет свою адресную строку, экран становится
     выше — а закреплённая панель остаётся на старом месте, и под ней
     открывается полоса пустого фона. Это и выглядит как «съехало».
     Без прокрутки страницы адресная строка не прячется, и панель
     всегда внизу. */
  html { height: 100%; }
  body { height: 100dvh; overflow: hidden; }
  header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 10;
    height: calc(53px + var(--сверху));
    padding: 10px 14px; gap: 10px;
  }
  main {
    position: fixed; left: 0; right: 0; z-index: 1;
    top: calc(53px + var(--сверху)); bottom: 0;
    overflow-y: auto; overscroll-behavior: contain;
    max-width: none; margin: 0;
    padding: 12px; padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }
  header .справа {
    font-size: 13px;
    /* Высота шапки задана, и переносить имя внутри неё некуда: длинное
       «Абдурахмонов Абдурахмон Абдурахмонович» уезжало второй строкой
       под нижний край и обрезалось. Одна строка с многоточием. */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-width: 0; flex: 0 1 auto;
  }
  header { flex-wrap: nowrap; }
  header .логотип { white-space: nowrap; }
  /* Крупный заголовок, как в прототипе: экран представляется одним
     словом, и оно должно читаться с расстояния вытянутой руки. */
  h1 { font-size: 28px; letter-spacing: -.02em; margin: 2px 0 14px; }

  /* Главные разделы — нижней панелью: большой палец достаёт до неё
     не глядя, а верх экрана остаётся под содержимое. */
  header nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    background: var(--карточка); border-top: 1px solid var(--рамка);
    gap: 0; flex-wrap: nowrap;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    view-transition-name: панель;
  }
  /* Палец нажал — вкладка отозвалась, не дожидаясь ответа сервера. */
  header nav > *:active, header nav a.выбрана { color: var(--синий); }
  header nav > * { transition: color .12s ease, opacity .12s ease; }
  header nav > *:active { opacity: .55; }
  header nav > * {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    font-size: 11px; text-align: center; padding: 4px 2px;
  }
  nav .значок { display: block; }
  /* Привязка к экрану, а не к узкой кнопке: иначе список вылезает
     за правый край. */
  details.ещё > div {
    position: fixed; left: auto; right: 10px; top: auto;
    bottom: calc(68px + env(safe-area-inset-bottom));
  }
  .карточка { padding: 13px; border-radius: 12px; }
  .ряд > * { flex: 1 1 100%; }

  table, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }
  tr {
    border: 1px solid var(--рамка); border-radius: 10px;
    padding: 10px 12px; margin-bottom: 10px; background: #fff;
  }
  td { border: 0; padding: 4px 0; display: flex; gap: 10px;
       align-items: flex-start; }
  /* Метка исхода — не на всю ширину: иначе кружок растягивается в овал. */
  td .метка { align-self: flex-start; }
  td::before {
    content: attr(data-подпись); color: var(--тихий); font-size: 13px;
    flex: 0 0 42%; }
  /* Ячейка без подписи (кнопка в конце строки) не должна занимать
     место под пустую метку. */
  td:not([data-подпись])::before { content: none; }
  /* Длинному значению колонка в 58 % тесна: подпись уходит строкой выше. */
  td.широкая { display: block; }
  td.широкая::before { display: block; margin-bottom: 2px; }
  td:empty { display: none; }

  /* Таблица «название — значение» карточками не становится: строка из
     двух слов читается лучше одной строкой, чем двумя. */
  table.пара, table.пара tbody { display: table; width: 100%; }
  table.пара tr {
    display: table-row; border: 0; background: none;
    padding: 0; margin: 0; border-radius: 0;
  }
  table.пара td {
    display: table-cell; padding: 9px 0;
    border-bottom: 1px solid var(--рамка);
  }
  table.пара td::before { content: none; }
  table.пара td:first-child {
    /* Подпись не ломаем по буквам: «Не звать, если дороже» вставало
       лесенкой в три строки, хотя места хватало. */
    overflow-wrap: normal; color: var(--тихий); width: 46%;
  }
  table.пара td:last-child {
    text-align: right; padding-left: 10px; width: 54%;
    overflow-wrap: anywhere;
  }
  table.пара td.длинное { white-space: normal; width: auto; }
  table.пара tr:last-child td { border-bottom: 0; }
}

/* Скрытое — скрыто. Без этого правила строка таблицы, которой на
   телефоне задан display:block, останется видимой вопреки hidden. */
[hidden] { display: none !important; }

/* Ячейка без подписи — заголовок карточки на телефоне: подпись ей не
   нужна, и место под неё тратить незачем. */
td.главная::before { content: none; }
td.главная { display: block; font-size: 16px; }

/* Плавность. Ничего не прыгает: цвет, рамка и нажатие меняются
   заметно, но за доли секунды. */
a, button, select, input, .плитки label, .карточка {
  transition: background-color .15s ease, border-color .15s ease,
              color .15s ease, box-shadow .15s ease, transform .08s ease,
              opacity .15s ease;
}
* { -webkit-tap-highlight-color: transparent; }
button, .плитки label, a { touch-action: manipulation; }
html { scroll-behavior: smooth; }
button:active { transform: scale(.98); }
input:focus, select:focus {
  outline: none; border-color: var(--синий);
  box-shadow: 0 0 0 3px rgba(31, 111, 235, .15);
}
/* Нажали «Сохранить» — кнопка сразу показывает, что работа пошла. */
button.ждём { opacity: .75; cursor: progress; }
.поиск { margin: 0 0 10px; }

/* Экран наблюдения за сервером. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  html { scroll-behavior: auto; }
}

/* Экран наблюдения за сервером. */
.живое { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
         gap: 12px; margin-bottom: 14px; }
.показатель {
  background: var(--карточка); border: 1px solid var(--рамка);
  border-radius: 12px; padding: 14px;
}
.показатель .подпись { font-size: 13px; color: var(--тихий); }
.показатель .цифра { font-size: 26px; font-weight: 700; margin: 4px 0 2px; }
.показатель .мелко { font-size: 13px; color: var(--тихий); }
.полоска {
  height: 8px; border-radius: 4px; background: #e7ebf0; overflow: hidden;
  margin-top: 8px;
}
.полоска > i { display: block; height: 100%; width: 0;
               background: var(--синий); transition: width .4s ease; }
.полоска.тепло > i { background: var(--жёлтый); }
.полоска.горячо > i { background: var(--красный); }
#когда { font-size: 13px; color: var(--тихий); margin: 0 0 14px; }

/* Безопасная зона iPhone: вырез, «чёлка» и полоса жестов не должны
   перекрывать содержимое.

   Верх — главное: приложение открывается с домашнего экрана во весь
   экран, и строка состояния телефона ложится поверх страницы. Без
   отступа шапка уезжает под часы и значок сети, и прочитать её
   невозможно. Отступ задаётся переменной, чтобы его было видно в
   одном месте и можно было проверить на обычном экране. */
header { padding-top: calc(12px + var(--сверху)); }
@supports (padding: max(0px)) {
  body { padding-left: env(safe-area-inset-left);
         padding-right: env(safe-area-inset-right); }
}
@media (max-width: 760px) {
  header { padding-top: calc(10px + var(--сверху)); }
}