/* NABA · kies je wijk — v4: kaart + zoekbalk + wijkkaarten (patroon van Airbnb / Apple Maps), in NABA-stijl */
:root{
  --ink:#0a0f2d; --ink2:#141b4a; --lime:#cfff3f; --cyan:#3fd8ff; --violet:#9d7bff;
  --paper:#f4f5fa; --text:#2a2f4a; --muted:#62678a; --line:rgba(10,15,45,.09);
  --head:"Space Grotesk",system-ui,sans-serif; --body:"Inter",system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --shadow:0 1px 2px rgba(10,15,45,.06),0 10px 30px rgba(10,15,45,.14);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#dfe6ee;font-family:var(--body);color:var(--text)}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
svg{display:block}
[hidden]{display:none!important}

.stage{position:fixed;inset:0;overflow:hidden;background:radial-gradient(120% 70% at 50% 0%,#cdeaf7 0%,#e6eef3 45%,#dfe6ee 100%)}
.sky{position:absolute;left:0;right:0;top:0;height:120px;pointer-events:none;background:linear-gradient(#bfe4f5 0%,rgba(205,234,247,0) 100%)}
.world{position:absolute;inset:0;touch-action:none;transition:opacity .5s ease}
.world.is-off{opacity:0}
.labels{position:absolute;inset:0;pointer-events:none}
.wl{position:absolute;left:0;top:0;white-space:nowrap;font:600 13px/1 var(--head);color:var(--ink);background:#fff;padding:7px 10px;border-radius:10px;box-shadow:0 4px 14px rgba(10,15,45,.16);transition:opacity .3s,background .2s,color .2s,box-shadow .2s;pointer-events:auto;cursor:pointer}
.wl.is-sel{background:var(--ink);color:#fff;box-shadow:0 0 0 3px var(--lime),0 8px 20px rgba(10,15,45,.3)}
.wl.is-shut{background:none;box-shadow:none;color:rgba(10,15,45,.4);font-size:11px;padding:0;pointer-events:none}

/* zoekbalk */
.bar{position:fixed;z-index:10;top:max(12px,env(safe-area-inset-top));left:12px;right:12px;max-width:560px;margin:0 auto;transition:opacity .5s,transform .6s var(--ease)}
.search{display:flex;align-items:center;gap:10px;height:56px;padding:0 6px 0 10px;background:#fff;border-radius:18px;box-shadow:var(--shadow)}
.search:focus-within{box-shadow:0 0 0 2px var(--ink),var(--shadow)}
.search .mark{width:34px;height:34px;border-radius:11px;flex:none;background:conic-gradient(from 200deg,var(--lime),var(--cyan),var(--violet),var(--lime))}
.search input{flex:1;min-width:0;border:0;background:none;outline:0;height:100%;font:500 16.5px/1 var(--body);color:var(--ink)}
.search input::placeholder{color:#8a8fa8}
.search input::-webkit-search-cancel-button{display:none}
.loc{width:44px;height:44px;border-radius:14px;background:var(--ink);display:grid;place-items:center;flex:none}
.loc svg{width:20px;height:20px;stroke:var(--lime);fill:none;stroke-width:2.2;stroke-linecap:round}
.loc.is-busy svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.results{list-style:none;margin:8px 0 0;padding:6px;background:#fff;border-radius:18px;box-shadow:var(--shadow);max-height:50vh;overflow:auto}
.results button{width:100%;display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;text-align:left}
.results button:hover,.results button.is-act{background:var(--paper)}
.results i{width:34px;height:34px;border-radius:11px;background:var(--paper);display:grid;place-items:center;flex:none}
.results i.is-wijk{background:var(--lime)}
.results i svg{width:17px;height:17px;stroke:var(--ink);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.results b{display:block;font:600 15px/1.25 var(--body);color:var(--ink)}
.results small{font-size:12.5px;color:var(--muted)}
.cities{display:flex;gap:8px;margin-top:10px;overflow-x:auto;scrollbar-width:none}
.cities::-webkit-scrollbar{display:none}
.city{flex:none;display:flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 2px 10px rgba(10,15,45,.1);font:600 14px/1 var(--head);color:var(--ink);text-decoration:none;}
.city.is-on{background:var(--ink);color:#fff}
.city i{width:8px;height:8px;border-radius:50%;background:var(--lime)}
.city.is-add{color:var(--muted)}
.city.is-add i{background:#c9ccdb}

/* wijkkaarten: rij onderaan (mobiel) */
.panel{position:fixed;z-index:9;left:0;right:0;bottom:0;padding:0 0 calc(14px + env(safe-area-inset-bottom));transition:opacity .5s,transform .7s var(--ease)}
.panel-head{display:none}
.rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 16px 8px;scroll-padding:0 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.wcard{flex:none;width:min(84vw,360px);scroll-snap-align:center;display:flex;gap:12px;align-items:stretch;padding:10px;background:#fff;border-radius:22px;box-shadow:var(--shadow);text-align:left;transition:box-shadow .25s,transform .25s var(--ease)}
.wcard.is-sel{box-shadow:0 0 0 2.5px var(--ink),var(--shadow)}
.wcard-img{position:relative;width:104px;height:104px;border-radius:15px;overflow:hidden;flex:none;background:#eef0e2}
.wcard-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.wcard:hover .wcard-img img{transform:scale(1.06)}
.wcard-txt{flex:1;min-width:0;display:flex;flex-direction:column;padding:4px 2px}
.badge{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:999px;background:var(--lime);color:var(--ink);font:700 10.5px/1 var(--head);letter-spacing:.05em;text-transform:uppercase}
.badge i{width:6px;height:6px;border-radius:50%;background:var(--ink)}
.wcard b{font:700 18px/1.15 var(--head);letter-spacing:-.02em;color:var(--ink);margin:8px 0 3px}
.wcard small{font-size:13px;color:var(--muted)}
.wcard-go{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;background:var(--ink);color:#fff;font:600 13px/1 var(--head)}
.wcard-go svg{width:15px;height:15px;stroke:var(--lime);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.wcard.is-ask{background:rgba(255,255,255,.9);box-shadow:inset 0 0 0 1.5px rgba(10,15,45,.12),0 6px 20px rgba(10,15,45,.08);text-decoration:none;color:var(--ink)}
.wcard.is-ask .wcard-img{background:repeating-linear-gradient(135deg,#f4f5fa 0 8px,#eceef5 8px 16px);display:grid;place-items:center}
.wcard.is-ask .wcard-img svg{width:28px;height:28px;stroke:rgba(10,15,45,.35);fill:none;stroke-width:2;stroke-linecap:round}
.wcard.is-ask .wcard-go{background:none;color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(10,15,45,.18)}
.wcard.is-ask .wcard-go svg{stroke:var(--ink)}

/* desktop: lijst links naast de kaart */
@media (min-width:900px){
  .bar{left:24px;right:auto;width:400px;margin:0}
  .panel{top:150px;left:24px;right:auto;bottom:24px;width:400px;padding:0;display:flex;flex-direction:column;background:rgba(255,255,255,.72);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-radius:24px;box-shadow:var(--shadow);overflow:hidden}
  .panel-head{display:block;padding:18px 20px 6px}
  .panel-head b{display:block;font:700 22px/1.1 var(--head);letter-spacing:-.02em;color:var(--ink)}
  .panel-head small{color:var(--muted);font-size:13.5px}
  .rail{flex-direction:column;overflow-x:hidden;overflow-y:auto;scroll-snap-type:none;padding:12px 14px 16px;gap:12px}
  .wcard{width:auto;flex-direction:column;padding:10px 10px 14px}
  .wcard-img{width:100%;height:auto;aspect-ratio:16/10}
  .wcard-txt{padding:4px 6px 0}
  .wcard-go{margin-top:12px}
  .wcard.is-ask{flex-direction:row}
  .wcard.is-ask .wcard-img{width:84px;height:84px;aspect-ratio:auto}
}

/* overstap naar de wijkkaart: zelfde opbouw als app.js */
.slide{position:absolute;inset:0;perspective:1500px;perspective-origin:50% 30%;pointer-events:none;opacity:0}
.slide.is-on{opacity:1}
.plane{position:absolute;left:0;top:0;transform-origin:0 0;transform-style:preserve-3d}
.mapimg{position:absolute;left:0;top:0;display:block;box-shadow:0 40px 80px rgba(10,15,45,.18);border-radius:6px;background:#eef0e2}

/* in- en uitkomen */
body.is-intro .bar{opacity:0;transform:translateY(-14px)}
body.is-intro .panel{opacity:0;transform:translateY(30px)}
body.is-going .bar{opacity:0;transform:translateY(-14px);pointer-events:none}
body.is-going .panel{opacity:0;transform:translateY(40px);pointer-events:none}
body.is-going .labels{opacity:0;transition:opacity .3s}
@media (min-width:900px){body.is-intro .panel,body.is-going .panel{transform:translateX(-30px)}}

.toast{position:fixed;left:50%;top:calc(max(12px,env(safe-area-inset-top)) + 70px);z-index:30;transform:translate(-50%,-14px);opacity:0;pointer-events:none;background:var(--ink);color:#fff;padding:12px 16px;border-radius:14px;font:500 14px/1.35 var(--body);box-shadow:0 14px 40px rgba(10,15,45,.3);max-width:min(92vw,420px);transition:opacity .3s,transform .3s var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast a{color:var(--lime);font-weight:700}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

:root{color-scheme:only light}

/* 13 okt: naadloze overgang overzicht → wijkkaart (cross-document View Transitions, Chrome/Safari) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s}
::view-transition-group(naba-map){animation-duration:.32s}

.mapimg{view-transition-name:naba-map}

/* wijk nog niet op NABA: teller + aanmelden */
.toast .wens{display:grid;gap:10px;min-width:min(330px,calc(100vw - 48px));position:relative;padding-right:22px}.toast .wens p{margin:0}.toast .wens small{color:rgba(255,255,255,.7);font-size:12.5px}
.toast .wens-go{display:inline-flex;align-items:center;justify-content:center;gap:6px;justify-self:start;height:40px;padding:0 14px;border:0;border-radius:11px;background:var(--lime);color:var(--ink);font:700 14px var(--head,inherit);cursor:pointer}.toast .wens-go svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:2.4}
.toast .wens-x{position:absolute;right:-6px;top:-6px;width:28px;height:28px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:18px;line-height:1;cursor:pointer}
.toast .wens-f input,.toast .wens-f select{height:44px;border-radius:11px;border:0;padding:0 12px;font:500 15px var(--body,inherit);color:var(--ink);background:#fff;width:100%}
.toast .wens-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.toast .wens-s a{color:var(--lime)}

/* v5: Nederland → stad */
.wl.gl{background:none;box-shadow:none;padding:0;font:600 11.5px/1 var(--head);color:rgba(10,15,45,.55);cursor:pointer;pointer-events:auto;display:inline-flex;align-items:center;gap:5px;text-shadow:0 1px 0 rgba(255,255,255,.9)}
.wl.gl em{font-style:normal;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--ink);color:var(--lime);font:700 10.5px/18px var(--head);text-align:center;text-shadow:none}
.wl.gl.is-live{background:var(--ink);color:#fff;padding:8px 12px 8px 10px;border-radius:12px;font-size:13.5px;box-shadow:0 0 0 3px var(--lime),0 10px 24px rgba(10,15,45,.3);text-shadow:none;flex-direction:row}
.wl.gl.is-live i{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(207,255,63,.7);animation:livepuls 1.8s infinite}
.wl.gl.is-live small{font:500 11px/1 var(--body);color:rgba(255,255,255,.7);margin-left:3px}
@keyframes livepuls{0%{box-shadow:0 0 0 0 rgba(207,255,63,.7)}70%{box-shadow:0 0 0 8px rgba(207,255,63,0)}100%{box-shadow:0 0 0 0 rgba(207,255,63,0)}}
.city svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linejoin:round}
.city.is-leeg i{background:#c9ccdb}
.wcard.is-leeg{cursor:default}
.wl.gl.is-live::after{content:"";position:absolute;left:-7px;top:50%;width:12px;height:12px;background:var(--ink);transform:translateY(-50%) rotate(45deg);border-radius:0 0 0 3px;box-shadow:-3px 3px 0 0 var(--lime)}
.wl.is-shut.is-tik{pointer-events:auto;cursor:pointer;color:rgba(10,15,45,.55);font-size:11.5px;text-shadow:0 1px 0 rgba(255,255,255,.9)}
@media(max-width:600px){.wl.gl.is-live small{display:none}}

/* v6: zelf zoomen, draaien en 3D-kantelen */
.stage{touch-action:none}
.world{transform-origin:0 0;inset:auto;left:0}
.ctl{position:fixed;z-index:9;right:12px;bottom:calc(178px + env(safe-area-inset-bottom));display:grid;gap:8px;transition:opacity .4s}
.ctl button{width:44px;height:44px;border-radius:14px;background:#fff;box-shadow:var(--shadow);display:grid;place-items:center;font:700 13px/1 var(--head);color:var(--ink)}
.ctl button svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.ctl #kNoord svg path{fill:#c9ccdb;stroke:none}.ctl #kNoord svg path.n{fill:#ff5a3c}
.ctl #k3d.on{background:var(--ink);color:var(--lime)}
.ctl #kIn,.ctl #kUit{display:none}
@media (min-width:900px){.ctl{right:24px;bottom:24px}.ctl #kIn,.ctl #kUit{display:grid}}
body.is-going .ctl,body.is-intro .ctl{opacity:0;pointer-events:none}