/* PLT-GOOGLE-LOGIN-BUILD-01A — the Google button slot and the google-complete screens (auth pages only; loaded only with an
   enabled slot or the google-complete page). */
.g-auth { margin: 18px 0 6px; }
/* PLT-GOOGLE-LOCAL-INTEGRATION-PROOF-01 — a FIXED box. For one frame after Google inserts its button the inserted nodes are
   taller than the final button (its frame is not sized yet); with only a minimum height the whole popup grew by about
   40 px and shrank back — a visible flash of the popup. The box never changes size now, whatever is inside it. */
.g-auth__button { display: flex; justify-content: center; align-items: flex-start; height: 44px; overflow: hidden; }
.g-auth__status { margin: 10px 0 0; font-size: 14px; color: var(--color-danger, #b42318); text-align: center; }
.g-auth__divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; font-size: 13px; color: var(--color-muted, #667085); }
.g-auth__divider::before, .g-auth__divider::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--color-border, #e4e7ec); }
.g-complete__form, .g-complete form { margin-top: 20px; }
@media (max-width: 720px) {
    .g-auth { margin-top: 14px; }
}
/* PLT-GOOGLE-CONTINUE-WELCOME-POLISH-02 (Mark) — the continue screens speak the grammar of the existing account focus
   steps (name / password): the shared pill → title → intro rhythm and `.pw-form` fields come from v3-auth.css; only what
   is specific to these screens is styled here. Scoped to .g-complete; no shared rule is changed. */
.g-complete .pw-form { margin-top: 16px; max-width: 420px; }
.g-complete .sub { max-width: 46ch; }
/* the address Google confirmed: read-only, exactly like the account field of the password step */
.g-complete .g-complete__fixed { background: var(--paper, #f7f7f5); color: var(--muted, #6b7280); cursor: default; overflow: hidden; text-overflow: ellipsis; }
/* The ONE optional newsletter choice as a calm option row: the whole row is the click target; the title is the label, the
   description and a small note follow (server-held copy). Unchecked by default; a recorded choice (resumed registration)
   is shown disabled. */
.g-complete__check {
    display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; padding: 12px 14px;
    border: 1px solid var(--d-field-border, rgba(23, 29, 24, 0.12)); border-radius: 12px; background: #fff; cursor: pointer;
    box-shadow: 0 1px 2px rgba(23, 29, 24, 0.04);
    transition: border-color .15s ease, background-color .15s ease;
}
.g-complete__check:hover { border-color: var(--d-field-border-hover, rgba(23, 29, 24, 0.26)); }
.g-complete__check:has(input:checked) { border-color: var(--green, #2f8f27); background: var(--green-softer, #f1f9ec); }
.g-complete__check:has(input:focus-visible) { outline: 3px solid var(--green-soft, #e4f4dc); outline-offset: 2px; }
.g-complete__check input { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--green, #2f8f27); cursor: inherit; }
.g-complete__check-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.g-complete__check-label { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink, #171d18); }
/* PLT-GOOGLE-NEWSLETTER-COPY-02B — the description line between the title and the small note */
.g-complete__check-desc { font-size: 14px; line-height: 1.4; color: var(--ink, #171d18); }
.g-complete__check-hint { font-size: 13px; line-height: 1.4; color: var(--muted, #566159); }
.g-complete__check--frozen { cursor: default; background: var(--paper, #f7f7f5); }
.g-complete__check--frozen:hover { border-color: var(--d-field-border, rgba(23, 29, 24, 0.12)); }
/* the one primary action: label + arrow */
.g-complete__submit { justify-content: center; gap: 8px; }
.g-complete__submit .ico { width: 18px; height: 18px; }
/* PLT-GOOGLE-BRANDING-PREVIEW-CLOSEOUT-02A (Mark) — "Connect Google" shows Google's "G", so this ONE button follows Google's
   Sign in with Google branding guidelines for a custom button (developers.google.com/identity/branding-guidelines): the
   LIGHT theme — fill #FFFFFF, 1px inside stroke #747775, label #1F1F1F — with the standard-colour "G" on white in front
   of the label, 10px apart. The "G" is Google's own pre-approved icon file (byte-identical to the download bundle), shown
   at its own size: no rule resizes the 40px tile, and the 20px window shows its centre — the "G" on its white field.
   It is never recoloured, filtered, blended or stretched (on small phones the storefront scales the whole page content
   by 5%; the button and its mark scale together, in proportion). Only this button; the site's primary button is unchanged. */
/* (.btn in the selector: the sitewide button rule sets its own 8px gap with a higher specificity) */
.g-complete .btn.g-complete__google { gap: 10px; background: #fff; color: #1f1f1f; box-shadow: inset 0 0 0 1px #747775; }
.g-complete .btn.g-complete__google:hover { background: #fff; box-shadow: inset 0 0 0 1px #747775, 0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15); }
.g-complete .g-complete__g { flex: 0 0 auto; display: block; width: 20px; height: 20px; overflow: hidden; }
.g-complete .g-complete__g img { display: block; width: 40px; height: 40px; max-width: none; margin: -10px 0 0 -10px; }
.g-complete__benefit { margin: 14px 0 0; max-width: 420px; font-size: 14px; line-height: 1.45; color: var(--muted, #566159); }
.g-complete__exit { margin-top: 12px; }
/* message screens: one statement, one clear way on */
.g-complete__action { margin: 22px 0 0; max-width: 420px; }
.g-complete__action .btn { justify-content: center; text-decoration: none; }
.g-complete .pw-help { margin-top: 22px; }
@media (max-width: 720px) {
    .g-complete__check-label { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
    .g-complete__check { transition: none; }
}
/* PLT-GOOGLE-LOGIN-PHASE3-EMAIL-CODE-01 — six-digit code field (one accessible text input, large tabular digits). */
.g-code__input { font-size: 28px; letter-spacing: 0.35em; text-align: center; font-variant-numeric: tabular-nums; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; padding: 12px 10px; }
.g-code__input[readonly] { opacity: 0.75; }
.g-code__status { min-height: 1.4em; margin: 6px 0 0; font-size: 14px; color: var(--color-muted, #667085); text-align: center; }
.g-code__resend { margin-top: 10px; text-align: center; }
.g-code__resend-btn { background: none; border: 0; color: var(--color-link, #1b6b2f); font-weight: 600; cursor: pointer; padding: 6px; }
.g-code__resend-btn[disabled] { color: var(--color-muted, #667085); cursor: default; }
/* PLT-GOOGLE-CODE-DIRECT-ENTRY-01A — "Check your email": calmer hierarchy of the one code screen (existing auth styles;
   the sent line reuses .login-notice, problems reuse .login-error). */
.g-complete[data-google-screen="code"] h1 { margin-bottom: 14px; }
.g-code__sent, .g-code__maybe, .g-code__problem { line-height: 1.5; overflow-wrap: anywhere; }
.g-code__sent strong, .g-code__maybe strong { font-weight: 700; }
.g-code__maybe { background: #fff8e6; border-color: #f1dfb3; color: #6b4e00; }
.g-code__benefit { margin: 12px 2px 0; font-size: 14px; line-height: 1.45; color: var(--muted, #566159); }
.g-code__notice { margin-top: 14px; }
.g-complete form.g-code { margin-top: 22px; gap: 14px; }
.g-code__hint { text-align: center; }
.g-code__status:empty { display: none; }
.g-complete form.g-code__resend { margin-top: 14px; }
.g-code__alt { margin-top: 10px; text-align: center; }
@media (max-width: 720px) {
    .g-code__input { font-size: 26px; letter-spacing: 0.3em; }
    .g-code__benefit { font-size: 13.5px; }
}
/* PLT-GOOGLE-LOGIN-TABS-PLACEMENT-01B — sign-in surfaces: the Google zone sits UNDER the active sign-in method ("or" first,
   then the button). The sign-up surfaces keep the default slot (button first). */
.g-auth--below { margin: 16px 0 0; }
.g-auth--below .g-auth__divider { margin: 0 0 14px; }
.g-auth--below .g-auth__status { margin-top: 8px; }

/* PLT-GOOGLE-LOCAL-INTEGRATION-PROOF-01 — Google draws its button in visible stages inside its own frame. While it settles
   the button is invisible (its place stays reserved, it cannot be clicked); then it is shown once, with a short fade.
   Opacity only, no movement; no fade for visitors who prefer reduced motion. */
.g-auth__button > * { transition: opacity .18s ease-out; }
.g-auth__button--settling > * { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .g-auth__button > * { transition: none; }
}