/* src/app/kit · kit.css — F4: ערכת הכתיבה למסכים. תוספתי בלבד (כלל 10 · הכרעה 1).
 *
 * 🔴 **אין כאן טוקן אחד.** כל צבע, ריווח, רדיוס וגופן הם `var(--…)` של
 * `packages/ui/tokens.css` — אותו קובץ, בלי שינוי. מה שמוגדר כאן הן מחלקות
 * **חדשות** (kit-dialog · kit-field__error · kit-status) שלא היו קיימות באף מסך
 * לפני המשימה הזו (evidence: אין <dialog> באף מסך מלבד login.js).
 * ⚠️ `.form-field` · `.form-input` · `.alert` · `.btn` · `.btn-solid` · `.btn-ghost` —
 * ממשיכים להיות של packages/ui/components.css, בלי הגדרה כפולה.
 */

/* ── דיאלוג ─────────────────────────────────────────────────────────────
 * 🔴 הפריסה (flex, שלושה חלקים) יושבת על `[open]` בלבד — כלל הבסיס של הדפדפן
 * (`dialog:not([open]){display:none}`) גובר בלי זה, ובלעדיו .kit-dialog{display:flex}
 * היה מנצח את הכלל של הדפדפן ומצייר את הדיאלוג גם כשהוא סגור. */
.kit-dialog {
  border: 0;
  border-radius: var(--r-lg);
  padding: 0;
  width: min(560px, calc(100vw - 2 * var(--s4)));
  max-height: min(88vh, 720px);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.kit-dialog[open] { display: flex; flex-direction: column; }
.kit-dialog--wide { width: min(720px, calc(100vw - 2 * var(--s4))); }
.kit-dialog::backdrop { background: rgba(28, 29, 26, .42); }

.kit-dialog__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3);
  padding: var(--s5) var(--s5) var(--s4);
  border-block-end: 1px solid var(--line);
  flex: none;
}
.kit-dialog__head h2 { font-size: var(--fs-h2); }
.kit-dialog__sub { color: var(--muted); font-size: var(--fs-small); margin-block-start: var(--s1); }
/* יעד מגע 44px (--tap), לא רק אייקון: כלל §8 — פקד שנוגעים בו בטלפון. */
.kit-dialog__x {
  flex: none; inline-size: var(--tap); block-size: var(--tap);
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-sm);
  background: var(--sand); color: var(--muted); cursor: pointer;
}
.kit-dialog__x:hover { background: var(--brand-soft); color: var(--brand-ink); }
.kit-dialog__x svg { width: 18px; height: 18px; }

.kit-dialog__body { padding: var(--s5); overflow-y: auto; flex: 1; }
.kit-dialog__foot {
  padding: var(--s4) var(--s5) var(--s5);
  border-block-start: 1px solid var(--line);
  display: flex; gap: var(--s2); flex-wrap: wrap;
  flex: none;
}
.kit-dialog__foot .btn { flex: 1 1 auto; min-width: 120px; }

/* ── אישור ──────────────────────────────────────────────────────────────
 * 🔴 בלי צבע חדש. "danger" משתמש ב-`--warn` הקיים (כתום — "חריגה" בטוקנים), לעולם לא
 * באדום/`--emergency`: tokens.css אומר בפירוש "חירום בלבד. לא שגיאת טופס, לא מחיקה". */
.kit-confirm__msg { line-height: var(--lh-body); white-space: pre-line; }
.kit-confirm__danger { background: var(--warn); }
.kit-confirm__danger:hover { background: var(--warn); opacity: .88; }

/* ── שדה ────────────────────────────────────────────────────────────────
 * `.form-input[aria-invalid="true"]` כבר מוגדר ב-components.css (login.js) — לא כפול. */
.kit-field__hint { color: var(--muted); font-size: var(--fs-small); margin-block: var(--s1) 0; }
.kit-field__error {
  color: var(--warn); font-size: var(--fs-small);
  margin-block: var(--s1) 0; font-weight: 500;
}

/* ── שורת פעולות טופס — כמו .login__actions ב-login.js, כללי לכל טופס בערכה ── */
.kit-form__actions { display: flex; gap: var(--s2); flex-wrap: wrap; margin-block-start: var(--s4); }
.kit-form__actions .btn { flex: 1 1 auto; min-width: 120px; }

/* ── הודעת מצב (wait/ok/err) — כמו ה-#sync בדן, פעם אחת ──────────────────── */
.kit-status { font-size: var(--fs-small); min-height: 1.2em; }
.kit-status--wait { color: var(--muted); }
.kit-status--ok { color: var(--brand-ink); }
.kit-status--err { color: var(--warn); font-weight: 500; }

/* ── הדפסה — כמו שאר הרכיבים (components.css): פקד על נייר הוא רעש ──────── */
@media print {
  .kit-dialog, .kit-dialog::backdrop { display: none !important; }
}