@layer surfaces {
  :root {
    --sidebar-floating-gap: var(--space-cluster);
    --sidebar-floating-block-gap: var(--space-related);
    --sidebar-floating-inline: var(--sidebar-w);
    --sidebar-occupied-inline-start: 0px;
    --sidebar-occupied-inline-end: 0px;
    --sidebar-canvas-inline-start: var(--sidebar-occupied-inline-start);
    --sidebar-canvas-inline-end: var(--sidebar-occupied-inline-end);
    --sidebar-available-center-offset: calc((var(--sidebar-occupied-inline-start) - var(--sidebar-occupied-inline-end)) / 2);
  }

  :root[data-sidebar-open="true"][data-sidebar-mode="persistent"][data-sidebar-side="right"],
  :root[data-sidebar-open="true"][data-sidebar-mode="narrow"][data-sidebar-side="right"] {
    --sidebar-occupied-inline-end: calc(var(--sidebar-floating-inline) + var(--app-safe-right));
  }

  :root[data-sidebar-open="true"][data-sidebar-mode="persistent"][data-sidebar-side="left"],
  :root[data-sidebar-open="true"][data-sidebar-mode="narrow"][data-sidebar-side="left"] {
    --sidebar-occupied-inline-start: calc(var(--sidebar-floating-inline) + var(--app-safe-left));
  }

  :root[data-sidebar-mode="compact"] {
    --sidebar-occupied-inline-start: 0px;
    --sidebar-occupied-inline-end: 0px;
    --sidebar-canvas-inline-start: 0px;
    --sidebar-canvas-inline-end: 0px;
    --sidebar-available-center-offset: 0px;
  }

  #app {
    background: var(--bg-app);
    block-size: var(--app-shell-block-size);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    inline-size: var(--app-shell-inline-size);
    max-block-size: var(--app-shell-block-size);
    max-inline-size: var(--app-viewport-inline);
    overflow: hidden;
    overscroll-behavior: none;
    position: fixed;
    inset: 0;
  }

  #main {
    block-size: 100%;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    grid-column: 1;
    grid-row: 1;
    min-block-size: 0;
    min-inline-size: 0;
    overflow: hidden;
    order: 1;
  }


  #body { display: contents; }

  #canvas {
    container: canvas / inline-size;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    margin-inline-end: var(--sidebar-canvas-inline-end);
    margin-inline-start: var(--sidebar-canvas-inline-start);
    min-block-size: 0;
    min-inline-size: 0;
    overflow: hidden;
    overscroll-behavior: contain;
    position: relative;
    transition: margin-inline-start var(--motion-duration-panel-sheet) var(--motion-ease-emphasized), margin-inline-end var(--motion-duration-panel-sheet) var(--motion-ease-emphasized);
  }

  #overlay {
    background: var(--bg-overlay);
    display: none;
    inset: 0;
    position: fixed;
    z-index: var(--z-overlay);
  }

  #overlay.is-visible { display: block; }

  :root[data-sidebar-mode="compact"] #overlay {
    background: transparent;
    pointer-events: none;
    z-index: calc(var(--z-sidebar) - 1);
  }

  :root[data-sidebar-open="true"][data-sidebar-mode="compact"] #body {
    pointer-events: none;
  }

  :root[data-sidebar-open="true"][data-sidebar-mode="compact"] #topbar,
  :root[data-sidebar-open="true"][data-sidebar-mode="compact"] #toolbar-row,
  :root[data-sidebar-open="true"][data-sidebar-mode="compact"] .sidebar {
    pointer-events: auto;
  }

  .file-picker-input,
  .image-picker-input { display: none; }

  @media (min-width: 600px) and (max-width: 1079px) {
    :root { --sidebar-floating-inline: min(var(--sidebar-overlay-w), var(--sidebar-overlay-max-inline)); }
  }

  @media (prefers-reduced-motion: reduce) {
    #canvas {
      transition-duration: var(--motion-duration-reduced);
    }
  }
}