/* src/app/dan/applications.css — בקשות דיור · קליטה: העיצוב של דן, מועתק.
 * מקור: legacy/community/branch-applications.html · legacy/community/application.html · legacy/community/absorption.html · legacy/community/assets/js/application-form.js · legacy/community/assets/js/journey-stepper.js
 * מסכים: src/app/screens/housing-applications.js · src/app/screens/housing-application.js · src/app/screens/housing-intake.js — כל אחד עוטף את עצמו ב-`<div class="dan dan-<מודול>">`.
 * הנוהל: docs/runbooks/dan-design-port.md · הפלטה (`--d-*`): src/app/dan/dan.css.
 *
 * 🔴 01.10 · גיל: "תעתיק גם את הלוגיקה והפונקציונליות בדף וגם את העיצוב של כל המסכים, פשוט העתקה ממקום למקום."
 *
 * ⚠️ מה שונה מהמקור, ולמה — כמו ב-manager.css, ורק:
 *  ① **אין `:root`** — הפלטה היא `--d-*` ב-dan.css, תחומה ל-`.dan`. `var(--green)` ⟶ `var(--d-green)`.
 *  ② **שמות מקומיים למחלקות שהמעטפת/kit מגדירות לא-תחומות** (רשימת ההתנגשות בנוהל): `.topbar`→`.dtop` ·
 *     `.btn`→`.dbtn` · `.pill`→`.dpill` · `.empty`→`.dempty` · `.bar`→`.dbar` · `.card`→`.dcard` · `.grid`→`.dgrid` ·
 *     `.step`/`.steps`→`.dstep`/`.dsteps` · `.ltr`→`.dltr`. (`.kd-stepper` · `.kd-chain` · `.kd-appform` של דן — בלי התנגשות, נשארו.)
 *  ③ **container query ולא media query** — הרוחב תלוי במעטפת (סרגל פתוח/סגור). `min-width` של דן שגולש ב-375 נחתך.
 *  ④ **AA** — `--faint`/`--muted` כבר מוכהים ב-dan.css; `opacity:.85` של מונה הלשונית (`.views .c`) ירד: לבן ב-85% על ירוק
 *     נמוך מ-4.5:1 (axe מחשב שקיפות).
 *  ⑤ **`.acts` של דן שימש גם `td.acts` וגם את שורת הכפתורים במגירה** — `display:flex` על `td` שובר את פריסת הטבלה
 *     (תא שאינו table-cell). ⟹ שורת המגירה היא `div.acts`, והתא נשאר table-cell.
 *  ⑥ **הדיאלוגים** (`kit-dialog`) יושבים ב-`document.body`, מחוץ למסך; התוכן שלהם עטוף ב-`.dan.dan-applications.dlgroot`
 *     כדי שהפלטה והכללים התחומים יחולו שם.
 *  ⑦ **AA — `.kd-chain .c.cancelled { opacity:.55 }` של דן ירד** (axe: 3.14 · 2.84 · 2.17:1 על b · .st · .when בבקשה שבוטלה): רקע בלי שקיפות
 *     וצבעי טקסט מוכהים. ⑧ **המגירה ממוקדת** (`.dlgroot[tabindex]`): גוף הדיאלוג גולל, ובבקשה בלי פעולות אין בו פקד למקד (scrollable-region-focusable).
 *  ⑨ **ספי המכל אינם ה-`@media` של דן** — 1000px של דן הוא רוחב חלון (≈700px של תוכן ליד הסרגל): KPI 2×2 ב-`max-width:700px`, ו-`.cols` ב-760px
 *     (מגירה ברוחב 96vw). **הריתמוס האנכי** (`.views` 14px · `.dbar` 12px מעל הפער של המעטפת) ו-**`td` בלי צבע** — כמו בדן; נמדדו ב-Chrome.
 */

/* ═══════════════ בקשות רישום — `/housing/applications` (branch-applications.html) ═══════════════ */

.dan-applications {
  /* הפלטה (`--d-*`) ב-src/app/dan/dan.css. */
  container: dan-applications / inline-size;
  display: flex; flex-direction: column; gap: 22px;
  color: var(--d-text);
}
.dan-applications.dlgroot { gap: 14px; }
/* ⑧ המגירה גוללת ופעמים רבות אין בה פקד — היא עצמה מתמקדת (tabindex=0, ראו detailHTML) כדי שמקלדת תגלול; טבעת מיקוד גלויה. */
.dan-applications.dlgroot[tabindex]:focus-visible { outline: 2px solid var(--d-green); outline-offset: 4px; border-radius: 6px; }
.dan-applications [hidden] { display: none !important; }

