/* ============================================================================
   Раскладка пульта на широких экранах — «Стекло», 12.09.2026.
   ----------------------------------------------------------------------------
   Повод: первый взгляд оператора на прод с ультравайда. «Выглядит плохо» —
   и это не про цвет и не про движение. Замеры живого пульта (Chromium,
   1440/1920/2560/3440) показали одно и то же на всех двенадцати экранах:

     · шапка жила в контейнере 88rem, «Обзор/Коннекторы/Статус» — в 88rem,
       «Заказы/Инбокс/База знаний» — в 98rem, «Настройки/Доступ/Журнал/
       Тест-чат» — в 72rem. Четыре разные меры. При переключении раздела
       левый край содержимого прыгал на 208 px, а кнопка раздела уезжала
       на 96 px ПРАВЕЕ аватара в шапке: «Обновить» читалась не как орган
       раздела, а как что-то, прилипшее к краю окна;
     · на 3440 у «Настроек» оставалось по 1144 px пустоты с каждой стороны
       при колонке в 1152 — та самая «пустыня справа»;
     · сетки карточек с `auto-fit` без потолка разворачивали семь плашек в
       одну строку на 1600 и ломали замысел «4 + 3»;
     · херои (сфера «Обзора», персона «Настроек», созвездие «Базы знаний»)
       тянулись за колонкой: чипы вокруг знака разъезжались к краям панели,
       граф разбредался по 1100 px;
     · размытые пятна «ложа под стеклом» заданы в rem и на 3440 висели
       тремя островами: стекло переставало быть стеклом посреди экрана.

   ЧТО ЗДЕСЬ ЛЕЖИТ. Только ширины, сетки и меры строки. Ни одного цвета, ни
   одной длительности: контраст и движение — чужая территория, и трогать их
   этот файл не имеет права (правило `app.css`: цвет в правилах не пишется).

   ПОЧЕМУ ОТДЕЛЬНЫМ ФАЙЛОМ. `app.css` лежит в CRLF и перевалил за семь тысяч
   строк: правка его из LF-инструмента даёт дифф на весь файл вместо десяти
   настоящих. Подключается сразу после `app.css` — до экранных стилей, чтобы
   экран мог переопределить общую меру своей, а не наоборот.
   ========================================================================= */

:root {
  /* Единственная мера содержимого. 106rem = 1696 px: на 1920 остаётся по
     112 px поля, на 2560 — по 432, на 3440 — по 872. Шире делать нечем:
     строка таблицы в 2000 px не читается, а пульт — не витрина. Потолок
     один и тот же для шапки и для рабочей зоны, иначе левые края не
     совпадают ни на одной ширине. */
  --content-max: 106rem;

  /* Боковое поле контейнера. Растёт с окном до 3rem и там останавливается:
     дальше поле растит уже сам контейнер своими `auto`-полями. */
  --gutter: clamp(1.25rem, 2.4vw, 3rem);

  /* Мера строки связного текста. Считать её в `ch` мало: `ch` — это ширина
     нуля, а нуль в Onest шире средней буквы примерно на четверть. Замер
     живого пульта: 68ch дают 92 знака у `.muted` (13px) и 88 у `.note`
     (12px), а у 14px `.muted` «Раздела» — 95. 64ch — это 86–89 знаков:
     верхняя граница читаемости, за которой глаз промахивается мимо начала
     следующей строки. Прежняя мера в 76ch давала 98–103. */
  --read-max: 64ch;

  /* Колонка заголовка раздела. Кнопки экрана встают СРАЗУ за ней, а не у
     правого края окна: действие принадлежит разделу, а не окну. */
  --head-text: 46rem;

  /* Потолок героя: сфера, персона, созвездие. Крупный знак на 3440 не
     обязан быть вдвое крупнее, чем на 1440, — он обязан остаться знаком. */
  --hero-max: 34rem;
}

/* ------------------------------------------------------- ЕДИНЫЙ КОНТЕЙНЕР */

/* Шапка и рабочая зона — одна и та же колонка. Полоса шапки по-прежнему во
   всю ширину (она липкая и обязана отделять экран от окна), в контейнере
   живёт только её содержимое: знак слева выходит ровно на ту же вертикаль,
   что заголовок раздела под ним.

   `--tab-max` в `app.css` намеренно оставлен на месте: если этот файл не
   приедет (404 в белом списке статики, кэш), пульт откроется со старой мерой
   в 72rem — узко, но целиком, а не во всю ширину монитора. */
