[data-component~="views/layouts/internal"] {
  background-color: var(--color-base-950);
  color: var(--color-base-300);
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  max-width: 140rem;
  margin-left: auto;
  margin-right: auto;
  nav {
    ul {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      list-style: none;
      padding: 0;
      margin: 0;
    }
  }
  > header {
    z-index: 1;
    position: sticky;
    top: 0;
    background-color: var(--color-base-900);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    > * {
      flex-basis: 100%;
    }
    #header-top {
      display: flex;
      align-items: end;
      gap: 1rem;
    }
    a[data-active=true] {
      text-decoration: underline;
    }
  }
  #subnav {
    border-bottom-width: 0px;
    border-bottom-style: solid;
    border-bottom-color: var(--color-base-500);
  }
  main {
    padding: 1rem;
    display: flex;
    gap: 1rem;
    @media (width < 768px) {
      flex-direction: column;
    }
    #center {
      display: flex;
      flex-direction: column;
      height: 100%;
      flex-basis: 100%;
      p {
        overflow-wrap: anywhere;
      }
      #actions {
        margin-bottom: 1rem;
      }
    }
    #sidebar {
      width: 30rem;
      @media (width < 768px) {
        border: 0;
        border-top-width: 1px;
        border-color: var(--color-base-500);
        border-style: solid;
        width: 100%;
      }
    }
  }
  > footer {
    min-height: 3.32rem;
    z-index: 1;
    position: sticky;
    bottom: 0;
    background-color: var(--color-base-900);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    turbo-frame {
      margin-right: auto;
    }
    #env {
      &[data-env=prod] {
        color: var(--color-pink-500);
      }
      &[data-env=dev] {
        color: var(--color-purple-500);
      }
      &[data-env=test] {
        color: var(--color-indigo-500);
      }
    }
    #sha {
      color: var(--color-base-500);
    }
  }
  [data-component~="components/layouts/flash"] {
    &:empty {
      padding: 0;
    }
  }
}