/* ZaxSocial · css/auth.css — auth screens (.zs-auth-screen: bar, brand, title, form, strength meter, one-time-code cells,
   honeypot, done states, ≥1024 split with a brand aside) and the photo cropper (.zs-auth-crop). Tokens only.
   Owner: U4. Docs: arch/15-shell-pwa-landing-ui-c.md §12.1–§12.2, §13 (auth.css blocks), §11.9 (safe areas); board 02. */

.zs-auth-screen{position:relative;display:flex;min-height:100dvh;background:var(--zs-bg)}
.zs-auth-screen__panel{position:relative;display:flex;flex-direction:column;flex:1;min-width:0;padding:var(--zs-safe-top) max(16px,var(--zs-safe-right)) calc(24px + var(--zs-safe-bottom)) max(16px,var(--zs-safe-left))}
.zs-auth-screen__bar{display:flex;align-items:center;justify-content:space-between;height:52px;padding:0}
.zs-auth-screen__back{display:inline-flex;align-items:center;gap:2px;min-height:44px;border:0;background:none;color:var(--zs-text);font:inherit;cursor:pointer}
.zs-auth-screen__back.is-ios{padding:0 8px 0 0;color:var(--zs-accent-text);font-size:17px}
.zs-auth-screen__back.is-ios .zi{width:26px;height:26px}
.zs-auth-screen__baraction{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;font-size:15px;font-weight:600}
.zs-auth-screen__inner{width:100%;max-width:440px;margin:0 auto;padding:6px 8px 0}
.zs-auth-screen__brand{display:inline-flex;text-decoration:none}
.zs-mark.zs-auth-screen__mark{width:52px;height:52px;border-radius:16px}
.zs-mark.zs-auth-screen__mark .zi{width:62%;height:62%;--zi-stroke:2.4}
.zs-auth-screen__title{margin:18px 0 0;font-size:28px;line-height:34px;font-weight:800;letter-spacing:-.03em;outline:none}
.zs-auth-screen__sub{margin:6px 0 0;font-size:15px;line-height:21px;color:var(--zs-text-secondary)}
.zs-auth-screen__sub:empty{display:none}
.zs-auth-screen__main{margin-top:24px}
.zs-auth-screen__form{display:grid;gap:16px}
.zs-auth-screen__form .zs-input,.zs-auth-screen__form .zs-textarea{font-size:16px}
.zs-auth-screen__form>.zs-btn--lg{margin-top:4px}
.zs-auth-screen__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.zs-auth-screen__remember .zs-checkrow__text{font-size:14px;color:var(--zs-text-secondary)}
.zs-auth-screen__forgot{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:600}
.zs-auth-screen__agree .zs-checkrow{align-items:flex-start;gap:10px;font-size:13.5px;line-height:19px;color:var(--zs-text-secondary)}
.zs-auth-screen__agree .zs-check{flex:none;margin-top:1px}
.zs-auth-screen__agree .zs-link{font-weight:600}
.zs-auth-screen__formerror[hidden],.zs-auth-screen__otpfield .zs-hint[hidden]{display:none}
.zs-auth-screen__formerror{display:flex;align-items:flex-start;gap:6px;margin:0}
.zs-auth-screen__formerror .zi{flex:none;width:16px;height:16px;margin-top:2px}
.zs-auth-screen__alt{margin:20px 0 0;text-align:center;font-size:14px;color:var(--zs-text-secondary)}
.zs-auth-screen__alt .zs-link{font-weight:600}
.zs-auth-screen__center{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;padding:12px 0}
.zs-auth-screen__links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.zs-auth-screen__foot{margin-top:auto;padding-top:28px;text-align:center;font-size:12.5px;line-height:16px;color:var(--zs-text-tertiary)}
.zs-auth-screen__foot .zs-link{display:inline-flex;align-items:center;min-height:32px;color:var(--zs-text-tertiary);font-weight:550}
.zs-auth-screen__trust{display:flex;align-items:center;justify-content:center;gap:6px}
.zs-auth-screen__trust .zi{width:15px;height:15px;--zi-stroke:2;color:var(--zs-success)}
.zs-auth-screen__hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.zs-auth-screen__done{padding:12px 0}

