@layer surfaces {
  :root {
    /* The closed icon rail and open utility workspace remain inset floating
       surfaces. The canvas reservation includes the panel plus the matching
       inner and outer gaps, preserving a deliberate workspace surround. */
    --sidebar-floating-gap: 16px;
    --sidebar-floating-block-gap: 16px;
    --sidebar-content-gap: calc(2 * var(--sidebar-floating-gap));
    --sidebar-floating-inline: var(--sidebar-w);
    /* Sidebar side is a physical user preference. Keep physical left/right
       reservation stable even when the document language changes direction. */
    --sidebar-occupied-left: 0px;
    --sidebar-occupied-right: 0px;
    --sidebar-occupied-inline-start: var(--sidebar-occupied-left);
    --sidebar-occupied-inline-end: var(--sidebar-occupied-right);
    --sidebar-canvas-left: var(--sidebar-occupied-left);
    --sidebar-canvas-right: var(--sidebar-occupied-right);
    --sidebar-available-center-offset: calc((var(--sidebar-occupied-left) - var(--sidebar-occupied-right)) / 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-right: calc(var(--sidebar-floating-inline) + var(--app-safe-right) + var(--sidebar-content-gap));
  }

  :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-left: calc(var(--sidebar-floating-inline) + var(--app-safe-left) + var(--sidebar-content-gap));
  }

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

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


  /* Installed desktop shells can visually lose the host titlebar separator
     when the sidebar changes the surface immediately below it. Compose owns a
     single non-layout hairline at the app boundary so the seam remains stable
     across closed, left-open, and right-open sidebar states. The display-mode
     media queries cover first paint; the data attribute is a deterministic
     fallback for wrappers and layout verification. */
  #app::before {
    background: var(--surface-window-separator);
    block-size: 1px;
    content: '';
    inset-block-start: 0;
    inset-inline: 0;
    opacity: var(--window-separator-opacity);
    pointer-events: none;
    position: fixed;
    z-index: var(--z-window-separator);
  }

  @media (display-mode: standalone),
         (display-mode: minimal-ui),
         (display-mode: window-controls-overlay) {
    #app { --window-separator-opacity: 1; }
  }

  :root:is([data-app-display-mode="standalone"],
           [data-app-display-mode="minimal-ui"],
           [data-app-display-mode="window-controls-overlay"]) #app {
    --window-separator-opacity: 1;
  }

  #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 {
    background: var(--surface-canvas);
    container: canvas / inline-size;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    margin-left: var(--sidebar-canvas-left);
    margin-right: var(--sidebar-canvas-right);
    min-block-size: 0;
    min-inline-size: 0;
    overflow: hidden;
    overscroll-behavior: contain;
    position: relative;
    transition: margin-left var(--motion-duration-panel-sheet) var(--motion-ease-emphasized), margin-right 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"] #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-block-gap: 12px;
      --sidebar-floating-gap: 12px;
      --sidebar-floating-inline: min(var(--sidebar-overlay-w), var(--sidebar-overlay-max-inline));
    }
  }

  :root[data-sidebar-mode-transition="true"] #canvas {
    transition: none;
  }

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

  @media (forced-colors: active) {
    #app::before {
      background: CanvasText;
      forced-color-adjust: auto;
    }
  }
}