/* The unmodified provider logo supplies Google's brand treatment.
   https://developers.google.com/identity/branding-guidelines */
.google-sign-in {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    max-width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    margin: 0 auto;
    border: 1px solid #747775;
    background: #fff;
    color: #1f1f1f;
    font-family: 'Google Sans', Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0;
    cursor: pointer;
    border-radius: var(--radius-control);
}
.google-sign-in img {
    display: block;
    max-width: 100%;
    height: auto;
    flex-shrink: 0;
}
.google-sign-in:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 3px;
}
.auth-google-action {
    margin-bottom: 24px;
}
.google-signup-email,
.lichess-signup-email,
.signup-username {
    overflow-wrap: anywhere;
}
.auth-shell--access {
    max-width: 420px;
}
body .auth-shell--access .auth-card {
    padding: 24px;
}
body .auth-shell--access .auth-recaptcha {
    display: flex;
    justify-content: center;
}
body .auth-shell--access .auth-copy,
body .auth-shell--access .auth-secondary,
body .auth-shell--access .auth-field,
body .auth-shell--access .auth-field .field-label,
body .auth-shell--access .auth-field input,
body .auth-shell--access .auth-submit {
    font-family: inherit;
    letter-spacing: 0;
    text-transform: none;
}
body .auth-shell--access .auth-copy {
    margin: 0 0 24px;
    font-size: 0.95rem;
    text-align: center;
}
body .auth-shell--access .auth-secondary {
    font-size: 0.9rem;
}
body .auth-shell--access .auth-field {
    color: var(--chrome);
    font-size: 0.9rem;
}
body .auth-shell--access .auth-field input {
    font-size: 1rem;
}
body .auth-shell--access .auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    justify-self: stretch;
    min-height: 44px;
    padding: 12px;
    font-size: var(--fs-label, 0.95rem);
    text-align: center;
    text-decoration: none;
}
.auth-methods {
    display: grid;
    gap: 16px;
}
.auth-methods .auth-google-action {
    margin: 0;
}
.auth-methods .google-sign-in {
    width: 100%;
}
.auth-method-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--muted);
    font-size: 0.9rem;
}
/* The rules either side of "or" were --tint at 20% opacity, which on the
   charcoal card measured barely above the card itself, so the word read as
   floating. The raised-object hairline is the lightest rule the ladder
   already names. */
.auth-method-divider::before,
.auth-method-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-raised, rgba(var(--tint-rgb), 0.35));
}
/* Sign-in carries both methods in the card itself rather than the stacked
   .auth-methods chooser that account creation still uses. */
.auth-card > .auth-google-action {
    margin: 0;
}
.auth-card > .auth-google-action .google-sign-in {
    width: 100%;
}
/* Each provider sits in its own zero-margin form, so Google and Lichess met
   edge to edge and read as one fused slab (owner, 2026-09-30: "make it not
   look unfisnished"). Space them like the account-creation chooser's grid. */
.auth-card > .auth-google-action + .auth-google-action {
    margin-top: 16px;
}
.lichess-sign-in {
    gap: 10px;
}
.lichess-sign-in img {
    display: block;
    flex-shrink: 0;
}
.auth-card > .auth-method-divider {
    margin: 16px 0;
}
/* "Forgot password?" belongs to the password field it answers, so it sits
   directly under that field rather than among the page-level links. */
body .auth-shell--access .auth-field-aside {
    margin: -8px 0 0;
    font-size: 0.9rem;
    text-align: right;
}
body .auth-shell--access .auth-field-aside a {
    color: var(--cyan);
}
/* The site's input well edge (#3d4147) sits about 1.6:1 against the card, so
   on these form-only pages the empty fields nearly vanished until focused.
   The course pages' accepted stronger input edge brings them past 3:1. */
body.site-theme-charcoal .auth-shell--access .auth-field input:not(:focus) {
    border-color: #65717f;
}