/* City cards: what the city produces and exactly what the next level needs. */
.city-no-output{margin-left:auto;font-size:11px;font-weight:600;color:#e0a7a7;white-space:nowrap}
/* Cards in one row keep their upgrade buttons on one line, whatever the number of requirements. */
.cities>.city{display:flex;flex-direction:column}
.cities>.city>.city-body{flex:1;display:flex;flex-direction:column}
.city-upgrade{flex:1;display:flex;flex-direction:column;gap:10px}
.city-upgrade .city-actions{margin-top:auto}
.city-upgrade-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.city-upgrade-head .metric-label{margin:0}
.city-upgrade-gain{font-size:11px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.city-upgrade-gain b{color:var(--accent);font-weight:700}
.city-needs{display:flex;flex-wrap:wrap;gap:6px}
.city-need{display:inline-flex;align-items:center;height:24px;padding:0 8px;border:1px solid #ffffff14;border-radius:6px;font-size:10px;color:#cfcfcf;white-space:nowrap;font-variant-numeric:tabular-nums}
.city-need.is-short{border-color:#e0a7a740;color:#e0a7a7}
.city-upgrade .city-actions{padding-top:2px;border-top:0}
.city-upgrade .city-actions .primary{flex:1;margin-left:0}