/* Provider colors are contractual and deliberately independent of DoorVault
   themes. The tile row's dark-theme colors below are each provider's own
   OFFICIAL dark/black button guidance (Google's published dark-theme
   button spec, Apple's Sign in with Apple HIG black button style) —
   sourced from their branding documentation, never invented here. See
   the .auth-provider-tile--google / --apple rules below for citations. */
.auth-provider-stack {
    display: grid;
    gap: var(--space-3);
}

.auth-provider-button {
    width: 100%;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: 10px var(--space-4);
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    transition: filter var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.auth-provider-button:hover {
    filter: brightness(0.96);
    transform: translateY(-1px);
}

.auth-provider-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.auth-provider-button--apple {
    min-height: 50px;
    padding-top: 0;
    padding-bottom: 0;
    border-color: #fff;
    background: #fff;
    color: #000;
    gap: 0;
}

.auth-provider-button--apple:hover {
    color: #000;
}

.auth-provider-button--google {
    border-color: #747775;
    background: #fff;
    color: #1f1f1f;
}

.auth-provider-button--google:hover {
    color: #1f1f1f;
}

.auth-provider-button__mark {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.auth-provider-button__mark--apple {
    width: 50px;
    height: 50px;
}

/* ── Icon-only square tiles (login redesign) ──────────────────────────────
   Rendered by templates/partials/auth_provider_buttons.html when included
   with auth_provider_variant = 'tile'. The pill rules above are untouched
   and still used by register.html. */
.auth-provider-grid {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
}

.auth-provider-tile {
    width: 88px;
    height: 52px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: filter var(--transition-fast), border-color var(--transition-fast);
}

.auth-provider-tile:focus-visible {
    outline: 2px solid var(--dv-accent, var(--accent));
    outline-offset: 3px;
}

.auth-provider-tile__mark {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 1;
}

/* Google's own official "dark theme" button spec (Sign in with Google
   Branding Guidelines, developers.google.com/identity/branding-guidelines):
   background #131314, 1px inset border #8E918F. Verified 2026-09-22 this
   white backing is current spec, not a retired blue-button artifact: the
   page's "Google logo in the Sign in with Google button" section states,
   unconditionally across all themes, "Regardless of the text, you can't
   change the size or color of the Google 'G' logo. It must be the
   standard color version (the standard color gradient super G logo) and
   appear on a white background." The Dark theme swatch on the same page
   shows exactly this: the full-color G sitting on its own white chip
   inside the #131314 button fill, not directly on the dark fill. So the
   mark keeps its small white chip behind it here too. */
.auth-provider-tile--google {
    background: #131314;
    border-color: #8E918F;
}

.auth-provider-tile--google:hover {
    filter: brightness(1.15);
}

.auth-provider-tile--google .auth-provider-tile__mark {
    background: #fff;
    border-radius: 50%;
    padding: 3px;
    box-sizing: content-box;
}

/* Apple's Sign in with Apple HIG defines exactly two official button
   fills, "white" and "black" (developer.apple.com/design/human-interface-
   guidelines/sign-in-with-apple) — never a custom color. Apple's own text
   actually recommends the WHITE style for dark surroundings ("don't use
   [black] on black or dark backgrounds"); the black style is used here
   instead because it's the one that matches this row's dark tile
   treatment and is still one of Apple's two sanctioned fills. Logo/title
   colors "must be either black or white" per the HIG — black tile pairs
   with the white logo mark.
   Deviation from literal spec: background/border use this app's own
   near-black surface recipe (var(--dv-bg-input) / var(--dv-border), the
   SAME pair the Passkey tile next to it already uses) instead of pure
   #000. Literal #000 on this already-near-black page read as a
   near-invisible void — the border alone wasn't enough separation
   (confirmed visually in proof/dark-provider-tiles.png). This is still
   the black-fill family Apple specifies (still black-ish, still a white
   glyph, same fill logic) — just DoorVault's own slightly-lighter
   near-black tone instead of pure black, so the tile stays visible
   against the page rather than a color Apple never sanctioned. */
.auth-provider-tile--apple {
    background: var(--dv-bg-input, #1a1a1a);
    border-color: var(--dv-border, #2b2b2b);
}

.auth-provider-tile--apple:hover {
    filter: brightness(1.4);
}

/* Back to the bi-apple icon-font glyph (not the derived PNG asset): the
   PNG's actual glyph content sat in a smaller bounding box than its full
   canvas (built-in button padding baked into the source asset), so at a
   20px tile size it rendered ~7x8px — a third the size of the G and the
   fingerprint icon beside it. The icon font glyph fills its box like
   those two do. Colored white (not the black used against the old white
   tile) to read against this now-dark fill. */
.auth-provider-tile__mark--apple-glyph {
    color: #fff;
}

.auth-provider-tile--passkey {
    background: var(--dv-bg-input, #1a1a1a);
    border-color: var(--dv-border, var(--border));
    color: var(--dv-fg-1, var(--text-primary));
}

.auth-provider-tile--passkey:hover {
    border-color: var(--dv-fg-3, var(--text-muted));
}

.auth-provider-tile--passkey[aria-busy="true"] {
    cursor: progress;
}

.auth-provider-tile--passkey .spinner-border {
    width: 20px;
    height: 20px;
    border-width: 2px;
    color: var(--dv-fg-1, var(--text-primary));
}