/* ============================================================
   LAYOUT PRIMITIVES
   Composition-level building blocks. Token-driven gaps so the
   spacing recipes (docs/spacing.md) can be applied as classes
   instead of re-decided per-screen.

   Five primitives:
     .u-stack       vertical flex, gap-driven
     .u-cluster     horizontal wrapping flex, gap-driven
     .u-row         horizontal non-wrapping flex (use sparingly)
     .u-grid        responsive grid, gap-driven
     .u-page        page container (padding + max-width)

   Plus two organism scaffolds (.u-page-header, .u-toolbar) used
   to anchor pages in the manager world.

   The base primitives read --u-gap (with a token fallback), so an
   unmodified .u-stack / .u-cluster / .u-row / .u-grid can still be
   tweaked inline via `style="--u-gap: var(--u-space-5)"`. The step /
   role modifiers (.u-stack--4, .u-stack--block, …) set `gap` directly
   so they track the token scale without declaring design-system
   tokens under component selectors.
   ============================================================ */


/* ============================================================
   STACK — vertical sibling gap
   ============================================================ */
.u-stack {
  display: flex;
  flex-direction: column;
  gap: var(--u-gap, var(--u-space-4));
  min-width: 0;
}

.u-stack--1  { gap: var(--u-space-1); }
.u-stack--2  { gap: var(--u-space-2); }
.u-stack--3  { gap: var(--u-space-3); }
.u-stack--4  { gap: var(--u-space-4); }
.u-stack--5  { gap: var(--u-space-5); }
.u-stack--6  { gap: var(--u-space-6); }
.u-stack--8  { gap: var(--u-space-8); }
.u-stack--10 { gap: var(--u-space-10); }
.u-stack--12 { gap: var(--u-space-12); }
.u-stack--16 { gap: var(--u-space-16); }

/* Named density roles — pick by what the gap is FOR, not by pixels.
   Resolve to world-specific defaults when wrapped in .urbino-cit.
   Density-mode attribute selectors ([data-density]) also override
   the consumed tokens — those wins over these defaults inside their
   scope. See tokens/density.css + docs/spacing.md.

   Block / section gaps consume the canonical --u-block-gap and
   --u-section-gap so density modes propagate automatically. */
.u-stack--data    { gap: 0;                              }  /* border-driven separation */
.u-stack--tight   { gap: var(--u-space-2);              }   /* manager Work mode block gap */
.u-stack--block   { gap: var(--u-block-gap);            }
.u-stack--section { gap: var(--u-section-gap);          }
.u-stack--page    { gap: var(--u-space-8);              }   /* manager Canvas page-level */
.urbino-cit .u-stack--tight   { gap: var(--u-space-3); }
.urbino-cit .u-stack--page    { gap: var(--u-space-10); }


/* ============================================================
   CLUSTER — horizontal wrapping group (buttons, chips, meta)
   ============================================================ */
.u-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--u-gap, var(--u-space-2));
  min-width: 0;
}

.u-cluster--1  { gap: var(--u-space-1); }
.u-cluster--2  { gap: var(--u-space-2); }
.u-cluster--3  { gap: var(--u-space-3); }
.u-cluster--4  { gap: var(--u-space-4); }
.u-cluster--5  { gap: var(--u-space-5); }
.u-cluster--6  { gap: var(--u-space-6); }

/* Named density roles */
.u-cluster--tight    { gap: var(--u-space-1); }   /* icon-only button group, action-cell */
.u-cluster--buttons  { gap: var(--u-space-2); }   /* manager labeled button row */
.u-cluster--chips    { gap: var(--u-space-2); }   /* chip/tag row */
.u-cluster--meta     { gap: var(--u-space-3); }   /* inline metadata: category · address · time */
.u-cluster--toolbar  { gap: var(--u-space-4); }   /* between toolbar groups */
.urbino-cit .u-cluster--buttons { gap: var(--u-space-3); }

/* Alignment modifiers */
.u-cluster--start    { justify-content: flex-start; }
.u-cluster--center   { justify-content: center; }
.u-cluster--end      { justify-content: flex-end; }
.u-cluster--between  { justify-content: space-between; }
.u-cluster--baseline { align-items: baseline; }
.u-cluster--top      { align-items: flex-start; }


/* ============================================================
   ROW — horizontal non-wrapping flex
   For when wrap would break meaning (e.g. table cells).
   Prefer .u-cluster otherwise.
   ============================================================ */
