/*
 * Aloud (v2) auth zone — login, forgot/reset password, resend confirmation,
 * invitation-invalid, and the result screens each of those ends on. A
 * Fraunces title, one amber action. Login carries the scene and Nora
 * (.auth-screen-scene); the plain screens stay on flat --bg.
 *
 * Reuses shared tokens/components from assets/styles/app.css (.btn,
 * .field, .input, .field-error, .screen-title, .text-secondary, .btn-icon)
 * — only auth-specific layout, the password reveal toggle and the alert/
 * result styling (none of which exist yet in app.css) live here.
 *
 * Scoped under .ui like app.css itself.
 */

/* ---------------------------------------------------------------------- */
/* Full screen — login                                                     */
/* ---------------------------------------------------------------------- */

.ui .auth-screen {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg);
    display: flex;
    flex-direction: column;
}

.ui .auth-hero {
    padding: calc(env(safe-area-inset-top, 0px) + 64px) var(--space-5) var(--space-6);
}

.ui .auth-hero-title {
    max-width: 280px;
}

.ui .auth-hero-sub {
    margin-top: var(--space-2);
    font-size: var(--t-4-size);
    line-height: 1.5;
}

/* Login only: the sheet is anchored to the bottom of the scene, which puts the
   amber action in the thumb's reach. Registration shares .auth-screen and
   .auth-panel and must keep its plain stacked layout, hence the modifier. */
.ui .auth-screen-scene .stage {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* .stage-content ships with height: 100%, which is indefinite here (the screen
   sizes itself from min-height), so it would shrink to its content and anchor
   the sheet mid-screen. Flex gives it the real remaining height. */
.ui .auth-screen-scene .stage-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ui .auth-screen-scene .auth-hero {
    padding: calc(env(safe-area-inset-top, 0px) + var(--space-5)) var(--space-5) var(--space-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    text-align: center;
    text-shadow: var(--scene-text-shadow);
    /* The title sits in the top third, where --scene-overlay is still fully
       transparent, and studio-night is at its brightest there (window, lamp).
       The halo the DA asks for has to be local. */
    background: linear-gradient(180deg, rgba(20, 17, 15, .62) 0%, rgba(20, 17, 15, .28) 64%, transparent 100%);
}

/* The forgot-password screen has a parent to go back to; login does not. */
.ui .auth-screen-scene .auth-hero > .btn-icon {
    align-self: flex-start;
}

.ui .auth-screen-scene .auth-panel {
    flex: none;
    margin-top: auto;
}

/* Sits right under the alert rather than a full gap away: it is the way out of
   that error, not a separate block. */
.ui .auth-recover {
    margin-top: calc(var(--space-2) * -1);
    font-size: var(--t-5-size);
    line-height: var(--t-5-line);
}

.ui .auth-recover a {
    color: var(--ink-2);
}

.ui .auth-panel {
    flex: 1;
    background: var(--surface);
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
    padding: var(--space-6) var(--space-5) calc(env(safe-area-inset-bottom, 0px) + var(--space-6));
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* ---------------------------------------------------------------------- */
/* Result screens — email sent, invitation invalid                         */
/* ---------------------------------------------------------------------- */

.ui .auth-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    text-align: center;
    padding: 0 var(--space-2);
}

.ui .auth-result-icon {
    width: 96px;
    height: 96px;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ui .auth-result-icon.is-success {
    background: var(--brand-soft);
    color: var(--brand-ink);
}

.ui .auth-result-icon.is-warning {
    background: var(--surface-2);
    color: var(--warn);
}

.ui .auth-result-text {
    font-size: var(--t-4-size);
    color: var(--ink-2);
    line-height: 1.5;
}

.ui .auth-result-text b {
    color: var(--ink);
}

/* ---------------------------------------------------------------------- */
/* Forms                                                                   */
/* ---------------------------------------------------------------------- */

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

.ui .auth-forgot-link {
    font-size: var(--t-5-size);
    font-weight: 600;
    color: var(--ink-2);
    text-decoration: underline;
    text-underline-offset: 2px;
    align-self: flex-end;
    padding: 6px 2px;
    margin: -6px 0;
}

/* Consent checkbox row (registration: AI processing agreement). */
.ui .auth-consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: var(--t-5-size);
    line-height: 1.4;
    color: var(--ink-2);
}

.ui .auth-consent input {
    width: 20px;
    height: 20px;
    margin-top: 1px;
    flex-shrink: 0;
    accent-color: var(--brand-ink);
}

.ui .auth-consent-label {
    flex: 1;
}

.ui .auth-note {
    font-size: var(--t-5-size);
    color: var(--ink-2);
    text-align: center;
}

/* Password field with a reveal button sitting inside the input's right edge. */
.ui .field-password {
    position: relative;
    display: flex;
}

.ui .field-password .input {
    flex: 1;
    padding-right: 48px;
}

.ui .field-password-toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-2);
    background: none;
    border: none;
}

/* ---------------------------------------------------------------------- */
/* Alerts — account-deleted confirmation, login error                      */
/*                                                                          */
/* Class names match tests/Functional/SecurityControllerTest.php and       */
/* Security/LoginDisclosureTest.php, which assert on .alert-error.         */
/* ---------------------------------------------------------------------- */

.ui .alert {
    border-radius: var(--radius-tile);
    padding: 14px 16px;
    font-size: var(--t-5-size);
    font-weight: 600;
}

.ui .alert-error {
    background: rgba(201, 96, 91, .18);
    color: var(--err);
}

.ui .alert-success {
    background: rgba(143, 191, 154, .18);
    color: var(--ok);
}