/* ===== Resource Map styles (builds on base.css) ===== */
[hidden]{display:none!important}
:root{--bar-h:68px}

/* Branded top strip */
:root{--bar-h:176px}
.bar{height:var(--bar-h);background:var(--purple);color:#fff;display:flex;align-items:center;gap:26px;padding:0;padding-inline-start:24px;position:relative;z-index:1100;overflow:hidden}
.bar-logo{flex:0 0 auto;align-self:flex-start;margin-top:22px}
.bar-logo img{width:170px;height:auto;display:block}
.bar-title{border-inline-start:1px solid rgba(255,255,255,.3);padding-inline-start:24px;min-width:0;flex:1 1 auto}
.bar-eyebrow{margin:0;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--olive)}
.bar-title h1{margin:2px 0 6px;font-size:27px;font-weight:800;line-height:1.1}
.bar-desc{margin:0;max-width:46em;font-size:14.5px;line-height:1.45;color:#F1F0FA}
.bar-help{flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.bar-help a{display:flex;flex-direction:column;align-items:flex-start;color:#fff;text-decoration:none;font-weight:800;font-size:19px;line-height:1.05;background:rgba(255,255,255,.12);border-radius:10px;padding:6px 12px}
.bar-help a span{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#E2E1F2}
.bar-help a:hover{background:rgba(255,255,255,.22)}
.bar-help .bar-list{font-size:14px;font-weight:700;justify-content:center;align-items:center;border:1.5px solid rgba(255,255,255,.7);background:none}
.bar-art{flex:0 0 auto;height:100%;aspect-ratio:4307/8000;background:#D57C6C}
.bar-art img{display:block;height:100%;width:100%;object-fit:contain}

/* Full-screen map stage */
.stage{position:relative;height:calc(100vh - var(--bar-h));height:calc(100dvh - var(--bar-h));min-height:520px;background:#E9E8F2}
#map{position:absolute;inset:0;font-family:"Montserrat",sans-serif;z-index:1}

/* Floating panel */
.panel{position:absolute;z-index:1000;top:14px;inset-inline-start:14px;bottom:14px;width:350px;display:flex;flex-direction:column;background:var(--card);border-radius:18px;box-shadow:0 10px 30px rgba(38,38,58,.22),0 2px 6px rgba(38,38,58,.12);overflow:hidden}
.panel.collapsed{display:none}
.grab{display:none}
.ptop{display:flex;gap:6px;padding:10px;border-bottom:1px solid var(--rule)}
.searchbox{position:relative;display:block;flex:1 1 auto;min-width:0}
.searchbox svg{position:absolute;inset-inline-start:11px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--muted)}
.searchbox input{width:100%;font:500 14.5px "Montserrat",sans-serif;color:var(--ink);background:var(--wash);border:1.5px solid transparent;border-radius:10px;padding:9px 10px;padding-inline-start:34px}
.searchbox input:focus,.townsel select:focus{border-color:var(--purple);outline:none;background:var(--card)}
.iconbtn{flex:0 0 40px;height:40px;display:grid;place-items:center;border:none;border-radius:10px;background:var(--purple);color:#fff;cursor:pointer}
.iconbtn svg{width:19px;height:19px}
.iconbtn[aria-pressed="true"]{background:var(--olive);color:#26263A}
.iconbtn.collapse{background:var(--wash);color:var(--ink)}
.pbody{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
.keyhead{display:flex;align-items:center;gap:8px;padding:8px 10px 4px}
.keytoggle{display:flex;align-items:center;gap:6px;background:none;border:none;padding:4px 2px;cursor:pointer;color:var(--ink);font:700 13px "Montserrat",sans-serif;letter-spacing:.06em;text-transform:uppercase}
.keytoggle em{white-space:nowrap;font-style:normal;font-weight:600;text-transform:none;letter-spacing:0;color:var(--muted);font-size:12.5px;background:var(--wash);border-radius:999px;padding:2px 8px}
.keytoggle svg{width:15px;height:15px;transition:transform .15s}
.keytoggle[aria-expanded="false"] svg{transform:rotate(-90deg)}
.townsel{margin-inline-start:auto;flex:0 0 auto;width:auto}
.townsel select{max-width:140px;min-width:0;width:auto;font:600 12.5px "Montserrat",sans-serif;color:var(--ink);background:var(--wash);border:1.5px solid transparent;border-radius:8px;padding:5px 6px}
.key{display:grid;grid-template-columns:1fr 1fr;gap:2px 6px;padding:2px 8px 8px;border-bottom:1px solid var(--rule)}
.key[hidden]{display:none}
.kitem{display:flex;align-items:center;gap:7px;min-width:0;border:none;background:none;border-radius:8px;padding:5px 6px;cursor:pointer;font:600 12.5px/1.2 "Montserrat",sans-serif;color:var(--ink);text-align:start}
.kitem i{flex:0 0 12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.kitem span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto}
.kitem b{font-weight:500;color:var(--muted);font-size:11.5px}
.kitem:hover{background:var(--wash)}
.key.some .kitem:not([aria-pressed="true"]){opacity:.45}
.kitem[aria-pressed="true"]{background:var(--wash)}
.kitem.all{grid-column:1 / -1;justify-content:flex-start;color:var(--link);font-weight:700}
.kitem.all[hidden]{display:none}
.listhead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px 6px}
.count{margin:0;font-size:13px;color:var(--muted);font-weight:600}
.count button{font:inherit;color:var(--link);background:none;border:none;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.inview{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap;cursor:pointer}
.inview input{accent-color:var(--purple);margin:0}
.results{list-style:none;margin:0;padding:0 6px 6px;overflow:auto;flex:1 1 auto;min-height:0}
.res{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:2px 9px;align-items:start;border-radius:10px;padding:8px 8px;cursor:pointer;border:1.5px solid transparent}
.res i{width:10px;height:10px;border-radius:50%;margin-top:4px}
.res h3{margin:0;font-size:13.5px;font-weight:700;line-height:1.3}
.res p{grid-column:2;margin:0;font-size:12px;color:var(--muted);line-height:1.35}
.res .dist{font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap;margin-top:1px}
.res:hover,.res:focus-visible{background:var(--wash);outline:none}
.res.on{border-color:var(--purple);background:var(--wash)}
.empty{padding:14px 10px;font-size:13px;color:var(--muted)}
.offmap{margin:0;padding:8px 12px 10px;font-size:12px;color:var(--muted);border-top:1px solid var(--rule)}
.offmap:empty{display:none}
.panel .autonote{margin:0;padding:8px 12px 0;font-size:11.5px;line-height:1.4;color:var(--muted);border-top:1px solid var(--rule);font-style:italic}
.panel .autonote + .offmap{border-top:none}
.openpanel{position:absolute;z-index:1000;top:14px;inset-inline-start:14px;display:flex;align-items:center;gap:8px;font:700 14px "Montserrat",sans-serif;background:var(--purple);color:#fff;border:none;border-radius:12px;padding:11px 14px;box-shadow:0 6px 18px rgba(38,38,58,.25);cursor:pointer}
.openpanel svg{width:18px;height:18px}
.openpanel span{font-weight:600;opacity:.85}
.openpanel .op-label{font-weight:700}

/* Map controls (Leaflet) */
.leaflet-control-zoom a,.leaflet-bar a.fitall{width:36px;height:36px;line-height:36px;font-size:20px;color:#26263A}
.leaflet-bar a.fitall{display:grid;place-items:center}
.leaflet-bar a.fitall svg{width:18px;height:18px}
.leaflet-bar{border:none!important;box-shadow:0 4px 14px rgba(38,38,58,.22)!important;border-radius:10px!important;overflow:hidden}

/* Pins & clusters */
.pin{background:none;border:none}
.pin svg{display:block;filter:drop-shadow(0 2px 2px rgba(0,0,0,.28));transition:transform .12s;transform-origin:50% 100%}
.pin.on svg,.pin.hl svg{transform:scale(1.3)}
.cluster{background:none}
.cluster div{width:40px;height:40px;border-radius:50%;background:var(--purple);color:#fff;font:800 14px/40px "Montserrat",sans-serif;text-align:center;box-shadow:0 0 0 5px rgba(98,99,160,.3),0 2px 6px rgba(0,0,0,.25)}
.cluster.big div{width:48px;height:48px;line-height:48px;font-size:15px}
.me-dot{width:18px;height:18px;border-radius:50%;background:#2F7BF6;border:3px solid #fff;box-shadow:0 0 0 6px rgba(47,123,246,.25)}

/* Popups */
.leaflet-popup-content-wrapper{border-radius:16px;font-family:"Montserrat",sans-serif;color:#26263A}
.leaflet-popup-content{margin:14px 16px;min-width:220px;max-width:280px;font-size:13.5px;line-height:1.45}
.pp-top{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#5A5A72;margin-bottom:4px}
.pp-top i{width:9px;height:9px;border-radius:50%}
.pp h3{margin:0 0 4px;font-size:16px;font-weight:700;line-height:1.25}
.pp p{margin:0 0 6px}
.pp .hrs span{display:block}
.pp-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.pp-acts a{display:inline-flex;align-items:center;font-weight:700;font-size:13px;text-decoration:none;border-radius:999px;padding:7px 12px;background:#F2F1F8;color:#45467A}
.pp-acts a.go{background:#6263A0;color:#fff}
.pp .approx{font-size:12px;color:#5A5A72;font-style:italic}
.leaflet-container a.leaflet-popup-close-button{top:6px;right:6px}

/* Footer links */
.links{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 40px}
.linkcard{display:flex;flex-direction:column;gap:6px;padding:24px 26px;border-radius:22px;background:var(--purple);color:#fff;text-decoration:none;transition:transform .12s}
.linkcard:hover{transform:translateY(-2px)}
.linkcard .lk-eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--olive)}
.linkcard strong{font-size:24px;font-weight:800;line-height:1.15}
.linkcard span:not(.lk-eyebrow){font-size:15px;color:#F1F0FA}
.linkcard em{margin-top:8px;font-style:normal;font-weight:700;font-size:15px;display:inline-flex;align-items:center;gap:8px}
.linkcard em svg{width:18px;height:18px}
.linkcard.alt{background:var(--card);color:var(--ink);border:2px solid var(--purple)}
.linkcard.alt .lk-eyebrow{color:var(--coral)}
.linkcard.alt span:not(.lk-eyebrow){color:var(--muted)}
.linkcard.alt em{color:var(--link)}
@media (max-width:760px){ .links{grid-template-columns:1fr} }
/* Footer */
.foot{margin-top:0;border-radius:0;padding-top:40px}
.foot .small{max-width:38em}

@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .stage{background:#202038}}
:root[data-theme="dark"] .stage{background:#202038}

@media (max-width:1180px){
  .bar-desc{font-size:13.5px}
  .bar-help a span{display:none}
  .bar-help a{padding:8px 10px;font-size:16px}
}
@media (max-width:960px){
  .bar-logo img{width:130px}
  .bar-title h1{font-size:22px}
  .bar-help{grid-template-columns:1fr}
  .bar-help .bar-list{display:none}
}

/* Phones: full-screen map + bottom sheet */
@media (max-width:760px){
  .bar{height:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"logo art" "lang art" "title art" "help help";gap:6px 12px;padding:12px 0;padding-inline-start:14px;align-items:start}
  .bar-logo{grid-area:logo;margin:0}
  .bar-logo img{width:118px}
  .bar-title{grid-area:title;border:none;padding:0}
  .bar-eyebrow{font-size:10px}
  .bar-title h1{font-size:19px;margin:1px 0 4px}
  .bar-desc{font-size:12.5px;line-height:1.4}
  .bar-art{grid-area:art;height:auto;width:86px;align-self:start;margin-top:-12px;aspect-ratio:4307/8000}
  .bar-help{grid-area:help;grid-template-columns:repeat(3,1fr);padding-inline-end:14px;gap:6px}
  .bar-help a{align-items:center;font-size:16px;padding:7px 6px}
  .bar-help .bar-list{display:none}
  .panel{top:auto;left:0;right:0;bottom:0;width:auto;border-radius:20px 20px 0 0;max-height:calc(100% - 64px);transition:max-height .22s ease}
  .panel.collapsed{display:flex}
  .grab{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;padding:8px 0 2px;cursor:pointer;font:700 13px "Montserrat",sans-serif;color:var(--ink)}
  .grab-bar{width:40px;height:5px;border-radius:3px;background:var(--rule)}
  .iconbtn.collapse{display:none}
  .panel:not(.open) .pbody{display:none}
  .panel:not(.open) .ptop{border-bottom:none;padding-bottom:12px}
  .panel.open{max-height:78%;height:78%}
  .key{grid-template-columns:1fr 1fr}
  .openpanel{display:none!important}
  .leaflet-bottom.leaflet-right{bottom:118px}
  .leaflet-top.leaflet-left{display:none}
  .leaflet-top.leaflet-right .leaflet-control{margin-top:10px}
}

/* ===== Languages ===== */
/* Language picker on the purple header (under the logo on wider screens) */
.mapapp .bar .langpick.onbar{position:absolute;inset-inline-start:24px;bottom:16px;z-index:2;color:#fff;border-color:rgba(255,255,255,.7);height:34px}
.mapapp .bar .langpick.onbar select{font-size:13px;padding:6px 2px;max-width:8.5em}
.mapapp .bar .langpick.onbar:focus-within{box-shadow:0 0 0 3px rgba(255,255,255,.45)}
@media (max-width:960px){ .mapapp .bar .langpick.onbar{bottom:12px} }
@media (max-width:760px){
  .mapapp .bar .langpick.onbar{position:static;grid-area:lang;justify-self:start;height:32px}
}
/* Topic colors for the list and key dots (no inline styles, for the security policy) */
.c-food{background:#DA7C7D}.c-housing{background:#6263A0}.c-bills{background:#A69C2C}.c-health{background:#D69A7B}
.c-mind{background:#8E5C9E}.c-early{background:#C7BE55}.c-ability{background:#43969F}.c-clothes{background:#E6863D}
.c-learn{background:#45467A}.c-jobs{background:#F3BB44}.c-immig{background:#B85A5B}.c-legal{background:#7A7BB8}.c-ride{background:#26263A}
bdi{unicode-bidi:isolate}
/* Right-to-left (Arabic) */
[dir="rtl"] .panel .searchbox svg{left:auto;right:11px}
[dir="rtl"] .panel .searchbox input{padding:9px 34px 9px 10px}
[dir="rtl"] .panel .townsel select{padding:5px 6px}
[dir="rtl"] .keytoggle[aria-expanded="false"] svg{transform:rotate(90deg)}
[dir="rtl"] .linkcard em svg{transform:scaleX(-1)}
[dir="rtl"] .pp .pp-top{letter-spacing:0}
:lang(ar) .bar-eyebrow,:lang(ar) .keytoggle,:lang(ar) .linkcard .lk-eyebrow,:lang(ar) .bar-help a span{letter-spacing:0}
.leaflet-container .pp[dir="rtl"]{text-align:right}
.leaflet-popup:has(.pp[dir="rtl"]) a.leaflet-popup-close-button{right:auto;left:6px}
.leaflet-container .pp[dir="rtl"] .pp-top{padding-right:0;padding-left:16px}
.leaflet-container .pp[dir="ltr"] .pp-top{padding-right:16px}