/* ‎crm — רכיבי הממשק.
 *
 * ‎סרגל צד כהה מימין, תוכן בהיר משמאל — כמו במערכת המקורית.
 * ‎כל הצבעים דרך טוקנים, ולכן מצב כהה עובד בלי שורה אחת נוספת כאן. */

/* ‎═══════════════════════════ השלד ═══════════════════════════ */

.shell {
    display: grid;
    grid-template-columns: var(--nav-w) 1fr;
    min-height: 100vh;
}

/* ‎— סרגל הצד ————————————————————————————————— */

.nav {
    grid-column: 1;
    background: var(--nav-bg);
    color: var(--nav-text);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.nav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
    padding: var(--s4);
    border-bottom: 1px solid var(--nav-rule);
    position: sticky;
    top: 0;
    background: var(--nav-bg);
    z-index: 2;
}

.nav__brand {
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--brand);
    letter-spacing: 0.02em;
}

.nav__tools { display: flex; align-items: center; gap: var(--s1); }

/* ★ ‎44×44 — נמדד בדפדפן ב-14/08/2026 כ-**32×32**.
 *
 * ‎אלה מתג הערכה, ההתראות ובורר השפה בראש הפאנל: כפתורים שנלחצים
 * ‎בנייד באגודל, ו-32px הם מטרה שמחטיאים. ה**ריבוע הצבוע** נשאר
 * ‎2rem — מה שגדל הוא שטח המגע סביבו, ולכן הפריסה לא זזה.
 *
 * ⚠️ ‎``width``/``height`` הוחלפו ב-``min-*`` **ובריפוד**: קביעת
 * ‎``width: 44px`` הייתה מותחת את הרקע ומשנה את מראה הכותרת. */
.icon-btn {
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--nav-text);
    cursor: pointer;
    padding: 0;
}

.icon-btn:hover { background: var(--nav-active-bg); color: var(--nav-active); }

.icon-btn--chip {
    width: auto;
    gap: var(--s1);
    padding: 0 var(--s2);
    font: inherit;
    font-size: var(--text-xs);
    border: 1px solid var(--nav-rule);
}

.nav__group { padding: var(--s3) var(--s3) 0; }

.nav__group-title {
    padding: var(--s2) var(--s3) var(--s1);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--nav-text-mute);
}

.nav__list { display: flex; flex-direction: column; gap: 2px; }

/* ★ ‎44px גובה — נמדד **38px**.
 *
 * ‎זה הניווט הראשי של הפאנל, כלומר הקישורים שנלחצים הכי הרבה במערכת.
 * ‎ברוחב הם ממילא מלאים (336px ב-360), ולכן רק הגובה חסר. */
.nav__link {
    display: flex;
    align-items: center;
    gap: var(--s3);
    min-height: 44px;
    padding: var(--s2) var(--s3);
    border-radius: var(--radius-sm);
    color: var(--nav-text);
    font-size: var(--text-sm);
    text-decoration: none;
}

.nav__link:hover {
    background: var(--nav-active-bg);
    color: var(--nav-active);
    text-decoration: none;
}

.nav__link[aria-current='page'] {
    background: var(--nav-active-bg);
    color: var(--nav-active);
    font-weight: 600;
}

.nav__link-label { flex: 1; }

/* ‎מונה על פריט ניווט. **תמיד לצד תווית טקסט** — מספר אדום לבדו
 * ‎אינו נגיש למי שאינו מבחין בצבע. */
.nav__badge {
    min-width: 1.25rem;
    padding: 0 var(--s1);
    border-radius: var(--radius-full);
    background: var(--danger);
    /* ‎לא `#FFFFFF` קשיח: בכהה הגוון מובהר ולבן עליו מודד 2.77. */
    color: var(--text-on-danger);
    font-size: var(--text-xs);
    font-weight: 700;
    text-align: center;
    line-height: 1.25rem;
}

.nav__foot {
    margin-top: auto;
    padding: var(--s4) var(--s3);
    border-top: 1px solid var(--nav-rule);
}

.nav__user {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s2) var(--s3);
    font-size: var(--text-sm);
}

.nav__user-name { flex: 1; color: var(--nav-active); font-weight: 600; }
.nav__user-role { font-size: var(--text-xs); color: var(--nav-text-mute); }

/* ‎— אזור התוכן ————————————————————————————— */

.main {
    grid-column: 2;
    min-width: 0;
    padding: var(--s6) var(--s6) var(--s7);
}

.page-head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s4);
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--s5);
}

