/* Shell/grid structure. Breakpoints and column counts match
   docs/ARCHITECTURE.md Section 12 and docs/DESIGN_SYSTEM.md Section
   11's table exactly. Mobile-first: base rules are the <480px case,
   each @media rule below adds/overrides for a wider viewport. */

.page-container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* Generic grid for stat tiles / cards -- individual components
   (Milestone: Shared components) place their content inside a cell,
   this only controls column count and gap per breakpoint. */
.tile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

/* Phase G.3, docs/DESIGN_SYSTEM_V2.md Section 4: Secondary-tier tiles
   use the SAME column-count breakpoints as .tile-grid (below) but a
   reduced gap, reflecting the density principle -- Secondary tiles
   read as a tighter group than the general card grid Block Progress
   Panel still uses (bare .tile-grid, deliberately untouched --
   docs/DESIGN_SYSTEM_V2.md Section 0's own grounding note: "no
   existing functionality changed"). A modifier class, not an edit to
   .tile-grid itself, specifically so Block Progress Panel's 9 shared
   call sites are unaffected. */
.tile-grid--secondary {
  gap: var(--space-2);
}

/* Two-column layout for a chart alongside a side panel (e.g. the
   Dashboard Overview wireframe, docs/ARCHITECTURE.md Section 22) --
   single column until Desktop. */
.split-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

/* Phase E Milestone 27, Code Review finding: a vertical stack of two
   full Cards with no gap between them (users.js's combined Users
   table + Workers-matches panel, shown together when a search query
   matches both) -- without this, base.css's universal margin reset
   left them touching, borders flush against each other as if they
   were one box. */
.users-page__results {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Phase E Milestone 19: without this, a grid item's default
   min-width:auto means it won't shrink below its content's
   min-content size -- a DataTable's own overflow-x:auto (data-
   table.css) can't compensate because it sits below the actual grid
   item, and the min-content-zeroing effect of overflow:auto only
   applies at the item's own level, not a descendant's. This let a
   wide table force the whole 1fr track (and the page) wider than the
   viewport at <1024px, single-column widths.

   Applies to BOTH split-layout children, not just the table-bearing
   one -- .card itself has overflow:visible (card.css), so this is the
   only floor-removal point available. A future child with its own
   unbreakable wide content (a long value with no overflow-wrap, an
   unwrapped badge row) would need its own overflow handling, the same
   way data-table-wrap and base.css's heading overflow-wrap already
   provide it for today's two children -- this rule alone doesn't
   guarantee that for content that doesn't exist yet. */
.split-layout > * {
  min-inline-size: 0;
}

/* Small tablet: 480-768px */
@media (min-width: 480px) {
  .page-container {
    padding-inline: var(--space-5);
  }

  .tile-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tablet: 768-1024px. .tile-grid repeats the same 2-column value set
   at 480px -- docs/DESIGN_SYSTEM.md Section 11 specifies 2 columns
   for both breakpoints (stat tiles pairing 2-up at small tablet vs.
   card/tile grids at tablet), so this is intentional, not copy-paste
   redundancy. */
@media (min-width: 768px) {
  .page-container {
    padding-inline: var(--space-6);
  }

  .tile-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop: 1024-1280px */
@media (min-width: 1024px) {
  .tile-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .tile-grid--wide {
    grid-template-columns: repeat(4, 1fr);
  }

  .split-layout {
    grid-template-columns: 2fr 1fr;
  }
}

/* Wide desktop: >=1280px -- same column structure as Desktop, but the
   page stops stretching edge-to-edge (docs/DESIGN_SYSTEM.md Section
   11). */
@media (min-width: 1280px) {
  .page-container {
    max-width: 1280px;
  }
}