/* Phosphor regular is the shared functional icon family. Illustrations,
   photographs and system chrome deliberately do not use this class. */
svg.ui-icon {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
  max-width: none;
  fill: currentColor;
  vertical-align: middle;
  pointer-events: none;
}
svg.ui-icon.ui-icon-inline { width: 16px; height: 16px; }
.ui-icon-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.ui-icon-label > span { min-width: 0; }

/* Old Figma back images were reversed with a transform. Phosphor carets
   already point in their named direction and must remain untransformed. */
.top-left-return > svg.ui-icon.page-return-icon,
#personaOverlay .persona-skip > svg.ui-icon.page-return-icon,
.route-guide .guide-return > svg.ui-icon,
svg.ui-icon.pc-chevron,
svg.ui-icon.pe-row-chevron {
  width: 24px;
  height: 24px;
  transform: none;
}
svg.ui-icon.pc-chevron,
svg.ui-icon.pe-row-chevron { width: 16px; height: 16px; }

#routeStart,
#routeMapNav,
#routeIdentify,
#routeExport,
#routeLocate,
#routeIpLocate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
}
#routeStart > span,
#routeIdentify > span { font: inherit; }
.route-zoom > button {
  display: grid;
  place-items: center;
  padding: 0;
  min-width: 44px;
  min-height: 44px;
}
.route-guide .guide-map-tools > button { color: #ffffff; }
.route-guide .guide-route-meta > li > svg.ui-icon { color: #767676; }
.pc-empty-art > svg.ui-icon,
.pc-route-art > svg.ui-icon { width: 24px; height: 24px; }
.pc-role > svg.ui-icon { width: 16px; height: 16px; }