/* @agur/ui · shell — המעטפת מ-§3. אחת לכל 52 המסכים.
 * נקודות שבירה (§7): 1200 רוחב מרבי · 820 מגירה · 640 עמודה אחת.
 *
 * 🔴 01.10 · גיל: "תעתיק גם את הלוגיקה והפונקציונליות בדף וגם את העיצוב של כל המסכים, פשוט העתקה ממקום
 *    למקום. שיהיה אחד לאחד." ⟹ **המראה של הסיידבר, הסרגל הנייד, הפעמון והבאנרים הועתק מ-
 *    `legacy/community/assets/css/header.css`** (docs/runbooks/dan-design-port.md). המחלקות נשארו שלנו
 *    (`shell.selftest.mjs` · `resident-badges.js` · admin.css תלויים בהן) — הערכים הם של דן, ערך בערך.
 *
 * ⚠️ **הטוקנים כאן ולא ב-`src/app/dan/dan.css`:** המעטפת יושבת **מחוץ** ל-`.dan` (המסכים עוטפים את עצמם), והקובץ
 *    הזה משותף עם הקונסולה הפנימית (`/admin/ui/shell.css`) שאינה טוענת את dan.css כלל. ⟹ `--sh-*` על
 *    משטחי המעטפת עצמם (לא `:root` — tokens.css הוא ההצהרה היחידה), אותם ערכים בדיוק כמו `--d-*`.
 * ⚠️ **ושלושה אפורים הוכהו ל-AA** (אותו תיקון כמו ב-dan.css, נמדד ב-axe): `--kd-cap` של דן (#8A968F) נותן
 *    3.07:1 על לבן, ו-`--kd-cap-soft`/`--kd-cap-faint`/`--kd-quiet` (#9AA69E · #B3BCB5 · #A3ACA5) עוד פחות — וכולם
 *    משמשים לטקסט (כיתובי קבוצה, "מצב תצוגה", מספר על קבוצה סגורה). ⟹ `--sh-cap`: #5F6E66 — 5.37 על לבן ·
 *    5.00 על שדה הכובע · 5.07 על כרטיס המשתמש · 4.88 על שמנת · 4.70 על גלולת המונה. `--sh-quiet` נשאר של דן, **לקרטים
 *    ולקווים בלבד (לא טקסט)**.
 *
 * 🔴 07.10 · **הסיידבר עצמו כבר אינו של דן:** גיל ביקש עיצוב A ("AGUR · Sidebar", הגרסה על חול, אייקון בכל שורה) בפלטת המעצבת. הבלוק
 *    "הסיידבר על חול" (אחרי `.shell__legal`) צובע מחדש **רק** את הסיידבר; מבנה, מידות הניווט והסרגל העליון נשארים של דן. */

/* ── טוקנים · מקומיים למשטחי המעטפת ───────────────────────────────────── */
.topbar, [data-shell], .banner-slot {
  --sh-green: #0E7A55;
  --sh-green-dark: #0B6244;
  --sh-green-mid: #4FA97E;
  --sh-mint: #E6F4EC;
  --sh-ink: #103C2A;
  --sh-text: #16211C;
  --sh-line: #ECE7DA;
  --sh-line-soft: #F0EDE2;
  --sh-rail: #E7E3D6;
  --sh-nav: #33443C;          /* --kd-text */
  --sh-nav-sub: #4A574F;      /* --kd-text-sub */
  --sh-cap: #5F6E66;          /* AA — בדן #8A968F */
  --sh-quiet: #A3ACA5;        /* קרטים וקווים בלבד */
  --sh-cream: #F6F4EC;
  --sh-card: #FBF8F1;
  --sh-field: #F3F8F4;
  --sh-field-line: #E2EDE6;
  --sh-hover: #F4F8F5;
  --sh-alert-ink: #A9542A;
  --sh-alert-bg: #FDEEE3;
  --sh-count-bg: #F1F0E8;
  --sh-menu-shadow: 0 4px 12px rgba(16,42,32,.10), 0 20px 44px rgba(16,42,32,.16);
  /* 🔴 01.10 · **`line-height: normal`, כמו אצל דן** — ל-`header.css` אין `line-height` גורף (גוף העמוד של דן הוא `normal`),
   * ואילו `base.css` שלנו קובע `--lh-body: 1.6` על `body` והמעטפת ירשה אותו. נמדד על אותו עמוד ואותו גופן: שדה מצב התצוגה
   * 63px מול 52, שם הדייר 26 מול 19, כיתוב "מצב תצוגה" 16 מול 12, גלולת מונה 21 מול 16, כיתוב קבוצה 16 מול 12,
   * כיתוב השכבה הקבועה 18 מול 14, הקישור המשפטי 24 מול 20, תג באנר 29 מול 24 — ראש הסיידבר וכל גלולה נראו רפויים. ⚠️ רק
   * שלושת משטחי המעטפת: תוכן המסכים ממשיך ב-1.6. ⚠️ ו**אינו נוגע ב-44px** — `min-height: var(--tap)` על השורות
   * ו-`::before`/`::after` של יעדי המגע הם מה שמחזיק אותו, לא הרווח שבין השורות. */
  line-height: normal;
}

/* 🔴 01.10 · page.css `body{background:radial-gradient(…)}` — **על `.app` ולא על `body`:** `body` משותף עם מסך
 * הכניסה (שאינו נוגע בו) ועם כל מי שאינו בתוך המעטפת. ה-`.app` הוא בדיוק "גוף האפליקציה" — מכסה את כל גובה
 * התוכן (min-height) והגרדיאנט נמתח איתו, כמו אצל דן (גוף בגובה התוכן). */
