@layer components {
  .onboarding-card {
    margin-top: 8px; padding: 14px 16px; background: var(--card);
    border: 1px solid var(--border); border-left: 3px solid var(--jx-accueil); border-radius: var(--radius-lg);
  }
  .onboarding-card--loading, .onboarding-card--missing { color: var(--muted-foreground); font-size: 13px; }
  .onboarding-card-head { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; }
  .onboarding-card-title { margin: 0; font-size: 14px; font-weight: 600; }
  .onboarding-card-count { font-size: 13px; color: var(--muted-foreground); }
  .onboarding-card-lead { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--muted-foreground); }
  .onboarding-card-rows { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
  .onboarding-card-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
  .onboarding-card-doc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
  .onboarding-card-doc-title { font-weight: 500; }
  .onboarding-card-meta { font-size: 13px; color: var(--muted-foreground); }
  .onboarding-card-action, .onboarding-card-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: flex-end; }
  .onboarding-card-approval { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
  .onboarding-card-done { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--jx-ok); }
  .onboarding-card-new { font-size: 13px; color: var(--jx-wait); }
  .onboarding-card-foot { margin-top: 12px; font-size: 13px; color: var(--muted-foreground); }
  .onboarding-card-who summary { cursor: pointer; text-decoration: underline; }
  .validated-documents { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
  .validated-document { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }

  /* A page shown from its offline copy offers no gesture that would fail; what was done stays visible. */
  html[data-offline-copy] .onboarding-card-form,
  html[data-offline-copy] .onboarding-card-open,
  html[data-offline-copy] .onboarding-card-waiting,
  html[data-offline-copy] .onboarding-card-hint { display: none; }

  /* On a phone a document's gestures take their own line across the card. */
  @media (max-width: 767px) {
    .onboarding-card-row { grid-template-columns: auto 1fr; }
    .onboarding-card-action { grid-column: 1 / -1; justify-content: stretch; }
    .onboarding-card-form { flex: 1 1 100%; }
    .onboarding-card-action > .button, .onboarding-card-form > .button { flex: 1 1 auto; }
  }

  /* The approval box and the "who sees this" disclosure answer a finger. */
  @media (pointer: coarse) {
    .onboarding-card-approval { min-height: var(--tap); }
    .onboarding-card-who summary { display: inline-flex; align-items: center; min-height: var(--tap); }
  }
}