/* === BASE.CSS === */
/* assets/css/base.css */
/* НАЗНАЧЕНИЕ: общий базовый слой кабинета поверх tokens.css: текст и цифры, иконки .bmi,
   плашки статусов, кнопки, поля ввода. Все значения только из токенов, своих цветов нет.
   Волна 1 UX (S2, 08.10.2026): подключается на styleguide.php и viz_demo.php,
   на остальные страницы = волна 2. Подключать ПОСЛЕ tokens.css.
   h1-h4, html и формы уже заданы в tokens.css и здесь не дублируются. */
/* СВЯЗИ: tokens.css (переменные), lib/icon.php + assets/js/icon.js (.bmi),
   styleguide.php (витрина всех классов). Префикс ui- выбран потому, что
   bm- занят меню (.bm-nav, .bm-grp), а .num по-своему задан на 10 страницах. */
/* РАЗМЕР: ~170 строк */

/* --- Текст --- */
body {
    margin: 0;
    font-family: var(--font-body);
    line-height: 1.45;
    background: var(--bg);
    color: var(--text);
}
p { margin: 0 0 var(--sp-2); }
.ui-text-2 { color: var(--text-2); }
.ui-text-3 { color: var(--text-3); font-size: var(--fs-2); }

/* Цифры одной ширины: колонки чисел не прыгают при обновлении и
   выравниваются по разрядам. Ставить на ячейки и плашки с числами. */
.ui-num {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}
.ui-tnum { font-variant-numeric: tabular-nums; }

/* --- Иконки (контракт 1.3): размер от шрифта, цвет от текста --- */
.bmi {
    width: 1.25em;
    height: 1.25em;
    display: inline-block;
    flex: 0 0 auto;
    vertical-align: -0.25em;
    /* Штрих задается здесь, а не в спрайте: Lucide и Tabler рисуют контуром,
       и при currentColor иконка всегда в цвет соседнего текста */
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.bmi-sm { width: 1em; height: 1em; vertical-align: -0.15em; }
.bmi-lg { width: 1.6em; height: 1.6em; vertical-align: -0.4em; }

/* --- Плашки статусов.
       Текст плашки = основной цвет, смысл несет точка и рамка.
       Причина: --ok/--warn/--err в светлой теме дают к фону 2.0-2.7
       (замер S2_ZAMER.md), цветной текст там не читается. --- */
.ui-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px var(--sp-2);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--text);
    font-size: var(--fs-2);
    line-height: 1.5;
    white-space: nowrap;
    flex: 0 0 auto;
}
.ui-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-3);
    flex: 0 0 auto;
}
.ui-badge--ok   { border-color: var(--ok);   background: var(--ok-soft); }
.ui-badge--warn { border-color: var(--warn); background: var(--warn-soft); }
.ui-badge--err  { border-color: var(--err);  background: var(--err-soft); }
.ui-badge--ok::before   { background: var(--ok); }
.ui-badge--warn::before { background: var(--warn); }
.ui-badge--err::before  { background: var(--err); }

/* --- Кнопки. Компактные: плотный интерфейс, 10px между элементами --- */
.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-1);
    background: var(--surface-2);
    color: var(--text);
    font-size: var(--fs-3);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition), border-color var(--transition);
}
.ui-btn:hover { background: var(--surface-hover); }
.ui-btn:focus-visible,
.ui-field:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
.ui-btn:disabled,
.ui-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.ui-btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}
.ui-btn--primary:hover { background: var(--accent); filter: brightness(1.08); }
.ui-btn--ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.ui-btn--ghost:hover { background: var(--surface-2); color: var(--text); }
.ui-btn--danger { border-color: var(--err); color: var(--text); }
.ui-btn--danger:hover { background: var(--err-soft); }
.ui-btn--sm { min-height: 24px; padding: 0 var(--sp-2); font-size: var(--fs-2); }

/* --- Поля ввода: подпись и поле в одну строку там, где хватает места --- */
.ui-label {
    display: inline-flex;
    flex-direction: column;
    gap: var(--sp-1);
    font-size: var(--fs-2);
    color: var(--text-2);
}
.ui-field {
    min-height: 30px;
    padding: 0 var(--sp-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-1);
    background: var(--bg);
    color: var(--text);
    font-size: var(--fs-3);
}
textarea.ui-field { min-height: 60px; padding: 6px var(--sp-2); resize: vertical; }
.ui-field::placeholder { color: var(--text-3); }
.ui-field[aria-invalid="true"] { border-color: var(--err); }

/* --- Панель: единый контейнер блока данных --- */
.ui-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-2);
    padding: var(--sp-3);
}
.ui-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-2);
}

/* --- Ряд элементов с общим шагом 10px --- */
.ui-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }

/* --- Доступность: видимый фокус для ссылок и скрытый текст для экранного чтения --- */
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ui-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .ui-btn { transition: none; }
}