/* social-sign-in - neutral starting look. Override any --social-* value in the app's own CSS. */
.social-signin {
  --social-radius: 10px;
  --social-border: #c8ccd4;
  --social-bg: #ffffff;
  --social-text: #1f2328;
  --social-dark-bg: #111111;
  --social-dark-text: #ffffff;
  --social-gap: 8px;
  display: flex;
  flex-direction: column;
  gap: var(--social-gap);
  margin: 0 0 12px;
}
.social-btn {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--social-border);
  border-radius: var(--social-radius);
  background: var(--social-bg);
  color: var(--social-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.social-btn:hover { filter: brightness(0.97); }
.social-btn:focus-visible { outline: 3px solid #4c8dff; outline-offset: 2px; }
.social-btn:disabled { opacity: 0.6; cursor: progress; }
.social-btn-apple,
.social-btn-github { background: var(--social-dark-bg); color: var(--social-dark-text); border-color: var(--social-dark-bg); }
.social-msg { margin: 4px 0 0; font-size: 0.9em; color: #b42318; }
.social-msg[hidden] { display: none; }
.social-or { margin: 6px 0 0; text-align: center; font-size: 0.9em; color: #667085; }