body {
  display: flex;
  flex-direction: column;
}

body:has(.auth-form) .content {
  grid-template-columns: 1fr;
}

.site-header {
  background-color: var(--clr-always-slate);
  color: var(--clr-always-white);
  padding-block: 0.5rem;

  .container {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
  }

  ul {
    list-style: none;
    border: 1px dashed var(--clr-slate);
    padding: 1em;
    display: flex;
    gap: 0.75rem;

    li {
      margin: none;
    }

    li + li {
      border-left: 1px solid var(--clr-separators);
      padding-left: 0.75rem;
    }

    a,
    button {
      text-decoration: none;
      color: var(--clr-ink);
      padding: 0;
      text-decoration-skip-ink: auto;
      text-decoration-thickness: max(0.08em, 1px);
      text-underline-offset: 0.15em;
      color: currentColor;

      &:hover {
        text-decoration: underline;
      }
    }
  }
}

/* @media screen and (max-width: 1000px) { */
/*   .site-header { */
/*     .container { */
/*       .site-header__hamburger { */
/*         grid-area: left-main; */
/*       } */
/**/
/*       .site-header__user { */
/*         grid-area: right-user; */
/*       } */
/**/
/*       nav { */
/*         grid-area: mobile-nav; */
/*         background: transparent; */
/*         max-width: 50ch; */
/*         display: none; */
/**/
/*         ul:not(.dropdown-menu) { */
/*           padding: 0; */
/**/
/*           > li { */
/*             display: block; */
/*             text-transform: uppercase; */
/*             border-bottom: 1px solid var(--clr-separators); */
/**/
/*             a { */
/*               display: block; */
/*               padding: 0.5em; */
/*               color: var(--clr-always-white); */
/*               text-decoration: none; */
/*             } */
/*           } */
/*         } */
/**/
/*         .dropdown-menu { */
/*           display: block; */
/*           position: unset; */
/*           width: 100%; */
/*           background: unset; */
/*           box-shadow: none; */
/*           border-top: 1px solid var(--clr-separators); */
/**/
/*           li { */
/*             border: none; */
/*             padding: none; */
/*             display: flex; */
/**/
/*             a { */
/*               padding: 0.5em; */
/*               color: white !important; */
/*               text-decoration: none; */
/**/
/*               i { */
/*                 color: white !important; */
/*               } */
/*             } */
/*           } */
/*         } */
/*       } */
/*     } */
/*   } */
/**/
/*   .site-header.open { */
/*     nav { */
/*       display: block; */
/*     } */
/*   } */
/* } */
/**/
/* @media screen and (min-width: 1000px) { */
/*   .site-header { */
/*     .container { */
/*       flex-direction: row-reverse; */
/**/
/*       .site-header__hamburger { */
/*         display: none; */
/*       } */
/**/
/*       nav { */
/*         grid-area: left-main; */
/*       } */
/**/
/*       nav > ul:not(.dropdown-menu) { */
/*         padding: 0; */
/*         list-style: none; */
/*         display: flex; */
/*         gap: 2em; */
/*         font-weight: var(--fw-bold); */
/**/
/*         a { */
/*           text-decoration: none; */
/*         } */
/*       } */
/*     } */
/*   } */
/* } */

/* .site-header { */
/*   background-color: var(--clr-always-slate); */
/*   color: var(--clr-always-white); */
/*   padding-block: 0.5rem; */
/*   z-index: 99; */
/**/
/*   .container { */
/*     display: flex; */
/*     justify-content: space-between; */
/*     align-items: center; */
/*   } */
/**/
/*   nav > ul:not(.dropdown-menu) { */
/*     padding: 0; */
/*     list-style: none; */
/*     display: flex; */
/*     gap: 2em; */
/*     font-weight: var(--fw-bold); */
/**/
/*     a { */
/*       text-decoration: none; */
/*     } */
/*   } */
/* } */
/**/
/* .site-header__user { */
/*   display: flex; */
/*   gap: 0.5rem; */
/*   align-items: center; */
/**/
/*   .avatar { */
/*     width: 3.5em; */
/*   } */
/**/
/*   div { */
/*     display: flex; */
/*     flex-direction: column; */
/*     text-align: right; */
/*   } */
/**/
/*   p { */
/*     margin: 0; */
/*   } */
/* } */

.content {
  --padding: 16px;
  --gap: 1rem;

  flex: 1;
  width: min(100% - var(--padding), 1640px);
  margin-inline: auto;
  padding-inline: var(--padding);

  display: grid;
  gap: var(--gap);

  @media screen and (min-width: 1000px) {
    grid-template-columns: 2fr 1fr;

    &.sidebar-collapsed {
      grid-template-columns: 1fr auto;

      .aside-content {
        display: none;
      }
    }
  }
}

.container {
  --padding: 16px;

  width: min(100% - var(--padding), 1640px);
  margin-inline: auto;
  padding-inline: var(--padding);
}

main {
  padding-block: 1em;

  @media screen and (min-width: 1000px) {
    padding-right: 1em;
  }
}

@media screen and (min-width: 1000px) {
  main + aside {
    padding: 1em;
    padding-right: 0;
    border-left: 1px solid var(--clr-separators);
  }
}

aside {
  max-height: 95vh;
  @media screen and (max-width: 1000px) {
    border-top: 1px solid var(--clr-ink);
    padding-block: 1em;

    &.mobile-only {
      display: none;
    }
  }
}

.mobile-search-bar {
  border-bottom: 1px solid var(--clr-separators);
  padding-block: 0.5em;

  @media screen and (min-width: 1000px) {
    display: none;
  }

  .container {
    display: flex;
    justify-content: space-between;
  }
}

.breadcrumbs {
  background: var(--clr-separators);
  padding: 0;

  ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0.5rem 0;
    gap: 0.5rem;
    font-size: 0.75rem;
    text-transform: uppercase;

    li:not(:first-child):before {
      content: "/";
      color: oklch(from var(--clr-separators) 0.8 c h);
      margin-right: 0.5rem;
    }

    a {
      text-decoration: none;

      &:hover {
        color: var(--clr-ink);
        text-decoration: underline;
      }
    }
  }
}

.auth-page {
  background: var(--clr-slate);

  .content {
    margin: auto;
    display: flex;
    align-items: center;
  }

  main {
    padding: 0;
    margin-inline: auto;
    width: 100%;
  }
}

.panel {
  background-color: var(--clr-background);
  width: 40ch;
  max-width: 100%;
  padding: 2em;
  margin: auto;
}

th[scope="row"] {
  vertical-align: top;
}

.main-endpoint {
  width: 100%;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  border: 1px solid var(--clr-separators);

  iframe {
    width: 100%;
    height: 100%;
  }
}

.site-footer {
  padding-block: 0.5rem;

  .container {
    background: var(--clr-ink);
    color: white;
    padding-block: 0.5rem;

    a,
    button {
      text-decoration: none;
      color: var(--clr-ink);
      padding: 0;
      text-decoration-skip-ink: auto;
      text-decoration-thickness: max(0.08em, 1px);
      text-underline-offset: 0.15em;
      color: currentColor;

      &:hover {
        text-decoration: underline;
      }
    }
  }
}