html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--app-background, Canvas);
  color: var(--md-sys-color-on-background, CanvasText);
  color-scheme: light dark;
  transition: none !important;
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}

* {
  box-sizing: border-box;
}

body.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "footer";
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--app-background);
  color: var(--promat-fg);
  overflow-x: visible;
}

#top-app-bar {
  grid-area: header;
  position: sticky;
  top: 0;
  z-index: var(--promat-topbar-z-index);
}

#navigation-drawer,
#main-content,
#site-footer {
  min-width: 0;
}

#main-content,
main.site-main,
.site-main {
  grid-area: main;
  width: 100%;
}

.pm-content-wrapper,
.md3-content-wrapper {
  min-height: calc(100vh - var(--promat-topbar-height));
  width: min(100%, var(--pm-layout-shell-max-width-current));
  max-width: var(--pm-layout-shell-max-width-current);
  margin-inline: auto;
  padding: var(--pm-shell-block-start-current) var(--promat-shell-inline-padding) var(--pm-space-xl);
  min-width: 0;
}

body.app-shell--inner {
  --pm-layout-panel-width-current: var(--pm-inner-shell-panel-width);
  --pm-layout-content-width-current: var(--pm-inner-shell-content-width);
  --pm-layout-shell-gap-current: var(--pm-inner-shell-gap);
  --pm-layout-shell-max-width-current: var(--pm-inner-shell-max-width);
  --pm-shell-block-start-current: var(--pm-shell-block-start-inner);
}

#site-footer {
  grid-area: footer;
}

body.app-shell.login-open,
body.overflow-hidden {
  overflow: hidden;
}

body[data-hydrating] :focus,
body[data-hydrating] :focus-visible {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator {
  display: block;
}

main.site-main:focus,
.site-main:focus,
h1:focus[tabindex="-1"],
h2:focus[tabindex="-1"],
h3:focus[tabindex="-1"],
h4:focus[tabindex="-1"],
h5:focus[tabindex="-1"],
h6:focus[tabindex="-1"] {
  outline: none;
}

@media (min-width: 980px) {
  .pm-content-wrapper,
  .md3-content-wrapper {
    display: grid;
    grid-template-columns: minmax(14rem, var(--pm-layout-panel-width-current)) minmax(0, var(--pm-layout-content-width-current));
    column-gap: var(--pm-layout-shell-gap-current);
    align-items: start;
    justify-content: center;
  }

  #navigation-drawer {
    min-width: 0;
  }

  body.app-shell--inner #navigation-drawer {
    align-self: stretch;
    padding-top: var(--pm-inner-shell-sidebar-offset);
    padding-inline-end: var(--pm-inner-shell-divider-gap);
    border-inline-end: var(--pm-shell-divider-width) solid var(--pm-shell-divider-color);
  }

  .promat-main-column {
    min-width: 0;
  }

  body.app-shell.app-shell--panel-hidden {
    grid-template-columns: minmax(0, 1fr);
  }

  body.app-shell.app-shell--panel-hidden #navigation-drawer {
    display: none;
  }

  body.app-shell.app-shell--panel-hidden .pm-content-wrapper,
  body.app-shell.app-shell--panel-hidden .md3-content-wrapper {
    grid-template-columns: minmax(0, var(--pm-layout-content-width-current));
    justify-content: center;
  }

  body.app-shell.page-teaching #navigation-drawer {
    display: none;
  }

  body.app-shell.page-teaching .pm-content-wrapper,
  body.app-shell.page-teaching .md3-content-wrapper {
    grid-template-columns: minmax(0, var(--pm-layout-content-width-current));
    justify-content: center;
  }

  body.app-shell--inner .promat-panel--standard .promat-panel__inner {
    top: calc(var(--promat-topbar-height) + var(--pm-shell-block-start-current) + var(--pm-inner-shell-sidebar-offset));
  }
}

@media (max-width: 979px) {
  .pm-content-wrapper,
  .md3-content-wrapper {
    width: min(100%, calc(var(--pm-layout-content-width-current) + (2 * var(--promat-shell-inline-padding))));
    max-width: calc(var(--pm-layout-content-width-current) + (2 * var(--promat-shell-inline-padding)));
    padding-inline: var(--promat-shell-inline-padding);
  }

  body.app-shell.login-open,
  body.overflow-hidden {
    position: fixed;
    top: var(--scroll-lock-offset, 0);
    left: 0;
    right: 0;
  }

  body.app-shell.app-shell--panel-hidden #navigation-drawer {
    display: none;
  }
}