.u-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--u-gap, var(--u-space-3));
  min-width: 0;
}

.u-row--1 { gap: var(--u-space-1); }
.u-row--2 { gap: var(--u-space-2); }
.u-row--3 { gap: var(--u-space-3); }
.u-row--4 { gap: var(--u-space-4); }
.u-row--5 { gap: var(--u-space-5); }
.u-row--6 { gap: var(--u-space-6); }

.u-row--baseline { align-items: baseline; }
.u-row--top      { align-items: flex-start; }

/* Spacer — pushes subsequent children to the end */
.u-row__spacer,
.u-cluster__spacer { flex: 1 1 auto; min-width: 0; }


/* ============================================================
   GRID — responsive equal-column grid
   ============================================================ */
.u-grid {
  display: grid;
  gap: var(--u-gap, var(--u-space-4));
  min-width: 0;
}

.u-grid--2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.u-grid--3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.u-grid--4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.u-grid--6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Auto-fit cards: each child wants at least 280px, otherwise wraps. */
.u-grid--auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.u-grid--gap-2  { gap: var(--u-space-2); }
.u-grid--gap-3  { gap: var(--u-space-3); }
.u-grid--gap-4  { gap: var(--u-space-4); }
.u-grid--gap-5  { gap: var(--u-space-5); }
.u-grid--gap-6  { gap: var(--u-space-6); }
.u-grid--gap-8  { gap: var(--u-space-8); }


/* ============================================================
   PAGE — outer page container
   Token-driven padding via --u-page-px / --u-page-py.
   ============================================================ */
.u-page {
  width: 100%;
  margin-inline: auto;
  padding: var(--u-page-py) var(--u-page-px);
  max-width: var(--u-page-max-w);
  box-sizing: border-box;
}

/* World shortcuts — for pages that don't have .urbino-mgr / .urbino-cit on a parent */
.u-page--mgr {
  /* Defaults already match manager :root tokens.
     Listed for symmetry with --cit / --mgr-dense variants. */
}
.u-page--mgr-dense {
  padding: var(--u-space-4) var(--u-space-5);
}
.u-page--cit-mobile {
  padding: var(--u-space-4);
  max-width: 100%;
}
.u-page--cit-web {
  padding: var(--u-space-10) var(--u-space-8);
  max-width: 1120px;
}
@media (min-width: 1280px) {
  .u-page--cit-web {
    padding: var(--u-space-10) var(--u-space-12);
  }
}


/* ============================================================
   PAGE HEADER — title bar between top bar and toolbar / canvas
   Header density. Generous breathing room around the title.
   ============================================================ */
.u-page-header {
  display: flex;
  flex-direction: column;
  gap: var(--u-space-2);
  padding: var(--u-space-4) var(--u-space-6);
  border-bottom: 1px solid var(--u-border);
  background: var(--u-surface);
}
.u-page-header__row {
  display: flex;
  align-items: center;
  gap: var(--u-space-3);
  min-width: 0;
}
.u-page-header__row > .u-page-header__spacer { flex: 1 1 auto; }
.u-page-header__title {
  font-family: var(--u-font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--u-fg-1);
  margin: 0;
}
.u-page-header__subtitle {
  font-size: 13px;
  color: var(--u-fg-2);
  line-height: 1.5;
  margin: 0;
}

.u-page-header--cit {
  padding: var(--u-space-8) var(--u-space-8) var(--u-space-6);
  gap: var(--u-space-3);
}
.u-page-header--cit .u-page-header__title { font-size: 28px; }


/* ============================================================
   TOOLBAR — action / filter bar above a canvas region
   Work density. Tight, 56px tall.
   ============================================================ */
.u-toolbar {
  display: flex;
  align-items: center;
  gap: var(--u-space-4);
  padding: var(--u-space-3) var(--u-space-6);
  min-height: 56px;
  background: var(--u-surface);
  border-bottom: 1px solid var(--u-border);
  box-sizing: border-box;
}
.u-toolbar__group {
  display: flex;
  align-items: center;
  gap: var(--u-space-2);
  min-width: 0;
}
.u-toolbar__spacer { flex: 1 1 auto; }

.u-toolbar--flush  { padding-inline: 0; }
.u-toolbar--inset  { padding-inline: var(--u-space-5); }
.u-toolbar--bare   { background: transparent; border-bottom: none; }


/* ============================================================
   FILLER — push to end inside a stack
   ============================================================ */
.u-stack__spacer { flex: 1 1 auto; min-height: 0; }