/**
 * AccessScore API Documentation - Specific Styles.
 *
 * The AccessScore (streets, regions, and intersections) and Street Grade preview frames and their feature popups;
 * toolbar, legend, and status messages use the shared map classes in api-docs.css.
 */

/* ---- Preview Container ---- */

/* .map-container carries the frame's height; the map element has none of its own, so it has to be told to fill the
   column, and a toolbar (where a preview has one) stacks above it. */
#access-score-streets-preview,
#access-score-regions-preview,
#access-score-intersections-preview,
#street-grade-preview {
  display: flex;
  flex-direction: column;
  background-color: var(--color-neutral-white);
}

#access-score-streets-map,
#access-score-regions-map,
#access-score-intersections-map,
#street-grade-map {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

/* Taller than the other previews: a pinned street's popup carries an elevation chart about 300px tall, which has
   to fit on one side of the street or the other. */
#street-grade-preview {
  height: 620px;
}

/* The keyboard's way to a street's profile, under the map it opens popups on. */
.street-grade-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
  font: var(--text-small-regular);
}

/* ---- Feature Popup ---- */

/* The score is the popup's headline number, so it's set well above the surrounding text. */
.as-score {
  font: var(--text-body-bold);
}

.as-breakdown {
  margin: 6px 0 0;
  font: var(--text-caption-regular);
}

/* Over the legend: the chart is taller than any other preview's popup, and Mapbox stacks its control corners, where
   the legend lives, at z-index 2, above its popups. A plain number, since it only has to beat Mapbox's own. */
.map-popup--profile {
  z-index: 3;
}

/* The Street Grade preview's popup carries an elevation chart, which reads at the width the AccessScore tool's popup
   gives it and no narrower. A fixed width, because the chart's SVG scales to its box and would collapse in a
   shrink-to-fit one; capped by the map's own width (the preview-map container) so it never spills off a phone. */
.map-popup--profile .mapboxgl-popup-content {
  width: min(340px, 85cqi);
  max-width: none;
}

.map-popup__profile {
  margin-top: var(--space-xs);
  font: var(--text-caption-regular);
}

.map-popup__hint {
  color: var(--color-neutral-700);
}