.page-title { font-size: var(--text-2xl); }
.page-sub { color: var(--text-3); font-size: var(--text-sm); margin: var(--s1) 0 0; }
.page-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ‎═══════════════════════════ כרטיסים ═══════════════════════════ */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
}

.card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s4) var(--s5);
    border-bottom: 1px solid var(--border);
}

.card__title { font-size: var(--text-lg); font-weight: 700; }
.card__body { padding: var(--s5); }

/* ‎— כרטיסי מדד ————————————————————————————— */

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--s4);
    margin-bottom: var(--s5);
}

.stat {
    display: flex;
    align-items: flex-start;
    gap: var(--s4);
    padding: var(--s5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
}

.stat:hover { box-shadow: var(--shadow-2); }

.stat__icon {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius);
    flex: none;
}

/* ‎הגוונים כאן הם **קטגוריה**, לא מצב. הם לעולם לא נושאים מידע
 * ‎לבדם — לכל כרטיס יש תווית טקסט מעל המספר. */
.stat__icon--brand  { background: var(--brand-soft);  color: var(--brand); }
.stat__icon--ok     { background: var(--ok-soft);     color: var(--ok); }
.stat__icon--warn   { background: var(--warn-soft);   color: var(--warn); }
.stat__icon--danger { background: var(--danger-soft); color: var(--danger); }
.stat__icon--violet { background: var(--violet-soft); color: var(--violet); }

.stat__body { min-width: 0; }

.stat__label {
    display: block;
    font-size: var(--text-sm);
    color: var(--text-2);
    margin-bottom: var(--s1);
}

.stat__value {
    display: block;
    font-size: var(--text-2xl);
    font-weight: 800;
    line-height: 1.15;
    color: var(--text);
}

.stat__note { font-size: var(--text-xs); color: var(--text-3); }

.stat__delta { font-size: var(--text-xs); font-weight: 600; }
.stat__delta--up   { color: var(--ok); }
.stat__delta--down { color: var(--danger); }

/* ‎— רצועת מדד רחבה ————————————————————————— */

.banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    padding: var(--s5);
    margin-bottom: var(--s5);
    background: var(--brand-soft);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-lg);
}

.banner__label { font-size: var(--text-sm); color: var(--text-2); }
.banner__value { font-size: var(--text-2xl); font-weight: 800; color: var(--brand); }

/* ‎═══════════════════════════ טבלאות ═══════════════════════════ */

.table-wrap { overflow-x: auto; }

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.table th,
.table td {
    text-align: start;
    padding: var(--s3) var(--s5);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.table thead th {
    background: var(--surface-2);
    color: var(--text-2);
    font-weight: 600;
    font-size: var(--text-xs);
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-2); }

.table td.num { text-align: end; font-variant-numeric: tabular-nums; }
.table td.wrap { white-space: normal; }

.table__actions { display: flex; gap: var(--s1); justify-content: flex-end; }

.table__action {
    display: inline-grid;
    place-items: center;
    /* ★ ‎44×44 — נמדד **28×28**.
     *
     * ‎אלה כפתורי הפעולה בשורת טבלה (עריכה, השבתה, מחיקה), והם
     * ‎בדיוק הכפתורים שטעות בהם עולה ביוקר: לחיצה על "מחק" במקום
     * ‎"ערוך". שטח המגע גדל, הריבוע הצבוע נשאר קטן. */
    min-width: 44px; min-height: 44px;
    border: 0; padding: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
}

.table__action:hover { background: var(--surface-3); color: var(--text); }
.table__action--danger:hover { background: var(--danger-soft); color: var(--danger); }

/* ‎═══════════════════════════ תגיות ═══════════════════════════ */

/* ‎★ תגית **תמיד נושאת טקסט**. הצבע מחזק, לא מחליף. */
.pill {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    padding: 0.15em 0.7em;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}

.pill--ok     { background: var(--ok-soft);     color: var(--ok);     border-color: var(--ok-border); }
.pill--warn   { background: var(--warn-soft);   color: var(--warn);   border-color: var(--warn-border); }
.pill--danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-border); }
.pill--info   { background: var(--info-soft);   color: var(--info);   border-color: var(--info-border); }
.pill--plain  { background: var(--surface-2);   color: var(--text-2); border-color: var(--border); }

/* ‎═══════════════════════════ כפתורים ═══════════════════════════ */

