/* ============================================================
   Alabuga UI Kit — компоненты (.al-*)
   Требует tokens.css. Фреймворк-агностик: чистые классы.
   Значения сняты 1:1 с React-прототипа (Project/src/app/components).
   ============================================================ */

/* ---------- База ---------- */

.al-body,
.al-app {
  background: var(--al-surface-2);
  color: var(--al-ink-900);
  font-family: var(--al-font-body);
  font-size: 14px;
  line-height: 1.5;
}

.al-h1 {
  font-family: var(--al-font-display);
  font-weight: 800;
  font-size: var(--al-text-h1); /* 26px — заголовок страницы */
  color: var(--al-ink-900);
}
.al-h1--display { font-size: var(--al-text-h1-display); line-height: 36px; } /* hero/логин */
.al-h2 {
  font-family: var(--al-font-display);
  font-weight: 700;
  font-size: var(--al-text-h3); /* 18px — заголовок модалки/секции */
}
.al-h3 {
  font-family: var(--al-font-display);
  font-weight: 700;
  font-size: var(--al-text-card-title); /* 15px — заголовок виджета */
}
.al-subtitle { font-size: 12px; color: var(--al-ink-400); }
.al-muted { color: var(--al-ink-600); }
.al-caption { font-family: var(--al-font-caption); font-size: 13px; color: var(--al-ink-600); }

/* Крупная цифра метрики */
.al-num {
  font-family: var(--al-font-display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.15;
}
.al-num--md { font-size: 26px; }
.al-num--sm { font-size: 18px; }

/* ---------- Кнопки ---------- */

.al-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--al-radius-md);
  padding: 8px 16px;
  font-family: var(--al-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--al-transition), color var(--al-transition),
    box-shadow var(--al-transition), opacity var(--al-transition);
}
.al-btn:focus-visible { outline: none; box-shadow: var(--al-focus-ring); }
.al-btn:active { opacity: 0.9; }

.al-btn--primary { background: var(--al-blue-500); color: #fff; }
.al-btn--primary:hover { background: var(--al-blue-700); }
.al-btn--primary:disabled { background: #b7cfe3; color: #fff; cursor: not-allowed; }

/* Вторичная: светлая плашка с голубым контуром (как «Отправить буклет») */
.al-btn--secondary {
  background: var(--al-surface-2);
  color: var(--al-blue-500);
  border: 1px solid var(--al-cyan-100);
  font-size: 13px;
}
.al-btn--secondary:hover { background: var(--al-cyan-50); }

.al-btn--ghost { background: transparent; color: var(--al-ink-600); }
.al-btn--ghost:hover { background: var(--al-surface-2); }

.al-btn--indigo { background: var(--al-indigo-900); color: #fff; font-weight: 700; } /* SSO «Войти через домен» */
.al-btn--indigo:hover { background: var(--al-blue-800); }

.al-btn--danger { background: var(--al-danger); color: #fff; }
.al-btn--danger:hover { background: #c13a3a; }

/* Мягкие тональные кнопки (действия в карточке кандидата, «Успех»/«Провал») */
.al-btn--danger-soft {
  background: var(--al-danger-bg); color: var(--al-danger-fg);
  border: 1px solid var(--al-danger-line);
}
.al-btn--success-soft {
  background: var(--al-success-bg); color: var(--al-success-fg);
  border: 1px solid var(--al-success-line);
}
.al-btn--info-soft {
  background: var(--al-surface-2); color: var(--al-blue-500);
  border: 1px solid var(--al-cyan-100);
}

.al-btn--success { background: var(--al-success); color: #fff; font-weight: 700; }
.al-btn--success:disabled { background: #e6eaf1; color: var(--al-ink-400); cursor: not-allowed; }

/* Размеры */
.al-btn--sm { padding: 4px 8px; font-size: 12px; border-radius: var(--al-radius-sm); gap: 4px; }
.al-btn--lg { padding: 12px 16px; font-size: 15px; border-radius: var(--al-radius-lg); } /* мобильный CTA */
.al-btn--block { display: flex; width: 100%; }

/* Иконочная кнопка */
.al-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--al-radius-sm);
  padding: 6px;
  background: var(--al-surface-2);
  color: var(--al-ink-600);
  cursor: pointer;
  transition: background var(--al-transition);
}
.al-btn-icon:hover { background: var(--al-cyan-50); color: var(--al-blue-700); }
.al-btn-icon--bordered { background: var(--al-surface); border: 1px solid var(--al-line); }

/* Disabled-паттерн тональных кнопок */
.al-btn:disabled,
.al-btn.is-disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* ---------- Поля ввода ---------- */

.al-label {
  display: block;
  font-size: 12px;
  color: var(--al-ink-600);
}
.al-label > .al-input,
.al-label > .al-select,
.al-label > .al-textarea,
.al-label > .al-input-wrap { margin-top: 4px; }

.al-input,
.al-select,
.al-textarea {
  width: 100%;
  background: var(--al-surface);
  border: 1px solid var(--al-line);
  border-radius: var(--al-radius-md);
  padding: 10px 12px;
  font-family: var(--al-font-body);
  font-size: 14px;
  color: var(--al-ink-900);
  outline: none;
  transition: border-color var(--al-transition), box-shadow var(--al-transition);
}
.al-input::placeholder { color: var(--al-ink-400); }
.al-input:focus,
.al-select:focus,
.al-textarea:focus {
  border-color: var(--al-blue-500);
  box-shadow: var(--al-focus-ring);
}
.al-input.is-error { border-color: var(--al-danger); background: var(--al-danger-bg); }
.al-input:disabled { background: var(--al-surface-2); color: var(--al-ink-400); cursor: not-allowed; }

.al-textarea { min-height: 60px; line-height: 20px; resize: vertical; }

/* Инпут с иконкой слева */
.al-input-wrap { position: relative; }
.al-input-wrap > svg,
.al-input-wrap > .al-input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--al-ink-400);
  width: 14px;
  height: 14px;
  pointer-events: none;
}
.al-input-wrap > .al-input { padding-left: 34px; }

/* Мобильный инпут (крупнее: регистрация, шиты) */
.al-input--mobile { border-radius: var(--al-radius-lg); padding: 12px 14px; font-size: 15px; }

/* Поисковая строка на плашке (топбар, фильтры) */
.al-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--al-surface-2);
  border-radius: var(--al-radius-md);
  padding: 0 12px;
}
.al-search > input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  padding: 8px 0;
  font-family: var(--al-font-body);
  font-size: 14px;
  color: var(--al-ink-900);
}
.al-search > svg { color: var(--al-ink-400); flex-shrink: 0; }

