/* === MAIN.CSS === */
/* demo/assets/css/main.css */
/* НАЗНАЧЕНИЕ: базовый слой и каркас демо - шапка, табы разделов сверху (как в
   кабинете Ozonteh), сетки, переключатель периода, строка источников */
/* СВЯЗИ: variables.css (токены), components.css, app.js, sources.js */
/* РАЗМЕР: ~590 строк */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Одна ось композиции на весь макет. Эталон Strimix - контейнер 1306px;
   берем 1320 (1306 + воздух). По этой оси выравнивается и контент страницы,
   и содержимое шапки с табами - иначе логотип стоит левее первой карточки. */
:root {
    --shell: 1320px;
    --shell-pad: max(var(--sp-5), calc((100% - var(--shell)) / 2));
}

html {
    font-family: var(--font-display);
    font-size: var(--fs-3);
    line-height: 1.45;
    color: var(--text);
    background: var(--bg);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    transition: background var(--transition), color var(--transition);
}

/* Заголовки. Без этого браузер считает размер сам и выдает дробные значения,
   которые не попадают ни в одну ступень шкалы. */
h1, h2, h3, h4 {
    margin: 0;
    font-weight: 600;
    line-height: 1.3;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

/* Трекинг по размеру (Apple HIG): отрицательный только на крупном кегле.
   h4 - это --fs-4 = 13px, на таком размере минус в трекинге сжимает текст
   и читается хуже, поэтому отрицательный трекинг оставлен h1-h3 (>=15px). */
h1, h2, h3 { letter-spacing: -0.01em; }
h4 { letter-spacing: 0; }
h1 { font-size: var(--fs-7); }
h2 { font-size: var(--fs-6); }
h3 { font-size: var(--fs-5); }
h4 { font-size: var(--fs-4); }

/* Формы не наследуют шрифт - браузер подставляет свой */
button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; }

/* Моноширинный НЕ на таблице целиком. Правило table/td/th делало моноширинными
   имена людей и контрагентов - текст в таблице начинал выглядеть как лог сервера.
   Выравнивание разрядов дает tabular-nums на обычном шрифте, моно тут не нужен.
   Моно остается точечно: .mono, code и ячейки с числами (.rank .val, .kpi-value). */
table, td, th {
    font-variant-numeric: tabular-nums;
}

.mono, code {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ============ ВЕРХНЯЯ ПАНЕЛЬ ============ */

.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: var(--sp-2);
    gap: var(--sp-3);
    min-height: 56px;
    /* Фон и нижняя линия идут до края экрана, а содержимое встает на ось
       --shell, ту же что у .page. max() не дает паддингу упасть ниже 24px
       на узких экранах. */
    padding: var(--sp-2) var(--shell-pad);
    /* Полупрозрачность с размытием вместо сплошной плашки с рамкой снизу:
       липкая шапка перестает быть отрезанной полосой и читается как слой,
       под которым едет документ. Рамка снята - две жесткие линии подряд
       (под шапкой и под рядом разделов) резали страницу на три куска. */
    background: color-mix(in oklab, var(--bg-0) 82%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
}

/* Где размытия нет - непрозрачный фон, иначе текст ляжет на текст */
@supports not (backdrop-filter: blur(1px)) {
    .nav  { background: var(--bg-0); }
    .tabs { background: var(--bg); }
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-4);
    font-weight: 800;
    letter-spacing: 0.01em;
    min-width: 0;
}

/* Имя продукта может ужаться и обрезаться, лишь бы кнопка темы осталась
   на экране. Раньше nowrap на бренде и на мете вместе давали 399px
   неразрывной ширины - на 390px кнопка уезжала за край. */
.nav-brand-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 0 3px var(--ok-soft);
}

/* Плашка демо. Была моноширинным капсом в акцентной рамке - кричала громче
   любой цифры на экране. Стала служебной пометкой: без рамки, без капса,
   обычным шрифтом, приглушенным цветом. */
