/* css/views/team.css
   Team section of the account panel (src/account/team.js), the operator's
   Tenants desk, and the invite landing page (/#join, src/team/join.js).
   Everything is drawn from tokens.css so both themes hold. */

/* ---------- join page ---------- */
.join { max-width: 760px; margin-inline: auto; }
.join-body { display: flex; flex-direction: column; align-items: stretch; }
.join-card {
  width: 100%; box-sizing: border-box;
  padding: 26px 24px 22px; border-radius: 16px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: linear-gradient(140deg, color-mix(in srgb, var(--brand-600) 10%, transparent), color-mix(in srgb, var(--brand-purp-solid) 8%, transparent));
  border: 1px solid color-mix(in srgb, var(--brand-600) 30%, transparent);
}
.join-card.is-done { border-color: color-mix(in srgb, var(--brand-600) 45%, transparent); }
.join-kicker { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 800; color: var(--brand-600); }
.join-h { margin: 0; font-size: 1.35rem; font-weight: 900; color: var(--card-title); text-wrap: balance; }
.join-hint { margin: 0; color: var(--muted); line-height: 1.55; max-width: 58ch; }
.join-hint b, .join-note b { color: var(--card-title); font-weight: 700; }
.join-role { margin: 0; color: var(--muted); font-size: .9rem; max-width: 58ch; }
.join-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.join-note { margin: 4px 0 0; color: var(--muted); font-size: .84rem; line-height: 1.5; max-width: 60ch; }
.join-link { background: none; border: 0; padding: 0; font: inherit; font-size: inherit; color: var(--brand-600); text-decoration: underline; cursor: pointer; }
.join-link:hover { color: var(--card-title); }
.join-link:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; border-radius: 3px; }
.join-error { width: 100%; box-sizing: border-box; text-align: left; }

/* ---------- team section ---------- */
/* the section's cards stand apart with the gap every other section's cards keep (they touched until 2026-09-23);
   the role permissions host is no box of its own, so an empty one adds no gap */
#tmBody { display: grid; gap: 12px; min-width: 0; }
#tmBody > * { min-width: 0; }
#tmBody > .tm-scopes-host { display: contents; }
/* the picker wraps: "Loading the team…" (cards.js busy(), a .busy-note after the select) drops under it on a phone
   instead of running past the edge, where the shell's overflow cut it off */
.tm-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 14px; min-width: 0; }
#tmBody > .tm-switch { margin-bottom: 0; }
.tm-switch .adm-select { min-width: min(240px, 100%); max-width: 100%; }
.tm-switch .acct-label { margin: 0; }
.tm-switch .busy-note { margin-left: 0; white-space: normal; }

.tm-summary-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.tm-summary-id { min-width: 0; flex: 1 1 320px; }
.tm-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.tm-name { margin: 0 0 4px; font-size: 1.25rem; }
.tm-owner { margin: 0; }
.tm-summary-actions { flex: 0 0 auto; }
.tm-rename { margin-top: 12px; }

.tm-seats { margin-top: 16px; }
.tm-bar {
  position: relative; height: 10px; border-radius: var(--radius-pill); overflow: hidden;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  border: 1px solid var(--border);
  display: flex;
}
.tm-bar-used { display: block; height: 100%; background: var(--brand-600); transition: width 240ms ease; }
.tm-bar-pending { display: block; height: 100%; background: color-mix(in srgb, var(--gold-soft) 45%, transparent); transition: width 240ms ease; }
.tm-seats-line { margin: 8px 0 0; color: var(--muted); font-size: .86rem; }
.tm-over { margin-top: 10px; }

