/* ============================================================
   COMPOSITION.CSS — Every Layout Primitives (Layer C)
   Pure layout rules only. No colour, no typography.
   All 7 primitives + app-shell.
   ============================================================ */

/* ----------------------------------------------------------
   WRAPPER — centred max-width container
   ---------------------------------------------------------- */

.wrapper {
  max-width: 78rem;
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* ----------------------------------------------------------
   STACK — vertical spacing between direct children
   Custom property --stack-space overrides the default gap.
   ---------------------------------------------------------- */

.stack {
  display: flex;
  flex-direction: column;
}

.stack > * + * {
  margin-top: var(--stack-space, var(--space-4));
}

/* ----------------------------------------------------------
   CLUSTER — horizontal group that wraps
   --cluster-gap     controls horizontal+vertical gap
   --cluster-align   controls cross-axis alignment
   --cluster-justify controls main-axis distribution
   ---------------------------------------------------------- */

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, var(--space-3));
  align-items: var(--cluster-align, center);
  justify-content: var(--cluster-justify, flex-start);
}

/* ----------------------------------------------------------
   SWITCHER — row → column below a threshold, no @media
   --switcher-threshold  the width at which columns collapse
   --switcher-gap        gap between items
   ---------------------------------------------------------- */

.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--switcher-gap, var(--space-4));
}

.switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--switcher-threshold, 42rem) - 100%) * 999);
}

/* ----------------------------------------------------------
   GRID — auto-responsive columns, no @media
   --grid-min  minimum column width before auto-fit wraps
   --grid-gap  gap between cells
   ---------------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(var(--grid-min, 14rem), 100%), 1fr)
  );
  gap: var(--grid-gap, var(--space-4));
}

/* ----------------------------------------------------------
   SIDEBAR — main content + fixed-width side column
   :first-child is the narrow sidebar
   :last-child  is the main content area
   --sidebar-width       width of the sidebar column
   --sidebar-content-min minimum % for the main column
   --sidebar-gap         gap between sidebar and main
   ---------------------------------------------------------- */

.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sidebar-gap, var(--space-6));
}

.sidebar > :first-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: var(--sidebar-content-min, 55%);
}

.sidebar > :last-child {
  flex-grow: 1;
  flex-basis: var(--sidebar-width, 18rem);
}

/* ----------------------------------------------------------
   BOX — padded container unit
   --box-padding  internal spacing
   --box-bg       background colour token
   --box-border   border colour token
   --box-radius   corner radius token
   ---------------------------------------------------------- */

.box {
  padding: var(--box-padding, var(--space-5));
  background: var(--box-bg, var(--bg-surface));
  border: 1px solid var(--box-border, var(--border));
  border-radius: var(--box-radius, var(--radius-md));
}

/* ----------------------------------------------------------
   APP-SHELL — top-level grid: site-nav + main content
   Uses CSS grid areas to compose site-nav, optional top-bar,
   and main-content regions.
   ---------------------------------------------------------- */

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr;
  grid-template-areas:
    "nav"
    "main";
}

/* Mobile: site-nav moves to bottom as tab bar */
@media (max-width: 640px) {
  .app-shell {
    grid-template-rows: 1fr auto;
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "nav";
  }
}