/*
 * Generated by scripts/bundle-uikit.mjs.
 * Sources: ../uikit/packages/core/styles/index.css and ui/styles/accounts.css.
 * Do not edit this file manually; run "make uikit-css".
 */
/* ==========================================================================
   GA UI Kit · core

   Один файл подключает весь кит:
     <link rel="stylesheet" href="…/packages/core/styles/index.css">

   Файл на элемент. Список ниже — полный состав кита; сверить его
   с реестром и разметкой можно командой `node scripts/check.mjs`.

   Порядок важен: токены → база → раскладка → элементы.
   Файлы с подчёркиванием — общие части, а не элементы:
   их не бывает в разметке, они подключаются до тех, кто на них опирается.
   ========================================================================== */

/* ==========================================================================
   GA UI Kit · tokens
   Значения — из раздела 5 SPEC.md, восстановлены по боевому коду
   gostassistent.ru и шкалам Untitled UI.

   Два слоя:
     1. шкалы     — сырьё. В правилах компонентов не используются никогда.
     2. семантика — то, чем пользуются компоненты и интерфейсы.

   Правило: значений мимо токенов в ките нет. Ни цветов, ни отступов,
   ни радиусов, ни теней.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     1. Шкалы. Сырьё, напрямую не используем
     ------------------------------------------------------------------ */

  /* Blue */
  --ga-blue-50: #eff4ff;
  --ga-blue-100: #d1e0ff;
  --ga-blue-200: #b2ccff;
  --ga-blue-300: #84adff;
  --ga-blue-400: #528bff;
  --ga-blue-500: #2970ff;
  --ga-blue-600: #155eef;
  --ga-blue-700: #004eeb;
  --ga-blue-800: #0040c1;
  --ga-blue-900: #00359e;

  /* Gray */
  --ga-gray-25: #fcfcfd;
  --ga-gray-50: #f9fafb;
  --ga-gray-100: #f2f4f7;
  --ga-gray-200: #eaecf0;
  --ga-gray-300: #d0d5dd;
  --ga-gray-400: #98a2b3;
  --ga-gray-500: #667085;
  --ga-gray-600: #475467;
  --ga-gray-700: #344054;
  --ga-gray-800: #182230;
  --ga-gray-900: #101828;

  /* Gray Blue — в проде встречаются только эти четыре ступени */
  --ga-gray-blue-100: #eaecf5;
  --ga-gray-blue-200: #d5d9eb;
  --ga-gray-blue-300: #b3b8db;
  --ga-gray-blue-800: #293056;

  /* Green */
  --ga-green-50: #edfcf2;
  --ga-green-100: #dcfae6;
  --ga-green-500: #16b364;
  --ga-green-700: #067647;

  /* Error */
  --ga-error-100: #fee4e2;
  --ga-error-500: #f04438;
  --ga-error-600: #d92d20;
  --ga-error-700: #b42318;

  /* Yellow. Ступень 500 — единственный цвет, дописанный из Untitled UI:
     в проде warning системно отсутствует */
  --ga-yellow-100: #fef7c3;
  --ga-yellow-500: #f79009;
  --ga-yellow-900: #713b12;

  /* Значения вне шкал. Узнаваемые детали сайта, оставлены сознательно */
  --ga-raw-tag-text: #215acc;    /* $primary-600 — текст мягкой кнопки */
  --ga-raw-gradient-from: #1687ec; /* градиентная кнопка, левый край */
  --ga-raw-gradient-to: #7ec1fe;   /* градиентная кнопка, правый край */
  --ga-raw-border: #d8e0f0;      /* $border — основная граница */
  --ga-raw-canvas: #f9fafc;      /* $backgroundColor — фон страницы */
  --ga-raw-disabled: #b2b8c2;    /* $disabled */
  --ga-raw-white: #ffffff;
  --ga-raw-law: #1691b3;         /* $law — документы и законодательство */
  --ga-raw-pink: #ee46bc;        /* $pink — активный пункт навигации, статьи */

  /* ------------------------------------------------------------------
     2. Семантика. Только этим пользуются компоненты
     ------------------------------------------------------------------ */

  /* Поверхности */
  --ga-bg-canvas: var(--ga-raw-canvas);
  --ga-bg-surface: var(--ga-raw-white);
  --ga-bg-surface-muted: var(--ga-gray-50);
  --ga-bg-surface-subtle: var(--ga-gray-25);
  --ga-scrollbar-thumb: var(--ga-blue-300);
  --ga-scrollbar-track: var(--ga-gray-100);
  --ga-bg-accent-subtle: var(--ga-blue-50);
  --ga-bg-accent-strong: var(--ga-blue-100);
  --ga-bg-accent-soft: #f5f8ff;
  --ga-bg-disabled: var(--ga-gray-100);
  --ga-bg-overlay: rgba(16, 24, 40, 0.45);
  --ga-bg-veil: rgba(255, 255, 255, 0.7);

  /* Текст */
  --ga-text-primary: var(--ga-gray-800);
  --ga-text-secondary: var(--ga-gray-700);
  --ga-text-tertiary: var(--ga-gray-600);
  --ga-text-muted: var(--ga-gray-500);
  --ga-text-placeholder: var(--ga-gray-500);
  --ga-text-subtle: var(--ga-gray-400);   /* разделители, многоточие, тихая мелочь */
  --ga-text-disabled: var(--ga-raw-disabled);
  --ga-text-on-accent: var(--ga-raw-white);
  --ga-text-link: var(--ga-blue-600);
  --ga-text-accent-soft: var(--ga-raw-tag-text);
  --ga-text-accent-strong: var(--ga-blue-700);

  /* Границы */
  --ga-border: var(--ga-raw-border);
  --ga-border-strong: var(--ga-blue-200);
  --ga-border-subtle: var(--ga-gray-200);
  --ga-border-disabled: var(--ga-raw-disabled);
  --ga-border-control: var(--ga-gray-blue-300); /* рамка чекбокса и радио */

  /* Акцент */
  --ga-accent: var(--ga-blue-400);
  --ga-accent-hover: var(--ga-blue-500);
  --ga-accent-active: var(--ga-blue-600);
  --ga-accent-icon: var(--ga-blue-400);
  --ga-accent-strong: var(--ga-blue-900);

  /* Статусные тона */
  --ga-success: var(--ga-green-500);
  --ga-success-soft: var(--ga-green-100);
  --ga-success-text: var(--ga-green-700);

  --ga-danger: var(--ga-error-600);
  --ga-danger-soft: var(--ga-error-100);
  --ga-danger-text: var(--ga-error-700);

  --ga-warning: var(--ga-yellow-500);
  --ga-warning-soft: var(--ga-yellow-100);
  --ga-warning-text: var(--ga-yellow-900);

  --ga-gradient-accent: linear-gradient(
    90deg,
    var(--ga-raw-gradient-from) 0%,
    var(--ga-raw-gradient-to) 100%
  );

  --ga-brand-soft: var(--ga-blue-50);
  --ga-brand-text: var(--ga-blue-600);

  --ga-neutral-soft: var(--ga-gray-100);
  --ga-neutral-text: var(--ga-gray-700);

  /* Выключенные и невыбранные контролы */
  --ga-bg-disabled-strong: var(--ga-raw-disabled);
  --ga-bg-switch-off: var(--ga-gray-blue-300);

  /* Типы сущностей. Цвет кружка с иконкой в карточке */
  --ga-entity-document: var(--ga-raw-law);
  --ga-entity-article: var(--ga-raw-pink);
  --ga-entity-canceled: var(--ga-yellow-900);

  /* ------------------------------------------------------------------
     3. Типографика. Базовый кегль 14px, шрифт Inter
     ------------------------------------------------------------------ */
  --ga-font-sans: "Inter", "Inter var", system-ui, -apple-system, "Segoe UI",
    Roboto, sans-serif;

  --ga-text-xs: 0.75rem;    /* 12px */
  --ga-text-sm: 0.875rem;   /* 14px — база */
  --ga-text-md: 1rem;       /* 16px */
  --ga-text-lg: 1.125rem;   /* 18px */
  --ga-text-xl: 1.25rem;    /* 20px */
  --ga-text-2xl: 1.5rem;    /* 24px */
  --ga-text-3xl: 2rem;      /* 32px */

  --ga-leading-tight: 1.25;
  --ga-leading-normal: 1.45;
  --ga-leading-relaxed: 1.6;

  --ga-weight-regular: 400;
  --ga-weight-medium: 500;
  --ga-weight-semibold: 600;
  --ga-weight-bold: 700;

  /* ------------------------------------------------------------------
     4. Отступы. Шаг 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64
     ------------------------------------------------------------------ */
  --ga-space-4: 0.25rem;
  --ga-space-8: 0.5rem;
  --ga-space-12: 0.75rem;
  --ga-space-16: 1rem;
  --ga-space-20: 1.25rem;
  --ga-space-24: 1.5rem;
  --ga-space-32: 2rem;
  --ga-space-40: 2.5rem;
  --ga-space-48: 3rem;
  --ga-space-64: 4rem;

  /* ------------------------------------------------------------------
     5. Радиусы
     ------------------------------------------------------------------ */
  --ga-radius-xs: 6px;    /* чекбокс и другая мелочь */
  --ga-radius-sm: 8px;
  --ga-radius-md: 10px;   /* радиус кнопки */
  --ga-radius-lg: 12px;   /* самый частый: поля, карточки */
  --ga-radius-xl: 16px;
  --ga-radius-pill: 999px;
  --ga-radius-circle: 50%;

  /* ------------------------------------------------------------------
     6. Размеры
     ------------------------------------------------------------------ */
  --ga-control-sm: 34px;
  --ga-control-md: 40px;
  --ga-control-lg: 48px;          /* крупная pill-кнопка */
  --ga-control-circle: 32px;      /* кружок под иконку внутри pill-кнопки */
  --ga-control-indicator: 20px;   /* чекбокс, радио */
  --ga-control-dot: 8px;          /* точка внутри отмеченного радио */

  --ga-switch-width: 32px;
  --ga-switch-height: 20px;
  --ga-switch-thumb: 16px;

  --ga-avatar-sm: 32px;
  --ga-avatar-md: 40px;
  --ga-avatar-lg: 64px;
  --ga-avatar-ring-width: 2px;
  --ga-doc-card-icon: 36px;
  --ga-empty-state-icon: 64px;
  --ga-avatar-ring-width-lg: 3px;

  --ga-icon-xs: 10px;              /* крестик чипа в поле с тегами */
  --ga-icon-sm: 16px;
  --ga-icon-md: 20px;
  --ga-icon-lg: 24px;

  --ga-appbar-height: 95px;
  --ga-appbar-height-sm: 60px;
  --ga-slider-track: 4px;
  --ga-slider-thumb: 28px;
  --ga-upload-height: 200px;
  --ga-file-basis: 190px;
  --ga-dialog-sm: 400px;
  --ga-dialog-md: 560px;
  --ga-dialog-lg: 720px;
  --ga-drawer-width: 400px;
  --ga-menu-min-width: 200px;
  --ga-menu-max-height: 280px;
  --ga-popover-width: 320px;
  --ga-tooltip-width: 240px;
  --ga-toast-width: 350px;

  --ga-content-max: 900px;
  --ga-content-max-wide: 1060px;
  --ga-page-min: 320px;

  --ga-border-width: 1px;
  --ga-control-border-width: 2px; /* рамка чекбокса и радио */
  --ga-scrollbar-width: 8px;
  --ga-scrollbar-height: 6px;
  --ga-sidebar-width: 300px;

  /* ------------------------------------------------------------------
     7. Тени
     ------------------------------------------------------------------ */
  --ga-shadow-control: 0 1px 2px 0 rgba(184, 200, 224, 0.22);
  --ga-shadow-thumb: 0 6px 13px rgba(0, 0, 0, 0.12), 0 0.5px 4px rgba(0, 0, 0, 0.12);
  --ga-shadow-appbar: 0 3px 8px 0 rgba(132, 142, 165, 0.1);
  --ga-shadow-soft: 0 6px 12px 0 rgba(165, 171, 183, 0.2);
  --ga-shadow-outline: 0 6px 12px 0 rgba(63, 140, 255, 0.1);
  --ga-shadow-glow: 0 0 8px 0 rgba(63, 140, 255, 0.25);
  --ga-shadow-action: 0 6px 12px 0 rgba(63, 140, 255, 0.26);
  --ga-shadow-danger-glow: 0 0 8px 0 rgba(217, 45, 32, 0.2);

  /* ------------------------------------------------------------------
     8. Фокус
     ------------------------------------------------------------------ */
  --ga-focus-ring-width: 2px;
  --ga-focus-ring-offset: 2px;
  --ga-focus-ring-color: var(--ga-accent);

  /* ------------------------------------------------------------------
     9. Переходы
     ------------------------------------------------------------------ */
  --ga-transition-fast: 150ms ease;
  --ga-transition-base: 300ms ease;

  /* ------------------------------------------------------------------
     10. Слои
     ------------------------------------------------------------------ */
  --ga-z-appbar: 50;
  --ga-z-dropdown: 100;
  --ga-z-popover: 200;
  --ga-z-tooltip: 300;
  --ga-z-drawer: 400;
  /* Диалога в шкале нет: showModal() поднимает его в top layer браузера,
     который лежит поверх любого z-index */
  --ga-z-toast: 600;

  /* ------------------------------------------------------------------
     11. Иконки, встроенные в стили

     Внутри data-URI нельзя сослаться на var(), поэтому цвет там записан
     значением. Все оставшиеся — mask-*: это только геометрия, чёрный в
     них служебный, а красит их background-color токеном на месте
     использования.
     ------------------------------------------------------------------ */

  --ga-mask-check: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  --ga-mask-minus: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  --ga-mask-chevron-down: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Брейкпоинты. Медиазапросы не умеют читать var(), поэтому значения стоят
   в самих правилах. Полный список — здесь, других в ките нет:

     480px  — телефоны S
     768px  — телефоны L
     992px  — планшеты
     1220px — ноутбуки и ПК
   -------------------------------------------------------------------------- */
/* ==========================================================================
   GA UI Kit · base
   Сброс, фокус, скроллбары, служебные классы.

   Обёртки-контейнера нет и не будет: всё ниже работает от <body>,
   а не внутри какого-то `.ga-root`.

   Типографика переехала в компоненты: heading, text, link, prose.
   ========================================================================== */

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

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

body {
  min-width: var(--ga-page-min);
  margin: 0;
  background-color: var(--ga-bg-canvas);
  color: var(--ga-text-primary);
  font-family: var(--ga-font-sans);
  font-size: var(--ga-text-sm);
  line-height: var(--ga-leading-normal);
  font-weight: var(--ga-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   Блочные элементы: снимаем браузерные отступы. Вертикальный ритм
   расставляет раскладка (.ga-stack), а не margin у текста
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

/* Маркеры остаются у списков внутри текста — их включает .ga-prose */
ul,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--ga-text-primary);
  line-height: var(--ga-leading-tight);
  font-weight: var(--ga-weight-bold);
}

h1 {
  font-size: var(--ga-text-3xl);
}

h2 {
  font-size: var(--ga-text-2xl);
}

h3 {
  font-size: var(--ga-text-xl);
  font-weight: var(--ga-weight-semibold);
}

h4 {
  font-size: var(--ga-text-lg);
  font-weight: var(--ga-weight-semibold);
}

h5,
h6 {
  font-size: var(--ga-text-md);
  font-weight: var(--ga-weight-semibold);
}

@media (max-width: 991.98px) {
  h1 {
    font-size: var(--ga-text-2xl);
  }
}

@media (max-width: 767.98px) {
  h1 {
    font-size: var(--ga-text-xl);
  }

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

a {
  color: var(--ga-text-link);
  text-decoration: none;
  transition: color var(--ga-transition-fast);
}

@media (any-hover: hover) {
  a:hover {
    color: var(--ga-accent-hover);
  }
}

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

hr {
  border: 0;
  border-top: var(--ga-border-width) solid var(--ga-border-subtle);
  margin: 0;
}

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: var(--ga-text-xs);
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
}

button {
  cursor: pointer;
  background-color: transparent;
  border: 0;
  padding: 0;
}

input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

/* --------------------------------------------------------------------------
   Фокус. Один вид на весь кит: кольцо появляется только с клавиатуры
   -------------------------------------------------------------------------- */

:focus {
  outline: none;
}

:focus-visible {
  outline: var(--ga-focus-ring-width) solid var(--ga-focus-ring-color);
  outline-offset: var(--ga-focus-ring-offset);
  border-radius: var(--ga-radius-sm);
}

::selection {
  background-color: var(--ga-bg-accent-subtle);
  color: var(--ga-text-primary);
}

