/* public/Styles/Login.css — log in, sign up, password reset, email verification, vendor login */

.auth {
    width: min(var(--shell), 100% - 32px);
    margin: 0 auto;
    padding: var(--space-8) 0 var(--space-6);
    display: grid;
    gap: var(--space-8);
    align-items: start;
}
@media (min-width: 992px) {
    .auth { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: var(--space-10); padding-top: var(--space-10); }
    .auth--single { grid-template-columns: minmax(0, 460px); justify-content: center; }
}

.auth-panel h1 { font-size: var(--fs-4xl); letter-spacing: -.04em; margin-bottom: var(--space-2); }
.auth-lede { color: var(--muted); margin-bottom: var(--space-6); max-width: 42ch; }
.auth-panel .back-link { margin: 0 0 var(--space-4) -2px; }

.auth-panel form { display: flex; flex-direction: column; }
.auth-panel .btn-full { margin-top: var(--space-2); }

.field__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.auth-small-link { font-size: var(--fs-xs); font-weight: 600; color: var(--orange-text); padding: 6px 0; }
.auth-small-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Password field with show/hide */
.password-input-wrapper { position: relative; width: 100%; }
.password-input-wrapper .field__input { padding-right: 52px; }
.password-toggle {
    position: absolute; top: 50%; right: 2px; transform: translateY(-50%);
    width: 44px; height: 44px; display: grid; place-items: center;
    border: 0; border-radius: var(--radius-md); background: none; color: var(--muted);
}
.password-toggle:hover { color: var(--ink); }
/* Reset page renders its eye as an <i> toggled between fa-eye / fa-eye-slash by resetPassword.js */
.password-toggle i { width: 20px; height: 20px; background: currentColor; }
.password-toggle i.fa-eye {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.password-toggle i.fa-eye-slash {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Live password checklist — signup.js / resetPassword.js swap fa-times-circle ↔ fa-check-circle */
.password-requirements {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px var(--space-3);
    margin-top: var(--space-1); font-size: var(--fs-xs); color: var(--muted);
}
.password-requirements li { display: flex; align-items: center; gap: 6px; }
.password-requirements i { font-style: normal; width: 14px; text-align: center; }
.password-requirements i::before { content: '○'; }
.password-requirements i.fa-check-circle::before { content: '✓'; font-weight: 700; color: var(--ok); }
.password-requirements li:has(.fa-check-circle) { color: var(--ink); }

/* Checkbox row */
.check {
    display: flex; align-items: center; gap: var(--space-3);
    min-height: 44px; margin-bottom: var(--space-3);
    font-size: var(--fs-sm); color: var(--ink); cursor: pointer;
}
.check input { width: 20px; height: 20px; accent-color: var(--ink); flex-shrink: 0; }

.auth-terms { font-size: var(--fs-xs); color: var(--muted); margin: var(--space-2) 0 var(--space-3); }
.auth-terms a, .auth-switch a, .auth-footnote a { color: var(--orange-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.auth-switch { margin-top: var(--space-5); font-size: var(--fs-sm); }
.auth-footnote { margin-top: var(--space-2); font-size: var(--fs-xs); color: var(--muted); }

/* Errors injected by auth.js / adminAuth.js */
.auth-panel .alert { display: flex; gap: var(--space-2); margin: var(--space-2) 0 0; }
.auth-panel .alert i { display: none; }
.input-group { flex-direction: column; }
.field__input[aria-invalid="true"] { border-color: var(--bad); }

/* Loading state on submit */
.btn-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn-loading::after {
    content: ''; position: absolute; width: 18px; height: 18px;
    border: 2px solid var(--ink); border-right-color: transparent; border-radius: 50%;
    animation: auth-spin .7s linear infinite;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }

/* Photo panel beside the form (desktop) */
.auth-aside { display: none; }
@media (min-width: 992px) {
    .auth-aside {
        display: block; position: sticky; top: calc(var(--header-h) + 32px);
        border-radius: 180px 180px var(--radius-xl) var(--radius-xl); overflow: hidden;
        background: var(--green); color: var(--paper);
    }
    .auth-aside img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; }
    .auth-aside p {
        padding: var(--space-5) var(--space-6) var(--space-6);
        font: 400 2rem/1.1 var(--font-serif); font-style: italic; color: var(--lime);
    }
}

/* Email verification */
.auth-status #verification-status { display: grid; justify-items: start; gap: var(--space-3); margin-top: var(--space-4); color: var(--muted); }
.auth-status #verification-status a { color: var(--orange-text) !important; font-weight: 600; }
.loading-spinner {
    width: 32px; height: 32px; border-radius: 50%;
    border: 3px solid var(--line); border-top-color: var(--orange);
    animation: auth-spin .8s linear infinite;
}

/* Vendor login: forest green page, no student chrome */
.vendor-auth { background: var(--green); padding-bottom: 0 !important; }
.auth--vendor { min-height: 100vh; grid-template-columns: minmax(0, 440px); justify-content: center; align-content: center; padding: var(--space-8) 0; }
.auth--vendor .auth-panel { background: var(--paper); border-radius: var(--radius-xl); padding: var(--space-6); }
.auth--vendor .wordmark { font-size: 22px; min-height: 0; }
.wordmark-tag { margin: 2px 0 var(--space-6); font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.auth--vendor h1 { font-size: var(--fs-3xl); }
#errorContainer:empty { display: none; }