/* ============================================================================
   GroupiApp — map.css
   עיצוב המפה, שאוב מהרפרנסים של המנכ"ל (Snap-Map, Section-kit, פראג):
   קטגוריות בצבע, כרטיסי popup עשירים, פאנל סינון, ורשימה מסונכרנת — בזהות
   החמה שלנו, תוך שמירה על ה"אזור המקורב" (עיגול, לא פין מדויק) כי המיקום מטושטש.
   vanilla, בלי ספריות. RTL, dark, reduced-motion.
   ============================================================================ */

/* ── צבעי קטגוריה — מקור אחד ──
   13 קטגוריות-על: 12 הקנוניות (נספח א' §1–§12, migrations/0039_subcategories.sql,
   04.09.2026, הרחבה מ-6) ועוד c13 "אחר" (migrations/0041_add_other_category.sql,
   05.09.2026). c1/c2/c5 לא זזו — אותו תחום בדיוק לפני ואחרי המיגרציה (רק הניסוח
   התרענן). c3/c4/c6 מייצגות תחום שונה אחרי המיגרציה (חוגים→טבע וטיולים,
   משפחה→משחקים, אחר→חוגים וקורסים) ולכן קיבלו גוון חדש לגמרי, לא רק שם חדש לגוון
   הישן — צבע שנשאר זהה לצד שם שהשתנה היה מטעה. c7–c12 חדשות. הצבע תמיד מלווה
   באייקון+טקסט (map.js קובע את שניהם), כך שצבע אף פעם אינו האות היחיד למשמעות
   (WCAG color-not-only).

   ── ניגוד מצב-נבחר (G4, גל 2 UX, 06.09.2026) ──
   במצב נבחר הצ'יפ צובע טקסט על מילוי-הקטגוריה. ביקורת ניגוד (getComputedStyle)
   מצאה 4 שנפלו מתחת ל-4.5:1 עם טקסט לבן: c1 3.09 · c5 4.24 · c9 4.30 · c11 3.71.
   רקע הצ'יפ ומילוי ה-cN זהים בשני ה-themes (hex קבוע), ולכן הניגוד זהה בבהיר
   ובכהה — התיקון נכון פעם אחת לשניהם. הכלל שנבחר, מכוון ולא אד-הוק: **צבע קטגוריה
   בהיר ⇒ טקסט כהה, צבע כהה ⇒ טקסט לבן** (בדיוק מה שהעין מצפה לו). c1 (קפה, גם
   גוון המותג) ו-c11 (רווחה) הם השניים הבהירים; שניהם עוברים בנוחות עם דיו כהה
   (6.00 · 5.00) ולכן **הגוון שלהם נשמר בדיוק** והצ'יפ הנבחר מקבל טקסט כהה
   (var(--p-ink-0)) — וזה גם עקבי עם כלל המותג "דיו כהה על קורל, לא לבן"
   (style.css §2). c5 ו-c9 יושבים ב"אזור המת" (גם לבן וגם דיו נופלים: c5 4.24/4.38,
   c9 4.30/4.32), ולכן חייבים לזוז — הוכהו מינימלית תוך שמירת גוון (הסחת גוון ~0°,
   כפל-ערוצים): c5 #B26A00→#A96500 (לבן 4.62), c9 #12897A→#118375 (לבן 4.64).
   ה-token של c1/c11 לא שונה — כך גם ה-cat-tag בכהה של c1 (4.98) לא נסוג. אחרי:
   כל 13 ≥4.5:1 בשני ה-themes (אומת ב-getComputedStyle + Playwright, ראו דוח G4).
   הערת scope: מונה ה-cluster (.gm-cluster, לבן על --c1) עדיין ~3.09 — לא צ'יפ,
   לא בטווח משימה זו, מדווח כממצא נפרד ל-G5.

   c13 "אחר" — PROVISIONAL, per the product-manager's own handoff note: color is
   this build's placeholder, lead-product-designer/G4 makes the final call. Chosen
   deliberately NEUTRAL (gray, not a new hue) — this category has no domain of its
   own to color-code, unlike the other 12. #5B6570 on #EAECEF measures ~5.0:1
   (WCAG AA for normal text, verified — see the calculation in the 05.09.2026 stage
   report) and also clears 4.5:1 as white text on a solid #5B6570 chip
   (.cat-chip.on[data-cat="13"] below), so both real usages of these two tokens
   pass AA without needing anything AAA-specific. */
