/* BINOM Design Code — компоненты (эталонная реализация спецификации docs/components/catalog.md).
 *
 * Правило файла: только переменные --bdc-* из dist/css/tokens.css. Ни цвета, ни размера литералом: допустимы 0, 50 %,
 * 100 %, проценты прозрачности в color-mix() и множители в calc() — test/literals.test.mjs. Компоненты отзываются на
 * схему, контраст и «уменьшить движение» через переменные, сами медиазапросов схем не знают.
 * Раскладка компонентов зависит от ширины контейнера (container queries), а не окна.
 */

/* ---------- Основа ---------- */
.bdc-page {
  margin: 0;
  background-color: var(--bdc-background);
  color: var(--bdc-label);
  font-family: var(--bdc-font);
  font-size: var(--bdc-type-body-size);
  line-height: var(--bdc-type-body-line);
  letter-spacing: var(--bdc-type-body-tracking);
  -webkit-tap-highlight-color: transparent;
}
.bdc-page ::selection { background-color: var(--bdc-tint-soft); color: var(--bdc-label); }
.bdc-page :focus-visible {
  outline: var(--bdc-border-focus) solid var(--bdc-focus);
  outline-offset: var(--bdc-space-1);
}
:where(.bdc-page) a { color: var(--bdc-tint); text-decoration-thickness: from-font; text-underline-offset: 0.18em; }
:where(.bdc-page) a:hover { color: var(--bdc-tint-hover); }
/* Ссылки-компоненты (ячейки, меню, вкладки) берут цвет у компонента: правило выше без специфичности. */

.bdc-container { container-type: inline-size; }
.bdc-readable { max-inline-size: var(--bdc-readable-width); }
.bdc-content {
  max-inline-size: var(--bdc-content-max);
  margin-inline: auto;
  padding-inline: max(var(--bdc-margin), env(safe-area-inset-left)) max(var(--bdc-margin), env(safe-area-inset-right));
}
.bdc-secondary { color: var(--bdc-label-2); }

/* ---------- Веб как приложение: запуск с главного экрана (standalone) ---------- */
/* Без браузерной строки страница ведёт себя как приложение: без «резинки» прокрутки корня, без выделения хрома, со
 * своими элементами для standalone (.bdc-only-standalone) и без подсказок «установите приложение» (.bdc-only-browser). */
.bdc-only-standalone { display: none; }
@media (display-mode: standalone), (display-mode: window-controls-overlay) {
  .bdc-page { overscroll-behavior-y: none; }
  .bdc-navbar, .bdc-tabbar { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  .bdc-only-standalone { display: revert; }
  .bdc-only-browser { display: none; }
}

/* ---------- Кнопки (стили iOS 15+: filled, tinted, gray, plain) ---------- */
.bdc-btn {
  --_bg: var(--bdc-tint);
  --_fg: var(--bdc-on-tint);
  --_bg-hover: var(--bdc-tint-hover);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bdc-space-3);
  min-block-size: var(--bdc-touch-target);
  padding: 0 var(--bdc-space-7);
  border: 0;
  border-radius: var(--bdc-radius-md);
  background-color: var(--_bg);
  color: var(--_fg);
  font: inherit;
  font-size: var(--bdc-type-headline-size);
  font-weight: var(--bdc-type-headline-weight);
  letter-spacing: var(--bdc-type-headline-tracking);
  cursor: pointer;
  transition:
    background-color var(--bdc-spring-snappy-duration) var(--bdc-spring-snappy),
    transform var(--bdc-spring-snappy-duration) var(--bdc-spring-snappy);
}
.bdc-btn:hover { background-color: var(--_bg-hover); }
.bdc-btn:active { transform: scale(0.97); }
.bdc-btn[disabled], .bdc-btn[aria-disabled="true"] { background-color: var(--bdc-fill-2); color: var(--bdc-label-3); cursor: default; transform: none; }
.bdc-btn--tinted { --_bg: var(--bdc-tint-soft); --_fg: var(--bdc-tint-pressed); --_bg-hover: var(--bdc-fill); }
.bdc-btn--gray { --_bg: var(--bdc-fill); --_fg: var(--bdc-tint); --_bg-hover: var(--bdc-fill-2); }
.bdc-btn--plain { --_bg: transparent; --_fg: var(--bdc-tint); --_bg-hover: var(--bdc-fill-3); }
.bdc-btn--destructive { --_bg: var(--bdc-red); --_fg: var(--bdc-on-red); --_bg-hover: var(--bdc-red); }
.bdc-btn--sm { min-block-size: calc(var(--bdc-touch-target) - var(--bdc-space-5)); padding: 0 var(--bdc-space-5); border-radius: var(--bdc-radius-sm); font-size: var(--bdc-type-subheadline-size); }
.bdc-btn--lg { min-block-size: calc(var(--bdc-touch-target) + var(--bdc-space-3)); padding: 0 var(--bdc-space-9); border-radius: var(--bdc-radius-lg); }
.bdc-btn--capsule { border-radius: var(--bdc-radius-full); }

