/* TOOLKIT Shared Form Elements
   Outlined text field base, form error display, input validation states,
   shake animation.
   Requires: CSS variables from page theme (:root / [data-dark]).
*/

md-outlined-text-field {
    --md-outlined-text-field-container-shape: 8px;
    width: 100%;
}

.form-error {
    font-size: 12px; color: #BA1A1A; margin-top: 4px; min-height: 18px;
    display: none;
}
[data-dark] .form-error,
[data-theme="dark"] .form-error {
    color: #FF8A8A;
}
.form-error.show { display: block; }

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}
.shake { animation: shake 0.4s ease-in-out; }

md-outlined-text-field.input-error {
    --md-outlined-text-field-outline-color: #BA1A1A;
    --md-outlined-text-field-focus-outline-color: #BA1A1A;
    --md-outlined-text-field-label-text-color: #BA1A1A;
}
[data-dark] md-outlined-text-field.input-error,
[data-theme="dark"] md-outlined-text-field.input-error {
    --md-outlined-text-field-outline-color: #FF8A8A;
    --md-outlined-text-field-focus-outline-color: #FF8A8A;
    --md-outlined-text-field-label-text-color: #FF8A8A;
}

.link-row {
    text-align: center; margin-top: 16px; font-size: 14px;
    color: var(--color-text-secondary, #5f6368);
}
.link-row a {
    color: var(--md-sys-color-primary, #1a73e8); text-decoration: none;
}