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

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

html {
  touch-action: pan-x pan-y;
}

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;
}

/* The platform names a reader by their address alone, so the account chip holds one line beside its face. The
   account takes only the room the rest of the toolbar leaves it, cutting its address with an ellipsis down to the face,
   before anything else in the toolbar gives way. */
body [data-aos-region='toolbar'] .kit-slot[data-slot='account'] {
  flex: 1 1 0;
  min-inline-size: min-content;
  max-inline-size: max-content;
}

body [data-aos-region='toolbar'] .kit-control[data-component='chip'][data-variant='account'] > .kit-slot[data-slot='label'] {
  display: block;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body [data-aos-region='toolbar'] .kit-control[data-component='chip'][data-variant='account'] > .kit-slot[data-slot='leading'] {
  grid-row: auto;
  min-inline-size: auto;
}

[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;
}

/* Past three panes' width the detail takes the window and the rail is drawn over the canvas. */
@media (width <= 1180px) {
  [data-aos-region='detail-pane'] {
    inline-size: var(--side-width);
  }
}

@media (width <= 1000px) {
  /* An open panel stands over the canvas; a folded one keeps its place in the row. */
  [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);
  }

  /* Out of the row the foot states the rail's width itself. */
  [data-aos-region='rail']:has([data-variant='expanded']) ~ [data-aos-region='rail-foot'] {
    inset-block-start: auto;
    inline-size: var(--rail-width);
  }
}

@media (width <= 599px) {
  /* The address is what the toolbar gives up first. */
  [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);
  }
}