/* Sign in, create an account, reset a password (frontend/login.html, public/login.mjs). A calm page on the Milh canvas:
   the lockup, the trend line (the page's one moment, drawn 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 .st-mark{width:28px;height:28px}
.auth-story .brand-name{font-size:21px}

/* The line: the mark's gesture drawn large, level and then turning up into two dots. Drawn once on load. */
.auth-line{margin:0 0 var(--s-6);line-height:0}
.auth-line svg{display:block;inline-size:clamp(150px,16vw,200px);block-size:auto;overflow:visible}
.al-path{fill:none;stroke:var(--line-trend);stroke-width:5;stroke-linecap:round;stroke-dasharray:140;animation:auth-draw 900ms var(--ease-in-out) 120ms both}
.al-dot{fill:var(--line-trend);transform-box:fill-box;transform-origin:center;animation:auth-dot 420ms var(--ease-spring) both}
.al-dot:nth-of-type(1){animation-delay:820ms}.al-dot:nth-of-type(2){animation-delay:960ms}
[dir=rtl] .auth-line svg{transform:scaleX(-1)}
@keyframes auth-draw{from{stroke-dashoffset:140}to{stroke-dashoffset:0}}
@keyframes auth-dot{from{opacity:0;transform:scale(.3)}}
@media (prefers-reduced-motion:reduce){.al-path,.al-dot{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)}
}