/* A prepared ShareOS Core change's card (trackchange.js): what happens on
 * approval, the person's Approve and Decline, then what Core did. One quiet
 * filled card in the reading column, aligned with the tool rows, like a
 * render's card (media.css). */

.transcript > .trackchange-card { margin-left: 36px; }
.trackchange-card {
  display: grid;
  gap: var(--sv-space-2);
  max-width: 34rem;
  padding: var(--sv-space-3) var(--sv-space-4);
  background: var(--sv-fill-2);
  border: 0;
  border-radius: calc(var(--sv-radius) * 1.5);
  font-size: var(--ui-text);
}
.trackchange-card[hidden] { display: none; }
.trackchange-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-2); }
.trackchange-head .icon { width: 16px; height: 16px; color: var(--sv-ink-secondary); }
.trackchange-kicker { color: var(--sv-ink-secondary); font-size: var(--ui-meta); }
.trackchange-title { flex-basis: 100%; font-weight: 600; }
.trackchange-facts { display: grid; gap: var(--sv-space-1); }
.trackchange-facts p { margin: 0; color: var(--sv-ink-secondary); white-space: pre-wrap; overflow-wrap: anywhere; }
.trackchange-facts .trackchange-lead { color: var(--sv-ink); font-weight: 500; }
.trackchange-status { margin: 0; color: var(--sv-ink); }
.trackchange-card[data-state="failed"] .trackchange-status { color: var(--sv-danger); }
.trackchange-error { margin: 0; color: var(--sv-danger); }
.trackchange-error:empty { display: none; }
.trackchange-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sv-space-2); }
.trackchange-actions:empty { display: none; }
.trackchange-expiry { margin-right: auto; color: var(--sv-ink-secondary); font-size: var(--ui-meta); }
.trackchange-actions button, .trackchange-open { min-height: 44px; display: inline-flex; align-items: center; }
.trackchange-open { margin-right: auto; }

@media (max-width: 640px) {
  .transcript > .trackchange-card { margin-left: 0; }
  .trackchange-card { padding: var(--sv-space-3); }
  .trackchange-actions button { flex: 1; }
}

/* A chat move that widens its audience (projectmove.js) reuses this card: its people, one a line. */
.projectmove-gains { margin: 0; padding-left: var(--sv-space-4); color: var(--sv-ink); overflow-wrap: anywhere; }

/* A campaign send (emailsend.js) reuses this card: the email's text and the exact call in bounded, scrolling blocks. */
.emailsend-content { margin: 0; max-height: 16rem; overflow: auto; padding: var(--sv-space-2) var(--sv-space-3); background: var(--sv-surface); border: var(--sv-hairline-w) solid var(--sv-hairline); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--sv-ink); font: inherit; }
.emailsend-call summary { color: var(--sv-ink-secondary); font-size: var(--ui-meta); cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.emailsend-call pre { margin-top: var(--sv-space-1); font-family: var(--sv-font-mono); font-size: var(--ui-meta); }