/*!
 * MVN sign-in pages (html.mvn-ui.mvn-auth; core/hooks/mvn-ui.php sets $mvnAuth, overwrites/header.tpl
 * loads this file after mvn-ui.css, only there). The client area's front door: the shell's
 * silhouette without navigation. A top line (the logo where the rail shows it, the representative
 * where the top bar has it), one column in the middle of the page (the title, the form in one frame,
 * the way to register) and the client area's footer line (includes/mvn-footer.tpl).
 * Tokens and components come from mvn-ui.css; this file holds only what the sign-in pages add.
 *
 * Markup (includes/mvn/auth/top.tpl, includes/mvn/auth/login.tpl):
 *   header.mvn-auth-top > img.mvn-auth-logo + a.mvn-top-btn
 *   .mvn-auth-col > h1.mvn-title.mvn-auth-title
 *             + .mvn-auth-frame > .mvn-alert? + form > .mvn-auth-stack > .mvn-field …
 *                 (.mvn-auth-label: a label and its link; .mvn-auth-secret: a password field and
 *                  its .mvn-auth-reveal button) + .mvn-check + .mvn-auth-captcha? + .mvn-auth-submit
 *               + .mvn-auth-or + WHMCS's linked accounts?
 *             + p.mvn-auth-alt
 */

/* No rail on these pages: mvn-ui.css section 2 keeps its width free on wide screens. */
html.mvn-ui.mvn-auth body.lagom {
    padding-inline-start: 0;
}

/* The top line spans the footer line's width (mvn-ui.css section 6). */
.mvn-auth-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mvn-s-4);
    width: 100%;
    max-width: calc(var(--mvn-content-w) + 2 * var(--mvn-gutter));
    margin-inline: auto;
    padding-block: var(--mvn-s-5) 0;
    padding-inline: var(--mvn-gutter);
}
/* The rail's logo, at the rail's size */
.mvn-auth-logo {
    display: block;
    width: auto;
    height: var(--mvn-s-7);
}

/* The page: one column, in the middle of the space between the two lines, a little above centre.
   The column holds the space around it: modern-css-mvn.css zeroes the bottom padding of
   .app-main's last child (.main-body) with !important. */
html.mvn-ui.mvn-auth body.lagom .main-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 0;
}
.mvn-auth-col {
    width: 100%;
    max-width: var(--mvn-modal-w);
    margin-inline: auto;
    padding-block: var(--mvn-s-7) var(--mvn-s-8);
    color: var(--mvn-ink-2);
    font-size: var(--mvn-t-body);
    line-height: var(--mvn-lh-text);
}
html.mvn-ui .mvn-auth-title {
    margin-block-end: var(--mvn-s-5);
}

/* The form in one frame, like the client area's forms */
.mvn-auth-frame {
    display: flex;
    flex-direction: column;
    gap: var(--mvn-s-5);
    padding: var(--mvn-s-6);
    border: var(--mvn-hair) solid var(--mvn-rule);
    border-radius: var(--mvn-r-panel);
    background: var(--mvn-paper);
}
/* WHMCS's one-time message may hold an e-mail address or a link: long words break inside the frame. */
.mvn-auth-frame .mvn-alert-body {
    overflow-wrap: anywhere;
}
.mvn-auth-form {
    margin: 0;
}
/* The fields in their own stack: WHMCS's invisible captcha appends its element to the form. */
.mvn-auth-stack {
    display: flex;
    flex-direction: column;
    gap: var(--mvn-s-5);
}
.mvn-auth-col .mvn-field {
    max-width: none;
}
/* A label and its link on one line: "סיסמה" and "איפוס סיסמה" */
.mvn-auth-label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--mvn-s-1) var(--mvn-s-3);
}
.mvn-auth-label .mvn-link {
    font-size: var(--mvn-t-small);
}

/* A password field and the button that shows it. The button stays hidden until
   assets/js/mvn/auth.js runs, since without the script it would do nothing. */