.nav-demo {
    flex: 0 0 auto;
    padding: 1px 6px;
    border-radius: var(--r-1);
    background: var(--surface-2);
    color: var(--muted);
    font-size: var(--fs-2);
    font-weight: 500;
    letter-spacing: 0;
}

.nav-spacer { flex: 1 1 auto; }

.nav-meta {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    color: var(--muted);
    font-size: var(--fs-2);
    flex: 0 0 auto;
    margin-left: auto;
}

.nav-meta > #loc-current {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.icon-btn {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--dim);
    transition: background var(--transition), color var(--transition);
}

.icon-btn:hover { background: var(--surface-hover); color: var(--text); }
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Дефолт светлый - предлагаем уйти в темную, значит видна луна.
   В темной теме наоборот: показываем солнце как выход обратно. */
.icon-dark { display: none; }
.icon-light { display: block; }
html.dark-theme .icon-dark { display: block; }
html.dark-theme .icon-light { display: none; }

/* ============ РАЗДЕЛЫ ============ */

.tabs {
    position: sticky;
    top: 56px;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0 var(--shell-pad);
    background: color-mix(in oklab, var(--bg) 82%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    /* inset-тень вместо border: линия остается волосяной, но не добавляет
       высоты и гасится до 70% - край раздела, а не шов. */
    box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--border) 70%, transparent);
    overflow-x: auto;
    scrollbar-width: none;
}

.tabs::-webkit-scrollbar { display: none; }

/* Классический таб-бар вместо набора пилюль. Восемь разделов имеют разную
   длину имени (70..142px), и пока у каждого была своя рамка с заливкой, ряд
   читался рваным: глаз ловил границы плашек, а не слова. Без рамки и без
   заливки разная длина слов перестает читаться как разная ширина блоков -
   остается ровная строка текста. Активный раздел держится подчеркиванием
   снизу: это тот же прием, что у вкладок браузера, и он не добавляет
   на экран очередное цветное пятно. */
.tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 12px 10px;
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--muted);
    font-size: var(--fs-4);
    font-weight: 500;
    white-space: nowrap;
    transition: color var(--transition);
}

/* Подчеркивание рисуется всегда, но прозрачное - иначе при переходе
   в активное состояние строка табов дергается по высоте на 2px. */
.tab::after {
    content: '';
    position: absolute;
    left: var(--sp-2);
    right: var(--sp-2);
    bottom: -1px;
    height: 2px;
    border-radius: var(--r-pill) var(--r-pill) 0 0;
    background: transparent;
    transition: background var(--transition);
}

/* Текст первого раздела должен стоять ровно на оси --shell, как логотип
   и первая карточка. Собственный паддинг таба сдвигал бы его на 10px вправо,
   поэтому крайние табы подтянуты назад отрицательным полем. */
.tabs > .tab:first-child { margin-left: -10px; }
.tabs > .tab:last-child { margin-right: -10px; }

.tab:hover { color: var(--text); }
.tab:hover::after { background: var(--border-strong); }

.tab.active {
    color: var(--accent);
    font-weight: 600;
}

.tab.active::after { background: var(--accent); }

/* Обводка фокуса без outline-offset: у таба нет своей рамки, и отступ
   уводил бы прямоугольник фокуса на соседний раздел. */
.tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    border-radius: var(--r-1);
}

/* Счетчик у раздела. Был красным на каждой вкладке - ряд разделов читался
   как пять непрочитанных чатов и перебивал цифры под ним. Теперь это
   нейтральная справка: сколько записей в разделе. Цветом кричит только
   активный раздел - тот, который человек сейчас смотрит. */
.tab-badge {
    display: grid;
    place-items: center;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border-radius: var(--r-pill);
    background: var(--surface-hover);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--fs-1);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.tab:hover .tab-badge { color: var(--dim); }

