/* =========================================================================
   TOP A — member sign-in (C1, 2026-10-17): sign in, create an account,
   recover and set a password. Every size, space and colour comes from the
   design system (css/topa-ds.css): --t-fs-*, --t-sp-*, --t-*.
   Reference: 21st «Centered Social Login» (ln-dev7) — a narrow centred
   column, the mark, a title and one line, providers stacked above the email
   form. Rebuilt in plain CSS; no 21st code.
   ========================================================================= */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
.au-body{margin:0;background:var(--t-bg);color:var(--t-ink);font-family:var(--t-display);font-size:var(--t-fs-body);line-height:var(--t-lh-body);-webkit-font-smoothing:antialiased;overflow-x:clip}
.au-body :focus-visible{outline:2px solid var(--t-green);outline-offset:3px;border-radius:8px}

.au{position:relative;min-height:100dvh;display:flex;justify-content:center;padding:clamp(var(--t-sp-6),6vh,var(--t-sp-8)) var(--t-gutter) var(--t-sp-7);isolation:isolate;overflow-x:clip}
/* The green horizon of the home's globe, low and quiet. */
.au__glow{position:absolute;inset:0 0 auto;height:min(56vh,520px);z-index:-1;pointer-events:none;
  background:radial-gradient(120% 70% at 50% -18%,rgba(61,220,111,.16),rgba(61,220,111,.05) 42%,transparent 70%)}
.au__glow::after{content:"";position:absolute;inset-inline:0;bottom:12%;height:1px;background:linear-gradient(90deg,transparent,rgba(61,220,111,.38),transparent);opacity:.7}
.au__col{width:100%;min-width:0;max-width:420px;display:flex;flex-direction:column;align-items:stretch;gap:var(--t-sp-5)}
.au__mark{align-self:center;display:block;line-height:0}
.au__mark img{width:104px;height:auto}

.au__card{background:linear-gradient(180deg,rgba(19,23,22,.92),rgba(13,16,15,.92));border:1px solid var(--t-line-2);border-radius:var(--t-r-xl);padding:var(--t-sp-6) clamp(var(--t-sp-5),5vw,var(--t-sp-6));box-shadow:var(--t-sh-3);display:flex;flex-direction:column;gap:var(--t-sp-5)}
@media (max-width:420px){.au__card{padding:var(--t-sp-5) var(--t-sp-4);border-radius:var(--t-r-l)}}

.au__panel{display:flex;flex-direction:column;gap:var(--t-sp-5)}
.au__panel[hidden]{display:none}
.au__h{margin:0;font-size:var(--t-fs-h2);line-height:var(--t-lh-head);font-weight:700;text-wrap:balance}
.au__p{margin:calc(var(--t-sp-2) * -1) 0 0;font-size:var(--t-fs-small);line-height:1.7;color:var(--t-ink-2);text-wrap:pretty}