::placeholder {
  color: var(--ga-text-placeholder);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Скроллбары — как на сайте
   -------------------------------------------------------------------------- */

@supports (scrollbar-width: thin) {
  body {
    scrollbar-width: thin;
    scrollbar-color: var(--ga-scrollbar-thumb) var(--ga-scrollbar-track);
  }
}

body::-webkit-scrollbar {
  width: var(--ga-scrollbar-width);
  height: var(--ga-scrollbar-height);
}

body::-webkit-scrollbar-track {
  background-color: var(--ga-scrollbar-track);
}

body::-webkit-scrollbar-thumb {
  border-radius: var(--ga-radius-pill);
  background-color: var(--ga-scrollbar-thumb);
}

/* ------------------------------------------------------------------------
   Служебное
   ------------------------------------------------------------------------ */


.ga-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Типографика ------------------------------------------------------------ */
/* ==========================================================================
   GA UI Kit · Heading — заголовок блока или страницы
   ========================================================================== */

.ga-heading {
  margin: 0;
  color: var(--ga-text-primary);
  font-size: var(--ga-text-xl);
  font-weight: var(--ga-weight-semibold);
  line-height: var(--ga-leading-tight);
}

.ga-heading--xl {
  font-size: var(--ga-text-3xl);
  font-weight: var(--ga-weight-bold);
}

.ga-heading--lg {
  font-size: var(--ga-text-2xl);
  font-weight: var(--ga-weight-bold);
}

.ga-heading--md {
  font-size: var(--ga-text-xl);
  font-weight: var(--ga-weight-semibold);
}

.ga-heading--sm {
  font-size: var(--ga-text-md);
  font-weight: var(--ga-weight-semibold);
}

/* Цвета. По умолчанию заголовок тёмный */
.ga-heading--accent {
  color: var(--ga-accent-active);
}

.ga-heading--secondary {
  color: var(--ga-text-secondary);
}

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

/* Раскладка */
.ga-heading--uppercase {
  text-transform: uppercase;
}

.ga-heading--center {
  text-align: center;
}

@media (max-width: 767.98px) {
  .ga-heading--xl {
    font-size: var(--ga-text-2xl);
  }

  .ga-heading--lg {
    font-size: var(--ga-text-xl);
  }
}
/* ==========================================================================
   GA UI Kit · Text — абзац и подпись
   ========================================================================== */

.ga-text {
  margin: 0;
  font-size: var(--ga-text-sm);
  line-height: var(--ga-leading-normal);
  color: var(--ga-text-primary);
}

.ga-text--xs {
  font-size: var(--ga-text-xs);
}

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

.ga-text--md {
  font-size: var(--ga-text-md);
}

.ga-text--lg {
  font-size: var(--ga-text-lg);
}

.ga-text--secondary {
  color: var(--ga-text-secondary);
}

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

.ga-text--accent {
  color: var(--ga-accent-active);
}

.ga-text--success {
  color: var(--ga-success-text);
}

.ga-text--warning {
  color: var(--ga-warning-text);
}

.ga-text--danger {
  color: var(--ga-danger-text);
}

.ga-text--medium {
  font-weight: var(--ga-weight-medium);
}

.ga-text--semibold {
  font-weight: var(--ga-weight-semibold);
}

.ga-text--bold {
  font-weight: var(--ga-weight-bold);
}

/* Цифры одинаковой ширины: номера документов, даты, суммы */
.ga-text--tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.ga-text--relaxed {
  line-height: var(--ga-leading-relaxed);
}

.ga-text--center {
  text-align: center;
}

.ga-text--truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ga-text--clamp-2,
.ga-text--clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ga-text--clamp-2 {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.ga-text--clamp-3 {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
/* ==========================================================================
   GA UI Kit · Link — ссылка вне текста

   Базовое правило повторяет то, что base.css уже даёт голому <a>. Это
   намеренно: класс должен работать и на <button>, и на <span> — там базы нет.
   Источник значений один, base.css; здесь они продублированы под другой
   селектор, а не заведены заново
   ========================================================================== */

.ga-link {
  color: var(--ga-text-link);
  text-decoration: none;
  transition: color var(--ga-transition-fast);
}

@media (any-hover: hover) {
  .ga-link:hover {
    color: var(--ga-accent-hover);
  }
}

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

.ga-link--underline {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
/* ==========================================================================
   GA UI Kit · Prose — длинный текст статьи
   ========================================================================== */

/* Длинный текст статьи: единственное место, где возвращаются
   маркеры списков и отступы между абзацами */
.ga-prose {
  color: var(--ga-text-secondary);
  line-height: var(--ga-leading-relaxed);
}

.ga-prose > * + * {
  margin-top: var(--ga-space-16);
}

.ga-prose ul,
.ga-prose ol {
  padding-left: var(--ga-space-20);
  list-style: revert;
}

.ga-prose li + li {
  margin-top: var(--ga-space-4);
}
/* Раскладка -------------------------------------------------------------- */
/* ==========================================================================
   GA UI Kit · Page — вертикальные поля страницы
   ========================================================================== */

.ga-page {
  display: flex;
  flex-direction: column;
  gap: var(--ga-gap, var(--ga-space-32));
  min-height: 100dvh;
  padding-block: var(--ga-space-32) var(--ga-space-64);
  background-color: var(--ga-bg-canvas);
}

@media (max-width: 767.98px) {
  .ga-page {
    padding-block: var(--ga-space-20) var(--ga-space-40);
  }
}
/* ==========================================================================
   GA UI Kit · Container — ограничение ширины контента
   ========================================================================== */

.ga-container {
  box-sizing: content-box;
  max-width: var(--ga-content-max);
  margin-inline: auto;
  padding-inline: var(--ga-space-24);
}

.ga-container--wide {
  max-width: var(--ga-content-max-wide);
}

.ga-container--full {
  max-width: none;
}

@media (max-width: 767.98px) {
  .ga-container {
    padding-inline: var(--ga-space-16);
  }
}
/* ==========================================================================
   GA UI Kit · Stack — вертикальный ряд
   ========================================================================== */

.ga-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ga-gap, var(--ga-space-16));
  min-width: 0;
}

.ga-stack--center {
  align-items: center;
}

.ga-stack--start {
  align-items: flex-start;
}

.ga-stack--end {
  align-items: flex-end;
}
/* ==========================================================================
   GA UI Kit · Inline — горизонтальный ряд с переносом
   ========================================================================== */

.ga-inline {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ga-gap, var(--ga-space-8));
  min-width: 0;
}

.ga-inline--nowrap {
  flex-wrap: nowrap;
}

.ga-inline--top {
  align-items: flex-start;
}

.ga-inline--bottom {
  align-items: flex-end;
}

.ga-inline--baseline {
  align-items: baseline;
}

.ga-inline--center {
  justify-content: center;
}

.ga-inline--end {
  justify-content: flex-end;
}

.ga-inline--between {
  justify-content: space-between;
}

/* Элемент, который забирает свободное место в ряду */
.ga-inline__grow {
  flex: 1 1 auto;
  min-width: 0;
}
/* ==========================================================================
   GA UI Kit · Grid — колонки, схлопывающиеся на мобильном
   ========================================================================== */

.ga-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ga-gap, var(--ga-space-20));
  min-width: 0;
}

.ga-grid--cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ga-grid--cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ga-grid--cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Контент плюс боковая колонка */
.ga-grid--sidebar {
  grid-template-columns: minmax(0, 1fr) var(--ga-sidebar-width);
  align-items: start;
}

@media (max-width: 991.98px) {
  .ga-grid--cols-3,
  .ga-grid--cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ga-grid--sidebar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .ga-grid--cols-2,
  .ga-grid--cols-3,
  .ga-grid--cols-4 {
    grid-template-columns: 1fr;
  }
}

/* Ячейка на всю ширину сетки */
.ga-grid__full {
  grid-column: 1 / -1;
}
/* ==========================================================================
   GA UI Kit · Шкала отступов, общая для stack, inline и grid

   Не элемент. Отступ во всех трёх раскладках задаётся одинаково:
   --gap-N, где N — шаг из шкалы (4 8 12 16 20 24 32 40 48 64)
   ========================================================================== */

.ga-stack--gap-4,
.ga-inline--gap-4,
.ga-grid--gap-4 {
  --ga-gap: var(--ga-space-4);
}

.ga-stack--gap-8,
.ga-inline--gap-8,
.ga-grid--gap-8 {
  --ga-gap: var(--ga-space-8);
}

.ga-stack--gap-12,
.ga-inline--gap-12,
.ga-grid--gap-12 {
  --ga-gap: var(--ga-space-12);
}

.ga-stack--gap-16,
.ga-inline--gap-16,
.ga-grid--gap-16 {
  --ga-gap: var(--ga-space-16);
}

.ga-stack--gap-20,
.ga-inline--gap-20,
.ga-grid--gap-20 {
  --ga-gap: var(--ga-space-20);
}

.ga-stack--gap-24,
.ga-inline--gap-24,
.ga-grid--gap-24 {
  --ga-gap: var(--ga-space-24);
}

.ga-stack--gap-32,
.ga-inline--gap-32,
.ga-grid--gap-32 {
  --ga-gap: var(--ga-space-32);
}

.ga-stack--gap-40,
.ga-inline--gap-40,
.ga-grid--gap-40 {
  --ga-gap: var(--ga-space-40);
}

.ga-stack--gap-48,
.ga-inline--gap-48,
.ga-grid--gap-48 {
  --ga-gap: var(--ga-space-48);
}

.ga-stack--gap-64,
.ga-inline--gap-64,
.ga-grid--gap-64 {
  --ga-gap: var(--ga-space-64);
}
/* ==========================================================================
   GA UI Kit · Page header — заголовок страницы с описанием и действиями
   ========================================================================== */

.ga-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ga-space-16);
}

.ga-page-header__content {
  display: flex;
  flex-direction: column;
  gap: var(--ga-space-8);
  min-width: 0;
}

.ga-page-header__title {
  margin: 0;
  font-size: var(--ga-text-3xl);
  font-weight: var(--ga-weight-bold);
  line-height: var(--ga-leading-tight);
  color: var(--ga-text-secondary);
}

.ga-page-header__description {
  margin: 0;
  font-size: var(--ga-text-sm);
  line-height: var(--ga-leading-normal);
  color: var(--ga-text-muted);
}

.ga-page-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ga-space-8);
}

@media (max-width: 991.98px) {
  .ga-page-header__title {
    font-size: var(--ga-text-2xl);
  }
}

@media (max-width: 767.98px) {
  .ga-page-header__title {
    font-size: var(--ga-text-xl);
  }

  .ga-page-header__actions {
    width: 100%;
  }
}
/* Формы ------------------------------------------------------------------ */
/* ==========================================================================
   GA UI Kit · Field — обвязка любого контрола: подпись, контрол, подсказка
   ========================================================================== */

.ga-field {
  display: flex;
  flex-direction: column;
  gap: var(--ga-space-8);
  min-width: 0;
}

.ga-field__label {
  display: inline-flex;
  align-items: center;
  gap: var(--ga-space-4);
  font-size: var(--ga-text-sm);
  font-weight: var(--ga-weight-medium);
  color: var(--ga-text-secondary);
  padding: 0;
}

.ga-field__label[data-required]::after {
  content: "*";
  color: var(--ga-danger);
}

.ga-field__hint {
  margin: 0;
  font-size: var(--ga-text-xs);
  line-height: var(--ga-leading-normal);
  color: var(--ga-text-muted);
}

.ga-field__error {
  margin: 0;
  font-size: var(--ga-text-xs);
  line-height: var(--ga-leading-normal);
  color: var(--ga-danger-text);
}

.ga-field__counter {
  margin: 0;
  align-self: flex-end;
  font-size: var(--ga-text-xs);
  line-height: var(--ga-leading-normal);
  color: var(--ga-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Ошибка слева, счётчик справа */
.ga-field__footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ga-space-8);
}

/* Ряд из нескольких контролов внутри одного поля */
.ga-field__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ga-space-8);
}
/* ==========================================================================
   GA UI Kit · Button

   База — белая кнопка без рамки, как на сайте: рамка там опция, а не
   умолчание. Нужна рамка — --bordered.
   Состояния — из нативных атрибутов: :disabled, [aria-disabled="true"],
   [aria-expanded="true"] у кнопки, открывающей меню
   ========================================================================== */

.ga-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ga-space-8);
  height: var(--ga-control-md);
  padding-inline: var(--ga-space-16);
  border: var(--ga-border-width) solid transparent;
  border-radius: var(--ga-radius-md);
  background-color: var(--ga-bg-surface);
  color: var(--ga-accent-icon);
  box-shadow: var(--ga-shadow-outline);
  font-family: inherit;
  font-size: var(--ga-text-sm);
  font-weight: var(--ga-weight-semibold);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--ga-transition-fast),
    border-color var(--ga-transition-fast),
    color var(--ga-transition-fast),
    box-shadow var(--ga-transition-fast);
}

@media (any-hover: hover) {
  .ga-button:hover {
    color: var(--ga-accent-hover);
  }
}

.ga-button:active {
  color: var(--ga-accent-active);
}

/* Рамка — отдельный модификатор, не умолчание */
.ga-button--bordered {
  border-color: var(--ga-border-strong);
}

@media (any-hover: hover) {
  .ga-button--bordered:hover {
    border-color: var(--ga-accent-hover);
  }
}

.ga-button--bordered:active {
  border-color: var(--ga-accent-active);
}

/* Кнопка, открывающая меню или дропдаун */
.ga-button[aria-expanded="true"] {
  border-color: var(--ga-accent-active);
  color: var(--ga-accent-active);
}

.ga-button--primary {
  background-color: var(--ga-accent);
  color: var(--ga-text-on-accent);
  box-shadow: var(--ga-shadow-action);
}

@media (any-hover: hover) {
  .ga-button--primary:hover {
    background-color: var(--ga-accent-hover);
    color: var(--ga-text-on-accent);
  }
}

.ga-button--primary:active {
  background-color: var(--ga-accent-active);
  color: var(--ga-text-on-accent);
}

/* Мягкая заливка. На сайте — теги типов документов */
.ga-button--secondary {
  background-color: var(--ga-bg-accent-soft);
  color: var(--ga-text-accent-soft);
  box-shadow: none;
  font-weight: var(--ga-weight-medium);
}

@media (any-hover: hover) {
  .ga-button--secondary:hover {
    background-color: var(--ga-accent);
    color: var(--ga-text-on-accent);
  }
}

.ga-button--secondary:active {
  background-color: var(--ga-accent-active);
  color: var(--ga-text-on-accent);
}

/* Градиентная. На сайте — переход на страницу продукта */
.ga-button--gradient {
  background-image: var(--ga-gradient-accent);
  color: var(--ga-text-on-accent);
  box-shadow: var(--ga-shadow-action);
}

@media (any-hover: hover) {
  .ga-button--gradient:hover {
    background-image: none;
    background-color: var(--ga-accent-hover);
    color: var(--ga-text-on-accent);
  }
}

.ga-button--gradient:active {
  background-image: none;
  background-color: var(--ga-accent-active);
  color: var(--ga-text-on-accent);
}

.ga-button--ghost {
  background-color: transparent;
  color: var(--ga-accent-icon);
  box-shadow: none;
}

@media (any-hover: hover) {
  .ga-button--ghost:hover {
    color: var(--ga-accent-hover);
  }
}

.ga-button--ghost:active {
  color: var(--ga-accent-active);
}

/* Размеры. По умолчанию md (40px) */
.ga-button--sm {
  height: var(--ga-control-sm);
  padding-inline: var(--ga-space-12);
  font-size: var(--ga-text-xs);
}

.ga-button--md {
  height: var(--ga-control-md);
  padding-inline: var(--ga-space-16);
  font-size: var(--ga-text-sm);
}

.ga-button--lg {
  height: var(--ga-control-lg);
  padding-inline: var(--ga-space-24);
  font-size: var(--ga-text-md);
}

/* Овальная. На сайте — крупная кнопка перехода с кружком под иконку.
   Вес текста там обычный: своего font-weight компонент не задаёт */
.ga-button--pill {
  border-radius: var(--ga-radius-pill);
  font-weight: var(--ga-weight-regular);
}

/* С кружком боковой отступ съедается: кружок почти касается края */
.ga-button--pill:has(.ga-button__circle) {
  padding-inline: var(--ga-space-8);
}

.ga-button__circle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ga-control-circle);
  height: var(--ga-control-circle);
  border: var(--ga-border-width) solid transparent;
  border-radius: var(--ga-radius-circle);
  background-color: var(--ga-bg-surface);
  color: var(--ga-accent-icon);
}

/* Белая овальная: рамка и у кнопки, и у кружка, текст тёмный */
.ga-button--outline {
  border-color: var(--ga-accent-icon);
  color: var(--ga-text-primary);
  box-shadow: var(--ga-shadow-action);
}

.ga-button--outline .ga-button__circle {
  border-color: var(--ga-accent-icon);
}

@media (any-hover: hover) {
  .ga-button--outline:hover {
    border-color: var(--ga-accent-hover);
    color: var(--ga-text-primary);
  }

  .ga-button--outline:hover .ga-button__circle {
    border-color: var(--ga-accent-hover);
    color: var(--ga-accent-hover);
  }
}

.ga-button--outline:active {
  border-color: var(--ga-accent-active);
  color: var(--ga-text-primary);
}

.ga-button--outline:active .ga-button__circle {
  border-color: var(--ga-accent-active);
  color: var(--ga-accent-active);
}

/* Квадратная кнопка под одну иконку. Нужен aria-label */
.ga-button--icon {
  width: var(--ga-control-md);
  padding-inline: 0;
}

.ga-button--icon.ga-button--sm {
  width: var(--ga-control-sm);
}

/* Круглая кнопка под одну иконку. Нужен aria-label */
.ga-button--round {
  width: var(--ga-control-md);
  padding-inline: 0;
  border-radius: var(--ga-radius-circle);
}

