/* The staff («Tessera viva», wave 4b): viste/app/staff.php (the wall), _badge.php and staff_scheda.php (the record cards
   of app-record.css), and the forms of the role, the removal, a new person. Shared tokens only. Prefix sq-. */

.gx .sq-tu { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--brand-primary-soft); color: var(--brand-primary); font-size: .75rem;
  font-weight: 700; vertical-align: 2px }

/* ------------------------------------------------------------------------------------------------ the forms */
.gx .sq-modulo { max-width: 40rem }
.gx .sq-modulo > label:first-of-type { margin-top: 0 }
.gx .sq-ruoli { border: 0; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; min-width: 0 }
.gx .sq-ruoli legend { padding: 0; margin: 0 0 6px; font-weight: 600; font-size: .9rem; color: var(--ink-2) }
.gx .sq-scelta { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 12px 14px; min-height: 56px; border: 1.5px solid var(--line); border-radius: var(--radius);
  background: var(--surface); font-weight: 400; cursor: pointer }
.gx .sq-scelta input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--brand-primary) }
.gx .sq-scelta span { display: grid; gap: 2px }
.gx .sq-scelta b { font-size: 1rem }
.gx .sq-scelta b small { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--bg); color: var(--ink-3); font-size: .75rem; font-weight: 650 }
.gx .sq-scelta > span > small { color: var(--ink-3); font-size: .85rem; line-height: 1.4 }
.gx .sq-scelta:has(input:checked) { border-color: var(--brand-primary); background: var(--brand-primary-soft) }
.gx .sq-scelta:has(input:focus-visible) { outline: 3px solid var(--brand-accent); outline-offset: 2px }
.gx .sq-scelta--no { opacity: .55; cursor: not-allowed }
.gx .sq-dopo { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: .92rem; line-height: 1.45; color: var(--ink-2) }
.gx .sq-dopo--no { color: var(--warn); font-weight: 600 }
.gx .sq-blocco { margin: 0 0 14px; padding: 10px 12px; border-radius: var(--radius); background: var(--warn-soft) }
.gx .sq-porta { list-style: none; margin-left: -20px; padding: 8px 12px; border-radius: var(--radius); background: var(--bg); font-size: .85rem; overflow-wrap: anywhere }
.gx .sq-cosa-t { margin: 16px 0 0; font-size: .95rem }