@layer components {
  .panes {
    flex: auto;
    min-block-size: var(--space-0);
    display: grid;
    grid-template-columns: minmax(var(--space-0), var(--track-fill));
    grid-template-rows: minmax(var(--space-0), var(--track-fill));
  }

  .panes > .page:first-child {
    display: none;
  }

  @media (width >= 1100px) {
    .panes {
      grid-template-columns: minmax(var(--space-0), 2fr) minmax(var(--space-0), 3fr);
    }

    .panes > .page:first-child {
      display: block;
      border-inline-end: var(--border-width) solid var(--color-border);
      scrollbar-width: none;
    }

    .panes > .page:first-child::-webkit-scrollbar {
      display: none;
    }

    .panes > .page + .page > .toolbar .toolbar__back.button--round {
      display: none;
    }

    .panes > .page + .page > .toolbar:not(:has(.toolbar__title, .toolbar__trailing > *)) {
      display: none;
    }

    .panes > .page + .page > .toolbar:not(:has(.toolbar__title, .toolbar__trailing > *)) ~ .page-title {
      padding-block-start: calc(var(--safe-top) + var(--space-7));
    }

    .panes > .page + .page > .conversation-bar {
      display: none;
    }

    .panes > .page + .page > .page-title .page-title__eyebrow {
      display: none;
    }
  }
}