/* design-5 — auth strecke (Weiche / Anmelden / Registrieren). Outside the shell: a centred card on the tinted
   page surface. Scoped under [data-ui="wp"]; loaded ONLY by _WpAuthLayout, so no other page sees these rules. */

[data-ui="wp"].wp-auth-body {
    margin: 0; min-height: 100vh; background: var(--wp-bg);
    color: var(--wp-text); font-family: var(--wp-font); font-size: var(--wp-fs-body);
}

[data-ui="wp"] .wp-auth {
    min-height: 100vh; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--wp-s4); padding: var(--wp-s6) var(--wp-s4);
}
[data-ui="wp"] .wp-auth__brand { display: flex; justify-content: center; }
[data-ui="wp"] .wp-auth__brand .wp-logo { font-size: 26px; }

[data-ui="wp"] .wp-auth__card {
    width: 100%; max-width: 380px; box-sizing: border-box;
    background: var(--wp-card); border: var(--wp-hairline) solid var(--wp-line);
    border-radius: var(--wp-radius-card); padding: var(--wp-s6);
}
[data-ui="wp"] .wp-auth__title { font-size: var(--wp-fs-title); font-weight: var(--wp-fw-medium); margin: 0 0 var(--wp-s2); }
[data-ui="wp"] .wp-auth__lead { color: var(--wp-text-2); margin: 0 0 var(--wp-s5); }

[data-ui="wp"] .wp-auth__foot { font-size: var(--wp-fs-caption); }
[data-ui="wp"] .wp-auth__foot a { color: var(--wp-text-2); text-decoration: none; }
[data-ui="wp"] .wp-auth__foot a:hover { color: var(--wp-blue-hover); }

/* Full-width buttons/links stacked in the card */
[data-ui="wp"] .wp-auth .wp-btn { width: 100%; justify-content: center; }
[data-ui="wp"] .wp-auth__actions { display: flex; flex-direction: column; gap: var(--wp-s3); }

/* OAuth block ABOVE email/password, split by an "oder" rule (§4) */
[data-ui="wp"] .wp-auth__oauth { display: flex; flex-direction: column; gap: var(--wp-s2); margin-bottom: var(--wp-s4); }
[data-ui="wp"] .wp-oauth-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--wp-s2);
    width: 100%; box-sizing: border-box; cursor: pointer;
    padding: var(--wp-s2) var(--wp-s4); font-size: var(--wp-fs-body); font-weight: var(--wp-fw-medium);
    color: var(--wp-text); background: var(--wp-card);
    border: var(--wp-hairline) solid var(--wp-line-strong); border-radius: var(--wp-radius-control);
}
[data-ui="wp"] .wp-oauth-btn:hover { background: var(--wp-tile); }
[data-ui="wp"] .wp-auth__or {
    display: flex; align-items: center; gap: var(--wp-s3);
    color: var(--wp-text-muted); font-size: var(--wp-fs-caption); margin: var(--wp-s4) 0;
}
[data-ui="wp"] .wp-auth__or::before,
[data-ui="wp"] .wp-auth__or::after { content: ""; flex: 1 1 auto; height: var(--wp-hairline); background: var(--wp-line); }

/* Password field with reveal (eye) toggle — Entscheidung 5 */
[data-ui="wp"] .wp-input-reveal { position: relative; display: flex; }
[data-ui="wp"] .wp-input-reveal .wp-input { flex: 1 1 auto; padding-right: 36px; }
[data-ui="wp"] .wp-reveal-btn {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0; border: 0; background: transparent;
    color: var(--wp-icon); cursor: pointer; border-radius: var(--wp-radius-control);
}
[data-ui="wp"] .wp-reveal-btn:hover { color: var(--wp-text-2); background: var(--wp-tile); }

/* Full-width inputs inside the auth card + a checkbox row for "remember me" */
[data-ui="wp"] .wp-auth .wp-field { max-width: none; }
[data-ui="wp"] .wp-auth .wp-input { width: 100%; box-sizing: border-box; }
[data-ui="wp"] .wp-check { display: inline-flex; align-items: center; gap: var(--wp-s2); font-size: var(--wp-fs-body); color: var(--wp-text-2); cursor: pointer; }
[data-ui="wp"] .wp-auth__row { display: flex; align-items: center; justify-content: space-between; gap: var(--wp-s3); margin-bottom: var(--wp-s4); }
[data-ui="wp"] .wp-auth__row a { color: var(--wp-blue); text-decoration: none; font-size: var(--wp-fs-body); }
[data-ui="wp"] .wp-auth__switch { margin-top: var(--wp-s5); font-size: var(--wp-fs-body); color: var(--wp-text-2); text-align: center; }
[data-ui="wp"] .wp-auth__switch a { color: var(--wp-blue); text-decoration: none; }

/* Model-level validation summary (blocking) — red error text (design-3), readable on the white card. */
[data-ui="wp"] .wp-auth__errors { color: var(--wp-error-text); font-size: var(--wp-fs-caption); margin-bottom: var(--wp-s3); }
[data-ui="wp"] .wp-auth__errors ul { margin: 0; padding-left: var(--wp-s4); }
[data-ui="wp"] .wp-auth__errors:empty { display: none; }
/* ASP.NET renders the summary with an empty <ul> when valid — hide it so no blank gap sits above the form. */
[data-ui="wp"] .wp-auth__errors.validation-summary-valid { display: none; }
[data-ui="wp"] .wp-req { color: var(--wp-error-line); margin-left: 2px; }