/* ---------- Сегменты ---------- */
.bdc-segmented {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: var(--bdc-space-1);
  border-radius: var(--bdc-radius-md);
  background-color: var(--bdc-fill);
}
.bdc-segmented button {
  min-block-size: calc(var(--bdc-touch-target) - var(--bdc-space-4));
  padding: 0 var(--bdc-space-6);
  border: 0;
  border-radius: calc(var(--bdc-radius-md) - var(--bdc-space-1));
  background: transparent;
  color: var(--bdc-label);
  font: inherit;
  font-size: var(--bdc-type-subheadline-size);
  font-weight: var(--bdc-weight-medium);
  cursor: pointer;
  transition: background-color var(--bdc-spring-default-duration) var(--bdc-spring-default), box-shadow var(--bdc-spring-default-duration) var(--bdc-spring-default);
}
.bdc-segmented button[aria-pressed="true"] {
  background-color: var(--bdc-surface-elevated);
  box-shadow: var(--bdc-elevation-level-1);
  font-weight: var(--bdc-weight-semibold);
}

/* ---------- Переключатель (input type=checkbox role=switch) ---------- */
.bdc-switch {
  appearance: none;
  position: relative;
  inline-size: calc(var(--bdc-space-11) + var(--bdc-space-2));
  block-size: calc(var(--bdc-space-9) - var(--bdc-space-1));
  margin: 0;
  border-radius: var(--bdc-radius-full);
  background-color: var(--bdc-fill);
  box-shadow: inset 0 0 0 var(--bdc-border-thin) var(--bdc-separator);
  cursor: pointer;
  transition: background-color var(--bdc-spring-snappy-duration) var(--bdc-spring-snappy);
}
.bdc-switch::after {
  content: "";
  position: absolute;
  inset-block-start: var(--bdc-space-1);
  inset-inline-start: var(--bdc-space-1);
  inline-size: calc(var(--bdc-space-9) - var(--bdc-space-1) - 2 * var(--bdc-space-1));
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--bdc-on-tint);
  box-shadow: var(--bdc-elevation-level-1);
  transition: transform var(--bdc-spring-bouncy-duration) var(--bdc-spring-bouncy);
}
.bdc-switch:not(:checked)::after { background-color: var(--bdc-surface); }
.bdc-switch:checked { background-color: var(--bdc-tint); }
.bdc-switch:checked::after { transform: translateX(calc(var(--bdc-space-11) + var(--bdc-space-2) - var(--bdc-space-9) + var(--bdc-space-1))); }
.bdc-switch:dir(rtl):checked::after { transform: translateX(calc(-1 * (var(--bdc-space-11) + var(--bdc-space-2) - var(--bdc-space-9) + var(--bdc-space-1)))); }

/* ---------- Список: сгруппированный со вставками (inset grouped) ---------- */
.bdc-list { display: grid; gap: var(--bdc-space-2); }
.bdc-list__header { padding: 0 var(--bdc-space-6); color: var(--bdc-label-2); font-size: var(--bdc-type-footnote-size); line-height: var(--bdc-type-footnote-line); text-transform: uppercase; letter-spacing: var(--bdc-type-caption-2-tracking); }
.bdc-list__section { margin: 0; padding: 0; list-style: none; border-radius: var(--bdc-radius-lg); background-color: var(--bdc-surface); overflow: clip; }
.bdc-cell {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--bdc-space-5);
  min-block-size: var(--bdc-touch-target);
  padding: var(--bdc-space-3) var(--bdc-space-6);
  color: var(--bdc-label);
  text-decoration: none;
}
.bdc-cell + .bdc-cell::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: var(--bdc-space-6) 0;
  border-block-start: var(--bdc-border-hairline) solid var(--bdc-separator);
}
a.bdc-cell:hover, button.bdc-cell:hover { background-color: var(--bdc-fill-2); }
.bdc-cell__icon { display: grid; place-items: center; inline-size: calc(var(--bdc-space-8) + var(--bdc-space-1)); aspect-ratio: 1; border-radius: var(--bdc-radius-sm); color: var(--bdc-on-tint); background-color: var(--bdc-tint); flex: none; }
.bdc-cell__body { flex: 1; min-inline-size: 0; }
.bdc-cell__detail { color: var(--bdc-label-2); font-size: var(--bdc-type-subheadline-size); }
.bdc-cell__chevron { color: var(--bdc-label-3); }

/* ---------- Карточки и сетка «бенто» ---------- */
.bdc-card {
  container-type: inline-size;
  display: grid;
  gap: var(--bdc-space-4);
  padding: var(--bdc-space-7);
  border-radius: var(--bdc-radius-xl);
  background-color: var(--bdc-surface);
  color: var(--bdc-label);
  transition: transform var(--bdc-spring-default-duration) var(--bdc-spring-default), box-shadow var(--bdc-spring-default-duration) var(--bdc-spring-default);
}
.bdc-card--interactive { cursor: pointer; }
.bdc-card--interactive:hover { transform: translateY(calc(-1 * var(--bdc-space-1))); box-shadow: var(--bdc-elevation-level-1); }
.bdc-card--interactive:active { transform: scale(0.99); }
.bdc-card__media { margin: calc(-1 * var(--bdc-space-7)) calc(-1 * var(--bdc-space-7)) 0; inline-size: calc(100% + 2 * var(--bdc-space-7)); aspect-ratio: 16 / 9; border-radius: var(--bdc-radius-xl) var(--bdc-radius-xl) 0 0; background-color: var(--bdc-fill-3); object-fit: cover; }
.bdc-bento { display: grid; gap: var(--bdc-gutter); grid-template-columns: repeat(var(--bdc-columns), minmax(0, 1fr)); }
.bdc-bento > * { grid-column: span min(var(--bdc-columns), 4); }
.bdc-bento > .bdc-bento--wide { grid-column: span min(var(--bdc-columns), 8); }
.bdc-bento > .bdc-bento--full { grid-column: 1 / -1; }