/* style.css §3 defines BOTH dark mechanisms side by side ("שני המנגנונים, כפי
   שהאתר כבר עושה") — the @media block above (OS-level dark) and this explicit
   [data-theme="dark"] mirror (manual in-app toggle, no OS dark needed). This
   block was missing here: with the OS in light mode and the app's own toggle set
   to dark, every --cN-soft above would silently keep serving its LIGHT (pale)
   value against the now-dark card/thumb surfaces from style.css's own
   :root[data-theme="dark"] block — the map-specific gap gal-3's dark-map pass
   was asked to find. Values copied verbatim from the @media block above; same
   c13-soft exception applies (see comment there). */

/* טוקני הקטגוריה (--c1..--c13) ורכיב .act-thumb/.cat-tag הועברו ל-card.css —
   G4 גל א, 14.09.2026. הסיבה: הפיד מציג את אותו אובייקט פעילות בדיוק ואינו
   טוען את map.css כלל, ולכן לאותה פעילות הייתה תמונה במפה ולא בפיד.
   card.css הוא הגיליון היחיד שגם feed.html וגם map.html טוענים, ונטען לפני
   map.css בשניהם. ההגדרה עברה — היא לא שוכפלה. */


/* ============================================================================
   עיצוב מחדש של עמוד המפה — 03.10.2026, בקשות המנכ"ל (עם צילומי מסך שלו):
   (1) שער חוויה למחוברים בלבד (map-gate.js),
   (2) הקפסולה העליונה נחתכה,
   (3) "העמוד לא נראה טוב — צריך לסדר אותו",
   (4) מפה מאוירת במקום OpenStreetMap הרגיל (map-style.js).
   כל הצבעים והמרווחים הם טוקנים של style.css; הכרזה הצהובה (--signal/--on-signal) היא
   הזוג היחיד שאינו מתהפך בין ערכות, ולכן כותרת הפאנל נראית זהה בבהיר ובכהה.
   ============================================================================ */

/* ── שער החוויה ──
   map-gate.js מוסיף gm-gate על <html> לפני הציור הראשון ומסיר אותה כשהמשתמש מאומת
   (או שנשלח ל-/join). visibility ולא display: הפריסה נשמרת, כך שהמפה מקבלת גודל נכון
   ולא קופצת. בלי JS הכיתה לא מתווספת והעמוד מוצג. */
html.gm-gate body{ visibility:hidden }

/* ── הקפסולה העליונה (המנכ"ל: "חתוכה בחלקה העליון") ──
   שורש הבעיה, מדוד: .nav הוא sticky עם inset-block-start:16px וגובה הקפסולה 60px, כך שהיא
   ירדה עד y=76 — 12px מתחת לתחילת המפה (64px, כמו ה-rail של app-shell.css) — וחלונית המפה
   של Leaflet (z-index 400+) צוירה מעל החלק התחתון שלה. התיקון ממוקד לעמוד הזה (body.is-map):
   .nav הופך לפס בגובה 64px שנשאר בזרימה (sticky בלי היסט אין טעם — העמוד לא נגלל), הקפסולה
   יושבת בתוכו במלואה, ו-z-index שלו מעל כל מה שבתוך .map-shell. .nav-in הגלובלי לא נוגעים בו. */
body.is-map .nav{
  position:relative; inset-block-start:auto; z-index:60;
  box-sizing:border-box; block-size:64px; padding-block:2px;
}
body.is-map .nav-in{ box-sizing:border-box; block-size:60px; min-block-size:0 }

/* ── פריסה ──
   דסקטופ: פאנל ומפה כשני כרטיסים על רקע הדף, בלי חפיפה (סמן מתחת לפאנל היה "נעלם").
   .map-shell הוא הקשר ערימה משלו (z-index:0), כך שה-z-index של Leaflet ושל הגיליון לא
   דולפים מעל הכותרת או תפריט החשבון שנפתח ממנה. */
.map-shell{
  --sheet-peek:176px;
  position:relative; z-index:0;
  display:grid; grid-template-columns:clamp(340px,28vw,420px) minmax(0,1fr); gap:12px;
  padding:0 12px 12px; box-sizing:border-box;
  block-size:calc(100vh - 64px); block-size:calc(100dvh - 64px); min-block-size:520px;
}
.map-wrap{
  position:relative; isolation:isolate; overflow:hidden; min-inline-size:0;
  order:0; height:auto; min-height:0; /* style.css: height:56vh;min-height:340px;order:1 ב-≤860px */
  border:1px solid var(--line); border-radius:var(--radius); background:var(--band);
}
#map{ position:absolute; inset:0; background:var(--band) }

