/* ============================================================================
   fortunatos.css - спільні токени і базові класи документів агентства.

   Єдине джерело стилю для КП, звітів, ТЗ, регламентів і дашбордів.
   Живий глосарій із правилами і зразками:
   https://documents.fortunatos.io/style/glossary/

   Підключення в новому документі або у воркері звіту:
     <link rel="stylesheet" href="https://documents.fortunatos.io/fortunatos.css">
   Файл публічний (перелік PUBLIC_FILES у functions/_middleware.js), тому
   відкривається без токена і не ламає сторінку клієнту, який зайшов по ключу.

   Далі в документі йде тільки його власний CSS: компоненти, яких тут немає.
   Токени НЕ перевизначати локально: колір порога або радіус картки, що
   розійшовся між сторінками, це розходження стилю, а не налаштування сторінки.

   Правила, зашиті в цей файл і обовʼязкові для всього, що зверху:
     - жодного text-transform:uppercase і жодного letter-spacing понад .02em;
     - пороги означають одне й те саме скрізь: зелений пройшов барʼєр,
       жовтий пробитий але окупається, червоний пробитий;
     - радіус картки 14px, рамка 1px, тінь тільки там, де блок справді
       піднятий над сторінкою.
   ========================================================================= */

/* --- токени ------------------------------------------------------------- */

:root{
  /* поверхні і чорнило */
  --paper:#ffffff; --paper2:#f7f7fb; --paper3:#f1f1f7;
  --ink:#15161b; --ink2:#3d404b; --muted:#73768a; --faint:#9a9db0;
  --line:#e6e7ef; --line2:#d7d9e6;

  /* акцент агентства */
  --core:#d63a2b; --core-soft:#fdeeec; --core-ink:#a52a1d;

  /* пороги: один сенс на всіх сторінках.
     ok   пройшов барʼєр
     warn пробитий, але окупається
     stop пробитий */
  --ok:#0f9d58;   --ok-soft:#e7f6ee;   --ok-ink:#0b7a44;
  --warn:#c9820a; --warn-soft:#fbf2dd; --warn-ink:#94600a;
  --stop:#d13438; --stop-soft:#fdecec; --stop-ink:#b0282c;
  /* синонім для дашбордів, які історично звуть червоний порог --err.
     Нові сторінки беруть --stop; аліас лишається, поки старі не переїхали. */
  --err:var(--stop); --err-soft:var(--stop-soft);

  /* канали: колір закріплений за каналом, а не за документом */
  --meta:#1877f2;   --meta-soft:#eaf3ff;
  --google:#1a8c3e; --google-soft:#e8f6ee;
  --ga4:#e0700a;    --ga4-soft:#fdf1e3;

  /* геометрія */
  --r-card:14px; --r-box:12px; --r-sm:7px; --r-pill:999px;
  --frame:1380px;      /* каркас текстового документа: меню + колонка */
  --frame-wide:1720px; /* каркас сторінки з даними: той самий, тільки колонка ширша */
  --maxw:920px;        /* текстовий документ */
  --maxw-wide:1380px;  /* щільні таблиці дашборда */
  --shadow-card:0 1px 2px rgba(21,22,27,.04),0 1px 8px rgba(21,22,27,.04);

  /* шрифти */
  --font:Inter,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}

/* --- основа ------------------------------------------------------------- */

*{box-sizing:border-box}
/* місце під смугу прокрутки резервується завжди: інакше сторінка без неї
   ширша на 15px, і меню стоїть на 8px лівіше, ніж на сусідній сторінці */
html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font);font-size:15.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--core);text-decoration:none}
code,pre,.mono{font-family:var(--mono)}
:focus-visible{outline:2px solid var(--core);outline-offset:2px}
[hidden]{display:none!important}
h1,h2,h3{text-wrap:balance}
p{margin:11px 0}
ul,ol{margin:11px 0;padding-left:22px}
li{margin:5px 0}
strong{font-weight:600;color:var(--ink)}
hr{border:none;border-top:1px solid var(--line);margin:28px 0}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* --- каркас сторінки: бічне меню і колонка ------------------------------ */

/* Каркас однаковий у всіх документів: 280px меню + колонка тексту, разом var(--frame).
   Локально .shell і .inner НЕ перевизначати: саме через це документи розʼїхались
   по ширині (16 сторінок 1380, спільний файл 1720, глосарій свій inner). */
