/* ============================================================================
   KARYOTUTOR SIGN-IN PAGES - UI REFRESH
   Login, register, reset password and update password.
   Load LAST, after assets/css/auth.css, with ktd-tokens.css loaded
   before it (it only defines variables).

   The four pages keep
   their own layout, markup and scripts; this re-skins them to match the
   signed-in pages: the navy-to-blue ground of the page-header band with the
   same slow waves along the foot, a white rounded card with a plain banded
   header,
   and the blue accent on buttons, links and focus rings.

   The ground stays dark on purpose. The site header and the headline beside
   the form are white text designed for a dark page, and those belong to the
   public site, which this refresh does not restyle.

   No raw colour values (tokens only), no !important. ASCII-only comments.
   ========================================================================= */

/* -- Ground ---------------------------------------------------------------- */
.auth-section,
.reg-section {
    background: var(--ktd-auth-bg);
}

/* The old photographic wash is replaced by the waves. */
.auth-section::before,
.reg-section::before {
    inset: auto 0 0 0;
    height: 46%;
    background: none;
    background-image: var(--ktd-hero-wave-1), var(--ktd-hero-wave-2), var(--ktd-hero-wave-3);
    background-repeat: repeat-x;
    background-position: 0 100%, 0 100%, 0 100%;
    background-size: 1400px 100%, 1000px 70%, 1800px 54%;
    opacity: 1;
    animation: ktd-auth-drift 40s linear infinite,
               ktd-auth-swell 9s ease-in-out infinite alternate;
}

@keyframes ktd-auth-drift {
    to { background-position: -1400px 100%, 2000px 100%, -3600px 100%; }
}

@keyframes ktd-auth-swell {
    to { background-size: 1400px 74%, 1000px 100%, 1800px 78%; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-section::before,
    .reg-section::before {
        animation: none;
    }
}

/* The three blurred discs take the theme hue. */
.auth-decor--1,
.auth-decor--2,
.auth-decor--3 {
    background: radial-gradient(circle, var(--ktd-on-dark-link), transparent 70%);
    opacity: 0.16;
}

/* -- Card ------------------------------------------------------------------ */
.auth-card,
.reg-form-card {
    background: var(--ktd-surface);
    border: none;
    border-radius: var(--ktd-radius-xl);
    box-shadow: var(--ktd-shadow-3);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.auth-card::before,
.reg-form-card::before {
    box-shadow: none;
}

/* Header: the page-header band, without its waves - the page behind the
   card already carries them. */
.auth-header,
.reg-form-header {
    overflow: hidden;
    padding: var(--ktd-space-6) var(--ktd-space-6) var(--ktd-space-5);
    background: var(--ktd-hero-bg);
    border-bottom: none;
}

.auth-header-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--ktd-radius-lg);
    background: var(--ktd-hero-glass);
    border-color: var(--ktd-hero-edge);
    font-size: 21px;
}

.auth-header h2,
.reg-form-header h2 {
    font-size: 22px;
    letter-spacing: -0.3px;
}

.auth-header p,
.reg-form-header p {
    color: var(--ktd-hero-fg-2);
    font-size: var(--ktd-fs-md);
}

.auth-body,
.reg-form-body {
    background: var(--ktd-surface);
}

/* -- Fields ---------------------------------------------------------------- */
.auth-body .form-label,
.reg-label {
    color: var(--ktd-text);
    font-size: var(--ktd-fs-sm);
    font-weight: var(--ktd-fw-semi);
    letter-spacing: 0;
}

.auth-body .form-control,
.reg-input {
    height: 40px;
    background: var(--ktd-surface);
    border: 1px solid var(--ktd-border-hi);
    border-radius: var(--ktd-radius-md);
    color: var(--ktd-text);
    font-size: var(--ktd-fs-md);
}

