.concern-button {
  min-height: 142px;
}

/* Keep horizontally scrollable selectors inside their grid track on narrow screens. */
.grid > * {
  min-width: 0;
}

html,
body,
#root {
  max-width: 100%;
  overflow-x: clip;
}

/* The reference field guide uses a responsive bento snapshot before the interactive directory. */
.city-guide-bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

@media (min-width: 768px) {
  .city-guide-bento {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .city-guide-bento-feature {
    grid-column: span 2;
    grid-row: span 2;
  }

  .city-guide-bento-friction {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .city-guide-bento {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

[data-concern-detail] {
  min-height: 220px;
}

#zone-detail,
#lifestyle-zone-detail {
  min-height: 420px;
}

.zone-button,
.concern-button,
.timeline-button,
.related-category,
.related-closest-button {
  cursor: pointer;
}

.zone-button,
.concern-button,
.timeline-button,
.related-category,
.related-card {
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.related-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) auto;
  align-items: center;
  gap: 12px;
}

.related-categories,
.related-search-field,
.related-search-input,
.related-closest-button {
  min-width: 0;
  width: 100%;
}

.related-search-input,
.related-closest-button {
  min-height: 48px;
}

.related-card {
  min-height: 560px;
}

[data-routine-result]:not(.hidden),
[data-timeline-panel],
#zone-detail > *,
#lifestyle-zone-detail > * {
  animation: city-guide-reveal 220ms ease both;
}

@keyframes city-guide-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 960px) {
  .related-controls {
    grid-template-columns: 1fr;
  }

  .related-categories {
    order: 1;
  }

  .related-search-field {
    order: 2;
  }

  .related-closest-button {
    order: 3;
  }
}

@media (max-width: 640px) {
  .concern-button {
    min-height: 0;
  }

  [data-concern-detail] {
    min-height: 0;
  }

  #zone-detail,
  #lifestyle-zone-detail {
    min-height: 0;
  }

  .related-card {
    min-height: 520px;
  }
}