.btn {
    /* ★ ‎44px בשני הצירים — מטרת מגע לפי WCAG 2.5.8.
     *
     * ‎נמדד בדפדפן: "הרשמה חינם" בשער היה **84×24**. ``padding``
     * ‎לבדו נתן 24px גובה, וזו מחצית ממה שאצבע צריכה — על כפתור
     * ‎ה-CTA הראשי של הדף.
     *
     * ⚠️ ‎ההוספה הראשונה שלי נחתה ב-``.pill`` כי היא הוחלפה לפי
     * ‎"המופע הראשון של ``display: inline-flex``" ולא לפי שם
     * ‎הסלקטור. עריכת CSS לפי מיקום היא עריכה של כלל אחר. */
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s4);
    border: 1px solid var(--brand);
    border-radius: var(--radius);
    background: var(--brand);
    color: var(--text-on-brand);   /* ★ לבן על מבטא. תמיד. */
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.btn:hover {
    background: var(--brand-strong);
    border-color: var(--brand-strong);
    color: var(--text-on-brand);
    text-decoration: none;
}

.btn--quiet {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text);
}

.btn--quiet:hover { background: var(--surface-2); color: var(--text); }

/* ★ ‎כפתור משני — מתאר בלי מילוי.
 *
 * ⚠️ ‎השם ``btn--ghost`` היה בשימוש ב-13 מקומות בתבניות **בלי שהוא
 * ‎מוגדר בכלל**. התוצאה: כל כפתור "משני" קיבל את ``.btn`` בלבד —
 * ‎כלומר נראה בדיוק כמו הראשי. שני כפתורים ראשיים זה לצד זה הם
 * ‎בדיוק המצב שבו המשתמש לא יודע מה הפעולה המרכזית.
 *
 * ‎הדף לא נראה שבור. הוא נראה כמו דף שאין בו החלטה. */
.btn--ghost {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--text);
}

.btn--ghost:hover {
    background: var(--surface-2);
    color: var(--text);
    text-decoration: none;
}

/* ‎גרסה לרקע צבעוני — פס הצפייה בחשבון דייר. */
.btn--ghost-light {
    background: transparent;
    border-color: currentColor;
    color: inherit;
}

.btn--ghost-light:hover { background: var(--surface); }

/* ‎וריאנט סכנה על כפתור מתאר: מתאר אדום, לא מילוי אדום. מילוי
 * ‎אדום על "השעיית ארגון" צועק יותר מהפעולה עצמה. */
.btn--danger {
    border-color: var(--danger-border);
    color: var(--danger);
}

.btn--danger:hover { background: var(--danger-soft); color: var(--danger); }

.btn--sm { padding: var(--s1) var(--s3); font-size: var(--text-xs); }

/* ‎═══════════════════════════ סינון ═══════════════════════════ */

.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3);
    align-items: center;
    margin-bottom: var(--s4);
}

/* ★ ‎44px — נמדד **215×24** בכל מסך רשימה.
 *
 * ‎העטיפה היא מה שנראה כשדה, ולכן היא מקבלת את הגובה. ה-``input``
 * ‎בפנים מתמתח איתה, ומטרת המגע היא כל השטח — כולל האייקון. */
.search {
    flex: 1;
    min-width: 14rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: var(--s2);
    /* ⚠️ ‎**בלי ריפוד אנכי.** הריפוד הקטין את תיבת התוכן, ולכן
     * ‎ה-``input`` בפנים נשאר 26px גם כשהעטיפה הגיעה ל-44.
     * ‎ולחיצה על הריפוד אינה ממקדת את השדה — כלומר השטח הזה נראה
     * ‎כמו מטרה ואינו מטרה. הגובה עובר ל-``input`` עצמו. */
    padding-block: 0;
    padding-inline: var(--s3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-3);
}

/* ⚠️ ‎ה-``input`` **מחוץ** ל-``.field``, ולכן הוא לא ירש את 44px.
 * ‎הוא מתמתח לגובה העטיפה במקום לקבוע גובה משלו — אחרת היו שני
 * ‎גבהים שמתחרים והשדה היה נראה עבה מדי. */
.search input {
    flex: 1;
    align-self: stretch;
    min-height: 44px;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: var(--text-sm);
    min-width: 0;
}

.search input:focus { outline: none; }

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ★ ‎44px — נמדדו **50–80 × 32**.
 *
 * ‎אלה שבבי הסינון ("הכל", "היום", "באיחור"), והם נלחצים הרבה
 * ‎יותר מכל דבר אחר במסך רשימה. */
.chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: var(--s1) var(--s3);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--surface);
    color: var(--text-2);
    font-size: var(--text-sm);
    text-decoration: none;
}

