/* Мостик Техномикса, экран CMO - боевой (план 33, раздел 2.4). Основа - стили прототипа, принятого Максимом 30.09
   (prototype/screen.css); дизайн-система - prototype/дизайн-система.md, законы вёрстки - ~/.claude/WEB-DESIGN.md,
   раздел 7. Отличия от прототипа: свои файлы шрифта, вкладки двух ролей, вход, экраны Деньги, Журнал, Здоровье.

   Вид снят числами с референса Максима 30.09 (Tasker, Dribbble; кадр 1912 px = макет 1440, масштаб 1,328):
   тёмная боковая панель и шапка, поле контента светлее, карточки темнее поля с ободком 1 px, Inter,
   синий акцент, зелёный - «хорошо». Одна тёмная тема по решению, светлая - переключателем «Оформление»
   (атрибут data-look на html, выбор хранится в учётке), системная тема не переключает: референс тёмный.

   Названные исключения из законов раздела 7 (экран приложения, а не лендинг):
   - ритм между блоками 32 / 40 / 48, а не планка 112-128 (7.2): блок - карточка со своей заливкой и ободком,
     граница видна сама; прецедент - прототип и Авито-хаб того же клиента;
   - поле карточки 16 на телефоне, 24 с 768 (7.5 просит от 24): у референса 16, на телефоне ширина нужнее;
   - кегли 12 / 14 / 16 / 24 / 30 - шкала референса; 12 - подписи и шапки таблиц, не текст;
   - числа в таблицах и суммы в списках выключены вправо - так их сравнивают (dataviz);
   - нижние вкладки делят ширину на число вкладок роли - панель телефона, а не блок страницы (7.1, 7.14). */

/* Inter - файлы сайта Техномикса (клиенты/Техномикс/сайт/fonts): переменный 100-900, наборы и unicode-range -
   из сайт/local-fonts.php, как у Google (WEB-DESIGN 2.51). С чужих серверов шрифт не грузится (152-ФЗ) */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/inter-cyrillic-ext.woff2) format("woff2");
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/inter-cyrillic.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/inter-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,
                U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/inter-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,
                U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  color-scheme:dark;
  /* поверхности - замер референса */
  --canvas:#1A1C1E;      /* поле контента */
  --surface:#111315;     /* боковая панель, шапка, карточки, нижняя панель */
  --raised:#1D2125;      /* активный пункт, кнопки второго ряда, выбранный вариант */
  --hover:#262A2D;       /* наведение */
  --chip:#282C2D;        /* счётчик у заголовка */
  --rim:#25272A;         /* ободок карточки и полей */
  --line:#202326;        /* строки внутри карточки */
  --groove-a:#000000;    /* разделитель панелей - тёмная черта */
  --groove-b:#26282A;    /* и светлая за ней */
  /* текст: 17,1 / 7,9 / 5,6 к карточке */
  --ink:#F4F5F6;
  --ink-2:#A5A9AB;
  --ink-3:#8A8D90;
  /* акцент и данные */
  --accent:#0A6CF4;      /* заливка: белый текст 4,7 */
  --on-accent:#FFFFFF;
  --link:#4C93F7;        /* синий текст и линия данных: 6,0 к карточке */
  --data:#4C93F7;
  --data-2:#2B5DA8;
  --data-wash:rgba(76,147,247,.12);
  --plan:#666B72;        /* линия плана: 3,5 к карточке */
  /* статусы - всегда со значком и словом; в отчёте подключений зелёным показан и работающий источник */
  --good:#48BB8E;
  --warn:#F5A524;
  --warn-ink:#F5A524;
  --bad:#F0686B;
  --flat:#8A8D90;
  --on-status:#111315;
  --on-warn:#111315;
  --pop:0 12px 32px rgba(0,0,0,.45);

  /* шрифт: Inter - как у референса и в фирменном стиле ДЕВЯТЬ */
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --t-xs:12px;   /* подписи, шапки таблиц, метки */
  --t-s:14px;    /* текст карточек и таблиц, меню */
  --t-m:16px;    /* заголовки блоков, поля ввода */
  --t-xl:24px;   /* числа плиток */
  --t-h1:24px;   /* заголовок экрана: 24, с 1024 - 30 */

  /* сетка 4 / 8 / 12 и ритм */
  --pad:16px;
  --cols:4;
  --gap:16px;
  --rhythm:32px;       /* между блоками */
  --head-gap:12px;     /* заголовок блока → карточка */
  --card-pad:16px;
  --side:240px;
  --side-pad:24px;     /* поле боковой панели: у референса 24 */
  --inset:2px;         /* рельс переключателя - деталь компонента, не отступ между элементами */
  --groove:2px;        /* ширина канавки-разделителя: две черты по 1 px */
  --top-h:88px;
  --nav-h:64px;

  /* шкала отступов */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:40px; --s8:48px; --s9:64px;

  /* радиусы - три ступени: счётчик и дорожка, карточки и поля с кнопками, пилюля (у референса кнопки 6, карточки 8) */
  --r-xs:4px; --r-m:8px; --r-pill:999px;
}
html[data-look="light"]{
  color-scheme:light;
  --canvas:#F3F4F6; --surface:#FFFFFF; --raised:#EEF0F3; --hover:#E5E8EC; --chip:#E6E8EC;
  --rim:#E1E4E8; --line:#ECEEF1; --groove-a:#E1E4E8; --groove-b:#FFFFFF;
  --ink:#111315; --ink-2:#4A4F55; --ink-3:#656A70;
  --accent:#0A6CF4; --on-accent:#FFFFFF; --link:#0A5FD8;
  --data:#0A6CF4; --data-2:#8DB8F5; --data-wash:rgba(10,108,244,.10); --plan:#868B93;
  --good:#17734C; --warn:#B7791F; --warn-ink:#8A5300; --bad:#C42B2B; --flat:#656A70;
  --on-status:#FFFFFF; --on-warn:#111315;
  --pop:0 12px 32px rgba(17,19,21,.14);
}
@media (min-width:768px){ :root{--pad:24px;--cols:8;--gap:24px;--rhythm:40px;--card-pad:24px} }
@media (min-width:1024px){ :root{--pad:32px;--cols:12;--rhythm:48px;--head-gap:16px;--t-h1:30px} }

