@layer components {
  .stage {
    --dock-clearance: calc(var(--dock-block-size) + var(--safe-bottom));
    --sheet-clearance: var(--space-0);

    position: fixed;
    inset: var(--space-0);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .stage:has(.sheet) {
    --sheet-clearance: var(--sheet-collapsed-block-size);
  }
}

@layer platform {
  html.keyboard .stage {
    --dock-clearance: var(--space-0);
  }
}

@layer components {
  @media (width >= 800px) {
    .stage {
      --dock-clearance: calc(var(--dock-block-size) + var(--space-5) + var(--safe-bottom));
    }
  }
}