/* בלק צ'רי — פורטל עסקי: מסכי כניסה + איפוס סיסמה
   פיגמה (2026-07-20/phase-b): Login 2002:1927 · Forgot-password ×3 (2002:1974/2015/2056)
   · field-error 2029:972 · מובייל M_Login ×5 (2002:1885, 2029:515/571/611/1029)
   מקור: ../עיצוב/figma-extract/2026-07-20/phase-b/ (node-JSON, PAT, ראה BUILD-CONTRACT).
   בעלות בלעדית: portal-login.html / portal-auth.css / portal-auth.js — שאר הקבצים משותפים, לא נגעתי בהם. */

/* טוקן מקומי — הצבע #ff4006 נמדד ישירות מ-2029:998 (stroke) ו-2029:1023 (fill).
   אין לו טוקן משותף ב-tokens.css; לא ערכתי את tokens.css (בעלות המרכז בלבד),
   לכן הוא מוגדר כאן, מקומי לעמוד. */
.portal-shell { --portal-error: #ff4006; }

/* ── מעטפת מסך-מלא — בלי הדר/פוטר, כמו בפיגמה (X לסגירה מחליף את הצ'רום) ── */
.portal-shell {
  min-block-size: 100dvh;
  display: flex;
  background: var(--bc-white);
  position: relative;
  overflow: hidden;
}

/* פאנל התמונה — ראשון ב-DOM: תחת dir=rtl הילד הראשון מרונדר ב-inline-start (ימין),
   בדיוק כמו ברינדור-הרשמי של פיגמה (הצילום מימין, הטופס משמאל — node "Left/Right"
   הפוכים משמם; אומת ע"י /v1/images רשמי, לא ניחוש). יחס 672:768 בפריים 1440 — גדל
   פרופורציונלית מעל 1440 (הקובץ שותק שם; שני הפאנלים FIXED px, אין story לרוחב רחב יותר). */
.portal-visual {
  display: none;
  flex: 46.7 1 0;
  align-self: stretch;
  background-image: url('/assets/portal-login-visual.jpg');
  background-size: cover;
  background-position: center;
}
@media (min-width: 961px) {
  .portal-visual { display: block; }
  .portal-form-panel { flex: 53.3 1 0; }
}

.portal-form-panel {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 96px 24px;
  position: relative;
  min-inline-size: 0;
}

/* כפתור סגירה — 30×30 r12, תמיד בפינה הפיזית עליונה-שמאלית (נמדד: (23,24) מקצה
   הפאנל בכל 8 המסכים, דסקטופ ומובייל כאחד). תחת dir=rtl זה inset-inline-end. */
.portal-close {
  position: absolute;
  inset-block-start: 24px;
  inset-inline-end: 23px;
  inline-size: 30px;
  block-size: 30px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--bc-ink);
  transition: background .18s ease;
}
.portal-close:hover { background: rgba(59, 15, 26, .06); }
.portal-close i { font-size: 14px; line-height: 1; }

