/* Netlinko – pages of the visitors of the member space: login, its second step (the code), sign-up.
   The form first (on a phone too), the help beside it on the colours of the space. */

.nl-space .jm-auth.jm-auth--login,
.nl-space .jm-auth.jm-auth--signup { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); max-width: 1140px; margin: 0 auto; }
.nl-space .jm-auth.jm-auth--login { max-width: 1000px; }
/* The cards of the profiles: their text from the top, whatever its length. */
.nl-space .jm-auth .jm-kind-card { align-items: flex-start; align-content: flex-start; }
.nl-space .jm-auth .jm-kind-card > span { display: flex; flex-direction: column; justify-content: flex-start; gap: .2em; }
/* Buyer and seller side by side; the agency on a line of its own, on a plain light blue of the charter. */
.nl-space .jm-auth .jm-kind-choice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nl-space .jm-auth .jm-kind-choice legend { grid-column: 1 / -1; }
.nl-space .jm-kind-card.jm-kind-card--agency { grid-column: 1 / -1; }
.nl-space .jm-auth .jm-kind-card.jm-kind-card--agency { background: var(--nl-primary-50); border-color: #cfdbe8; }
.nl-space .jm-kind-card.jm-kind-card--agency .jm-kind-card__tag { background: #fff; }
.nl-space .jm-kind-card.jm-kind-card--agency strong { flex-wrap: wrap; }
.nl-space .jm-kind-card__tag { font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: var(--nl-primary); background: var(--nl-primary-50); border-radius: 999px; padding: .15em .6em; }
.nl-space .jm-kind-card__more { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35em 1em; margin-top: .35em; font-size: .86rem; color: var(--nl-ink); }
.nl-space .jm-kind-card__more > span { display: flex; gap: .4em; align-items: flex-start; }
.nl-space .jm-kind-card__more .jm-ico { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--nl-primary); }
.nl-space .jm-auth__card { padding: clamp(1.25em, 3vw, 2.1em); }
.nl-space .jm-auth__title { font-size: 1.65rem; line-height: 1.2; margin: .05em 0 .35em; color: var(--nl-ink); }
.nl-space .jm-auth__lead { color: var(--nl-muted); margin: 0 0 1.3em; }
.nl-space .jm-auth__form > p,
.nl-space .jm-auth__form .jm-row > p { margin: 0 0 1em; }
.nl-space .jm-auth__form .jm-row { align-items: start; }
.nl-space .jm-auth__hint { margin: -.4em 0 1.1em !important; }
.nl-space .jm-auth__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6em 1em; }
.nl-space .jm-auth__row label { margin: 0; }
.nl-space .jm-auth__note { display: flex; gap: .6em; align-items: flex-start; margin: 1.2em 0 0; padding: .8em 1em; border-radius: 12px; background: var(--nl-primary-50); color: var(--nl-text); font-size: .88rem; }
.nl-space .jm-auth__note .jm-ico { flex: none; margin-top: 1px; color: var(--nl-primary); }
.nl-space .jm-auth__switch { margin: 1.5em 0 0; padding-top: 1.2em; border-top: 1px solid var(--nl-line); text-align: center; }
.nl-space .jm-auth__switch p { margin: 0 0 .6em; color: var(--nl-muted); }
.nl-space .jm-auth__alt { margin: .2em 0 1em; text-align: center; font-weight: 600; }
.nl-space .jm-auth .jm-notice { margin-bottom: 1.2em; }
.nl-space .jm-auth .jm-notice:focus { outline: 2px solid var(--nl-primary); outline-offset: 2px; }

