:host {
  display: block;
  min-block-size: 100dvh;
}

.app-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-block-size: 100dvh;
  background: var(--ar-bg);
}

.app-shell__content {
  display: grid;
  grid-template-columns: minmax(11rem, 13rem) minmax(0, 1fr) minmax(15rem, 20rem);
  min-block-size: 0;
}

.app-shell__main {
  min-inline-size: 0;
  min-block-size: 0;
  padding: var(--ar-space-5);
  border-inline: 1px solid var(--ar-border);
  background:
    linear-gradient(115deg, rgb(255 255 255 / 0.018), transparent 28%), var(--ar-panel-muted);
}

@media (width < 900px) {
  .app-shell__content {
    grid-template:
      'navigation main' minmax(0, 1fr)
      'context context' auto / minmax(8.5rem, 10rem) minmax(0, 1fr);
  }

  app-side-navigation {
    grid-area: navigation;
  }

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

  app-context-panel {
    display: block;
    grid-area: context;
  }
}

@media (width < 620px) {
  .app-shell__content {
    display: block;
  }

  .app-shell__main {
    min-block-size: 20rem;
    border-inline: 0;
  }
}
