.sidebar-layout {
  block-size: 100dvh;
  display: grid;
  grid-template-areas: "header header" "sidebar main";
  grid-template-columns: var(--sidebar-width, 0) 1fr;
  grid-template-rows: auto 1fr;

  &.closed {
    --sidebar-border-width: 0;
    --sidebar-padding: 0;
    --sidebar-width: 0;
  }

  @media (width >= 48rem) {
    --sidebar-border-width: var(--border);
    --sidebar-padding: var(--size-2);
    --sidebar-width: var(--max-i-3xs);
  }
}

.header-layout {
  block-size: 100dvh;
  display: grid;
  grid-template-areas: "header" "main";
  grid-template-rows: auto 1fr;
}

/*
 * P10.5 §4: the auth screens use css-zero's centered_layout, but nested INSIDE
 * `#main`, which is already a sized grid area. `centered-layout` on its own sets
 * `block-size: 100dvh`, which in that position overflows #main by the height of
 * the header; filling the parent is the right measurement here.
 *
 * (The `.flash--under-header` rule that used to live here moved to flash.css as
 * `.flash--corner` in the same phase -- the flash is bottom-right now, and a
 * component's variants belong in the component's own file. Its history is worth
 * keeping: that offset was an inline `style="--flash-position: 5rem"` until P9,
 * and one hard-coded rem in the markup was the entire reason the app would have
 * needed `style-src 'unsafe-inline'`.)
 */
.auth-layout {
  block-size: 100%;
  padding-block: var(--size-8);
}

.centered-layout {
  block-size: 100dvh;
  display: grid;
  place-items: center;
}

.container {
  inline-size: 100%;
  margin-inline: auto;
  max-inline-size: var(--container-width, 64rem);
}

#header {
  align-items: center;
  background-color: var(--surface-wash);
  border-block-end-width: var(--border);
  column-gap: var(--size-4);
  display: flex;
  grid-area: header;
  padding-inline: var(--size-4);
  view-transition-name: header;
}

#sidebar {
  background-color: var(--surface-wash);
  border-inline-end-width: var(--sidebar-border-width, 0);
  display: flex;
  flex-direction: column;
  grid-area: sidebar;
  overflow-x: hidden;
  padding: var(--sidebar-padding, 0);
  row-gap: var(--size-2);
  view-transition-name: sidebar;
}

#main {
  display: flex;
  flex-direction: column;
  grid-area: main;
  overflow: auto;
  padding: var(--size-4);
  row-gap: var(--size-4);
}

/* keep_place_controller.js owns the scroll position for the length of one morph
   render; Chrome's own anchoring would otherwise correct the same move again. */
#main.keep-place--holding { overflow-anchor: none; }