/* ── הפאנל ── */
.map-side{
  display:flex; flex-direction:column; min-height:0; min-inline-size:0; overflow:hidden;
  order:0; padding:0; /* style.css §map: padding:22px 20px 30px, order:2 ב-≤860px — כללי העמוד הישן */
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow);
}
/* כרזה צהובה: דיו על צהוב קבוע (12.6:1 בשני המצבים, style.css §signal). */
.map-side-head{
  flex:none; padding:var(--sp-4) var(--sp-5) var(--sp-4); background:var(--signal); color:var(--on-signal);
  border-block-end:1px solid var(--rule-on-yellow);
}
.map-side-head h1{ font-family:var(--font-display); font-size:var(--t-title-lg); font-weight:400; margin:0; letter-spacing:var(--track-display); line-height:1; color:inherit }
.map-side-head .micro{ margin:var(--sp-1) 0 0; color:var(--on-signal); font-size:var(--t-meta); font-weight:500 }

/* ── סינון ──
   03.10.2026 (דיווח המנכ"ל 03.09, "תפריט הסינון נחתך") — הפאנל נפתח/נסגר מכפתור
   (.map-filters-toggle) ונולד סגור. בעיית ה-overflow-x המקורית (7 צ'יפים נחתכים בקצה) נפתרה
   ב-wrap לשורות: כל הקטגוריות תמיד גלויות במלואן כשהפאנל פתוח, בכל רוחב. גובהו מוגבל וגולל
   פנימית, כך שהוא לעולם לא דוחס את הרשימה. מ-hidden הוא נעלם (display:flex גובר על
   הסגנון המובנה של [hidden]). סרגל הגלילה: scrollbar-color/width על html (style.css §25)
   עוברים בירושה לכל מיכל גלילה. */
.map-filters-toggle{
  flex:none; display:flex; align-items:center; gap:10px; inline-size:100%; box-sizing:border-box;
  min-block-size:52px; padding:10px var(--sp-5); margin:0; background:var(--surface); color:var(--ink);
  border:0; border-block-end:1px solid var(--line); border-radius:0; cursor:pointer; text-align:start;
  font:700 var(--t-meta)/1.2 var(--font-head);
}
.map-filters-toggle[hidden]{ display:none }
.map-filters-toggle:hover{ background:var(--band) }
.mft-value{
  margin-inline-start:auto; font:600 var(--t-sm)/1.2 var(--font-head); color:var(--ink);
  padding:4px 11px; border-radius:99px; background:var(--band); border:1px solid var(--line);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-inline-size:0;
}
.mft-value:empty{ display:none }
.mft-caret{ flex:none; inline-size:8px; block-size:8px; margin-inline-start:2px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;   /* פיזי, לא לוגי: חץ-מטה זהה ב-RTL וב-LTR */
  transform:rotate(45deg) translateY(-2px); transition:transform .15s }
.map-filters-toggle[aria-expanded="true"] .mft-caret{ transform:rotate(-135deg) translateY(-2px) }
@media (prefers-reduced-motion:reduce){ .mft-caret{ transition:none } }
.mft-value:empty + .mft-caret{ margin-inline-start:auto }

.map-filters{
  flex:none; display:flex; flex-wrap:wrap; gap:8px; padding:12px 16px 14px;
  background:var(--band); border-block-end:1px solid var(--line);
  max-block-size:min(46vh,340px); overflow-y:auto; overscroll-behavior:contain;
}
.map-filters[hidden]{ display:none }
.cat-chip{ flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  min-block-size:var(--v2-tap); box-sizing:border-box;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
  border-radius:99px; padding:6px 14px; font-size:var(--t-meta); font-weight:600; cursor:pointer;
  font-family:var(--font-head); transition:background .15s,color .15s,border-color .15s; }
