/* auth.css: מסך הכניסה.

   מסך אחד ומלא, בלי כותרת האתר ובלי תפריטים, כי זו הדלת ולא עוד עמוד:
   מימין לוח המותג שמסביר למה יש כאן חשבון, ומשמאל הכרטיס עם הפעולה.
   בנייד הלוח יורד ונשאר הכרטיס בלבד. הצבעים מגיעים מטוקני design.css,
   פרט ללוח הכהה שנשאר זהה בשני המצבים, כמו קטע התהליך בדף הבית. */

main[data-screen="login"]{padding:0}

.auth-page{
  display:grid;grid-template-columns:1fr;
  min-height:100dvh;background:var(--paper);
}

/* ===== לוח המותג ===== */
.auth-aside{
  display:none;flex-direction:column;justify-content:space-between;
  background:#183c30;color:#f8f8f2;padding:54px 48px 0;overflow:hidden;
}
.auth-brand{display:flex;align-items:center;gap:11px;font-size:1.38rem;font-weight:700;color:#f8f8f2}
.auth-aside-kicker{margin-top:34px;font-size:.79rem;color:#c4d1c4;display:flex;align-items:center;gap:9px}
.auth-aside-kicker::before{content:'';width:7px;height:7px;border-radius:50%;background:#d6ed9b;flex:none}
.auth-aside-title{font-size:2.1rem;line-height:1.25;font-weight:650;margin:14px 0 30px;color:#f8f8f2}
.auth-points{list-style:none;margin:0;padding:0;display:grid;gap:15px;max-width:34ch}
.auth-points li{display:flex;align-items:flex-start;gap:11px;font-size:.92rem;line-height:1.7;color:#dbe4d9}
.auth-points .ui-icon{width:18px;height:18px;margin-top:6px;color:#d6ed9b;stroke-width:2.1}
.auth-art{display:block;width:100%;max-width:430px;height:auto;margin:26px auto 0;opacity:.92}

/* ===== הכרטיס ===== */
.auth-stage{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:34px 22px 30px;
}
.auth-card{
  width:100%;max-width:452px;background:var(--surface);
  border:1px solid var(--border);border-radius:20px;padding:34px 34px 28px;
  box-shadow:var(--shadow-lg);
}
.auth-card-brand{
  display:flex;align-items:center;gap:9px;font-size:1.2rem;font-weight:700;
  color:var(--text);margin-bottom:22px;justify-content:center;
}
.auth-card h1{font-size:1.62rem;line-height:1.3;margin:0 0 7px}
.auth-lede{font-size:.9rem;color:var(--text-2);line-height:1.65;margin:0 0 22px}

/* מחליף בין כניסה להרשמה. שתי אפשרויות, אז לשונית ולא תפריט נפתח. */
.auth-tabs{
  display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin-bottom:22px;
  background:var(--surface-2);border-radius:11px;
}
.auth-tabs button{
  min-height:42px;border-radius:8px;font-size:.92rem;font-weight:600;color:var(--text-2);
  border:1px solid transparent;transition:background .15s,color .15s,border-color .15s;
}
.auth-tabs button:hover{color:var(--text)}
.auth-tabs button.on{background:var(--surface);color:var(--text);border-color:var(--border);box-shadow:var(--shadow)}
.auth-tabs button[disabled]{opacity:.6;cursor:default}

.auth-social{display:grid;gap:10px}
.auth-social[hidden]{display:none}
.social-btn{
  display:flex;align-items:center;justify-content:center;gap:11px;width:100%;min-height:50px;
  padding:10px 16px;border:1.5px solid var(--border);border-radius:11px;background:var(--surface);
  color:var(--text);font-size:.95rem;font-weight:600;
  transition:border-color .15s,background .15s;
}
.social-btn:hover{border-color:var(--text-3);background:var(--surface-2)}
.social-mark{display:flex;flex:none;width:21px;height:21px}
.social-mark svg{width:21px;height:21px}
.auth-wait{font-size:.86rem;color:var(--text-3);text-align:center;padding:14px 0}

.auth-divider{display:flex;align-items:center;gap:14px;margin:22px 0 20px;color:var(--text-3);font-size:.8rem}
.auth-divider[hidden]{display:none}
.auth-divider::before,.auth-divider::after{content:'';height:1px;background:var(--border);flex:1}

#auth-form{display:grid;gap:17px}
#auth-form .field{display:grid;gap:7px}
#auth-form .field[hidden]{display:none}
#auth-form label{font-size:.87rem;font-weight:600}
.label-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
#auth-form input[type="email"],#auth-form input[type="password"],#auth-form input[type="text"]{
  width:100%;min-width:0;min-height:50px;padding:12px 14px;font-size:1rem;
  border:1.5px solid var(--border);border-radius:11px;
  background:var(--paper);color:var(--text);
}
#auth-form input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
#auth-form input:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.password-wrap{display:flex;gap:8px;align-items:stretch}
.password-wrap input{flex:1}
.reveal{
  flex:none;padding:0 14px;font-size:.82rem;font-weight:600;color:var(--text-2);
  border:1.5px solid var(--border);border-radius:11px;background:transparent;
}
.reveal:hover{color:var(--text);border-color:var(--text-3)}
.field-help{font-size:.8rem;color:var(--text-2);line-height:1.6;margin:0}
.field-help[hidden]{display:none}

.terms-row{display:flex;align-items:flex-start;gap:11px;font-size:.87rem;line-height:1.65;font-weight:400!important;cursor:pointer}
.terms-row[hidden]{display:none}
.terms-row input{flex:none;width:19px;height:19px;margin-top:3px;accent-color:var(--primary);cursor:pointer}
.terms-row a{text-decoration:underline;text-underline-offset:3px}
.auth-submit{width:100%;min-height:52px;font-size:1rem;margin-top:2px}

.auth-card .auth-msg{margin-top:15px;font-size:.88rem;text-align:center}
.link-btn{font-size:.85rem;font-weight:600;color:var(--primary);padding:2px}
.link-btn:hover{text-decoration:underline;text-underline-offset:3px}
.link-btn[hidden]{display:none}
.auth-alt{display:flex;justify-content:center;margin-top:16px}
.auth-fine{
  font-size:.77rem;line-height:1.75;color:var(--text-3);
  margin:20px 0 0;padding-top:17px;border-top:1px solid var(--border);
}
.auth-fine a{color:var(--text-2);text-decoration:underline;text-underline-offset:3px}
.auth-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:9px 20px;margin-top:22px;font-size:.78rem}
.auth-foot a{color:var(--text-2)}

@media(min-width:960px){
  .auth-page{grid-template-columns:1.02fr 1fr}
  .auth-aside{display:flex}
  .auth-card-brand{display:none}
  .auth-stage{padding:40px}
}
@media(max-width:640px){
  .auth-stage{padding:26px 18px 34px;justify-content:flex-start}
  .auth-card{padding:26px 21px 22px;border-radius:16px}
  .auth-card h1{font-size:1.42rem}
  .auth-lede{font-size:.87rem;margin-bottom:20px}
  .social-btn{font-size:.9rem;min-height:48px}
}