/* ---------- Навигационная панель с большим заголовком (стекло) ---------- */
.bdc-navbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--bdc-space-5);
  min-block-size: var(--bdc-top-bar);
  padding: env(safe-area-inset-top) max(var(--bdc-margin), env(safe-area-inset-right)) 0 max(var(--bdc-margin), env(safe-area-inset-left));
  border-block-end: var(--bdc-border-hairline) solid var(--bdc-separator);
}
.bdc-navbar__title { flex: 1; font-size: var(--bdc-type-headline-size); font-weight: var(--bdc-type-headline-weight); letter-spacing: var(--bdc-type-headline-tracking); text-align: center; }
.bdc-large-title { margin: var(--bdc-space-5) 0 var(--bdc-space-4); font-size: var(--bdc-type-large-title-size); line-height: var(--bdc-type-large-title-line); font-weight: var(--bdc-type-large-title-weight); letter-spacing: var(--bdc-type-large-title-tracking); }

/* ---------- Плавающая панель вкладок-капсула (телефон) ---------- */
.bdc-tabbar {
  position: fixed;
  z-index: 10;
  inset-inline: var(--bdc-tab-bar-inset);
  inset-block-end: calc(var(--bdc-tab-bar-inset) + env(safe-area-inset-bottom));
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  min-block-size: var(--bdc-tab-bar);
  padding: var(--bdc-space-2);
  border-radius: var(--bdc-radius-full);
  box-shadow: var(--bdc-elevation-level-2);
}
.bdc-tabbar a {
  display: grid;
  place-items: center;
  gap: var(--bdc-space-1);
  border-radius: var(--bdc-radius-full);
  color: var(--bdc-label-2);
  font-size: var(--bdc-type-caption-2-size);
  font-weight: var(--bdc-type-caption-2-weight);
  text-decoration: none;
}
.bdc-tabbar a[aria-current="page"] { color: var(--bdc-tint); background-color: var(--bdc-fill-3); }
@media (min-width: 600px) { .bdc-tabbar { display: none; } }

/* ---------- Поле ввода и поиск ---------- */
.bdc-field {
  inline-size: 100%;
  min-block-size: var(--bdc-touch-target);
  padding: 0 var(--bdc-space-5);
  border: var(--bdc-border-thin) solid transparent;
  border-radius: var(--bdc-radius-sm);
  background-color: var(--bdc-fill);
  color: var(--bdc-label);
  font: inherit;
  box-sizing: border-box;
  transition: border-color var(--bdc-spring-snappy-duration) var(--bdc-spring-snappy), background-color var(--bdc-spring-snappy-duration) var(--bdc-spring-snappy);
}
.bdc-field::placeholder { color: var(--bdc-label-2); }
.bdc-field:focus { outline: none; border-color: var(--bdc-tint); background-color: var(--bdc-surface); box-shadow: 0 0 0 var(--bdc-border-focus) color-mix(in srgb, var(--bdc-tint) 28%, transparent); }
/* Поля ввода вне .bdc-field (формы продуктов, Keycloak): фокус — рамка цвета действия и мягкий ореол, без толстой
 * обводки (решения владельца по BINOM School Tec 0.3–0.7: «прямоугольная толстая рамка выглядит куце»). */
:where(.bdc-page) :is(input:not([type=checkbox], [type=radio], [type=button], [type=submit], [type=reset], [type=range]), textarea, select):focus-visible {
  outline-color: transparent;
  border-color: var(--bdc-tint);
  box-shadow: 0 0 0 var(--bdc-border-focus) color-mix(in srgb, var(--bdc-tint) 28%, transparent);
}
.bdc-field[aria-invalid="true"] { border-color: var(--bdc-red); }
.bdc-field--search { border-radius: var(--bdc-radius-full); padding-inline: var(--bdc-space-6); }

/* ---------- Чипы, бейджи, состояния ---------- */
.bdc-chip { display: inline-flex; align-items: center; gap: var(--bdc-space-2); min-block-size: calc(var(--bdc-space-9) - var(--bdc-space-1)); padding: 0 var(--bdc-space-5); border-radius: var(--bdc-radius-full); background-color: var(--bdc-fill); color: var(--bdc-label); font-size: var(--bdc-type-subheadline-size); font-weight: var(--bdc-weight-medium); }
.bdc-chip[aria-pressed="true"] { background-color: var(--bdc-tint-soft); color: var(--bdc-tint-pressed); }
.bdc-badge { display: inline-flex; align-items: center; padding: 0 var(--bdc-space-3); border-radius: var(--bdc-radius-xs); font-size: var(--bdc-type-caption-2-size); font-weight: var(--bdc-type-caption-2-weight); line-height: var(--bdc-type-caption-2-line); }
.bdc-badge--green { background-color: var(--bdc-green-soft); color: var(--bdc-green); }
.bdc-badge--teal { background-color: var(--bdc-teal-soft); color: var(--bdc-teal); }
.bdc-badge--sky { background-color: var(--bdc-sky-soft); color: var(--bdc-sky); }
.bdc-badge--ochre { background-color: var(--bdc-ochre-soft); color: var(--bdc-ochre); }
.bdc-badge--red { background-color: var(--bdc-red-soft); color: var(--bdc-red); }
.bdc-badge--plum { background-color: var(--bdc-plum-soft); color: var(--bdc-plum); }

