/* ============================================================
   Booni — הפורמטים הגרפיים של מסך התובנות ופורטל הלקוחות.

   ☠️ קובץ אחד, מקור אמת אחד. הסגנון ישב קודם כמחרוזות בתוך
   מודולי ה-TS, ובאותו רגע שהמסך האמיתי התחיל לצרוך אותם היו
   שני עותקים שמתפצלים בשקט — אחד למעבדה ואחד למוצר.
   ⚠️ נטען כ-<link> גם בסטודיו, גם בדף הציבורי וגם בשרת הבדיקה.

   ⚠️ הכל על טוקני booni-ui.css — נכון בבהיר ובכהה בלי כפילות.
   ⚠️ כל מחלקה נושאת קידומת (rg- od- fn- ym- pk- wr- pt-),
      אחרי שההתנגשות של .note כבר עלתה בטעות פעם אחת.
   ============================================================ */

.rg {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 16px);
  padding: 22px 24px;
  color: var(--ink);
}
.rg-h { font-size: 16px; margin: 0 0 16px; font-weight: 700; }
.rg-body { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.rg-svg { width: 200px; height: 200px; flex: none; }

/*
 * שלושת הגוונים. המדרגה הכהה אינה היפוך של הבהירה אלא נבדקה
 * בנפרד מול המשטח הכהה — היפוך אוטומטי נופל בפס הבהירות.
 */
.rg-s1 { --c: light-dark(#12719B, #2E93C4); }
.rg-s2 { --c: light-dark(#B5761A, #BE8A20); }
.rg-s3 { --c: light-dark(#9A4A6E, #BC6193); }

/* ⚠️ המסלול הריק חייב להיראות — בלעדיו אין הקשר ל-40% */
.rg-track { fill: none; stroke: var(--surface-2); stroke-width: 18; }

.rg-arc {
  fill: none; stroke: var(--c); stroke-width: 18;
  stroke-linecap: round;
  stroke-dasharray: var(--circ);
  stroke-dashoffset: var(--circ);
  animation: rg-fill 1.1s cubic-bezier(.22,.9,.24,1) forwards;
}
/*
 * ההשהיה המדורגת. הטבעות לא מתמלאות יחד — החיצונית מובילה,
 * והעין עוקבת פנימה. זה מה שהופך את זה לתנועה ולא להבהוב.
 */
.rg-g:nth-child(1) .rg-arc { animation-delay: .05s; }
.rg-g:nth-child(2) .rg-arc { animation-delay: .17s; }
.rg-g:nth-child(3) .rg-arc { animation-delay: .29s; }

@keyframes rg-fill { to { stroke-dashoffset: var(--off); } }

/*
 * הסנאפ — הרגע שבו לקוח חתם והטבעת נסגרה.
 * ⚠️ בעובי הקו ולא בזוהר: התעבות קצרה נקראת גם על רקע בהיר,
 * ו-drop-shadow על קרם הוא כתם מטושטש ולא הדגשה.
 * ⚠️ פעם אחת ולא בלולאה — פעימה אינסופית הופכת לרעש תוך דקה.
 */
.rg-done { animation: rg-fill 1.1s cubic-bezier(.22,.9,.24,1) forwards, rg-snap .6s 1.2s ease-out; }
@keyframes rg-snap {
  0%   { stroke-width: 18; }
  40%  { stroke-width: 23; }
  100% { stroke-width: 18; }
}

.rg-key { list-style: none; margin: 0; padding: 0; flex: 1 1 240px; min-width: 220px; }
.rg-key li {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  grid-template-areas: "d l p" ". t p";
  gap: 2px 10px;
  align-items: center;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.rg-key li:first-child { border-top: 0; padding-top: 0; }
.rg-dot { grid-area: d; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
/* ⚠️ הטקסט לובש טוקני טקסט ולא את צבע הסדרה — הנקודה נושאת את הזהות */
.rg-lb { grid-area: l; font-weight: 600; font-size: 14.5px; color: var(--ink); }
.rg-dt { grid-area: t; font-size: 13px; color: var(--muted); }
/* ⚠️ ספרות טבלאיות — אחוזים ברוחב משתנה גורמים לעמודה לרקוד */
.rg-pc {
  grid-area: p; font-size: 21px; font-weight: 800;
  color: var(--ink); font-variant-numeric: tabular-nums; direction: ltr;
}

@media (max-width: 520px) {
  .rg { padding: 18px 16px; }
  .rg-body { gap: 18px; justify-content: center; }
  .rg-svg { width: 168px; height: 168px; }
}

/*
 * מי שביקש פחות תנועה מקבל את הטבעות מלאות מיד — ולא חצי
 * אנימציה. המצב הסופי, בלי המסע אליו.
 */
@media (prefers-reduced-motion: reduce) {
  .rg-arc, .rg-done { animation: none; stroke-dashoffset: var(--off); }
}

.od, .fn, .ym, .pk, .wr {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg, 16px); padding: 20px 22px; color: var(--ink);
}
.od-lb, .fn-h, .ym-h, .pk-h { font-size: 14px; color: var(--muted); margin: 0 0 10px; font-weight: 600; }

/* ── 🔢 המונה ── */
/* ₪ מימין למספר, והשורה נצמדת לימין ככל שאר תוכן הכרטיס.
   ☠️ קודם היא הייתה dir="ltr" ונצמדה לשמאל — המספר נראה יתום
   מול תווית והערה שנצמדו לימין. */
.od-row { display: flex; align-items: baseline; gap: 6px; justify-content: flex-start; }
.od-cells { display: inline-flex; }
.od-d {
  display: inline-block; height: 1.05em; overflow: hidden; line-height: 1.05;
  font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.od-col {
  display: block;
  /* ⚠️ ההשהיה יורדת משמאל — הספרה הגדולה נוחתת ראשונה */
  animation: od-roll 1s cubic-bezier(.2,.85,.25,1) forwards;
  animation-delay: calc(var(--i) * 60ms);
  transform: translateY(0);
}
.od-col > span { display: block; height: 1.05em; }
@keyframes od-roll { to { transform: translateY(calc(var(--d) * -1.05em)); } }
/*
 * ⚠️ הפסיק חייב את אותו גובה ואת אותו line-height כמו הספרה.
 *    בלעדיהם הוא יורש את 1.65 של הגוף, קו הבסיס שלו נופל נמוך
 *    מזה של הספרות, והמספר נקרא כאילו הוא שבור. נמדד 28/08/2026.
 */
.od-sep {
  font-size: 40px; font-weight: 800;
  display: inline-block; height: 1.05em; line-height: 1.05; vertical-align: top;
}
/* 📏 מספר גדול סטטי — אותה מידה ואותו צבע בדיוק כמו הספרות
   המתגלגלות, ולכן גם אותה ‎.od-sx‎ ליחידה.
   ☠️ בלוקים שהראו מספר סטטי הכניסו קודם את כל המחרוזת, כולל ה-₪,
   לתוך ‎.od-sep‎ — שהיא מחלקת **מפריד האלפים** בגודל 40px ובצבע
   הטקסט. התוצאה: ₪ בן 40px וכהה שם, מול 22px ומעומעם במונה.
   שני גדלים ושני צבעים לאותו סימן באותו מסך נראים כמו תקלה.
   נמצא על ידי שי, 28/08/2026. */
.od-big {
  font-size: 40px; font-weight: 800; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
/* ⚠️ בתוך בלוק אחר — בלי מסגרת, רקע וריפוד משלו */
.od-bare { border: 0; padding: 0; background: none; margin-bottom: 14px; }

.od-sx { font-size: 22px; font-weight: 700; color: var(--muted); }
.od-nt { font-size: 13px; color: var(--muted); margin-top: 6px; }

/* ── 🌊 המשפך ──
 *
 * 🔑 **שי (10/09/2026):** *"תקטין את החלון תצוגה הזה … אולי יעזור
 * לשים את המספרים בתוך הצבע עצמו."*
 *
 * ⚠️ **רשת של שתי עמודות ולא שלוש שורות.** התווית עברה לצד הרצועה,
 * המספר נכנס לתוך הצבע, ושורת הנשירה נשארה מתחת — קצרה ומעומעמת.
 * ☠️ **`max-content` על עמודת התווית ולא `auto`**: `auto` נתן לה
 * למתוח את עצמה לפי המילה הארוכה **של שלב אחר**, והרצועות יצאו
 * בשלושה אורכים שונים באותו כרטיס.
 */
/**
 * ☠️ **עמודת התוויות משותפת לכל השלבים — וזה `subgrid`.**
 *
 * 🔑 **שי (11/09/2026, על צילום מסך): *"למה זה לא סימטרי ויפה?"***
 * ☠️ **כל שורה הייתה רשת לעצמה**, ולכן `max-content` נמדד מהתווית
 * של **אותה שורה** בלבד: "נענו" (22px) נתן רצועה של 285px ו"פניות
 * שנכנסו" (74px) נתן 233px. ארבע רצועות בארבעה אורכים, שכל אחת
 * מתחילה במקום אחר — נמדד בדפדפן, בדיוק מה שנראה בצילום.
 *
 * 🔑 **`subgrid` נותן לשורות לרשת את שתי העמודות של `.fn`**, כלומר
 * התווית הארוכה ביותר קובעת לכולן. ⚠️ **ורק הוא** — `display:
 * contents` היה מוותר על המרווח בין שלב לשלב, ורוחב קבוע ב-`ch`
 * היה חותך תווית ארוכה או מבזבז מקום בקצרה.
 */
.fn {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
}
/**
 * ⚠️ **כל ילד שאינו שלב — חוצה את שתי העמודות.**
 * ☠️ `lost` שם מונה בתוך `.fn`, והוא נפל כפריט רשת לעמודת
 * התוויות ומתח אותה לרוחב המספר. תוקן במקור, והכלל כאן הוא
 * הרשת הביטחון לפריט הבא שיתגנב.
 */
.fn > :not(.fn-r) { grid-column: 1 / -1; }
/**
 * 📏 **מרווח זהה בין כל שתי רצועות — גם כשיש טקסט ביניהן.**
 *
 * 🔑 **שי (11/09/2026):** *"תעשה רווחים סימטרים בין העמודות של
 * הגרף, שגם אם יש טקסט בין לבין הוא לא ישבור את הסימטריה."*
 *
 * ☠️ **השלב הראשון אינו נושר משום מקום** — אין לו שורת
 * נשירה, ולכן המרווח אל השלב שמתחתיו היה קטן ב-17px מכל
 * השאר. 🔑 **שורה שנייה בגובה קבוע** קיימת גם כשאין בה כלום,
 * ולכן המרחק מרצועה לרצועה זהה בכל השלבים.
 * ⚠️ **ובלי שינוי ב-HTML** — מסלול מפורש ב-`grid-template-rows`
 * קיים גם בלי פריט בתוכו.
 */
.fn-r {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: subgrid;
  grid-template-rows: auto 18px;
  align-items: center; gap: 1px 10px; margin-bottom: 9px;
}
/**
 * ⚠️ **נפילה לרוחב קבוע בדפדפן בלי `subgrid`.** הוא נתמך מ-2022
 * (Safari 16) ומ-2023 (Chrome 117), אבל מכשיר ישן שיקבל כאן רשת
 * שבורה יראה תווית ורצועה זו על זו — ולכן נפילה מפורשת ולא ויתור.
 */
@supports not (grid-template-columns: subgrid) {
  .fn { display: block; }
  .fn-r { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); }
}
/* ⚠️ התווית מתיישרת על הרצועה עצמה, לא על הצמד רצועה+נשירה */
.fn-lb {
  grid-column: 1; grid-row: 1;
  font-size: 13px; font-weight: 600; color: var(--muted);
  white-space: nowrap;
}
.fn-bar {
  grid-column: 2; grid-row: 1;
  background: var(--surface-2); border-radius: 7px; height: 24px;
  overflow: hidden; position: relative;
}
/* 💱 יחידה לצד מספר בשורה — מעומעמת וקטנה יותר, בדיוק באותו
   יחס כמו ‎.od-sx‎ ליד המספר הגדול. ☠️ בלי זה היו שלושה טיפולים
   שונים ל-₪ באותו מסך: 22px מעומעם, 40px כהה, ו-17px כהה. */
.fn-u { font-size: .72em; font-weight: 700; color: var(--muted); margin-inline-start: 3px; }
.fn-fill {
  display: flex; align-items: center; justify-content: flex-start;
  height: 100%; width: 0; border-radius: 7px;
  padding-inline-start: 8px;
  animation: fn-grow .8s cubic-bezier(.2,.85,.25,1) forwards;
  animation-delay: calc(var(--i) * 90ms);
}
@keyframes fn-grow { to { width: var(--w); } }
/**
 * 🎨 **שלושת הצבעים של המשפך.**
 * ☠️ **כהים בשני המצבים — וזה תנאי**, לא העדפה: המספר
 * שבתוך הרצועה (`.fn-n`) לבן קבוע.
 */
.fn-c1 { background: light-dark(#12719B, #2E93C4); }
.fn-c2 { background: light-dark(#B5761A, #BE8A20); }
.fn-c3 { background: light-dark(#9A4A6E, #BC6193); }
/**
 * 🔢 **המספר בתוך הצבע.**
 * ☠️ **`#fff` מפורש ולא `--surface`**: שלושת הצבעים כהים בשני
 * המצבים (ראו `fn-c1..3`), ולבן הוא היחיד שקריא על כולם. טוקן
 * שמתהפך בין בהיר לכהה היה נותן טקסט כהה על רקע כהה.
 */
.fn-n {
  font-size: 13px; font-weight: 800; color: #fff;
  font-variant-numeric: tabular-nums; line-height: 1;
  white-space: nowrap;
}
/**
 * ☠️ **פס צר מדי — המספר יוצא החוצה** (ראו `FN_INSIDE`).
 * ⚠️ `inset-inline-start: calc(var(--w) + 8px)` — הרצועה מתמלאת
 * מהקצה ההתחלתי, ולכן זו בדיוק הנקודה שאחרי הצבע.
 */
.fn-n.fn-out {
  position: absolute; top: 0; bottom: 0;
  inset-inline-start: calc(var(--w) + 8px);
  display: flex; align-items: center;
  color: var(--ink);
}
.fn-lost {
  grid-column: 2; grid-row: 2; align-self: center;
  font-size: 11.5px; color: var(--muted); line-height: 1.5;
}
/**
 * 📊 **אחוז הסגירה — בכותרת, במקום אריח ברצועת המדדים** (שי).
 * ⚠️ `margin-inline-start: auto` ולא רווח: הכותרת היא `flex`,
 * והאחוז נצמד לקצה השני שלה בכל אורך כותרת.
 */
.fn-h { display: flex; align-items: baseline; gap: 10px; }
.fn-sub {
  margin-inline-start: auto; flex: none;
  font-size: 12.5px; font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* ── 📣 טבלת המקורות ──
 *
 * 🔑 **שי (26/09/2026), מתוך שלוש דוגמאות:** *"ב' טבלה נקייה זה נפלא"*.
 * ☠️ **מה היה:** רצועות משפך ברוחב כסף — וכשהכסף היה 0, 18 רצועות
 * זהות ברוחב המינימום, בשלושה צבעים לפי מיקום, ומסלול ריק לכל הרוחב.
 * ⚠️ **כל עמודה נושאת מידע:** פס דק לכמות, גלולה בעוצמות לאחוז, פס זהב
 * לכסף. ⚠️ **עמודות המספרים ב-`width:1%`** — הן מתכווצות לתוכן, ועמודת
 * הפניות (עם הפס) היא שמקבלת את הרוחב. זה מה שסוגר את "הרווחים הענקיים".
 * ראו `renderSourceTable` ב-`statsviz.ts`. */
.st {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg, 16px); padding: 20px 22px; color: var(--ink);
}
.st-h {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 14px; color: var(--muted); margin: 0 0 10px; font-weight: 600;
}
.st-sub {
  margin-inline-start: auto; flex: none;
  font-size: 12.5px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.st-wrap { overflow-x: auto; }
/* ☠️ `min-width: 0` ו-`letter-spacing` מפורשים: ל-`insights.html` יש כללי
   `table`/`th` גלובליים לטבלה הישנה (`min-width: 340px`), והם נדבקו לכאן —
   נמדד ב-375: טבלה של 340 בתוך 329, גלילה אופקית בתוך הכרטיס */
.st-t { width: 100%; min-width: 0; border-collapse: collapse; font-size: 14px; }
.st-t th {
  font-size: 11.5px; font-weight: 600; color: var(--muted); text-align: start;
  padding: 0 10px 8px; border-bottom: 1px solid var(--line); white-space: nowrap;
  letter-spacing: normal;
}
.st-t td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.st-t tbody tr:nth-child(odd) td { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.st-t tbody tr:last-child td { border-bottom: 0; }
.st-t .st-rk {
  width: 1%; padding-inline-end: 0; color: var(--muted); font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.st-nm { font-weight: 600; white-space: nowrap; width: 1%; }
.st-ld { width: 40%; }
.st-lw { display: flex; align-items: center; gap: 8px; }
.st-lw b { min-width: 2.2em; font-size: 14px; font-variant-numeric: tabular-nums; }
.st-lw b.st-none { color: var(--muted); font-weight: 500; }
/* ⚠️ המסלול הוא מה שנשאר אחרי המספר — ה-100% של הפס נמדד מולו ולא מול התא */
.st-tr { flex: 1 1 auto; min-width: 0; display: block; }
.st-bar {
  display: block; height: 6px; border-radius: 99px; flex: none;
  background: var(--line-strong); opacity: .55;
  width: 0; animation: st-grow .8s cubic-bezier(.2,.85,.25,1) forwards;
  animation-delay: calc(var(--i) * 70ms);
}
@keyframes st-grow { to { width: var(--w); } }
.st-t .st-c { width: 1%; white-space: nowrap; text-align: end; }
/**
 * 🎨 **האחוז בעוצמות של גוון אחד.** ☠️ לא ירוק/אדום: 0% הוא לא "סכנה"
 * אלא מקור שלא מביא — והוא מסגרת בלבד, כדי שהעין תדלג עליו.
 */
.st-pill {
  display: inline-block; min-width: 3.4em; text-align: center;
  font-weight: 800; font-size: 13px; border-radius: 999px; padding: 3px 9px;
  font-variant-numeric: tabular-nums;
}
.st-p3 { background: var(--accent); color: var(--accent-ink); }
.st-p2 { background: color-mix(in srgb, var(--accent) 45%, var(--surface)); color: var(--ink); }
.st-p1 { background: var(--accent-soft); color: var(--ink); }
.st-p0 { background: transparent; color: var(--muted); font-weight: 600; box-shadow: inset 0 0 0 1px var(--line); }
.st-na { background: transparent; color: var(--muted); font-weight: 500; }
/* 💰 הכסף — ופס זהב מאחוריו, יחסי למקור החזק */
.st-m {
  position: relative; display: inline-block; min-width: 7.5em;
  text-align: end; font-weight: 800; font-variant-numeric: tabular-nums;
}
.st-m::before {
  content: ''; position: absolute; inset-block: -3px; inset-inline-end: 0;
  width: var(--m, 0); border-radius: 5px; z-index: 0;
  background: color-mix(in srgb, var(--gold) 18%, transparent);
}
.st-m > span { position: relative; z-index: 1; padding-inline: 6px; }
.st-m.st-0 { font-weight: 500; color: var(--muted); }
.st-u { font-size: .75em; font-weight: 700; color: var(--muted); margin-inline-start: 3px; }
.st-top td { font-size: 15px; }
/* 📥 המקורות הקטנים — שורה אחת שנפתחת. ⚠️ `<details>`: בלי JavaScript */
.st-tail { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 10px; }
.st-tail summary {
  cursor: pointer; font-size: 13px; color: var(--muted); font-weight: 600;
  list-style: none; display: flex; align-items: center; gap: 6px;
}
.st-tail summary::-webkit-details-marker { display: none; }
.st-tail summary::before {
  content: '+'; display: inline-grid; place-items: center; width: 18px; height: 18px;
  border-radius: 50%; background: var(--surface-2); color: var(--ink);
  font-weight: 800; font-size: 13px; flex: none;
}
.st-tail[open] summary::before { content: '−'; }
.st-tail summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.st-tail ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.st-tail li { font-size: 12.5px; background: var(--surface-2); border-radius: 999px; padding: 4px 10px; }
.st-tail li b { font-variant-numeric: tabular-nums; margin-inline-start: 5px; }
/* 📱 בטלפון: בלי מספר הדירוג ובלי הפס הדק — ארבע עמודות נכנסות ב-317px.
   ☠️ **והשם נשבר לשתי שורות.** נמדד ב-375: "המלצה מספק אחר" ב-nowrap
   תפס 128px, והטבלה יצאה 340 בתוך 329 — גלילה אופקית בתוך הכרטיס. */
@media (max-width: 600px) {
  .st { padding: 16px 12px; }
  .st-t td, .st-t th { padding-inline: 5px; }
  .st-t .st-rk, .st-tr { display: none; }
  .st-nm { white-space: normal; width: auto; line-height: 1.35; }
  .st-ld { width: 1%; }
  .st-m { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .st-bar { animation: none; width: var(--w); }
}
/* 🎯 שני כרטיסים בבלוק אחד (ערוצים + קמפיינים) — ראו `stack` ב-`vizbuild.ts`. הרווח בין הכרטיסים, והעטיפה לא נמתחת לגובה התא */
.st-stack { display: grid; gap: 14px; }
.viz-cell > .st-stack { height: auto; }
/* 🧩 בתוך הרשת ובדף הבית — אותם כללים שכל בלוק מקבל (ראו `.viz-cell` ו-`.viz-home`) */
.viz-cell > .st { height: 100%; }
.viz-cell .st-h { padding-inline-end: 42px; }
.viz-mini:hover > .st { border-color: var(--accent); }
.viz-home .st { padding: 16px 18px; }
.viz-home .st-h { padding-inline-end: 46px; margin-bottom: 16px; }

/* ── 📅 הקלנדר ── */
/**
 * ☠️ **"רווחים גדולים וזה מכער"** (שי, 27/09/2026, על צילום במחשב).
 * העמודות היו `auto` בלי רוחב, ולכן **נמתחו** על כל רוחב הכרטיס (1,200px)
 * בזמן שהריבועים נשארו 10px — 53 שבועות עם ~12px אוויר בין עמודה לעמודה
 * ו-2px בלבד בין שורה לשורה. לוח שנראה דליל ומפורק.
 * 🔑 **עכשיו הריבוע ממלא את העמודה** (`aspect-ratio: 1`), והרווח זהה
 * לרוחב ולגובה. במחשב הריבועים גדלים (~19px); בטלפון הם לא יורדים
 * מ-10px, והלוח נגלל בתוך הכרטיס — כמו קודם.
 */
/* ⚠️ **אותן עמודות בדיוק לחודשים ולריבועים** (`--wk` = מספר השבועות בשנה,
   מ-`renderYearMap`) — בלי זה שם החודש לא יכול לשבת מעל השבוע שלו. */
.ym-grid {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, auto);
  grid-template-columns: repeat(var(--wk, 53), minmax(10px, 1fr));
  gap: 3px; direction: rtl;
}
/**
 * 📱 **גלילה אחת לחודשים ולריבועים.** `ym-in` ברוחב התוכן (686px בטלפון)
 * ולפחות ברוחב הכרטיס (במחשב) — ושתי השורות נמתחות אליו יחד, ולכן כל
 * חודש יושב מעל השבועות שלו גם כשגוללים.
 */
.ym-scroll { overflow-x: auto; padding-bottom: 4px; }
.ym-in { width: max-content; min-width: 100%; }
/* ⚠️ המידה הקבועה — למקרא ("פחות … יותר"). בתוך הלוח הריבוע ממלא את העמודה */
.ym-c, .ym-x { width: 10px; height: 10px; border-radius: 2.5px; display: block; }
.ym-grid > .ym-c, .ym-grid > .ym-x {
  width: 100%; height: auto; aspect-ratio: 1; border-radius: 3px;
}
.ym-x { visibility: hidden; }
/* סקאלה סדרתית — גוון אחד, בהיר→כהה. לא קשת */
.ym-l0 { background: var(--surface-2); }
.ym-l1 { background: light-dark(#B7D3E2, #23485C); }
.ym-l2 { background: light-dark(#5D9CBD, #2E93C4); }
.ym-l3 { background: light-dark(#12719B, #7FC4E5); }
/* ☠️ היה `flex` + `space-between` — רווח שווה שנסחף עם השנה ("נוב" מעל
   השבוע הראשון של דצמבר). עכשיו כל חודש יושב על העמודות שלו (`grid-column`). */
.ym-months {
  display: grid; grid-template-columns: repeat(var(--wk, 53), minmax(10px, 1fr));
  column-gap: 3px; direction: rtl;
  font-size: 11px; color: var(--muted); margin-bottom: 5px;
}
.ym-months span { white-space: nowrap; overflow: hidden; }
.ym-key { display: flex; align-items: center; gap: 4px; font-size: 11.5px;
  color: var(--muted); margin-top: 10px; direction: rtl; }

/* ── 👁️ מפת החום ── */
.pk-who { font-size: 13.5px; color: var(--muted); margin: -4px 0 12px; }
.pk-live { color: light-dark(#12719B, #2E93C4); font-weight: 600; }
.pk-r { display: grid; grid-template-columns: 1fr 42% auto; gap: 10px;
  align-items: center; padding: 7px 0; }
.pk-nm { font-size: 14px; }
.pk-focus .pk-nm { font-weight: 700; }
.pk-bar { background: var(--surface-2); border-radius: 6px; height: 14px; overflow: hidden; }
.pk-bar i { display: block; height: 100%; width: var(--w); border-radius: 6px; }
.pk-l0 { background: light-dark(#D5E3EB, #2A3A44); }
.pk-l1 { background: light-dark(#9FC3D6, #2B5E77); }
.pk-l2 { background: light-dark(#4A8FB2, #2E93C4); }
.pk-l3 { background: light-dark(#12719B, #7FC4E5); }
.pk-s { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── 👁️📊 איפה הלקוח נתקע בהצעה: לכל הצעה, עם בורר (08/10/2026). ראו `quotereport.ts` ──
   ⚠️ `qa-` ולא `pk-`: `pk-` תפוס גם בחלונית הליד (`leads.html`). הצבעים של `pk-l*`, כדי שזו תהיה אותה מפה. */
.qa-hd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 12px; margin-bottom: 8px; }
.qa-hd .pk-h { margin: 0; }
/* ⚠️ הכוכבית יושבת בפינה (`.viz-pin`) — הבורר לא נכנס מתחתיה */
.viz-cell .qa-hd { padding-inline-end: 34px; }
.viz-cell .qa-hd .pk-h { padding-inline-end: 0; }
.qa-pick { position: relative; flex: 1 1 230px; max-width: 380px; }
.qa-sel { appearance: none; -webkit-appearance: none; width: 100%; min-height: 40px; font: inherit;
  font-size: 14px; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line-strong);
  border-radius: 10px; padding: 8px 12px; padding-inline-end: 34px; cursor: pointer;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.qa-sel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.qa-ar { position: absolute; inset-inline-end: 10px; top: 50%; width: 16px; height: 16px;
  margin-top: -8px; color: var(--muted); pointer-events: none; }
.qa-who { font-size: 13.5px; color: var(--muted); margin: 0 0 12px; }
.qa-who b { color: var(--ink); font-weight: 600; }
.qa-demo { color: var(--gold); font-weight: 600; }
.qa-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
@media (min-width: 760px) { .qa-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.qa-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px;
  border-radius: 12px; background: var(--surface-2); }
.qa-tk { font-size: 12px; color: var(--muted); }
.qa-tv { font-size: 19px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.qa-ts { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-tip { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft);
  color: var(--ink); font-size: 14px; line-height: 1.5; }
.qa-says { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 7px; }
.qa-says li { display: flex; gap: 8px; font-size: 14px; line-height: 1.5; }
.qa-says b { color: var(--ink); font-weight: 700; }
.qa-map { border-top: 1px solid var(--line); padding-top: 12px; }
.qa-maph { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px;
  font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.qa-key { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.qa-kb { display: inline-block; width: 14px; height: 8px; border-radius: 3px; background: light-dark(#4A8FB2, #2E93C4); }
.qa-ka { display: inline-block; width: 2px; height: 12px; border-radius: 1px; background: var(--ink);
  opacity: .7; margin-inline-start: 8px; }
/* ⚠️ עמודת הזמן ברוחב קבוע — עם `auto` כל שורה היא רשת משלה, והפסים זזו בין שורה לשורה ("3 שנ׳" מול "3:02 דק׳") */
.qa-r { display: grid; grid-template-columns: minmax(0, 1fr) 36% 70px; gap: 10px; align-items: center; padding: 6px 0; }
.qa-nm { font-size: 14px; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.qa-hot .qa-nm { font-weight: 700; }
.qa-bar { position: relative; height: 14px; border-radius: 6px; background: var(--surface-2); }
.qa-bar i { display: block; height: 100%; width: var(--w); border-radius: 6px; }
.qa-l0 { background: light-dark(#D5E3EB, #2A3A44); }
.qa-l1 { background: light-dark(#9FC3D6, #2B5E77); }
.qa-l2 { background: light-dark(#4A8FB2, #2E93C4); }
.qa-l3 { background: light-dark(#12719B, #7FC4E5); }
/* 📊 ממוצע התבנית — קו דק על אותו פס, באותה סקאלה */
.qa-avg { position: absolute; top: -3px; bottom: -3px; inset-inline-start: var(--a); width: 2px;
  margin-inline-start: -1px; border-radius: 1px; background: var(--ink); opacity: .7; }
.qa-s { display: flex; flex-direction: column; align-items: flex-end; font-size: 12.5px; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.qa-s small { font-size: 11px; }
/* 🛑 לא הגיעו — פס מקווקו וטקסט חלש; "כאן עצרו" — קו מקווקו מתחת לשורה */
.qa-off .qa-nm, .qa-off .qa-s { opacity: .55; }
.qa-off .qa-bar { background: repeating-linear-gradient(-45deg, var(--surface-2) 0 6px, transparent 6px 10px); }
.qa-stop { border-bottom: 2px dashed var(--danger); padding-bottom: 8px; margin-bottom: 2px; }
.qa-badge { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--danger); background: var(--danger-soft);
  border-radius: 999px; padding: 1px 8px; margin-inline-start: 6px; white-space: nowrap; }
.qa-thin, .qa-note { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.qa-open { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--accent); }
.qa-busy { opacity: .55; pointer-events: none; transition: opacity .15s; }

/* ── 📖 הסיכום ── */
.wr-hd { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.wr-hd h2 { font-size: 17px; margin: 0; }
.wr-p { font-size: 13px; color: var(--muted); }
/* ☠️ flex-wrap ולא grid — אותה החלטה כמו ‎.tiles‎, ומאותה סיבה.
   ‎auto-fit‎ קיפל את העמודות הריקות אבל עדיין קבע **מספר** עמודות:
   ששה כרטיסים ברוחב הזה יצאו 5+1, והאחרון נשאר לבד בשורה.
   ⚠️ ומספר הכרטיסים אינו קבוע — כרטיס בלי בסיס לא מופיע (ראו
   ‎monthCards‎), אז אין מספר עמודות ש"תמיד מתחלק".
   🔑 ‎flex: 1 1 190px‎: השורה האחרונה נמתחת, ואין חור באף מספר.
   נמצא על ידי שי, 28/08/2026. */
.wr-g {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.wr-c {
  flex: 1 1 190px; min-width: 0;
  background: var(--surface-2); border-radius: 12px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 3px;
  opacity: 0; animation: wr-in .5s ease forwards;
  animation-delay: calc(var(--i) * 90ms);
}
@keyframes wr-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wr-e { font-size: 17px; }
.wr-b { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.wr-l { font-size: 14px; line-height: 1.5; }
.wr-s { font-size: 12.5px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .od-col { animation: none; transform: translateY(calc(var(--d) * -1.05em)); }
  .fn-fill { animation: none; width: var(--w); }
  .wr-c { animation: none; opacity: 1; }
}

.pt { max-width: 620px; margin: 0 auto; padding: 34px 18px 50px; color: var(--ink); }
.pt-hd { text-align: center; margin-bottom: 26px; }
.pt-logo { max-width: 150px; max-height: 62px; margin: 0 auto 16px; display: block; }
.pt-biz { font-size: 14px; color: var(--muted); letter-spacing: .05em; margin-bottom: 8px; }
.pt-hd h1 { font-size: clamp(25px, 5.5vw, 34px); margin: 0 0 8px; }
.pt-meta { color: var(--muted); font-size: 15px; }
.pt-cd {
  background: var(--accent-soft); color: var(--accent);
  border-radius: 999px; padding: 2px 10px; font-size: 13px; font-weight: 600;
  margin-inline-start: 6px;
}

.pt-sec { margin-bottom: 20px; }
.pt-sec h2 { font-size: 14px; color: var(--muted); margin: 0 0 9px; font-weight: 600; }

.pt-i {
  display: flex; align-items: center; gap: 13px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 13px; padding: 15px 17px; margin-bottom: 9px;
  text-decoration: none; color: var(--ink);
  transition: border-color .15s, transform .06s;
}
.pt-i:hover { border-color: var(--line-strong); }
.pt-i:active { transform: translateY(1px); }
/*
 * ☠️ **אייקון קו ולא אמוג׳י** (שי, 28/08/2026) — אותה החלטה
 * שכבר חלה על מסכי הסטודיו. הצורות ב-`_lib/porticons.ts`.
 * ⚠️ **`--muted` ולא `--ink`**: האייקון מזהה את השורה, הכותרת
 * היא מה שקוראים. אייקון בעובי הטקסט מושך את העין קודם.
 */
.pt-e { flex: none; display: flex; color: var(--muted); }
.pt-wait .pt-e { color: var(--accent); }
.pt-sec h2 .pt-ic { width: 15px; height: 15px; vertical-align: -2px; }
.pt-v .pt-ic { width: 18px; height: 18px; }
.pt-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pt-t { font-weight: 600; font-size: 15.5px; }
.pt-d { font-size: 13px; color: var(--muted); }

/*
 * מה שממתין ללקוח — מודגש, אבל לא באדום. שום דבר רע לא קרה,
 * ואזהרה על טופס שלא מולא היא בדיוק מה שגורם לסגור את הדף.
 */
.pt-wait { border-color: var(--accent); background: var(--accent-soft); }
.pt-b {
  margin-inline-start: auto; flex: none;
  background: var(--accent); color: var(--accent-ink);
  border-radius: 999px; padding: 3px 11px; font-size: 12.5px; font-weight: 700;
}
.pt-v { margin-inline-start: auto; color: var(--accent); font-size: 17px; }
.pt-done .pt-t { font-weight: 500; }

.pt-tl { background: var(--surface); border: 1px solid var(--line);
  border-radius: 13px; padding: 6px 17px; }
.pt-tr { display: grid; grid-template-columns: 58px 1fr; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--line); }
.pt-tr:first-child { border-top: 0; }
.pt-th { font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums; direction: ltr; text-align: start; }

/*
 * 🤝 **הספקים באירוע** (02/10/2026) — כרטיס אחד, שורה לספק: התפקיד בצד אחד והאינסטגרם בצד השני. 👆 הקישור 44px גובה (דף מהטלפון).
 * ⚠️ `overflow-wrap: anywhere` — ידית של 30 תווים לא מרחיבה את הדף. ☠️ ידית נשארת LTR (`dir` על האלמנט) — בשורה RTL "@name" מתהפך.
 */
.pt-sp { background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: 4px 17px; }
.pt-spr { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 0;
  border-top: 1px solid var(--line); }
.pt-spr:first-child { border-top: 0; }
.pt-spc { color: var(--muted); font-size: 14px; flex: none; }
/* 📞 הכל באותה שורה: שם · @ידית · טלפון/הערה — בצד הנגדי לתפקיד, ונשבר לשורה שנייה רק כשאין רוחב */
.pt-spw { margin-inline-start: auto; min-width: 0; display: flex; flex-wrap: wrap; justify-content: flex-end;
  align-items: center; column-gap: 10px; text-align: end; }
.pt-spv { font-weight: 600; min-width: 0; overflow-wrap: anywhere; color: var(--ink); text-decoration: none; }
/*
 * 👆 **אזור לחיצה 44px בלי להגדיל את השורה:** ריפוד אנכי 11px עם מרווח שלילי שמחזיר את גובה השורה — אותה טכניקה כמו בדף יום האירוע.
 * ☠️ `min-height: 44px` על הקישור עצמו הכפיל כל שורה עם טלפון ל-90px, וזה בדיוק העומס שביקשו להימנע ממנו.
 */
a.pt-spv { color: var(--accent); display: inline-block; padding-block: 11px; margin-block: -11px; line-height: 1.5; }
a.pt-spv:hover { text-decoration: underline; }
.pt-spn { font-size: 13.5px; color: var(--muted); }
.pt-spt { font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; }
a.pt-spt { color: var(--accent); text-decoration: none; display: inline-block; padding-block: 11px; margin-block: -11px; line-height: 1.5; }
a.pt-spt:hover { text-decoration: underline; }

/*
 * 📍 **איך מגיעים** (09/10/2026) — כרטיס אחד, יעד בכל שורה: תווית קטנה, שם/כתובת, ושני כפתורים גדולים. ראו `placesHtml` ב-portal.ts.
 * 🎨 צבעי Waze וגוגל מפות קבועים בשני המצבים (בהיר/כהה) — הם המותג של האפליקציה, לא של העסק. ♿ ניגודיות: כהה על התכלת (Waze),
 * לבן על הירוק הכהה של גוגל (#188038, 4.98:1). ☠️ לא הירוקים של המותג הישן (`brand.test`).
 * 👆 44px גובה, וכל כפתור לפחות 104px — אצבע ברכב. ⚠️ `flex-wrap` — במסך צר מאוד הם יורדים שורה ולא נמעכים.
 */
.pt-nv { background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: 4px 17px; }
.pt-nvp { padding: 13px 0; border-top: 1px solid var(--line); }
.pt-nvp:first-child { border-top: 0; }
.pt-nvl { font-size: 13px; color: var(--muted); }
.pt-nvt { font-weight: 700; font-size: 16px; margin-top: 2px; overflow-wrap: anywhere; }
.pt-nvs { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.pt-nvb { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pt-nvb a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 104px;
  padding: 0 18px; border-radius: 11px; font-weight: 700; font-size: 15px; text-decoration: none; }
.pt-wz { background: #33CCFF; color: #062a36; }
.pt-gm { background: #188038; color: #ffffff; }
.pt-nvb a:hover { filter: brightness(.95); }
.pt-nvb a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.pt-nvn { margin: 8px 2px 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
/* 📍 נקודה שהלקוחות סימנו במפה בטופס (09/10/2026, `EventPlace.exact`) */
.pt-nvx { display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  color: light-dark(#2F6B4F, #9fd4b6); background: light-dark(#EEF6F0, #1f3328); }

/*
 * 🔗 **שיתוף בטוח** (02/10/2026) — כפתור "העתק" עם אייקון, וסימן שאלה קטן לידו שפותח הסבר. 👆 שניהם 44px לפחות.
 * ⚠️ הסימן הוא עיגול קטן אבל אזור הלחיצה שלו 44×44 (ריפוד שקוף) — כפתור של 22px בנייד לא נלחץ.
 */
.pt-shrow { display: flex; align-items: center; gap: 6px; }
.pt-shb { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 20px;
  font: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
  background: var(--surface); color: var(--accent); border: 1.5px solid var(--accent); border-radius: 999px;
  transition: background .15s; }
.pt-shb:hover { background: var(--accent-soft); }
.pt-shb:focus-visible, .pt-qb:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.pt-shb .pt-ic { width: 20px; height: 20px; }
.pt-qb { position: relative; width: 44px; height: 44px; padding: 0; background: transparent; border: 0;
  cursor: pointer; color: var(--muted); font: inherit; font-weight: 700; font-size: 13px; }
.pt-qb::before { content: ''; position: absolute; inset: 11px; border: 1.5px solid var(--line-strong);
  border-radius: 50%; transition: border-color .15s, background .15s; }
.pt-qb[aria-expanded="true"]::before, .pt-qb:hover::before { border-color: var(--accent); background: var(--accent-soft); }
.pt-qb { line-height: 44px; text-align: center; }
.pt-qt { margin: 8px 0 0; padding: 12px 15px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 13px; font-size: 14px; line-height: 1.65; color: var(--muted); }
/* ⚠️ `overflow-wrap: anywhere` — כשההעתקה נכשלת ההודעה מציגה את הקישור, וקישור של 60 תווים לא מרחיב את הדף */
.pt-shm { margin: 8px 2px 0; min-height: 1.4em; font-size: 14px; font-weight: 600; color: var(--accent);
  overflow-wrap: anywhere; }

/* 🔗 דף השיתוף: שורת הסבר קטנה מתחת לכותרת, וכרטיס פרטים כלליים (באותו שפה של "מה מילאתם", בלי קיפול) */
.pt-lim { text-align: center; color: var(--muted); font-size: 13.5px; margin: -8px 0 22px; }
.pt-gen { background: var(--surface); border: 1px solid var(--line); border-radius: 13px; }
.pt-gen dl { display: grid; grid-template-columns: minmax(90px, max-content) 1fr; gap: 8px 14px;
  margin: 0; padding: 14px 17px; font-size: 14.5px; }
.pt-gen dt { color: var(--muted); font-size: 13.5px; }
.pt-gen dd { margin: 0; font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere; }
.pt-gen dd a { color: var(--accent); text-decoration: none; }
@media (max-width: 420px) { .pt-gen dl { grid-template-columns: 1fr; gap: 2px; } .pt-gen dd { margin-bottom: 8px; } }

/*
 * 📄 **הורדת החוזה החתום / כניסה לפגישה** (13/09/2026) — קישור קטן מתחת לפריט,
 * ולא בתוכו: הפריט כולו הוא `<a>`, וקישור מקונן אינו HTML תקין.
 * 👆 44px גובה לחיצה — אותו כלל של כל כפתור בדף שנפתח מטלפון.
 */
.pt-pdf { display: inline-flex; align-items: center; min-height: 44px;
  margin: -4px 17px 8px; color: var(--accent); font-weight: 600; font-size: 14px;
  text-decoration: none; }
.pt-pdf:hover { text-decoration: underline; }

/* 🗓️ הפגישה — כרטיס אחד, באותה מסגרת של הפריטים */
.pt-mt { background: var(--surface); border: 1px solid var(--line);
  border-radius: 13px; padding: 15px 17px; display: grid; gap: 3px; }
.pt-mt .pt-pdf { margin: 4px 0 0; }

/*
 * 📋 **מה מילאתם** — כל טופס מקופל. ⚠️ `summary` ב-44px לחיצה, וה-`dd`
 * שומר שורות (`pre-wrap`) — תשובה ארוכה בטופס נכתבה בשורות, ובשורות היא נקראת.
 */
.pt-fm { background: var(--surface); border: 1px solid var(--line);
  border-radius: 13px; margin-bottom: 9px; }
.pt-fm > summary { display: flex; align-items: center; gap: 10px; min-height: 44px;
  padding: 8px 17px; cursor: pointer; list-style: none; }
.pt-fm > summary::-webkit-details-marker { display: none; }
.pt-fm > summary::after { content: ''; margin-inline-start: auto; width: 8px; height: 8px;
  border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg);
  transition: transform .15s; }
.pt-fm[open] > summary::after { transform: rotate(-135deg); }
.pt-fm dl { display: grid; grid-template-columns: minmax(90px, max-content) 1fr;
  gap: 8px 14px; margin: 0; padding: 4px 17px 14px; font-size: 14.5px; }
.pt-fm dt { color: var(--muted); font-size: 13.5px; }
.pt-fm dd { margin: 0; font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere; }
.pt-fs { padding: 10px 17px 2px; font-size: 12.5px; font-weight: 700; color: var(--accent); }
@media (max-width: 420px) { .pt-fm dl { grid-template-columns: 1fr; gap: 2px; }
  .pt-fm dd { margin-bottom: 8px; } }
@media (prefers-reduced-motion: reduce) { .pt-fm > summary::after { transition: none; } }

.pt-empty { background: var(--surface); border: 1px solid var(--line);
  border-radius: 13px; padding: 20px; text-align: center; }
.pt-empty p { margin: 0 0 6px; }
.pt-sub { color: var(--muted); font-size: 14px; line-height: 1.7; }

.pt-ft { text-align: center; padding-top: 18px; border-top: 1px solid var(--line); }
.pt-fq { color: var(--muted); font-size: 14px; margin-bottom: 6px; }
.pt-ft a { color: var(--accent); margin: 0 8px; text-decoration: none; font-weight: 600; }
.pt-by { text-align: center; color: var(--muted); font-size: 12px; margin-top: 22px; }
.pt-by a { color: var(--muted); }

/* 📴 "אין חיבור — מוצגת הגרסה השמורה" (04/10/2026) — דביק בראש הדף; ⚠️ `hidden` מנצח את `display` שלמעלה. ראו `OFFLINE_JS` ב-portal.ts */
.pt-off { position: sticky; top: 0; z-index: 20; text-align: center; padding: 9px 14px; font-size: 13.5px; font-weight: 600;
  line-height: 1.4; background: var(--accent-soft); color: var(--accent); border-bottom: 1px solid var(--line); }
.pt-off[hidden] { display: none; }

/* 🕐 לוז עם תגים (04/10/2026) — שם מתויג מודגש עם קו מנוקד (מקום: קו מלא); נגיעה פותחת כרטיס פרטים (`TAGS_JS` ב-portal.ts).
   ✏️ "עריכת הלוז" — רק לעסק ולצוות; כל אחד אחר לא רואה אותו. 💍 שורת החופה מודגשת. */
.pt-sh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.pt-sh h2 { margin: 0; }
.pt-edit { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 700;
  color: var(--accent); background: var(--accent-soft); text-decoration: none; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.pt-edit:hover { background: var(--accent); color: var(--accent-ink); }
.pt-core .pt-th { color: var(--ink); }
.pt-core > span:last-child { font-weight: 700; }
/* 📝 הערות לשורה בלוז (09/10/2026, "שעה - אירוע - הערות") — מתחת לאירוע, קטן ועמום; ירידות השורה של המפיק נשמרות */
.pt-tn { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: var(--muted); white-space: pre-line; overflow-wrap: anywhere; }
.pt-core .pt-tn { font-weight: 400; }   /* ⚠️ שורת החופה מודגשת — ההערות שלה לא */
/* 🗂️ **"לוז ראשי | לוז צלם"** (09/10/2026) — כשלוז המפיק ראשי והלוזים לא חופפים בדיוק. ☠️ **בלי JavaScript**: רדיו מוסתר + `:checked ~`.
   ⚠️ הרדיו מוסתר ויזואלית בלבד (לא `display:none`) — נשאר במסלול המקלדת וקורא המסך; הפוקוס מצויר על התווית. 👆 44px גובה. */
.pt-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.pt-tabs > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.pt-tabs > label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 700;
  cursor: pointer; color: var(--muted); background: var(--surface); border: 1px solid var(--line); }
.pt-tabs > input:checked + label { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.pt-tabs > input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; }
.pt-tabs > .pt-tl { flex: 1 0 100%; margin-top: 4px; display: none; }
/* ⚠️ עד 4 כרטיסיות — `MAX_SCHED_TABS` ב-portal.ts */
#pt-sched-1:checked ~ .pt-tab1, #pt-sched-2:checked ~ .pt-tab2,
#pt-sched-3:checked ~ .pt-tab3, #pt-sched-4:checked ~ .pt-tab4 { display: block; }
a.tg, span.tg { font-weight: 800; color: inherit; text-decoration: none; border-bottom: 1.5px dotted var(--accent); }
a.tg { cursor: pointer; padding-block: 8px; margin-block: -8px; }
a.tg.p, span.tg.p { border-bottom-style: solid; }
a.tg:hover { color: var(--accent); }
.pt-vd { width: min(440px, 100vw); max-width: 100vw; margin: auto auto 0; padding: 0; border: 0; border-radius: 20px 20px 0 0; background: var(--surface); color: var(--ink); }
.pt-vd::backdrop { background: rgba(0, 0, 0, .45); }
.pt-vd-h { display: flex; align-items: center; gap: 10px; padding: 16px 18px 6px; }
.pt-vd-h b { font-size: 19px; }
.pt-vd-r { color: var(--muted); font-size: 13.5px; flex: 1; }
.pt-vd-x { margin-inline-start: auto; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); font-size: 28px; line-height: 1; cursor: pointer; }
.pt-vd-rows { padding: 4px 18px 6px; display: grid; gap: 6px; font-size: 15px; }
.pt-vd-rows div { display: flex; gap: 12px; }
.pt-vd-rows span:first-child { color: var(--muted); min-width: 64px; }
.pt-vd-a { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 18px 20px; }
.pt-vd-b { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px; border-radius: 14px; font-weight: 700; font-size: 15px;
  text-decoration: none; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); }
.pt-vd-b.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ── 🔎📇👨‍👩‍👧 דף האירוע: חיפוש, אנשי מפתח, סינון לפי ספק, המשפחה (10/10/2026, `portal.ts`) ── */
/* ⚠️ `hidden` על פריט שיש לו `display` משלו (`.pt-tr` הוא grid) — חייב `!important`, אחרת הסינון לא מסתיר כלום */
.pt-qi[hidden], .pt-qnone, .pt-find[hidden], .pt-fc[hidden], .pt [data-fam-edit][hidden], .pt-fl[hidden], .pt-empty[hidden] { display: none !important; }
/* 🔎 בזמן חיפוש: רק הסקשנים שאפשר לחפש בהם, וכל כרטיסיות הלוז פתוחות עם שם מעל כל אחת */
.pt-finding .pt-sec:not(.pt-qs) { display: none; }
.pt-finding .pt-tabs > input, .pt-finding .pt-tabs > label { display: none; }
.pt-finding .pt-tabs > .pt-tl { display: block; }
.pt-finding .pt-tl[data-tab]::before { content: attr(data-tab); display: block; padding: 8px 0 2px; font-size: 12.5px; font-weight: 700; color: var(--accent); }
.pt-find { position: sticky; top: 8px; z-index: 6; display: flex; align-items: center; gap: 6px; margin: -8px 0 4px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 6px 4px 4px;
  box-shadow: 0 6px 18px -12px rgba(0, 0, 0, .35); }
.pt-find input { flex: 1; min-width: 0; min-height: 44px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px;
  padding: 0 14px; outline: 0; -webkit-appearance: none; appearance: none; }
.pt-find input::-webkit-search-cancel-button { display: none; }
.pt-find:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.pt-findx { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--ink); font-size: 22px;
  line-height: 1; cursor: pointer; }
.pt-findn { margin: 0 4px 12px; min-height: 1.2em; font-size: 13px; font-weight: 600; color: var(--accent); }

/* 📇 אנשי המפתח — סקשן משלהם מעל הלוז, עד 3 בשורה (`--n`). ⚠️ קובייה שנפתחת לכרטיס (`a`) — מלאה בצבע העסק עם "פרטים", כדי שיהיה
   ברור שהיא לחיצה; קובייה רגילה — לבנה, והטלפון למטה הוא קישור החיוג (10/10 ערב, עיצוב "ציר הזמן") */
.pt-kp { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; }
.pt-kc { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 92px; box-sizing: border-box; padding: 11px 9px;
  border-radius: 16px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; min-width: 0; }
a.pt-kc { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
a.pt-kc:active { transform: translateY(1px); }
a.pt-kc:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.pt-kr { font-size: 12px; opacity: .85; }
.pt-kn { font-size: 15px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.pt-kph { margin-top: auto; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: inherit; white-space: nowrap; letter-spacing: -.01em; }
div.pt-kc a.pt-kph { color: var(--accent); text-decoration: none; display: inline-block; padding-block: 9px; margin-block: -9px auto; }
.pt-kmore { margin-top: auto; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 340px) { .pt-kp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ⏱️ "עכשיו" + "מה הבא" בראש הדף, ביום האירוע (`nowBoxHtml`). 🎨 "מה הבא" בחול ובמוקה של המותג (שי: "בצבע חום עדין של המיתוג") —
   הטקסט חום כהה על החול (ניגודיות מעל 7:1), ובמצב כהה חום עמוק עם טקסט חול */
.pt-nowbox { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 10px; }
.pt-nowbox[hidden], .pt-next[hidden] { display: none !important; }
.pt-nowp { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; border-radius: 999px; background: var(--accent-soft); color: var(--accent);
  font-size: 13px; font-weight: 700; }
.pt-nowd { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pt-pulse 1.8s ease-out infinite; }
@keyframes pt-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.pt-next { width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; text-align: start;
  background: light-dark(#F1E8DA, #2E2720); border: 1px solid light-dark(#DCCBB2, #4A3F33); }
.pt-nextt { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 62px; padding: 7px 0; border-radius: 13px;
  background: light-dark(#E7DCC6, #3A3128); }
.pt-nextt span { font-size: 11.5px; font-weight: 700; color: light-dark(#6B5640, #C9B195); }
.pt-nextt b { font-size: 18px; font-weight: 800; color: light-dark(#4E3D2B, #ECDCC4); font-variant-numeric: tabular-nums; }
.pt-nextx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pt-nextx b { font-size: 15.5px; font-weight: 800; color: light-dark(#3E3124, #F1E4CF); overflow-wrap: anywhere; }
.pt-nextx span { font-size: 13px; color: light-dark(#6B5640, #C9B195); }
@media (prefers-reduced-motion: reduce) { .pt-nowd { animation: none; } }

/* 🔎 שבבי הסינון לפי ספק — גלילה אופקית, "הכל" ראשון. 👆 40px גובה */
.pt-fc { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 10px; padding-bottom: 2px; scrollbar-width: none; }
.pt-fc::-webkit-scrollbar { display: none; }
.pt-fcb { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 14px; border-radius: 999px; font: inherit;
  font-size: 13.5px; font-weight: 700; color: var(--ink); background: var(--surface); border: 1px solid var(--line); cursor: pointer; white-space: nowrap; }
.pt-fcb span { font-weight: 500; color: var(--muted); }
.pt-fcb small { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.pt-fcb[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pt-fcb[aria-pressed="true"] span, .pt-fcb[aria-pressed="true"] small { color: inherit; opacity: .85; }
.pt-fcb:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.pt-fcp { border-style: dashed; }
.pt-fcn { margin: 6px 4px 0; min-height: 1.2em; font-size: 13px; color: var(--muted); }
.pt-fcn:empty { display: none; }
/* 👥 מתחת לשורה: הספקים שהשורה נוגעת להם ושלא כתובים בה — בצבע ההדגשה (10/10 ערב, "הלוז של מרכז פיקוד") */
.pt-rl { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--accent); }
.pt-rl a.tg, .pt-rl span.tg { font-weight: 600; color: inherit; border-bottom-width: 1px; }
/* ⏱️ ביום האירוע: מה שהסתיים דהוי, והשורה של עכשיו מודגשת (השעה בצבע הטקסט). הגלולה "עכשיו" עברה לראש הדף (`.pt-nowbox`) */
.pt-tr.pt-past { opacity: .5; }
.pt-tr.pt-now > span:last-child { font-weight: 800; }
.pt-tr.pt-now .pt-th { color: var(--ink); }
/* 🎨 הלוז בעיצוב "מרכז פיקוד" (שי בחר, 10/10 ערב): כרטיס לבן אחד, שורה לכל שלב — שעה בעמודה צרה, הטקסט על קו הבסיס שלה */
.pt-tl { border-radius: 18px; padding: 2px 14px; }
.pt-tr { grid-template-columns: 46px 1fr; align-items: baseline; min-height: 46px; box-sizing: border-box; }
.pt-th { font-weight: 800; }
.pt-docsub { margin: -4px 2px 10px; font-size: 13px; color: var(--muted); }

/* 🏠📍 איך מגיעים — כרטיס לכל מקום: התארגנות (בית, חול חום) ואירוע (סיכה, כחול). ראו `PLACE_KIND` ב-portal.ts */
.pt-nv:has(.pt-nvh) { background: transparent; border: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pt-nv:has(.pt-nvh) > .pt-nvp { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; }
.pt-nvp-prep { border-color: light-dark(#DCCBB2, #4A3F33) !important; }
.pt-nvp-venue { border-color: light-dark(#C9D4DE, #3A4A58) !important; }
.pt-nvh { display: flex; align-items: center; gap: 12px; }
.pt-nvhx { flex: 1; min-width: 0; }
.pt-nvi { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; }
.pt-nvi img { width: 30px; height: 30px; }
.pt-nvp-prep .pt-nvi { background: light-dark(#F1E8DA, #2E2720); }
.pt-nvp-venue .pt-nvi { background: var(--accent-soft); }
.pt-nvp-prep .pt-nvl { color: light-dark(#6B5640, #C9B195); font-weight: 800; }
.pt-nvp-venue .pt-nvl { color: var(--accent); font-weight: 800; }

/* 👨‍👩‍👧 המשפחה — כרטיס אחד, לפי צד */
.pt-fl { background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: 4px 17px 8px; }
.pt-fgs + .pt-fgs { border-top: 1px solid var(--line); margin-top: 4px; }
.pt-fam .pt-fs { padding: 10px 0 2px; }
.pt-fr { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 2px; min-height: 44px; padding: 6px 0; border-top: 1px solid var(--line); }
.pt-fs + .pt-fr, .pt-fgs > .pt-fr:first-child { border-top: 0; }
.pt-frm { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex-wrap: wrap; }
.pt-frm b { font-size: 15.5px; }
.pt-frl { font-size: 13px; color: var(--muted); }
.pt-frp { margin-inline-start: auto; color: var(--accent); font-weight: 600; font-size: 14px; text-decoration: none; font-variant-numeric: tabular-nums;
  display: inline-block; padding-block: 10px; margin-block: -10px; }
.pt-frn { flex: 1 0 100%; font-size: 13px; color: var(--muted); }
.pt-fga { border-top: 1px dashed var(--line-strong); }
.pt-fno { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
.pt-empty .pt-shb { margin-top: 8px; }
/* ✏️ טופס המשפחה (`PT_FAM_JS`) — שורה לכל אדם; בטלפון שני שדות בשורה. ⚠️ 16px בשדות — אחרת אייפון מגדיל את הדף */
.pt-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pt-ff { background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: 12px; }
.pt-ffh { margin: 0 2px 10px; font-size: 13.5px; color: var(--muted); }
.pt-ffl { display: grid; gap: 10px; }
.pt-ffr { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; padding: 10px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface-2); }
.pt-ffr input, .pt-ffr select, .pt-ffg input, .pt-ffnt { width: 100%; box-sizing: border-box; min-height: 44px; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; }
.pt-ffnt { padding: 10px 12px; min-height: 84px; resize: vertical; }
.pt-ffr input:focus, .pt-ffr select:focus, .pt-ffg input:focus, .pt-ffnt:focus { outline: 0; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.pt-ffs, .pt-ffo { grid-column: 1 / -1; }
.pt-ffx { grid-column: 1 / -1; justify-self: start; min-height: 36px; padding: 0 10px; border: 0; background: transparent; color: var(--danger, #b3261e);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.pt-ffa { margin-top: 10px; min-height: 44px; padding: 0 16px; border: 1.5px dashed var(--line-strong); border-radius: 999px; background: transparent;
  color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; }
.pt-ffg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pt-ffb { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.pt-ffc { min-height: 44px; padding: 0 16px; border: 0; background: transparent; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; }
@media (min-width: 560px) {
  .pt-ffr { grid-template-columns: 1.3fr 1fr 1.1fr; }
  .pt-ffs { grid-column: auto; }
  .pt-ffp { grid-column: 1; }
  .pt-ffo { grid-column: 2 / -1; }
}
@media (prefers-reduced-motion: reduce) { a.pt-kc:active { transform: none; } }
@media print { .pt-find, .pt-fc, .pt-findn { display: none !important; } }

/* ── 🧩 רשת הבלוקים במסך התובנות ──────────────────────────────
   ⚠️ שתי עמודות במחשב, אחת בטלפון. בלוק `full` תופס שורה שלמה.
   ☠️ ו-`minmax(0,1fr)` ולא `1fr` — בלי זה גריד לא מרשה לילד
      לקטון מתחת לתוכן שלו, והקלנדר השנתי היה מותח את העמודה
      ומוציא את כל הדף לגלילה אופקית. */
.viz-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; margin: 18px 0 22px;
}
.viz-full { grid-column: 1 / -1; }

/* ☠️ גובה אחיד בשורה — זה מה שהפך את הרשת ל"פאזל לא גמור".
   שני בלוקים בשורה כמעט לעולם לא יוצאים באותו גובה (מונה בן
   שתי שורות מול משפך בן ארבע), וברירת המחדל של גריד השאירה
   את הקצר תלוי באוויר עם חור מתחתיו.
   ⚠️ flex על התא + height:100% על הבלוק — התא כבר נמתח לגובה
      השורה בזכות stretch, והבלוק פשוט ממלא אותו. */
.viz-cell { position: relative; min-width: 0; display: flex; }
.viz-cell > * { flex: 1 1 auto; min-width: 0; }
.viz-cell > .rg, .viz-cell > .fn, .viz-cell > .od,
.viz-cell > .ym, .viz-cell > .pk, .viz-cell > .wr,
.viz-cell > .viz-empty { height: 100%; }

/* ⚠️ מונה בבלוק שנמתח — המספר מתמרכז אנכית במקום להיצמד למעלה
   ולהשאיר שטח לבן מתחתיו. */
.viz-cell > .od { display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 720px) {
  .viz-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ⭐ הכוכבית — הבורר עצמו, צמוד לבלוק שהוא בוחר.
   ⚠️ בפינה השמאלית: בעברית הכותרת מתחילה מימין, וכפתור שם
      היה יושב עליה. */
/* ☠️ inset-inline-START ב-RTL הוא הצד הימני — כלומר בדיוק היכן
   שהכותרת מתחילה. הכוכבית ישבה על "שווי עסקאות בצנרת" וחתכה
   אותה ל"י עסקאות בצנרת". נמדד 28/08/2026: הכוכבית ב-1280–1310
   והכותרת נגמרת ב-1297.
   ⚠️ END = שמאל ב-RTL, שם אין טקסט. */
/**
 * ⭐ **העיגול קטן, הכוכב לא** (שי, 11/09/2026: *"תקטין טיפה את
 * העיגול אבל לא את הכוכב שבתוכו, שלא יעלה על הגרפים"*).
 * ☠️ 38px באצבע ישבו על הרצועה הראשונה של המשפך ועל "23% סגירה".
 * ⚠️ **שטח המגע נשמר דרך `::before`** ולא דרך גודל העיגול: 44px
 * בלתי נראים סביבו, כלומר האצבע פוגעת בדיוק כמו קודם והעין רואה
 * עיגול קטן. `font-size` לא נגעו בו — הוא הכוכב עצמו.
 */
.viz-pin {
  position: absolute; inset-inline-start: auto; inset-inline-end: 12px; top: 12px;
  z-index: 2; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: color .15s, border-color .15s, transform .06s;
}
/**
 * 👆 **שטח המגע, בלי להגדיל את מה שרואים.**
 * ☠️ עיגול של 26px באצבע הוא פספוס, והפספוס כאן **מסיר גרף מדף
 * הבית** — פעולה שמשנה למשתמש את המסך ושקשה להבין למה קרתה.
 */
@media (hover: none) {
  .viz-pin::before {
    content: ""; position: absolute;
    inset: calc((44px - 26px) / -2);
    border-radius: 50%;
  }
}
.viz-pin:hover { color: var(--gold); border-color: var(--line-strong); }
.viz-pin:active { transform: translateY(1px); }
.viz-pin.on { color: var(--gold); border-color: var(--gold); }

/* ⚠️ בלוק בלי בסיס מוסבר, ולא מוסתר — הוא נשאר בבורר. */
.viz-empty {
  background: var(--surface); border: 1px dashed var(--line);
  border-radius: var(--radius-lg, 16px); padding: 26px 22px;
  color: var(--muted); font-size: 14.5px; line-height: 1.7;
  min-height: 96px; display: grid; place-items: center; text-align: center;
}

/* ⚠️ כותרת הרשת. השורה השנייה מסבירה את הכוכבית — בלעדיה היא
   כפתור מסתורי, ומי שלא מבין מה הוא עושה לא לוחץ עליו אף פעם. */
.viz-lead { margin: 26px 0 12px; }
.viz-lead h2 { font-size: 18px; margin: 0 0 3px; }
.viz-lead p { color: var(--muted); font-size: 13.5px; margin: 0; }

/* ⚠️ מקום לכוכבית בצד שמאל של כל כותרת בלוק — כדי שלעולם
   לא תיגע בטקסט, גם כשהכותרת ארוכה. */
.viz-cell .rg-h, .viz-cell .fn-h, .viz-cell .ym-h,
.viz-cell .pk-h, .viz-cell .od-lb, .viz-cell .wr-hd { padding-inline-end: 42px; }

/* 🎬 הכרזת הדוגמה. ⚠️ בולטת בכוונה — היא ההבדל בין "כך זה ייראה"
   לבין מספרים שמישהו יחשוב שהם שלו. */
.viz-demo { margin: 22px 0 0; }

/* 🧩 הרשת בדף הבית — אותם בלוקים, ריווח מעט צפוף יותר.
   ⚠️ דף הבית נפתח עשרים פעם ביום; הגרפים שם הם הצצה, לא עיון. */
.viz-home { margin: 0 0 16px; }
/**
 * ↔️ **גרף בודד בדף הבית תופס את כל הרוחב.**
 * ☠️ `.viz-grid` היא שתי עמודות, ולכן בלוק אחד השאיר חצי עמודה שחורה
 * לצדו — החלל שסומן בצילום של שי (02/09/2026). המחלקה נוספת ב-JS
 * (`vizHome`) ולא ב-`:has()`, כדי שהכלל יהיה מפורש וקל למצוא.
 * ⚠️ רק בדף הבית — במסך התובנות רשת שתי העמודות היא הפריסה המבוקשת.
 */
.viz-home.viz-one { grid-template-columns: minmax(0, 1fr); }
.viz-home-demo {
  margin: 0 0 8px; font-size: 13px; color: var(--muted);
}
/**
 * 🐕 **"אלה לא המספרים שלכם"** (שי, 12/10/2026: *"תבליט את העובדה למשתמשים חדשים שהתובנות הם דמה, שלא יהיה מבלבל"*).
 * פס עם מוקה (ולא `note warn` האדום, שנקרא כמו תקלה), ובכל גרף: תגית "דוגמה" ורקע מפוספס עדין — גם צילום של גרף בודד אומר
 * שזה לא אמיתי. ⚠️ התגית בפינה התחתונה, הרחק מהכוכבית (`viz-pin`, למעלה) ומהכותרות.
 */
.viz-demo-bar {
  display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 12px 14px;
  border: 1.5px dashed color-mix(in srgb, var(--gold) 70%, transparent); border-radius: 14px;
  background: color-mix(in srgb, var(--gold) 10%, var(--surface)); line-height: 1.55;
}
.viz-demo-bar img { flex: none; width: 44px; height: 44px; object-fit: contain; }
.viz-demo-bar b { display: block; font-size: 16px; font-weight: 800; color: var(--ink); }
.viz-demo-bar span { display: block; font-size: 13.5px; color: var(--muted); }
.viz-demo-bar.viz-demo-sm { margin: 0 0 10px; padding: 8px 12px; gap: 10px; border-radius: 12px; }
.viz-demo-bar.viz-demo-sm img { width: 34px; height: 34px; }
.viz-demo-bar.viz-demo-sm b { font-size: 14.5px; }
.viz-demo-bar.viz-demo-sm span { font-size: 12.5px; }
.viz-is-demo .viz-cell > :not(.viz-pin):not(.viz-demo-tag) {
  background-image: repeating-linear-gradient(-45deg, transparent 0 13px,
    color-mix(in srgb, var(--gold) 9%, transparent) 13px 14px);
}
.viz-demo-tag {
  position: absolute; bottom: 10px; inset-inline-end: 12px; z-index: 2; pointer-events: none;
  padding: 1px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.6;
  background: var(--gold); color: var(--surface); letter-spacing: .02em;
}

/* ══════════════════════════════════════════════════════════════
 * 🔍 גרסת דף הבית — קטנה, נלחצת, ופותחת את המלא בתובנות
 *
 * 🔑 **שי (10/09/2026):** *"לכל גרף בתובנות שתהיה גם גרסה קטנה ויפה
 * מצומצמת שמראה את עיקר הדברים, ובלחיצה על זה אתה עובר לתובנות
 * לראייה מעמיקה יותר."*
 *
 * ☠️ **הגרסה המוקטנת היא CSS ולא רינדור שני.** הבלוקים נבנים בשרת
 * ומשותפים לשני המסכים; שכפול הרינדור היה מבטיח שתיקון בגרף אחד
 * לא יגיע לתאום שלו — וזה סוג הבאג שמתגלה חודשיים אחר כך.
 * ══════════════════════════════════════════════════════════════ */
.viz-mini {
  display: block; position: relative; height: 100%;
  color: inherit; text-decoration: none;
  border-radius: var(--radius-lg, 16px);
  transition: transform .12s ease, box-shadow .12s ease;
}
.viz-mini:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgb(0 0 0 / .12); }
.viz-mini:hover > .fn, .viz-mini:hover > .od, .viz-mini:hover > .rg,
.viz-mini:hover > .ym, .viz-mini:hover > .pk, .viz-mini:hover > .wr,
.viz-mini:hover > .viz-empty { border-color: var(--accent); }
.viz-mini:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .viz-mini, .viz-mini:hover { transform: none; transition: none; }
}

/**
 * 🏷️ **"לעומק ←" — במקום שבו יושבת הכוכבית בתובנות.**
 * ⚠️ **גלוי תמיד ולא ב-hover**: בטלפון אין ריחוף, ובלי הרמז הזה
 * גרף שנלחץ נראה בדיוק כמו גרף שלא.
 */
/**
 * ☠️ **ומקום לעיגול עצמו.** כשהיה כתוב בו "לעומק ←" הוא היה 62px,
 * והריפוד של `.viz-cell` שמר 40px — בדיוק כמות שהכוכבית
 * בתובנות צריכה. ⚠️ התוצאה: "23% סגירה" בכותרת המשפך
 * נכנס מתחת לשבב. נמדד בדפדפן, 11/09/2026.
 */
.viz-home .rg-h, .viz-home .fn-h, .viz-home .ym-h,
.viz-home .pk-h, .viz-home .od-lb, .viz-home .wr-hd { padding-inline-end: 46px; }

/**
 * 🔎 **מרווח סימטרי מכל צד** (שי, 11/09/2026: *"הסימן של זכוכית
 * המגדלת עולה על הגרף או נושק לו"*).
 * ☠️ **המספרים לא היו קשורים לכלום:** 12px מהקצה מול ריפוד של 16px
 * בבלוק, ועיגול של 28px שירד נמוך מהכותרת אל תוך הרצועה הראשונה.
 * 🔑 **עכשיו הוא יושב על הריפוד של הבלוק עצמו** (16px), ובגודל
 * שמתיישר עם שורת הכותרת — כלומר מרווח זהה מלמעלה ומהצד.
 */
.viz-more {
  /* ⚠️ 16px מלמעלה ו-16px מהצד — בדיוק הריפוד של הבלוק */
  position: absolute; inset-inline-end: 16px; top: 16px; z-index: 2;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--accent); background: var(--accent-soft);
}
/* ⚠️ אותה מידה כמו הכוכבית בתובנות — שני העיגולים באותה פינה */
.viz-more svg { width: 15px; height: 15px; display: block; }
/**
 * 👆 **שטח המגע גדל, העיגול לא** — אותו פתרון של הכוכבית.
 * ⚠️ העיגול כאן פותח מסך אחר; פספוס הוא ניווט לא מכוון.
 */
@media (hover: none) {
  .viz-more::before {
    content: ""; position: absolute; inset: calc((44px - 24px) / -2);
    border-radius: 50%;
  }
}

/**
 * 📐 **מוקטן באמת, ולא רק "קטן יותר".**
 *
 * ☠️ **הקלנדר השנתי, מפת החום והסיכום החודשי נכנסו לדף הבית**
 * (ראו `home` ב-`vizblocks.ts`), והם הגבוהים במערכת — 400px+
 * כל אחד. בלי תקרה, דף הבית היה נפתח על גלילה של שלושה מסכים.
 * ☠️ **470 ולא 260, ו-260 היה באג.** נמדד: בלוק הטבעות הוא 459px,
 * והשורה הראשונה במקרא שלו יושבת 239→297 — כלומר התקרה חתכה אותה
 * **באמצע**, והקצה הנמוג נראה כמו רינדור שבור. ⚠️ 470 מכניס שמונה
 * מתשעת הבלוקים **בשלמותם**; רק "הסיכום החודשי" (1026px) נחתך,
 * ושם החיתוך נופל בין כרטיסים ולא בתוך שורת טקסט.
 * 🔑 **הכלל: תקרה שחותכת שורת טקסט נראית כמו תקלה, לא כמו "יש עוד".**
 * ⚠️ **התקרה על העוטף ולא על הבלוק**: הבלוק חייב להישאר במלוא
 * גובהו במסך התובנות, ושם אין `.viz-mini` בכלל.
 */
.viz-home .viz-mini { max-height: 470px; overflow: hidden; }
/* 🌫️ הקצה נמוג במקום להיחתך — חיתוך חד נראה כמו תקלת רינדור */
.viz-home .viz-mini::after {
  content: ""; position: absolute; inset-inline: 1px; bottom: 1px; height: 54px;
  border-end-start-radius: var(--radius-lg, 16px);
  border-end-end-radius: var(--radius-lg, 16px);
  background: linear-gradient(to top, var(--surface), transparent);
  pointer-events: none;
}
/* ⚠️ ריפוד קטן יותר בדף הבית — שם הגרף הוא הצצה, לא מסך */
.viz-home .fn, .viz-home .od, .viz-home .rg,
.viz-home .ym, .viz-home .pk, .viz-home .wr { padding: 16px 18px; }
/**
 * ☠️ **והכותרת צריכה לנשום מתחתיה.** העיגול גבוה משורת
 * הכותרת (24px מול 18px), ועם 10px בלבד הוא ירד ל-5px מהרצועה
 * הראשונה — נמדד בדפדפן, וזה ה"נושק לגרף" ששי ראה.
 */
/**
 * 💍 **הטבעות בדף הבית — הטבעת מימין, המקרא משמאל.**
 *
 * 🔑 **שי (11/09/2026):** *"תעשה שהעיגול יהיה בצד ימין של האריח
 * ובצד שמאל בקטן יותר יהיה את המלל, וככה זה יתפוס פחות מקום
 * בגלילה."*
 *
 * ☠️ **מה שהיה: 455px.** `.rg-key` נושא `min-width: 220px`, ובכרטיס
 * של ~300px בטלפון הוא **נשבר לשורה משלו** מתחת לטבעת בת 200px.
 * כלומר בדיוק בדף שנפתח עשרים פעם ביום, הבלוק תפס מסך וחצי.
 *
 * ⚠️ **בעברית הילד הראשון הוא הימני** — ה-SVG נכתב ראשון, ולכן
 * `nowrap` לבדו שם אותו בימין בלי לגעת ב-HTML.
 * ⚠️ **ורק כאן.** במסך התובנות יש רוחב, והטבעת הגדולה עם מקרא
 * מלא היא כל הרעיון שם.
 */
.viz-home .rg-body { flex-wrap: nowrap; gap: 12px; align-items: center; }
.viz-home .rg-svg { width: 116px; height: 116px; }
/* ⚠️ `min-width: 0` הוא מה שמבטל את השבירה — `flex-basis` לבדו לא */
.viz-home .rg-key { flex: 1 1 auto; min-width: 0; }
.viz-home .rg-key li { padding: 6px 0; gap: 1px 7px; grid-template-columns: 8px 1fr auto; }
.viz-home .rg-dot { width: 8px; height: 8px; }
.viz-home .rg-lb { font-size: 12px; }
.viz-home .rg-dt { font-size: 10.5px; }
.viz-home .rg-pc { font-size: 15px; }

.viz-home .rg-h, .viz-home .fn-h, .viz-home .ym-h,
.viz-home .pk-h, .viz-home .od-lb, .viz-home .wr-hd { margin-bottom: 16px; }


/* ── 📅 בורר השנים ────────────────────────────────────────────
   🔽 השנה היא הכפתור, והרשימה נפתחת ממנה.
   ☠️ גלולת כפתורים גדלה עם מספר השנים ושוברת את השורה בשנה
   החמישית — ספק ותיק היה מקבל מסך אחר מספק חדש. תפריט הוא
   רוחב קבוע לנצח.
   ⚠️ הכל על ‎<details>‎: פתיחה, Escape ומיקוד מגיעים מהדפדפן,
   ואנחנו רק מוסיפים את התנועה. פחות קוד = פחות מה שנשבר. */
.viz-lead {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
}
.viz-lead-tx { flex: 1 1 auto; min-width: 0; }

.yp { position: relative; flex: none; }
.yp summary {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface-2); border-radius: 999px;
  padding: 6px 12px 6px 9px; cursor: pointer;
  font-size: 13.5px; font-weight: 700; color: var(--ink);
  /* ⚠️ ספרות טבלאיות — אחרת הכפתור משנה רוחב בין שנה לשנה */
  font-variant-numeric: tabular-nums;
  list-style: none; user-select: none;
}
.yp summary::-webkit-details-marker { display: none; }
.yp summary:hover { background: var(--line); }
.yp summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.yp-ar {
  width: 15px; height: 15px; color: var(--muted);
  transition: transform .18s cubic-bezier(.22,.9,.24,1);
}
.yp[open] .yp-ar { transform: rotate(180deg); }

/* התפריט. ⚠️ אותה עקומת תנועה של הטבעות והפסים — זו אותה שפה. */
.yp-menu {
  position: absolute; z-index: 20; top: calc(100% + 6px);
  inset-inline-start: 0; min-width: 100%;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 5px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 2px;
  transform-origin: top center;
  animation: yp-in .18s cubic-bezier(.22,.9,.24,1);
}
@keyframes yp-in {
  from { opacity: 0; transform: translateY(-4px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.yp-menu button {
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink);
  padding: 7px 14px; border-radius: 8px; text-align: start;
  font-variant-numeric: tabular-nums;
}
.yp-menu button:hover { background: var(--surface-2); }
.yp-menu button.on { background: var(--accent-soft); color: var(--accent); }
.yp-menu button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ⚠️ מי שביקש פחות תנועה מקבל תפריט שפשוט מופיע */
@media (prefers-reduced-motion: reduce) {
  .yp-menu { animation: none; }
  .yp-ar { transition: none; }
}

/**
 * 🎯 **היעד של קישור מדף הבית** — ראו `jumpToHash` ב-`insights.html`.
 * ⚠️ `scroll-margin-top` נדיב בכוונה: הכותרת הדביקה של הדף גבוהה
 * בטלפון מאשר במחשב, ומספר קטן מדי היה משאיר את כותרת הגרף מתחתיה.
 */
.viz-cell[id] { scroll-margin-top: 84px; }
.viz-jump > * { animation: viz-flash 2s ease; }
@keyframes viz-flash {
  0%, 70% { box-shadow: 0 0 0 2px var(--accent); }
  100%    { box-shadow: 0 0 0 2px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .viz-jump > * { animation: none; box-shadow: 0 0 0 2px var(--accent); }
}

/* 🌍 באנגלית השנה זורמת שמאל־לימין (ינואר משמאל) — `direction: rtl` למעלה נועד לעברית */
html[dir="ltr"] .ym-grid, html[dir="ltr"] .ym-months, html[dir="ltr"] .ym-key { direction: ltr; }