/* docs/DESIGN_SYSTEM_V2.md Section 4/5/11: the Supporting tier's
   shared-border container.

   Fix (visual QA, Stage 8): the originally-planned fixed per-breakpoint
   column COUNT (docs/DESIGN_SYSTEM_V2.md Section 11's own table) reads
   fine for a densely-populated flat strip, but Worker Detail's
   sub-groups (3/2/2/1 items each -- signature move #3) and User
   Detail's single-tile strip left most of a fixed 6-column grid's
   tracks empty, visible directly in the live screenshot as a mostly-
   blank row. flex-wrap achieves the same "denser than the Secondary
   grid" intent (items pack tighter than a full-size stat tile) while
   sizing each row to however many items it actually has -- a real
   improvement over the plan's literal column-count table, not a
   deviation from its underlying density goal. */

.supporting-strip {
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-2);
  margin-bottom: var(--space-6);
}

.supporting-strip__group + .supporting-strip__group {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-border-subtle);
}

.supporting-strip__group-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  margin-bottom: var(--space-2);
  padding-inline: var(--space-1);
}

/* Every tile row -- both call shapes (flat mode wraps its children in
   exactly one .supporting-strip__row too, so this is the only layout
   rule needed). Each tile grows/shrinks around a 150px basis, wrapping
   to a new line once a row is full -- naturally denser than the
   Secondary tile-grid at every viewport width, and never leaves a
   fixed-count grid's empty trailing tracks when a row/group has few
   items. */
.supporting-strip__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}