/* "Label users" section of the Labels tab (assets/roles.js) */
.roles-section { margin-top: var(--space-lg, 24px); padding: var(--space-md, 16px); }
.roles-head { margin-bottom: 4px; }
.roles-intro, .roles-foot { margin: 6px 0 12px; }
.roles-explain { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-sm, 10px); margin: 0 0 var(--space-md, 16px); }
.roles-explain > div { padding: 10px 12px; border-radius: var(--radius-default); background: var(--surface-container-low); box-shadow: var(--shadow-inset); min-width: 0; }
.roles-explain dt { margin: 0 0 6px; }
.roles-explain dd { margin: 0; font-size: 13px; line-height: 1.4; color: var(--text-secondary, inherit); }
.roles-chip { font-weight: 600; }
.roles-pick { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.roles-select { min-height: 34px; max-width: 150px; }
.roles-mine { margin: 0 0 8px; }
@media (max-width: 600px) {
  .roles-section { padding: 12px; }
  .roles-explain { grid-template-columns: 1fr; }
}