/* Каркас завжди відцентрований, відступ від меню до колонки завжди 40px.
   Різниця тільки в ширині: текстовий документ 1380, сторінка з даними 1720.
   Колонка притиснута до меню (margin:0, не auto), інакше на текстовій сторінці
   відступ був би 90px, а на широкій 40px. */
.shell{display:grid;grid-template-columns:280px minmax(0,1fr);max-width:var(--frame);margin:0 auto}
.shell.wide{max-width:var(--frame-wide)}
aside{position:sticky;top:0;height:100vh;overflow-y:auto;border-right:1px solid var(--line);
  padding:30px 22px 60px;background:linear-gradient(180deg,#fff,#fffafa)}
main{padding:0 0 120px;min-width:0}
/* Колонка притиснута до меню, а не відцентрована в тому, що лишилось:
   інакше відступ від меню до тексту стрибав би між звичайним документом
   і широким режимом. Одне меню, один відступ, далі колонка як завгодно широка. */
.inner{max-width:var(--maxw);margin:0;padding:0 40px}
/* у широкому режимі колонка заповнює каркас: стелю задає сам каркас */
.shell.wide .inner{max-width:none}

/* мобільна шапка: знак, назва документа і зміст у випадайці.
   На десктопі схована, показується разом зі зникненням бічного меню. */
.topbar{display:none}
.brand-mark{width:30px;height:30px;flex:none;display:block}
@media(max-width:1000px){
  .topbar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:10;
    background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);padding:10px 20px}
  .topbar .who{min-width:0;flex:1;line-height:1.2}
  .topbar .who b{display:block;font-size:14px}
  .topbar .who span{display:block;font-size:11.5px;color:var(--muted);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tmenu summary{list-style:none;cursor:pointer;font-size:13px;font-weight:600;color:var(--core);
    border:1px solid var(--line2);border-radius:var(--r-sm);padding:6px 12px;background:var(--paper)}
  .tmenu summary::-webkit-details-marker{display:none}
  .tmenu nav{position:absolute;left:0;right:0;top:100%;background:var(--paper);
    border-bottom:1px solid var(--line);max-height:70vh;overflow-y:auto;padding:4px 20px 16px;
    box-shadow:0 18px 30px -18px rgba(21,22,27,.25)}
  .tmenu .toc{margin-top:0}
}

.brandmark{display:flex;align-items:center;gap:11px;margin-bottom:6px}
.brandmark img.logomark{width:34px;height:34px;border-radius:9px;flex:none}
.brandmark b{font-weight:700;font-size:16px;letter-spacing:-.01em}
.brandmark span{display:block;font-size:11px;color:var(--muted)}
.brand-logo{display:block;width:100%;max-width:226px;height:auto}

/* картка проєкту під логотипом */
.proj{margin:20px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-box);background:var(--paper2)}
.proj .k{font-size:11.5px;font-weight:600;color:var(--faint)}
.proj b{display:block;font-size:14px;margin-top:2px}
.proj span{display:block;font-size:12px;color:var(--muted);line-height:1.4;margin-top:2px;overflow-wrap:anywhere}

/* зміст */
.toc{margin-top:22px}
.toc .part{font-size:12px;font-weight:600;color:var(--faint);margin:20px 0 8px}
/* активний пункт це та сама лінійка 2px, що й у колауті: без заливки і без
   скруглення зліва, щоб лінія була прямою. Заливка лишається тільки на hover. */
.toc a{display:block;color:var(--ink2);font-size:13px;padding:5px 10px;border-radius:0 var(--r-sm) var(--r-sm) 0;
  border-inline-start:2px solid transparent;line-height:1.3}
.toc a:hover{background:var(--paper3);color:var(--ink)}
.toc a.active,.toc a.pill-active{background:none;color:var(--core);border-inline-start-color:var(--core);font-weight:500}
.toc .num{color:var(--faint);font-size:11px;margin-right:7px}

/* --- шапка документа ---------------------------------------------------- */

.mast{padding:52px 0 22px}
.eyebrow{font-size:13px;font-weight:600;color:var(--core);margin-bottom:14px}
h1.title{font-weight:700;font-size:clamp(30px,4vw,46px);line-height:1.06;letter-spacing:-.025em;margin:0 0 14px}
h1.title em{font-style:normal;color:var(--core)}
.lede{font-size:17px;color:var(--ink2);max-width:72ch;margin:0 0 22px}
.metarow{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;color:var(--muted);
  padding-top:18px;border-top:1px solid var(--line)}
