/* The empty host page's own styles: a bar to switch pages and room for the app, nothing else, so
   whatever the app looks like here is the app alone. The adda.se page has adda.se's CSS instead. */
.preview {
  margin: 0;
  font-family: system-ui, sans-serif;
}

.preview__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #767676;
}

.preview__bar nav {
  display: flex;
  gap: 1rem;
}

.preview__main {
  padding: 1rem;
}

/* The space adda.se's page type reserves, so the footer does not jump when the app mounts. */
.preview__host {
  min-height: calc(100dvh - 88px);
}