/* ============================================================
   BookPen — auth screen additions (social sign-in + legal links)
   Complements style.css; loaded AFTER it.
   ============================================================ */

/* ----- "or continue with" divider ----- */
.social-divider {
  display: flex; align-items: center; gap: 12px;
  color: var(--muted-foreground); font-size: 12px; font-weight: 500;
}
.social-divider::before, .social-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}

/* ----- brand buttons (Apple HIG / Google identity guidelines) ----- */
.social-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.social-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 46px; padding: 0 12px; border-radius: 12px;
  font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: filter var(--t), transform var(--t), box-shadow var(--t), background var(--t);
}
.social-btn:hover { box-shadow: var(--shadow-md); }
.social-btn:active { transform: scale(0.985); }
.social-btn svg { flex-shrink: 0; }

.social-apple { background: #000; color: #fff; border: 1px solid #000; }
.social-apple:hover { filter: brightness(1.25); }
html.dark .social-apple { background: #f1f3f5; color: #0b0d0f; border-color: #f1f3f5; }
html.dark .social-apple:hover { filter: brightness(0.93); }

.social-google { background: #ffffff; color: #1f1f1f; border: 1px solid #747775; }
.social-google:hover { background: #f4f6f8; }
html.dark .social-google { background: #ffffff; color: #1f1f1f; border-color: #8e918f; }

/* ----- legal text under forms ----- */
.legal-line {
  font-size: 11.5px; line-height: 1.65; color: var(--muted-foreground);
  text-align: center; margin-block-start: 2px;
}
.legal-line a {
  color: var(--primary); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}
.legal-line a:hover { color: var(--foreground); }

/* ----- legal links row under the auth card ----- */
.legal-links-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 4px 12px; margin-block-start: 16px; padding: 0 8px;
  font-size: 12px; color: var(--muted-foreground);
}
.legal-links-row a {
  text-decoration: underline; text-underline-offset: 2px;
  transition: color var(--t);
}
.legal-links-row a:hover { color: var(--foreground); }