/* Кастомный чекбокс (16px, как в MultiSearchSelect) */
.al-check {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--al-line);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  display: inline-block;
  vertical-align: -3px;
  position: relative;
  transition: background var(--al-transition), border-color var(--al-transition);
}
.al-check:checked { background: var(--al-blue-500); border-color: var(--al-blue-500); }
.al-check:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.al-check:focus-visible { outline: none; box-shadow: var(--al-focus-ring); }

/* Чекбокс-плашка («Заблокировать доступ») */
.al-check-tile {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--al-radius-md);
  padding: 12px;
  background: var(--al-surface-2);
  border: 1px solid var(--al-line);
  font-size: 13px;
  cursor: pointer;
}
.al-check-tile.is-danger { background: var(--al-danger-bg); border-color: var(--al-danger-line); }

/* ---------- Чипы, пилюли, бейджи ---------- */

/* Статус-чип: точка + текст, все статусы системы */
.al-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--al-radius-full);
  padding: 2px 10px;
  font-size: 12px;
  line-height: 18px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.al-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.al-chip--info    { background: var(--al-info-bg);    color: var(--al-info-fg);    border-color: var(--al-info-line); }
.al-chip--success { background: var(--al-success-bg); color: var(--al-success-fg); border-color: var(--al-success-line); }
.al-chip--warning { background: var(--al-warning-bg); color: var(--al-warning-fg); border-color: var(--al-warning-line); }
.al-chip--danger  { background: var(--al-danger-bg);  color: var(--al-danger-fg);  border-color: var(--al-danger-line); }
.al-chip--accent  { background: var(--al-accent-bg);  color: var(--al-accent-fg);  border-color: var(--al-accent-line); }
.al-chip--neutral { background: var(--al-neutral-bg); color: var(--al-neutral-fg); border-color: var(--al-neutral-line); }
/* На градиенте (шапка карточки кандидата) */
.al-chip--on-gradient { background: rgba(255, 255, 255, 0.22); color: #fff; border-color: transparent; }

/* Пилюля — маленький тег без точки */
.al-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--al-radius-full);
  padding: 2px 8px;
  font-size: 11px;
  line-height: 16px;
  background: var(--al-cyan-100);
  color: var(--al-indigo-900);
  white-space: nowrap;
}
.al-pill--info     { background: var(--al-cyan-50);   color: var(--al-blue-700); }
.al-pill--success  { background: var(--al-success-bg); color: var(--al-success-fg); }
.al-pill--danger   { background: var(--al-danger-bg); color: var(--al-danger-fg); }
.al-pill--warning  { background: var(--al-warning-bg); color: var(--al-warning-fg); }
.al-pill--neutral  { background: var(--al-neutral-bg); color: var(--al-neutral-fg); }
.al-pill--on-gradient { background: rgba(255, 255, 255, 0.18); color: #fff; }

/* Чип активного фильтра: «Поиск: Иванов ×» */
.al-filterchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--al-radius-full);
  padding: 2px 10px;
  background: var(--al-cyan-50);
  color: var(--al-blue-700);
  border: 1px solid var(--al-cyan-100);
  font-size: 12px;
  line-height: 20px;
}
.al-filterchip__label { color: var(--al-ink-600); }
.al-filterchip__value { font-weight: 600; }
.al-filterchip > button {
  border: none; background: none; padding: 0; cursor: pointer;
  color: var(--al-ink-600); display: inline-flex;
}

