/* Two-column layout: fixed sidebar (table of contents) + main content.
   Colors here echo toc.html's palette so the seam between the iframe
   and the rest of the page doesn't look like an accident. Adjust the
   custom properties to match your site's real palette/fonts. */

:root {
  --sidebar-width: 260px;
  --sidebar-border: #e2ddd2;
}

.page-layout {
  display: flex;
  align-items: flex-start;
}

.sidebar {
  position: sticky;
  top: 0;
  width: var(--sidebar-width);
  flex-shrink: 0;
  height: 100vh;
  border-right: 1px solid var(--sidebar-border);
}

.sidebar iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}

.page-content {
  flex: 1;
  min-width: 0;
  max-width: 780px;
  margin: 0 auto;
  padding: 2.5rem 3rem;
}

/* Small screens: drop the fixed sidebar to a normal block above the
   content, rather than squeezing both into a cramped row. */
@media (max-width: 760px) {
  .page-layout {
    display: block;
  }
  .sidebar {
    position: static;
    width: 100%;
    height: 260px;
    border-right: none;
    border-bottom: 1px solid var(--sidebar-border);
    margin-bottom: 1.5rem;
  }
  .page-content {
    padding: 1.5rem;
  }
}