*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  block-size: 100%;
}

body {
  overflow: hidden;
  background: var(--surface-100);
  color: var(--ink-body);
  font-family: var(--font-sans);
  font-size: var(--type-200);
}

[data-aos='screen'] {
  display: grid;
  max-inline-size: 100%;
  block-size: 100vb;
  grid-template-areas:
    'toolbar toolbar toolbar'
    'rail pane-head detail'
    'rail pane detail'
    'rail-foot pane detail';
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto 1fr auto;
}

[data-aos='screen']:not(:has(> [data-aos-region='rail'])) {
  grid-template-areas:
    'toolbar toolbar'
    'pane-head detail'
    'pane detail';
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto 1fr;
}

[data-aos-region] {
  display: flex;
  flex-direction: column;
  min-block-size: 0;
}

[data-aos-region='toolbar'] {
  grid-area: toolbar;
  min-inline-size: 0;
  overflow: hidden;
}

[data-aos-region='rail'] {
  grid-area: rail;
  inline-size: max-content;
}

[data-aos-region='rail-foot'] {
  grid-area: rail-foot;
}

[data-aos-region='pane-head'] {
  grid-area: pane-head;
  min-inline-size: 0;
}

[data-aos-region='list-pane'] {
  grid-area: pane;
  min-inline-size: 0;
  overflow: auto;
}

[data-aos-region='detail-pane'] {
  grid-area: detail;
  overflow: auto;
  inline-size: var(--side-width);
}

[data-aos='section'] {
  display: flex;
  flex-direction: column;
  gap: var(--space-100);
  min-block-size: 0;
  min-inline-size: 0;
}

/* The three widths the frame answers. A window that cannot hold three panes side by side stands them over
   one another instead of shrinking all three past use: the detail takes the window, then the rail leaves the
   flow and is drawn over the canvas. Nothing is hidden that has no other way to be reached. */
@media (width <= 1180px) {
  [data-aos-region='detail-pane'] {
    inline-size: var(--side-width);
  }
}

@media (width <= 1000px) {
  /* A panel that is open at this width stands over the canvas rather than beside it; a folded one keeps its
     place in the row, because a strip the width of one control is not what leaves the canvas no room. */
  [data-aos-region='rail']:has([data-variant='expanded']),
  [data-aos-region='rail']:has([data-variant='expanded']) ~ [data-aos-region='rail-foot'] {
    position: fixed;
    inset-block: var(--toolbar-height) 0;
    inset-inline-start: 0;
    z-index: 2;
    background-color: var(--surface-100);
    box-shadow: var(--elevation-dialog);
  }

  [data-aos-region='rail']:has([data-variant='expanded']) ~ [data-aos-region='rail-foot'] {
    inset-block-start: auto;
  }
}

@media (width <= 599px) {
  /* The address is the one thing on the toolbar a reader can read off the screen they are looking at, so at a
     width that cannot hold the row it is what goes. */
  [data-aos-region='toolbar'] [data-slot='route'],
  [data-aos-region='toolbar'] [data-slot='instrument'] {
    display: none;
  }

  [data-aos-region='detail-pane'] {
    position: fixed;
    inset: var(--toolbar-height) 0 0;
    z-index: 3;
    inline-size: 100%;
    background-color: var(--surface-100);
  }
}