.tm-limits { display: flex; gap: 22px; flex-wrap: wrap; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border); }
.tm-limits div { display: grid; gap: 2px; }
.tm-limits dt { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.tm-limits dd { margin: 0; font-weight: 700; color: var(--card-title); font-variant-numeric: tabular-nums; }

.tm-table td { vertical-align: middle; }
.tm-role { min-width: 132px; }
.tm-actions { white-space: nowrap; text-align: right; }
.tm-actions .btn + .btn { margin-left: 8px; }   /* room between the row's icons on the wide table too (2026-09-29) */
.tm-actions .act-row { flex-wrap: nowrap; justify-content: flex-end; }
.tm-allow { font-variant-numeric: tabular-nums; }
.tm-edit td { background: color-mix(in srgb, var(--brand-600) 5%, transparent); }
/* the allowance editor: two labeled fields and the three icons on one line; stacked on a phone */
.tm-edit-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.tm-field { display: grid; gap: 4px; flex: 0 1 170px; min-width: 0; }
.tm-field .acct-label { margin: 0; font-size: .74rem; letter-spacing: .06em; color: var(--muted); }
.tm-field .acct-input { width: 100%; }
.tm-edit-acts { padding-bottom: 1px; }
.tm-edit-note { margin: 8px 0 0; }
/* a change that ends a seat asks first (licensing L5d): the question in words, then its two buttons; they wrap on a phone */
.tm-confirm-row { display: grid; gap: 8px; margin-top: 10px; }
.tm-edit .tm-confirm-row { margin-top: 0; }
.tm-confirm-row .acct-card-note { margin: 0; }
.tm-confirm-row .act-row { flex-wrap: wrap; gap: 8px; }
/* an input with its icons (rename, the invite link): the field takes the room */
.tm-inline-edit { display: flex; gap: 8px; align-items: center; }
.tm-inline-edit .acct-input { flex: 1 1 auto; min-width: 0; }

/* the invite: address, role, Invite; on a phone the address takes the whole first line */
.tm-invite-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; margin-top: 4px; }
.tm-invite-row .acct-input, .tm-invite-row .adm-select { min-width: 0; }
.tm-invite-role { min-width: 128px; }
@media (max-width: 560px) {
  .tm-invite-row { grid-template-columns: minmax(0, 1fr) auto; }
  .tm-invite-email { grid-column: 1 / -1; }
  .tm-invite-role { min-width: 0; width: 100%; }
}
/* the tint is the brand note box's (environment.css .ev-key-result list, 2026-10-05), as for .tm-scopes-yours and .tm-status */
.tm-invite-result { margin-top: 12px; padding: 12px 14px; }
.tm-invite-result p { margin: 0 0 8px; font-size: .88rem; line-height: 1.5; }
.tm-invite-result p b { color: var(--card-title); }
.tm-link { font-family: ui-monospace, Consolas, monospace; font-size: .8rem; }
.tm-sub-h { margin: 18px 0 8px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.tm-invites { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tm-invites li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 8px 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-ctl); background: var(--surface-3); font-size: .88rem; }
.tm-invites li .act-row { margin-left: auto; }
.tm-inv-when { font-size: .82rem; }
.tm-inv-who { font-weight: 600; color: var(--card-title); flex: 1 1 200px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tm-recent { margin: 10px 0 0; }

/* ---------- what each role can do (src/account/team.js scopesHtml, 2026-09-23) ----------
   One group per role (Admin, Developer, Member), one row per permission: its label with the
   switch at the end of that line, and its full description under both, across the row's
   whole width (a phone keeps the words readable). From 760px of panel width each group lays
   its permissions out two across. The switch is a button (role="switch") so the panel's
   armed confirm can open it into its question; while it asks, the question sits under the
   description, across the row. */
.tm-scopes-lead { margin: 0 0 10px; }
.tm-scopes-retry { margin-top: 10px; }
.tm-scopes-yours {
  display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; padding: 8px 12px;
  color: var(--ink); font-size: .88rem; line-height: 1.45;
}
.tm-scopes-yours .ev-ico { flex: none; margin-top: 2px; color: var(--brand-600); }
.tm-scopes { display: grid; gap: 12px; }
.tm-scope-role {
  min-width: 0; padding: 12px 12px 2px;
  border: 1px solid var(--border); border-radius: var(--radius-ctl); background: var(--surface-3);
}
.tm-scope-role.is-mine { border-color: color-mix(in srgb, var(--brand-600) 50%, transparent); box-shadow: inset 3px 0 0 var(--brand-600); }
.tm-scope-role-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tm-scope-role-h { margin: 0; font-size: .95rem; font-weight: 800; color: var(--card-title); }
.tm-scope-count { margin-left: auto; font-size: .8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tm-scope-role-note { margin: 2px 0 4px; color: var(--muted); font-size: .8rem; line-height: 1.4; }
.tm-scope-list { list-style: none; margin: 0; padding: 0; display: grid; column-gap: 24px; }
.tm-scope {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label ctl" "desc desc" "err err";
  column-gap: 12px; align-items: center; align-content: start;
  min-width: 0; padding: 8px 0 12px; border-top: 1px solid var(--border);
}
.tm-scope-label { grid-area: label; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; font-weight: 700; font-size: .9rem; line-height: 1.3; color: var(--card-title); }
.tm-scope-ctl { grid-area: ctl; display: inline-flex; align-items: center; justify-self: end; min-width: 0; }
.tm-scope-desc { grid-area: desc; margin-top: 2px; color: var(--muted); font-size: .84rem; line-height: 1.45; overflow-wrap: anywhere; }
.tm-scope-err { grid-area: err; margin: 8px 0 0; }
/* the armed question (cards.js armed) goes under the description it asks about, across the row */
.tm-scope:has(.is-armed) { grid-template-areas: "label label" "desc desc" "ctl ctl" "err err"; }
.tm-scope:has(.is-armed) .tm-scope-ctl { justify-self: stretch; margin-top: 8px; }
.tm-scope-ctl .btn.tm-sw.is-armed { flex: 1 1 auto; justify-content: flex-start; font-size: .84rem; }
@container (min-width: 760px) {
  .tm-scope-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the switch: the word, then the track; a button for the owner, a marked state for everyone else */
.btn.tm-sw:not(.is-armed), .tm-sw.is-static {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--ctl-h); padding: 4px 2px 4px 6px;
  border: 1px solid transparent; border-radius: var(--radius-btn-sm); background: transparent;
  color: var(--ink); font: inherit; font-size: .8rem; font-weight: 700; line-height: 1;
  transform: none; box-shadow: none; white-space: nowrap;
}
.btn.tm-sw:not(.is-armed):hover { background: color-mix(in srgb, var(--brand-600) 9%, transparent); border-color: transparent; color: var(--ink); transform: none; }
.btn.tm-sw:not(.is-armed):disabled:hover { background: transparent; border-color: transparent; }
.btn.tm-sw.is-saving:disabled { opacity: 1; cursor: progress; }
.tm-sw.is-static { cursor: default; }
.tm-sw-word { min-width: 2.2em; text-align: right; color: var(--muted); }
.tm-sw.is-on .tm-sw-word { color: var(--brand-600); }
.btn.tm-sw.is-saving .tm-sw-word { color: var(--ink); }
.tm-sw-track {
  position: relative; flex: none; width: 44px; height: 24px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--ink) 18%, transparent); transition: background 160ms ease;
}
/* the same thumb as the AI switch (environment.css .ev-switch-thumb): its fill is var(--card-title), near-white on dark
   and deep indigo on light, so the knob reads against its 18% ink track in both themes; its shadow is the shade token */
