/* Oklahoma county map, Oklahoma Homestead Law design system */

.okmap{margin:var(--s8) 0}

/* Desktop: map and panel side by side, so selecting a county moves nothing.
 The panel sticks while the map is tall. Below 62rem they stack and the JS
 scrolls the panel into view instead. */
.okmap__layout{display:grid;gap:var(--s6);align-items:start}
@media(min-width:62rem){
 .okmap__layout{grid-template-columns:minmax(0,1.55fr) minmax(19rem,1fr)}
 .okmap__panelcol{position:sticky;top:var(--s4)}
 .okpanel{margin-top:0}
}
.okmap__frame{background:var(--raised);border:1px solid var(--border);border-radius:8px;
 padding:var(--s4);overflow:hidden}
.okmap__svg{display:block;width:100%;height:auto}

.okmap__counties path{fill:var(--okhl-soft-cream);stroke:var(--okhl-prairie-blue);
 stroke-width:.7;stroke-linejoin:round;cursor:pointer;
 transition:fill .12s ease-out}
.okmap__counties path:hover,
.okmap__counties path:focus-visible{fill:var(--okhl-sky-blue);outline:none}
/* Selection is carried by fill AND a heavy stroke, so colour is never the only cue.
 The resource panel below also names the county in text. */
.okmap__counties path[aria-current="true"]{fill:var(--okhl-prairie-blue);
 stroke:var(--okhl-navy);stroke-width:2.2}
.okmap__counties path:focus-visible{stroke:var(--okhl-navy);stroke-width:2.5}
.okmap__outline{stroke:var(--okhl-navy);stroke-width:2;pointer-events:none;fill:none}

.okmap__tip{position:absolute;z-index:20;pointer-events:none;
 background:var(--okhl-navy);color:var(--okhl-soft-cream);
 font-family:var(--font-body);font-size:.85rem;font-weight:700;
 padding:.3rem .6rem;border-radius:4px;white-space:nowrap;
 transform:translate(-50%,-140%);opacity:0;transition:opacity .1s}
.okmap__tip[data-on]{opacity:1}

/* Controls */
.okmap__controls{margin-bottom:var(--s6);max-width:34rem}
.okmap__field label{display:block;font-size:.9rem;font-weight:700;
 color:var(--olive-700);margin-bottom:var(--s2)}
.okmap__field input{width:100%;font-family:var(--font-body);
 font-size:1.0625rem;padding:var(--s3) var(--s4);border:2px solid var(--border);
 border-radius:6px;background:var(--raised);color:var(--okhl-navy)}
.okmap__field input:focus{border-color:var(--okhl-prairie-blue);
 outline:none;box-shadow:0 0 0 3px rgba(63,111,159,.25)}
.okmap__hits{list-style:none;margin:var(--s2) 0 0;padding:0;border:1px solid var(--border);
 border-radius:6px;background:var(--raised);max-height:15rem;overflow:auto}
.okmap__hits:empty{display:none}
.okmap__hits li{max-width:none;border-bottom:1px solid var(--border)}
.okmap__hits li:last-child{border-bottom:0}
.okmap__hits button{display:block;width:100%;text-align:left;background:none;border:0;
 font-family:var(--font-body);font-size:1rem;padding:var(--s3) var(--s4);
 color:var(--okhl-navy);cursor:pointer}
.okmap__hits button:hover,.okmap__hits button[aria-selected="true"]{
 background:var(--sunken)}
.okmap__hits small{display:block;color:var(--olive-700);font-size:.8rem}

/* Resource panel */
.okpanel{background:var(--raised);border:1px solid var(--border);
 border-left:6px solid var(--okhl-prairie-blue);border-radius:6px;
 padding:var(--s6);margin:var(--s6) 0;
 transition:border-left-color .35s ease-out,background-color .35s ease-out}
/* Brief, quiet acknowledgement that the panel is what changed. No pulsing. */
.okpanel[data-updated]{border-left-color:var(--okhl-warm-tan);background:#FFF8EC}
.okpanel h3{margin-top:0}
.okpanel__seat{color:var(--olive-700);font-size:.95rem;margin-top:calc(var(--s4) * -1)}
.okpanel__list{list-style:none;padding:0;margin:var(--s4) 0}
.okpanel__list li{max-width:none;padding:var(--s3) 0;border-bottom:1px solid var(--border)}
.okpanel__list li:last-child{border-bottom:0}
.okpanel__list b{display:block;font-size:.8rem;text-transform:uppercase;
 letter-spacing:.06em;color:var(--olive-700)}
.okpanel__ext::after{content:" \2197";font-size:.85em}
.okpanel__verified{font-size:.85rem;color:var(--olive-700)}
.okpanel__empty{color:var(--olive-700)}

@media(prefers-reduced-motion:reduce){
 .okmap__counties path{transition:none}
 .okmap__tip{transition:none}
}
@media print{.okmap__controls,.okmap__tip{display:none}}


/* Stacked layout only: a quiet cue that details sit below the map. */
.okmap__jump{display:none;margin:var(--s4) 0 0;font-size:.9rem;color:var(--olive-700)}
@media(max-width:61.99rem){
 .okmap[data-enhanced] .okmap__jump{display:block}
}
.okmap__jump a{font-weight:700}