/* The other sites' sign-in buttons under "or continue with" (socialaccount/snippets/login.html,
   allauth/elements/provider.html), wherever a visitor may sign in: the sign-in pages, the front page and the preview's
   "Keep your drills" card. A file of its own, loaded by each of those pages after its other styles, as they don't
   share a stylesheet and Google's rules hold on all of them. */
/* "or continue with", a line either side, above the buttons, which stand in a row */
.or { display: flex; align-items: center; gap: 12px; margin: 18px 0 12px; color: var(--muted); font-size: 0.875rem; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.or + .providers { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 8px 0; padding: 0; }
.or + .providers li { flex: 1 1 5.5rem; }  /* three fit a phone's width */
.providers form { margin: 0; }
/* The button: the site's own logo, unchanged, on the fill and line Google's rules give a button its G stands on
   (looks.css --sitebtn-*; static/brands/CREDITS.md). Every site's button is the same, so none outweighs another. The
   look still gives it its corners and, where buttons have one, a lip. */
.providers .sitebtn {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin: 0; padding: 9px 8px;
  background: var(--sitebtn-fill); border: 1px solid var(--sitebtn-line); border-radius: var(--ctl-radius); color: var(--sitebtn-ink);
  box-shadow: 0 calc(var(--ctl-depth) - 1px) 0 var(--sitebtn-line); cursor: pointer;
}
.providers .sitebtn:hover {
  border-color: var(--sitebtn-line);
  box-shadow: 0 calc(var(--ctl-depth) - 1px) 0 var(--sitebtn-line), 0 0 0 3px color-mix(in srgb, var(--sitebtn-line) 40%, transparent);
}
.sitebtn img { display: block; }
.sitebtn .on-light { display: var(--sitebtn-light, block); }  /* the logo's file for a light button, or for a dark one */
.sitebtn .on-dark { display: var(--sitebtn-dark, none); }