/* assets/css/markers.css - text markers made by themap/markers.js + MapController._icon:
   bus stops ("8→12" in a box framed in the platform band's colour) and entrances ("41").
   Loaded on the map page and on every page with a mini map (place, line). */

/* text markers (themap/markers.js): bus stops "8→12" and entrances "41" instead of an icon */
.poi--tag { overflow: visible; }
.poiTag {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  white-space: nowrap;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
  transform: translate(-50%, -50%) scale(max(.8, var(--poi-s, 1)));
  transition: transform .15s, opacity .15s, box-shadow .15s;
}
.poi--tag:hover .poiTag { transform: translate(-50%, -50%) scale(calc(max(.8, var(--poi-s, 1)) * 1.08)); }
.poiTag > span { display: inline-flex; align-items: center; gap: 2px; }
.poiArrow { width: .95em; height: .7em; flex: none; }
.poi--tag.poi--selected .poiTag { transform: translate(-50%, -50%) scale(max(1.1, var(--poi-s, 1) * 1.15)); }
.poi--tag.poi--dim .poiTag { opacity: .4; }

/* bus stop: white box framed in its platform band's colour, like the signs */
.poi--stop .poiTag {
  padding: 6px 10px;
  border: 3.5px solid var(--tag, #152233);
  border-radius: 11px;
  background: #fff;
  color: var(--ink, #152233);
  font-size: 19px;
  letter-spacing: -.01em;
  box-shadow: 0 1px 4px rgba(21, 34, 51, .15);
}
.poi--stop.poi--selected .poiTag { background: var(--tag, #152233); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .21); box-shadow: 0 0 0 5px rgba(55, 73, 240, .18), 0 2px 5px rgba(21, 34, 51, .18); }

/* entrance: dark tag with an "enter" arrow and the number */
.poi--entrance .poiTag {
  padding: 5px 9px 5px 7px;
  border: 2px solid #fff;
  border-radius: 8px;
  background: var(--ink, #152233);
  color: #fff;
  font-size: 16px;
  box-shadow: 0 1px 3px rgba(21, 34, 51, .21);
}
.poiTagIco { flex: none; }
.poi--entrance.poi--selected .poiTag { background: var(--blue, #3749F0); box-shadow: 0 0 0 5px rgba(55, 73, 240, .18), 0 2px 5px rgba(21, 34, 51, .18); }

/* entrances at the same spot share a tag: "42 | 43" */
.poiPart { padding: 0 2px; border-radius: 4px; }
.poiSep { align-self: stretch; width: 1.5px; margin: 1px 3px; background: rgba(255, 255, 255, .45); }
.poi--entrance.poi--selected .poiPart:not(.is-on) { opacity: .6; }
.poi--entrance.poi--selected .poiPart.is-on { background: #fff; color: var(--blue, #3749F0); }