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

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

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;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
}
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, .mono, code, td, th {
    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;
    gap: var(--sp-3);
    height: 56px;
    padding: 0 var(--sp-5);
    background: var(--bg-0);
    border-bottom: 1px solid var(--border);
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-4);
    font-weight: 700;
    letter-spacing: 0.02em;
    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 {
    padding: 2px 7px;
    border: 1px solid var(--accent-line);
    border-radius: var(--r-1);
    background: var(--accent-soft);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: var(--fs-1);
    font-weight: 600;
    letter-spacing: 0.06em;
}

.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);
    white-space: nowrap;
}

.icon-btn {
    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-1);
    padding: var(--sp-3) var(--sp-5);
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
}

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

.tab {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 8px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--dim);
    font-size: var(--fs-4);
    white-space: nowrap;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.tab:hover { background: var(--surface-hover); color: var(--text); }

.tab.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
    font-weight: 700;
}

.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tab-badge {
    display: grid;
    place-items: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--r-pill);
    background: var(--err);
    color: var(--on-err);
    font-family: var(--font-mono);
    font-size: var(--fs-1);
    font-weight: 700;
}

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

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

.page {
    padding: var(--sp-5);
    max-width: 1720px;
    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);
}

/* Сетки */
.grid { display: grid; gap: var(--gap); }
.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: 2fr 1fr; }
.grid-1-2 { grid-template-columns: 1fr 2fr; }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

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

@media (max-width: 1240px) {
    .grid-3, .grid-2-1, .grid-1-2 { grid-template-columns: 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: 1fr; }
    .nav-meta .hide-sm { display: none; }
}

/* Утилиты */
.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;
}

.src-line > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.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;
    }
}