/* Shared page-shell fixes. Loaded by every page after the design-system
   stylesheet. Cross-page layout rules live here, not in per-page helmets. */

/* The scrollbar only appears on pages tall enough to scroll, which shifts
   the whole layout horizontally on navigation. Reserve the gutter always. */
html {
  scrollbar-gutter: stable;
}

/* Every nav link gets the same box as the active one. Without this the
   active link's stretch + padding makes items shift between pages. */
nav.nav a {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  padding: 0 13.6px;
}

/* Hamburger — injected by site.js, shown at the mobile breakpoint. */
.nav-burger {
  display: none;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 34px;
  background: none;
  border: 1px solid var(--color-divider);
  color: var(--color-text);
  cursor: pointer;
}
.nav-burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
}

/* ---- Responsive. Breakpoint ladder shared with wow-ah-web:
   1024 / 900 / 768 / 640. The design pages carry inline styles, so
   overrides here need !important. ---- */

/* Architecture diagrams scroll horizontally instead of collapsing. */
@media (max-width: 900px) {
  .blueprint:has(> div[style*="28px 1fr"]) {
    overflow-x: auto;
  }
  div[style*="grid-template-columns:1fr 28px"],
  div[style*="grid-template-columns:1fr 26px"] {
    min-width: 860px;
  }
}

@media (max-width: 768px) {
  /* Nav collapses behind the hamburger. */
  .nav-burger { display: inline-flex; }
  nav.nav > div > a { display: none; }
  nav.nav.nav-open > div > a {
    display: inline-flex;
    flex-basis: 100%;
    padding: 10.2px 0;
  }

  /* Tighter page gutters. */
  nav.nav > div[style] { padding: 6.8px 16px !important; }
  main[style] { padding: 40px 16px 64px !important; }
  footer > div[style] { padding: 17px 16px !important; }

  /* Inline multi-column grids collapse — diagram grids excluded, they
     scroll (rule above). Stat tiles re-widen to 2-up below. */
  main div[style*="grid-template-columns"]:not([style*="1fr 28px"]):not([style*="1fr 26px"]) {
    grid-template-columns: 1fr !important;
  }
  main div[style*="repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Tables scroll inside their own box. */
  table.table {
    display: block;
    overflow-x: auto;
  }
}

@media (max-width: 640px) {
  /* The nowrap tagline overflows small screens. */
  nav.nav .nav-brand + .text-muted { display: none; }
  h1[style*="font-size:76px"] { font-size: 44px !important; }
}