/* base.css — то, что задаётся один раз: шкалы, типографика, фокус, движение.
 *
 * Закон — docs/design.md. Цвета берутся только ролями из palette.css
 * (var(--md-sys-color-*)) и двумя фирменными переменными. Прямых значений цвета
 * в этом файле нет ни одного.
 *
 * Порядок подключения: palette.css → base.css → components.css.
 */

/* ── Шрифты интерфейса ──────────────────────────────────────────────
 *
 * Раздаются со своего сайта. Зачем: в карточках клиентов паспорта и банковские
 * реквизиты, а шрифты со стороннего узла означают, что браузер сотрудника
 * сообщает ему свой адрес при каждом открытии страницы. Тайский закон о
 * персональных данных списан с европейского, где это уже признавали передачей
 * данных третьей стороне. По той же причине завендорен supabase-js.
 *
 * Три языка: русский, английский, тайский. Roboto закрывает латиницу и
 * кириллицу, Noto Sans Thai — только тайские знаки: латиницу тайскому
 * интерфейсу отдаёт тот же Roboto, второй раз её тащить незачем. Наборы
 * latin-ext и cyrillic-ext не берём — редкие знаки, ради которых удвоится вес.
 *
 * Третье семейство — Montserrat, и оно особое: только заголовки страницы
 * клиента (design.md §4), внутри системы его нет. Латиница и кириллица,
 * начертания 400 и 600. Тайских глифов в Montserrat НЕТ — это записано в
 * design.md §4, — поэтому в стеке --font-brand за ним сразу стоит Noto Sans
 * Thai и тайский заголовок падает на него.
 *
 * unicode-range у каждого правила сохранён ровно так, как отдаёт Google, и
 * трогать его нельзя: именно он заставляет браузер скачать только нужный
 * набор. Без него русский сотрудник скачал бы тайский шрифт, а тайский —
 * кириллицу.
 *
 * Правил 10, а файлов 5: Roboto v51, Noto Sans Thai v29 и Montserrat v31 —
 * переменные шрифты, один файл несёт всю ось насыщенности, поэтому 400 и 500
 * (у Montserrat 400 и 600) ссылаются на один и тот же woff2. Так отдаёт и Google.
 *
 * Вес папки: 151.9 КБ (пять woff2). Браузер берёт только нужное:
 * сотруднику внутри системы уходит 65.2 КБ (Roboto latin + cyrillic), тайский
 * и Montserrat он не скачивает вовсе. Montserrat трогает только тот, кто
 * открыл страницу клиента.
 *
 * ПОЧЕМУ ПРАВИЛА СТОЯТ ЗДЕСЬ, А НЕ В ОТДЕЛЬНОМ ФАЙЛЕ ЧЕРЕЗ @import.
 * Отдельный fonts.css с подключением `@import url("fonts.css")` работал верно:
 * браузер разрешает адрес относительно файла стилей и берёт /core/fonts.css.
 * Но axe-core при разборе контраста дочитывает текст стилей своим кодом и
 * разрешает тот же адрес относительно ДОКУМЕНТА — выходил запрос /fonts.css от
 * корня сайта и 404 на каждый разбор доступности, красными стояли проверки
 * money и registry. Установлено опытом 24.08.2026 на копии web/.
 * Абсолютный путь /core/fonts.css это лечит, но ломает открытие системы из
 * подкаталога, а место размещения ещё не выбрано. Поэтому @import убран вовсе,
 * а правила перенесены сюда. Адреса файлов относительные и разрешаются от
 * этого файла; axe шрифты не качает, ему нужен только текст стилей, промахнуться
 * теперь не на чем. Возвращать @import не нужно — проверка css-check следит.
 *
 * Как обновить (вручную, сборщика в проекте нет):
 *   1. Забрать таблицу правил заголовком браузера, иначе отдаст старый формат:
 *      curl -A "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36
 *      (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36" одной строкой, адрес:
 *      https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&family=Noto+Sans+Thai:wght@400;500&display=swap
 *      Без заголовка браузера Google отдаст ttf вместо woff2 и без наборов.
 *   2. Оставить правила Roboto latin и cyrillic, Noto Sans Thai thai,
 *      Montserrat latin и cyrillic (адрес для Montserrat отдельный:
 *      css2?family=Montserrat:wght@400;600&display=swap).
 *   3. Скачать woff2 из их src в fonts/, имена — <семейство>-<набор>.woff2.
 *   4. Перенести правила сюда как есть, поменяв только src.
 *
 * Лицензии, обе разрешают раздачу со своего сайта:
 *   Roboto и Noto Sans Thai — Apache 2.0, fonts/LICENSE.txt;
 *   Montserrat — SIL Open Font License 1.1, fonts/LICENSE-OFL.txt.
 * Правообладатели и версии — fonts/NOTICE.txt.
 */

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/roboto-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/roboto-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/roboto-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/roboto-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* thai */
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/noto-sans-thai-thai.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

