/* Компактный масштаб содержимого; шапка и 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) {
  .orbit-overview { grid-template-columns: minmax(0, 1fr); }
  .overview-stat > span { white-space: normal; }
  .today-grid { grid-template-columns: minmax(0, 1fr); }
  .today-grid > .stack:last-child { display: flex; }
  .two-col { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 360px) {
  .orbit-scene {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "projects tasks" "core core" "ideas waiting";
    gap: 10px 6px;
    padding: 10px 6px;
    aspect-ratio: auto;
    contain: paint;
  }
  .orbit-core {
    grid-area: core;
    position: relative;
    inset: auto;
    transform: none;
    justify-self: center;
    margin: 8px 0;
  }
  .orbit-node {
    position: relative;
    inset: auto;
    min-width: 0;
    align-self: stretch;
  }
  .orbit-node > span:last-child { min-width: 0; overflow-wrap: anywhere; }
  .orbit-node--projects { grid-area: projects; }
  .orbit-node--tasks { grid-area: tasks; }
  .orbit-node--ideas { grid-area: ideas; }
  .orbit-node--waiting { grid-area: waiting; }
}

@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;
  }
}