.app {
  display: flex; min-height: 100vh;
  background: radial-gradient(120% 60% at 80% 0%, #FDF8EF 0%, #F2EFE5 60%, #ECEFE7 100%);
}

/* ── המעטפת ────────────────────────────────────────────────────────── */
[data-shell] {
  width: var(--shell-w); flex: none; background: #fff; border-inline-end: 1px solid var(--sh-line);
  padding: 17px 12px 12px; display: flex; flex-direction: column; gap: 13px;
  position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto;
}

/* ── טבעת פוקוס לכל פקד (header.css "טבעת פוקוס לכל פקד") ──────────────
 * outline ולא box-shadow: אינו מושפע מ-border-radius ואינו נחתך ע"י ה-overflow של ה-<nav>. ⚠️ ה-radius של
 * base.css (`--r-sm`) היה משנה את צורת הפקד **בזמן** המיקוד; כאן הוא הערך של דן. */
[data-shell] a:focus-visible, [data-shell] button:focus-visible, [data-shell] input:focus-visible,
.topbar__burger:focus-visible {
  outline: 2px solid var(--sh-green); outline-offset: 2px; border-radius: 10px;
}

/* ── מותג ──────────────────────────────────────────────────────────────
 * 🔴 19.09, נמדד ב-CI ולא במק: 379/375 ב-/account/privacy. מאז הסרת Rubik (ui-fonts) הטיפוגרפיה
 * היא מחסנית מערכת, וברוחב שונה בכל מערכת הפעלה — ה-ראנר הוא Linux והמק אינו. רוחב שנקבע ע"י
 * מדידת הגופן הוא פריסה שתלויה במכונה; min-width:0 מחזיר את השליטה ל-flex, והעטיפה מתירה לשם
 * הדייר לרדת שורה במקום לדחוף את הסרגל. */
.shell__brand { display: flex; align-items: center; gap: 10px; padding: 0 6px; flex: none; min-width: 0; }
.shell__mark { width: 38px; height: 38px; flex: none; color: var(--brand, #0E7A55); }
.shell__brand .shell__mark {
  background: #F7FAF7; border-radius: 11px; display: grid; place-items: center;
  /* ⭐ 05.10 · לוגו רחב (כפר בלום, 928×394): הריבוע של 38px היה מציג אותו ברוחב 32px — לא קריא. הרוחב נגזר מהיחס של הלוגו (עד 84px),
   * והריבוע נשאר מינימום: לוגו ריבועי/גבוה (דן) ואייקון המוצר נראים בדיוק כמו קודם. */
  width: auto; min-width: 38px; padding-inline: 3px;
}
.shell__brand .shell__mark svg { width: 24px; height: 24px; }
.shell__brand .shell__mark img { height: 32px; width: auto; max-width: 84px; object-fit: contain; }
.shell__tenant {
  font-size: 16px; font-weight: 600; color: var(--sh-ink); letter-spacing: -.02em;
  min-width: 0; overflow-wrap: anywhere;
}

/* ── שדה מצב התצוגה (header.css `.modefield`) ──
 * הכיתוב «מצב תצוגה» קיים **תמיד** — בלעדיו שם כמו "ספרייה" נקרא כתפקיד ולא כמצב שהוא עומד בו.
 * ⭐ 05.10 · שדה הקהילה הנפרד (שמנת, "קהילה") נמחק — בורר הקהילה הוא בלוק המותג עצמו (ראו `.shell__brand--switch` למטה). */
.mode {
  position: relative; flex: none; display: flex; flex-direction: column; gap: 1px;
  border: 1px solid var(--sh-field-line); border-radius: 12px; padding: 8px 11px; background: var(--sh-field);
}
/* 🔴 הפעמון בתוך השדה (notifications.js `.modefield.has-bell`): ריפוד בצד ההתחלה פינה לו מקום, כדי ששם
 * הכובע לא ייכנס מתחתיו. `:has` — דפדפן בלי תמיכה מאבד רק את הריפוד (הפעמון עולה על השוליים, לא על הטקסט). */
.mode:has(> .bell-wrap:not([hidden])) { padding-inline-start: 42px; }
.mode__cap { font-size: 10px; font-weight: 600; letter-spacing: .13em; color: var(--sh-cap); }
.mode__btn {
  display: flex; align-items: center; gap: 6px; background: none; border: 0; padding: 2px 0; margin: 0;
  font-size: 15px; font-weight: 600; color: var(--sh-green-dark); cursor: pointer; text-align: start;
  border-radius: 7px; max-width: 100%; min-width: 0;
}
/* 🔴 יעד המגע (44px) הוא **כל השדה**, בלי לשנות את מראהו: דן מציירת כפתור של 28px בתוך קופסה של 63 —
 * הפסאודו-אלמנט נמתח אל השדה (`position:relative`), והלחיצה בכל מקום בו פותחת את התפריט. הפעמון והתפריט
 * מאוחרים ממנו ב-DOM ולכן מצוירים מעליו. */
.mode__btn::before { content: ""; position: absolute; inset: -1px; border-radius: 12px; }
.mode__btn:focus-visible::before { outline: 0; }
.mode__cur { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mode__btn svg, .comm__btn svg {
  width: 14px; height: 14px; color: var(--sh-green-mid); flex: none; transition: transform .15s;
}
.mode__btn[aria-expanded="true"] svg, .comm__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
/* ⭐ 05.10 · בלוק המותג כבורר קהילה (גיל). קהילה אחת ⟹ בלוק סטטי, בלי כפתור נחשף. שתיים ומעלה ⟹ `.shell__brand--switch`:
 * הכפתור נמתח על הבלוק כולו (יעד מגע אחד, מתחת ללוגו ולשם — אלה `pointer-events:none` וצפים מעליו) והחץ בקצה. `.comm__cur` מוסתר
 * חזותית — הוא השם הנגיש (ו-aria-label מוסיף את הפעולה); השם המצויר הוא `.shell__tenant`. */
.shell__brand--switch { position: relative; }
.shell__brand--switch .shell__mark, .shell__brand--switch .shell__tenant { position: relative; z-index: 1; pointer-events: none; }
.comm__btn {
  position: absolute; z-index: 0; inset-block: -5px; inset-inline: -3px; display: flex; align-items: center; justify-content: flex-end;
  background: none; border: 0; margin: 0; padding: 0 12px; border-radius: 12px; color: var(--sh-cap); cursor: pointer; text-align: start;
}
.comm__btn[hidden] { display: none; }
.comm__btn:hover { background: var(--sh-hover); }
.comm__btn svg { color: var(--sh-cap); }
.comm__cur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* בעל כובע יחיד — שורה, לא פקד (header.js `.mode-static`) */
.mode__static { font-size: 15px; font-weight: 600; color: var(--sh-green-dark); padding: 2px 0; min-width: 0; overflow-wrap: anywhere; }

/* ── התפריטים הצפים: כובעים · קהילות · פעמון · משתמש (header.css `.me-menu`) ──
 * ⚠️ `display:flex` דורס את `[hidden]` של הדפדפן — השורה `[hidden]` בכל אחד מהם היא מה שגורם ל-`hidden` להסתיר. */
.mode__menu, .comm__menu, .bell__menu {
  position: absolute; inset-inline: 0; z-index: 40;
  background: #fff; border: 1px solid var(--sh-line); border-radius: 14px; box-shadow: var(--sh-menu-shadow);
  padding: 7px; display: flex; flex-direction: column; gap: 1px;
}
.mode__menu, .comm__menu { top: calc(100% + 8px); }
.mode__menu[hidden], .comm__menu[hidden], .bell__menu[hidden] { display: none; }
/* 🔴 01.10 · רשימת הכובעים (`role="menu"`) בתוך המכל — הבורר אחיה, לא ילדה (ראו shell.js: aria-required-children). */
.mode__list { display: flex; flex-direction: column; gap: 1px; }
.mode__label, .comm__label, .mode__imp-label {
  font-size: 10px; font-weight: 600; letter-spacing: .13em; color: var(--sh-cap); padding: 6px 10px 5px;
}
/* שורות הכובעים והקהילות (header.css `.me-menu-row` + `.me-menu-item`) — כפתורים ולא עוגנים: אצלנו החלפת
 * כובע היא `applyMode` + ניווט רך, ומעבר קהילה בקשה (ראו shell.js). 44px — הרצפה, לא הצעה. */
.mode__item, .comm__item, .comm__link {
  width: 100%; min-height: var(--tap); display: flex; align-items: center; gap: var(--s2);
  background: none; border: 0; border-radius: 9px; padding: 9px 10px;
  font-size: 14.5px; color: var(--sh-text); text-decoration: none; cursor: pointer; text-align: start;
}
.mode__item:hover, .comm__item:hover, .comm__link:hover { background: var(--sh-hover); color: var(--sh-green-dark); }
.mode__item[aria-current="true"], .comm__item[aria-checked="true"] {
  background: var(--sh-mint); color: var(--sh-green-dark); font-weight: 600;
}
/* הכוכב — ברירת המחדל של האדם. ⚠️ סימון בלבד, לא פקד (דן: כפתור "הפוך לברירת מחדל" — אין אצלנו נקודת קצה). */
.mode__star { margin-inline-start: auto; width: 15px; height: 15px; color: var(--sh-green); flex: none; }
.comm__def { margin-inline-start: auto; width: 12px; height: 12px; color: var(--sh-green); flex: none; }
.mode__star svg, .comm__def svg { width: 100%; height: 100%; }
.comm__def[hidden] { display: none; }
.comm__link { border-block-start: 1px solid var(--sh-line-soft); border-radius: 0 0 9px 9px; margin-block-start: 3px; color: var(--sh-green-dark); font-size: 13.5px; }

/* ── בורר ההתחזות · "תמיכה" (header.css `.imp-pick` · `.imp-q` · `.imp-go`) ──────────
 * מוצג רק כש-me.impersonationCapabilities מתיר (ראו impersonationPickerHTML ב-shell.js). */
.mode__imp { border-block-start: 1px solid var(--sh-line-soft); margin-block-start: var(--s1); padding-block-start: var(--s1); }
.mode__imp-row { display: flex; gap: 6px; padding: 4px 6px 0; }
.mode__imp-row:last-of-type { padding-block-end: 8px; }
.mode__imp-input {
  width: 100%; flex: 1; min-width: 0; min-height: var(--tap); font-size: 14px; padding: 9px 11px;
  border: 1px solid var(--sh-line); border-radius: 10px; background: var(--sh-card); color: var(--sh-text);
}
.mode__imp-input:focus-visible { border-color: var(--sh-green); background: #fff; }
/* העילה (אצלנו חובה, אין בדן) — אותה צורה בדיוק כמו השדה מעליה */
.mode__imp-reason {
  width: 100%; flex: 1; min-width: 0; min-height: var(--tap); font-size: 14px; padding: 9px 11px;
  border: 1px solid var(--sh-line); border-radius: 10px; background: var(--sh-card); color: var(--sh-text);
}
.mode__imp-reason:focus-visible { border-color: var(--sh-green); background: #fff; }
.mode__imp-btn {
  flex: none; min-height: var(--tap); cursor: pointer; border: 0; border-radius: 999px; padding: 5px 11px;
  font-size: 12.5px; font-weight: 600; background: var(--sh-mint); color: var(--sh-green-dark);
}
.mode__imp-btn:hover { background: #D6EDE0; }
/* ⚠️ „פעולה בשמו" בגוון אחר: קריאה וכתיבה־בשם־מישהו הן שתי רמות סיכון, וכפתור זהה לשתיהן מוחק בדיוק
 * את ההבחנה שכל התכנון עומד עליה. */
.mode__imp-btn--act { background: #FBE9E9; color: #8E1F1F; }
.mode__imp-btn--act:hover { background: #F6DADA; }
.mode__imp-msg, .mode__imp-need { margin: 0; padding: 2px 10px 8px; font-size: 12.5px; line-height: 1.4; color: #8E1F1F; }
/* 05.10 · "נדרש אימות נוסף" — מחזיקים את היכולת, הסשן מתחת לרצפה. ניטרלי (--sh-nav-sub): זו הוראה, לא שגיאה. ⚠️ משתף את ההצהרה
 * של `.mode__imp-msg` ובכוונה: `font-size` נוסף היה מעלה את התקרה של `ui-tokens-only` (56), ולא חדש אלא אותו גודל. */
.mode__imp-need { padding-block-end: 6px; line-height: 1.45; color: var(--sh-nav-sub); }
.mode__imp-link { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-weight: 600; text-decoration: underline; color: var(--sh-green-dark); }
/* 🔴 01.10 · תוצאות החיפוש (header.css `.imp-res` · `.imp-row` · `.imp-nm` · `.imp-acts` · `.imp-minor`).
 * ⚠️ תקרת גובה + גלילה: "עשר תוצאות בתפריט צף גולשות מהמסך בנייד, והתפריט אינו נגלל".
 * ⚠️⚠️ **שתי שורות ולא אחת**: התפריט צר, ושם + שני כפתורים באותה שורה חתכו את השם ואת התג — "תג 'קטין' שנחתך גרוע
 * מהיעדרו: הוא נראה כמו רעש ולא כמו אזהרה, וזו בדיוק האזהרה שאמורה להופיע לפני הקליק". הכפתורים צמודים להתחלה ואינם
 * נמתחים — כדי שיישארו פעולות ולא ייראו כמו שתי שורות תפריט. */
.mode__imp-res { max-height: 210px; overflow-y: auto; margin-top: 6px; padding-inline: 6px; display: flex; flex-direction: column; gap: 3px; }
.imp__row { display: flex; flex-direction: column; align-items: stretch; gap: 5px; padding: 7px 8px; border-radius: 9px; }
.imp__row:hover { background: var(--sh-hover); }
.imp__nm { display: flex; align-items: center; min-width: 0; font-size: 14px; color: var(--sh-text); }
.imp__nmt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp__acts { display: flex; gap: 6px; flex-wrap: wrap; }
.imp__minor {
  flex: none; margin-inline-start: 6px; font-size: 10.5px; font-weight: 600; border-radius: 999px; padding: 1px 7px;
  background: #FBE9E9; color: #8E1F1F;
}

/* ── שביל החזרה ("‹ כל הענפים") — header.css `.crumb` ────────────────── */
.crumb { flex: none; display: flex; align-items: center; gap: 7px; padding: 0 2px; flex-wrap: wrap; }
.crumb__back {
  font-size: 12.5px; color: var(--sh-cap); background: var(--sh-cream); border-radius: 8px; padding: 4px 8px;
  text-decoration: none; min-height: 0; display: inline-flex; align-items: center; position: relative;
}
/* יעד המגע — אותו עיקרון כמו שדה הכובע: מתרחב בלי לשנות את המראה. */
.crumb__back::after { content: ""; position: absolute; inset: -9px 0; }   /* אנכי בלבד — צדדית הייתה גולשת מה-.nav (overflow) */
.crumb__back:hover { color: var(--sh-green-dark); background: var(--sh-mint); }
.crumb__now { font-size: 12.5px; font-weight: 600; color: var(--sh-green-dark); }

/* ── ניווט (header.css `.nav-a` · `.nav-b` · `.grouphead` · `.discrow`) ───────────────────────
 * ⚠️ **אין נקודה לפני פריט** — על 21 שורות היא רעש. ההיררכיה נעשית בהזחה, בקו ובמשקל.
 * הניווט הוא **האזור הגולל** (flex:1 · min-height:0): המותג והשדות למעלה, השכבה הקבועה וכרטיס המשתמש בתחתית
 * — רשימה של 21 שורות אסור שתדחוף את הצ׳אט מהמסך. */
.nav {
  flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 0;
  /* פס גלילה דק — אצל דן ברירת המחדל של הדפדפן, ובדסקטופ היא פס אפור של 15px שיושב על הפריט הפעיל. */
  scrollbar-width: thin; scrollbar-color: #D9D4C4 transparent;
}
.nav__group { display: flex; flex-direction: column; gap: 2px; }
.nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
/* 🔴 01.10 · חריץ הדף בסיידבר (header.js `kdSidebar.extra`; `shell.extra(html)`): כיתוב קבוצה (`.nav__cap`) ושורות — עוגנים
 * לכרטיסים באותו עמוד (`href="#…"`) בקו מנוקד, בדיוק כמו `.is-anchor` של דן ("קישור מול עוגן": עשר שורות באותה צורה
 * משני מקורות שונים). רמת משנה כמו קבוצה בשם — אותם מידות, אותו קו. */
.nav__extra { display: flex; flex-direction: column; gap: 2px; }
.nav__extra[hidden] { display: none; }
.nav__extra .nav__cap {
  margin: 15px 0 4px; padding: 0 12px; font-size: 10px; font-weight: 600; letter-spacing: .13em; color: var(--sh-cap);
}
.nav__extra .nav__link {
  font-size: 14.5px; color: var(--sh-nav-sub); padding: 8px 12px; border-radius: 8px;
  border-start-start-radius: 0; border-end-start-radius: 0;
  margin-inline-start: 14px; border-inline-start: 2px solid var(--sh-rail);
}
.nav__extra a[href^="#"] { border-inline-start-style: dotted; }
.nav__extra .nav__link[aria-current="page"] { background: var(--sh-mint); color: var(--sh-green-dark); font-weight: 600; }
.nav__link {
  display: flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 10px 12px;
  border-radius: 10px; font-size: 15px; color: var(--sh-nav); text-decoration: none;
}
.nav__link:hover { background: var(--sh-hover); color: var(--sh-green); }
.nav__link[aria-current="page"] { background: var(--sh-green); color: #fff; font-weight: 500; }
.nav__link[aria-current="page"]:hover { background: var(--sh-green); color: #fff; }

/* אינדקס הענפים: רשימת יעדים קומפקטית, במקום שמונה קישורי משנה לכל ענף. */
.nav__branchfinder { padding: 12px; border-block-start: 1px solid var(--sh-line-soft); }
.nav__branchfinder label { display: block; margin-block-end: 7px; font-size: var(--fs-th); font-weight: 600; color: var(--sh-cap); }
.nav__branchfinder input {
  display: block; width: 100%; min-height: var(--tap); padding: 8px 11px;
  border: 1px solid var(--sh-line); border-radius: 10px; background: var(--surface);
  font-size: var(--fs-td);
}
.nav__branchcount { margin: 10px 0 5px; font-size: var(--fs-th); color: var(--sh-cap); }
.nav__branchlist { display: grid; gap: 2px; list-style: none; padding: 0; margin: 0; }
.nav__branchlist a {
  display: flex; align-items: center; min-height: var(--tap); padding: 7px 10px;
  border-radius: 8px; color: var(--sh-nav); text-decoration: none; font-size: var(--fs-td);
}
.nav__branchlist a:hover { background: var(--sh-hover); color: var(--sh-green-dark); }
.nav__branchfinder [data-nav-branch-empty] { padding: 12px 0; font-size: var(--fs-th); color: var(--sh-cap); }

/* ── שני משקלים לתג, ולא אחד (header.css `.badge`) ───────────────────────────────────────────────
 * ⚠️ כתום במערכת הזו אומר **חריגה** — ולכן "7 פניות" (מונה) חייב להיראות אחרת מ"3 מסמכים חסרים" (התראה).
 * מונה הוא ברירת המחדל. ⚠️ ובשורה הפעילה — לבן על ירוק, בשני המשקלים. */
.nav__badge {
  margin-inline-start: auto; flex: none; min-width: 0; font-size: 12px; font-weight: 600;
  border-radius: 999px; padding: 1px 8px; color: var(--sh-cap); background: var(--sh-count-bg);
}
.nav__badge--warn { color: var(--sh-alert-ink); background: var(--sh-alert-bg); }
.nav__link[aria-current="page"] .nav__badge, .nav__link[aria-current="page"] .nav__badge--warn {
  color: var(--sh-green-dark); background: #fff;
}

/* ── רמת משנה · הקו האנכי אומר "רמה אחת פנימה" בלי להוסיף עוד טקסט למסך ───────────────────────────
 * ⚠️ הקו על **כל שורה** (כמו אצל דן), והפינות בצדו מיושרות — border-radius על השורה מעגל גם את קצוות ה-border,
 * ושורות עוקבות ציירו סדרה של סוגריים במקום קו רצוף. גם קבוצה בשם (`.nav__grouphead + div`) היא רמת משנה. */
.nav__grouphead + div .nav__link, .nav__sub .disc__head + div .nav__link {
  font-size: 14.5px; color: var(--sh-nav-sub); padding: 8px 12px; border-radius: 8px;
  border-start-start-radius: 0; border-end-start-radius: 0;
  margin-inline-start: 14px; border-inline-start: 2px solid var(--sh-rail);
}
.nav__grouphead + div .nav__link[aria-current="page"], .nav__sub .disc__head + div .nav__link[aria-current="page"] {
  background: var(--sh-mint); color: var(--sh-green-dark); font-weight: 600;
}
.nav__grouphead + div .nav__link:hover, .nav__sub .disc__head + div .nav__link:hover { background: var(--sh-hover); color: var(--sh-green); }
.nav__grouphead + div .nav__link[aria-current="page"]:hover,
.nav__sub .disc__head + div .nav__link[aria-current="page"]:hover { background: var(--sh-mint); color: var(--sh-green-dark); }
.nav__grouphead + div .nav__badge, .nav__sub .disc__head + div .nav__badge { font-size: 12px; }

/* הבעלים (discOwner) והקרט על שורה אחת — "כל הענפים" מעל 16 השמות (header.css `.discrow`). הקרט הוא אח של
 * ה-<a> ולא ילד שלו — <button> בתוך <a> אינו חוקי. */
.nav__sub .disc__head { display: flex; align-items: center; gap: 2px; }
.nav__sub .disc__head .nav__link { flex: 1; min-width: 0; }
.disc {
  flex: none; display: flex; align-items: center; justify-content: center; gap: 5px;
  min-width: var(--tap); min-height: var(--tap); padding: 8px 6px;
  background: none; border: 0; border-radius: 8px; cursor: pointer; color: var(--sh-quiet);
}
.disc:hover { background: var(--sh-hover); }
.disc svg { width: 10px; height: 10px; transition: transform .15s; }
.disc[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ── כותרת קבוצה = כיתוב של הקו (header.css `.grouphead`) ────────────────────────────────────────
 * ⚠️ **אין קיפול לפי כמות** — הכותרת נשארת גם מעל שורה אחת. כשהקבוצה סגורה היא נושאת את מספר הפריטים, ואם
 * יש בה התראה — המספר כתום ("קיפול בולע את התג בשקט"). */
.nav__grouphead {
  position: relative; display: flex; align-items: center; gap: 7px; width: 100%;
  background: none; border: 0; cursor: pointer; padding: 0 12px; margin: 15px 0 4px; text-align: start;
}
/* יעד המגע: 16px טקסט + 28px — הכותרת קטנה בכוונה (כיתוב של קו), והלחיצה לא. */
.nav__grouphead::before { content: ""; position: absolute; inset: -15px 0 -13px; }
.nav__grouphead > span:first-child {
  flex: 1; min-width: 0; font-size: 10px; font-weight: 600; letter-spacing: .13em; color: var(--sh-cap);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav__grouphead:hover > span:first-child { color: var(--sh-green-dark); }
.nav__gcount {
  flex: none; font-size: 10.5px; font-weight: 600; color: var(--sh-cap); background: var(--sh-cream);
  border-radius: 999px; padding: 1px 6px;
}
.nav__gcount--warn { color: var(--sh-alert-ink); background: var(--sh-alert-bg); }
.nav__grouphead svg { width: 10px; height: 10px; color: var(--sh-quiet); flex: none; transition: transform .15s; }
.nav__grouphead[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ── השכבה הקבועה — "לרוחב כל המצבים" (header.css `.layer` · `.lay-a`) ────────────────────────────
 * יושבת מחוץ ל-<nav> הגולל ולכן אינה גוללת איתו: הצ׳אט אינו תלוי בכובע.
 * 🔴 `:empty` לפני הכול — בלעדיו כובע בלי אף פריט קבוע מצייר קו מפריד ו-24px
 * ריפוד על כלום. הקו אומר "יש כאן משהו", וכשאין — הוא משקר. */
.shell__fixed:empty { display: none; }
.shell__fixed {
  flex: none; display: flex; flex-direction: column; gap: 5px;
  border-block-start: 1px solid var(--sh-line-soft); padding-block-start: 9px;
}
.shell__cap { margin: 0; padding: 0 12px 2px; font-size: 10px; font-weight: 600; letter-spacing: .13em; color: var(--sh-cap); }
.shell__fixed .nav__link { gap: 9px; font-size: 14.5px; padding: 9px 12px; color: var(--sh-nav); }
.shell__fixed .nav__link:hover { background: var(--sh-hover); color: var(--sh-green); }
.shell__fixed .nav__link[aria-current="page"] { background: var(--sh-mint); color: var(--sh-green-dark); font-weight: 600; }
.shell__fixed .nav__link[aria-current="page"]:hover { background: var(--sh-mint); color: var(--sh-green-dark); }
/* האייקון היחיד בסיידבר — מותר בדיוק כאן, כי הצ׳אט אינו נתון בטבלה (header.css `.lay-ic`). */
.nav__link--layer svg { width: 17px; height: 17px; flex: none; color: var(--sh-quiet); }
.nav__link--layer:hover svg, .nav__link--layer[aria-current="page"] svg { color: currentColor; }

/* ── הפעמון (header.css "הפעמון") ──────────────────────────────────────────────────────────────────
 * 🔴 **יושב בתוך שדה מצב התצוגה, ולא בפינת המסך.** `.bell-wrap` אינה `position:relative` — הכפתור והפאנל
 * מעוגנים לשדה (`.mode`): הפאנל אח של הכפתור ולכן מקבל את **רוחב השדה**, ולא את 30px של הכפתור (נמדד בדן).
 * 🔴 `.bell` עצמה מצוירת בקו 1.6 ב-currentColor — יורשת את צבע הכפתור, ולכן משתנה עם hover ועם המצב הפתוח
 * בלי אף כלל צבע נוסף. */
.bell-wrap[hidden] { display: none; }
.bell {
  position: absolute; inset-inline-start: 8px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; margin: 0;
  border: 0; border-radius: 9px; background: none; cursor: pointer; color: #3E7C5F; line-height: 0;
  transition: background .12s, color .12s;
}
/* יעד המגע 44px סביב 30px הנראים */
.bell::before { content: ""; position: absolute; inset: -7px; }
.bell:hover { background: #E4EFE8; color: var(--sh-green-dark); }
.bell[aria-expanded="true"] { background: #DCEAE1; color: var(--sh-green-dark); }
.bell svg { width: 17px; height: 17px; display: block; }
/* המונה — שני משקלים כמו תגי הסיידבר, ומאותה סיבה: כתום = חריגה, ירוק כהה = כמה יש. */
.bell__n {
  position: absolute; top: -3px; inset-inline-end: -3px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; color: #fff;
  background: var(--sh-green-dark); box-shadow: 0 0 0 2px var(--sh-field); pointer-events: none;
}
.bell__n:empty { display: none; }
.bell__n--alert { background: var(--sh-alert-ink); }
/* ⚠️ אחרי `.bell__n:empty` ובאותה ספציפיות — הנקודה היא המונה הריק, ולכן היא חייבת לגבור עליו.
 * נקודה דקה כשאין בכובע הזה אבל יש באחר — כדי שהרמז יהיה ניתן לגילוי בכלל. */
.bell__n--hint:empty {
  display: block; top: 2px; inset-inline-end: 3px; min-width: 7px; width: 7px; height: 7px; padding: 0;
  background: var(--sh-alert-ink);
}

/* ── הפאנל (header.css `.bell-panel`) ─────────────────────────────────────────────────────────────── */
.bell__menu { top: calc(100% + 9px); min-width: 250px; padding: 6px; z-index: 45; max-height: calc(100vh - 190px); overflow-y: auto; }
.bell__head { margin: 0; font-size: 10px; font-weight: 600; letter-spacing: .13em; color: var(--sh-cap); padding: 7px 10px 6px; }
.bell__group { display: flex; flex-direction: column; gap: 1px; }
/* ⚠️ **grid ולא flex-column**: הנקודה והטקסט הם שתי עמודות, והטקסט הארוך חייב לגלוש מתחת לעצמו ולא מתחת לנקודה.
 * ⚠️⚠️ **נקודה, ולא פס בקצה** (תיקון של תיקון בדן): `border-inline-start` על קופסה עם radius נצבע כקשת חלקית —
 * נראה כמסגרת שבורה. נקודה אינה יכולה להיראות שבורה בשום רדיוס. */
.bell__item {
  min-height: var(--tap); display: grid; grid-template-columns: 7px 1fr; align-items: start; column-gap: 9px;
  padding: 9px 10px; border-radius: 9px; text-decoration: none; color: var(--sh-ink); font-size: 13.5px; line-height: 1.4;
}
.bell__item:hover { background: var(--sh-cream); color: var(--sh-ink); }
.bell__item:focus-visible { outline-offset: -2px; }
.bell__item-dot { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: var(--sh-quiet); }
.bell__item-dot--alert { background: var(--sh-alert-ink); }
.bell__item--alert .bell__txt { font-weight: 600; }
.bell__txt { min-width: 0; display: block; }
.bell__scope { display: block; font-size: 11.5px; color: var(--sh-cap); margin-top: 1px; font-weight: 400; }
.bell__empty { margin: 0; padding: 9px 10px 11px; font-size: 13px; color: var(--sh-cap); }
/* הרמז לכובעים אחרים — מופרד בקו, כי הוא אומר משהו על **מקום אחר** (header.css `.bell-other`/`.bell-orow`) */
.bell__hint {
  margin-block-start: 5px; padding-block-start: 5px; border-block-start: 1px solid var(--sh-line-soft);
  display: flex; flex-direction: column; gap: 1px;
}
.bell__hintline {
  width: 100%; min-height: var(--tap); display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border: 0; border-radius: 9px; background: none; cursor: pointer; text-align: start;
  color: var(--sh-cap); font-size: 12.5px;
}
.bell__hintline:hover { background: var(--sh-cream); color: var(--sh-ink); }
.bell__on {
  flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  line-height: 18px; text-align: center; color: var(--sh-alert-ink); background: var(--sh-alert-bg);
}
/* החץ אומר "זה מעביר אותך למקום אחר", וזה מה שמבדיל את השורות האלה מהרשימה שמעליהן. */
.bell__oarr { margin-inline-start: auto; font-size: 12px; color: var(--sh-quiet); }
.bell__hintline:hover .bell__oarr { color: var(--sh-green-dark); }
.bell__fail {
  margin: 5px 0 0; padding: 8px 10px; border-block-start: 1px solid var(--sh-line-soft);
  font-size: 12px; color: var(--sh-cap); line-height: 1.4;
}
.bell__retry {
  border: 0; background: none; padding: 0; font-size: 12px; font-weight: 600; color: var(--sh-green-dark);
  cursor: pointer; text-decoration: underline; min-height: 0;
}

/* ── כרטיס משתמש — מי אתה, לא איפה אתה (header.css `.me` · `.me-id` · `.av` · `.me-logout`) ─────────────────
 * 🔴 01.10 · **הכרטיס של דן, 1:1**: עיגול + שם + תפקיד, ולצידם כפתור "התנתק" **גלוי** בקצה — לא תפריט שנפתח מהעיגול
 * (הכרעת 23.09 נדחתה בבקשת גיל מ-01.10: "פשוט העתקה ממקום למקום, שיהיה אחד לאחד"). המידות, הצבעים והמשקלים — של דן.
 * "החשבון שלי" (שאינו בכרטיס שלה) הוא הקישור שעוטף את העיגול והשם — `.shell__me`.
 * ⚠️ יעדי המגע: הקישור והכפתור נמוכים מ-44px בפני עצמם (34 · 26) — `::before` מתרחב אנכית אל גובה הכרטיס (46), בלי
 * לשנות את המראה; אופקית הוא נעצר בקצה (הכרטיס אינו גולל, אבל ה-`overflow` של הסיידבר כן). */
.shell__user { flex: none; margin-block-start: 3px; padding: 0; border: 0; }
.shell__card {
  display: flex; align-items: center; gap: 8px; background: var(--sh-card); border-radius: 12px;
  padding-block: 6px; padding-inline: 8px 10px;
}
.shell__me {
  position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  text-decoration: none; color: var(--sh-ink);
}
.shell__me::before { content: ""; position: absolute; inset-block: -6px; inset-inline: 0; }
.shell__me:hover .shell__name { color: var(--sh-green-dark); }
/* עיגול ראשי התיבות. הטקסט לבן על הירוק: 5.34:1. */
.shell__av {
  width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--sh-green); color: #fff;
  display: grid; place-items: center; font-size: 13.5px; font-weight: 600;
  overflow: hidden;                      /* התמונה נחתכת לעיגול, לא גולשת ממנו */
}
/* ⚠️ הרקע הירוק נשאר מתחת לתמונה — תמונה שקופה (PNG) על לבן הייתה נעלמת. */
.shell__av--img { background: var(--sh-green); }
.shell__av img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 🔴 `min-width: 0` על העמודה, ולא רק על השם: בלעדיו התא לא יורד מתחת לרוחב
 * המזערי של תוכנו, ושם ארוך דוחף את הכרטיס מעבר ל-264px (viewport-375). */
.shell__who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.shell__name {
  display: block; font-size: 13.5px; font-weight: 600; color: var(--sh-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* שורת התפקיד — מי אתה, לא איפה אתה. אופציונלית: קיימת רק כשיש ממה לגזור אותה (`chips` או תוויות הכובעים). */
.shell__role {
  display: block; font-size: 12px; color: var(--sh-cap);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shell__role[hidden] { display: none; }
/* "התנתק" — header.css `.me-logout`: 12px · --kd-cap · ריפוד 6/8 · hover בצבע ההתראה על #F4F1E7. */
.shell__logout {
  position: relative; flex: none; font-size: 12px; color: var(--sh-cap); background: none; border: 0;
  padding: 6px 8px; border-radius: 8px; text-decoration: none; cursor: pointer;
}
.shell__logout::before { content: ""; position: absolute; inset-block: -10px; inset-inline: 0; }
.shell__logout:hover { color: var(--sh-alert-ink); background: #F4F1E7; }
/* הקישור המשפטי — הערת שוליים, לא פעולה. ⚠️ block ולא inline: inline היה נותן לרוחב הטקסט לקבוע את שטח
 * הלחיצה, ובעברית זה משתנה עם הניסוח. ⚠️ שורה משלו ו**מחוץ לתפריט**: הצהרת הנגישות חייבת להיות גלויה מכל מסך. */
.shell__legal {
  position: relative; display: block; font-size: 11.5px; color: var(--sh-cap); text-decoration: none;
  padding: 5px 10px 1px; border-radius: 8px; margin-block-start: 0;
}
.shell__legal::after { content: ""; position: absolute; inset: -10px 0; }
.shell__legal:hover { color: var(--sh-green-dark); text-decoration: underline; }

/* ══ הסיידבר על חול — עיצוב A ("AGUR · Sidebar", הגרסה הבהירה) בפלטת המעצבת v1.0 ═══════════════════════════════════════
 * 🔴 גיל, 07.10: "תעשה את מה שעשינו ב-sidebar בפרוד" — הגרסה על חול, עם אייקון בכל שורה, **שאושרה אצלו מקומית ("מעולה")**; היא באה
 * במקום הסיידבר הירוק-ים של דוגמת "בשימוש" שפרוד שעות ספורות קודם ("למה עשית לי עיצוב כזה?"): העמוד נשאר קרם וירוק דן, וסיידבר ירוק-ים כהה
 * לידו נראה כחצי מעבר. 📄 docs/specs/palette-sea-sand.md · הסקיל agur-brand-brief.
 * ⚠️ **כאן `--sh-*` של דן כן מופו מחדש** (בניגוד לגרסת הירוק-ים): בהיר על בהיר, ולכן התפריטים הצפים (בורר מצבים · קהילות · פעמון)
 *    לוקחים את הפלטה בלי כלל נוסף. ⚠️ ואין כאן ערך צבע, גודל גופן או משך גולמיים — הכול טוקן (`ui-tokens-only`).
 * 🔴 רוחב 304px (העיצוב) גם במגירה — היא מוגבלת ל-`max-width: 85vw` ב-820 ומטה; ב-`--shell-w` (264) "אישורים ממתינים" נשבר לשתי שורות. האייקון הוא הילד הראשון בשורה — ולכן `:first-of-type` ולא
 *    `:first-child` בכותרת קבוצה (הכלל של דן, שמשמיט את התווית כשאייקון קודם לה). */
[data-shell] {
  --sb-w: 304px; --sb-item-h: 42px; --sb-sub-h: 38px; --sb-radius: 9px; --sb-gap: 2px;
  --sb-pad-x: 12px; --sb-icon-gap: 12px; --sb-icon: 20px; --sb-subicon: 18px; --sb-rail: 22px; --sb-indent: 30px; --sb-dot: 5px;
  --sb-bg: var(--sand-200); --sb-edge: var(--sand-400); --sb-divider: var(--sand-400); --sb-caption: var(--sand-700);
  --sb-text: var(--sea-ink); --sb-icon-c: var(--teal-600); --sb-section: var(--teal-600);
  --sb-hover: var(--clay-tint-200); --sb-active-bg: var(--teal-600); --sb-active-text: var(--surface);
  --sb-chevron: var(--teal-400);
  --sb-sub-surface: var(--sand-50); --sb-sub-text: var(--sea-ink); --sb-sub-icon: var(--teal-500);
  --sb-sub-hover: var(--clay-tint-50); --sb-sub-active-bg: var(--teal-100); --sb-sub-active-text: var(--teal-700);
  --sb-rail-c: var(--sand-400); --sb-dot-c: var(--teal-400);
  --sb-ws: var(--sand-50); --sb-ws-text: var(--sea-ink); --sb-av-bg: var(--teal-600); --sb-av-ic: var(--surface);
  --sb-opt-hover: var(--clay-tint-50);
  /* ה-tokens של המעטפת עצמה (קרטים, תגים, כרטיס המשתמש, התפריטים הצפים) — אותה פלטה */
  --sh-green: var(--teal-600); --sh-green-dark: var(--teal-700); --sh-green-mid: var(--teal-500); --sh-mint: var(--teal-50);
  --sh-ink: var(--sea-ink); --sh-text: var(--sea-ink); --sh-line: var(--sand-400); --sh-line-soft: var(--sand-300); --sh-rail: var(--sand-400);
  --sh-nav: var(--sea-ink); --sh-nav-sub: var(--sea-ink); --sh-cap: var(--sea-ink); --sh-quiet: var(--sand-700);
  --sh-cream: var(--sand-50); --sh-card: var(--sand-50); --sh-field: var(--sand-100); --sh-field-line: var(--sand-300); --sh-hover: var(--sand-300);
  --sh-count-bg: var(--sand-300);
  background: var(--sb-bg); color: var(--sb-text); border-inline-end-color: var(--sb-edge);
  width: var(--sb-w); padding: 28px 20px 24px; gap: 0; scrollbar-width: thin;
}

/* מותג · שדה מצב התצוגה (גריד: כיתוב מלא-רוחב, מתחתיו אווטאר הכובע + שם/לחצן) */
[data-shell] .shell__brand { margin-block-end: 22px; padding: 0 4px; }
[data-shell] .shell__tenant { color: var(--sb-text); }
[data-shell] .shell__brand .shell__mark { background: var(--sb-ws); color: var(--sb-icon-c); }
[data-shell] .mode {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sb-icon-gap); align-items: center;
  background: var(--sb-ws); border: 0; border-radius: var(--sb-radius); padding: 7px 8px 8px; margin-block-end: 20px;
}
[data-shell] .mode__cap { grid-column: 1 / -1; padding: 0 4px 3px; color: var(--sb-caption); }
[data-shell] .mode__av {
  grid-row: 2; grid-column: 1; display: grid; place-items: center; inline-size: 30px; block-size: 30px; margin-inline-start: 4px;
  border-radius: 50%; background: var(--sb-av-bg); color: var(--sb-av-ic);
}
[data-shell] .mode__av .nav__ic { inline-size: var(--sb-subicon); block-size: var(--sb-subicon); color: var(--sb-av-ic); }
[data-shell] .mode__btn, [data-shell] .mode__static {
  grid-row: 2; grid-column: 2; min-height: 38px; padding: 0 4px; font-size: var(--fs-small); font-weight: 600; color: var(--sb-ws-text);
  border-radius: var(--sb-radius);
}
[data-shell] .mode__btn svg { width: 16px; height: 16px; color: var(--sb-chevron); }
[data-shell] .mode__cur { flex: 1; }
[data-shell] .mode__menu { top: calc(100% + 6px); background: var(--sb-ws); border-radius: 12px; padding: 6px; gap: var(--sb-gap); }
[data-shell] .mode__item { min-height: 40px; gap: var(--sb-icon-gap); padding: 0 8px; font-size: var(--fs-small); font-weight: 500; color: var(--sb-text); }
[data-shell] .mode__item .nav__ic { inline-size: var(--sb-subicon); block-size: var(--sb-subicon); color: var(--sb-sub-icon); flex: none; }
[data-shell] .mode__item:hover { background: var(--sb-opt-hover); color: var(--clay-dark); }
[data-shell] .mode__item:hover .nav__ic { color: var(--clay); }
[data-shell] .mode__item[aria-current="true"], [data-shell] .mode__item[aria-current="true"]:hover { background: var(--sb-active-bg); color: var(--sb-active-text); font-weight: 700; }
[data-shell] .mode__item[aria-current="true"] .nav__ic { color: var(--sb-active-text); }
[data-shell] .bell { color: var(--teal-600); }
[data-shell] .bell:hover, [data-shell] .bell[aria-expanded="true"] { background: var(--sb-hover); color: var(--clay-dark); }
[data-shell] .bell__n { box-shadow: 0 0 0 2px var(--sb-ws); }

/* הניווט: קו מפריד מעל, שורות בגובה קבוע, אייקון בכל שורה (teal-600), נבחרת = מילוי teal-600 מלא */
[data-shell] .nav { gap: var(--sb-gap); margin-inline: -4px; padding-inline: 4px; padding-block-start: 20px; position: relative; }
[data-shell] .nav::before { content: ""; position: absolute; inset-inline: 4px; inset-block-start: 0; border-block-start: 1px solid var(--sb-divider); }
[data-shell] .nav__group, [data-shell] .nav__list { gap: var(--sb-gap); }
[data-shell] .nav__link, [data-shell] .nav__grouphead {
  position: relative; display: flex; align-items: center; gap: var(--sb-icon-gap); min-height: var(--sb-item-h); padding: 0 var(--sb-pad-x); margin: 0;
  border-radius: var(--sb-radius); font-size: var(--fs-body); font-weight: 500; color: var(--sb-text); text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
[data-shell] .nav__link .nav__ic, [data-shell] .nav__grouphead .nav__ic { inline-size: var(--sb-icon); block-size: var(--sb-icon); flex: none; color: var(--sb-icon-c); }
[data-shell] .nav__link:hover, [data-shell] .nav__grouphead:hover { background: var(--sb-hover); color: var(--clay-dark); }
[data-shell] .nav__link:hover .nav__ic, [data-shell] .nav__grouphead:hover .nav__ic { color: var(--clay); }
[data-shell] .nav__link[aria-current="page"], [data-shell] .nav__link[aria-current="page"]:hover { background: var(--sb-active-bg); color: var(--sb-active-text); font-weight: 700; }
[data-shell] .nav__link[aria-current="page"] .nav__ic { color: var(--sb-active-text); }
[data-shell] .nav__link[aria-current="page"] .nav__badge, [data-shell] .nav__link[aria-current="page"] .nav__badge--warn { color: var(--teal-600); background: var(--sand-50); }

/* כותרת קבוצה = שורה בעלת אייקון, מודגשת, ב-teal-600 */
[data-shell] .nav__grouphead { width: 100%; background: none; border: 0; cursor: pointer; color: var(--sb-section); font-weight: 700; text-align: start; }
[data-shell] .nav__grouphead::before { inset: 0; }
[data-shell] .nav__grouphead > span:first-of-type {
  flex: 1; min-width: 0; font-size: var(--fs-body); font-weight: 700; letter-spacing: 0; color: var(--sb-section); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-shell] .nav__grouphead:hover > span:first-of-type { color: var(--clay-dark); }
[data-shell] .nav__grouphead svg:not(.nav__ic), [data-shell] .disc svg { width: 16px; height: 16px; color: var(--sb-chevron); flex: none; }
[data-shell] .nav__grouphead:hover svg:not(.nav__ic), [data-shell] .disc:hover svg { color: var(--clay); }
[data-shell] .nav__grouphead[aria-expanded="false"] svg:not(.nav__ic), [data-shell] .disc[aria-expanded="false"] svg { transform: rotate(-90deg); }
[data-shell] .nav__grouphead[aria-expanded="true"] svg:not(.nav__ic), [data-shell] .disc[aria-expanded="true"] svg { transform: none; }
[data-shell] .disc { color: var(--sb-chevron); border-radius: var(--sb-radius); }
[data-shell] .disc:hover { background: var(--sb-hover); }

/* רשימת המשנה: משטח sand-50, מסילה ונקודות (העיצוב), אייקון בכל שורה */
[data-shell] .nav__grouphead + div, [data-shell] .disc__head + div {
  position: relative; margin-block-start: var(--sb-gap); padding: 8px 0; padding-inline-end: 4px; border-radius: var(--sb-radius); background: var(--sb-sub-surface);
}
[data-shell] .nav__grouphead + div::before, [data-shell] .disc__head + div::before {
  content: ""; position: absolute; inset-inline-start: var(--sb-rail); inset-block: calc(8px + var(--sb-sub-h) / 2); inline-size: 1px; translate: 50% 0; background: var(--sb-rail-c);
}
[data-shell] .nav__grouphead + div .nav__list > li, [data-shell] .disc__head + div .nav__list > li { position: relative; }
[data-shell] .nav__grouphead + div .nav__list > li::before, [data-shell] .disc__head + div .nav__list > li::before {
  content: ""; position: absolute; inset-inline-start: calc(var(--sb-rail) - var(--sb-dot) / 2 + .5px); inset-block-start: 50%; inline-size: var(--sb-dot); block-size: var(--sb-dot);
  translate: 0 -50%; border-radius: 50%; background: var(--sb-dot-c); z-index: 1;
}
[data-shell] .nav__grouphead + div .nav__link, [data-shell] .disc__head + div .nav__link {
  min-height: var(--sb-sub-h); margin-inline-start: calc(var(--sb-rail) + var(--sb-indent) - var(--sb-pad-x)); padding: 0 var(--sb-pad-x);
  border: 0; border-radius: var(--sb-radius); font-size: var(--fs-small); font-weight: 500; color: var(--sb-sub-text);
}
[data-shell] .nav__grouphead + div .nav__link .nav__ic, [data-shell] .disc__head + div .nav__link .nav__ic { inline-size: var(--sb-subicon); block-size: var(--sb-subicon); color: var(--sb-sub-icon); }
[data-shell] .nav__grouphead + div .nav__link:hover, [data-shell] .disc__head + div .nav__link:hover { background: var(--sb-sub-hover); color: var(--clay-dark); }
[data-shell] .nav__grouphead + div .nav__link:hover .nav__ic, [data-shell] .disc__head + div .nav__link:hover .nav__ic { color: var(--clay); }
[data-shell] .nav__grouphead + div .nav__link[aria-current="page"], [data-shell] .disc__head + div .nav__link[aria-current="page"],
[data-shell] .nav__grouphead + div .nav__link[aria-current="page"]:hover, [data-shell] .disc__head + div .nav__link[aria-current="page"]:hover {
  background: var(--sb-sub-active-bg); color: var(--sb-sub-active-text); font-weight: 700;
}
[data-shell] .nav__grouphead + div .nav__link[aria-current="page"] .nav__ic, [data-shell] .disc__head + div .nav__link[aria-current="page"] .nav__ic { color: var(--sb-sub-active-text); }
[data-shell] .nav__sub .disc__head { gap: 2px; }

/* השכבה הקבועה (הצ׳אט) · כרטיס המשתמש · "התנתק" */
[data-shell] .shell__fixed { border-block-start-color: var(--sb-divider); }
[data-shell] .nav__link--layer .lay-ic { inline-size: var(--sb-icon); block-size: var(--sb-icon); color: var(--sb-icon-c); }
[data-shell] .shell__card { background: var(--sb-ws); }
[data-shell] .shell__logout:hover { color: var(--clay-dark); background: var(--sand-100); }
[data-shell] .shell__legal:hover { color: var(--clay-dark); }

/* ── אזור התוכן ────────────────────────────────────────────────────── */
.main { flex: 1; min-width: 0; }
.main__inner { max-width: var(--max-w); margin-inline: auto; padding: var(--s6) var(--s5) var(--s8); }
.crumbs { font-size: var(--fs-small); color: var(--muted); margin-block-end: var(--s3); }
.page__head { margin-block-end: var(--s5); }
.page__sub { color: var(--muted); margin-block-start: var(--s2); }
.grid { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
/* 🔴 19.09, נמדד: פריט ב-grid מקבל `min-width: auto`, כלומר **אינו יורד מתחת לרוחב המזערי
 * של תוכנו**. ברוחב 375 העמודה היא 343, והכרטיס — 32 ריפוד ועוד מילה ארוכה שאינה נשברת —
 * דרש 364. התוצאה היא גלישה אופקית של הדף כולו, ולא גלילה בתוך הכרטיס.
 * ⚠️ והיא נמדדה ב-CI בלבד: מאז הסרת Rubik הטיפוגרפיה היא מחסנית המערכת, ורוחב המילה
 * משתנה בין Linux למק — 4px שם, אפס כאן. ⟹ הכלל, ולא המדידה, הוא מה שמגן.
 * `min-width: 0` מחזיר את השליטה לעמודה; `overflow-wrap` מתיר למילה לרדת שורה במקום לדחוף. */
.grid > * { min-width: 0; overflow-wrap: anywhere; }
.grid--full > .card { grid-column: 1 / -1; }

/* ── סרגל ההתקדמות לניווט הרך (§1 · header.css `.kd-progress`) ───────────────────────────────────────
 * נדלק רק אחרי 120ms של המתנה (shell.js `trackLoading`), כדי שהחלפה מהירה לא תהבהב פס בכל לחיצה. ⚠️ בלי
 * אנימציה במי שביקש תנועה מופחתת: פס שנראה קפוא בחצי הוא גרוע מפס דומם. ובזמן ההמתנה — `<main>` מעומעם. */
.progress { position: fixed; inset-block-start: 0; inset-inline: 0; height: 2px; z-index: 60; pointer-events: none; }
.progress > i {
  display: block; height: 100%; width: 100%; background: var(--brand);
  transform: scaleX(0); transform-origin: 100% 50%; opacity: 0;
}
.progress[data-loading="true"] > i { opacity: 1; animation: sh-progress-run 8s cubic-bezier(.15,.85,.3,1) forwards; }
@keyframes sh-progress-run { 0% { transform: scaleX(0); } 12% { transform: scaleX(.34); } 40% { transform: scaleX(.72); } 100% { transform: scaleX(.96); } }
.progress[data-loading="true"] ~ .app .main__inner { opacity: .6; transition: opacity .15s ease; }
@media (prefers-reduced-motion: reduce) {
  .progress[data-loading="true"] > i { animation: none; transform: scaleX(.5); }
  .progress[data-loading="true"] ~ .app .main__inner { transition: none; }
}

/* ══ הבאנרים (§3) — emergency-banner.js · impersonation-banner.js ═══════════════════════════════════
 * 🔴 01.10 · הערכים של דן כמספרים, לא כטוקנים — "משתני --kd-* מוגדרים על aside[data-shell] ואינם חלים כאן, ומשתני
 * --green/--orange מוגדרים בכל דף בנפרד ואינם מובטחים בכולם. הערכים זהים לגוון critical ב-mail-kit.js: מי
 * שקיבל מייל ופותח את האתר רואה את אותו דבר". (כאן הם עדיין על `.banner-slot`, אבל אינם נשענים על דף.)
 * ⚠️ components.css מגדיר את הבסיס (`.banner`, `.banner__tag`…) — כאן רק מה שדן קבעה, בספציפיות זהה וטעינה
 * מאוחרת. חריץ החירום כרטיס **בתוך** שוליי התוכן (כמו `.kd-alertbar` בראש `<main>` של דן); חריץ ההתחזות פס דביק. */

/* ── חירום · כרטיס (header.css `.kd-alert.crit`) ── */
/* 🔴 01.10 · `.kd-alertbar{display:flex;flex-direction:column;gap:12px}` — כמה התרעות פעילות נערמות בעמודה, 12px ביניהן. */
.banner-slot[data-banner="emergency"]:not(:empty) {
  max-width: var(--max-w); margin-inline: auto; width: 100%;
  padding: var(--s5) var(--s5) 0;
  display: flex; flex-direction: column; gap: 12px;
}
.banner--emergency {
  display: flex; flex-direction: column; align-items: stretch; gap: 10px; flex-wrap: nowrap;
  padding: 20px 22px; border-radius: 18px; font-size: inherit; font-weight: 400;
  background: #FBEDEA; color: #6E1C15; border: 2px solid #C4544A; border-inline-start: 7px solid #A3251B;
  box-shadow: 0 2px 4px rgba(110,28,21,.08), 0 18px 44px rgba(110,28,21,.14);
}
.banner__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.banner--emergency .banner__tag {
  border: 0; font-size: 13px; font-weight: 700; border-radius: 999px; padding: 4px 12px;
  background: #A3251B; color: #fff; letter-spacing: .02em;
}
/* ⚠️ opacity .8 על טקסט מוריד ניגודיות; הצבע מעורבב מראש (#6E1C15 על #FBEDEA ≈ 10:1, גם ב-80%). */
.banner--emergency .banner__when { font-size: 13.5px; opacity: .8; font-weight: 400; }
.banner__title { display: block; font-size: 22px; font-weight: 700; line-height: 1.3; color: inherit; overflow-wrap: anywhere; }
/* ⚠️ `overflow-wrap` על הגוף וההוראה: `white-space: pre-wrap` של דן בלי זה מותיר מילה ארוכה (כתובת, מספר) לדחוף את המסך ב-375px. */
.banner__text { margin: 0; font-size: 16px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
/* ההוראה — הבלוק הבולט, מעל הכול: "התרעה שאומרת 'יש אירוע' ולא אומרת מה לעשות היא בהלה, לא מידע". */
.banner__do { background: #fff; border-radius: 12px; padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; }
.banner__ic {
  width: 26px; height: 26px; flex: none; border-radius: 50%; background: #A3251B; color: #fff;
  font-weight: 700; display: grid; place-items: center; font-size: 15px; line-height: 1;
}
.banner__tx { margin: 0; font-size: 16px; line-height: 1.6; white-space: pre-wrap; color: var(--sh-text); min-width: 0; overflow-wrap: anywhere; }
.banner__tx b { display: block; font-size: 13.5px; font-weight: 600; color: var(--sh-cap); margin-bottom: 3px; }
/* הקישור "טלפונים ומקלטים" (שלנו, לא של דן) — פעולה בתחתית הכרטיס, בצבע החירום. */
.banner--emergency .banner__act { align-self: flex-start; color: #6E1C15; border-color: #A3251B; font-size: 14.5px; font-weight: 600; }
.banner--emergency .banner__act:hover { background: rgba(163,37,27,.08); }
.banner--emergency a:focus-visible { outline-color: #A3251B; }

/* ── התחזות · פס דביק (impersonation-banner.js `.kd-imp`) ──
 * ⚠️ `position:sticky` על החריץ ולא על הבאנר (components.css): אלמנט דביק נעצר בגבול ההורה שלו. הבאנר חייב
 * להישאר גלוי בגלילה — מסך ארוך שבו הוא נשאר למעלה הוא מסך שבו "שכחתי שאני מתחזה" חוזר להיות אפשרי. */
.banner--impersonation {
  align-items: center; gap: 12px; flex-wrap: wrap; padding: 11px 18px; font-size: 14.5px; font-weight: 400; line-height: 1.5;
  color: #fff; background: #8A4B12; box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
/* ⚠️ act_as בצבע אחר: קריאה בלבד וכתיבה-בשם-מישהו הן שתי רמות סיכון. */
.banner--impersonation.banner--act { background: #8E1F1F; }
.banner--impersonation .banner__tag {
  /* ⚠️ .14 ולא .22 של דן: לבן 12.5px על הגוון של .22 מעל #8A4B12 נותן 4.10:1 — מתחת ל-AA. עכשיו 4.95 (view) · 6.54 (act). */
  border: 0; background: rgba(255,255,255,.14); border-radius: 999px; padding: 2px 10px; font-size: 12.5px; font-weight: 600;
}
.banner--impersonation .banner__body { flex: 1 1 200px; min-width: 200px; }
.banner--impersonation b { font-weight: 600; }
.banner__until {
  font-variant-numeric: tabular-nums; opacity: .9; font-size: 13px; flex: none;
}
.banner--impersonation button.banner__act {
  font-size: 14px; font-weight: 600; color: #8A4B12; background: #fff; border: 0; border-radius: 999px; padding: 8px 18px; flex: none;
}
.banner--impersonation button.banner__act:hover { background: #FFF3E4; }
.banner--impersonation button.banner__act:focus-visible { outline-color: #fff; }

/* ── סרגל עליון · מובייל בלבד ─────────────────────────────────────── */
.topbar { display: none; }

/* ── 820: מגירה · header.css "מובייל" ──────────────────────────────────────────────────────────────
 * ⚠️ **סרגל, לא כפתור צף**: שם הכובע והמסך הנוכחי יוצאים החוצה, וההמבורגר יושב בתוכו ולכן אינו מכסה דבר.
 * הסרגל **מעל** המגירה (z 50 מול 45) — ההמבורגר נשאר גלוי, והוא ה"סגירה". לכן ריפוד עליון של 70 במגירה
 * (56 סרגל + 14 אוויר): בלעדיו הלוגו נחתך מאחורי הסרגל. */
@media (max-width: 820px) {
  .topbar {
    display: flex; align-items: center; gap: 11px; height: var(--topbar-h); padding-inline: 12px;
    background: #fff; border-block-end: 1px solid var(--sh-line); position: sticky; top: 0; z-index: 50;
  }
  .topbar__burger {
    position: relative; flex: none; display: flex; width: 40px; height: 40px; align-items: center; justify-content: center;
    background: none; border: 1px solid var(--sh-line); border-radius: 11px; cursor: pointer; padding: 0; color: var(--sh-text);
  }
  .topbar__burger::before { content: ""; position: absolute; inset: -2px; }       /* יעד מגע 44px */
  .topbar__burger svg { width: 18px; height: 18px; }
  /* ── חיווי התראות במובייל ──────────────────────────────────────────────────────────────────────────
   * ⚠️ **הפעמון עצמו אינו נראה במובייל**, כי הוא יושב בסיידבר והסיידבר מוסתר מאחורי ההמבורגר. בלי הנקודה הזו
   * מנהל ענף שפותח את המערכת בטלפון לא רואה שממתינות לו 14 בקשות עד שיפתח את התפריט. מספר ולא נקודה בלבד:
   * "יש משהו" ו"יש 14" הם שתי החלטות שונות לגבי מתי לפתוח. */
  .topbar__count {
    position: absolute; top: -5px; inset-inline-end: -5px; min-width: 17px; height: 17px; padding: 0 5px;
    border-radius: 999px; font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center;
    color: #fff; background: var(--sh-green-dark); box-shadow: 0 0 0 2px #fff;
  }
  /* ⚠️ **כתום מלא ולא הגוון הרך** — כאן הוא החיווי היחיד בכל המסך, על סרגל לבן. */
  .topbar__count--alert { background: var(--sh-alert-ink); }
  .topbar__count--hint { min-width: 8px; width: 8px; height: 8px; padding: 0; background: var(--sh-alert-ink); top: -2px; inset-inline-end: -2px; }
  .topbar__txt { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
  .topbar__mode { font-size: 10px; font-weight: 600; letter-spacing: .13em; color: var(--sh-cap); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar__page { font-size: 15px; font-weight: 600; color: var(--sh-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app { display: block; }
  [data-shell] {
    position: fixed; inset-block: 0; inset-inline-start: 0; height: auto; align-self: auto; max-width: 85vw; z-index: 45;
    transform: translateX(100%); transition: transform .2s ease; padding-top: 70px;
  }
  /* ⚠️ הצל רק כשהמגירה **פתוחה**: אצל דן הוא על המגירה הסגורה (שמחוץ למסך), והוא נשפך 50px פנימה — פס אפור לאורך
   * הקצה של כל מסך במובייל (נמדד). */
  [data-shell][data-open="true"] { transform: none; box-shadow: 0 20px 50px rgba(16,42,32,.24); }
  .scrim { position: fixed; inset: 0; background: rgba(16,28,20,.35); z-index: 40; border: 0; }
  .scrim[hidden] { display: none; }
  body.nav-open { overflow: hidden; }
  .bell__menu { min-width: 0; }
  .main__inner { padding: var(--s5) var(--s4) var(--s7); }
  .banner-slot[data-banner="emergency"]:not(:empty) { padding: var(--s4) var(--s4) 0; }
}
/* ⚠️ RTL: המגירה נכנסת מימין. translateX(100%) הוא "החוצה" בכיוון ה-inline
 * ולכן נכון בשני הכיוונים — הדפדפן משקף את הציר ב-dir=rtl. */

/* ── 700: באנר חירום צר (header.css `@media (max-width:700px)`) ─────── */
@media (max-width: 700px) {
  .banner--emergency { padding: 16px; border-radius: 14px; }
  .banner__title { font-size: 19px; }
}

/* ── 640: עמודה אחת ────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; }
  .card { padding: var(--s4); border-radius: var(--r-md); }
  :root { --fs-h1: 1.5rem; }
}

/* ── הדפסה: הגרדיאנט אינו מודפס (components.css כבר מסתיר את המעטפת) ── */
@media print { .app { background: none; } }