/* Sign-up and password-reset pages.

   Both are Passport-backed flows that render server-side over the particle
   field, so they use the same translucent glass panel as ToolVault Pro rather
   than an opaque card — an opaque background hides the particles and has been
   reverted once already on that page.

   Every input is 16px. Below that iOS Safari zooms the viewport on focus, and
   these two forms are now the entire account path: M1 in the 2026-08-23 audit
   found every other control on the site under the floor. Do not shrink these. */

.ut-auth {
    max-width: 520px;
    margin: 0 auto;
    padding: 64px 20px 88px;
    font-family: var(--ut-font-body);
    color: var(--ut-text-2);
}

.ut-auth-panel {
    border: 1px solid var(--ut-border-mid);
    background: var(--ut-glass-strong);
    backdrop-filter: blur(12px);
    border-radius: var(--ut-r-lg);
    padding: 32px 28px;
}

/* ── Heading ─────────────────────────────────────────────────────────────── */

.ut-auth-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ut-text-3);
}

.ut-auth-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ut-accent);
}

.ut-auth-title {
    font-family: var(--ut-font-display);
    font-size: clamp(1.6rem, 4vw, 2.1rem);
    color: var(--ut-text);
    margin: 12px 0 8px;
}

.ut-auth-sub {
    color: var(--ut-text-3);
    font-size: 0.95rem;
    margin: 0 0 24px;
}

/* ── Notices ─────────────────────────────────────────────────────────────── */

.ut-auth-notice {
    border: 1px solid var(--ut-border-mid);
    border-radius: var(--ut-r-md);
    padding: 12px 14px;
    margin-bottom: 20px;
    font-size: 0.95rem;
}

.ut-auth-notice.is-error {
    border-color: var(--ut-accent-line);
    background: var(--ut-accent-soft);
    color: var(--ut-text);
}

/* ── Form ────────────────────────────────────────────────────────────────── */

.ut-auth-form {
    display: grid;
    gap: 6px;
}

.ut-auth-form label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ut-text-3);
    margin-top: 10px;
}

.ut-auth-form input[type="text"],
.ut-auth-form input[type="email"],
.ut-auth-form input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    /* 16px floor — see the header note. */
    font-size: 1rem;
    padding: 12px 14px;
    color: var(--ut-text);
    background: var(--ut-glass-strong);
    border: 1px solid var(--ut-border-mid);
    border-radius: var(--ut-r-md);
}

.ut-auth-form input:focus-visible {
    outline: none;
    border-color: var(--ut-accent-line);
    box-shadow: var(--ut-ring);
}

/* The one-time-code fields. Wide tracking makes six digits readable as six
   digits rather than a number, which is how people check them against an email. */
.ut-auth-form input[autocomplete="one-time-code"] {
    font-family: var(--ut-font-mono);
    font-size: 1.25rem;
    letter-spacing: 0.35em;
    text-align: center;
}

.ut-auth-hint {
    font-size: 0.82rem;
    color: var(--ut-text-3);
    font-style: normal;
}

.ut-auth-static {
    margin: 4px 0 12px;
    font-size: 0.95rem;
}

.ut-auth-btn {
    display: inline-block;
    width: 100%;
    margin-top: 20px;
    padding: 13px 18px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background: var(--ut-accent);
    border: 1px solid var(--ut-accent);
    border-radius: var(--ut-r-md);
    cursor: pointer;
    transition: filter 0.15s ease;
}

.ut-auth-btn:hover { filter: brightness(1.08); }

.ut-auth-btn:focus-visible {
    outline: none;
    box-shadow: var(--ut-ring);
}

.ut-auth-actions { margin-top: 20px; }

.ut-auth-foot {
    margin: 20px 0 0;
    font-size: 0.9rem;
    color: var(--ut-text-3);
}

.ut-auth-foot a { color: var(--ut-accent); }

.cf-turnstile { margin-top: 18px; }

@media (max-width: 480px) {
    .ut-auth { padding: 40px 16px 64px; }
    .ut-auth-panel { padding: 24px 18px; }
}