/* Road signs carry a readable status, without relying on colour alone. */
#buurt .area-right{container-type:inline-size}
#buurt .towns{align-items:stretch;gap:16px;margin-bottom:32px}
#buurt .towns>.town-sign{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:74px;padding:10px 12px;white-space:normal}
#buurt .town-sign>strong{font:600 25px/1.1 'Barlow Condensed',sans-serif;letter-spacing:1px}
#buurt .town-sign>small{display:flex;align-items:center;justify-content:center;gap:6px;font:600 12px/1.3 Barlow,sans-serif;letter-spacing:.2px;text-transform:none}
#buurt .town-sign>small b{font-size:14px;line-height:1}
#buurt .towns>.town-sign--available{background:var(--navy);color:var(--cream-light)}
#buurt .town-sign--available>small{color:var(--pink)}
#buurt .towns>.town-sign--available::before,#buurt .towns>.town-sign--available::after{background:var(--cream)}
#buurt .towns>.town-sign--soon{background:var(--cream);color:var(--navy);box-shadow:none}
#buurt .town-sign--soon>small{font-weight:500}
#buurt #area-form{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:20px;margin-top:14px}
#buurt #area-form>input{display:block;min-width:0;width:100%;min-height:64px;margin:0;flex-basis:auto}
#buurt #area-form>.button{width:100%;min-height:64px;margin:0;white-space:normal;font-size:24px;line-height:1.15;padding:15px 24px}
#buurt #area-result{margin-top:20px}
@container(min-width:540px){#buurt #area-form{grid-template-columns:minmax(150px,1fr) auto;gap:20px}#buurt #area-form>.button{width:auto;max-width:340px}}
@media(max-width:520px){#buurt .towns{gap:12px}#buurt .towns>.town-sign{min-height:72px;padding:9px 8px}#buurt .town-sign>strong{font-size:23px}#buurt .town-sign>small{font-size:11px}#buurt #area-form{gap:20px}}