/* Buttons */
.au__btn{display:flex;align-items:center;justify-content:center;gap:var(--t-sp-3);width:100%;min-height:50px;padding:0 var(--t-sp-4);border-radius:var(--t-r-l);font:inherit;font-size:var(--t-fs-btn);font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;transition:background var(--t-t2) var(--t-e-std),border-color var(--t-t2) var(--t-e-std),transform var(--t-t1) var(--t-e-std)}
.au__btn svg{width:18px;height:18px;flex:none}
.au__btn:active{transform:translateY(1px)}
.au__btn--p{border:0;background:var(--t-green);color:var(--t-green-ink)}
.au__btn--p:hover{background:var(--t-green-3)}
.au__btn--prov{border:1px solid var(--t-line-2);background:var(--t-ink);color:#0B0D0C}
.au__btn--prov:hover{background:#fff}
/* Google and Apple: the same box, the icon in its own 20px column at the start edge, the text centred between. */
.au__btn--prov{display:grid;grid-template-columns:20px 1fr 20px;column-gap:var(--t-sp-3);text-align:center}
.au__btn--prov svg{width:20px;height:20px;justify-self:center}
@media (max-width:359px){.au__btn--prov{display:flex}}
.au__btn--ghost{border:1px solid var(--t-line-2);background:transparent;color:var(--t-ink)}
.au__btn--ghost:hover{border-color:var(--t-line-3);background:rgba(241,237,227,.04)}
.au__prov{display:flex;flex-direction:column;gap:var(--t-sp-3)}
.au__or{display:flex;align-items:center;gap:var(--t-sp-3);color:var(--t-mute);font-size:var(--t-fs-label)}
.au__or::before,.au__or::after{content:"";flex:1;height:1px;background:var(--t-line)}

/* Email: shown at once without script; collapsed behind its button when providers exist. */
.au__email{display:flex;flex-direction:column;gap:var(--t-sp-5)}
.au__email.is-collapsed .au__form{display:none}
.au__email:not(.is-collapsed) [data-au-email-toggle]{display:none}
/* The create-account button follows the options block and shows with the email form. */
.au__email.is-collapsed ~ [data-au-submit]{display:none}

/* Fields */
.au__form{display:flex;flex-direction:column;gap:20px;margin:0}
.au__f{display:flex;flex-direction:column;gap:var(--t-sp-2)}
.au__f label,.au__f-row label{font-size:var(--t-fs-label);font-weight:500;color:var(--t-ink-2)}
.au__f-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--t-sp-3)}
.au__in{width:100%;min-height:50px;padding:0 var(--t-sp-4);border:1px solid var(--t-line-2);border-radius:var(--t-r);background:rgba(7,9,8,.7);color:var(--t-ink);font:inherit;font-size:16px;text-align:start;transition:border-color var(--t-t2),box-shadow var(--t-t2)}
.au__in::placeholder{color:var(--t-mute-2)}
.au__in:hover{border-color:var(--t-line-3)}
.au__in:focus{outline:0;border-color:var(--t-green-line);box-shadow:0 0 0 3px var(--t-green-soft)}
.au__f.is-err .au__in,.au__in[aria-invalid=true]{border-color:var(--t-danger-line)}
.au__pw{position:relative}
.au__pw .au__in{padding-inline-end:52px}
.au__eye{position:absolute;inset-block:0;inset-inline-end:4px;width:44px;display:grid;place-items:center;border:0;background:none;color:var(--t-mute);cursor:pointer;border-radius:var(--t-r)}
.au__eye svg{width:20px;height:20px}
.au__eye:hover,.au__eye[aria-pressed=true]{color:var(--t-ink)}
.au__hint{margin:0;font-size:var(--t-fs-label);line-height:1.6;color:var(--t-mute)}
.au__err{margin:0;font-size:var(--t-fs-label);font-weight:500;color:var(--t-danger)}
.au__check{display:flex;align-items:center;gap:var(--t-sp-3);min-height:44px;margin-block:-8px;font-size:var(--t-fs-small);color:var(--t-ink-2);cursor:pointer}
.au__check input{width:20px;height:20px;margin:0;accent-color:var(--t-green)}
.au__hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* The optional offers box: secondary and quiet — label size, muted, a tidy box on the reading side (RTL-aware). */
.au .mp{--mp-accent:var(--t-green);--mp-ink:var(--t-mute);margin:0;font-size:var(--t-fs-label);line-height:1.65;text-align:start}
.au .mp__row{align-items:flex-start;gap:10px;min-height:0;padding:2px 0}
.au .mp__row input{width:18px;height:18px;margin-top:2px;flex:none}
.au .mp__text{font-size:var(--t-fs-label);font-weight:400;color:var(--t-mute)}
.au .mp__link{display:inline-block;margin-inline-start:.4em;font-size:inherit;opacity:1;color:var(--t-ink-2)}

.au__lnk{appearance:none;border:0;background:none;padding:0;font:inherit;font-size:inherit;color:var(--t-green);text-decoration:none;cursor:pointer}
.au__lnk:hover{text-decoration:underline;text-underline-offset:3px}
.au__f-row .au__lnk{font-size:var(--t-fs-label)}
.au__switch{margin:0;text-align:center;font-size:var(--t-fs-small);color:var(--t-mute)}
.au__switch .au__lnk{font-weight:600}
.au__fine{margin:0;font-size:var(--t-fs-label);line-height:1.7;color:var(--t-mute)}
.au__legal{margin:0;text-align:center;font-size:var(--t-fs-label);line-height:1.7;color:var(--t-mute)}
.au__legal a{color:var(--t-ink-2);text-decoration:underline;text-underline-offset:3px}

/* Messages */
.au__note{margin:0;padding:var(--t-sp-3) var(--t-sp-4);border-radius:var(--t-r);border:1px solid var(--t-line-2);background:var(--t-s2);font-size:var(--t-fs-small);line-height:1.7;color:var(--t-ink-2)}
.au__note--ok{border-color:var(--t-green-line);background:var(--t-green-soft);color:var(--t-ink)}
.au__note--err{border-color:var(--t-danger-line);background:var(--t-danger-soft);color:var(--t-ink)}

