html {
  overscroll-behavior: none;
}

body {
  --footer-height: calc((var(--block-space)) + 3.6em + var(--block-space));
  --navbar-height: 4.125em;
  --left-sidebar-width: 0vw;
  --left-sidebar-height: 0px;
  --right-sidebar-width: 0vw;

  display: grid;
  grid-template-areas:
    "left-sidebar nav right-sidebar"
    "left-sidebar main right-sidebar";
  grid-template-columns: var(--left-sidebar-width) 1fr var(--right-sidebar-width);
  grid-template-rows: min-content 1fr;
  max-block-size: 100dvh;

  &.sidebars {
    --left-sidebar-height: 80px;
    @media (min-width: 100ch) {
      --left-sidebar-width: 68px;
      --left-sidebar-height: 100dvh;
      --right-sidebar-width: 32vw;
    }
  }
}

#nav {
  grid-area: nav;
}

#main-content {
  align-content: start;
  background-color: var(--color-bg);
  display: flex;
  flex-direction: column;
  grid-area: main;
  overflow: auto;
  position: relative;

  .sidebars & {
    height: calc(100dvh - var(--left-sidebar-height));
    border-bottom: 1px solid var(--color-subtle);
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    

    @media (min-width: 100ch) {
      height: 100dvh;
      border-inline: 1px solid var(--color-subtle);
    }
  }
  
  @media print {
    font-size: 11pt;
    inline-size: unset;
    line-height: 1.3;
    margin: 0;
    orphans: 3;
    padding: 0;
    text-align: justify;
    text-justify: distribute;
    widows: 2;
  }

}

#left-sidebar {
  grid-area: left-sidebar;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;

  position: fixed;
  bottom: 0;
  width: 100%;

  @media (min-width: 100ch) {
    position: unset;
    bottom: unset;
    width: unset;
  }
}

#right-sidebar {
  grid-area: right-sidebar;
  position: relative;
  transition: transform 300ms ease;

  .sidebars & {
    -webkit-backdrop-filter: blur(66px);
    backdrop-filter: blur(66px);
    background-color: oklch(var(--lch-white) / 0.66);
    block-size: 100dvh;
    max-block-size: 100dvh;
    z-index: 3;
    
    inset: 0;
    position: fixed;
    transform: translate(100%);

    @media (min-width: 100ch) {
      inset: unset;
      position: relative;
      transform: none;
    }
  }

  &.open {
    transform: translate(0);
    
    @media (min-width: 100ch) {
      transform: none;
    }
  }
}

:is(#nav, #footer, #left-sidebar, #right-sidebar) {
  @media print {
    display: none;
  }
}

#footer {
  grid-area: footer;
}