/* invites: the acceptance screen and the invite panel in the user modal */

/* The login card centres its contents; the acceptance form is a form, so it
   reads left aligned like every other one in the app. */
.inv-card { text-align: left; }
.inv-card .login-sub { margin-bottom: 10px; }

.inv-note {
  color: var(--muted); font-size: 12.5px; line-height: 1.5; margin-bottom: 12px;
}

/* Three states, three colours, same box. Green means it left the building,
   amber means it did not and somebody has to carry it by hand, red means the
   attempt failed. */
.inv-ok, .inv-warn, .inv-err, .inv-dead {
  border-radius: 9px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5;
  margin-bottom: 12px;
}
.inv-ok { background: #d1fae5; color: #065f46; }
.inv-warn { background: #fef3c7; color: #92400e; }
.inv-err, .inv-dead { background: #fee2e2; color: #b91c1c; }

/* The link and the one-time password, shown once when email is not configured.
   A 64 character token in a grid child would push the copy button off the
   edge without the min-width reset. */
.inv-secret {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; background: #f8fafc;
}
.inv-secret > span {
  flex: none; color: var(--muted); font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; width: 74px;
}
.inv-secret code {
  flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.inv-secret .btn { flex: none; }

/* Sits in the user modal's form grid, so it spans and it does not stretch the
   column to fit the longest unbroken string in it. */
.inv-panel { min-width: 0; }
.inv-panel .inv-note { margin: 4px 0 10px; }
.inv-panel .btn { margin-top: 2px; }