/* thai */
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/noto-sans-thai-thai.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

/* ── Montserrat: только заголовки страницы клиента ──────────────────
 * design.md §4: шрифт сайта фирмы, чтобы она узнавалась. Внутри системы
 * весь текст на Roboto — Montserrat туда не тащим. Тайских глифов в нём
 * нет, поэтому в стеке --font-brand следом стоит Noto Sans Thai: тайский
 * заголовок честно падает на него. */

/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/montserrat-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/montserrat-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ------------------------------------------------------------------ */
/* 1. Шкалы                                                            */
/* ------------------------------------------------------------------ */

:root {
  /* Шрифт. design.md §4: Roboto держит плотные таблицы, Noto Sans Thai нужен
   * для тайских знаков — без тайских глифов текст просто не соберётся.
   * Хвост стека системный: если Google Fonts не отдал шрифты (нет сети),
   * интерфейс читаемо деградирует на Segoe UI / system-ui. */
  --font-sans: Roboto, "Noto Sans Thai", "Segoe UI", system-ui, sans-serif;

  /* Фирменный шрифт заголовков страницы клиента (design.md §4). Noto Sans Thai
   * стоит сразу за Montserrat намеренно: тайских глифов в Montserrat нет, и без
   * него тайский заголовок свалился бы на системный шрифт. Roboto следом —
   * запас на случай, если Montserrat не доехал. */
  --font-brand: Montserrat, "Noto Sans Thai", Roboto, "Segoe UI", system-ui, sans-serif;

  /* Мера строки — предел ширины текста для чтения (design.md §9).
   * Считается в знаках, а не в пикселях: ch — ширина знака «0» текущего
   * шрифта, поэтому мера остаётся мерой при любом кегле. 65 знаков — середина
   * диапазона 45–75, за которым строку тяжело вести глазом. При основном
   * тексте страницы клиента (Body Large, 16px) это примерно 585px. */
  --sl-measure: 65ch;

  /* --- Типографика, шкала M3, design.md §4 --------------------------- *
   * 12 стилей. Display (57/45/36) не используем: экраны плотные.
   * Размеры в rem, чтобы уважалась настройка размера шрифта у человека:
   * 1rem = 16px, поэтому 2rem = 32px и так далее.                       */

  --sl-type-headline-l-size: 2rem;        /* 32px */
  --sl-type-headline-l-line: 2.5rem;      /* 40px */
  --sl-type-headline-l-weight: 400;
  --sl-type-headline-l-track: 0;

  --sl-type-headline-m-size: 1.75rem;     /* 28px */
  --sl-type-headline-m-line: 2.25rem;     /* 36px */
  --sl-type-headline-m-weight: 400;
  --sl-type-headline-m-track: 0;

  --sl-type-headline-s-size: 1.5rem;      /* 24px */
  --sl-type-headline-s-line: 2rem;        /* 32px */
  --sl-type-headline-s-weight: 400;
  --sl-type-headline-s-track: 0;

  --sl-type-title-l-size: 1.375rem;       /* 22px */
  --sl-type-title-l-line: 1.75rem;        /* 28px */
  --sl-type-title-l-weight: 400;
  --sl-type-title-l-track: 0;

  --sl-type-title-m-size: 1rem;           /* 16px */
  --sl-type-title-m-line: 1.5rem;         /* 24px */
  --sl-type-title-m-weight: 500;
  --sl-type-title-m-track: 0.009375rem;   /* 0.15px */

  --sl-type-title-s-size: 0.875rem;       /* 14px */
  --sl-type-title-s-line: 1.25rem;        /* 20px */
  --sl-type-title-s-weight: 500;
  --sl-type-title-s-track: 0.00625rem;    /* 0.1px */

  --sl-type-body-l-size: 1rem;            /* 16px */
  --sl-type-body-l-line: 1.5rem;          /* 24px */
  --sl-type-body-l-weight: 400;
  --sl-type-body-l-track: 0.03125rem;     /* 0.5px */

  --sl-type-body-m-size: 0.875rem;        /* 14px */
  --sl-type-body-m-line: 1.25rem;         /* 20px */
  --sl-type-body-m-weight: 400;
  --sl-type-body-m-track: 0.015625rem;    /* 0.25px */

  --sl-type-body-s-size: 0.75rem;         /* 12px */
  --sl-type-body-s-line: 1rem;            /* 16px */
  --sl-type-body-s-weight: 400;
  --sl-type-body-s-track: 0.025rem;       /* 0.4px */

  --sl-type-label-l-size: 0.875rem;       /* 14px */
  --sl-type-label-l-line: 1.25rem;        /* 20px */
  --sl-type-label-l-weight: 500;
  --sl-type-label-l-track: 0.00625rem;    /* 0.1px */

  --sl-type-label-m-size: 0.75rem;        /* 12px */
  --sl-type-label-m-line: 1rem;           /* 16px */
  --sl-type-label-m-weight: 500;
  --sl-type-label-m-track: 0.03125rem;    /* 0.5px */

  --sl-type-label-s-size: 0.6875rem;      /* 11px */
  --sl-type-label-s-line: 1rem;           /* 16px */
  --sl-type-label-s-weight: 500;
  --sl-type-label-s-track: 0.03125rem;    /* 0.5px */

  /* --- Скругления, design.md §5 -------------------------------------- */
  --sl-shape-xs: 4px;      /* всплывающие сообщения */
  --sl-shape-s: 8px;       /* поля ввода, меню, чипы */
  --sl-shape-m: 12px;      /* карточки дел, счетов, задач */
  --sl-shape-l: 16px;      /* плавающая кнопка действия, боковая панель */
  --sl-shape-xl: 28px;     /* диалоги, нижние шторки на мобильном */
  --sl-shape-full: 9999px; /* кнопки, бейджи, переключатели */

  /* --- Отступы, design.md §7 ----------------------------------------- *
   * Базовая единица 4px, разрешены только эти семь значений.
   * Имя переменной равно её значению: var(--sl-space-16) читается без
   * заглядывания в этот файл, и промежуточное значение не подставишь.    */
  --sl-space-4: 4px;
  --sl-space-8: 8px;
  --sl-space-12: 12px;
  --sl-space-16: 16px;
  --sl-space-24: 24px;
  --sl-space-32: 32px;
  --sl-space-48: 48px;

  /* --- Размеры компонентов, шкала M3 --------------------------------- */
  --sl-touch: 48px;          /* минимальная область нажатия, design.md §10 */
  --sl-topbar-h: 64px;       /* M3 top app bar, small */
  --sl-rail-w: 80px;         /* M3 navigation rail */
  --sl-bar-h: 80px;          /* M3 navigation bar */
  --sl-fab-size: 56px;       /* M3 FAB, medium */
  --sl-chip-h: 32px;         /* M3 chip */
  --sl-check-size: 20px;     /* M3 checkbox: сам квадратик; область нажатия даёт обёртка */
  --sl-nav-ind-w: 56px;      /* M3 navigation item, ширина указателя выбора */
  --sl-nav-ind-h: 32px;      /* M3 navigation item, высота указателя выбора */
  --sl-progress-h: 4px;      /* M3 linear progress */
  --sl-icon: 24px;           /* M3 icon */
  --sl-dialog-max: 560px;    /* M3 dialog, максимальная ширина */
  --sl-auth-max: 400px;      /* карточка входа: форма из двух полей */
  --sl-kv-label: 160px;      /* пара «поле — значение»: основа подписи */
  --sl-kv-value: 200px;      /* пара «поле — значение»: основа значения */
  --sl-snackbar-max: 560px;  /* M3 snackbar, максимальная ширина */

  /* Толщина обычной границы. Рамка фокуса задаётся отдельно ниже. */
  --sl-line: 1px;
  --sl-focus-w: 2px;         /* design.md §10: рамка 2px */
  --sl-focus-offset: 2px;    /* design.md §10: отступ 2px */

  /* --- Раскладка, design.md §7 --------------------------------------- *
   * Переломы: до 600px одна колонка и нижняя панель, 600–1240px две
   * колонки, от 1240px боковая полоса навигации. В @media переменные
   * не подставляются, поэтому числа стоят в самих запросах, а здесь
   * записаны для чтения и для проверки скриптом.                        */
  --sl-bp-tablet: 600px;
  --sl-bp-desktop: 1240px;

  /* --- Движение, токены M3 ------------------------------------------- */
  --sl-ease: cubic-bezier(0.2, 0, 0, 1);              /* emphasized */
  --sl-ease-out: cubic-bezier(0.05, 0.7, 0.1, 1);     /* вход на экран */
  --sl-ease-in: cubic-bezier(0.3, 0, 0.8, 0.15);      /* уход с экрана */
  --sl-dur-short: 100ms;   /* short2 — микровзаимодействия */
  --sl-dur-exit: 200ms;    /* short4 — уход */
  --sl-dur-med: 300ms;     /* medium2 — обычный переход */
  --sl-dur-enter: 400ms;   /* medium4 — вход */
  --sl-dur-loop: 1000ms;   /* extra-long4 — цикл полосы загрузки */

  /* --- Уровни поверхности, design.md §6 ------------------------------- *
   * Высота показывается ТОНОМ, а не тенью: уровень выше — поверхность
   * светлее. Экраны берут уровень, когда важно не имя роли, а место в
   * стопке. Ядро в components.css пишет роли напрямую.                   */
  --sl-level-0: var(--md-sys-color-surface);                   /* фон страницы */
  --sl-level-1: var(--md-sys-color-surface-container-low);     /* карточка в списке */
  --sl-level-2: var(--md-sys-color-surface-container);         /* панель навигации, шапка */
  --sl-level-3: var(--md-sys-color-surface-container-high);    /* меню, диалог */
  --sl-level-4: var(--md-sys-color-surface-container-highest); /* наведение и фокус */

  /* --- Тени ----------------------------------------------------------- *
   * Только там, где элемент физически висит над содержимым: плавающая
   * кнопка и диалог (design.md §6). Карточки в списке тенями не
   * обвешиваем. Геометрия — из таблицы высот M3; цвет — роль shadow,
   * прозрачность набирается через color-mix, без прямых значений цвета.  */
  --sl-shadow-3:
    0 4px 8px 3px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent),
    0 1px 3px color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent);

  /* --- Порядок наложения ---------------------------------------------- */
  --sl-z-rail: 10;
  --sl-z-topbar: 20;
  --sl-z-bar: 30;
  --sl-z-snackbar: 40;
}

