/* Signed in. The sidebar is a column only on wide screens; on phones it's a
   popover in the top layer and the page has the width to itself. */
.sidebar-layout {
  --main-inset-block-start: env(safe-area-inset-top);

  block-size: 100dvh;
  display: grid;
  grid-template-areas: "main";
  grid-template-columns: minmax(0, 1fr);

  @media (width >= 48rem) {
    grid-template-areas: "sidebar main";
    grid-template-columns: var(--max-i-3xs) minmax(0, 1fr);
  }
}

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

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

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

/* A page with an action bar fills main, so the bar sits at the bottom even
   under a short list. Its sections are spaced by the gap, not their margins. */
.container:has(> .action-bar) {
  display: flex;
  flex: 1;
  flex-direction: column;
  /*row-gap: var(--size-3);*/
}

/* A frame only marks what a search swaps out; the list inside should lay out
   as if it weren't there. */
turbo-frame {
  display: contents;
}

#header {
  align-items: center;
  background-color: var(--color-surface);
  block-size: calc(var(--size-16) + env(safe-area-inset-top));
  border-block-end-width: var(--border);
  column-gap: var(--size-4);
  display: flex;
  grid-area: header;
  padding-block-start: env(safe-area-inset-top);
  padding-inline: calc(var(--size-4) + env(safe-area-inset-left)) calc(var(--size-4) + env(safe-area-inset-right));
  view-transition-name: header;
}

#main {
  /* Named so a list can run out past them to the screen's edges. */
  --gutter-start: calc(var(--size-4) + env(safe-area-inset-left));
  --gutter-end: calc(var(--size-4) + env(safe-area-inset-right));

  background-color: var(--color-bg);
  display: flex;
  flex-direction: column;
  grid-area: main;
  overflow: auto;
  padding-block: calc(var(--size-4) + var(--main-inset-block-start, 0px)) calc(var(--size-4) + env(safe-area-inset-bottom));
  padding-inline: var(--gutter-start) var(--gutter-end);
  row-gap: var(--size-4);

  /* The action bar is the page's bottom edge; padding below it would only
     show the list scrolling past underneath. */
  &:has(.container > .action-bar) {
    padding-block-end: env(safe-area-inset-bottom);
  }
}