.layout {
  height: 100vh;
  width: 100%;
  display: grid;

  grid-template-columns:
                fit-content(var(--base-gap))
                fit-content(20%)
                fit-content(20%)
                minmax( 0, 1fr ) /* issue#1370 https://css-tricks.com/preventing-a-grid-blowout/ */
                fit-content(20%)
                auto;
  grid-template-rows:
                var(--base-gap)
                minmax( 0, 1fr ) /* https://github.com/w3c/csswg-drafts/issues/1777 */
                calc(var(--base-rhythm)*4);
  grid-template-areas:
      "nav  header   header   header   header    aside"
      "nav  tree     bar_left main     bar_right aside"
      "nav  footer   footer   footer   footer    aside";

  place-items: stretch stretch;
  place-content: stretch stretch;

  overflow: hidden; /* Prevents scrolling before children's styles are triggered */
}

.layout_nav {
  grid-area: nav;
  position: relative;
  z-index: 10;
}

.layout_tree {
  grid-area: tree;
  min-width: 0;
}

.layout_toc,
.layout_toc[data-position='left'] {
  grid-area: bar_left;
}
.layout_toc[data-position='right'] {
  grid-area: bar_right;
}

.layout_footer {
  grid-area: footer;
}

.layout_header {
  grid-area: header;
  min-width: 0;
}

.layout_aside {
  grid-area: aside;
  min-width: 0;
}

.layout_main {
  grid-area: main;
  min-width: 0;
}

/*  */

.section-number {
  margin-right: .5rem;
  font-size: 0.85em;
  font-weight: bold;
}

/* messages */

.mars {
  position: fixed;
  z-index: 1111;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;

  display: flex;
  justify-content: center;
  /* align-items: flex-end */
  align-items: center;

  padding: calc(var(--base-rhythm)*10);
}

/* <sdoc-toast> */

sdoc-toast {
  pointer-events: initial;
  text-align: center;
  border-radius: var(--base-rhythm);
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
  background: var(--color-bg-ui);
  color: var(--color-fg-secondary-invert);
}

sdoc-toast:not(:empty) {
  padding: .75rem 2rem;
}

sdoc-toast a,
sdoc-toast a:link,
sdoc-toast a:visited {
  color: var(--color-bg-contrast);
}

sdoc-toast a:hover {
  color: var(--color-fg-accent);
}
