/* ─────────────────────────────────────────────────────────────────────────
   FOLLOW-UP ROW — a line of small controls around one field: the Follow-up
   row (1 week | 1 month | date | ×) and the Responsible row (me | picker | ×,
   crm/shared/partials/responsible_picker.html).

   A component, not a page rule (METIS-pub#527): metis, coherence and gathering
   all render it, and it lived in detail.css, which the styleguide does not
   load, so the gallery drew the Responsible row unlaid-out.

   The gap is the tier-3 token --follow-up-row-gap (tokens/components.css), so
   a page can tighten it: components is a later cascade layer than base, so a
   page's plain `gap` on this row would lose (person_create.css sets 6px at
   phone width).
   ───────────────────────────────────────────────────────────────────────── */
@layer components {
  .follow-up-row {
    display: flex;
    gap: var(--follow-up-row-gap);
    align-items: center;
  }

  /* Tom Select hides the native <select> and renders .ts-wrapper in its place, so
     the wrapper — not the select — is the flex item that has to take the row's
     room. Without this it stays flex: 0 1 auto and shrinks to "— None —", and the
     dropdown, being 100% of the box, wraps every name (METIS-pub#402). */
  .follow-up-row .ts-wrapper { flex: 1 1 auto; min-width: 0; }

  /* "me" stretches to the box's height so the pair reads as one control (was
     seven inline styles and tg-create__me-btn). */
  .follow-up-row > [data-responsible-me] { align-self: stretch; }
}