/* The design's letter spacing. Form fields do not inherit it (browsers
   reset it on inputs), so they get it below. */
.sa-login .sa-card {
    letter-spacing: 0.03em;
}

.sa-login .sa-title {
    letter-spacing: 0;
    /* When it has to wrap (a narrow phone, a wide font), two even lines
       rather than one word left on its own. */
    text-wrap: balance;
}

/* -------------------------------------------------------- Google / Apple */

.sa-login .sa-social {
    gap: 8px;
}

.sa-login .sa-social-btn {
    gap: 12px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.016em;
}

/* ------------------------------------------------------------- "or" lines */

.sa-login .sa-divider {
    gap: 16px;
    margin: 16px 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--sa-text);
}

/* ----------------------------------------------------------------- fields */

.sa-login .sa-field {
    margin-bottom: 28px;
}

.sa-login .sa-label {
    margin-bottom: 4px;
    font-size: 14px;
    line-height: 20px;
}

.sa-login .sa-input {
    padding-left: 16px;
    padding-right: 16px;
    font-size: 16px;
    letter-spacing: 0.03em;
}

.sa-login .sa-input::placeholder {
    color: var(--sa-muted);
}

/* The login: an email or, for some internal and test accounts, a plain
   username — so the field is type="text", which the Hebrew overlay's rule
   for email fields does not reach. The same treatment here: the Latin text
   runs left to right, while the field keeps the page's alignment (left in
   English, right in Hebrew). match-parent where the browser knows it. */
.sa-login input[name="email"] {
    direction: ltr;
    text-align: inherit;
    text-align: match-parent;
}

/* The eye: 24 px, centred 28 px from the edge. Only the button's width
   changes, so the side it sits on — right, or left in Hebrew — still comes
   from socialauth.css / socialauth.rtl.css. The text keeps clear of it on
   that same side (padding-inline-end is the right in English, the left in
   Hebrew). */
.sa-login .sa-reveal {
    width: 56px;
}

.sa-login .sa-reveal svg {
    width: 24px;
    height: 24px;
}

.sa-login .sa-input-wrap .sa-input {
    padding-inline-end: 56px;
}

/* ------------------------------------------------- "Forgot your password?" */

/* Lines up with the fields: left in English, right in Hebrew (it follows
   the page's direction). */
.sa-forgot {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 24px;
}

.sa-forgot a {
    color: var(--sa-brand);
    font-weight: 500;
    letter-spacing: 0.016em;
    text-decoration: none;
}

.sa-forgot a:hover {
    text-decoration: underline;
}

.sa-forgot a:focus-visible {
    outline: 2px solid var(--sa-brand);
    outline-offset: 2px;
}

/* The link above already makes the space. */
.sa-login .sa-submit {
    margin-top: 0;
    letter-spacing: 0.016em;
}

/* -------------------------------------------------------- the bottom line */

.sa-login .sa-alt {
    font-size: 16px;
    line-height: 24px;
}

.sa-login .sa-alt a {
    font-weight: 500;
    letter-spacing: 0.016em;
}

/* ==================================================================
   768px and up
   ================================================================== */

@media (min-width: 768px) {

    .sa-login .sa-title {
        margin-bottom: 32px;
        font-size: 44px;
        line-height: 52px;
    }
}

/* ==================================================================
   1024px and up — the design itself
   ================================================================== */

@media (min-width: 1024px) {

    /* In the design's font the title just fits the 600 px column; most
       system fonts are wider and would break it in two. It may reach 60 px
       past the column on each side instead — still centred, and invisible
       whenever it fits. */
    .sa-login .sa-title {
        margin: 0 -60px 40px;
        font-size: 56px;
        line-height: 64px;
    }
}