/* ============================================================
   RosterDive DS — Roster Content page
   Solo layout di appoggio per la pagina di redazione About/Privacy;
   colori, spacing e tipografia derivano dai Design Token.

   FIX 2026-10-16 (issue #131 — DS audit):
   - Responsive mobile-first (base = mobile, desktop in min-width: 600px)
   - L'anteprima non dipende più dal CSS condiviso delle pagine informative
     (ora css/legal.css): il container usa la classe di pagina
     .roster-content__preview
   ============================================================ */

.roster-content__toolbar {
  margin-top: var(--space-4);
  flex-wrap: wrap;
}

.roster-content__toolbar .button {
  flex: 1 1 100%;
}

.roster-content__section {
  margin-bottom: var(--space-4);
}

.roster-content__section .button--tertiary {
  margin-top: var(--space-2);
}

.roster-content__actions {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-6);
}

.roster-content__actions .button {
  width: 100%;
}

/* ── Anteprima documento (About / Privacy) ── */
.roster-content__preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.roster-content__preview .page-header {
  margin-bottom: 0;
}

/* ── Responsive (mobile-first) ── */
@media (min-width: 600px) {
  .roster-content__toolbar .button {
    flex: 1 1 auto;
  }

  .roster-content__actions {
    flex-direction: row;
    justify-content: flex-end;
  }

  .roster-content__actions .button {
    width: auto;
  }
}