:root{
  --navy:#15263e; --navy2:#1d3354; --gold:#b8964e;
  --bg:#0f1824; --card:#18273a; --line:#26394f;
  --tx:#eef3f9; --dim:#93a6bd;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--tx);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Rubik,Arial,sans-serif;
  display:flex; flex-direction:column; overscroll-behavior:none;
}

/* ===== סרגל עליון ===== */
#bar{background:var(--navy); padding:calc(var(--safe-t) + 10px) 12px 10px; box-shadow:0 2px 14px #0008; z-index:600}
.row{display:flex; gap:8px; align-items:center}
select,button{font:inherit; border-radius:10px; border:1px solid var(--line); cursor:pointer}
select{background:var(--navy2); color:var(--tx); padding:8px 10px; font-weight:600}
button.ghost{background:transparent; color:var(--tx); padding:8px 12px}
/* היעד הנוכחי — ונקודת היציאה ממנו. מסומן כ«נפתח» (מסגרת + חץ) ולא ככיתוב,
   כי השאלה "איך חוזרים למסך המדינות" נשאלה בשטח על הגרסה הקודמת. */
.cityBtn{display:flex; align-items:center; gap:6px; background:var(--navy2);
         border:1px solid #ffffff24; color:var(--tx); padding:8px 12px; font:inherit;
         font-weight:700; max-width:52vw}
