/* METEOPROOF -- locatiekiezer met kaart (2026-10-11): paneel met kleine Benelux-kaart, stedenknopjes en de lijst
   (shared.js, verrijkLocatieSelectMetVlaggen met data-kaart="1"). Daily, Monthly en Tools. Op de --sk-*-tokens. */
.lk-paneel { position: absolute; z-index: 30; top: 100%; left: 0; margin-top: 4px; width: min(560px, calc(100vw - 32px)); display: grid;
    grid-template-columns: 264px 1fr; background: var(--sk-paneel); border: 1px solid var(--sk-lijn); box-shadow: 0 8px 24px rgba(0,0,0,.12); border-radius: 10px; overflow: hidden; }
.lk-paneel.hidden { display: none; }
.lk-paneel.lk-zonder-kaart .lk-kaart { display: none; }
.lk-kaartkolom { display: flex; flex-direction: column; gap: 10px; padding: 10px; border-right: 1px solid var(--sk-lijn2); }
.lk-kaart { display: block; width: 100%; height: auto; touch-action: manipulation; }
.lk-land { fill: color-mix(in oklab, var(--sk-inkt) 6%, var(--sk-paneel)); stroke: var(--sk-inkt3); stroke-width: .8; stroke-linejoin: round; }
.lk-meer { fill: var(--sk-paneel); stroke: var(--sk-inkt3); stroke-width: .5; }
.lk-punt { fill: var(--sk-inkt3); }
.lk-punt.hover { fill: var(--sk-inkt); }
.lk-punt.huidig { fill: var(--sk-accent); stroke: var(--sk-paneel); stroke-width: 2; }
.lk-label { font: 600 16px var(--sk-sans); fill: var(--sk-inkt); paint-order: stroke; stroke: var(--sk-paneel); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.lk-steden { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lk-stad { display: inline-flex; align-items: center; justify-content: center; gap: 5px; font: 500 12.5px/1.2 var(--sk-sans); color: var(--sk-inkt2); background: transparent;
    border: 1px solid var(--sk-lijn); border-radius: 6px; padding: 7px 4px; cursor: pointer; }
.lk-stad:hover { color: var(--sk-inkt); border-color: var(--sk-inkt3); }
.lk-stad[aria-pressed="true"] { color: var(--sk-papier); background: var(--sk-inkt); border-color: var(--sk-inkt); }
.lk-stad:focus-visible { outline: 2px solid var(--sk-accent); outline-offset: 1px; }
.lk-lijst { max-height: 440px; overflow-y: auto; margin: 0; list-style: none; }
@media (max-width: 640px) {
    .lk-paneel { grid-template-columns: 1fr; }
    .lk-kaartkolom { border-right: 0; border-bottom: 1px solid var(--sk-lijn2); }
    .lk-kaart { max-height: 42vh; }
    .lk-stad { padding: 11px 4px; font-size: 13.5px; }
    .lk-lijst { max-height: 32vh; }
}
/* De locatieknop is een <button>: even hoog als de native uitklaplijsten ernaast (die krijgen van de browser ~2 px meer regelhoogte). */
button.rc-select, button.dv-select { min-height: 35px; }