.metarow b{color:var(--ink);font-weight:600}

/* бейджі перевірки: чим саме звірено документ */
.verify{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 6px}
.vbadge{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;
  padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--line2);background:var(--paper)}
.vbadge .tick{width:15px;height:15px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-size:9px;font-weight:700;background:var(--ok)}
.vbadge .tick.warn{background:var(--warn)} .vbadge .tick.stop{background:var(--stop)}

/* керування над документом: періоди, режими, вигрузка.
   Затверджено 22.09 за «Пульсом Direct»: перемикач готових вікон, поруч пара
   дат «з … по» і одна червона кнопка. Форма ходить GET-ом: посилання з датами
   має відкриватись у сусіда в чаті так само, як у автора. */
.ctl{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:14px 0 0}
.ctl-note{font-size:12.5px;color:var(--muted);max-width:110ch;margin:10px 0 0;line-height:1.5}
.ctl-note b{color:var(--ink2)}

/* перемикач готових вікон: 7 / 14 / 30 днів. Активне вікно на мʼякому акценті,
   решта білі з роздільником. Один активний елемент, коли вибрані свої дати,
   активного немає (вікно живе в полях). */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--paper)}
.segb{padding:7px 14px;font:500 13px/1 var(--font);color:var(--ink2);border-right:1px solid var(--line);
  background:none;cursor:pointer;text-decoration:none;white-space:nowrap}
.segb:last-child{border-right:0}
/* .segb на <button>: браузерна рамка кнопки лишалась з трьох боків і давала
   опуклий «віндовий» вигляд. Рамку лишаємо тільки роздільником праворуч. */
button.segb{border:0;border-right:1px solid var(--line);margin:0;font:500 13px/1 var(--font)}
button.segb:last-child{border-right:0}
.segb:hover{background:var(--paper2)}
.segb.on,.segb[aria-pressed=true]{background:var(--core-soft);color:var(--core);font-weight:600}

/* свої дати: «з [дата] по [дата] [Показати]». Підписи дрібні і сірі, поля
   з тією самою рамкою, що й перемикач; кнопка одна і завжди акцентна. */
.dates{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.dates label{display:inline-flex;align-items:center;gap:6px}
.dates input[type=date]{font:inherit;font-size:13px;padding:6px 8px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--paper);color:var(--ink);font-variant-numeric:tabular-nums}
.dates input[type=date]:focus{border-color:var(--line2)}
.btn,.dates button{display:inline-flex;align-items:center;gap:6px;font:500 12.5px/1 var(--font);padding:8px 13px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);color:var(--ink2);cursor:pointer;
  text-decoration:none;white-space:nowrap}
.btn:hover,.dates button:hover{background:var(--paper2)}
.btn.core,.dates button:not(.btn){background:var(--core);border-color:var(--core);color:#fff}
.btn.core:hover,.dates button:not(.btn):hover{filter:brightness(.95);background:var(--core)}

/* --- частини і розділи -------------------------------------------------- */

section{padding:12px 0}
section[id],div[id]{scroll-margin-top:16px}

/* Розділювач частини: тонка лінія --line. Товста чорна (2px --ink) прибрана 21.09:
   вона важча за все інше на сторінці й читається як обрив, а не як межа розділу.
   .soft лишається псевдонімом, щоб стара розмітка не ламалась. */
.part-head{margin:40px 0 6px;padding-top:22px;border-top:1px solid var(--line)}
.part-head.soft{border-top:1px solid var(--line);margin-top:40px;padding-top:22px}
.part-head .k{display:inline-block;font:600 12px/1 var(--mono);color:var(--core);
  background:var(--core-soft);padding:5px 9px;border-radius:var(--r-sm)}
.part-head h2{font-weight:700;font-size:27px;letter-spacing:-.02em;margin:8px 0 4px}
.part-head p{color:var(--muted);margin:0;font-size:15px;overflow-wrap:anywhere}

/* маркер розділу: пігулка §N у моно, поруч заголовок звичайним регістром */
h3,h3.st{font-weight:600;font-size:20px;letter-spacing:-.015em;margin:34px 0 12px;
  scroll-margin-top:20px;display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;line-height:1.3}
h3 .sec{align-self:center;font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--core);
  background:var(--core-soft);padding:2px 9px;border-radius:6px;flex:none}