.cityBtn:active{background:var(--navy)}
.cityBtn #cityName{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cityBtn .chev{color:var(--dim); font-size:14px; flex:none}
.cityBtn::before{content:"📍"; flex:none}
button.primary{background:var(--gold); color:#1a1205; border:0; padding:11px 18px; font-weight:700}
button.icon{background:transparent;border:0;color:var(--dim);font-size:22px;padding:4px 8px}
.status{margin-inline-start:auto; font-size:12.5px; color:var(--dim); text-align:end; max-width:42%}

.chips{display:flex; gap:6px; overflow-x:auto; margin-top:9px; padding-bottom:2px; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{white-space:nowrap; font-size:13.5px; padding:6px 13px; border-radius:999px;
      background:var(--navy2); color:var(--dim); border:1px solid transparent}
.chip[aria-pressed="true"]{background:var(--gold); color:#1a1205; font-weight:700}

/* שדה חיפוש — אותה צורה בסרגל ובמסך היעדים */
.find{width:100%; margin-top:8px; font:inherit; font-size:14px; padding:8px 12px;
      border-radius:10px; border:1px solid var(--line); background:var(--navy2); color:var(--tx)}
.find::placeholder{color:var(--dim)}
.find::-webkit-search-cancel-button{filter:invert(1) opacity(.45)}

/* ===== מפה ===== */
/* המפה וקטורית (MapLibre) — הערכה הכהה מגיעה מהסגנון עצמו ולא מפילטר CSS,
   ולכן הטקסט על המפה נשאר קריא ולא הפוך-צבעים. */
#map{height:34vh; min-height:200px; background:#0b1119; z-index:1}
.maplibregl-ctrl-attrib{background:#0009!important; font-size:10px}
.maplibregl-ctrl-attrib, .maplibregl-ctrl-attrib a{color:var(--dim)!important}
.maplibregl-ctrl-attrib-button{filter:invert(1) opacity(.5)}
.pin{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;cursor:pointer;
     background:var(--gold);color:#1a1205;font-size:12px;font-weight:800;border:2px solid #0f1824}
.me{width:16px;height:16px;border-radius:50%;background:#4da3ff;border:3px solid #fff;box-shadow:0 0 0 7px #4da3ff33}

/* ===== רשימה ===== */
#list{flex:1; overflow-y:auto; padding:10px 12px calc(var(--safe-b) + 24px); -webkit-overflow-scrolling:touch}
.item{background:var(--card); border:1px solid var(--line); border-radius:14px;
      padding:12px 14px; margin-bottom:9px; display:flex; gap:12px; align-items:center; cursor:pointer}
.item:active{background:var(--navy2)}
.num{flex:0 0 30px; height:30px; border-radius:50%; background:var(--navy2); color:var(--gold);
     display:grid; place-items:center; font-size:13px; font-weight:800}
.item .body{min-width:0}
.item h3{margin:0; font-size:16px; font-weight:700}
/* השם הלועזי — תמיד LTR, גם כשהוא משובץ בתוך שורה עברית */
.en{direction:ltr; unicode-bidi:isolate; display:inline-block; font-weight:500;
    color:var(--dim); font-size:.82em; letter-spacing:.2px}
.sheet h2 .en{font-size:.6em; display:block; margin-top:3px}
.item .sub{color:var(--dim); font-size:12.5px; margin-top:2px}
.dist{margin-inline-start:auto; color:var(--gold); font-size:13px; font-weight:700; white-space:nowrap}
.empty{text-align:center; color:var(--dim); padding:40px 20px; line-height:1.9}

/* ===== גיליון תחתון ===== */
#scrim{position:fixed; inset:0; background:#000a; z-index:900; backdrop-filter:blur(2px)}
.sheet{position:fixed; inset-inline:0; bottom:0; z-index:1000; max-height:88vh; overflow-y:auto;
       background:var(--card); border-radius:20px 20px 0 0; border-top:1px solid var(--line);
       padding:8px 18px calc(var(--safe-b) + 26px); animation:up .22s ease-out}
@keyframes up{from{transform:translateY(100%)}}
.grab{width:40px;height:4px;border-radius:2px;background:var(--line);margin:4px auto 10px}
/* יציאה מפורשת ובמילים. ✕ לבדו לא נקרא כ"חזרה לרשימה", וכפתור "חזור"
   של המכשיר לא עזר כי הגיליון לא היה רשום בהיסטוריה. */
.back{display:block; background:transparent; border:0; color:var(--gold);
      font:inherit; font-size:14px; font-weight:600; padding:2px 0 10px; text-align:start}
.sheetHead{display:flex; align-items:flex-start; gap:8px}
.sheet h2{margin:0; font-size:21px; line-height:1.3; flex:1}
.meta{color:var(--dim); font-size:12.5px; margin:4px 0 14px}
.actions{display:flex; gap:9px; margin-bottom:16px}
.narr{font-size:17.5px; line-height:1.95; white-space:pre-wrap; margin:0}
.narr .on{background:#b8964e33; border-radius:3px}
.credit{color:var(--dim); font-size:11.5px; margin-top:22px; border-top:1px solid var(--line); padding-top:12px}
.credit a{color:var(--dim)}

/* ===== בחירת יעד ===== */
#picker{position:fixed; inset:0; z-index:1200; background:var(--bg); overflow-y:auto;
        padding:calc(var(--safe-t) + 18px) 18px calc(var(--safe-b) + 30px)}
.pickHead{display:flex; align-items:center; gap:8px; margin-bottom:4px}
.pickHead h1{font-size:25px; margin:0; flex:1}
.pickNote{color:var(--dim); font-size:12.5px; line-height:1.8; margin-top:22px;
          border-top:1px solid var(--line); padding-top:14px}
/* «מצא אותי» — הפעולה הראשית במסך, ולכן בצבע הפעולה ולא כעוד שורה ברשימה.
   זו הדרך הקצרה ביותר מפתיחת האפליקציה ל"מה יש סביבי" בלי לדעת כלום. */
.locate{width:100%; margin:14px 0 0; background:var(--gold); color:#1a1205; border:0;
        border-radius:12px; padding:13px; font:inherit; font-weight:700; font-size:15px}
.locate:disabled{opacity:.6}
.locateMsg{color:var(--dim); font-size:12.5px; margin:9px 2px 0; line-height:1.7}
.locateMsg:empty{display:none}

/* מדינה = שורה אחת שנפתחת. בסגור, מסך הכניסה הוא רשימת מדינות קצרה
   שנסרקת במבט; הערים נחשפות רק למי שביקש אותן. */
.country{margin-top:9px}
.countryHead{width:100%; display:flex; align-items:center; gap:10px; font:inherit;
             background:var(--card); border:1px solid var(--line); border-radius:13px;
             padding:14px 15px; color:var(--tx); text-align:start}
.countryHead:active{background:var(--navy2)}
.countryHead .flag{font-size:19px; line-height:1}
.countryHead .cname{font-weight:700; font-size:16.5px}
.countryHead .ccount{margin-inline-start:auto; font-size:11.5px; color:var(--dim)}
/* החץ מסתובב — הסימן היחיד שאומר «יש כאן עוד, והוא נפתח כלפי מטה» */
.countryHead .chev{font-size:15px; color:var(--dim); transition:transform .18s;
                   transform-origin:center}
.country.open .countryHead .chev{transform:rotate(180deg)}
.country.open .countryHead{background:var(--navy2); border-color:#ffffff1f}
.cities{padding:8px 6px 2px}
.city{width:100%; text-align:start; background:var(--card); border:1px solid var(--line);
      border-radius:13px; padding:13px 15px; margin-bottom:7px; color:var(--tx);
      display:flex; align-items:center; gap:10px; font:inherit}
.city:active{background:var(--navy2)}
.city b{font-weight:700; font-size:16px}
.city .en{font-size:.78em}
.tag{margin-inline-start:auto; font-size:11.5px; font-weight:700; padding:3px 9px;
     border-radius:999px; white-space:nowrap}
.tag.ready{background:#b8964e33; color:var(--gold)}
.tag.soon{background:#4da3ff22; color:#8fc3ff}
.tag.request{background:#ffffff14; color:var(--dim)}

/* ===== הזמנה להתקנה =====
   צבע הפעולה רק על הכפתור, לא על הכרטיס: זו הצעה, לא הדרך היחידה להמשיך. */
#install{display:flex; align-items:center; gap:10px; margin-top:16px;
         background:var(--card); border:1px solid var(--line); border-right:3px solid var(--gold);
         border-radius:13px; padding:13px 14px}
#install .insTx{flex:1; min-width:0; font-size:13.5px; line-height:1.7}
#install b{display:block; font-size:15px; margin-bottom:2px}
#install span{color:var(--dim)}
#install .primary{flex:none; padding:9px 15px; font-size:14px}
#install .icon{flex:none; font-size:17px}

/* ===== בקשת עיר =====
   נפתחת מעל מסך היעדים (z 1200), ולכן גבוהה ממנו — אחרת היא נפתחת מאחוריו
   והמשתמש לוחץ «בקש» ולא קורה כלום. */
#reqSheet{z-index:1300}
body.req #scrim{z-index:1250}
#reqForm{display:flex; gap:8px; margin:14px 0 4px}
#reqForm input{flex:1; min-width:0; font:inherit; padding:11px 13px; border-radius:10px;
               border:1px solid var(--line); background:var(--navy2); color:var(--tx)}
#reqForm input::placeholder{color:var(--dim)}

/* ===== הורדה לאופליין ===== */
#dl[data-done="1"]{color:var(--gold)}