/* Shared sign-in provider buttons.
   This is the one place the provider marks and the Google button theme live.
   Every page that offers Google, GitHub or email sign-in links this file after
   its own styles and tags each control with "pc-signin" plus one of
   "pc-signin--google", "pc-signin--github" or "pc-signin--email". Pages keep
   their own width, height, spacing, radius and font; this file owns the
   provider look. sign-in-buttons.test.mjs checks every sign-in page uses it.

   Each mark is a decorative ::before image, so the button text stays the
   accessible name, and code that rewrites a label keeps the mark. Drop the
   modifier (classList.toggle) when a control stops being a provider action.

   Google: the light theme from Google's Sign in with Google branding (white
   fill, 1px #747775 stroke, #1F1F1F text) with the standard full-colour G,
   which may not sit on a coloured background.
   GitHub: the unchanged official white Invertocat (app/github-mark-white.svg,
   docs/brand-guidelines.md) on navy, with 12px between mark and label.
   Email: a plain envelope in the control's own text colour.
   The marks are same-origin files (app/google-g.svg, app/github-mark-white.svg,
   app/mail-icon.svg), not data: URIs, so pages whose Content-Security-Policy
   allows only img-src 'self' (the critique share sign-in) still draw them. */
/* Zero specificity, so a page that sizes the control as inline-flex (a centred
   button) keeps that; everything else becomes a centred flex row. */
:where(.pc-signin.pc-signin--google, .pc-signin.pc-signin--github, .pc-signin.pc-signin--email) { display: flex; }
.pc-signin.pc-signin--google, .pc-signin.pc-signin--github, .pc-signin.pc-signin--email {
  align-items: center; justify-content: center; gap: 10px;
  padding-inline: 16px; text-decoration: none;
}
.pc-signin.pc-signin--google[hidden], .pc-signin.pc-signin--github[hidden], .pc-signin.pc-signin--email[hidden] { display: none; }
.pc-signin.pc-signin--google::before, .pc-signin.pc-signin--github::before, .pc-signin.pc-signin--email::before {
  content: ''; flex: none; width: 20px; height: 20px;
}
:is(a, button).pc-signin.pc-signin--google { border: 1px solid #747775; background: #fff; color: #1f1f1f; box-shadow: none; }
:is(a, button).pc-signin.pc-signin--google:hover { background: #f2f2f2; }
:is(a, button).pc-signin.pc-signin--google:disabled:hover { background: #fff; }
.pc-signin.pc-signin--google::before { background: url('/app/google-g.svg') center / contain no-repeat; }
/* A loading spinner drawn as ::after takes the dark text colour. */
.pc-signin.pc-signin--google[aria-busy="true"]::after { margin-left: 0; border-color: rgba(31,31,31,.25); border-top-color: #1f1f1f; }
:is(a, button).pc-signin.pc-signin--github { gap: 12px; border: 0; background: var(--pc-color-navy); color: #fff; }
:is(a, button).pc-signin.pc-signin--github:hover { background: var(--pc-color-ink); }
.pc-signin.pc-signin--github::before { background: url('/app/github-mark-white.svg') center / contain no-repeat; }
.pc-signin.pc-signin--email::before {
  background-color: currentColor;
  -webkit-mask: url('/app/mail-icon.svg') center / contain no-repeat;
  mask: url('/app/mail-icon.svg') center / contain no-repeat;
}