.city-page {
    width: min(calc(100% - 24px), var(--ec-page-width));
    margin: 16px auto 60px;
    display: grid;
    gap: 10px;
}

.city-directory-panel {
    padding: 0;
    overflow: hidden;
    box-shadow: var(--ec-shadow);
}

/* One continuous table: category headers and links flow column by column
   (grid-auto-flow: column), matching a single directory table rather than
   separate per-category card blocks. */
.city-directory-panel {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--city-rows, 10), auto);
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.city-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--ec-line);
    border-right: 1px solid var(--ec-line);
    color: var(--ec-text);
    font-size: .82rem;
}
.city-cell:nth-child(4n) { border-right: 0; }

.city-cell--header {
    font-family: var(--ec-font-display);
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: uppercase;
    background: linear-gradient(180deg, var(--ec-panel-3), var(--ec-bg-raised));
    box-shadow: inset 0 1px rgba(255,255,255,.05);
    color: var(--city-accent, var(--ec-text));
    border-left: 3px solid var(--city-accent, var(--ec-gold));
}

/* Category accent colours */
.city-cell[data-accent="blue"] { --city-accent: var(--ec-blue); }
.city-cell[data-accent="red"] { --city-accent: var(--ec-red); }
.city-cell[data-accent="gold"] { --city-accent: var(--ec-gold-bright); }
.city-cell[data-accent="purple"] { --city-accent: var(--ec-purple); }
.city-cell[data-accent="green"] { --city-accent: var(--ec-green); }
.city-cell[data-accent="orange"] { --city-accent: #ff9e4f; }

.city-cell--link { background: var(--ec-panel); border-left: 3px solid color-mix(in srgb, var(--city-accent, var(--ec-gold)) 45%, transparent); }
.city-cell--link:hover { border-left-color: var(--city-accent, var(--ec-gold)); color: var(--city-accent, var(--ec-gold-bright)); }
.city-cell--link:nth-child(even) { background: var(--ec-panel-2); }
.city-cell--link:hover { color: var(--ec-gold-bright); background: rgba(217,154,43,.08); }
.city-cell--link img { width: 18px; height: 18px; object-fit: contain; flex: 0 0 auto; }
.city-cell--link .city-card-badge {
    margin-left: auto;
    padding: 1px 7px;
    border-radius: 999px;
    font-family: var(--ec-font-mono);
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
}
.city-card-badge--danger { background: var(--ec-red); }
.city-card-badge--warning { background: var(--ec-gold); }
.city-card-badge--travel { background: var(--ec-blue); }

.city-sort-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border: 1px solid var(--ec-line);
    border-radius: var(--ec-radius);
    background: linear-gradient(145deg, rgba(27,34,45,.96), rgba(17,21,28,.96));
    box-shadow: var(--ec-shadow-soft), inset 0 1px rgba(255,255,255,.04);
    color: var(--ec-muted);
    font-size: .8rem;
}
.city-sort-row label { display: inline-flex; align-items: center; gap: 5px; color: var(--ec-text); }
.city-sort-row input { width: auto; }

.city-loading, .city-error {
    grid-column: 1 / -1;
    padding: 30px;
    text-align: center;
    color: var(--ec-muted);
}

@media (max-width: 900px) {
    .city-directory-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .city-cell:nth-child(4n) { border-right: 1px solid var(--ec-line); }
    .city-cell:nth-child(2n) { border-right: 0; }
}
@media (max-width: 520px) {
    .city-directory-panel { grid-template-columns: 1fr; grid-auto-flow: row; }
    .city-cell { border-right: 0 !important; }
}