/* Page-level layout: header, main, footer, breadcrumbs. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-height);
  background: color-mix(in oklch, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
}

.site-header__inner {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--s-5);
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

.site-logo {
  font-weight: 700;
  font-size: var(--fs-0);
  letter-spacing: -0.01em;
  color: var(--fg-strong);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.site-logo:hover { color: var(--fg-strong); text-decoration: none; }
.site-logo__dot {
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-left: auto;
  flex-shrink: 0;
}

.site-nav__auth {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.site-nav__user {
  font-size: var(--fs--1);
  color: var(--fg-muted);
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-main {
  flex: 1;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--s-7) var(--s-5) var(--s-8);
}

/* Home page: tighter top spacing below sticky header. */
.site-main--home {
  padding-top: var(--s-5);
}

/* PDF viewer: less space above the iframe only */
.site-main:has(.library-viewer__frame-wrap) {
  padding-top: var(--s-3);
}

.site-footer {
  border-top: 1px solid var(--border);
  padding: var(--s-5) 0;
  color: var(--muted);
  font-size: var(--fs--1);
}
.site-footer__inner {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--s-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.site-footer__copy {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.site-footer__social {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
}
@media (max-width: 30rem) {
  .site-footer__inner { padding: 0 var(--s-3); gap: var(--s-2); }
  .site-footer__social { gap: 6px; }
}

/* Breadcrumbs — sit inline in the sticky header between the logo and the
 * theme toggle. `flex: 1` takes whatever space is available, `min-width: 0`
 * + `overflow: hidden` let long paths truncate instead of pushing the
 * theme toggle off-screen. Single-line layout (no wrapping) since the
 * header has a fixed height. */
.crumbs {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs--1);
  color: var(--muted);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.crumbs a {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
}
.crumbs a:hover { color: var(--link); }
.crumbs__sep { opacity: 0.5; flex-shrink: 0; }
.crumbs__current {
  color: var(--fg-strong);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* On narrow viewports, collapse all but the last crumb so the current page
 * stays visible alongside the logo + theme toggle. */
@media (max-width: 40rem) {
  .crumbs > :not(:nth-last-child(-n+2)) { display: none; }
}

/* Page heading area */
.page-head {
  margin-bottom: var(--s-6);
}
.page-head h1 { margin-bottom: var(--s-2); }
.page-head__lead { color: var(--muted); font-size: var(--fs-1); max-width: 60ch; }

/* Card grid */
.grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}

/* Note layout: left sticky TOC + content.
 *
 * On note pages the layout escapes the centered .site-main container so the
 * TOC sidebar can hug the left edge of the page (with a small breathing
 * gutter), while the prose column gets its OWN max-width so content doesn't
 * sprawl across a wide monitor. Mobile keeps the simple stacked layout.
 *
 * The :has() selector targets only pages that contain a .note-layout, so
 * other routes (home, course index) keep their centered .site-main. */
@media (min-width: 64rem) {
  .site-main:has(.note-layout) {
    max-width: none;
    padding-left: var(--s-6);
    padding-right: var(--s-6);
  }
}

.note-layout {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 64rem) {
  .note-layout {
    /* Sidebar fixed-width; content fills the rest but is capped further
     * down on .note-layout__content so it doesn't get absurdly wide. */
    grid-template-columns: var(--note-sidebar-width) minmax(0, 1fr);
    gap: var(--s-7);
  }
}
.note-layout__content {
  min-width: 0;
  overflow-x: visible; /* do not clip outside list markers (two-digit ol) */
  /* Cap the prose column on wide displays so the right edge stays balanced.
   * Inside this, the .prose breakout still gives display blocks the full
   * column width, while paragraphs are capped at --prose-measure. */
  max-width: 64rem;
}

.note-toc { display: none; }

@media (min-width: 64rem) {
  .note-toc {
    display: block;
    align-self: start;
    position: sticky;
    /* Sticky element is a proper scroll container: capped height + own scroll.
     * `max-height` doesn't cascade to a `%`-height child, so `overflow` MUST
     * live on the same element that has `max-height`. */
    top: calc(var(--header-height) + var(--s-5));
    max-height: calc(100vh - var(--header-height) - 2rem);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding-right: var(--s-3);
    border-left: 1px solid var(--border);
    padding-left: var(--s-4);
    /* Slim scrollbar so it doesn't compete with the content. */
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }
  .note-toc::-webkit-scrollbar { width: 8px; }
  .note-toc::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
  }
}

.note-toc__title {
  font-size: var(--fs--1);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: var(--s-3);
}

.note-toc nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.note-toc__item > a {
  display: block;
  padding: 0.3rem 0.6rem;
  color: var(--muted);
  font-size: var(--fs--1);
  font-family: var(--font-sans);
  line-height: 1.35;
  border-left: 2px solid transparent;
  margin-left: -1rem;
  padding-left: calc(0.6rem + 1rem);
  text-decoration: none;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.note-toc__item > a:hover {
  color: var(--fg-strong);
  background: var(--surface-2);
  text-decoration: none;
}
.note-toc__item > a.is-active {
  color: var(--accent);
  border-left-color: var(--accent);
  background: var(--accent-soft);
  font-weight: 550;
}
.note-toc__item--l3 > a {
  padding-left: calc(0.6rem + 1rem + var(--s-3));
  font-size: calc(var(--fs--1) - 0.02rem);
}

/* Nested sublists: collapsed by default, expand under the active h2. The JS
 * toggles `.is-expanded` on the <li> whose data-toc-group is currently the
 * active section. We use max-height (not display:none) so the chevron and
 * height transition smoothly. The selector specificity here (0,2,1) matches
 * `.note-toc nav ul` so it actually wins, and `display: block` overrides the
 * flex layout that the generic `nav ul` rule would otherwise apply. */
.note-toc .note-toc__sublist {
  display: block;
  max-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: max-height 220ms ease;
}
.note-toc .note-toc__item--has-children.is-expanded > .note-toc__sublist {
  /* Big enough for any reasonable section; transition still feels snappy. */
  max-height: 80rem;
}

/* Pause sublist animation while the window is being resized (toc.js toggles class). */
.note-toc.note-toc--resizing .note-toc__sublist {
  transition: none;
}

@media (max-width: 63.99rem) {
  .note-toc {
    display: none !important;
  }
  .note-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Tiny chevron hint on h2s that have children */
.note-toc__item--has-children > a::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 0.4em;
  vertical-align: 0.1em;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid currentColor;
  opacity: 0.6;
  transition: transform 180ms ease;
}
.note-toc__item--has-children.is-expanded > a::before {
  transform: rotate(90deg);
}

@media (max-width: 40rem) {
  .site-main { padding: var(--s-5) var(--s-4) var(--s-7); }
  .site-header__inner { padding: 0 var(--s-4); gap: var(--s-3); }
}