/* social-connect.css - styles for apps/shared/social-connect.js (ADVOCACY-CONTRACT.md §6). Colours from the Connect theme tokens only. */

.sc-card { display: block; min-width: 0; padding: var(--cx-space-4, 16px); border: 1px solid var(--cx-border); border-radius: var(--cx-radius-lg); background: var(--cx-surface); color: var(--cx-text); }
.sc-title { margin: 0 0 4px; font-size: var(--cx-text-section); font-weight: 600; }
.sc-title:focus { outline: none; }
.sc-lead { margin: 0 0 var(--cx-space-3, 12px); color: var(--cx-text-2); font-size: var(--cx-text-small); }
.sc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.sc-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--cx-space-2, 8px) var(--cx-space-3, 12px); padding: var(--cx-space-3, 12px) 0; border-top: 1px solid var(--cx-border-soft); min-width: 0; }
.sc-row:first-child { border-top: 0; }
.sc-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 220px; }
.sc-name { font-weight: 600; }
.sc-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; min-width: 0; }
.sc-state { font-size: var(--cx-text-meta); font-weight: 600; padding: 1px 8px; border-radius: var(--cx-radius-pill); background: var(--cx-surface-2); color: var(--cx-text-2); }
.sc-state.is-good { background: var(--cx-success-soft); color: var(--cx-success-text); }
.sc-state.is-warn { background: var(--cx-warning-soft); color: var(--cx-warning-text); }
.sc-detail { color: var(--cx-text-2); font-size: var(--cx-text-small); overflow-wrap: anywhere; margin: 0; }
.sc-actions { display: flex; flex-wrap: wrap; gap: var(--cx-space-2, 8px); }
.sc-msg { margin: 0 0 var(--cx-space-3, 12px); padding: 8px 12px; border-radius: var(--cx-radius); font-size: var(--cx-text-small); overflow-wrap: anywhere; }
.sc-msg.is-good { background: var(--cx-success-soft); color: var(--cx-success-text); }
.sc-msg.is-bad { background: var(--cx-danger-soft); color: var(--cx-danger-text); }
.sc-msg.is-warn { background: var(--cx-warning-soft); color: var(--cx-warning-text); }
/* The hidden copy field and download link: present for the browser, never seen. */
.sc-offscreen { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; }

@media (max-width: 640px) {
  .sc-card { padding: var(--cx-space-3, 12px); }
  .sc-detail, .sc-lead { font-size: max(13.5px, var(--cx-text-small)); }
  .sc-actions { width: 100%; }
}