:root {
  /* --paper משמש אך ורק לרקע-body (העטיפה מסביב למפה) - לא נוגע בשום דבר
     אחר (כרטיסים/פאנלים/פאצ'ים מחזיקים גוונים נפרדים משלהם, למשל #fffdf6). */
  --paper: #d7e4e6; --ink: #2b2620; --ink-soft: #7a6f5c;
  --olive: #6e7c4c; --olive-deep: #4e5a38; --terracotta: #bd6c47; --land-line: #b9a06c;
  /* גופן כותרות עורכני/דק - Heebo (Google Fonts, נטען ב-anchor-map.html),
     גרוטסק עברי נקי ומאופק במשקל דק (300) - לא serif "עיתונאי" כבד ולא
     sans כבד/עגול-ילדותי. נופל בבטחה ל-Assistant/Arial אם הטעינה נכשלת. */
  --font-heading: "Heebo", "Assistant", Arial, sans-serif;
  /* שפת חלונות קומפקטית - מידות משותפות לכל החלונות/פאנלים שנפתחים מהמפה,
     כך שהמפה נשארת גלויה סביבם. רשימות (קהילה/עסקים/אירועים/יוצרים) צרות;
     כרטיסי תוכן (ישות/מקום/גיבורים) רחבים יותר. הגובה תמיד מוגבל - תוכן ארוך נגלל בפנים. */
  /* מידות החלונות יחסיות למפה (--map-w/--map-h נמדדים ב-JS), כך שהחלון תמיד
     קטן מהמפה ומשאיר אותה גלויה - בכל גודל מסך ובכל רמת זום. */
  --panel-list-w: clamp(220px, calc(var(--map-w, 820px) * 0.42), 340px);
  --panel-list-max-h: min(64vh, calc(var(--map-h, 860px) * 0.64), 560px);
  --panel-card-w: clamp(260px, calc(var(--map-w, 820px) * 0.6), 500px);
  --panel-card-max-h: min(66vh, calc(var(--map-h, 860px) * 0.7), 600px);
  /* מובייל: גיליון תחתון שנגמר מתחת למפה (המפה תופסת כ-47% עליונים) */
  --sheet-max-h: 52vh;
  /* סולם טיפוגרפיה משותף לכל החלונות - בגובה המקרא של המפה (13.5px כשהמפה
     רחבה). כשהמפה צרה (data-map-size='s', המקרא 9.5px) - הסולם הקטן בהמשך. */
  --fs-h1: 15px;      /* כותרת חלון */
  --fs-h2: 14px;      /* כותרת משנה, כותרת חלון-רשימה */
  --fs-body: 13px;    /* טקסט רץ */
  --fs-item: 13px;    /* כותרת שורה ברשימה, טקסט שורה */
  --fs-btn: 12px;     /* כפתורים */
  --fs-chip: 11px;    /* שבבים / תגיות */
  --fs-meta: 11px;    /* מטא-דאטה, הערות */
}
/* מפה צרה (טלפון, חלון קטן, זום גבוה): המקרא 9.5px - החלונות בפרופורציה */
:root[data-map-size="s"] {
  --fs-h1: 12.5px; --fs-h2: 12px; --fs-body: 10.5px; --fs-item: 10.5px;
  --fs-btn: 10.5px; --fs-chip: 9.5px; --fs-meta: 9.5px;
}
/* לפני שה-JS מדד את המפה: מסך צר = מפה צרה */
@media (max-width: 640px) {
  :root:not([data-map-size]) {
    --fs-h1: 12.5px; --fs-h2: 12px; --fs-body: 10.5px; --fs-item: 10.5px;
    --fs-btn: 10.5px; --fs-chip: 9.5px; --fs-meta: 9.5px;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: "Segoe UI", "Arial Hebrew", Arial, system-ui, sans-serif; background: var(--paper); color: var(--ink); direction: rtl; }
.am-app { --map-gutter: 16px; --map-vgap: 24px; margin: 0 auto; padding: 24px var(--map-gutter) 44px; }
/* גודל המפה: הגדול ביותר שנכנס בחלון כולו - גם ברוחב (width: 100% פחות השוליים
   בצדדים) וגם בגובה (גובה החלון פחות --map-vgap), לפי יחס מסגרת התצוגה 1196x1185
   (החלק של האיור 1223x1286 שבו נמצאת השכונה - ראו MAP_FRAME ב-anchor-map.js).
   המפה צרה וגבוהה, ולכן במסכי מחשב רגילים הגובה הוא הגבול: אז היא תופסת כמעט
   את כל הגובה ומתמרכזת, והחלק התחתון (המצפן, קנה המידה, "עושים קהילה") תמיד
   בתוך החלון. dvh: גובה החלון הנראה בפועל בדפדפני מובייל. רצפה 320px.
   רק max-width - היחס נשמר, ונקודות העוגן (ב-%) נשארות מיושרות. */
.am-map-stage { position: relative; width: 100%; margin: 0 auto; max-width: max(320px, calc((100vh - var(--map-vgap)) * 1196 / 1185)); }
@supports (height: 100dvh) {
  .am-map-stage { max-width: max(320px, calc((100dvh - var(--map-vgap)) * 1196 / 1185)); }
}
/* דסקטופ: המפה ממורכזת אנכית ואופקית בחלון, עם 12px מעל ומתחת, בלי גלילת-עמוד.
   במובייל-לאורך הרוחב הוא הגבול והפריסה צמודה למעלה (שוליים צרים יותר). */
@media (min-width: 641px) {
  .am-app { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: 0; padding-bottom: 0; }
}
@media (max-width: 640px) {
  .am-app { --map-gutter: 10px; padding-top: 16px; padding-bottom: 120px; } /* מקום ל"עושים קהילה", לכפתור השיתוף ולקו-הרקיע מתחת למפה */
}
.am-map-stage img.base-photo { width: 100%; display: block; border-radius: 12px; }

/* Hotspot: אזור-קליק 44px, אייקון-האיור עצמו קטן/שקוף - זה שכבת PRESENTATION בלבד */
.am-hotspot {
  position: absolute; transform: translate(-50%, -50%);
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  background: none; border: none; cursor: pointer; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.am-hotspot:hover, .am-hotspot:focus-visible { background: rgba(191,108,71,0.14); box-shadow: 0 0 0 2px rgba(191,108,71,0.35); }
.am-hotspot.is-active { background: rgba(191,108,71,0.22); box-shadow: 0 0 0 2px var(--terracotta); }

/* כרטיס - Modal מרכזי, גדול, מעוצב - "סיפור שנפתח מתוך המפה" */
.am-scrim { position: fixed; inset: 0; background: rgba(43,38,32,0.3); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 24px; }
.am-card {
  background: #fffdf6; border-radius: 22px; max-width: var(--panel-card-w); width: 100%; max-height: var(--panel-card-max-h); overflow-y: auto;
  padding: 0; position: relative; box-shadow: 0 30px 70px rgba(43,38,32,0.4);
}
.am-card .close-btn, .am-creators-panel > .close-btn {
  position: absolute; top: 12px; left: 14px; width: 30px; height: 30px; padding: 0; border-radius: 50%;
  background: rgba(255,253,246,0.95); border: 1px solid var(--land-line); font-size: 14px; cursor: pointer; color: var(--ink-soft); z-index: 5;
  display: flex; align-items: center; justify-content: center;
}
.am-card .close-btn:hover, .am-creators-panel > .close-btn:hover { background: #fffdf6; color: var(--ink); }

/* וידאו = תוכן ראשי: יחס 16:9 אמיתי, רוחב מלא, לא תיבה קטנה */
.am-video-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #1a1a1a; }
.am-video-wrap:first-child { border-radius: 22px 22px 0 0; overflow: hidden; }
.am-video-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.am-card-hero { width: 100%; height: min(200px, calc(var(--map-h, 860px) * 0.24)); object-fit: cover; border-radius: 22px 22px 0 0; display: block; }
.am-card-body { padding: 20px 24px 22px; }
.am-card-body.no-hero { padding-top: 46px; }
.am-card-title { font-family: var(--font-heading); font-size: var(--fs-h1); font-weight: 500; line-height: 1.3; letter-spacing: 0.1px; margin: 0 0 6px; }
.am-card-category { display: inline-block; font-size: var(--fs-meta); color: var(--ink-soft); margin-bottom: 12px; }
.am-card-desc { font-size: var(--fs-body); line-height: 1.7; white-space: pre-wrap; margin: 0 0 6px; }
.am-gallery { display: flex; gap: 10px; overflow-x: auto; margin: 16px 0 6px; }
.am-gallery img { width: 96px; height: 96px; object-fit: cover; border-radius: 12px; flex-shrink: 0; }
.am-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.am-btn { display: inline-block; padding: 7px 15px; border-radius: 999px; text-decoration: none; font-size: var(--fs-btn); font-weight: 500; line-height: 1.35; border: none; cursor: pointer; font-family: inherit; }
.am-btn.link { background: var(--olive); color: #fffdf6; }
.am-btn.link:hover { background: var(--olive-deep); }
.am-btn.whatsapp { background: #3fae5c; color: #fffdf6; }
.am-btn.whatsapp:hover { background: #33914c; }
.am-card-credit { margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--land-line); font-size: 10px; color: #b3a684; direction: ltr; text-align: right; unicode-bidi: plaintext; }

/* אייקון landmark נעול בראש הכרטיס (אם יש לישות אחד) - זיהוי חזותי בלבד, לא נוגע בקובץ עצמו */
.am-card-locked-icon { display: block; max-width: 56px; max-height: 56px; width: auto; height: auto; margin: 0 0 10px; }

/* ===== אתר מוטמע בתוך אותו כרטיס (לא טאב חדש) - סרגל "חזרה" + iframe מלא-רוחב =====
   padding-left משאיר מקום לכפתור הסגירה (✕) שממוקם absolute מעל הכרטיס. */
.am-embed-wrap { display: flex; flex-direction: column; }
.am-embed-bar {
  display: flex; align-items: center; gap: 10px; padding: 14px 20px 14px 54px;
  border-bottom: 1px solid var(--land-line); background: #fffdf6; border-radius: 22px 22px 0 0;
}
.am-embed-back { background: none; border: none; color: var(--terracotta); font-size: var(--fs-btn); font-weight: 600; cursor: pointer; padding: 4px 0; font-family: inherit; }
.am-embed-back:hover { color: var(--olive-deep); }
.am-embed-title { font-size: var(--fs-btn); font-weight: 600; color: var(--ink); }
.am-embed-frame { width: 100%; height: 65vh; border: 0; display: block; background: #fff; }
.am-embed-note { padding: 8px 20px 14px; font-size: var(--fs-meta); color: var(--ink-soft); text-align: center; }

/* Mobile: bottom-sheet כמעט מלא-מסך */
@media (max-width: 640px) {
  .am-hotspot { width: 40px; height: 40px; }
  .am-scrim { align-items: flex-end; padding: 0; }
  .am-card { max-width: 100%; width: 100%; max-height: var(--sheet-max-h); border-radius: 20px 20px 0 0; }
  .am-video-wrap:first-child, .am-card-hero { border-radius: 20px 20px 0 0; }
  .am-card-hero { height: 140px; }
  .am-card-body { padding: 14px 16px 18px; }
  .am-card-body.no-hero { padding-top: 42px; }
  .am-card .close-btn, .am-creators-panel > .close-btn { top: 9px; left: 10px; width: 32px; height: 32px; }
  .am-btn { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 6px 14px; }
  .am-actions { gap: 8px; margin-top: 12px; }
  .am-embed-bar { border-radius: 20px 20px 0 0; }
  .am-embed-frame { height: 60vh; }
}

/* ===== חלונית "יוצרים שכונה" - מרגישה כחלק מהמפה, לא חלון טכני ===== */
.am-creators-scrim { background: rgba(43,38,32,0.3); }
.am-creators-panel {
  background: #fffdf6; border-radius: 18px; max-width: var(--panel-list-w); width: 100%; max-height: var(--panel-list-max-h); overflow-y: auto;
  padding: 16px 18px 16px; position: relative; box-shadow: 0 24px 55px rgba(43,38,32,0.35);
  border: 1px solid var(--land-line);
}
.am-creators-title { font-family: var(--font-heading); font-size: var(--fs-h2); font-weight: 500; letter-spacing: 0.1px; text-align: center; color: var(--ink); margin-top: 0; line-height: 1.3; }
.am-creators-sub { font-size: var(--fs-chip); color: var(--ink-soft); text-align: center; margin: 2px 0 12px; line-height: 1.5; }

/* ===== סרט-המסלול "עושים קהילה" (הקשבה←הזמנה←השתתפות←יצירה←חגיגה) -
   פס דק ושקט בגווני צבעי-מים מעל האפשרויות: סמן מתודולוגי, לא שורת כפתורים.
   כל שלב מקבל גוון משלו (חרדל / טרקוטה / כחול / זית / טורקיז, מהשפה הקיימת).
   "השתתפות" ממשיכה לפתוח את פאנל האירועים. במסלול פתוח - השלבים שהוא ממחיש
   מודגשים והשאר נסוגים. ===== */
.am-journey.am-ribbon {
  display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 3px;
  margin: 6px auto 12px; padding: 4px 12px; border-radius: 999px; width: fit-content; max-width: 100%;
  background:
    radial-gradient(120% 160% at 0% 50%, rgba(245, 160, 58, 0.20), transparent 55%),
    radial-gradient(120% 160% at 30% 40%, rgba(189, 108, 71, 0.15), transparent 55%),
    radial-gradient(120% 160% at 55% 60%, rgba(26, 76, 149, 0.11), transparent 55%),
    radial-gradient(120% 160% at 80% 40%, rgba(110, 124, 76, 0.15), transparent 55%),
    radial-gradient(120% 160% at 100% 50%, rgba(31, 122, 114, 0.17), transparent 55%),
    #fbf5e8;
  box-shadow: inset 0 0 0 1px rgba(185, 160, 108, 0.32);
}
.am-ribbon-stage { --st: var(--ink); display: inline-flex; align-items: center; padding: 1px 3px; border: 0; background: none; border-radius: 999px; font-family: inherit; cursor: default; }
.am-ribbon-listening { --st: #a26f10; } .am-ribbon-invitation { --st: #b0603d; } .am-ribbon-participation { --st: #1a4c95; }
.am-ribbon-creation { --st: #56653a; } .am-ribbon-celebration { --st: #1f7a72; }
.am-ribbon .am-journey-stage-label { font-size: calc(var(--fs-meta) - 0.5px); font-weight: 500; color: var(--st); white-space: nowrap; line-height: 1.3; letter-spacing: 0.1px; }
.am-ribbon .am-journey-arrow { color: rgba(122, 111, 92, 0.55); font-size: 8.5px; line-height: 1; flex-shrink: 0; }
.am-ribbon .am-journey-stage--live { cursor: pointer; }
.am-ribbon .am-journey-stage--live:hover .am-journey-stage-label, .am-ribbon .am-journey-stage--live:focus-visible .am-journey-stage-label { text-decoration: underline; text-underline-offset: 2px; }
.am-ribbon.has-focus .am-ribbon-stage:not(.is-on) { opacity: 0.45; }
.am-ribbon .am-ribbon-stage.is-on { background: rgba(255, 253, 246, 0.85); box-shadow: 0 0 0 1px color-mix(in srgb, var(--st) 35%, transparent); padding: 1px 7px; }
.am-ribbon .am-ribbon-stage.is-on .am-journey-stage-label { font-weight: 700; }

.am-creators-panel { container-type: inline-size; }
/* חלונית צרה (מפה קטנה): הסרט מתהדק כדי להישאר בשורה אחת */
@container (max-width: 300px) {
  .am-journey.am-ribbon { padding: 3px 6px; gap: 1px; }
  .am-ribbon-stage { padding: 1px 2px; }
  .am-ribbon .am-ribbon-stage.is-on { padding: 1px 4px; }
  .am-ribbon .am-journey-arrow { font-size: 7.5px; }
  .am-ribbon .am-journey-stage-label { letter-spacing: 0; }
}
.am-creators-main-title { font-size: var(--fs-h1); margin-bottom: 0; }
.am-creators-caption { font-size: var(--fs-meta); color: var(--ink-soft); margin: 0 2px 6px; }
.am-creators-list { display: flex; flex-direction: column; gap: 6px; }
.am-creators-option {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: right;
  padding: 7px 12px; border-radius: 10px; border: 1px solid var(--land-line); background: #fffaf0;
  font-size: var(--fs-item); line-height: 1.4; color: var(--ink); cursor: pointer; transition: background 0.12s ease, transform 0.12s ease;
}
.am-creators-option:hover { background: #f5ecd4; transform: translateX(-2px); }
.am-creators-emoji { font-size: calc(var(--fs-item) + 1px); flex-shrink: 0; }

/* ===== "בקרוב" - 6 מתוך 7 האפשרויות עדיין בלי יעד אמיתי מאחוריהן, אז לא
   מוצגות כפעילות (אין onClick, cursor רגיל, opacity מופחתת - אותם צבעים/
   גופן/רדיוסים בדיוק, בלי שפה חזותית חדשה) ===== */
.am-creators-option-future { cursor: default; opacity: 0.55; }
.am-creators-option-future:hover { background: #fffaf0; transform: none; }
.am-creators-future-tag { margin-inline-start: auto; font-size: calc(var(--fs-chip) - 1px); color: var(--ink-soft); }
/* אפשרות פעילה: שם + שם-משנה קטן, וחץ עדין בקצה */
.am-creators-option-text { display: flex; flex-direction: column; min-width: 0; }
.am-creators-option-sub { font-size: calc(var(--fs-meta) - 0.5px); color: var(--ink-soft); line-height: 1.2; }
.am-creators-go { margin-inline-start: auto; color: var(--terracotta); font-size: calc(var(--fs-item) + 2px); line-height: 1; }

/* ===== מסלולי ה-MVP ("הזמנה לשיחה קהילתית" / "מובילים יוזמה קהילתית"):
   הזמנה, לא טופס מנהלי - משטח קרם, כותרת עם אמוג'י, מעט טקסט, שדות רכים. ===== */
.am-flow { display: flex; flex-direction: column; }
.am-flow .am-creators-back { align-self: flex-start; padding-bottom: 14px; }
.am-flow .am-ribbon { margin: 2px auto 10px; }
.am-flow-head { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.am-flow-emoji {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 20px;
  background: radial-gradient(circle at 35% 30%, rgba(245, 160, 58, 0.28), rgba(189, 108, 71, 0.14) 60%, rgba(185, 160, 108, 0.08));
  box-shadow: inset 0 0 0 1px rgba(185, 160, 108, 0.35);
}
.am-flow[data-flow="initiative"] .am-flow-emoji { background: radial-gradient(circle at 35% 30%, rgba(110, 124, 76, 0.28), rgba(31, 122, 114, 0.14) 60%, rgba(185, 160, 108, 0.08)); }
.am-flow-title { text-align: right; font-size: var(--fs-h1); line-height: 1.25; }
.am-flow-kicker { font-size: var(--fs-meta); color: var(--terracotta); margin-top: 1px; }
.am-flow[data-flow="initiative"] .am-flow-kicker { color: var(--olive-deep); }
.am-flow-intro { margin: 0 0 8px; font-size: var(--fs-item); line-height: 1.55; color: var(--ink); }
.am-flow-steps { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0 0 10px; padding: 0; list-style: none; counter-reset: st; }
.am-flow-steps li { counter-increment: st; font-size: var(--fs-meta); color: var(--ink-soft); background: #fbf5e8; border-radius: 999px; padding: 2px 9px 2px 8px; box-shadow: inset 0 0 0 1px rgba(185, 160, 108, 0.3); }
.am-flow-steps li::before { content: counter(st) ". "; color: var(--terracotta); font-weight: 600; }
.am-flow-form { display: flex; flex-direction: column; gap: 8px; }
.am-flow-field { display: flex; flex-direction: column; gap: 3px; }
.am-flow-label { font-size: var(--fs-item); font-weight: 600; color: var(--ink); }
.am-flow-input {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 44px; padding: 7px 10px; border-radius: 12px;
  border: 1px solid rgba(185, 160, 108, 0.55); background: #fffaf0; font-family: inherit; font-size: var(--fs-item); line-height: 1.45; color: var(--ink);
}
.am-flow-input::placeholder { color: #ad9f82; }
.am-flow-input:focus { outline: none; border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(189, 108, 71, 0.12); background: #fffdf6; }
.am-flow-submit { align-self: center; margin-top: 4px; padding: 8px 22px; background: var(--terracotta); }
.am-flow-submit:hover { background: #a65a39; }
.am-flow-submit:disabled { opacity: 0.45; cursor: default; background: var(--terracotta); }
.am-flow-sources { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; font-size: var(--fs-meta); color: var(--ink-soft); margin-top: 2px; }
.am-flow-sources a { color: var(--olive-deep); }
/* כרטיס ההזמנה שנוצר */
.am-flow-result { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.am-invite-card {
  position: relative; padding: 14px 16px 12px; border-radius: 16px; background: #fffdf6;
  box-shadow: inset 0 0 0 1px rgba(185, 160, 108, 0.45), 0 6px 18px rgba(43, 38, 32, 0.08);
  background-image: radial-gradient(140% 90% at 100% 0%, rgba(245, 160, 58, 0.14), transparent 55%), radial-gradient(120% 90% at 0% 100%, rgba(31, 122, 114, 0.1), transparent 55%);
}
.am-invite-card-title { font-family: var(--font-heading); font-style: italic; font-weight: 500; font-size: var(--fs-h2); color: #16304f; margin-bottom: 6px; }
.am-invite-card-row + .am-invite-card-row { margin-top: 7px; padding-top: 7px; border-top: 1px dashed rgba(185, 160, 108, 0.45); }
.am-invite-card-q { font-size: var(--fs-meta); color: var(--ink-soft); }
.am-invite-card-a { font-size: var(--fs-item); color: var(--ink); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.am-flow-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.am-flow-note { font-size: var(--fs-meta); color: var(--ink-soft); text-align: center; }
.am-flow-next { align-self: center; background: none; border: 0; padding: 2px 4px; font-family: inherit; font-size: var(--fs-meta); color: var(--terracotta); cursor: pointer; }
.am-flow-next:hover { text-decoration: underline; }

/* ===== תת-מסך פעולה בתוך שער "יוצרים שכונה" (למשל "מוסיפים סיפור למפה") -
   אותה חלונית בדיוק, בלי חלון/צבע/פריסה חדשים ===== */
.am-creators-back { background: none; border: none; color: var(--ink-soft); font-size: var(--fs-meta); cursor: pointer; padding: 0 0 10px; }
.am-creators-back:hover { color: var(--ink); }
.am-creators-detail { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; }
.am-creators-detail .am-btn { margin-top: 4px; }

@media (max-width: 640px) {
  .am-creators-scrim { align-items: flex-end; padding: 0; }
  .am-creators-panel { max-width: 100%; border-radius: 18px 18px 0 0; max-height: var(--sheet-max-h); padding: 12px 14px 14px; }
  .am-ribbon { padding: 4px 8px; gap: 2px; }
  .am-flow-input { font-size: 16px; height: 44px; min-height: 0; padding: 8px 10px; } /* iOS: בלי זום אוטומטי בפוקוס; שורה וחצי */
  .am-flow-input::placeholder { font-size: 14px; }
  .am-flow-actions .am-btn { min-height: 36px; }
  .am-creators-option { padding: 6px 10px; }
  .am-creators-list { gap: 5px; }
  .am-creators-sub { margin-bottom: 10px; }
}

/* ===== מדריך קהילה (Community Directory) - שימוש חוזר בשפה החזותית של
   am-creators-panel/am-btn הקיימים, בלי צבעים/אייקונים/שפה חזותית חדשה ===== */
.am-directory-panel { max-width: calc(var(--panel-list-w) + 20px); }
@media (max-width: 640px) { .am-directory-panel { max-width: 100%; } }
/* list views only: flex column so the list takes the space left under the header
   and only the list scrolls (no nested scroll). Detail views keep normal flow. */
.am-directory-panel:has(> .am-directory-list) { display: flex; flex-direction: column; }
.am-directory-panel:has(> .am-directory-list) > * { flex-shrink: 0; }
.am-directory-panel:has(> .am-directory-list) > .close-btn { align-self: flex-start; }
.am-directory-panel > .am-directory-list { flex: 0 1 auto; min-height: 0; }
/* חלון נמוך (למשל מסך רחב ונמוך, או זום): הרשימה לא מתכווצת לאפס מתחת לכותרת,
   לחיפוש ולשבבי הסינון - נשאר לה גובה מינימלי, והחלון כולו נגלל במקום זאת. */
.am-directory-panel > .am-directory-list:has(> .am-business-item) { min-height: min(150px, 45vh); }
.am-directory-search {
  width: 100%; margin: 0 0 8px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--land-line); background: #fffaf0; font-size: var(--fs-item); color: var(--ink);
  font-family: inherit;
}
.am-directory-search:focus { outline: none; border-color: var(--terracotta); }
.am-directory-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.am-directory-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 11px; border-radius: 10px; border: 1px solid var(--land-line); background: #fffaf0;
}
.am-directory-item-name { font-size: var(--fs-item); color: var(--ink); font-weight: 500; line-height: 1.4; }
.am-directory-item-type { font-size: var(--fs-meta); color: var(--ink-soft); margin-top: 2px; }
.am-directory-item-desc { font-size: var(--fs-item); color: var(--ink); margin-top: 3px; line-height: 1.5; }
.am-directory-item-block { align-items: flex-start; flex-direction: column; align-items: stretch; }
.am-directory-item-block .am-directory-join { align-self: flex-start; margin-top: 6px; }
.am-directory-join { padding: 4px 11px; font-size: var(--fs-chip); flex-shrink: 0; white-space: nowrap; }
/* פעולות בשורת קהילה (הצטרפות / מידע): שבבים קטנים, נשברים לשורה שנייה אם צריך */
.am-directory-item-main { flex: 1 1 auto; min-width: 0; }
.am-directory-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px; flex: none; max-width: 45%; }
/* כפתור קצר וקטן ("הצטרפות") - לא נוגס ברוחב שם הקבוצה */
.am-directory-actions .am-btn { padding: 3px 11px; min-height: 0; font-size: var(--fs-chip); }
.am-directory-empty { text-align: center; color: var(--ink-soft); font-size: var(--fs-item); padding: 12px 0; }

/* ===== מה קורה עכשיו (Events) - שימוש חוזר ב-am-directory-item/am-creators-detail
   הקיימים, בלי שפה חזותית חדשה. am-event-item הוא כפתור (לא div) כדי לפתוח
   את פרטי האירוע - reset מינימלי של סגנונות button ברירת מחדל בלבד. ===== */
.am-directory-item.am-event-item { width: 100%; text-align: right; font-family: inherit; font-size: inherit; color: inherit; cursor: pointer; }
.am-event-form { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 6px; }
.am-event-error { color: #b23b3b; font-size: var(--fs-meta); text-align: center; }

/* ===== עסקים / משאבים (Business Directory) - שימוש חוזר ב-am-directory-item
   הקיים, בלי שפה חזותית חדשה. am-business-item הוא כפתור, כמו am-event-item.
   שבבי-הקטגוריה נבנים מהדאטה עצמה (לא רשימה קבועה שהומצאה מראש). ===== */
.am-directory-item.am-business-item { width: 100%; text-align: right; font-family: inherit; font-size: inherit; color: inherit; cursor: pointer; }
.am-business-filters { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 8px; }
/* "נמצאו N עסקים עבור ..." - שורה שקטה מעל רשימה מסוננת, עם קישור לחזרה לכל העסקים */
.am-business-filter-status { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; margin: 0 0 8px; font-size: var(--fs-meta); color: var(--ink-soft); line-height: 1.5; }
.am-business-filter-clear { font-family: inherit; font-size: inherit; font-weight: 500; color: var(--terracotta); background: none; border: 0; padding: 2px 0; cursor: pointer; }
.am-business-filter-clear:hover, .am-business-filter-clear:focus-visible { text-decoration: underline; }
@media (max-width: 640px) { .am-business-filter-clear { min-height: 32px; } }
/* במסך נמוך: שבבי הקטגוריות בשורה אחת נגללת לרוחב, כדי שלא יתפסו את כל גובה החלון */
@media (max-height: 640px) {
  .am-business-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
  .am-business-filter-chip { flex: none; white-space: nowrap; }
}
.am-business-filter-chip {
  padding: 4px 11px; border-radius: 999px; border: 1px solid var(--land-line); background: #fffaf0;
  font-family: inherit; font-size: var(--fs-chip); color: var(--ink-soft); cursor: pointer;
}
.am-business-filter-chip.is-active { background: var(--terracotta); border-color: var(--terracotta); color: #fffdf6; font-weight: 600; }
.am-business-profile { align-items: stretch; }
.am-business-category-badge {
  align-self: center; display: inline-block; padding: 3px 12px; border-radius: 999px;
  background: rgba(191,108,71,0.14); color: var(--terracotta); font-size: var(--fs-chip); font-weight: 500; margin-bottom: 6px;
}
.am-business-status-note { font-size: var(--fs-meta); color: var(--ink-soft); font-style: italic; margin-top: 3px; }
.am-business-fact { font-size: var(--fs-item); color: var(--ink); text-align: center; margin-top: 4px; }
.am-business-promotion {
  font-size: var(--fs-item); color: var(--olive-deep); background: rgba(110,124,76,0.12);
  border-radius: 10px; padding: 6px 12px; text-align: center; margin-top: 8px; font-weight: 500;
}

/* ===== הטבה / קופון לעסק (BusinessCoupon) ===== */
.am-business-coupon {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 10px;
  margin-top: 8px; padding: 8px 12px; border-radius: 10px; border: 1.5px dashed var(--olive);
  background: rgba(110,124,76,0.10); color: var(--olive-deep); font-size: var(--fs-item); text-align: center;
}
.am-business-coupon-label { font-weight: 700; }
.am-business-coupon-text { font-weight: 500; }
.am-business-coupon-code { font-size: var(--fs-meta); }
.am-business-coupon-code bdi { font-family: ui-monospace, Menlo, monospace; font-weight: 700; letter-spacing: 0.04em; background: #fffdf6; border-radius: 6px; padding: 1px 6px; }
.am-business-coupon-exp { font-size: var(--fs-meta); color: var(--ink-soft); width: 100%; }
.am-business-coupon.is-compact { justify-content: flex-start; margin-top: 5px; padding: 3px 9px; border-width: 1px; font-size: var(--fs-meta); text-align: right; }

/* ===== הצטרפות לעסקים (BusinessJoinAction) ===== */
.am-business-join-cta {
  display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; margin: 4px 0 10px;
  padding: 9px 14px; border-radius: 12px; border: 1.5px solid var(--terracotta); background: rgba(191,108,71,0.08);
  font-family: inherit; color: var(--terracotta); cursor: pointer;
}
.am-business-join-cta:hover, .am-business-join-cta:focus-visible { background: rgba(191,108,71,0.16); }
.am-business-join-cta-title { font-size: var(--fs-btn); font-weight: 700; }
.am-business-join-cta-sub { font-size: var(--fs-meta); color: var(--ink-soft); }
.am-business-join { align-items: stretch; }
.am-join-form { gap: 12px; }
.am-join-group { border: 1px solid var(--land-line); border-radius: 12px; padding: 8px 12px 12px; margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.am-join-group legend { font-weight: 700; font-size: var(--fs-item); color: var(--ink); padding: 0 6px; }
.am-join-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; text-align: right; }
.am-join-group legend { text-align: right; }
.am-join-label { font-size: var(--fs-meta); color: var(--ink-soft); font-weight: 500; }
.am-join-req { color: var(--terracotta); }
.am-join-input { margin: 0; width: 100%; box-sizing: border-box; font-family: inherit; }
textarea.am-join-input { resize: vertical; min-height: 64px; }
.am-join-input[dir="ltr"] { text-align: left; }
.am-join-row { display: flex; gap: 8px; flex-wrap: wrap; }
.am-join-hint { font-size: var(--fs-meta); color: var(--ink-soft); }
.am-join-file {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 12px;
  border: 1.5px dashed var(--land-line); border-radius: 10px; background: #fffaf0; color: var(--ink); font-size: var(--fs-item); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis;
}
.am-join-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.am-join-file:focus-within { outline: 2px solid var(--terracotta); outline-offset: 2px; }
.am-join-file.is-disabled { opacity: 0.55; cursor: default; }
.am-join-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-meta); }
.am-join-files li { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.am-join-files li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-join-remove { background: none; border: none; color: var(--terracotta); font-family: inherit; font-size: var(--fs-meta); cursor: pointer; text-decoration: underline; padding: 4px; align-self: flex-start; }
.am-join-consent { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-meta); color: var(--ink); }
.am-join-consent input { margin-top: 3px; flex: none; }
.am-join-submit { align-self: stretch; justify-content: center; }

/* ===== עוגנים על ה-Master Visual (map-background-v3.webp) - האיור נעול: כל
   אייקון ותווית כבר מצוירים בו, ולכן אין מעליו אייקונים/פאצ'ים/תיקוני-תווית.
   רק אזור-קליק שקוף, מעט גדול יותר מברירת המחדל כדי לכסות את האייקון המצויר.
   טבעת-ההדגשה הקיימת (hover/is-active של .am-hotspot) נשארת כמשוב. */
/* הגודל מוגבל גם ל-13% מרוחב המפה: שני העוגנים הקרובים ביותר (חוות הלימוד/הטיילת)
   רחוקים 13.8% מרוחב המפה, כך שאזורי-הקליק לא חופפים בשום גודל מפה. */
.am-hotspot--artwork { width: min(56px, 13%); height: auto; min-width: 0; min-height: 0; aspect-ratio: 1; }
@media (max-width: 640px) {
  .am-hotspot--artwork { width: min(40px, 13%); }
}

/* ===== רקע v4: עוגן עם אייקון נעול = כפתור עגול קטן "מורם" מעל המפה.
   הכפתור עצמו (אזור הקליק/מגע) נשאר שקוף ובגודל 56px בדסקטופ / 48px במובייל
   (≥44px), ממורכז על הקואורדינטה. העיגול הנראה (התמונה) קטן יותר: 36px / 30px,
   מילוי שנהב, טבעת כחול-כהה דקה, צל רך. hover/focus מרימים מעט; טבעת פוקוס נפרדת. */
.am-hotspot--icon { --am-icon-d: 36px; background: none; padding: 0; touch-action: manipulation; }
.am-hotspot--icon .am-hotspot-icon {
  width: var(--am-icon-d); height: var(--am-icon-d); box-sizing: border-box; padding: 2px;
  object-fit: contain; pointer-events: none; display: block; border-radius: 50%;
  /* טיפול קל ועדין: מילוי שנהב שקוף-למחצה, טבעת כחולה דקה ושקופה, צל עדין מאוד */
  background: rgba(255, 250, 240, 0.72); border: 1px solid rgba(27, 42, 74, 0.38);
  box-shadow: 0 1px 2px rgba(27, 42, 74, 0.12);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
/* מצבים בלי תזוזה: hover = טבעת טרקוטה והילה; focus = טבעת כחולה; לחוץ/פעיל = מילוי חם */
.am-hotspot--icon:hover, .am-hotspot--icon:focus-visible, .am-hotspot--icon.is-active, .am-hotspot--icon:active { background: none; box-shadow: none; }
.am-hotspot--icon:hover .am-hotspot-icon {
  background: rgba(255, 250, 240, 0.95); border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(189, 108, 71, 0.18);
}
.am-hotspot--icon:focus-visible { outline: none; }
.am-hotspot--icon:focus-visible .am-hotspot-icon { background: rgba(255, 250, 240, 0.95); outline: 2px solid #2f6fb3; outline-offset: 2px; }
.am-hotspot--icon:active .am-hotspot-icon, .am-hotspot--icon.is-active .am-hotspot-icon {
  background: #f6e3d6; border-color: var(--terracotta); box-shadow: 0 0 0 2px rgba(189, 108, 71, 0.35);
}
@media (max-width: 640px) {
  .am-hotspot--icon { --am-icon-d: 30px; width: max(44px, min(48px, 13%)); }
}
/* מעבר עם העכבר (או פוקוס מהמקלדת): האייקון גדל והשם שלו מופיע מעליו בתווית קטנה.
   הכפתור עולה מעל השכנים כדי שהתווית לא תוסתר. בטלפון אין hover - נגיעה פותחת את הכרטיס. */
.am-hotspot--icon .am-hotspot-icon { transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, transform 0.18s ease; }
.am-hotspot-name {
  position: absolute; left: 50%; bottom: calc(50% + var(--am-icon-d) * 0.72 + 4px);
  transform: translate(-50%, 4px); opacity: 0; pointer-events: none; white-space: nowrap;
  padding: 3px 10px; border-radius: 999px; background: #fffdf6; color: #1b2a4a;
  border: 1px solid rgba(27, 42, 74, 0.22); box-shadow: 0 2px 8px rgba(27, 42, 74, 0.18);
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.3;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.am-hotspot--icon:focus-visible { z-index: 7; }
.am-hotspot--icon:focus-visible .am-hotspot-icon { transform: scale(1.4); }
.am-hotspot--icon:focus-visible .am-hotspot-name { opacity: 1; transform: translate(-50%, 0); }
@media (hover: hover) {
  .am-hotspot--icon:hover { z-index: 7; }
  .am-hotspot--icon:hover .am-hotspot-icon { transform: scale(1.4); }
  .am-hotspot--icon:hover .am-hotspot-name { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .am-hotspot--icon .am-hotspot-icon, .am-hotspot-name { transition: none; }
}

/* ===== מקרא המפה - פאנל HTML קריא מעל המקרא הקטן המצויר בפינה השמאלית-עליונה.
   המקרא המצויר תופס x 2.7%-16.6%, y 7.1%-29.8% מהאיור (נמדד). הפאנל תופס
   x 2.3%-16.7%, y 2%-30% - מכסה אותו לגמרי (רקע אטום בגוון הקרם של האיור),
   מנצל את השמיים הריקים שמעליו לגובה נוסף, ונשאר משמאל לקו-המתאר הכחול של
   השכונה (שמגיע ל-~16.6% בתחתית המקרא). הכל באחוזים/cqw - מתכווץ יחד עם המפה.
   הטקסט: Heebo 14px במשקל רגיל (400), כמו שאר טקסט הממשק. */
.am-map-stage { container-type: inline-size; }
.am-map-legend {
  position: absolute; left: 1.2%; top: 1.5%; width: 14%; height: 26.7%;
  display: flex; flex-direction: column; justify-content: space-evenly;
  padding: 0.4cqw 0.5cqw; box-sizing: border-box;
  background: rgb(248, 243, 231); border: 1px solid rgba(185, 160, 108, 0.45); border-radius: 1.4cqw;
  /* הפינה הימנית-תחתונה מעוגלת יותר: שם קו-המתאר הכחול נוגע בפינת המקרא המצויר -
     רדיוס 2cqw עוקף את הקו לגמרי (0 פיקסלים שלו מכוסים) בכל גודל מפה. */
  border-bottom-right-radius: 2cqw;
  box-shadow: 0 1px 3px rgba(43, 38, 32, 0.12);
  /* טיפוגרפיה בשפת הכותרת המצוירת "עושים קהילה" (קירוב חזותי - לא הפונט המקורי,
     שאינו ידוע): הכותרת היא אותיות דפוס, קו אחיד במשקל בינוני, נטויות קדימה -
     Heebo 500 נטוי (כבר נטען לממשק) הוא הקרוב ביותר, קטן מהכותרת. */
  font-family: var(--font-heading); font-style: italic; font-size: 13.5px;
}
.am-map-legend-item {
  display: flex; align-items: center; justify-content: flex-start; gap: 0.25em;
  width: 100%; padding: 0.25em 0.2em; border: 0; border-radius: 0;
  background: none; cursor: pointer; font: inherit; color: #16304f; text-align: right;
}
/* שורות מקרא, לא כפתורים: בלי רקע/מסגרת לכל שורה. משוב ריחוף = קו תחתון עדין
   ונקודה מעט גדולה יותר; פוקוס מקלדת שומר על קו-מתאר דק (נגישות). */
.am-map-legend-item:hover .am-map-legend-label, .am-map-legend-item:focus-visible .am-map-legend-label { text-decoration: underline; text-decoration-color: rgba(22, 48, 79, 0.45); text-underline-offset: 0.18em; }
.am-map-legend-item:hover .am-map-legend-swatch, .am-map-legend-item:focus-visible .am-map-legend-swatch { transform: scale(1.18); }
.am-map-legend-item:focus { outline: none; }
.am-map-legend-item:focus-visible { outline: 1.5px solid rgba(22, 48, 79, 0.45); outline-offset: 1px; border-radius: 4px; }
.am-map-legend-label { font-weight: 500; line-height: 1.12; text-wrap: balance; }
.am-map-legend-swatch { flex: none; order: -1; width: 0.8em; height: 0.8em; border-radius: 50%; background: var(--legend-color); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55); transition: transform 0.15s ease; }
/* מפה צרה בדסקטופ (421-560px, למשל חלון 1100x520): כדי לשמור על טקסט 14px
   הפאנל מתרחב אל השמיים הריקים משמאל ומעל (x 0.5%, y 1.5%) - הקצה הימני נשאר
   16.7%, צמוד לקו-המתאר - עם נקודת-צבע וריווח קטנים יותר, כך שרוב הרוחב לטקסט. */
@container (min-width: 421px) and (max-width: 560px) {
  .am-map-legend { left: 0.5%; top: 1.2%; width: 14.7%; height: 27.2%; font-size: 13.5px; padding: 2px 2px; }
  .am-map-legend-item { gap: 3px; padding: 1px 0; }
  .am-map-legend-label { line-height: 1.08; }
  .am-map-legend-swatch { width: 7px; height: 7px; box-shadow: none; }
}
/* מפה צרה (מובייל): הפאנל רק ~55px רוחב - נקודת-צבע קטנה (5px) וריווח מינימלי,
   כדי שהטקסט (10.5px) ייכנס בשתי שורות. */
@container (max-width: 420px) {
  .am-map-legend { left: 0.8%; width: 14.4%; font-size: 9.5px; padding: 2px 2px; } /* מובייל: מיקום/רוחב ללא שינוי; 9.5px שומר על אותן שבירות שורה */
  .am-map-legend-item { gap: 2px; padding: 1px 0; }
  .am-map-legend-label { font-weight: 500; line-height: 1.05; } /* אותו משקל כמו בדסקטופ */
  .am-map-legend-swatch { width: 5px; height: 5px; box-shadow: none; }
}

/* ===== נקודת "עושים קהילה" - מעל הכותרת המצוירת באיור (לא חלק מהתמונה); פותחת את מסע היוצרים.
   הכפתור עצמו 28px (אזור-מגע), הנקודה הנראית 10px + טבעת פעימה עדינה. ===== */
.am-brand { position: absolute; left: 26.574%; top: 88.958%; width: 39.984%; height: auto; pointer-events: none; user-select: none; }
.am-legend-dot {
  position: absolute; transform: translate(-50%, -50%); z-index: 2;
  padding: 0.32em 1.3em; border: 1px solid rgba(255, 253, 246, 0.6); border-radius: 999px; background: #1f4e8c; color: #fffdf6;
  font-family: inherit; font-size: clamp(10px, calc(var(--map-w, 800px) * 0.0125), 14px); font-weight: 600; line-height: 1.25; white-space: nowrap; cursor: pointer;
  box-shadow: 0 2px 0 #163a69, 0 4px 10px rgba(31, 78, 140, 0.3);
  animation: am-pulse-blue 2.4s ease-out infinite;
  transition: background 0.12s ease, transform 0.12s ease;
}
.am-legend-dot:hover, .am-legend-dot:focus-visible { background: #183f73; }
.am-legend-dot:active { transform: translate(-50%, calc(-50% + 1px)); }
.am-legend-dot:focus-visible { outline: 3px solid rgba(31, 78, 140, 0.4); outline-offset: 2px; }
/* הבהוב עדין: טבעת שמתרחבת ונעלמת סביב הכפתור (כחול ל"עושים קהילה", כתום לשיתוף) */
@keyframes am-pulse-blue {
  0% { box-shadow: 0 2px 0 #163a69, 0 4px 10px rgba(31, 78, 140, 0.3), 0 0 0 0 rgba(31, 78, 140, 0.55); }
  70%, 100% { box-shadow: 0 2px 0 #163a69, 0 4px 10px rgba(31, 78, 140, 0.3), 0 0 0 10px rgba(31, 78, 140, 0); }
}
@keyframes am-pulse-orange {
  0% { box-shadow: 0 2px 0 #7d4129, 0 4px 10px rgba(43, 38, 32, 0.24), 0 0 0 0 rgba(166, 90, 57, 0.55); }
  70%, 100% { box-shadow: 0 2px 0 #7d4129, 0 4px 10px rgba(43, 38, 32, 0.24), 0 0 0 10px rgba(166, 90, 57, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .am-legend-dot, .am-share-fab { animation: none; }
}

/* ===== Rich Place Panel (מינהל קהילתי / מרכז הספורט / המרכז המסחרי) - אותו .am-card,
   קומפקטי: רוחב קריאה נוח, הגובה נקבע ע"י התוכן (עד 82vh, ואז גלילה פנימית).
   כותרת → תוכן שימושי (אתר רשמי מוטמע / גלריה) → מידע קצר → פעולות. בלי תגיות/מונים. ===== */
.am-card.am-rich { max-width: var(--panel-card-w); max-height: var(--panel-card-max-h); overflow-x: hidden; }
/* כפתור הסגירה נשאר גלוי גם כשהחלון נגלל (sticky בתוך החלון הנגלל) */
.am-card.am-rich > .close-btn { position: sticky; top: 12px; margin: 12px auto -6px 14px; }
.am-rich-head { padding: 0 22px 10px 56px; }
.am-rich-eyebrow { font-size: var(--fs-meta); color: var(--ink-soft); margin-bottom: 2px; }
.am-rich-head .am-card-title { margin: 0; }
.am-rich-visual { margin: 0 22px; border-radius: 14px; overflow: hidden; background: #f3ecdc; }
.am-rich-visual.am-video-wrap { background: #1a1a1a; }
.am-rich-visual--embed { background: #fff; border: 1px solid rgba(185, 160, 108, 0.35); }
.am-rich-embed { display: block; width: 100%; height: min(36vh, 300px); border: 0; }
.am-rich-main-image { display: block; width: 100%; height: min(190px, calc(var(--map-h, 860px) * 0.22)); object-fit: contain; background: #f3ecdc; }
.am-rich-thumbs { display: flex; gap: 6px; padding: 8px; overflow-x: auto; background: #f7f1e3; }
.am-rich-thumb { flex: none; width: 64px; height: 48px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: none; cursor: pointer; }
.am-rich-thumb.is-active { border-color: var(--terracotta); }
.am-rich-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* אייקון נעול כגיבוי (כשאין מדיה/הטמעה): רקע לבן - לחלק מהאייקונים (הדרקון) יש רצועה לבנה אטומה מובנית */
.am-rich-visual--icon { display: flex; align-items: center; justify-content: center; height: 130px; background: #fff; border: 1px solid rgba(185, 160, 108, 0.25); }
.am-rich-visual--icon img { max-width: 110px; max-height: 110px; width: auto; height: auto; }
.am-rich-info { padding: 14px 22px 20px; }
.am-rich-heading { font-family: var(--font-heading); font-size: var(--fs-h2); font-weight: 500; margin: 0 0 2px; color: var(--ink); }
.am-rich-credit { font-size: var(--fs-meta); color: var(--ink-soft); margin-bottom: 10px; direction: ltr; text-align: right; unicode-bidi: plaintext; }
.am-rich-text { font-size: var(--fs-body); line-height: 1.7; margin: 0 0 10px; color: var(--ink); }
.am-rich-info .am-actions { margin-top: 12px; }
.am-rich-info .am-card-credit { margin-top: 14px; padding-top: 10px; }
.am-btn.am-rich-official { font-size: calc(var(--fs-btn) + 0.5px); padding: 8px 18px; }
/* מצב "אתר" (האתר הרשמי מתיר הטמעה): חלון גדול אל האתר האמיתי - ה-iframe הוא
   התוכן הראשי ותופס כמעט את כל הגובה; מחוצה לו רק כותרת, סגירה וכפתור משני. */
.am-card.am-rich.am-rich--site { max-width: 920px; max-height: 86vh; display: flex; flex-direction: column; }
.am-rich--site .am-rich-head { flex: none; }
.am-rich--site .am-rich-visual--embed { flex: 1 1 auto; min-height: 0; }
.am-rich--site .am-rich-embed { height: calc(86vh - 140px); }
.am-rich-site-bar { flex: none; display: flex; justify-content: flex-start; padding: 10px 22px 14px; }
.am-btn.secondary { background: transparent; color: var(--olive-deep); border: 1.5px solid var(--olive); }
.am-btn.secondary:hover { background: rgba(110, 124, 76, 0.1); }
@media (max-width: 640px) {
  .am-card.am-rich { max-height: var(--sheet-max-h); }
  .am-rich-head { padding: 0 14px 8px 50px; }
  .am-rich-visual { margin: 0 12px; border-radius: 12px; }
  .am-rich-embed { height: 30vh; }
  .am-card.am-rich.am-rich--site { max-height: 88vh; }
  .am-rich--site .am-rich-embed { height: calc(88vh - 126px); }
  .am-rich-site-bar { padding: 8px 16px 12px; }
  .am-rich-main-image { height: 140px; }
  .am-rich-visual--icon { height: 90px; }
  .am-rich-info { padding: 10px 14px 16px; }
}

/* ===== פריטי-משנה של שכבת המקרא הפעילה ("סיפור מקום" / "קהילה"):
   רשומה עם אייקון מקור מאושר -> האייקון בלבד הוא הסמן הלחיץ (כקובץ שסופק, רק
   בגודל/מיקום). רשומה בלי אייקון -> "נגיעת עט" אדומה זעירה: נקודה מוצקה 4px,
   בלי טבעת/צל/הילה. --icon-dx/--icon-dy מזיזים את האייקון בלבד. ===== */
.am-secondary {
  position: absolute; transform: translate(-50%, -50%);
  width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  animation: am-secondary-in 0.22s ease-out;
  --icon-rendered: clamp(var(--icon-min, 28px), var(--icon-w, 5.5cqw), var(--icon-max, 50px));
}
.am-secondary-dot {
  display: block; width: 4px; height: 4px; border-radius: 50%; background: #c8553d;
  border: 0; box-shadow: none; transition: transform 0.15s ease;
}
.am-secondary-icon {
  position: absolute; left: calc(50% + var(--icon-dx, 0cqw)); top: calc(50% + var(--icon-dy, 0cqw));
  transform: translate(-50%, -50%); width: var(--icon-rendered); height: auto;
  user-select: none; transition: transform 0.15s ease;
}
/* עם אייקון רק האייקון לוכד קליק - הריבוע השקוף בנקודה לא חוסם עוגן סמוך */
.am-secondary.has-icon { pointer-events: none; }
.am-secondary.has-icon .am-secondary-icon { pointer-events: auto; }
.am-secondary:hover .am-secondary-dot, .am-secondary:focus-visible .am-secondary-dot, .am-secondary.is-active .am-secondary-dot { transform: scale(1.4); }
.am-secondary:hover .am-secondary-icon, .am-secondary:focus-visible .am-secondary-icon { transform: translate(-50%, -50%) scale(1.06); }
.am-secondary:focus-visible { outline: none; }
.am-secondary:focus-visible .am-secondary-dot { outline: 1.5px solid #1a4c95; outline-offset: 3px; }
.am-secondary:focus-visible .am-secondary-icon { outline: 2px solid #1a4c95; outline-offset: 2px; border-radius: 6px; }
/* תווית שם הסיפור - קטנה ושקטה, מעל האייקון/הנקודה, רק במעבר עכבר או בפוקוס מקלדת */
.am-secondary-label {
  position: absolute; left: 50%; top: calc(50% - 6px); transform: translate(-50%, -100%);
  padding: 2px 8px; border-radius: 6px; background: rgba(255, 253, 246, 0.96); border: 1px solid var(--land-line);
  font-size: 12px; line-height: 1.4; color: var(--ink); white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity 0.12s ease; z-index: 2;
}
.am-secondary.has-icon .am-secondary-label {
  left: calc(50% + var(--icon-dx, 0cqw)); top: calc(50% + var(--icon-dy, 0cqw) - var(--icon-rendered) / 2 - 2px);
}
@media (hover: hover) {
  .am-secondary:hover .am-secondary-label { opacity: 1; }
}
.am-secondary:focus-visible .am-secondary-label { opacity: 1; }
/* שכבת "סיפור מקום": נקודות עם אייקון מקור מוצגות באותו פורמט כמו 11 העוגנים -
   עיגול שנהב עם טבעת כחולה דקה (אותו --am-icon-d), במיקום האייקון הקיים (iconOffset).
   האייקון עצמו (הקובץ) לא משתנה; נקודות בלי אייקון נשארות "נגיעת עט". */
.am-secondary.has-icon[data-layer="place_story"] { --icon-rendered: var(--am-icon-d, 36px); --am-icon-d: 36px; }
.am-secondary.has-icon[data-layer="place_story"] .am-secondary-icon {
  width: var(--am-icon-d); height: var(--am-icon-d); box-sizing: border-box; padding: 2px; object-fit: contain;
  border-radius: 50%; background: rgba(255, 250, 240, 0.72); border: 1px solid rgba(27, 42, 74, 0.38);
  box-shadow: 0 1px 2px rgba(27, 42, 74, 0.12);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.am-secondary.has-icon[data-layer="place_story"]:hover .am-secondary-icon,
.am-secondary.has-icon[data-layer="place_story"]:focus-visible .am-secondary-icon {
  transform: translate(-50%, -50%); background: rgba(255, 250, 240, 0.95); border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(189, 108, 71, 0.18);
}
.am-secondary.has-icon[data-layer="place_story"]:focus-visible .am-secondary-icon { outline: 2px solid #2f6fb3; outline-offset: 2px; border-radius: 50%; }
.am-secondary.has-icon[data-layer="place_story"].is-active .am-secondary-icon {
  background: #f6e3d6; border-color: var(--terracotta); box-shadow: 0 0 0 2px rgba(189, 108, 71, 0.35);
}
@media (max-width: 640px) {
  .am-secondary.has-icon[data-layer="place_story"] { --am-icon-d: 30px; }
  /* מגע: מרווח שקוף סביב העיגול מגדיל את אזור הלחיצה ל-44px בלי לשנות את הנראה */
  .am-secondary.has-icon[data-layer="place_story"] .am-secondary-icon,
  .am-secondary.has-icon[data-layer="place_story"].is-active .am-secondary-icon {
    width: 44px; height: 44px; padding: 7px; background-clip: content-box; border: 0; box-shadow: none;
    outline: 1px solid rgba(27, 42, 74, 0.38); outline-offset: -7px; }
  .am-secondary.has-icon[data-layer="place_story"].is-active .am-secondary-icon { outline-color: var(--terracotta); }
}
@keyframes am-secondary-in { from { opacity: 0; } to { opacity: 1; } }

/* כרטיס של נקודת-משנה: אותו EntityCard, ברוחב החלונות העשירים ובלי חיתוך תמונה */
.am-card.am-card--secondary { max-width: var(--panel-card-w); }
.am-card--secondary .am-card-hero { height: min(190px, calc(var(--map-h, 860px) * 0.22)); object-fit: contain; background: #f3ecdc; }
@media (max-width: 640px) {
  .am-card--secondary .am-card-hero { height: 140px; }
}

/* ===== "גיבורים וגיבורות השכונה" - אוסף חי ברשימה בטור אחד: דיוקן קטן בצד
   והטקסט לידו, בגובה טבעי לפי התוכן (אדם בלי סיפור = שורה קצרה). "לסיפור המלא"
   פותח את השורה במקום. קישורים שקטים במקום כפתורים. אותה שפת חלון כמו שאר
   הפאנלים (am-card / close-btn), בלי שפה חזותית חדשה. ===== */
/* ===== גיבורים וגיבורות השכונה: גלריית כרטיסים ייצוגיים. תמונה גדולה במרכז (4:5),
   ומתחתיה שם, תפקיד ושתי שורות. כרטיס פתוח תופס שורה שלמה: תמונה לצד הסיפור,
   הסרטון, המקורות והקרדיט. אותה תבנית תשמש בעתיד גם לכרטיס עסק. ===== */
.am-card.am-heroes { max-width: min(780px, calc(100vw - 32px)); max-height: var(--panel-card-max-h); display: flex; flex-direction: column; overflow: hidden; }
.am-heroes > .close-btn { top: 14px; }
.am-heroes-head { flex: none; padding: 16px 20px 12px 58px; border-bottom: 1px solid rgba(185,160,108,0.3); }
.am-heroes-title { margin: 0 0 3px; font-size: calc(var(--fs-h1) + 3px); line-height: 1.25; }
.am-heroes-source, .am-heroes-count { font-size: var(--fs-meta); color: var(--ink-soft); line-height: 1.5; }
.am-heroes-source a { color: inherit; }
.am-heroes-grid {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 18px 18px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); grid-auto-rows: max-content; gap: 14px; align-content: start;
}
.am-hero-card {
  display: flex; flex-direction: column; min-width: 0; min-height: max-content; text-align: right;
  background: #fffdf6; border: 1px solid rgba(185,160,108,0.45); border-radius: 16px; overflow: hidden;
  box-shadow: 0 6px 16px rgba(43,38,32,0.08);
}
/* תבנית משותפת לכרטיס ייצוגי (ShowcaseFigure): מסגרת תמונה, גווני גיבוי וקרדיט */
.am-showcase-figure {
  position: relative; margin: 0; overflow: hidden; flex: none; width: 100%;
  display: flex; align-items: center; justify-content: center;
}
.am-showcase-figure--portrait { aspect-ratio: 4 / 5; }
.am-showcase-figure--wide { aspect-ratio: 16 / 10; }
.am-showcase-figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.am-showcase-figure.is-video-frame img { position: absolute; top: -16.7%; height: 133.4%; left: 0; }
.am-showcase-tone--0 { background: linear-gradient(160deg, #f6e3d6, #ecc9b6); color: var(--terracotta); }
.am-showcase-tone--1 { background: linear-gradient(160deg, #ebefdf, #d5dcc0); color: var(--olive-deep); }
.am-showcase-tone--2 { background: linear-gradient(160deg, #f8ecd3, #ecd6a8); color: #9a6b2a; }
.am-showcase-initials { font-family: var(--font-heading); font-size: 46px; font-weight: 500; letter-spacing: 1px; opacity: 0.85; }
.am-showcase-figcredit { position: absolute; inset: auto 0 0 0; padding: 12px 8px 4px; font-size: 9.5px; line-height: 1.3; color: #fffdf6; text-align: left; direction: ltr; background: linear-gradient(transparent, rgba(30,26,22,0.6)); }
/* כרטיס עסק: אותה מסגרת, תמונה רחבה בראש הפרופיל */
.am-business-profile .am-showcase-figure.am-business-hero { border-radius: 16px; margin-bottom: 10px; box-shadow: 0 0 0 1px rgba(185,160,108,0.45); }
.am-business-profile .am-showcase-initials { font-size: 38px; }
/* תמונת עסק מוצגת במלואה (לא נחתכת): תמונה לאורך - למשל אדם - לא מאבדת את הראש */
.am-business-profile .am-showcase-figure.am-business-hero img { object-fit: contain; }
.am-hero-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; }
.am-hero-name { font-family: var(--font-heading); font-size: var(--fs-h2); font-weight: 600; margin: 0; color: var(--ink); line-height: 1.3; }
.am-hero-role { font-size: var(--fs-meta); color: var(--ink-soft); line-height: 1.4; }
.am-hero-story { font-size: var(--fs-item); line-height: 1.55; margin: 4px 0 0; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* כרטיס פתוח: שורה שלמה, תמונה בצד והסיפור המלא לידה */
.am-hero-card.is-expanded { grid-column: 1 / -1; flex-direction: row; align-items: flex-start; background: #fbf5e8; }
.am-hero-card.is-expanded .am-hero-figure { width: 38%; max-width: 260px; border-radius: 0 0 0 16px; }
.am-hero-card.is-expanded .am-hero-body { padding: 14px 16px 16px; }
.am-hero-card.is-expanded .am-hero-story { -webkit-line-clamp: unset; display: block; }
.am-hero-video { width: 100%; margin-top: 10px; border-radius: 12px; overflow: hidden; }
.am-hero-credit { margin-top: 8px; font-size: calc(var(--fs-chip) - 0.5px); color: var(--ink-soft); }
.am-hero-credit a { color: inherit; }
/* קישורים שקטים: "לסיפור המלא" בטרקוטה, הקישור החיצוני בזית - בלי רקע ובלי מסגרת */
.am-hero-actions { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: auto; padding-top: 6px; }
.am-hero-actions .am-btn { min-height: 0; padding: 2px 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: var(--fs-meta); font-weight: 500; color: var(--terracotta); }
.am-hero-actions .am-btn.link { color: var(--olive-deep); }
.am-hero-actions .am-btn:hover, .am-hero-actions .am-btn:focus-visible { background: none; text-decoration: underline; text-underline-offset: 0.2em; }
@media (max-width: 640px) {
  .am-card.am-heroes { max-height: var(--sheet-max-h); max-width: 100%; }
  .am-heroes-head { padding: 12px 14px 10px 50px; }
  .am-heroes-grid { padding: 12px 12px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .am-hero-card .am-showcase-initials { font-size: 38px; }
  .am-hero-body { padding: 8px 10px 10px; }
  .am-hero-card.is-expanded { flex-direction: column; }
  .am-hero-card.is-expanded .am-hero-figure { width: 100%; max-width: none; aspect-ratio: 16 / 10; border-radius: 0; }
  .am-hero-actions .am-btn { min-height: 32px; display: inline-flex; align-items: center; } /* יעד מגע */
}
.am-hero-sources { list-style: none; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px dashed rgba(185,160,108,0.5); width: 100%; text-align: right; display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-meta); line-height: 1.5; }
.am-hero-sources a { color: var(--ink); }
.am-hero-source-kind { display: inline-block; font-size: calc(var(--fs-chip) - 0.5px); color: var(--ink-soft); border: 1px solid var(--land-line); border-radius: 999px; padding: 0 7px; margin-inline-end: 6px; }

/* ===== גלריית סרטונים: נגן אחד + שורת בחירה (רק כשיש יותר מסרטון אחד) ===== */
.am-video-gallery { background: #1a1a1a; }
.am-video-list { display: flex; gap: 8px; padding: 8px 10px 10px; overflow-x: auto; background: #f3ecdc; }
.am-video-choice {
  flex: none; display: flex; flex-direction: column; gap: 4px; width: 128px; padding: 4px; border-radius: 10px;
  border: 2px solid transparent; background: #fffaf0; cursor: pointer; font-family: inherit; font-size: var(--fs-meta); color: var(--ink); text-align: right;
}
.am-video-choice img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 7px; display: block; background: #d9d2c0; }
.am-video-choice.is-active { border-color: var(--terracotta); }
.am-video-choice span { padding: 0 2px 2px; line-height: 1.3; }
.am-hero-video .am-video-gallery, .am-hero-video .am-video-wrap { border-radius: 12px; overflow: hidden; }
@media (max-width: 640px) { .am-video-choice { width: 108px; } }

/* ===== "מה קורה עכשיו" - השכבה החיה. החלון: אותה שפת חלון-רשימה קומפקטית
   (am-creators-panel/am-directory-*), הלשוניות הן שבבי-הסינון הקיימים.
   "דוגמה" - תווית שקטה לכל פריט הדגמה (לא מאומת). ===== */
.am-now-tabs { display: flex; justify-content: center; gap: 6px; margin: 8px 0 10px; }
.am-now-badge {
  display: inline-block; vertical-align: middle; margin-inline-start: 4px; padding: 0 7px;
  border: 1px solid var(--land-line); border-radius: 999px; background: #fffdf6;
  font-size: calc(var(--fs-chip) - 1px); font-weight: 400; line-height: 1.6; color: var(--ink-soft);
}
.am-now-note { margin-top: 10px; font-size: var(--fs-meta); line-height: 1.5; color: var(--ink-soft); text-align: center; }
.am-now-community { display: block; width: fit-content; margin: 8px auto 0; padding: 4px 6px; font-size: var(--fs-meta); color: var(--terracotta); text-decoration: none; }
.am-now-community:hover, .am-now-community:focus-visible { text-decoration: underline; }
@media (max-width: 640px) { .am-now-community { min-height: 32px; display: flex; align-items: center; } }
.am-now-detail .am-creators-title { line-height: 1.5; }

/* סמן הפריט שנבחר: טבעת ניטרלית קטנה בצבע הקטגוריה במקרא (חלולה - שונה מהנקודה
   המלאה המהבהבת של "עושים קהילה"), עם שם הפריט. מעל מסך-העמעום של החלון
   (z-index), ולא לחיץ - רק מראה איפה זה במפה. */
.am-now-marker {
  position: absolute; transform: translate(-50%, -50%); z-index: 101; pointer-events: none;
  width: 28px; height: 28px; padding: 0; border: 0; background: none;
  display: flex; align-items: center; justify-content: center;
  animation: am-secondary-in 0.22s ease-out;
}
.am-now-marker-dot {
  display: block; width: 13px; height: 13px; border-radius: 50%; background: #fffdf6; border: 3.5px solid #1a4c95;
  box-shadow: 0 1px 4px rgba(43, 38, 32, 0.35); transition: transform 0.15s ease;
}
.am-now-marker:hover .am-now-marker-dot, .am-now-marker:focus-visible .am-now-marker-dot { transform: scale(1.3); }
.am-now-marker:focus-visible { outline: none; }
.am-now-marker:focus-visible .am-now-marker-dot { outline: 1.5px solid #1a4c95; outline-offset: 3px; }
.am-now-marker-label {
  position: absolute; left: 50%; top: calc(50% - 8px); transform: translate(-50%, -100%);
  padding: 2px 8px; border-radius: 6px; background: rgba(255, 253, 246, 0.96); border: 1px solid var(--land-line);
  font-size: 12px; line-height: 1.4; color: var(--ink); white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity 0.12s ease; z-index: 2;
}
.am-now-marker.is-focus .am-now-marker-label { opacity: 1; }
.am-now-marker.is-focus .am-now-marker-dot { transform: scale(1.25); }
@media (prefers-reduced-motion: reduce) { .am-now-marker { animation: none; } }
/* דסקטופ: כשנבחר פריט עם מיקום, החלון זז לצד הנגדי לנקודה */
@media (min-width: 641px) {
  .am-scrim--panel-left { justify-content: flex-end; }
  .am-scrim--panel-right { justify-content: flex-start; }
}

/* ===== טיפוגרפיה משותפת - השלמות: תיאור בתוך מסך-פירוט של חלון-רשימה הוא
   טקסט רץ (לא כותרת-משנה); פסי גלילה דקים ושקטים בחלונות. ===== */
.am-creators-detail .am-creators-sub { font-size: var(--fs-item); line-height: 1.6; }
.am-card, .am-creators-panel, .am-directory-list, .am-heroes-grid { scrollbar-width: thin; scrollbar-color: rgba(185, 160, 108, 0.45) transparent; }
@media (max-width: 640px) {
  /* שבבי סינון / לשוניות: טקסט קטן, אבל אזור-מגע נוח */
  .am-business-filter-chip { min-height: 30px; padding: 4px 11px; }
  /* כפתור-הצטרפות בתוך שורת רשימה: נשאר שבב קומפקטי, לא מגביה את השורה */
  .am-btn.am-directory-join { min-height: 30px; padding: 4px 11px; }
  .am-directory-actions .am-btn { min-height: 30px; padding: 4px 12px; }
}

/* ===== מפה צרה (data-map-size='s'): גם הריווח בחלונות בפרופורציה לטקסט הקטן ===== */
:root[data-map-size="s"] .am-card-body { padding: 12px 14px 14px; }
:root[data-map-size="s"] .am-card-body.no-hero { padding-top: 38px; }
:root[data-map-size="s"] .am-creators-panel { padding: 10px 12px 12px; }
:root[data-map-size="s"] .am-directory-item, :root[data-map-size="s"] .am-creators-option { padding: 5px 9px; border-radius: 8px; }
:root[data-map-size="s"] .am-directory-list, :root[data-map-size="s"] .am-creators-list { gap: 4px; }
:root[data-map-size="s"] .am-card .close-btn, :root[data-map-size="s"] .am-creators-panel > .close-btn { width: 28px; height: 28px; top: 8px; left: 9px; font-size: 12px; }
:root[data-map-size="s"] .am-btn { padding: 5px 12px; }
:root[data-map-size="s"] .am-rich-head { padding: 0 12px 6px 46px; }
:root[data-map-size="s"] .am-rich-visual { margin: 0 12px; }
:root[data-map-size="s"] .am-rich-info { padding: 8px 12px 12px; }
:root[data-map-size="s"] .am-heroes-head { padding: 10px 12px 8px 46px; }
:root[data-map-size="s"] .am-heroes-grid { padding: 10px 12px 12px; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
:root[data-map-size="s"] .am-hero-card .am-showcase-initials { font-size: 36px; }
:root[data-map-size="s"] .am-now-tabs { margin: 6px 0 8px; }
@media (max-width: 640px) {
  /* מובייל: כל החלונות הם גיליון תחתון ברוחב מלא (גובה: --sheet-max-h) */
  .am-card.am-rich, .am-card.am-heroes, .am-card.am-card--secondary { max-width: 100%; }
}

/* ===== "קהילה" - מפה חיה: שכבת קרם שקופה מעל המפה הנעולה (המפה נראית מבעד),
   ועליה צמתי-נושא עצמאיים ושווי-מעמד, מפוזרים על פני השכונה (בלי מרכז ובלי קווים).
   צבעים מהשפה הקיימת (טורקיז / טרקוטה / חרדל / כחול / זית). הכל באחוזי-מפה/cqw. ===== */
.am-tone-teal { --tone: #1f7a72; --tone-tint: rgba(31, 122, 114, 0.14); }
.am-tone-terracotta { --tone: #bd6c47; --tone-tint: rgba(189, 108, 71, 0.15); }
.am-tone-mustard { --tone: #b07a12; --tone-tint: rgba(245, 160, 58, 0.2); }
.am-tone-blue { --tone: #1a4c95; --tone-tint: rgba(26, 76, 149, 0.12); }
.am-tone-olive { --tone: #5c6a3c; --tone-tint: rgba(110, 124, 76, 0.17); }
.am-community-layer { position: absolute; inset: 0; z-index: 4; animation: am-community-in 0.25s ease-out; }
@keyframes am-community-in { from { opacity: 0; } to { opacity: 1; } }
.am-community-veil { position: absolute; inset: 0; border-radius: 12px; background: rgba(252, 248, 238, 0.5); }
.am-community-layer.has-focus .am-community-veil { background: rgba(252, 248, 238, 0.6); }

/* צומת: עיגול-אייקון עם הילה בצבע הנושא, שם, ומספר קבוצות */
.am-cnode {
  position: absolute; transform: translate(-50%, -24%); z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 0.25cqw;
  width: max-content; max-width: 17cqw; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: inherit; color: var(--ink); text-align: center;
  transition: opacity 0.2s, filter 0.2s;
}
.am-cnode-bubble {
  position: relative; width: 6.4cqw; height: 6.4cqw; min-width: 30px; min-height: 30px; max-width: 54px; max-height: 54px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  font-size: clamp(14px, 2.9cqw, 24px); line-height: 1;
  background: #fffdf6; border: 2px solid var(--tone);
  box-shadow: 0 0 0 0.9cqw var(--tone-tint), 0 3px 10px rgba(43, 38, 32, 0.16);
  animation: am-cnode-float 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -0.8s);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
@keyframes am-cnode-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
@media (prefers-reduced-motion: reduce) { .am-cnode-bubble, .am-community-layer { animation: none; } }
.am-cnode-label {
  font-size: var(--fs-item); font-weight: 600; line-height: 1.15; color: var(--tone);
  padding: 1px 7px 2px; border-radius: 999px; background: rgba(255, 253, 246, 0.9);
  box-shadow: 0 1px 3px rgba(43, 38, 32, 0.08); text-wrap: balance;
}
.am-cnode-short { display: none; }
.am-cnode-count { font-size: var(--fs-meta); color: var(--ink-soft); line-height: 1.1; }
.am-cnode:hover .am-cnode-bubble, .am-cnode:focus-visible .am-cnode-bubble { transform: scale(1.08); box-shadow: 0 0 0 1.3cqw var(--tone-tint), 0 5px 14px rgba(43, 38, 32, 0.2); }
.am-cnode:focus { outline: none; }
.am-cnode:focus-visible .am-cnode-label { outline: 1.5px solid var(--tone); outline-offset: 1px; }
.am-cnode.is-active { z-index: 3; }
.am-cnode.is-active .am-cnode-bubble { background: var(--tone); transform: scale(1.12); box-shadow: 0 0 0 1.4cqw var(--tone-tint), 0 6px 16px rgba(43, 38, 32, 0.24); }
.am-cnode.is-active .am-cnode-label { background: var(--tone); color: #fffdf6; }
.am-cnode.is-dim { opacity: 0.45; filter: saturate(0.6); }
.am-cnode.is-dim:hover { opacity: 0.85; }
/* הצצה בריחוף (דסקטופ): עד 3 קבוצות אמיתיות */
.am-cnode-peek {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 4px); z-index: 2;
  display: none; flex-direction: column; gap: 1px; min-width: 120px; max-width: 190px; padding: 5px 9px 6px;
  border-radius: 10px; background: rgba(255, 253, 246, 0.97); border: 1px solid rgba(185, 160, 108, 0.5);
  box-shadow: 0 6px 16px rgba(43, 38, 32, 0.14); pointer-events: none;
}
.am-cnode-peek-item { font-size: var(--fs-meta); color: var(--ink); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-cluster-more { font-size: calc(var(--fs-meta) - 0.5px); color: var(--tone); }
@media (hover: hover) and (min-width: 641px) {
  .am-cnode:not(.is-active):hover { z-index: 3; }
  .am-cnode:not(.is-active):hover .am-cnode-peek { display: flex; }
  .am-community-layer.has-focus .am-cnode:hover .am-cnode-peek { display: none; }
}

/* פס עליון קטן: שם השכבה, חיפוש משני, סגירה - ברווח שבין המקרא לכותרת המצוירת */
.am-community-bar {
  position: absolute; top: 2.2%; left: 19%; right: 33%; z-index: 2;
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; justify-content: center;
  padding: 5px 10px 5px 40px; border-radius: 16px;
  background: rgba(255, 253, 246, 0.88); border: 1px solid rgba(185, 160, 108, 0.45); box-shadow: 0 2px 8px rgba(43, 38, 32, 0.08);
}
.am-community-bar-title { font-family: var(--font-heading); font-style: italic; font-weight: 500; font-size: var(--fs-h2); color: #16304f; }
.am-community-tagline { font-size: var(--fs-meta); color: var(--ink-soft); }
.am-community-search { width: min(190px, 100%); margin: 0; padding: 3px 11px; font-size: var(--fs-meta); background: rgba(255, 250, 240, 0.9); }
.am-community-close, .am-community-card-close {
  position: absolute; top: 50%; left: 6px; transform: translateY(-50%);
  width: 28px; height: 28px; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #fffdf6; border: 1px solid var(--land-line); font-size: 12px; color: var(--ink-soft); cursor: pointer;
}

/* כרטיס הנושא (דסקטופ): צף ברצועה התחתונה של המפה (מתחת לצמתים, מעל "עושים
   קהילה") - לא מסתיר אף צומת, כך שאפשר לעבור ישר לנושא אחר */
.am-community-card {
  position: absolute; z-index: 5; left: 50%; bottom: 2.2%; transform: translateX(-50%);
  width: clamp(260px, 54%, 420px); max-height: 27%;
  overflow-y: auto; overscroll-behavior: contain; padding: 10px 12px 10px;
  border-radius: 16px; border: 1px solid rgba(185, 160, 108, 0.5);
  background: rgba(255, 253, 246, 0.96); box-shadow: 0 14px 36px rgba(43, 38, 32, 0.2);
  scrollbar-width: thin; scrollbar-color: rgba(185, 160, 108, 0.45) transparent;
  animation: am-community-in 0.18s ease-out;
}
.am-community-card-close { top: 10px; transform: none; left: 10px; }
.am-community-detail-head { display: flex; align-items: center; gap: 7px; margin: 0 34px 8px 0; }
.am-community-detail-head .am-cluster-icon { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--tone-tint); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; }
.am-community-detail-title { font-size: var(--fs-h2); font-weight: 600; color: var(--tone, #16304f); }
.am-community-row { background: rgba(255, 250, 240, 0.92); }
.am-community-row .am-directory-actions { max-width: 64%; } /* "עדכוני בטחון": שני הכפתורים בשורה אחת */
.am-community-hint { font-size: var(--fs-meta); color: var(--ink-soft); text-align: center; }

/* מפה צרה (מובייל / זום גבוה): שמות קצרים, בלי מונה, פס עליון מצומצם */
@container (max-width: 560px) {
  .am-cnode-title { display: none; }
  .am-cnode-short { display: inline; }
  .am-cnode { max-width: none; }
  .am-cnode-label { padding: 0 5px 1px; white-space: nowrap; }
  .am-cnode-count { display: none; }
  .am-community-bar { left: 19%; right: 36%; padding: 3px 8px 3px 32px; gap: 0 6px; }
  .am-community-tagline { display: none; }
  .am-community-close { width: 24px; height: 24px; left: 4px; }
}
@media (max-width: 640px) {
  /* מובייל: גיליון תחתון קטן מתחת למפה - חיפוש + הנחיה, ואחרי בחירה - הקבוצות */
  .am-community-card.is-sheet {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; z-index: 90; transform: none;
    max-height: var(--sheet-max-h, 52vh); border-radius: 18px 18px 0 0; padding: 10px 12px 14px;
  }
  .am-community-card.is-sheet .am-community-search { display: block; width: calc(100% - 40px); margin: 0 0 8px auto; }
  .am-community-card.is-sheet.is-hint .am-community-search { width: 100%; }
  .am-community-card.is-sheet .am-community-card-close { width: 30px; height: 30px; top: 10px; }
}
/* ===== המצפן הקהילתי (הכניסה ל"עושים קהילה"; ?compass=0 = הכניסה הקודמת) - רקע לבן כמעט, קו כחול-כהה
   דק, נגיעות תכלת חיוורות בלבד, הרבה אוויר. בלי כרטיסים, בלי עיגולים גדולים,
   בלי חישורים מהמרכז: סמל מצפן קטן עם סימוני כיוון קצרים, ושמונה כיוונים
   עצמאיים סביבו. ===== */
.am-creators-panel { --panel-bg: #fffdf6; }
.am-creators-panel.is-compass { --panel-bg: #fffefb; max-width: clamp(300px, calc(var(--map-w, 820px) * 0.72), 560px); background: var(--panel-bg); }
.am-compass { --navy: #1d3461; --sky: #dce9f5; display: flex; flex-direction: column; align-items: center; }
.am-compass-sub { font-size: var(--fs-meta); color: #4a5a78; margin-top: 2px; }
.am-compass-field { position: relative; width: 100%; aspect-ratio: 1 / 0.8; margin: 6px 0 2px; }
.am-compass-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.am-compass-links path { fill: none; stroke: #1d3461; stroke-opacity: 0.22; stroke-width: 0.35; stroke-dasharray: 0.8 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.am-compass-center { position: absolute; left: 50%; top: 50%; width: 22%; max-width: 110px; transform: translate(-50%, -50%); }
.am-compass-mark { width: 100%; height: auto; display: block; overflow: visible; }
.am-compass-mark .am-compass-ring { fill: #fff; stroke: #1d3461; stroke-width: 1.6; stroke-linecap: round; }
.am-compass-mark line { stroke: #1d3461; stroke-width: 1.4; stroke-linecap: round; }
.am-compass-needle-dark { fill: #1d3461; }
.am-compass-needle-light { fill: #fff; stroke: #1d3461; stroke-width: 1; stroke-linejoin: round; }
.am-compass-pin { fill: #fff; stroke: #1d3461; stroke-width: 0.8; }
.am-compass-dir {
  position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 2px; border: 0; background: none; cursor: pointer; font-family: inherit; color: #1d3461;
}
.am-compass-illus { display: block; width: clamp(44px, 9cqw, 72px); height: clamp(36px, 7.5cqw, 60px); object-fit: contain; }
.am-compass-illus.is-empty { border: 1px dashed rgba(29, 52, 97, 0.2); border-radius: 10px; }
.am-compass-illus.is-large { width: 120px; height: 96px; }
/* איור מקורי: סמל קטן וריבועי, כך שהכותרת נשארת העיקר. הקובץ שקוף ונשאר כמו
   שהוא - המסגור (חיתוך השוליים הריקים סביב הציור) נעשה בתצוגה בלבד. */
.am-compass-illus.has-img { width: clamp(36px, 7.5cqw, 52px); height: clamp(36px, 7.5cqw, 52px); overflow: hidden; }
.am-compass-illus.has-img img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 48%; transform: scale(1.5); }
.am-compass-illus.has-img.is-large { width: 84px; height: 84px; }
/* איור שנשמר ביחס הממדים המקורי (fit: 'contain'): בלי חיתוך והגדלה; רקע לבן
   של הקובץ נבלע ברקע החלונית בתצוגה בלבד (multiply) - הקובץ לא משתנה */
.am-compass-illus.has-img.is-contain { background: var(--panel-bg, #fffdf6); } /* הבסיס ל-multiply בתוך הכפתור */
.am-compass-illus.has-img.is-contain img { object-fit: contain; object-position: 50% 50%; transform: scale(var(--illus-scale, 1)); mix-blend-mode: multiply; } /* --illus-scale מההגדרה של כל איור (COMPASS_ILLUSTRATIONS.scale): ממלא את המשבצת בלי לחתוך */
/* משבצת גבוהה ב-25% שגדלה כלפי מעלה בלבד (margin-top שלילי) - הכותרת והמיקום לא זזים */
.am-compass-illus.has-img.is-tall { height: calc(clamp(36px, 7.5cqw, 52px) * 1.25); margin-top: calc(clamp(36px, 7.5cqw, 52px) * -0.25); }
.am-compass-title {
  font-size: var(--fs-item); font-weight: 600; line-height: 1.2; padding: 2px 10px 3px; border-radius: 999px;
  background: #dce9f5; color: #1d3461; white-space: nowrap;
}
.am-compass-title.is-large { font-size: var(--fs-h1); padding: 3px 16px 4px; }
.am-compass-soon { font-size: calc(var(--fs-meta) - 0.5px); color: #7d8aa3; }
.am-compass-dir:hover .am-compass-title, .am-compass-dir:focus-visible .am-compass-title { background: #c9dcef; }
.am-compass-dir:focus { outline: none; }
.am-compass-dir:focus-visible .am-compass-title { outline: 1.5px solid #1d3461; outline-offset: 2px; }
.am-compass-all { background: none; border: 0; padding: 4px 6px; font-family: inherit; font-size: var(--fs-meta); color: #4a5a78; cursor: pointer; }
.am-compass-all:hover { color: #1d3461; text-decoration: underline; }
.am-compass-direction { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.am-compass-direction .am-creators-back { align-self: flex-start; }
.am-compass-activities { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 4px; }
.am-compass-activity {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border: 0; border-radius: 10px;
  background: none; box-shadow: inset 0 0 0 1px rgba(29, 52, 97, 0.18); font-family: inherit; font-size: var(--fs-item); color: #1d3461; text-align: right;
}
.am-compass-activity.is-live { cursor: pointer; }
.am-compass-activity.is-live:hover, .am-compass-activity.is-live:focus-visible { box-shadow: inset 0 0 0 1.5px #1d3461; outline: none; }
.am-compass-activity:not(.is-live) { color: #7d8aa3; }
@container (max-width: 380px) {
  .am-compass-title { font-size: var(--fs-meta); padding: 1px 8px 2px; }
}
@media (max-width: 640px) {
  .am-creators-panel.is-compass { max-width: 100%; max-height: 80vh; max-height: 80dvh; }
}

/* ===== "מסלולי הטיול של ארמון הנציב" (טבעות הטיול של גורי) - בתוך חלונית "עושים
   קהילה". שלוש טבעות חופפות בקו דק "מצויר" (סכמה, לא מפה), צבעים שקטים מהשפה
   הקיימת; מסך מסלול עם מקום שמור למפה ושדות "בהכנה" גלויים, וקרדיט קבוע. ===== */
.am-ring-0 { --ring: #6e7c4c; } .am-ring-1 { --ring: #1f7a72; } .am-ring-2 { --ring: #bd6c47; }
.am-routes { display: flex; flex-direction: column; gap: 6px; }
.am-routes .am-creators-back { align-self: flex-start; padding-bottom: 8px; }
.am-routes-title { font-size: var(--fs-h1); }
.am-routes-rings { position: relative; width: 100%; max-width: 300px; aspect-ratio: 1 / 0.92; margin: 0 auto; }
.am-routes-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.am-routes-svg path { fill: none; stroke: var(--ring); stroke-width: 0.9; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; transition: stroke-width 0.15s, opacity 0.15s; }
.am-routes-rings:has(.am-routes-ring:hover) path, .am-routes-rings:has(.am-routes-ring:focus-visible) path { opacity: 0.35; }
.am-routes-rings:has(.am-ring-0.am-routes-ring:is(:hover, :focus-visible)) path.am-ring-0,
.am-routes-rings:has(.am-ring-1.am-routes-ring:is(:hover, :focus-visible)) path.am-ring-1,
.am-routes-rings:has(.am-ring-2.am-routes-ring:is(:hover, :focus-visible)) path.am-ring-2 { opacity: 1; stroke-width: 1.5; }
.am-routes-ring {
  position: absolute; transform: translate(-50%, -50%); width: 30%; min-height: 44px; padding: 4px 6px;
  border: 0; border-radius: 999px; background: rgba(255, 253, 246, 0.72); cursor: pointer;
  font-family: inherit; font-size: var(--fs-item); font-weight: 600; line-height: 1.25; color: var(--ring); text-align: center; text-wrap: balance;
}
.am-routes-ring:hover { background: #fffdf6; }
.am-routes-ring:focus { outline: none; }
.am-routes-ring:focus-visible { outline: 1.5px solid var(--ring); outline-offset: 2px; }
.am-routes-note { font-size: var(--fs-meta); color: var(--ink-soft); text-align: center; }
.am-routes-credit { margin-top: 6px; padding-top: 8px; border-top: 1px dashed rgba(185, 160, 108, 0.5); font-size: var(--fs-meta); color: var(--ink-soft); text-align: center; line-height: 1.5; }
.am-route-head { display: flex; align-items: center; gap: 8px; }
.am-route-mark { flex: none; width: 30px; height: 30px; }
.am-route-mark path { fill: none; stroke: var(--ring); stroke-width: 2; stroke-linecap: round; }
.am-route-title { text-align: right; font-size: var(--fs-h1); color: var(--ink); }
.am-route-map { width: 100%; border-radius: 12px; display: block; }
.am-route-map--pending {
  aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center;
  border: 1.2px dashed rgba(185, 160, 108, 0.6); background: #fbf5e8; color: var(--ink-soft); font-size: var(--fs-item);
}
.am-route-fields { margin: 4px 0 0; display: flex; flex-direction: column; }
.am-route-field { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 2px; }
.am-route-field + .am-route-field { border-top: 1px solid rgba(185, 160, 108, 0.28); }
.am-route-field dt { font-size: var(--fs-item); font-weight: 600; color: var(--ink); }
.am-route-field dd { margin: 0; font-size: var(--fs-item); color: var(--ink); }
.am-route-field dd.is-pending { color: var(--ink-soft); font-style: italic; }
@media (max-width: 640px) {
  .am-routes-rings { max-width: 260px; }
}
/* חלונית צרה (מפה קטנה): תוויות רחבות וקטנות מעט יותר, כדי ש"אמת המים וחוות
   העלמות" תישאר בתוך הטבעת שלה ולא תיגע בטבעת העליונה */
@container (max-width: 300px) {
  .am-routes-ring { width: 32%; font-size: var(--fs-meta); padding: 3px 2px; }
}

/* ===== "עדכוני בטחון" - מדריך ביטחון קצר בתוך כרטיס הקהילה (במקום לחכות לטעינת
   ה-Genially): כותרות המקור כרשת כרטיסים קטנה בשפת "עושים קהילה" - קרם, נגיעת
   צבעי-מים כחולה, מעט טקסט; בתחתית "מידע מלא ↗" למקור. ===== */
.am-guide { display: flex; flex-direction: column; gap: 8px; }
.am-guide-back { align-self: flex-start; padding: 0 0 2px; }
.am-guide-head { text-align: center; padding: 2px 30px 0; }
.am-guide-title { font-family: var(--font-heading); font-style: italic; font-weight: 500; font-size: var(--fs-h2); color: #16304f; }
.am-guide-sub { font-size: var(--fs-meta); color: var(--ink-soft); margin-top: 1px; }
.am-guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.am-guide-card {
  display: flex; align-items: center; gap: 8px; min-width: 0; text-align: right; padding: 8px 10px; border-radius: 14px; cursor: pointer;
  font-family: inherit; color: var(--ink); border: 0;
  background: radial-gradient(130% 120% at 100% 0%, rgba(26, 76, 149, 0.1), transparent 60%), #fffaf0;
  box-shadow: inset 0 0 0 1px rgba(185, 160, 108, 0.45); transition: box-shadow 0.15s, transform 0.15s;
}
.am-guide-card:hover, .am-guide-card:focus-visible { box-shadow: inset 0 0 0 1.5px #1a4c95, 0 3px 10px rgba(43, 38, 32, 0.08); outline: none; transform: translateY(-1px); }
.am-guide-emoji {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
  background: radial-gradient(circle at 35% 30%, rgba(26, 76, 149, 0.16), rgba(31, 122, 114, 0.1) 65%, transparent); box-shadow: inset 0 0 0 1px rgba(26, 76, 149, 0.2);
}
.am-guide-card-text { display: flex; flex-direction: column; min-width: 0; }
.am-guide-card-title { font-size: var(--fs-item); font-weight: 600; color: #1a4c95; line-height: 1.25; }
.am-guide-card-label { font-size: var(--fs-meta); color: var(--ink-soft); line-height: 1.3; }
.am-guide-detail { display: flex; flex-direction: column; gap: 5px; }
.am-guide-detail-head { display: flex; align-items: center; gap: 8px; margin: 0 34px 2px 0; }
.am-guide-detail-title { font-size: var(--fs-h2); font-weight: 600; color: #1a4c95; }
.am-guide-p { margin: 0; font-size: var(--fs-item); line-height: 1.55; color: var(--ink); }
.am-guide-links { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-meta); }
.am-guide-links a { color: #1a4c95; }
.am-guide-note { font-size: var(--fs-meta); color: var(--ink-soft); }
.am-guide-full {
  align-self: center; margin-top: 2px; padding: 4px 14px; border-radius: 999px; text-decoration: none;
  font-size: var(--fs-chip); color: #1a4c95; box-shadow: inset 0 0 0 1.2px rgba(26, 76, 149, 0.45); background: #fffdf6;
}
.am-guide-full:hover { background: rgba(26, 76, 149, 0.06); }
@media (max-width: 640px) {
  .am-guide-card { padding: 9px 10px; min-height: 52px; }
  .am-guide-full { padding: 6px 16px; min-height: 30px; box-sizing: border-box; display: inline-flex; align-items: center; }
}

/* המקרא נשאר מעל שכבת הקהילה - אפשר לעבור שכבה גם כשהיא פתוחה */
.am-community-layer ~ .am-map-legend { z-index: 6; }

/* ===== "יש לי משהו לשתף" - כפתור קטן ומהבהב (כתום) בתוך המפה, מימין למעלה מתחת לכותרת
   "ארמון הנציב" (שכבת HTML; האיור לא משתנה). הגודל נגזר מרוחב המפה (--map-w), בפרופורציה
   לכותרת, כך שהוא קטן ביחד עם המפה. הפאנל עצמו משתמש בשפה של am-creators-panel / am-flow הקיימים. ===== */
.am-share-fab {
  /* גוון הטרקוטה של כפתורי הפעולה באתר, כהה מעט (#a65a39 - גוון ה-hover הקיים)
     כדי שהטקסט הבהיר יעמוד בניגודיות 4.5:1 */
  /* מיושר לקצה הימני של הכותרת, מתחת ל"מפת השכונה" - אזור פנוי מחוץ לקו המתאר (בבקשת בעל הפרויקט) */
  position: absolute; right: 3.3%; top: 20%; z-index: 6; margin: 0;
  display: flex; align-items: center; gap: 0.4em; width: max-content; box-sizing: border-box;
  padding: 0.38em 0.95em 0.38em 0.6em; border-radius: 999px; border: 1px solid rgba(255, 253, 246, 0.6); background: #a65a39; color: #fffdf6;
  font-family: inherit; font-size: clamp(10px, calc(var(--map-w, 800px) * 0.0125), 13px); font-weight: 600; line-height: 1.25; cursor: pointer;
  box-shadow: 0 2px 0 #7d4129, 0 4px 10px rgba(43, 38, 32, 0.24); animation: am-pulse-orange 2.4s ease-out infinite;
  transition: background 0.12s ease, transform 0.12s ease;
}
/* פלוס קטן בעיגול בהיר - סימן "להוסיף", באותה שפה עגולה של הכפתור */
.am-share-fab::before {
  content: "+"; flex: none; width: 1.2em; height: 1.2em; border-radius: 50%; background: #fffdf6; color: #a65a39;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1em; font-weight: 700; line-height: 1;
}
/* מפה קטנה (טלפון): מחוץ למפה, צמוד לפינה הימנית-התחתונה - בלי לכסות את האיור */
:root[data-share-dock="below"] .am-share-fab { top: calc(100% + 10px); bottom: auto; right: 0; }
:root[data-share-dock="beside"] .am-share-fab { right: auto; left: calc(100% + 10px); top: auto; bottom: 0; }
:root[data-share-dock="below"] .am-share-fab, :root[data-share-dock="beside"] .am-share-fab { font-size: 13px; min-height: 36px; }
.am-share-fab:hover { background: #8f4c2f; }
.am-share-fab:active { transform: translateY(1px); }
.am-share-fab:focus-visible { outline: 3px solid rgba(166, 90, 57, 0.4); outline-offset: 2px; }
.am-share-panel .am-creators-main-title { margin-bottom: 2px; }
.am-share-form .am-creators-back { align-self: flex-start; padding-bottom: 2px; }
.am-share-form-title { text-align: right; font-size: var(--fs-h1); margin: 0; }
.am-share-note { margin: 0 0 2px; font-size: var(--fs-meta); color: var(--olive-deep); line-height: 1.5; }
.am-share-identity { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 12px; background: #fbf5e8; box-shadow: inset 0 0 0 1px rgba(185, 160, 108, 0.3); }
.am-share-key-note { margin: 0; font-size: var(--fs-meta); color: var(--ink-soft); line-height: 1.5; }
.am-share-key-note strong { font-weight: 600; color: var(--ink); }
.am-share-who { margin: 0; font-size: var(--fs-meta); color: var(--ink-soft); }
.am-share-error { margin: 0; font-size: var(--fs-meta); color: #9b3b22; background: #fbeae2; border-radius: 10px; padding: 6px 10px; line-height: 1.5; }
.am-share-input[type="datetime-local"], select.am-share-input { min-height: 36px; height: auto; resize: none; }
.am-share-done { display: flex; flex-direction: column; gap: 8px; text-align: center; padding-top: 18px; }
.am-share-text { margin: 0; font-size: var(--fs-item); color: var(--ink); line-height: 1.55; }
.am-share-actions { display: flex; flex-direction: column; align-items: center; gap: 6px; }
@media (pointer: coarse) { .am-share-fab { min-height: 28px; } } /* מגע: יעד נוח בלי להגדיל את הכפתור */
@media (max-width: 640px) {
  .am-share-input[type="datetime-local"], select.am-share-input { font-size: 16px; height: 44px; }
}
/* "השיתופים שלי" - קריאה בלבד, באותה שפה של הפאנל */
.am-share-mine-link { display: block; margin: -4px auto 10px; background: none; border: 0; padding: 2px 6px; font-family: inherit; font-size: var(--fs-meta); color: var(--terracotta); cursor: pointer; }
.am-share-mine { display: flex; flex-direction: column; gap: 6px; }
.am-share-mine .am-creators-back { align-self: flex-start; padding-bottom: 2px; }
.am-share-mine-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.am-share-mine-item { border: 1px solid rgba(185, 160, 108, 0.55); border-radius: 10px; background: #fffaf0; padding: 7px 10px; }
.am-share-mine-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--fs-meta); color: var(--ink-soft); }
.am-share-mine-state { font-weight: 600; padding: 1px 8px; border-radius: 999px; background: #f2e6cc; color: var(--ink); white-space: nowrap; }
.am-share-mine-state[data-state="published"], .am-share-mine-state[data-state="converted"], .am-share-mine-state[data-state="handled"] { background: #e8ecdc; color: var(--olive-deep); }
.am-share-mine-state[data-state="rejected"] { background: #fbeae2; color: #9b3b22; }
.am-share-mine-title { font-size: var(--fs-item); font-weight: 600; color: var(--ink); margin-top: 3px; overflow-wrap: anywhere; }
.am-share-mine-meta { font-size: var(--fs-meta); color: var(--ink-soft); }
.am-share-mine-reason { margin-top: 4px; font-size: var(--fs-meta); color: #9b3b22; line-height: 1.5; overflow-wrap: anywhere; }
@media (max-width: 640px), (pointer: coarse) { .am-share-mine-link { min-height: 36px; } }

/* ===== תלת-מימד לכפתורי האייקון העגולים (11 העוגנים, נקודות צמודות, ונקודות
   "סיפור מקום" עם אייקון). CSS בלבד: מילוי בגרדיאנט רדיאלי עם ברק עליון-ימני,
   שיפוע פנימי (הארה למעלה, הצללה למטה), וצל מדורג רך מתחת - כפתור "מורם".
   לחוץ/פעיל = שקוע: הצל החיצוני כמעט נעלם וההצללה הפנימית מתהפכת.
   גודל, מיקום ואזור-הלחיצה לא משתנים; קובץ האייקון לא משתנה. ===== */
:root {
  --am-btn3d-fill: radial-gradient(circle at 35% 28%, #fffdf7 0%, #fbf3e3 42%, #ecdcbf 100%);
  --am-btn3d-fill-hover: radial-gradient(circle at 35% 28%, #ffffff 0%, #fdf6e8 45%, #f0e0c4 100%);
  --am-btn3d-fill-pressed: radial-gradient(circle at 50% 60%, #f9e6d8 0%, #f1d5c2 60%, #e6c2aa 100%);
  --am-btn3d-raised:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 3px rgba(120, 84, 48, 0.22),
    0 1px 1px rgba(27, 42, 74, 0.22),
    0 3px 5px -1px rgba(27, 42, 74, 0.22),
    0 7px 12px -4px rgba(27, 42, 74, 0.2);
  --am-btn3d-pressed:
    inset 0 2px 4px rgba(90, 52, 30, 0.32),
    inset 0 -1px 0 rgba(255, 255, 255, 0.6),
    0 0 1px rgba(27, 42, 74, 0.25);
}
.am-hotspot--icon .am-hotspot-icon,
.am-secondary.has-icon[data-layer="place_story"] .am-secondary-icon {
  background: var(--am-btn3d-fill); border-color: rgba(27, 42, 74, 0.32);
  box-shadow: var(--am-btn3d-raised);
  transition: border-color 0.15s ease, box-shadow 0.12s ease, background 0.15s ease, translate 0.12s ease;
}
.am-hotspot--icon:hover .am-hotspot-icon,
.am-secondary.has-icon[data-layer="place_story"]:hover .am-secondary-icon,
.am-secondary.has-icon[data-layer="place_story"]:focus-visible .am-secondary-icon {
  background: var(--am-btn3d-fill-hover); border-color: var(--terracotta);
  box-shadow: var(--am-btn3d-raised), 0 0 0 3px rgba(189, 108, 71, 0.16);
}
.am-hotspot--icon:focus-visible .am-hotspot-icon { background: var(--am-btn3d-fill-hover); box-shadow: var(--am-btn3d-raised); }
.am-hotspot--icon:active .am-hotspot-icon, .am-hotspot--icon.is-active .am-hotspot-icon,
.am-secondary.has-icon[data-layer="place_story"]:active .am-secondary-icon,
.am-secondary.has-icon[data-layer="place_story"].is-active .am-secondary-icon {
  background: var(--am-btn3d-fill-pressed); border-color: var(--terracotta);
  box-shadow: var(--am-btn3d-pressed); translate: 0 1px;
}
@media (max-width: 640px) {
  /* בטלפון לנקודות הסיפור יש מרווח-מגע שקוף (background-clip: content-box), לכן
     הצל החיצוני לא מוצג כאן - רק המילוי התלת-מימדי והטבעת */
  .am-secondary.has-icon[data-layer="place_story"] .am-secondary-icon,
  .am-secondary.has-icon[data-layer="place_story"]:hover .am-secondary-icon,
  .am-secondary.has-icon[data-layer="place_story"].is-active .am-secondary-icon { box-shadow: none; background-clip: content-box; }
}
@media (prefers-reduced-motion: reduce) {
  .am-hotspot--icon .am-hotspot-icon, .am-secondary.has-icon[data-layer="place_story"] .am-secondary-icon { transition: none; }
}

/* ---------------- קו-רקיע בתחתית + "עושים קהילה" מעליו ----------------
   קו-הרקיע (נכס נפרד /decor/armon-skyline-line.svg) - פס ברוחב המפה, מתוח לגובה (~7% מגובה המפה),
   ברצועת השמנת שבתחתית מסגרת התצוגה, מתחת לכל הכפתורים, בלי pointer-events. */
.am-map-stage img.am-skyline-line {
  position: absolute; left: 2%; width: 96%; bottom: 0.6%; height: 7%; display: block;
  pointer-events: none; user-select: none; z-index: 0;
}
/* רחוב עולי הגרדום + הכיכר המרכזית: שכבה בגודל הבמה, מעל האיור ומתחת לעוגנים, לא לחיצה */
.am-map-stage img.am-street-layer { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; user-select: none; z-index: 0; }
/* שלושה מוטיבים מקומיים בקו ידני דק — שכבת קישוט שקופה, מתחת לכל נקודות המפה. */
.am-map-stage img.am-place-motifs {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  pointer-events: none; user-select: none; z-index: 0;
}
/* "עושים קהילה" (בלי הפסים שמסביב - brand-osim-kehila-v3-title.png): גדול יותר, בפינה הימנית-התחתונה
   הפנויה מחוץ לקו המתאר; הכפתור הכחול "הצטרפו" ממורכז מתחתיו, וקו-הרקיע מתחת לשניהם. */
.am-brand { left: auto; right: 2.5%; top: 81.3%; width: 26%; }
.am-legend-dot { left: 84.5%; top: 90.5%; }
/* מפה צרה (טלפון): כרטיס השמנת נמשך מתחת למפה (פס של 104px), ובו "עושים קהילה" עם "הצטרפו" משמאל
   ו"יש לי משהו לשתף" מימין - בלי לכסות את המפה. קו-הרקיע נשאר בתחתית המפה עצמה. */
@container (max-width: 420px) {
  .am-brand { right: auto; left: 4%; top: calc(100% + 10px); width: 44%; z-index: 1; }
  .am-legend-dot { left: 26%; top: calc(100% + 80px); }
  .am-share-fab { z-index: 6; }
}
@media (max-width: 640px) {
  .am-map-stage::before {
    content: ''; position: absolute; inset: 0 0 -104px 0; z-index: -1; border-radius: 12px; background: #faf5ea;
    box-shadow: 0 1px 2px rgba(60,45,25,0.18), 0 6px 14px rgba(60,45,25,0.16), 0 18px 36px rgba(60,45,25,0.14);
  }
  :root[data-share-dock="below"] .am-share-fab { right: 3%; top: calc(100% + 16px); }
}
/* רקע העמוד: אבן ירושלמית עדינה (נכס נפרד /decor/armon-stone-bg.svg); המפה מורמת ממנו בצל רך */
body { background: #e6dcc8 url('/decor/armon-stone-bg.svg') repeat; }
.am-map-stage img.base-photo {
  box-shadow: 0 1px 2px rgba(60,45,25,0.18), 0 6px 14px rgba(60,45,25,0.16), 0 18px 36px rgba(60,45,25,0.14);
}
/* טלפון: המפה ורצועת השמנת שמתחתיה הם כרטיס אחד - בלי צל/פינות בתחתית האיור (אחרי כלל הצל, כדי לגבור עליו) */
@media (max-width: 640px) {
  .am-map-stage img.base-photo { box-shadow: none; border-radius: 12px 12px 0 0; }
}


/* Refined spacing after live review: keep the brand clear of the join CTA and skyline. */
@media (min-width: 641px) {
  .am-brand { top: 75.5%; }
  .am-legend-dot {
    min-width: 0;
    min-height: 0;
    padding: 0.4em 1.2em;
    font-size: 14px;
    font-weight: 700;
    border-radius: 999px;
    box-shadow: 0 2px 0 #163a69, 0 4px 10px rgba(31, 78, 140, 0.28);
  }
  .am-legend-dot { top: 89.5%; }
}
@container (max-width: 420px) {
  .am-brand { top: calc(100% + 2px); }
  .am-legend-dot {
    min-width: 0;
    min-height: 0;
    padding: 0.4em 1.15em;
    font-size: 13px;
    font-weight: 700;
  }
}


/* Hard override for the live Armon Hanatziv layout; keep after all legacy placement rules. */
@media (min-width: 641px) {
  .am-map-stage .am-brand {
    top: 75.5% !important;
    right: 2.5% !important;
    left: auto !important;
    width: 28% !important;
  }
  .am-map-stage .am-legend-dot {
    top: 89.5% !important;
    left: 84.5% !important;
    min-width: 142px !important;
    min-height: 48px !important;
    padding: 0.55em 1.7em !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    box-shadow: 0 3px 0 #163a69, 0 6px 14px rgba(31, 78, 140, 0.3) !important;
  }
}
@container (max-width: 420px) {
  .am-map-stage .am-brand {
    top: calc(100% + 2px) !important;
    right: auto !important;
    left: 4% !important;
    width: 44% !important;
  }
  .am-map-stage .am-legend-dot {
    top: calc(100% + 80px) !important;
    left: 26% !important;
    min-width: 112px !important;
    min-height: 40px !important;
    padding: 0.48em 1.5em !important;
    font-size: 14px !important;
  }
}


/* Brand CTA: compact, confident blue button instead of the image logo + tagline. */
.am-map-stage img.am-brand { display: none !important; }
.am-map-stage .am-legend-dot.am-brand-button {
  left: auto !important;
  right: 4% !important;
  top: 78.5% !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0.48em 1.25em !important;
  border: 1px solid rgba(255,255,255,0.82) !important;
  border-radius: 999px !important;
  background: #1f4f91 !important;
  color: #fff !important;
  font-family: var(--font-heading) !important;
  font-size: clamp(15px, 1.35vw, 19px) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  box-shadow: 0 3px 0 #163a69, 0 6px 14px rgba(31,78,140,0.3) !important;
  animation: none !important;
  white-space: nowrap !important;
}
.am-map-stage .am-legend-dot.am-brand-button:hover,
.am-map-stage .am-legend-dot.am-brand-button:focus-visible {
  background: #163f78 !important;
  box-shadow: 0 3px 0 #102f56, 0 0 0 3px rgba(31,78,140,0.18) !important;
}
@container (max-width: 420px) {
  .am-map-stage .am-legend-dot.am-brand-button {
    left: 4% !important;
    right: auto !important;
    top: calc(100% + 24px) !important;
    font-size: 15px !important;
    padding: 0.45em 1.1em !important;
  }
}


/* Match the blue "עושים קהילה" CTA to the exact compact sizing and placement of "יש לי הצעה". */
.am-map-stage .am-legend-dot.am-brand-button {
  position: absolute !important;
  left: auto !important;
  right: 3.3% !important;
  top: 78.5% !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: row !important;
  gap: 0.4em !important;
  width: max-content !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0.38em 0.95em 0.38em 0.6em !important;
  border: 1px solid rgba(255, 253, 246, 0.6) !important;
  border-radius: 999px !important;
  background: #1f4e8c !important;
  color: #fffdf6 !important;
  font-family: inherit !important;
  font-size: clamp(10px, calc(var(--map-w, 800px) * 0.0125), 13px) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  box-shadow: 0 2px 0 #163a69, 0 4px 10px rgba(31, 78, 140, 0.3) !important;
  animation: am-pulse-blue 2.4s ease-out infinite !important;
  white-space: nowrap !important;
}
.am-map-stage .am-legend-dot.am-brand-button .am-brand-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  background: #fffdf6;
  color: #1f4e8c;
  font-size: 0.95em;
  font-weight: 800;
  line-height: 1;
}
.am-map-stage .am-legend-dot.am-brand-button:hover,
.am-map-stage .am-legend-dot.am-brand-button:focus-visible {
  background: #183f73 !important;
  box-shadow: 0 2px 0 #163a69, 0 4px 10px rgba(31, 78, 140, 0.3) !important;
}
.am-map-stage .am-legend-dot.am-brand-button:active { transform: translateY(1px) !important; }
@container (max-width: 420px) {
  .am-map-stage .am-legend-dot.am-brand-button {
    left: auto !important;
    right: 3.3% !important;
    top: calc(100% + 16px) !important;
    font-size: 13px !important;
  }
}