.portal-card {
  inline-size: min(417px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* אזור מוסתר-חזותית ל-aria-live בלבד (תבנית clip תקנית — כמו .skip-link ב-base.css) */
.portal-sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* לוגו — נעשה שימוש חוזר בנכס הקיים /assets/logo.svg (כמו header.html/footer.html),
   באותה טכניקת mask+background-color, ולא צויר וקטור חדש. */
.portal-logo {
  display: block;
  inline-size: 144px;
  block-size: 42px;
  background-color: var(--bc-primary);
  -webkit-mask: url('/assets/logo.svg') no-repeat center / contain;
          mask: url('/assets/logo.svg') no-repeat center / contain;
}

/* ── כל מסך (view) — עמודה אחת: לוגו, כותרת/הסבר, טופס, [שורת-קישורים].
   gap ברירת-מחדל 48 (מובייל תמיד; דסקטופ login) — הטופס עצמו חוזר על אותו gap
   כדי ש-[שדות→כפתור] יישרו לאותה קצב-ריווח כמו [לוגו→כותרת→טופס] בפיגמה
   (Frame159/Frame51: כל הרכיבים אחים באותה רמת-gap). ── */
.portal-view,
.portal-view form {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 48px;
}
.portal-view[hidden] { display: none; }

/* שורת-קישורים תחת הכפתור — מובייל: המרווח האמיתי מהעיצוב הוא 64 (הפרש +16 מעל
   ה-48 הפנימי, Frame51/Frame159 בפיגמה — ה-gap האוטומטי כבר נותן 48, +16 ידני=64).
   דסקטופ מסכי forgot/verify עוברים ל-56 שטוח (בלי תוספת) — login נשאר 48/+16
   גם בדסקטופ (נמדד בשני הרזולוציות כאחד — login-desktop Frame51 gap:64/Frame159:48). */
.portal-hint-row { margin-block-start: 16px; text-align: center; }
@media (min-width: 961px) {
  #view-forgot-request, #view-forgot-request form,
  #view-verify-code, #view-verify-code form,
  #view-new-password, #view-new-password form {
    gap: 56px;
  }
  #view-forgot-request .portal-hint-row,
  #view-verify-code .portal-hint-row { margin-block-start: 0; }
}

.portal-title {
  margin: 0;
  text-align: center;
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.9px;
  color: var(--bc-primary);
}
@media (min-width: 961px) { .portal-title { font-size: 48px; } }

/* בלוק כותרת+תת-כותרת — gap 16 מובייל / 24 דסקטופ (Frame216 מול Frame156 שטוח) */
.portal-heading {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 961px) { .portal-heading { gap: 24px; } }

.portal-desc {
  margin: 0;
  text-align: center;
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: normal; /* lineHeightUnit:INTRINSIC_% בפיגמה — auto, לא px קבוע */
  color: var(--bc-ink);
}

/* ── שדות טופס ── */
.portal-fields { display: flex; flex-direction: column; gap: 16px; } /* בין שני שדות סיסמה מוערמים */

.portal-field { display: flex; flex-direction: column; gap: 8px; text-align: start; }
.portal-field label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: 20px;
  color: var(--bc-ink-mute);
}
.portal-field input {
  inline-size: 100%;
  block-size: 56px;
  padding-block: 17px;
  padding-inline: 16px;
  border-radius: var(--radius-hair);
  border: 1px solid var(--bc-gray-bg);
  background: var(--bc-base-2);
  font: inherit;
  font-size: var(--fs-md);
  color: var(--bc-ink-mute);
}
.portal-field input::placeholder { color: var(--bc-ink-mute); opacity: 1; }
.portal-field input:focus-visible {
  outline: 2px solid var(--bc-rose);
  outline-offset: 1px;
  border-color: transparent;
}
.portal-field input[aria-invalid="true"] { border-color: var(--portal-error); }

/* הודעת שגיאה — נשארת ב-DOM תמיד (aria-live אמין), מוסתרת חזותית כשריקה */
.portal-error {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: 20px;
  color: var(--portal-error);
  text-align: start;
}
.portal-error:empty { display: none; }

/* ── כפתור ראשי — pill, כל הרוחב, 60px, טקסט 20px ── */
.portal-btn {
  inline-size: 100%;
  block-size: 60px;
  padding-inline: 32px;
  border-radius: var(--radius-pill);
  background: var(--bc-primary);
  color: var(--bc-white);
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: var(--fw-regular);
  line-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, transform .15s ease;
}
.portal-btn:hover { background: var(--bc-primary-deep); }
.portal-btn:disabled { opacity: .65; cursor: default; }

/* ── קישורי טקסט (רמז) — הודעה+קישור-מודגש, סדר-DOM = סדר-קריאה טבעי ב-RTL ── */
.portal-hint {
  margin: 0;
  text-align: center;
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: 32px;
  color: var(--bc-ink);
}
.portal-hint .portal-link {
  font-weight: var(--fw-semibold);
  color: var(--bc-rose);
}
.portal-hint .portal-link:hover { text-decoration: underline; }
.portal-hint .portal-link:disabled,
.portal-hint .portal-link[aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* הודעת "אין ספק SMS מחובר" — שקטה, לא צבע-שגיאה */
.portal-hint--quiet { color: var(--bc-ink-soft); font-size: var(--fs-sm); line-height: 1.6; }
.portal-hint--quiet[hidden] { display: none; }

/* הערה: padding 96px 24px על .portal-form-panel זהה בכל רוחב (כך גם במובייל בפיגמה —
   Right Content Panel 393-wide נושא את אותו padding:"96 24 96 24" בדיוק). אין דריסה
   נחוצה כאן; scrollWidth<=clientWidth נבדק ב-390/412/1440/1920. */