/* on content layouts we want the background to be surface instead of canvas */
body {
  background-color: var(--ory-theme-background-surface);
}

/* The page: brand header above the content. These two pages carried a fixed
   side navigation until AA-44 removed it — the account settings page is the
   whole signed-in interface now, and the signed-out landing page has its quick
   action tiles — so nothing reserves a column at the left any more. */
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 100%;
  /* remove extra bottom padding to avoid unnecessary scroll space */
  padding-bottom: 0;
}

.site-header {
  padding: 2rem 2rem 0;
  /* The header is a column flex container in a column parent, so without this
     the logo stretches the full width — and the SVG, centred in whatever box it
     is given, would look centred on the page. */
  align-items: flex-start;
}

.container {
  display: flex;
  flex-direction: column;
  padding: 2rem 2rem;
  height: auto;
}

.wrap-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.content {
  width: auto;
}

/* wide-screen vieport */
@media screen and (min-width: 90em) {
  .content {
    display: flex;
    width: 100%;
    flex: 1 1 auto;
    gap: 2rem;
    max-width: 90em;
  }
}

/* The container keeps its 2rem top padding at every width. It was 4rem from
   48em up, which is the whole of the gap between the logo and the headline —
   the header itself has no bottom padding — and at that size it read as the
   two belonging to different pages. 2rem also matches the padding the header
   holds the logo in. */