/* ============================================================================
   ATOM Design System — Page shell
   ----------------------------------------------------------------------------
   Full-bleed: a 240px sticky sidebar pinned to the left edge and a main column
   that takes whatever is left, with a 76px sticky header spanning both. The
   source centres the shell inside a 1552px cap; this does not — main grows with
   the viewport, and the card grid answers by adding columns rather than by
   stretching each card (see .atom-card-grid in chrome.css).
   ========================================================================== */

.atom-layout {
  display: grid;
  grid-template-columns: var(--atom-sidebar-w) minmax(0, 1fr);
  grid-template-areas:
    "header   header"
    "sidebar  main";
  align-items: start;
  min-height: 100dvh;
  /* No overflow/contain here on purpose: either would make .atom-layout the
     containing block for the fixed-position mobile drawer. body already
     handles horizontal overflow. */
}

.atom-layout__header {
  grid-area: header;
  position: sticky;
  top: 0;
  z-index: 40;
  align-self: start;
}

.atom-layout__sidebar {
  grid-area: sidebar;
  position: sticky;
  top: var(--atom-header-h);
  align-self: start;
  height: calc(100dvh - var(--atom-header-h));
  min-width: 0;
}

.atom-layout__main {
  grid-area: main;
  width: 100%;
  min-width: 0;
  padding: var(--atom-x10) var(--atom-x4);
}

@media (min-width: 768px) {
  .atom-layout__main {
    padding: 64px var(--atom-x6);
  }
}

@media (min-width: 1280px) {
  .atom-layout__main {
    padding-inline: var(--atom-x8);
  }
}

/* ---------------------------------------------------------------------------
   Detail pages add a third column for the table of contents. Below 1280 the
   TOC drops out and main takes its width back. Both columns are fixed width,
   so main is the only one that grows.
   ------------------------------------------------------------------------ */
.atom-layout--doc {
  grid-template-columns: var(--atom-sidebar-w) minmax(0, 1fr);
  grid-template-areas:
    "header   header"
    "sidebar  main";
}

.atom-layout__toc {
  grid-area: toc;
  position: sticky;
  top: var(--atom-header-h);
  align-self: start;
  max-height: calc(100dvh - var(--atom-header-h));
  min-width: 0;
  display: none;
  padding: var(--atom-x12) var(--atom-x4) var(--atom-x2) 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (min-width: 1280px) {
  .atom-layout--doc {
    grid-template-columns:
      var(--atom-sidebar-w)
      minmax(0, 1fr)
      var(--atom-toc-w);
    grid-template-areas:
      "header   header  header"
      "sidebar  main    toc";
  }

  .atom-layout--doc .atom-layout__toc {
    display: block;
  }
}

/* ---------------------------------------------------------------------------
   Below 968px the sidebar collapses into a drawer opened from the header.
   ------------------------------------------------------------------------ */
@media (max-width: 967px) {
  .atom-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "header"
      "main";
  }

  .atom-layout__sidebar {
    position: fixed;
    top: var(--atom-header-h);
    left: 0;
    right: auto;
    bottom: auto;
    z-index: 45;
    width: min(300px, 82vw);
    height: calc(100dvh - var(--atom-header-h));
    background: var(--atom-bg-canvas);
    border-right: 1px solid var(--atom-border-subtle);
    transform: translateX(-100%);
    transition: transform var(--atom-duration-base) var(--atom-ease-out);
    visibility: hidden;
  }

  .atom-layout__sidebar[data-open="true"] {
    transform: translateX(0);
    visibility: visible;
    box-shadow: var(--atom-shadow-s3);
  }

  .atom-layout__scrim {
    position: fixed;
    top: var(--atom-header-h);
    left: 0;
    right: 0;
    height: calc(100dvh - var(--atom-header-h));
    z-index: 44;
    background: var(--atom-bg-scrim);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--atom-duration-base) var(--atom-ease-out);
  }

  .atom-layout__scrim[data-open="true"] {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (min-width: 968px) {
  .atom-layout__scrim {
    display: none;
  }
}