/* Чип-кнопка группы (результаты поиска), toggle-состояние */
.al-groupchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--al-radius-full);
  padding: 6px 12px;
  background: var(--al-surface);
  color: var(--al-ink-900);
  border: 1px solid var(--al-line);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--al-transition), color var(--al-transition);
}
.al-groupchip__count {
  border-radius: var(--al-radius-full);
  padding: 0 6px;
  background: var(--al-surface-2);
  color: var(--al-ink-600);
  font-size: 11px;
  font-weight: 700;
}
.al-groupchip.is-active { background: var(--al-blue-500); color: #fff; border-color: var(--al-blue-500); }
.al-groupchip.is-active .al-groupchip__count { background: rgba(255, 255, 255, 0.2); color: #fff; }

/* Счётчик уведомлений на иконке */
.al-badge-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--al-radius-full);
  background: var(--al-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Бейдж места в рейтинге */
.al-rank {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  background: var(--al-surface-2);
  color: var(--al-ink-600);
}
.al-rank--1 { background: var(--al-gradient); color: #fff; }
.al-rank--2 { background: var(--al-cyan-100); color: var(--al-indigo-900); }
.al-rank--3 { background: var(--al-cyan-50); color: var(--al-indigo-900); }

/* Номер шага в конструкторе маршрута */
.al-numbadge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--al-cyan-50);
  color: var(--al-blue-700);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Цветная полоса типа этапа */
.al-typebar { width: 4px; border-radius: 2px; align-self: stretch; background: var(--al-line); }

/* ---------- Карточки ---------- */

.al-card {
  background: var(--al-surface);
  border: 1px solid var(--al-line);
  border-radius: var(--al-radius-lg);
  padding: 16px;
}
.al-card--flush { padding: 0; overflow: hidden; } /* для таблиц и списков внутри */
.al-card--highlight { background: var(--al-cyan-50); border-color: var(--al-cyan-100); }
.al-card--gradient { background: var(--al-gradient); border: none; color: #fff; }
.al-card--soft { background: var(--al-surface-2); }

/* Кликабельная карточка-очередь (KPI с иконкой); тень — сигнал активности */
.al-card--clickable { cursor: pointer; text-align: left; transition: border-color var(--al-transition), box-shadow var(--al-transition); }
.al-card--clickable:hover { border-color: var(--al-cyan-300); }
.al-card--clickable.is-active { border-color: var(--al-blue-500); box-shadow: var(--al-shadow-active); }

/* Иконка-бокс в карточке */
.al-iconbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--al-radius-md);
  padding: 8px;
  background: var(--al-cyan-50);
  color: var(--al-blue-500);
}
.al-iconbox--accent  { background: var(--al-cyan-100);  color: var(--al-indigo-900); }
.al-iconbox--success { background: var(--al-success-bg); color: var(--al-success-fg); }
.al-iconbox--warning { background: var(--al-warning-bg); color: var(--al-warning-fg); }
.al-iconbox--danger  { background: var(--al-danger-bg);  color: var(--al-danger-fg); }

/* KPI-метрика: лейбл + крупная цифра Muller + подпись */
.al-metric__label { font-size: 12px; color: var(--al-ink-600); }
.al-metric__value {
  font-family: var(--al-font-display);
  font-weight: 800;
  font-size: 28px;
  margin-top: 4px;
}
.al-metric__sub { font-size: 12px; color: var(--al-ink-600); }
.al-card--gradient .al-metric__label { color: rgba(255, 255, 255, 0.9); }
.al-card--gradient .al-metric__sub { color: rgba(255, 255, 255, 0.85); }

/* ---------- Таблица ---------- */

.al-table-wrap { overflow-x: auto; }
.al-table { width: 100%; border-collapse: collapse; }
.al-table th {
  padding: 12px 16px;
  border-bottom: 1px solid var(--al-line);
  font-size: 12px;
  font-weight: 500;
  color: var(--al-ink-600);
  text-align: left;
  white-space: nowrap;
}
.al-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--al-line);
  vertical-align: middle;
  font-size: 14px;
}
.al-table tbody tr { transition: background var(--al-transition); }
.al-table tbody tr:hover { background: var(--al-surface-2); }
.al-table tbody tr.is-selected { background: var(--al-cyan-50); }
.al-table tbody tr.is-muted { opacity: 0.65; }
.al-table--clickable tbody tr { cursor: pointer; }

/* Пустое состояние */
.al-empty { padding: 24px; text-align: center; font-size: 13px; color: var(--al-ink-600); }
.al-empty__title { font-weight: 600; }
.al-empty__hint { font-size: 12px; }

/* ---------- Табы и сегменты ---------- */

/* Контейнер табов (белый, на странице настроек) */
.al-tabs {
  display: inline-flex;
  gap: 4px;
  border-radius: var(--al-radius-lg);
  padding: 4px;
  background: var(--al-surface);
  border: 1px solid var(--al-line);
  max-width: 100%;
  overflow-x: auto;
}
.al-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  border-radius: var(--al-radius-md);
  padding: 6px 12px;
  background: transparent;
  color: var(--al-ink-600);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--al-transition), color var(--al-transition);
}
.al-tab:hover { background: var(--al-surface-2); }
.al-tab.is-active { background: var(--al-cyan-50); color: var(--al-blue-700); font-weight: 700; }

/* Сегмент-переключатель (шапка приложения, роли): активный — белый с тенью */
.al-seg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--al-radius-lg);
  padding: 4px;
  background: var(--al-surface-2);
  border: 1px solid var(--al-line);
}
.al-seg__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: var(--al-radius-md);
  padding: 6px 12px;
  background: transparent;
  color: var(--al-ink-600);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.al-seg__btn.is-active {
  background: var(--al-surface);
  color: var(--al-blue-700);
  font-weight: 700;
  box-shadow: var(--al-shadow-seg);
}

/* ---------- Сайдбар (десктоп) ---------- */