/* ------------------------------------------------------------------ */
/* 2. Основа страницы                                                  */
/* ------------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  /* Фон и цвет текста заданы ролями явно: без этого при тёмной теме
   * страница осталась бы на белом фоне браузера. */
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font-family: var(--font-sans);
  font-size: var(--sl-type-body-m-size);
  line-height: var(--sl-type-body-m-line);
  letter-spacing: var(--sl-type-body-m-track);
  font-weight: var(--sl-type-body-m-weight);
}

/* Формы наследуют шрифт: браузер по умолчанию ставит им свой. */
button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

img,
svg,
video {
  max-width: 100%;
}

/* ------------------------------------------------------------------ */
/* 3. Типографика — 12 стилей, design.md §4                            */
/* ------------------------------------------------------------------ */

.sl-headline-l,
.sl-headline-m,
.sl-headline-s,
.sl-title-l,
.sl-title-m,
.sl-title-s,
.sl-body-l,
.sl-body-m,
.sl-body-s,
.sl-label-l,
.sl-label-m,
.sl-label-s {
  font-family: var(--font-sans);
  margin: 0;
}

.sl-headline-l {
  font-size: var(--sl-type-headline-l-size);
  line-height: var(--sl-type-headline-l-line);
  font-weight: var(--sl-type-headline-l-weight);
  letter-spacing: var(--sl-type-headline-l-track);
}

