:root {
}

html {
  overscroll-behavior: none;
}

body {
  --sidebar-width: 30ch;
  display: grid;
  grid-template-areas:
    "nav main-content"
    "nav main-content"
    "sidebar main-content";
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: 1fr min-content;
  gap: var(--block-space);
}

#nav {
  grid-area: nav;
}

#main-content {
  grid-area: main-content;
}

#sidebar {
  grid-area: sidebar;
  height: 100vh;
  position: fixed;
  width: var(--sidebar-width);
  overflow-y: auto;
}

.action-bar {
  display: flex;
  gap: var(--inline-space);
  align-items: center;
  margin-block-end: var(--block-space);
}

.actions {
  display: flex;
  align-items: center;
  gap: calc(var(--block-space) * 0.5);
  flex-wrap: nowrap;
}

.grid-with-sidebar {

  display: grid;

  grid-template-areas: "sidebar main";
  grid-gap: var(--block-space);

  grid-template-columns: min(60ch, 33.333%) 1fr;

  .grid-sidebar {
    grid-area: sidebar;
  }

  .grid-main {
    grid-area: main;
  }
}