/* ═════════════════ Sentos · Основа интерфейса ═════════════════
   Шрифты, палитра обеих тем, сброс и то, что действует на всё
   приложение сразу. Подключается первым: дальше идёт обычный каскад
   по разделам, и правило ниже перебивает правило выше.

   Добавили новый файл стилей — впишите его и в SHELL_ASSETS в sw.js,
   иначе без сети приложение останется без оформления.

   Правила дизайна: единственный акцент — красно-оранжевый, никаких
   рамок, теней, градиентов и стеклянных эффектов; группируем элементы
   расстоянием и тональными заливками; всё интерактивное — круглое.
   ═══════════════════════════════════════════════════════════════ */

/* Шрифты урезаны до латиницы и кириллицы: tools/subset-fonts.sh.
   Исходный SF Pro Display весит 1,8 МБ — он лежит в оболочке
   приложения и приезжает вместе с ней, поэтому лишнего в нём быть
   не должно. */
@font-face {
  font-family: "SF Pro Text";
  src: url("/assets/fonts/SF-Pro-Text-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Text";
  src: url("/assets/fonts/SF-Pro-Text-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Display";
  src: url("/assets/fonts/SF-Pro-Display-Semibold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: light;
  font-family: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;

  /* Акцент. Чистый --brand-500 идёт мелким деталям, крупные заливки
     берут производные потемнее: на пузырях и кнопках он режет глаз. */
  --brand-50: #fff0ed;
  --brand-100: #ffd8d0;
  --brand-500: #ff4b2b;
  --brand-600: #e83b20;
  --brand-700: #bd2c18;
  --brand-950: #3b110c;

  --error-50: #fff0f0;
  --error-500: #e54848;
  --error-950: #3a1515;

  /* Тональные заливки светлой темы.

     Страница держится заметно серой: на кристально белой блоку
     некуда подняться — панели, окна и пузыри перестают читаться
     как блоки. Поля внутри белой панели, наоборот, лишь на тон
     ниже её: плотный серый на белом читается грязью, а не полем.
     На телефоне панели нет, и там эти же тона идут вверх от
     страницы — подмена в touch.css. */
  --page: #ededef;
  --panel: #ffffff;
  --field: #f4f4f5;
  --field-strong: #ececee;
  --text: #18181b;
  --text-soft: #52525b;
  --muted: #71717a;

  /* На компьютере лента лежит на белой панели, и входящий пузырь на
     ней читается тоном темнее. На телефоне панели нет — лента
     лежит на серой странице, и там пузырь, наоборот, белый. */
  --bubble-in: #f1f1f3;

  /* Волосяная черта между строками списка. Задана прозрачностью, а
     не тоном: одна и та же черта ложится и на белую панель, и на
     серую страницу, и на подсвеченную строку. */
  --hairline: rgba(24, 24, 27, 0.1);
  --accent: #d9503a;
  --accent-soft: #fbe7e1;
  --accent-fill: #c4472f;
  --accent-fill-text: #ffffff;
  --bubble-out: #c4472f;
  --bubble-out-text: #ffffff;
  --brand-work: #c4472f;

  /* Поле ввода залито тем же тоном, что поиск: два одинаковых по смыслу
     поля на одном экране не должны отличаться оттенком. */
  --composer-bg: var(--field);
  --online: #3fb950;
  --danger: var(--error-500);

  /* Общая кривая движения: iOS-подобная, с мягким замедлением к концу.
     Ею идут высота окон, выезд меню, рост оболочки поля ввода. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

:root.dark {
  color-scheme: dark;
  --page: #111111;
  --panel: #191919;
  --field: #242424;
  --field-strong: #2c2c2c;
  --text: #fafafa;
  --text-soft: #d4d4d8;
  --muted: #a1a1aa;
  --bubble-in: #1f1f1f;
  --hairline: rgba(255, 255, 255, 0.09);
  --accent: #ef6f55;
  --accent-soft: #37211b;
  --accent-fill: #a8412c;
  --accent-fill-text: #ffffff;
  --bubble-out: #a8412c;
  --bubble-out-text: #f7f2f0;
  --brand-work: #a8412c;
  --danger: #f06a6a;
}

/* ─────────────────────────── Сброс ─────────────────────────── */

* { box-sizing: border-box; }

html {
  min-width: 320px;
  height: 100%;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  background: var(--page);
}

body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--page);
  color: var(--text);
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

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

button {
  cursor: pointer;
  border: 0;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

button:disabled { cursor: not-allowed; }

/* Обводки в проекте запрещены, поэтому клавиатурный фокус показываем
   заливкой — иначе при обходе табом не видно, где стоит курсор. */
button:focus-visible,
a:focus-visible {
  outline: 0;
  background: var(--accent-soft);
  color: var(--accent);
}

input:focus-visible,
textarea:focus-visible,
[contenteditable]:focus-visible { outline: 0; }

a { color: inherit; }

[hidden] { display: none !important; }

/* ─────────────────────────── Иконки ───────────────────────────
   Набор Solar лежит отдельным файлом icons/sprite.js и вставляется
   в начало документа скриптом: 81 символ весит 47 КБ в сжатом виде,
   и встроенный в разметку он приезжал бы при каждом открытии.
   Внешняя ссылка <use href="sprite.svg#id"> в Safari не работает. */

.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Символы Solar — залитые контуры, а не штрих: цвет задаётся fill. */
.icon {
  display: block;
  width: 22px;
  height: 22px;
  flex: none;
  fill: currentColor;
}

.icon-sm { width: 18px; height: 18px; }
.icon-xs { width: 15px; height: 15px; }

/* ────────────────────── Нажатие на кнопку ──────────────────────
   Класс is-pressed ставит js/ui.js на pointer-событиях, а не CSS по
   :active: на iPhone Safari :hover не даёт вовсе, а :active
   срабатывает через раз. Правило описывает любую кнопку страницы,
   в том числе созданную на лету. */

button,
[data-pressable] {
  transform: scale(1);
  transform-origin: 50% 50%;
  transition:
    transform 180ms var(--ease),
    filter 180ms ease,
    color 150ms ease,
    background-color 150ms ease;
}

button.is-pressed:not(:disabled),
[data-pressable].is-pressed {
  transform: scale(0.975);
  filter: brightness(0.95);
}

/* ─────────────────────────── Мелочи ─────────────────────────── */

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

.screen-title {
  margin: 0;
  font-family: "SF Pro Display", "SF Pro Text", sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

.muted-text {
  color: var(--muted);
  font-size: 13px;
}

/* Прокрутка без видимых полос: они перекрывают содержимое, а на
   компьютере ещё и создают лишний горизонтальный скролл. Явный
   overflow-x нужен: одного overflow-y: auto хватает, чтобы браузер
   включил и горизонтальную прокрутку. */
.scroll-y {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
}

/* Почему здесь больше нет `-webkit-overflow-scrolling: touch`.
   На iOS оно уводило ленту в свой слой, и ничто внутри неё не могло
   подняться над затемнением меню сообщения: выделенный пузырь темнел
   и размывался наравне с остальными, хотя этаж у него выше. В Chrome
   и в настольном WebKit этого не видно — только на телефоне Apple.
   Инерционная прокрутка с iOS 13 работает и без этого правила. */

.scroll-y::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

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

  /* «Меньше движения» — не повод убирать отклик на нажатие: кнопка всё
     так же продавливается, просто без плавного перехода. */
  button.is-pressed:not(:disabled),
  [data-pressable].is-pressed { filter: brightness(0.86); }
}