body {
  margin: 0;
  font-family: var(--pmx-font-body);
  background: var(--pmx-color-bg);
  color: var(--pmx-color-fg);
  font-size: var(--pmx-prose-size);
}

:root {
  --pmx-viewport-gutter-block-start: 2rem;
}

.site-workspace { display: flex; align-items: flex-start; }
.site-reading-pane { flex: 1; min-width: 0; }

.site-shell {
  container: site / inline-size;
  width: min(100% - 2rem, 78rem);
  margin-inline: auto;
}

.site-header {
  display: flex;
  padding-block: 0.75rem;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.25;
  background: color-mix(in oklch, var(--pmx-color-bg) 92%, transparent);
  backdrop-filter: blur(0.75rem);

  .site-brand {
    color: inherit;
    font-family: var(--pmx-font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    flex: none;

    &:focus-visible {
      outline: 2px solid var(--pmx-color-focus);
      outline-offset: 3px;
      border-radius: var(--pmx-radius-sm);
    }
  }

  > .pmx-nav .pmx-nav-list {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;

    .pmx-nav-link {
      display: flex;
      align-items: center;
      min-height: 2.75rem;
      box-sizing: border-box;
      padding: 0.5rem 0.75rem;
      border-radius: var(--pmx-radius-md);
      color: var(--pmx-color-muted);
      text-decoration: none;
      white-space: nowrap;

      &:hover {
        color: var(--pmx-color-fg);
        background: var(--pmx-color-surface);
      }

      &[data-pmx-active] {
        color: var(--pmx-color-fg);
        background: var(--pmx-color-surface);
      }
    }
  }
}

.site-frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  padding-block: 2rem 5rem;
}

.site-frame > .site-main {
  grid-column: 1;
  grid-row: 1;
}
.site-frame > .site-aside {
  grid-column: 2;
  grid-row: 1;
}

.site-main {
  min-width: 0;
}

.pmx-scheme-toggle {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 1000;
}

.site-main > .pmx-breadcrumbs {
  max-width: var(--pmx-document-measure);
  margin-inline: auto;
  padding-inline: max(1rem, var(--pmx-prose-gutter));
}

.pmx-breadcrumbs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.4rem;
  margin: 0;
  padding: 0;
  color: color-mix(in oklch, currentColor 68%, transparent);
  font-size: 0.9rem;
  list-style: none;
}

.pmx-breadcrumbs-item {
  display: inline-flex;
  align-items: baseline;
  min-width: 0;
  overflow-wrap: anywhere;
}

.pmx-breadcrumbs-item + .pmx-breadcrumbs-item::before {
  content: "/";
  flex: none;
  margin-inline-end: 0.4rem;
  opacity: 0.55;
}

.pmx-breadcrumbs-link {
  color: inherit;
}

.site-aside {
  --pmx-toc-layout: sidebar;
  position: sticky;
  top: var(--pmx-sticky-block-start);
}

/* Slides own the viewport: the layout steps aside while the Player presents. */
html[data-pmx-play-mode="presentation"] {
  .site-shell {
    width: 100%;
  }

  .site-frame {
    display: block;
    padding: 0;
  }

  .site-header,
  .site-aside,
  .pmx-breadcrumbs-list {
    display: none;
  }
}

.auth-session form,
.auth-session button {
  margin: 0;
}

html:not([data-pmx-play-active]):has(.site-aside .pmx-toc[data-pmx-toc-layout="inline"]) {
  --pmx-source-header-inset: calc(var(--pmx-viewport-inset-block-start) + 46px);
  scroll-padding-block-start: calc(
    var(--pmx-scroll-offset-block-start) + 46px + 1rem
  );
}

@container site (max-width: 64rem) {
  .site-frame {
    display: block;
  }

  .site-aside {
    --pmx-toc-layout: inline;
    position: sticky;
    /* Dock mobile navigation directly below the header, without the prose gutter. */
    top: var(--pmx-viewport-inset-block-start);
    z-index: 5;
    margin: 0 0 1.5rem;
    padding: 0;
    border: 0;
  }
}

