/* The door (DESIGN.md, The door): the one place the brand is seen, after the
   T3's face. The plate is the dot grille, the waiting surface, and the mark's
   ring is its dial in the brand's gold; while a Stream is LIVE the dial
   carries the LIVE dot at two o'clock. The name, what is happening inside
   and the form are the control zone, with the one green key. Tokens only;
   nothing moves, no shadow or gradient. */
body.landing-mode {
    margin: 0;
    min-height: 100vh;
    background: var(--bg-0);
    color: var(--text-1);
    font-family: var(--font-ui);
}

.signin {
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 27.5rem;
}

/* —— The plate and its dial —— */
.signin-plate {
    display: grid;
    place-items: center;
    margin: var(--space-6) 0 var(--space-6) var(--space-6);
    border-radius: var(--radius-tile);
    background-color: var(--bg-1);
}
/* The dial sits on a smooth disc: its ground and an outline one pitch wide
   clear the grille's dots around the ring. */
.signin-dial {
    position: relative;
    box-sizing: border-box;
    width: min(26.25rem, 62%);
    aspect-ratio: 1;
    border: 3px solid;
    border-color: var(--house-gold);
    border-radius: 50%;
    background: var(--bg-1);
    outline: var(--garnish-pitch) solid var(--bg-1);
}
/* The LIVE dot at two o'clock, just outside the ring. */
.signin-dial-live {
    position: absolute;
    left: calc(50% + (50% + 3.375rem) * 0.866);
    top: calc(50% - (50% + 3.375rem) * 0.5);
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: var(--live);
    outline: var(--garnish-pitch) solid var(--bg-1);
    transform: translate(-50%, -50%);
}

/* —— The name, and what is happening inside —— */
.signin-ident { margin-bottom: var(--space-4); }
.signin-name {
    margin: 0;
    font-size: 3rem;
    line-height: 3.5rem;
    font-weight: 500;
    letter-spacing: var(--tracking-display);
    color: var(--text-1);
}
.signin-state {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-2) 0 0;
    font-family: var(--font-mono);
    font-size: var(--type-label);
    line-height: 1rem;
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-2);
}
.signin-state .glyph { width: 0.5rem; height: 0.5rem; vertical-align: 0; }

/* —— The control zone —— */
.signin-controls {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-12) var(--space-12) var(--space-12) var(--space-12);
}

/* The shared inline error (app.css .form-error-block) above the fields */
.signin-error { margin: 0; }

.signin-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.signin-field-row .form-label { display: block; color: var(--text-1); }

.signin-input {
    box-sizing: border-box;
    width: 100%;
    height: 2.5rem;
    padding: 0 var(--space-3);
    font-family: var(--font-ui);
    font-size: 1rem;
}

.signin-password { position: relative; }
.signin-password .signin-input { padding-right: 4.5rem; }

.signin-reveal {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    padding: 0 var(--space-4);
    border: 0;
    background: none;
    color: var(--text-2);
    font-family: var(--font-mono);
    font-size: var(--type-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    cursor: pointer;
}
.signin-reveal:hover { color: var(--text-1); }

.signin-remember {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 2.75rem;
    color: var(--text-1);
    font-size: var(--text-base);
    cursor: pointer;
}
.signin-remember .form-check-input { margin: 0; }

/* The one green key, two-tier: the action over its shortcut */
.signin-submit {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    min-width: 10rem;
    min-height: 3rem;
    padding: var(--space-2) var(--space-6);
    font-family: var(--font-ui);
    font-size: 1rem;
    cursor: pointer;
}
.signin-submit small {
    margin-top: var(--space-1);
    padding-top: var(--space-1);
    border-top: 1px solid currentColor;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 0.75rem;
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.signin-help {
    margin: 0;
    color: var(--text-2);
    font-size: var(--text-sm);
    line-height: 1.25rem;
}

.signin-private {
    margin: var(--space-4) 0 0;
    font-family: var(--font-mono);
    font-size: var(--type-label);
    line-height: 1rem;
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-2);
}

/* —— Phone: the plate on top, the controls under the thumb —— */
@media (max-width: 767.98px) {
    .signin {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(15rem, 1fr) auto;
    }
    .signin-plate { margin: var(--space-4) var(--page-margin) 0; }
    .signin-dial { width: min(14rem, 56%); border-width: 2px; }
    .signin-dial-live {
        left: calc(50% + (50% + 1.875rem) * 0.866);
        top: calc(50% - (50% + 1.875rem) * 0.5);
        width: 1.875rem;
        height: 1.875rem;
    }
    .signin-name { font-size: 2.25rem; line-height: 2.75rem; }
    .signin-controls {
        padding: var(--space-6) var(--page-margin) max(var(--space-6), env(safe-area-inset-bottom));
    }
    .signin-input { height: 3rem; }
    /* The phone ends on the one green key, at the bottom of the thumb zone:
       the help line moves above it and the private legend stays on the desk. */
    .signin-help { order: 1; }
    .signin-submit { order: 2; align-self: stretch; min-height: 4rem; }
    /* A phone's keyboard has no Enter to name; the key says what it does. */
    .signin-submit small { display: none; }
    .signin-private { display: none; }
}

/* —— New password: sign out sits where the private legend does —— */
.signin-signout {
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    text-decoration: none;
}
.signin-signout:hover { color: var(--text-1); }
@media (max-width: 767.98px) {
    form.signin-private { display: block; }
}