.al-sidebar {
  width: var(--al-sidebar-w);
  flex-shrink: 0;
  background: var(--al-surface);
  border-right: 1px solid var(--al-line);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.al-sidebar__logo { display: flex; align-items: center; gap: 8px; padding: 12px 8px; margin-bottom: 8px; }
.al-sidebar__label {
  font-size: 11px;
  color: var(--al-ink-400);
  padding: 0 12px 6px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-top: 16px;
}
.al-sidebar__item {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: var(--al-radius-md);
  padding: 8px 12px;
  background: transparent;
  color: var(--al-ink-600);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background var(--al-transition), color var(--al-transition);
}
.al-sidebar__item:hover { background: var(--al-surface-2); }
.al-sidebar__item.is-active { background: var(--al-cyan-50); color: var(--al-blue-700); font-weight: 600; }
.al-sidebar__subitem { font-size: 13px; padding: 6px 12px; border-radius: var(--al-radius-sm); margin-left: 12px; }
.al-sidebar__subitem.is-active { font-weight: 700; }
.al-sidebar__profile {
  margin-top: auto;
  border-radius: var(--al-radius-lg);
  padding: 12px;
  background: var(--al-surface-2);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------- Топбар ---------- */

.al-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  background: var(--al-surface);
  border-bottom: 1px solid var(--al-line);
}

/* ---------- Аватары ---------- */

.al-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--al-gradient);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  user-select: none;
}
.al-avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.al-avatar--lg { width: 56px; height: 56px; font-size: 18px; }
.al-avatar--neutral { background: var(--al-surface-2); color: var(--al-ink-600); }

/* Стопка аватаров с перекрытием */
.al-avatar-stack { display: inline-flex; }
.al-avatar-stack > .al-avatar {
  border: 2px solid var(--al-surface);
  margin-left: -8px;
}
.al-avatar-stack > .al-avatar:first-child { margin-left: 0; }

/* ---------- Прогресс ---------- */

.al-progress {
  width: 100%;
  height: 6px;
  border-radius: var(--al-radius-full);
  background: var(--al-surface-2);
  border: 1px solid var(--al-line);
  overflow: hidden;
}
.al-progress--lg { height: 10px; }
.al-progress__bar {
  height: 100%;
  border-radius: var(--al-radius-full);
  background: var(--al-gradient);
  transition: width 0.3s ease;
}
.al-progress__bar.is-complete { background: var(--al-success); }
/* Вариант на градиентной шапке */
.al-progress--on-gradient { background: rgba(255, 255, 255, 0.25); border: none; height: 6px; }
.al-progress--on-gradient .al-progress__bar { background: #fff; }

/* Степпер регистрации: полосы-сегменты */
.al-stepper { display: flex; gap: 6px; }
.al-stepper__seg {
  flex: 1;
  height: 4px;
  border-radius: var(--al-radius-full);
  background: var(--al-line);
}
.al-stepper__seg.is-done { background: var(--al-blue-500); }

/* Статус-степпер: точки с коннекторами (карточка кандидата) */
.al-dots { display: flex; align-items: center; width: 100%; }
.al-dots__step { display: flex; align-items: center; flex: 1 1 0; }
.al-dots__step:last-child { flex: 0 0 auto; }
.al-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--al-surface);
  border: 1px solid var(--al-line);
  color: var(--al-ink-400);
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}
.al-dot.is-done { background: var(--al-success); border: none; color: #fff; }
.al-dot.is-current {
  width: 24px;
  height: 24px;
  background: var(--al-blue-500);
  border: none;
  color: #fff;
  box-shadow: var(--al-shadow-ring-current);
}
.al-dots__line {
  flex: 1;
  height: 2px;
  margin: 0 4px;
  border-radius: var(--al-radius-full);
  background: var(--al-line);
}
.al-dots__line.is-done { background: var(--al-success); }

/* ---------- Модалки и шиты ---------- */

.al-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--al-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
}
.al-modal {
  background: var(--al-surface);
  border-radius: var(--al-radius-xl);
  max-width: 460px;               /* широкие редакторы: 520/880 */
  width: calc(100% - 24px);
  max-height: 92vh;
  overflow: auto;
  margin: 0 12px;
}
.al-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--al-line);
}
.al-modal__head .al-h2 { margin: 0; }
.al-modal__body { padding: 24px; display: grid; gap: 12px; }
.al-modal__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 0 24px 24px; }
.al-modal-close {
  border: none;
  background: none;
  border-radius: var(--al-radius-sm);
  padding: 4px;
  color: var(--al-ink-600);
  cursor: pointer;
}
.al-modal-close:hover { background: var(--al-surface-2); }

/* Мобильный bottom-sheet */
.al-overlay--sheet { align-items: flex-end; }
.al-sheet {
  width: 100%;
  background: var(--al-surface);
  border-radius: var(--al-radius-sheet) var(--al-radius-sheet) 0 0;
  max-height: 90%;
  overflow: auto;
}
.al-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--al-line);
}
.al-sheet__body { padding: 20px; }

/* ---------- Алерты / заметки ---------- */

.al-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border-radius: var(--al-radius-md);
  padding: 12px;
  font-size: 13px;
}
.al-note--info    { background: var(--al-cyan-50);   color: var(--al-blue-700); }
.al-note--neutral { background: var(--al-surface-2); color: var(--al-ink-600); font-size: 12px; }
.al-note--success { background: var(--al-success-bg); color: var(--al-success-fg); }
.al-note--warning { background: var(--al-warning-bg); color: var(--al-warning-fg); }
.al-note--danger  { background: var(--al-danger-bg);  color: var(--al-danger-fg); }
.al-note > svg { flex-shrink: 0; margin-top: 2px; }

/* Цитата (мобильный контент) */
.al-quote {
  border-radius: var(--al-radius-md);
  padding: 12px;
  background: var(--al-cyan-50);
  border-left: 3px solid var(--al-blue-500);
  font-size: 13px;
  font-style: italic;
}

