/* Рама, типографика, элементы форм. Значения — только именами из tokens.css. */

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font-ui);
    font-size: var(--d-text);
    line-height: 1.5;
}

/* Видимая рамка фокуса у каждого элемента, до которого доходит Tab.
   Кольцо box-shadow — украшение поверх рамки, а не её замена. */
*:focus-visible {
    outline: 2px solid var(--c-focus);
    outline-offset: 1px;
}

a { color: var(--c-accent-text); }

h1, h2, h3 { font-family: var(--font-head); }

h1 {
    font-size: var(--t-h1);
    line-height: 1.25;
    font-weight: 600;
    margin: 0 0 var(--s-6) 0;
}

h2 {
    font-size: var(--t-h2);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0;
}

h3 {
    font-size: var(--t-h3);
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--c-text-muted);
    margin: 0 0 var(--s-2) 0;
}

.число, td.число, .num {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
}

/* Верхняя полоса */
.рама-верх {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--s-6);
    height: var(--d-topbar);
    padding: 0 var(--s-6);
    background: var(--c-chrome);
    color: var(--c-chrome-text);
}

.рама-верх a { color: var(--c-chrome-text); text-decoration: none; }
.рама-верх .приглушённо { color: var(--c-chrome-text-muted); }

.имя-системы {
    font-size: var(--t-control);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.logo { height: var(--d-logo); width: auto; }

.разделитель {
    width: 1px;
    height: 20px;
    background: var(--c-chrome-3);
}

.поиск-полоса input {
    height: var(--d-control);
    min-width: 275px;
    padding: 0 var(--s-3);
    border: 1px solid var(--c-chrome-3);
    border-radius: var(--r-control);
    background: var(--c-chrome-2);
    color: var(--c-chrome-text);
    font-size: var(--t-control);
}

/* Счётчик в полосе — ссылка, и без второго селектора его цвет перебивало
   бы правило `.рама-верх a`: в теме со светлой рамой текст рамы тёмный. */
.счётчик, .рама-верх a.счётчик {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22.5px;
    height: 22.5px;
    padding: 0 var(--s-2);
    border-radius: var(--r-pill);
    background: var(--c-accent);
    color: var(--c-on-accent);
    font-family: var(--font-num);
    font-size: var(--t-caption);
}

.состояние-очереди {
    font-size: var(--t-control);
    color: var(--c-chrome-text-muted);
    text-decoration: none;
}

.состояние-очереди[data-queue-state="stalled"] {
    background: var(--c-error);
    color: var(--c-on-danger);
    padding: var(--s-1) var(--s-3);
    border-radius: var(--r-control);
}

.справа { margin-left: auto; }

/* Раскладка: меню слева, содержимое справа */
.рама {
    display: flex;
    align-items: flex-start;
}

.меню {
    position: sticky;
    top: var(--d-topbar);
    flex: 0 0 var(--d-menu-width);
    width: var(--d-menu-width);
    height: calc(100vh - var(--d-topbar));
    overflow-y: auto;
    padding: var(--s-4) 0;
    background: var(--c-chrome-2);
}

.меню a {
    display: flex;
    align-items: center;
    height: var(--d-menu-item);
    padding: 0 var(--s-6);
    color: var(--c-chrome-text);
    font-size: var(--t-control);
    text-decoration: none;
}

.меню a:hover { background: var(--c-chrome-3); }
.меню a[aria-current="page"] { background: var(--c-accent); color: var(--c-on-accent); font-weight: 600; }

.меню-раздел { margin-top: var(--s-4); }

.меню-раздел > h2 {
    padding: var(--s-2) var(--s-6);
    color: var(--c-chrome-text-muted);
}

.содержимое {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--content-pad);
    padding-bottom: var(--s-10);
}

/* Формы */
label { display: block; font-size: var(--t-h3); text-transform: uppercase;
        letter-spacing: .07em; color: var(--c-text-muted); margin-bottom: var(--s-1); }

input[type="text"], input[type="password"], input[type="number"], input[type="date"],
input[type="search"], select, textarea {
    width: 100%;
    min-height: var(--d-control);
    padding: 0 var(--s-3);
    border: 1px solid var(--c-field-border);
    border-radius: var(--r-control);
    background: var(--c-surface);
    color: var(--c-text);
    font-family: var(--font-ui);
    font-size: var(--t-control);
}

textarea { min-height: 150px; padding: var(--s-3); line-height: 1.5; }

.поле { margin-bottom: var(--s-4); }
.поле.с-ошибкой input, .поле.с-ошибкой select { border-color: var(--c-error); }

.ошибка-поля {
    display: block;
    margin-top: var(--s-1);
    color: var(--c-error);
    font-size: var(--t-caption);
}

button, .кнопка {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--d-control);
    padding: 0 var(--btn-pad-x);
    border: 1px solid var(--c-field-border);
    border-radius: var(--r-button);
    background: var(--c-surface);
    color: var(--c-text);
    font-family: var(--font-ui);
    font-size: var(--t-control);
    box-shadow: var(--sh-1);
    cursor: pointer;
    text-decoration: none;
}

button:hover, .кнопка:hover { background: var(--c-surface-2); }

button.основная, .кнопка.основная {
    border: none;
    background: var(--c-accent);
    color: var(--c-on-accent);
}

button.основная:hover { background: var(--c-accent-strong); }

/* Кнопка-переключатель страницы («Все / Ошибки» у звонков, разделы настроек):
   текущая залита акцентом, как текущая страница в постраничной навигации. */
.кнопка[aria-current="page"],
.кнопка[aria-current="page"]:hover {
    border-color: var(--c-accent);
    background: var(--c-accent);
    color: var(--c-on-accent);
}

button.опасная {
    border: none;
    background: var(--c-error);
    /* Своё имя, а не белый: в «Панели» тёмной заливка светлая, и белый на
       ней давал 2,4:1 (ЯДРО-22). */
    color: var(--c-on-danger);
}

button.ссылкой {
    border: none;
    background: none;
    box-shadow: none;
    padding: 0;
    color: var(--c-accent-text);
}

button[aria-disabled="true"], .кнопка[aria-disabled="true"] {
    opacity: .5;
    cursor: default;
}