/* ------------------------------------------------------------------
   Arcade map — component styles.

   Leaflet builds its markers by injecting raw HTML into the DOM, so
   these can't be expressed as Bootstrap utility classes on an element
   we control. Everything else on the page uses utilities.

   Scoped to this one file so it can be dropped wholesale if the map
   is ever removed.
   ------------------------------------------------------------------ */

:root { --ht-indoor: #8A5A00; }

/* Leaflet sets its own font stack and a grey backdrop */
.leaflet-container { font: inherit; background: #EAE6D2; }
.leaflet-popup-content { font-size: .875rem; }
.leaflet-popup-content strong { display: block; margin-bottom: .15rem; }

/* Numbered stop markers. Also reused in the step list and legend. */
.ht-pin {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ht-primary);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgb(0 0 0 / .35);
}
.ht-pin-park { background: var(--ht-darkest); }

/* Destination marker: white-fill logo on a brand-green disc, so the
   existing dark-background asset reads against a light basemap. */
.ht-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ht-primary);
  border: 2px solid #fff;
  box-shadow: 0 1px 5px rgb(0 0 0 / .4);
}
.ht-mark img { width: 26px; height: 26px; }

/* Direction arrows, rotated inline by the script */
.ht-arrow { display: block; width: 20px; height: 20px; }

/* Legend rules. Bootstrap has no dashed-border utility. */
.ht-swatch {
  display: inline-block;
  width: 34px;
  border-top: 4px dashed var(--ht-primary);
}
.ht-swatch-in { border-top-color: var(--ht-indoor); }

/* Street names on the no-tiles fallback */
.ht-street-label {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6B7280;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.ht-street-label::before { display: none; }