.topbar-in,
.content {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --------------------------------------------------------- ШАПКА РАЗДЕЛА */

/* Кнопки раздела переезжают от правого края окна к заголовку. На 3440 они
   стояли в 2264 px от левого края экрана и в полутора метрах от слова, к
   которому относятся; теперь — сразу за колонкой заголовка, на любой ширине
   в одном и том же месте относительно текста. Линейка под шапкой (и засечка
   бренда на ней) по-прежнему во всю ширину контейнера: она отделяет шапку от
   содержимого, а не обводит кнопку. */
.page-head {
  justify-content: flex-start;
}

.page-head > div:not(.head-actions) {
  flex: 1 1 22rem;
  max-width: var(--head-text);
}

.page-head > .head-actions {
  flex: 0 0 auto;
  margin-inline-start: var(--s6);
}

/* ----------------------------------------------------------- МЕРА СТРОКИ */

/* `.note` и `.muted` меру уже имели (76ch), но она считалась от «нуля» —
   самого широкого знака, — и давала 100 знаков в строке вместо 90. Здесь
   мера одна и проверяется числом в смоуке. */
.tab .note,
.tab .muted,
.tab .lede {
  max-width: min(100%, var(--read-max));
}

/* Сноска «Статуса» оформлена колодцем во всю панель и меры не имела вовсе:
   на 2560 это 224 знака в строке. Колодец остаётся, строка — нет. */
#status-actions-note {
  max-width: min(100%, var(--read-max));
}

/* Списки проверок («Связь», «Каналы»): строка «что проверено — что ответило»
   на 1696 разъезжалась до 103 знаков. Мера ставится строке, а не списку:
   маркер и значение справа остаются на своих местах. */
.tab .checks > li {
  max-width: min(100%, var(--read-max));
}

/* Строка «Спроси EVA» (она же на «Заказах»). Поле ввода во всю ширину
   колонки превращается в полосу, в которой не видно начала набранного. */
.askbar {
  width: 100%;
  max-width: min(100%, 46rem);
  margin-inline: auto;
}

/* ------------------------------------------- ПОТОЛОК КОЛОНОК В СЕТКАХ КАРТ */

/* `repeat(auto-fit, minmax(X, 1fr))` не умеет «не больше N колонок»: на 1600
   семь плашек статуса ложились в одну строку, и замысел «4 + 3» пропадал.
   Приём стандартный: нижняя граница трека — не только X, но и доля
   контейнера на N колонок, поэтому колонок физически не может стать больше
   N, а растягиваться в пределах N они по-прежнему умеют.

   Числа не выдуманы: они ровно те, что дают экраны на 1440, где раскладку
   утверждал оператор. Здесь они лишь перестают разъезжаться выше. */
.grid,
.pair,
.tiles,
.kpi,
.trends {
  grid-template-columns: repeat(
    auto-fit,
    minmax(
      max(var(--col-min), (100% - (var(--cols) - 1) * var(--col-gap)) / var(--cols)),
      1fr
    )
  );
}

.grid {
  --col-min: 16.5rem;
  --col-gap: var(--s5);
  --cols: 3;
}

.pair {
  --col-min: 23rem;
  --col-gap: var(--s4);
  --cols: 2;
}

.tiles {
  --col-min: 14rem;
  --col-gap: var(--s3);
  --cols: 4;
}

.kpi {
  --col-min: 13.5rem;
  --col-gap: var(--s3);
  --cols: 4;
}

/* ----------------------------------------------------------- «ОБЗОР ДНЯ» */

/* Две левые колонки были жёсткими (18rem и 16rem), поэтому вся прибавка
   ширины доставалась персоне: на 2560 её панель занимала 768 px, а знак в
   ней — 176. Теперь прибавка делится: карточки денег и расхода растут вместе
   с экраном, персона упирается в потолок героя.

   🔴 M-2 (мобильный аудит 24.09). Правило без медиазапроса стояло ПОЗЖЕ
   `app.css` и той же специфичностью перебивало оба его адаптива «Обзора»:
   две колонки на ≤ 75rem и одну на ≤ 56rem. На 375 px сетка оставалась
   трёхколоночной (`288px 256px 0px`), все четыре блока экрана лежали в
   первой колонке шириной 18rem, и карточка «Сегодня» была уже полезной
   ширины на 55 px, а под панелью просвечивал фон. Три колонки — замысел
   для широкого экрана, и действует он ровно там, где `app.css` их и
   держит: выше 75rem. */
