/* The set-password page (/update-password) in the public website's design (doc 21; web_login.js adds the
 * navy side). Every rule is scoped to body.zs-login, which only that page carries. */
body.zs-login {
	--zl-navy: #052248; --zl-blue: #0B57A4; --zl-blue-dark: #0A3D8F; --zl-ink: #0A2240; --zl-muted: #5A697D; --zl-yellow: #FFC61E;
	background: #fff !important; padding-left: 44vw; min-height: 100vh;
}
body.zs-login .navbar, body.zs-login .web-footer, body.zs-login footer.web-footer { display: none !important; }
body.zs-login .page-content-wrapper { min-height: 100vh; display: flex; align-items: center; }
body.zs-login .page-content-wrapper main.container { max-width: 460px; }
.zs-login-brand { position: fixed; left: 0; top: 0; bottom: 0; width: 44vw; z-index: 5; display: flex; flex-direction: column;
	padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1.6rem, 3.5vw, 3.4rem) 0; color: #fff; overflow: hidden; background: var(--zl-navy); }
.zs-login-brand__logo { display: inline-flex; align-items: center; gap: .65rem; color: #fff !important; text-decoration: none !important;
	font-family: "InterVariable", Inter, system-ui, sans-serif; font-weight: 800; font-size: 1.28rem; letter-spacing: -.02em; }
.zs-login-brand__logo img { width: auto; height: 48px; }
.zs-login-brand__body { margin-top: clamp(2.5rem, 7vh, 5rem); }
.zs-login-brand__body h1 { color: #fff; font-family: "InterVariable", Inter, system-ui, sans-serif; font-weight: 800;
	font-size: clamp(2.4rem, 1.4rem + 3vw, 4.1rem); line-height: .96; letter-spacing: -.032em; margin: 0; max-width: 12ch; text-wrap: balance; }
.zs-login-brand__body p { margin: 1.1rem 0 0; color: rgba(255, 255, 255, .8); font-size: 1.08rem; max-width: 26rem; }
.zs-login-brand__body ul { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1rem; max-width: 26rem; }
.zs-login-brand__body li { display: flex; gap: .8rem; align-items: flex-start; color: rgba(255, 255, 255, .9); }
.zs-login-brand__body li svg { color: var(--zl-yellow); flex: 0 0 auto; margin-top: .15rem; }
.zs-login-brand__bars { margin-top: auto; padding-top: 2.5rem; display: grid; grid-template-columns: repeat(5, 1fr); gap: .8rem; align-items: end; height: clamp(150px, 22vh, 200px); }
.zs-login-brand__bars i { display: block; border-radius: 14px 14px 0 0; background: #2F7FD1; height: 24%; }
.zs-login-brand__bars i:nth-child(2) { background: #29ABE2; height: 41%; } .zs-login-brand__bars i:nth-child(3) { background: #14A394; height: 58%; }
.zs-login-brand__bars i:nth-child(4) { background: #8CB824; height: 75%; } .zs-login-brand__bars i:nth-child(5) { background: #FFC61E; height: 92%; }

body.zs-login .login-content.page-card { background: transparent; border: 0; box-shadow: none; padding: 0; }
body.zs-login .page-card-head .app-logo { display: none; }
body.zs-login .page-card-head h4, body.zs-login .page-card-head .text-3xl-bold { font-family: "InterVariable", Inter, system-ui, sans-serif; color: var(--zl-ink);
	font-weight: 760; font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.5rem); line-height: 1.05; letter-spacing: -.025em; }
body.zs-login .form-control { border-radius: 0; min-height: 52px; border: 2px solid #C9D6E5; font-size: 1rem; }  /* square, like the website's own fields */
body.zs-login .form-control:focus { border-color: var(--zl-blue); box-shadow: 0 0 0 4px rgba(11, 87, 164, .16); }
body.zs-login label { color: var(--zl-ink); font-weight: 650; }
body.zs-login .page-card-actions .es-button[data-variant="solid"], body.zs-login .btn-primary {
	--bt-solid-bg: var(--zl-blue); --bt-solid-bg-hover: var(--zl-blue-dark); --bt-solid-bg-active: var(--zl-blue-dark); --bt-solid-fg: #fff;
	background: var(--zl-navy); border-color: var(--zl-navy); min-height: 56px; border-radius: 0; font-weight: 700; font-size: 1.02rem; }
/* stock forms keep their submit disabled until the form is filled; make that state read as such */
body.zs-login .page-card-actions .es-button[data-variant="solid"]:disabled, body.zs-login .btn-primary:disabled {
	background: #c7d3e3; border-color: #c7d3e3; color: #fff; opacity: 1; cursor: not-allowed; }
body.zs-login a { color: var(--zl-blue); }
body.zs-login .zs-confirm-hint { margin: 0; font-size: .9rem; color: var(--zl-muted); text-align: center; }
body.zs-login #update:not(:disabled) + .zs-confirm-hint { display: none; }
body.zs-login .sign-up-message a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: .5rem; font-weight: 700; }
body.zs-login :focus-visible { outline: 3px solid var(--zl-blue); outline-offset: 3px; }

@media (max-width: 960px) {
	body.zs-login { padding-left: 0; }
	.zs-login-brand { position: static; width: auto; padding-bottom: 1.6rem; flex-shrink: 0; }
	.zs-login-brand__body { margin-top: 1.6rem; }
	.zs-login-brand__body h1 { font-size: clamp(2rem, 1.4rem + 3vw, 2.8rem); }
	.zs-login-brand__body ul, .zs-login-brand__body p, .zs-login-brand__bars { display: none; }
	body.zs-login .page-content-wrapper { min-height: 0; padding: 24px 0 40px; }
	body.zs-login .sign-up-message { margin-top: 1.2rem; }  /* not pushed to the foot of a tall phone */
}