.ga-button--round.ga-button--sm {
  width: var(--ga-control-sm);
}

.ga-button--block {
  display: flex;
  width: 100%;
}

.ga-button:disabled,
.ga-button[aria-disabled="true"] {
  cursor: not-allowed;
  box-shadow: none;
  border-color: transparent;
  background-color: var(--ga-bg-surface);
  color: var(--ga-text-disabled);
}

.ga-button--bordered:disabled,
.ga-button--bordered[aria-disabled="true"],
.ga-button--outline:disabled,
.ga-button--outline[aria-disabled="true"] {
  border-color: var(--ga-border-disabled);
}

.ga-button--outline:disabled .ga-button__circle,
.ga-button--outline[aria-disabled="true"] .ga-button__circle {
  border-color: var(--ga-border-disabled);
  color: var(--ga-text-disabled);
}

.ga-button--primary:disabled,
.ga-button--primary[aria-disabled="true"],
.ga-button--secondary:disabled,
.ga-button--secondary[aria-disabled="true"],
.ga-button--gradient:disabled,
.ga-button--gradient[aria-disabled="true"] {
  background-image: none;
  background-color: var(--ga-bg-disabled-strong);
  color: var(--ga-text-on-accent);
}

.ga-button--ghost:disabled,
.ga-button--ghost[aria-disabled="true"] {
  background-color: transparent;
  color: var(--ga-text-disabled);
}
/* ==========================================================================
   GA UI Kit · Close — крестик закрытия

   Ни фона, ни рамки, ни тени: на сайте это голая иконка с зоной нажатия
   вокруг. Один элемент на весь кит — им закрываются диалог, ящик и тост.
   Обязателен aria-label
   ========================================================================== */

.ga-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--ga-space-8);
  border: 0;
  background-color: transparent;
  color: var(--ga-text-secondary);
  cursor: pointer;
  transition: color var(--ga-transition-fast);
}

@media (any-hover: hover) {
  .ga-close:hover {
    color: var(--ga-accent-hover);
  }
}

.ga-close:active {
  color: var(--ga-accent-active);
}

.ga-close:focus-visible {
  outline: var(--ga-focus-ring-width) solid var(--ga-focus-ring-color);
  outline-offset: var(--ga-focus-ring-offset);
}

/* На тёмной или залитой подложке */
.ga-close--on-accent,
.ga-close--on-accent:hover,
.ga-close--on-accent:active {
  color: var(--ga-text-on-accent);
}

.ga-close:disabled {
  color: var(--ga-text-disabled);
  cursor: not-allowed;
}
/* ==========================================================================
   GA UI Kit · Общая шкура контролов — input, textarea и кнопка селекта

   Не элемент: в разметке этих правил в чистом виде не бывает.
   Подключается до input.css, textarea.css и select.css.

   Кнопка селекта здесь не по родству, а по виду: снаружи она такой же
   контрол с рамкой, тенью и фокусом, и повторять всё это в select.css
   значило бы завести вторую копию тех же значений.
   Состояния — из нативных атрибутов: :focus, :disabled, :read-only,
   [aria-invalid="true"]
   ========================================================================== */

.ga-input,
.ga-textarea,
.ga-select__trigger {
  display: block;
  width: 100%;
  border: var(--ga-border-width) solid var(--ga-border);
  border-radius: var(--ga-radius-lg);
  background-color: var(--ga-bg-surface);
  box-shadow: var(--ga-shadow-control);
  color: var(--ga-text-primary);
  font-family: inherit;
  font-size: var(--ga-text-sm);
  transition:
    border-color var(--ga-transition-fast),
    box-shadow var(--ga-transition-fast),
    background-color var(--ga-transition-fast);
}

.ga-input:focus,
.ga-textarea:focus,
.ga-select__trigger:focus {
  border-color: var(--ga-accent-icon);
  box-shadow: var(--ga-shadow-glow);
  outline: none;
}

.ga-input:focus-visible,
.ga-textarea:focus-visible,
.ga-select__trigger:focus-visible {
  outline: none;
}

.ga-input[aria-invalid="true"],
.ga-textarea[aria-invalid="true"],
.ga-select__trigger[aria-invalid="true"] {
  border-color: var(--ga-danger);
}

.ga-input[aria-invalid="true"]:focus,
.ga-textarea[aria-invalid="true"]:focus,
.ga-select__trigger[aria-invalid="true"]:focus {
  border-color: var(--ga-danger);
  box-shadow: var(--ga-shadow-danger-glow);
}

.ga-input:disabled,
.ga-textarea:disabled,
.ga-select__trigger:disabled {
  background-color: var(--ga-bg-disabled);
  border-color: var(--ga-border-subtle);
  color: var(--ga-text-disabled);
  box-shadow: none;
  cursor: not-allowed;
}
/* ==========================================================================
   GA UI Kit · Input
   ========================================================================== */

.ga-input {
  height: var(--ga-control-md);
  padding-inline: var(--ga-space-16);
}

.ga-input--sm {
  height: var(--ga-control-sm);
  padding-inline: var(--ga-space-12);
}
/* ==========================================================================
   GA UI Kit · Textarea
   ========================================================================== */

.ga-textarea {
  min-height: calc(var(--ga-control-md) * 2);
  padding: var(--ga-space-12) var(--ga-space-16);
  line-height: var(--ga-leading-normal);
  resize: vertical;
}
/* ==========================================================================
   GA UI Kit · Input group — иконка внутри поля и кнопка справа
   ========================================================================== */

.ga-input-group {
  position: relative;
  display: block;
  width: 100%;
}

.ga-input-group__icon {
  position: absolute;
  top: 50%;
  left: var(--ga-space-12);
  transform: translateY(-50%);
  color: var(--ga-text-muted);
  pointer-events: none;
}

.ga-input-group__action {
  position: absolute;
  top: 50%;
  right: var(--ga-space-8);
  transform: translateY(-50%);
}

/* Кнопка у левого края: кликабельная лупа вместо декоративной иконки */
.ga-input-group__action--start {
  right: auto;
  left: var(--ga-space-8);
}

.ga-input-group:has(> .ga-input-group__icon) > .ga-input {
  padding-left: calc(var(--ga-space-12) + var(--ga-icon-md) + var(--ga-space-12));
}

.ga-input-group:has(> .ga-input-group__action) > .ga-input {
  padding-right: calc(var(--ga-space-8) + var(--ga-control-sm) + var(--ga-space-8));
}

.ga-input-group:has(> .ga-input-group__action--start) > .ga-input {
  padding-left: calc(var(--ga-space-8) + var(--ga-control-sm) + var(--ga-space-8));
}
/* ==========================================================================
   GA UI Kit · Composer — поле ввода со встроенными кнопками

   Устройство обратное input-group: рамку, фон, тень и фокус несёт контейнер,
   а поле внутри раздето — иначе получилась бы рамка в рамке. Кнопки лежат
   в обычном потоке нижним рядом, поэтому контейнер растёт вместе с текстом.
   Авторост высоты — поведение; без JS поле показывает три строки и скроллит.

   Кнопки — не ga-button: на сайте это голый глиф без фона и рамки, тёмный
   в покое и синий по наведению. Отсюда свой __action
   ========================================================================== */

.ga-composer {
  display: flex;
  flex-direction: column;
  padding: var(--ga-space-8) var(--ga-space-16);
  border: var(--ga-border-width) solid var(--ga-border);
  border-radius: var(--ga-radius-lg);
  background-color: var(--ga-bg-surface);
  box-shadow: var(--ga-shadow-control);
  transition:
    background-color var(--ga-transition-fast),
    border-color var(--ga-transition-fast),
    box-shadow var(--ga-transition-fast);
}

.ga-composer:focus-within {
  border-color: var(--ga-accent-icon);
  box-shadow: var(--ga-shadow-glow);
}

.ga-composer:has(> .ga-composer__input[aria-invalid="true"]) {
  border-color: var(--ga-danger);
}

.ga-composer:has(> .ga-composer__input:disabled) {
  background-color: var(--ga-bg-disabled);
  box-shadow: none;
}

.ga-composer__input {
  width: 100%;
  min-height: calc(var(--ga-leading-normal) * var(--ga-text-sm) * 3);
  max-height: calc(var(--ga-leading-normal) * var(--ga-text-sm) * 10);
  padding: 0;
  border: 0;
  background-color: transparent;
  box-shadow: none;
  color: var(--ga-text-primary);
  font-family: inherit;
  font-size: var(--ga-text-sm);
  line-height: var(--ga-leading-normal);
  resize: none;
  overflow-y: auto;
}

.ga-composer__input:focus {
  outline: none;
}

.ga-composer__input:disabled {
  color: var(--ga-text-disabled);
  cursor: not-allowed;
}

.ga-composer__actions {
  display: flex;
  align-items: center;
  gap: var(--ga-space-16);
  padding-top: var(--ga-space-8);
}

/* Левая группа отжимает кнопку отправки вправо. Отрицательный отступ
   съедает паддинг первой кнопки: иконка встаёт ровно под левый край текста */
.ga-composer__tools {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: var(--ga-space-4);
  margin-left: calc(var(--ga-space-4) * -1);
}

/* Кнопка в нижнем ряду. Размер иконки задаёт сама иконка: у инструментов
   --lg, у отправки --md. Зона нажатия — паддинг */
.ga-composer__action {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--ga-space-4);
  border: 0;
  background-color: transparent;
  color: var(--ga-text-secondary);
  cursor: pointer;
  transition: color var(--ga-transition-fast);
}

@media (any-hover: hover) {
  .ga-composer__action:hover {
    color: var(--ga-accent-icon);
  }
}

.ga-composer__action:active,
.ga-composer__action[aria-pressed="true"] {
  color: var(--ga-accent-icon);
}

.ga-composer__action:focus-visible {
  outline: var(--ga-focus-ring-width) solid var(--ga-focus-ring-color);
  outline-offset: var(--ga-focus-ring-offset);
}

.ga-composer__action:disabled {
  color: var(--ga-text-disabled);
  cursor: not-allowed;
}
/* ==========================================================================
   GA UI Kit · Chip — выбранный фильтр

   Отличается от метки ролью: метка помечает строку и кликов не ждёт, а чип
   показывает выбранное и его снимают крестиком. Отсюда кнопка внутри
   и tone-пара «на поверхности» / «залитый».

   Отличается от чипа в поле с тегами местом: тот живёт внутри рамки ввода
   и подчиняется его состояниям, этот стоит отдельным рядом под фильтрами.

   Значения с сайта (shared/chips): радиус 8, подпись 4/8, крестик 12px.
   Ряд собирается ga-inline — своего отступа справа, как в проде, чип не несёт
   ========================================================================== */

.ga-chip {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  border-radius: var(--ga-radius-sm);
  background-color: var(--ga-bg-surface);
  color: var(--ga-text-primary);
  font-size: var(--ga-text-sm);
  line-height: var(--ga-leading-tight);
}

/* Залитый — для выбранных значений, которых на фоне страницы должно быть видно */
.ga-chip--filled {
  background-color: var(--ga-bg-accent-strong);
  color: var(--ga-text-accent-strong);
}

/* На холсте: тот же чип на сером фоне страницы, а не на белой карточке */
.ga-chip--plain {
  background-color: var(--ga-bg-canvas);
}

/* Сброс кнопки — подпись бывает и <button>: у чипа, стоящего вместо
   контрола, она раскрывает список. Пустому <span> эти правила не мешают */
.ga-chip__label {
  padding: var(--ga-space-4) var(--ga-space-8);
  border: 0;
  background-color: transparent;
  color: inherit;
  font: inherit;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Обведённый — когда чип стоит вместо контрола: закрытый список, из
   которого что-то выбрано. Фон белый, рамка и подпись акцентные */
.ga-chip--outline {
  border: var(--ga-border-width) solid var(--ga-accent);
  color: var(--ga-accent-active);
}

/* Счётчик выбранного: сколько значений скрыто за подписью */
.ga-chip__count {
  flex: none;
  margin-right: var(--ga-space-8);
  color: var(--ga-accent-active);
  font-weight: var(--ga-weight-semibold);
}

.ga-chip--filled .ga-chip__count {
  color: currentColor;
}

.ga-chip__icon {
  flex: none;
  margin-left: var(--ga-space-8);
  color: var(--ga-accent-icon);
}

.ga-chip--filled .ga-chip__icon {
  color: currentColor;
}

/* Крестик — голый глиф, как у чипа в поле с тегами */
.ga-chip__remove {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-right: var(--ga-space-8);
  border: 0;
  background-color: transparent;
  color: var(--ga-accent-icon);
  cursor: pointer;
  transition: color var(--ga-transition-fast);
}

.ga-chip--filled .ga-chip__remove {
  color: currentColor;
}

@media (any-hover: hover) {
  .ga-chip__remove:hover {
    color: var(--ga-accent-active);
  }
}

.ga-chip__remove:focus-visible {
  outline: var(--ga-focus-ring-width) solid var(--ga-focus-ring-color);
  outline-offset: var(--ga-focus-ring-offset);
}

.ga-chip__remove:disabled {
  color: var(--ga-text-disabled);
  cursor: not-allowed;
}

.ga-chip__remove .ga-icon {
  width: var(--ga-icon-xs);
  height: var(--ga-icon-xs);
}
/* ==========================================================================
   GA UI Kit · Tags input — поле, в котором введённое становится чипом

   Как и у composer, рамку несёт контейнер, а поле внутри раздето.
   Добавление и удаление чипов — поведение; core даёт разметку и вид
   ========================================================================== */

.ga-tags-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ga-space-8);
  min-height: var(--ga-control-md);
  padding: var(--ga-space-8) var(--ga-space-12);
  border: var(--ga-border-width) solid var(--ga-border);
  border-radius: var(--ga-radius-lg);
  background-color: var(--ga-bg-surface);
  box-shadow: var(--ga-shadow-control);
  transition:
    border-color var(--ga-transition-fast),
    box-shadow var(--ga-transition-fast);
}

.ga-tags-input:focus-within {
  border-color: var(--ga-accent-icon);
  box-shadow: var(--ga-shadow-glow);
}

.ga-tags-input[aria-invalid="true"] {
  border-color: var(--ga-danger);
}

.ga-tags-input__field {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  box-shadow: none;
  color: var(--ga-text-primary);
  font-family: inherit;
  font-size: var(--ga-text-sm);
}

.ga-tags-input__field:focus {
  outline: none;
}

.ga-tags-input__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--ga-space-4);
  padding: var(--ga-space-4) var(--ga-space-8);
  border-radius: var(--ga-radius-sm);
  background-color: var(--ga-bg-accent-subtle);
  color: var(--ga-text-primary);
  font-size: var(--ga-text-sm);
}

.ga-tags-input__remove {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--ga-accent-strong);
  cursor: pointer;
  transition: color var(--ga-transition-fast);
}

@media (any-hover: hover) {
  .ga-tags-input__remove:hover {
    color: var(--ga-accent-active);
  }
}

.ga-tags-input__remove:focus-visible {
  outline: var(--ga-focus-ring-width) solid var(--ga-focus-ring-color);
  outline-offset: var(--ga-focus-ring-offset);
}

.ga-tags-input__remove .ga-icon {
  width: var(--ga-icon-xs);
  height: var(--ga-icon-xs);
}
/* ==========================================================================
   GA UI Kit · App bar — верхняя полоса приложения

   Только геометрия: высота, прилипание, фон, тень и контейнер внутри.
   Что в полосе лежит — логотип, поиск, аватар — кит не решает: это контент
   конкретного приложения, и параметризовать его нечем.

   Значения с сайта (components/header/style.module.scss): 95px на десктопе,
   60px на узком экране, sticky сверху, белый фон, тень 0 3px 8px.

   Высота вынесена в токен не для красоты: на сайте от неё считаются семь
   липких колонок и scroll-margin-top у якорей. Один источник — один якорь
   ========================================================================== */

.ga-appbar {
  position: sticky;
  top: 0;
  z-index: var(--ga-z-appbar);
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--ga-appbar-height);
  background-color: var(--ga-bg-surface);
  box-shadow: var(--ga-shadow-appbar);
}

/* Полоса во всю ширину окна, содержимое — по ширине контента страницы */
.ga-appbar__inner {
  display: flex;
  align-items: center;
  gap: var(--ga-space-16);
  width: 100%;
  min-width: 0;
}

/* Три слота. Середина забирает свободное место и ужимается первой */
.ga-appbar__start,
.ga-appbar__end {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--ga-space-12);
}

.ga-appbar__center {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: var(--ga-space-12);
  min-width: 0;
}

@media (max-width: 991.98px) {
  .ga-appbar {
    height: var(--ga-appbar-height-sm);
  }
}

/* --------------------------------------------------------------------------
   Липкая боковая колонка. Отступ сверху — высота полосы плюс зазор, ровно
   как на сайте. Ниже планшета прячется: там её место занимает мобильное меню
   -------------------------------------------------------------------------- */

.ga-sidebar {
  position: sticky;
  top: calc(var(--ga-appbar-height) + var(--ga-space-16));
  align-self: flex-start;
  height: fit-content;
  min-width: 0;
}

