[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;
  > 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;
    }
    nav {
      ul {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        list-style: none;
        padding: 0;
        margin: 0;
      }
    }
  }
  #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%;
      min-width: 0;
      p, li {
        overflow-wrap: anywhere;
      }
    }
    #sidebar {
      width: 30rem;
      @media (width < 768px) {
        border: 0;
        border-top-width: 1px;
        border-color: var(--color-base-500);
        border-style: solid;
        width: 100%;
        padding-top: 1rem;
      }
      #actions {
        ul {
          display: flex;
          flex-direction: column;
          gap: 0.75rem;
          @media (width < 768px) {
            flex-direction: row;
            gap: 1rem;
          }
          flex-wrap: wrap;
          list-style: none;
          padding: 0;
          margin: 0;
        }
      }
    }
  }
  > 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;
    }
  }
}