/* Helpers: one adjustment each, for text inside a component or a layout
   piece that the component doesn't decide. They're the last layer, so one
   beats the component it sits on. Kept few on purpose: a look that repeats
   is a component (STYLE.md), not a row of helpers. */
@layer helpers {
  /* Text color, by role: ink for what matters, body for running text, muted
     for what's secondary (dates, counts, help), faint for what's barely
     there (placeholders, separators); red for what went wrong. */
  .text-ink { color: var(--foreground); }
  .text-body { color: var(--foreground); }
  .text-muted { color: var(--muted-foreground); }
  .text-faint { color: color-mix(in oklch, var(--muted-foreground) 70%, transparent); }
  .text-accent { color: var(--primary); }
  .text-danger { color: var(--destructive); }
  .text-success { color: var(--success); }

  /* Text size: small is 12px, large 16px; the body is 14px. */
  .text-small { font-size: var(--text-xs); line-height: var(--leading-xs); }
  .text-large { font-size: var(--text-base); line-height: var(--leading-base); }

  .text-medium { font-weight: var(--weight-medium); }
  .text-semibold { font-weight: var(--weight-semibold); }
  .text-mono { font-family: var(--font-mono); }
  .text-center { text-align: center; }
  .text-end { text-align: end; }
  .text-tabular { font-variant-numeric: tabular-nums; }

  /* One line, cut with an ellipsis. */
  .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nowrap { white-space: nowrap; }
  .break-all { word-break: break-all; }

  /* In a row or cluster: take the room that's left (and let text in it
     truncate), or keep its own size. */
  .grow { flex: 1 1 0%; min-inline-size: 0; }
  .no-shrink { flex-shrink: 0; }
  /* Pushed to the far end of its row. */
  .push-end { margin-inline-start: auto; }
  /* As wide as its container. */
  .full-width { inline-size: 100%; }

  /* There for screen readers, not on screen. */
  .visually-hidden {
    block-size: 1px;
    border-width: 0;
    clip-path: inset(50%);
    inline-size: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
  }

  /* Out of the box model: its children lay out as if it weren't there (a
     form around table cells, a turbo-frame in a stack). */
  .contents { display: contents; }

  /* Shown only from 48rem (a button's words beside its icon). */
  .wide-only {
    @media (width < 48rem) { display: none; }
  }
}