/* ---------- Прогресс: полоса и кольцо (как кольца активности) ---------- */
.bdc-progress { --value: 0; block-size: var(--bdc-space-2); border-radius: var(--bdc-radius-full); background-color: var(--bdc-fill); overflow: clip; }
.bdc-progress > span { display: block; block-size: 100%; inline-size: calc(var(--value) * 1%); border-radius: inherit; background-color: var(--bdc-tint); transition: inline-size var(--bdc-spring-smooth-duration) var(--bdc-spring-smooth); }
.bdc-ring {
  --value: 0;
  --_c: var(--bdc-tint);
  display: grid;
  place-items: center;
  inline-size: calc(var(--bdc-space-12) + var(--bdc-space-6));
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--bdc-surface) 76%, transparent 77% 100%), conic-gradient(var(--_c) calc(var(--value) * 1%), var(--bdc-fill) 0);
  font-size: var(--bdc-type-headline-size);
  font-weight: var(--bdc-type-headline-weight);
  font-variant-numeric: tabular-nums;
}

/* ---------- Лист и меню (стекло) ---------- */
.bdc-sheet {
  display: grid;
  gap: var(--bdc-space-6);
  padding: var(--bdc-space-5) var(--bdc-space-7) calc(var(--bdc-space-7) + env(safe-area-inset-bottom));
  border-radius: var(--bdc-radius-2xl) var(--bdc-radius-2xl) 0 0;
  box-shadow: var(--bdc-elevation-level-3);
}
.bdc-sheet__grabber { justify-self: center; inline-size: calc(var(--bdc-space-9) + var(--bdc-space-1)); block-size: var(--bdc-space-2); border-radius: var(--bdc-radius-full); background-color: var(--bdc-label-3); }
.bdc-menu { display: grid; min-inline-size: calc(var(--bdc-sidebar) - var(--bdc-space-10)); padding: var(--bdc-space-2); border-radius: var(--bdc-radius-lg); box-shadow: var(--bdc-elevation-level-2); }
.bdc-menu > * { display: flex; align-items: center; justify-content: space-between; gap: var(--bdc-space-6); min-block-size: var(--bdc-touch-target); padding: 0 var(--bdc-space-5); border-radius: var(--bdc-radius-sm); color: var(--bdc-label); text-decoration: none; }
.bdc-menu > *:hover { background-color: var(--bdc-fill-2); }
.bdc-menu > .bdc-menu__destructive { color: var(--bdc-red); }
.bdc-scrim { position: fixed; inset: 0; background-color: var(--bdc-scrim-fill); }

/* ---------- Боковая панель (планшет и шире) ---------- */
.bdc-split { display: grid; grid-template-columns: 1fr; }
@container (min-width: 1024px) { .bdc-split { grid-template-columns: var(--bdc-sidebar) 1fr; } }
.bdc-sidebar { padding: var(--bdc-space-5); background-color: var(--bdc-background); border-inline-end: var(--bdc-border-hairline) solid var(--bdc-separator); }

/* ==========================================================================================================
 * Вход, учётная запись и консоли — из BINOM ID (страницы входа Keycloak, кабинет сотрудника), в токенах
 * BINOM Design Code; дыры BINOM ID закрыты (флажок и радиокнопка, «призрачная» кнопка). Спецификация —
 * docs/components/auth.md и docs/components/console.md.
 * ========================================================================================================== */

/* ---------- Кнопки: «призрачная» и блочная ---------- */
.bdc-btn--ghost {
  background-color: transparent;
  color: var(--bdc-label);
  box-shadow: inset 0 0 0 var(--bdc-border-hairline) var(--bdc-border);
}
.bdc-btn--ghost:hover { background-color: var(--bdc-fill-3); }
.bdc-btn--block { display: flex; inline-size: 100%; }

/* ---------- Флажок и радиокнопка ---------- */
.bdc-check {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--bdc-space-4);
  min-block-size: var(--bdc-touch-target);
  padding-block: var(--bdc-space-3);
  cursor: pointer;
  color: var(--bdc-label);
  font-size: var(--bdc-type-subheadline-size);
  line-height: var(--bdc-type-subheadline-line);
}
.bdc-check input {
  appearance: none;
  flex: none;
  inline-size: var(--bdc-icon-md);
  block-size: var(--bdc-icon-md);
  margin: 0;
  border: var(--bdc-border-thin) solid var(--bdc-border);
  border-radius: var(--bdc-radius-xs);
  background-color: var(--bdc-surface);
  display: grid;
  place-content: center;
  transition: background-color var(--bdc-duration-fast) var(--bdc-ease-fallback), border-color var(--bdc-duration-fast) var(--bdc-ease-fallback);
}
.bdc-check input[type="radio"] { border-radius: var(--bdc-radius-full); }
/* Знак отмеченного состояния — галочка (у радиокнопки — точка): состояние передаётся формой, а не только цветом.
 * Размер — от размера пиктограммы: процент от ячейки сетки схлопывался в ноль (отзыв BINOM ID 05.10.2026). */
