/* HumDocs UI layer (September 2026 redesign).
 *
 * Loaded after styles.css on every page. The goal is the extension popup's
 * look on the web: the same near-black surfaces and hairline borders, a plain
 * grotesk with a mono for labels and numbers, and green kept for the one
 * primary action and for live state, never as a glow.
 *
 * styles.css carries several older layers ("glass", sheens, glows). Rather
 * than untangle them, the rules here win on specificity (:root prefix) so the
 * whole site changes from one place. The footer keeps its original look on
 * purpose, so it gets its original fonts back below.
 */

:root {
  --bg: #0a0a0a;
  --s1: #111111;
  --s2: #1a1a1a;
  --s3: #222222;
  --b1: #282828;
  --b2: #363636;
  --text: #f2f2f2;
  --text2: #b8b8b8;
  --text3: #8e8e8e;
  --ok: #3ecf8e;
  --ok2: #6ee7b4;
  --ok-bg: rgba(62, 207, 142, 0.1);
  --ok-bd: rgba(62, 207, 142, 0.28);
  --err: #f87171;
  --err-bg: rgba(248, 113, 113, 0.08);
  --err-bd: rgba(248, 113, 113, 0.28);
  --warn: #e8b84b;
  --ui-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ui-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: var(--ui-sans);
  --display: var(--ui-sans);
  --mono: var(--ui-mono);
  --ui-r: 10px;
  --ui-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* The footer is staying exactly as it was. */
footer {
  font-family: "Manrope", system-ui, sans-serif;
  letter-spacing: normal;
  --sans: "Manrope", system-ui, sans-serif;
  --display: "Fraunces", "Manrope", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

:root body {
  background: var(--bg);
  font-family: var(--ui-sans);
  font-feature-settings: "ss01" 0;
  letter-spacing: -0.005em;
}

/* The old animated background layers (ribbons, glows, scroll bar) read as
   decoration, not product. The popup sits on flat #0a0a0a. */
:root .scroll-progress,
:root .bg-scene,
:root .bg-ribbons,
:root .page-glow {
  display: none !important;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
:root .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 15px;
  border-radius: 9px;
  border: 1px solid transparent;
  font-family: var(--ui-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  filter: none;
  transform: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, filter 0.15s ease, transform 0.1s ease;
}
:root .btn::before,
:root .btn::after {
  content: none !important;
}
:root .btn:active {
  transform: scale(0.98);
}
:root .btn:focus-visible {
  outline: 2px solid var(--ok);
  outline-offset: 2px;
}

/* Primary: a plain light button. Quieter than the green gradient it
   replaced, which competed with everything else on the page. Green is kept
   for live state and the extension's own controls. */
:root .btn.btn-primary {
  background: #ececec;
  color: #0a0a0a;
  border-color: transparent;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}
:root .btn.btn-primary:hover {
  background: #ffffff;
  filter: none;
  transform: none;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}
:root .btn.btn-primary:active {
  transform: scale(0.98);
}

/* Secondary: an outline, no fill. */
:root .btn.btn-ghost,
:root .btn.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--b1);
  box-shadow: none;
}
:root .btn.btn-ghost:hover,
:root .btn.btn-secondary:hover {
  background: var(--s1);
  border-color: var(--b2);
  transform: none;
}

/* Destructive: the extension's Stop button. */
:root .btn.btn-danger {
  background: var(--s1);
  color: var(--err);
  border-color: var(--err-bd);
  box-shadow: none;
}
:root .btn.btn-danger:hover {
  background: var(--err-bg);
}

:root .btn.btn-lg {
  height: 44px;
  padding: 0 20px;
  font-size: 15px;
  border-radius: 10px;
}
:root .btn.btn-sm {
  height: 34px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 8px;
}
:root .btn[aria-disabled="true"],
:root .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── Nav ──────────────────────────────────────────────────────────────── */
:root .nav {
  background: rgba(10, 10, 10, 0.92);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  box-shadow: none;
}
:root .nav.is-scrolled,
:root .nav.scrolled {
  border-bottom-color: var(--b1);
}

/* The logo alone: no chip, ring or shadow behind it. */
:root .brand-mark,
:root .brand-mark::before,
:root .brand-mark::after {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
:root .nav .brand-logo-img {
  width: 30px;
  height: 30px;
  filter: none;
  box-shadow: none;
  border-radius: 0;
}
:root .nav .brand {
  gap: 10px;
}
:root .nav .brand-text {
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
}
:root .nav .brand-name {
  font-family: var(--ui-sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
:root .nav .brand-tag {
  font-family: var(--ui-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text3);
}

:root .nav-links a:not(.btn) {
  font-family: var(--ui-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--text2);
  transition: color 0.15s ease;
}
:root .nav-links a:not(.btn):hover {
  color: var(--text);
}

:root .nav-links .nav-cta.btn {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 8px;
}

/* Sign in: a quiet secondary control. Signed in: the avatar. */
:root .nav-links .btn.nav-signin {
  height: 32px;
  padding: 0 6px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  background: transparent;
  border: 0;
  color: var(--text2);
  box-shadow: none;
}
:root .nav-links .btn.nav-signin:hover {
  background: transparent;
  color: var(--text);
}
:root .nav-links .btn.nav-signin.nav-avatar {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  background: var(--s2);
  border: 1px solid var(--b2);
  color: var(--text);
  font-family: var(--ui-mono);
  font-size: 13px;
  font-weight: 600;
}
:root .nav-links .btn.nav-signin.nav-avatar:hover,
:root .nav-links .btn.nav-signin.nav-avatar[aria-expanded="true"] {
  border-color: var(--ok-bd);
  background: var(--s3);
}

:root .nav-menu summary {
  height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--s1);
  border: 1px solid var(--b1);
  box-shadow: none;
  font-family: var(--ui-sans);
  font-size: 13px;
  font-weight: 600;
}
:root .nav-menu-panel {
  background: var(--s1);
  border: 1px solid var(--b1);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ── Account menu (signed in) ─────────────────────────────────────────── */
.acct-menu-wrap {
  position: relative;
  display: inline-flex;
}
.acct-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  width: 260px;
  padding: 6px;
  background: var(--s1);
  border: 1px solid var(--b1);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  font-family: var(--ui-sans);
  transform-origin: top right;
  animation: acctMenuIn 0.16s var(--ui-ease);
}
.acct-menu[hidden] {
  display: none;
}
@keyframes acctMenuIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.acct-menu-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 12px;
  border-bottom: 1px solid var(--b1);
  margin-bottom: 6px;
}
.acct-menu-av {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--s2);
  border: 1px solid var(--b2);
  font-family: var(--ui-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.acct-menu-who {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.acct-menu-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acct-menu-email {
  font-family: var(--ui-mono);
  font-size: 11px;
  color: var(--text3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acct-menu a,
.acct-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text2);
  font: 500 13.5px/1.2 var(--ui-sans);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.acct-menu a:hover,
.acct-menu button:hover,
.acct-menu a:focus-visible,
.acct-menu button:focus-visible {
  background: var(--s2);
  color: var(--text);
  outline: none;
}
.acct-menu svg {
  flex: 0 0 16px;
  color: var(--text3);
}
.acct-menu .acct-menu-sep {
  height: 1px;
  background: var(--b1);
  margin: 6px 4px;
}
.acct-menu .acct-menu-plan {
  margin-left: auto;
  font-family: var(--ui-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text3);
}
.acct-menu .acct-menu-plan.is-pro {
  color: var(--ok);
}

/* ── Scroll reveal ────────────────────────────────────────────────────── */
/* Content is visible by default. reveal.js turns this on only when motion is
   allowed. With scroll-driven animations the fade follows the scroll bar:
   in from below, out past the top, and the same in reverse going back up. */
@keyframes rvIn {
  from { opacity: 0; transform: translateY(36px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes rvOut {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(-28px) scale(0.985); }
}
@supports (animation-timeline: view()) {
  html.rv-sda .reveal {
    animation: rvIn linear both, rvOut linear forwards;
    animation-timeline: view(), view();
    /* Fixed distances rather than percentages: a tall block (the demo) is
       fully faded in after 220px of scrolling, not only once all of it is
       on screen, so a link that lands on a section never leaves it half
       faded. The fade out only starts once the block is actually leaving
       past the top, never while it sits just under the menu bar. */
    animation-range: entry 0% entry 220px, exit max(0px, calc(100% - 220px)) exit 100%;
  }
}
html.rv-on .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ui-ease), transform 0.7s var(--ui-ease);
  transition-delay: var(--rv-delay, 0s);
}
html.rv-on .reveal.is-in {
  opacity: 1;
  transform: none;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Footer: Copy turns into "Copied" in place for a moment. Both labels share
   one grid cell, so the button never changes size and nothing below moves. */
:root .footer-copy-btn {
  display: inline-grid;
  place-items: center;
}
:root .footer-copy-btn > span {
  grid-area: 1 / 1;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
:root .footer-copy-btn .fc-done {
  opacity: 0;
  transform: translateY(3px);
  color: var(--ok);
}
:root .footer-copy-btn.is-copied {
  border-color: var(--ok-bd);
}
:root .footer-copy-btn.is-copied .fc-idle {
  opacity: 0;
  transform: translateY(-3px);
}
:root .footer-copy-btn.is-copied .fc-done {
  opacity: 1;
  transform: none;
}

/* ── Shared text styles ───────────────────────────────────────────────── */
.ui-label {
  font-family: var(--ui-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text3);
}

/* Legal and inner pages pick up the same type. */
:root .legal-page h1,
:root .legal-page h2,
:root .auth-card h1,
:root .redeem-page h1,
:root .purchase-page h1 {
  font-family: var(--ui-sans);
  letter-spacing: -0.02em;
}

/* Sign-in: Continue with Google is the light button, so the email button
   is an outline and the two never look like the same thing. */
:root .auth-card:has(.btn-oauth) .btn.btn-primary {
  background: transparent;
  color: var(--text);
  border-color: var(--b2);
  box-shadow: none;
}
:root .auth-card:has(.btn-oauth) .btn.btn-primary:hover {
  background: var(--s1);
}

/* Stacked actions on the sign-in and checkout cards: flex:1 in a column
   collapsed the new fixed-height buttons to a sliver. */
:root .auth-actions--stack .btn {
  flex: none;
  width: 100%;
  height: 44px;
}
:root .auth-actions .btn {
  height: 44px;
}

/* Pricing: while checkout is closed the Pro button is a status, not a second
   copy of the Add to Chrome button beside it (sales.js swaps it to ghost and
   relabels it "Checkout opens soon"). */
:root .h-plan--pro .btn.btn-ghost {
  background: transparent;
  border-style: dashed;
  border-color: var(--b2);
  color: var(--text3);
  font-family: var(--ui-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: default;
  pointer-events: none;
}
:root .h-plan--pro .btn.btn-ghost::before {
  content: "" !important;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warn);
  position: static;
  inset: auto;
  display: inline-block;
}

/* ── Standalone pages ─────────────────────────────────────────────────── */
/* Sign-in, the two sign-in link pages, checkout and the 404 page share one
   layout: the brand, then one card, centred in the window, with the green
   hairline the timer and summary cards carry. Status pages (no form) centre
   their text and lead with an icon that says what happened. */
:root .auth-shell {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 48px 20px 64px;
}
:root .auth-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(640px 420px at 50% 32%, rgba(62, 207, 142, 0.055), transparent 70%);
}
:root .auth-box {
  width: 100%;
  max-width: 400px;
}
@media (prefers-reduced-motion: no-preference) {
  :root .auth-box {
    animation: stIn 0.7s var(--ui-ease) both;
  }
}
@keyframes stIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* The brand reads as it does in the menu bar: HumDocs / TYPER. */
:root .auth-brand {
  gap: 10px;
  margin: 0 0 28px;
}
:root .auth-brand img {
  width: 28px;
  height: 28px;
}
:root .auth-brand .n {
  font: 600 16px/1 var(--ui-sans);
  letter-spacing: -0.02em;
  color: var(--text);
}
:root .auth-brand .k {
  font: 500 11px/1 var(--ui-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text3);
}
:root .auth-brand .k::before {
  content: "/ ";
}

:root .auth-card {
  position: relative;
  overflow: hidden;
  padding: 36px 32px 32px;
  background: #0f0f0f;
  border: 1px solid #1f1f1f;
  border-radius: 18px;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
:root .auth-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(62, 207, 142, 0.35) 35%, rgba(110, 231, 180, 0.25) 50%, rgba(62, 207, 142, 0.35) 65%, transparent);
}
:root .auth-card h1 {
  margin: 0 0 10px;
  font: 600 22px/1.25 var(--ui-sans);
  letter-spacing: -0.025em;
  color: var(--text);
}
:root .auth-lede {
  margin: 0 0 26px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text2);
}
:root .auth-card h1,
:root .auth-card .auth-lede {
  text-align: center;
}
:root .auth-foot .auth-back {
  margin-top: 12px;
  text-decoration: none;
  color: var(--text3);
}
:root .auth-card.is-status {
  text-align: center;
  padding: 40px 32px 30px;
}
:root .auth-card.is-status .auth-lede {
  max-width: 32ch;
  text-wrap: balance;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 420px) {
  :root .auth-card,
  :root .auth-card.is-status {
    padding: 32px 22px 26px;
  }
}

/* What happened, at a glance. */
.st-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 20px;
  border-radius: 14px;
  border: 1px solid var(--b1);
  background: #141414;
  color: var(--text2);
}
.st-icon svg {
  display: block;
  width: 22px;
  height: 22px;
}
.st-icon--ok {
  color: var(--ok);
  border-color: var(--ok-bd);
  background: var(--ok-bg);
}
.st-icon--warn {
  color: var(--warn);
  border-color: rgba(232, 184, 75, 0.3);
  background: rgba(232, 184, 75, 0.08);
}
.st-icon--err {
  color: var(--err);
  border-color: var(--err-bd);
  background: var(--err-bg);
}
.st-icon--code {
  width: fit-content;
  min-width: 64px;
  padding: 0 14px;
  font: 600 15px/1 var(--ui-mono);
  letter-spacing: 0.08em;
  color: var(--ok);
  border-color: var(--ok-bd);
  background: var(--ok-bg);
}
.st-spin {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--ok);
  animation: stSpin 0.8s linear infinite;
}
@keyframes stSpin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .st-spin { animation-duration: 2.4s; }
}

/* The quiet way back, under the main action. */
.auth-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font: 500 14px/1 var(--ui-sans);
  color: var(--text3);
  text-decoration: none;
  transition: color 0.15s ease;
}
.auth-back:hover {
  color: var(--text);
}
.auth-back span {
  transition: transform 0.2s var(--ui-ease);
}
.auth-back:hover span {
  transform: translateX(-3px);
}

