/* Утилиты проекта поверх дизайн-системы демо. Inline-стили в шаблонах запрещены
   (PLAN PR-07) — ограничения ширины живут здесь. */

.narrow-sm {
    max-width: 26rem;
    margin-inline: auto;
}

.narrow-md {
    max-width: 32rem;
}


/* Страница входа: она живёт вне оболочки кабинета — ни меню слева, ни шапки
   сверху, — поэтому форма, прижатая к верхнему краю, висела в пустоте.
   Центр экрана и рамка карточки дают ей опору. Тот же приём, что у страницы
   ошибки ниже, но здесь цвета берутся из токенов: вход подчиняется теме
   кабинета, а страница ошибки намеренно всегда светлая. */
.auth {
    /* Высота знака берётся токеном --brand-size: на ней же стоит .reg, и
       переписанный размер знака не должен разъезжаться с компенсацией
       центрирования ниже. Отступ под знаком нужен только здесь. */
    --brand-gap: 16px;

    display: grid;
    /* Ширина живёт в колонке, а не в max-width карточки. У колонки по
       содержимому дорожка растягивалась под форму, и на 360 px карточка
       вылезала за правый край вместе с отступами. minmax(0, 360px) не даёт
       ей стать ни шире эталонных 360, ни шире самого окна. */
    grid-template-columns: minmax(0, 360px);
    justify-content: center;
    align-content: center;
    align-content: safe center; /* высокая форма на низком экране не уезжает под верх */
    min-height: 100vh;
    min-height: 100dvh; /* на телефоне 100vh отсчитывается со строкой адреса */
    padding: 24px;
    background: var(--bg);
}

/* Центрируется весь блок, а глаз ищет середину самой формы — из-за знака
   сверху карточка вставала на 21 px ниже центра окна. Отступ снизу ровно
   в высоту знака возвращает в центр её, а не блок. */
.auth-box {
    width: 100%;
    padding-bottom: calc(var(--brand-size) + var(--brand-gap));
}

.auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: var(--brand-size);
    margin-bottom: var(--brand-gap);
}

.auth-brand .nm {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--muted);
}

.auth-box .card-body {
    padding: 22px;
}

.auth-box h1 {
    font-size: 18px;
    margin-bottom: 16px;
}

/* Тихая подпись под заголовком. Правило приходится повторять: в
   components.css .sub описан только внутри .ph, то есть в шапке экрана
   кабинета, а здесь шапки нет. Заголовок с подписью стоят слитно —
   отступ снимается у h1. */
.auth-box h1:has(+ .sub) {
    margin-bottom: 4px;
}

.auth-box .sub {
    color: var(--muted);
    font-size: 13px;
}


/* Человеческая страница ошибки (PR-13): вне оболочки, всегда светлая */
.errpage {
    display: grid;
    min-height: 100vh;
    place-items: center;
    background: #F2F1EE;
    color: #1A1815;
    font-family: "IBM Plex Sans", -apple-system, sans-serif;
}

.errbox {
    max-width: 26rem;
    padding: 2rem;
    text-align: center;
}

.errbox .inc {
    font-family: "IBM Plex Mono", monospace;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: .04em;
    margin: 1rem 0;
}


/* Текстовое значение KPI-плитки: моно — только для цифр (язык демо),
   строки набираются основным шрифтом чуть мельче */
.kpi .kv.txt {
    font-family: var(--sans);
    font-variant-numeric: normal;
    font-size: 19px;
    letter-spacing: -.02em;
    padding-bottom: 14px;
}

.kpi .kv:not(.txt) {
    padding-bottom: 14px;
}

/* Довідка (TASK-80): оглавление слева, текст справа. На узком экране
   оглавление становится обычным списком над текстом — прижимать его к краю
   и заставлять читать в две колонки на телефоне незачем. */
.help-wrap{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:28px;align-items:start}
.help-toc{position:sticky;top:88px;display:flex;flex-direction:column;gap:8px}
.help-toc h2{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 4px}
.help-toc a{font-size:14px;color:var(--ink-2);text-decoration:none}
.help-toc a:hover,.help-toc a:focus-visible{text-decoration:underline}
.help-doc section{margin-bottom:32px}
.help-doc section:last-of-type{margin-bottom:20px}
.help-doc h2{font-size:20px;margin:0 0 10px}
.help-doc h3{font-size:15px;margin:20px 0 6px}
.help-doc p{margin:0 0 10px}
/* Формула и цепочка статусов — не абзац, а схема: моноширинно и с
   подложкой, чтобы «матеріал × формат × кольоровість» читалось одним
   куском, а не разбиралось по словам */
.help-flow{font-family:var(--mono);font-size:13.5px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r);padding:9px 12px;overflow-x:auto}
.help-doc ol,.help-doc ul{margin:0 0 12px;padding-left:20px;display:flex;flex-direction:column;gap:8px}
@media(max-width:860px){
  .help-wrap{grid-template-columns:minmax(0,1fr)}
  .help-toc{position:static;flex-direction:row;flex-wrap:wrap;gap:14px}
  .help-toc h2{width:100%;margin:0}
}