.bdc-check input::after {
  content: "";
  inline-size: calc(var(--bdc-icon-md) * 0.6);
  block-size: calc(var(--bdc-icon-md) * 0.6);
  background-color: var(--bdc-on-tint);
  clip-path: polygon(14% 44%, 0% 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transition: transform var(--bdc-spring-snappy-duration) var(--bdc-spring-snappy);
}
.bdc-check input[type="radio"]::after { inline-size: calc(var(--bdc-icon-md) * 0.4); block-size: calc(var(--bdc-icon-md) * 0.4); border-radius: var(--bdc-radius-full); clip-path: none; }
.bdc-check input:checked { background-color: var(--bdc-tint); border-color: var(--bdc-tint); }
.bdc-check input:checked::after { transform: scale(1); }
.bdc-check input:disabled { opacity: var(--bdc-opacity-disabled); }
.bdc-check--card {
  align-items: center;
  inline-size: 100%;
  padding: var(--bdc-space-5) var(--bdc-space-6);
  border-radius: var(--bdc-radius-md);
  box-shadow: inset 0 0 0 var(--bdc-border-hairline) var(--bdc-separator);
  background-color: var(--bdc-surface);
}
.bdc-check--card:has(input:checked) { box-shadow: inset 0 0 0 var(--bdc-border-thin) var(--bdc-tint); background-color: var(--bdc-tint-soft); }

/* ---------- Сообщения (alert): четыре уровня ---------- */
.bdc-alert {
  display: flex;
  gap: var(--bdc-space-4);
  padding: var(--bdc-space-5) var(--bdc-space-6);
  border-radius: var(--bdc-radius-md);
  background-color: var(--bdc-fill-2);
  color: var(--bdc-label-2);
  font-size: var(--bdc-type-subheadline-size);
  line-height: var(--bdc-type-subheadline-line);
  box-shadow: inset 0 0 0 var(--bdc-border-hairline) var(--bdc-separator);
}
.bdc-alert--error { background-color: var(--bdc-red-soft); color: var(--bdc-red); box-shadow: inset 0 0 0 var(--bdc-border-hairline) var(--bdc-red); }
.bdc-alert--warning { background-color: var(--bdc-ochre-soft); color: var(--bdc-ochre); box-shadow: inset 0 0 0 var(--bdc-border-hairline) var(--bdc-ochre); }
.bdc-alert--success { background-color: var(--bdc-tint-soft); color: var(--bdc-tint); box-shadow: inset 0 0 0 var(--bdc-border-hairline) var(--bdc-tint); }
.bdc-alert--info { background-color: var(--bdc-sky-soft); color: var(--bdc-sky); box-shadow: inset 0 0 0 var(--bdc-border-hairline) var(--bdc-sky); }
.bdc-alert__icon { flex: none; inline-size: var(--bdc-icon-md); block-size: var(--bdc-icon-md); }

/* ---------- Переключатель режима оформления: Система / Светлый / Тёмный ---------- */
.bdc-mode-switch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bdc-space-2);
  padding: var(--bdc-space-1);
  border-radius: var(--bdc-radius-md);
  background-color: var(--bdc-fill-3);
}
.bdc-mode-switch button {
  display: grid;
  justify-items: center;
  gap: var(--bdc-space-1);
  min-block-size: var(--bdc-touch-target);
  padding: var(--bdc-space-3) var(--bdc-space-2);
  border: 0;
  border-radius: var(--bdc-radius-sm);
  background: transparent;
  color: var(--bdc-label-2);
  font: inherit;
  font-size: var(--bdc-type-caption-1-size);
  hyphens: auto;
  cursor: pointer;
}
.bdc-mode-switch button svg { inline-size: var(--bdc-icon-md); block-size: var(--bdc-icon-md); }
.bdc-mode-switch button[aria-pressed="true"] { background-color: var(--bdc-surface); color: var(--bdc-tint); box-shadow: var(--bdc-elevation-level-1); }

/* ---------- Вход: страница, карточка, бренд ---------- */
.bdc-auth {
  container-type: inline-size; /* карточка подстраивается под ширину страницы входа (@container ниже) */
  box-sizing: border-box; /* поля внутри высоты экрана: без полосы прокрутки (замечание владельца, 1.3.1) */
  min-block-size: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--bdc-space-9) var(--bdc-margin);
}
.bdc-auth-card {
  box-sizing: border-box; /* поля внутри ширины: на телефоне карточка не шире экрана */
  position: relative;
  inline-size: min(var(--bdc-size-auth-card), 100%);
  padding: var(--bdc-space-11) var(--bdc-space-10) var(--bdc-space-8);
  border-radius: var(--bdc-radius-2xl);
  background-color: var(--bdc-surface);
  box-shadow: inset 0 0 0 var(--bdc-border-hairline) var(--bdc-separator), var(--bdc-elevation-level-3);
}
@container (width < 600px) {
  .bdc-auth-card { padding: var(--bdc-space-9) var(--bdc-space-7) var(--bdc-space-7); }
}
.bdc-auth-card__brand { display: flex; align-items: center; gap: var(--bdc-space-5); margin-block-end: var(--bdc-space-9); }
.bdc-auth-card__mark { inline-size: var(--bdc-size-brand-mark-lg); block-size: var(--bdc-size-brand-mark-lg); flex: none; }
.bdc-auth-card__product {
  margin: 0;
  font-family: var(--bdc-font-brand);
  font-weight: var(--bdc-weight-bold);
  font-size: var(--bdc-type-headline-size);
  letter-spacing: var(--bdc-type-caption-1-tracking);
  text-transform: uppercase;
}
.bdc-auth-card__subtitle { margin: 0; color: var(--bdc-label-3); font-size: var(--bdc-type-footnote-size); }
.bdc-auth-card__title { margin: 0 0 var(--bdc-space-7); font-size: var(--bdc-type-title-2-size); line-height: var(--bdc-type-title-2-line); font-weight: var(--bdc-type-title-2-weight); letter-spacing: var(--bdc-type-title-2-tracking); }
.bdc-auth-card__form { display: grid; gap: var(--bdc-space-6); }
.bdc-auth-card__footer { margin-block-start: var(--bdc-space-9); display: grid; gap: var(--bdc-space-6); color: var(--bdc-label-3); font-size: var(--bdc-type-caption-1-size); }
.bdc-auth-card__divider { display: flex; align-items: center; gap: var(--bdc-space-5); color: var(--bdc-label-3); font-size: var(--bdc-type-footnote-size); }
.bdc-auth-card__divider::before, .bdc-auth-card__divider::after { content: ""; flex: 1; block-size: var(--bdc-border-hairline); background-color: var(--bdc-separator); }
.bdc-auth-card__code {
  margin: var(--bdc-space-6) 0;
  text-align: center;
  font-family: var(--bdc-font-brand);
  font-size: var(--bdc-type-large-title-size);
  letter-spacing: var(--bdc-type-caption-1-tracking);
  font-variant-numeric: tabular-nums;
}