/* A row of useful links (404). */
.st-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin: 24px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid #1c1c1c;
  list-style: none;
}
.st-links a {
  font-size: 13.5px;
  color: var(--text3);
  text-decoration: none;
  transition: color 0.15s ease;
}
.st-links a:hover {
  color: var(--text);
}

:root .auth-foot {
  margin-top: 22px;
  text-align: center;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text3);
}
:root .auth-foot a {
  color: var(--text2);
  text-decoration: underline;
  text-decoration-color: var(--b2);
  text-underline-offset: 3px;
}
:root .auth-foot a:hover {
  color: var(--text);
}
/* .auth-actions sets display: flex, which beats the browser's own rule for
   the hidden attribute. Without this, a card showed its "Get a new link"
   button beside the normal one before anything had gone wrong. */
:root .auth-card [hidden] {
  display: none !important;
}

/* The same card inside a normal page (redeem): the menu bar and footer stay,
   and the card sits centred in the space between them. */
:root .auth-shell--page {
  min-height: calc(100vh - 72px);
  min-height: calc(100dvh - 72px);
  padding: 56px 20px 80px;
}

/* Redeem: one key field, typed in the extension's mono. */
:root .redeem-card .redeem-input {
  display: block;
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--b1);
  background: #0a0a0a;
  color: var(--text);
  font: 500 17px/1 var(--ui-mono);
  letter-spacing: 0.08em;
  text-align: center;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
