/* Onboarding Step 0 — city pick.
   Full-bleed photographic cards, auto-advance on tap. */

#city-panel .city-list {
  display:flex; flex-direction:column; gap:14px;
  margin-top:4px;
}

#city-panel .city-card {
  position:relative; display:block;
  width:100%; min-height:320px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:2px solid transparent;
  background:var(--bg2);
  cursor:pointer;
  transition:transform 0.2s var(--ease-out), border-color 0.15s ease;
  text-align:left;
  padding:0;
  font-family:inherit; color:inherit;
}

#city-panel .city-card:focus-visible {
  outline:none;
  border-color:var(--coral);
  box-shadow:0 0 0 3px var(--coral-soft);
}

#city-panel .city-card.is-selected {
  border-color:var(--coral);
  outline:3px solid var(--coral);
  outline-offset:-3px;
  animation:cityPick 0.4s var(--ease-pick);
}

@keyframes cityPick {
  0%   { transform:scale(1); }
  50%  { transform:scale(1.03); }
  100% { transform:scale(1.015); }
}

/* Imagery layer — set as inline style so JS can swap per-city. */
#city-panel .city-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  background-repeat:no-repeat;
  transition:transform 0.4s var(--ease-out);
}
#city-panel .city-card:hover .city-bg { transform:scale(1.04); }

/* Readability scrim — heavier at the bottom where text lives. */
#city-panel .city-scrim {
  position:absolute; inset:0;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 35%,
    rgba(0,0,0,0.55) 65%,
    rgba(0,0,0,0.85) 100%
  );
}

#city-panel .city-text {
  position:absolute; left:18px; right:18px; bottom:18px;
  display:flex; flex-direction:column; gap:6px;
  color:var(--white);
}

#city-panel .city-name {
  font-family:var(--font-display); font-weight:700;
  font-size:24px; letter-spacing:-0.4px;
  line-height:1.1;
}

#city-panel .city-hoods {
  font-family:var(--font-mono); font-size:12px;
  color:rgba(250,247,242,0.78); letter-spacing:0.04em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* While the POST is in-flight, freeze the list so a double-tap can't
   fire two onAdvance calls. */
#city-panel .city-list.is-busy {
  pointer-events:none;
}
#city-panel .city-list.is-busy .city-card:not(.is-selected) {
  opacity:0.5;
}

#city-panel .city-error {
  margin-top:14px;
  text-align:center;
}

@media (min-width:600px) {
  #city-panel .city-card { min-height:360px; }
  #city-panel .city-name { font-size:26px; }
}