.cat-chip .dot{ width:10px; height:10px; border-radius:50%; flex:none }
.cat-chip:hover{ border-color:var(--ink) }
.cat-chip.on{ color:#fff; border-color:transparent }
/* data-cat="0" ("הכל") is the one chip with no fixed category hue — it uses the
   neutral ink/paper pair instead, and MUST override .cat-chip.on's own color:#fff
   above: --ink is the THEME TEXT-INK token (dark in light mode, but light-on-dark
   in dark mode — it flips by design, see style.css §3), not a fixed dark surface.
   White text on it was fine in light mode (dark ink bg) but in dark mode --ink
   resolves to #F5F1EA (near-white) — white-on-near-white measured ~1.13:1,
   effectively invisible (05.09.2026 a11y audit, WCAG 1.4.3 fail). Pairing the
   background with var(--ink) and the text with var(--bg) — the page's own base
   pair, already relied on everywhere for body text and asserted ≥4.5:1 in both
   themes (style.css header) — makes the chip self-correct in both themes:
   dark pill/light text in light mode (unchanged, ~17.4:1), light pill/dark text
   in dark mode (~17.0:1, was ~1.13:1). See Memory or the audit note for the
   before/after numbers. */
.cat-chip.on[data-cat="0"]{ background:var(--ink); color:var(--bg) }
/* ⚠ מילוי הצ'יפ הנבחר משתמש ב---cN-line (תפקיד "צורה"), לא ב---cN הגולמי —
   1.4.11 חל כאן: המילוי הזה הוא גם רכיב-ממשק שגבולו חייב 3:1 מול הרקע
   שמאחוריו (map-side → --bg). ל-9 מתוך 13 --cN-line == --cN בדיוק (ראו
   card.css), כך שאין שינוי חזותי שם; ארבעת שנשארו (c1/c2/c4/c10) הם
   שהתיקון חל עליהם. `SOURCED`: Reports/2026-09-17-e2-a11y-gaps.md §2ד. */
.cat-chip.on[data-cat="1"]{ background:var(--c1-line) } .cat-chip.on[data-cat="2"]{ background:var(--c2-line) }
.cat-chip.on[data-cat="3"]{ background:var(--c3-line) } .cat-chip.on[data-cat="4"]{ background:var(--c4-line) }
.cat-chip.on[data-cat="5"]{ background:var(--c5-line) } .cat-chip.on[data-cat="6"]{ background:var(--c6-line) }
/* 7–12: not consumed by any chip in map.html today (its static filter strip still only
   goes up to data-cat="6" — out of scope for this pass, flagged separately) but defined
   here so the rule exists the moment that markup catches up, and so nothing about THIS
   file is what's blocking it. */
.cat-chip.on[data-cat="7"]{ background:var(--c7-line) } .cat-chip.on[data-cat="8"]{ background:var(--c8-line) }
.cat-chip.on[data-cat="9"]{ background:var(--c9-line) } .cat-chip.on[data-cat="10"]{ background:var(--c10-line) }
.cat-chip.on[data-cat="11"]{ background:var(--c11-line) } .cat-chip.on[data-cat="12"]{ background:var(--c12-line) }
.cat-chip.on[data-cat="13"]{ background:var(--c13-line) }
/* שני הגוונים הבהירים (c1 קורל, c11 רווחה) — הצ'יפ הנבחר מקבל דיו כהה במקום לבן.
   var(--p-ink-0) הוא פרימיטיב קבוע (#1A1A17 — **תוקן, ממצא G5 20.09.2026:**
   הערה קודמת כאן טענה #141310, שגוי; לא מתהפך בין themes ⇒ תקף בשניהם.
   רקע ה-cN גם הוא hex קבוע), כך שהזוג עובר AA בבהיר ובכהה כאחד: **c1 4.64**
   (עודכן — הצ'יפ הנבחר עצמו עבר מ---c1 הגולמי ל---c1-line ב-20.09.2026,
   §2ד; #FA3600 במקום #FF5B2E, לא עוד 6.00) · c11 5.00 (ללא שינוי — --c11-line
   == var(--c11), אין דריסה בפועל). הסלקטור עם [data-cat] מנצח את color:#fff
   של .cat-chip.on בזכות ספציפיות גבוהה יותר. ראו הבלוק המפורט למעלה (G4 גל 2). */
.cat-chip.on[data-cat="1"], .cat-chip.on[data-cat="11"]{ color:var(--p-ink-0) }

/* ── רשימת הכרטיסים ──
   כרטיס אופקי (תמונה בצד, תוכן לידה): רואים 4-5 פעילויות בלי לגלול, והתמונה אף פעם לא
   "צהובה וריקה". הסיבה לריק הקודם, מדודה: map.js לא הציב data-cat על ה-thumb, ו-card.css
   מצייר את תצלום הקטגוריה רק על .act-thumb[data-cat]. עכשיו הוא מציב. */
.act-list{ list-style:none; margin:0; padding:var(--sp-2) var(--sp-4) var(--sp-4); overflow-y:auto; flex:1; min-height:0; overscroll-behavior:contain;
  display:flex; flex-direction:column; gap:0; }
/* flex:none: a row keeps its natural height; the LIST is what scrolls (a flex column would otherwise shrink rows). */
.act-list > .act-item,.act-list > .map-day{ flex:0 0 auto }
/* v2: a day is a heading over a thick ink rule, then rows (same language as the feed board) */
.map-day{ margin-block-start:var(--sp-4) }
.map-day:first-child{ margin-block-start:var(--sp-2) }
.map-day-h{ display:flex; align-items:baseline; gap:var(--sp-3); margin:0; padding-block-end:var(--sp-2);
  font-family:var(--font-display); font-weight:400; font-size:var(--t-h3); line-height:1; border-block-end:3px solid var(--ink) }
.map-day-h small{ font-family:var(--font-head); font-size:var(--t-meta); font-weight:600; color:var(--ink-2) }
.act-item{ position:relative; background:transparent; border-block-end:1px solid var(--line); cursor:pointer;
  transition:background-color .15s }
.act-item:hover,.act-item.hot{ background:var(--band) }
.act-item > a{ display:grid; grid-template-columns:var(--v2-row-time-w) minmax(0,1fr) var(--v2-row-thumb); column-gap:var(--sp-3); align-items:start;
  /* the photo sits at the top of the end column and the "show on map" button under it: room for both */
  padding-block:var(--sp-4); min-block-size:calc(var(--v2-row-thumb) + var(--v2-tap) + var(--sp-2) + var(--sp-4) * 2); text-decoration:none; color:inherit }
.act-item > a:focus-visible{ outline-offset:-3px }
.map-time{ font-family:var(--font-display); font-size:var(--t-time); line-height:1; font-variant-numeric:tabular-nums lining-nums }
.map-time time{ display:block }
.act-item .act-thumb{ inline-size:var(--v2-row-thumb); block-size:var(--v2-row-thumb); min-block-size:0; border-radius:var(--radius-lg);
  border-end-start-radius:var(--radius-sm) }
.act-body{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-inline-size:0 }
.map-cat{ display:inline-flex; align-items:center; gap:6px; font:700 var(--t-sm)/1.2 var(--font-head); color:var(--ink-soft) }
.map-cat-dot{ inline-size:8px; block-size:8px; border-radius:50%; background:var(--cc-line,var(--c1-line)); flex:none }
.act-title{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-family:var(--font-head); font-weight:700; font-size:var(--t-title-row); line-height:1.3; color:var(--ink) }
.act-meta{ display:flex; flex-direction:column; gap:2px; font-size:var(--t-meta); color:var(--ink-soft); max-inline-size:100% }
.act-meta-row{ display:flex; align-items:center; gap:6px; min-inline-size:0 }
.act-meta-row > span:last-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.gm-ic{ flex:none; inline-size:15px; block-size:15px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round }
.spots{ margin-top:var(--sp-1); display:inline-flex; align-items:center; gap:6px; font-size:var(--t-sm); font-weight:700;
  padding:3px 10px; border-radius:99px; background:var(--good-soft); color:var(--good) }
.spots.tight{ background:var(--live-soft); color:var(--live) }
.spots.full{ background:var(--band-2,var(--band)); color:var(--ink-faint) }
/* "show on map": a sibling of the link (a button inside a link is invalid); 44px touch target, beside the photo */
.act-locate{ position:absolute; inset-block-end:var(--sp-4); inset-inline-end:calc((var(--v2-row-thumb) - var(--v2-tap)) / 2); z-index:1;
  display:inline-flex; align-items:center; justify-content:center; inline-size:var(--v2-tap); block-size:var(--v2-tap); padding:0;
  background:var(--surface); color:var(--ink); border:1px solid var(--line-strong); border-radius:50%; cursor:pointer }
.act-locate .v2-ico{ inline-size:18px; block-size:18px }
.act-locate:hover{ background:var(--signal); color:var(--on-signal); border-color:var(--on-signal) }

/* מצב ריק — כרטיס מקווקו שקט, לא חלון ריק. הרכיבים (.empty-city*) מוגדרים ב-style.css. */
.act-empty{ padding:26px 18px; text-align:center; background:var(--band);
  border:1px dashed var(--line-strong); border-radius:var(--radius-md) }
.map-note{ flex:none; padding:10px 16px; border-block-start:1px solid var(--line); margin:0; background:var(--band) }

/* ── markers (divIcon) ── */
.gm-marker{ background:none; border:none }
.gm-marker:focus-visible{ outline:3px solid var(--ink); outline-offset:4px; border-radius:50% }
.gm-pin{ width:44px; height:44px; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  display:flex; align-items:center; justify-content:center; transition:transform .15s;
  box-shadow:var(--shadow); border:2.5px solid var(--p-paper-0); }
.gm-pin > span{ transform:rotate(45deg); display:flex; color:var(--p-paper-0) }
.gm-pin .v2-ico{ inline-size:20px; block-size:20px }
.gm-marker.is-hot .gm-pin{ transform:rotate(-45deg) scale(1.18) }
.gm-marker.is-hot .gm-cluster{ transform:scale(1.12) }
@media (prefers-reduced-motion:reduce){ .gm-pin{ transition:none } }
.gm-pin.c1{ background:var(--c1) } .gm-pin.c2{ background:var(--c2) } .gm-pin.c3{ background:var(--c3) }
.gm-pin.c4{ background:var(--c4) } .gm-pin.c5{ background:var(--c5) } .gm-pin.c6{ background:var(--c6) }
.gm-pin.c7{ background:var(--c7) } .gm-pin.c8{ background:var(--c8) } .gm-pin.c9{ background:var(--c9) }
.gm-pin.c10{ background:var(--c10) } .gm-pin.c11{ background:var(--c11) } .gm-pin.c12{ background:var(--c12) }
.gm-pin.c13{ background:var(--c13) }
/* ⚠ טקסט var(--p-ink-0), לא #fff — ממצא G4 חי, 20.09.2026: לבן על --c1
   (#FF5B2E) = 3.09, מתחת ל-4.5 (15px/800 אינו "טקסט גדול"). דיו כהה על
   אותו מילוי = 5.64, קבוע ואינו מתהפך (שני הצדדים hex קבועים) — בדיוק
   התיקון ש-.cat-chip.on[data-cat="1"] כבר עושה לאותו --c1 (map.css למעלה).
   לא משנים את המילוי — --c1 הוא צבע המותג. */
.gm-cluster{ width:44px; height:44px; border-radius:50%; background:var(--c1); color:var(--p-paper-0);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-head);
  font-weight:800; font-size:15px; border:3px solid var(--p-paper-0); box-shadow:var(--shadow);
  position:relative; transition:transform .15s; }