@container site (max-width: 52rem) {
  /* The site shell already supplies the mobile reading gutter. */
  .site-main > :is(.pmx-document, .pmx-breadcrumbs) {
    padding-inline: 0;
  }

  .site-header {
    gap: 0.5rem;
    padding-block: 0.5rem;
  }

  /* One header row on phones: the navigation moves into the menu. */
  .site-header > .pmx-nav {
    display: none;
  }

  .site-frame {
    display: block;
    padding-top: 1.5rem;
  }
}

/* The phone menu: a header button that opens the site navigation below it. */
.site-menu {
  display: none;
  flex: none;

  > summary {
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border: 1px solid var(--pmx-color-border-strong);
    border-radius: var(--pmx-radius-full);
    color: var(--pmx-color-fg);
    cursor: pointer;
    list-style: none;

    &::-webkit-details-marker {
      display: none;
    }

    &:focus-visible {
      outline: 2px solid var(--pmx-color-focus);
      outline-offset: 2px;
    }
  }

  &[open] > summary {
    color: var(--pmx-color-accent);
    border-color: var(--pmx-color-accent);
  }
}

.site-menu-panel {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  max-block-size: calc(100dvh - 4.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem;
  border-block-end: 1px solid var(--pmx-color-border);
  background: var(--pmx-color-bg);
  box-shadow: var(--pmx-shadow-lg);
  font-size: 1rem;

  > .pmx-nav:first-child .pmx-nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0 0 0.75rem;
    padding: 0 0 0.75rem;
    list-style: none;
    border-block-end: 1px solid var(--pmx-color-border);
  }

  > .pmx-nav:first-child .pmx-nav-link {
    display: flex;
    align-items: center;
    min-block-size: 2.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--pmx-radius-md);
    color: var(--pmx-color-muted);
    text-decoration: none;

    &[data-pmx-active] {
      color: var(--pmx-color-accent);
      background: color-mix(in oklch, var(--pmx-color-accent) 10%, transparent);
    }
  }

  > .pmx-nav:only-child .pmx-nav-list {
    margin: 0;
    padding: 0;
    border: 0;
  }
}

@container site (max-width: 52rem) {
  .site-menu {
    display: block;
  }
}

/* Keep search distinct from the primary navigation. */
.site-header .pmx-search {
  margin-inline-start: auto;
  flex: none;
}

body {
  -webkit-font-smoothing: antialiased;
}

.site-header {
  border-bottom: 1px solid var(--pmx-color-border);
}

.site-brand img {
  display: block;
  width: 180px;
  height: auto;
  aspect-ratio: 3625 / 625;
}
.site-brand .brand-dark {
  display: none;
}
:root[data-pmx-scheme="dark"] .brand-light {
  display: none;
}
:root[data-pmx-scheme="dark"] .brand-dark {
  display: block;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-pmx-scheme="light"]) .brand-light {
    display: none;
  }
  :root:not([data-pmx-scheme="light"]) .brand-dark {
    display: block;
  }
}

.site-main :is(h1, h2, h3) {
  text-wrap: balance;
}
:root[data-pmx-theme="synthwave"] .site-main h1 {
  letter-spacing: -0.035em;
}
:root[data-pmx-theme="synthwave"]
  .site-header
  .pmx-nav-link[data-pmx-active] {
  color: var(--pmx-color-accent);
  background: color-mix(in oklch, var(--pmx-color-accent) 10%, transparent);
}

@container site (max-width: 40rem) {
  .site-brand img {
    width: 160px;
  }
}

:root[data-pmx-theme="synthwave"] .site-header {
  border-image: linear-gradient(90deg, #6755e8, #d560ca, #f6a259) 1;
}