/* The SunDash sign-in screen, in the Rings look (interfaces/rings/DESIGN.md): night-ink ground, tonal
   controls, no shadows, one friendly grotesque. Loaded only for signed-out visitors on the front page, so
   it may style the page itself. The primary button is the inverted pill rather than a ring colour, because
   each ring colour has one job. A failed sign-in is not Alert Red for the same reason. */

@font-face {
    font-family: "SunDash Figtree";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("fonts/figtree-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --si-ink: #0A0E14;
    --si-panel: #121821;
    --si-raised: #1A222E;
    --si-rule: #232C39;
    --si-edge: #2C3644;
    --si-edge-strong: #3A4554;
    --si-text: #F2F5F9;
    --si-text-2: #A3ADBC;
    --si-text-3: #8A95A6;
    --si-silver: #9DA8B8;
    --si-focus: #45D8FF;
    --si-select: #3A78FF;
    --si-sun: #FFD84F;
    --si-font: "SunDash Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

html {
    background: var(--si-ink);
    color-scheme: dark;
    scrollbar-color: #2A3442 var(--si-ink);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body.sundash-signin {
    margin: 0;
    background: var(--si-ink);
}

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

.signin ::selection {
    background: var(--si-select);
    color: #FFFFFF;
}

/* One centred column at every width, the same size on a phone and a desktop */
.signin {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: 24px 16px;
    color: var(--si-text);
    font-family: var(--si-font);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(69, 216, 255, 0.12);
}

.signin-icon {
    display: block;
    flex: none;
    width: 96px;
    height: 96px;
}

/* !important because Brizy styles headings with !important rules of its own. Can go once Brizy has. */
.signin .signin-brand {
    margin: 12px 0 28px !important;
    padding: 0 !important;
    color: var(--si-text) !important;
    font-family: var(--si-font) !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
    text-align: center !important;
    text-transform: none !important;
}

.signin .signin-brand span {
    color: var(--si-sun) !important;
}

/* Hugs its words, so it can't be mistaken for one more field */
.signin-message {
    max-width: 360px;
    margin: -8px 0 16px;
    padding: 9px 14px;
    border-radius: 14px;
    background: var(--si-raised);
    color: var(--si-text);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-wrap: balance;
}

.signin-form {
    width: 100%;
    max-width: 360px;
}

.signin-field + .signin-field {
    margin-top: 14px;
}

.signin-field label {
    display: block;
    margin-bottom: 6px;
    color: var(--si-text-2);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

/* 16px text: anything smaller makes iOS zoom the page when the field takes focus */
.signin-field input {
    display: block;
    width: 100%;
    height: 52px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--si-edge);
    border-radius: 14px;
    background: var(--si-raised);
    color: var(--si-text);
    caret-color: var(--si-focus);
    font-family: var(--si-font);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.15s ease-out, border-color 0.15s ease-out;
}

/* A password manager's fill stays in the palette too */
.signin-field input:-webkit-autofill,
.signin-field input:-webkit-autofill:hover,
.signin-field input:-webkit-autofill:focus {
    border-color: var(--si-edge-strong);
    -webkit-text-fill-color: var(--si-text);
    box-shadow: inset 0 0 0 40px var(--si-raised);
    caret-color: var(--si-focus);
}

.signin-stay {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    margin-top: 4px;
    padding-right: 8px;
    color: var(--si-text);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    touch-action: manipulation;
}

.signin-stay input {
    flex: none;
    width: 24px;
    height: 24px;
    margin: 0;
    border: 1.5px solid var(--si-text-3);
    border-radius: 7px;
    background: var(--si-raised) center / 16px 16px no-repeat;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.15s ease-out, border-color 0.15s ease-out;
}

.signin-stay input:checked {
    border-color: var(--si-text);
    background-color: var(--si-text);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.25 3.25L13 4.75' fill='none' stroke='%230A0E14' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.signin-submit {
    display: block;
    width: 100%;
    min-height: 52px;
    margin: 4px 0 0;
    padding: 0 16px;
    border: 1px solid var(--si-text);
    border-radius: 14px;
    background: var(--si-text);
    color: var(--si-ink);
    font-family: var(--si-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out;
}

/* wp-login.php can be slow to answer, so the tap needs a reply of its own: the button rests, as the Rings
   override buttons do while a request is out. */
.signin-form[aria-busy="true"] .signin-submit {
    border-color: var(--si-rule);
    background: var(--si-panel);
    color: var(--si-text-3);
    cursor: progress;
}

.signin-forgot {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    margin-top: 4px;
    padding: 0 8px;
    border-radius: 8px;
    color: var(--si-text-2);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    touch-action: manipulation;
}

@media (hover: hover) {
    .signin-field input:hover {
        border-color: var(--si-edge-strong);
    }

    .signin-stay:hover input:not(:checked) {
        background-color: var(--si-rule);
    }

    .signin-submit:hover {
        border-color: #FFFFFF;
        background: #FFFFFF;
    }

    .signin-form[aria-busy="true"] .signin-submit:hover {
        border-color: var(--si-rule);
        background: var(--si-panel);
    }

    .signin-forgot:hover {
        color: var(--si-text);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 4px;
    }
}

.signin-submit:active {
    border-color: var(--si-silver);
    background: var(--si-silver);
}

.signin-field input:focus-visible,
.signin-stay input:focus-visible,
.signin-submit:focus-visible,
.signin-forgot:focus-visible {
    outline: 2px solid var(--si-focus);
    outline-offset: 2px;
}

.signin-forgot:focus-visible {
    color: var(--si-text);
}

/* Under 360px, the same margins Rings drops to */
@media (max-width: 359px) {
    .signin {
        padding-right: 10px;
        padding-left: 10px;
    }
}

/* A short window, such as a phone on its side: give the room to the form */
@media (max-height: 600px) {
    .signin {
        justify-content: flex-start;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .signin-icon {
        width: 64px;
        height: 64px;
    }

    .signin .signin-brand {
        margin: 8px 0 16px !important;
        font-size: 28px !important;
    }
}

/* The one moment: the sun rides its track round to the mark as the ring fills behind it, on an exponential
   ease-out like the Rings sweeps. The dash and the turn share a timing function, so the sun stays on the
   arc's end throughout. Asked for less motion, the icon is simply there. */
@media (prefers-reduced-motion: no-preference) {
    .signin-icon-arc {
        animation: signin-fill 800ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    .signin-icon-sun {
        transform-origin: 76px 76px;
        animation: signin-ride 800ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    @keyframes signin-fill {
        from { stroke-dasharray: 0 351.86; }
    }

    @keyframes signin-ride {
        from { transform: rotate(-259.2deg); }
    }
}

@media (prefers-reduced-motion: reduce) {
    .signin-field input,
    .signin-stay input,
    .signin-submit {
        transition: none;
    }
}