/*
 * Restyled sign-in page (/sign-in/, lib/modules/sign-in/sign-in.php).
 *
 * The same card as the login popup (#login-modal in include/header.php):
 * white, a red top edge, labelled 48px fields with a blue focus ring, a
 * show-password button, a full-width red Log In button and a "Join today"
 * line underneath. Everything is scoped under .si / body.si-page, so no
 * other page changes.
 *
 * Hebrew pages load sign-in.rtl.css instead (config.php RTL_CSS), generated
 * from this file by bin/build-rtl-css.sh - re-run it after editing this file.
 */

/* The site's usual dark gray page, on phones too (styles.css only sets it
   from 768px up; below that it is a light gray gradient). */
body.si-page {
    background: #444;
}

.si {
    --si-red: #d93337;
    --si-red-dark: #b0262a;
    --si-red-soft: #fdeeee;
    --si-blue: #0c83eb;
    --si-ink: #1f1f1f;
    --si-text: #444;
    --si-muted: #767676;
    --si-line: #c9c9c9;
    --si-font: 'Helvetica Neue', Helvetica-Neue, Helvetica, Arial, sans-serif;
    --si-font-head: HelveticaNeue-CondensedBold, HelveticaNeueBoldCondensed, HelveticaNeue-Bold-Condensed, 'Helvetica Neue Bold Condensed', 'Open Sans Condensed', 'Helvetica Neue', Helvetica-Neue, Helvetica, Arial, sans-serif;
    font: 15px/1.45 var(--si-font);
    color: var(--si-text);
    text-align: left;
}

.si *,
.si *::before,
.si *::after {
    box-sizing: border-box;
}

.si.si-shell {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    padding: 48px 16px 64px;
}

.si .si-card {
    overflow: hidden;
    padding: 30px 32px 28px;
    border-top: 4px solid var(--si-red);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.si .si-title {
    margin: 0 0 4px;
    padding: 0;
    font: 700 28px/1.15 var(--si-font-head);
    text-transform: none;
    color: var(--si-ink);
}

.si .si-sub {
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--si-muted);
}

/* Wrong details / throttle message, above the fields. */
.si .si-alert {
    margin: 0 0 20px;
    padding: 12px 14px;
    border: 1px solid #f3c2c4;
    border-left: 4px solid var(--si-red);
    border-radius: 6px;
    background: var(--si-red-soft);
    font-size: 14px;
    line-height: 1.45;
    color: var(--si-ink);
}

.si .si-alert a {
    font-weight: bold;
    color: var(--si-red);
}

.si .si-label {
    display: block;
    margin: 0 0 6px;
    padding: 0;
    font: bold 13px/1.2 var(--si-font);
    color: var(--si-ink);
}

.si .si-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.si .si-forgot {
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    color: var(--si-muted);
}

.si .si-forgot:hover {
    color: #404040;
    text-decoration: underline;
}

/* The fields. styles.css styles bare <input> and [placeholder] site-wide,
   so these are explicit about everything. */
.si .si-input {
    display: block;
    width: 100%;
    min-width: 0;
    height: 48px;
    margin: 0 0 16px;
    padding: 0 12px;
    border: 1px solid var(--si-line);
    border-radius: 6px;
    background: #fff;
    box-shadow: none;
    font: 16px var(--si-font);   /* 16px stops iOS zooming in */
    color: var(--si-ink) !important;
}

.si .si-input:focus {
    outline: 0;
    border-color: var(--si-blue);
    box-shadow: 0 0 0 3px rgba(12, 131, 235, .18);
}

.si .si-input.is-invalid {
    border-color: var(--si-red);
}

.si .si-error {
    margin: -10px 0 14px;
    font-size: 13px;
    font-weight: bold;
    color: var(--si-red);
}

.si .si-pass {
    position: relative;
}

.si .si-pass .si-input {
    padding-right: 48px;
}

.si .si-eye {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--si-muted);
    cursor: pointer;
}

.si .si-eye[aria-pressed="true"] {
    color: var(--si-red);
}

.si .si-eye:focus {
    outline: 0;
}

.si .si-eye:focus-visible {
    box-shadow: 0 0 0 2px var(--si-blue);
}

.si .si-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    padding: 0;
    font: 15px/1.3 var(--si-font);
    color: var(--si-text);
    cursor: pointer;
}

.si .si-check input {
    width: 20px;
    height: 20px;
    min-width: 0;
    margin: 0;
    accent-color: #404040;
}

.si .si-btn {
    display: block;
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: var(--si-red);
    font: bold 17px/1 var(--si-font);
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
}

.si .si-btn:hover {
    background: var(--si-red-dark);
}

.si .si-btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(12, 131, 235, .35);
}

.si .si-foot {
    margin: 20px 0 0;
    text-wrap: balance;
    font-size: 15px;
    text-align: center;
    color: #ddd;   /* on the dark page */
}

.si .si-join {
    font-weight: bold;
    text-decoration: none;
    color: #ff9a9c;   /* the site red, lightened to read on #444 (4.8:1) */
}

.si .si-join:hover {
    color: #fff;
    text-decoration: underline;
}

/* Password reset (/forgot/, lib/modules/forgot/forgot.php) uses this card
   too. A green "check your e-mail" note, a small line under a form, the
   read-only account e-mail above the new password, and a button that is a
   link. */
.si .si-note {
    margin: 0 0 20px;
    padding: 12px 14px;
    border: 1px solid #bfe3c7;
    border-left: 4px solid #2e8540;
    border-radius: 6px;
    background: #eef8f0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--si-ink);
}

.si .si-hint {
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--si-muted);
}

.si .si-hint a {
    font-weight: bold;
    color: var(--si-text);
}

.si .si-input.si-readonly,
.si .si-input.si-readonly:focus {
    border-color: #e2e2e2;
    background: #f4f4f4;
    box-shadow: none;
    color: var(--si-text) !important;
}

.si a.si-btn-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.si a.si-btn-link:hover,
.si a.si-btn-link:focus {
    color: #fff;
    text-decoration: none;
}

/* Phones: the card fills the width, with a little less padding. */
@media (max-width: 575px) {
    .si.si-shell {
        padding: 24px 12px 48px;
    }

    .si .si-card {
        padding: 24px 20px 22px;
    }
}