/* Sign in, create an account, reset a password (frontend/login.html, public/login.mjs). A calm page on the Haze canvas:
   the lockup, three night cards with the joker last (the page's one moment, dealt once), the brand idea, and the form in a
   plain panel. Tokens only; logical properties, so Arabic mirrors. */
.auth-page{min-height:100vh;background:var(--canvas);color:var(--ink)}
.auth-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(32px,6vw,96px);align-items:center;width:min(1120px,100%);min-height:100vh;margin:0 auto;padding:var(--s-6) var(--s-6)}
.auth-story{display:flex;flex-direction:column;justify-content:space-between;gap:var(--s-7);min-height:min(640px,calc(100vh - 64px));min-width:0;padding:var(--s-2) 0}
.auth-story .brand{align-self:flex-start;gap:10px;padding:4px 2px;border-radius:var(--r-sm)}
.auth-story .brand .jp-mark{width:22px;height:31px}
.auth-story .brand-name{font-size:21px}

/* The hand: an open night, a weekend night and the joker, which is the mark itself. */
.auth-hand{--w:clamp(54px,6.2vw,76px);display:flex;align-items:flex-end;margin:0 0 var(--s-6);padding-block-start:calc(var(--w)*.25)}
.auth-night{position:relative;flex:none;display:grid;place-items:center;inline-size:var(--w);aspect-ratio:var(--night-ratio);border:1px solid var(--line-strong);border-radius:14%/10%;background:var(--surface);box-shadow:var(--shadow-night);
  transform:rotate(var(--r,0deg)) translateY(var(--y,0px));transform-origin:50% 110%;animation:auth-deal 560ms var(--ease-out) both;animation-delay:calc(var(--i,0)*60ms)}
.auth-night+.auth-night{margin-inline-start:calc(var(--w)*-.22)}
.auth-night:nth-child(1){--i:0;--r:-7deg;--y:4px}
.auth-night:nth-child(2){--i:1;--r:0deg;--y:-2px}
.auth-night:nth-child(3){--i:2;--r:7deg;--y:calc(var(--w)*-.22);z-index:1;animation-delay:240ms}
[dir=rtl] .auth-night:nth-child(1){--r:7deg}
[dir=rtl] .auth-night:nth-child(3){--r:-7deg}
.auth-night.is-weekend{border-color:color-mix(in srgb,var(--dune) 62%,var(--surface));background:color-mix(in srgb,var(--dune) 24%,var(--surface))}
.auth-night.is-joker{border-color:var(--joker);background:var(--joker);color:var(--on-joker)}
/* The Sadu eye: a diamond inside a diamond, line only on open cards, filled on the joker. */
.auth-eye{display:block;inline-size:34%;aspect-ratio:1;border:1.5px solid var(--line-strong);transform:rotate(45deg) scaleY(1.3);border-radius:2px}
.is-weekend .auth-eye{border-color:color-mix(in srgb,var(--dune) 80%,var(--ink))}
.is-joker .auth-eye{border:0;background:var(--wool);box-shadow:inset 0 0 0 calc(var(--w)*.075) var(--wool),inset 0 0 0 calc(var(--w)*.2) var(--wool)}
.is-joker .auth-eye::after{content:"";position:absolute;inset:32%;background:var(--joker)}
.auth-ix{position:absolute;inset-block-start:6%;inset-inline-start:9%;font-size:calc(var(--w)*.2);font-weight:var(--fw-semibold);line-height:1;font-style:normal}
.auth-ix.end{inset-block:auto 6%;inset-inline:auto 9%}
/* The mark keeps J top-left and ج bottom-right in both languages, as on a real card. */
[dir=rtl] .auth-ix{inset-inline-start:auto;inset-inline-end:9%}
[dir=rtl] .auth-ix.end{inset-inline-end:auto;inset-inline-start:9%}
@keyframes auth-deal{from{opacity:0;transform:translateY(calc(var(--w)*.5)) rotate(0deg)}}
@media (prefers-reduced-motion:reduce){.auth-night{animation:none}}