.chip:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }

.chip[aria-current='true'] {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--text-on-brand);
    font-weight: 600;
}

/* ‎═══════════════════════════ טפסים ═══════════════════════════ */

.field { margin-bottom: var(--s4); }

.field > label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: var(--s1);
    color: var(--text-2);
}

/* ★ ‎44px — שדה קלט הוא מטרת מגע לכל דבר.
 *
 * ‎נמדד בדפדפן: כל שדה בטופס ההרשמה היה **40px גובה**. זה לא רק
 * ‎WCAG — זה טופס שממלאים בנייד באגודל, ו-4px חסרים הם ההבדל בין
 * ‎פגיעה לבין לחיצה על השדה שמעל.
 *
 * ⚠️ ‎ו-``font-size`` לא יורד מ-16px בנייד: ספארי **מזגזג את הדף**
 * ‎(auto-zoom) כשמתמקדים בשדה עם גופן קטן יותר, והמשתמש מוצא את
 * ‎עצמו בדף מוגדל שאי אפשר לצאת ממנו. */
.field input,
.field select,
.field textarea {
    min-height: 44px;
    width: 100%;
    padding: var(--s2) var(--s3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: var(--text-sm);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--brand);
    outline: 2px solid var(--brand);
    outline-offset: -1px;
}

.alert {
    display: flex;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    border-radius: var(--radius);
    border: 1px solid;
    margin-bottom: var(--s4);
    font-size: var(--text-sm);
}

.alert--danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-border); }
.alert--ok     { background: var(--ok-soft);     color: var(--ok);     border-color: var(--ok-border); }
.alert--info   { background: var(--info-soft);   color: var(--info);   border-color: var(--info-border); }

/* ‎═══════════════════════════ מצב ריק ═══════════════════════════ */

/* ‎"מסכים ריקים הופכים להנחיה פעילה — מה לעשות עכשיו" (המצגת).
 * ‎ריבוע אפור נראה כמו תקלה; הנחיה נראית כמו החלטה. */
.empty {
    display: grid;
    place-items: center;
    gap: var(--s3);
    padding: var(--s7) var(--s5);
    text-align: center;
    color: var(--text-2);
}

.empty__icon {
    display: grid;
    place-items: center;
    width: 3.5rem; height: 3.5rem;
    border-radius: var(--radius-full);
    background: var(--surface-2);
    color: var(--text-3);
}

.empty__title { font-size: var(--text-lg); font-weight: 700; color: var(--text); }
.empty__text { max-width: 34ch; margin: 0; font-size: var(--text-sm); }

/* ‎═══════════════════════════ פריסות ═══════════════════════════ */

.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: var(--s4);
}

/* ‎═══════════════════════════ מובייל ═══════════════════════════ */

@media (max-width: 60rem) {
    .shell { grid-template-columns: 1fr; }

    .nav {
        position: static;
        height: auto;
        grid-column: 1;
    }

    /* ‎הניווט מתקפל ל-<details>. **פתוח כברירת מחדל בלי JS** —
     * ‎הסקריפט סוגר אותו, ולכן מי שה-JS שלו לא נטען מקבל ניווט
     * ‎מלא ולא תפריט שלא נפתח (חוק ברזל 11). */
    .nav__body { display: block; }

    .main { padding: var(--s4); grid-column: 1; }

    .table th, .table td { padding: var(--s2) var(--s3); }
}

@media (min-width: 60.01rem) {
    .nav__toggle { display: none; }
}

/* ‎═══════════════════════════ עמודות ═══════════════════════════ */

/* ‎אופקי ולא אנכי: תוויות בעברית ארוכות, ובגרף אנכי הן מסתובבות
 * ‎או נחתכות. ראה apps/panel/templatetags/ui.py. */

.bars { display: flex; flex-direction: column; gap: var(--s3); }

.bar {
    display: grid;
    grid-template-columns: minmax(5rem, 8rem) 1fr auto;
    align-items: center;
    gap: var(--s3);
    font-size: var(--text-sm);
}

