/* src/app/dan/auth.css — כניסה · איפוס · הזמנה · סיסמה: העיצוב של דן, מועתק.
 * מקור: legacy/community/account-login.html · legacy/community/reset.html · legacy/community/invite.html · legacy/community/change-password.html · legacy/community/assets/js/legal-consent.js
 * מסכים: src/app/screens/login.js · src/app/screens/reset.js · src/app/screens/invite.js · src/app/screens/change-password.js · src/app/screens/first-login.js — כל אחד עוטף את עצמו ב-`<div class="dan dan-<מודול>">`.
 * הנוהל: docs/runbooks/dan-design-port.md · הפלטה (`--d-*`): src/app/dan/dan.css.
 *
 * 🔴 01.10 · גיל: "אחד לאחד בכל הדפים". 🔴 **עיצוב בלבד** — הכניסה של עגור רצה על שירות הזהות המרכזי (ADR 0038); הזרימה, הבקשות והניסוחים לא השתנו, רק המראה.
 *
 * ⚠️ מה שונה מהמקור, ולמה — שבעה דברים (אותם כללים כמו ב-screens/manager.css · dan/staff.css):
 *  ① **אין `:root`** — הפלטה היא `--d-*` ב-dan.css (ב-`<style>` של כל דף בדן יש `:root` משלו, עם `--dan-*` או `--green`: אותם ערכים).
 *  ② **כל כלל תחום.** ארבעת הדפים של דן חולקים את אותה מעטפת בדיוק — לכן הכללים המשותפים תחת `.dan-auth` (כמו `.dan-committees` ל-`.dan-committee`), והכללים של כל מסך
 *     תחת `.dan-<מודול>`: הגרסה הצרה של reset/invite/change-password מול הרחבה של הכניסה (סצנה 140 מול 176 · קשת 96 מול 118 · גוף 30 מול 46).
 *  ③ **מחלקות שהתנגשו או היו עלולות להתנגש** (`card` · `btn` · `body` · `head` · `title` · `sub` · `wrap` · `scene` · `arch` · `error` · `help` · `foot` · `chip` · `ghost` · `home` ·
 *     `note` · `msg` · `state` · `hint` · `pane` · `switch` · `resend`) קיבלו קידומת `a` — המעטפת מגדירה חלק מהן **בלי תחום** (`.card` מוסיף מסגרת). `form-field` · `form-input` · `alert` ·
 *     `kit-field__*` הם של `src/app/kit/` — הטפסים משתמשים בהם (`applySubmitError` נשען עליהם), ומעוצבים מחדש כאן, תחת `.dan-auth`.
 *  ④ **container query ולא media query** — `@media (max-width:560px)` של דן הוא רוחב **חלון**; כאן הכרטיס יכול לשבת גם בתוך המעטפת (החלפת סיסמה), ולכן `@container awrap`.
 *  ⑤ **שישה צבעי טקסט וגבול נבדקו ותוקנו ל-AA** (יחס הבהירות של WCAG ≥ 4.5 לטקסט · ≥ 3 לגבול שדה): `--faint`/`--muted` (ראו dan.css) · `.help span` ו-hover של `.switch` —
 *     כתום `#E07A3F` על לבן 2.99 ⟹ `--d-orange-ink` (5.27) · הבועה "!" בהודעת השגיאה (לבן על `#E07A3F`, 2.99) ⟹ `--d-orange-ink` (5.27) · `.foot` (`#9AA39B` על קצה הגרדיאנט `#E9EDE4`, 2.19) ⟹ `--d-muted` (4.53) ·
 *     **גבול השדה** — `--line` של דן (`#E7E3D6`) הוא 1.28:1 על לבן; `.form-input` של עגור כבר מחזיק גבול 3:1 (components.css, 1.4.11) ⟹ `#8A968F` (3.07), לא הגבול הבהיר.
 *  ⑥ **`line-height: normal`** על המכל — דן אינה מגדירה `line-height` על ה-`body`; `base.css` שלנו קובע 1.6 (ראו staff.css ⑥).
 *  ⑦ **טבעת מיקוד:** דן מסירה את ה-outline משדות (`input:focus{outline:none}`) ונשארת עם הילה של 10% — שלא עוברת 3:1. כאן הילה של דן **ובנוסף** outline ירוק של 2px (`ui-keyboard` · §8).
 *
 * ⭐ **סבב תיקון 1 (01.10 · ממצאי הבודק) — חמישה שינויים, ⑧–⑫:**
 *  ⑧ **בועת ה-"!" רק בכניסה** — ב-`account-login.html` רק `.error` נושאת אותה; `.msg.err` של reset · invite · change-password הוא תיבה כתומה רכה, `display:block`, בלי בועה (`.alert` של ה-kit שם).
 *  ⑨ **`::placeholder`** — `#A9B2AB` של דן הוא ~2:1 על שדה cream-2; הטקסט אינו תווית, אבל WCAG 1.4.3 חל גם עליו ⟹ `--d-faint` (5.07), ו-`opacity:1` (Firefox מעמעם placeholder ב-54%).
 *  ⑩ **`.aresend`** — "לא הגיע? <בקשו קוד חדש>" כמו `.resend` של דן: שורה מושתקת 14px, ובה קישור-כפתור 14px (יעד המגע נשאר 44px).
 *  ⑪ **`.afoot--help span`** — כתום `#A9542A` על קצה הגרדיאנט `#E9EDE4` הוא 4.44 (נמדד על קצה ה-viewport, שם יושבת התחתית; axe מדווח גרדיאנט כ-incomplete ולכן `ui-a11y` לא תופסת) ⟹ `#9A4A22` (5.24).
 *  ⑫ **מודאל החתימה** של הכניסה הראשונה — `dialog.kd-legal` של דן (header.css:572-649) על `kit-dialog`: כרטיס 22px · צל · רקע מוכהה בטשטוש · תיבה "קראתי ואני מאשר" · "לחתימה ↓".
 *
 * ⛔ **ומה שלא הועתק, ובמכוון:** `.home`/`.hello`/`.chips`/`.chip`/`.ghost` של מצב ה"מחובר" בדף הכניסה (בדן עצמה "כבר לא מוצג בפועל בשום נתיב") · `.kd-legal-*` — מודאל ההסכמה של דן
 *    (ראו screens/first-login.js: הגפים) — נשארה רק קופסת ה"חתימה" (`.flsign`) · `.pane` (לשוניות בלי JS של דן — כאן שלבי `data-step`).
 */