/* ---------- Поле с кнопкой «показать пароль» ---------- */
.bdc-password { display: flex; border-radius: var(--bdc-radius-sm); }
/* Поле и кнопка «глаз» — одно целое: общий ореол фокуса и общая рамка фокуса и ошибки. */
.bdc-password:has(.bdc-field:focus) { box-shadow: 0 0 0 var(--bdc-border-focus) color-mix(in srgb, var(--bdc-tint) 28%, transparent); }
.bdc-password .bdc-field:focus { box-shadow: none; }
.bdc-password:has(.bdc-field:focus) .bdc-password__toggle { border-color: var(--bdc-tint); background-color: var(--bdc-surface); }
.bdc-password:has(.bdc-field[aria-invalid="true"]) .bdc-password__toggle { border-color: var(--bdc-red); }
.bdc-password .bdc-field { flex: 1; border-start-end-radius: 0; border-end-end-radius: 0; border-inline-end: 0; } /* шов поля и «глаза» — без своей черты (рамку справа даёт кнопка) */
.bdc-password__toggle {
  flex: none;
  inline-size: var(--bdc-touch-target);
  border: var(--bdc-border-thin) solid transparent;
  border-inline-start: 0;
  border-start-end-radius: var(--bdc-radius-sm);
  border-end-end-radius: var(--bdc-radius-sm);
  background-color: var(--bdc-fill);
  color: var(--bdc-label-2);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.bdc-password__toggle:hover { color: var(--bdc-label); }
.bdc-password__toggle svg { inline-size: var(--bdc-icon-md); block-size: var(--bdc-icon-md); }

/* ---------- Кнопки провайдеров входа (IdP) и тихая ссылка для сотрудников ---------- */
.bdc-idp-list { display: grid; gap: var(--bdc-space-4); margin: 0; padding: 0; list-style: none; }
.bdc-idp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--bdc-space-4);
  inline-size: 100%;
  min-block-size: var(--bdc-touch-target);
  border-radius: var(--bdc-radius-full);
  background-color: var(--bdc-surface);
  color: var(--bdc-label);
  box-shadow: inset 0 0 0 var(--bdc-border-hairline) var(--bdc-border);
  text-decoration: none;
  font-weight: var(--bdc-weight-semibold);
}
.bdc-idp:hover { background-color: var(--bdc-fill-3); }
.bdc-idp__icon { inline-size: var(--bdc-icon-md); block-size: var(--bdc-icon-md); flex: none; }
.bdc-quiet-link { color: var(--bdc-label-3); font-size: var(--bdc-type-footnote-size); text-decoration: underline; }

/* ---------- Выбор языка: «пилюля» и всплывающий список с поиском ---------- */
.bdc-lang { position: absolute; inset-block-start: var(--bdc-space-6); inset-inline-end: var(--bdc-space-6); }
.bdc-lang__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--bdc-space-2);
  min-block-size: var(--bdc-size-control-sm);
  padding-inline: var(--bdc-space-5);
  border: 0;
  border-radius: var(--bdc-radius-full);
  background-color: var(--bdc-fill-3);
  color: var(--bdc-label-2);
  font: inherit;
  font-size: var(--bdc-type-footnote-size);
  cursor: pointer;
}
.bdc-lang__popover {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + var(--bdc-space-2));
  z-index: var(--bdc-z-overlay);
  inline-size: calc(var(--bdc-size-control) * 6.4);
  padding: var(--bdc-space-3);
  border-radius: var(--bdc-radius-lg);
  background-color: var(--bdc-surface-elevated);
  box-shadow: inset 0 0 0 var(--bdc-border-hairline) var(--bdc-separator), var(--bdc-elevation-level-3);
}
.bdc-lang__list { max-block-size: calc(var(--bdc-size-control) * 6.4); overflow-y: auto; margin: var(--bdc-space-2) 0 0; padding: 0; list-style: none; }
.bdc-lang__list [role="option"] { padding: var(--bdc-space-3) var(--bdc-space-4); border-radius: var(--bdc-radius-sm); cursor: pointer; }
.bdc-lang__list [role="option"]::first-letter { text-transform: uppercase; }
.bdc-lang__list [aria-selected="true"] { background-color: var(--bdc-tint-soft); color: var(--bdc-tint); }
.bdc-lang__empty { padding: var(--bdc-space-4); color: var(--bdc-label-3); font-size: var(--bdc-type-footnote-size); }