.bar__label {
    color: var(--text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bar__track {
    block-size: 0.65rem;
    background: var(--surface-2);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.bar__fill {
    display: block;
    block-size: 100%;
    background: var(--brand);
    border-radius: var(--radius-full);
}

.bar__value { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }

/* ‎═══════════════════════════ התחברות ═══════════════════════════ */

.auth {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: var(--s5);
    background: var(--bg);
}

.auth__card { width: 100%; max-width: 25rem; box-shadow: var(--shadow-3); }

.auth__brand {
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--brand);
    margin: 0 0 var(--s5);
}

.auth__title { font-size: var(--text-2xl); margin-bottom: var(--s1); }
.auth__sub { color: var(--text-3); font-size: var(--text-sm); margin-bottom: var(--s5); }
.auth__submit { width: 100%; justify-content: center; margin-top: var(--s2); }

/* ‎כפתור שנראה כמו קישור ניווט.
 * ‎היציאה חייבת להיות POST (ג'אנגו 6 מחזיר 405 על GET, וזה נכון:
 * ‎יציאה ב-GET ניתנת להפעלה מאתר זר). הטופס לא אמור להיראות אחרת. */

.nav__logout { margin: 0; }

.nav__link--button {
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: var(--text-sm);
    text-align: start;
    cursor: pointer;
}

/* ‎═══════════════════════════ טפסים ═══════════════════════════ */

.form-card { max-width: 46rem; }

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0 var(--s4);
}

/* ‎שדות שצריכים את כל הרוחב — טקסט ארוך והערות. */
.form-grid .field:has(textarea) { grid-column: 1 / -1; }

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3);
    margin-top: var(--s4);
    padding-top: var(--s4);
    border-top: 1px solid var(--border);
}

.btn--danger {
    background: var(--danger);
    border-color: var(--danger);
    color: var(--text-on-danger);
}

.btn--danger:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: var(--text-on-danger);
    filter: none;
}

.alert--warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-border); }

/* ‎תא בלוח התהליכים — כפתור שנראה כמו תגית. */
.cell-btn {
    border: 0;
    padding: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

/* ‎רשת הרשאות המסכים — תיבות סימון בשתיים-שלוש עמודות. */
.perm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--s2) var(--s4);
    padding: var(--s4);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.perm-grid__item { margin: 0; }

/* ── פס צפייה בחשבון דייר ───────────────────────────────────────────
   ⚠️ אין כאן box-shadow ואין glow: העומק בא מקצה נייר ומקו (התקן).
   הרקע הוא --state-warn-strong ולא המבטא — כי הפס אומר "שים לב",
   ולא "זה המותג". וטקסט לבן על קרקע מבטא, תמיד: ראה tokens.css. */
.impersonation {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-5);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--warn-border);
    border-inline-start: 4px solid var(--warn);
    border-radius: var(--radius-2);
    background: var(--warn-soft);
    color: var(--warn);
}

.impersonation__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--text-sm);
}

.impersonation__text strong { font-weight: 600; }
.impersonation__text span { color: var(--warn); opacity: .85; }


/* ‎★ תיבת סימון — 20px במקום 13px של ברירת המחדל.
 *
 * ‎המטרה בפועל היא ה-``<label>`` שעוטף אותה ולחיצה עליו מסמנת, ולכן
 * ‎זו אינה הפרת WCAG. אבל 13px היא **נקודה** ולא תיבה, ובנייד קשה
 * ‎לראות אם היא מסומנת. */
.check input[type="checkbox"],
.check input[type="radio"] {
    inline-size: 20px;
    block-size: 20px;
    min-height: 0;      /* ‎לא יורש את 44px של שדות הטקסט */
    flex: none;
}

/* ── רשימת הצעדים הראשונים ─────────────────────────────────────────
 *
 * ‎יושבת בראש הדשבורד עד שהיא מושלמת, ואז נעלמת לגמרי. */

.checklist { margin-bottom: var(--s5); }

.checklist__count {
    font-size: var(--text-sm);
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}

.checklist__list {
    display: grid;
    gap: var(--s2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.checklist__item {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* ⚠️ ‎``opacity`` על צעד **שהושלם** אינו מצב התחלה של תוכן אלא
 * ‎משוב על פעולה שקרתה — ולכן אינו נוגד את חוק ברזל 11. */
.checklist__item--done { opacity: .65; border-style: dashed; }

.checklist__mark {
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: 24px;
    block-size: 24px;
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-full);
    color: var(--ok);
}

.checklist__item--done .checklist__mark { border-color: var(--ok); }

.checklist__text { flex: 1; min-width: 0; }
.checklist__title { margin: 0; font-weight: 600; font-size: var(--text-sm); }
.checklist__hint {
    margin: 2px 0 0;
    font-size: var(--text-xs);
    color: var(--text-3);
}

.btn--sm { min-height: 44px; padding-inline: var(--s4); font-size: var(--text-sm); }