/* ============================================================================
   Общая дизайн-система админки (pb.trp.international).

   Раньше каждая страница в public/ несла собственный инлайновый <style> с
   копией токенов, шрифта, каркаса, таблиц и кнопок — 11 копий, которые давно
   разъехались: у одной и той же кнопки было пять геометрий, у таблиц — три
   разных hover, у полей — четыре размера без общей шкалы. Теперь общее лежит
   здесь, а на странице остаётся только её собственная специфика.

   ВАЖНО: здесь нет селекторов по голым тегам (button/input/select/textarea).
   Quill стилизуется через `.ql-toolbar.ql-snow button`, а страницы держат свои
   тег-правила — глобальные тег-селекторы отсюда с ними бы конфликтовали.
   Исключение — правила, ограниченные контейнером (`.table-wrap table`).

   Подключается в <head> ПЕРЕД /nav.css (см. server.js). Инлайновый <style>
   страницы идёт после и потому всегда может переопределить любое правило.
   ========================================================================= */

@view-transition{navigation:auto}
/* Шрифт — тот же набор правил, что на trp.international (см. chrome.css):
   вариативный woff2 (в 3.6 раза легче ttf), font-display:swap вместо block —
   раньше текст оставался невидимым, пока шрифт не приедет, и шапка мигала на
   каждом переходе. Пока идёт загрузка, текст рисуется метрически подогнанным
   RalewayFallback, поэтому подмена не двигает вёрстку. ttf оставлен вторым
   источником: на сервере лежат обе раскладки (public/fonts вне git). */
