/* castomFLOW — account: Settings, Team, Rewards, the invitation.
   Only what castomo-dashkit does not already draw; every class here is `.ac-`,
   so this sheet never collides with another area's. Tokens only (GUIDELINES §0.1). */

/* ---------- Settings ---------- */

/* Settings are forms and short facts: a line longer than this reads badly, and
   the tab row stays with its panels instead of stretching across a wide screen. */
.ac-settings { max-width: 880px; }

/* The time-zone field: the list has no bound on a name's length
   ("America/Argentina/ComodRivadavia"), so the select is held inside its card
   (§0.33), and the one-press "Use <zone>" button may wrap inside its pill (§0.34). */
.ac-zone { min-width: 0; justify-items: start; }
.ac-zone .select { width: 100%; max-width: 100%; }
.ac-zone .btn { max-width: 100%; white-space: normal; text-align: start; }

/* A hint that belongs to the row above it (the quiet hours' two fields) sits
   close under it rather than a whole form gap away. */
.ac-after-row { margin-top: calc(var(--s1) * -1); }

/* The agents card and the two hints under it, one step apart. */
.ac-agents { display: grid; gap: var(--s1); min-width: 0; }

/* ---------- Team ---------- */

/* The invitation link is shown once: the field and its copy button share a
   row, and the field takes whatever width is left without pushing the button
   off a phone. */
.ac-copy { display: flex; gap: var(--s0); align-items: center; margin-top: var(--s0); }
.ac-copy .input { flex: 1; min-width: 0; }

.ac-seats { display: flex; align-items: center; gap: var(--s0); margin: 0 0 var(--s2); color: var(--ink-2); }

/* What each role can do: two-line rows, no bullets (the role's name is the mark). */
.ac-roles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.ac-roles li { display: grid; gap: calc(var(--s0) / 4); }
.ac-roles span { color: var(--ink-2); }

/* Handing over and removing the workspace: set apart inside its card by a rule,
   never by more padding (GUIDELINES §0.32). */
.ac-danger { margin-top: var(--s2); padding-top: var(--s2); border-top: var(--rule-w) solid var(--rule); }
.ac-danger h3 { font-size: var(--t1); color: var(--bad); }