/* @agur/ui · components — §6, שורת "רכיבים".
 * כל מה שכאן קיים פעם אחת. דף שמגדיר כרטיס משלו — הפרה. */

/* ── כרטיס ─────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s5);
  box-shadow: var(--shadow);
}
.card > header {
  display: flex; align-items: baseline; gap: var(--s3);
  justify-content: space-between;
  margin-block-end: var(--s4);
}
.card > header h2 { font-size: var(--fs-h3); }
.card__link { font-size: var(--fs-small); font-weight: 500; white-space: nowrap; }

/* ── מוני פעולה ───────────────────────────────────────────────────────
 * 🔴 §4: מספר בדף הראשי הוא מונה פריטים שדורשים פעולה, לא מדד.
 * הרכיב נקרא counts ולא kpis בכוונה — שם "KPI" מזמין אחוז גבייה. */
.counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: var(--s3); }
.count {
  background: var(--sand); border-radius: var(--r-md);
  padding: var(--s4); text-align: start; border: 0; width: 100%;
  min-height: var(--tap); cursor: pointer; display: block;
  font: inherit; color: inherit;
}
.count:hover { background: var(--brand-soft); }
.count__n { display: block; font-size: 1.75rem; font-weight: 600; line-height: 1.1; letter-spacing: var(--track-head); }
.count__l { display: block; font-size: var(--fs-small); color: var(--muted); margin-block-start: var(--s1); }
.count--warn .count__n { color: var(--warn); }

/* ── שבב סינון §6 ─────────────────────────────────────────────────────
 * 🔴 <button> עם aria-pressed, לא <a> ולא <div>: זה מצב, לא ניווט. הבחירה
 * הזאת היא מה שנותן לו Tab, Enter וקורא מסך בחינם — ו-ui-keyboard אוכפת אותה.
 * הטבעת מגיעה מ-:focus-visible הגלובלי ב-base.css, לא מכאן. */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  min-height: var(--tap); padding-inline: var(--s4);
  border-radius: var(--r-pill); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: var(--fs-small); cursor: pointer;
}
.chip:hover { border-color: var(--brand); }
.chip[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand); font-weight: 500; }

/* ── מסע §6 · Stepper ────────────────────────────────────────────────
 * 🔴 <ol> ולא <div>: זו רשימה מסודרת, והסדר הוא המידע. הנקודה מעוצבת
 * ו-aria-hidden, והמצב נאמר בטקסט sr-only — צבע לבדו אינו מידע (§8).
 * ⚠️ אנכי ולא אופקי: ארבעה-חמישה שלבים בעברית אינם נכנסים ל-375px לרוחב,
 * וגלילה אופקית היא בדיוק מה ש-ui-viewport מפילה. */