/* ---------- Градиентные блоки ---------- */

.al-hero {
  background: var(--al-gradient);
  color: #fff;
  border-radius: var(--al-radius-xl);
  padding: 32px;
}
.al-hero--flush { border-radius: 0; }                          /* шапка drawer'a */
.al-hero--mobile { border-radius: 0 0 var(--al-radius-sheet) var(--al-radius-sheet); padding: 24px 24px 40px; }
.al-hero .al-h1, .al-hero .al-h2, .al-hero .al-h3 { color: #fff; }
.al-hero__sub { font-size: 14px; opacity: 0.9; }
/* Полупрозрачная плашка на градиенте */
.al-hero__panel {
  background: rgba(255, 255, 255, 0.16);
  border-radius: var(--al-radius-lg);
  padding: 12px;
  backdrop-filter: blur(4px);
}

/* ---------- Разделитель «или» ---------- */

.al-divider { display: flex; align-items: center; gap: 12px; }
.al-divider::before,
.al-divider::after { content: ""; flex: 1; height: 1px; background: var(--al-line); }
.al-divider > span {
  background: var(--al-surface-2);
  color: var(--al-ink-600);
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--al-radius-full);
  padding: 2px 8px;
}

/* ---------- Список-строки (результаты, уведомления, этапы) ---------- */

.al-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border: none;
  border-top: 1px solid var(--al-line);
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: var(--al-font-body);
  transition: background var(--al-transition);
}
.al-row:hover { background: var(--al-surface-2); }
.al-row__title { font-size: 14px; font-weight: 600; }
.al-row__meta { font-size: 12px; color: var(--al-ink-600); }
.al-row.is-unread { background: rgba(0, 131, 202, 0.04); }

/* Строка этапа в карте ТУ */
.al-stagerow {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--al-line);
}
.al-stagerow:last-child { border-bottom: none; }
.al-stagerow.is-current { background: var(--al-cyan-50); }
.al-stagerow__name { font-size: 14px; font-weight: 600; margin-top: 4px; }
.al-stagerow.is-done .al-stagerow__name { color: var(--al-ink-600); text-decoration: line-through; }
.al-stagerow__meta { font-size: 12px; color: var(--al-ink-600); }

/* Индикатор этапа (22px) */
.al-stagedot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 1px solid var(--al-ink-400);
  background: var(--al-surface);
}
.al-stagedot.is-current { background: var(--al-gradient); border: none; }
.al-stagedot.is-done { background: var(--al-success); border: none; }
.al-stagedot.is-failed { background: var(--al-danger); border: none; }
.al-stagedot.is-skipped {
  background: var(--al-surface-2);
  border: 1px dashed var(--al-line);
  color: var(--al-ink-400);
  font-size: 11px;
}

/* ---------- Мобильные паттерны ---------- */

/* Демо-рамка телефона (для прототипов и презентаций) */
.al-phone {
  width: var(--al-mobile-w);
  height: 800px;
  border-radius: var(--al-radius-frame);
  background: var(--al-surface-2);
  box-shadow: 0 30px 60px -20px rgba(20, 30, 80, 0.35), 0 0 0 10px #0c1330, 0 0 0 12px #1a2348;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  font-family: var(--al-font-body);
  color: var(--al-ink-900);
}

/* Нижняя навигация */
.al-bottomnav {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 8px 8px 12px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--al-line);
}
.al-bottomnav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 0;
  border: none;
  background: none;
  color: var(--al-ink-600);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
}
.al-bottomnav__item.is-active { color: var(--al-blue-500); font-weight: 700; }
.al-bottomnav__item.is-locked { color: var(--al-ink-400); opacity: 0.6; }

