/* Inlora Maps — eigen, self-hosted opmaak. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
#map { position: absolute; inset: 0; }

#panel {
    position: absolute; top: 12px; left: 12px; z-index: 10;
    width: min(360px, calc(100vw - 24px));
    background: #fff; border: 1px solid #e3e3ea; border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0,0,0,.12); padding: 10px 12px;
}
.logo { display: inline-block; font-weight: 700; font-size: 1.05rem; color: #1a1a22; text-decoration: none; margin-bottom: 8px; }
.logo span { color: #4a7cf0; font-weight: 600; }

#search-form { display: flex; gap: 6px; }
#q {
    flex: 1; padding: .55rem .7rem; font-size: .95rem;
    border: 1px solid #d7d7df; border-radius: 8px;
}
#q:focus { outline: 2px solid #4a7cf0; outline-offset: -1px; }
#search-form button {
    padding: .55rem .8rem; border: 0; border-radius: 8px;
    background: #4a7cf0; color: #fff; font-weight: 600; cursor: pointer;
}

#results { list-style: none; margin: 8px 0 0; padding: 0; max-height: 50vh; overflow-y: auto; }
#results li {
    padding: .5rem .6rem; border-radius: 8px; cursor: pointer; font-size: .9rem; color: #2a2a33;
}
#results li:hover, #results li.active { background: #eef2fe; }
#results .muted { color: #8a8a96; cursor: default; }
#results .muted:hover { background: none; }

#foot {
    position: absolute; bottom: 0; left: 0; z-index: 10;
    font-size: .72rem; color: #5b5b66; background: rgba(255,255,255,.85);
    padding: .25rem .6rem; border-top-right-radius: 8px;
}
#foot a { color: #4a7cf0; }

.maplibregl-popup-content { font-size: .85rem; border-radius: 8px; }