/* Раньше активный таб был залит акцентом, и счетчику приходилось
   выворачиваться наизнанку (белый фон, акцентный текст). Заливки больше нет,
   поэтому счетчик активного раздела читается как обычная плашка в акцентных
   тонах - контраст держится на своем фоне, а не на фоне кнопки. */
.tab.active .tab-badge {
    background: color-mix(in srgb, var(--accent) 14%, var(--bg));
    color: color-mix(in srgb, var(--accent) 88%, var(--text));
}

.tab.active .tab-badge.is-warn { background: var(--warn); color: var(--on-warn); }

/* ============ СТРАНИЦА ============ */

.page {
    padding: var(--sp-5);
    max-width: calc(var(--shell) + var(--sp-5) * 2);
    margin: 0 auto;
}

.view { display: none; }
.view.active {
    display: block;
    animation: viewIn 220ms var(--ease-out) both;
}

@keyframes viewIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

.page-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

/* Заголовок раздела. Моноширинный капс из кабинета Ozonteh тут снят:
   демо смотрит собственник, а не инженер, и «ОБЗОР» капсом читается тяжелее.
   Акцентная черта слева сохраняет узнаваемость кабинета без крика. */
.page-title {
    position: relative;
    padding-left: var(--sp-3);
    font-size: var(--fs-6);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.page-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.18em;
    bottom: 0.18em;
    width: 3px;
    border-radius: var(--r-pill);
    background: var(--accent);
}

.page-sub {
    color: var(--muted);
    font-size: var(--fs-3);
}

/* Сетки */
/* align-items:start - колонки живут своей высотой. Раньше обе тянулись под
   высоту старшей, и у короткой панели (Воронка) снизу висело ~180px пустоты. */
.grid { display: grid; gap: var(--gap); align-items: start; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.grid-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.stack { display: flex; flex-direction: column; gap: var(--gap); }

/* Ритм страницы. Вместо одного margin-top:var(--gap) на каждом блоке -
   три ступени: продолжение мысли, новый блок, новая тема. Взгляд получает
   опору и перестает читать страницу как одну сплошную стену карточек. */
.mt-s  { margin-top: var(--gap-s); }
.mt    { margin-top: var(--gap); }
.mt-l  { margin-top: var(--gap-l); }
.mt-xl { margin-top: var(--gap-xl); }

/* Смысловой разрыв между темами раздела: воздух плюс тонкая линия.
   Линия рисуется псевдоэлементом, отдельного <hr> в разметке не нужно. */
.section-break {
    margin-top: var(--gap-xl);
    padding-top: var(--gap-l);
    border-top: 1px solid var(--border);
}

/* Асимметрия под содержимое, а не под красивую дробь. Бухгалтерия: таблица
   типов документов просит 453px, таблица первички 780px - при 1fr/2fr узкая
   уезжала под прокрутку, при 1fr/1fr переносилась каждая строка соседней.
   Введено агентом W3 в разметке (views.js), объявлено здесь. */
.v3-grid-3-5 { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); }

/* Раскрытый аккордеон занимает обе колонки ряда: в половине ширины таблицы
   источников (652px) и норм (744px) не помещаются в 616px и дают прокрутку.
   Свернутый сосед при этом остается на своей оси. */
.v3-fold:has(details[open]) { grid-column: 1 / -1; }

@media (max-width: 1240px) {
    /* minmax(0,1fr), а не 1fr: по умолчанию 1fr = minmax(auto,1fr), и колонка
       не может стать уже своего содержимого. Таблица с неразрывными ячейками
       распирала единственную колонку до 613px при экране 390. */
    .grid-3, .grid-2-1, .grid-1-2,
    .v3-grid-3-5 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 780px) {
    .page { padding: var(--sp-3); }
    .nav, .tabs { padding-left: var(--sp-3); padding-right: var(--sp-3); }
    .grid-2 { grid-template-columns: minmax(0, 1fr); }
    .nav-meta .hide-sm { display: none; }
}

