/* Адаптив кабинета.
   Пороги только из tokens.css: --bp-min, --bp-content, --bp-frame, --bp-max.
   В медиазапросе переменная не читается, поэтому новые @media с числами не заведены.
   Шкалы планшета в комплекте нет: на планшете и на широком экране та же колонка,
   не новый язык и не растянутая сетка. */

.layout-stage,
.layout-tablet,
.layout-wide {
  width: 100%;
  background: var(--bg);
}

/* Мобильная ширина как в макете: от края до края, но не шире рабочей 440 px.
   404 px кадра и 390 px контроля — модификаторы, не другие пороги. */
.layout-cabinet {
  width: 100%;
  max-width: var(--bp-max);
  min-width: 0;
  margin-inline: auto;
}

.layout-cabinet.is-frame {
  max-width: var(--bp-frame);
}

.layout-cabinet.is-content {
  max-width: var(--bp-content);
}

.layout-tablet > .layout-cabinet,
.layout-wide > .layout-cabinet {
  max-width: var(--bp-max);
}

/* Нижняя граница показа — 320 px. Колонку не раздвигаем шире экрана.
   Минимальную ширину кнопок и пунктов не обнуляем: в макете они не сжимаются. */
.layout-cabinet {
  min-width: 0;
}

.layout-cabinet .chart,
.layout-cabinet img,
.layout-cabinet svg {
  max-width: 100%;
}