.area-flag { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--color-accent); background: var(--color-surface); color: var(--color-text) !important; font-size: var(--text-sm); max-width: 60ch; }
.area-places li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding-block: var(--space-2); border-bottom: 1px solid var(--color-divider); font-size: var(--text-sm); }
.area-places a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.kind { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: capitalize; }
.area-row { margin-top: var(--space-6); }
.area-sub { margin-top: var(--space-10); }
.area-directory { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-4); }
.area-county h2 { margin-block: 0 var(--space-3); font-size: var(--text-lg); }
.area-filter { margin-bottom: var(--space-6); max-width: 440px; }
.area-filter label { display: block; font-size: var(--text-sm); font-weight: 500; margin-bottom: var(--space-2); }
.area-filter input { width: 100%; min-height: 48px; padding: var(--space-3); border: 1px solid var(--color-control-border); border-radius: var(--radius-md); background: var(--color-surface-2); color: var(--color-text); font-size: var(--text-base); }
.area-filter .client-count { margin: var(--space-2) 0 0; }
[data-area-item][hidden], [data-area-group][hidden] { display: none; }
@media (max-width: 1100px) { .area-directory { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 640px) { .area-directory { grid-template-columns: 1fr; } }
.area-check { margin-bottom: var(--space-6); max-width: 640px; }