/* ---------- Оболочка кабинета: боковая панель, нижние вкладки, среда, аватар ---------- */
.bdc-shell { display: grid; grid-template-columns: var(--bdc-sidebar) 1fr; min-block-size: 100dvh; }
.bdc-shell__nav {
  box-sizing: border-box; /* поля и граница внутри высоты экрана */
  position: sticky;
  inset-block-start: 0;
  block-size: 100dvh;
  display: flex;
  flex-direction: column;
  gap: var(--bdc-space-2);
  padding: var(--bdc-space-7) var(--bdc-space-5);
  border-inline-end: var(--bdc-border-hairline) solid var(--bdc-separator);
  background-color: var(--bdc-surface);
}
.bdc-shell__brand { display: flex; align-items: center; gap: var(--bdc-space-4); margin-block-end: var(--bdc-space-7); font-family: var(--bdc-font-brand); font-weight: var(--bdc-weight-bold); }
.bdc-shell__brand img, .bdc-shell__brand svg { inline-size: var(--bdc-size-brand-mark); block-size: var(--bdc-size-brand-mark); }
.bdc-shell__link {
  display: flex;
  align-items: center;
  gap: var(--bdc-space-4);
  min-block-size: var(--bdc-touch-target);
  padding-inline: var(--bdc-space-4);
  border-radius: var(--bdc-radius-sm);
  color: var(--bdc-label-2);
  text-decoration: none;
}
.bdc-shell__link:hover { background-color: var(--bdc-fill-3); color: var(--bdc-label); }
.bdc-shell__link[aria-current="page"] { background-color: var(--bdc-tint-soft); color: var(--bdc-tint); font-weight: var(--bdc-weight-semibold); }
.bdc-shell__main { min-inline-size: 0; padding: var(--bdc-space-9) var(--bdc-margin); }
@media (width < 600px) {
  .bdc-shell { grid-template-columns: 1fr; }
  .bdc-shell__nav { display: none; }
  .bdc-shell__main { padding-block-end: calc(var(--bdc-size-bottom-nav) + env(safe-area-inset-bottom) + var(--bdc-space-7)); }
}
.bdc-bottom-nav {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--bdc-z-sticky);
  display: none;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  block-size: calc(var(--bdc-size-bottom-nav) + env(safe-area-inset-bottom));
  padding-block-end: env(safe-area-inset-bottom);
  border-block-start: var(--bdc-border-hairline) solid var(--bdc-separator);
  /* Материал панели: стекло, где есть backdrop-filter; иначе и при «уменьшить прозрачность» — сплошь. */
  background-color: var(--bdc-material-bar-solid);
}
@supports (backdrop-filter: blur(0)) or (-webkit-backdrop-filter: blur(0)) {
  .bdc-bottom-nav, .bdc-shell__top {
    background-color: var(--bdc-material-bar);
    -webkit-backdrop-filter: var(--bdc-material-bar-filter);
    backdrop-filter: var(--bdc-material-bar-filter);
  }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .bdc-bottom-nav, .bdc-shell__top { background-color: var(--bdc-material-bar-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (width < 600px) { .bdc-bottom-nav { display: grid; } }
/* Шапка телефона оболочки: бренд, действия (язык, выход); на ПК — боковая панель вместо неё. */
.bdc-shell__top {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--bdc-z-sticky);
  display: none;
  align-items: center;
  gap: var(--bdc-space-4);
  min-block-size: var(--bdc-top-bar);
  padding: env(safe-area-inset-top) var(--bdc-margin) 0;
  border-block-end: var(--bdc-border-hairline) solid var(--bdc-separator);
  background-color: var(--bdc-material-bar-solid);
}
@media (width < 600px) { .bdc-shell__top { display: flex; } }
.bdc-shell__top .bdc-shell__brand { margin: 0; white-space: nowrap; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
.bdc-shell__top-actions { display: flex; align-items: center; gap: var(--bdc-space-3); margin-inline-start: auto; }
.bdc-bottom-nav a { display: grid; place-items: center; gap: var(--bdc-space-1); color: var(--bdc-label-3); text-decoration: none; font-size: var(--bdc-type-caption-2-size); }
.bdc-bottom-nav a[aria-current="page"] { color: var(--bdc-tint); }
.bdc-env {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--bdc-space-4);
  min-block-size: var(--bdc-icon-md);
  border-radius: var(--bdc-radius-full);
  background-color: var(--bdc-ochre-soft);
  color: var(--bdc-ochre);
  font-size: var(--bdc-type-caption-2-size);
  font-weight: var(--bdc-weight-semibold);
  text-transform: uppercase;
}
.bdc-avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: var(--bdc-size-avatar);
  block-size: var(--bdc-size-avatar);
  border-radius: var(--bdc-radius-full);
  background-color: var(--bdc-tint-soft);
  color: var(--bdc-tint);
  font-size: var(--bdc-type-caption-1-size);
  font-weight: var(--bdc-weight-semibold);
  overflow: hidden;
}
.bdc-avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* ---------- Плитки приложений ---------- */
.bdc-app-grid { display: grid; gap: var(--bdc-space-6); grid-template-columns: repeat(auto-fill, minmax(min(var(--bdc-size-drawer-max), 100%), 1fr)); }
.bdc-app-tile {
  display: flex;
  align-items: center;
  gap: var(--bdc-space-5);
  padding: var(--bdc-space-6);
  border-radius: var(--bdc-radius-lg);
  background-color: var(--bdc-surface);
  color: var(--bdc-label);
  text-decoration: none;
  box-shadow: inset 0 0 0 var(--bdc-border-hairline) var(--bdc-separator);
  transition: box-shadow var(--bdc-duration-fast) var(--bdc-ease-fallback), transform var(--bdc-spring-interactive-duration) var(--bdc-spring-interactive);
}
.bdc-app-tile:hover { box-shadow: inset 0 0 0 var(--bdc-border-hairline) var(--bdc-border), var(--bdc-elevation-level-2); }
.bdc-app-tile__icon {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: var(--bdc-size-control);
  block-size: var(--bdc-size-control);
  border-radius: var(--bdc-radius-md);
  background-color: var(--bdc-tint-soft);
  color: var(--bdc-tint);
  font-family: var(--bdc-font-brand);
  font-weight: var(--bdc-weight-bold);
}

/* ---------- Таблица, список определений, крошки ---------- */
.bdc-table-wrap { overflow-x: auto; border-radius: var(--bdc-radius-lg); box-shadow: inset 0 0 0 var(--bdc-border-hairline) var(--bdc-separator); }
.bdc-table { inline-size: 100%; border-collapse: collapse; font-size: var(--bdc-type-subheadline-size); font-variant-numeric: tabular-nums; }
.bdc-table th { text-align: start; padding: var(--bdc-space-4) var(--bdc-space-6); color: var(--bdc-label-3); font-size: var(--bdc-type-footnote-size); font-weight: var(--bdc-weight-semibold); background-color: var(--bdc-fill-3); }
.bdc-table td { padding: var(--bdc-space-4) var(--bdc-space-6); border-block-start: var(--bdc-border-hairline) solid var(--bdc-separator); }
.bdc-table tr:target td { background-color: var(--bdc-tint-soft); }
.bdc-table--log td:first-child { font-family: var(--bdc-font-mono); color: var(--bdc-label-3); white-space: nowrap; }
.bdc-dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--bdc-space-4) var(--bdc-space-7); margin: 0; }
.bdc-dl dt { color: var(--bdc-label-3); }
.bdc-dl dd { margin: 0; }
@container (width < 600px) { .bdc-dl { grid-template-columns: 1fr; } .bdc-dl dd { margin-block-end: var(--bdc-space-4); } }
.bdc-breadcrumbs { display: flex; flex-wrap: wrap; gap: var(--bdc-space-3); margin: 0 0 var(--bdc-space-6); padding: 0; list-style: none; color: var(--bdc-label-3); font-size: var(--bdc-type-footnote-size); }
.bdc-breadcrumbs li + li::before { content: "/"; margin-inline-end: var(--bdc-space-3); color: var(--bdc-separator); }
.bdc-breadcrumbs a { color: inherit; }

