/* Site spacing public window. See docs/site-layout-contract.md.
   Shell = external rhythm; patterns = internal insets; features = content layout. */
:root {
  --site-space-xs: .25rem;
  --site-space-sm: .5rem;
  --site-space-md: .75rem;
  --site-space-lg: 1rem;
  --site-space-xl: 1.5rem;
  --site-block-gap: 1.25rem;
  --site-card-inset: 1rem;
  --site-panel-inset: clamp(1rem, 2vw, 1.5rem);
  --site-reading-inset: clamp(1rem, 2vw, 1.5rem);
  --site-auth-inset: 2.5rem;
}

/* Never assign an inset or border through a shell descendant selector. */
:where(.site-content) > :where(* + *) { margin-block-start: var(--site-block-gap); }

.site-section {
  padding-block-start: var(--site-space-lg);
  border-block-start: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}

.site-panel { padding: var(--site-panel-inset); }
.site-card, .site-card-body { padding: var(--site-card-inset); }
.site-result-card { padding: var(--site-space-md); }
.site-media-card { padding: 0; overflow: hidden; }
.site-reading-panel { padding: var(--site-reading-inset); }
.site-auth-panel { padding: var(--site-auth-inset); }

/* Only immediate children participate; nested content retains its own rhythm. */
.site-stack { display: grid; gap: var(--site-space-md); }
.site-stack > :where(*) { margin-block: 0; min-width: 0; }
.site-panel-header { display: flex; align-items: center; justify-content: space-between; gap: var(--site-space-md); }
.site-panel-header > :where(h1, h2, h3, p) { margin: 0; }
.site-form-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--site-space-sm); }
.site-form-row > :where(input, button) { min-width: 0; }

@media (max-width: 540px) {
  :root { --site-auth-inset: 1.5rem; }
  .site-panel-header { align-items: flex-start; flex-direction: column; }
  .site-form-row { grid-template-columns: 1fr; }
}