.sl-headline-m {
  font-size: var(--sl-type-headline-m-size);
  line-height: var(--sl-type-headline-m-line);
  font-weight: var(--sl-type-headline-m-weight);
  letter-spacing: var(--sl-type-headline-m-track);
}

.sl-headline-s {
  font-size: var(--sl-type-headline-s-size);
  line-height: var(--sl-type-headline-s-line);
  font-weight: var(--sl-type-headline-s-weight);
  letter-spacing: var(--sl-type-headline-s-track);
}

.sl-title-l {
  font-size: var(--sl-type-title-l-size);
  line-height: var(--sl-type-title-l-line);
  font-weight: var(--sl-type-title-l-weight);
  letter-spacing: var(--sl-type-title-l-track);
}

.sl-title-m {
  font-size: var(--sl-type-title-m-size);
  line-height: var(--sl-type-title-m-line);
  font-weight: var(--sl-type-title-m-weight);
  letter-spacing: var(--sl-type-title-m-track);
}

.sl-title-s {
  font-size: var(--sl-type-title-s-size);
  line-height: var(--sl-type-title-s-line);
  font-weight: var(--sl-type-title-s-weight);
  letter-spacing: var(--sl-type-title-s-track);
}

.sl-body-l {
  font-size: var(--sl-type-body-l-size);
  line-height: var(--sl-type-body-l-line);
  font-weight: var(--sl-type-body-l-weight);
  letter-spacing: var(--sl-type-body-l-track);
}

