@view-transition {
  navigation: auto;
}

@layer overrides {
  html {
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    background: hsl(45 30 var(--lightness-2));
  }

  html,
  body {
    margin: 0;
    padding: 0;
    min-height: 100%;
  }

  body {
    min-height: 100vh;
  }

  body>header {
    view-transition-name: header;
    height: 4rem;
    position: sticky;
    top: 0;
    z-index: 2;
    backdrop-filter: blur(var(--scale-4));
    background-color: hsl(45 30 var(--lightness-2) / 85%);
  }

  body>header {
    container-type: scroll-state;

    &>nav {
      view-transition-name: header-nav;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100%;
      padding-inline: var(--scale-6);
      transition: box-shadow 0.25s ease-in-out;

      @container scroll-state(stuck: top) {
        box-shadow: 0 var(--scale-1) var(--scale-5) hsl(from var(--shadow-color) h s l / 0.3);
      }

      @supports not (container-type: scroll-state) {
        box-shadow: 0 var(--scale-1) var(--scale-5) hsl(from var(--shadow-color) h s l / 0.2);
      }
    }
  }

  a.home {
    color: hsl(var(--accent-hue) var(--accent-saturation) var(--foreground-lightness));
    font-size: calc(var(--base) * pow(var(--phi), var(--heading-step)));
    text-decoration: none;
    font-weight: 500;
    display: flex;
    align-items: center;
    column-gap: var(--scale-3);
  }

  #search-dialog>header input {
    margin-block-start: var(--scale-2);
  }

  @media (min-width: 850px) {
    .only-narrow {
      display: none;
    }
  }

  @media (max-width: 850px) {
    .only-wide {
      display: none;
    }
  }

  body>main {
    margin-inline: auto;
    width: fit-content;
    max-width: calc(100vw - 2rem);
  }

  body>main.note {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: minmax(0, 47rem) 14rem;
    grid-template-areas:
      "header toc"
      "body toc";
    gap: 0 2rem;
    min-height: calc(90vh - 4rem);
    padding-inline: var(--scale-8) 0;
    margin-block: var(--scale-4)var(--scale-6);
    background: hsl(var(--neutral-hue) var(--neutral-saturation) var(--background-lightness));
    border-radius: var(--scale-6);
    box-shadow: var(--scale-4) var(--scale-4) var(--scale-8) 0 hsl(from var(--shadow-color) h s l / 0.1),
      calc(var(--scale-4) * -1) var(--scale-4) var(--scale-8) 0 hsl(from var(--shadow-color) h s l / 0.1);
    border: var(--border-width) solid var(--border-color, hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-2)));
  }

  body>main>aside.menu {
    grid-area: menu;
  }

  body>main>aside.toc {
    grid-area: toc;
  }

  body>main>aside.menu,
  body>main>aside.toc {
    padding: 0;
  }

  body>main>aside.menu>nav,
  body>main>aside.toc>nav {
    margin-block-start: var(--scale-7);
    padding-block: var(--scale-4);
    position: sticky;
    top: calc(4rem + var(--scale-7));
    max-height: calc(100vh - 4rem - var(--scale-7));
    overflow-y: auto;
  }

  /* The authentication page also uses a main element, but is intentionally a
   centered card rather than part of the notes grid. */
  body>main.auth {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    display: flex;
    padding-inline: var(--scale-5);

    &>article {
      width: var(--scale-13);
    }
  }

  .header-items {
    display: flex;
    gap: var(--scale-4);
  }

  body>main>hgroup {
    view-transition-name: document-header;
    grid-area: header;
    margin-block-start: var(--scale-6);
  }

  body>main>[role="document"] {
    view-transition-name: document;
    grid-area: body;
    min-width: 0;
    padding-block: var(--scale-6) var(--scale-7);
  }

  /* Keep in-document links clear of the sticky header when a TOC item is
   selected. The anchors are generated inside the markdown wrapper. */
  body>main>[role="document"] .markdown-content [id] {
    scroll-margin-block-start: calc(4rem + var(--scale-5));
  }

  body>main>hgroup>h1 {
    font-size: calc(var(--base) * pow(var(--phi), var(--heading-step) * 7));
  }

  .note-date {
    color: hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-7));
  }

  .note-metadata {
    display: flex;
    gap: var(--scale-5);
    align-items: center;
  }

  .tags {
    display: inline-flex;
    gap: var(--scale-3);
  }

  .search-results {
    min-width: min(30rem, calc(100vw - 2rem));
    margin: 0;
    padding: 0;
    padding-block: var(--scale-3);
    overflow-y: auto;
    overflow-x: hidden;
  }

  .search-result {
    list-style: none;
    margin: 0;
    padding: 0;

    &>a {
      display: flex;
      gap: var(--scale-5);
      padding: var(--scale-4) var(--scale-5);
      color: hsl(var(--neutral-hue) var(--neutral-saturation) var(--foreground-lightness));
      text-decoration: none;
      align-items: center;
      flex-wrap: wrap;

      &:active,
      &:focus-visible {
        background: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-2));
      }

      &:hover {
        background: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-1));
      }
    }
  }

  .markdown-content {
    overflow-wrap: anywhere;
  }

  .markdown-content img {
    max-width: 100%;
    height: auto;
  }

  .aside-label {
    color: hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-7));
    margin-block-end: var(--scale-3);
  }

  .note-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--scale-2);
  }

  .no-results {
    color: hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-7));
  }

  @media (max-width: 70rem) {
    html {
      background: hsl(var(--neutral-hue) var(--neutral-saturation) var(--background-lightness));
    }

    body>header {
      background: hsl(var(--neutral-hue) var(--neutral-saturation) var(--background-lightness) / 85%);
    }

    body>main,
    body>main.note {
      display: block;
      max-width: 47rem;
      width: auto;
      border-radius: none;
      box-shadow: none;
      border: none;
    }

    body>main.note {
      background: transparent;
    }

    body>main>hgroup {
      margin-block-start: var(--scale-3);
    }

    body>main>aside.menu {
      display: none;
    }

    body>main>aside.menu>nav,
    body>main>aside.toc>nav {
      overflow: visible;
      position: static;
      max-height: max-content;
    }

    body>main>[role="document"] {
      padding-block-start: 0;
    }
  }

  @media (max-width: 50rem) {
    body>header>nav {
      padding-inline: 1rem;
    }

    body>main {
      max-width: 100vw;
      padding-inline: 1rem;
    }

  }
}