@media (max-width: 991.98px) {
  .ga-sidebar {
    display: none;
  }
}
/* ==========================================================================
   GA UI Kit · Scroll — блок с собственной прокруткой

   Значения с сайта (styles/global.scss, .scroll): ползунок 8px по ширине
   и 6px по высоте, дорожка Gray/100, скругление у ползунка полное. На сайте
   тонов два, голубой и тёмный; кит держит один — голубой.

   Цвет ползунка вынесен в токены, а не вписан в правила: их две ветки,
   scrollbar-color для Firefox и ::-webkit-scrollbar-thumb для остальных,
   и расходиться им нельзя.

   scrollbar-gutter резервирует место под полосу заранее: без него содержимое
   дёргается вбок в тот момент, когда прокрутка появляется
   ========================================================================== */

/* min-width: 0 и max-width: 100% — чтобы блок никогда не распирал родителя.
   Внутри flex- и grid-раскладки элемент по умолчанию не ужимается уже своего
   содержимого, и длинный ряд вылезал бы наружу вместо того, чтобы скроллиться */
.ga-scroll {
  min-width: 0;
  max-width: 100%;
  overflow: auto;
  overscroll-behavior: none;
  scrollbar-gutter: stable;
}

/* Только вбок: длинный ряд, который иначе растянул бы страницу. Место под
   вертикальную полосу тут резервировать нечего, поэтому gutter снимается */
.ga-scroll--x {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: auto;
}

@supports (scrollbar-width: thin) {
  .ga-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--ga-scrollbar-thumb) var(--ga-scrollbar-track);
  }
}

.ga-scroll::-webkit-scrollbar {
  width: var(--ga-scrollbar-width);
  height: var(--ga-scrollbar-height);
}

.ga-scroll::-webkit-scrollbar-track {
  background-color: var(--ga-scrollbar-track);
}

.ga-scroll::-webkit-scrollbar-thumb {
  border-radius: var(--ga-radius-pill);
  background-color: var(--ga-scrollbar-thumb);
}
/* ==========================================================================
   GA UI Kit · Slider — ползунок для количественных значений

   На нативном <input type="range">: перетаскивание, стрелки с клавиатуры,
   min / max / step и отправка формы достаются от браузера даром.

   Значения с сайта (calc/components/calc-range): дорожка 4px, бегунок 28px
   белый с двойной тенью. Цвета приведены к акценту кита — в проде тут
   одиночные #0A7AFF и #D5D9EB, которых в шкалах нет.

   Залитая часть дорожки. У Firefox под неё есть ::-moz-range-progress,
   у остальных — нет, поэтому там она рисуется градиентом по ширине
   --ga-slider-fill. Переменную выставляет приложение: это единственное,
   что слайдеру нужно сверх браузера, и без неё он остаётся рабочим,
   просто дорожка целиком серая
   ========================================================================== */

.ga-slider {
  appearance: none;
  width: 100%;
  height: var(--ga-slider-thumb);
  padding: 0;
  border: 0;
  background-color: transparent;
  cursor: pointer;
}

/* ------------------------------------------------------------ дорожка ---- */

.ga-slider::-webkit-slider-runnable-track {
  height: var(--ga-slider-track);
  border-radius: var(--ga-radius-pill);
  background-color: var(--ga-border);
  background-image: linear-gradient(var(--ga-accent), var(--ga-accent));
  background-repeat: no-repeat;
  background-size: var(--ga-slider-fill, 0%) 100%;
}

.ga-slider::-moz-range-track {
  height: var(--ga-slider-track);
  border-radius: var(--ga-radius-pill);
  background-color: var(--ga-border);
}

.ga-slider::-moz-range-progress {
  height: var(--ga-slider-track);
  border-radius: var(--ga-radius-pill);
  background-color: var(--ga-accent);
}

/* ------------------------------------------------------------- бегунок --- */
/* Половина разницы высот поднимает бегунок так, чтобы его центр совпал
   с центром дорожки */

.ga-slider::-webkit-slider-thumb {
  appearance: none;
  width: var(--ga-slider-thumb);
  height: var(--ga-slider-thumb);
  margin-top: calc((var(--ga-slider-track) - var(--ga-slider-thumb)) / 2);
  border: 0;
  border-radius: var(--ga-radius-circle);
  background-color: var(--ga-bg-surface);
  box-shadow: var(--ga-shadow-thumb);
}

.ga-slider::-moz-range-thumb {
  width: var(--ga-slider-thumb);
  height: var(--ga-slider-thumb);
  border: 0;
  border-radius: var(--ga-radius-circle);
  background-color: var(--ga-bg-surface);
  box-shadow: var(--ga-shadow-thumb);
}

/* ----------------------------------------------------------- состояния --- */
/* Кольцо рисуется на всём поле, а не на бегунке: у псевдоэлемента бегунка
   outline в webkit не появляется */

.ga-slider:focus-visible {
  outline: var(--ga-focus-ring-width) solid var(--ga-focus-ring-color);
  outline-offset: var(--ga-focus-ring-offset);
  border-radius: var(--ga-radius-pill);
}

.ga-slider:disabled {
  cursor: not-allowed;
}

.ga-slider:disabled::-webkit-slider-runnable-track {
  background-color: var(--ga-bg-disabled);
  background-image: linear-gradient(var(--ga-text-disabled), var(--ga-text-disabled));
}

.ga-slider:disabled::-moz-range-track {
  background-color: var(--ga-bg-disabled);
}

.ga-slider:disabled::-moz-range-progress {
  background-color: var(--ga-text-disabled);
}

.ga-slider:disabled::-webkit-slider-thumb {
  background-color: var(--ga-bg-disabled);
  box-shadow: none;
}

.ga-slider:disabled::-moz-range-thumb {
  background-color: var(--ga-bg-disabled);
  box-shadow: none;
}

/* Подписи под дорожкой: минимум слева, максимум справа */
.ga-slider-scale {
  display: flex;
  justify-content: space-between;
  gap: var(--ga-space-8);
  font-size: var(--ga-text-xs);
  color: var(--ga-text-muted);
  font-variant-numeric: tabular-nums;
}
/* ==========================================================================
   GA UI Kit · Upload — зона загрузки файлов

   Корень — <label> с <input type="file"> внутри: клик по всей зоне, диалог
   выбора и accept даёт браузер, без единой строчки JS. Фреймворк нужен
   только под перетаскивание — он ставит на корень data-state="dragging".

   Пунктир, а не сплошная рамка: так зона читается как «сюда бросают»,
   а не как поле ввода
   ========================================================================== */

.ga-upload {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ga-space-8);
  min-height: var(--ga-upload-height);
  padding: var(--ga-space-32) var(--ga-space-40);
  border: var(--ga-border-width) dashed var(--ga-border);
  border-radius: var(--ga-radius-xl);
  background-color: var(--ga-bg-surface-subtle);
  text-align: center;
  cursor: pointer;
  transition:
    background-color var(--ga-transition-fast),
    border-color var(--ga-transition-fast);
}

/* Поле спрятано, но остаётся в потоке фокуса: кольцо рисует сама зона */
.ga-upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  border: 0;
  opacity: 0;
}

.ga-upload:focus-within {
  outline: var(--ga-focus-ring-width) solid var(--ga-focus-ring-color);
  outline-offset: var(--ga-focus-ring-offset);
}

@media (any-hover: hover) {
  .ga-upload:hover {
    border-color: var(--ga-accent-icon);
  }
}

/* Файл тащат над зоной. Состояние ставит фреймворк */
.ga-upload[data-state="dragging"] {
  border-color: var(--ga-accent-icon);
  background-color: var(--ga-bg-accent-subtle);
}

/* Цвет с сайта: там стрелка залита $blue #155eef, это --ga-accent-active.
   Соседний --ga-accent-icon #528bff заметно светлее */
.ga-upload__icon {
  flex: none;
  width: var(--ga-space-48);
  height: var(--ga-space-48);
  color: var(--ga-accent-active);
}

.ga-upload__title {
  font-size: var(--ga-text-sm);
  font-weight: var(--ga-weight-semibold);
  line-height: var(--ga-leading-tight);
  color: var(--ga-text-secondary);
}

/* Форматы и лимиты. На сайте они того же цвета, что подпись, — отличается
   только вес: весь текст зоны наследует $gray-700 от формы */
.ga-upload__hint {
  font-size: var(--ga-text-sm);
  line-height: var(--ga-leading-tight);
  color: var(--ga-text-secondary);
}

.ga-upload:has(> .ga-upload__input:disabled) {
  background-color: var(--ga-bg-disabled);
  cursor: not-allowed;
}

.ga-upload:has(> .ga-upload__input:disabled) .ga-upload__icon,
.ga-upload:has(> .ga-upload__input:disabled) .ga-upload__title,
.ga-upload:has(> .ga-upload__input:disabled) .ga-upload__hint {
  color: var(--ga-text-disabled);
}
/* ==========================================================================
   GA UI Kit · File tag — плашка выбранного файла

   Иконка типа, имя, строка «сколько из скольких • статус» и удаление.
   Иконка берётся из третьего спрайта ga-filetype.svg: плашка там синяя,
   надпись белая, currentColor её не красит.

   Стоит отдельно от upload: плашками показывают и уже загруженные вложения,
   где зоны загрузки рядом нет
   ========================================================================== */

.ga-file-list {
  display: flex;
  flex-direction: column;
  gap: var(--ga-space-8);
  margin: 0;
  padding: 0;
}

/* Ряд вместо колонки: плашки встают рядом и переносятся по ширине */
.ga-file-list--row {
  flex-direction: row;
  flex-wrap: wrap;
}

.ga-file-list--row .ga-file {
  flex: 1 1 var(--ga-file-basis);
}

/* Перенос нужен полосе загрузки: она уходит на свою строку под всё остальное */
.ga-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ga-space-8);
  min-width: 0;
  padding: var(--ga-space-16);
  border: var(--ga-border-width) solid var(--ga-border);
  border-radius: var(--ga-radius-lg);
  background-color: var(--ga-bg-surface);
}

/* Пропорции рисунка 5:6, ширину задаём — высота идёт следом */
.ga-file__icon {
  flex: none;
  width: var(--ga-space-40);
  height: var(--ga-space-48);
}

.ga-file__content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--ga-space-4);
  min-width: 0;
}

.ga-file__name {
  overflow: hidden;
  font-size: var(--ga-text-md);
  font-weight: var(--ga-weight-semibold);
  line-height: var(--ga-leading-tight);
  color: var(--ga-text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Вторая строка: размер и статус, разделены точкой */
.ga-file__meta {
  display: flex;
  align-items: center;
  gap: var(--ga-space-8);
  min-width: 0;
  font-size: var(--ga-text-sm);
  line-height: var(--ga-leading-tight);
}

.ga-file__size {
  overflow: hidden;
  color: var(--ga-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ga-file__status {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--ga-space-8);
  color: var(--ga-text-secondary);
}

/* Точка-разделитель рисуется стилем, а не лишним элементом в разметке */
.ga-file__size + .ga-file__status::before {
  content: "\2022";
  color: var(--ga-text-muted);
}

/* Кружок под галочкой: в макете это залитый диск с белым знаком внутри,
   готовой такой иконки в спрайте нет — собираем из обычной галочки */
.ga-file__mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ga-icon-md);
  height: var(--ga-icon-md);
  border-radius: var(--ga-radius-circle);
  background-color: var(--ga-text-muted);
  color: var(--ga-text-on-accent);
}

/* Состояния ставит приложение: файл грузится, загрузился, не загрузился */
.ga-file[data-state="done"] .ga-file__mark {
  background-color: var(--ga-success);
}

.ga-file[data-state="error"] {
  border-color: var(--ga-danger);
}

.ga-file[data-state="error"] .ga-file__mark {
  background-color: var(--ga-danger);
}

.ga-file[data-state="error"] .ga-file__status {
  color: var(--ga-danger-text);
}

/* Полоса загрузки — нативный <progress>: доля живёт в атрибуте value,
   поэтому инлайн-стиль под ширину не нужен. Три записи, а не одна:
   у прогресса до сих пор нет общего способа покрасить заполнение */
.ga-file__progress {
  appearance: none;
  flex: 0 0 100%;
  width: 100%;
  height: var(--ga-space-4);
  border: 0;
  border-radius: var(--ga-radius-pill);
  background-color: var(--ga-bg-surface-muted);
  color: var(--ga-accent);
}

.ga-file__progress::-webkit-progress-bar {
  border-radius: var(--ga-radius-pill);
  background-color: var(--ga-bg-surface-muted);
}

.ga-file__progress::-webkit-progress-value {
  border-radius: var(--ga-radius-pill);
  background-color: var(--ga-accent);
}

.ga-file__progress::-moz-progress-bar {
  border-radius: var(--ga-radius-pill);
  background-color: var(--ga-accent);
}

/* Удаление — голый глиф, как крестик и кнопки поля ввода */
.ga-file__remove {
  flex: none;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--ga-space-8);
  border: 0;
  background-color: transparent;
  color: var(--ga-text-secondary);
  cursor: pointer;
  transition: color var(--ga-transition-fast);
}

@media (any-hover: hover) {
  .ga-file__remove:hover {
    color: var(--ga-danger);
  }
}

.ga-file__remove:focus-visible {
  outline: var(--ga-focus-ring-width) solid var(--ga-focus-ring-color);
  outline-offset: var(--ga-focus-ring-offset);
}

.ga-file__remove:disabled {
  color: var(--ga-text-disabled);
  cursor: not-allowed;
}
/* ==========================================================================
   GA UI Kit · Общая обвязка переключателей — checkbox, radio, switch

   Не элемент. Настоящий <input> визуально скрыт, рядом стоит отрисованный
   индикатор. Клавиатура, отправка формы и скринридер работают без единой
   строчки JS. Здесь лежит всё, что у трёх переключателей общее: обёртка,
   скрытый input, подпись, фокус и disabled.

   Рисунок отмеченного состояния у чекбокса и радио разный и живёт в их
   собственных файлах: чекбокс заливается, радио остаётся кольцом с точкой
   ========================================================================== */

.ga-checkbox,
.ga-radio,
.ga-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--ga-space-8);
  cursor: pointer;
  user-select: none;
}

.ga-checkbox__input,
.ga-radio__input,
.ga-switch__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.ga-checkbox__label,
.ga-radio__label,
.ga-switch__label {
  font-size: var(--ga-text-sm);
  color: var(--ga-text-primary);
  line-height: var(--ga-leading-normal);
}

.ga-checkbox__box,
.ga-radio__box {
  position: relative;
  flex: none;
  width: var(--ga-control-indicator);
  height: var(--ga-control-indicator);
  border: var(--ga-control-border-width) solid var(--ga-border-control);
  background-color: var(--ga-bg-surface);
  transition:
    background-color var(--ga-transition-fast),
    border-color var(--ga-transition-fast);
}

.ga-checkbox__box {
  border-radius: var(--ga-radius-xs);
}

.ga-radio__box {
  border-radius: var(--ga-radius-circle);
}

@media (any-hover: hover) {
  .ga-checkbox:hover .ga-checkbox__box,
  .ga-radio:hover .ga-radio__box {
    border-color: var(--ga-accent-icon);
  }
}

.ga-checkbox__input:focus-visible + .ga-checkbox__box,
.ga-radio__input:focus-visible + .ga-radio__box,
.ga-switch__input:focus-visible + .ga-switch__track {
  outline: var(--ga-focus-ring-width) solid var(--ga-focus-ring-color);
  outline-offset: var(--ga-focus-ring-offset);
}

.ga-checkbox__input:disabled + .ga-checkbox__box,
.ga-radio__input:disabled + .ga-radio__box {
  background-color: var(--ga-bg-disabled);
  border-color: var(--ga-border-disabled);
}

.ga-checkbox__input:disabled ~ .ga-checkbox__label,
.ga-radio__input:disabled ~ .ga-radio__label,
.ga-switch__input:disabled ~ .ga-switch__label {
  color: var(--ga-text-disabled);
}

.ga-checkbox:has(.ga-checkbox__input:disabled),
.ga-radio:has(.ga-radio__input:disabled),
.ga-switch:has(.ga-switch__input:disabled) {
  cursor: not-allowed;
}
/* ==========================================================================
   GA UI Kit · Checkbox — своё: заливка, галочка и неопределённое состояние
   ========================================================================== */

.ga-checkbox__input:checked + .ga-checkbox__box,
.ga-checkbox__input:indeterminate + .ga-checkbox__box {
  background-color: var(--ga-accent);
  border-color: var(--ga-accent);
}

.ga-checkbox__box::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--ga-text-on-accent);
  opacity: 0;
  transition: opacity var(--ga-transition-fast);
  -webkit-mask-image: var(--ga-mask-check);
  mask-image: var(--ga-mask-check);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 60% 60%;
  mask-size: 60% 60%;
}

.ga-checkbox__input:checked + .ga-checkbox__box::after {
  opacity: 1;
}

.ga-checkbox__input:indeterminate + .ga-checkbox__box::after {
  opacity: 1;
  -webkit-mask-image: var(--ga-mask-minus);
  mask-image: var(--ga-mask-minus);
}

.ga-checkbox__input:disabled:checked + .ga-checkbox__box,
.ga-checkbox__input:disabled:indeterminate + .ga-checkbox__box {
  background-color: var(--ga-bg-disabled-strong);
  border-color: var(--ga-bg-disabled-strong);
}
/* ==========================================================================
   GA UI Kit · Radio — своё: кольцо с точкой внутри

   Отмеченное радио не заливается: рамка становится акцентной, внутри
   появляется точка того же цвета. Так это сделано и в макете, и на сайте
   ========================================================================== */

