.directory-demo { display: grid; gap: 2rem; }
.directory-toolbar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; }
.directory-search { width: min(100%, 28rem); display: grid; gap: .42rem; color: var(--navy-900); font-size: .8rem; font-weight: 800; }
.directory-count { color: var(--muted); font-size: .86rem; font-weight: 750; }
.city-directory { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.city-directory[data-density="single"] { grid-template-columns: minmax(0, 22rem); }
.city-directory[data-density="large"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.city-item { min-height: 3.55rem; display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .78rem .9rem; color: var(--navy-900); background: var(--white); border: 1px solid var(--line); border-radius: .85rem; font-size: .82rem; font-weight: 760; text-decoration: none; }
a.city-item:hover { border-color: rgba(22,79,125,.42); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.city-item small { color: var(--muted); font-size: .66rem; font-weight: 700; }
.city-item--unavailable { color: #6c7984; background: #f2f1ed; border-style: dashed; }
.city-item--unavailable small { padding: .2rem .42rem; background: rgba(8,47,80,.08); border-radius: 999px; white-space: nowrap; }
.city-directory.is-collapsed .city-item:nth-child(n+61) { display: none; }
.directory-empty { grid-column: 1 / -1; padding: 2rem; color: var(--muted); text-align: center; background: var(--white); border: 1px dashed var(--line); border-radius: var(--radius-card); }
.directory-actions { display: flex; justify-content: center; }

@media (max-width: 980px) {
  .city-directory, .city-directory[data-density="large"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .city-directory, .city-directory[data-density="large"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 430px) {
  .city-directory, .city-directory[data-density="large"] { grid-template-columns: 1fr; }
}