.mvn-auth-secret {
    position: relative;
}
html.mvn-ui .mvn-auth-secret:has(.mvn-auth-reveal:not([hidden])) .mvn-input {
    padding-inline-end: var(--mvn-touch);
}
html.mvn-ui .mvn-auth-reveal {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    display: grid;
    place-items: center;
    width: var(--mvn-touch);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--mvn-r-ctl);
    background: none;
    color: var(--mvn-ink-3);
    cursor: pointer;
    transition: color var(--mvn-dur) var(--mvn-ease);
}
html.mvn-ui .mvn-auth-reveal:hover,
html.mvn-ui .mvn-auth-reveal[aria-pressed="true"] {
    color: var(--mvn-ink);
}
/* The ring sits inside the field's edge. */
html.mvn-ui body.lagom .mvn-auth-reveal:focus-visible {
    outline-offset: calc(-1 * var(--mvn-s-1));
}
.mvn-auth-eye {
    width: var(--mvn-t-part);
    height: var(--mvn-t-part);
    fill: none;
    stroke: currentColor;
    stroke-width: var(--mvn-line);
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Shown: a stroke crosses the eye out ("hide"). pathLength="1" on the stroke. */
.mvn-auth-eye-off {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset var(--mvn-dur) var(--mvn-ease);
}
.mvn-auth-reveal[aria-pressed="true"] .mvn-auth-eye-off {
    stroke-dashoffset: 0;
}

/* The captcha WHMCS prints. Invisible captchas print only a style element: no box, no gap.
   The stack's gap spaces it; Lagom adds margins by id to the reCAPTCHA v2 / hCaptcha box (its id
   gains a number once WHMCS's script runs). */
.mvn-auth-captcha:not(:has(:not(style))) {
    display: contents;
}
html.mvn-ui.mvn-auth .mvn-auth-captcha :is(.captcha, .form-group, .recaptcha-container, #google-recaptcha-domainchecker) {
    margin-block: 0;
}

/* The one primary action, as wide and as tall as the fields above it */
html.mvn-ui .mvn-auth-submit {
    width: 100%;
    min-height: var(--mvn-field-h);
    font-size: var(--mvn-t-body);
}

/* "או" between the form and another way in (linked accounts, the social sign-in addon) */
.mvn-auth-or {
    display: flex;
    align-items: center;
    gap: var(--mvn-s-3);
    color: var(--mvn-ink-3);
    font-size: var(--mvn-t-caption);
}
.mvn-auth-or::before,
.mvn-auth-or::after {
    content: "";
    flex: 1;
    border-block-start: var(--mvn-hair) solid var(--mvn-rule);
}
/* WHMCS's provider buttons (includes/linkedaccounts.tpl): one framed button a line */
html.mvn-ui.mvn-auth .mvn-auth-col .social-signin-btns {
    display: flex;
    flex-direction: column;
    gap: var(--mvn-s-2);
    margin: 0;
}
html.mvn-ui.mvn-auth .mvn-auth-col .btn-social {
    width: 100%;
    max-width: none;
    min-height: var(--mvn-field-h);
    margin: 0;
}

/* Below the frame: the way to register, and Lagom's language chooser when there are languages */
html.mvn-ui .mvn-auth-alt {
    margin: var(--mvn-s-5) 0 0;
    color: var(--mvn-ink-2);
    font-size: var(--mvn-t-small);
}
html.mvn-ui.mvn-auth .mvn-auth-col .login-language {
    margin-block-start: var(--mvn-s-3);
    color: var(--mvn-ink-3);
    font-size: var(--mvn-t-caption);
}

/* Phones: the rail's logo at the top bar's size, and a tighter frame */
@media (max-width: 599.98px) {
    .mvn-auth-top {
        padding-block-start: var(--mvn-s-3);
    }
    .mvn-auth-logo {
        height: var(--mvn-ctl-h-sm);
    }
    .mvn-auth-col {
        padding-block: var(--mvn-s-6) var(--mvn-s-7);
    }
    .mvn-auth-frame {
        padding: var(--mvn-frame-pad);
    }
}

/* Touch screens: the links beside the fields are 44px targets too */
@media (pointer: coarse) {
    html.mvn-ui :is(.mvn-auth-label, .mvn-auth-alt) .mvn-link {
        display: inline-flex;
        align-items: center;
        min-height: var(--mvn-touch);
    }
}

@media (prefers-reduced-motion: reduce) {
    html.mvn-ui .mvn-auth-reveal,
    .mvn-auth-eye-off {
        transition: none;
    }
}