/* After «إنشاء الحساب»: the delivery state of the confirmation email (members.partials.signup-status). */
.au .m-login__delivery{display:flex;flex-direction:column;gap:var(--t-sp-3);padding:var(--t-sp-4);border:1px solid var(--t-line-2);border-radius:var(--t-r-l);background:var(--t-s2);font-size:var(--t-fs-small);line-height:1.7}
.au .m-login__delivery p{margin:0}
.au .m-login__addr{font-weight:600;color:var(--t-ink);overflow-wrap:anywhere}
.au .m-login__ok{color:var(--t-green)}
.au .m-login__hint a{color:var(--t-green)}
.au .m-login__resend{margin:0}
.au .t-msg{color:var(--t-danger);font-size:var(--t-fs-label)}

@media (prefers-reduced-motion:reduce){.au *,.au *::before,.au *::after{transition:none!important;animation:none!important}}

/* ---- Sign-in with the app picture (login page only: .au--split) ------------------------------------------
   Wide landscape screens only: two halves, the picture on the left (in Arabic and English alike), the form on the right.
   The picture (1800 x 2000, ratio 0.9) is a straight-edged panel as tall as the window that stays in view while the form
   scrolls. It covers the panel (never stretched); the panel's ratio follows the window (about 0.62-1.2), so a little of
   the artwork's background is trimmed at the sides or at the top and bottom. The title and the phone sit inside the
   artwork's safe box (x 16-84%, y 12-88%) and are never cut.
   Narrower, portrait or phone screens: the panel is display:none, takes no room, and its <picture> has no matching
   source, so the large file is never requested. */
.au__side{display:none}
@media (min-width:960px) and (min-aspect-ratio:5/4){
  .au--split{--au-pad:clamp(32px,4vw,64px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(100dvh,auto);justify-content:stretch;padding:0;direction:ltr}
  html[dir=rtl] .au--split .au__col{direction:rtl}
  /* The right half's own glow: the home's quiet top light, plus a very faint dark-green haze (the picture's ribbon green)
     that exists only along the shared edge and fades out within ~260px. Behind the form, never over it. */
  .au--split .au__glow{inset:0 0 0 50%;height:auto;
    background:radial-gradient(260px 46% at 0 50%,rgba(36,120,78,.2),rgba(36,120,78,.08) 46%,transparent 100%),
               radial-gradient(120% 70% at 50% -18%,rgba(61,220,111,.16),rgba(61,220,111,.05) 42%,transparent 70%)}
  .au--split .au__glow::after{display:none}
  .au--split .au__side{display:block;grid-column:1;grid-row:1;align-self:start;position:sticky;top:0;height:100dvh;background:var(--t-bg)}
  .au--split .au__side picture{display:block;width:100%;height:100%}
  .au--split .au__side img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
  /* The shared edge: the picture's last pixels melt into the sign-in background (the artwork keeps its text well clear). */
  .au--split .au__side::after{content:"";position:absolute;inset-block:0;right:0;width:min(16%,130px);pointer-events:none;
    background:linear-gradient(to left,var(--t-bg),rgba(7,9,8,.82) 20%,rgba(7,9,8,.5) 45%,rgba(7,9,8,.2) 72%,rgba(7,9,8,0))}
  .au--split .au__col{grid-column:2;grid-row:1;align-self:center;justify-self:center;width:calc(100% - 2 * var(--au-pad));margin-block:var(--au-pad)}
  .au--split .au__card{background:none;border:0;box-shadow:none;border-radius:0;padding:0}
}

/* ---- Phone banner (login page only: .au--banner) ---------------------------------------------------------
   Phones (up to 599px): the wide picture (1774 x 887, ratio 2:1) sits full-bleed above the form at its own ratio;
   its bottom melts into the page background through a mask, so there is no visible edge and no empty band.
   Tablets and desktops: display:none, and the <picture> has no matching source, so the file is never requested. */
.au__banner{display:none}
@media (max-width:599px){
  .au--banner{flex-direction:column;justify-content:flex-start;align-items:center;padding-top:0}
  .au--banner .au__banner{display:block;flex:none;width:calc(100% + 2 * var(--t-gutter));margin:0 calc(var(--t-gutter) * -1) -20px;line-height:0;
    -webkit-mask-image:linear-gradient(to bottom,#000 66%,rgba(0,0,0,.6) 84%,transparent);mask-image:linear-gradient(to bottom,#000 66%,rgba(0,0,0,.6) 84%,transparent)}
  .au--banner .au__banner picture,.au--banner .au__banner img{display:block;width:100%}
  .au--banner .au__banner img{height:auto;aspect-ratio:2 / 1}
  .au--banner .au__col{gap:var(--t-sp-4)}
}