.auth-idea h1{max-width:16ch;margin:0 0 var(--s-4);font-family:var(--font-display);font-size:clamp(34px,4.2vw,52px);font-weight:var(--fw-bold);line-height:var(--lh-tight);letter-spacing:var(--track-display);color:var(--ink)}
.auth-idea>p{max-width:44ch;margin:0;font-size:16px;line-height:1.6;color:var(--muted)}
.auth-footnote{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;margin:0;font-size:var(--t-sm);color:var(--muted)}
.auth-footnote a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.auth-footnote a:hover{color:var(--ink);text-decoration-color:currentColor}
.auth-lang{display:inline-flex;gap:4px}
.auth-lang a{padding:2px 10px;border-radius:var(--r-pill);text-decoration:none}
.auth-lang a[aria-current]{background:var(--surface-3);color:var(--ink);font-weight:var(--fw-semibold)}

/* The form */
.auth-form-side{min-width:0}
.auth-form-card{width:100%;padding:var(--s-6);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);box-shadow:none}
.auth-form-card h2{margin:0 0 4px;font-family:var(--font-display);font-size:28px;font-weight:var(--fw-semibold);line-height:1.2;letter-spacing:var(--track-head);color:var(--ink)}
.auth-form-card>p{margin:0;font-size:var(--t-base);line-height:1.55;color:var(--muted)}
.auth-tabs{display:flex;gap:2px;margin:var(--s-5) 0;padding:3px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2)}
.auth-tabs[hidden]{display:none}
.auth-tabs button{flex:1;min-height:34px;border:0;border-radius:6px;background:none;color:var(--muted);font-size:var(--t-sm);font-weight:var(--fw-medium);cursor:pointer}
.auth-tabs button:hover{color:var(--ink)}
.auth-tabs button.active{background:var(--surface);color:var(--ink);font-weight:var(--fw-semibold);box-shadow:0 0 0 1px var(--line-strong)}
#auth-form{margin-top:var(--s-4)}
.auth-tabs:not([hidden])+#auth-form{margin-top:0}
#auth-form>.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s-4)}
#auth-form label{font-size:var(--t-sm);font-weight:var(--fw-medium);color:var(--ink-2)}
#auth-form input{min-height:44px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font-size:16px}
#auth-form input:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.auth-page .auth-submit{width:100%;min-height:44px;margin-top:var(--s-2);font-size:var(--t-base)}
.auth-page .button.primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.auth-page .button.primary:hover{background:var(--brand-hover)}
.auth-password-help{margin:var(--s-4) 0 0;font-size:var(--t-sm);line-height:1.6;color:var(--muted)}
.auth-form-card .auth-portability{margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--line);font-size:var(--t-sm);color:var(--muted)}
.auth-page .notice{margin:var(--s-4) 0;font-size:var(--t-sm)}
.auth-page .notice a{color:inherit;font-weight:var(--fw-semibold)}
.auth-page #auth-form>.notice{margin-top:0}
/* Forgot-password link, back link and the sign-up terms line */
.auth-link{padding:0;border:0;background:none;color:var(--brand-ink);font:inherit;font-size:var(--t-sm);font-weight:var(--fw-medium);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.auth-link:hover{text-decoration-thickness:2px}
.auth-forgot{margin:calc(-1 * var(--s-2)) 0 var(--s-4);text-align:end}
.auth-back{margin:var(--s-4) 0 0}
.auth-legal{margin:var(--s-3) 0 0;font-size:var(--t-sm);line-height:1.6;color:var(--muted)}
.auth-legal a{color:var(--ink-2);font-weight:var(--fw-medium)}
.auth-page :is(a,button,input):focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.auth-page #auth-form input:focus-visible{outline:none}

/* Arabic: the same face with roomier lines and no tracking */
.auth-page:lang(ar) :is(h1,h2){line-height:1.35;letter-spacing:0}
.auth-page:lang(ar) :is(.auth-idea>p,.auth-password-help,.auth-legal){line-height:1.85}

/* Phones and narrow windows: one column; the story's parts join the page flow so the links and language switch come after
   the form. */
@media (max-width:900px){
  .auth-layout{grid-template-columns:minmax(0,1fr);gap:var(--s-5);align-items:start;min-height:0;padding:var(--s-4) var(--gutter) var(--s-7)}
  .auth-story{display:contents}
  .auth-story .brand{order:1}
  .auth-idea{order:2}
  .auth-form-side{order:3}
  .auth-footnote{order:4}
  .auth-hand{--w:44px;margin-bottom:var(--s-4)}
  .auth-idea h1{max-width:20ch;margin-bottom:var(--s-2);font-size:28px}
  .auth-idea>p{font-size:var(--t-base)}
  .auth-form-card{padding:var(--s-5)}
}