.city-seeker{
max-width:1280px}
.city-seeker__field{
position:relative;
display:grid;
gap:6px;
max-width:520px;
margin:28px 0 12px;
font:11px 'DM Mono';
letter-spacing:1px;
text-transform:uppercase;
color:#ffda63}
.city-seeker__field input{
min-height:40px;
padding:8px;
border:1px solid var(--line);
border-radius:3px;
background:#12334c;
color:var(--text);
font:14px Outfit,Arial,sans-serif}
.city-seeker__field .eclipse-results{
top:100%;
max-height:360px}
.city-seeker__controls{
display:flex;
flex-wrap:wrap;
gap:14px;
align-items:end;
margin:0 0 12px}
.city-seeker__controls .city-seeker__field{
margin:0;
flex:0 1 auto;
min-width:0}
.city-seeker__field--filter{
flex:1 1 240px;
max-width:340px}
.city-seeker__field select{
min-height:40px;
padding:8px;
border:1px solid var(--line);
border-radius:3px;
background:#12334c;
color:var(--text);
font:14px Outfit,Arial,sans-serif}
.city-seeker__status{
min-height:1.6em;
color:#c4dbde}
.city-seeker__table-wrap{
overflow:auto;
border:1px solid var(--line);
border-radius:3px}
.city-seeker table{
width:100%;
min-width:940px;
border-collapse:collapse;
font-size:14px}
.city-seeker th,.city-seeker td{
padding:10px 12px;
border-bottom:1px solid #315563;
text-align:left;
vertical-align:top}
.city-seeker tbody tr:last-child td{
border-bottom:0}
.city-seeker tbody tr:hover{
background:#0b263d}
.city-seeker th{
position:sticky;
top:0;
background:#12334c;
vertical-align:bottom;
white-space:normal}
.city-seeker th{
color:#ffda63;
font:10px 'DM Mono';
letter-spacing:1px;
text-transform:uppercase}
.city-seeker th[aria-sort="ascending"]::after{
content:' ↑';
color:#87d7d2}
.city-seeker th[aria-sort="descending"]::after{
content:' ↓';
color:#87d7d2}
.city-seeker .number{
text-align:right;
white-space:nowrap}
.city-seeker td.number{
font-family:'DM Mono';
font-size:12px}
.city-seeker .low-sun{
color:var(--gold)}
.city-seeker .low-sun::after{
content:' ⚠';
font-size:11px}
.city-seeker td a{
color:#87d7d2}
.city-seeker__note{
margin-top:14px;
color:#c4dbde;
font-size:.9em}
.high-contrast .city-seeker__field input,.high-contrast .city-seeker__field select,.high-contrast .city-seeker th{
background:#000;
border-color:#fff}
.high-contrast .city-seeker__table-wrap,.high-contrast .city-seeker th,.high-contrast .city-seeker td{
border-color:#fff}
/* De smalle tabel blijft een echte tabel met echte koppen. Rijen omklappen met
   display:block haalt de tabelstructuur bij een schermlezer weg, en ARIA-rollen
   erbij zetten herstelt dat niet betrouwbaar (Roselli, 2017). In plaats daarvan
   gaan acht kolommen naar drie, elk met twee regels: de eerste regel de waarde
   waar je op scant, de tweede het label plus de waarde die op een breed scherm
   een eigen kolom heeft. */
.city-seeker .city-seeker__table--medium,.city-seeker .city-seeker__table--narrow{
min-width:0;
table-layout:fixed}
.city-seeker__table--medium col:first-child{
width:26%}
.city-seeker__table--narrow col:first-child{
width:38%}
.city-seeker__table--narrow col:last-child{
width:26%}
.city-seeker__table--medium td,.city-seeker__table--narrow td{
vertical-align:top}
.city-seeker__lead{
display:block;
font-size:14px}
.city-seeker__lead i{
font-size:11px}
.city-seeker__sub{
display:block;
margin-top:3px;
color:#a7c1c6;
font:11px 'DM Mono';
line-height:1.35}
.city-seeker__lead i,.city-seeker__sub i{
display:inline;
color:#87d7d2;
font:10px 'DM Mono';
font-style:normal;
letter-spacing:.5px;
text-transform:uppercase}
.city-seeker__table--medium .city-seeker__lead a,.city-seeker__table--narrow .city-seeker__lead a{
color:#87d7d2;
text-decoration:none;
border-bottom:1px solid currentColor}
@media(max-width:1220px){
.city-seeker__table--wide{
display:none}
}
@media(min-width:1221px){
.city-seeker__table--medium{
display:none}
}
@media(max-width:760px){
.city-seeker__table--medium{
display:none}
.city-seeker__controls{
gap:10px}
.city-seeker__field--filter{
flex-basis:100%;
max-width:none}
}
@media(min-width:761px){
.city-seeker__table--narrow{
display:none}
}
@media(max-width:600px){
.city-seeker{
padding-inline:14px}
.city-seeker th,.city-seeker td{
padding:9px 10px}
}
@media(max-width:380px){
.city-seeker .city-seeker__table--narrow th,.city-seeker .city-seeker__table--narrow td{
padding:8px 6px}
}