/* The organization invitation card, inside the Message Center — the fourth row kind in that
   panel, styled like the Watching tab's rows (alt-message-center.css): `.mc-item`, `.mc-avatar`,
   `.mc-author`, `.mc-verb`, `.mc-context`, `.mc-when`, `.mc-actions` already cover the row; this
   file adds only what's genuinely new — the token line, the expired-token note, inline decline.
   Scoped under `.alt-app .mc-card` so it never reaches a second surface. No new colour role:
   `--a-amber` is the existing "needs action, not wrong" status; red/green stay unused here. */

.alt-app .mc-item.mc-invitation .mc-inv-org {
  font: 600 13px/1.3 var(--a-body); color: var(--a-text);
}
.alt-app .mc-item.mc-invitation .mc-inv-status { font-weight: 400; color: var(--a-dim); }

/* The mark is the initials fallback every avatar in this panel already has, until
   my_organization_invitations() carries the Organization's logo — sized and coloured like
   `.mc-avatar` elsewhere (alt-message-center.css). */
.alt-app .mc-item.mc-invitation .mc-inv-mark { font: 600 11px/1 var(--a-body); }

/* Amber, not red — the invitation is exactly as valid as it was, only the credential needs
   refreshing, so nothing here is actually broken. */
.alt-app .mc-item.mc-invitation .mc-inv-detail {
  margin: 3px 0 4px; padding: 6px 9px;
  border: 1px solid var(--a-amber); border-radius: var(--a-r-sm);
  background: var(--a-amber-soft);
  color: var(--a-text); font-size: 12px; line-height: 1.5;
}
.alt-app .mc-item.mc-invitation .mc-inv-detail div:first-child { font-weight: 600; }

/* `<code>` because the token is read character by character and copied, not prose — monospace
   makes four groups of five scannable. `word-break` stops a long value pushing the actions
   column at 390px, the narrowest width this panel works at. */
.alt-app .mc-item.mc-invitation .mc-inv-token-row {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  margin: 3px 0 4px; padding-left: 9px; border-left: 2px solid var(--a-line-strong);
}
.alt-app .mc-item.mc-invitation .mc-inv-token-label {
  font-size: 11px; color: var(--a-faint); text-transform: uppercase; letter-spacing: .04em;
}
.alt-app .mc-item.mc-invitation .mc-inv-token-value {
  font: 600 13px/1.4 var(--a-mono);
  color: var(--a-text); letter-spacing: .02em; word-break: break-all;
}

.alt-app .mc-item.mc-invitation .mc-inv-expiry { color: var(--a-faint); font-size: 11px; }

/* Accept is `.btn.small.primary` — the one press in this panel with an equivalent consequence
   to Post reply: joining an Organization. Everything else in `.mc-actions` stays plain. */

/* The inline decline confirmation replaces the actions row, the same way the reply composer
   already replaces a row's actions here — one thing showing at a time. */
.alt-app .mc-item.mc-invitation .mc-inv-decline-confirm {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
  margin-top: 4px;
}
.alt-app .mc-item.mc-invitation .mc-inv-decline-confirm span {
  font-size: 12px; color: var(--a-dim); margin-right: auto;
}

/* Same clock as every other control in this panel — alt-message-center.css's own footer owns
   the duration token and the reduced-motion reasoning. */
.alt-app .mc-item.mc-invitation .mc-inv-decline-confirm .btn,
.alt-app .mc-item.mc-invitation [data-mc-inv-copy],
.alt-app .mc-item.mc-invitation [data-mc-inv-accept],
.alt-app .mc-item.mc-invitation [data-mc-inv-regenerate],
.alt-app .mc-item.mc-invitation [data-mc-inv-decline] {
  transition: background-color var(--dur-micro, 140ms) linear,
              border-color     var(--dur-micro, 140ms) linear,
              color            var(--dur-micro, 140ms) linear;
}