/* The help beside the form. */
.nl-space .jm-auth__pitch h3 { color: #fff; font-size: 1rem; margin: 1.6em 0 .5em; }
.nl-space .jm-auth__pitch a { color: #ffd84d; font-weight: 600; }
.nl-space .jm-auth__pitch a:focus-visible { outline: 2px solid #ffd84d; outline-offset: 2px; }
.nl-space .jm-auth__pitch .jm-checks { margin-top: 1em; }
.nl-space .jm-auth__steps { margin: .4em 0 0; padding-left: 1.3em; display: grid; gap: .5em; }
.nl-space .jm-auth__help { list-style: none; margin: 0; padding: 0; display: grid; gap: .65em; font-size: .92rem; }
.nl-space .jm-auth__small { font-size: .9rem; color: #cfdae6; margin: 0; }
.nl-space .jm-auth__links { display: flex; flex-wrap: wrap; gap: .5em 1.4em; margin: 1.5em 0 0; }
.nl-space .jm-auth--signup .jm-auth__pitch { position: static; }

/* Fields: the message of the second password, a field in error. */
.nl-space .jm-field-msg { display: block; margin-top: .35em; font-size: .82rem; font-weight: 600; }
.nl-space .jm-field-msg:empty { display: none; }
.nl-space .jm-field-msg.is-bad { color: var(--nl-red); }
.nl-space .jm-field-msg.is-ok { color: var(--nl-mint); }
.nl-space .jm-auth [aria-invalid="true"] { border-color: var(--nl-red) !important; box-shadow: 0 0 0 3px var(--nl-red-50); }

/* Sellers: owners only, the rules to accept. */
.nl-space .jm-auth__owner { display: flex; gap: .6em; align-items: flex-start; }
.nl-space .jm-auth__owner .jm-ico { flex: none; margin: 1px 0 0; }
.nl-space .jm-rules { margin: .4em 0 1em; padding: .9em 1em; border: 1px solid var(--nl-line); border-radius: 12px; background: #f8fafc; }
.nl-space .jm-rules__title { display: flex; align-items: center; gap: .45em; margin: 0 0 .5em; font-weight: 700; color: var(--nl-ink); }
.nl-space .jm-rules dl { margin: 0; display: grid; gap: .7em; }
.nl-space .jm-rules dt { font-weight: 700; font-size: .9rem; color: var(--nl-ink); }
.nl-space .jm-rules dd { margin: .15em 0 0; font-size: .88rem; line-height: 1.5; color: var(--nl-text); }

/* The second step: the code, large and easy to type. */
.nl-space .jm-auth__code { font-size: 1.45rem !important; letter-spacing: .25em; text-align: center; font-variant-numeric: tabular-nums; }
.nl-space .nl-2fa__help { margin: -.5em 0 1.1em; color: var(--nl-muted); font-size: .88rem; }
.nl-space .nl-2fa__lost { margin: 0; border-top: 1px solid var(--nl-line); border-bottom: 0; }
.nl-space .nl-2fa__lost summary { color: var(--nl-primary); }
.nl-space .nl-2fa__lost ul { margin: .6em 0 0; padding-left: 1.2em; display: grid; gap: .5em; font-size: .9rem; }

/* The new password: how strong it is, at once (assets/auth.js; the server checks the rules again). */
.nl-space .jm-strength { display: flex; align-items: center; gap: .7em; margin: -.55em 0 .5em; font-size: .82rem; font-weight: 600; color: var(--nl-muted); }
.nl-space .jm-strength__bar { flex: 1; height: 6px; border-radius: 999px; background: var(--nl-line); overflow: hidden; }
.nl-space .jm-strength__bar > span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--nl-red); transition: width .2s, background-color .2s; }
.nl-space .jm-strength[data-level="1"] .jm-strength__bar > span { width: 25%; background: var(--nl-red); }
.nl-space .jm-strength[data-level="2"] .jm-strength__bar > span { width: 50%; background: #e08a00; }
.nl-space .jm-strength[data-level="3"] .jm-strength__bar > span { width: 75%; background: #2f8f5b; }
.nl-space .jm-strength[data-level="4"] .jm-strength__bar > span { width: 100%; background: var(--nl-mint); }
.nl-space .jm-strength[data-level="1"] .jm-strength__label { color: var(--nl-red); }
.nl-space .jm-strength[data-level="2"] .jm-strength__label { color: #8a5300; }
.nl-space .jm-strength[data-level="3"] .jm-strength__label,
.nl-space .jm-strength[data-level="4"] .jm-strength__label { color: #11724f; }
.nl-space .jm-strength__label { flex: none; min-width: 11em; text-align: right; }

@media (max-width: 560px) {
	.nl-space .jm-auth .jm-kind-choice,
	.nl-space .jm-kind-card__more { grid-template-columns: 1fr; }
	.nl-space .jm-strength { flex-wrap: wrap; }
	.nl-space .jm-strength__label { min-width: 0; text-align: left; }
}

@media (max-width: 860px) {
	.nl-space .jm-auth.jm-auth--login,
	.nl-space .jm-auth.jm-auth--signup { grid-template-columns: 1fr; gap: 1.2em; }
	.nl-space .jm-auth__pitch { padding: 1.5em; }
	.nl-space .jm-auth__title { font-size: 1.4rem; }
}