/* ---------------------------------------------------------------- основа */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--canvas)}
body{margin:0;background:var(--canvas);color:var(--ink);font:400 var(--t-s)/20px var(--font);
     -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
[hidden]{display:none !important}
a{color:inherit}
:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:var(--r-xs)}
h1,h2,h3,p,ul,dl,dd{margin:0}
form{margin:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ico{display:block;flex:none;width:16px;height:16px}
.num{font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- оболочка: телефон и планшет */
.main{min-width:0;padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom, 0px))}

/* нижняя панель вкладок; с 1024 - боковая */
.side{position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--surface);
      box-shadow:inset 0 1px 0 var(--groove-a),inset 0 2px 0 var(--groove-b);
      padding-bottom:env(safe-area-inset-bottom, 0px)}
.side__brand,.side__group,.side__foot{display:none}
/* число вкладок - у роли своё: 5 у Максима, 4 у гендиректора (атрибут style у панели) */
.tabs{display:grid;grid-template-columns:repeat(var(--tabs,5),minmax(0,1fr));height:var(--nav-h)}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s1);min-height:44px;
     color:var(--ink-3);text-decoration:none;font-size:var(--t-xs);line-height:16px;font-weight:500}
.ico--tab{width:56px;height:28px;padding-inline:var(--s4);border-radius:var(--r-pill)}
/* логотип и имя - для панели компьютера и страницы входа */
.logo{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;border-radius:var(--r-m);
      background:var(--accent);color:var(--on-accent);font-size:var(--t-m);line-height:1;font-weight:700}
.side__name{display:flex;flex-direction:column;font-size:var(--t-m);line-height:20px;font-weight:700}
.side__name span{font-size:var(--t-xs);line-height:16px;font-weight:500;color:var(--ink-3)}

