/* SolarQuery v2 auth pages (register, forgot / reset password, verify email) — ours, not part of the client package.
 * Split-screen layout in the v4.3 login family; loads after login.css + integration-v4.css and reuses their form
 * classes (sq-auth-field, sq-auth-input-wrap, sq-auth-eye, sq-auth-submit, sq-auth-error, sq-auth-bottom …).
 * Layout: frontend.v2.auth.split. Breakpoint 58em (928px) = login.css. */

/* ── Left: full-height photo, dark teal overlay, white copy ─────────────────────────────────────────── */
.sqx-authx-visual { position:relative; isolation:isolate; display:flex; flex-direction:column; justify-content:flex-end; min-width:0; min-height:34rem; overflow:hidden; border-radius:1.5rem 0 0 1.5rem; background:#0b3a31; color:#fff; }
.sqx-authx-photo { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:center 39%; }
/* The copy sits on the lower part, where the overlay is at least ~80% opaque: white text keeps >= 7:1. */
.sqx-authx-visual::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(6,52,44,.10) 0%, rgba(6,52,44,.38) 28%, rgba(5,44,37,.84) 50%, rgba(4,36,30,.95) 70%, #04241e 100%); }
.sqx-authx-copy { padding:2.5rem 2.5rem 2.25rem; }
.sqx-authx-tagline { display:inline-block; margin-bottom:.75rem; padding:.25rem .75rem; border-radius:999px; background:#fff; color:#06473d; font-size:.9375rem; line-height:1.5; font-weight:700; }
.sqx-authx-visual h1 { color:#fff; font-size:clamp(2rem,2.6vw,2.75rem); line-height:1.1; letter-spacing:-.035em; margin-bottom:.75rem; text-wrap:balance; }
.sqx-authx-lede { font-size:1.125rem; line-height:1.5; color:#fff; max-width:30rem; }
.sqx-authx-points { list-style:none; margin:1.25rem 0 0; padding:0; display:grid; gap:.75rem; max-width:30rem; }
.sqx-authx-points li { display:flex; align-items:flex-start; gap:.75rem; font-size:1rem; line-height:1.45; color:#fff; }
.sqx-authx-points .sq-icon { flex:none; width:1.75rem; height:1.75rem; padding:.3125rem; border-radius:.5rem; background:#fff; color:#06473d; }

/* Points as subtle cards (admin login): a title + one line on a translucent panel over the dark overlay. The copy is
   taller, so the H1 sits higher on the photo: the overlay turns dark earlier to keep the white copy >= 7:1. */
.sqx-authx-cards::before { background:linear-gradient(180deg, rgba(6,52,44,.10) 0%, rgba(6,52,44,.45) 14%, rgba(5,44,37,.88) 30%, rgba(4,36,30,.95) 45%, #04241e 100%); }
.sqx-authx-cards .sqx-authx-points { gap:.625rem; }
.sqx-authx-cards .sqx-authx-points li { align-items:center; padding:.75rem .875rem; border:1px solid rgba(255,255,255,.22); border-radius:.75rem; background:rgba(255,255,255,.08); }
.sqx-authx-cards .sqx-authx-points li>span { display:flex; flex-direction:column; min-width:0; }
.sqx-authx-cards .sqx-authx-points strong { font-weight:700; }
.sqx-authx-cards .sqx-authx-points .sq-icon { width:2.25rem; height:2.25rem; padding:.5rem; }

/* Admin login: the number to type (session captcha) next to its label. */
.sqx-admin-captcha { display:inline-block; margin-left:.375rem; padding:0 .625rem; border-radius:.375rem; background:#213b31; color:#fff; font-weight:700; letter-spacing:.12em; font-variant-numeric:tabular-nums; }

/* ── Right: the form card (login.css .sq-auth-panel)─────────────────────────────────────────────────── */
.sqx-authx-panel { padding-block:2rem; }
.sqx-authx-head { margin-bottom:1rem; }
.sqx-authx-head h2 { font-size:1.5rem; line-height:1.25; letter-spacing:-.02em; margin-bottom:.25rem; }
.sqx-authx-head p { font-size:1rem; line-height:1.5; color:#415b51; }
.sqx-authx-head strong { color:var(--sq-ink); overflow-wrap:anywhere; }
.sqx-authx-optional { font-weight:400; color:#415b51; }
.sqx-authx-note { margin:.75rem 0 .25rem; font-size:1rem; line-height:1.5; color:#415b51; text-align:center; }
.sqx-authx-panel form + form { margin-top:.25rem; }
.sqx-authx-panel .sq-auth-submit { margin-top:.5rem; }
.sqx-authx-panel .sq-auth-divider { margin-top:.75rem; }
.sqx-authx-panel .sq-auth-bottom { padding-top:.75rem; border-top:1px solid #dbe5df; margin-top:1rem; }

/* Every password field gets the toggle (login.css pads only name=password). */
.sq-auth-page .sq-auth-field .sq-auth-input-wrap input[type=password],
.sq-auth-page .sq-auth-field .sq-auth-input-wrap input[data-sqx-revealed] { padding-right:3.25rem; }

/* Mobile number: the shared <x-phone-input> (fixed +91) in the login's prefix style. */
.sq-auth-page .sqx-phone-in__cc { padding:0 .875rem; border:1px solid var(--sq-control-border); border-right:0; border-radius:.625rem 0 0 .625rem; background:#edf5f0; color:var(--sq-ink); font-size:1rem; font-weight:600; }
.sq-auth-page .sq-auth-field .sqx-phone-in input { padding-left:.75rem; border-radius:0 .625rem .625rem 0; }

/* Live password rules (<x-password-rules>, the one rule set); prefixed to win over the component's base styles. */
.sqx-authx-panel .sqx-authx-rules { list-style:none; margin:.5rem 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.25rem .75rem; }
.sqx-authx-panel .sqx-authx-rules li { display:flex; align-items:center; gap:.375rem; font-size:.9375rem; line-height:1.4; color:#415b51; }
.sqx-authx-panel .sqx-authx-rules svg { flex:none; width:1.125rem; height:1.125rem; }
.sqx-authx-panel .sqx-authx-rules .sqx-rule-on { display:none; }
.sqx-authx-panel .sqx-authx-rules li[data-met=true] { color:#06473d; font-weight:600; }
.sqx-authx-panel .sqx-authx-rules li[data-met=true] .sqx-rule-on { display:inline; stroke-width:3; }
.sqx-authx-panel .sqx-authx-rules li[data-met=true] .sqx-rule-off { display:none; }

/* Terms: a checkbox row with links (login.css .sq-auth-remember). */
/* .sq-auth-field label (display:block) would otherwise win over login.css's .sq-auth-remember flex row. */
.sqx-authx-terms .sq-auth-remember { display:flex; gap:.625rem; align-items:flex-start; font-size:1rem; line-height:1.5; padding-top:.5rem; }
.sqx-authx-terms .sq-auth-remember input { margin-top:.125rem; }
.sqx-authx-terms input[aria-invalid=true] { outline:2px solid #a2342a; outline-offset:2px; }

/* Short desktop screens: the login's compact spacing. */
@media (min-width:58em) and (max-height:50em) {
 .sqx-authx-panel { padding-block:1.25rem; }
 .sqx-authx-copy { padding:2rem; }
}
/* Below 928px the form comes first (login.css orders .sq-auth-panel first) and the photo is a short banner. */
@media (max-width:57.999em) {
 .sqx-authx-visual { min-height:0; border-radius:0 0 1.5rem 1.5rem; background:#04241e; }
 .sqx-authx-visual::before { content:none; }
 .sqx-authx-photo { position:static; z-index:auto; height:9.5rem; }
 .sqx-authx-copy { padding:1.5rem; }
 .sqx-authx-panel { padding-block:1.5rem; }
}
@media (max-width:30em) {
 .sqx-authx-panel { padding:1.25rem 1rem; }
 .sqx-authx-copy { padding:1.25rem; }
 .sqx-authx-visual h1 { font-size:1.75rem; }
 .sqx-authx-lede { font-size:1rem; }
 .sqx-authx-panel .sqx-authx-rules { grid-template-columns:minmax(0,1fr); }
}
@media (forced-colors:active) { .sqx-authx-visual::before { background:Canvas; } .sqx-authx-photo { display:none; } }