/* The sign-in screen (signin.js), on the site and in the admin. Uses each
   page's own colours and fonts. */
.si { display: grid; gap: 14px; width: 100%; max-width: 400px; }
.si-list { display: grid; gap: 12px; }
.si-choice { display: grid; gap: 6px; }
.si-or { margin: 0 0 2px; text-align: center; font-size: 0.85rem; color: var(--graphite, #5a5f66); }
.si-note { margin: 0; font-size: 0.85rem; color: var(--graphite, #5a5f66); }
.si-google { min-height: 44px; width: 100%; display: flex; justify-content: center; }
.si-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 44px; padding: 10px 16px;
  font: 500 0.95rem/1.2 var(--text, inherit); color: var(--ink, #181a1d);
  background: var(--sheet, #fff); border: 1px solid var(--rule, #c4c6c2); border-radius: 4px; cursor: pointer;
}
.si-btn:hover { border-color: var(--ink, #181a1d); }
.si-btn:focus-visible { outline: 2px solid var(--ink, #181a1d); outline-offset: 2px; }
.si-btn:disabled { opacity: 0.6; cursor: progress; }
.si-primary { background: var(--ink, #181a1d); color: var(--sheet, #fff); border-color: var(--ink, #181a1d); }
.si-primary:hover { opacity: 0.9; }
.si-icon { font-size: 1rem; line-height: 1; }
.si-ms { width: 14px; height: 14px; background:
  linear-gradient(#f25022, #f25022) 0 0 / 6px 6px no-repeat,
  linear-gradient(#7fba00, #7fba00) 8px 0 / 6px 6px no-repeat,
  linear-gradient(#00a4ef, #00a4ef) 0 8px / 6px 6px no-repeat,
  linear-gradient(#ffb900, #ffb900) 8px 8px / 6px 6px no-repeat; }
.si-more { border-top: 1px solid var(--rule, #c4c6c2); padding-top: 12px; }
.si-more summary { cursor: pointer; color: var(--graphite, #5a5f66); font-size: 0.9rem; list-style-position: inside; }
.si-more[open] summary { margin-bottom: 12px; }
.si-error { margin: 0; min-height: 1.4em; color: var(--error, var(--fail, #9b2c22)); font-size: 0.9rem; }
.si-error:empty { min-height: 0; }
.si-info { color: var(--graphite, #5a5f66); }

/* After signing in with Google or Microsoft: the passkey offer. */
.si-offer {
  position: fixed; z-index: 60; right: 16px; bottom: 16px; width: min(360px, calc(100vw - 32px));
  background: var(--sheet, #fff); color: var(--ink, #181a1d); border: 1px solid var(--ink, #181a1d);
  padding: 18px 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.si-offer h2 { margin: 0 0 6px; font: 400 1.25rem/1.2 var(--display, inherit); }
.si-offer p { margin: 0 0 14px; color: var(--graphite, #5a5f66); font-size: 0.92rem; }
.si-offer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.si-offer-done { margin: 0 !important; color: var(--ink, #181a1d) !important; }