@font-face{font-family:'Raleway';src:url('/fonts/Raleway/Raleway-VariableFont_wght.woff2') format('woff2'),url('/fonts/Raleway/Raleway-VariableFont_wght.ttf') format('truetype-variations');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Raleway';src:url('/fonts/Raleway/Raleway-Italic-VariableFont_wght.woff2') format('woff2'),url('/fonts/Raleway/Raleway-Italic-VariableFont_wght.ttf') format('truetype-variations');font-weight:100 900;font-style:italic;font-display:swap}
/* Переопределения — точные метрики Raleway (upem 1000: ascent 940, descent
   234, lineGap 0), а size-adjust держит высоту строчных: x-height у Raleway
   0.519 кегля, у Arial 0.5186 — то есть 100%, а не 96%. С прежними 96%
   запасной шрифт рисовался на 4% мельче настоящего, и подмена читалась как
   моргание: текст сначала чуть меньше, потом резко больше. */
@font-face{font-family:'RalewayFallback';src:local('Arial'),local('Helvetica'),local('Liberation Sans');size-adjust:100%;ascent-override:94%;descent-override:23.4%;line-gap-override:0%}
/* Цифры — из Inter, а не из Raleway (у Raleway цифры визуально слабее);
   unicode-range сужен до 0-9 и соседних цифровых знаков (%,.,,), так что
   буквы в этих же строках остаются Raleway — шрифт для них просто не
   выбирается браузером. Файлы — обрезка Inter только под эти символы.
   Раньше жило только в analytics.html и не касалось остальных страниц.
   Насечка Inter визуально жирнее той же цифры Raleway при равном номере
   веса, поэтому каждый font-weight здесь намеренно берёт файл на 100
   легче (стоит font-weight:500 — грузится файл, вырезанный из веса 400
   исходного Inter), иначе цифры выглядели заметно жирнее окружающих букв. */
@font-face{font-family:'Inter';src:url('/fonts/Inter/Inter-digits-300.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+25,U+2C,U+2E,U+30-39}
@font-face{font-family:'Inter';src:url('/fonts/Inter/Inter-digits-400.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+25,U+2C,U+2E,U+30-39}
@font-face{font-family:'Inter';src:url('/fonts/Inter/Inter-digits-500.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+25,U+2C,U+2E,U+30-39}
@font-face{font-family:'Inter';src:url('/fonts/Inter/Inter-digits-600.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+25,U+2C,U+2E,U+30-39}
@font-face{font-family:'Inter';src:url('/fonts/Inter/Inter-digits-700.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap;unicode-range:U+25,U+2C,U+2E,U+30-39}

:root{
  /* Поверхности */
  --bg:#e9e9e9;
  --bg-s:#dedede;
  --bg-row:#e0e0e0;
  --field-bg:#fff;

  /* Текст */
  --ink:#141414;
  --ink-d:#3c3c3c;
  --ink-f:#8a8a8a;

  /* Смысловые */
  --accent:#ee1111;
  --err:#c60d0d;
  --ok:#1a8a4a;
  --warn:#a67c00;

  /* Линии */
  --rule:#c9c9c9;
  --rule-s:#bdbdbd;

  /* Шрифты */
  /* RalewayFallback обязателен в обоих стеках. Без него заголовки
     (.page-title — 32px/800, где подмена заметнее всего) во время загрузки
     шрифта рисовались обычным sans-serif, с чужими метриками. */
  --ff-d:'Inter','Raleway','RalewayFallback',sans-serif;
  --ff-b:'Inter','Raleway','RalewayFallback',system-ui,sans-serif;
  --fs-base:17px;

  /* Геометрия контролов. Высота задаётся явно — раньше она собиралась из
     padding и разъезжалась между страницами на 2-10px. */
  /* Высота контролов: обычная (поля, кнопки, выпадающие списки) и мелкая
     (тулбары, ячейки таблиц). --ctl-h-xs — для квадратных икон-кнопок
     внутри строк, где даже 28px распирает строку. */
  --ctl-h:32px;
  --ctl-h-sm:28px;
  --ctl-h-xs:26px;
  --radius:4px;

  /* Стрелка «раскрыть/свернуть» — та же, что сворачивает сайдбар
     (см. nav.js, .nav-collapse-btn): один силуэт на всю админку. Рисуется
     маской, чтобы цвет брался из currentColor. */
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 12' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,1 1,6 6,11'/%3E%3C/svg%3E");

  /* Состояния */
  --dur:.15s;
  --focus-ring:0 0 0 3px rgba(238,17,17,.18);

  /* Цвета событий журнала (log.html): точка светлее, подпись темнее. */
  --ev-ok:#5a9e6f;        --ev-ok-ink:#3d7a52;
  --ev-info:#7a8fa0;      --ev-info-ink:#4a6070;
  --ev-amber:#b07a40;     --ev-amber-ink:#8a5c20;
  --ev-create-ink:#8a6d2e;
}

/* --- Ресет и база ------------------------------------------------------- */

*{box-sizing:border-box;margin:0;padding:0}
html{scrollbar-gutter:stable;scroll-behavior:smooth}
/* Единая полоса прокрутки: тонкая, подложка прозрачная, виден только ползунок. */
*{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.28) transparent}
body{
  font-family:var(--ff-b);
  font-weight:600;
  background:var(--bg);
  color:var(--ink);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* --- Каркас страницы ---------------------------------------------------- */

.layout{max-width:1200px;margin:0 auto;padding:56px 40px 80px}

.page-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:40px;
  padding-bottom:24px;
  border-bottom:1px solid var(--rule);
}
.page-kicker{display:flex;align-items:center;gap:7px;font-size:var(--fs-base);font-weight:600;color:var(--ink);margin-bottom:10px}
.page-header[hidden]{display:none}
.page-title{font-family:var(--ff-d);font-weight:800;font-size:32px;letter-spacing:-0.01em;color:var(--ink);line-height:1}
.page-note{font-size:12px;color:var(--ink-f)}
.text-sm{font-size:13px;line-height:1.45}

/* --- Блок (панель) ------------------------------------------------------ */
/*
   Блок — единственный контейнер верхнего уровня в админке. Раньше их было
   шесть видов: .panel в формах, .fold в редакторе, details.panel в студии,
   чёрная плашка секции в списке команды, сетка плиток в аналитике и голая
   .table-wrap в списках. Отличались поверхностью, рамкой, радиусом, высотой
   шапки и тем, куда попадали кнопки. Теперь вид один, а разница — только в
   трёх модификаторах:

     .panel                — обычный блок: свои отступы, содержимое внутри;
     .panel.panel--flush   — отступы держат .panel-head и .panel-body (нужно,
                             когда в теле таблица во всю ширину блока);
     details.panel--fold   — сворачиваемый блок. Закрытым он выглядит ровно
                             как шапка .panel--flush, поэтому свёрнутые и
                             раскрытые блоки стоят на странице в один ритм.

   Шапка у всех трёх одна и та же (.panel-head): заголовок слева, подсказка
   следом, .panel-actions с кнопками — всегда справа.
*/

.panel{border:1px solid var(--rule);background:var(--bg-s);border-radius:var(--radius);padding:20px}
/* Название блока — чёрное: это заголовок, а не подпись. Серым в шапке
   остаётся только служебная подсказка справа. min-height — чтобы заголовок
   стоял на одной высоте и когда он один, и когда рядом с ним кнопка: иначе
   строка с кнопкой выше и название в ней съезжает вниз. */
.panel-kicker{display:flex;align-items:center;min-height:var(--ctl-h-sm);font-size:14px;font-weight:600;color:var(--ink);margin-bottom:20px}

/* Шапка блока. Отдельной строкой она нужна только когда рядом с заголовком
   стоит подсказка или кнопки; если в блоке один заголовок — хватает
   .panel-kicker, у него те же 20px до содержимого. */
.panel-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;min-height:var(--ctl-h-sm);margin-bottom:20px}
.panel-head>.panel-kicker{margin-bottom:0;min-width:0}
/* Состояние блока одной строкой («created automatically», «2 authors»):
   мелкое, серое и всегда у правого края — читается как приписка к заголовку,
   а не как часть его. Длинную обрезаем, чтобы шапка не ломалась. */
.panel-hint{flex:0 1 auto;min-width:0;margin-left:auto;text-align:right;font-size:12px;font-weight:500;color:var(--ink-f);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel-hint--warn{color:var(--err)}
/* Пояснение к блоку — переносится и живёт слева, в отличие от .panel-hint. */
.panel-note{flex:1 1 220px;min-width:0;font-size:13px;font-weight:500;line-height:1.45;color:var(--ink-f)}
/* Кнопки действия блока. margin-left:auto — единственное место, которое
   решает, где они стоят: всегда у правого края шапки. */
.panel-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}

/* Варианты с отступами на частях: своё поле держат .panel-head и .panel-body,
   а сам блок его не добавляет. Раньше .panel--fold этого не делал — и к полю
   шапки прибавлялись 20px от .panel: название сворачиваемого блока стояло на
   50px от края и на 20px ниже, чем у соседних обычных карточек. */
.panel.panel--flush,
.panel.panel--fold{padding:0px}
/* Панель с графиком (bare: true — контент без .panel-body) сама держит поле:
   без него переключатель разбивки/вида графика стоит впритык к краю карточки
   и выглядит неровно рядом с соседними блоками, у которых поле есть. */
.panel.panel--flush.chart-panel{padding:20px}
/* Поле шапки: по горизонтали столько же, сколько у обычной карточки (20px),
   поэтому названия всех блоков стоят в одном столбце; по вертикали меньше —
   шапка это полоса, а не поле карточки. */
.panel--flush>.panel-head,
.panel--fold>.panel-head{margin:0;padding:12px 20px;border-bottom:1px solid var(--rule)}
.panel--flush>.panel-body,
.panel--fold>.panel-body{padding:20px}
/* Таблица в теле блока: рамку и радиус даёт сам блок. */
.panel--flush>.table-wrap,
.panel--fold>.table-wrap{border:none;border-radius:0 0 var(--radius) var(--radius)}

/* Сворачиваемый блок. Треугольник и поведение — те же, что у .disclosure,
   но заголовок здесь полноценная шапка блока, а не строка текста. */
.panel--fold>.panel-head{position:relative;cursor:pointer;list-style:none;border-bottom-color:transparent;transition:background var(--dur)}
.panel--fold>.panel-head::-webkit-details-marker{display:none}
/* Стрелка в основании смотрит влево (как в сайдбаре): закрытый блок
   поворачивает её вправо, открытый — вниз. Стоит слева от названия: это
   ручка раскрытия, и её ищут в начале строки, а не в конце. Вынесена из
   потока, поэтому шапка держит под неё поле слева. */
.panel--fold>.panel-head{padding-left:30px}
.panel--fold>.panel-head::before{content:'';position:absolute;left:10px;top:0;bottom:0;width:9px;background:currentColor;color:var(--ink);-webkit-mask:var(--chevron) center/8px 11px no-repeat;mask:var(--chevron) center/8px 11px no-repeat;transform:rotate(180deg);transition:transform var(--dur)}
.panel--fold[open]>.panel-head::before{transform:rotate(270deg)}
/* Раскрытый блок линию под шапкой не рисует — она остаётся прозрачной,
   чтобы высота шапки не прыгала при раскрытии. */
/* Вся полоса шапки — кнопка раскрытия, поэтому при наведении светлеет она
   целиком, тем же тоном, что строка таблицы: подчёркивать одну лишь стрелку
   мало — курсор чаще над названием. */
.panel--fold>.panel-head:hover{background:var(--bg)}
.panel--fold>.panel-head{border-radius:var(--radius) var(--radius) 0 0}
.panel--fold:not([open])>.panel-head{border-radius:var(--radius)}
.panel--fold>.panel-head:focus-visible{outline:none;box-shadow:var(--focus-ring)}
/* Отметка «блок заполнен» у свёрнутого заголовка. Рисуется двумя прямыми
   отрезками с острым стыком (miter): шрифтовой «✓» в Raleway скруглён и
   выбивался из остальной графики админки. */
.panel-check{display:none;color:var(--ink);flex:none;line-height:0}
.panel-check.show{display:inline-flex;align-items:center}
.panel-check svg{display:block}

/* Стопка панелей, склеенных в один блок: радиусы остаются только по краям. */
.panel--stacked:has(+.panel--stacked){border-radius:var(--radius) var(--radius) 0 0}
.panel--stacked+.panel--stacked{border-top:none;border-radius:0 0 var(--radius) var(--radius)}
.panel--stacked+.panel--stacked:has(+.panel--stacked){border-radius:0}

/* --- Вложенный блок ----------------------------------------------------- */
/*
   Второй уровень: карточка внутри блока (вопрос FAQ, кейс, подпрактика).
   Отличается от блока только поверхностью — она светлее, чем у родителя,
   поэтому вложенность видно без второй рамки и без своих радиусов.
   Кнопки — так же справа, через .block-tools.
*/
.block{border:1px solid var(--rule);background:var(--bg);border-radius:var(--radius);padding:16px}
/* Список вложенных блоков и кнопка «добавить» под ним — один ритм в 10px. */
.block-list{display:flex;flex-direction:column;gap:10px}
.block-list:not(:empty){margin-bottom:10px}
.block-head{display:flex;align-items:center;gap:10px;min-height:var(--ctl-h-xs);margin-bottom:14px}
/* Название вложенного блока — тем же шрифтом и цветом, что у блока. */
.block-title{font-size:14px;font-weight:600;color:var(--ink);flex:none}
.block-tools{display:flex;align-items:center;gap:6px;margin-left:auto;flex-shrink:0}

/* --- Таблицы ------------------------------------------------------------ */

/* Таблица без блока-обёртки — тоже блок: та же рамка и тот же радиус. */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--rule);border-radius:var(--radius);background:var(--bg-s)}
/* Липкая шапка — только там, где у обёртки есть своя max-height. */
.table-wrap--sticky thead th{position:sticky;top:0;background:var(--bg-s);z-index:1}

.table-wrap table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:12px}
/* border-bottom на самом th, а не на thead tr: со sticky-шапкой (см. ниже)
   каждая th красится собственным фоном поверх строки — бордер строки под
   ним просто не был виден, а бордер собственной ячейки виден всегда. */
.table-wrap thead th{text-align:left;padding:10px;font-size:12px;color:var(--ink-f);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid var(--rule)}
.table-wrap thead th:last-child{text-align:right}
.table-wrap th:not(:last-child){border-right:1px solid var(--rule)}
.table-wrap tbody tr{transition:background var(--dur)}
.table-wrap tbody tr:not(:last-child){border-bottom:1px solid var(--rule)}
/* Подсветка строки светлее поверхности блока — на --bg-row (он темнее её
   всего на два тона) наведение почти не читалось. */
.table-wrap tbody tr:hover{background:var(--bg)}
.table-wrap td{padding:10px;font-size:12px;vertical-align:middle;border-right:1px solid var(--rule);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.table-wrap td:last-child{border-right:none;text-align:right}
/* Длинное значение обрезается многоточием и когда лежит прямо в ячейке, и
   когда завёрнуто в свой блок (.td-name, .td-title и подобные): без этого
   правила обрезалась только «голая» ячейка, а вложенный div вылезал за её
   границу и наезжал на соседний столбец. */
.table-wrap td>div{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Строки-ссылки (списки статей, команды, практик). */
.table-wrap tbody tr.clickable{cursor:pointer}

/* --- Пустое состояние --------------------------------------------------- */

/* Мягкое появление содержимого, которое приходит уже после загрузки страницы
   (UI.fadeIn): вместо того чтобы выскакивать, блок проявляется за 0.2с. */
@keyframes ui-fade-in{from{opacity:0}to{opacity:1}}
.ui-fade-in{animation:ui-fade-in .2s ease-out}
@media (prefers-reduced-motion:reduce){.ui-fade-in{animation:none}}
/* Шиммер — заглушка на время загрузки данных. Занимает столько же места,
   сколько настоящее содержимое (строка таблицы, график, блок), поэтому при
   подмене данными вёрстка не прыгает. Строки — UI.skeletonRows(), блоки —
   .sk.sk--block с явной высотой. */
@keyframes ui-sk{from{background-position:100% 0}to{background-position:-100% 0}}
.sk{display:inline-block;width:70%;height:12px;border-radius:2px;vertical-align:middle;background:linear-gradient(90deg,var(--bg-row) 25%,var(--bg) 50%,var(--bg-row) 75%);background-size:200% 100%;animation:ui-sk 1.4s ease-in-out infinite}
.sk--block{display:block;width:100%;border-radius:var(--radius)}
.sk-row td{height:37px}
.sk-row:hover{background:none!important}
.sk-stack{display:flex;flex-direction:column;gap:12px}
@media (prefers-reduced-motion:reduce){.sk{animation:none}}
.empty-state{padding:80px 0;text-align:center}
.empty-state-dash{font-family:var(--ff-d);font-size:40px;color:var(--rule);margin-bottom:20px}
.empty-state-text{font-size:14px;color:var(--ink-f);line-height:1.6}
.empty-state-text a{color:var(--accent);text-decoration:none}
.empty-state-text a:hover{text-decoration:underline}
/* Компактный вариант в рамке — для блоков внутри страницы, а не всей страницы. */
.empty-state--boxed{padding:60px 20px;color:var(--ink-f);font-size:13px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--bg-s)}
.empty-state--boxed a{color:var(--accent)}

/* --- Сообщения ---------------------------------------------------------- */

.alert{display:none;font-size:13px;font-weight:600;line-height:1.4}
.alert.visible{display:block}
.alert--err{color:var(--err)}
.alert--ok{color:var(--ok)}

/* --- Статусы ------------------------------------------------------------ */

/* Точка + подпись. `.status` — неинтерактивная (список статей),
   `.status-toggle` — та же плашка, но кликабельная (команда, практики, юзеры). */
.status,
.status-toggle{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;white-space:nowrap}
.status-toggle{appearance:none;border:none;background:none;font-family:inherit;cursor:pointer;padding:4px 8px;margin:-4px -8px;border-radius:var(--radius);transition:background var(--dur) ease}
.status-toggle:hover{background:rgba(0,0,0,.06)}
.status-toggle:focus-visible{box-shadow:var(--focus-ring);outline:none}
/* Роли без права менять статус получают .static — вид тот же, реакции нет. */
.status-toggle.static,.status-toggle.static:hover{cursor:default;background:none}

.status-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.status-pub,.status-active{color:var(--ok)}
.status-pub .status-dot,.status-active .status-dot{background:var(--ok)}
.status-draft,.status-off{color:var(--ink-f)}
.status-draft .status-dot,.status-off .status-dot{background:var(--ink-f)}
.status-scheduled{color:var(--warn)}
.status-scheduled .status-dot{background:var(--warn)}

/* --- Адаптив ------------------------------------------------------------ */

@media(max-width:700px){
  .layout{padding:28px 16px 60px}
  .page-header{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:24px}
  .page-title{font-size:24px}
  /* Сегмент не переносит кнопки на вторую строку (это дорожка с активной
     плашкой, не список), а число вариантов у страниц разное — где-то их
     набирается больше, чем влезает в ширину телефона. Даём дорожке
     проскроллиться вбок вместо того, чтобы раздвигать всю страницу. */
  .segment{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ============================================================================
   Кнопки

   Раньше одна и та же кнопка жила под двумя десятками имён: .btn-create,
   .pub-btn, .nav-btn-primary, .nav-save-btn, .custom-apply-btn, .ai-btn… —
   с пятью разными геометриями (высоты 26/28/34 и три варианта, где высота
   вообще собиралась из padding), четырьмя радиусами и :disabled то на .35,
   то на .5, то отсутствующим. Теперь высота задаётся явно, а вариант
   выбирается модификатором.

   Цвет несёт смысл:
     --primary (тёмный)  — нейтральное главное действие: Save, Publish, Create
     --accent  (красный) — вход, AI, SEO, проверка орфографии
     --danger  (--err)   — разрушающее: Delete, Unpublish
   ========================================================================= */

.btn svg{display:block;flex-shrink:0}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  height:var(--ctl-h);
  padding:0 20px;
  border:none;
  border-radius:var(--radius);
  background:transparent;
  color:var(--ink);
  font-family:var(--ff-b);
  font-weight:600;
  font-size:14px;
  line-height:1;
  white-space:nowrap;
  text-decoration:none;
  cursor:pointer;
  appearance:none;
  transition:opacity var(--dur) ease,color var(--dur) ease,border-color var(--dur) ease,background var(--dur) ease;
}
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.35;cursor:not-allowed}
.btn:disabled:hover,.btn[aria-disabled="true"]:hover{opacity:.35}

.btn--primary{background:var(--ink);color:#fff}
.btn--primary:hover{opacity:.82}
.btn--accent{background:var(--ink);color:#fff}
.btn--accent:hover{opacity:.82}
.btn--danger{background:var(--err);color:#fff}
.btn--danger:hover{opacity:.82}

.btn--ghost{border:1px solid var(--rule-s);color:var(--ink-d)}
.btn--ghost:hover{color:var(--ink);border-color:var(--ink)}

/* Контурная кнопка — чёрная граница, без заливки. */
.btn--outline{border:1px solid var(--ink);color:var(--ink)}
.btn--outline:hover{opacity:.7}

/* Текстовая кнопка без фона — удаление, «назад», «убрать фото». */
.btn--quiet{color:var(--ink-f)}
.btn--quiet:hover{color:var(--ink)}
.btn--quiet.btn--destructive:hover{color:var(--ink)}

/* "← Back" link above a page's header, used by editor.html and
   document-editor.html — shared here so both pages get the same style. */
.back-btn{align-self:flex-start;height:auto;padding:9px 0;font-size:15px;margin-bottom:16px}
.back-btn svg{display:block;flex-shrink:0}

/* Ссылка, набранная кнопкой. */
.btn--link{height:auto;padding:0;color:var(--accent);font-size:13px;text-decoration:underline;text-underline-offset:2px}
.btn--link:hover{opacity:.75}

/* Пунктирная «добавить ещё» во всю ширину. */
.btn--dashed{width:100%;border:1px dashed var(--rule-s);color:var(--ink-f)}
.btn--dashed:hover{color:var(--ink);border-color:var(--ink)}

/* Квадратная иконка — стрелки и крестик у повторяемых блоков. */
.btn--icon{width:var(--ctl-h-xs);height:var(--ctl-h-xs);padding:0;border:1px solid var(--rule-s);color:var(--ink-d);font-size:13px}
.btn--icon:hover{color:var(--ink);border-color:var(--ink)}
.btn--icon.btn--destructive:hover{color:var(--ink);border-color:var(--ink)}

.btn--sm{height:var(--ctl-h-sm);font-size:13px;padding:0 12px}
.btn--xs{height:var(--ctl-h-xs);font-size:13px;padding:0 12px}
.btn--block{width:100%}

/* --- Сегментный переключатель ------------------------------------------- */

/* Один компонент вместо двух: .period-btn в аналитике (рамка у группы,
   разделители фоном) и .mode-toggle в документах (рамка у каждой кнопки).

   Высоту задаёт САМА группа, а кнопки внутри тянутся на 100%. Если высоту
   держат кнопки, рамка группы добавляется к ней снаружи, и группа выходит
   на 2px выше соседнего .dd-toggle или .input той же ступени. */
/* Активный пункт — плашка ВНУТРИ дорожки, а не заливка до самой рамки.
   Раньше кнопка упиралась в рамку группы: с одной стороны чёрное поле
   сливалось с рамкой и та выглядела толще, а разделители на фоне --rule
   давали видимую линию справа от активного пункта. */
.segment{display:inline-flex;align-items:center;height:var(--ctl-h);gap:2px;padding:3px;background:var(--bg);border:1px solid var(--rule);border-radius:var(--radius)}
.segment--sm{height:var(--ctl-h-sm);padding:2px}
.segment .btn{height:100%;padding:0 10px;border-radius:2px;background:none;color:var(--ink-f)}
.segment .btn:hover{background:var(--bg-s);opacity:1}
.segment .btn.active{background:var(--ink);color:#fff}
.segment .btn.active:hover{background:var(--ink)}
/* --- Иконки Lucide (icons.js) и панель форматирования Студии --------------
   SVG без размера в разметке: 16px по умолчанию, 14px внутри кнопок, 16px в
   панели над карточкой. Цвет — currentColor, то есть цвет текста кнопки. */
.trp-icon{width:16px;height:16px;flex:none}
.btn .trp-icon{width:14px;height:14px}
.tile__tools .btn .trp-icon{width:16px;height:16px}
/* Одна строка, всё одной высоты (--ctl-h-sm): на узкой карточке панель
   листается вбок, а не переносится второй строкой. */
.tile__tools{--tool-h:var(--ctl-h-sm);display:flex;flex-wrap:nowrap;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.tile__tools::-webkit-scrollbar{display:none}
.tile__tools>*{flex:none}
.tile__tools .dd{width:auto}
.tile__tools .dd-toggle,.tile__tools .input,.tile__tools .btn,.tile__tools .segment{height:var(--tool-h);min-height:0;box-sizing:border-box}
.tile__tools .dd--sm .dd-toggle{min-width:0;gap:6px}
.tile__tools .tools__number{width:48px;padding:0 6px;font-size:14px;text-align:center;-moz-appearance:textfield}
.tile__tools .tools__number::-webkit-inner-spin-button,.tile__tools .tools__number::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.tile__tools .btn--icon{width:var(--tool-h);border-color:transparent}
.tile__tools .btn--icon:hover{border-color:var(--rule-s)}
.tile__tools .btn--icon.active{background:var(--ink);border-color:var(--ink);color:#fff}
.tile__tools .btn--icon.active:hover{background:var(--ink);color:#fff}
.tile__tools .segment .btn{width:auto;height:100%;min-width:calc(var(--tool-h) - 4px);padding:0 4px}
.tile__tools .segment .btn.active{border-color:transparent;color:#fff}
/* Размер: число и стрелки — одна группа в общей рамке. */
.tools__size{display:inline-flex;align-items:center;height:var(--tool-h);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.tools__size .input{height:100%;border:0;border-radius:0}
/* Толщина: кнопка «Ж» и стрелка-меню — одна группа; подпись в кнопке списка скрыта. */
.tile__tools .tools__weight .tools__toggle--weight{border:0;border-radius:0}
.tile__tools .tools__weight .dd{width:auto;height:100%}
.tile__tools .tools__weight .dd-toggle{height:100%;border:0;border-left:1px solid var(--rule);border-radius:0;background:transparent;padding:0 7px;gap:0}
.tile__tools .tools__weight .dd-label{display:none}
.tile__tools .tools__weight .dd .trp-icon{width:14px;height:14px;color:var(--ink-d);transition:none;transform:none}
.tile__tools .tools__weight .dd-toggle:hover{background:var(--bg-s)}
.tools__size .btn--icon{width:22px;height:100%;border:0;border-left:1px solid var(--rule);border-radius:0}
.tools__size .btn--icon:hover{background:var(--bg-s)}
.tools__size .btn .trp-icon{width:14px;height:14px}
.tools__sep{width:1px;height:16px;margin:0 2px;background:var(--rule)}
.tools__after{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--ink-f)}
/* --- Спаренная кнопка (принять / отклонить) ------------------------------ */

/* Высоту, как и у .segment, держит контейнер — иначе рамка прибавляется
   снаружи и пара встаёт выше соседней кнопки. */
.split{display:none;align-items:center;height:var(--ctl-h-sm);border:1px solid var(--rule-s);border-radius:var(--radius);overflow:hidden}
.split.visible{display:inline-flex}
.split .btn{height:100%;border-radius:0;background:var(--bg)}
.split .btn:hover{opacity:1}
.split .btn+.btn{border-left:1px solid var(--rule-s)}
.btn--accept{color:var(--ok)}
.btn--accept:hover{background:rgba(26,138,74,.1)}
.btn--reject{color:var(--ink)}
.btn--reject:hover{background:rgba(0,0,0,.08)}

/* --- Спиннер ------------------------------------------------------------- */

/* Иконка Lucide «loader» (spinner.svg) как маска: цвет берётся из currentColor.
   Один спиннер на всю админку; вращается плавно. */
.spinner{display:inline-block;width:14px;height:14px;flex-shrink:0;background:currentColor;-webkit-mask:url(/spinner.svg) center/contain no-repeat;mask:url(/spinner.svg) center/contain no-repeat;animation:ui-spin .9s linear infinite}
.spinner--sm{width:13px;height:13px}
@keyframes ui-spin{to{transform:rotate(360deg)}}

/* ============================================================================
   Поля ввода

   В админке исторически две парадигмы: подчёркнутое поле в редакторах и
   боксовое на /login и /users. Обе оставлены — но с общей высотой, шрифтом
   и фокусом, чтобы контролы в одной строке не разъезжались.
   ========================================================================= */

.input{
  width:100%;
  height:var(--ctl-h);
  padding:0 12px;
  border:1px solid var(--rule);
  border-radius:var(--radius);
  background:var(--field-bg);
  font-family:var(--ff-b);
  font-weight:500;
  font-size:14px;
  color:var(--ink);
  outline:none;
  color-scheme:light;
  -webkit-font-smoothing:antialiased;
  transition:border-color var(--dur),box-shadow var(--dur);
}
.input:focus{border-color:var(--ink);box-shadow:none}
.input::placeholder{color:var(--ink-f)}
.input:disabled{opacity:.55;cursor:not-allowed}

/* Подчёркнутый вариант — редакторы. */
.input--line{background:transparent;border:none;border-bottom:1px solid var(--rule);border-radius:0;padding:0 2px;font-weight:600;font-size:15px}
.input--line:focus{border-bottom-color:var(--ink);box-shadow:none}

.input--sm{height:var(--ctl-h-sm);font-size:12px;padding:0 8px}

.textarea{
  width:100%;
  min-height:120px;
  padding:14px;
  border:1px solid var(--rule);
  border-radius:var(--radius);
  background:transparent;
  font-family:var(--ff-b);
  font-weight:500;
  font-size:15px;
  line-height:1.5;
  color:var(--ink);
  outline:none;
  resize:vertical;
  transition:border-color var(--dur),box-shadow var(--dur);
}
.textarea:focus{border-color:var(--ink);box-shadow:none}
.textarea::placeholder{color:var(--ink-f)}

.checkbox,.radio{width:15px;height:15px;accent-color:var(--accent);cursor:pointer;flex-shrink:0}

/* Слайдер включить/выключить — свой checkbox спрятан, но остаётся кликабельным
   и доступным с клавиатуры (фокус — на нём же, а не на декоративной дорожке). */
.switch-row{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;font-size:13px;font-weight:600;color:var(--ink-d)}
.switch{position:relative;display:inline-block;width:36px;height:20px;flex-shrink:0}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.switch-track{position:absolute;inset:0;background:var(--rule);border-radius:var(--radius);transition:background-color .18s ease}
.switch-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:2px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .18s ease}
.switch input:checked + .switch-track{background:var(--ink)}
.switch input:checked + .switch-track .switch-thumb{transform:translateX(16px)}
.switch input:focus-visible + .switch-track{outline:2px solid var(--ink);outline-offset:2px}

/* --- Подписи и группы --------------------------------------------------- */

/* Было три варианта одного лейбла: .field label (login), .field-label
   (документы и редакторы) и .add-field label (пользователи). */
.label{display:block;font-size:13px;font-weight:600;color:var(--ink-f);margin-bottom:8px}
.label--sm{font-size:12px}
.field-optional{font-weight:400;color:var(--ink-f);text-transform:none;letter-spacing:0}
.field-hint{font-size:13px;font-weight:500;color:var(--ink-d);margin-top:8px;line-height:1.5}

/* --- Раскрывающийся блок ------------------------------------------------ */

/* Один примитив вместо трёх копий CSS-треугольника в редакторе статей
   (.url-tech, .fold, .guide). */
/* Заголовок раскрывашки — тем же шрифтом и цветом, что название блока:
   у всех сворачиваемых секций админки подпись выглядит одинаково. */
.disclosure>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink);transition:color var(--dur)}
.disclosure>summary::-webkit-details-marker{display:none}
.disclosure>summary:hover{color:var(--ink-d)}
/* Стрелка — в конце строки, у правого края: как у сворачиваемого блока
   (.panel--fold), и подпись раскрывашки начинается там же, где обычный
   текст рядом, а не с отступом на ширину стрелки. */
.disclosure>summary::before{content:'';order:1;margin-left:auto;width:9px;height:12px;flex-shrink:0;background:currentColor;-webkit-mask:var(--chevron) center/8px 11px no-repeat;mask:var(--chevron) center/8px 11px no-repeat;transform:rotate(180deg);transition:transform var(--dur)}
.disclosure[open]>summary::before{transform:rotate(270deg)}

/* --- Модальное окно ----------------------------------------------------- */

.modal-overlay{position:fixed;inset:0;background:rgba(20,18,16,.55);z-index:200;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal{background:var(--bg-s);border:1px solid var(--rule);border-radius:var(--radius);padding:20px;max-width:380px;width:90%;transform:translateY(8px);transition:transform .2s}
.modal-overlay.open .modal{transform:translateY(0)}
.modal-title{font-family:var(--ff-d);font-size:18px;font-weight:600;letter-spacing:.04em;color:var(--ink);margin-bottom:12px}
.modal-text{font-size:13px;font-weight:500;color:var(--ink-d);line-height:1.6;margin-bottom:28px}
.modal-actions{display:flex;gap:12px}
.modal-actions .btn{flex:1;padding:0 12px;white-space:nowrap}
/* Три действия в ряд (отмена, не сохранять, сохранить) — окно пошире. */
.modal--wide{max-width:460px}
/* Окно с полем ввода (UI.prompt): поле во всю ширину, под ним кнопки. */
.modal-overlay--prompt .modal{max-width:520px}
.modal-input{display:block;width:100%;box-sizing:border-box;margin-bottom:20px;resize:vertical}

/* --- Зона загрузки изображения ------------------------------------------ */

.dropzone{border:1px dashed var(--rule);border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--ink-f);font-size:13px;cursor:pointer;transition:border-color var(--dur),color var(--dur)}
.dropzone:hover,.dropzone.drag-over{border-color:var(--ink);color:var(--ink)}

/* --- Плашка статуса ----------------------------------------------------- */

/* Раньше без радиуса — единственный прямоугольный элемент среди скруглённых. */
.status-badge{display:inline-block;padding:3px 8px;border:1px solid transparent;border-radius:var(--radius);font-size:13px;font-weight:600}
.panel-head>.status-badge{margin-left:auto}
.status-badge.draft{color:var(--ink-f);border-color:var(--rule)}
.status-badge.published{color:var(--ok);border-color:var(--ok)}
.status-badge.scheduled{color:var(--warn);border-color:var(--warn)}

@media(max-width:700px){
  .modal{padding:28px 20px}
}

/* --- Переключатель языка (редакторы) ------------------------------------ */

/* Байт-в-байт одинаковый блок жил в трёх редакторах. Сами кнопки —
   .btn .btn--ghost .btn--sm, здесь только раскладка и панели. */
.lang-bar{display:flex;align-items:center;gap:8px;margin-bottom:20px}
.lang-pane{display:none}
.lang-pane.active{display:block}

@media(max-width:700px){
  .lang-bar{flex-wrap:wrap;gap:10px}
}

/* ============================================================================
   Выпадающий список

   Было три несовместимых идиомы: native <select> с нарисованной стрелкой в
   аналитике (без радиуса), native <select> в таблице пользователей и
   <details> у выбора карточек команды. Теперь один вид на всех.

   Панель — position:fixed и позиционируется из /ui.js. Абсолютную панель
   обрезает .table-wrap: overflow-x:auto по спецификации делает и
   overflow-y вычисляемым как auto, поэтому overflow-y:visible на обёртке
   не помогает.
   ========================================================================= */

.dd{position:relative;display:inline-block;width:100%}
.dd-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  height:var(--ctl-h);
  padding:0 10px 0 12px;
  border:1px solid var(--rule);
  border-radius:var(--radius);
  background:var(--field-bg);
  font-family:var(--ff-b);
  font-weight:500;
  font-size:14px;
  line-height:1;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
  appearance:none;
  transition:border-color var(--dur),box-shadow var(--dur);
}
.dd-toggle:focus-visible{outline:none;border-color:var(--ink);box-shadow:none}
.dd-toggle[aria-expanded="true"]{border-color:var(--ink)}
.dd-toggle:disabled{opacity:.55;cursor:not-allowed}
.dd-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-caret{flex-shrink:0;color:var(--ink-f)}
.dd-toggle[aria-expanded="true"] .dd-caret{transform:rotate(180deg)}

.dd--sm .dd-toggle{height:var(--ctl-h-sm);font-size:12px;padding:0 8px}
/* Вариант для тулбаров: тон страницы вместо белого поля и ширина по
   содержимому, чтобы список не растягивал строку с кнопками. */
.dd--flat{width:auto}
.dd--flat .dd-toggle{background:var(--bg);font-weight:600}

.dd-panel{
  position:fixed;
  z-index:300;
  min-width:180px;
  max-height:420px;
  overflow-y:auto;
  padding:6px;
  border:1px solid var(--rule);
  border-radius:var(--radius);
  background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.14);
}
.dd-option{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:0 8px;
  height:var(--ctl-h);
  border:none;
  border-radius:3px;
  background:none;
  font-family:var(--ff-b);
  font-weight:500;
  font-size:13px;
  color:var(--ink);
  text-align:left;
  white-space:nowrap;
  cursor:pointer;
}
.dd-panel--sm .dd-option{height:var(--ctl-h-sm);font-size:12px}
.dd-slider{display:flex;align-items:center;gap:10px;padding:0 8px 0 36px;height:var(--ctl-h);font-family:var(--ff-b);font-size:12px;font-weight:500;color:var(--ink-d)}
.dd-slider input[type=range]{flex:1;min-width:120px;accent-color:var(--accent);cursor:pointer}
.dd-slider output{min-width:30px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-f)}
.dd-option:hover,.dd-option.focused{background:var(--bg-row)}
.dd-option[aria-selected="true"]{font-weight:700}
.dd-option-check{width:10px;flex-shrink:0;color:var(--ink)}

/* Подчёркнутый вариант — под поля редакторов (.input--line). */
.dd--line .dd-toggle{background:transparent;border:none;border-bottom:1px solid var(--rule);border-radius:0;padding:0 2px;font-weight:600;font-size:15px}
.dd--line .dd-toggle[aria-expanded="true"]{border-bottom-color:var(--ink)}
.dd--line .dd-toggle:focus-visible{box-shadow:none;border-bottom-color:var(--ink)}
/* Маленький вариант кнопки — когда сам <summary> и есть кнопка (ячейка таблицы). */
.dd-toggle--sm{height:var(--ctl-h-sm);font-size:12px;padding:0 8px}

/* --- Индикатор сохранения (редакторы) ----------------------------------- */

/* Было два несовместимых словаря состояний: в редакторе статьи каждый класс
   (saving/saved/error/unsaved) сам включал opacity, в редакторах команды и
   практик видимостью управлял отдельный .visible. Оставлен второй подход:
   видимость и цвет разведены, поэтому новое состояние — это одна строка. */
.nav-status{font-size:12px;letter-spacing:.06em;color:var(--ink-f);opacity:0;transition:opacity .3s;white-space:nowrap}
.nav-status.visible{opacity:1}
.nav-status.error{color:var(--err)}
.nav-status.unsaved{color:var(--ink-d)}

/* Отдельная пометка «есть несохранённые правки» рядом с кнопкой Save. Цвет —
   тот же, что у .nav-status.unsaved: несохранённые правки это не ошибка, а
   красный в интерфейсе остаётся за ошибками и удалением. */
.nav-dirty{font-size:12px;letter-spacing:.06em;color:var(--ink-d);opacity:0;transition:opacity .2s;white-space:nowrap}
.nav-dirty.visible{opacity:1}

/* --- Шапка редакторов ---------------------------------------------------
   Статьи, практики и участники команды открываются в своих редакторах, но
   шапка у всех трёх одна: логотип слева, название записи по центру, действия
   справа. Раньше каждый редактор держал её копию у себя — отсюда разъехались
   отступы (gap 12 против 14), вертикальное центрирование и набор кнопок.
   Списочные страницы получают свою шапку из /nav.css, который подключается
   после этого файла и переопределяет .nav под меню. */
.nav-editor{position:sticky;top:0;z-index:50;padding:0 28px;height:52px;display:flex;justify-content:center;align-items:center;background:var(--bg);color:var(--ink);font-family:var(--ff-b);font-weight:600;font-size:var(--fs-base,17px);letter-spacing:.01em;border-bottom:1px solid rgba(0,0,0,.09)}
/* Маска над шапкой: во встроенных браузерах при rubber-band над липкой
   шапкой просвечивает контент. */
.nav-editor::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:50vh;background:var(--bg);pointer-events:none}
.nav-editor .nav-logo{position:absolute;left:28px;text-decoration:none;display:flex;align-items:center}
.nav-editor .nav-logo svg{height:15px;width:auto;display:block}
.nav-center{font-size:12px;color:var(--ink-f);letter-spacing:0.06em;max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Порядок справа один для всех редакторов: статус → вторичные действия
   (Discard, Import, Preview) → одна тёмная Save. */
.nav-right{position:absolute;right:28px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:12px}

@media(max-width:700px){
  .nav-dirty{display:none}
  .nav-editor{padding:12px 16px;justify-content:space-between}
  .nav-editor .nav-logo{position:static}
  /* min-width:0 обязателен: у flex-элемента с white-space:nowrap он по
     умолчанию auto (= вся строка целиком), поэтому длинное название статьи
     раздвигало шапку и выталкивало кнопки справа за край экрана. */
  .nav-center{flex:1;min-width:0;text-align:center;max-width:none;padding:0 8px}
  .nav-right{position:static;transform:none}
  /* Подписи кнопок (Отменить правки/Предпросмотр/Сохранить) в сумме шире
     любого телефона — на этой ширине шапка остаётся в одну строку (важно
     для редактора статьи: тулбар Quill приклеен ровно под её высотой), а
     кнопки становятся квадратными иконками, как уже есть у Undo/Redo. */
  .nav-right .btn{font-size:0;gap:0;padding:0 10px}
}

/* --- Фирменный график (/chart.js) ---------------------------------------
   Линия с точками, ось, сетка, подписи дат, легенда — общий вид для любой
   страницы, где нужен график по дням (аналитика, охваты и следующие).
   Раньше каждая страница со своим графиком держала копию этих правил, и одна
   из копий (reach.html) рисовала SVG в fixed viewBox с
   preserveAspectRatio:none — на ширине контейнера, отличной от viewBox,
   линии и текст растягивались по горизонтали неравномерно. Здесь, как и с
   самого начала в analytics.html, viewBox выставляется в JS РОВНО в реальные
   пиксели контейнера (см. /chart.js), искажения нет в принципе.

   --plot-top — место сверху под собственные контролы страницы (например,
   переключатель «Столбцы/Линия» в аналитике); где их нет, задайте меньше
   (см. .trend--compact ниже). Один источник правды на три элемента: сам
   .trend, .trend-svg и невидимый .trend-plot-ref — их отступы должны
   совпадать один-в-один, иначе сетка/точки съезжают на соседний пиксель. */
.trend{--plot-top:0px;position:relative;display:flex;align-items:flex-end;gap:4px;height:220px;padding:var(--plot-top) 0 0 38px;margin-bottom:4px}
.trend--compact{height:180px}
.trend-controls{position:absolute;top:10px;right:14px;left:38px;z-index:3;display:flex;gap:8px;align-items:center;justify-content:flex-end}
.trend-controls .segment,
.trend-controls .dd-toggle{margin-bottom:8px}
.trend-dates{display:flex;gap:4px;padding:0 0 0 38px;margin-bottom:12px}
.trend-dates .trend-bar-date{flex:1;text-align:center}
.trend-bar-date{font-size:9px;color:var(--ink-f);white-space:nowrap}
/* width/height:100% обязательны: svg — replaced-элемент, left/right/top/bottom
   у абсолютного позиционирования сами по себе его не растягивают, без явного
   размера браузер берёт intrinsic из viewBox и линия улетает далеко за
   пределы клетки графика. */
.trend-svg{position:absolute;left:38px;right:0;top:var(--plot-top);bottom:0;width:calc(100% - 38px);height:calc(100% - var(--plot-top));z-index:1;overflow:visible}
/* Невидимый эталон той же области построения, что у .trend-svg — по нему в
   JS (Chart.positionGrid) меряют реальные пиксели для сетки, вместо
   захардкоженных констант, которые рассинхронизировались бы с версткой при
   любой правке .trend в CSS. */
.trend-plot-ref{position:absolute;left:38px;right:0;top:var(--plot-top);bottom:0;visibility:hidden;pointer-events:none}
.trend-line{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.trend-area{stroke:none}
.trend-dot-hit{position:absolute;width:14px;height:14px;margin:-7px;z-index:4;cursor:default}
.trend-dot{stroke:var(--bg);stroke-width:1.5}
/* Без transform: центрирование через translateY на дробный calc()-процент
   после композитинга давало на части линий блюр в 2px вместо чёткого 1px
   (субпиксельное позиционирование не совпадало с пиксельной сеткой) —
   тоньше border графика линии в итоге и не бывают, просто ровно 1px. */
.trend-grid{position:absolute;left:38px;right:0;height:1px;background:var(--rule);z-index:0}
.trend-grid-label{position:absolute;left:0;width:30px;text-align:right;font-size:10px;color:var(--ink-f);transform:translateY(50%)}
.trend-dot-hit[data-tip]:hover::after{
  content:attr(data-tip);
  position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:6px;
  background:#141414;color:#fff;font-size:11px;font-weight:600;padding:4px 7px;border-radius:3px;
  white-space:nowrap;pointer-events:none;z-index:5;
}
/* Точки у самого верха графика (вершина кривой) — подсказке над ними некуда
   деваться, вылезает за край панели/экрана. Для них показываем её под точкой. */
.trend-dot-hit--below[data-tip]:hover::after{
  bottom:auto;top:100%;margin-bottom:0;margin-top:6px;
}
/* Точки у левого/правого края графика (первая/последняя дата) — центрирование
   подсказки на точке уводит половину текста за край панели/экрана. Прижимаем
   подсказку к соответствующему краю самого хита вместо центрирования. */
.trend-dot-hit--left[data-tip]:hover::after{ left:0;transform:none; }
.trend-dot-hit--right[data-tip]:hover::after{ left:auto;right:0;transform:none; }
.trend-caption{font-size:12px;color:var(--ink-f);margin-bottom:10px}
.legend{display:flex;flex-wrap:wrap;gap:12px 20px;font-size:12px;color:var(--ink-d)}
.legend-item{display:flex;align-items:center;gap:6px}
.legend-swatch{width:9px;height:9px;border-radius:2px;flex-shrink:0}