/* ---- Телефон. Ничего не должно вылезать за 100vw ---- */
@media (max-width: 560px) {
    html, body { overflow-x: hidden; }

    .nav {
        gap: var(--sp-2);
        padding-left: var(--sp-3);
        padding-right: var(--sp-3);
    }

    .nav-brand { font-size: var(--fs-3); }
    .nav-brand-name { max-width: 42vw; }
    .nav-meta { gap: var(--sp-2); font-size: var(--fs-1); max-width: 46vw; }
    .nav-meta > #loc-current { max-width: 28vw; }

    /* Боковой отступ страницы совпадает с отступом шапки и табов (--sp-3),
       иначе на телефоне логотип стоит на 4px правее первой карточки -
       ровно тот же разъезд осей, что чинили на десктопе. */
    .page { padding: var(--sp-3); }
    .page-head { gap: var(--sp-1); margin-bottom: var(--sp-3); }

    /* Источники данных. На телефоне это справка, а не показатель: ряд
       систем сворачивается в прокручиваемую строку, чтобы не резаться
       по краю экрана и не растягивать документ (было 631px при 390). */
    .src-line {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        row-gap: var(--sp-1);
        -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
        mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
    }

    .src-line::-webkit-scrollbar { display: none; }
    .src-line > span { flex: 0 0 auto; }
}

/* Утилиты */
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.row { display: flex; align-items: center; gap: var(--sp-2); }
.row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

/* ============ ПЕРЕКЛЮЧАТЕЛЬ ПЕРИОДА ============ */
/* Сегментный контрол, как в кабинете Ozonteh: 7д / 30д / 90д / 365д.
   Сделан одной капсулой, а не рядом кнопок - так видно, что выбор
   взаимоисключающий, и активный сегмент не надо подписывать словом. */

.period-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
}

.period-switch a,
.period-switch button {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    background: none;
    border: none;
    border-radius: var(--r-pill);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--fs-2);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition);
}

.period-switch a:hover,
.period-switch button:hover {
    background: var(--surface-hover);
    color: var(--text);
}

/* Активный сегмент заливается акцентом. Контраст текста на заливке 4.93 - проходит норму */
.period-switch a.active,
.period-switch button.active {
    background: var(--accent);
    color: var(--on-accent);
}

.period-switch a.active:hover,
.period-switch button.active:hover {
    background: var(--accent);
    color: var(--on-accent);
}

.period-switch a:focus-visible,
.period-switch button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ============ СТРОКА ИСТОЧНИКОВ ДАННЫХ ============ */
/* Главный аргумент демо: цифра не придумана, под ней конкретная система.
   Поэтому источники стоят прямо в шапке раздела, а не в сноске внизу.
   Разделители-точки рисуются псевдоэлементом, чтобы не плодить разметку. */

.src-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 var(--sp-2);
    color: var(--muted);
    font-size: var(--fs-2);
    line-height: 1.6;
    max-width: 100%;
    min-width: 0;
}

.src-line > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
}

.src-line > span + span::before {
    content: '';
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--border-strong);
}

/* Имя системы выделяется весом, а не цветом: цветов на экране и так хватает */
.src-line b {
    color: var(--dim);
    font-weight: 600;
}

/* Метка свежести. Зеленая точка = синхронизация прошла */
.src-line i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ok);
    font-style: normal;
    flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Дубль заголовка раздела снят (пункт 7 эталона Strimix).
   Слово "Обзор" стояло в активной вкладке и тут же ниже в h2 - одно и то же
   дважды подряд на каждом из восьми разделов. У Strimix заголовка страницы
   как блока нет вообще, его роль выполняет активная вкладка, это экономит
   вертикаль. h2 оставлен в разметке для скринридеров и структуры документа,
   но скрыт визуально. Подзаголовок-пояснение остается: он несет смысл. */
.page-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.page-sub {
    font-size: var(--fs-3);
    font-weight: 600;
    color: var(--text);
}