/* password strength */
.zs-auth-screen__meter{display:flex;align-items:center;gap:4px;margin-top:8px}
.zs-auth-screen__meter[hidden]{display:none}
.zs-auth-screen__seg{flex:1;height:4px;border-radius:2px;background:var(--zs-surface-3);transition:background-color var(--zs-dur-base) var(--zs-ease-standard)}
.zs-auth-screen__meter[data-level="1"] .zs-auth-screen__seg.is-on{background:var(--zs-danger)}
.zs-auth-screen__meter[data-level="2"] .zs-auth-screen__seg.is-on{background:var(--zs-warning)}
.zs-auth-screen__meter[data-level="3"] .zs-auth-screen__seg.is-on,.zs-auth-screen__meter[data-level="4"] .zs-auth-screen__seg.is-on{background:var(--zs-success)}
.zs-auth-screen__meterlabel{min-width:56px;margin-left:8px;text-align:right;font-size:12px;font-weight:650;color:var(--zs-text-secondary)}
.zs-auth-screen__meter[data-level="1"] .zs-auth-screen__meterlabel,.zs-auth-screen__meter[data-level="0"] .zs-auth-screen__meterlabel{color:var(--zs-danger-ink)}
.zs-auth-screen__meter[data-level="2"] .zs-auth-screen__meterlabel{color:var(--zs-warning-ink)}
.zs-auth-screen__meter[data-level="3"] .zs-auth-screen__meterlabel,.zs-auth-screen__meter[data-level="4"] .zs-auth-screen__meterlabel{color:var(--zs-success-ink)}

