/* The sign-in and create-account form (#822): real HTML hung off <html>, laid out by the design
   system's own kit (tokens.css + components.css, copied into the bundle at build time) and
   positioned by Compose over the rectangle the card reserves. Scoped to #ef-auth-form so nothing
   here can reach anything else on the page. */
#ef-auth-form {
    position: fixed;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: var(--m3-space-4);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    visibility: hidden;
    font-family: var(--m3-font-sans);
    color-scheme: light;
}
#ef-auth-form[data-theme="dark"] { color-scheme: dark; }
#ef-auth-form .ef-auth__names { display: flex; gap: var(--m3-space-4); }
#ef-auth-form .ef-auth__names .fm3-textfield { flex: 1; min-width: 0; }
/* The card behind the form is surface-container-low; the label's knock-out matches it. */
#ef-auth-form .fm3-textfield__label { background: var(--m3-surface-container-low); }
/* 48 px including the border, as the Compose field is: the kit's input is 48 px of padding and
   line height on its own, which would make the bordered box 50. */
#ef-auth-form .fm3-textfield__box { box-sizing: border-box; min-height: 48px; }
/* Skia sets the resting label and the input text one pixel higher than the browser does. */
#ef-auth-form .fm3-textfield__label { top: calc(50% - 1px); }
#ef-auth-form .fm3-textfield__box:focus-within .fm3-textfield__label,
#ef-auth-form .fm3-textfield__input:not(:placeholder-shown) ~ .fm3-textfield__label { top: 0; }
#ef-auth-form .fm3-textfield__input { padding: 10px 0 12px; }
/* The Compose kit's type tokens carry tracking (M3Tokens.kt: body 0.5, small 0.4, labels 0.1);
   the CSS tokens do not, and without it the browser's glyphs sit a touch tighter than Skia's. */
#ef-auth-form .fm3-textfield__input,
#ef-auth-form .fm3-textfield__label { letter-spacing: 0.5px; }
#ef-auth-form .fm3-textfield__box:focus-within .fm3-textfield__label,
#ef-auth-form .fm3-textfield__input:not(:placeholder-shown) ~ .fm3-textfield__label,
#ef-auth-form .fm3-textfield__supporting { letter-spacing: 0.4px; }
#ef-auth-form .ef-auth__toggle,
#ef-auth-form .ef-auth__submit { letter-spacing: 0.1px; }
#ef-auth-form .fm3-textfield__input { font-family: var(--m3-font-sans); }
#ef-auth-form .ef-auth__toggle {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
    font: var(--m3-type-label-md);
    font-family: var(--m3-font-sans);
    color: var(--m3-on-surface-variant);
}
#ef-auth-form .ef-auth__toggle:hover { color: var(--m3-on-surface); }
#ef-auth-form .ef-auth__submit { width: 100%; margin-top: var(--m3-space-2); }
/* Chrome paints a filled input with its own pale slab and text colour, both !important in the
   UA sheet. Clipping the background to the glyphs leaves nothing of the slab; the text colour is
   restated through the one property the UA sheet does not set. */
#ef-auth-form input:-webkit-autofill,
#ef-auth-form input:-webkit-autofill:hover,
#ef-auth-form input:-webkit-autofill:focus {
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: var(--m3-on-surface);
    caret-color: var(--m3-primary);
}
/* Forgot password? sits right-aligned between the password field and the button. */
#ef-auth-form .ef-auth__secondary { display: flex; justify-content: flex-end; margin-top: calc(-1 * var(--m3-space-1)); }
/* The same link as the card's switch line (Create account): body text, semibold, primary. */
#ef-auth-form .ef-auth__link { font: var(--m3-type-body-md); font-family: var(--m3-font-sans); font-weight: 600; letter-spacing: .25px; color: var(--m3-primary); text-decoration: none; }
#ef-auth-form .ef-auth__link:hover { text-decoration: underline; text-underline-offset: 3px; }
/* An email fixed by an invitation: read-only, dashed, with a lock where the toggle would be. */
#ef-auth-form .ef-auth__lock { display: none; color: var(--m3-on-surface-variant); flex-shrink: 0; }
#ef-auth-form .fm3-textfield--locked .ef-auth__lock { display: inline-flex; }
#ef-auth-form .fm3-textfield--locked .fm3-textfield__box { border-style: dashed; background: var(--m3-surface-container); }
#ef-auth-form .fm3-textfield--locked .fm3-textfield__input { color: var(--m3-on-surface-variant); }
#ef-auth-form .fm3-textfield--locked .fm3-textfield__label { background: linear-gradient(var(--m3-surface-container-low) 50%, var(--m3-surface-container) 50%); }