.auth-body .form-control:focus,
.reg-input:focus {
    background: var(--ktd-surface);
    border-color: var(--ktd-accent);
    box-shadow: 0 0 0 3px var(--ktd-accent-ring);
}

.auth-body .form-control::placeholder,
.reg-input::placeholder {
    color: var(--ktd-n-400);
}

.reg-input.is-invalid,
.auth-body .form-control.is-invalid {
    border-color: var(--ktd-negative);
    box-shadow: 0 0 0 3px var(--ktd-negative-bg);
}

.toggle-password {
    color: var(--ktd-text-muted);
}

.toggle-password:hover {
    color: var(--ktd-accent);
}

.auth-body a:focus-visible,
.auth-body button:focus-visible,
.auth-links a:focus-visible,
.toggle-password:focus-visible {
    outline: 2px solid var(--ktd-accent);
    outline-offset: 2px;
}

/* -- Button ---------------------------------------------------------------- */
.auth-btn {
    height: 44px;
    background: var(--ktd-accent);
    border-radius: var(--ktd-radius-md);
    box-shadow: var(--ktd-shadow-accent);
    color: var(--ktd-accent-fg);
    font-size: var(--ktd-fs-lg);
    transition: background-color var(--ktd-transition), box-shadow var(--ktd-transition);
}

.auth-btn:hover,
.auth-btn:focus-visible {
    background: var(--ktd-accent-hi);
    transform: none;
}

.auth-btn:disabled {
    background: var(--ktd-n-300);
    box-shadow: none;
}

/* -- Links, notices -------------------------------------------------------- */
.auth-divider {
    background: var(--ktd-border);
}

.auth-links p {
    color: var(--ktd-text-muted);
}

.auth-links a,
.reg-consent a {
    color: var(--ktd-accent);
}

.auth-links a::after {
    background: var(--ktd-accent);
}

.auth-links a:hover,
.reg-consent a:hover {
    color: var(--ktd-accent-hi);
}

.auth-error:not(:empty) {
    background: var(--ktd-negative-bg);
    border-color: var(--ktd-negative-bg);
    border-radius: var(--ktd-radius-md);
    color: var(--ktd-negative);
}

.reg-educator-notice {
    background: var(--ktd-accent-bg);
    border-color: var(--ktd-accent-bg);
    border-radius: var(--ktd-radius-md);
    color: var(--ktd-accent-hi);
}

.reg-educator-notice i {
    color: var(--ktd-accent);
}

.reg-consent label,
.form-text,
.password-help-short {
    color: var(--ktd-text-muted);
}

/* -- The panel beside the form (register, reset, update) ------------------- */
.reg-feature,
.reg-trust {
    background: var(--ktd-hero-glass);
    border-color: var(--ktd-hero-edge);
    border-radius: var(--ktd-radius-lg);
}

.reg-feature:hover {
    background: var(--ktd-hero-glass-hi);
}

.reg-feature-icon {
    background: var(--ktd-hero-glass-hi);
    border-color: var(--ktd-hero-edge);
    border-radius: var(--ktd-radius-md);
    color: var(--ktd-on-dark-link);
}

.reg-trust i {
    color: var(--ktd-on-dark-link);
}

/* -- Password feedback appears once there is something to judge -------------
   The strength meter ("Too weak"), the short hint and the match line
   ("Not checked") used to sit under the empty fields from the moment the page
   loaded, grading a password nobody had typed. They now stay hidden while
   their own field is empty.

   Both fields are `required` and carry no pattern, so "empty" is exactly
   `:invalid` - which lets this be done here, without touching the scripts
   that the live pages share. The match line also stays hidden while the
   script has it in its neutral "Not checked" state (neither class set). */
.password-wrapper:has(input:required:invalid) ~ .pw-strength,
.password-wrapper:has(input:required:invalid) ~ .password-help-short,
.password-wrapper:has(input:required:invalid) ~ .match-indicator,
.match-indicator:not(.match):not(.nomatch) {
    display: none;
}