h3 .badge{align-self:center;font-size:11.5px}
h4{font-weight:600;font-size:15.5px;margin:22px 0 7px}

/* --- картки ------------------------------------------------------------- */

.card{border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);
  padding:18px 20px;box-shadow:var(--shadow-card);min-width:0}
.card.accent{background:linear-gradient(160deg,#fdf4f2 0%,var(--paper) 58%)}
.card .k{font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:8px}
/* .card-warn був карткою з жовтою заливкою: суперечить §7 (колаут без заливки).
   З 22.09 це псевдонім .call.warn, розмітка старих сторінок не ламається. */
.card-warn{border:0;border-inline-start:2px solid var(--warn-ink);border-radius:0;background:none;box-shadow:none;
  padding:.1em 0 .1em 1.15em;margin:1.45em 0;font-size:14px;color:var(--ink2)}
.card-warn b{color:var(--warn-ink)}
.caption{font-size:12px;color:var(--muted);margin-bottom:14px}
.sub{font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.5}

/* плитки показників: {stats N} */
.stats{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:10px;margin:18px 0}
.stat{border:1px solid var(--line);border-radius:var(--r-card);padding:14px 16px;
  background:radial-gradient(120% 140% at 0% 0%,#fffafa,#fff)}
.stat .v{font-family:var(--mono);font-weight:700;font-size:23px;letter-spacing:-.02em;
  line-height:1.15;font-variant-numeric:tabular-nums}
.stat .l{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.35}
.stat .n{font-size:11.5px;color:var(--ink2);margin-top:6px;padding-top:6px;
  border-top:1px dashed var(--line2);line-height:1.35}
.stat .n.up{color:var(--ok)} .stat .n.down{color:var(--stop)}
.stat.accent{border-color:var(--core);background:var(--core-soft)}
.stat.accent .v{color:var(--core)}

/* --- плашки, чипи, бейджі ----------------------------------------------- */

/* плашка стану: у тексті і в таблицях */
.pill{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 9px;
  border-radius:var(--r-pill);line-height:1.45;white-space:nowrap;border:0}
.p-ok{color:var(--ok-ink);background:var(--ok-soft)}
.p-warn{color:var(--warn-ink);background:var(--warn-soft)}
.p-stop{color:var(--stop-ink);background:var(--stop-soft)}
.p-core{color:var(--core);background:var(--core-soft)}
.p-mute{color:var(--muted);background:var(--paper3)}

/* чип каналу: колір закріплений за каналом */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  padding:3px 10px;border-radius:var(--r-pill);vertical-align:middle}
.c-meta{color:var(--meta);background:var(--meta-soft)}
.c-google{color:var(--google);background:var(--google-soft)}
.c-ga4{color:var(--ga4);background:var(--ga4-soft)}
.c-core{color:var(--core);background:var(--core-soft)}
.c-test{color:var(--warn-ink);background:var(--warn-soft)}

/* бейдж якості даних: звідки взявся рядок, наскільки точний збіг */
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--r-pill);
  font-size:12px;font-weight:600;white-space:nowrap}
.badge-ok{color:var(--ok);background:var(--ok-soft)}
.badge-warn{color:var(--warn);background:var(--warn-soft)}
.badge-err{color:var(--stop);background:var(--stop-soft)}
.badge-core{color:var(--core);background:var(--core-soft)}
.badge-muted{color:var(--muted);background:var(--paper3)}

/* плашка розриву: число з напрямком, поріг ±3 пункти.
   .gap-over  витрат більше, ніж віддачі (переплата)
   .gap-under сегмент дає більше, ніж коштує
   Підпис завжди зі словом: «+3 витрат», не «+3» і не стрілка. */
.pillg{display:inline-block;font:600 11px/1 var(--mono);padding:4px 7px;
  border-radius:var(--r-pill);color:var(--muted);background:var(--paper2)}
.pillg.gap-over{color:var(--stop);background:var(--stop-soft)}
.pillg.gap-under{color:var(--ok);background:var(--ok-soft)}

/* підпис над таблицею або кодом */
.tlabel{display:inline-block;font-size:12px;font-weight:600;color:var(--muted);
  margin:14px 0 -6px;padding:3px 9px;background:var(--paper3);border-radius:6px}
.tlabel.fill{color:var(--core);background:var(--core-soft)}

/* --- таблиці ------------------------------------------------------------ */

/* Еталон таблиці з 22.09 це «Пульс Direct» (vsklo/crosschannel?mode=direct):
   таблиця лежить у картці .tw, заголовок колонки дрібний і сірий, числа моно
   праворуч, назва з ID в одному рядку, рівні дерева відступом, частка смужкою
   під числом. Старий .tscroll лишається для таблиць без картки. */
.tscroll,.tbl-wrap{overflow-x:auto;margin:15px 0}
.tscroll .tbl{margin:0}
/* картка під таблицю: рамка, радіус картки, тінь, горизонтальний скрол усередині */
.tw{overflow-x:auto;margin:15px 0;border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--paper);box-shadow:var(--shadow-card)}
.tw .tbl{margin:0;border:0;border-radius:0}
.tbl{width:100%;border-collapse:collapse;margin:15px 0;font-size:13px;
  border:1px solid var(--line);border-radius:var(--r-box);overflow:hidden}
