/* city.css — page-specific styles for city.html */

/* Header extras */
.header-spacer { flex: 1; }
.header-city { font-size: 15px; color: #e0eaf4; font-weight: 600; }
.header-area { font-size: 13px; color: #8fa4b8; }
#change-city-btn {
  background: #1a2838; border: 1px solid #304050; border-radius: 5px;
  color: #b0c4d8; font-size: 14px; padding: 5px 14px; cursor: pointer;
}
#change-city-btn:hover { background: #243040; }

/* City description strip (above charts) */
#city-description {
  background: #0d1118;
  padding: 12px 20px 8px;
  display: none;
  flex-shrink: 0;
}

/* City picker modal */
#city-modal {
  position: fixed; inset: 0;
  background: rgba(13,17,24,0.88);
  display: flex; align-items: center; justify-content: center;
  z-index: 300;
}
#city-modal.hidden { display: none; }
.modal-card {
  background: #141c28;
  border: 1px solid #304050;
  border-radius: 10px;
  padding: 28px 32px;
  max-width: 540px;
  width: 92%;
}
.modal-card h2 {
  font-size: 20px; font-weight: 700; color: #e0eaf4;
  margin-bottom: 14px;
}
.modal-card p {
  font-size: 15px; color: #b0c4d8; line-height: 1.6;
  margin-bottom: 12px;
}
.modal-card .modal-detail {
  font-size: 13px; color: #8fa4b8; line-height: 1.5;
  margin-bottom: 20px;
}
.modal-card .highlight { color: #e0eaf4; font-weight: 600; }

/* City selector */
#city-select {
  display: block; width: 100%;
  background: #1a2838; border: 1px solid #304050; border-radius: 5px;
  color: #e0eaf4; font-size: 16px; padding: 10px 14px;
  cursor: pointer; margin-bottom: 6px;
}
option { background: #1a2838; color: #b0c4d8; }

/* Inline loading indicator */
#loading {
  padding: 20px; font-size: 15px; color: #8fa4b8;
  text-align: center; display: none;
}