.ga-radio__box::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--ga-control-dot);
  height: var(--ga-control-dot);
  border-radius: var(--ga-radius-circle);
  background-color: var(--ga-accent-icon);
  transform: scale(0);
  transition: transform var(--ga-transition-fast);
}

.ga-radio__input:checked + .ga-radio__box {
  border-color: var(--ga-accent-icon);
}

.ga-radio__input:checked + .ga-radio__box::after {
  transform: scale(1);
}

.ga-radio__input:disabled:checked + .ga-radio__box {
  border-color: var(--ga-border-disabled);
}

.ga-radio__input:disabled:checked + .ga-radio__box::after {
  background-color: var(--ga-text-disabled);
}
/* ==========================================================================
   GA UI Kit · Switch — дорожка с бегунком
   ========================================================================== */

.ga-switch__track {
  position: relative;
  flex: none;
  width: var(--ga-switch-width);
  height: var(--ga-switch-height);
  border-radius: var(--ga-radius-pill);
  background-color: var(--ga-bg-switch-off);
  transition: background-color var(--ga-transition-fast);
}

.ga-switch__track::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc((var(--ga-switch-height) - var(--ga-switch-thumb)) / 2);
  width: var(--ga-switch-thumb);
  height: var(--ga-switch-thumb);
  border-radius: var(--ga-radius-circle);
  background-color: var(--ga-bg-surface);
  transform: translateY(-50%);
  transition: transform var(--ga-transition-fast);
}

.ga-switch__input:checked + .ga-switch__track {
  background-color: var(--ga-accent-icon);
}

.ga-switch__input:checked + .ga-switch__track::after {
  transform: translate(
    calc(var(--ga-switch-width) - var(--ga-switch-height)),
    -50%
  );
}

.ga-switch__input:disabled + .ga-switch__track {
  background-color: var(--ga-bg-disabled);
}

.ga-switch__input:disabled:checked + .ga-switch__track {
  background-color: var(--ga-bg-disabled-strong);
}
/* Отображение ------------------------------------------------------------ */
/* ==========================================================================
   GA UI Kit · Icon — SVG-спрайт через <use>
   ========================================================================== */

.ga-icon {
  display: inline-block;
  flex: none;
  width: var(--ga-icon-md);
  height: var(--ga-icon-md);
  vertical-align: middle;
  color: inherit;
}

.ga-icon--xs {
  width: var(--ga-icon-xs);
  height: var(--ga-icon-xs);
}

.ga-icon--sm {
  width: var(--ga-icon-sm);
  height: var(--ga-icon-sm);
}

.ga-icon--md {
  width: var(--ga-icon-md);
  height: var(--ga-icon-md);
}

.ga-icon--lg {
  width: var(--ga-icon-lg);
  height: var(--ga-icon-lg);
}

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

.ga-icon--accent {
  color: var(--ga-accent-icon);
}

.ga-icon--success {
  color: var(--ga-success);
}

.ga-icon--warning {
  color: var(--ga-warning);
}

.ga-icon--danger {
  color: var(--ga-danger);
}
/* ==========================================================================
   GA UI Kit · Badge — метка

   Тона brand / neutral / success / warning / danger — все мягкие, заливка
   светлая, текст в цвет. Без модификатора тона — neutral.

   Особняком --solid: сплошная заливка акцентом и белый жирный текст. На сайте
   такая метка одна, «PRO» у имени, и назначение у неё обратное — не пометить
   строку, а выдернуть её из ряда. Тонов у неё нет: цвет один
   ========================================================================== */

.ga-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ga-space-4);
  padding: var(--ga-space-4) var(--ga-space-8);
  border-radius: var(--ga-radius-sm);
  background-color: var(--ga-neutral-soft);
  color: var(--ga-neutral-text);
  min-height: var(--ga-space-24);
  font-size: var(--ga-text-xs);
  font-weight: var(--ga-weight-semibold);
  line-height: var(--ga-leading-tight);
  white-space: nowrap;
}

.ga-badge--neutral {
  background-color: var(--ga-neutral-soft);
  color: var(--ga-neutral-text);
}

.ga-badge--brand {
  background-color: var(--ga-brand-soft);
  color: var(--ga-brand-text);
}

.ga-badge--success {
  background-color: var(--ga-success-soft);
  color: var(--ga-success-text);
}

.ga-badge--warning {
  background-color: var(--ga-warning-soft);
  color: var(--ga-warning-text);
}

.ga-badge--danger {
  background-color: var(--ga-danger-soft);
  color: var(--ga-danger-text);
}

/* Значения с сайта (user-name, .label.pro): заливка #2970ff, белый bold.
   Радиус там 16, но на метке высотой 24 он и так упирается в половину высоты,
   то есть рисуется пилюлей — поэтому форму задаёт --pill, а не этот модификатор */
.ga-badge--solid {
  background-color: var(--ga-accent-hover);
  color: var(--ga-text-on-accent);
  font-weight: var(--ga-weight-bold);
}

.ga-badge--pill {
  border-radius: var(--ga-radius-pill);
}

/* Крупная отличается кеглем и боковым отступом, а не высотой: на сайте
   и обычная, и крупная метки одинаково 24px */
.ga-badge--lg {
  padding-block: 0;
  padding-inline: var(--ga-space-12);
  font-size: var(--ga-text-sm);
}

.ga-badge__dot {
  width: var(--ga-space-8);
  height: var(--ga-space-8);
  border-radius: var(--ga-radius-circle);
  background-color: currentColor;
  flex: none;
}
/* ==========================================================================
   GA UI Kit · Reaction — эмодзи со счётчиком

   Чип это всегда <button>: реакция ставится и снимается нажатием.
   «Эту реакцию поставил я» — нативный aria-pressed="true", своего атрибута
   не заводим: у кнопки-переключателя эта семантика уже есть и её читает
   скринридер.

   Эмодзи берутся из отдельного цветного спрайта ga-emoji.svg: своя заливка
   у них зашита внутри, currentColor их не красит, поэтому в общий спрайт
   иконок они не кладутся
   ========================================================================== */

.ga-reactions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ga-space-8);
}

.ga-reaction {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ga-space-4);
  height: var(--ga-control-sm);
  padding-inline: var(--ga-space-8);
  border: var(--ga-border-width) solid var(--ga-border-strong);
  border-radius: var(--ga-radius-md);
  background-color: var(--ga-bg-surface);
  box-shadow: var(--ga-shadow-outline);
  color: var(--ga-accent-icon);
  font-family: inherit;
  font-size: var(--ga-text-xs);
  font-weight: var(--ga-weight-semibold);
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--ga-transition-fast),
    border-color var(--ga-transition-fast),
    color var(--ga-transition-fast);
}

/* Слот эмодзи: цветной символ из ga-emoji.svg либо любая своя картинка 16×16 */
.ga-reaction__emoji {
  flex: none;
  display: block;
  width: var(--ga-icon-sm);
  height: var(--ga-icon-sm);
  font-size: var(--ga-icon-sm);
  line-height: 1;
}

.ga-reaction__count {
  font-variant-numeric: tabular-nums;
}

@media (any-hover: hover) {
  .ga-reaction:hover:not(:disabled) {
    border-color: var(--ga-accent-hover);
    color: var(--ga-accent-hover);
  }
}

.ga-reaction:focus-visible {
  outline: var(--ga-focus-ring-width) solid var(--ga-focus-ring-color);
  outline-offset: var(--ga-focus-ring-offset);
}

.ga-reaction[aria-pressed="true"] {
  border-color: var(--ga-accent-active);
  background-color: var(--ga-accent-active);
  color: var(--ga-text-on-accent);
}

@media (any-hover: hover) {
  .ga-reaction[aria-pressed="true"]:hover:not(:disabled) {
    border-color: var(--ga-accent-hover);
    background-color: var(--ga-accent-hover);
  }
}

.ga-reaction:disabled {
  border-color: var(--ga-border-disabled);
  color: var(--ga-text-disabled);
  box-shadow: none;
  cursor: not-allowed;
}

.ga-reaction[aria-pressed="true"]:disabled {
  border-color: var(--ga-bg-disabled-strong);
  background-color: var(--ga-bg-disabled-strong);
  color: var(--ga-text-on-accent);
}
/* ==========================================================================
   GA UI Kit · Alert — сообщение

   Те же тона, что у badge, плюс заголовок и текст.

   Ни крестика, ни кнопок внутри: врезка стоит в потоке страницы и живёт,
   пока держится состояние, — её не закрывают и из неё никуда не уводят.
   Тем она и отличается от тоста, который всплывает поверх и гаснет сам
   ========================================================================== */

.ga-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--ga-space-12);
  padding: var(--ga-space-16);
  border: var(--ga-border-width) solid transparent;
  border-radius: var(--ga-radius-xl);
  background-color: var(--ga-neutral-soft);
  color: var(--ga-neutral-text);
}

.ga-alert--neutral {
  background-color: var(--ga-neutral-soft);
  color: var(--ga-neutral-text);
}

.ga-alert--brand {
  background-color: var(--ga-brand-soft);
  color: var(--ga-brand-text);
}

.ga-alert--success {
  background-color: var(--ga-success-soft);
  color: var(--ga-success-text);
}

.ga-alert--warning {
  background-color: var(--ga-warning-soft);
  color: var(--ga-warning-text);
}

.ga-alert--danger {
  background-color: var(--ga-danger-soft);
  color: var(--ga-danger-text);
}

.ga-alert__icon {
  flex: none;
  margin-top: calc((var(--ga-text-sm) * var(--ga-leading-normal) - var(--ga-icon-md)) / 2);
  color: currentColor;
}

.ga-alert__content {
  display: flex;
  flex-direction: column;
  gap: var(--ga-space-4);
  min-width: 0;
  flex: 1 1 auto;
}

.ga-alert__title {
  margin: 0;
  font-size: var(--ga-text-md);
  font-weight: var(--ga-weight-semibold);
  line-height: var(--ga-leading-normal);
  color: currentColor;
}

.ga-alert__text {
  margin: 0;
  font-size: var(--ga-text-sm);
  font-weight: var(--ga-weight-medium);
  line-height: var(--ga-leading-normal);
  color: currentColor;
}
/* ==========================================================================
   GA UI Kit · Avatar
   ========================================================================== */

.ga-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--ga-avatar-md);
  height: var(--ga-avatar-md);
  border-radius: var(--ga-radius-circle);
  background-color: var(--ga-bg-accent-subtle);
  color: var(--ga-brand-text);
  font-size: var(--ga-text-sm);
  font-weight: var(--ga-weight-semibold);
  text-transform: uppercase;
  user-select: none;
}

.ga-avatar--sm {
  width: var(--ga-avatar-sm);
  height: var(--ga-avatar-sm);
  font-size: var(--ga-text-xs);
}

.ga-avatar--md {
  width: var(--ga-avatar-md);
  height: var(--ga-avatar-md);
}

.ga-avatar--lg {
  width: var(--ga-avatar-lg);
  height: var(--ga-avatar-lg);
  font-size: var(--ga-text-md);
}

.ga-avatar__image {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Верифицированный аккаунт — кольцо вокруг аватара.

   Не галочка: на сайте отметку рисует именно разомкнутое кольцо, повёрнутое
   на 46°, у которого одна четверть выкрашена в цвет фона. Галочка там тоже
   есть, но она стоит рядом с именем, а не на аватаре.

   Зазор до аватара — вдвое от толщины кольца, как в проде
   -------------------------------------------------------------------------- */

.ga-avatar--verified::after {
  content: "";
  position: absolute;
  inset: calc(var(--ga-avatar-ring-width) * -2);
  border: var(--ga-avatar-ring-width) solid var(--ga-accent-hover);
  border-right-color: var(--ga-bg-surface-muted);
  border-radius: var(--ga-radius-circle);
  transform: rotate(46deg);
}

.ga-avatar--lg.ga-avatar--verified {
  --ga-avatar-ring-width: var(--ga-avatar-ring-width-lg);
}
/* ==========================================================================
   GA UI Kit · Divider
   ========================================================================== */

.ga-divider {
  flex: none;
  border: 0;
  height: var(--ga-border-width);
  width: 100%;
  background-color: var(--ga-border);
}

.ga-divider--vertical {
  width: var(--ga-border-width);
  height: auto;
  min-height: var(--ga-space-16);
  align-self: stretch;
}
/* ==========================================================================
   GA UI Kit · Spinner
   ========================================================================== */

.ga-spinner {
  display: inline-block;
  flex: none;
  width: var(--ga-space-32);
  height: var(--ga-space-32);
  border: calc(var(--ga-border-width) * 4) solid var(--ga-accent);
  border-bottom-color: transparent;
  border-radius: var(--ga-radius-circle);
  animation: ga-spinner-rotate 0.7s linear infinite;
}

/* Строчный: рядом с текстом статуса, где 24 уже перевешивают строку */
.ga-spinner--xs {
  width: var(--ga-icon-sm);
  height: var(--ga-icon-sm);
  border-width: calc(var(--ga-border-width) * 2);
}

.ga-spinner--sm {
  width: var(--ga-space-24);
  height: var(--ga-space-24);
  border-width: calc(var(--ga-border-width) * 2);
}

.ga-spinner--lg {
  width: var(--ga-space-48);
  height: var(--ga-space-48);
  border-width: calc(var(--ga-border-width) * 5);
}

/* Для фона акцентного цвета — например, внутри primary-кнопки */
.ga-spinner--on-accent {
  border-color: var(--ga-text-on-accent);
  border-bottom-color: transparent;
}

/* На сайте спиннер всегда накрывает родителя: полупрозрачная подложка
   и кольцо по центру. Родителю нужен position — обычно это карточка */
.ga-spinner-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ga-bg-veil);
}

@keyframes ga-spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}
/* ==========================================================================
   GA UI Kit · Empty state — пустой список
   ========================================================================== */

.ga-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ga-space-20);
  padding: var(--ga-space-24);
  border-radius: var(--ga-radius-lg);
  background-color: var(--ga-bg-surface);
  text-align: center;
}

.ga-empty-state--plain {
  background-color: transparent;
}

.ga-empty-state__icon {
  width: var(--ga-empty-state-icon);
  height: var(--ga-empty-state-icon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ga-radius-circle);
  background-color: var(--ga-bg-accent-subtle);
  color: var(--ga-accent-icon);
  margin-bottom: var(--ga-space-4);
}

.ga-empty-state__title {
  margin: 0;
  font-size: var(--ga-text-md);
  font-weight: var(--ga-weight-semibold);
  line-height: var(--ga-leading-tight);
  color: var(--ga-text-primary);
}

.ga-empty-state__text {
  margin: 0;
  max-width: 42ch;
  font-size: var(--ga-text-sm);
  line-height: var(--ga-leading-normal);
  color: var(--ga-text-muted);
}

.ga-empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ga-space-8);
  margin-top: var(--ga-space-4);
}
/* Навигация -------------------------------------------------------------- */
/* ==========================================================================
   GA UI Kit · Breadcrumbs
   ========================================================================== */

.ga-breadcrumbs {
  min-width: 0;
}

.ga-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ga-space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ga-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--ga-space-8);
  min-width: 0;
  font-size: var(--ga-text-xs);
}

.ga-breadcrumbs__item + .ga-breadcrumbs__item::before {
  content: "/";
  color: var(--ga-text-subtle);
}

.ga-breadcrumbs__link {
  color: var(--ga-text-muted);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--ga-transition-fast);
}

@media (any-hover: hover) {
  .ga-breadcrumbs__link:hover {
    color: var(--ga-accent-hover);
  }
}

.ga-breadcrumbs__link[aria-current="page"] {
  color: var(--ga-text-secondary);
  font-weight: var(--ga-weight-medium);
  pointer-events: none;
}
/* ==========================================================================
   GA UI Kit · Pagination
   ========================================================================== */

.ga-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.ga-pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ga-control-md);
  height: var(--ga-control-md);
  padding-inline: var(--ga-space-4);
  border: 0;
  border-radius: var(--ga-radius-xs);
  background-color: transparent;
  color: var(--ga-text-secondary);
  font-size: var(--ga-text-md);
  font-weight: var(--ga-weight-semibold);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--ga-transition-fast);
}

@media (any-hover: hover) {
  .ga-pagination__item:hover {
    color: var(--ga-accent-icon);
  }
}

/* Текущая страница выделяется цветом, без подложки и рамки */
.ga-pagination__item[aria-current="page"] {
  color: var(--ga-accent-hover);
  pointer-events: none;
}

.ga-pagination__item:disabled,
.ga-pagination__item[aria-disabled="true"] {
  color: var(--ga-text-disabled);
  pointer-events: none;
  cursor: not-allowed;
}

.ga-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ga-control-md);
  height: var(--ga-control-md);
  color: var(--ga-text-subtle);
  font-size: var(--ga-text-md);
  user-select: none;
}
/* Данные ----------------------------------------------------------------- */
/* ==========================================================================
   GA UI Kit · Document card — карточка норматива

   Ядро домена: продукт — это списки нормативных документов.
   Три блока: шапка с иконкой и обозначением, содержимое, действия.
   Внутри содержимого всё лежит плоско, обязательных обёрток нет.

   Статус необязателен. Значений два, по цвету кружка:
     active    зелёный — «Принят», «Действует», «Действует. Отменен в части»
     inactive  красный — «Не определен», «Не действует», «Применение… прекращено»

   Тип сущности задаёт цвет кружка с иконкой:
     document · law · article · canceled
   ========================================================================== */

