/* ── Дизайн-система кабинетов: основа ───────────────────────────────────────────
   Слой 2 из 4: сброс браузерных значений, типографика документа, состояние
   фокуса и небольшой набор вспомогательных классов.

   Правило слоя: здесь оформляются только теги и общие свойства документа.
   Всё, у чего есть имя («кнопка», «таблица», «бейдж»), живёт в слое компонентов. */

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

html {
    /* Плавная прокрутка к якорю отключается вместе с остальным движением ниже. */
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background-color: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    line-height: var(--lh-normal);
    /* Сглаживание оставлено браузеру: подкрутка рендеринга шрифта чаще делает
       кириллицу тоньше и хуже читаемой, чем красивее. */
    text-rendering: optimizeLegibility;
}

/* ── Заголовки ─────────────────────────────────────────────────────────────────
   Уровень заголовка выбирается по структуре документа, а не по желаемому размеру:
   человек, читающий страницу с экрана, перемещается именно по уровням. Размер при
   необходимости меняется классом .h-lg / .h-md / .h-sm. */
h1,
h2,
h3,
h4 {
    margin: 0 0 var(--s-3);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    letter-spacing: -0.01em;
    text-wrap: balance;
}

h1 {
    font-size: var(--fs-2xl);
}

h2 {
    font-size: var(--fs-xl);
}

h3 {
    font-size: var(--fs-lg);
}

h4 {
    font-size: var(--fs-md);
}

p,
ul,
ol,
dl {
    margin: 0 0 var(--s-4);
}

p {
    max-width: var(--measure);
}

ul,
ol {
    padding-left: var(--s-5);
}

li + li {
    margin-top: var(--s-1);
}

small {
    font-size: var(--fs-sm);
}

code,
kbd,
samp {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background-color: var(--c-surface-sunken);
    border-radius: var(--r-sm);
    padding: 0.1em 0.35em;
}

hr {
    border: 0;
    border-top: 1px solid var(--c-border);
    margin: var(--s-5) 0;
}

/* ── Ссылки ───────────────────────────────────────────────────────────────────
   Подчёркивание оставлено: цвет — единственный признак ссылки только для тех,
   кто различает цвета. */
a {
    color: var(--c-accent);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    text-decoration-thickness: 1px;
}

a:hover {
    color: var(--c-accent-hover);
    text-decoration-thickness: 2px;
}

/* ── Фокус ─────────────────────────────────────────────────────────────────────
   Видимая обводка обязательна: без неё работа с клавиатуры превращается
   в угадывание, где сейчас курсор. Отступ обводки не даёт ей слиться с рамкой
   самого элемента. */
:focus-visible {
    outline: 3px solid var(--c-focus);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* Обводка по умолчанию снимается только там, где её заменяет :focus-visible. */
:focus:not(:focus-visible) {
    outline: none;
}

img,
svg {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* ── Вспомогательные классы ──────────────────────────────────────────────────── */

/* Текст только для чтения с экрана: подпись таблицы, пояснение к значку,
   заголовок раздела, который зряче виден из вёрстки. Элемент остаётся в потоке
   и доступен, но не занимает места. */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Тот же приём, но элемент показывается, получив фокус: так работает ссылка
   пропуска навигации. */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.muted {
    color: var(--c-text-muted);
}

.text-sm {
    font-size: var(--fs-sm);
}

.measure {
    max-width: var(--measure);
}

/* Вертикальный ритм списка блоков: вместо отступа у каждого элемента — одно
   правило на контейнер. Так пропущенный отступ невозможен по построению. */
.stack > * + * {
    margin-top: var(--s-4);
}

.stack-sm > * + * {
    margin-top: var(--s-2);
}

.stack-lg > * + * {
    margin-top: var(--s-6);
}

/* Горизонтальная группа, переносящаяся на узком экране: кнопки, бейджи, фильтры. */
.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3);
}

.cluster--center {
    justify-content: center;
}

/* Сетка карточек: число колонок выбирает браузер по доступной ширине, поэтому
   отдельных правил под планшет и телефон не требуется. */
.grid-cards {
    display: grid;
    gap: var(--s-4);
    grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
}

.mt-0 {
    margin-top: 0;
}

.mb-0 {
    margin-bottom: 0;
}

/* ── Движение ──────────────────────────────────────────────────────────────────
   Для тех, кто просил систему уменьшить движение, анимации выключаются целиком:
   для части людей это не вопрос вкуса, а вопрос самочувствия. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Печать ────────────────────────────────────────────────────────────────────
   Кабинет печатают: приказ, состав группы, сводку. На бумаге не нужны ни меню,
   ни кнопки действий. */
@media print {
    body {
        background: #ffffff;
        color: #000000;
    }

    .cabinet__sidebar,
    .cabinet__topbar,
    .skip-link,
    .no-print {
        display: none !important;
    }

    .cabinet__main,
    .cabinet__content {
        padding: 0 !important;
    }
}