.stepper { list-style: none; margin: 0; padding: 0; }
.step { display: flex; gap: var(--s3); position: relative; padding-block-end: var(--s5); }
.step:last-child { padding-block-end: 0; }
.step__dot {
  flex: 0 0 auto; inline-size: 14px; block-size: 14px; margin-block-start: 4px;
  border-radius: 999px; border: 2px solid var(--line); background: var(--surface);
}
/* הקו המחבר — נעצר בשלב האחרון */
.step:not(:last-child) .step__dot::after {
  content: ""; position: absolute; inset-block-start: 20px; inset-inline-start: 6px;
  inline-size: 2px; block-size: calc(100% - 20px); background: var(--line);
}
.step--done .step__dot { background: var(--brand); border-color: var(--brand); }
.step--current .step__dot { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.step--current .step__label { font-weight: 600; color: var(--brand-ink); }
.step--todo .step__label { color: var(--muted); }
.step__meta { display: block; color: var(--muted); font-size: var(--fs-small); margin-block-start: 2px; }

/* ── כפתורים ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--tap); padding-inline: var(--s5);
  border-radius: var(--r-pill); border: 1px solid transparent;
  font-size: var(--fs-body); font-weight: 500; cursor: pointer;
  text-decoration: none; transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn-solid { background: var(--brand); color: #fff; }
.btn-solid:hover { background: var(--brand-ink); }
.btn-ghost { background: transparent; color: var(--brand-ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--brand-soft); border-color: var(--brand); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── גלולה · תג · שבב ──────────────────────────────────────────────── */
.pill, .tag {
  display: inline-flex; align-items: center; gap: var(--s1);
  border-radius: var(--r-pill); font-size: var(--fs-small); font-weight: 500;
  padding: 2px var(--s3); white-space: nowrap;
}
.pill { background: var(--brand-soft); color: var(--brand-ink); }
.tag  { background: var(--sand); color: var(--muted); }
.pill--warn { background: var(--warn-soft); color: var(--warn); }
.pill--emergency { background: var(--emergency-soft); color: var(--emergency); }

/* ── התראה ─────────────────────────────────────────────────────────── */
.alert {
  display: flex; gap: var(--s3); align-items: flex-start;
  border-radius: var(--r-md); padding: var(--s4);
  background: var(--warn-soft); color: var(--warn);
  border-inline-start: 4px solid currentColor;
  font-size: var(--fs-small);
}
.alert--emergency { background: var(--emergency-soft); color: var(--emergency); }

/* ── שורת פריט · הרכיב שנושא את רוב הדף הראשי ─────────────────────── */
.rows { display: flex; flex-direction: column; }
.row {
  display: flex; gap: var(--s4); align-items: flex-start;
  padding-block: var(--s4); border-block-start: 1px solid var(--line);
  min-height: var(--tap);
}
.rows > .row:first-child { border-block-start: 0; padding-block-start: 0; }
.row__main { flex: 1; min-width: 0; }
.row__title { font-weight: 500; }
.row__meta { color: var(--muted); font-size: var(--fs-small); margin-block-start: 2px; }

/* 🔴 20.09 · גוף ההודעה אינו מטא-נתון. עד היום הוא צויר ב-`.row__meta` — אותה מחלקה
 * בדיוק של שורת "מזכירות · היום" — ולכן נראה כמו חתימה, בצבע מעומעם ובגופן קטן.
 * ⚠️ הפיקסצ׳ר הסתיר את זה: הערכים בו היו שורה אחת (40–72 תווים), בזמן ש**בדן נמדד
 * ממוצע 391 תווים ומרבי 571, ארבע הודעות מתוך ארבע מעל 120** — כלומר פסקה שלמה
 * בצבע של הערת שוליים. הגוף מוצג במלואו, כמו בדן: השורה היא גם הכרטיס, ואין מסך פרטים.
 * ⭐ `overflow-wrap` כי הודעה של קיבוץ נושאת קישורים וכתובות בלי רווחים. */
.row__body {
  margin-block-start: 6px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.row__side { text-align: end; flex-shrink: 0; }
/* ⭐ שורה שכולה קישור — היעד הוא השורה, לא הכותרת בלבד (יעד מגע) */
a.row { text-decoration: none; color: inherit; border-radius: var(--r-sm); }
a.row:hover .row__title { text-decoration: underline; text-underline-offset: 3px; }

/* ── מצב ריק · 🔴 §6: הסבר + פעולה, לא "אין נתונים" ────────────────── */
.empty { text-align: center; padding: var(--s6) var(--s4); color: var(--muted); }
.empty p { margin-block-end: var(--s4); }

/* ── שלד · 🔴 §6: לא "טוען…" (בדן: 59 מופעים) ─────────────────────── */
.skel {
  background: linear-gradient(90deg, var(--sand) 25%, var(--line) 37%, var(--sand) 63%);
  background-size: 400% 100%;
  animation: skel var(--dur-loop) var(--ease) infinite;
  border-radius: var(--r-sm); height: 1em;
}
.skel + .skel { margin-block-start: var(--s3); }
.skel--60 { width: 60%; } .skel--40 { width: 40%; }
@keyframes skel { from { background-position: 100% 0 } to { background-position: 0 0 } }

/* ── באנרים · חירום והתחזות (§3) ──────────────────────────────────────
 * 🔴 החריצים הם ילדים ישירים של `.main` (shell.js) ולא של `<main>` — באנר
 * שיושב בתוך התוכן נמחק בכל ניווט רך, וזו בדיוק הדרך שבה מסך "שוכח" אותו.
 * ⚠️ ו-`sticky` על החריץ ולא על הבאנר: אלמנט דביק נעצר בגבול ההורה שלו,
 * ולכן באנר בתוך עטיפה בגובה עצמו אינו נדבק כלל. */
.banner-slot--sticky { position: sticky; inset-block-start: 0; z-index: 25; }
@media (max-width: 820px) {
  /* מתחת לסרגל העליון (56px, z:30) — לא מעליו ולא מתחתיו בגלילה */
  .banner-slot--sticky { inset-block-start: var(--topbar-h); }
}
.banner {
  padding: var(--s3) var(--s4); font-size: var(--fs-small); font-weight: 500;
  display: flex; gap: var(--s3);
  /* ⚠️ flex-start ולא center: הבאנר הוא שלוש שורות טקסט, ותג שממורכז אנכית
   * מולן נוחת ליד השורה השנייה ונראה כאילו אינו שייך לכותרת. */
  align-items: flex-start;
  /* 🔴 375px: תג + טקסט + פעולה אינם נכנסים בשורה אחת ⟹ עוטפים, ולא גולשים */
  flex-wrap: wrap;
}
.banner__body { flex: 1 1 15rem; min-width: 0; }
.banner__body p { margin: var(--s1) 0 0; }
/* ⚠️ התג בקו ולא ברקע שקוף-למחצה: לבן על כתום מוחלש נמדד 3.7:1 — מתחת ל-AA. */
.banner__tag {
  border: 1px solid currentColor; border-radius: var(--r-pill);
  padding: 2px var(--s2); font-weight: 600; white-space: nowrap; flex: none;
}
.banner__when { font-weight: 400; }
.banner a { color: inherit; font-weight: 600; }
.banner__act {
  min-height: var(--tap); display: inline-flex; align-items: center;   /* יעד מגע 44px */
  border: 1px solid currentColor; border-radius: var(--r-pill);
  padding-inline: var(--s4); text-decoration: none; flex: none;
}
.banner__act:hover { background: rgba(255, 255, 255, .15); }
/* טבעת מיקוד ירוקה על אדום אינה נראית — על הבאנר היא לבנה */
.banner a:focus-visible { outline-color: #fff; }
/* 🔴 22.09 · A48 — `.banner__act` על `<button>` (החלפה/יציאה, banner--impersonation):
 * `.banner a` מעלה אינו חל על button — כאן ההשלמה, בלי לגעת בכלל הקיים. תוספתי בלבד. */
.banner button.banner__act { font: inherit; color: inherit; background: transparent; cursor: pointer; }
.banner button.banner__act:focus-visible { outline-color: #fff; }
.banner--emergency { background: var(--emergency); color: #fff; }
/* 🔴 22.09 · A48 — הבאנר עדיין אינו ניתן ל**סגירה** (הסתרה בלי לצאת מההתחזות) — במכוון.
 * שני הכפתורים שיש בו ("החלפה"/"יציאה") **מסיימים** את ההתחזות בפועל, לא מסתירים את הבאנר. */
.banner--impersonation { background: var(--warn); color: #fff; }

/* ── טבלת נתונים · §6 ───────────────────────────────────────────────
 * 🔴 טבלה ולא רשימת כרטיסים: המסך הזה הוא **השוואה בין ענפים** — העין
 * סורקת עמודה, לא שורה. כרטיסים הורסים בדיוק את זה.
 * 🔴 ומתחת ל-820px היא כן נעשית כרטיסים, כי שבע עמודות ב-375px הן גלילה
 * אופקית — וגלילה אופקית בטבלה היא איבוד ההקשר של העמודה.
 * ⚠️ `tbody tr { display: block }` גובר על `[hidden]` של הדפדפן — בדיוק
 * הבאג שנמדד ב-.rows ב-18.09. מה שמגן הוא `[hidden]{display:none
 * !important}` ב-base.css; בלעדיו כל סינון כאן היה מפסיק להסתיר, בשקט.
 * ⚠️ תא השם **אינו** מקבל תווית בתצוגת הכרטיס — הוא כותרת הכרטיס. */
.table { width: 100%; border-collapse: collapse; }
.table caption { text-align: start; }
.table th, .table td { text-align: start; padding: var(--s3) var(--s2); vertical-align: top; }
.table thead th {
  font-size: var(--fs-small); font-weight: 500; color: var(--muted);
  border-block-end: 1px solid var(--line); white-space: nowrap;
}
.table tbody tr { border-block-start: 1px solid var(--line); }
.table tbody tr:first-child { border-block-start: 0; }
.table__name { font-weight: 500; }
.table__sub { display: block; color: var(--muted); font-size: var(--fs-small); margin-block-start: 2px; }
/* מספר: אפס הוא ספרה חיוורת ואינו קישור — אין לאן ללכת */
.table__n { font-weight: 600; font-variant-numeric: tabular-nums; }
.table__n--zero { color: var(--muted); font-weight: 400; }
.table__n--warn { color: var(--warn); }
.table__none { color: var(--muted); }

/* פס ניצול — 🔴 §8: הצבע אינו המידע. האחוז כתוב לידו תמיד. */
.bar { display: block; block-size: 6px; inline-size: 100%; max-inline-size: 120px;
       background: var(--line); border-radius: 999px; overflow: hidden; margin-block-start: 4px; }
.bar__fill { display: block; block-size: 100%; background: var(--brand); }
.bar__fill--over { background: var(--warn); }

@media (max-width: 820px) {
  .table thead { position: absolute; inline-size: 1px; block-size: 1px;
                 overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .table tbody tr { display: block; padding-block: var(--s3); }
  /* 🔴 grid ולא flex: תא יכול לשאת כמה חלקים (אחוז · פס · סכום), ו-flex
   * מסדר אותם **בשורה** ⟹ "₪121,400 מתוך" נשבר באמצע המשפט. ב-grid התווית
   * נשארת בעמודה שלה והערכים נערמים בשלהם. */
  .table tbody td { display: grid; grid-template-columns: max-content 1fr;
                    gap: 0 var(--s3); align-items: baseline; padding: 3px 0; }
  .table tbody td[data-label]::before {
    content: attr(data-label); grid-column: 1; grid-row: 1;
    color: var(--muted); font-size: var(--fs-small);
  }
  .table tbody td > * { grid-column: 2; justify-self: end; text-align: end; }
  .table tbody td .bar { justify-self: end; }
  .table tbody td.table__cell--name { display: block; margin-block-end: var(--s2); }
}

/* מונה בתוך שבב · 🔴 שבב עם 0 מעומעם ואינו נעלם — "0" הוא תשובה */
.chip__n { margin-inline-start: var(--s2); color: var(--muted); font-variant-numeric: tabular-nums; }
/* 🔴 20.09 · היה `opacity: .5`, ו-`ui-a11y` תפסה אותו ברגע שהשבב הראשון הגיע ל-0:
 * `color-contrast serious` על `button[data-filter="external"]`. שקיפות מכפילה את **כל**
 * הצבעים ביחס לרקע, כולל טקסט שכבר היה על הגבול — ⟹ העמעום עובר ל-`--muted`, שהוא
 * 5.2:1 על קרם ונמדד ככזה בטוקנים. ⚠️ וזה לא היה באג של המסך ההוא: כל שבב-אפס בכל
 * מסך נשא אותו, והוא פשוט לא היה קיים עד היום. */
.chip[data-empty="true"] { color: var(--muted); }
.chip[aria-pressed="true"] .chip__n { color: inherit; }

/* ── notice · 18.09 ערב — הודעת מצב. role=status, לא alert: מידע, לא תקלה.
 * ⭐ 19.09 (login-polish) · **ניטרלית כברירת מחדל**, ו-`.notice--warn` למה שדורש זהירות או פעולה.
 *    עד כאן כל הודעה הייתה כתומה — גם "יצאת מהחשבון." — כלומר הצבע של חריגה (tokens.css: "כתום = חריגה")
 *    על מידע רגיל, ואזהרה אמיתית לא נבדלה ממנו. ⚠️ והמשתנה `--space-3` אינו קיים (הסולם הוא `--s1`…`--s8`):
 *    ה-fallback החזיק את הריווח בשקט, כמו ה-hex שבצד כל צבע ו-6px שאינו רדיוס מהסולם. */
.notice {
  margin: 0 0 var(--s3);
  padding: var(--s2) var(--s3);
  border-inline-start: 4px solid var(--brand);
  background: var(--brand-soft);
  color: var(--ink);
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
}
.notice--warn { border-inline-start-color: var(--warn); background: var(--warn-soft); }

/* ── שדה טופס · 19.09 (login-screen) — התווית מעל השדה, תמיד גלויה (§8: placeholder אינו תווית).
 * ⚠️ `.form-input` ולא `.input`: שמונה מסכים כבר נושאים `class="input"` על שדה חיפוש בלי סגנון,
 * ושינוי שלהם בדרך אגב היה נכנס לבדיקות ה-viewport שלהם. */
.form-field { display: grid; gap: var(--s1); margin-block-end: var(--s4); }
.form-field label { font-weight: 500; }
.form-input {
  width: 100%; min-width: 0; min-height: var(--tap);
  padding: var(--s2) var(--s3);
  font-size: var(--fs-input);             /* 17 — מתחת ל-16 ספארי מזייף זום */
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--muted); border-radius: var(--r-field);
}
/* 🔴 19.09 (login-polish) · כתום, לא אדום — tokens.css: `--emergency` "חירום בלבד. לא שגיאת טופס". שגיאה בטופס
 *    היא חריגה, וההודעה שלה (`.alert`) כבר כתומה; שדה אדום ליד הודעה כתומה אמר שני דברים על אותה תקלה.
 *    הגבול `--warn` על לבן 5.5:1 — מעל 3:1 של 1.4.11 (ניגודיות רכיב). */
.form-input[aria-invalid="true"] { border-color: var(--warn); border-width: 2px; }
.form-input:disabled { background: var(--brand-soft); opacity: .7; }

/* ── מסך הכניסה — מחוץ למעטפת: כרטיס אחד במרכז, ברוחב קריא ──────────── */
.login { min-height: 100vh; display: grid; place-items: center; padding: var(--s5) var(--s4); }
.login__card { width: 100%; max-width: 30rem; min-width: 0; }
/* ⭐ 19.09 (login-polish) · סימן המוצר מעל הכותרת — `src/app/icon.svg` (ראו loginBrand ב-login.js). */
.login__mark { display: block; width: 48px; height: 48px; border-radius: var(--r-sm); margin-block-end: var(--s3); }
.login__sub { color: var(--muted); margin-block: var(--s1) var(--s5); }
.login__form { margin-block-end: var(--s5); }
.login__submit { width: 100%; }
/* ⭐ 19.09 · שדה אחד ואז הדרך: "שלחו לי קוד" (ראשי) · "יש לי סיסמה"; הפעולות בשורה, הרמז מתחת לשדה הקוד. */
.login__ways { display: grid; gap: var(--s2); margin-block-end: var(--s4); }
.login__ways .btn { width: 100%; }
.login__actions { display: grid; gap: var(--s2); }
.login__actions .btn { width: 100%; }
.login__hint { color: var(--muted); font-size: var(--fs-small); margin-block: var(--s1) 0; }
.form-input:read-only { background: var(--brand-soft); }
/* ⚠️ 19.09 (login-polish) · הודעת השגיאה ישבה צמודה לכפתור הראשי, בלי רווח. */
.login__form .alert { margin-block-end: var(--s3); }
/* ⭐ 19.09 (login-polish) · "שלחו קוד חדש" ממתין — הזמן שנותר, צמוד לכפתור שהוא מתאר (בתוך רשת הפעולות). */
.login__wait { color: var(--muted); font-size: var(--fs-small); margin: 0; text-align: center; font-variant-numeric: tabular-nums; }
/* ⭐ 19.09 (login-polish) · "דרכים נוספות" מקופלות (`<details>`): כל שלוש מושבתות, ובנייד הן תפסו כחצי מהכרטיס.
 *    הסיבה ליד כל שיטה נשארת — היא רק מאחורי לחיצה. החץ הוא הסמן המובנה של summary (מקלדת וקורא מסך
 *    מקבלים "מורחב/מכווץ" מהדפדפן), ו-min-height נותן לו יעד מגע של 44px. */
.login__others { border-block-start: 1px solid var(--line); padding-block-start: var(--s2); }
.login__others summary { min-height: var(--tap); padding-block: var(--s2); cursor: pointer; font-weight: 600; }
.login__others summary::marker { color: var(--muted); }
.login__others-note { color: var(--muted); font-weight: 400; font-size: var(--fs-small); }
.login__others[open] .login__methods { margin-block: var(--s2) var(--s3); }
.login__methods { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3); }
.login__methods li { display: grid; gap: var(--s1); }
.login__methods .btn { width: 100%; justify-content: flex-start; }
.login__why { color: var(--muted); font-size: var(--fs-small); }
.login__foot { color: var(--muted); font-size: var(--fs-small); margin-block-start: var(--s4); }
/* ⭐ 30.09 (stage-3 C11) · הרשמת אפליקציית המאמת בתוך שלב הקוד. המפתח הוא 32 תווים רצופים — `overflow-wrap:anywhere`, אחרת הכרטיס גולש ב-375. */
.login__enroll { border-block-start: 1px solid var(--line); padding-block-start: var(--s3); margin-block-end: var(--s4); }
.login__enroll-title { font-size: var(--fs-h3); margin: 0 0 var(--s1); }
.login__enroll > .login__submit, .login__enroll > .alert, .login__enroll > .notice { margin-block-start: var(--s3); }
.login__enroll-list { padding-inline-start: var(--s5); margin-block: var(--s3); display: grid; gap: var(--s3); }
.login__key { display: block; margin-block-start: var(--s1); padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--r-field); background: var(--brand-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-small); letter-spacing: .08em; overflow-wrap: anywhere; user-select: all; }
.login__enroll-link { cursor: pointer; }

/* ── הדפסה · 19.09 — §2 שורה 6 באפיון הממשק ("@media print לכל רשימה"), שהיה 0 מופעים.
 * 🔴 למה זו חבילת העיצוב ולא מסך: ההדפסה נשברת באותם שלושה מקומות בכל מסך —
 *   המעטפת שנדפסת ותופסת עמוד, שורה שנחתכת באמצע בין עמודים, וטבלה שבמובייל
 *   הפכה לכרטיסים ונדפסת כך גם על A4. ⟹ כלל אחד, לכל הרשימות.
 * ⚠️ ומה שזה **אינו**: זו אינה "גרסת הדפסה". הדף מודפס כפי שהוא, בלי הניווט
 *   ובלי הפקדים — פקד על נייר הוא רעש, ו-`.btn` שנדפס נראה כמו כפתור שנשבר. */
@media print {
  /* 🔴 **רוחב הדף הוא רוחב מובייל.** A4 לאורך הוא ~794px (ופחות מזה אחרי שולי ההדפסה),
   * ולכן `@media (max-width: 820px)` **חל בהדפסה** — גם ב-shell.css. ⟹ כל מה שהמגירה
   * מפעילה שם חוזר לחיים על הנייר, וזה מה שהבלוק הזה מבטל. 19.09, סקירה: `.topbar`
   * (המבורגר + מונה) לא היה ברשימה — פקד על נייר, בדיוק מה שהכותרת כאן מבטיחה שלא יקרה.
   * ⚠️ **נגזר מהקוד (ספציפיות וסדר טעינה), לא מהדפסה אמיתית** — אין בריפו בדיקה למדיה
   *   print, ולכן זו קריאה של המפל ולא מדידה. מי שמוסיף בדיקה כזו — כאן היא נבדקת. */
  [data-shell], .topbar, .scrim, .banner-slot, .banner, .progress,
  .chips, .btn, .skel { display: none !important; }
  /* ⚠️ `body` לפני השם — shell.css נטען **אחרי** components.css (index.html), ושם
   * `.app` ו-`.main__inner` מוצהרים באותה ספציפיות בדיוק ⟹ בלי המשקל הזה שתי
   * השורות האלה אינן עושות דבר. נמדד באותה סקירה. */
  body .app { display: block; }
  body .main__inner { max-width: none; padding: 0; }
  body { background: #fff; color: #000; }

  /* 🔴 רשימה אינה נחתכת: שורה, כרטיס ושורת טבלה אינם נשברים בין עמודים. */
  .card, .row, .step, .table tbody tr { break-inside: avoid; page-break-inside: avoid; }
  .card { border: 0; box-shadow: none; padding-inline: 0; }
  .card > header { break-after: avoid; page-break-after: avoid; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }

  /* ⚠️ הכלל של 820px הופך טבלה לכרטיסים — על A4 יש רוחב, והטבלה חוזרת להיות טבלה.
   * 🔴 ושתי שורות כאן אינן קוסמטיקה אלא **ביטול ספציפיות**: `.table tbody td.table__cell--name`
   *   הוא (0,2,2) מול (0,1,2) של `.table tbody td`, ולכן תא השם נשאר `display:block` גם
   *   אחרי האיפוס — ואז הוא נעטף בתא אנונימי והשורה נשברת. ⚠️ וה-`padding: 3px 0` של
   *   תצוגת הכרטיס אינו מאופס מאליו: אפס ריפוד **אופקי** הוא בדיוק "העמודות נדבקות"
   *   שההדפסה אמורה למנוע. ⚠️ שתיהן נגזרו מהמפל 19.09, לא מהדפסה — ראו הערת ה-`.topbar`. */
  .table thead { position: static; inline-size: auto; block-size: auto; clip-path: none; }
  .table tbody tr { display: table-row; }
  .table tbody td { display: table-cell; padding: var(--s3) var(--s2); }
  .table tbody td.table__cell--name { display: table-cell; margin-block-end: 0; }
  .table tbody td[data-label]::before { content: none; }
  .table tbody td > * { text-align: start; }

  /* התראה ומצב — מסגרת ולא רקע: רקע צבעוני נדפס אפור ומעלים את הטקסט. */
  .alert, .notice, .pill, .tag { background: transparent !important; color: inherit !important;
                                 border: 1px solid #000; }
}

/* ══ מדידה — כרטיסי הדשבורד של מנהל הקהילה (20.09) ═══════════════════════════
 * 🔴 **רשימה ולא רשת.** תשעה מעמדות ברשת נשברים לשלוש שורות, ובעברית זה נקרא
 * כטבלה שהתפרקה. הפס אינו חלוקה של שלם אלא **השוואה בין מעמדות** — ולכן שורה
 * לכל אחד, ברוחב מלא. ההערה הזאת היא של דן (`dashboard.html:74`), והיא נכונה.
 * ⚠️ הפסים אינם `<table>`: אין כאן שתי מימדים, יש רשימה עם מידה. */
.meas__big { font-size: 42px; font-weight: 600; color: var(--ink); letter-spacing: -.03em;
             font-variant-numeric: tabular-nums; line-height: 1.05; }
.meas__label { font-size: 15px; color: var(--muted); }
.meas__pill { font-size: 14.5px; font-weight: 500; color: var(--brand); background: var(--mint);
              border-radius: 999px; padding: 4px 11px; }
.meas__head { display: flex; align-items: baseline; gap: var(--s5); flex-wrap: wrap;
              justify-content: space-between; }

.bars { display: flex; flex-direction: column; gap: 2px; margin-block-start: var(--s4); }
.bars__row { display: flex; align-items: center; gap: var(--s3); padding: 3px 4px; border-radius: 8px; }
.bars__nm { inline-size: 150px; flex: none; font-size: 13.5px; color: var(--ink);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars__track { flex: 1; block-size: 10px; background: var(--track); border-radius: 999px; overflow: hidden; }
.bars__fill { display: block; block-size: 100%; border-radius: 999px; background: var(--brand); }
.bars__fill--alt { background: var(--brand-mid); }
/* 🔴 `--muted` ולא `--faint`. הטוקן `--faint` (#8A968F) הוא של דן ומגיע ל-~3.2:1 על לבן —
 * מתחת ל-AA. `ui-a11y` תפסה אותו על הכרטיס ברגע שנכתב. הטוקן נשאר (הוא הפלטה של דן),
 * והשימוש בטקסט קטן עובר ל-`--muted` (5.2:1). */
.bars__v { inline-size: 92px; flex: none; text-align: start; font-size: 12px; color: var(--muted);
           font-variant-numeric: tabular-nums; }

/* אריחי ה-KPI — ארבעה מספרים בשורה, כל אחד עם תווית מעליו. */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
         gap: var(--s3); margin-block-start: var(--s5); }
.tile { background: var(--sand); border-radius: 14px; padding: var(--s4); }
.tile__l { font-size: 12.5px; color: var(--muted); }
.tile__v { font-size: 20px; font-weight: 600; color: var(--ink); margin-block-start: var(--s1);
           font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .bars__nm { inline-size: 104px; }
  .bars__v  { inline-size: 74px; }
  .meas__big { font-size: 34px; }
}

/* ── הגרף המצטבר · "עמידה בתקציב השנתי" (21.09) ─────────────────────────────
 * ⚠️ `.chart` ולא `.bars`: בדן שני הרכיבים חולקים את השם `.bars` (פסי המעמדות
 * האופקיים והעמודות החודשיות האנכיות), וזה עובד שם רק כי הם בשני קבצים. כאן
 * הם בקובץ אחד, ושם משותף היה מייצר בדיוק את סוג הדריסה שקשה לאתר.
 * 🔴 העמודה היא **מצטבר**, ולכן היא לעולם אינה יורדת — חודש בלי הוצאה שומר על
 * הגובה של קודמו. מי שיצייר כאן ערך חודשי יראה גרף שקופץ ומסתובב. */
.chart { display: flex; align-items: flex-end; gap: 6px; block-size: 150px;
         margin-block-start: var(--s4); }
.chart__col { flex: 1; min-inline-size: 0; display: flex; flex-direction: column;
              align-items: center; justify-content: flex-end; gap: var(--s1);
              border-radius: 8px; padding-block: var(--s1); }
.chart__v { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.chart__bar { inline-size: 100%; max-inline-size: 26px; flex: none;
              border-radius: 7px 7px 3px 3px; background: var(--brand-mid); min-block-size: 2px; }
.chart__col--peak .chart__bar { background: var(--brand-dark); }
.chart__col--future .chart__bar { background: var(--sand-orange); }
.chart__col--future .chart__v { color: var(--dim, #A3ACA5); }
.chart__m { font-size: 10.5px; color: var(--muted); }
/* 🔴 העמודה השנייה — הביצוע — יושבת **מאחורי** המתוכנן ולא לצדו: שתי עמודות לחודש
 * על שנים-עשר חודשים הן 24 עמודות ברוחב טלפון, וזה בלתי קריא. הביצוע הוא הרקע. */
.chart__stack { inline-size: 100%; max-inline-size: 26px; position: relative; display: flex;
                flex-direction: column; justify-content: flex-end; }
.chart__actual { position: absolute; inset-inline: 0; inset-block-end: 0;
                 border-radius: 7px 7px 3px 3px; background: var(--brand-soft); }