:root{
  /* Default theme: light-grey background + black text */
  --bg:#c0c0c0; --bg2:#c0c0c0; --fg:#000; --muted:#111;
  --card:#d2d2d2; --border:#6b6b6b; --accent:#0b6cff; --accent2:#ffcc66;
  --danger:#c00000; --ok:#0a7a2f;
  --input:#fff;
  --shadow: 0 6px 18px rgba(0,0,0,.18);
  --radius: 12px;
  font-synthesis-weight: none;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  letter-spacing: .2px;
}
a{color:var(--accent)}
.topbar{
  /* Keep header above Leaflet controls (Leaflet uses z-index up to ~1000) */
  position: sticky; top:0; z-index:9999;
  background: rgba(192,192,192,.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  padding: 16px 18px 14px;
  display:flex; align-items:center; justify-content:center;
}
.title{width:100%; text-align:center}

/* Header style to match "Tellina" look (serif, blue, with grey highlight) */
.title .brand{
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 64px;
  font-weight: 150;
  line-height: 1;
  letter-spacing: .3px;
  margin-bottom: 4px;
  color: #3b55ff;
}
.title .brand > span{
  background: #c0c0c0;
  padding: 2px 12px;
  display: inline-block;
}
.title .h1{
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 18px;
  font-weight: 200;
  line-height: 1.05;
  color: #3b55ff;
}
.actions{display:flex; gap:10px; align-items:center}

/* Place actions (language toggle) at the top-right without shifting the centered title */
.topbar .actions{
  position:absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
}

/* EN/NL toggle */
.lang-toggle{
  display:inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow:hidden;
  background: rgba(255,255,255,.45);
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.langbtn{
  appearance:none;
  border:none;
  background: transparent;
  cursor:pointer;
  padding: 6px 10px;
  font-weight: 900;
  font-size: 12px;
  color: var(--fg);
  line-height: 1;
}
.langbtn.active{
  background: var(--accent);
  color: #071018;
}
.langbtn:focus{outline:none; box-shadow: inset 0 0 0 2px rgba(77,214,255,.25)}
.wrap{max-width:100%; margin:18px auto; padding: 0 14px; display:flex; flex-direction:column; gap:14px;}
.card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px;
}
.card-h{font-weight:800; color: var(--fg); margin: 2px 0 10px 2px;}
.grid2{display:grid; grid-template-columns: 1.2fr 1fr; gap:12px;}
.gridMap{display:grid; grid-template-columns: 420px 1fr; gap:12px; align-items:start;}
@media(max-width: 980px){.grid2{grid-template-columns:1fr}.gridMap{grid-template-columns:1fr}}
.map{
  width: 100%;
  height: 760px;
  border-radius: 10px;
  border: 1px solid var(--border);
  overflow:hidden;
}
.hint{font-size:12px; color:var(--muted); margin-top:8px}
.form{display:flex; flex-direction:column; gap:8px}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

/* Keep Loc radio + Lat/Lon lined up, and keep Lat/Lon together when wrapping */
.loc-row{align-items:flex-end}
.loc-row .radio{align-self:flex-end}
.latlon{display:flex; gap:10px; flex-wrap:nowrap}
.latlon label{min-width:0}
.loc-row .latlon input{width:150px}

/* On very narrow screens, allow Lat/Lon to stack instead of overflowing */
@media(max-width: 520px){
  .latlon{flex-wrap:wrap}
  .loc-row .latlon input{width:160px}
}

label{font-size:12px; color:var(--fg); display:flex; flex-direction:column; gap:6px}
input{
  width: 180px;
  max-width: 100%;
  padding: 10px 10px;
  background: var(--input);
  color: #000;
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
}
input::placeholder{color:#555}
input:focus{border-color: var(--accent); box-shadow: 0 0 0 2px rgba(77,214,255,.15)}
.radio{flex-direction:row; align-items:center; gap:8px; color:var(--fg); font-weight:700}
.checkbox{flex-direction:row; align-items:center; gap:8px; color:var(--fg); font-weight:700}
.checkbox.disabled{opacity:.55}
.btn{
  appearance:none; border:none; cursor:pointer;
  padding: 10px 12px; border-radius: 10px;
  background: var(--accent);
  color: #071018; font-weight:900; letter-spacing:.3px;
  box-shadow: 0 6px 14px rgba(77,214,255,.14);
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center;
}
.btn.secondary{
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border);
  box-shadow:none;
}

.btn.tiny{
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .2px;
  box-shadow: none;
}
.btn:hover{filter: brightness(1.06)}
.btn:active{transform: translateY(1px)}
.sep{border:0; border-top:1px solid var(--border); margin:8px 0}
.results{
  padding:10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.55);
}
.kv{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap: 8px 10px;
  align-items:center;
}
.k{color:var(--muted); font-size:12px}
.v{font-weight:800}
.badge{
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.6);
  font-weight:900;
}
.debug{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New";
  font-size:12px;
  color: #000;
  white-space: pre-wrap;
  background: rgba(255,255,255,.7);
  border:1px dashed var(--border);
  border-radius: 10px;
  padding: 10px;
  min-height: 44px;
}
.chart{
  width: 100% !important;
  height: 360px !important;
  background: rgba(255,255,255,.55);
  border:1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
}
details{border:1px solid var(--border); border-radius:10px; padding:10px; background: rgba(255,255,255,.5)}
summary{cursor:pointer; font-weight:800; color: var(--fg)}
/* Local colored markers (no external images) */
.leaflet-div-icon{background:transparent;border:none}
.rf-pin{width:16px;height:16px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 2px rgba(0,0,0,.35)}
.rf-pin.loc1{background:#ff3b3b}
.rf-pin.loc2{background:#3b82f6}


.rf-pin.search{background:#111}

/* ---- Map search control ---- */
.rf-search.leaflet-bar{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.25);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  padding: 6px;
  min-width: 240px;
}
.rf-search-row{
  display:flex;
  gap:6px;
  align-items:center;
}
.rf-search-input{
  width: 100%;
  min-width: 170px;
  padding: 7px 8px;
  background: var(--input);
  color: #000;
  border: 1px solid rgba(0,0,0,.35);
  border-radius: 10px;
  outline: none;
}
.rf-search-input:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(77,214,255,.15);
}
.rf-search-btn{
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.35);
  background: var(--accent);
  color: #071018;
  font-weight: 900;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.rf-search-btn:hover{filter: brightness(1.06)}
.rf-search-btn:active{transform: translateY(1px)}
.rf-search-results{
  margin-top: 6px;
  max-height: 220px;
  overflow:auto;
  border-top: 1px solid rgba(0,0,0,.15);
  padding-top: 6px;
}
.rf-search-item{
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 6px 8px;
  cursor: pointer;
  font-size: 12px;
  color: #000;
}
.rf-search-item:hover{
  background: rgba(11,108,255,.12);
  border-color: rgba(11,108,255,.25);
}
.rf-search-msg{
  font-size: 12px;
  color: #111;
  padding: 6px 8px;
}

/* Google-maps-like distance labels along the link path */
.km-marker{background:transparent;border:none}
.km-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 7px;
  border-radius:999px;
  background: rgba(255,255,255,.96);
  color:#0b0f14;
  border:1px solid rgba(0,0,0,.22);
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
  font-weight:800;
  font-size:12px;
  line-height:1;
  white-space:nowrap;
}
.km-dot{width:6px;height:6px;border-radius:50%;background:#2d9cdb;border:1px solid rgba(0,0,0,.25)}


/* Building highlight color slider */
.bldg-slider label.full{width:100%}
.bldg-slider input[type="range"]{
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}
.bldg-slider .range-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:11px;
  opacity:.9;
}
.bldg-slider.disabled{opacity:.5}


/* ---- Form tooltips ---- */
.rf-tooltip{
  position: fixed;
  z-index: 10050;
  display: none;
  max-width: 320px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.35);
  background: rgba(0,0,0,.88);
  color: #fff;
  font-size: 12px;
  line-height: 1.25;
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
  pointer-events: none;
  white-space: normal;
}
.rf-tooltip.show{ display:block; }
.rf-tooltip .small{ opacity:.9; font-size:11px; }