.ui-modal.is-social-accounts .ui-modal-body { display: block; }
.is-social-accounts p, [data-social-connect] p { overflow-wrap: break-word; }
.is-social-accounts details, [data-social-connect] details { margin-block: var(--s3); }
.is-social-accounts summary, [data-social-connect] summary { cursor: pointer; padding-block: var(--s2); }
.is-social-accounts .ui-field { margin-block: var(--s3); }
.is-social-accounts .ui-modal-foot { flex-wrap: wrap; }
.social-platform { border-block-start: 1px solid var(--line); padding-block: var(--s4); }
.social-platform h3 { margin: 0; }
.social-platform-head, .social-account { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.social-account { margin-block-start: var(--s3); align-items: flex-start; }
.social-account > div { min-width: 0; }
.social-account p { margin-block: var(--s1); }
.social-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.is-social-accounts .ui-panel .ui-btn { margin-block-end: var(--s2); }
[data-social-link] { overflow-wrap: anywhere; }
[data-social-progress] { color: var(--ink-soft); overflow-wrap: anywhere; }
.social-client-list { display: grid; gap: var(--s3); }
.social-client-card { display: flex; align-items: center; gap: var(--s4); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel-sunken); }
.social-client-card > div { flex: 1; min-width: 0; }
.social-client-card h3 { margin: 0; overflow-wrap: anywhere; }
.social-client-card p, .social-intro { color: var(--ink-soft); }
.social-context { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.social-context strong { overflow-wrap: anywhere; }
.social-account > div { width: 100%; }
.social-login-options { display: grid; gap: var(--s4); }
.social-checks { list-style: none; margin: var(--s3) 0; padding: 0; display: grid; gap: var(--s2); }
.social-checks li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s2); row-gap: var(--s1); align-items: baseline; }
.social-checks li p { grid-column: 2; margin: 0; color: var(--ink-soft); }
.social-blocked { margin-block: var(--s3); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--warn-bg); }
.social-blocked p { margin-block: var(--s1); }
.social-steps { list-style: none; margin: var(--s3) 0; padding: 0; display: grid; gap: var(--s4); }
.social-steps > li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s3); align-items: start; padding-block-start: var(--s3); border-block-start: 1px solid var(--line); }
.social-steps h3 { margin: 0 0 var(--s1); }
.social-steps p { margin-block: var(--s1); }
.social-login-options section { border: 1px solid var(--line); padding: var(--s4); border-radius: var(--r-lg); }
.social-login-options h3 { margin-top: 0; }
.social-login-options .ui-btn { width: 100%; }
.is-social-accounts .ui-btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center; }
.is-social-accounts summary { min-height: var(--control-h-mobile); }
@media (max-width: 600px) {
  .is-social-accounts .ui-btn { min-height: var(--control-h-mobile); }
  [data-social-connect] .ui-btn { min-height: var(--control-h-mobile); max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .social-client-card { align-items: stretch; flex-direction: column; }
  .social-client-card > .ui-btn { width: 100%; }
  .social-account { flex-direction: column; }
  .social-platform-head { flex-wrap: wrap; }
  .social-platform-head .ui-btn { min-height: var(--control-h-mobile); }
  .social-actions { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); }
  .is-social-accounts .ui-modal-foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .is-social-accounts .ui-modal-foot .is-primary { order: -1; }
  .is-social-accounts .ui-modal-foot .ui-btn { width: 100%; }
}

/* Live status and what Zernio bills for, under Agency connection. */
.social-live { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s2); row-gap: var(--s1); align-items: baseline; margin-block: var(--s4); padding-block-start: var(--s3); border-block-start: 1px solid var(--line); }
.social-live p, .social-live .ui-btn { grid-column: 2; margin: 0; }
.social-live .ui-btn { justify-self: start; margin-top: var(--s2); }
.social-idle { margin: var(--s2) 0 var(--s4); padding-inline-start: var(--s5); color: var(--ink-soft); }
.social-defaults .ui-check { margin-block: var(--s3); }