.tbl th,.tbl td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
/* заголовок колонки звичайним регістром: без uppercase і без розрядки; сірий і
   дрібний, щоб не сперечатись із числами */
.tbl th{background:var(--paper2);font:600 11.5px/1.3 var(--font);color:var(--muted);padding:11px 12px;white-space:nowrap}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr:hover td{background:var(--paper3)}
/* сортування: заголовок клікабельний, стрілка тільки в активній колонці */
.tbl th.sort,.tbl th[data-k]{cursor:pointer;user-select:none}
.tbl th.sort:hover,.tbl th[data-k]:hover{color:var(--ink2)}
.tbl th[data-dir]::after{content:" \2193";color:var(--core)}
.tbl th[data-dir=asc]::after{content:" \2191";color:var(--core)}
/* числа: моноширинні, вирівняні вправо, нерозривні.
   word-break:normal обовʼязковий: інакше розряд рветься як «2 0 20». */
.tbl td.num,.tbl th.num,.tbl td.n,.tbl th.n{text-align:right;white-space:nowrap;font-family:var(--mono);
  font-variant-numeric:tabular-nums;word-break:normal;font-size:12.5px}
.tbl td.mono,.tbl td .mono{font-family:var(--mono);font-size:12px;color:var(--ink2);word-break:normal}
/* назва обʼєкта: у вузькій колонці документа ID другим рядком (small.sub),
   у широкій таблиці дашборда ID у тому самому рядку сірим моно (.nid) */
.tbl small.sub{display:block;font-family:var(--mono);font-size:10.5px;color:var(--faint);
  margin-top:2px;font-weight:400;overflow-wrap:anywhere}
.nid{font-family:var(--mono);font-size:10.5px;color:var(--faint);font-weight:400;
  display:inline-block;white-space:nowrap;margin-left:8px}
.nid:hover{color:var(--core)}
/* лічильник у назві групи: «кампанія · 4 групи» */
.cnt{display:inline-block;font:500 10.5px/1 var(--font);color:var(--muted);background:var(--paper2);
  border:1px solid var(--line);padding:3px 7px;border-radius:var(--r-pill);margin-left:8px;vertical-align:1px;white-space:nowrap}
/* дерево: кампанія > група > оголошення. Рівень задається відступом назви,
   а не кольором; верхній рівень трохи темнішим фоном і жирною назвою */