/* Плитка этапа на компакт-карте ТУ (сетка зданий) */
.al-buildtile {
  border-radius: var(--al-radius-md);
  border: 1.5px solid var(--al-line);
  background: var(--al-surface-2);
  padding: 10px;
  min-height: 84px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.al-buildtile__roof { height: 4px; border-radius: 4px; background: var(--al-line); margin-bottom: 6px; }
.al-buildtile.is-passed { background: rgba(22, 160, 107, 0.08); border-color: var(--al-success); }
.al-buildtile.is-passed .al-buildtile__roof { background: var(--al-success); }
.al-buildtile.is-current {
  background: rgba(0, 131, 202, 0.08);
  border-color: var(--al-blue-500);
  box-shadow: 0 6px 16px -10px rgba(0, 131, 202, 0.53);
}
.al-buildtile.is-current .al-buildtile__roof { background: var(--al-blue-500); }
.al-buildtile.is-upcoming { opacity: 0.7; }
.al-buildtile__name { font-size: 12px; font-weight: 700; line-height: 15px; margin-top: 4px; }
.al-buildtile__meta { font-size: 10px; color: var(--al-ink-600); margin-top: 2px; }

/* Тональные иконки-боксы мобильного контента */
.al-tone-blue   { background: var(--al-cyan-50);            color: var(--al-blue-500); }
.al-tone-cyan   { background: var(--al-cyan-100);           color: var(--al-indigo-900); }
.al-tone-indigo { background: rgba(43, 47, 135, 0.12);      color: var(--al-indigo-900); }
.al-tone-green  { background: var(--al-success-bg);         color: var(--al-success-fg); }
.al-tone-violet { background: rgba(123, 92, 214, 0.12);     color: #7b5cd6; }
.al-tone-rose   { background: rgba(234, 93, 190, 0.12);     color: #ea5dbe; }

/* ---------- Тулбар (rich-text) ---------- */

.al-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  background: var(--al-surface-2);
  border-bottom: 1px solid var(--al-line);
}
.al-toolbar__btn {
  border: none;
  border-radius: 4px;
  padding: 6px;
  background: transparent;
  color: var(--al-ink-600);
  cursor: pointer;
  display: inline-flex;
}
.al-toolbar__btn:hover { background: var(--al-surface); }
.al-toolbar__sep { width: 1px; align-self: stretch; margin: 0 4px; background: var(--al-line); }
.al-editor {
  border: 1px solid var(--al-line);
  border-radius: var(--al-radius-md);
  background: var(--al-surface);
  overflow: hidden;
}
.al-editor__area {
  padding: 12px 14px;
  font-size: 14px;
  line-height: 20px;
  min-height: 180px;
  outline: none;
}
.al-editor__area a { color: var(--al-blue-500); text-decoration: underline; }

/* ---------- Лейаут приложения (типовые страницы) ---------- */

.al-shell { display: flex; min-height: 100vh; background: var(--al-surface-2); }
.al-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.al-page {
  flex: 1;
  padding: 24px 32px 40px;
  display: grid;
  gap: 20px;
  align-content: start;
}
@media (max-width: 900px) { .al-page { padding: 16px; } }

/* Заголовок страницы: H1 + подзаголовок слева, действия справа */
.al-pagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.al-pagehead__sub { font-size: 14px; color: var(--al-ink-600); margin-top: 2px; }
.al-pagehead__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.al-breadcrumbs { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--al-ink-400); }
.al-breadcrumbs a { color: var(--al-ink-600); text-decoration: none; }
.al-breadcrumbs a:hover { color: var(--al-blue-500); }

/* Панель фильтров над таблицей */
.al-filterbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Триггер комбобокса (SearchSelect) */
.al-selectbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: var(--al-radius-md);
  padding: 8px 12px;
  background: var(--al-surface-2);
  color: var(--al-ink-900);
  font-family: var(--al-font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.al-selectbtn > svg { color: var(--al-ink-400); }
.al-selectbtn.is-placeholder { color: var(--al-ink-600); }

/* Пагинация под таблицей */
.al-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--al-ink-600);
  flex-wrap: wrap;
}
.al-pagination__pages { display: flex; gap: 4px; }
.al-pagination__pages button {
  min-width: 28px;
  height: 28px;
  border: 1px solid var(--al-line);
  border-radius: var(--al-radius-sm);
  background: var(--al-surface);
  color: var(--al-ink-600);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.al-pagination__pages button.is-active { background: var(--al-blue-500); border-color: var(--al-blue-500); color: #fff; }
.al-pagination__pages button:disabled { opacity: 0.5; cursor: default; }

/* Сетка форм и key-value списки */
.al-fieldgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.al-fieldgrid > .is-span { grid-column: 1 / -1; }
@media (max-width: 640px) { .al-fieldgrid { grid-template-columns: 1fr; } }

.al-kv { display: grid; grid-template-columns: 140px 1fr; gap: 8px 16px; margin: 0; }
.al-kv dt { font-size: 12px; color: var(--al-ink-600); padding-top: 2px; }
.al-kv dd { font-size: 14px; font-weight: 600; margin: 0; min-width: 0; }

/* Секция настроек: заголовок + описание + контент */
.al-formsection { display: grid; gap: 12px; }
.al-formsection > header .al-h3 { margin-bottom: 2px; }
.al-formsection > header p { font-size: 12px; color: var(--al-ink-600); }

/* Перетаскиваемая строка конструктора */
.al-dragrow {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: var(--al-radius-md);
  padding: 10px;
  background: var(--al-surface);
  border: 1px solid var(--al-line);
  cursor: grab;
}
.al-dragrow.is-dragging { background: var(--al-cyan-50); border-color: var(--al-cyan-300); }
.al-dragrow__grip { color: var(--al-ink-400); flex-shrink: 0; }

/* Опасная зона настроек */
.al-dangerzone {
  border: 1px solid var(--al-danger-line);
  border-radius: var(--al-radius-lg);
  background: var(--al-surface);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* Скелетон загрузки */
@keyframes al-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.al-skeleton {
  border-radius: var(--al-radius-sm);
  background: linear-gradient(90deg, #eef1f6 25%, #f7f9fc 50%, #eef1f6 75%);
  background-size: 200% 100%;
  animation: al-shimmer 1.4s ease infinite;
  min-height: 12px;
}
.al-skeleton--circle { border-radius: 50%; }

/* Тост (плавающее уведомление) */
.al-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--al-surface);
  border: 1px solid var(--al-line);
  border-left: 3px solid var(--al-blue-500);
  border-radius: var(--al-radius-lg);
  padding: 12px 16px;
  box-shadow: var(--al-shadow-float);
  font-size: 13px;
  max-width: 360px;
}
.al-toast--success { border-left-color: var(--al-success); }
.al-toast--danger { border-left-color: var(--al-danger); }
.al-toast--warning { border-left-color: var(--al-warning); }
.al-toast__title { font-weight: 700; }
.al-toast__text { font-size: 12px; color: var(--al-ink-600); }

/* Код ошибки (404/403/500) — градиентный текст */
.al-errorcode {
  font-family: var(--al-font-display);
  font-weight: 800;
  font-size: 72px;
  line-height: 1;
  background: var(--al-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Дополнительные контролы (v1.1) ---------- */

/* Радио-кнопка (пара к .al-check) */
.al-radio {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--al-line);
  border-radius: 50%;
  background: var(--al-surface);
  cursor: pointer;
  display: inline-block;
  vertical-align: -3px;
  position: relative;
  transition: border-color var(--al-transition);
}
.al-radio:checked { border-color: var(--al-blue-500); }
.al-radio:checked::after {
  content: "";
  position: absolute;
  inset: 2.5px;
  border-radius: 50%;
  background: var(--al-blue-500);
}
.al-radio:focus-visible { outline: none; box-shadow: var(--al-focus-ring); }

/* Переключатель */
.al-switch {
  appearance: none;
  -webkit-appearance: none;
  width: 36px;
  height: 20px;
  border-radius: var(--al-radius-full);
  background: #cbd2de;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background var(--al-transition);
}
.al-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(22, 22, 22, 0.25);
  transition: transform var(--al-transition);
}
.al-switch:checked { background: var(--al-blue-500); }
.al-switch:checked::after { transform: translateX(16px); }
.al-switch:focus-visible { outline: none; box-shadow: var(--al-focus-ring); }
/* Строка настройки со свитчем */
.al-switchrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  cursor: pointer;
}
.al-switchrow + .al-switchrow { border-top: 1px solid var(--al-line); }
.al-switchrow__text { flex: 1; min-width: 0; }
.al-switchrow__title { font-size: 14px; font-weight: 600; }
.al-switchrow__sub { font-size: 12px; color: var(--al-ink-600); }

/* Тег-инпут (мультивыбор) */
.al-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px;
  background: var(--al-surface);
  border: 1px solid var(--al-line);
  border-radius: var(--al-radius-md);
}
.al-tags:focus-within { border-color: var(--al-blue-500); box-shadow: var(--al-focus-ring); }
.al-tags > input {
  flex: 1;
  min-width: 120px;
  border: none;
  outline: none;
  font-family: var(--al-font-body);
  font-size: 13px;
  padding: 2px 4px;
  background: transparent;
}
.al-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--al-cyan-50);
  color: var(--al-blue-700);
  border: 1px solid var(--al-cyan-100);
  border-radius: var(--al-radius-sm);
  padding: 2px 6px;
  font-size: 12px;
  font-weight: 600;
}
.al-tag > button { border: none; background: none; padding: 0; color: inherit; cursor: pointer; display: inline-flex; opacity: .7; }
.al-tag > button:hover { opacity: 1; }

