@layer layout {
  .stack { display: flex; flex-direction: column; gap: var(--space-4); }
  .stack--tight { gap: var(--space-2); }
  .stack--loose { gap: var(--space-6); }
  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
  .cluster--tight { gap: var(--space-2); }
  .auto-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(var(--min, 16rem), 1fr)); }
  .with-sidebar { display: grid; grid-template-columns: var(--sidebar-w, 15rem) 1fr; }
  .frame { aspect-ratio: var(--ratio, 16 / 9); }

  .app-shell { display: grid; grid-template-columns: 15rem 1fr; min-block-size: 100vh; }
  .app-shell__main { display: flex; flex-direction: column; min-inline-size: 0; }
  .app-shell__content { padding: var(--space-6); overflow: auto; }

  .sidebar { background: var(--color-surface); border-inline-end: 1px solid var(--color-border); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); position: sticky; inset-block-start: 0; block-size: 100vh; overflow: auto; }
  .sidebar__brand { font-size: var(--font-size-lg); font-weight: 700; }
  .sidebar__nav { display: flex; flex-direction: column; gap: var(--space-1); }
  .sidebar__link { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius); color: var(--color-text); font-size: var(--font-size-sm); }
  .sidebar__link:hover { background: var(--color-surface-2); }
  .sidebar__link[aria-current="page"] { background: var(--color-primary-weak); color: var(--color-primary); font-weight: 600; }
  .sidebar__roles { display: flex; flex-direction: column; gap: var(--space-2); }
  .sidebar__roles-title { font-size: var(--font-size-sm); color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.04em; }
  .sidebar__role { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--color-muted); }

  .topbar { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-6); border-block-end: 1px solid var(--color-border); background: var(--color-bg); position: sticky; inset-block-start: 0; z-index: var(--z-sticky); }
  .zoom-switcher { display: inline-flex; gap: var(--space-1); background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-1); }
  .zoom-switcher__btn { padding: var(--space-2) var(--space-3); border-radius: var(--radius); font-size: var(--font-size-sm); }
  .zoom-switcher__btn[aria-current="page"] { background: var(--color-bg); box-shadow: var(--shadow-1); font-weight: 600; }
  .topbar__spacer { flex: 1; }

  .dot { inline-size: 0.6rem; block-size: 0.6rem; border-radius: 50%; display: inline-block; background: var(--role-color, var(--color-muted)); flex: none; }
}