/* Shared, low-noise form controls for all public authentication flows. */
:is(
    body.auth-page,
    body[data-peso-page='jobseeker-register'],
    body[data-peso-page='employer-register'],
    body[data-peso-page='forgot-password'],
    body[data-peso-page='reset-password']
) {
    --auth-field-accent: var(--auth-accent, var(--reg-brand, var(--peso-green, #087443)));
}

/* Keep only one visual field container. The actual input never draws a second box. */
body.auth-page .auth-input-wrap {
    overflow: hidden;
    border-color: color-mix(in srgb, var(--auth-line) 82%, transparent) !important;
    background: color-mix(in srgb, var(--auth-field) 92%, var(--auth-surface)) !important;
    box-shadow: inset 0 -1px color-mix(in srgb, var(--auth-line) 72%, transparent) !important;
}

body.auth-page .auth-input-wrap:focus-within {
    color: var(--auth-field-accent) !important;
    border-color: color-mix(in srgb, var(--auth-field-accent) 35%, var(--auth-line)) !important;
    background: color-mix(in srgb, var(--auth-surface) 96%, var(--auth-field-accent)) !important;
    box-shadow: inset 0 -2px var(--auth-field-accent) !important;
}

body.auth-page .auth-input-wrap :is(input, select, textarea),
body.auth-page .auth-input-wrap :is(input, select, textarea):focus,
body.auth-page .auth-input-wrap :is(input, select, textarea):focus-visible {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

body.auth-page .auth-input-wrap:has(input:user-invalid:not(:placeholder-shown)) {
    border-color: color-mix(in srgb, var(--auth-error) 55%, var(--auth-line)) !important;
}

body.auth-page .auth-field label {
    margin-bottom: 7px;
    font-size: .77rem;
    letter-spacing: .005em;
}

body.auth-page :is(.auth-login-card, .role-login-card, .verification-card) {
    border-color: color-mix(in srgb, var(--auth-field-accent) 16%, var(--auth-line)) !important;
    box-shadow: 0 28px 80px rgba(3, 30, 18, .22), inset 0 1px rgba(255, 255, 255, .06) !important;
}

body.auth-page .auth-form-heading p {
    max-width: 40ch;
    line-height: 1.55;
}

body.auth-page .auth-submit {
    border-radius: 13px !important;
    box-shadow: 0 13px 28px color-mix(in srgb, var(--auth-action) 24%, transparent) !important;
}

body.auth-page .auth-submit:is(:hover, :focus-visible) {
    box-shadow: 0 16px 32px color-mix(in srgb, var(--auth-action) 31%, transparent) !important;
}

/* Registration fields retain a calm boundary, then use an inset accent while typing. */
body[data-peso-page='jobseeker-register'] .input-group,
body[data-peso-page='reset-password'] .input-group,
body[data-peso-page='forgot-password'] .input-group {
    overflow: hidden;
    box-shadow: inset 0 -1px color-mix(in srgb, var(--auth-field-accent) 9%, transparent) !important;
}

body[data-peso-page='jobseeker-register'] .input-group:focus-within,
body[data-peso-page='reset-password'] .input-group:focus-within,
body[data-peso-page='forgot-password'] .input-group:focus-within {
    border-color: color-mix(in srgb, var(--auth-field-accent) 36%, var(--reg-line, #cddfd4)) !important;
    box-shadow: inset 0 -2px var(--auth-field-accent) !important;
}

body[data-peso-page='jobseeker-register'] .input-group :is(input, select, textarea),
body[data-peso-page='jobseeker-register'] .input-group :is(input, select, textarea):focus,
body[data-peso-page='jobseeker-register'] .input-group :is(input, select, textarea):focus-visible,
body[data-peso-page='reset-password'] .input-group :is(input, select, textarea):focus,
body[data-peso-page='forgot-password'] .input-group :is(input, select, textarea):focus {
    outline: 0 !important;
    box-shadow: none !important;
}

body[data-peso-page='employer-register'] .form-group :is(input:not([type='checkbox']):not([type='radio']), select, textarea) {
    border-color: color-mix(in srgb, var(--peso-green, #087443) 17%, #cfdcd4) !important;
    border-radius: 12px !important;
    background: color-mix(in srgb, var(--card-bg, #ffffff) 95%, var(--peso-green, #087443)) !important;
}

body[data-peso-page='employer-register'] .form-group :is(input:not([type='checkbox']):not([type='radio']), select, textarea):focus,
body[data-peso-page='employer-register'] .form-group :is(input:not([type='checkbox']):not([type='radio']), select, textarea):focus-visible {
    outline: 0 !important;
    border-color: color-mix(in srgb, var(--peso-green, #087443) 38%, #cfdcd4) !important;
    box-shadow: inset 0 -2px var(--peso-green, #087443) !important;
}

@media (max-width: 560px) {
    body.auth-page :is(.auth-login-card, .role-login-card, .verification-card) {
        border-radius: 20px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.auth-page :is(.auth-input-wrap, .auth-submit),
    body[data-peso-page$='register'] :is(.input-group, input, select, textarea) {
        transition-duration: .01ms !important;
    }
}