Swap flag emoji for real (square, bordered) SVG flags

Emoji flags are font glyphs, not shapes — no way to resize, border, or
tone them down to fit this app's controlled, hand-drawn-icon look
(same reasoning the topbar readout already settled earlier this
session). Vendored flag-icons' pre-cropped square SVGs (MIT) instead,
framed in a small rounded-square badge — the same convention
icons.js's MAP_MARKER_ICON already uses for framing a glyph, not a new
visual language.

public/js/offline_data.js

@@ -25,13 +25,16 @@ function formatRunning(status) {
   return `Building…${elapsed}`;
 }
 
-// Two Unicode regional indicator symbols, offset from the country's own
-// ISO A2 letters — the standard zero-asset way to get a flag glyph (most
-// platforms render the pair as one flag; a code with no assigned flag,
-// e.g. Kosovo's "XK", just falls back to showing the two letters, not
-// broken, just plainer).
-function flagEmoji(code) {
-  return [...code.toUpperCase()].map((c) => String.fromCodePoint(127397 + c.charCodeAt(0))).join("");
+// Vendored square-cropped SVGs (public/vendor/flag-icons/, MIT, see
+// docs/third-party-notices.adoc) rather than Unicode flag emoji — emoji
+// are font glyphs, not shapes, so they can't be resized/bordered/muted to
+// fit this app's own controlled, hand-drawn-icon look the way a real SVG
+// can (same reasoning the topbar readout's icons already settled on
+// earlier — see icons.js). Framed in a small rounded-square badge in the
+// markup below, the same convention icons.js's MAP_MARKER_ICON already
+// uses for framing a category glyph, rather than a new visual language.
+function flagIconUrl(code) {
+  return `/vendor/flag-icons/1x1/${code.toLowerCase()}.svg`;
 }
 
 // meta.source is a Protomaps build filename like "20260910.pmtiles" — the
@@ -90,7 +93,8 @@ class RegionPicker {
         <li>
           <label>
             <input type="checkbox" value="${escapeHtml(region.code)}" ${selected.has(region.code) ? "checked" : ""}>
-            <span aria-hidden="true">${flagEmoji(region.code)}</span> ${escapeHtml(region.name)}
+            <img class="offline-data-panel__flag" src="${flagIconUrl(region.code)}" alt="" width="18" height="18">
+            ${escapeHtml(region.name)}
           </label>
         </li>`,
       )