/*
  app2/login.css — משימה 38 שלב 2, דף הכניסה (login.html).
  בעלות בלעדית: login.html / login.css / login.js. אין נגיעה ב-design-system/ או בדפי app2 אחרים.
  כל class כאן ייחודי תחת קידומת login- כדי לא להתנגש עם tokens.css המשותף או דפי app2 אחרים.
  משתמש ברכיבים משותפים קיימים איפה שאפשר: .card, .card-interactive, .wrap, .btn, .chip,
  .empty-note, .err-inline, .loading-row, .tag-demo, .skel (כולם מ-tokens.css).
*/

/* ---------- שלד עמוד: ממורכז, גובה מסך מלא (מסך כניסה, לא צריך לגלול) ---------- */
.login-page-wrap{
  min-height:calc(100dvh - var(--header-h));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--sp-3); padding-block:var(--sp-4);
}

/* ---------- משימה 59 ריצה ג: רקע הסף (תמונה 20, IMG-4 סעיף 6.1) ----------
   מיצוב בלבד. המסנן, הסקרים והדהייה מגיעים מטוקני tokens.css — לא CSS
   טיפול מקומי (IMG-3). z-index שלילי: מתחת לתוכן הזורם, מעל רקע ה-body. */
.login-bg{ position:fixed; inset:0; z-index:-1; overflow:hidden; }
.login-bg > img{
  width:100%; height:100%; object-fit:cover; object-position:center 38%;
  filter:var(--img-f-deep); transform:scale(1.03);
}
.login-bg::after{ content:''; position:absolute; inset:0; background:var(--scrim-deep); }

.login-hero{ text-align:center; max-width:32rem; }
.login-title{ font-size:2.25rem; color:var(--gold); }
.login-sub{ margin:6px 0 0; color:var(--text-muted); font-size:0.9375rem; }

.login-content{ width:100%; max-width:32rem; }

/* ---------- שלב 1: בחירת פרופיל ----------
   משימה 59 ריצה ג (DES-20): הבורר עבר לרכיבים המשותפים .picker-btn /
   .picker-photo שב-tokens.css. כאן נשארו רק הרשת והפרטים הייחודיים לדף. */
.login-picker-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-2);
}
.login-picker-name{ font-weight:600; font-size:0.9375rem; }
.login-picker-inactive-note{ font-size:0.6875rem; color:var(--text-dim); }

/* ---------- שלב 2: הזנת PIN ---------- */
.login-pin-card{ display:flex; flex-direction:column; gap:var(--sp-2); align-items:stretch; }
.login-pin-back{
  align-self:flex-start; background:none; border:none; color:var(--text-muted);
  font-size:0.8125rem; display:inline-flex; align-items:center; gap:4px; padding:0.4rem;
  min-height:44px;
}
.login-pin-back:hover{ color:var(--text); }
.login-pin-who{ display:flex; align-items:center; gap:var(--sp-2); }
/* משימה 59 ריצה ג: תמונת "מי נכנס" עברה ל-.ph-thumb-48 (סולם --img, IMG-3 1.8);
   הריק ל-.picker-photo-empty המשותף. */
.login-pin-who-name{ font-weight:700; font-size:1.0625rem; }
.login-pin-who-sub{ color:var(--text-dim); font-size:0.75rem; }

.login-pin-form{ display:flex; flex-direction:column; gap:var(--sp-1); }
.login-pin-label{ font-size:0.8125rem; color:var(--text-muted); }
.login-pin-input{
  min-height:44px; font-size:1.5rem; letter-spacing:0.5rem; text-align:center;
  font-variant-numeric:tabular-nums; direction:ltr;
  background:var(--bg-elev-2); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-sm);
  color:var(--text); padding:0.5rem 1rem;
}
.login-pin-input:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-color:var(--info); }
.login-pin-submit{ width:100%; }
.login-pin-error{ margin:0; }

/* ---------- מצב "מחובר, מעביר..." (session קיים, אימות שקט) ---------- */
.login-resuming{
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-2); text-align:center;
  padding:var(--sp-4) var(--sp-2);
}
.login-resuming-who{ display:flex; align-items:center; gap:10px; }

/* ---------- פריסה שונה בין מחשב לטלפון ---------- */
html[data-layout="phone"] .login-title{ font-size:1.75rem; }
html[data-layout="phone"] .login-picker-grid{ grid-template-columns:repeat(2,1fr); gap:var(--sp-1); }

html[data-layout="desktop"] .login-picker-grid{ grid-template-columns:repeat(4,1fr); }