.tbl tr.lvl0>td{background:#fbfbfd}
.tbl tr.lvl0>td.nm{font-weight:600;color:var(--ink);font-size:13.5px}
.tbl tr.lvl1>td.nm{padding-left:34px}
.tbl tr.lvl2>td.nm{padding-left:62px;color:var(--muted)}
.tbl tr.lvl2>td{color:var(--muted);font-size:12px}
.tbl tr.row-x{cursor:pointer}
.tbl tr.row-x:hover>td{background:var(--paper3)}
.tw-x{display:inline-block;width:12px;color:var(--faint);font-size:9px;flex:none;margin-right:4px;
  transition:transform .15s,color .15s}
.tw-x.open{transform:rotate(90deg);color:var(--core)}
/* частка під числом: смужка 4px, сіра це витрати, акцентна це обсяг */
.sh{display:block;height:4px;border-radius:3px;background:#eeeef4;margin-top:5px;overflow:hidden;min-width:56px}
.sh i{display:block;height:100%;border-radius:3px;background:var(--core)}
.sh i.sp{background:#c2c4d0}
/* щільний варіант для довгих зрізів: області, дні.
   Нерозривними лишаються тільки числові колонки: назва переноситься завжди,
   інакше таблиця з назвами кампаній їде вшир на три екрани. */
.tbl.compact{font-size:11.5px}
.tbl.compact th{padding:8px 6px;font-size:11px}
.tbl.compact td{padding:7px 6px}
/* роздільник групи колонок */
.gsep{border-left:2px solid var(--line2)!important}
.g-head{color:var(--ink2);background:var(--paper3);text-align:center}

/* заливка порогів у комірці. Поруч із таблицею завжди легенда з числами:
   колір ніколи не читається на око. */
td.z-good{background:var(--ok-soft);color:var(--ok);font-weight:600}
td.z-good-s{background:var(--ok-soft);color:var(--ok);font-weight:700;box-shadow:inset 2px 0 0 var(--ok)}
td.z-warn{background:var(--warn-soft);color:var(--warn-ink);font-weight:600}
td.z-bad{background:var(--stop-soft);color:var(--stop);font-weight:600}
td.z-bad-s{background:var(--stop-soft);color:var(--stop);font-weight:700;box-shadow:inset 2px 0 0 var(--stop)}
td.z-none{color:var(--faint)}
.tbl tr:hover td.z-good,.tbl tr:hover td.z-good-s{background:var(--ok-soft)}
.tbl tr:hover td.z-warn{background:var(--warn-soft)}
.tbl tr:hover td.z-bad,.tbl tr:hover td.z-bad-s{background:var(--stop-soft)}

.legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.legend-item b{color:var(--ink2)}

/* --- колаути і кроки ---------------------------------------------------- */

.call{margin:1.45em 0;padding:.1em 0 .1em 1.15em;border:0;border-inline-start:2px solid var(--c,var(--core));border-radius:0;background:none;font-size:14px;color:var(--ink2,inherit)}
.call .lbl{font-weight:600;font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--c,var(--core));margin-bottom:.3em}
.call p{margin:.3em 0}
.call p:first-of-type{margin-top:0}
.call p:last-child{margin-bottom:0}
.call ul{margin:.45em 0 .1em;padding-left:1.25em}
.call li{margin:.2em 0}
.call.ok{--c:var(--ok)}
.call.warn{--c:var(--warn-ink)}
.call.stop{--c:var(--stop)}
.call.key,.call.dev{--c:var(--core)}
.call.quiet{--c:var(--line2)}
.call.quiet .lbl{color:var(--muted)}

.steps{counter-reset:s;list-style:none;padding:0;margin:18px 0}
.steps>li{counter-increment:s;position:relative;padding:14px 16px 14px 54px;
  border:1px solid var(--line);border-radius:var(--r-card);margin:10px 0;background:var(--paper)}
.steps>li:before{content:counter(s);position:absolute;left:16px;top:14px;width:24px;height:24px;
  border-radius:50%;background:var(--core);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center}
.steps>li b{display:block;margin-bottom:2px}

/* --- код ---------------------------------------------------------------- */

pre{background:#0f1117;color:#e8eaf2;border-radius:var(--r-box);padding:16px 18px;overflow-x:auto;
  font-size:12.5px;line-height:1.6;margin:10px 0 16px;border:1px solid #20232e;white-space:pre}
pre .c{color:#6b7280;font-style:italic}
pre .k{color:#ffd43b;font-weight:700}
:not(pre)>code{background:var(--paper3);color:var(--core-ink);padding:1.5px 6px;
  border-radius:5px;font-size:12.5px;overflow-wrap:anywhere}
/* реальне значення, підставлене на збірці */
.tok{background:#fff3bf;color:#664d00;font-weight:700;padding:1px 5px;border-radius:4px;
  font-family:var(--mono);font-size:12px;overflow-wrap:anywhere}

/* --- смуги часток ------------------------------------------------------- */

/* Дві величини в різних одиницях: кольорова смуга це обсяг, сіра це витрати.
   Місцями не міняти, інакше сторінки перестають читатись однаково. */
.hb{display:flex;flex-direction:column;gap:9px;margin:6px 0 0}
.hb-r{display:grid;grid-template-columns:110px minmax(0,1fr) 92px 62px;gap:10px;align-items:center;padding:4px 0}
.hb-l{font-size:12px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb-t{display:flex;flex-direction:column;gap:3px}
.hb-t i{display:block;height:9px;border-radius:5px;background:var(--core)}
.hb-t i.spend{background:#d9dae4}
.hb-v{font-family:var(--mono);font-size:11.5px;color:var(--muted);text-align:right;white-space:nowrap}
.hb-v b{color:var(--ink);font-weight:600}
.blegend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:11.5px;color:var(--muted);margin:0 0 8px}
.blegend .sw{display:inline-block;width:18px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
@media(max-width:700px){.hb-r{grid-template-columns:90px minmax(0,1fr) 72px}.hb-r .hb-v:last-child{display:none}}

/* --- статус даних ------------------------------------------------------- */

/* Каже читачеві, наскільки цифрам можна вірити просто зараз.
   Обовʼязковий на кожній сторінці, де цифри з кабінетів, CRM або будь-якого
   зовнішнього джерела. Дві форми: рядок .fresh (одне джерело, стоїть у шапці
   під керуванням) і блок .loads (кілька джерел, кожне зі своєю крапкою).
   Неповнота називається наслідком, а не фактом.

   Стан оновлення, слово плюс крапка, один словник на всі сторінки:
     активно      .ok   зелена   оновлюється за розкладом, дані повні по дату
     оновлюється  .run  синя     завантаження йде просто зараз
     збій         .bad  жовта    оновлення не пройшло, дані стоять на останній вдалій даті
     не активно   .off  сіра     оновлення вимкнене або джерело відключене
     зріз         .off  сіра     статичний документ: цифри взяті один раз на дату */
.fresh{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:16px;
  padding:11px 15px;border:1px solid var(--line);border-radius:var(--r-box);background:var(--paper2);
  font-size:12px;color:var(--muted)}
.fresh b{color:var(--ink2);font-weight:600;font-family:var(--mono);font-size:11.5px;margin-left:5px}
.fresh .pill{margin-left:5px}
.loads{margin-top:16px;display:flex;flex-direction:column;gap:10px;font-size:13px;color:var(--ink2);
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-box);background:var(--paper2)}
.ld-row{display:grid;grid-template-columns:86px minmax(0,1fr);gap:4px 12px;align-items:start}
.ld-row .pill{justify-self:start;margin-top:1px}
.ld-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.ld-accs{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:4px 40px}
.ld-acc{line-height:1.45}
.ld-acc b{color:var(--ink);font-weight:600}
.ld-dot,.fdot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:8px;
  vertical-align:1px;background:var(--faint)}
.fdot{margin-right:3px}
.ld-dot.ok,.fdot.ok{background:var(--ok)}
.ld-dot.bad,.fdot.bad{background:var(--warn)}
.ld-dot.run,.fdot.run{background:#3b82f6}
.ld-dot.off,.fdot.off{background:var(--faint)}
.ld-bad,.ld-bad b{color:var(--warn-ink)}
.ld-warn{color:var(--warn-ink);font-size:12.5px;line-height:1.45}
@media(max-width:1100px){.ld-accs{grid-template-columns:1fr}}

/* --- підвал і адаптив --------------------------------------------------- */

footer{max-width:var(--maxw);margin:0;padding:28px 40px 60px;color:var(--faint);
  font-size:13px;border-top:1px solid var(--line)}

@media(max-width:1000px){
  .shell{grid-template-columns:1fr}
  aside{display:none}
  .inner,footer{padding-left:20px;padding-right:20px}
  .stats{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){.stats{grid-template-columns:1fr}}

/* --- друк --------------------------------------------------------------- */

/* Кожен документ має віддруковуватись у PDF через Ctrl+P без правок. */
@page{margin:14mm}
@media print{
  .shell{display:block;max-width:none}
  aside,.topbar{display:none}
  body{font-size:12px;line-height:1.5}
  .inner,footer{max-width:none;padding:0}
  .mast{padding:10px 0 16px}
  h1.title{font-size:30px}
  .lede{font-size:14px}
  section{padding:6px 0}
  .part-head{margin:26px 0 4px;padding-top:14px;break-after:avoid}
  h3,h4{break-after:avoid}
  .call,.tbl,.stat,.card,.steps>li,pre,.loads,.fresh,.hb-r{break-inside:avoid}
  .tscroll,.tbl-wrap,.tw{overflow:visible}
  .tw{box-shadow:none}
  .ctl{display:none}
  /* темний блок коду зʼїдає тонер і не читається */
  pre{white-space:pre-wrap;background:#f4f4f8;color:var(--ink);border:1px solid var(--line2)}
  a{color:inherit}
  .tbl tr:hover td{background:transparent}
}