.ga-document-card {
  /* Точка отсчёта для накладки спиннера */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ga-space-16);
  padding: var(--ga-space-24);
  border-radius: var(--ga-radius-lg);
  background-color: var(--ga-bg-surface);
  min-width: 0;
}

.ga-document-card__header {
  display: flex;
  align-items: center;
  gap: var(--ga-space-8);
  min-width: 0;
}

/* Кружок с иконкой типа */
.ga-document-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--ga-doc-card-icon);
  height: var(--ga-doc-card-icon);
  border-radius: var(--ga-radius-circle);
  background-color: var(--ga-entity-document);
  color: var(--ga-text-on-accent);
  font-size: var(--ga-text-lg);
  font-weight: var(--ga-weight-bold);
}

.ga-document-card__icon .ga-icon {
  width: var(--ga-icon-sm);
  height: var(--ga-icon-sm);
}

.ga-document-card__icon[data-entity="document"],
.ga-document-card__icon[data-entity="law"] {
  background-color: var(--ga-entity-document);
}

.ga-document-card__icon[data-entity="article"] {
  background-color: var(--ga-entity-article);
}

.ga-document-card__icon[data-entity="canceled"] {
  background-color: var(--ga-entity-canceled);
}

.ga-document-card__designation {
  margin: 0;
  min-width: 0;
  font-size: var(--ga-text-2xl);
  font-weight: var(--ga-weight-semibold);
  line-height: var(--ga-leading-tight);
  color: var(--ga-text-primary);
  text-decoration: none;
  transition: color var(--ga-transition-fast);
}

@media (any-hover: hover) {
  a.ga-document-card__designation:hover {
    color: var(--ga-accent-icon);
  }
}

/* Содержимое: статус, подписи, название, описание — плоским списком */
.ga-document-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ga-space-8);
  min-width: 0;
}

.ga-document-card__status {
  display: flex;
  align-items: center;
  gap: var(--ga-space-8);
  margin: 0;
  padding: var(--ga-space-4);
  font-size: var(--ga-text-sm);
  line-height: var(--ga-leading-tight);
  color: var(--ga-text-primary);
}

.ga-document-card__status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--ga-switch-height);
  height: var(--ga-switch-height);
  border-radius: var(--ga-radius-circle);
  background-color: var(--ga-accent-icon);
  color: var(--ga-text-on-accent);
  font-size: var(--ga-text-xs);
  font-weight: var(--ga-weight-semibold);
  line-height: 1;
}

.ga-document-card__status[data-status="active"] .ga-document-card__status-icon {
  background-color: var(--ga-success);
}

.ga-document-card__status[data-status="inactive"] .ga-document-card__status-icon {
  background-color: var(--ga-danger);
}

.ga-document-card__label {
  font-size: var(--ga-text-xs);
  line-height: var(--ga-leading-tight);
  color: var(--ga-text-muted);
}

.ga-document-card__title {
  margin: 0;
  font-size: var(--ga-text-xl);
  font-weight: var(--ga-weight-semibold);
  line-height: var(--ga-leading-tight);
  color: var(--ga-text-primary);
  text-decoration: none;
  transition: color var(--ga-transition-fast);
}

@media (any-hover: hover) {
  a.ga-document-card__title:hover {
    color: var(--ga-accent-icon);
  }
}

.ga-document-card__text {
  margin: 0;
  font-size: var(--ga-text-sm);
  line-height: var(--ga-leading-normal);
  color: var(--ga-text-secondary);
}

/* Длинное описание обрезается, дальше — ссылка «Читать полностью» */
.ga-document-card__text--clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.ga-document-card__more {
  padding: 0;
  background-color: transparent;
  border: 0;
  font-size: var(--ga-text-sm);
  font-weight: var(--ga-weight-medium);
  color: var(--ga-text-link);
  cursor: pointer;
  transition: color var(--ga-transition-fast);
}

@media (any-hover: hover) {
  .ga-document-card__more:hover {
    color: var(--ga-accent-hover);
  }
}

.ga-document-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ga-space-8);
}

/* Архивная карточка целиком приглушена */
.ga-document-card--archive .ga-document-card__icon {
  background-color: var(--ga-bg-disabled-strong);
}

.ga-document-card--archive .ga-document-card__designation,
.ga-document-card--archive .ga-document-card__title,
.ga-document-card--archive .ga-document-card__text {
  color: var(--ga-text-disabled);
}

/* Список карточек */
.ga-document-list {
  display: flex;
  flex-direction: column;
  gap: var(--ga-space-16);
}
/* Нативные --------------------------------------------------------------- */
/* ==========================================================================
   GA UI Kit · Accordion — на <details> / <summary>

   Целиком на HTML, без JS:

     <div class="ga-accordion">
       <details class="ga-accordion__item">
         <summary class="ga-accordion__trigger">…</summary>
         <div class="ga-accordion__content">…</div>
       </details>
     </div>
   ========================================================================== */

.ga-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--ga-space-8);
}

.ga-accordion__item {
  border: var(--ga-border-width) solid var(--ga-border-subtle);
  border-radius: var(--ga-radius-lg);
  background-color: var(--ga-bg-surface);
  overflow: hidden;
}

.ga-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ga-space-12);
  padding: var(--ga-space-16) var(--ga-space-20);
  font-size: var(--ga-text-sm);
  font-weight: var(--ga-weight-semibold);
  color: var(--ga-text-primary);
  cursor: pointer;
  list-style: none;
  transition: color var(--ga-transition-fast);
}

/* Убираем стандартный треугольник */
.ga-accordion__trigger::-webkit-details-marker {
  display: none;
}

.ga-accordion__trigger::marker {
  content: "";
}

/* Свой шеврон */
.ga-accordion__trigger::after {
  content: "";
  flex: none;
  width: var(--ga-icon-md);
  height: var(--ga-icon-md);
  background-color: var(--ga-text-muted);
  transition: transform var(--ga-transition-fast);
  -webkit-mask-image: var(--ga-mask-chevron-down);
  mask-image: var(--ga-mask-chevron-down);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

@media (any-hover: hover) {
  .ga-accordion__trigger:hover {
    color: var(--ga-accent-active);
  }

  .ga-accordion__trigger:hover::after {
    background-color: var(--ga-accent-active);
  }
}

.ga-accordion__item[open] > .ga-accordion__trigger::after {
  transform: rotate(180deg);
}

.ga-accordion__content {
  padding: 0 var(--ga-space-20) var(--ga-space-16);
  font-size: var(--ga-text-sm);
  line-height: var(--ga-leading-relaxed);
  color: var(--ga-text-secondary);
}
/* ==========================================================================
   GA UI Kit · Dialog — на <dialog>

   Подложку, ловушку фокуса и закрытие по Escape даёт браузер. Единственная
   строчка JS на стороне приложения — showModal() / close().

   Отступов у самого <dialog> нет: так клик по подложке отличим от клика
   по содержимому (event.target === dialog)
   ========================================================================== */

.ga-dialog {
  width: calc(100% - var(--ga-space-32));
  max-width: var(--ga-dialog-md);
  max-height: calc(100dvh - var(--ga-space-64));
  padding: 0;
  border: 0;
  border-radius: var(--ga-radius-xl);
  background-color: var(--ga-bg-surface);
  color: var(--ga-text-primary);
  box-shadow: var(--ga-shadow-soft);
  overflow: hidden;
}

.ga-dialog[open] {
  display: flex;
  flex-direction: column;
  animation: ga-dialog-in var(--ga-transition-fast);
}

.ga-dialog::backdrop {
  background-color: var(--ga-bg-overlay);
}

.ga-dialog--sm {
  max-width: var(--ga-dialog-sm);
}

.ga-dialog--lg {
  max-width: var(--ga-dialog-lg);
}

.ga-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ga-space-16);
  padding: var(--ga-space-20) var(--ga-space-20) var(--ga-space-12);
}

.ga-dialog__title {
  margin: 0;
  font-size: var(--ga-text-lg);
  font-weight: var(--ga-weight-semibold);
  line-height: var(--ga-leading-tight);
  color: var(--ga-text-primary);
}

.ga-dialog__description {
  margin: var(--ga-space-4) 0 0;
  font-size: var(--ga-text-sm);
  color: var(--ga-text-muted);
}

.ga-dialog__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 var(--ga-space-20);
  font-size: var(--ga-text-sm);
  line-height: var(--ga-leading-normal);
  color: var(--ga-text-secondary);
}

.ga-dialog__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ga-space-8);
  padding: var(--ga-space-16) var(--ga-space-20) var(--ga-space-20);
}

/* --------------------------------------------------------------------------
   Диалог-подтверждение — композиция по центру: иконка, заголовок, текст,
   основная кнопка во всю ширину и отмена ссылкой под ней.

   Отличается от базового не значениями, а строением, поэтому это отдельный
   модификатор, а не набор мелких правок над шапкой и футером.
   -------------------------------------------------------------------------- */

.ga-dialog--confirm {
  max-width: var(--ga-dialog-sm);
}

.ga-dialog--confirm[open] {
  align-items: center;
  gap: var(--ga-space-24);
  padding: var(--ga-space-24);
  text-align: center;
}

/* Шапки у --confirm нет, поэтому крестик идёт первым в колонке и уходит
   вправо сам. Не абсолютный, как на сайте: тогда он не зависит от того,
   есть ли у диалога containing block, и не наезжает на длинный заголовок.
   Отрицательный отступ снизу съедает нижний паддинг кнопки — до иконки
   остаётся ровно общий gap, а не gap плюс зона нажатия */
.ga-dialog--confirm .ga-close {
  align-self: flex-end;
  margin-bottom: calc(var(--ga-space-8) * -1);
}

.ga-dialog__icon {
  flex: none;
  width: var(--ga-space-40);
  height: var(--ga-space-40);
  color: var(--ga-danger);
}

.ga-dialog--confirm .ga-dialog__title {
  font-size: var(--ga-text-xl);
}

.ga-dialog--confirm .ga-dialog__body {
  flex: 0 1 auto;
  padding: 0;
  line-height: var(--ga-leading-normal);
}

.ga-dialog--confirm .ga-dialog__footer {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: var(--ga-space-16);
  width: 100%;
  padding: 0;
}

/* Отмена — не кнопка, а ссылка под основной кнопкой */
.ga-dialog__dismiss {
  align-self: center;
  padding: 0;
  background-color: transparent;
  border: 0;
  font-size: var(--ga-text-xs);
  font-weight: var(--ga-weight-semibold);
  color: var(--ga-accent-icon);
  cursor: pointer;
  transition: color var(--ga-transition-fast);
}

@media (any-hover: hover) {
  .ga-dialog__dismiss:hover {
    color: var(--ga-accent-active);
  }
}

/* Страница под открытым диалогом не прокручивается */
body:has(.ga-dialog[open]) {
  overflow: hidden;
}

@keyframes ga-dialog-in {
  from {
    opacity: 0;
    transform: translateY(var(--ga-space-8));
  }

  to {
    opacity: 1;
    transform: none;
  }
}
/* Итерация 2 — только стили, поведение живёт этажом выше ------------------ */
/* ==========================================================================
   GA UI Kit · Общие анимации всплывающих слоёв

   Не элемент. Подключается до dropdown, popover, tooltip, select,
   calendar и toast
   ========================================================================== */

@keyframes ga-overlay-in {
  from {
    opacity: 0;
    transform: translateY(calc(var(--ga-space-4) * -1));
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ga-toast-in {
  from {
    opacity: 0;
    transform: translateY(var(--ga-space-12));
  }

  to {
    opacity: 1;
    transform: none;
  }
}
/* ==========================================================================
   GA UI Kit · Tabs

   Итерация 2. Поведение — позиционирование, фокус, клавиатура — живёт
   этажом выше, в фреймворк-пакетах. Здесь только классы для разметки,
   которую они породят.
   Состояния — из data-state / data-highlighted / aria-selected: общая
   конвенция Radix, Base UI и Ark
   ========================================================================== */

.ga-tabs {
  display: flex;
  flex-direction: column;
  gap: var(--ga-space-16);
  min-width: 0;
}

.ga-tabs__list {
  display: flex;
  align-items: center;
  gap: var(--ga-space-4);
  border-bottom: var(--ga-border-width) solid var(--ga-border-subtle);
  overflow-x: auto;
  scrollbar-width: none;
}

.ga-tabs__list::-webkit-scrollbar {
  display: none;
}

.ga-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--ga-space-8);
  height: var(--ga-control-md);
  padding-inline: var(--ga-space-12);
  border-bottom: calc(var(--ga-border-width) * 2) solid transparent;
  margin-bottom: calc(var(--ga-border-width) * -1);
  background-color: transparent;
  color: var(--ga-text-muted);
  font-size: var(--ga-text-sm);
  font-weight: var(--ga-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition:
    color var(--ga-transition-fast),
    border-color var(--ga-transition-fast);
}

@media (any-hover: hover) {
  .ga-tabs__tab:hover {
    color: var(--ga-text-primary);
  }
}

.ga-tabs__tab[aria-selected="true"] {
  color: var(--ga-accent-active);
  border-bottom-color: var(--ga-accent);
}

.ga-tabs__tab:disabled,
.ga-tabs__tab[data-disabled] {
  color: var(--ga-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

.ga-tabs__badge {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--ga-space-4);
  border-radius: var(--ga-radius-sm);
  background-color: var(--ga-neutral-soft);
  color: var(--ga-neutral-text);
  font-size: var(--ga-text-xs);
  font-variant-numeric: tabular-nums;
}

.ga-tabs__tab[aria-selected="true"] .ga-tabs__badge {
  background-color: var(--ga-bg-accent-subtle);
  color: var(--ga-accent-active);
}

/* Вариант «таблетки» */
.ga-tabs--pills .ga-tabs__list {
  border-bottom: 0;
  gap: var(--ga-space-8);
}

/* Значения с сайта: белая таблетка, выбранная — заливкой Blue/100.
   Высота не фиксирована, её держат отступы — так на сайте */
.ga-tabs--pills .ga-tabs__tab {
  height: auto;
  padding: var(--ga-space-8) var(--ga-space-16);
  border-bottom: 0;
  margin-bottom: 0;
  border-radius: var(--ga-radius-pill);
  background-color: var(--ga-bg-surface);
  color: var(--ga-text-tertiary);
  font-size: var(--ga-text-xs);
  transition:
    background-color var(--ga-transition-fast),
    color var(--ga-transition-fast);
}

@media (any-hover: hover) {
  .ga-tabs--pills .ga-tabs__tab:hover {
    color: var(--ga-accent-icon);
  }
}

/* Тем же выглядит якорная навигация на ссылках — там состояние
   приходит из aria-current, а не из aria-selected */
.ga-tabs--pills .ga-tabs__tab[aria-selected="true"],
.ga-tabs--pills .ga-tabs__tab[aria-current="true"],
.ga-tabs--pills .ga-tabs__tab[aria-current="page"] {
  background-color: var(--ga-bg-accent-strong);
  color: var(--ga-text-accent-strong);
}

.ga-tabs__panel {
  min-width: 0;
}
/* ==========================================================================
   GA UI Kit · Dropdown — меню действий

   Итерация 2. Поведение — позиционирование, фокус, клавиатура — живёт
   этажом выше, в фреймворк-пакетах. Здесь только классы для разметки,
   которую они породят.
   Состояния — из data-state / data-highlighted / aria-selected: общая
   конвенция Radix, Base UI и Ark.

   Значения с сайта, и там их два независимых источника, совпадающих между
   собой: меню действий у документа (DownloadItem) и список выбора
   (shared/select). Оба дают радиус 10, рамку Input/Stroke, тень контрола
   и отступ 4 от кнопки.

   Пункты идут во всю ширину и разделены линией — своего радиуса и полей
   у них нет. Скругление у крайних пунктов даёт overflow: hidden контейнера
   ========================================================================== */

.ga-dropdown {
  position: relative;
  display: inline-block;
}

.ga-dropdown__content {
  display: flex;
  flex-direction: column;
  z-index: var(--ga-z-dropdown);
  min-width: var(--ga-menu-min-width);
  max-height: var(--ga-menu-max-height);
  overflow: hidden auto;
  border: var(--ga-border-width) solid var(--ga-border);
  border-radius: var(--ga-radius-md);
  background-color: var(--ga-bg-surface);
  box-shadow: var(--ga-shadow-control);
}

.ga-dropdown__content[data-state="closed"] {
  display: none;
}

.ga-dropdown__content[data-state="open"] {
  animation: ga-overlay-in var(--ga-transition-fast);
}

.ga-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--ga-space-8);
  width: 100%;
  padding: var(--ga-space-12) var(--ga-space-16);
  border: 0;
  background-color: transparent;
  color: var(--ga-text-muted);
  font-size: var(--ga-text-sm);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--ga-transition-fast),
    color var(--ga-transition-fast);
}

/* Линия под каждым пунктом, кроме последнего — так на сайте */
.ga-dropdown__item:not(:last-child) {
  border-bottom: var(--ga-border-width) solid var(--ga-border-subtle);
}