:root .redeem-card .redeem-input::placeholder {
  color: #4a4a4a;
}
:root .redeem-card .redeem-input:focus {
  border-color: var(--ok-bd);
  box-shadow: 0 0 0 3px rgba(62, 207, 142, 0.12);
}
:root .redeem-card .redeem-input.redeem-input--error {
  border-color: var(--err-bd);
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.1);
}
:root .redeem-card .redeem-msg {
  min-height: 0;
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--err);
}
:root .redeem-card .redeem-msg:empty {
  display: none;
}
:root .redeem-card .redeem-msg.redeem-msg--ok {
  color: var(--ok);
}
:root .redeem-card .auth-actions {
  margin-top: 14px;
}
:root .redeem-card .redeem-hint {
  margin: 14px auto 0;
  max-width: 34ch;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text3);
  text-wrap: balance;
}

/* While checkout is closed, a "Checkout opens soon" button is a status, not
   something to press: the same dashed look as on the pricing card. */
:root a.btn.btn-ghost[href="purchase.html"],
:root a.btn.btn-ghost[href="/purchase.html"] {
  background: transparent;
  border-style: dashed;
  border-color: var(--b2);
  color: var(--text3);
  font-family: var(--ui-mono);
  font-size: 12.5px;
  font-weight: 500;
  pointer-events: none;
  gap: 8px;
}
:root a.btn.btn-ghost[href="purchase.html"]::before,
:root a.btn.btn-ghost[href="/purchase.html"]::before {
  content: "" !important;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warn);
}
:root .redeem-card .redeem-msg {
  font-family: var(--ui-sans);
}
/* The success state is the card's own content, not a box inside it. */
:root .redeem-card .redeem-success {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  text-align: center;
}
:root .redeem-card:has(#redeem-success:not([hidden])) .auth-back {
  display: none;
}

/* Google's own sign-in button draws itself in an iframe at the width we
   give it; this keeps it centred and the height steady while it loads. */
.auth-gsi {
  display: flex;
  justify-content: center;
  min-height: 44px;
  margin-bottom: 4px;
  color-scheme: light;
}