@layer layouts {
  .app {
    display: grid;
    grid-template-columns: 1fr;
    inline-size: 100%;
    min-block-size: 100dvh;

    @media screen and (min-width: 62rem) {
      grid-template-columns: 20rem 1fr;
      margin-inline: unset;
    }

    .app-sidebar {
      --max-inline-size: 20rem;

      display: flex;
      flex-flow: column nowrap;
      gap: 2.5rem;
      padding: 1.875rem 2rem 1.5rem;

      &::before {
        background: var(--clr-accent-950);
      }

      @media screen and (min-width: 62rem) {
        position: sticky;
        inset-block-start: 0;
        inline-size: 100%;
        block-size: 100%;
        background-color: transparent;
        border-radius: 0.625rem;
        box-shadow: none;
        transition: none;

        &::before,
        &::after {
          display: none;
        }

        .drawer-closer {
          display: none;
        }
      }
    }

    .app-nav-opener {
      line-height: 0;

      @media screen and (min-width: 62rem) {
        display: none;
      }
    }

    .app-nav {
      margin-inline: -2rem -1.25rem;
      padding-inline: 2rem 1.25rem;
      overflow-y: auto;
      scrollbar-color: var(--clr-accent-800) transparent;
      scrollbar-width: thin;
    }

    .app-main {
      display: grid;
      grid-template-rows: max-content 1fr;
      background-color: var(--clr-neutral-0);

      @media screen and (min-width: 62rem) {
        margin: 0.625rem;
        margin-inline-start: 0;
        border-radius: 0.625rem;
        overflow: clip;
      }
    }

    .app-header {
      position: sticky;
      inset-block-start: 0;
      z-index: 9;
      display: flex;
      flex-flow: row nowrap;
      gap: 1rem;
      align-items: center;
      padding: 1rem clamp(1rem, 4cqi, 1.5rem);
      border-block-end: 0.0625rem solid var(--clr-accent-200);

      &::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background-color: color-mix(in oklab, var(--clr-surface), transparent 15%);
        backdrop-filter: blur(0.125rem);
      }
    }

    .app-board {
      padding-block: 2rem;
      margin-inline: 1rem;
    }

    .app-panel {
      display: flex;
      flex-flow: row nowrap;
      gap: 0.625rem;
      margin: 0 0 0 auto;
      padding: 0;
      list-style: none;
      color: inherit;
    }

    .app-breadcrumb {
      font-size: 0.875rem;
      font-variation-settings: "wght" 550;
      line-height: 1;
    }

    .app-footer {
      display: flex;
      flex-flow: column nowrap;
      margin-block-start: auto;
      color: var(--clr-neutral-600);
      font-size: 0.875rem;
      text-align: center;
    }
  }

  .login {
    display: flex;
    justify-content: center;
    align-items: center;
    block-size: calc(100% - 2rem);
    inline-size: calc(100% - 2rem);
    margin: auto;

    .login-container {
      display: flex;
      flex-flow: column nowrap;
      justify-content: space-around;
      gap: 2rem;
      inline-size: max-content;
      block-size: min(100%, 50rem);
      margin: auto;

      @media screen and (min-width: 80rem) {
        inline-size: min(100%, 62rem);
      }
    }

    .login-header,
    .login-main,
    .login-footer {
      display: flex;
      inline-size: min(100%, 20rem);
    }

    .login-header,
    .login-footer {
      justify-content: center;
      padding-block: 2rem;
    }

    .login-main {
      display: flex;
      flex-flow: column nowrap;
      gap: 1.375rem;
      padding: 1.75rem 1.375rem 1.375rem;
      background-color: var(--clr-neutral-0);
      border-radius: 0.625rem;
    }

    .login-footer {
      flex-flow: row nowrap;
      gap: 0.625rem;
      color: var(--clr-accent-400);
      font-size: 0.875rem;

      & > span {
        opacity: 0.75;
      }
    }

    .login-logo {
      inline-size: min(100%, 10.5rem);
    }
  }
}