/* ---------- כותרת (page.css: .topbar · h1 · .meta) ---------- */
.dan-applications .dtop { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.dan-applications h1 { font-size: 27px; font-weight: 600; color: var(--d-ink); letter-spacing: -.02em; margin: 0 0 5px; }
.dan-applications .dtop .meta { font-size: 15.5px; color: var(--d-muted); }
.dan-applications .dtop .meta a { color: var(--d-green); }
.dan-applications .dtop .meta a:hover { color: var(--d-orange-ink); }
.dan-applications .kit-status { min-height: 0; }

/* ---------- כפתורים (.btn של דן) ---------- */
.dan-applications .dbtn { font-family: inherit; font-size: 14.5px; font-weight: 500; border-radius: 999px; padding: 10px 18px;
  cursor: pointer; border: 1px solid #D8E3DA; background: #fff; color: var(--d-green); text-decoration: none; display: inline-block; }
.dan-applications .dbtn:hover { background: #F4F8F5; }
.dan-applications .dbtn.solid { background: var(--d-green); color: #fff; border-color: var(--d-green); font-weight: 600; }
.dan-applications .dbtn.solid:hover { background: var(--d-green-dark); color: #fff; }
.dan-applications .dbtn.warn { color: var(--d-orange-ink); border-color: var(--d-orange); }
.dan-applications .dbtn.sm { font-size: 13.5px; padding: 7px 13px; }
.dan-applications .dbtn:disabled { opacity: .55; cursor: default; }
.dan-applications .dbtn:focus-visible { outline: 2px solid var(--d-green); outline-offset: 2px; }

/* ---------- KPI (page.css: .kpis · .kpi) ---------- */
.dan-applications .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dan-applications .kpi { background: #fff; border-radius: 18px; padding: 20px 22px; box-shadow: var(--d-shadow);
  display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dan-applications .kpi .l { font-size: 14px; color: var(--d-faint); display: block; }
.dan-applications .kpi .v { font-size: 30px; font-weight: 600; color: var(--d-ink); letter-spacing: -.02em; display: block; }
.dan-applications .kpi .s { font-size: 13.5px; color: var(--d-green); display: block; }
/* "שלושת הראשונים הם בדיוק שלוש הלשוניות שמתחתם" (דן) — לחיצים; "פתוחות" נשאר כרטיס תצוגה. */
.dan-applications button.kpi { font: inherit; color: inherit; text-align: start; width: 100%; cursor: pointer;
  border: 1px solid transparent; transition: border-color .12s; }
.dan-applications button.kpi:hover { border-color: var(--d-cream2); }
.dan-applications button.kpi:focus-visible { outline: 2px solid var(--d-green); outline-offset: 2px; }

/* ---------- לשוניות · סינון ---------- */
/* ⚠️ `.views` · `.dbar` — הריווחים של דן (`.views{margin-bottom:14px}` · `.bar{margin-bottom:12px}`) מעל הפער של המעטפת; נמדד: לשוניות⟶סינון 36px,
   סינון⟶טבלה 34px (היו 24 ו-18 עם 2px ו-(-4px)). */
.dan-applications .views { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.dan-applications .views button { font-family: inherit; font-size: 15px; border: 1px solid #D8E3DA; background: #fff;
  padding: 9px 18px; border-radius: 999px; cursor: pointer; color: var(--d-muted); }
.dan-applications .views button.on { background: var(--d-green); border-color: var(--d-green); color: #fff; font-weight: 600; }
.dan-applications .views button:focus-visible { outline: 2px solid var(--d-green); outline-offset: 2px; }
.dan-applications .views .c { font-size: 13px; }
.dan-applications .dbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.dan-applications .dbar select, .dan-applications .dbar input { font-family: inherit; font-size: 14.5px; padding: 9px 12px;
  border: 1px solid #D8E3DA; border-radius: 10px; background: #fff; color: var(--d-text); }
.dan-applications .dbar input { min-width: 0; flex: 0 1 280px; }

/* ---------- סטטוסים (.pill של דן) ---------- */
.dan-applications .dpill { font-size: 12.5px; border-radius: 999px; padding: 3px 10px; white-space: nowrap; display: inline-block; }
.dan-applications .dpill.review { background: var(--d-cream2); color: var(--d-orange-ink); border: 1px solid #F0E4D2; }
.dan-applications .dpill.mine { background: var(--d-orange-soft); color: var(--d-orange-ink); }
.dan-applications .dpill.fix { background: #FDECEA; color: #8E2A20; }
.dan-applications .dpill.ok { background: var(--d-mint); color: var(--d-green-dark); }
.dan-applications .dpill.no { background: #F3EEEE; color: #8A3B3B; }
.dan-applications .dpill.off { background: #F1EFE8; color: var(--d-muted); }
.dan-applications .dpill.draft { background: #EEF3FA; color: #2F4F7A; }

/* ---------- הטבלה ---------- */
/* ⚠️ `position: relative` — `.sr-only` (th "פעולות" · caption) הוא `position:absolute`; בלי containing block בתוך `.tbl` הוא נשאר
   במקום הסטטי שלו (x שלילי כשהטבלה רחבה מהמסך), `overflow:auto` אינו חותך אותו, והמסמך כולו גולש לרוחב (נמדד ב-375: 549). */
.dan-applications .tbl { position: relative; background: #fff; border-radius: 16px; box-shadow: var(--d-shadow); overflow: auto; }
.dan-applications table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.dan-applications th { font-weight: 500; color: var(--d-faint); font-size: 13px; text-align: start; padding: 12px 14px;
  border-bottom: 1px solid #EEF2EE; white-space: nowrap; }
/* ⚠️ `td` בלי `color` — כמו בדן: יורש את `--d-text` (#16211C) מהמכל; `--d-body` הכהה-פחות היה מבהיר את כל הטבלה. */
.dan-applications td { padding: 12px 14px; border-bottom: 1px solid #F3F5F2; vertical-align: middle; }
.dan-applications tr.r { cursor: pointer; }
.dan-applications tr.r:hover td { background: #FAFCFA; }
.dan-applications td .n { font-weight: 600; color: var(--d-ink); }
.dan-applications td .s { font-size: 12.5px; color: var(--d-faint); display: block; margin-top: 2px; }
.dan-applications td .s.warn { color: var(--d-orange-ink); }
/* `<button>` ולא `<span>` — שם הנרשם הוא הפתח של המגירה, ומקלדת וקורא-מסך מגיעים איתו (בדן: `tr` לחיץ בלבד). */
.dan-applications .rowbtn { background: none; border: 0; padding: 0; margin: 0; font: inherit; text-align: start; cursor: pointer; }
.dan-applications .rowbtn:hover { text-decoration: underline; text-underline-offset: 3px; }
.dan-applications .rowbtn:focus-visible { outline: 2px solid var(--d-green); outline-offset: 2px; border-radius: 4px; }
.dan-applications td.acts { white-space: nowrap; }
.dan-applications td.acts .dbtn, .dan-applications td.acts .dbtn.solid, .dan-applications td.acts .dbtn.warn {
  font-size: 12.5px; font-weight: 400; border: 1px solid #D8E3DA; background: #fff; border-radius: 999px; padding: 5px 10px;
  color: var(--d-green-dark); margin-inline-start: 4px; }
.dan-applications td.acts .dbtn:hover { background: #F4F8F5; }
.dan-applications .dempty { background: #fff; border-radius: 16px; padding: 26px; text-align: center; color: var(--d-muted);
  box-shadow: var(--d-shadow); line-height: 1.7; }
.dan-applications .dempty a { color: var(--d-green-dark); }
.dan-applications .dfoot { font-size: 13.5px; color: var(--d-muted); line-height: 1.65; margin: 0; }
.dan-applications .dltr { direction: ltr; unicode-bidi: isolate; }

/* ---------- המגירה (חלון הפרטים) ----------
   ⚠️ `dialog`/`.dlg` של דן הם הדיאלוג עצמו; כאן המעטפת היא kit-dialog, והתוכן עטוף ב-`.dlgroot`. */
.dan-applications .dhead { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.dan-applications .dhead .meta { font-size: 13.5px; color: var(--d-muted); display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.dan-applications .dlgroot h3 { margin: 10px 0 0; font-size: 15px; font-weight: 600; color: var(--d-ink); }
.dan-applications div.acts { display: flex; gap: 6px; flex-wrap: wrap; }
.dan-applications div.acts .dbtn { font-size: 13.5px; padding: 8px 14px; }
.dan-applications .cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; }
.dan-applications .cols > * { min-width: 0; }
.dan-applications .sec { display: flex; flex-direction: column; gap: 8px; }
.dan-applications .kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 14px; margin: 0; }
.dan-applications .kv dt { color: var(--d-faint); }
.dan-applications .kv dd { margin: 0; color: var(--d-text); overflow-wrap: anywhere; }
.dan-applications .hintline { font-size: 12.5px; color: var(--d-faint); }
.dan-applications .timeline { list-style: none; margin: 0; padding: 0; }
.dan-applications .timeline li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; padding: 6px 0; font-size: 13.5px; position: relative; }
.dan-applications .timeline li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--d-green); margin-top: 6px; justify-self: center; }
.dan-applications .timeline li.int::before { background: var(--d-dim); }
.dan-applications .timeline li:not(:last-child)::after { content: ""; position: absolute; right: 7px; top: 20px; bottom: -6px; width: 2px; background: var(--d-line); }
.dan-applications .timeline .w { color: var(--d-faint); font-size: 12.5px; }

/* ---------- שדות · הערות · שגיאות (דיאלוג הפעולה + שדות הענף) ---------- */
.dan-applications .f { display: flex; flex-direction: column; gap: 5px; }
.dan-applications .f label { font-size: 13.5px; color: var(--d-muted); }
.dan-applications .f input, .dan-applications .f select, .dan-applications .f textarea { font-family: inherit; font-size: 15px;
  padding: 10px 12px; border: 1px solid #D8E3DA; border-radius: 10px; background: #fff; color: var(--d-text); width: 100%; }
.dan-applications .f select:disabled { background: var(--d-cream2); color: var(--d-body); }
.dan-applications .f .hint { font-size: 12.5px; color: var(--d-faint); }
.dan-applications .err { font-size: 13.5px; color: #8E2A20; background: #FDECEA; border-radius: 10px; padding: 8px 12px; margin: 0; }
.dan-applications .note { font-size: 14px; background: var(--d-cream2); border-radius: 10px; padding: 10px 14px; line-height: 1.6; }
.dan-applications .note.warn { background: var(--d-orange-soft); color: var(--d-orange-ink); }
.dan-applications .note.ok { background: var(--d-mint); color: var(--d-green-dark); }
.dan-applications .dlgfoot { display: flex; gap: 8px; justify-content: flex-start; padding-top: 4px; flex-wrap: wrap; align-items: center; }

/* ---------- סבב האישורים (journey-stepper.js · CHAIN_CSS) — משותף למסך הענף ולמסך המבקש ---------- */
:is(.dan-applications, .dan-application) .kd-chain { display: flex; align-items: stretch; gap: 0; margin: 6px 0 8px; direction: rtl; flex-wrap: wrap; }
:is(.dan-applications, .dan-application) .kd-chain .c { flex: 1; min-width: 150px; position: relative; padding: 8px 10px 8px 6px;
  border-radius: 10px; background: var(--d-cream2); margin-inline-end: 18px; font-size: 12.5px; line-height: 1.35; color: var(--d-muted); }
:is(.dan-applications, .dan-application) .kd-chain .c:not(:last-child)::after { content: ""; position: absolute; left: -14px; top: 50%;
  width: 10px; height: 10px; border-right: 2px solid var(--d-dim); border-bottom: 2px solid var(--d-dim); transform: translateY(-50%) rotate(135deg); }
:is(.dan-applications, .dan-application) .kd-chain .c b { display: block; color: var(--d-ink); font-weight: 600; font-size: 13px; }
:is(.dan-applications, .dan-application) .kd-chain .c .st { display: inline-block; font-size: 11.5px; border-radius: 999px; padding: 1px 8px;
  margin-top: 3px; background: #fff; border: 1px solid var(--d-line); color: var(--d-body); }
:is(.dan-applications, .dan-application) .kd-chain .c.done { background: #E6F1EA; }
:is(.dan-applications, .dan-application) .kd-chain .c.done .st { background: var(--d-green); color: #fff; border-color: var(--d-green); }
:is(.dan-applications, .dan-application) .kd-chain .c.pending { background: #FFF7E6; box-shadow: inset 0 0 0 2px #E8B04A; }
:is(.dan-applications, .dan-application) .kd-chain .c.pending .st { background: #E8B04A; color: #1c1c1c; border-color: #E8B04A; }
:is(.dan-applications, .dan-application) .kd-chain .c.redo, :is(.dan-applications, .dan-application) .kd-chain .c.returned { background: #FBE9E0; }
:is(.dan-applications, .dan-application) .kd-chain .c.redo .st, :is(.dan-applications, .dan-application) .kd-chain .c.returned .st {
  background: #C2410C; color: #fff; border-color: #C2410C; }
:is(.dan-applications, .dan-application) .kd-chain .c.rejected .st { background: #8A3B3B; color: #fff; border-color: #8A3B3B; }
/* ⑦ AA — `opacity:.55` של דן מחלש גם את הטקסט (axe מחשב שקיפות): נמדד 3.14 · 2.84 · 2.17:1 על `b` · `.st` · `.when` בבקשה שבוטלה.
   ⟹ רקע אפור-חם בלי שקיפות, וצבעי טקסט מוכהים: b `--d-body` על #F4F1EA 8.3:1 · .st `--d-muted` על לבן 5.4:1 · .when `--d-muted` על #F4F1EA 4.8:1. */
:is(.dan-applications, .dan-application) .kd-chain .c.cancelled { background: #F4F1EA; }
:is(.dan-applications, .dan-application) .kd-chain .c.cancelled b { color: var(--d-body); }
:is(.dan-applications, .dan-application) .kd-chain .c.cancelled .st { background: #fff; color: var(--d-muted); }
:is(.dan-applications, .dan-application) .kd-chain .c.cancelled .when { color: var(--d-muted); }
:is(.dan-applications, .dan-application) .kd-chain .c .when { display: block; font-size: 11.5px; color: var(--d-muted); }
:is(.dan-applications, .dan-application) .kd-chain-title { font-size: 12.5px; color: var(--d-muted); margin: 8px 0 0; }

/* ---------- שבירות ---------- */
/* ⚠️ הספים הם **רוחב המכל**, לא ה-viewport של דן: `@media (max-width:1000px)` של דן הוא רוחב חלון, ולצד הסרגל זה בערך 700px של תוכן —
   `@container (max-width:1000px)` היה עושה את ה-KPI 2×2 גם בלפטופ 1280 (מכל נמדד 968px) שבו דן מראה ארבעה בשורה. 4 בשורה ב-1280, 2×2 ב-375.
   `.cols` — `@media (max-width:820px)` על דיאלוג ברוחב `96vw`: המגירה ≤ 788px ⟹ תוכן ≈ 748px ⟹ 760px (המכל כאן הוא ה-`.dlgroot`). */
@container dan-applications (max-width: 700px) {
  .dan-applications .kpis { grid-template-columns: repeat(2, 1fr); }
}
@container dan-applications (max-width: 760px) {
  .dan-applications .cols { grid-template-columns: 1fr; }
}
@container dan-applications (max-width: 560px) {
  .dan-applications .kpi { padding: 16px 16px; }
  .dan-applications .dbar input { flex-basis: 100%; }
  .dan-applications .kd-chain .c { min-width: 100%; margin-inline-end: 0; }
  .dan-applications .kd-chain .c:not(:last-child)::after { display: none; }
}

/* ═══════════════ בקשת הדיור שלי — `/housing-application` (application.html + application-form.js) ═══════════════
   הכרטיס (`.scene` + `.body`) הוא של `application.html`; מה שבתוכו הוא `.kd-appform` של האשף. הכול תחת `.dan-application`
   — כמו ב-JS של דן ("הכול תחת `.kd-appform`, בלי יוצא מן הכלל"): סלקטור חשוף היה משנה כל שדה קלט במעטפת.
   ⚠️ `.arch` + `<img src="/logo-dan.png">` לא הועתקו — הלוגו הוא של קיבוץ דן, והמעטפת נושאת את הסמל של הדייר. */

.dan-application { container: dan-application / inline-size; display: flex; justify-content: center; color: var(--d-text); }
.dan-application [hidden] { display: none !important; }
.dan-application .wrap { width: 100%; max-width: 600px; display: flex; flex-direction: column; gap: 16px; }
.dan-application .dcard { background: #fff; border-radius: clamp(18px, 3vh, 26px); overflow: hidden;
  box-shadow: 0 2px 4px rgba(16,42,32,.04), 0 26px 64px rgba(16,42,32,.10); }
.dan-application .scene { height: clamp(96px, 14vh, 124px); background: linear-gradient(180deg, var(--d-cream) 0%, #EFF6EC 100%);
  position: relative; display: grid; place-items: end center; overflow: hidden; }
/* ⚠️ base.css קובע `svg { width:20px; height:20px }` — לסצנה מידה מפורשת (וגם attributes ב-SVG עצמו). */
.dan-application .scene svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dan-application .body { padding: 24px 28px 30px; display: flex; flex-direction: column; gap: 16px; }
.dan-application .foot { text-align: center; font-size: 14px; color: var(--d-faint); line-height: 1.6; }

/* ---------- האשף (application-form.js · CSS) ---------- */
.dan-application .kd-appform { --af-line: var(--d-line); gap: 14px; }
.dan-application .kd-appform .head { display: flex; flex-direction: column; gap: 4px; }
.dan-application .kd-appform .eyebrow { font-size: 13px; letter-spacing: .04em; color: var(--d-faint); text-transform: uppercase; }
.dan-application .kd-appform .title { font-size: clamp(19px, 3vh, 23px); font-weight: 600; color: var(--d-ink); letter-spacing: -.02em; }
.dan-application .kd-appform .sub { font-size: 15px; color: var(--d-muted); line-height: 1.55; }
.dan-application .kd-appform .sub b { color: var(--d-ink); font-weight: 600; }
.dan-application .dsteps { display: flex; align-items: center; gap: 0; margin: 4px 0 2px; }
.dan-application .dstep { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative;
  font-size: 12.5px; color: var(--d-faint); text-align: center; }
.dan-application .dstep .dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--af-line); background: #fff;
  display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--d-faint); }
.dan-application .dstep.done .dot { background: var(--d-mint); border-color: var(--d-green); color: var(--d-green-dark); }
.dan-application .dstep.cur .dot { background: var(--d-green); border-color: var(--d-green); color: #fff; }
.dan-application .dstep.cur { color: var(--d-ink); font-weight: 500; }
.dan-application .dstep:not(:last-child)::after { content: ""; position: absolute; top: 12px; right: calc(50% + 14px);
  width: calc(100% - 28px); height: 2px; background: var(--af-line); }
.dan-application .dstep.done:not(:last-child)::after { background: var(--d-green); }
.dan-application .dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dan-application .dgrid > * { min-width: 0; }
.dan-application .kd-appform label.f { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; color: var(--d-body); }
.dan-application .kd-appform label.f.full { grid-column: 1 / -1; }
.dan-application .kd-appform input, .dan-application .kd-appform select, .dan-application .kd-appform textarea {
  font-family: inherit; font-size: 16px; padding: 12px 14px; border: 1.5px solid var(--af-line); border-radius: 12px;
  background: var(--d-cream2); color: var(--d-text); width: 100%; }
.dan-application .kd-appform textarea { min-height: 88px; resize: vertical; }
.dan-application .kd-appform input:focus, .dan-application .kd-appform select:focus, .dan-application .kd-appform textarea:focus {
  outline: none; border-color: var(--d-green); background: #fff; box-shadow: 0 0 0 4px rgba(14,122,85,.10); }
.dan-application .kd-appform input.bad, .dan-application .kd-appform select.bad, .dan-application .kd-appform textarea.bad { border-color: var(--d-orange); }
.dan-application .kd-appform .hint { font-size: 13px; color: var(--d-faint); line-height: 1.5; font-weight: 400; }
.dan-application .kd-appform .err-line { font-size: 13px; color: var(--d-orange-ink); min-height: 0; font-weight: 400; }
.dan-application .kd-appform .check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--d-text); font-weight: 400; }
.dan-application .kd-appform .check input { width: 20px; height: 20px; margin-top: 3px; flex: none; padding: 0; }
.dan-application .kd-appform .req { color: var(--d-orange-ink); }
.dan-application .kd-appform .actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.dan-application .kd-appform .dbtn { font-family: inherit; font-size: 16.5px; font-weight: 600; color: #fff; background: var(--d-green); border: 0;
  border-radius: 999px; padding: 13px 24px; cursor: pointer; box-shadow: 0 8px 20px rgba(14,122,85,.22); }
.dan-application .kd-appform .dbtn:hover { background: var(--d-green-dark); }
.dan-application .kd-appform .dbtn:disabled { opacity: .6; cursor: default; box-shadow: none; }
.dan-application .kd-appform .dbtn:focus-visible { outline: 2px solid var(--d-green); outline-offset: 2px; }
.dan-application .kd-appform .dbtn.ghost { background: #fff; color: var(--d-ink); border: 1.5px solid var(--af-line); box-shadow: none; }
.dan-application .kd-appform .dbtn.ghost:hover { border-color: var(--d-green); color: var(--d-green-dark); }
.dan-application .kd-appform .dbtn.warn { background: #fff; color: var(--d-orange-ink); border: 1.5px solid var(--d-orange); box-shadow: none; }
.dan-application .kd-appform .dbtn.small { font-size: 14px; padding: 8px 16px; }
.dan-application .kd-appform .center { text-align: center; }
.dan-application .kd-appform .spacer { flex: 1; }
.dan-application .kd-appform .saved { font-size: 13px; color: var(--d-faint); }
.dan-application .kd-appform .msg { font-size: 15px; border-radius: 12px; padding: 12px 16px; line-height: 1.55; }
.dan-application .kd-appform .msg.err { background: var(--d-orange-soft); color: var(--d-orange-ink); }
.dan-application .kd-appform .msg.ok { background: var(--d-mint); color: var(--d-green-dark); }
.dan-application .kd-appform .msg.note { background: var(--d-cream2); color: var(--d-text); border: 1px solid var(--af-line); }
.dan-application .kd-appform .msg a { color: var(--d-green-dark); }
.dan-application .kd-appform .state { padding: 36px 8px; text-align: center; color: var(--d-muted); font-size: 16px; line-height: 1.65; }
.dan-application .kd-appform .state b { display: block; color: var(--d-ink); font-size: 19px; font-weight: 600; margin-bottom: 8px; }
.dan-application .kd-appform .status-pill { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 8px 16px; font-weight: 600; font-size: 16px; }
.dan-application .kd-appform .status-pill.review { background: var(--d-cream); color: var(--d-orange-ink); }
.dan-application .kd-appform .status-pill.fix { background: var(--d-orange-soft); color: var(--d-orange-ink); }
.dan-application .kd-appform .status-pill.ok { background: var(--d-mint); color: var(--d-green-dark); }
.dan-application .kd-appform .status-pill.no { background: #F3EEEE; color: #8A3B3B; }
.dan-application .kd-appform .status-pill.off { background: #EEEFEC; color: var(--d-muted); }
.dan-application .dltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.dan-application .kd-appform .kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14.5px; margin: 0; }
.dan-application .kd-appform .kv dt { color: var(--d-faint); }
.dan-application .kd-appform .kv dd { margin: 0; color: var(--d-text); overflow-wrap: anywhere; }
.dan-application .kd-appform .timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.dan-application .kd-appform .timeline li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; padding: 8px 0; font-size: 14.5px; position: relative; }
.dan-application .kd-appform .timeline li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--d-green); margin-top: 6px; justify-self: center; }
.dan-application .kd-appform .timeline li:not(:last-child)::after { content: ""; position: absolute; right: 8px; top: 24px; bottom: -8px; width: 2px; background: var(--af-line); }
.dan-application .kd-appform .timeline .when { color: var(--d-faint); font-size: 13px; }
.dan-application .kd-appform .timeline .cmt { margin-top: 4px; background: var(--d-cream2); border-radius: 10px; padding: 8px 12px; white-space: pre-wrap; }
.dan-application .kd-appform .summary { display: flex; flex-direction: column; gap: 14px; }
.dan-application .kd-appform .summary h4, .dan-application .kd-appform .tlhead { margin: 0; font-size: 15px; color: var(--d-ink); display: flex; align-items: center; gap: 10px; }
.dan-application .kd-appform .tlhead { margin: 6px 0 4px; }
.dan-application .kd-appform .summary h4 button { font-family: inherit; font-size: 13px; color: var(--d-green-dark); background: none; border: 0; cursor: pointer; padding: 0; }
.dan-application .kd-appform .summary h4 button:focus-visible { outline: 2px solid var(--d-green); outline-offset: 2px; border-radius: 4px; }
.dan-application .kd-appform details > summary { cursor: pointer; color: var(--d-green-dark); font-size: 14.5px; }
.dan-application .kd-appform details > .summary { margin-top: 12px; }

/* ---------- הסטפר של מצב הבקשה (journey-stepper.js · CSS) ----------
   ⚠️ הנקודות והקווים של השלבים העתידיים הם `--cream-2` של דן (#FBF8F1) על לבן — עדין בכוונה, כמו במקור. */
.dan-application .kd-stepper { display: flex; align-items: flex-start; margin: 8px 0 4px; direction: rtl; }
.dan-application .kd-stepper .st { flex: 1; min-width: 0; text-align: center; position: relative; font-size: 12px; line-height: 1.25;
  color: var(--d-muted); padding: 0 2px; }
.dan-application .kd-stepper .st i { display: block; width: 14px; height: 14px; border-radius: 50%; margin: 0 auto 5px; background: var(--d-cream2);
  border: 2px solid var(--d-cream2); box-sizing: border-box; position: relative; z-index: 1; }
.dan-application .kd-stepper .st:not(:last-child)::after { content: ""; position: absolute; top: 6px; right: 50%; width: 100%; height: 2px; background: var(--d-cream2); }
.dan-application .kd-stepper .st.done i { background: var(--d-green); border-color: var(--d-green); }
.dan-application .kd-stepper .st.done::after { background: var(--d-green); }
.dan-application .kd-stepper .st.now i { background: #fff; border-color: var(--d-green); box-shadow: 0 0 0 3px rgba(14,122,85,.18); }
.dan-application .kd-stepper .st.now { color: var(--d-ink); font-weight: 600; }
.dan-application .kd-stepper .st.neg i { background: #C2410C; border-color: #C2410C; }
.dan-application .kd-stepper .st.neg { color: #8A3B3B; font-weight: 600; }

/* `.kd-stepper-note` — השורה מתחת לסטפר (journey-stepper.js: "הוחזרה לתיקון — …" · "אושרה — …"). */
.dan-application .kd-stepper-note { font-size: 12.5px; color: var(--d-muted); margin: 2px 0 6px; }
.dan-application .kd-stepper-note b { color: var(--d-ink); font-weight: 600; }

@container dan-application (max-width: 560px) {
  .dan-application .dgrid { grid-template-columns: 1fr; }
  .dan-application .body { padding: 20px 18px 24px; }
  .dan-application .kd-chain .c { min-width: 100%; margin-inline-end: 0; }
  .dan-application .kd-chain .c:not(:last-child)::after { display: none; }
}

/* ═══════════════ קליטה — `/housing/intake` (absorption.html) ═══════════════
   העיצוב של דשבורד "ועדת קליטה וצמיחה" של דן; הנתונים הם של הנוהל שלנו (שלבים ו"איפה זה נרשם"), לא של ההדגמה. */

.dan-intake { container: dan-intake / inline-size; display: flex; flex-direction: column; gap: 22px; color: var(--d-text); }
.dan-intake [hidden] { display: none !important; }
.dan-intake .dtop { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.dan-intake h1 { font-size: 27px; font-weight: 600; color: var(--d-ink); letter-spacing: -.02em; margin: 0 0 5px; }
.dan-intake .dtop .meta { font-size: 15.5px; color: var(--d-muted); }
.dan-intake .dactions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* `.btn-ghost` · `.btn-solid` של דן — כאן כקישורים (אין להם מטפל גם בדן). */
.dan-intake .dbtn { font-family: inherit; font-size: 15px; font-weight: 500; color: var(--d-green); background: #fff; border: 1px solid #D8E3DA;
  border-radius: 999px; padding: 11px 20px; cursor: pointer; text-decoration: none; display: inline-block; }
.dan-intake .dbtn:hover { background: #F4F8F5; }
.dan-intake .dbtn.solid { font-weight: 600; color: #fff; background: var(--d-green); border: 0; padding: 12px 22px; box-shadow: 0 8px 20px rgba(14,122,85,.22); }
.dan-intake .dbtn.solid:hover { background: var(--d-green-dark); color: #fff; }
.dan-intake .dbtn:focus-visible { outline: 2px solid var(--d-green); outline-offset: 2px; }
/* ⚠️ קישור בתוך משפט נשאר **עם קו תחתון** (axe: link-in-text-block — ירוק מול אפור גוף אינו 3:1; נמדד ב-ui-a11y 01.10).
   את הקו מורידים רק מכפתורים (`.dbtn`) ומהכרטיס הכהה. */
.dan-intake a { color: var(--d-green); }
.dan-intake a:hover { color: var(--d-orange-ink); }

.dan-intake .dalerts { display: flex; gap: 12px; flex-wrap: wrap; }
.dan-intake .dalert { flex: 1; min-width: 300px; display: flex; align-items: center; gap: 12px; border-radius: 16px; padding: 14px 18px; font-size: 15px; line-height: 1.5; }
.dan-intake .dalert .ic { width: 24px; height: 24px; flex: none; border-radius: 50%; font-weight: 700; display: grid; place-items: center; font-size: 13px; }
.dan-intake .dalert.warn { background: var(--d-orange-soft); color: var(--d-orange-ink); }
/* ④ AA: "!" לבן על `--orange` של דן הוא 2.99:1 — העיגול ב-`--orange-ink` (5.9:1). */
.dan-intake .dalert.warn .ic { background: var(--d-orange-ink); color: #fff; font-size: 14px; }
.dan-intake .dalert.plain { background: #fff; border: 1px solid var(--d-line); color: var(--d-body); }
.dan-intake .dalert.plain .ic { background: #EAF2EC; color: var(--d-green); }
.dan-intake .dalert.warn a { color: var(--d-orange-ink); text-decoration: underline; }

.dan-intake .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dan-intake .kpi { background: #fff; border-radius: 18px; padding: 20px 22px; box-shadow: var(--d-shadow); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dan-intake .kpi .l { font-size: 14px; color: var(--d-faint); display: block; }
.dan-intake .kpi .v { font-size: 30px; font-weight: 600; color: var(--d-ink); letter-spacing: -.02em; display: block; }
.dan-intake .kpi .s { font-size: 13.5px; color: var(--d-green); display: block; }
.dan-intake .kpi .s.warn { color: var(--d-orange-ink); }
.dan-intake .kpi .s.mute { color: var(--d-faint); }

.dan-intake .dpair { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; align-items: start; }
.dan-intake .dpair > * { min-width: 0; }
.dan-intake .dcard { background: #fff; border-radius: 22px; padding: 26px 28px; box-shadow: var(--d-shadow); display: flex; flex-direction: column; gap: 18px; }
.dan-intake .dcard--tight { gap: 16px; padding: 24px 26px; }
.dan-intake .dcard h2 { font-size: 18px; font-weight: 600; color: var(--d-ink); margin: 0; }
.dan-intake .cardhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dan-intake .cardhead .muted-link { font-size: 14.5px; color: var(--d-faint); }
.dan-intake .pill-ok { font-size: 13.5px; font-weight: 500; color: var(--d-green-dark); background: var(--d-mint); border-radius: 999px; padding: 4px 11px; }
.dan-intake .pill-warn { font-size: 13px; font-weight: 600; color: var(--d-orange-ink); background: var(--d-orange-soft); border-radius: 999px; padding: 3px 10px; }
.dan-intake .dempty { color: var(--d-muted); font-size: 14.5px; line-height: 1.7; }
.dan-intake .dempty a { color: var(--d-green); }
.dan-intake .dfoot { font-size: 13.5px; color: var(--d-muted); line-height: 1.65; margin: 0; }
.dan-intake .dltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

.dan-intake .evlist { display: flex; flex-direction: column; gap: 12px; }
.dan-intake .ev { display: flex; gap: 16px; align-items: center; background: var(--d-cream2); border-radius: 16px; padding: 16px 18px; }
.dan-intake .ev.hl { background: var(--d-orange-soft); }
.dan-intake .ev .date { width: 60px; flex: none; background: #fff; border-radius: 12px; padding: 8px 0; text-align: center; }
.dan-intake .ev .date b { display: block; font-size: 21px; font-weight: 600; color: var(--d-green); line-height: 1.1; }
.dan-intake .ev .date span { font-size: 12.5px; color: var(--d-faint); }
.dan-intake .ev.hl .date b { color: var(--d-orange-ink); }
.dan-intake .ev.hl .date span { color: var(--d-orange-ink); }
.dan-intake .ev .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dan-intake .ev .n { font-size: 17px; font-weight: 500; }
.dan-intake .ev .s { font-size: 14.5px; color: var(--d-muted); }
.dan-intake .ev.hl .s { color: var(--d-orange-ink); }
.dan-intake .ev .s.where { font-size: 13.5px; }
.dan-intake .ev .cnt { flex: none; text-align: left; display: flex; flex-direction: column; gap: 2px; }
.dan-intake .ev .cnt b { font-size: 17px; font-weight: 600; color: var(--d-green); }
.dan-intake .ev .cnt span { font-size: 13px; color: var(--d-faint); }
.dan-intake .ev.hl .cnt b { color: var(--d-orange-ink); }
.dan-intake .ev.hl .cnt span { color: var(--d-orange-ink); }
.dan-intake .ev .cnt b.mute { color: var(--d-faint); }

.dan-intake .figures { display: flex; gap: 18px; flex-wrap: wrap; }
.dan-intake .figures div { display: flex; flex-direction: column; gap: 3px; }
.dan-intake .figures span:first-child { font-size: 13.5px; color: var(--d-faint); }
.dan-intake .figures span:last-child { font-size: 24px; font-weight: 600; }
.dan-intake .coverage { display: flex; flex-direction: column; gap: 8px; }
.dan-intake .paceline { height: 12px; background: var(--d-track); border-radius: 999px; overflow: hidden; position: relative; }
.dan-intake .paceline i { display: block; height: 100%; background: var(--d-green); border-radius: 999px; }
.dan-intake .pacelabels { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--d-faint); }
.dan-intake .brnch { display: flex; flex-direction: column; gap: 13px; border-top: 1px solid var(--d-line-soft); padding-top: 16px; }
.dan-intake .brnch .b { display: flex; flex-direction: column; gap: 6px; }
.dan-intake .brnch .t { display: flex; justify-content: space-between; gap: 10px; font-size: 14.5px; }
.dan-intake .brnch .t span:first-child { color: var(--d-body); }
.dan-intake .brnch .t span:last-child { color: var(--d-muted); flex: none; }
.dan-intake .brnch .t.over span:last-child { color: var(--d-orange-ink); }
.dan-intake .bar-track { height: 8px; background: var(--d-track); border-radius: 999px; overflow: hidden; }
.dan-intake .bar-track i { display: block; height: 100%; background: var(--d-green); border-radius: 999px; }
.dan-intake .bar-track i.warn { background: var(--d-orange); }

.dan-intake .todo { display: flex; flex-direction: column; gap: 12px; }
.dan-intake .todo .t { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #F4F1E7; padding-bottom: 12px; }
.dan-intake .todo .t:last-child { border-bottom: 0; padding-bottom: 0; }
.dan-intake .todo .n { font-size: 15.5px; font-weight: 500; }
.dan-intake .todo .s { font-size: 13.5px; color: var(--d-faint); }
.dan-intake .todo .cntn { font-size: 14px; font-weight: 500; flex: none; color: var(--d-muted); }

.dan-intake .venues { background: var(--d-ink); border-radius: 22px; padding: 24px 26px; display: flex; flex-direction: column; gap: 15px; position: relative; overflow: hidden; }
.dan-intake .venues h2 { color: #F3F8F2; position: relative; margin: 0; font-size: 18px; font-weight: 600; }
.dan-intake .venues svg.deco { position: absolute; bottom: 6px; left: -30px; opacity: .2; width: 320px; height: 60px; pointer-events: none; }
.dan-intake .venues ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; position: relative; }
.dan-intake .venues li { display: flex; gap: 12px; align-items: baseline; }
.dan-intake .venues .d { font-size: 13.5px; font-weight: 500; color: var(--d-sand); flex: none; width: 52px; }
.dan-intake .venues .e { font-size: 15px; color: #DCE9DF; line-height: 1.45; text-decoration: none; }
.dan-intake .venues a.e:hover { color: #fff; }
.dan-intake .venues a.e:focus-visible { outline: 2px solid var(--d-green-mid); outline-offset: 3px; border-radius: 4px; }

@container dan-intake (max-width: 900px) {
  .dan-intake .dpair { grid-template-columns: 1fr; }
  .dan-intake .kpis { grid-template-columns: repeat(2, 1fr); }
}
@container dan-intake (max-width: 560px) {
  /* ⚠️ `flex-basis:100%` ו-`min-width:0` פותרים שני דברים שונים, וצריך את שניהם (הערת דן ב-manager.css). */
  .dan-intake .dalert { flex-basis: 100%; min-width: 0; }
  .dan-intake .dcard { padding: 22px 20px; }
  .dan-intake .ev { flex-wrap: wrap; gap: 12px; padding: 14px; }
  .dan-intake .ev .cnt { flex-direction: row; align-items: baseline; gap: 6px; text-align: start; }
  .dan-intake .venues .d { width: 28px; }
}