/* Код подтверждения (регистрация, OTP) */
.al-codeinput { display: flex; gap: 8px; }
.al-codeinput > input {
  width: 44px;
  height: 52px;
  text-align: center;
  font-family: var(--al-font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--al-ink-900);
  background: var(--al-surface);
  border: 1px solid var(--al-line);
  border-radius: var(--al-radius-lg);
  outline: none;
  transition: border-color var(--al-transition), box-shadow var(--al-transition);
}
.al-codeinput > input:focus { border-color: var(--al-blue-500); box-shadow: var(--al-focus-ring); }

/* Поле «скопировать ссылку» */
.al-copyfield {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--al-cyan-50);
  border: 1px solid var(--al-cyan-100);
  border-radius: var(--al-radius-md);
  padding: 6px 6px 6px 12px;
}
.al-copyfield > code {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--al-blue-700);
}

/* Загрузка файлов */
.al-dropzone {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--al-ink-600);
  background: var(--al-surface);
  border: 1.5px dashed var(--al-cyan-300);
  border-radius: var(--al-radius-lg);
  cursor: pointer;
  transition: background var(--al-transition), border-color var(--al-transition);
}
.al-dropzone:hover, .al-dropzone.is-drag { background: var(--al-cyan-50); border-color: var(--al-blue-500); }
.al-filerow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--al-surface);
  border: 1px solid var(--al-line);
  border-radius: var(--al-radius-md);
  font-size: 13px;
}
.al-filerow__name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-filerow__meta { font-size: 11px; color: var(--al-ink-400); flex-shrink: 0; }

/* Дропдаун-меню (статичная панель; позиционирование — на проекте) */
.al-menu {
  min-width: 200px;
  padding: 4px;
  background: var(--al-surface);
  border: 1px solid var(--al-line);
  border-radius: var(--al-radius-lg);
  box-shadow: var(--al-shadow-float);
}
.al-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: var(--al-radius-md);
  background: none;
  font-family: var(--al-font-body);
  font-size: 13px;
  color: var(--al-ink-900);
  text-align: left;
  cursor: pointer;
}
.al-menu__item:hover { background: var(--al-surface-2); }
.al-menu__item.is-danger { color: var(--al-danger-fg); }
.al-menu__item.is-danger:hover { background: var(--al-danger-bg); }
.al-menu__item > svg { color: var(--al-ink-600); }
.al-menu__item.is-danger > svg { color: inherit; }
.al-menu__sep { height: 1px; margin: 4px 8px; background: var(--al-line); }

/* Тултип (CSS-only, data-tip) */
.al-tip { position: relative; }
.al-tip::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--al-ink-900);
  opacity: 0;
  transition: opacity var(--al-transition);
  pointer-events: none;
  z-index: 30;
}
.al-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--al-ink-900);
  color: #fff;
  font-size: 11px;
  line-height: 1.4;
  padding: 4px 8px;
  border-radius: var(--al-radius-sm);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--al-transition);
  pointer-events: none;
  z-index: 30;
}
.al-tip:hover::after, .al-tip:hover::before,
.al-tip:focus-visible::after, .al-tip:focus-visible::before { opacity: 1; }