/* ---------- Чипы состояния, заметки, счётчик ---------- */
.bdc-chip--error { background-color: var(--bdc-red-soft); color: var(--bdc-red); }
.bdc-chip--warning { background-color: var(--bdc-ochre-soft); color: var(--bdc-ochre); }
.bdc-chip--quiet { background-color: var(--bdc-fill-3); color: var(--bdc-label-3); }
.bdc-count {
  display: inline-grid;
  place-items: center;
  min-inline-size: var(--bdc-icon-sm);
  padding-inline: var(--bdc-space-2);
  border-radius: var(--bdc-radius-full);
  background-color: var(--bdc-tint);
  color: var(--bdc-on-tint);
  font-size: var(--bdc-type-caption-2-size);
  font-weight: var(--bdc-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.bdc-note {
  padding: var(--bdc-space-5) var(--bdc-space-6);
  border-radius: var(--bdc-radius-md);
  border: var(--bdc-border-thin) dashed var(--bdc-border);
  color: var(--bdc-label-2);
  font-size: var(--bdc-type-subheadline-size);
}
.bdc-note--warning { border-style: solid; border-color: var(--bdc-ochre); background-color: var(--bdc-ochre-soft); }
.bdc-note--ok { border-style: solid; border-color: var(--bdc-tint); background-color: var(--bdc-tint-soft); }

/* ---------- Секрет, коды восстановления, QR ---------- */
.bdc-secret {
  display: block;
  padding: var(--bdc-space-5) var(--bdc-space-6);
  border-radius: var(--bdc-radius-md);
  background-color: var(--bdc-fill-3);
  font-family: var(--bdc-font-mono);
  letter-spacing: var(--bdc-type-caption-1-tracking);
  overflow-wrap: anywhere;
  user-select: all;
}
.bdc-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bdc-space-3) var(--bdc-space-7); margin: 0; padding: 0; list-style: none; font-family: var(--bdc-font-mono); }
/* QR — всегда тёмный на белом в любой схеме: сканеры читают тёмные модули на светлом поле. */
.bdc-qr { display: inline-block; padding: var(--bdc-space-5); border-radius: var(--bdc-radius-md); background-color: var(--bdc-qr-light); color: var(--bdc-qr-dark); }

/* ---------- Пустое состояние и одинокая ошибка ---------- */
.bdc-empty { display: grid; justify-items: center; gap: var(--bdc-space-5); padding: var(--bdc-space-11) var(--bdc-space-7); text-align: center; color: var(--bdc-label-3); }
.bdc-empty__title { margin: 0; color: var(--bdc-label); font-size: var(--bdc-type-headline-size); font-weight: var(--bdc-type-headline-weight); }

/* ---------- Встроенный режим (внутри мобильного приложения): без хрома ---------- */
.bdc-embedded .bdc-shell { grid-template-columns: 1fr; }
.bdc-embedded :is(.bdc-shell__nav, .bdc-bottom-nav, .bdc-backdrop) { display: none; }

/* ---------- RTL: стрелки разворачиваются ---------- */
[dir="rtl"] .bdc-icon--directional { transform: scaleX(-1); }