/* The buttons signing in with Google and Apple, on the account page and in the routing page's account offer. */
/* The sign-in buttons, stacked as wide as the widest, 12px apart: more than the tenth of their height Apple asks around its own. */
.sign-in-buttons { display: inline-flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.sign-in-buttons a[hidden] { display: none; }
/* Google's "Sign in with Google" button, its light theme: white, the multicolour G, its label in Roboto Medium. */
.google-sign-in {
  display: inline-flex; align-items: center; gap: 12px; box-sizing: border-box; height: 40px; padding: 0 12px;
  border: 1px solid #747775; border-radius: 4px; background: #fff; color: #1f1f1f;
  font: 500 14px/20px Roboto, Arial, sans-serif; letter-spacing: 0.25px; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.google-sign-in:hover { background: #f7f8f8; box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15); }
.google-sign-in:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.google-sign-in svg { width: 18px; height: 18px; flex: none; }
/* Apple's "Sign in with Apple" button, its black style: the white logo left-aligned beside other providers' buttons, its
   title in the system font, Google's height and radius. */
.apple-sign-in {
  display: inline-flex; align-items: center; gap: 12px; box-sizing: border-box; height: 40px; padding: 0 12px;
  border: 1px solid #000; border-radius: 4px; background: #000; color: #fff;
  font: 500 15px/20px -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.apple-sign-in:hover { background: #1a1a1a; }
.apple-sign-in:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.apple-sign-in svg { width: 18px; height: 18px; flex: none; fill: currentColor; }
/* On a dark page, its white style, without a hairline: Apple keeps its black one for light backgrounds. */
@media (prefers-color-scheme: dark) {
  .apple-sign-in { background: #fff; color: #000; border-color: #fff; }
  .apple-sign-in:hover { background: #f2f2f2; }
}