* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

/* App shell: Global Nav Header / #app (main) / Global Nav Footer stacked in a column, main
   growing to absorb any leftover height so the footer naturally sits at the viewport bottom on
   short screens, and the page scrolls normally once content exceeds the viewport. Content itself
   is never centered/stretched to fill this space — see #app below.

   padding-top is the viewport → Global Nav Header top inset — a page-shell/global-chrome
   concern, distinct from both the page vertical gap (.stage's padding-top, which governs
   header-bottom → content-top instead) and the header module's own internal spacing. Per
   updated Figma measurements it does NOT track the normal 64/48/48/32 page gap scale — it's a
   flat 16px below Tablet, 24px at Tablet and above, confirmed identical across Search Setup,
   Loading, and Search Confirmation. The header's own CSS (components.css) is untouched — this
   is spacing around the module, not inside it. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: 16px;
  background: var(--background);
  color: var(--text-primary);
  font-family: var(--font-family-base);
  line-height: 1.5;
}

@media (min-width: 768px) {
  body {
    padding-top: 24px;
  }
}

#app {
  flex: 1 0 auto;
}

h1, h2, h3, p {
  margin: 0 0 8px 0;
}

button {
  font: inherit;
  cursor: pointer;
}

.stage[hidden] {
  display: none;
}