/* one-time code: a real input over six drawn cells (autofill + paste work) */
.zs-auth-screen__otp{position:relative;width:100%;max-width:360px;margin:0 auto}
.zs-auth-screen__cells{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.zs-auth-screen__cell{display:grid;place-items:center;height:56px;border-radius:14px;background:var(--zs-surface);box-shadow:inset 0 0 0 1px var(--zs-border);font-size:24px;font-weight:750;font-variant-numeric:tabular-nums;color:var(--zs-text);transition:box-shadow var(--zs-dur-fast) var(--zs-ease-standard)}
.zs-auth-screen__cell.is-filled{box-shadow:inset 0 0 0 1.5px var(--zs-border-strong)}
.zs-auth-screen__cell.is-active{box-shadow:inset 0 0 0 1.5px var(--zs-accent),0 0 0 4px var(--zs-focus-ring)}
.zs-auth-screen__otp.is-error .zs-auth-screen__cell{box-shadow:inset 0 0 0 1.5px var(--zs-danger)}
.zs-auth-screen__otpinput{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;opacity:0;font-size:16px;color:transparent;caret-color:transparent;background:transparent}
.zs-auth-screen__otpfield .zs-hint{justify-content:center;text-align:center}

/* split layout ≥ 1024: brand aside + form */
.zs-auth-screen__aside{display:none}
@media (min-width:1024px){
  .zs-auth-screen__aside{position:relative;display:flex;flex-direction:column;justify-content:flex-end;width:44%;max-width:640px;padding:48px;overflow:hidden;color:var(--zs-lit-ffffff);background:radial-gradient(520px 360px at 92% 8%,var(--zs-lit-ffffff-22),transparent 62%),var(--zs-gradient-brand)}
  .zs-auth-screen__asidebrand{position:absolute;top:40px;left:48px;display:flex;align-items:center;gap:10px;font-size:22px}
  .zs-auth-screen__asidebrand .zs-mark{width:36px;height:36px;border-radius:11px;box-shadow:inset 0 0 0 1px var(--zs-lit-ffffff-26)}
  .zs-auth-screen__asidebrand .zs-wordmark,.zs-auth-screen__asidebrand .zs-wordmark span{color:var(--zs-lit-ffffff)}
  .zs-auth-screen__art{position:absolute;inset:18% 12% 34%;display:grid;place-items:center;opacity:.95}
  .zs-auth-screen__art svg{width:100%;height:100%;max-width:360px}
  .zs-auth-screen__asidetitle{margin:0;font-size:40px;line-height:44px;font-weight:800;letter-spacing:-.04em}
  .zs-auth-screen__asidetext{margin:14px 0 0;max-width:420px;font-size:17px;line-height:26px;opacity:.86}
  .zs-auth-screen__panel{justify-content:flex-start;padding-top:24px}
  .zs-auth-screen__inner{margin-top:6vh}
}

/* legal sheet + change-email sheet */
.zs-auth-legal{font-size:15px;line-height:24px;color:var(--zs-text-secondary)}
.zs-auth-legal h2{margin:20px 0 6px;font-size:18px;line-height:24px;color:var(--zs-text)}
.zs-auth-sheetform{padding-bottom:8px}
.zs-auth-legal-sheet .zs-sheet__body{max-height:min(70vh,680px);overflow:auto}
.zs-auth-crop-sheet .zs-sheet__body{padding-top:12px}

/* cropper */
.zs-auth-crop{display:grid;gap:14px;justify-items:center}
.zs-auth-crop__stage{position:relative;width:min(100%,420px);aspect-ratio:1;border-radius:20px;overflow:hidden;background:var(--zs-lit-000000);touch-action:none;cursor:grab;outline:none}
.zs-auth-crop__stage:focus-visible{box-shadow:0 0 0 3px var(--zs-focus-ring)}
.zs-auth-crop__stage:active{cursor:grabbing}
.zs-auth-crop__canvas{display:block}
.zs-auth-crop__mask{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2000px var(--zs-lit-000000-50);pointer-events:none;outline:2px solid var(--zs-lit-ffffff-70);outline-offset:-2px}
.zs-auth-crop__mask.is-square{border-radius:16px}
.zs-auth-crop__controls{display:flex;align-items:center;gap:10px;width:min(100%,420px);color:var(--zs-text-tertiary)}
.zs-auth-crop__zoom{flex:1;min-height:44px;accent-color:var(--zs-accent)}
.zs-auth-crop__hint{margin:0;font-size:13px;color:var(--zs-text-tertiary);text-align:center}

@media (prefers-reduced-motion:reduce){.zs-auth-screen__seg,.zs-auth-screen__cell{transition:none}}
html[data-motion="reduce"] .zs-auth-screen__seg,html[data-motion="reduce"] .zs-auth-screen__cell{transition:none}

/* Refined authentication layout: a calm form card on small screens and a branded workspace on wide screens. */
.zs-auth-screen{isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 84% 6%,var(--zs-accent-soft),transparent 36%),var(--zs-bg)}
.zs-auth-screen__panel{z-index:1;min-height:100dvh;justify-content:flex-start}
.zs-auth-screen__bar{max-width:560px;width:100%;margin-inline:auto}
.zs-auth-screen__inner{max-width:480px;padding-inline:0}
.zs-auth-screen__brand{transition:transform var(--zs-dur-fast) var(--zs-ease-standard)}
.zs-auth-screen__brand:hover{transform:translateY(-2px)}
.zs-auth-screen__title{font-size:clamp(28px,3.4vw,34px);line-height:1.12;letter-spacing:-.045em}
.zs-auth-screen__sub{max-width:420px;line-height:1.55}
.zs-auth-screen__main{margin-top:22px;padding:clamp(18px,2.5vw,26px);border:1px solid var(--zs-border);border-radius:24px;background:var(--zs-surface);box-shadow:var(--zs-shadow-md),0 0 0 1px var(--zs-hairline)}
.zs-auth-screen__form{gap:17px}
.zs-auth-screen__form .zs-input,.zs-auth-screen__form .zs-textarea{min-height:48px;border-radius:13px;background:var(--zs-surface);transition:border-color var(--zs-dur-fast) var(--zs-ease-standard),box-shadow var(--zs-dur-fast) var(--zs-ease-standard),background-color var(--zs-dur-fast) var(--zs-ease-standard)}
.zs-auth-screen__form .zs-input:focus,.zs-auth-screen__form .zs-textarea:focus{border-color:var(--zs-accent);background:var(--zs-bg);box-shadow:0 0 0 4px var(--zs-focus-ring)}
.zs-auth-screen__form>.zs-btn--lg{min-height:52px;border-radius:14px;box-shadow:var(--zs-shadow-sm)}
.zs-auth-screen__row{margin-top:-3px}
.zs-auth-screen__forgot,.zs-auth-screen__alt .zs-link,.zs-auth-screen__baraction{transition:color var(--zs-dur-fast) var(--zs-ease-standard)}
.zs-auth-screen__alt{margin-top:18px}
.zs-auth-screen__foot{padding-top:22px}
.zs-auth-screen__aside{isolation:isolate}
@media(min-width:1024px){
  .zs-auth-screen{background:var(--zs-bg)}
  .zs-auth-screen__aside{width:46%;max-width:none;padding:clamp(40px,5vw,76px);background:radial-gradient(ellipse at 18% 15%,var(--zs-lit-ffffff-26),transparent 36%),radial-gradient(ellipse at 90% 88%,var(--zs-lit-ffffff-18),transparent 43%),var(--zs-gradient-brand)}
  .zs-auth-screen__aside::before,.zs-auth-screen__aside::after{content:"";position:absolute;z-index:-1;pointer-events:none}
  .zs-auth-screen__aside::before{width:min(42vw,520px);aspect-ratio:1;right:-18%;top:17%;border:1px solid var(--zs-lit-ffffff-26);border-radius:50%;box-shadow:0 0 0 32px var(--zs-lit-ffffff-08),0 0 0 64px var(--zs-lit-ffffff-03);animation:zs-auth-orbit 18s ease-in-out infinite alternate}
  .zs-auth-screen__aside::after{left:48px;right:48px;bottom:36px;height:1px;background:linear-gradient(90deg,var(--zs-lit-ffffff-32),transparent)}
  .zs-auth-screen__asidebrand{top:clamp(30px,4vw,54px);left:clamp(32px,4.5vw,72px);z-index:2}
  .zs-auth-screen__art{inset:14% 9% 32%;z-index:1;filter:drop-shadow(0 22px 42px var(--zs-lit-000000-18));animation:zs-auth-art-float 7s ease-in-out infinite}
  .zs-auth-screen__asidetitle,.zs-auth-screen__asidetext{position:relative;z-index:2}
  .zs-auth-screen__asidetitle{max-width:520px;font-size:clamp(34px,4vw,50px);line-height:1.04;letter-spacing:-.055em}
  .zs-auth-screen__asidetext{max-width:430px;margin-top:16px;font-size:16px;line-height:1.65;opacity:.9}
  .zs-auth-screen__panel{justify-content:center;padding:28px max(28px,var(--zs-safe-right)) calc(28px + var(--zs-safe-bottom)) max(28px,var(--zs-safe-left))}
  .zs-auth-screen__bar{position:absolute;top:18px;left:50%;width:min(100% - 56px,680px);transform:translateX(-50%)}
  .zs-auth-screen__inner{margin:auto;padding-top:28px}
  .zs-auth-screen__foot{width:100%;max-width:480px;margin:10px auto 0}
}
/* Desktop auth stays inside the viewport: the form is laid out to fit the available window. */
@media(min-width:768px){
  .zs-auth-screen{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;min-height:0;overflow:hidden}
  .zs-auth-screen__panel{height:100%;min-height:0;box-sizing:border-box}
}
@media(min-width:768px) and (max-height:760px){
  .zs-auth-screen__panel{padding-top:10px;padding-bottom:10px}
  .zs-auth-screen__inner{padding-top:8px}
  .zs-auth-screen__brand .zs-mark{width:44px;height:44px}
  .zs-auth-screen__title{margin-top:10px;font-size:27px}
  .zs-auth-screen__main{margin-top:12px;padding:15px}
  .zs-auth-screen__form{gap:10px}
  .zs-auth-screen__form .zs-input,.zs-auth-screen__form .zs-textarea{min-height:44px}
  .zs-auth-screen__form>.zs-btn--lg{min-height:46px}
  .zs-auth-screen__alt{margin-top:9px}
  .zs-auth-screen__foot{padding-top:8px}
  .zs-auth-screen__bar{top:8px}
}
@media(max-width:600px){
  .zs-auth-screen__panel{padding-inline:max(16px,var(--zs-safe-left)) max(16px,var(--zs-safe-right))}
  .zs-auth-screen__bar{height:48px}
  .zs-auth-screen__inner{padding-top:8px}
  .zs-auth-screen__main{padding:17px;border-radius:20px}
  .zs-auth-screen__title{margin-top:15px;font-size:29px}
  .zs-auth-screen__form{gap:15px}
  .zs-auth-screen__foot{padding-top:20px}
}
@keyframes zs-auth-orbit{to{transform:translate(-8px,12px) scale(1.035)}}
@keyframes zs-auth-art-float{50%{transform:translateY(-7px)}}
@media(prefers-reduced-motion:reduce){.zs-auth-screen__brand,.zs-auth-screen__aside::before,.zs-auth-screen__art{animation:none;transition:none}.zs-auth-screen__brand:hover{transform:none}}
html[data-motion="reduce"] .zs-auth-screen__aside::before,html[data-motion="reduce"] .zs-auth-screen__art{animation:none}