.gm-cluster::after{ content:''; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid var(--c1); opacity:.35; animation:gm-ping 2.2s ease-out infinite }
/* The count text follows the same rule as the selected category chip: only the two LIGHT hues (c1, c11) take ink text,
   every other category fill is dark enough for paper text (measured: ink on c2 was 2.21:1, paper on it is 7.89:1). */
.gm-cluster.c1,.gm-cluster.c11{ color:var(--p-ink-0) }
@keyframes gm-ping{ 0%{ transform:scale(.85); opacity:.5 } 100%{ transform:scale(1.25); opacity:0 } }
@media (prefers-reduced-motion:reduce){ .gm-cluster::after{ animation:none } .gm-cluster{ transition:none } }

/* ── popup card ── */
.leaflet-popup-content-wrapper{ border-radius:var(--radius-xl) !important; border-end-start-radius:var(--radius-sm) !important; padding:0 !important; overflow:hidden;
  box-shadow:var(--shadow-3) !important; background:var(--surface) !important; color:var(--ink) !important }
.leaflet-popup-content{ margin:0 !important; width:250px !important; }
.leaflet-popup-tip{ display:none }
/* style.css:2072 מכריח direction:rtl על כל popup — באנגלית זה הציג טקסט אנגלי מיושר לימין. */
html[dir="ltr"] .leaflet-popup-content{ direction:ltr }
.leaflet-container a.leaflet-popup-close-button{ inset-block-start:6px; inset-inline-end:6px; inset-inline-start:auto; right:auto;
  inline-size:30px; block-size:30px; line-height:28px; font-size:22px; text-align:center; border-radius:50%;
  background:var(--surface); color:var(--ink); box-shadow:0 1px 4px rgba(20,19,16,.3); padding:0 }