.ga-dropdown__item[data-highlighted],
.ga-dropdown__item:hover {
  background-color: var(--ga-bg-surface-subtle);
  color: var(--ga-text-primary);
}

.ga-dropdown__item[aria-selected="true"],
.ga-dropdown__item[data-state="checked"] {
  background-color: var(--ga-bg-accent-subtle);
  color: var(--ga-accent-active);
}

.ga-dropdown__item[data-disabled],
.ga-dropdown__item:disabled {
  color: var(--ga-text-disabled);
  pointer-events: none;
  cursor: not-allowed;
}
/* ==========================================================================
   GA UI Kit · Popover

   Итерация 2. Поведение — позиционирование, фокус, клавиатура — живёт
   этажом выше, в фреймворк-пакетах. Здесь только классы для разметки,
   которую они породят.
   Состояния — из data-state / data-highlighted / aria-selected: общая
   конвенция Radix, Base UI и Ark
   ========================================================================== */

.ga-popover {
  z-index: var(--ga-z-popover);
  width: max-content;
  max-width: var(--ga-popover-width);
  padding: var(--ga-space-16);
  border: var(--ga-border-width) solid var(--ga-border-subtle);
  border-radius: var(--ga-radius-lg);
  background-color: var(--ga-bg-surface);
  box-shadow: var(--ga-shadow-soft);
  font-size: var(--ga-text-sm);
  color: var(--ga-text-secondary);
}

.ga-popover[data-state="closed"] {
  display: none;
}

.ga-popover[data-state="open"] {
  animation: ga-overlay-in var(--ga-transition-fast);
}

.ga-popover__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ga-space-12);
  margin-bottom: var(--ga-space-8);
}

.ga-popover__title {
  margin: 0;
  font-size: var(--ga-text-sm);
  font-weight: var(--ga-weight-semibold);
  color: var(--ga-text-primary);
}

.ga-popover__body {
  display: flex;
  flex-direction: column;
  gap: var(--ga-space-8);
}

.ga-popover__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--ga-space-8);
  margin-top: var(--ga-space-12);
}
/* ==========================================================================
   GA UI Kit · Tooltip

   Итерация 2. Поведение — позиционирование, фокус, клавиатура — живёт
   этажом выше, в фреймворк-пакетах. Здесь только классы для разметки,
   которую они породят.
   Состояния — из data-state / data-highlighted / aria-selected: общая
   конвенция Radix, Base UI и Ark
   ========================================================================== */

.ga-tooltip {
  position: relative;
  z-index: var(--ga-z-tooltip);
  display: flex;
  flex-direction: column;
  gap: var(--ga-space-8);
  width: max-content;
  max-width: var(--ga-tooltip-width);
  padding: var(--ga-space-16);
  border-radius: var(--ga-radius-sm);
  background-color: var(--ga-bg-surface);
  color: var(--ga-text-secondary);
  font-size: var(--ga-text-xs);
  line-height: var(--ga-leading-normal);
  box-shadow: var(--ga-shadow-soft);
}

.ga-tooltip[data-state="closed"] {
  display: none;
}

.ga-tooltip[data-state="open"] {
  animation: ga-overlay-in var(--ga-transition-fast);
}

.ga-tooltip__title {
  margin: 0;
  font-size: var(--ga-text-xs);
  font-weight: var(--ga-weight-semibold);
  line-height: var(--ga-leading-tight);
  color: var(--ga-text-secondary);
}

.ga-tooltip__text {
  margin: 0;
  font-size: var(--ga-text-xs);
  line-height: var(--ga-leading-normal);
  color: var(--ga-text-secondary);
}

/* Хвостик. Позицию задаёт фреймворк, здесь только форма */
.ga-tooltip__arrow {
  position: absolute;
  width: var(--ga-space-12);
  height: var(--ga-space-12);
  background-color: var(--ga-bg-surface);
  transform: rotate(45deg);
}
/* ==========================================================================
   GA UI Kit · Select — выпадающий список

   Итерация 2. Поведение — открытие, фильтрация, выбор, клавиатура — живёт
   этажом выше, в фреймворк-пакетах. Здесь только классы для разметки,
   которую они породят.
   Состояния — из нативных атрибутов и data-*: aria-expanded на триггере,
   data-state на панели, data-highlighted / aria-selected на пунктах. Общая
   конвенция Radix, Base UI и Ark.

   Нативного <select> в ките нет: на сайте его тоже нет ни одного.

   Триггеров два, и разница между ними не в оформлении, а в том, откуда
   берётся фильтрация:
     .ga-input           — базовый список: в поле набирают, список сужается;
     .ga-select__trigger — множественный выбор: набирать в самом поле нечего,
                           поиск стоит отдельной строкой внутри панели.
   Снаружи они неотличимы: шкуру кнопка берёт общую, из _control-skin.css.

   Панель выглядит ровно как меню действий (.ga-dropdown__content): на сайте
   это один и тот же контрол (shared/select), радиус 10, рамка Input/Stroke,
   тень контрола, отступ 4 от триггера. Пункты идут во всю ширину и разделены
   линией — своего радиуса и полей у них нет, скругление крайним даёт панель.

   Значения триггера — из shared/select: рамка #d8e0f0, hover → рамка
   --ga-accent-icon и свечение, выключенный — как любой контрол.

   Множественный выбор добавляет к панели поиск сверху и «Применить» снизу,
   а пункт делает подписью к чекбоксу. Выбранное в закрытом виде показывают
   двумя способами, и оба собираются из готовых элементов кита: чипы под
   триггером (.ga-chip рядом с селектом) или чип со счётчиком вместо самого
   триггера (.ga-chip--outline с .ga-chip__count)
   ========================================================================== */

.ga-select {
  position: relative;
  display: block;
  min-width: 0;
}

/* ---- Триггер --------------------------------------------------------- */

.ga-select__trigger {
  height: var(--ga-control-md);
  padding-left: var(--ga-space-16);
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

/* Справа — место под стрелку: она лежит поверх триггера */
.ga-select__trigger,
.ga-select > .ga-input {
  padding-right: calc(var(--ga-space-16) + var(--ga-icon-md) + var(--ga-space-8));
}

/* Ничего не выбрано: подпись — это подсказка, а не значение. Полю тот же
   атрибут не нужен, у него для этого есть нативный placeholder */
.ga-select__trigger[data-placeholder] {
  color: var(--ga-text-placeholder);
}

/* Ховер держит весь селект целиком, а не только триггер: стрелка лежит
   поверх него и иначе разрывала бы состояние. Триггер с ошибкой остаётся
   красным: правило вышло бы сильнее [aria-invalid] из общей шкуры */
.ga-select:hover > .ga-select__trigger:not(:disabled):not([aria-invalid="true"]),
.ga-select:hover > .ga-input:not(:disabled):not([aria-invalid="true"]) {
  border-color: var(--ga-accent-icon);
  box-shadow: var(--ga-shadow-glow);
}

/* ---- Стрелка --------------------------------------------------------- */

.ga-select__chevron {
  position: absolute;
  top: 50%;
  right: var(--ga-space-16);
  transform: translateY(-50%);
  color: var(--ga-text-muted);
  pointer-events: none;
  transition:
    transform var(--ga-transition-fast),
    color var(--ga-transition-fast);
}

/* Раскрытый список: стрелка переворачивается и синеет. Состояние берётся
   из aria-expanded самого триггера — дублировать его классом незачем */
.ga-select > .ga-select__trigger[aria-expanded="true"] ~ .ga-select__chevron,
.ga-select > .ga-input[aria-expanded="true"] ~ .ga-select__chevron {
  transform: translateY(-50%) rotate(180deg);
  color: var(--ga-accent-icon);
}

.ga-select:hover > .ga-select__trigger:not(:disabled) ~ .ga-select__chevron,
.ga-select:hover > .ga-input:not(:disabled) ~ .ga-select__chevron {
  color: var(--ga-accent-icon);
}

.ga-select > .ga-select__trigger:disabled ~ .ga-select__chevron,
.ga-select > .ga-input:disabled ~ .ga-select__chevron {
  color: var(--ga-text-disabled);
}

/* ---- Панель ---------------------------------------------------------- */

.ga-select__panel {
  position: absolute;
  top: calc(100% + var(--ga-space-4));
  left: 0;
  right: 0;
  z-index: var(--ga-z-dropdown);
  display: flex;
  flex-direction: column;
  /* Триггером может быть чип шириной по содержимому — панели он не указ */
  min-width: var(--ga-menu-min-width);
  overflow: hidden;
  border: var(--ga-border-width) solid var(--ga-border);
  border-radius: var(--ga-radius-md);
  background-color: var(--ga-bg-surface);
  box-shadow: var(--ga-shadow-control);
}

.ga-select__panel[data-state="closed"] {
  display: none;
}

.ga-select__panel[data-state="open"] {
  animation: ga-overlay-in var(--ga-transition-fast);
}

/* Поиск по списку: внутри — обычный .ga-input-group с лупой */
.ga-select__search {
  padding: var(--ga-space-8);
  border-bottom: var(--ga-border-width) solid var(--ga-border-subtle);
}

/* Прокрутку рисует .ga-scroll, он же ставится в разметке рядом */
.ga-select__list {
  max-height: var(--ga-menu-max-height);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Подвал с «Применить»: у множественного выбора он и есть точка фиксации */
.ga-select__footer {
  display: flex;
  padding: var(--ga-space-8);
  border-top: var(--ga-border-width) solid var(--ga-border-subtle);
}

.ga-select__footer > .ga-button {
  flex: 1;
}

/* ---- Пункты ---------------------------------------------------------- */

/* position: relative — под скрытый <input> чекбокса при множественном выборе */
.ga-select__option {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ga-space-8);
  padding: var(--ga-space-12) var(--ga-space-16);
  color: var(--ga-text-muted);
  font-size: var(--ga-text-sm);
  cursor: pointer;
  transition:
    background-color var(--ga-transition-fast),
    color var(--ga-transition-fast);
}

/* Линия под каждым пунктом, кроме последнего — как в меню действий */
.ga-select__option:not(:last-child) {
  border-bottom: var(--ga-border-width) solid var(--ga-border-subtle);
}

.ga-select__option[data-highlighted],
.ga-select__option:hover {
  background-color: var(--ga-bg-surface-subtle);
  color: var(--ga-text-primary);
}

/* Только для одиночного выбора: при множественном выбранное показывает
   галка, и заливать строку поверх неё нечем */
.ga-select__option[aria-selected="true"] {
  background-color: var(--ga-bg-accent-subtle);
  color: var(--ga-accent-active);
}

.ga-select__option[data-disabled] {
  color: var(--ga-text-disabled);
  pointer-events: none;
  cursor: not-allowed;
}

/* Заголовок группы. Своей линии не рисует: её даёт следующий пункт */
.ga-select__group-label {
  padding: var(--ga-space-12) var(--ga-space-16) var(--ga-space-4);
  font-size: var(--ga-text-xs);
  font-weight: var(--ga-weight-semibold);
  color: var(--ga-text-muted);
}

.ga-select__empty {
  padding: var(--ga-space-12) var(--ga-space-16);
  text-align: center;
  font-size: var(--ga-text-sm);
  color: var(--ga-text-muted);
}

/* ---- Компактный размер ------------------------------------------------
   Модификатор стоит на обёртке, а не на триггере: размер нужен и триггеру,
   и пунктам панели, а панель триггеру не родня и не потомок. Отдельного
   .ga-input--sm при этом не нужно — обёртка ужимает поле сама */

.ga-select--sm > .ga-select__trigger,
.ga-select--sm > .ga-input {
  height: var(--ga-control-sm);
  padding-right: calc(var(--ga-space-12) + var(--ga-icon-md) + var(--ga-space-8));
  padding-left: var(--ga-space-12);
}

.ga-select--sm > .ga-select__chevron {
  right: var(--ga-space-12);
}

.ga-select--sm .ga-select__option,
.ga-select--sm .ga-select__empty {
  padding: var(--ga-space-8) var(--ga-space-12);
}

.ga-select--sm .ga-select__group-label {
  padding: var(--ga-space-8) var(--ga-space-12) var(--ga-space-4);
}

/* ---- Чип вместо триггера ----------------------------------------------
   Закрытый список, из которого что-то выбрано: подпись чипа и раскрывает
   панель, поэтому она кнопка. Крестик рядом снимает весь фильтр */

.ga-select > .ga-chip > .ga-chip__label {
  cursor: pointer;
}
/* ==========================================================================
   GA UI Kit · Calendar — календарная сетка датапикера

   Итерация 2. Поведение — позиционирование, фокус, клавиатура — живёт
   этажом выше, в фреймворк-пакетах. Здесь только классы для разметки,
   которую они породят.
   Состояния — из data-state / data-today / data-outside / aria-selected:
   общая конвенция Radix, Base UI и Ark.

   Значения с сайта (styles/react-calendar.scss, надстройка над react-calendar):
   панель — отступ 16, радиус 10, рамка Input/Stroke, тень контрола; заголовок
   и стрелки отбиты от сетки на 16; колонка 2.5rem, день — кружок 2rem внутри
   неё, отсюда сетка 32 с зазором 8; стрелки Blue/400; подписи дней недели
   и соседние месяцы — как в проде.

   Диапазон здесь только заливкой ячейки: на сайте у крайних дней ещё
   половинчатая подложка через ::before, и собрать её без разметки концов
   диапазона нельзя — это работа фреймворка
   ========================================================================== */

.ga-calendar {
  display: flex;
  flex-direction: column;
  gap: var(--ga-space-16);
  width: max-content;
  padding: var(--ga-space-16);
  border: var(--ga-border-width) solid var(--ga-border);
  border-radius: var(--ga-radius-md);
  background-color: var(--ga-bg-surface);
  box-shadow: var(--ga-shadow-control);
}

.ga-calendar[data-state="closed"] {
  display: none;
}

.ga-calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ga-space-8);
}

/* Заголовок — кнопка: на сайте по нему проваливаются в выбор месяца и года.
   Отсюда сброс кнопки и стрелка внутри */
.ga-calendar__title {
  display: inline-flex;
  align-items: center;
  gap: var(--ga-space-4);
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--ga-text-primary);
  font-family: inherit;
  font-size: var(--ga-text-sm);
  font-weight: var(--ga-weight-medium);
  cursor: pointer;
}

.ga-calendar__nav {
  display: inline-flex;
  align-items: center;
  gap: var(--ga-space-4);
}

/* Стрелки листания синие, а не как текст: так на сайте */
.ga-calendar__nav > .ga-button {
  color: var(--ga-accent-icon);
}

/* Колонка 40 набирается ячейкой 32 и зазором 8 — так день остаётся кружком,
   а не растянутым овалом */
.ga-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, var(--ga-space-32));
  gap: var(--ga-space-8);
}

.ga-calendar__weekday {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--ga-space-32);
  font-size: var(--ga-text-xs);
  color: var(--ga-text-muted);
}

.ga-calendar__day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ga-space-32);
  height: var(--ga-space-32);
  border: var(--ga-border-width) solid transparent;
  border-radius: var(--ga-radius-circle);
  background-color: transparent;
  color: var(--ga-text-secondary);
  font-size: var(--ga-text-sm);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition:
    background-color var(--ga-transition-fast),
    color var(--ga-transition-fast);
}

@media (any-hover: hover) {
  .ga-calendar__day:hover {
    background-color: var(--ga-bg-accent-subtle);
    color: var(--ga-accent-active);
  }
}

/* Сегодня — только обводка, серая: заливка занята выбранным днём.
   Цвет берётся из text-subtle, это ровно тот же Gray/400, что и на сайте */
.ga-calendar__day[data-today] {
  border-color: var(--ga-text-subtle);
}

.ga-calendar__day[data-outside] {
  color: var(--ga-text-disabled);
}

.ga-calendar__day[data-in-range] {
  background-color: var(--ga-bg-accent-soft);
  color: var(--ga-accent-active);
}

.ga-calendar__day[aria-selected="true"] {
  background-color: var(--ga-accent);
  border-color: var(--ga-accent);
  color: var(--ga-text-on-accent);
}

.ga-calendar__day:disabled,
.ga-calendar__day[data-disabled] {
  color: var(--ga-text-disabled);
  pointer-events: none;
  cursor: not-allowed;
}
/* ==========================================================================
   GA UI Kit · Toast

   Итерация 2. Поведение — появление, таймер, закрытие — живёт этажом выше,
   в фреймворк-пакетах. Здесь только классы для разметки, которую они породят.
   Состояния — из data-state: общая конвенция Radix, Base UI и Ark.

   Вид подогнан под react-hot-toast: на сайте тосты показывает она, со своим
   стандартным оформлением. Совпадает силуэт — сверху по центру, плашка
   ужимается по содержимому, одна строка, иконка слева, крестика нет:
   гасится кликом по всей плашке. Значения при этом наши: радиус 8 берётся
   из --ga-radius-sm, тень из --ga-shadow-soft, цвета из семантических токенов
   ========================================================================== */

/* Вьюпорт растянут во всю ширину и кликов не ловит — их ловят сами тосты */
.ga-toast-viewport {
  position: fixed;
  top: var(--ga-space-16);
  right: 0;
  left: 0;
  z-index: var(--ga-z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ga-space-8);
  padding-inline: var(--ga-space-16);
  pointer-events: none;
}

