/* ============================================================
   Domolytics — design v3, the register and login pages (tasks 0219, 0220)

   Loaded after main_v3.css, which holds the v3 tokens, buttons,
   header and footer. This file only frames and restyles the form
   (`Views/auth/_register_form.php` and `_login_form.php`, each shared
   with its v2 page), so the v2 class names stay and nothing here reaches
   past `.v3-auth`.

   Colours come from the v3 tokens, except the error and required
   marks, which keep the v2 `--danger*` tokens (the one red the UI
   spec allows for the asterisk, already checked in every mode).
   ============================================================ */

body.v3 .v3-auth { padding-block: clamp(1.25rem, 4vw, 2.5rem) 2.5rem; }
body.v3 .v3-auth__grid {
    display: grid; grid-template-columns: minmax(0, 32rem) minmax(0, 1fr);
    gap: 2rem; align-items: stretch; justify-content: center;
}
body.v3 .v3-auth__card { padding: clamp(1.25rem, 3.5vw, 2.25rem); }

/* heading */
body.v3 .v3-auth__head { margin-block-end: 1.4rem; }
body.v3 .v3-auth__kicker { color: var(--v3-link); font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-block-end: .4rem; }
body.v3 .v3-auth__head h1 { margin: 0 0 .5rem; font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 800; line-height: 1.15; }
body.v3 .v3-auth__head p:last-child { display: flex; flex-wrap: wrap; gap: .35rem; color: var(--v3-muted); font-size: .9375rem; }
body.v3 .v3-auth__head .v3-link { text-decoration: underline; }

/* the page-level error: body text on the danger tint, so contrast never hangs on red */
body.v3 .v3-auth__error {
    margin-block-end: 1rem; padding: .7rem .9rem;
    border: 1px solid var(--danger-border); border-radius: .7rem;
    background: var(--danger-bg); color: var(--v3-text); font-size: .875rem;
}

/* Google */
body.v3 .v3-auth .social-row { margin-block-end: 1.2rem; }
body.v3 .v3-auth .social-btn {
    min-block-size: 3rem; padding: .6rem 1rem;
    border: 1px solid var(--v3-input-border); border-radius: .75rem;
    background: var(--v3-card); color: var(--v3-text); font-size: .9375rem;
}
body.v3 .v3-auth .social-btn:hover { background: var(--v3-card-2); }
body.v3 .v3-auth .social-btn svg { inline-size: 1.15rem; block-size: 1.15rem; }
body.v3 .v3-auth .divider { color: var(--v3-muted); margin-block-end: 1.2rem; }
body.v3 .v3-auth .divider::before,
body.v3 .v3-auth .divider::after { background: var(--v3-border); }

/* fields */
body.v3 .v3-auth .form { gap: 1rem; }
body.v3 .v3-auth .field label { color: var(--v3-text); font-size: .875rem; }
body.v3 .v3-auth .field input {
    min-block-size: 2.9rem; padding: .65rem .9rem;
    border: 1px solid var(--v3-input-border); border-radius: .75rem;
    background: var(--v3-input-bg); color: var(--v3-text); font-size: 1rem;
}
/* v2 draws focus as border + ring and removes the outline; v3 keeps a real outline
   as well, so focus stays visible in monochrome, where a ring colour means nothing. */
body.v3 .v3-auth .field input:focus {
    border-color: var(--v3-primary); background: var(--v3-input-bg);
    outline: 2px solid var(--v3-primary); outline-offset: 1px; box-shadow: none;
}
body.v3 .v3-auth .field input[aria-invalid="true"] { border-color: var(--danger); }
body.v3 .v3-auth .has-toggle input { padding-inline-end: 3rem; }
body.v3 .v3-auth .toggle-pw { color: var(--v3-muted); inset-inline-end: .45rem; }
body.v3 .v3-auth .toggle-pw:hover { color: var(--v3-text); background: var(--v3-card-2); }

/* password strength — the label says the level in words; the bars only repeat it */
body.v3 .v3-auth .strength-bars i { background: var(--v3-track); block-size: .3rem; }
/* The track rule above outranks the v2 level colours, so all four are restated here. */
body.v3 .v3-auth .strength[data-level="1"] .strength-bars i:nth-child(-n + 1) { background: var(--danger); }
body.v3 .v3-auth .strength[data-level="2"] .strength-bars i:nth-child(-n + 2) { background: var(--warning); }
body.v3 .v3-auth .strength[data-level="3"] .strength-bars i:nth-child(-n + 3) { background: var(--v3-primary); }
body.v3 .v3-auth .strength[data-level="4"] .strength-bars i { background: var(--success); }
body.v3 .v3-auth .strength-label { color: var(--v3-muted); }
:root[data-mono] body.v3 .v3-auth .strength-bars i { border: 1px solid var(--v3-border); }

/* terms */
body.v3 .v3-auth .field-check label { color: var(--v3-muted); font-size: .875rem; }
body.v3 .v3-auth .field-check a { color: var(--v3-link); text-decoration: underline; }
body.v3 .v3-auth .field-check input[type="checkbox"] { inline-size: 1.15rem; block-size: 1.15rem; accent-color: var(--v3-primary); }

/* challenge */
body.v3 .v3-auth .challenge-hint { color: var(--v3-muted); }

/* submit — the v2 `.btn` classes, drawn as the v3 primary button */
body.v3 .v3-auth .btn-primary {
    inline-size: 100%; min-block-size: 3rem; margin-block-start: .25rem;
    border: 0; border-radius: .75rem;
    background: var(--v3-primary); color: var(--v3-on-primary); box-shadow: none;
    font-size: 1rem; font-weight: 600;
}
body.v3 .v3-auth .btn-primary:hover { background: var(--v3-primary-hover); transform: none; }
body.v3 .v3-auth .form-foot { display: flex; align-items: center; gap: .5rem; color: var(--v3-muted); font-size: .8125rem; }
body.v3 .v3-auth .form-foot svg { inline-size: 1rem; block-size: 1rem; flex: none; }

/* login only: the "no account?" line and the resend-link button (task 0220) */
body.v3 .v3-auth .auth-foot-alt { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; color: var(--v3-muted); font-size: .9375rem; margin-block-start: .25rem; }
body.v3 .v3-auth .auth-foot-alt a { color: var(--v3-link); font-weight: 600; text-decoration: underline; }
body.v3 .v3-auth .verify-resend .btn-outline {
    inline-size: 100%; min-block-size: 2.75rem; border-radius: .75rem;
    border: 2px solid var(--v3-primary); background: var(--v3-card); color: var(--v3-link); font-weight: 600;
}
body.v3 .v3-auth .verify-resend .btn-outline:hover { background: var(--v3-blue-bg); }

/* side photo — decorative; fills the card height */
body.v3 .v3-auth__photo { border-radius: 1rem; overflow: hidden; box-shadow: var(--v3-shadow); min-block-size: 20rem; }
body.v3 .v3-auth__photo img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 72% 50%; display: block; }

/* ---- one column: the photo goes (it only decorates) ------------ */
@media (max-width: 900px) {
    body.v3 .v3-auth__grid { grid-template-columns: minmax(0, 34rem); }
    body.v3 .v3-auth__photo { display: none; }
}

/* ---- phone (≤640px, tech/3-ui.md) ------------------------------ */
@media (max-width: 640px) {
    body.v3 .v3-auth .row-2 { grid-template-columns: minmax(0, 1fr); }
}