.gm-card{ font-family:var(--font-body,inherit) }
.gm-card .ph{ height:120px; background-color:var(--band); background-position:center; background-size:cover; background-repeat:no-repeat }
/* ^ NOT the background shorthand: it would reset background-image and wipe the category photo that card.css paints
   from data-cat (and the real cover applyCovers sets), leaving the popup photo blank. */
.gm-card .bd{ padding:12px 13px 13px; background:var(--surface) }
.gm-card .tag{ display:inline-flex; align-items:center; gap:5px; font-size:var(--t-sm); font-weight:700;
  padding:3px 10px; border-radius:99px; margin-bottom:var(--sp-2); background:var(--band); color:var(--ink); border:1px solid var(--line-strong) }
.gm-card h3{ font-family:var(--font-display); font-size:var(--t-title-row); font-weight:400; margin:0 0 var(--sp-2); line-height:1.2; color:var(--ink) }
.gm-card .row{ font-size:var(--t-meta); color:var(--ink-soft); margin:3px 0; display:flex; align-items:center; gap:7px }
/* the one primary action of the card: an ink pill (the site's .btn pair). Leaflet colours links, so the selector is long. */
.leaflet-container .gm-card a.cta{ display:flex; align-items:center; justify-content:center; min-block-size:var(--v2-tap); margin-top:var(--sp-3);
  background:var(--brand); color:var(--brand-ink); font-weight:700; padding:var(--sp-2) var(--sp-4); border-radius:var(--radius-pill); text-decoration:none; font-family:var(--font-head) }
