/* Reuse the existing workbench palette and type. Account rows are the focal point. */
.social-controls {display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;padding:18px 0;border-bottom:1px solid var(--wb-line)}
.social-controls label {display:grid;gap:7px;font-size:12px;color:var(--wb-muted);min-width:148px}
.social-controls input,.social-controls select {min-height:40px;padding:9px 11px;color:var(--wb-ink)}
.social-control-actions {margin-left:auto;display:flex;gap:9px;flex-wrap:wrap}
.social-caption {display:flex;justify-content:space-between;gap:15px;align-items:center;padding:20px 0 8px;color:var(--wb-muted);font-size:12px}
.social-caption p {display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0}
.social-caption b {font-size:17px;color:var(--wb-ink)}
.social-scope {border-left:3px solid var(--wb-teal);padding:8px 15px;margin:12px 0 20px;color:var(--wb-muted);font-size:12px;line-height:1.7}
.social-scope b {color:var(--wb-ink);font-size:13px}
.social-scope p {margin:4px 0;max-width:95em}
.social-table-wrap {border:1px solid var(--wb-line);border-radius:9px;background:#fff}
.social-table {min-width:1080px;table-layout:auto}
.social-table th,.social-table td {padding:16px 14px;vertical-align:top;text-align:left}
.social-table thead th {font-size:12px;font-weight:600;color:var(--wb-muted);background:#f1f5f8;white-space:nowrap}
.social-table tbody th {min-width:180px;max-width:250px;font-weight:500;background:white}
.social-table tbody th .cell-note {font-weight:400}
.social-account-button {display:flex;align-items:center;gap:6px;text-align:left;border:0;background:none;padding:0;min-height:28px;max-width:225px;overflow-wrap:anywhere;font-weight:600}
.social-account-button svg {flex-shrink:0;width:14px;height:14px}
.social-metric {min-width:88px;display:grid;gap:6px;font-variant-numeric:tabular-nums}
.social-metric b {font-size:16px;font-weight:600;line-height:1.4;color:var(--wb-ink)}
.social-metric small {font-size:11px;line-height:1.5;color:var(--wb-muted);max-width:145px}
.social-metric .social-increase {color:#117c79}
.social-metric .social-decrease {color:#9c611b}
.social-partial b,.social-partial small {color:#9c611b}
.social-observed {min-width:175px}
.social-observed b {font-size:12px;font-weight:500}
.social-observed small {display:block;font-size:11px;line-height:1.7;color:var(--wb-muted);overflow-wrap:anywhere}
.social-observed button {padding-left:0;font-size:12px}
.social-empty {padding:40px 24px;text-align:center;background:white;border:1px solid var(--wb-line);border-radius:9px}
.social-empty p {color:var(--wb-muted);font-size:13px;line-height:1.7;margin:12px auto 18px;max-width:45em}
.social-notes {color:var(--wb-muted);font-size:12px;line-height:1.7;margin:14px 0;overflow-wrap:anywhere}
.social-detail-intro {font-size:13px;line-height:1.6;margin-bottom:18px}
.social-detail-intro p {color:var(--wb-muted);margin:5px 0;overflow-wrap:anywhere}
.social-detail-table {min-width:450px}
.social-detail-table td,.social-detail-table th {padding:12px;vertical-align:top}
.social-history {margin-top:22px}
.social-history summary,.social-credentials summary,.social-method summary {cursor:pointer;padding:10px 0;color:var(--wb-ink)}
.social-history table {font-size:12px}
.social-connection-list>div {display:flex;align-items:center;gap:20px;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--wb-line)}
.social-connection-list span {min-width:0;overflow-wrap:anywhere}
.social-connection-list b,.social-connection-list small {display:block}
.social-connection-list small {color:var(--wb-muted);font-size:12px;line-height:1.8}
.social-connection-list button {flex-shrink:0}
#social-connection-form>label {margin:14px 0}
.social-secondary-actions {display:flex;gap:10px;flex-wrap:wrap;border-top:1px solid var(--wb-line);margin-top:18px;padding-top:18px}
.social-feedback {min-height:22px;color:var(--wb-amber);font-size:13px;line-height:1.6}
.social-credentials textarea {font-family:inherit;overflow-wrap:anywhere}
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:760px) {
  .social-controls {gap:12px;align-items:stretch}
  .social-controls label {flex:1;min-width:130px}
  .social-control-actions {margin-left:0;width:100%}
  .social-control-actions>* {flex:1;justify-content:center;white-space:nowrap;font-size:12px}
  .social-caption {align-items:flex-start;font-size:11px}
  .social-caption p {gap:5px}
  .social-caption p span {width:100%}
  .social-scope {padding-left:11px}
  .social-table tbody th {position:sticky;left:0;z-index:1;min-width:125px;max-width:150px;border-right:1px solid var(--wb-line)}
  .social-account-button {max-width:140px;font-size:12px}
  .social-table th,.social-table td {padding:13px 10px}
}

.social-observed .social-error,.social-detail-intro .social-error {color:var(--wb-amber)}