/**
 * Muni stop-sign treatment for the live map's stop popup.
 *
 * The bands are built by js/stop-sign-popup.js out of the nodes
 * gtfs_display_map_rt puts in the popup; everything below is paint. Layout
 * follows the printed stop sign top to bottom — yellow header carrying the
 * coach glyph, name on Muni light blue, predictions on white, stop ID on navy
 * — minus the per-route schedule text, which has no legible size at this
 * scale, and minus the Muni logo.
 *
 * Colors are the sign's own: #fdb913 header (the same yellow as the stop
 * marker this popup opens from), #8dc6e8 name band, #011e41 footer.
 *
 * Selectors carry .gtfs-display--map and both popup classes so they outrank
 * gtfs_display_map_rt's own two-class popup rules whatever order the
 * aggregator lands on.
 */

/* Frutiger is the typeface of the printed signs. One face — the bold used for
   the name, the times and the stop ID — is enough for this popup, so it is
   duplicated here rather than pulling in gtfs_sfmta_display's whole set. */
@font-face {
  font-family: 'Frutiger';
  src: url('../fonts/FrutigerLTPro-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* MapLibre's content box becomes the sign face: no padding, so the bands run
   edge to edge, and clipped so they take the box's rounded corners. */
.gtfs-display--map .sfmta-sign-popup .maplibregl-popup-content {
  width: 240px;
  padding: 0;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  font-family: 'Frutiger', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #011e41;
}

/* Header: Muni yellow under the coach glyph, held clear of the close button. */
.gtfs-display--map .sfmta-sign-popup .sfmta-sign__head {
  height: 30px;
  background-color: #fdb913;
  background-image: url('../icons/bus.svg');
  background-repeat: no-repeat;
  background-position: right 28px center;
  background-size: auto 21px;
}

.gtfs-display--map .sfmta-sign-popup .sfmta-sign__name {
  padding: 6px 10px 7px;
  background: #8dc6e8;
  color: #011e41;
  font-size: 15px;
  line-height: 1.15;
}
.gtfs-display--map .sfmta-sign-popup .sfmta-sign__name strong {
  font-weight: 700;
}
/* The name links back to the host site when ?pattern_stop= is set. */
.gtfs-display--map .sfmta-sign-popup .sfmta-sign__name a {
  color: inherit;
  text-decoration: none;
}
.gtfs-display--map .sfmta-sign-popup .sfmta-sign__name a:hover,
.gtfs-display--map .sfmta-sign-popup .sfmta-sign__name a:focus {
  text-decoration: underline;
}

.gtfs-display--map .sfmta-sign-popup .sfmta-sign__body {
  padding: 8px 10px 9px;
  background: #fff;
}

/* gtfs_display_map_rt's own prediction line: still the node it writes to,
   mirrored into .sfmta-sign__board, and never shown twice. */
.gtfs-display--map .sfmta-sign-popup .rt-predictions {
  display: none;
}

.gtfs-display--map .sfmta-sign-popup .sfmta-sign__times {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.gtfs-display--map .sfmta-sign-popup .sfmta-sign__time {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  padding: 2px 5px 3px;
  border: 1.5px solid #011e41;
  color: #011e41;
  line-height: 1;
}
.gtfs-display--map .sfmta-sign-popup .sfmta-sign__time-n {
  font-size: 15px;
  font-weight: 700;
}
.gtfs-display--map .sfmta-sign-popup .sfmta-sign__time-unit {
  font-size: 10px;
}
/* 'Loading…', 'No arrivals predicted', 'Predictions unavailable'. */
.gtfs-display--map .sfmta-sign-popup .sfmta-sign__note {
  margin: 0;
  font-size: 12px;
  line-height: 1.3;
  color: #444;
}

/* Footer: the sign's stop ID block, right-aligned as it is on the sign. */
.gtfs-display--map .sfmta-sign-popup .sfmta-sign__foot {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px;
  padding: 5px 10px 6px;
  background: #011e41;
  color: #fff;
}
.gtfs-display--map .sfmta-sign-popup .sfmta-sign__foot-label {
  font-size: 10px;
  line-height: 1;
}
.gtfs-display--map .sfmta-sign-popup .sfmta-sign__id {
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}

/* Close button: navy on the yellow header, squared off with the corner. */
.gtfs-display--map .sfmta-sign-popup .maplibregl-popup-close-button {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 0;
  color: #011e41;
  font-size: 16px;
  line-height: 22px;
}
.gtfs-display--map .sfmta-sign-popup .maplibregl-popup-close-button:hover {
  background-color: rgba(1, 30, 65, 0.12);
}

/* The tip meets whichever band it points from — footer navy below the sign,
   header yellow above it. Sideways anchors meet the white body and keep
   MapLibre's white. */
.gtfs-display--map .sfmta-sign-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.gtfs-display--map .sfmta-sign-popup.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.gtfs-display--map .sfmta-sign-popup.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
  border-top-color: #011e41;
}
.gtfs-display--map .sfmta-sign-popup.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.gtfs-display--map .sfmta-sign-popup.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.gtfs-display--map .sfmta-sign-popup.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
  border-bottom-color: #fdb913;
}