.leaflet-container .gm-card a.cta:hover{ opacity:.88 }
.gm-card .rating-badge{ margin-inline-start:4px; font-size:12px }
/* "×N מפגשים" - a series with more than one upcoming session (map.js seriesBadgeHtml, 22.10.2026). A full pill with ink
   text on the page band: no colour carries the meaning, the words do. Used in the popup card, the list row and the
   cluster row, so it is not scoped to .gm-card. */
.gm-series-badge{ display:inline-flex; align-items:center; align-self:flex-start; margin-block:4px 0; margin-inline-start:4px;
  padding:2px 10px; min-block-size:24px; border-radius:var(--radius-pill); background:var(--band); color:var(--ink);
  border:1px solid var(--line-strong); font-size:12px; font-weight:700; line-height:1.3; white-space:nowrap }
.gm-clu-row .gm-series-badge{ display:inline-flex; margin-inline-start:0 }
.gm-card .gm-clu-row{ color:inherit; display:flex; flex-direction:column; gap:2px; padding:9px 0; border-block-start:1px solid var(--line);
  text-decoration:none }
.gm-clu-row b{ color:var(--ink); font-size:var(--t-meta) }
.gm-clu-row span{ font-size:var(--t-sm); color:var(--ink-soft) }
/* .save-btn itself is shared (style.css) — full-width here only, to match .cta's own width */
.gm-save-row{ margin-top:8px }
.gm-save-row .save-btn{ width:100%; justify-content:center }
.gm-save-row .gshare-btn{ width:100%; justify-content:center }

/* הודעת כשל אריחים — נראית רק כשאף אריח לא נטען (map.js, אריחי OSM בנפילה) */
.map-tiles-note{ position:absolute; inset-inline:12px; inset-block-end:34px; z-index:500; margin:0;
  padding:10px 14px; background:var(--surface); color:var(--ink); border:1px solid var(--line-strong,var(--line));
  border-radius:var(--radius); box-shadow:var(--shadow); font-size:13px; line-height:1.5 }
.map-tiles-note[hidden]{ display:none }

/* ── בקרי Leaflet — בזהות האתר (בקרים בצד הנגדי לפאנל, map.js controlsPos) ── */
.map-wrap .leaflet-bar{ border:1px solid var(--line-strong); border-radius:12px; box-shadow:var(--shadow); overflow:hidden }
.map-wrap .leaflet-bar a, .map-wrap .leaflet-touch .leaflet-bar a{
  inline-size:var(--v2-tap); block-size:var(--v2-tap); line-height:var(--v2-tap); background:var(--surface); color:var(--ink);
  border-block-end:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:22px }
.map-wrap .leaflet-bar a:last-child{ border-block-end:0 }
.map-wrap .leaflet-bar a:hover{ background:var(--signal); color:var(--on-signal) }
.map-wrap .leaflet-bar a.leaflet-disabled{ color:var(--ink-faint); background:var(--band) }
.loc-btn .v2-ico{ inline-size:20px; block-size:20px }
.map-wrap .leaflet-control-attribution{ background:color-mix(in srgb,var(--surface) 88%,transparent) !important;
  color:var(--ink-soft); font-size:11px; border-radius:8px 8px 0 0; padding:2px 8px }
.map-wrap .leaflet-control-attribution a{ color:var(--ink); text-decoration:underline }
/* שכבת ה-GL: הקנבס של MapLibre יושב בתוך חלונית ה-tile של Leaflet. */
.leaflet-gl-layer{ position:absolute; top:0; left:0 }
.leaflet-gl-layer.maplibregl-map{ position:absolute; font:inherit }

/* ── נייד (≤820px): גיליון תחתון ──
   בלי JS (אין .has-sheet) זו חלוקה פשוטה: מפה למעלה והרשימה זורמת מתחתיה בגלילת הדף.
   עם JS: המפה ממלאת את כל האזור והפאנל הופך לגיליון בשלושה מצבים (map.js, wireSheet).
   03.10.2026 — "תפריט הסינון נחתך" (המנכ"ל 03.09): הסיבה המקורית היתה גובה קבוע ללא גלילה;
   בגיליון הרשימה גוללת בתוך הגיליון והפאנל כולו תמיד בטווח הגעה. */
