/* Pinova portal design system: the few layout helpers pages compose with.
   Deliberately small: a page is built from components and these, not from
   a utility per property. */

@layer utilities {
  .stack { display: flex; flex-direction: column; gap: var(--gap, var(--space-4)); }
  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--space-2)); }
  .split { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gap, var(--space-3)); }
  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 16rem)), 1fr)); gap: var(--gap, var(--space-4)); }
  .grow { flex: 1; min-width: 0; }
  .gap-1 { --gap: var(--space-1); }
  .gap-2 { --gap: var(--space-2); }
  .gap-3 { --gap: var(--space-3); }
  .gap-4 { --gap: var(--space-4); }
  .gap-6 { --gap: var(--space-6); }
  .gap-8 { --gap: var(--space-8); }
  .grid-sm { --min: 11rem; }
  .grid-lg { --min: 22rem; }

  /* Caps on a column's width, so a form or a detail card does not stretch
     across a wide screen. */
  .w-sm { width: 100%; max-width: 24rem; }
  .w-md { width: 100%; max-width: 32rem; }
  .w-lg { width: 100%; max-width: 42rem; }
  .w-xl { width: 100%; max-width: 64rem; }

  .muted { color: var(--fg-muted); }
  .subtle { color: var(--fg-subtle); }
  .strong { font-weight: var(--weight-strong); }
  .num { font-variant-numeric: tabular-nums; }
  .mono { font-family: var(--font-mono); font-size: 0.92em; }
  .right { text-align: right; }
  .center { text-align: center; }
  .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .text-success { color: var(--on-success-soft); }
  .text-warning { color: var(--on-warning-soft); }
  .text-danger { color: var(--danger); }
  .text-info { color: var(--on-info-soft); }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}