/* ════════════════════════════════════════════════════════════════════════════════════════════
 * הכרטיס המשותף — account-login.html · reset.html · invite.html · change-password.html
 * ════════════════════════════════════════════════════════════════════════════════════════════ */
.dan-auth { line-height: normal; }                                                        /* ⑥ */
.dan-auth * { box-sizing: border-box; }

/* ── הדף (מחוץ למעטפת) — ה-`body` של דן: רקע · מרכוז · ריווח ── */
.dan-auth--page {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 64px 20px;
  background: radial-gradient(120% 80% at 50% 0%, #FDF8EF 0%, #F1EFE4 55%, #E9EDE4 100%);
}
.dan-auth--page.dan-reset, .dan-auth--page.dan-invite { padding: clamp(20px, 5vh, 56px) 20px; }

.dan-auth .awrap {
  container: awrap / inline-size;
  width: 100%; max-width: 540px; margin-inline: auto;
  display: flex; flex-direction: column; gap: 22px;
}
.dan-reset .awrap, .dan-invite .awrap, .dan-change-password .awrap { max-width: 520px; gap: 18px; }

.dan-auth .acard {
  background: #fff; border-radius: 32px; overflow: hidden;
  box-shadow: 0 2px 4px rgba(16,42,32,.04), 0 26px 64px rgba(16,42,32,.10);
}
.dan-reset .acard, .dan-invite .acard, .dan-change-password .acard { border-radius: clamp(20px, 3vh, 28px); }

/* ── הסצנה והקשת ── */
.dan-auth .ascene {
  height: 176px; position: relative; display: grid; place-items: end center; overflow: hidden;
  background: linear-gradient(180deg, var(--d-cream) 0%, #EFF6EC 100%);
}
.dan-auth .ascene svg { position: absolute; inset: 0; width: 100%; height: 100%; }       /* base.css: svg 20×20 */
.dan-auth .aarch {
  position: relative; width: 118px; height: 118px; background: #fff; border-radius: 59px 59px 0 0;
  display: grid; place-items: center; padding-top: 18px;
}
.dan-auth .abrand { display: block; width: 60px; height: 60px; border-radius: 14px; }
.dan-auth .abrand--tenant { object-fit: contain; border-radius: 0; }
.dan-reset .ascene, .dan-invite .ascene, .dan-change-password .ascene { height: clamp(110px, 16vh, 140px); }
.dan-reset .aarch, .dan-invite .aarch, .dan-change-password .aarch { width: 96px; height: 96px; border-radius: 48px 48px 0 0; padding-top: 16px; }
.dan-reset .abrand, .dan-invite .abrand, .dan-change-password .abrand { width: 46px; height: 46px; border-radius: 11px; }
/* ⭐ 05.10 · לוגו רחב (כפר בלום): הקופסה ריבועית, ולכן הוא היה מצויר ברוחב 60px. הרוחב עד גבול הקשת והגובה לפי היחס; לוגו גבוה (דן) — כמו קודם. */
.dan-auth .abrand--tenant { width: auto; height: auto; max-width: 96px; max-height: 60px; }
.dan-reset .abrand--tenant, .dan-invite .abrand--tenant, .dan-change-password .abrand--tenant { max-width: 76px; max-height: 46px; }

/* ── הגוף והכותרת ── */
.dan-auth .abody { padding: 26px 46px 44px; }
.dan-reset .abody, .dan-invite .abody, .dan-change-password .abody { padding: 24px 30px 32px; display: flex; flex-direction: column; gap: 16px; }

.dan-auth .ahead { text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.dan-reset .ahead, .dan-invite .ahead, .dan-change-password .ahead { gap: 6px; align-items: stretch; }
.dan-auth .atitle { margin: 0; font-size: 34px; font-weight: 600; color: var(--d-ink); letter-spacing: -.02em; line-height: normal; }
.dan-auth .atitle--sm { font-size: 26px; }
.dan-reset .atitle, .dan-invite .atitle, .dan-change-password .atitle { font-size: clamp(23px, 3.4vh, 28px); }
.dan-auth .asub { margin: 0; font-size: 16px; color: var(--d-muted); line-height: 1.55; }
.dan-auth .asub b { color: var(--d-ink); font-weight: 600; }
.dan-auth .asub--lines { display: flex; align-items: center; gap: 10px; font-size: 16.5px; line-height: normal; }
.dan-auth .asub--lines i { display: block; width: 26px; height: 1.5px; background: #EBD9BC; }

/* ── טפסים ושדות ── */
.dan-auth .aform { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; }
.dan-reset .aform, .dan-invite .aform, .dan-change-password .aform { margin-top: 0; }
.dan-auth .form-field { display: flex; flex-direction: column; gap: 7px; margin: 0; }
.dan-auth .form-field label { font-size: 15px; font-weight: 500; color: var(--d-body); }
.dan-reset .form-field, .dan-invite .form-field, .dan-change-password .form-field { gap: 6px; }
.dan-reset .form-field label, .dan-invite .form-field label, .dan-change-password .form-field label { font-size: 14.5px; }
.dan-auth .form-input {
  width: 100%; min-width: 0; min-height: 52px; font: inherit; font-size: 18px; padding: 16px 18px;
  border: 1.5px solid #8A968F; border-radius: 16px; background: var(--d-cream2); color: var(--d-text);      /* ⑤ גבול 3:1 */
}
.dan-reset .form-input, .dan-invite .form-input, .dan-change-password .form-input { font-size: 17px; padding: 14px 16px; border-radius: 14px; }
.dan-auth .form-input:focus {                                                                          /* ⑦ */
  outline: 2px solid var(--d-green); outline-offset: 2px;
  border-color: var(--d-green); background: #fff; box-shadow: 0 0 0 4px rgba(14,122,85,.10);
}
.dan-auth .form-input[aria-invalid="true"] { border-color: var(--d-orange-ink); border-width: 2px; }
.dan-auth .form-input:read-only, .dan-auth .form-input:disabled { background: var(--d-track); }
.dan-auth .form-input:disabled { opacity: .7; }
/* ⑨ `input::placeholder{color:#A9B2AB}` של דן — כאן `--d-faint` (AA), ו-`opacity:1`: Firefox מעמעם placeholder. התווית נשארת השם הנגיש. */
.dan-auth .form-input::placeholder { color: var(--d-faint); opacity: 1; }
/* שדה קוד — `#codeInput` של דן. ⚠️ dir=ltr ו-inputmode=numeric בסימון (ראו login.js); letter-spacing כדי שאפשר יהיה לספור. */
.dan-auth .acode { text-align: center; letter-spacing: .5em; font-size: 26px; font-weight: 600; padding-inline-start: calc(18px + .5em); }

.dan-auth .ahint, .dan-auth .kit-field__hint { margin: 0; font-size: 13.5px; color: var(--d-faint); line-height: 1.5; }
.dan-auth .kit-field__error { margin: 0; font-size: 14px; font-weight: 500; color: var(--d-orange-ink); }

/* ── הודעת שגיאה — `.error` (כניסה) ו-`.msg.err` (reset · invite · change-password) של דן: כתום רך ──
 * `.aerr` למסכי הכניסה; `.alert` הוא החריץ של `formErrorSlotHTML` (kit) — אותו צבע וריפוד. `[hidden]` מנצח (dan.css).
 * ⑧ **הבועה "!" רק ב-`.error` של הכניסה** (`display:flex`); ב-`.msg.err` של שלושת האחרים — תיבה (`display:block`), בלי בועה. */
.dan-auth .aerr, .dan-auth .alert {
  display: flex; align-items: center; gap: 10px; margin: 0;
  background: var(--d-orange-soft); color: var(--d-orange-ink); border: 0; border-radius: 14px;
  padding: 14px 16px; font-size: 15.5px; line-height: 1.5;
}
.dan-login .aerr::before, .dan-login .alert::before {
  content: "!"; content: "!" / "";
  flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--d-orange-ink); color: #fff;      /* ⑤ */
  font-size: 13px; display: grid; place-items: center;
}
.dan-reset .alert, .dan-invite .alert, .dan-change-password .alert { display: block; line-height: 1.55; }

/* ── כפתורים — `.btn` · `.ghost` · `.switch button` · `.resend button` של דן ── */
.dan-auth .abtn {
  display: block; width: 100%; min-height: 44px; margin-top: 6px; padding: 18px; text-align: center; cursor: pointer;
  font: inherit; font-size: 19px; font-weight: 600; color: #fff; background: var(--d-green); border: 0; border-radius: 999px;
  box-shadow: 0 8px 20px rgba(14,122,85,.24);
}
.dan-reset .abtn, .dan-invite .abtn, .dan-change-password .abtn { font-size: 18px; padding: 16px; margin-top: 4px; }
.dan-auth .abtn:hover { background: var(--d-green-dark); }
.dan-auth .abtn:disabled { opacity: .65; cursor: default; }
.dan-auth .aghost {
  display: block; width: 100%; min-height: 44px; padding: 15px 36px; text-align: center; text-decoration: none; cursor: pointer;
  font: inherit; font-size: 17px; font-weight: 500; color: var(--d-green); background: #F4F8F5; border: 0; border-radius: 999px;
}
.dan-auth .aghost:hover { background: var(--d-mint); }
.dan-auth .aghost:disabled { opacity: .65; cursor: default; }
.dan-auth .aghost:disabled:hover { background: #F4F8F5; }
.dan-auth .alink {
  display: block; margin-inline: auto; min-height: 44px; padding: 8px 4px; cursor: pointer;
  font: inherit; font-size: 15.5px; font-weight: 500; color: var(--d-green); background: none; border: 0;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #BFDFCE;
}
.dan-auth .alink:hover { color: var(--d-orange-ink); text-decoration-color: #F0C9AC; }            /* ⑤ */
.dan-auth .alink:disabled { color: var(--d-faint); cursor: default; text-decoration: none; }
.dan-auth .abody > .alink { margin-top: 18px; }
.dan-auth .aways { display: flex; flex-direction: column; gap: 12px; }
.dan-auth .aways[data-oidc], .dan-auth .aways[data-quick] { margin-top: 16px; }
.dan-auth .aactions { display: grid; gap: 12px; margin-top: 16px; }
.dan-auth .aactions .abtn { margin-top: 0; }
.dan-auth .offer-sub { margin: 14px 0 0; text-align: center; }
.dan-auth .aform > .ahelp { margin: 0; }                                                          /* "שכחתם סיסמה?" בתוך הטופס — הרווח מ-gap */
/* ⑩ `.resend` של דן: "לא הגיע? <בקשו קוד חדש>" — שורה מושתקת ובה קישור-כפתור קטן. min-height 44 נשאר (יעד מגע). */
.dan-auth .aresend { margin: -4px 0 0; text-align: center; font-size: 14px; color: var(--d-faint); }
.dan-auth .aresend .alink { display: inline-block; margin: 0; padding: 8px 4px; font-size: 14px; font-weight: 400; text-underline-offset: 3px; }
.dan-auth .aresend-wait { margin: -8px 0 0; text-align: center; font-size: 14px; color: var(--d-faint); font-variant-numeric: tabular-nums; }

/* ── הודעות — `.note` · `.msg.ok` של דן ── */
.dan-auth .anote { margin: 0; padding: 13px 16px; font-size: 14.5px; line-height: 1.6; color: #2C5C48; background: var(--d-mint); border-radius: 14px; }
.dan-auth .anote--warn { color: var(--d-orange-ink); background: var(--d-orange-soft); }
.dan-auth .anote a { color: inherit; font-weight: 500; text-underline-offset: 3px; }
.dan-auth .amsg { margin: 0; padding: 14px 16px; font-size: 15.5px; line-height: 1.55; border-radius: 14px; }
.dan-auth .amsg--ok { color: var(--d-green-dark); background: var(--d-mint); }
.dan-login .abody > .anote { margin-top: 22px; }
.dan-login .abody > .anote + .aform, .dan-login .abody > .anote + .anote { margin-top: 18px; }
.dan-login [data-code-blocked] p { margin: 0 0 14px; }
.dan-login [data-code-blocked] .aghost { margin-top: 12px; }

/* ── מצב בלי טופס — `.state` של דן ── */
.dan-auth .astate { padding: 40px 30px; text-align: center; color: var(--d-muted); font-size: 16px; line-height: 1.65; }
.dan-auth .astate p { margin: 0; }
.dan-auth .astate__t { display: block; margin: 0 0 8px; font-size: 19px; font-weight: 600; color: var(--d-ink); letter-spacing: normal; line-height: 1.65; }

/* ── תחתית — `.help` · `.foot` של דן ── */
.dan-auth .ahelp { margin: 22px 0 0; text-align: center; font-size: 14.5px; color: var(--d-faint); line-height: 1.6; }
.dan-auth .afoot { display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center; font-size: 13.5px; color: var(--d-muted); }
.dan-auth .afoot svg { flex: none; width: 60px; height: 12px; }
.dan-auth .afoot--help { display: block; font-size: 14.5px; line-height: 1.6; }
.dan-auth .afoot--help span { color: #9A4A22; }                                                   /* ⑪ כתום כהה: #A9542A הוא 4.44 על #E9EDE4 */

/* ── "דרכים נוספות" — של עגור (בדן אין), בשפה של דן: קו עליון · כפתורי ghost מושבתים · הסיבה ליד כל אחד ── */
.dan-auth .aothers { margin-top: 26px; border-top: 1px solid var(--d-line); padding-top: 8px; }
.dan-auth .aothers summary { min-height: 44px; padding-block: 10px; cursor: pointer; font-size: 15.5px; font-weight: 500; color: var(--d-body); }
.dan-auth .aothers__note { font-size: 14px; font-weight: 400; color: var(--d-muted); }
.dan-auth .amethods { list-style: none; padding: 0; margin: 8px 0 12px; display: grid; gap: 14px; }
.dan-auth .amethods li { display: grid; gap: 6px; }
.dan-auth .amethods .aghost { text-align: start; }
.dan-auth .awhy { font-size: 14px; color: var(--d-muted); }

/* ── הרשמת אפליקציית המאמת (שלב שני) — של עגור, בשפה של דן ── */
.dan-auth .aenroll { margin-top: 26px; border-top: 1px solid var(--d-line); padding-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.dan-auth .aenroll--primary { border-top: 0; padding-top: 0; margin-top: 30px; }
.dan-auth .aenroll__t { margin: 0; font-size: 17px; font-weight: 600; color: var(--d-ink); letter-spacing: normal; line-height: normal; }
.dan-auth .aenroll__step { display: flex; flex-direction: column; gap: 12px; }
.dan-auth .aenroll__step .aform { margin-top: 0; }
.dan-auth .aenroll__list { margin: 4px 0; padding-inline-start: 22px; display: grid; gap: 12px; font-size: 15px; line-height: 1.6; color: var(--d-body); }
.dan-auth .aenroll__link { cursor: pointer; color: var(--d-green); }
/* המפתח הוא 32 תווים רצופים — `overflow-wrap:anywhere`, אחרת הכרטיס גולש ב-375 (ui-viewport). */
.dan-auth .akey {
  display: block; margin-top: 6px; padding: 10px 14px; border: 1px solid var(--d-line); border-radius: 12px;
  background: #EAF4EE; color: var(--d-green-dark);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14.5px; letter-spacing: .08em; overflow-wrap: anywhere; user-select: all;
}

/* ── רוחב צר: `@media (max-width:560px)` של דן, כ-container query על המכל ── */
@container awrap (max-width: 520px) {
  .dan-login .abody, .dan-logout .abody { padding: 22px 24px 34px; }
  .dan-login .atitle, .dan-logout .atitle { font-size: 30px; }
  .dan-login .atitle--sm, .dan-logout .atitle--sm { font-size: 24px; }
}

/* ════════════════════════════════════════════════════════════════════════════════════════════
 * הכניסה הראשונה — src/app/screens/first-login.js  (`/account/first-login`)
 * אין לה דף בדן — המקביל הוא מודאל ההסכמה (`legal-consent.js` + `header.css` · `.kd-legal-*`). כרטיסי הדשבורד של דן, גלולות, וקופסת ה"חתימה".
 * ════════════════════════════════════════════════════════════════════════════════════════════ */
.dan-first-login { container: dan-first-login / inline-size; display: flex; flex-direction: column; gap: 18px; }
.dan-first-login .flcrumbs { font-size: 14.5px; color: var(--d-muted); }
.dan-first-login .flcrumbs a { color: var(--d-green); font-weight: 500; text-decoration: none; }
.dan-first-login .flcrumbs a:hover { color: var(--d-orange-ink); }
.dan-first-login h1 { margin: 0 0 4px; font-size: 26px; font-weight: 600; color: var(--d-ink); letter-spacing: -.02em; line-height: normal; }
.dan-first-login .flmeta { margin: 0; font-size: 15px; color: var(--d-muted); }

/* הבאנר — `.dalert.plain` (פתוחה) ו-`.dalert.warn` (חסומה) של הדשבורד. */
.dan-first-login .flbanner {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px; font-size: 15px; line-height: 1.5;
  color: var(--d-body); background: #fff; border: 1px solid var(--d-line); border-radius: 16px;
}
.dan-first-login .flbanner p { margin: 0; }
.dan-first-login .flbanner--blocked { color: var(--d-orange-ink); background: var(--d-orange-soft); border-color: transparent; }

.dan-first-login .flgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 18px; align-items: start; }
/* `card()` של packages/ui — מעוצב מחדש כ-`.dcard` של דן: בלי מסגרת, רדיוס 22, צל, כותרת 17px. */
.dan-first-login .card {
  display: flex; flex-direction: column; gap: 14px; padding: 26px 28px;
  background: #fff; border: 0; border-radius: 22px; box-shadow: var(--d-shadow);
}
.dan-first-login .card > header { margin: 0; }
.dan-first-login .card > header h2 { margin: 0; font-size: 17px; font-weight: 600; color: var(--d-ink); letter-spacing: normal; line-height: normal; }
.dan-first-login .card p { margin: 0; }
.dan-first-login .card a { color: var(--d-green); }
.dan-first-login .card code { padding: 1px 5px; border-radius: 5px; font-size: .9em; color: var(--d-green-dark); background: #EAF4EE; }

.dan-first-login .flrows { display: flex; flex-direction: column; }
.dan-first-login .flrow { display: flex; align-items: flex-start; gap: 14px; padding-block: 12px; border-top: 1px solid var(--d-line-soft); }
.dan-first-login .flrows > .flrow:first-child { border-top: 0; padding-top: 0; }
.dan-first-login .flrow__main { flex: 1; min-width: 0; }
.dan-first-login .flrow__title { font-size: 15.5px; font-weight: 500; color: var(--d-ink); }
.dan-first-login .flrow__meta { font-size: 14px; line-height: 1.6; color: var(--d-muted); overflow-wrap: anywhere; }
.dan-first-login .flrow__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.dan-first-login .flrow__meta:empty { display: none; }                                           /* `minor.reason` ריק לבגיר */
.dan-first-login .flnote { font-size: 14.5px; line-height: 1.6; color: var(--d-body); }

/* גלולות — `done` (ירוק רך) · `open` (כתום רך) · `blocked` (כתום כהה, לבן עליו 5.27) · תג (חול). ⑤ */
.dan-first-login .flpill, .dan-first-login .fltag {
  display: inline-flex; align-items: center; padding: 3px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 500; white-space: nowrap;
}
.dan-first-login .flpill { color: var(--d-green-dark); background: var(--d-mint); }
.dan-first-login .flpill--open { color: var(--d-orange-ink); background: var(--d-orange-soft); }
.dan-first-login .flpill--blocked { color: #fff; background: var(--d-orange-ink); }
.dan-first-login .fltag { color: var(--d-body); background: var(--d-track); }

/* קופסת ה"חתימה" — `.kd-legal-sign` + `.kd-legal-btn` של דן: לבן · מסגרת · כפתור גלולה 50px. */
.dan-first-login .flsign { margin-top: 28px; padding: 20px; background: #fff; border: 1px solid var(--d-line); border-radius: 16px; }
.dan-first-login .flsign .kit-status { min-height: 0; margin: 0 0 8px; }
.dan-first-login .flsign .kit-status:empty { display: none; }
.dan-first-login .flsign .abtn { height: 50px; min-height: 50px; padding: 0 18px; margin: 16px 0 0; font-size: 16.5px; border-radius: 25px; box-shadow: none; }
.dan-first-login .flsign .abtn:disabled { background: #9FC3B0; opacity: 1; cursor: not-allowed; }
.dan-first-login .flsign .abtn:disabled { color: #0B3D2B; }                                        /* ⑤ לבן על #9FC3B0 הוא 1.93; כהה עליו 6.35 */

/* ── מודאל החתימה — `dialog.kd-legal` של דן (header.css:572-649), על `kit-dialog` ──
 * ⚠️ נפתח מעל המסך (`showModal` — top layer), אבל הוא צאצא של `.dan-first-login` ולכן הפלטה (`--d-*`) וה-container חלים עליו.
 * ⚠️ `min-height:0` על הגוף — בלעדיו flex מסרב להתכווץ והדיאלוג גולש מעל ראש המסך (הלקח של דן באותו קובץ: `top:-37px`). */
.dan-first-login .kit-dialog {
  padding: 0; border: 0; border-radius: 22px; width: min(760px, calc(100vw - 32px)); max-height: min(88vh, 880px);
  background: var(--d-cream2); color: var(--d-ink); box-shadow: 0 24px 70px rgba(16,42,32,.22);
}
.dan-first-login .kit-dialog::backdrop { background: rgba(16,42,32,.42); backdrop-filter: blur(2px); }
.dan-first-login .kit-dialog__head { padding: 22px 28px 0; border: 0; }
.dan-first-login .kit-dialog__head h2 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em; line-height: normal; color: var(--d-ink); }
.dan-first-login .kit-dialog__x { background: var(--d-track); color: var(--d-body); }
.dan-first-login .kit-dialog__x:hover { background: var(--d-mint); color: var(--d-green-dark); }
.dan-first-login .kit-dialog__body { padding: 8px 28px 24px; min-height: 0; overscroll-behavior: contain; }
.dan-first-login .fldoc { font-size: 14.5px; line-height: 1.7; color: var(--d-body); }
.dan-first-login .fldoc p { margin: 9px 0; }
.dan-first-login .fldoc a { color: var(--d-green); font-weight: 500; }
/* התיבה — `.kd-legal-ok`: 20px, accent ירוק, שורה שלמה לחיצה (≥ 44px). */
.dan-first-login .flok { display: flex; gap: 11px; align-items: flex-start; min-height: 44px; padding-block: 10px; cursor: pointer; font-size: 15.5px; line-height: 1.5; color: var(--d-body); }
.dan-first-login .flok input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--d-green); cursor: pointer; }
/* "לחתימה ↓" — `.kd-legal-jump`: מרחף מעל הגלילה, ביחס לדיאלוג (position:fixed של ה-UA); `inset-inline-start:50%` + translateX(50%) ⟹ במרכז ב-RTL. */
.dan-first-login .fljump {
  position: absolute; bottom: 18px; inset-inline-start: 50%; transform: translateX(50%); min-height: 44px;
  border: 0; border-radius: 22px; padding: 11px 20px; cursor: pointer;
  font: inherit; font-size: 14.5px; font-weight: 500; color: #fff; background: var(--d-ink); box-shadow: 0 6px 20px rgba(16,42,32,.3);
}

@container dan-first-login (max-width: 520px) {
  .dan-first-login .kit-dialog__head { padding: 18px 18px 0; }
  .dan-first-login .kit-dialog__body { padding: 6px 18px 20px; }
  .dan-first-login .card { padding: 22px 20px; }
  .dan-first-login .flrow { flex-direction: column; gap: 8px; }
  .dan-first-login .flrow__side { flex-direction: row; align-items: center; flex-wrap: wrap; }
}