@media (min-width: 75.0625rem) {
  .ov {
    grid-template-columns: minmax(18rem, 1.05fr) minmax(16rem, 0.95fr) minmax(0, 2fr);
  }
}

/* Чипы вокруг знака приколоты к краям `.figure-wrap` (`inset: 0`). Пока она
   росла с панелью, «Язык» и «Роль» разъезжались от сферы на полметра. */
.figure-wrap {
  width: 100%;
  max-width: min(100%, var(--hero-max));
  margin-inline: auto;
}

/* ------------------------------------------------------------- ФОН СЦЕНЫ */

/* Зарево и «ложе под стеклом» заданы в rem: на 1440 три пятна смыкались в
   общий свет, на 3440 висели островами, и между ними стекло лежало на голом
   фоне — то есть переставало быть стеклом. Размер пятна теперь не меньше
   доли окна, положение (в процентах) не тронуто: свет падает оттуда же. */
body::before {
  background:
    radial-gradient(max(52rem, 36vw) max(30rem, 34vh) at 8% 2%, var(--ambient-1), transparent 62%),
    radial-gradient(max(44rem, 32vw) max(30rem, 34vh) at 100% 98%, var(--ambient-2), transparent 60%),
    radial-gradient(max(38rem, 28vw) max(30rem, 34vh) at 34% 108%, var(--ambient-3), transparent 62%);
}

body::after {
  background:
    radial-gradient(max(30rem, 26vw) max(22rem, 26vh) at 78% 6%, var(--bed-1), transparent 64%),
    radial-gradient(max(26rem, 24vw) max(24rem, 28vh) at 4% 34%, var(--bed-2), transparent 62%),
    radial-gradient(max(24rem, 22vw) max(20rem, 24vh) at 46% 96%, var(--bed-3), transparent 64%);
}

/* --------------------------------------------------------------- ТАБЛИЦЫ */

/* Длинный текст в ячейке (город с отделением, деталь события журнала) тянул
   колонку и растаскивал строку по всей ширине панели. Мера ячейки + перенос
   держат строку читаемой, а не «имя слева, статус за горизонтом». */
.tab td,
.tab th {
  overflow-wrap: anywhere;
}

/* Класс ставят экраны: город с отделением в «Заказах» (`orders.js`) и деталь
   события в «Журнале» (`audit.js`). Блочный, потому что `max-width` на
   строчном элементе не работает, а на самой <td> его не слушает табличная
   раскладка. */
.tab td .cell-wide {
  display: block;
  max-width: 26rem;
}

/* ---------------------------------------------------------------- 390 px */

/* Телефон не трогаем ничем из перечисленного выше. Поле контейнера здесь
   ровно то, что было в `app.css` до этого файла (var(--s4)), а потолок в
   106rem на 390 px не связывает по определению. */
@media (max-width: 56rem) {
  :root {
    --gutter: var(--s4);
  }

  .page-head > div:not(.head-actions) {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .page-head > .head-actions {
    margin-inline-start: 0;
  }

  .figure-wrap {
    max-width: 100%;
  }
}

/* ---------------------------------------------------------------- 416 px */

/* 🔴 Пара панелей на узком телефоне (375 и 360). Нижняя граница трека выше —
   `max(--col-min, доля контейнера на две колонки)`, и на телефоне побеждает
   первое слагаемое: 23rem = 368 px при полезной ширине 343 (375 − два поля по
   16). Колонка физически не может стать уже 368, поэтому «Связь» и «Каналы»
   вылезали на 10 px за поле и вбок ехал ВЕСЬ документ: на 375 scrollWidth 385
   при clientWidth 375, на 360 — 385 при 360.

   Ноль в `--col-min` сам по себе не помогает — второе слагаемое формулы
   («доля на `--cols` колонок») гарантирует, что колонок ВСЕГДА влезает ровно
   `--cols`, и пара на 375 распалась бы на две колонки по 163 px. Поэтому
   вместе с ним на телефоне стоит `--cols: 1`: трек становится `minmax(100%,
   1fr)`, то есть одна колонка во всю полезную ширину — ровно то, чем пара
   на телефоне и была задумана («на узком экране пара распадается в колонку
   сама», app.css).

   Порог 26rem (416 px) — тот же, что у веера персоны в `app.css`. Две колонки
   пары начинают помещаться только с 752 px (2 × 368 + зазор), так что ниже
   416 правило ничего не переставляет: оно снимает нижнюю границу, которую в
   этих ширинах всё равно нечем выполнить. */
@media (max-width: 26rem) {
  .pair {
    --col-min: 0;
    --cols: 1;
  }
}