@layer components {
  body.app-surface {
    min-block-size: 100dvh;
    overflow: clip;
    background: var(--color-cream);
  }

  .app-shell {
    --app-shell-header-size: 4rem;
    --app-shell-rail-size: 22rem;

    isolation: isolate;
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    block-size: 100dvh;
    overflow: clip;
    background: var(--color-cream);
  }

  .app-shell > .app-header {
    --app-header-size: var(--app-shell-header-size);

    position: relative;
    z-index: 12;
  }

  .app-shell-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "rail"
      "workspace";
    grid-template-rows: max-content max-content;
    position: relative;
    min-block-size: 0;
  }

  .app-shell-rail {
    grid-area: rail;
    min-inline-size: 0;
  }

  .app-shell-workspace {
    grid-area: workspace;
    min-inline-size: 0;
  }

  @media (min-width: 48rem) {
    .app-shell-layout {
      grid-template-columns: var(--app-shell-rail-size) minmax(0, 1fr);
      grid-template-areas: "rail workspace";
      grid-template-rows: minmax(0, 1fr);
    }
  }
}