@media (max-width:820px){
  .map-shell{ display:block; padding:0; block-size:auto; min-block-size:0 }
  .map-wrap{ block-size:clamp(300px,52vh,560px); border-radius:0; border-inline:0 }
  .map-side{ border-radius:0; border-inline:0; box-shadow:none; overflow:visible; padding-block-end:76px /* מקום לכפתור הנגישות הצף */ }
  .map-side .act-list{ overflow:visible; flex:none }   /* .map-side: ספציפיות — .act-list הבסיסי מוגדר למעלה */
  .map-sheet-handle{ display:none }
  /* the floating accessibility button sits over the bottom inline-end corner of the sheet: the "show on map" button
     goes to the top of that column and the photo under it */
  .act-locate{ inset-block-start:var(--sp-4); inset-block-end:auto }
  .act-item .act-thumb{ margin-block-start:calc(var(--v2-tap) + var(--sp-2)) }

  /* מצב גיליון */
  body.is-map{ --map-reserve:0px }
  .map-shell.has-sheet{ block-size:calc(100vh - 64px - var(--map-reserve)); block-size:calc(100dvh - 64px - var(--map-reserve)); min-block-size:420px }
  .map-shell.has-sheet .map-wrap{ position:absolute; inset:0; block-size:auto }
  .map-shell.has-sheet .map-side{
    position:absolute; z-index:900; inset-inline:0; inset-block-end:0; padding-block-end:0;
    block-size:var(--sheet-h,var(--sheet-peek)); overflow:hidden;
    border-radius:20px 20px 0 0; border-block-end:0; box-shadow:0 -10px 30px -12px rgba(20,19,16,.4);
    transition:block-size .28s var(--ease-out,ease);
  }
  .map-shell.has-sheet[data-sheet="peek"]{ --sheet-h:var(--sheet-peek) }
  .map-shell.has-sheet[data-sheet="half"]{ --sheet-h:50% }
  .map-shell.has-sheet[data-sheet="full"]{ --sheet-h:calc(100% - 8px) }
  .map-shell.has-sheet.is-dragging .map-side{ transition:none }
  .map-shell.has-sheet .act-list{ overflow-y:auto; flex:1 }
  .map-shell.has-sheet .map-sheet-handle{
    display:flex; align-items:center; justify-content:center; flex:none; inline-size:100%; block-size:28px;
    margin:0; padding:0; border:0; border-radius:0; background:var(--signal); cursor:grab; touch-action:none;
  }
  .map-sheet-grip{ inline-size:44px; block-size:5px; border-radius:99px; background:var(--on-signal); opacity:.5 }
  /* the visible bar stays 28px; the touch target is extended to 44px without moving anything */
  .map-shell.has-sheet .map-sheet-handle{ position:relative }
  .map-shell.has-sheet .map-sheet-handle::after{ content:''; position:absolute; inset-inline:0; inset-block:-8px }
  .map-sheet-handle:focus-visible{ outline:3px solid var(--on-signal); outline-offset:-5px }
  .map-shell.has-sheet .map-side-head{ padding-block-start:4px }
  .map-shell.has-sheet .map-filters-toggle{ padding-inline-end:72px /* מקום לכפתור הנגישות */ }
  /* ההערה על מיקום מקורב נשארת, אבל בגיליון היא נפתחת רק במצב מלא — ב-peek/half היא אכלה
     כרבע מהגיליון והשאירה לרשימה פחות ממחצית כרטיס. הסמן עצמו (עיגול 500 מ') ממחיש את האי-דיוק. */
  /* הכפתור הצף של הנגישות יושב בפינה התחתונה ב-inline-end, מעל כפתור "הצג על המפה" בתחתית
     הכרטיס — בנייד הכפתור עולה לפינה העליונה של הכרטיס. */
  .map-shell.has-sheet .map-note{ display:none }
  .map-shell.has-sheet[data-sheet="full"] .map-note{ display:block }
  /* בקרי הייחוס/התחתית של Leaflet רוכבים מעל הגיליון — הייחוס חייב להישאר גלוי */
  .map-shell.has-sheet .leaflet-bottom{ bottom:min(var(--sheet-h,var(--sheet-peek)),55%); transition:bottom .28s var(--ease-out,ease) }
  .map-shell.has-sheet.is-dragging .leaflet-bottom{ transition:none }
  @media (prefers-reduced-motion:reduce){
    .map-shell.has-sheet .map-side, .map-shell.has-sheet .leaflet-bottom{ transition:none }
  }
}
/* בר תחתון של ה-app-shell (מחובר, ≤640px): הגיליון נגמר מעליו */
@media (max-width:640px){
  body.gapp-shell-on.is-map{ --map-reserve:calc(var(--shell-bottombar,60px) + env(safe-area-inset-bottom,0px)) }
}