.tm-sw-thumb {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--card-title); box-shadow: 0 1px 3px color-mix(in srgb, var(--shade) 25%, transparent); transition: transform 160ms ease;
}
.tm-sw.is-on .tm-sw-track { background: var(--brand-600); }
.tm-sw.is-on .tm-sw-thumb { transform: translateX(20px); }
.tm-sw.is-static:not(.is-on) .tm-sw-track { background: color-mix(in srgb, var(--ink) 12%, transparent); }
.btn.tm-sw.is-saving .tm-sw-track { animation: tmSwSaving 900ms ease-in-out infinite alternate; }
@keyframes tmSwSaving { from { opacity: 1; } to { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .tm-sw-track, .tm-sw-thumb { transition: none; }
  .btn.tm-sw.is-saving .tm-sw-track { animation: none; }
}

/* a change out (src/account/team.js applyLocks): the sentence under the heading, and the turning "Saving…" beside a
   role picker. The words are what a phone reads, since it has no hover for the tips. */
.tm-status {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 10px;
  color: var(--ink); font-size: .86rem; line-height: 1.45; overflow-wrap: anywhere;
}
.tm-status[hidden] { display: none; }
.tm-status .ev-ico { flex: none; color: var(--brand-600); animation: evSpin 900ms linear infinite; }
/* a picker waiting on a change looks as held as a waiting button does */
#tmBody .adm-select:disabled { opacity: .55; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .tm-status .ev-ico { animation: none; } }

.tm-activity { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .86rem; }
.tm-activity li { display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--border); }
.tm-activity li:last-child { border-bottom: 0; }
.tm-act-when { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tm-act-what b { color: var(--card-title); }

@media (max-width: 640px) {
  .tm-limits { gap: 14px; }
  .tm-activity li { grid-template-columns: 1fr; gap: 2px; }
  .join-card { padding: 20px 16px 18px; }
}