/* Две независимые оси: --bottom переносит вниз, --left и --right прижимают
   к краю. Комбинируются между собой */
.ga-toast-viewport--bottom {
  top: auto;
  bottom: var(--ga-space-16);
}

.ga-toast-viewport--left {
  align-items: flex-start;
}

.ga-toast-viewport--right {
  align-items: flex-end;
}

.ga-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--ga-space-8);
  max-width: var(--ga-toast-width);
  padding: var(--ga-space-8) var(--ga-space-12);
  border-radius: var(--ga-radius-sm);
  background-color: var(--ga-bg-surface);
  box-shadow: var(--ga-shadow-soft);
  text-align: center;
}

.ga-toast[data-state="closed"] {
  display: none;
}

.ga-toast[data-state="open"] {
  animation: ga-toast-in var(--ga-transition-base);
}

.ga-toast__icon {
  flex: none;
  color: var(--ga-text-muted);
}

.ga-toast--success .ga-toast__icon {
  color: var(--ga-success);
}

.ga-toast--warning .ga-toast__icon {
  color: var(--ga-warning);
}

.ga-toast--danger .ga-toast__icon {
  color: var(--ga-danger);
}

.ga-toast--brand .ga-toast__icon {
  color: var(--ga-accent);
}

/* Одна строка центрируется, как в библиотеке. Но пара «заголовок плюс
   текст» по центру читается плохо — этот блок выравнивается по левому краю */
.ga-toast__content {
  text-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--ga-space-4);
  flex: 1 1 auto;
  min-width: 0;
}

.ga-toast__title {
  margin: 0;
  font-size: var(--ga-text-sm);
  font-weight: var(--ga-weight-semibold);
  line-height: var(--ga-leading-tight);
  color: var(--ga-text-primary);
}

.ga-toast__text {
  margin: 0;
  font-size: var(--ga-text-sm);
  line-height: var(--ga-leading-tight);
  color: var(--ga-text-secondary);
}
/* ==========================================================================
   GA UI Kit · Drawer — панель, выезжающая с края

   Итерация 2. Поведение — позиционирование, фокус, клавиатура — живёт
   этажом выше, в фреймворк-пакетах. Здесь только классы для разметки,
   которую они породят.
   Состояния — из data-state / data-highlighted / aria-selected: общая
   конвенция Radix, Base UI и Ark
   ========================================================================== */

.ga-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--ga-z-drawer);
  background-color: var(--ga-bg-overlay);
}

.ga-drawer-overlay[data-state="closed"] {
  display: none;
}

.ga-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--ga-z-drawer) + 1);
  display: flex;
  flex-direction: column;
  width: var(--ga-drawer-width);
  max-width: calc(100% - var(--ga-space-32));
  background-color: var(--ga-bg-surface);
  box-shadow: var(--ga-shadow-soft);
  transition: transform var(--ga-transition-base);
}

.ga-drawer[data-state="closed"] {
  transform: translateX(100%);
  visibility: hidden;
}

.ga-drawer--left {
  right: auto;
  left: 0;
}

.ga-drawer--left[data-state="closed"] {
  transform: translateX(-100%);
}

.ga-drawer--bottom {
  top: auto;
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;
  height: auto;
  max-height: 80dvh;
  border-top-left-radius: var(--ga-radius-xl);
  border-top-right-radius: var(--ga-radius-xl);
}

.ga-drawer--bottom[data-state="closed"] {
  transform: translateY(100%);
}

.ga-drawer__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ga-space-16);
  padding: var(--ga-space-20);
}

.ga-drawer__title {
  margin: 0;
  font-size: var(--ga-text-lg);
  font-weight: var(--ga-weight-semibold);
  color: var(--ga-text-primary);
}

.ga-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 var(--ga-space-20);
  font-size: var(--ga-text-sm);
  color: var(--ga-text-secondary);
}

.ga-drawer__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ga-space-8);
  padding: var(--ga-space-16) var(--ga-space-20) var(--ga-space-20);
}

/* ==========================================================================
   accounts · UIKit compositions

   Приложение не переопределяет компоненты кита. Здесь живут только композиции
   экранов accounts, собранные на публичных дизайн-токенах UIKit.
   ========================================================================== */

.accounts-auth-shell {
  width: 100%;
  max-width: var(--ga-dialog-sm);
}

.accounts-auth-card {
  width: 100%;
  padding: var(--ga-space-24);
  border: var(--ga-border-width) solid var(--ga-border-subtle);
  border-radius: var(--ga-radius-xl);
  background-color: var(--ga-bg-surface);
  color: var(--ga-text-secondary);
  box-shadow: var(--ga-shadow-soft);
}

.accounts-access-body {
  min-height: 100dvh;
  background: var(--ga-bg-surface);
}

.accounts-access-layout {
  display: grid;
  min-height: 100dvh;
  grid-template-columns: minmax(0, 1.08fr) minmax(28rem, 0.92fr);
}

.accounts-access-hero {
  position: relative;
  display: flex;
  min-height: 100dvh;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--ga-space-40) clamp(var(--ga-space-32), 6vw, 6rem) var(--ga-space-32);
  overflow: hidden;
  background: var(--ga-bg-accent-soft);
}

.accounts-access-hero::before,
.accounts-access-hero::after {
  position: absolute;
  border: var(--ga-border-width) solid var(--ga-border-subtle);
  border-radius: var(--ga-radius-circle);
  content: "";
  pointer-events: none;
}

.accounts-access-hero::before {
  right: -11rem;
  bottom: -19rem;
  width: 38rem;
  height: 38rem;
}

.accounts-access-hero::after {
  right: -4rem;
  bottom: -12rem;
  width: 24rem;
  height: 24rem;
}

.accounts-access-brand {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  color: var(--ga-text-primary);
  text-decoration: none;
}

.accounts-logo-link {
  display: inline-flex;
  align-items: center;
}

.accounts-logo {
  display: block;
  width: 166px;
  height: auto;
  max-width: 100%;
}

.accounts-logo--hero {
  width: 200px;
}

.accounts-access-hero__content {
  position: relative;
  z-index: 1;
  max-width: 46rem;
  padding-block: var(--ga-space-40);
}

.accounts-access-hero__content > .ga-badge {
  align-self: flex-start;
}

.accounts-access-title {
  max-width: 43rem;
  margin: 0;
  color: var(--ga-text-primary);
  font-size: clamp(2.75rem, 5.1vw, 5.25rem);
  font-weight: var(--ga-weight-bold);
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.accounts-access-title span {
  color: var(--ga-brand-text);
}

.accounts-access-lead {
  max-width: 40rem;
  margin: 0;
  color: var(--ga-text-secondary);
  font-size: var(--ga-text-lg);
  line-height: var(--ga-leading-relaxed);
}

.accounts-access-benefits {
  display: grid;
  gap: var(--ga-space-12);
  padding: 0;
  margin: 0;
  list-style: none;
}

.accounts-access-benefits li {
  display: flex;
  align-items: center;
  gap: var(--ga-space-12);
  color: var(--ga-text-secondary);
  font-weight: var(--ga-weight-semibold);
}

.accounts-access-benefits li span {
  display: inline-flex;
  width: var(--ga-space-24);
  height: var(--ga-space-24);
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: var(--ga-radius-sm);
  background: var(--ga-brand-text);
  color: var(--ga-text-on-accent);
  box-shadow: var(--ga-shadow-outline);
}

.accounts-access-footnote {
  position: relative;
  z-index: 1;
  max-width: 34rem;
  margin: 0;
  color: var(--ga-text-muted);
  font-size: var(--ga-text-xs);
}

.accounts-access-panel {
  display: flex;
  min-height: 100dvh;
  align-items: center;
  justify-content: center;
  padding: var(--ga-space-40) clamp(var(--ga-space-24), 5vw, var(--ga-space-64));
  background: var(--ga-bg-surface);
}

.accounts-access-form {
  width: 100%;
  max-width: 29rem;
}

.accounts-access-eyebrow {
  margin: 0;
  color: var(--ga-brand-text);
  font-size: var(--ga-text-xs);
  font-weight: var(--ga-weight-bold);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.accounts-access-separator {
  display: flex;
  align-items: center;
  gap: var(--ga-space-12);
  color: var(--ga-text-muted);
  font-size: var(--ga-text-xs);
}

.accounts-access-separator::before,
.accounts-access-separator::after {
  height: var(--ga-border-width);
  flex: 1;
  background: var(--ga-border-subtle);
  content: "";
}

.accounts-panel {
  padding: var(--ga-space-24);
  border: var(--ga-border-width) solid var(--ga-border-subtle);
  border-radius: var(--ga-radius-xl);
  background-color: var(--ga-bg-surface);
  box-shadow: var(--ga-shadow-card);
}

.accounts-panel--accent {
  border-color: var(--ga-border-strong);
  background-color: var(--ga-bg-accent-soft);
}

.accounts-security-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ga-space-16);
  padding: var(--ga-space-16) 0;
}

.accounts-security-item + .accounts-security-item {
  border-top: var(--ga-border-width) solid var(--ga-border-subtle);
}

.accounts-security-item__content {
  min-width: 0;
}

.accounts-security-actions,
.accounts-security-actions form {
  display: flex;
  align-items: center;
  gap: var(--ga-space-8);
}

.accounts-name-input {
  max-width: 220px;
}

.accounts-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ga-space-8);
}

.accounts-company-result {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--ga-space-4);
  padding: var(--ga-space-16);
  border: var(--ga-border-width) solid var(--ga-border-subtle);
  border-radius: var(--ga-radius-lg);
  color: var(--ga-text-primary);
  text-align: left;
  background: var(--ga-bg-surface);
  cursor: pointer;
}

.accounts-company-result:hover,
.accounts-company-result:focus-visible {
  border-color: var(--ga-border-strong);
}

.accounts-definition-list {
  display: grid;
  grid-template-columns: minmax(8rem, 0.7fr) minmax(0, 1.3fr);
  gap: var(--ga-space-8) var(--ga-space-16);
  margin: 0;
}

.accounts-definition-list dt {
  color: var(--ga-text-muted);
}

.accounts-definition-list dd {
  margin: 0;
}

.accounts-difference {
  display: grid;
  gap: var(--ga-space-4);
  padding: var(--ga-space-12);
  border-radius: var(--ga-radius-md);
  background: var(--ga-bg-muted);
}

.accounts-difference del {
  color: var(--ga-text-danger);
}

.accounts-difference ins {
  color: var(--ga-text-success);
  text-decoration: none;
}

.accounts-nav {
  padding-top: var(--ga-space-16);
}

.ga-page > .ga-container {
  width: calc(100% - 2 * var(--ga-space-24));
}

.accounts-form-panel {
  max-width: 720px;
}

.accounts-empty-state {
  min-height: 9rem;
}

.accounts-inline-form,
.accounts-role-form,
.accounts-list__item {
  display: flex;
  align-items: flex-end;
  gap: var(--ga-space-12);
}

.accounts-inline-form__field {
  flex: 1 1 20rem;
}

.accounts-inline-form__role {
  flex: 0 1 14rem;
}

.accounts-role-form {
  align-items: center;
}

.accounts-table-wrap {
  overflow-x: auto;
}

.accounts-table {
  width: 100%;
  border-collapse: collapse;
}

.accounts-table th,
.accounts-table td {
  padding: var(--ga-space-12);
  border-bottom: var(--ga-border-width) solid var(--ga-border-subtle);
  text-align: left;
  vertical-align: middle;
}

.accounts-table th {
  color: var(--ga-text-muted);
  font-size: var(--ga-font-size-sm);
  font-weight: var(--ga-font-weight-semibold);
}

.accounts-list__item {
  align-items: center;
  justify-content: space-between;
  padding: var(--ga-space-12) 0;
}

.accounts-list__item + .accounts-list__item {
  border-top: var(--ga-border-width) solid var(--ga-border-subtle);
}

.accounts-seat-metric strong {
  color: var(--ga-text-primary);
  font-size: var(--ga-text-3xl);
  line-height: 1;
}

.accounts-seat-member {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 10rem 10rem;
  gap: var(--ga-space-16);
  align-items: center;
  padding: var(--ga-space-12) 0;
}

.accounts-seat-member + .accounts-seat-member {
  border-top: var(--ga-border-width) solid var(--ga-border-subtle);
}

.accounts-seat-member > :last-child {
  justify-self: end;
}

.accounts-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.catalog-hero > .ga-badge {
  align-self: flex-start;
}

.catalog-service-mark {
  display: inline-flex;
  width: var(--ga-space-40);
  height: var(--ga-space-40);
  align-items: center;
  justify-content: center;
  border-radius: var(--ga-radius-lg);
  background: var(--ga-brand-text);
  color: var(--ga-text-on-accent);
  font-weight: var(--ga-weight-bold);
  box-shadow: var(--ga-shadow-action);
}

.catalog-calculator {
  align-items: start;
}

.catalog-periods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ga-space-12);
}

.catalog-period {
  min-height: 5rem;
  align-items: flex-start;
  padding: var(--ga-space-16);
  border: var(--ga-border-width) solid var(--ga-border-subtle);
  border-radius: var(--ga-radius-lg);
  background: var(--ga-bg-surface);
}

.catalog-period:has(input:checked) {
  border-color: var(--ga-border-strong);
  box-shadow: var(--ga-shadow-outline);
}

.catalog-seats {
  max-width: 12rem;
}

.catalog-summary {
  position: sticky;
  top: var(--ga-space-24);
}

.catalog-summary__price {
  margin: 0;
  color: var(--ga-text-primary);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: var(--ga-weight-bold);
  letter-spacing: -0.04em;
  line-height: 1;
}

.catalog-confirm-shell {
  width: min(100% - 2 * var(--ga-space-24), 52rem);
}

.accounts-invoice-filters {
  padding-block: var(--ga-space-20);
}

.accounts-invoice-list {
  overflow: hidden;
  border: var(--ga-border-width) solid var(--ga-border-subtle);
  border-radius: var(--ga-radius-xl);
  background: var(--ga-bg-surface);
  box-shadow: var(--ga-shadow-card);
}

.accounts-invoice-list__header,
.accounts-invoice-list__item {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) 10rem 10rem 11rem;
  gap: var(--ga-space-16);
  align-items: center;
  padding: var(--ga-space-16) var(--ga-space-20);
}

.accounts-invoice-list__header {
  color: var(--ga-text-muted);
  font-size: var(--ga-text-xs);
  font-weight: var(--ga-weight-semibold);
  background: var(--ga-bg-muted);
}

.accounts-invoice-list__item + .accounts-invoice-list__item {
  border-top: var(--ga-border-width) solid var(--ga-border-subtle);
}

.accounts-invoice-list__item > :last-child {
  justify-self: start;
}

.accounts-invoice-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 10rem;
  gap: var(--ga-space-20);
  align-items: center;
  padding-block: var(--ga-space-12);
  border-bottom: var(--ga-border-width) solid var(--ga-border-subtle);
}

.accounts-invoice-item > :last-child {
  text-align: right;
}

.accounts-inline-confirmation {
  position: relative;
}

.accounts-inline-confirmation > summary {
  list-style: none;
  cursor: pointer;
}

.accounts-inline-confirmation > summary::-webkit-details-marker {
  display: none;
}

.accounts-inline-confirmation__body {
  position: absolute;
  z-index: 2;
  right: 0;
  width: min(22rem, 80vw);
  padding: var(--ga-space-16);
  margin-top: var(--ga-space-8);
  border: var(--ga-border-width) solid var(--ga-border-subtle);
  border-radius: var(--ga-radius-lg);
  background: var(--ga-bg-surface);
  box-shadow: var(--ga-shadow-card);
}

@media (max-width: 767.98px) {

  .ga-page > .ga-container {
    width: calc(100% - 2 * var(--ga-space-16));
  }

  .accounts-access-layout {
    display: block;
  }

  .accounts-access-hero {
    min-height: auto;
    padding: var(--ga-space-24);
  }

  .accounts-access-hero__content {
    padding-block: var(--ga-space-40) var(--ga-space-24);
  }

  .accounts-access-title {
    font-size: clamp(2.25rem, 12vw, 3.25rem);
  }

  .accounts-access-benefits,
  .accounts-access-footnote {
    display: none;
  }

  .accounts-access-panel {
    min-height: auto;
    padding: var(--ga-space-40) var(--ga-space-20) var(--ga-space-64);
  }

  .accounts-auth-card {
    padding: var(--ga-space-20);
  }

  .accounts-panel {
    padding: var(--ga-space-20);
  }

  .accounts-security-item,
  .accounts-security-actions,
  .accounts-security-actions form {
    align-items: stretch;
    flex-direction: column;
  }

  .accounts-definition-list {
    grid-template-columns: 1fr;
  }

  .accounts-inline-form,
  .accounts-role-form,
  .accounts-list__item {
    align-items: stretch;
    flex-direction: column;
  }

  .accounts-seat-member {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .accounts-seat-member > :last-child {
    justify-self: stretch;
  }

  .catalog-periods {
    grid-template-columns: 1fr;
  }

  .catalog-summary {
    position: static;
  }

  .accounts-invoice-list__header {
    display: none;
  }

  .accounts-invoice-list__item,
  .accounts-invoice-item {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .accounts-invoice-list__item > :last-child {
    justify-self: stretch;
  }

  .accounts-invoice-item > :last-child {
    text-align: left;
  }
}