/* Компактный масштаб содержимого; шапка и sidebar масштабируются отдельно.
   zoom участвует в расчёте размеров, поэтому графика, текст и зоны нажатия
   увеличиваются вместе, а рабочая область занимает доступную ширину. */
.content, .dialog-wrap, .drawer, .demo-panel, .toast-region, .mobile-nav {
  zoom: var(--content-scale);
}
.content { container-type: inline-size; }

/* Закреплённые окна учитывают немасштабируемые края оболочки и viewport. */
.drawer {
  top: calc(var(--header-h) / var(--content-scale) + 12px);
  max-width: calc(100vw / var(--content-scale));
}
.dialog { max-height: calc(100dvh / var(--content-scale) - 2 * var(--s-6)); }
.demo-panel {
  max-height: min(calc(72dvh / var(--content-scale)), 700px);
  width: min(360px, calc(100vw / var(--content-scale) - 2 * var(--s-4)));
}
.toast-region {
  left: calc(var(--sidebar-w) / var(--content-scale) + var(--s-5));
  max-width: min(420px, calc(100vw / var(--content-scale) - 2 * var(--s-4)));
}

/* Реагируем на доступную ширину содержимого с учётом масштаба. */
@container (max-width: 620px) {
  .today-grid { grid-template-columns: minmax(0, 1fr); }
  .today-grid > .stack:last-child { display: flex; }
  .two-col { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .app-shell { padding-bottom: calc(68px * var(--content-scale)); }
  .toast-region { left: var(--s-3); right: var(--s-3); max-width: none; }
  .demo-panel { width: auto; }
}
@media (max-width: 720px) {
  .drawer { inset: 0; }
  .dialog {
    min-height: calc(100dvh / var(--content-scale));
    max-height: none;
  }
}