/* ═══════════════════════════════════════════════════════════════
   Smart SMM. Один стиль на все экраны.

   Правило одно: никакой цвет не задаётся значением на месте, только
   переменной сверху, иначе тёмная тема (она включается сама, по
   настройке устройства) отвалится молча в одном блоке из тридцати.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg: #F4F5F7;
  --card: #FFFFFF;
  --text: #16171D;
  --muted: #646A78;
  --soft: #454B57;
  --line: #E6E8ED;
  --chip: #EFF1F4;
  --blue: #4578F9;
  --blue-soft: #E4EDF9;
  --blue-ink: #22568F;
  --magenta: #CB3EFF;
  --magenta-ink: #8A22B8;
  --violet-soft: #ECE3F7;
  --violet-ink: #5C3496;
  --green: #2E9B26;
  --green-soft: #E4F4E2;
  --green-ink: #1C6A17;
  --red: #E5484D;
  --red-soft: #FAE2E6;
  --red-ink: #93283C;
  --amber: #E09B00;
  --amber-soft: #FCF1D8;
  --amber-ink: #8A5B00;
  --shadow: 0 1px 2px rgba(16, 20, 30, .05), 0 6px 18px rgba(16, 20, 30, .05);
  /* Заливки под белым текстом. Фирменные цвета ярче, чем нужно для чтения:
     белый на синем давал 3,96:1, на пурпурном 3,7:1 при норме 4,5:1 (разбор
     22.09, работа 4.7). Линии графиков остаются яркими — им читаемость текста
     не нужна, поэтому заливка отделена от цвета, а не перекрашен цвет. */
  --blue-fill: #3366E8;
  --magenta-fill: #AE2DE0;
  --red-fill: #CF3339;
  --green-fill: #23831D;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F1218;
    --card: #191D26;
    --text: #E7E9EF;
    --muted: #8A91A0;
    --soft: #BAC1CE;
    --line: #272C37;
    --chip: #232833;
    --blue: #6D93FF;
    --blue-soft: #16283D;
    --blue-ink: #8AB6E8;
    --magenta: #CF74F4;
    --magenta-ink: #DFA6F7;
    --violet-soft: #271B3A;
    --violet-ink: #BB9DE6;
    --green: #57BE5C;
    --green-soft: #16301A;
    --green-ink: #7FD183;
    --red: #EF7378;
    --red-soft: #3A1A21;
    --red-ink: #E894A1;
    --amber: #E3A737;
    --amber-soft: #32250E;
    --amber-ink: #E8BC66;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 22px rgba(0, 0, 0, .32);
    --blue-fill: #3366E8;
    --magenta-fill: #AE2DE0;
    --red-fill: #CF3339;
    --green-fill: #23831D;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

/* Возврат встроенного поведения браузера, а не спор с чужими стилями — отсюда
   и !important. Браузер прячет `hidden` правилом своей таблицы, а ЛЮБОЕ правило
   автора бьёт встроенное независимо от веса селектора: одного `display` в
   классе хватает, чтобы `hidden` перестал работать молча. Так и вышло с кнопкой
   звука — `.zvuk { display: inline-flex }` держал её на экране всюду, включая
   Аналитику и Контент-план, где слушать нечего, а `knopka.hidden = false` в
   скрипте был холостым выстрелом: кнопка не пряталась ни разу. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: Onest, "Golos Text", sans-serif; margin: 0; text-wrap: balance; }
a { color: inherit; }
ul { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }

.skip {
  position: absolute; left: -9999px; top: 8px; z-index: 20;
  background: var(--card); padding: 8px 14px; border-radius: 8px; box-shadow: var(--shadow);
}
.skip:focus { left: 8px; }

/* ── каркас ───────────────────────────────────────────────────── */

.app {
  display: grid; grid-template-columns: 216px minmax(0, 1fr); min-height: 100vh;
  /* Меню прилипшее, и на длинной странице его белая колонка обрывалась
     там, где кончается первый экран. Заливку держит фон сетки. */
  background: linear-gradient(to right, var(--card) 216px, var(--line) 216px, var(--line) 217px, var(--bg) 217px);
}

/* Меню — `aside` ПРЯМО в каркасе, а не любой `aside` страницы. Выезжающая
   панель фильтров тоже `aside` (_drawer.html, _drawer_zhurnal.html), и голый
   селектор кормил её правилами меню: на широком экране — поля 18/14, из-за
   которых подвал «Показать / Сбросить» не доходил до краёв, на телефоне —
   `align-items: center` и поля 10/12, которые сжимали шапку, поиск и подвал
   по ширине содержимого и ставили их по центру, и `overflow: hidden`, из-за
   которого длинный список нельзя было прокрутить до кнопок (разбор 30.09,
   просьба участка 1D). */
.app > aside {
  background: var(--card); padding: 18px 14px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  /* Колонкой: низ меню (кружок с инициалами) прижимается к низу экрана
     `margin-top: auto`, а не стоит сразу под последним пунктом. */
  display: flex; flex-direction: column;
}
.brand {
  display: flex; align-items: center; gap: 9px; font-family: Onest; font-weight: 700;
  font-size: 15px; margin-bottom: 22px; padding-left: 6px; text-decoration: none;
}
/* Знак — три круга из первого прототипа (arhiv/makety/prototype, .logo-mark):
   синий сверху, фиолетовый слева снизу, жёлтый справа снизу. Владелец 30.09:
   «мне она больше нравится». Фиолетовый — тень жёлтого: так все три круга
   живут в одном пустом <i> каждого шаблона и ложатся в том же порядке, что
   в прототипе (жёлтый поверх фиолетового). На печати цвета сохраняются. */
