:root {
}

html {
  overscroll-behavior: none;
}

body {
  min-height: 100vh;
}

#app-wrapper {
  --sidebar-width: 30ch;
  --main-content-width: 120ch;
  display: grid;
  grid-template-areas:
    "nav nav nav"
    "sidebar-left main-content sidebar-right";
  grid-template-columns: var(--sidebar-width) minmax(auto, var(--main-content-width)) var(--sidebar-width);
  grid-template-rows: auto 1fr;
  gap: var(--block-space);
  justify-content: center;
  min-height: 100vh;
  padding-inline: var(--block-space);
}

#nav {
  grid-area: nav;
}

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

#sidebar-left {
  grid-area: sidebar-left;
}

#sidebar-right {
  grid-area: sidebar-right;
}

.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;
}