/* Аккордеон (нативный details, без JS) */
.al-accordion { display: grid; gap: 8px; }
details.al-acc {
  background: var(--al-surface);
  border: 1px solid var(--al-line);
  border-radius: var(--al-radius-lg);
}
.al-acc > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--al-radius-lg);
}
.al-acc > summary::-webkit-details-marker { display: none; }
.al-acc > summary::after {
  content: "";
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--al-ink-400);
  border-bottom: 2px solid var(--al-ink-400);
  transform: rotate(45deg);
  transition: transform var(--al-transition);
  flex-shrink: 0;
}
.al-acc[open] > summary::after { transform: rotate(225deg); }
.al-acc__body { padding: 0 16px 12px; font-size: 13px; color: var(--al-ink-600); }

/* Мастер шагов с подписями (десктоп-формы) */
.al-wizard { display: flex; gap: 8px; }
.al-wizard__step {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--al-surface);
  border: 1px solid var(--al-line);
  border-radius: var(--al-radius-lg);
  min-width: 0;
}
.al-wizard__num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--al-surface-2);
  color: var(--al-ink-600);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.al-wizard__title { font-size: 13px; font-weight: 600; }
.al-wizard__sub { font-size: 11px; color: var(--al-ink-600); }
.al-wizard__step.is-current { background: var(--al-cyan-50); border-color: var(--al-cyan-100); }
.al-wizard__step.is-current .al-wizard__num { background: var(--al-blue-500); color: #fff; }
.al-wizard__step.is-current .al-wizard__title { color: var(--al-blue-700); }
.al-wizard__step.is-done .al-wizard__num { background: var(--al-success); color: #fff; }
.al-wizard__step.is-upcoming { opacity: .7; }

/* Стек-бар (структура/распределение) */
.al-stackbar {
  display: flex;
  height: 12px;
  border-radius: var(--al-radius-full);
  overflow: hidden;
}
.al-stackbar > span { height: 100%; }

/* Сортировка в заголовке таблицы */
.al-table th.al-th-sort { cursor: pointer; user-select: none; }
.al-table th.al-th-sort:hover { color: var(--al-blue-700); }
.al-th-sort::after { content: " ↕"; color: var(--al-ink-400); font-size: 10px; }
.al-th-sort.is-asc::after { content: " ↑"; color: var(--al-blue-500); }
.al-th-sort.is-desc::after { content: " ↓"; color: var(--al-blue-500); }

/* Таймлайн активности */
.al-timeline { display: grid; }
.al-timeline__item { display: flex; gap: 12px; position: relative; padding-bottom: 16px; }
.al-timeline__item::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 24px;
  bottom: 0;
  width: 2px;
  background: var(--al-line);
}
.al-timeline__item:last-child { padding-bottom: 0; }
.al-timeline__item:last-child::before { display: none; }
.al-timeline__dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--al-cyan-50);
  color: var(--al-blue-700);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 1;
}
.al-timeline__time { font-size: 11px; color: var(--al-ink-400); }

/* Чат (диалог с HR) */
.al-chat { display: flex; flex-direction: column; gap: 8px; }
.al-bubble {
  max-width: 76%;
  padding: 10px 12px;
  border-radius: var(--al-radius-xl);
  font-size: 13px;
  line-height: 18px;
}
.al-bubble--in {
  align-self: flex-start;
  background: var(--al-surface);
  border: 1px solid var(--al-line);
  border-bottom-left-radius: var(--al-radius-sm);
}
.al-bubble--out {
  align-self: flex-end;
  background: var(--al-blue-500);
  color: #fff;
  border-bottom-right-radius: var(--al-radius-sm);
}
.al-bubble__time { display: block; font-size: 10px; margin-top: 4px; opacity: .7; text-align: right; }
.al-chat__date {
  align-self: center;
  font-size: 11px;
  color: var(--al-ink-400);
  background: var(--al-neutral-bg);
  border-radius: var(--al-radius-full);
  padding: 2px 10px;
}

/* Мини-календарь (месяц) */
.al-cal { min-width: 240px; }
.al-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.al-cal__month { font-family: var(--al-font-display); font-weight: 700; font-size: 14px; }
.al-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.al-cal__dow {
  text-align: center;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--al-ink-400);
  padding: 4px 0;
}
.al-cal__day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: none;
  border-radius: var(--al-radius-md);
  background: none;
  font-family: var(--al-font-body);
  font-size: 12px;
  color: var(--al-ink-900);
  cursor: pointer;
}
.al-cal__day:hover { background: var(--al-surface-2); }
.al-cal__day.is-muted { color: var(--al-ink-400); }
.al-cal__day.is-today { box-shadow: inset 0 0 0 1px var(--al-cyan-300); }
.al-cal__day.is-selected { background: var(--al-blue-500); color: #fff; font-weight: 700; }
.al-cal__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--al-cyan-400); }
.al-cal__day.is-selected .al-cal__dot { background: #fff; }

/* ---------- Утилиты ---------- */

.al-link { color: var(--al-blue-500); text-decoration: none; cursor: pointer; }
.al-link:hover { text-decoration: underline; }
.al-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-scroll-y { overflow-y: auto; }