.brand i { position: relative; width: 26px; height: 26px; flex: none; }
.brand i::before, .brand i::after {
  content: ""; position: absolute; width: 15px; height: 15px; border-radius: 50%; opacity: .92;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.brand i::before { top: 0; left: 5px; background: var(--blue); }
.brand i::after { bottom: 0; left: 11px; background: #FFBC11; box-shadow: -11px 0 0 var(--magenta); }
.nav a {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px;
  color: var(--text); text-decoration: none; font-size: 13px;
}
.nav a:hover { background: var(--chip); }
.nav a.on { background: var(--chip); font-weight: 600; }
.nav a .ic { width: 15px; text-align: center; opacity: .65; font-size: 12px; }
.nav a .badge {
  margin-left: auto; background: var(--magenta-fill); color: #fff; font-size: 10px;
  font-weight: 700; padding: 1px 6px; border-radius: 999px;
}
/* «Выйти» — кнопка формы, но выглядит ссылкой. Правила у класса не было
   вовсе, и браузер рисовал системную кнопку: в тёмной теме серое на сером,
   1,68:1 (разбор 22.09, работа 4.7). */
.linkish {
  background: none; border: 0; padding: 0; font: inherit; color: var(--soft);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.linkish:hover { color: var(--text); }
.asidefoot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); position: relative; }

main { padding: 18px 22px 40px; min-width: 0; }

.topbar { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
h1.page { font-family: Onest; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.grow { flex: 1; }
.crumb { color: var(--muted); font-size: 12.5px; }

/* ── управление ───────────────────────────────────────────────── */

.seg {
  display: inline-flex; background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px; gap: 2px;
}

/* Листание окна: стрелка назад и стрелка вперёд рядом с выбором периода.
   Мишень 30 × 28 — в стрелку надо попадать курсором, а не целиться в символ.
   Погасшая стрелка остаётся НА МЕСТЕ, а не исчезает: пропадая, она сдвигала
   бы соседнюю под курсор, и следующее нажатие уходило не туда. */
.listalka { display: inline-flex; gap: 3px; margin-left: 7px; }
.listalka a, .listalka .nekuda {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 28px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--muted); font-size: 14px; line-height: 1;
  text-decoration: none;
}
.listalka a:hover { border-color: var(--muted); color: var(--text); }
.listalka .nekuda { opacity: .35; cursor: default; }
/* В макетах переключатель был из span: щёлкать его умел скрипт. В продукте
   это ССЫЛКИ — период должен переживать пересылку адреса, — поэтому правила
   распространены на `a`, иначе выбор периода выглядел бы простым текстом. */
.seg span, .seg button, .seg a {
  padding: 4px 12px; border-radius: 999px; font-size: 12.5px; color: var(--muted);
  border: 0; background: transparent; cursor: pointer; white-space: nowrap;
  text-decoration: none;
}
.seg span.on, .seg button.on, .seg a.on { background: var(--blue-fill); color: #fff; font-weight: 600; }
/* Группы тем в Банке тем (05.10): одиннадцать кнопок — с переносом строки,
   иначе на телефоне ряд уходит за край. Число темы в группе — тише имени. */
.seg.gruppy-tem { display: flex; flex-wrap: wrap; border-radius: 16px; }
.seg.gruppy-tem small { font-size: 11px; opacity: .7; margin-left: 2px; }

.btn {
  display: inline-block; border: 1px solid var(--line); background: var(--card); border-radius: 9px;
  padding: 6px 13px; font-size: 12.5px; color: var(--text); white-space: nowrap;
  text-decoration: none; cursor: pointer;
}
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--blue-fill); border-color: var(--blue-fill); color: #fff; font-weight: 600; }
.btn.primary:hover { filter: brightness(1.06); }
.btn.small { padding: 4px 10px; font-size: 11.5px; }
.btn.wide { display: block; width: 100%; text-align: center; }
.btn.danger { color: var(--red-ink); border-color: var(--red-soft); }

.field { display: block; margin-bottom: 12px; }
.field > span { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }
.field input, .field select, .field textarea {
  width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 9px;
  padding: 8px 11px; font: inherit; color: var(--text);
}
.field .note { color: var(--muted); font-size: 11.5px; margin-top: 4px; }
/* Поля прямо в форме строки таблицы «ключ — значение» — без `.field` (разбор
   30.09, UX В20): блогер, язык и время проверки на настройке канала, время
   сбора в настройках системы. Правило `.field` до них не доставало, и браузер
   рисовал свои поля: чёрная рамка, квадратные углы, в тёмной теме — белая
   рамка на тёмном. Стиль — по контейнеру, разметка не тронута. Поле внутри
   `:where()` не добавляет правилу веса: любое поле со своим классом
   (`.tg-stroka`, `.find`) остаётся при своём. */
table.rows td form :where(select, input:not([type="hidden"], [type="checkbox"], [type="radio"])) {
  max-width: 100%; vertical-align: middle;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 5px 9px; font: inherit; font-size: 12.5px; color: var(--text);
}

/* ── блоки ────────────────────────────────────────────────────── */

.panel {
  background: var(--card); border-radius: 14px; box-shadow: var(--shadow);
  padding: 16px 18px; margin-bottom: 14px;
}
.panel > h3 { font-family: Onest; font-size: 15px; font-weight: 700; margin-bottom: 3px; }
.panel > .hint { color: var(--muted); font-size: 12px; margin-bottom: 12px; }
/* «Сначала:» перед рядом порядка — без этого слова ряд читался шапкой таблицы
   (работа 4.13). Обёртка сжимается, чтобы ряд внутри мог прокручиваться. */
.poryadok { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.poryadok > .sub { white-space: nowrap; }
.head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.gap { height: 10px; }
.gap.big { height: 12px; }
.cols { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; align-items: start; }
.cols.even { grid-template-columns: 1fr 1fr; }

.kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi .b { background: var(--card); border-radius: 13px; box-shadow: var(--shadow); padding: 13px 15px; }
.kpi .b .lab { color: var(--muted); font-size: 11.5px; }
/* Кегль 20, а не 24 (Марк 16.09: «циферка огромная, и шрифт какой-то
   другой непонятный»). Двадцать четыре были БОЛЬШЕ имени экрана (h1.page —
   Onest 22): человек сначала видел цифру и только потом понимал, на каком он
   экране. Гарнитура остаётся Onest — ею в системе набраны все акцентные
   числа, включая такое же число в строке Аналитики (.kpi-inline b, 17 px),
   откуда человек на плитки и приходит. Менять её не на что: замер показал,
   что Golos Text на цифрах почти неотличим, а единообразие потерялось бы. */
.kpi .b .val {
  font-family: Onest; font-size: 20px; font-weight: 700; line-height: 28px;
  font-variant-numeric: tabular-nums; margin-top: 3px;
}
.kpi .b .dlt { color: var(--muted); font-size: 11px; margin-top: 2px; }

/* кратность — главный визуальный элемент продукта */
.mult {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 9px;
  border-radius: 999px; font-weight: 700; font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.mult em { font-style: normal; font-weight: 400; font-size: 11px; opacity: .78; }
.m0 { background: var(--chip); color: var(--muted); }
.m2 { background: var(--blue-soft); color: var(--blue-ink); }
.m5 { background: var(--violet-soft); color: var(--violet-ink); }
.m10 { background: var(--red-soft); color: var(--red-ink); }
/* Ниже обычного уровня — нейтральным контуром, не красным. Красный в системе
   значит поломку, а слабее своих бывает половина любых публикаций: плашка
   «×0,3» наказывала обычный результат, пока «×1,1» стояла серой (разбор 22.09,
   работа 4.8). Контур отличает её от ровной серой `.m0`, не крича. */
.mlow { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }

.story { display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; }
.story li { list-style: none; padding-left: 16px; position: relative; }
.story li:before { content: "—"; position: absolute; left: 0; color: var(--muted); }

.empty { color: var(--muted); font-size: 12.5px; padding: 8px 0; }
.sub { color: var(--muted); font-size: 11.5px; }
.stats { display: flex; gap: 11px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.stats b { color: var(--text); }

.pill {
  display: inline-flex; align-items: center; gap: 7px; background: var(--chip);
  border-radius: 999px; padding: 4px 12px; font-size: 12px;
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
/* Жёлтая плашка (владелец 16.09: «удобные плашечки, жёлтенькие»). Серая `.pill`
   рядом с «наблюдается с 08.09» ничем не выделялась, а сказать ей нужно
   тревожное: счётчики начали снимать не сразу, истории роста у публикации нет.
   Таких 3 694 из 4 038. */
.pill.amber { background: var(--amber-soft); color: var(--amber-ink); }
.dot.ok { background: var(--green); }
.dot.warn { background: var(--amber); }
.dot.bad { background: var(--red); }
/* `err` — то же красное состояние, что и `bad`: класс стоит в шести шаблонах
   беты (Панель, Журнал, Ключи, Настройки, Канал), а определения не имел —
   точка рисовалась прозрачной, и «копий нет» на Панели выглядело спокойной
   строкой без метки. */
.dot.err { background: var(--red); }
.tags { display: flex; flex-wrap: wrap; gap: 7px; }

/* ── карточки публикаций ──────────────────────────────────────── */

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 13px; }
.pcard {
  background: var(--card); border: 1px solid var(--line); border-radius: 13px;
  overflow: hidden; display: flex; flex-direction: column;
}
.prev {
  height: 132px; position: relative; display: flex; align-items: flex-end;
  padding: 9px; color: #fff; font-size: 11px; font-weight: 600;
}
/* Отдельная высокая обложка — там, где она сама по себе содержание:
   на экране публикации и в раскадровке. */
.prev.tall { height: auto; aspect-ratio: 9/16; }
.prev.square { height: auto; aspect-ratio: 4/5; }
/* Заглушки обложки — все шесть живые. Имя класса собирается в шаблоне
   перебором: `g{% cycle '1' … '6' %}` в _pcard.html и _kalendar.html, поэтому
   поиск по «g2» его не находит. Разбор 30.09 (АРХ) счёл `.g2`–`.g6` мёртвыми,
   и их снос оставил бы без подложки пять карточек из шести, пока обложка
   грузится или её нет вовсе. */
.g1 { background: linear-gradient(140deg, #4578F9, #CB3EFF); }
.g2 { background: linear-gradient(140deg, #0FB5A6, #4578F9); }
.g3 { background: linear-gradient(140deg, #FFBC11, #E5484D); }
.g4 { background: linear-gradient(140deg, #43B430, #0FB5A6); }
.g5 { background: linear-gradient(140deg, #7B7B7B, #16171D); }
.g6 { background: linear-gradient(140deg, #CB3EFF, #E5484D); }
/* Живая обложка. В макетах на её месте стоял градиент, поэтому правила для
   картинки там не было вовсе: заготовка не обрезается, а настоящая обязана —
   иначе карточки разъезжаются по высоте и сетка рассыпается. Градиент под
   картинкой остаётся: он виден, пока обложка грузится, и там, где её нет. */
.prev img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: inherit; z-index: 0;
}
/* Подписи — поверх обложки. В разметке картинка идёт после них, и без этого
   она накрывает и место в проценте, и имя блогера: на светлом кадре подписи
   пропадают целиком. */
.prev .who-mark, .prev .mark, .prev .peek, .prev .tagfmt { z-index: 1; }
/* Затемнение под нижними подписями: белый текст на светлом кадре не читается
   даже с тенью. Тень оставлена — она работает на пёстром. */
.prev::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 45%;
  background: linear-gradient(to top, rgba(12, 14, 20, .62), transparent);
  border-radius: inherit; pointer-events: none; z-index: 0;
}

.mark {
  position: absolute; top: 8px; right: 8px; background: rgba(17, 18, 30, .78);
  padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; color: #fff;
}
.mark.sig { background: var(--magenta-fill); }
.mark.del { background: var(--red-fill); }
/* Окно отслеживания — прямо на креативе (владелец 16.09: «зелёненький такой
   кружочек, где видно, отслеживается пост или нет»).

   pointer-events:none обязателен: креатив проигрывается по наведению на всю
   плашку, и ярлык, забирающий мышь себе, останавливал бы ролик каждый раз,
   когда курсор проходит через угол.

   z-index — из того же ряда, что у остальных подписей (`.prev .mark`): ролик и
   обложка растянуты на всю рамку и без него накрыли бы ярлык. На экране одной
   публикации подписей нет вовсе, поэтому правило стоит здесь, а не в `.prev`. */
.mark.track, .mark.pause {
  display: inline-flex; align-items: center;
  pointer-events: none; z-index: 1;
}
.mark.track { background: var(--green-fill); }
.mark.pause { background: rgba(17, 18, 30, .55); }
/* В ленте ярлык — именно КРУЖОК (владелец 16.09: «зелёненький кружочек»), без
   единой буквы: на карточке шириной в 280 пикселей подпись «отслеживается»
   встала бы в один ряд с форматом и съела бы кадр. Слово ему и не нужно — в
   ленте отмечается только зелёное, выбирать не из чего, а объяснение висит
   подсказкой.

   Уходит в правый НИЖНИЙ угол — единственный свободный: справа вверху стоит
   «удалена»/«сильнейшая», слева вверху имя блогера, слева внизу формат.

   Белая обводка обязательна: зелёный кружок ложится прямо на кадр, и на
   светлой траве или на зелёном фоне без неё он исчезает.

   На экране одной публикации ярлык остаётся наверху и С ПОДПИСЬЮ: там
   показываются оба состояния, и «зелёное против серого» без слов не
   прочитывается; внизу справа он к тому же лёг бы на кнопку полного экрана. */
.prev .mark.track {
  top: auto; bottom: 8px; width: 12px; height: 12px; padding: 0;
  border: 2px solid rgba(255, 255, 255, .92);
}
.tagfmt {
  position: absolute; bottom: 8px; left: 8px; background: rgba(17, 18, 30, .55);
  padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 600; color: #fff;
}
/* Карточка при наведении приподнимается рамкой и тенью — как строка таблицы,
   она показывает, на чём сейчас курсор. */
.pcard { transition: border-color .12s, box-shadow .12s; }
.pcard:hover { border-color: var(--muted); box-shadow: var(--shadow); }
/* Подпись публикации — под обложкой, а не на ней (работа 4.4): белый текст по
   фотографии спорил с тем, что блогер сам написал на кадре, и нечитаемы были
   оба. На обложке остаются ник, формат и метка топа. */
.pbody .podpis-posta {
  font-size: 12.5px; line-height: 1.4; color: var(--soft);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pbody { padding: 11px 12px 13px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
/* Кнопки прижаты к низу карточки: соседи в ряду одной высоты, и «+ в план»
   должно стоять на одной линии у всех (см. `.cards.big`). */
.pactions { display: flex; gap: 7px; padding: 0 12px 12px; margin-top: auto; }

/* ── таблицы ──────────────────────────────────────────────────── */

.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th {
  text-align: left; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; padding: 6px 9px; border-bottom: 1px solid var(--line);
  white-space: nowrap;
  /* Названия колонок стоят на ОДНОЙ строке, даже когда под частью из них
     появилась вторая строка со сроком (`th .sub` ниже). По умолчанию ячейка
     выравнивает содержимое по середине, и «Вышло за период» — единственная
     колонка без второй строки — уезжало на восемь пикселей ниже соседей:
     шапка получалась ступенькой. */
  vertical-align: top;
}
/* Вторая строка в шапке колонки: за какой срок посчитано число.
   Владелец 16.09 открыл Аналитику и подряд спросил «за какой период?» у
   четырёх колонок: в одной таблице стояло три разных горизонта (за всё время,
   за выбранный период, по последним двадцати публикациям), а названы были
   только два — и оба одинаковые. Подсказка при наведении там уже была и не
   помогла: её не видно, пока не наведёшь.
   Свойства шапки — капитель, разрядка, полужирный — здесь гасятся: срок
   поясняет название, а не спорит с ним за место второго заголовка. Размер
   меньше названия, иначе `.sub` (11,5px) оказался бы крупнее шапки (10,5px). */
th .sub {
  display: block; margin-top: 3px; font-size: 10px;
  text-transform: none; letter-spacing: 0; font-weight: 400;
}

td { padding: 8px 9px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
/* Строка отвечает на мышь: в таблице Каналов 21 строка и 7 колонок, и, ведя
   взгляд от ника к «последнему сбору», человек терял строку. Правил наведения
   было пятнадцать, и ни одного для строки (разбор 22.09, работа 4.2). Таблицы
   «ключ — значение» (`.rows`) и строки-разделители не подсвечиваются: там
   нечего вести глазом. */
table:not(.rows) tbody tr:not(.sep):hover > td { background: var(--chip); }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
td.key { color: var(--muted); width: 210px; }
table.rows td { border: 0; padding: 5px 0; }
table.rows td.key { padding-right: 14px; }
.barline {
  display: inline-block; height: 6px; border-radius: 3px; background: var(--blue);
  vertical-align: middle; margin-right: 7px;
}
.sep td { border: 0; padding-top: 12px; color: var(--muted); font-style: italic; font-size: 11.5px; }

/* ── узкий экран ──────────────────────────────────────────────── */

@media (max-width: 900px) {
  /* Заливка колонки — приём для широкого экрана; в одну колонку она
     превращается в лишнюю светлую полосу под содержимым.

     Строки заданы явно: у `.app` высота не меньше экрана, и без них свободное
     место делилось между шапкой и содержимым поровну — на коротком экране
     (пустые Публикации клиента) шапка вырастала до 267 точек (UX В3). Шапке —
     по содержимому, остальное — содержимому. */
  .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; background: var(--bg); }
  .app > aside {
    height: auto; border-bottom: 1px solid var(--line);
    padding: 10px 12px; display: flex; align-items: center; gap: 10px;
  }
  .brand { margin: 0; padding: 0; flex: none; }
  /* Меню в одну прокручиваемую строку: девять пунктов в столбик занимали
     весь первый экран, и находки уезжали под сгиб. */
    .nav { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 2px; min-width: 0;
         scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; padding: 6px 8px; }
  /* Низ меню на телефоне не прячется: без него не было ни «Выйти», ни «Как
     это считается». Кружок встаёт в конец строки меню. */
  .app > aside { flex-direction: row; }
  .asidefoot { margin: 0 0 0 auto; padding: 0; border: 0; flex: none; }
  .cols, .cols.even { grid-template-columns: minmax(0, 1fr); }
  .kpi { grid-template-columns: repeat(2, 1fr); }
  main { padding: 16px 14px 32px; }
  .topbar { gap: 10px; }
  h1.page { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   Вторая версия макетов: крупные обложки и графики.

   Замечание Марка 08.09: «фотография очень маленькая, не видно,
   о чём публикация» и «никаких графиков, тяжело смотреть только
   на цифры». Обложка стала главным элементом карточки, а каждая
   цифра, у которой есть распределение или история, получила
   картинку.

   В макетах графики нарисованы SVG прямо в разметке; в системе их рисует
   ECharts (static/vendor/echarts.min.js, обвязка — static/js/grafiki.js):
   линия, столбики, публикации формата столбиками и карта выходов.
   ═══════════════════════════════════════════════════════════════ */

/* ── карточка с крупной обложкой ─────────────────────────────── */

/* Карточки ряда тянутся до общего низа. Здесь стояло `align-items: start`, и
   оно отменяло задуманное «одной высоты» ниже по файлу: в первом ряду
   Публикаций карточки выходили 575 / 555 / 593 / 575, и кнопки прыгали на
   двадцать точек от соседки к соседке (UX В12). */
.cards.big { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.cards.big .prev { height: auto; aspect-ratio: 4 / 5; }
/* Пропорции самого креатива: он должен играть в своём кадре, а не в общем.
   Вертикальных публикаций 1 058 из 1 839, квадратных 362, горизонтальных 49. */
.prev[data-shape="vertical"] { aspect-ratio: 9 / 16; }
.prev[data-shape="square"] { aspect-ratio: 4 / 5; }
.prev[data-shape="wide"] { aspect-ratio: 16 / 9; }
.prev[data-shape="text"] { aspect-ratio: 4 / 3; }
/* Текст публикации без обложки — по центру рамки, между плашкой «блогер ·
   площадка» сверху и плашкой формата снизу. Прижатый к верху (14 пикселей),
   он наезжал на плашку блогера, а ниже стояла пустая заливка (владелец 01.10:
   «не красиво»). */
.prev[data-shape="text"] .peek {
  inset: 50% 18px auto 18px; transform: translateY(-50%);
  font-size: 15px; line-height: 1.4; -webkit-line-clamp: 7;
  text-shadow: none;
}
.cards.big .pbody { padding: 13px 14px 15px; gap: 8px; }
.cards.big .mult { font-size: 15px; padding: 4px 11px; }

/* Обложка-заглушка макета: в продукте здесь миниатюра публикации.
   Внутри — первые слова, чтобы было видно, о чём публикация. */
.prev .peek {
  position: absolute; inset: auto 10px 34px 10px; color: #fff; font-size: 13px;
  font-weight: 600; line-height: 1.35; text-shadow: 0 1px 12px rgba(0,0,0,.45);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.prev .who-mark {
  position: absolute; top: 8px; left: 8px; background: rgba(17,18,30,.55);
  padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 600; color: #fff;
  text-decoration: none;
}
/* Обложка — рамка с двумя ссылками (1E.1): имя ведёт на блогера, всё остальное
   — на публикацию. Ссылка на публикацию растянута на всю рамку, иначе у
   карточки без обложки (текстовые публикации Threads, их на копии 370 —
   scripts/probes/oblozhki_kartochek.py) нажатие по градиенту не ведёт никуда,
   а рамка фокуса почти не видна. Подписи с z-index:1 лежат над ней. */
.prev > .prev-link { position: absolute; inset: 0; border-radius: inherit; }

/* ── графики ─────────────────────────────────────────────────── */

figure { margin: 0; }
figcaption { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.45; }

/* Графики экранов рисует ECharts (static/js/grafiki.js) по числам из
   разметки; цвета он берёт из переменных сверху в момент рисования.

   Место под рисунок появляется, только когда скрипт его занял (`.zhivoy`):
   без скрипта под графиком остаётся текстовая сводка, без пустой рамки над
   ней. Высота идёт от ширины в тех же пропорциях, что у прежнего вектора
   (1180 × 240 и 1180 × 228): на широкой панели рисунок той же высоты, что
   был, а на телефоне не сплющивается ниже своего пола.

   Ширину рисунок берёт у карточки, а не назначает свою. Прежде на телефоне
   у вектора стояла минимальная ширина 860 точек и прокрутка вбок внутри
   рамки — свежие дни уходили за край. `min-width: 0` нужен, чтобы в сетке
   (`.cols`) колонка могла сжаться: иначе нарисованный рисунок держал бы её
   своей прежней шириной. */
figure.grafik { min-width: 0; }
.grafik-risunok { display: none; }
.grafik-risunok.zhivoy { position: relative; display: block; width: 100%; overflow: hidden; }
/* Рисунок ВПИСАН в свою рамку, а не стоит в ней своими точками. ECharts
   рисует в точках рамки на момент рисования и перерисовывается, когда рамка
   меняется (static/js/grafiki.js). Но на листе печати рамка другой ширины
   (A4 при окне 1440 — 757 точек против 1347), и перерисовать под неё успевает
   не всякий браузер: Chromium перед печатью сообщает о листе, другой может
   напечатать экранный рисунок. Здесь обёртка библиотеки растянута на рамку,
   SVG — на обёртку, а его viewBox (ставит grafiki.js) сжимает рисунок
   целиком. Прежде рамка обрезала его: на листе отчёта клиенту оставались
   верхняя сетка, одна подпись и хвост линии. Пока размеры совпадают — то
   есть на экране всегда, кроме мгновения до перерисовки, — это ничего не
   меняет. */
.grafik-risunok.zhivoy > div:first-child {
  position: absolute !important; inset: 0; width: auto !important; height: auto !important;
}
.grafik-risunok.zhivoy svg { width: 100% !important; height: 100% !important; }
.grafik[data-grafik="liniya"] .grafik-risunok,
.grafik[data-grafik="stolbiki"] .grafik-risunok { aspect-ratio: 1180 / 240; min-height: 180px; }
.grafik[data-grafik="posty"] .grafik-risunok { aspect-ratio: 1180 / 320; min-height: 220px; }
/* В узкой колонке канала рисунок ниже: колонка на 1440 — 641 точка. */
.grafik[data-grafik="posty"][data-uzko] .grafik-risunok { aspect-ratio: 641 / 260; min-height: 200px; }
.grafik[data-grafik="karta"] .grafik-risunok { height: 158px; }

/* ── календарь плана ─────────────────────────────────────────── */

.day {
  background: var(--card); border: 1px solid var(--line); border-radius: 11px;
  padding: 10px 11px; min-height: 128px; display: flex; flex-direction: column; gap: 7px;
}
.day .dnum { font-family: Onest, sans-serif; font-size: 12px; color: var(--muted); font-weight: 600; }
.day .dnum b { color: var(--text); font-size: 14px; }
.day.today { border-color: var(--blue); }
.slot {
  border-radius: 8px; padding: 7px 8px; font-size: 11.5px; line-height: 1.3;
  background: var(--chip); border-left: 3px solid var(--blue);
}
.slot.proba { border-left-color: var(--amber); }
/* Снято, но ещё не вышло: фиолетовый — единственный из парных токенов, что не
   занят ни состоянием слота (синий/жёлтый/зелёный), ни фирменным знаком. */
.slot.snyato { border-left-color: var(--violet-ink); }
.slot.done { border-left-color: var(--green); opacity: .75; }
.slot b { display: block; font-weight: 600; margin-bottom: 2px; }
.slot span { color: var(--muted); font-size: 11px; }
@media (max-width: 900px) {
    .day { min-height: 0; }
  /* Высоту обложке на узком экране НЕ задаём: жёсткие 200 точек побеждали
     пропорцию кадра, и вертикальный рилс снова становился обрезком — ровно
     та жалоба Марка от 10.09, ради которой пропорция и появилась. На телефоне
     карточка одна в ряд, места хватает. */
  .cards.big .prev { height: auto; }
}

/* ═══════════════════════════════════════════════════════════════
   Третья версия. Что добавилось по замечаниям 09.09:

   — у каждой кратности написано, ПО ЧЕМУ она считана: лайки и
     просмотры несравнимы, и молчать об этом нельзя;
   — рядом с нормой видно, на скольких публикациях она стоит и
     какова её точность (±35 % при двадцати — это много);
   — публикация показывает, живые ли ещё счётчики или замерли;
   — тепловая карта «дни и часы» — единственный ответ на вопрос
     «когда публиковать», потерянный при переносе.
   ═══════════════════════════════════════════════════════════════ */

/* точность нормы */
.accuracy {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px;
  color: var(--muted); border: 1px dashed var(--line); border-radius: 6px; padding: 1px 7px;
}
.accuracy.weak { color: var(--amber-ink); border-color: var(--amber-soft); }

/* состояние счётчиков */
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.live .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }

/* состояние темы в нише */
.state { font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════
   Четвёртая версия. Что изменилось по решениям 09.09:

   — один показатель на всю систему: лайки. Просмотры — справка;
   — ряд сравнения: тот же формат того же аккаунта, норма по
     последним двадцати публикациям;
   — два числа: во сколько раз выше обычного и какое место в ряду.
     Ни редкости, ни планок — «3-я из 72» говорит само за себя;
   — единая полоса фильтров на всех экранах: автор, аккаунт,
     формат, период. Никаких примочек для одного раздела.
   ═══════════════════════════════════════════════════════════════ */

/* единая полоса фильтров */
.filters {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 9px 12px; margin-bottom: 14px;
}
.filters .lab { font-size: 11px; color: var(--muted); text-transform: uppercase;
                letter-spacing: .07em; font-weight: 600; }
.filters .sep { width: 1px; height: 20px; background: var(--line); }
.filters .grow { flex: 1; }

/* место в ряду */
.place {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 5px; font-size: 12.5px;
  font-variant-numeric: tabular-nums; color: var(--soft);
}
.place b { font-family: Onest, sans-serif; font-size: 14px; color: var(--text); }
.place.hit b { color: var(--magenta-ink); }
/* Номер места — рядом с долей, но мельче её: крупный «135-я из 146» глаз
   читал как счёт, почти победу, хотя это почти последнее место. Главное —
   доля словами («слабее 92 % своих»), номер только помогает сверить порядок
   соседних карточек (разбор 22.09, работы 2.1 и 4.5). */

.rowline {
  display: grid; grid-template-columns: 1fr 74px 84px 84px 100px; gap: 10px;
  align-items: center; font-size: 12.5px; padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.rowline:last-child { border-bottom: 0; }

/* Строка из ДВУХ частей — имя и число — жила по сетке таблицы из пяти колонок,
   и число попадало во вторую, шириной 74 пикселя. «×206,5 до обычного» и
   «5 публикаций» ломались на две строки при свободных 474 пикселях рядом
   (владелец 16.09: «правая колонка зажата»). Здесь число получает столько,
   сколько ему нужно, а имя — остальное. */
.rowline:has(> :nth-child(2):last-child) { grid-template-columns: 1fr auto; }

.rowline .f { font-weight: 600; }
.rowline .n { text-align: right; font-variant-numeric: tabular-nums; }
.trend-up { color: var(--green-ink); font-weight: 600; }
.trend-down { color: var(--red-ink); font-weight: 600; }
.trend-flat { color: var(--muted); }

/* Строка с полоской доли («Что он публикует»). Полоска — не приписка к числу,
   а сама величина, и колонка у неё своя, широкая. В общей сетке она попадала
   вторым ребёнком, то есть в колонку 74 пикселя: замер 16.09 — доля 36 %
   рисовалась полоской в 26,6 пикселя при 762 свободных в строке, и на глаз
   треть выглядела точкой. */
.rowline.doli { grid-template-columns: 170px minmax(120px, 1fr) 70px 130px; }
.rowline.doli .num { text-align: right; font-variant-numeric: tabular-nums; }
/* Строка темы канала: полоске доли — широкая колонка. В общей сетке из пяти
   колонок ей доставалось 84 пикселя, и доля в 29 % рисовалась семью
   пикселями рядом с чертой обычной доли — сравнивать было не с чем. */
.rowline.dolya-temy { grid-template-columns: minmax(180px, 1fr) 80px minmax(160px, 1fr) 56px; }

@media (max-width: 900px) {
  .rowline { grid-template-columns: 1fr auto; gap: 4px; }
  /* На узком экране полоска темы уходит строкой ниже, во всю ширину. */
  .rowline.dolya-temy { grid-template-columns: 1fr auto; }
  .rowline.dolya-temy .dolya-s-chertoy { grid-column: 1 / -1; }
  .rowline .n { text-align: left; }
  /* На узком экране строка складывается в название и число, как у остальных,
     а полоска встаёт СВОЕЙ строкой во всю ширину. В колонке по содержимому
     доля в 36 % рисовалась двадцатью пикселями — то же, от чего уходим на
     широком. Правило идёт после `.rowline.doli`, иначе та перебила бы его по
     весу селектора. */
  .rowline.doli { grid-template-columns: 1fr auto; }
  .rowline.doli .barline { grid-column: 1 / -1; margin: 3px 0; }
  .rowline.doli .num { text-align: left; }
}

/* ═══════════════════════════════════════════════════════════════
   Шестая версия. Замечания Марка 09.09 вечером:

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

/* плеер креатива — геометрия из старой системы */
.creative { flex: 0 0 280px; width: 280px; }
.creative .frame {
  position: relative; aspect-ratio: 4/5; border-radius: 14px; overflow: hidden;
  background: #000; display: flex; align-items: center; justify-content: center;
}
.creative.wide { flex: 0 0 460px; width: 460px; }
.creative.wide .frame { aspect-ratio: 16/9; }
.creative.tall .frame { aspect-ratio: 9/16; }
.creative video, .creative iframe, .creative img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0;
}
.creative .under { display: flex; gap: 8px; margin-top: 9px; align-items: center; flex-wrap: wrap; }

/* лента архива */
.searchbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.searchbar input {
  flex: 1; min-width: 220px; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 13px; font: inherit; color: var(--text);
}
.chip {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line);
  background: var(--card); border-radius: 999px; padding: 5px 12px; font-size: 12.5px;
  cursor: pointer; color: var(--muted);
}
.chip.on { background: var(--chip); color: var(--text); font-weight: 600; border-color: var(--muted); }

/* Метка площадки. Стояла подписью `.sub` под ником — бледно-серым в 11,5, — и
   это единственное, чем строки отличаются друг от друга: у одного блогера
   «@anarbacho» на YouTube и «@anarbachoo» в TikTok и Instagram (владелец
   16.09: «зовсім не видно, що там YouTube»). Метка не кнопка: без курсора-руки
   и без наведения, но с рамкой и полным цветом текста. */
.plat {
  display: inline-block; border: 1px solid var(--line); border-radius: 999px;
  padding: 1px 8px; font-size: 11px; color: var(--soft); white-space: nowrap;
  vertical-align: middle;
}

/* два разреза аналитики */
.tabs { display: inline-flex; background: var(--card); border: 1px solid var(--line);
        border-radius: 10px; padding: 3px; gap: 2px; }
.tabs a {
  padding: 7px 14px; border-radius: 8px; font-size: 13px; text-decoration: none;
  color: var(--muted);
}
/* Активная вкладка — тем же синим, что выбранный период и вид (разбор 30.09,
   UX). Здесь стояла заливка цветом текста: в светлой теме чёрная, в тёмной —
   белая «таблетка», и у одного смысла «выбрано» было три вида. */
.tabs a.on { background: var(--blue-fill); color: #fff; font-weight: 600; }

/* ── наведение проигрывает креатив ───────────────────────────────
   Видео лежит под подписями, поверх градиента-заглушки: пока не наведено,
   его не видно и файл не загружен. Значок звука и метка «идёт» — как в
   работающей системе. */
.prev .hovervid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: #000; opacity: 0;
  transition: opacity .18s ease;
}
.prev.playing .hovervid { opacity: 1; }
.prev.playing .peek { opacity: 0; transition: opacity .18s ease; }
/* Встройка YouTube — его ролики мы не скачиваем (решение 25.07). Рамку кладёт
   beta.js по наведению и убирает, когда мышь ушла: вместе с рамкой умирают и
   её загрузки. Нажатия рамка не берёт — иначе карточка перестала бы
   открываться по клику. */
.prev .ytprev { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.prev .ytprev iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; pointer-events: none;
}
/* Значок «здесь есть что проиграть» — на ::before, а НЕ на ::after: ::after у
   .prev занят затемнением под нижними подписями, и значок на нём погасил бы
   затемнение — белые подписи пропали бы на каждой светлой обложке с видео. */
.prev.has-video::before {
  content: "▶"; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); width: 40px; height: 40px;
  display: grid; place-items: center; border-radius: 999px;
  background: rgba(17, 18, 30, .55); color: #fff; font-size: 13px;
  backdrop-filter: blur(3px); transition: opacity .18s ease;
  pointer-events: none; z-index: 1;
}
.prev.has-video.playing::before { opacity: 0; }
.prev.has-video:hover { cursor: pointer; }

/* Карусель листается слайдами: точки показывают, сколько их и где мы. */
.slidedots {
  position: absolute; left: 50%; bottom: 9px; transform: translateX(-50%);
  display: flex; gap: 4px; z-index: 2;
}
.slidedots i {
  width: 5px; height: 5px; border-radius: 999px;
  background: rgba(255, 255, 255, .45);
}
.slidedots i.on { background: #fff; }
/* Точки видны, только пока карусель листается: в покое они легли бы прямо на
   подпись публикации, а в этот же миг подпись гаснет — место освобождается.
   Подкрашивания слайдов здесь нет намеренно: в макете смену кадра изображали
   поворотом цвета, потому что показывать было нечего, а в системе слайды
   настоящие — их фотографиям чужой оттенок только навредил бы. */
.slidedots { opacity: 0; transition: opacity .18s ease; }
.prev.playing .slidedots { opacity: 1; }

/* Кнопка звука — одна на экран (Марк 26.07: «а можно со звуком?»). Стоит В
   СТРОКЕ верхней полосы, рядом с «Фильтры» (владелец 16.09), поэтому геометрия
   у неё соседская: тот же радиус, те же отступы, тот же кегль. Пилюлей в правом
   нижнем углу она висела поверх карточек и уезжала вместе с прокруткой — то,
   что владелец назвал «фигнёй, висящей постоянно».

   Показывает её beta.js, найдя на странице ролик или встройку; до этого
   работает `hidden` — теперь по-настоящему, см. правило [hidden] наверху. */
.zvuk {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--card); color: var(--text);
  border-radius: 9px; padding: 5px 12px; font: inherit; font-size: 12.5px;
  cursor: pointer; max-width: 100%;
}
.zvuk:hover { border-color: var(--muted); }
.zvuk[aria-pressed="false"] { color: var(--muted); }

/* ── контент-план: месяц ──────────────────────────────────────────
   Месяц — основной вид (Марк 10.09): план строится на месяц, неделя
   нужна только когда съёмки уже расписаны по дням. */
.monthhead {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px;
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px; padding: 0 2px;
}
.month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.month .day {
  min-height: 86px; padding: 7px 8px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--card);
  display: flex; flex-direction: column; gap: 5px;
}
.month .day.out { background: transparent; border-color: transparent; }
/* «Сегодня» в месяце. `.day.today` выше по файлу слабее `.month .day`, и
   рамка сегодняшнего дня была той же серой, что у соседей, — отметки не было
   видно ни в Контент-плане, ни в календаре Публикаций (UX В7). Стоит ДО
   `.month .day.marked`: день с топом остаётся пурпурным и сегодня. */
.month .day.today { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; }
.month .day .dnum { font-size: 12px; }
.month .day .slot { font-size: 10.5px; padding: 5px 7px; }
.month .day .slot b { font-size: 10.5px; line-height: 1.3; }
.month .day .slot span { font-size: 9.5px; }
@media (max-width: 900px) {
  .month, .monthhead { grid-template-columns: repeat(2, 1fr); }
  .monthhead { display: none; }
  .month .day { min-height: 0; }
  .month .day.out { display: none; }
}

/* ── архив: поиск в общей строке фильтров ────────────────────────────
   Отдельная полоса во всю ширину только под поиск (Марк 10.09) занимала
   место и разрывала фильтры надвое. Поле стоит первым в той же строке.

   Фон — `--bg`, а не общий для полосы `--card`: на Публикациях поле стоит
   ВНУТРИ панели, а панель сама и есть `--card`. Белым по белому от поля
   остался бы один контур. */
.searchbar input.find {
  flex: 0 1 250px; min-width: 180px; padding: 7px 12px; font-size: 12.5px;
  background: var(--bg);
}

.month .day.out { opacity: .45; }
.mult.young { background: var(--chip); color: var(--muted); }
.mult, .mult.young, .place { align-self: flex-start; }

/* Одна строка вместо блока «Что произошло»: она говорит то, чего не видно
   в карточках ниже — сколько публикаций просеяли ради этих инсайтов. */
.lead-line {
  font-size: 15px; color: var(--text); margin-bottom: 14px;
  padding: 11px 15px; background: var(--card); border-radius: 12px;
  box-shadow: var(--shadow);
}
.lead-line b { font-family: Onest, sans-serif; font-size: 17px; }
.chip.small { font-size: 11px; padding: 2px 8px; }
.events { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; font-size: 13px; }
.events li { line-height: 1.45; padding-left: 14px; position: relative; }
.events li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px;
  border-radius: 999px; background: var(--amber);
}

/* Тема — строкой рядом с датой: плашки разной ширины ломали ритм карточек. */
.topic {
  color: var(--muted); text-decoration: underline; text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.pbody .sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── календарь библиотеки: сильнейшая публикация дня ───────────────
   Замер: инсайт есть в 22 % дней, кратность выше ×2 — в 44 %. Остальные
   дни не заслуживают ничего, кроме одной строки. */
.month.tall .day { min-height: 116px; }
.month .day.marked { border-color: var(--magenta); box-shadow: 0 0 0 1px var(--magenta) inset; }
.month .dnum { display: flex; justify-content: space-between; align-items: baseline; }
.daybest { display: flex; gap: 6px; align-items: flex-start; margin-top: 4px; }
.daybest .thumb {
  width: 26px; height: 33px; border-radius: 4px; flex: 0 0 auto;
  position: relative; overflow: hidden;
}
/* Живая обложка в клетке. В макетах на её месте стоял градиент, поэтому
   правила для картинки не было — и первая же настоящая раскрылась во весь
   экран, накрыв календарь целиком. */
.daybest .thumb img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.daybest .what { font-size: 10px; line-height: 1.25; overflow: hidden; }
.daybest .what b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-weight: 600;
}
.daybest .what em { font-style: normal; color: var(--muted); display: block; margin-top: 2px; }
.dayfoot { margin-top: auto; display: flex; align-items: center; gap: 6px; padding-top: 4px; }
/* Подвал клетки был 9 пикселей — метка топа, главное в клетке, мельче всего
   остального календаря (работа 4.6). */
.dayfoot .mark { position: static; font-size: 11px; padding: 2px 7px; }
.dayfoot .more { font-size: 11px; color: var(--muted); }
.daycalm { font-size: 10.5px; color: var(--muted); margin-top: 4px; }
/* Плашки состояния. «Чинил» жил без стиля и выглядел как обычная метка, а
   «молчит» не было вовсе — плитка ревизора говорила «тихо» при восьми сутках
   молчания (разбор 22.09, работа 3.3). */
/* Зелёное «всё в порядке»: «тихо» у ревизора и «подключён» были пурпурными —
   тем же цветом, что топ публикации (работа 4.8). */
.chip.ok { background: var(--green-soft); color: var(--green-ink); border-color: var(--green-soft); font-weight: 600; }
.chip.warn { background: var(--amber-soft); color: var(--amber-ink); border-color: var(--amber-soft); font-weight: 600; }
.chip.err { background: var(--red-soft); color: var(--red-ink); border-color: var(--red-soft); font-weight: 600; }

.warn { color: var(--red-ink); font-weight: 600; }

/* ── три полосы: сейчас · за период · изменение ────────────────────
   Селектор периода стоит в заголовке той полосы, которой управляет:
   иначе непонятно, какие числа от него зависят (Марк 10.09). */
.band { padding: 4px 0 18px; border-bottom: 1px solid var(--line); }
.band.last { border-bottom: none; padding-bottom: 4px; }
.band + .band { padding-top: 16px; }
.band-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.band-head h3 {
  font-family: Onest, sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0;
}
.bandfacts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
/* Тот же кегль, что у числа в плитке (.kpi .b .val), и по той же причине
   (Марк 16.09): на этот ряд он и показывал — «підписників» стоит первым
   экраном карточки, прямо под именем канала, и при 24 цифра была КРУПНЕЕ
   самого имени (h1.page — Onest 22). Рецепт для акцентного числа в системе
   один: Onest 700, 20/28. */
.bandfacts b { font-family: Onest, sans-serif; font-size: 20px; display: block; line-height: 28px; }
.bandfacts span { font-size: 11.5px; color: var(--muted); }
.factline {
  display: flex; gap: 12px; padding: 6px 0; font-size: 12.5px;
  border-top: 1px solid var(--line);
}
.factline .f { font-weight: 600; min-width: 90px; }
@media (max-width: 900px) { .bandfacts { grid-template-columns: repeat(2, 1fr); } }
/* Очередь идей без даты — отдельный список, а не подробности календаря:
   в коде это карточки с пустым planned_date, пересечения с календарём нет. */
.backlog { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.backlog .slot { display: block; text-decoration: none; color: inherit; padding: 11px 13px; }
.backlog .slot b { font-size: 13px; }
.backlog .slot span { font-size: 11px; }
/* Проценты и короткие числа не должны переноситься по слогам */
td.n, .trend-up, .trend-down, .trend-flat { white-space: nowrap; }

.dot.amber { background: var(--amber); }
.dot.blue { background: var(--blue); }
.dot.muted { background: var(--muted); }

/* ── десятая версия: пять разделов, единый словарь ─────────────────
   Меню из десяти пунктов не читалось, одна сущность жила под четырьмя
   именами. Осталось пять разделов, остальное — вложенные страницы. */
.btn.ghost { color: var(--muted); border-style: dashed; }
.place.hit b { font-family: Onest, sans-serif; }

/* ── панель фильтров, выезжающая справа ───────────────────────── */
.fbtn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: 9px;
  padding: 5px 12px; font: inherit; font-size: 12.5px; color: var(--text);
}
.fbtn:hover { border-color: var(--muted); }
.fbtn .cnt {
  background: var(--blue-fill); color: #fff; border-radius: 99px;
  padding: 0 6px; font-size: 10.5px; font-weight: 700; min-width: 16px; text-align: center;
}
.fbtn .cnt:empty { display: none; }

.scrim {
  position: fixed; inset: 0; background: rgba(16,18,22,.28);
  opacity: 0; pointer-events: none; transition: opacity .18s ease; z-index: 40;
}
.scrim.on { opacity: 1; pointer-events: auto; }

/* Закрытая панель не только уезжает за край, но и прячется: иначе Tab водил
   бы по её невидимым галочкам (разбор 30.09, UX В22). Прячется после того,
   как доехала, — задержкой перехода, — а показывается сразу. */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 320px; max-width: 88vw;
  background: var(--card); border-left: 1px solid var(--line);
  box-shadow: -18px 0 40px rgba(16,18,22,.10);
  transform: translateX(100%); visibility: hidden;
  transition: transform .2s ease, visibility 0s linear .2s;
  z-index: 41; display: flex; flex-direction: column;
}
.drawer.on { transform: none; visibility: visible; transition: transform .2s ease, visibility 0s; }
/* Шапка и поиск стоят на месте, прокручивается только список, подвал
   «Показать / Сбросить» прижат к низу. Список и подвал лежат внутри формы
   «Показать», поэтому колонкой должна быть и она: без этого `.dbody` не знал
   своей высоты и не прокручивался, а панель жила чужой прокруткой — правилом
   меню (на телефоне меню `overflow: hidden`, и кнопки под длинным списком
   блогеров становились недостижимы). Своя прокрутка панели — запас на совсем
   низкий экран, где список не влезает даже в свою нижнюю границу высоты.
   Вторая форма с классом `.dfoot` — сохранение набора, это подвал, а не
   колонка.

   Форма не сжимается ниже списка в его нижней границе (120 точек) и подвала:
   с `min-height: 0` она сжималась, лишнее вылезало за её край, и подвал
   «Показать / Сбросить» ложился на форму сохранения набора — на телефоне
   лёжа (844×340) внахлёст на 14 точек, а прокрутка панели не включалась,
   потому что её содержимое по-прежнему «помещалось». Для этого у списка
   основа `0px`, а не `flex: 1`: доля от формы неизвестной высоты считается
   по содержимому, и тогда нижней границей формы стал бы весь список —
   панель прокручивалась бы целиком, а не список (проверено по странице
   из этих правил, разбор 30.09). */
.drawer { overflow-y: auto; }
.drawer > form:not(.dfoot) { flex: 1; display: flex; flex-direction: column; }
.drawer .dhead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 16px 12px; border-bottom: 1px solid var(--line);
  font-family: Onest; font-weight: 700; font-size: 14.5px;
}
/* Крестик — кнопка (UX В22): рамку и заливку браузера гасим, мишень — не
   меньше 32 точек, на телефоне 40 (ниже, в разделе 30.09). */
.drawer .dclose {
  cursor: pointer; color: var(--muted); font-size: 15px; line-height: 1; padding: 2px 4px;
  background: none; border: 0; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; min-height: 32px;
}
.drawer .dclose:hover { color: var(--text); }
.drawer .dbody { overflow-y: auto; padding: 4px 16px 14px; flex: 1 1 0px; min-height: 120px; }
.dsec { padding: 13px 0 3px; border-bottom: 1px solid var(--line); }
.dsec:last-child { border-bottom: none; }
.dlab {
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px; font-weight: 600;
}
.tog {
  display: flex; align-items: center; gap: 9px; padding: 6px 0;
  font-size: 13px; cursor: pointer; user-select: none;
}
.tog input { width: 15px; height: 15px; accent-color: var(--blue); cursor: pointer; margin: 0; }
.tog .c { margin-left: auto; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.tog.off { color: var(--muted); }
.tog.off .nm { text-decoration: line-through; }
.drawer .dfoot {
  padding: 12px 16px; border-top: 1px solid var(--line);
  display: flex; gap: 8px; background: var(--bg);
}
.drawer .dfoot .btn { flex: 1; text-align: center; }

/* плашка на обложке: имя и место среди своих */
.prev .who-mark { max-width: calc(100% - 92px); }
.prev .mark.sig { font-weight: 700; }

@media (max-width: 700px) { .drawer { width: 300px; } }
.kpi.five { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .kpi.five { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .kpi.five { grid-template-columns: repeat(2, 1fr); } }
/* Две плитки в ряд — разбор формата на карточке канала. Без этого они
   остались бы четвертинками ширины и прижались к левому краю: сетка .kpi
   считает четыре колонки всегда. */
.kpi.two { grid-template-columns: repeat(2, 1fr); }
.quote { background: var(--chip); border-radius: 11px; padding: 12px 15px; font-size: 13.5px; line-height: 1.55; }
.quote.big { font-size: 15.5px; line-height: 1.5; }

/* карточки в ленте — одной высоты, кнопки прижаты к низу */
.cards.big .pcard { display: flex; flex-direction: column; }
.cards.big .pcard .pbody { flex: 1; }
/* длинные пояснения в плашке уровня переносятся, а не выпадают из карточки */
.mult { white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
.mult.young { font-size: 12px; font-weight: 500; }

/* поиск внутри панели фильтров */
.dsearch { display: block; }
.dsearch input {
  width: 100%; border: 1px solid var(--line); border-radius: 9px;
  padding: 7px 11px; font: inherit; font-size: 13px; background: var(--bg); color: var(--text);
}
.dsearch input:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: transparent; }
.drawer .dsec:first-child { padding-top: 14px; }
.kpi-inline { display: flex; align-items: baseline; gap: 10px; font-size: 13px; }
.kpi-inline b { font-family: Onest; font-size: 17px; font-weight: 700; }
tr.dim-row td { opacity: .62; }
/* плашка уровня — всегда одна строка, длинное поясняется подсказкой */
.pcard .mult { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pcard .mult.young { font-size: 12px; }
/* поиск закреплён в шапке панели, не уезжает вместе со списком */
.drawer .dtop { padding: 10px 16px 12px; border-bottom: 1px solid var(--line); }
.tog.hide { display: none; }
.dsec.hide { display: none; }
/* хлебные крошки — один вид на всех вложенных экранах */
.crumbs {
  display: flex; gap: 7px; align-items: center;
  font-size: 12.5px; color: var(--muted); margin-bottom: 10px;
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--text); }
.crumbs b { color: var(--text); font-weight: 600; }

/* слово вместо числа в числовой сетке — плашкой, чтобы не спорило с цифрами.
   Интерлиньяж задан своим: плашка наследует строку числа, и после кегля 20
   она вырастала до 40 точек — плитка «Ревизор» на Панели становилась выше
   соседних, а подпись под ней съезжала вниз одна из четырёх. Правило стояло
   только на отдельном виде плашки, а на Панели плашки `ok`, `warn` и `err` —
   и оно не срабатывало (разбор 29.09). Теперь оно на любую плашку, и высота её
   ровно строка числа: 18 + 4 + 4 + рамка 1 + 1 = 28. Прижата к верху строки —
   при выравнивании по середине она выступала на пару точек и снова
   раздвигала строку. */
.kpi .b .val .chip {
  font-size: 13px; font-weight: 600; line-height: 18px; padding: 4px 11px;
  vertical-align: top;
}

/* Панели и таблицы внутри них должны сжиматься на узком экране:
   без min-width:0 обёртка .scroll распирала страницу на 539 точек при экране 420. */
.panel { min-width: 0; }
.scroll { min-width: 0; max-width: 100%; }
@media (max-width: 900px) {
  /* На телефоне лента меню прокручивается сама и не расширяет страницу:
     без этого вся страница ездила вбок на ширину меню (468 px при экране 420). */
  html, body { overflow-x: hidden; }
  .app { min-width: 0; }
  .app > aside { min-width: 0; max-width: 100%; overflow: hidden; }
  /* Лента меню режет всё, что шире неё, — и окошко под кружком тоже. Пока
     оно раскрыто, обрезку снимаем: сама лента пунктов прокручивается внутри
     себя и за край не вылезет. */
  .app > aside:has(details.kto[open]) { overflow: visible; }
  .nav { max-width: 100%; }
  main { min-width: 0; }
  .panel { overflow-x: hidden; }
  /* Ряды чипов внутри панели прокручиваются сами: панель режет всё, что шире
     неё, и на 390 чипы после «вище 90 %» были недостижимы ни прокруткой, ни
     жестом (работа 4.3). Справа затухание, как у меню. Выбор периода сюда не
     попадает — он стоит вне панели, и у него выпадающее окошко, которое
     прокрутка обрезала бы. */
  .panel .seg, .topbar .seg:not(:has(details.svoy)) {
    max-width: 100%; overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
    mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .panel .seg::-webkit-scrollbar, .topbar .seg::-webkit-scrollbar { display: none; }
  /* лента меню: справа затухание — видно, что пункты продолжаются */
  .app > aside { position: relative; }
  .nav { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
}

.dall { float: right; font-weight: 500; text-transform: none; letter-spacing: 0; cursor: pointer; color: var(--blue-ink); }
.dall:hover { text-decoration: underline; }

.setrow { display: flex; flex-wrap: wrap; gap: 6px; }
.setchip {
  border: 1px solid var(--line); border-radius: 99px; padding: 4px 11px;
  font-size: 12.5px; cursor: pointer; color: var(--ink, var(--text));
}
.setchip.on { background: var(--text); color: var(--card); border-color: var(--text); font-weight: 600; }
.setchip:hover { border-color: var(--muted); }
/* Набор и его «×» (разбор 30.09): крестик — отдельной круглой кнопкой рядом с
   чипом, а не внутри него. Внутри он спорил бы с самим чипом — щелчок по
   имени выбирает набор, а промах на два пикселя удалял бы его. */
.setnabor { display: inline-flex; align-items: center; gap: 1px; }
.setdel {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border: 0; border-radius: 50%; padding: 0;
  background: none; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer;
}
.setdel:hover { background: var(--chip); color: var(--red-ink); }
.pcard .pbody { display: flex; flex-direction: column; align-items: flex-start; }
.pcard .pbody > * { width: 100%; }
.pcard .pbody > .mult { width: auto; }

.thinline {
  background: var(--card); border-radius: 11px; box-shadow: var(--shadow);
  padding: 12px 16px; font-size: 13.5px; color: var(--muted);
}
.thinline b { color: var(--text); }

/* отчёт для заказчика: страница без навигации владельца */
.app--bare { grid-template-columns: 1fr; }
.reporthead {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.app--bare { background: var(--bg); }
.app--bare > main { padding-left: 20px; }
/* Печать отчёта. Лист — не экран: тёмная тема на бумаге съедает тонер и делает
   график нечитаемым, а кнопки на бумаге не нажимаются. Графики на листе
   вписаны в свою рамку — см. `.grafik-risunok.zhivoy > div:first-child`. */
@media print {
  :root {
    --bg: #fff; --card: #fff; --ink: #111; --muted: #555; --line: #ccc;
  }
  /* .zvuk назван отдельно: в полосе фильтров он и так уйдёт вместе с ней,
     но на теме и на карточке публикации стоит в строке заголовка — на
     бумаге кнопка, которую нельзя нажать, только занимает место. */
  .noprint, aside, .fbtn, .filters, .zvuk { display: none !important; }
  .app, .app--bare > main { padding: 0; }
  .panel { break-inside: avoid; page-break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
  .kpi .b { break-inside: avoid; }
  a { text-decoration: none; color: inherit; }
}

/* Вход. Страница живёт до авторизации и бокового меню не имеет, но выглядеть
   обязана как одно приложение с остальными: те же шрифты, тот же знак, те же
   цвета — все из этого файла, а не из своей копии. */
/* Карусель на карточке публикации: стрелки и счётчик поверх слайдов
   (владелец 30.09) — той же тёмной плашкой, что метки на обложках ленты. */
.karusel-strelka {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0;
  background: rgba(17,18,30,.55); color: #fff; font-size: 22px; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
}
.karusel-strelka.nazad { left: 8px; }
.karusel-strelka.vpered { right: 8px; }
.karusel-strelka:disabled { opacity: .3; cursor: default; }
/* Те же стрелки на карточках лент (владелец 01.10): мельче — карточка уже
   рамки публикации; появляются при наведении, чтобы в покое не закрывать
   обложку. На сенсорном экране наведения нет — там видны всегда. Когда
   человек листает сам, точки остаются видны, как при показе. */
.prev .karusel-strelka {
  width: 28px; height: 28px; font-size: 18px;
  opacity: 0; transition: opacity .18s ease;
}
.prev:hover .karusel-strelka, .prev .karusel-strelka:focus-visible { opacity: 1; }
.prev:hover .karusel-strelka:disabled { opacity: .3; }
@media (hover: none) {
  .prev .karusel-strelka { opacity: 1; }
  .prev .karusel-strelka:disabled { opacity: .3; }
}
.prev.listaetsya .slidedots { opacity: 1; }
/* Полоса прокрутки под лентой не нужна: листают стрелки, клавиши и палец. */
[data-karusel] { scrollbar-width: none; }
[data-karusel]::-webkit-scrollbar { display: none; }
/* Счётчик — слева: справа наверху стоит метка «отслеживается». */
.karusel-schet {
  position: absolute; top: 8px; left: 8px; z-index: 2; padding: 3px 9px;
  border-radius: 999px; background: rgba(17,18,30,.55); color: #fff;
  font-size: 10px; font-weight: 600;
}

/* «Можно повторить» (владелец 30.09): зелёная и красная плашки — та же
   `.pill`, что жёлтая «наблюдение началось…», с точкой цвета. */
.pill.povtor { padding: 3px 10px; font-size: 11.5px; gap: 6px; }
.pill.povtor.da { background: var(--green-soft); color: var(--green-ink); }
.pill.povtor.net { background: var(--red-soft); color: var(--red-ink); }
/* «Не оценить» (03.10): по публикации не понять её схему — серая плашка, только
   на странице публикации. */
.pill.povtor.ne .dot { background: var(--muted); }
/* Дети тела карточки растянуты во всю ширину (`.pcard .pbody > *`); плашка —
   по своему тексту, как плашка силы. */
.pcard .pbody > .pill.povtor { width: auto; }
.pill.profil-pust a { color: inherit; }
.povtor-stroka { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Аналитика «По форматам»: почему прочерк в просмотрах — строкой под всеми блогерами. */
.poyasnenie-prosmotrov { margin: 0 4px 18px; }

.entry { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.entry .panel { width: 100%; max-width: 380px; margin: 0; }
.entry .brand { justify-content: center; margin-bottom: 18px; font-size: 17px; }
.entry .errors {
  background: rgba(229, 72, 77, .10); border: 1px solid rgba(229, 72, 77, .35);
  color: var(--red); border-radius: 10px; padding: 10px 12px; font-size: 13px; margin: 0 0 14px;
}
.entry .errors ul { margin: 0; padding-left: 18px; }
.cf-turnstile { margin-bottom: 14px; }

/* Ответ системы на нажатие. Без него человек жмёт кнопку, страница
   перезагружается — и ничего: понять, сработало или нет, нечем. */
.otvet {
  display: flex; align-items: flex-start; gap: 9px;
  border: 1px solid var(--line); border-left-width: 3px; border-radius: 10px;
  background: var(--card); color: var(--ink, var(--text));
  padding: 11px 14px; margin-bottom: 12px; font-size: 13px;
}
.otvet.success { border-left-color: var(--green); }
.otvet.info    { border-left-color: var(--blue); }
.otvet.warning { border-left-color: var(--amber); }
.otvet.error   { border-left-color: var(--red); }
.otvet .znak { flex: none; font-weight: 700; line-height: 1.3; }
.otvet.success .znak { color: var(--green); }
.otvet.info .znak    { color: var(--blue); }
.otvet.warning .znak { color: var(--amber); }
.otvet.error .znak   { color: var(--red); }

/* Свободный отрезок периода. Раскрывается нативно, без скрипта: на
   большинстве экранов скрипт беты не работает вовсе — он выходит, не найдя
   панели фильтров. */
.seg details.svoy { position: relative; }
.seg details.svoy > summary {
  list-style: none; cursor: pointer; padding: 5px 12px; border-radius: 8px;
  color: var(--muted); font-size: 12.5px;
}
.seg details.svoy > summary::-webkit-details-marker { display: none; }
.seg details.svoy > summary.on { background: var(--blue-fill); color: #fff; font-weight: 600; }
.seg details.svoy[open] > summary { color: var(--text); }
/* «Переименовать» в шапке Замысла: то же всплывающее окошко, что у
   свободного периода (работа 4.15). */
/* Окошко привязано ко ВСЕЙ строке заголовка, а не к ссылке: ссылка стоит
   справа от длинного названия, и окошко, отложенное от неё, уезжало за край
   экрана. Так поле идёт во всю ширину строки на любом экране. */
.topbar:has(> details.pereimenovat) { position: relative; }
details.pereimenovat > .svoyform { left: 0; right: 0; }
/* «с — по» так же привязано ко всей строке (полосе фильтров или заголовку), а не к
   пункту: пункт стоит справа, и окошко от него уезжало за край телефона. */
@media (max-width: 900px) {
  .filters:has(details.svoy), .topbar:has(details.svoy) { position: relative; }
  .seg details.svoy { position: static; }
  details.svoy > .svoyform { left: 0; right: 0; white-space: normal; }
  details.svoy > .svoyform input[type="date"] { flex: 1 1 110px; min-width: 0; }
}
details.pereimenovat > summary {
  list-style: none; cursor: pointer; font-size: 12.5px; color: var(--muted);
  text-decoration: underline; text-underline-offset: 2px;
}
details.pereimenovat > summary::-webkit-details-marker { display: none; }
details.pereimenovat input[type="text"] {
  flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 5px 9px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text);
}
.svoyform {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0;
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px; box-shadow: var(--shadow);
}
.svoyform input[type="date"] {
  border: 1px solid var(--line); background: var(--bg); color: var(--text);
  font: inherit; font-size: 12px; border-radius: 8px; padding: 4px 8px;
}

/* Замысел: сценарий, раскадровка и заметки стоят текстом, правка — по
   кнопке «Редактировать» (29.09). Текст ИИ приходит строками, поэтому
   переносы сохраняются; длинный хэштег или ссылка переносится, а не
   распирает карточку на узком экране. Пока правка открыта, текст над полем
   спрятан — иначе одно и то же стояло бы на экране дважды. */
.tekst {
  white-space: pre-line; overflow-wrap: anywhere;
  font-size: 13px; line-height: 1.55; margin-bottom: 10px;
}
.panel:has(> details.pravka[open]) > .tekst,
.panel:has(> details.pravka[open]) > .empty { display: none; }
details.pravka > form { margin-top: 10px; }
/* Шаги этапа в шапке Замысла — одна форма на все кнопки. Сама она в ряду
   шапки места не занимает: кнопки встают в ряд по одной, как стояли, когда у
   каждой была своя форма. */
form.shagi { display: contents; }
/* Сохранение набора — отдельной строкой под кнопками панели фильтров. */
.naborform { gap: 6px; }
.naborform input[name="imya"] {
  flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--text); font: inherit; font-size: 12.5px;
  padding: 6px 10px;
}

/* ═══════════════════════════════════════════════════════════════
   Карточка публикации: возвращение фокуса (15.09)

   Владелец: «при взгляде на сам пост немножко расплываются глаза».
   Заголовок и главное число стояли одним кеглем в 22 пикселя, а число
   вдобавок было бесцветным — глазу не за что зацепиться. Экран отвечает на
   один вопрос: стоит ли повторять то, что сделал блогер, — и вердикт теперь
   крупнее всего остального.
   ═══════════════════════════════════════════════════════════════ */

/* Заголовок стал опознавательной строкой («Шортс от 9 июля»), а не
   обрывком чужой подписи: кричать ему больше нечем и незачем. */
h1.page.tihaya { font-size: 15px; font-weight: 600; letter-spacing: 0; }

/* Главное число экрана. `.mult.big` живёт только здесь, на других экранах
   плашка обычного кегля.

   Число не переносится и не сжимается. Общее правило `.mult` ниже разрешает
   перенос где угодно — оно для длинных пояснений в плашке уровня, — и на
   телефоне «×12,1» ломалось посреди числа на «×1» и «2,1»: плашка шириной
   90 точек в две строки (разбор 30.09, UX Б1). Здесь пояснений нет, только
   число, и ему нужна одна строка. */
.mult.big {
  font-size: 30px; padding: 9px 18px;
  white-space: nowrap; overflow-wrap: normal; flex: none;
}

/* Колонка, чьё название числом не объясняется, подписана подсказкой при
   наведении — решение владельца 08.09. Пунктир говорит, что она есть. */
.hinted { border-bottom: 1px dashed var(--line); cursor: help; }

/* Гистограмма на карточке публикации — во всю ширину панели, под обеими
   колонками. */
.shirokiy-grafik { margin-top: 4px; }

/* Свёртка длинных списков без единой строки скрипта. */
details.svertka > summary {
  cursor: pointer; color: var(--muted); font-size: 12.5px; padding: 8px 0 2px;
}
details.svertka > summary:hover { color: var(--text); }
details.svertka[open] > summary { color: var(--text); }

/* Платное действие в два шага: первый щелчок раскрывает цену, второй
   запускает. До 24.09 обход всех каналов и догон обогащения уходили одним
   нажатием — промах мышью стоил денег. */
details.podtverzhdenie {
  /* Внутри ячейки таблицы: подтверждение всплывает ПОВЕРХ, а не раздвигает
     строку — иначе кнопка уезжает от своего ряда и читается как чужая. */
  display: inline-block;
  position: relative;
  text-align: right;
}
details.podtverzhdenie > .vsplyv {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 5;
  width: 260px;
  padding: 12px;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}
details.podtverzhdenie > .vsplyv .sub { white-space: normal; margin-bottom: 10px; }
/* Кнопка-раскрывашка — одна у подтверждения и у правки текста (Замысел). */
details.podtverzhdenie > summary,
details.pravka > summary {
  list-style: none;
  cursor: pointer;
  display: inline-block;
}
details.podtverzhdenie > summary::-webkit-details-marker,
details.pravka > summary::-webkit-details-marker { display: none; }
details.podtverzhdenie[open] > summary,
details.pravka[open] > summary { background: var(--line); }
details.podtverzhdenie > .sub { max-width: 260px; text-align: left; white-space: normal; }
/* То же подтверждение не в ячейке таблицы, а в ряду кнопок у левого края
   карточки (настройка канала, Блогер — `v-potoke`; кнопки ИИ на Замысле —
   `na-meste`): окошко, отложенное влево от правого края кнопки, уезжало бы за
   край узкого экрана, а у нижней кнопки карточки его обрезала бы сама
   карточка (`.panel { overflow-x: hidden }`). Здесь оно раскрывается в потоке
   и занимает весь ряд — соседняя кнопка переносится ниже. */
details.podtverzhdenie.v-potoke,
details.podtverzhdenie.na-meste { text-align: left; }
details.podtverzhdenie.v-potoke[open],
details.podtverzhdenie.na-meste[open] { flex-basis: 100%; }
details.podtverzhdenie.v-potoke > .vsplyv,
details.podtverzhdenie.na-meste > .vsplyv {
  position: static;
  width: auto;
  max-width: 420px;
  margin-top: 8px;
  box-shadow: none;
}

/* Сырой текст ошибки шага под «подробности»: ответ площадки бывает длинной
   строкой без пробелов, и на узком экране он распирал бы карточку вбок. */
.syroy-tekst { overflow-wrap: anywhere; margin-top: 4px; }

/* Привязка блогера прямо из строки «Каналов»: форма раскрывается в самой
   ячейке и переносится, а не распирает таблицу.

   Свёрнутая — ссылка в той же строке, что имя блогера или прочерк:
   «— привязать», а не три строки «—», «▶», «привязать» (разбор 29.09,
   UX В16; просьба участка 1F). Раскрытая встаёт своей строкой — форма ниже имени.
   Цвет остаётся от `details.svertka > summary`: приглушённый, как у всей
   ячейки. */
details.privyazka { display: inline-block; margin-left: 6px; }
details.privyazka[open] { display: block; margin-left: 0; }
details.privyazka > summary {
  list-style: none; display: inline; padding: 0;
  text-decoration: underline; text-underline-offset: 2px;
}
details.privyazka > summary::-webkit-details-marker { display: none; }
/* «— привязать» — одним куском. Таблица Каналов на 1440 стоит вплотную к
   наименьшей своей ширине, и колонке «Блогер» доставалось 92 точки — ровно
   слово «привязать»: браузер ломал строку между прочерком и ссылкой, и
   ячейка снова вставала в две строки. Место под кусок берётся у второй
   строки шапки: пояснение «всё собранное, с удалёнными» держало колонку
   «Собрано всего» в 170 точек одной строкой, а переносу оно не мешает.
   Только у таблицы, где есть канал без блогера, — то есть у Каналов и
   только тогда, когда кусок нужен: общее `table.kartochki` задевало и
   Аналитику «По каналам», где на 1440 всё должно остаться как было. */
td.bez-blogera:not(:has(> details.privyazka[open])) { white-space: nowrap; }
table.kartochki:has(td.bez-blogera) th .sub { white-space: normal; }
details.privyazka > form {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px;
}
details.privyazka select, details.privyazka input[type="text"] {
  max-width: 100%; font: inherit; font-size: 12px; padding: 4px 8px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text);
}

/* Полоска доли с чертой обычной доли канала (`--o`). Черта — место, где тема
   ни лучше, ни хуже обычного: всё, что правее, выходит в топ чаще. */
.dolya-s-chertoy { position: relative; display: block; }
.dolya-s-chertoy::after {
  content: ""; position: absolute; top: -3px; bottom: -3px; left: var(--o, 0);
  width: 2px; background: var(--text); opacity: .55; border-radius: 1px;
}

/* ── Клиенты: управление под строкой клиента (29.09) ─────────────────
   Строка клиента и её управление — одна группа (`tbody.klient`): черта
   проходит под группой, а не между строкой и её раскрывашкой. */
.klienty tbody.klient > tr:first-child:not(:last-child) > td { border-bottom: 0; }
.klienty tbody.klient:not(:last-child) > tr:last-child > td { border-bottom: 1px solid var(--line); }
.klienty tr.upravlenie-stroka > td { padding-top: 0; }
/* Открытое управление под курсором заливалось бы серым целиком. */
.scroll.klienty tbody tr.upravlenie-stroka:hover > td { background: transparent; }

/* Таблица на телефоне шире экрана и прокручивается вбок, а управление стоит
   в ячейке во всю её ширину. Без ограничения его половина уезжала бы за край
   прокрутки: ширина берётся от видимой части таблицы (`cqi` — доля ширины
   обёртки), а само оно держится у левого края при прокрутке. Браузер без
   этих единиц просто покажет его во всю ширину таблицы. */
.scroll.klienty { container-type: inline-size; }
details.upravlenie {
  position: sticky; left: 9px;
  max-width: min(780px, calc(100cqi - 18px));
}
details.upravlenie > summary {
  cursor: pointer; width: max-content; max-width: 100%;
  color: var(--muted); font-size: 12px; padding-bottom: 2px;
}
details.upravlenie > summary:hover,
details.upravlenie[open] > summary { color: var(--text); }
.upravlenie-telo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px 28px; padding: 12px 0 6px;
}
.upravlenie-telo h4 { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.upravlenie-telo .sub { margin-top: 5px; }
.upr-kanaly { list-style: none; margin: 0 0 12px; padding: 0; }
.upr-kanaly li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 5px 0; border-bottom: 1px solid var(--line);
}
.upr-kanaly li:last-child { border-bottom: 0; }
.upr-kanaly li > span { min-width: 0; overflow-wrap: anywhere; }
.upr-forma { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin: 0; }
.upr-forma .field { flex: 1 1 140px; min-width: 0; margin: 0; }
/* Подтверждение выключения — внутри раскрывашки, а не всплывающим окошком:
   у последнего клиента окошко вылезало бы за низ таблицы, и обёртка с
   прокруткой обрезала бы его вместе с кнопкой «Да». */
.upr-knopki { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.upravlenie details.podtverzhdenie { text-align: left; }
.upravlenie details.podtverzhdenie > .vsplyv {
  position: static; width: auto; max-width: 320px; margin-top: 8px; box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════
   Панель, настройки, меню (решения владельца 29.09)
   ═══════════════════════════════════════════════════════════════ */

/* Вкладки Панели — полосой во всю ширину, а не переключателем-пилюлей:
   пилюля читалась как выбор вида одного экрана, и Журнал, Ключи и Клиенты
   на Панели не находили. Активная вкладка подчёркнута и набрана жирным —
   белого текста на заливке здесь нет. На телефоне вкладки переносятся на
   вторую строку, а не уезжают за край: все пять видны сразу. */
.vkladki {
  display: flex; flex-wrap: wrap; gap: 0 4px;
  background: var(--card); border-radius: 12px; box-shadow: var(--shadow);
  padding: 0 8px; margin-bottom: 18px;
}
.vkladki a {
  padding: 11px 12px 8px; border-bottom: 3px solid transparent;
  font-size: 14px; font-weight: 500; color: var(--soft);
  text-decoration: none; white-space: nowrap;
}
.vkladki a:hover { color: var(--text); border-bottom-color: var(--line); }
.vkladki a.on { color: var(--text); font-weight: 700; border-bottom-color: var(--blue); }
@media (max-width: 900px) {
  .vkladki { padding: 0 4px; }
  .vkladki a { padding: 9px 9px 7px; font-size: 13px; }
}

/* Карточки рядами одной высоты: соседи в ряду тянутся до общего низа.
   Две независимые колонки кончались на разной высоте, и экран читался как
   «одна плитка больше, другая меньше». `.stopka` — две карточки друг под
   другом в одной клетке ряда; нижняя дотягивается до низа ряда. */
.cols.ryad { align-items: stretch; }
/* Промежуток между рядами даёт нижнее поле карточки. На телефоне клетки ряда
   встают друг под друга, и промежуток сетки сложился бы с полем вдвое. */
.cols.ryad { row-gap: 0; }
.stopka { display: flex; flex-direction: column; min-width: 0; }
.stopka > .panel:last-child { flex: 1; }

/* Плитка-ссылка: плитка «Ревизор» ведёт к его карточке на той же странице. */
.kpi a.b { display: block; color: inherit; text-decoration: none; }
.kpi a.b:hover { box-shadow: 0 0 0 1px var(--muted), var(--shadow); }
/* Карточка, к которой привела ссылка, обведена: иначе, когда она уже на
   экране и прокручивать некуда, нажатие выглядело бы пустым. */
.panel:target { box-shadow: 0 0 0 2px var(--blue), var(--shadow); scroll-margin-top: 12px; }

/* Одна строка о телеграме вместо блока тревог на Состоянии. */
.telegram-stroka {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--soft);
}

/* Объяснение ревизора под его строками. */
.revizor-pro { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.revizor-pro p { margin: 0; font-size: 12.5px; color: var(--soft); }
.revizor-pro h4 { font-size: 13px; font-weight: 700; margin: 12px 0 5px; }
.revizor-pro .story { font-size: 12.5px; gap: 4px; margin-bottom: 4px; }
.revizor-pro .sub + .sub { margin-top: 4px; }

/* Низ меню: кружок с инициалами. Окошко открывается вверх — кружок стоит у
   нижнего края колонки — и занимает её ширину. */
details.kto > summary {
  list-style: none; cursor: pointer; display: inline-flex; border-radius: 999px;
}
details.kto > summary::-webkit-details-marker { display: none; }
.inicialy {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--blue-soft); color: var(--blue-ink);
  font-family: Onest, "Golos Text", sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .02em;
}
details.kto > summary:hover .inicialy,
details.kto[open] .inicialy { box-shadow: 0 0 0 2px var(--blue); }
.kto-menu {
  position: absolute; z-index: 30; left: 0; right: 0; bottom: calc(100% + 6px);
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); padding: 6px;
}
.kto-imya {
  padding: 6px 9px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.kto-imya b { display: block; font-size: 13px; }
.kto-imya .sub { display: block; }
.kto-menu form { margin: 0; }
.kto-menu a, .kto-menu button {
  display: block; width: 100%; text-align: left; padding: 7px 9px; border-radius: 8px;
  font-size: 13px; color: var(--text); text-decoration: none;
}
.kto-menu a:hover, .kto-menu button:hover { background: var(--chip); color: var(--text); }
/* На телефоне кружок стоит справа в строке меню — окошко падает вниз и
   прижимается к правому краю, чтобы не уехать за экран. */
@media (max-width: 900px) {
  .kto-menu { left: auto; right: 0; bottom: auto; top: calc(100% + 8px); width: 240px; max-width: calc(100vw - 24px); }
}

/* ── Тревоги: привязка телеграма по шагам (29.09) ─────────────────
   Номер чата человек знать не обязан: три шага — токен, «Старт» по ссылке с
   одноразовым кодом, проверка. Состояние — плашкой `.pill`, а не чипом: чип
   выглядит кнопкой, а эти надписи ничего не переключают. */
.tg-sostoyanie {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px;
  margin-bottom: 10px; font-size: 13px;
}
.tg-sostoyanie .sub, .tg-shagi .sub { overflow-wrap: anywhere; }
.tg-forma { margin: 0 0 4px; }
.tg-shagi {
  list-style: none; counter-reset: tg-shag; margin: 10px 0 4px; padding: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.tg-shagi > li { counter-increment: tg-shag; position: relative; padding-left: 34px; min-width: 0; }
.tg-shagi > li::before {
  content: counter(tg-shag); position: absolute; left: 0; top: -2px;
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blue-soft); color: var(--blue-ink); font-size: 12px; font-weight: 700;
}
.tg-shagi > li.gotovo::before { content: "✓"; background: var(--green-soft); color: var(--green-ink); }
.tg-shagi > li > b { display: block; font-size: 13px; margin-bottom: 3px; }
.tg-stroka { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.tg-stroka input[type="password"] {
  flex: 1 1 200px; min-width: 0; background: var(--bg); border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 11px; font: inherit; color: var(--text);
}
.tg-pereklyuchatel { margin-top: 0; }
.tg-predup {
  margin-top: 6px; padding: 7px 10px; border-radius: 9px; font-size: 12px;
  background: var(--amber-soft); color: var(--amber-ink);
}
.tg-dopolnitelno > form { margin-top: 8px; }
.tg-podskazka { margin: -6px 0 10px; }
/* На телефоне колонка названий (210 точек) оставляла переключателю и
   предупреждению около ста — строки встают друг под другом. */
@media (max-width: 600px) {
  .tg-o-chem, .tg-o-chem tbody, .tg-o-chem tr, .tg-o-chem td { display: block; width: auto; }
  .tg-o-chem td.key { padding: 8px 0 0; }
}

/* ═══════════════════════════════════════════════════════════════
   Разбор 30.09: вид и телефон (участок 1D)
   ═══════════════════════════════════════════════════════════════ */

/* Телефон: кегль и мишени пальца (UX В14). На 390 точках `.btn.small` был 25
   точек в высоту, чипы 29, пункты меню 32 — меньше подушки пальца, а подписи
   `.sub` 11,5 читались с трудом. Всё нажимаемое здесь — не ниже 40 точек.

   Высота набирается полями, а не `min-height`, там, где элемент строчный или
   блочный: у них `min-height` оставлял бы подпись прижатой к верху мишени.
   Флекс-элементы (`.nav a`, `.fbtn`, `.zvuk`, чипы) центруют подпись сами —
   им хватает `min-height`. Плашки состояния (`span.chip`) не нажимаются и
   остаются прежними. */
@media (max-width: 600px) {
  .sub, .btn.small, .chip, .setchip,
  .seg > a, .seg > button, .seg > span, .seg details.svoy > summary { font-size: 13px; }

  /* 13 × 1,5 = 19,5 строки + 10 + 10 полей + 2 рамки = 41,5. */
  .btn, .btn.small { padding-top: 10px; padding-bottom: 10px; }
  .setchip { padding-top: 10px; padding-bottom: 10px; }
  /* Без рамки: 19,5 + 11 + 11 = 41,5. */
  .seg > a, .seg > button, .seg > span, .seg details.svoy > summary,
  .tabs a { padding-top: 11px; padding-bottom: 11px; }
  .tog { padding: 10px 0; }

  .nav a, .fbtn, .zvuk,
  a.chip, button.chip, label.chip { min-height: 40px; }
  .listalka a, .listalka .nekuda { width: 40px; height: 40px; }
  .inicialy { width: 40px; height: 40px; }
  .drawer .dclose { min-width: 40px; min-height: 40px; }
  .setdel { width: 40px; height: 40px; }
}

/* Страницы ошибок 404, 403 и 500 (UX В10): карточка входа (`.entry`), над
   заголовком — код ошибки крупно и приглушённо, ниже — одна дверь на
   Публикации. */
.oshibka .kod {
  font-family: Onest, "Golos Text", sans-serif; font-size: 40px; font-weight: 700;
  line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums; margin-bottom: 12px;
}
.oshibka h1 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.oshibka .hint { font-size: 13px; margin: 0 0 16px; }

/* Плашка состояния в строке таблицы — в одну строку (UX В16). В Каналах
   «собирается по расписанию» и «данные не обновляются» переносились на две,
   и строка распухала. Таблица в `.scroll` прокручивается вбок сама, так что
   длинной плашке есть куда встать. */
.scroll td .pill { white-space: nowrap; }

/* Кнопка звука на сенсорном экране не нужна: креатив играет по наведению
   мыши, а наведения у пальца нет (UX, мелочь). Скрипт показывает кнопку,
   найдя ролик, — здесь она гаснет поверх этого. На карточке публикации у
   ролика свои кнопки, звук включается ими. */
@media (hover: none) {
  .zvuk { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Разбор 30.09: Аналитика и Каналы (участок 2C)
   ═══════════════════════════════════════════════════════════════ */

/* Аналитика «По форматам»: одна раскладка на все таблицы блогеров (UX В15).
   Раскладка по содержимому давала каждой из восемнадцати таблиц свои ширины —
   «Собрано всего» стояло на x=645 в первой и на x=612 во второй. Ширины
   заданы долями: все таблицы стоят в панелях одной ширины, значит, и
   колонки у них совпадают. Колонка кнопки — точками, ей нужна ширина
   «открыть», а не доля.

   Нижняя граница ширины — на экранах 600–700 точек: уже неё числа не
   помещаются в колонку, и таблица прокручивается вбок внутри `.scroll`, как
   раньше. При фиксированной раскладке ячейка не раздвигается под текст,
   поэтому название колонки и пояснение в ячейке уровня переносятся, а не
   наезжают на соседнюю колонку. */
table.po-formatam { table-layout: fixed; min-width: 640px; }
table.po-formatam th:nth-child(n+2):nth-child(-n+5) { width: 16%; }
table.po-formatam th:last-child { width: 104px; }
table.po-formatam th, table.po-formatam td .sub { white-space: normal; }

/* Форматы без публикаций за период — под раскрывашкой после таблицы. Строки
   стоят в конце таблицы (сборщик так их ставит) и появляются, пока открыта
   «показать ещё …». Без скрипта: раскрывашка — сосед таблицы в той же
   панели. Если за период не вышло ничего ни в одном формате, до раскрытия
   спрятана вся таблица — одна шапка над пустотой ничего не говорит. */
.panel:not(:has(> details.bez-publikaciy[open])) tr.bez-publikaciy,
.panel:not(:has(> details.bez-publikaciy[open])) table.vse-bez-publikaciy { display: none; }
/* Подписей у раскрывашки две: свёрнутая зовёт «показать ещё N …»,
   раскрытая — «свернуть N …». Содержимого у неё нет, строки появляются
   выше, в таблице, и одна подпись на оба состояния после раскрытия
   говорила неправду. */
details.bez-publikaciy[open] > summary > .kogda-svernuto,
details.bez-publikaciy:not([open]) > summary > .kogda-raskryto { display: none; }

/* Главные таблицы Каналов и Аналитики на телефоне — карточками строк
   (UX В13). На 390 точках таблица прокручивалась вбок внутри карточки, и
   видно было две колонки из шести (Аналитика) или «канал / блогер» без
   состояния и последнего сбора (Каналы). Здесь строка становится карточкой:
   шапки нет, у каждой ячейки своя подпись `.yarlyk` — на широком экране она
   спрятана, её роль играет шапка.

   Раскладка карточки — сетка в два столбца: главная ячейка (`.glava`) и
   кнопки (`.deystviya`) — во всю ширину, числа — по два в ряд, длинные
   ячейки (`.shiroko`) — во всю ширину. У таблиц с одной кнопкой
   (`.knopka-sprava`) кнопка встаёт справа от главной ячейки, а не лишней
   строкой внизу: карточек у блогеров десятки, и строка на каждую — лишний
   экран прокрутки. Ячейкам сетки — `min-width: 0` и перенос где угодно:
   длинный ник или имя иначе распёрли бы карточку за край экрана. */
.yarlyk { display: none; }

/* Заголовок панели блогера в Аналитике сжимается и переносит длинное слово.
   Ник без пробелов («@zzz_definitely_not_real_9999») в имени блогера задавал
   ширину всему заголовку, и на телефоне панель обрезала его на полуслове:
   у элемента гибкого ряда наименьшая ширина — по самому длинному слову.
   Только эта панель — та, где стоит таблица форматов: `.head-row` стоит
   ещё в тринадцати шаблонах, и правка их заголовков — за пределами участка. */
.panel:has(table.po-formatam) > .head-row > div { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 600px) {
  table.kartochki, table.kartochki > tbody { display: block; min-width: 0; }
  table.kartochki > thead { display: none; }
  table.kartochki > tbody > tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px;
    padding: 12px 0; border-bottom: 1px solid var(--line);
  }
  table.kartochki > tbody > tr:last-child { border-bottom: 0; }
  table.kartochki > tbody > tr > td {
    display: block; min-width: 0; padding: 0; border: 0;
    text-align: left; white-space: normal; overflow-wrap: anywhere;
  }
  table.kartochki > tbody > tr.sep { display: block; }
  table.kartochki > tbody > tr.sep > td { padding: 4px 0 0; }
  table.kartochki td.glava, table.kartochki td.shiroko, table.kartochki td.deystviya {
    grid-column: 1 / -1;
  }
  table.kartochki td.deystviya { display: flex; flex-wrap: wrap; gap: 8px; }
  table.kartochki.knopka-sprava td.glava { grid-column: 1; grid-row: 1; }
  table.kartochki.knopka-sprava td.deystviya {
    grid-column: 2; grid-row: 1; justify-content: flex-end; align-self: start;
  }
  /* Подпись — как название колонки в шапке: капитель, разрядка, серый; срок
     под ней — строчными, как вторая строка шапки (`th .sub`). */
  table.kartochki .yarlyk {
    display: block; margin-bottom: 2px; color: var(--muted);
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  }
  table.kartochki .yarlyk small {
    display: block; font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none;
  }
  /* Плашка состояния в карточке переносится: в таблице ей было куда уйти
     вбок (`.scroll td .pill`), в карточке — некуда. */
  table.kartochki td .pill { white-space: normal; }
  /* Подсветка строки под мышью в карточке залила бы ячейки пятнами между
     промежутками сетки, а на пальце она залипает после касания. */
  table.kartochki:not(.rows) tbody tr:not(.sep):hover > td { background: transparent; }
}

/* ═══════════════════════════════════════════════════════════════
   Разбор 30.09: мелочи вида и слов (участок 3D)
   ═══════════════════════════════════════════════════════════════ */

/* «Как это считается» — внизу левого меню, над кружком (UX, мелочь): в
   окошке кружка ссылку не находили. Вид пункта меню — от `.nav a`. Окошко
   кружка теперь привязано к самому кружку, а не ко всему низу меню: иначе
   оно открывалось бы над ссылкой, в стороне от кружка, который его открыл.

   На телефоне меню — строка сверху, пятому блоку в ней не место: ссылка
   прячется здесь и остаётся в окошке кружка — там она только для узкого
   экрана, на широком стояла бы второй раз. */
.nav-niz { margin-bottom: 10px; }
details.kto { position: relative; }
.kto-menu .tolko-uzkiy { display: none; }
@media (max-width: 900px) {
  .app > aside .nav-niz { display: none; }
  .kto-menu .tolko-uzkiy { display: block; }
}

/* Выбор периода на телефоне — во всю ширину полосы (разбор 30.09, UX). С
   единицами у всех трёх окон («7 днів | 14 днів | 28 днів») ряд стал шире
   полосы на 390 точках на три десятка: «з — по» ломалось на три строки, а
   активная пилюля вырастала в овал. Ряд растягивается на всю полосу, поля
   пунктов уже, а подписи в одну строку. На совсем узком экране ряд
   переносится, а не вылезает за край: скругление поэтому не пилюлей. */
@media (max-width: 600px) {
  .filters > .seg { display: flex; flex-wrap: wrap; width: 100%; border-radius: 16px; }
  .filters > .seg > a, .filters > .seg > details.svoy { flex: 1 1 auto; }
  .filters > .seg > a, .filters > .seg details.svoy > summary {
    padding-left: 6px; padding-right: 6px; text-align: center; white-space: nowrap;
  }
}

/* Три плитки — три колонки (экран темы). В общей сетке `.kpi` на четыре
   справа оставалась пустая четверть (разбор 30.09, UX). На узком экране —
   две в ряд и третья во всю ширину, а не одна в ряду с дырой рядом. */
.kpi.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .kpi.three { grid-template-columns: repeat(2, 1fr); }
  .kpi.three > .b:nth-child(3):last-child { grid-column: 1 / -1; }
}

/* Легенда Контент-плана — образцами цвета, а не словами «жёлтая полоска»
   (разбор 30.09, UX). Образец — карточка `.slot` в миниатюре с теми же
   классами состояния: цвет полоски и приглушение вышедшей приходят из тех
   же правил, что у карточек календаря. */
.legenda-plana {
  list-style: none; margin: 2px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--muted); font-size: 12px;
}
.legenda-plana li { display: inline-flex; align-items: center; gap: 7px; }
.slot.obrazec {
  display: inline-block; flex: none; width: 18px; height: 14px; padding: 0; border-radius: 4px;
}

/* Таблица показателей на карточке публикации — в свою рамку на телефоне
   (разбор 30.09). Названия колонок стоят в одну строку (`th`), и одно
   «Звичайний рівень» занимало 139 точек: на 390 таблица выходила за рамку на
   два десятка и уезжала вбок. На узком экране название переносится, а поля
   ячеек уже.

   Плашка силы в таблице — число, и не переносится: общее правило `.mult`
   разрешает перенос где угодно (оно для длинных пояснений), и в сжатой
   таблице «×6,1» ломалось на «×6,» и «1». */
table.pokazateli .mult { white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 600px) {
  table.pokazateli th { white-space: normal; }
  table.pokazateli th, table.pokazateli td { padding-left: 6px; padding-right: 6px; }
}

/* ═══════════════════════════════════════════════════════════════
   Свои настройки вкладками (владелец 30.09)
   ═══════════════════════════════════════════════════════════════ */

/* «Мои данные» — три карточки в ряд одной высоты (`.cols.ryad` тянет их до
   общего низа), кнопка каждой формы — у нижнего края карточки, в одну линию с
   соседними. Раньше блоки разной высоты стояли в две колонки, и под коротким
   справа оставалась пустота в полэкрана. Между телефоном и широким экраном —
   две в ряд и третья во всю ширину, а не одна с дырой рядом. */
.cols.tri { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.forma-vniz { display: flex; flex-direction: column; }
.forma-vniz > form { flex: 1; display: flex; flex-direction: column; }
.forma-vniz > form > .btn:last-child { margin-top: auto; align-self: flex-start; }
@media (max-width: 1100px) {
  .cols.tri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols.tri > :nth-child(3):last-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .cols.tri { grid-template-columns: 1fr; }
}

/* «Профиль автора»: тон голоса — во всю ширину, остальные поля — сеткой в две
   колонки под ним. Рядом с ним в колонках он растягивал свою сторону, а
   соседняя стояла пустой. */
.polya-dva { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
@media (max-width: 900px) {
  .polya-dva { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   «Документация» → «API и Claude» (владелец 30.09)
   ═══════════════════════════════════════════════════════════════ */

/* Текст страницы — абзацами и списками `.story`; код, адреса и команды —
   моноширинным на подложке. Команда подключения переносится внутри своей
   рамки, а не прокручивается вбок: на телефоне страница без горизонтальной
   прокрутки. Перенос только видимый — скопированная команда остаётся той же. */
.dok p { margin: 0 0 10px; font-size: 13px; line-height: 1.55; }
.dok .panel > h4, .dok .panel h4 { font-size: 13px; font-weight: 700; margin: 0 0 6px; }
.dok code, .dok pre.komanda {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  background: var(--chip); color: var(--text); border-radius: 6px;
}
.dok code { padding: 1px 5px; overflow-wrap: anywhere; }
.dok pre.komanda {
  margin: 0 0 12px; padding: 11px 13px; line-height: 1.6; border-radius: 9px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.dok .story { font-size: 13px; }
/* Таблица «название — значение» на телефоне — строками друг под другом, как у
   строки телеграма в настройках системы (`.tg-o-chem`): колонка названий в
   210 точек оставляла значению около ста, и `SMARTSMM_API_URL` ломался
   посередине. Так же — на вкладке «Ключ API» своих настроек. */
@media (max-width: 600px) {
  table.rows.v-stolbik, table.rows.v-stolbik tbody,
  table.rows.v-stolbik tr, table.rows.v-stolbik td { display: block; width: auto; }
  table.rows.v-stolbik td.key { padding: 8px 0 0; }
  table.rows.v-stolbik td:not(.key) { padding-top: 2px; }
}

/* Форма внутри карточки плана не добавляет своего поля сверху и снизу. */
form.bez-otstupa { margin: 0; }