.sl-body-m {
  font-size: var(--sl-type-body-m-size);
  line-height: var(--sl-type-body-m-line);
  font-weight: var(--sl-type-body-m-weight);
  letter-spacing: var(--sl-type-body-m-track);
}

.sl-body-s {
  font-size: var(--sl-type-body-s-size);
  line-height: var(--sl-type-body-s-line);
  font-weight: var(--sl-type-body-s-weight);
  letter-spacing: var(--sl-type-body-s-track);
}

.sl-label-l {
  font-size: var(--sl-type-label-l-size);
  line-height: var(--sl-type-label-l-line);
  font-weight: var(--sl-type-label-l-weight);
  letter-spacing: var(--sl-type-label-l-track);
}

.sl-label-m {
  font-size: var(--sl-type-label-m-size);
  line-height: var(--sl-type-label-m-line);
  font-weight: var(--sl-type-label-m-weight);
  letter-spacing: var(--sl-type-label-m-track);
}

.sl-label-s {
  font-size: var(--sl-type-label-s-size);
  line-height: var(--sl-type-label-s-line);
  font-weight: var(--sl-type-label-s-weight);
  letter-spacing: var(--sl-type-label-s-track);
}

/* Тайский язык: design.md §4 — высота строки увеличивается на ступень,
 * иначе диакритика режется соседними строками (тайские знаки ставятся
 * вокруг согласной сверху, снизу и сбоку, до четырёх на слог).
 * Ступень равна базовой единице отступов — 4px. Включается атрибутом
 * lang="th" на <html>; до появления тайской версии правило не работает. */
:root[lang="th"] {
  --sl-type-headline-l-line: 2.75rem; /* 44px */
  --sl-type-headline-m-line: 2.5rem;  /* 40px */
  --sl-type-headline-s-line: 2.25rem; /* 36px */
  --sl-type-title-l-line: 2rem;       /* 32px */
  --sl-type-title-m-line: 1.75rem;    /* 28px */
  --sl-type-title-s-line: 1.5rem;     /* 24px */
  --sl-type-body-l-line: 1.75rem;     /* 28px */
  --sl-type-body-m-line: 1.5rem;      /* 24px */
  --sl-type-body-s-line: 1.25rem;     /* 20px */
  --sl-type-label-l-line: 1.5rem;     /* 24px */
  --sl-type-label-m-line: 1.25rem;    /* 20px */
  --sl-type-label-s-line: 1.25rem;    /* 20px */
}

/* ------------------------------------------------------------------ */
/* 4. Видимый фокус — design.md §10                                    */
/* ------------------------------------------------------------------ */

/* Рамка 2px с отступом 2px на всём, что получает фокус с клавиатуры.
 * :focus-visible, а не :focus — чтобы рамка не появлялась от мыши.
 * Правила «убрать outline» нет нигде: фокус не гасится. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
dialog:focus-visible,
[tabindex]:focus-visible,
[contenteditable]:focus-visible {
  outline: var(--sl-focus-w) solid var(--md-sys-color-primary);
  outline-offset: var(--sl-focus-offset);
}

/* ------------------------------------------------------------------ */
/* 5. Движение — design.md §10                                         */
/* ------------------------------------------------------------------ */

/* Системная настройка «уменьшить движение» выключает анимации целиком.
 * !important здесь не правка специфичности, а гарантия: обещание
 * доступности не должно перебиваться правилом отдельного компонента. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}