/* активная вкладка: экран-якорь выбран - его вкладка (или вкладка родителя на телефоне) выделена */
.app:not(:has(.screen:target)) .tab[data-tab="svodka"],
.app:has(#svodka:target) .tab[data-tab="svodka"],
.app:has(#kanaly:target) .tab[data-tab="kanaly"],
.app:has(#smm:target) .tab[data-tab="smm"],
.app:has(#prodazhi:target) .tab[data-tab="prodazhi"],
.app:has(#eshche:target) .tab[data-tab="eshche"],
.app:has(#dengi:target) .tab[data-tab="dengi"]{color:var(--ink);font-weight:600}
@media (max-width:1023px){
  /* дочерние экраны живут во вкладке родителя: Учёт - в Сводке, Авито - в Каналах, Деньги Максима,
     Журнал и Здоровье - в «Ещё» (у гендиректора Деньги - своя вкладка) */
  .app:has(#uchet:target) .tab[data-tab="svodka"],
  .app:has(#avito:target) .tab[data-tab="kanaly"],
  .app[data-role="owner"]:has(#dengi:target) .tab[data-tab="eshche"],
  .app:has(#zhurnal:target) .tab[data-tab="eshche"],
  .app:has(#zdorovie:target) .tab[data-tab="eshche"]{color:var(--ink);font-weight:600}
  .app:not(:has(.screen:target)) .tab[data-tab="svodka"] .ico--tab,
  .app:has(#svodka:target) .tab[data-tab="svodka"] .ico--tab,
  .app:has(#uchet:target) .tab[data-tab="svodka"] .ico--tab,
  .app:has(#kanaly:target) .tab[data-tab="kanaly"] .ico--tab,
  .app:has(#avito:target) .tab[data-tab="kanaly"] .ico--tab,
  .app:has(#smm:target) .tab[data-tab="smm"] .ico--tab,
  .app:has(#prodazhi:target) .tab[data-tab="prodazhi"] .ico--tab,
  .app:has(#eshche:target) .tab[data-tab="eshche"] .ico--tab,
  .app:has(#dengi:target) .tab[data-tab="dengi"] .ico--tab,
  .app[data-role="owner"]:has(#dengi:target) .tab[data-tab="eshche"] .ico--tab,
  .app:has(#zhurnal:target) .tab[data-tab="eshche"] .ico--tab,
  .app:has(#zdorovie:target) .tab[data-tab="eshche"] .ico--tab{background:var(--raised);color:var(--link)}
}

/* экраны: вкладка - это якорь, без скриптов */
.screen{display:none}
.screen:target{display:block}
.main:not(:has(.screen:target)) #svodka{display:block}

/* ---------------------------------------------------------------- шапка экрана */
/* Полоса цвета панели на всю ширину, под ней «канавка» - тёмная черта и светлая (замер референса) */
.top{background:var(--surface)}
.top__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:var(--s5);row-gap:var(--s3);
          padding:var(--s5) var(--pad) var(--s4);box-shadow:inset 0 -1px 0 var(--groove-b),inset 0 -2px 0 var(--groove-a)}
.top__title{flex:1 1 auto;min-width:0}
.back{display:inline-flex;align-items:center;gap:var(--s1);min-height:44px;margin-block:calc(var(--s3) * -1) var(--s1);
      color:var(--ink-2);text-decoration:none;font-size:var(--t-s);line-height:20px;font-weight:500}
.back:hover{color:var(--ink)}
h1{font-size:var(--t-h1);line-height:32px;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
.top__meta{margin-top:var(--s1);font-size:var(--t-s);line-height:20px;color:var(--ink-2)}
.top__side{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3)}
.fresh{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--t-xs);line-height:16px;color:var(--ink-2)}
.fresh .ico{color:var(--good)}
.fresh--warn .ico{color:var(--warn)}

/* полоса фильтров под шапкой - как вкладки под заголовком у референса */
.sub{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);padding:var(--s3) var(--pad) var(--s4);
     background:var(--surface)}

/* ---------------------------------------------------------------- поле контента и блоки */
.body{padding:var(--s5) var(--pad) var(--s7)}
.body > * + *{margin-top:var(--rhythm)}
/* блок: заголовок лежит на поле, под ним карточка - как колонки референса */
/* заголовок → подпись 12, заголовок → счётчик 8 (счётчик не переносится, поэтому его сдвигает своё поле, а подпись,
   ушедшая на вторую строку, встаёт ровно по краю заголовка - 7.3) */
.blk__head{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--s3);row-gap:var(--s1);margin-bottom:var(--head-gap)}
.blk__head > .count{margin-left:calc(var(--s1) * -1)}
h2{font-size:var(--t-m);line-height:24px;font-weight:600}
.count{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding-inline:var(--s2);
       border-radius:var(--r-xs);background:var(--chip);font-size:var(--t-xs);line-height:16px;font-weight:600;color:var(--ink-2);
       font-variant-numeric:tabular-nums}
.blk__meta{flex-basis:100%;font-size:var(--t-s);line-height:20px;color:var(--ink-2)}
.card{background:var(--surface);border:1px solid var(--rim);border-radius:var(--r-m);padding:var(--card-pad)}
.note{margin-top:var(--s4);font-size:var(--t-xs);line-height:16px;color:var(--ink-3);max-width:72ch}
.note a{color:var(--link);text-underline-offset:2px}
/* пустое состояние - спокойный текст карточки, а не пустая карточка (7.19: состояния - часть макета) */
.calm{font-size:var(--t-s);line-height:20px;color:var(--ink-2)}
.more-link{display:inline-flex;align-items:center;gap:var(--s1);min-height:44px;padding-inline:var(--s4);border-radius:var(--r-m);
           background:var(--raised);font-size:var(--t-s);line-height:20px;font-weight:600;text-decoration:none;color:var(--ink)}
.more-link:hover{background:var(--hover)}
button.more-link{border:0;font-family:inherit;cursor:pointer}
/* выход - не главное действие: контурная кнопка, заливка остаётся одной на полосу (7.7) */
.more-link--ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--rim)}
.more-link--ghost:hover{background:var(--raised)}
.card__act{margin-top:var(--s5)}

/* пара «вчера» + «учёт»: столбиком, с 1024 - рядом 8 + 4 */
/* у обёртки без коробки своего отступа нет - его несут оба блока (пара никогда не первая в теле экрана) */
.pair{display:contents}
.pair > .blk{margin-top:var(--rhythm)}

/* ---------------------------------------------------------------- требует решения: карточки-задачи */
.alerts{list-style:none;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5)}
/* значок висит слева от названия, пояснение и «что сделать» - по краю названия; нижняя строка - от края карточки */
.alert{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--rim);
       border-radius:var(--r-m);padding:var(--card-pad)}
.alert:has(a):hover{border-color:var(--hover)}
.alert__head{display:flex;align-items:flex-start;gap:var(--s3)}
.ico--status{width:20px;height:20px;margin-top:calc((24px - 20px) / 2)}   /* значок по первой строке названия (7.10) */
.alert--bad .ico--status{color:var(--bad)}
.alert--warn .ico--status{color:var(--warn)}
.alert--good .ico--status{color:var(--good)}
.alert__what{flex:1 1 auto;min-width:0;font-size:var(--t-m);line-height:24px;font-weight:600}
.alert__what a{text-decoration:none}
.alert__what a::after{content:"";position:absolute;inset:0;border-radius:var(--r-m)}
.alert:hover .alert__what a{text-decoration:underline;text-underline-offset:3px}
.alert__why,.alert__do{margin-top:var(--s2);padding-left:var(--s6);font-size:var(--t-s);line-height:20px;color:var(--ink-2)}
.alert__do{color:var(--ink)}
.alert__label{color:var(--ink-3)}
.alert__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);margin-top:auto;padding-top:var(--s3)}
.who{display:inline-flex;align-items:center;gap:var(--s2);min-width:0;font-size:var(--t-xs);line-height:16px;font-weight:500;
     color:var(--ink-2)}
.ava{display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;border-radius:var(--r-pill);
     background:var(--accent);color:var(--on-accent);font-size:11px;line-height:1;font-weight:700}
.alert__cost{font-size:var(--t-s);line-height:20px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- план месяца: плитки */
/* Строки плитки - подсетка ряда: подписи, значения и графики одного ряда стоят на общих линиях (7.10).
   У родителя row-gap 0 - подсетка берёт шаг родителя (журнал WEB-DESIGN 16.09); ряды разводит поле плитки.
   Ряды дышат шире колонок (7.12): между рядами 24 при самом большом зазоре внутри 12 */
.kpis{list-style:none;padding:0;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gap)}
.kpi{grid-column:span 2;grid-row:span 5;display:grid;grid-template-rows:subgrid;background:var(--surface);
     border:1px solid var(--rim);border-radius:var(--r-m);padding:var(--card-pad)}
.kpi:nth-child(n+3){margin-top:var(--s5)}
.kpi:has(a:hover){border-color:var(--hover)}
.kpi__a{grid-row:1 / -1;display:grid;grid-template-rows:subgrid;color:inherit;text-decoration:none}
.kpi__head{display:flex;flex-direction:column;justify-content:flex-end}
.kpi__label{font-size:var(--t-s);line-height:20px;font-weight:500;color:var(--ink-2)}
a.kpi__a .kpi__label::after{content:"\00a0›";color:var(--ink-3)}
a.kpi__a:hover .kpi__label{color:var(--ink)}
.kpi__value{margin-top:var(--s2);font-size:var(--t-xl);line-height:32px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.kpi__plan{margin-top:var(--s1);font-size:var(--t-xs);line-height:16px;color:var(--ink-3)}
/* буллет-график Фью: дорожка - план, сплошная полоса - факт, приглушённый хвост - прогноз, контрастная черта - где
   должны быть сегодня, серая - план (когда прогноз длиннее плана) или потолок ДРР. Черты выше дорожки на 4 с каждой
   стороны и с кольцом цвета карточки (dataviz: зазор 2 px между метками) */
.bul{position:relative;height:8px;margin-block:var(--s5) var(--s1);border-radius:var(--r-xs);background:var(--raised)}
/* плитка без плана держит место графика: ряд плиток стоит на общих линиях (7.10) */
.bul--none{visibility:hidden}
.bul__fc,.bul__fact{position:absolute;top:0;bottom:0;left:0;border-radius:var(--r-xs)}
.bul__fc{background:var(--data-2)}
.bul__fact{background:var(--data)}
.bul__pace,.bul__goal{position:absolute;top:calc(var(--s1) * -1);bottom:calc(var(--s1) * -1);width:2px;transform:translateX(-50%);
                      box-shadow:0 0 0 2px var(--surface)}
.bul__pace{background:var(--ink)}
.bul__goal{background:var(--ink-3)}

/* статус: значок и слово, цвет - только у отклонения */
.st{display:flex;align-items:flex-start;gap:var(--s2);margin-top:var(--s3);font-size:var(--t-xs);line-height:16px;font-weight:500;
    text-wrap:pretty}
.st--bad{color:var(--bad)}
.st--warn{color:var(--warn-ink)}
.st--good{color:var(--good)}
.st--flat{color:var(--ink-2)}
.st--warn .ico{color:var(--warn)}
.st--flat .ico{color:var(--flat)}

/* Отчёт об источниках: название, состояние и два коротких ответа «что» и «как». */
.source-summary{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);font-size:var(--t-s);line-height:20px;font-weight:600}
.source-summary__item{display:inline-flex;align-items:center;gap:var(--s2)}
.source-summary__item .ico{width:16px;height:16px}
.source-summary__item--connected{color:var(--good)}
.source-summary__item--failed{color:var(--bad)}
.source-summary__item--unchecked,.source-summary__item--pending{color:var(--ink-2)}
.sources{list-style:none;margin:0;padding:0}
.source{padding-block:var(--s4);border-bottom:1px solid var(--line)}
.source:first-child{padding-top:0}
.source:last-child{padding-bottom:0;border-bottom:0}
.source__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s2) var(--s4)}
.source__head h3{font-size:var(--t-m);line-height:24px;font-weight:600}
.source__status{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--t-xs);line-height:16px;font-weight:600;
                white-space:nowrap}
.source__status .ico{width:16px;height:16px}
.source__data{margin-top:var(--s2);font-size:var(--t-s);line-height:20px;color:var(--ink)}
.source__method,.source__detail{margin-top:var(--s1);font-size:var(--t-s);line-height:20px;color:var(--ink-2)}
.source--failed .source__detail{color:var(--bad)}
.source__time{margin-top:var(--s2);font-size:var(--t-xs);line-height:16px;color:var(--ink-3)}

/* ---------------------------------------------------------------- таблицы */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:var(--t-s);line-height:20px;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{padding:var(--s3) var(--s1);border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl tr > :first-child{padding-left:0}
.tbl tr > :last-child{padding-right:0}
.tbl thead th{padding-top:0;font-size:var(--t-xs);line-height:16px;font-weight:500;color:var(--ink-3);vertical-align:bottom}
.tbl .num{text-align:right;white-space:nowrap}
.tbl thead .num{white-space:normal}
.tbl tbody th{font-weight:500}
/* переход на другой экран из строки таблицы - цель 44 (2.19): карман полями, отрицательные поля гасят его в раскладке */
.tbl tbody th a{display:inline-block;padding:var(--s3) var(--s1);margin:calc(var(--s3) * -1) calc(var(--s1) * -1);
                color:var(--link);text-decoration:none}
.tbl tbody th a:hover{text-decoration:underline;text-underline-offset:3px}
.tbl tfoot th,.tbl tfoot td{font-weight:600;border-bottom:0}
/* итог маркетинга стоит сразу под его каналами, ниже - группа «Для отчёта» (Авито не результат CMO, Максим 27.09) */
.tbl .sum th,.tbl .sum td{font-weight:600}
.tbl--yday{table-layout:fixed}
/* статус в ячейке таблицы: строку держат поля ячейки; первая строка статуса (12/16) - на линии текста строки
   (14/20), сдвиг на разницу интерлиньяжей пополам (7.10) */
.tbl .st{margin-top:calc((20px - 16px) / 2)}
.dev{display:block;font-size:var(--t-xs);line-height:16px;font-weight:600}
.dev--good{color:var(--good)}
.dev--bad{color:var(--bad)}
.dev--warn{color:var(--warn-ink)}
.na{color:var(--ink-3)}

/* колонки по важности: остальное - в раскрытой строке; p-m - только на телефоне */
.p-t,.p-w{display:none}
/* --n - сколько колонок таблицы видно на телефоне: столько ячеек в строке-сетке */
.tbl--yday,.tbl--ch,.tbl--acc,.tbl--avs{--n:4}
.tbl--money,.tbl--runs{--n:3}
.tbl--health{--n:1}

/* телефон: имя строки - своей строкой, числа - под ним во всю ширину (заголовки колонок из целых слов
   в пять колонок на 311 px не помещаются) */
@media (max-width:767px){
  .tbl--stack{table-layout:auto}
  /* :not(.more) - иначе это правило весом (0,2,1) перебьёт скрытие раскрывающейся строки (7.21) */
  .tbl--stack tr:not(.more){display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));column-gap:var(--s3);
                            border-bottom:1px solid var(--line)}
  .tbl--stack tr > *{padding:0;border-bottom:0}
  .tbl--stack thead tr > :first-child{display:none}
  .tbl--stack thead th{padding-bottom:var(--s2)}
  .tbl--stack tr > [scope="row"],.tbl--stack tr > [scope="rowgroup"]{grid-column:1 / -1;padding-top:var(--s3)}
  .tbl--stack tr > td{padding-top:var(--s1);padding-bottom:var(--s3)}
  .tbl--stack .p-t,.tbl--stack .p-w{display:none}
  .tbl--stack .row > th label{min-height:36px;margin-block:calc(var(--s1) * -1) 0}
  .tbl--stack .row:has(.tgl:checked){border-bottom-color:transparent}
  .tbl--stack .row:has(.tgl:checked) + .more{display:block}
  .tbl--stack .more > td{display:block;padding-top:0;padding-bottom:var(--s4)}
  .tbl--stack tbody:last-child tr:last-child,.tbl--stack tfoot tr{border-bottom:0}
  .tbl--stack .grp > [scope="rowgroup"]{padding-top:var(--s5);padding-bottom:var(--s3)}
  /* Здоровье на телефоне: время и состояние - строками под именем источника, во всю ширину; шапка колонок -
     только для чтения с экрана (длинное состояние в половине строки сжималось до столбика) */
  .tbl--health thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tbl--health td.num{text-align:left;padding-bottom:0;font-size:var(--t-xs);line-height:16px;color:var(--ink-3)}
}

/* строка раскрывается нажатием на имя - без скриптов */
.tgl{position:absolute;width:1px;height:1px;opacity:0}
.row > th label{display:flex;align-items:center;gap:var(--s1);min-height:44px;margin-block:calc(var(--s3) * -1);cursor:pointer}
.ico--chev{color:var(--ink-3);transition:transform .15s ease-out}
.row:has(.tgl:checked) .ico--chev{transform:rotate(90deg)}
.row:has(.tgl:focus-visible) label{outline:2px solid var(--link);outline-offset:2px;border-radius:var(--r-xs)}
.row:has(.tgl:checked) > *{border-bottom-color:transparent}
.more{display:none}
.row:has(.tgl:checked) + .more{display:table-row}
.more > td{padding-top:0;padding-bottom:var(--s4);white-space:normal}
.more__text{font-size:var(--t-s);line-height:20px;color:var(--ink-2);max-width:72ch}
.more__text .more-link{margin-left:var(--s2);min-height:36px}
/* скрытые на этой ширине колонки - строкой с переносом: подпись над числом */
.kvs{display:flex;flex-wrap:wrap;column-gap:var(--s5);row-gap:var(--s3);margin-top:var(--s3)}
.kv{display:flex;flex-direction:column}
.kv dt{font-size:var(--t-xs);line-height:16px;color:var(--ink-3)}
.kv dd{font-variant-numeric:tabular-nums;white-space:nowrap}

/* группы строк: «Для отчёта» */
.grp > th,.grp > td{padding-top:var(--s5);font-weight:600}
.grp__name{display:block}
.grp__meta{display:block;font-size:var(--t-xs);line-height:16px;font-weight:400;color:var(--ink-3)}

/* ---------------------------------------------------------------- фильтры */
/* период - переключатель вариантов: выбранный на приподнятой подложке (вид референса «List / Board») */
.seg{display:inline-flex;gap:var(--inset);min-width:0;margin:0;padding:var(--inset);border:1px solid var(--rim);border-radius:var(--r-m);
     background:var(--canvas)}
.seg input{position:absolute;width:1px;height:1px;opacity:0}
@media (max-width:767px){ .seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);width:100%} }
.seg label{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding-inline:var(--s4);border-radius:var(--r-xs);
           color:var(--ink-3);font-size:var(--t-s);line-height:20px;font-weight:500;cursor:pointer;white-space:nowrap}
.seg label:hover{color:var(--ink)}
.seg input:checked + label{background:var(--raised);color:var(--ink);font-weight:600;box-shadow:0 0 0 1px var(--rim)}
.seg input:focus-visible + label{outline:2px solid var(--link);outline-offset:1px}
/* магазин - одно поле вместо пяти кнопок; кегль 16 на телефоне - иначе iOS увеличивает страницу (2.11) */
.sel{display:inline-flex;align-items:center;gap:var(--s3)}
.sel__label{font-size:var(--t-s);line-height:20px;color:var(--ink-3)}
.sel__box{position:relative;display:inline-flex}
.sel select{appearance:none;-webkit-appearance:none;min-height:44px;padding:0 40px 0 var(--s3);border:1px solid var(--rim);
            border-radius:var(--r-m);background:var(--canvas);color:var(--ink);font:500 var(--t-m)/20px var(--font);cursor:pointer}
.sel select:hover{border-color:var(--hover)}
.sel__box .ico{position:absolute;right:var(--s3);top:50%;margin-top:-8px;color:var(--ink-3);pointer-events:none}
.var__cap{margin-bottom:var(--s3);font-size:var(--t-xs);line-height:16px;color:var(--ink-3)}
#kanaly:has(#k-p-y:checked) .var:not([data-p="y"]),
#kanaly:has(#k-p-w:checked) .var:not([data-p="w"]),
#kanaly:has(#k-p-m:checked) .var:not([data-p="m"]),
#kanaly:has(#k-s option[value="all"]:checked) .var:not([data-s="all"]),
#kanaly:has(#k-s option[value="alt"]:checked) .var:not([data-s="alt"]),
#kanaly:has(#k-s option[value="ts"]:checked) .var:not([data-s="ts"]),
#kanaly:has(#k-s option[value="nk"]:checked) .var:not([data-s="nk"]),
#kanaly:has(#k-s option[value="kn"]:checked) .var:not([data-s="kn"]),
#avito:has(#a-p-y:checked) .var:not([data-p="y"]),
#avito:has(#a-p-w:checked) .var:not([data-p="w"]),
#avito:has(#a-p-m:checked) .var:not([data-p="m"]){display:none}
/* виден один вариант периода: ритм держит блок внутри варианта, а не соседство скрытых вариантов */
.vars > .var{margin-top:0}
.var > .blk + .blk{margin-top:var(--rhythm)}

/* ---------------------------------------------------------------- учёт */
.acc__total{margin-bottom:var(--s3);font-size:var(--t-m);line-height:24px;font-weight:600}
.stack{display:block;width:100%;height:12px}
.seg-x{fill:var(--data)}
.seg-h{fill:var(--data-2)}
.seg-u{fill:var(--plan)}
.legend{list-style:none;padding:0;display:flex;flex-wrap:wrap;column-gap:var(--s4);row-gap:var(--s1);margin-top:var(--s3);
        font-size:var(--t-s);line-height:20px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.legend li{display:flex;align-items:center;gap:var(--s2)}
.sw{flex:none;width:12px;height:12px;border-radius:var(--r-xs)}
.sw--x{background:var(--data)}
.sw--h{background:var(--data-2)}
.sw--u{background:var(--plan)}
.acc__sub{margin-top:var(--s5);margin-bottom:var(--s2);font-size:var(--t-s);line-height:20px;font-weight:600}
.viol{list-style:none;padding:0}
.viol li{display:flex;justify-content:space-between;gap:var(--s4);padding-block:var(--s2);border-bottom:1px solid var(--line);
         font-size:var(--t-s);line-height:20px;color:var(--ink-2)}
.viol li:last-child{border-bottom:0}
.viol .num{color:var(--ink);font-weight:600}
/* подпись забирает остаток строки, число у края (флекс-элемент шириной по тексту проба читает схлопнутым) */
.viol li > :first-child,.soonlist li > :first-child{flex:1 1 auto}
.acc__fixed{margin-top:var(--s3);font-size:var(--t-s);line-height:20px;color:var(--ink-2)}

.vgrp + .vgrp{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--line)}
.vgrp h3{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--s2);margin-bottom:var(--s2);
         font-size:var(--t-m);line-height:24px;font-weight:600}
.vgrp__line{font-size:var(--t-xs);line-height:16px;font-weight:400;color:var(--ink-3)}
/* строка нарушения: на телефоне номер и сумма, под ними кто и что; с 768 - одной строкой на 12 колонках */
.items{list-style:none;padding:0}
.items li{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"ref amt" "who who";
          column-gap:var(--s3);padding-block:var(--s2);border-bottom:1px solid var(--line);font-size:var(--t-s);line-height:20px}
.items li:last-child{border-bottom:0}
/* ссылка на сделку - действие в строке списка, цель 36 (2.19) */
.it__ref{grid-area:ref;justify-self:start;padding-block:var(--s2);margin-block:calc(var(--s2) * -1);color:var(--link);
         text-decoration:none}
.it__ref:hover{text-decoration:underline;text-underline-offset:3px}
.it__ref--plain{color:var(--ink-3)}
.it__who{grid-area:who;color:var(--ink-3)}
.it__amt{grid-area:amt;text-align:right}

/* ---------------------------------------------------------------- заготовки разделов и «Ещё» */
.soonlist{list-style:none;padding:0}
.soonlist li{display:flex;justify-content:space-between;gap:var(--s4);padding-block:var(--s3);border-bottom:1px solid var(--line);
             font-size:var(--t-s);line-height:20px}
.soonlist li:first-child{padding-top:0}
.soonlist li:last-child{padding-bottom:0;border-bottom:0}
.soon{flex:none;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
/* переход на экран из списка - цель 44 (2.19), карман полями гасится отрицательными */
.soon__a{display:inline-flex;align-items:center;gap:var(--s1);min-height:44px;margin-block:calc(var(--s3) * -1);
         color:var(--link);font-weight:500;text-decoration:none}
.soon__a:hover{text-decoration:underline;text-underline-offset:3px}
.soonlist li:first-child .soon__a{margin-top:calc(var(--s3) * -1)}

/* ---------------------------------------------------------------- журнал */
.events{list-style:none;padding:0}
.events li{display:flex;flex-direction:column;gap:var(--s1);padding-block:var(--s3);border-bottom:1px solid var(--line)}
.events li:first-child{padding-top:0}
.events li:last-child{padding-bottom:0;border-bottom:0}
.ev__at,.ev__who{font-size:var(--t-xs);line-height:16px;color:var(--ink-3)}
.ev__what{font-size:var(--t-s);line-height:20px}

/* ---------------------------------------------------------------- оформление и выход */
.look{display:inline-flex;gap:var(--inset);padding:var(--inset);border:1px solid var(--rim);border-radius:var(--r-pill);background:var(--canvas)}
.look button{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;font:inherit;
             border-radius:var(--r-pill);background:transparent;color:var(--ink-3);cursor:pointer}
.look button[aria-pressed="true"]{background:var(--raised);color:var(--ink);box-shadow:0 0 0 1px var(--rim)}
.look button:focus-visible{outline:2px solid var(--link);outline-offset:1px}
.look-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.look-row__label{font-size:var(--t-s);line-height:20px;font-weight:500}
.out-row{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--line)}

/* ---------------------------------------------------------------- вход и служебная страница */
/* колонка формы - на сетке: вся ширина телефона, 6 из 8 на планшете, 4 из 12 на компьютере (7.1) */
.gate{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gap);min-height:100vh;
      min-height:100dvh;align-content:center;padding:var(--s7) var(--pad)}
.login{grid-column:1 / -1;background:var(--surface);border:1px solid var(--rim);border-radius:var(--r-m);padding:var(--card-pad)}
.login__brand{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s6)}
.login h1{margin-bottom:var(--s5)}
.login__err{display:flex;align-items:flex-start;gap:var(--s2);margin-bottom:var(--s5);font-size:var(--t-s);line-height:20px;
            font-weight:500;color:var(--bad)}
.login__err .ico{margin-top:calc((20px - 16px) / 2)}
.login__text{margin-bottom:var(--s5);font-size:var(--t-s);line-height:20px;color:var(--ink-2)}
.login__form{display:flex;flex-direction:column;gap:var(--s4)}
.fld{display:flex;flex-direction:column;gap:var(--s2)}
.fld__label{font-size:var(--t-s);line-height:20px;font-weight:500;color:var(--ink-2)}
/* кегль поля 16 - иначе iOS увеличивает страницу при вводе (2.11) */
.fld input{min-height:44px;padding:0 var(--s3);border:1px solid var(--rim);border-radius:var(--r-m);background:var(--canvas);
           color:var(--ink);font:500 var(--t-m)/20px var(--font)}
.fld input:hover{border-color:var(--hover)}
.fld input:focus-visible{outline:2px solid var(--link);outline-offset:1px}
/* единственная залитая кнопка экрана (7.7) */
.btn{min-height:44px;margin-top:var(--s2);padding-inline:var(--s5);border:0;border-radius:var(--r-m);background:var(--accent);
     color:var(--on-accent);font:600 var(--t-s)/20px var(--font);cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn:focus-visible{outline:2px solid var(--link);outline-offset:2px}

/* ---------------------------------------------------------------- планшет */
@media (min-width:768px){
  .p-t{display:table-cell}
  .p-m,.kv--t{display:none}
  .top__row{padding-top:var(--s6)}
  /* одной строкой: номер и сумма по содержимому, «кто и что» забирает остаток; колонки общие у всех строк
     списка (подсетка), поэтому края стоят столбиком (7.3). Внутри карточки колонки страницы не действуют */
  .items{display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;column-gap:var(--s5)}
  .items li{grid-column:1 / -1;grid-template-columns:subgrid;column-gap:var(--s5);grid-template-areas:"ref who amt"}
  .tbl th,.tbl td{padding-inline:var(--s2)}
  .tbl--yday th:first-child{width:30%}
  .tbl--acc th:first-child{width:36%}
  .kpi{grid-column:span 4}
  .kpi:nth-child(n+3){margin-top:var(--s5)}
  .blk__meta{flex:1 1 auto}
  /* списки «подпись - число» и «что будет» уже полосы: число держится рядом с подписью (7.8) */
  .pair > .blk--acc{grid-column:1 / span 6}
  .blk--soon .card{max-width:calc((100% + var(--gap)) * 6 / 8 - var(--gap))}
  .login{grid-column:2 / span 6}
}

/* ---------------------------------------------------------------- компьютер: боковая панель как у референса */
@media (min-width:1024px){
  /* колонка панели закрашена и ниже липкой панели - на длинном экране и на снимке целиком */
  .app{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100vh;min-height:100dvh;
       background:linear-gradient(90deg,var(--surface) calc(var(--side) - 2px),var(--groove-a) 0,var(--groove-a) calc(var(--side) - 1px),
                  var(--groove-b) 0,var(--groove-b) var(--side),var(--canvas) 0)}
  .main{padding-bottom:0}
  .side{position:sticky;top:0;bottom:auto;align-self:start;display:flex;flex-direction:column;height:100vh;height:100dvh;
        overflow-y:auto;padding:0 var(--groove) 0 0;box-shadow:inset -1px 0 0 var(--groove-b),inset -2px 0 0 var(--groove-a)}
  .side__brand{display:flex;align-items:center;gap:var(--s3);height:var(--top-h);padding-inline:var(--side-pad) var(--s4);
               box-shadow:inset 0 -1px 0 var(--groove-b),inset 0 -2px 0 var(--groove-a)}
  .tabs{display:flex;flex-direction:column;height:auto;padding:var(--s5) 0 var(--s4)}
  .tab{flex-direction:row;justify-content:flex-start;gap:var(--s3);min-height:44px;padding-inline:var(--side-pad) var(--s4);
       color:var(--ink);font-size:var(--t-s);line-height:20px;font-weight:500}
  .tab--phone{display:none}
  .tab:hover{background:var(--raised)}
  .ico--tab{width:20px;height:20px;padding:0;border-radius:0;color:var(--ink-2)}
  /* на компьютере дочерние экраны видны своими пунктами «Подробно» и подсвечивают себя, а не родителя */
  .app:not(:has(.screen:target)) .tab[data-tab="svodka"],
  .app:has(#svodka:target) .tab[data-tab="svodka"],
  .app:has(#kanaly:target) .tab[data-tab="kanaly"],
  .app:has(#smm:target) .tab[data-tab="smm"],
  .app:has(#prodazhi:target) .tab[data-tab="prodazhi"],
  .app:has(#eshche:target) .tab[data-tab="eshche"],
  .app:has(#avito:target) .tab[data-tab="avito"],
  .app:has(#uchet:target) .tab[data-tab="uchet"],
  .app:has(#dengi:target) .tab[data-tab="dengi"],
  .app:has(#zhurnal:target) .tab[data-tab="zhurnal"],
  .app:has(#zdorovie:target) .tab[data-tab="zdorovie"]{background:var(--raised);font-weight:600}
  .app:not(:has(.screen:target)) .tab[data-tab="svodka"] .ico--tab,
  .app:has(#svodka:target) .tab[data-tab="svodka"] .ico--tab,
  .app:has(#kanaly:target) .tab[data-tab="kanaly"] .ico--tab,
  .app:has(#smm:target) .tab[data-tab="smm"] .ico--tab,
  .app:has(#prodazhi:target) .tab[data-tab="prodazhi"] .ico--tab,
  .app:has(#eshche:target) .tab[data-tab="eshche"] .ico--tab,
  .app:has(#avito:target) .tab[data-tab="avito"] .ico--tab,
  .app:has(#uchet:target) .tab[data-tab="uchet"] .ico--tab,
  .app:has(#dengi:target) .tab[data-tab="dengi"] .ico--tab,
  .app:has(#zhurnal:target) .tab[data-tab="zhurnal"] .ico--tab,
  .app:has(#zdorovie:target) .tab[data-tab="zdorovie"] .ico--tab{color:var(--link)}
  .side__group{display:block;padding:var(--s5) 0 var(--s4);box-shadow:inset 0 1px 0 var(--groove-a),inset 0 2px 0 var(--groove-b)}
  .side__label{padding:0 var(--side-pad) var(--s2);font-size:var(--t-xs);line-height:16px;font-weight:600;letter-spacing:.06em;
               text-transform:uppercase;color:var(--ink-3)}
  .side__group .tabs{padding:0}
  .side__foot{display:flex;flex-direction:column;gap:var(--s5);margin-top:auto;padding:var(--s5) var(--side-pad);
              box-shadow:inset 0 1px 0 var(--groove-a),inset 0 2px 0 var(--groove-b)}
  .me-row{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4)}
  .me{display:flex;align-items:center;gap:var(--s3)}
  .me .ava{width:36px;height:36px;font-size:var(--t-xs)}
  .me__name{display:flex;flex-direction:column;font-size:var(--t-s);line-height:20px;font-weight:600}
  .me__name span{font-size:var(--t-xs);line-height:16px;font-weight:400;color:var(--ink-3)}
  .eshche-look{display:none}
  .side .look button{width:36px;height:32px}
  .side .look{padding:var(--inset)}

  .top__row{min-height:var(--top-h);padding-block:var(--s4)}
  .top__title{display:flex;flex-direction:column}
  h1{line-height:36px}
  .back{margin-block:calc(var(--s3) * -1) 0}
  .sub{padding-block:var(--s3)}
  .seg label{min-height:36px}
  .body{padding-block:var(--s6) var(--s9)}
  .kpi{grid-column:span 6}
  /* тревог 0-5: три в ряд, а одну, две и четыре - по две, чтобы ряд не кончался пустой колонкой (7.15) */
  .alerts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .alerts:is([data-n="1"],[data-n="2"],[data-n="4"]){grid-template-columns:repeat(2,minmax(0,1fr))}
  /* пара - две строки подсетки: заголовки блоков делят первую, карточки - вторую. Карточки начинаются с общей
     линии, даже когда подпись одного блока ушла на вторую строку (7.10), и тянутся до общего низа (7.20) */
  .pair{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-template-rows:auto 1fr;column-gap:var(--gap)}
  .pair > .blk{margin-top:0}
  .pair > .blk{display:grid;grid-row:span 2;grid-template-rows:subgrid;min-width:0}
  .pair > .blk > .blk__head{align-self:start}   /* заголовки пары - по общей верхней линии, а не по центру строки */
  .pair > .blk--yday{grid-column:span 8}
  .pair > .blk--acc{grid-column:span 4}
  .blk--soon .card{max-width:calc((100% + var(--gap)) * 8 / 12 - var(--gap))}
  .login{grid-column:5 / span 4}
}
/* 1024-1279: таблица «Вчера» в 8 колонках из 12 не помещается с полями 8 (перебор 4 px) - поля 4 */
@media (min-width:1024px) and (max-width:1279px){
  .pair .tbl th,.pair .tbl td{padding-inline:var(--s1)}
}
@media (min-width:1280px){
  .kpi{grid-column:span 3}
  .kpi:nth-child(n+3){margin-top:0}
  .p-w{display:table-cell}
  .kv--w{display:none}
  /* имена строк - в одну строку: колонкам хватает места с 1280 */
  .tbl tbody th[scope="row"] label,.tbl tbody th[scope="row"] > a{white-space:nowrap}
}

@media (hover:hover){
  .row:hover > *{background:var(--raised)}
}
@media (prefers-reduced-motion:reduce){
  .ico--chev{transition:none}
}